/* OD Nutra design system: components
   Load after tokens.css. Components read semantic tokens only, so the same
   markup works on paper, mist, forest and film surfaces. Docs: design/DESIGN_SYSTEM.md. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: var(--body-track);
  color: var(--text-1);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-focus); }

[data-surface] { background-color: var(--surface-1); color: var(--text-1); }

/* ---------- Type ---------- */
.t-display, .t-h2, .t-h3 { margin: 0; text-wrap: balance; }
.t-display { font-size: var(--display-size); line-height: var(--display-leading); letter-spacing: var(--display-track); font-weight: var(--display-weight); }
.t-h2 { font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-track); font-weight: var(--h2-weight); }
.t-h3 { font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--h3-track); font-weight: var(--h3-weight); }
.t-lede { font-size: var(--lede-size); line-height: var(--lede-leading); letter-spacing: var(--lede-track); color: var(--text-2); max-width: var(--measure); }
.t-body { font-size: var(--body-size); line-height: var(--body-leading); letter-spacing: var(--body-track); color: var(--text-2); max-width: 36em; }
.t-small { font-size: var(--small-size); letter-spacing: var(--small-track); color: var(--text-2); }
.t-label {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-size: var(--label-size); font-weight: var(--weight-medium); letter-spacing: var(--label-track);
  color: var(--text-accent);
}
/* The lime dot is the one place the signal color sits next to text */
.t-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
[data-surface="film"] .t-display, [data-surface="film"] .t-lede { text-shadow: var(--text-shadow-film); }
/* Two weights in one title: the lead words semibold, the rest regular */
.t-strong { font-weight: var(--weight-semibold); }
/* On white sections the strong lead words of a title turn brand green (Lino 2026-10-29,
   after Stooku); over media and on forest --title-strong is currentColor, so they stay one colour */
:is(.t-display, .t-h2) .t-strong { color: var(--title-strong); }
/* Title words wrapped one per span for the entrance; they wrap like plain text */
.word { display: inline-block; }

/* ---------- Badge ----------
   A pill that sits above a title: sparkle, short line, optional chevron when it
   links somewhere. White with a hairline on paper, glass over film and forest. */
.badge {
  display: flex; align-items: center; gap: var(--space-8); width: fit-content;
  max-width: 100%; min-height: 34px; margin: 0; padding: 6px var(--space-12) 6px 10px;
  font-size: var(--badge-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); line-height: 1.2;
  color: var(--badge-fg); text-shadow: var(--badge-text-shadow);
  background: var(--badge-bg); border: 1px solid var(--badge-rim); border-radius: var(--radius-pill);
  box-shadow: var(--badge-shadow);
  -webkit-backdrop-filter: var(--badge-blur); backdrop-filter: var(--badge-blur);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.badge__icon { width: 14px; height: 14px; flex: none; color: var(--badge-icon); }
.badge__chevron { width: 6px; height: 10px; flex: none; margin-left: 2px; opacity: 0.7; transition: transform var(--dur-fast) var(--ease-out); }
a.badge:hover { background: var(--badge-bg-hover); }
a.badge:hover .badge__chevron { transform: translateX(2px); }

/* ---------- Buttons ----------
   Primary: one per view. Idle, a light runs round a thin ring outside the
   pill (the HorizonX checkout-success beam) and the arrow pushes once a lap.
   Hover with a mouse: the pill leans toward the pointer under a soft lime
   spotlight, the beam holds and the arrow steps forward.
   Secondary: glass over film and forest, outline on paper and mist. */
@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.btn {
  position: relative;
  height: var(--btn-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 30px;
  border-radius: var(--radius-pill);
  font-size: var(--btn-size); letter-spacing: var(--btn-track); font-weight: var(--weight-medium);
  line-height: var(--control-leading);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn__chevron { width: 7px; height: 12px; flex: none; }
.btn__arrow { display: block; width: 16px; height: 16px; margin-left: -4px; flex: none; }

.btn--primary {
  isolation: isolate;
  background: var(--primary-bg); color: var(--primary-fg);
  box-shadow: var(--primary-halo), var(--primary-inset);
  transform: translate(var(--cta-dx, 0px), var(--cta-dy, 0px));
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn--primary:hover { box-shadow: var(--primary-halo-hover), var(--primary-inset); }
.btn--primary::before, .btn--primary::after { content: ''; position: absolute; border-radius: inherit; pointer-events: none; }
.btn--primary::before {
  inset: -7px; padding: 1.5px;
  background: conic-gradient(from var(--beam-angle), transparent 0deg 280deg, var(--beam-tail) 318deg, var(--beam-head) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ds-beam var(--beam-period) linear var(--beam-delay) infinite;
}
.btn--primary::after {
  inset: 0; z-index: -1;
  background: radial-gradient(130px circle at var(--cta-mx, 50%) var(--cta-my, 50%), var(--spotlight), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.btn--primary:is(:hover, .is-hot)::after { opacity: 1; }
.btn--primary .btn__arrow { animation: ds-nudge var(--beam-period) ease-in-out calc(var(--beam-delay) + 100ms) infinite; }
.btn--primary:is(:hover, :focus-visible)::before { animation-play-state: paused; }
.btn--primary:is(:hover, :focus-visible) .btn__arrow { animation: none; transform: translateX(4px); transition: transform var(--dur-fast) var(--ease-out); }
@keyframes ds-beam { to { --beam-angle: 360deg; } }
@keyframes ds-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  64% { transform: translateX(5px); }
  73% { transform: translateX(0); }
  81% { transform: translateX(3px); }
  89% { transform: translateX(0); }
}

.btn--secondary {
  color: var(--secondary-fg);
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-rim);
  box-shadow: var(--secondary-inset), var(--secondary-shadow);
  -webkit-backdrop-filter: var(--secondary-blur);
  backdrop-filter: var(--secondary-blur);
  text-shadow: var(--secondary-text-shadow);
}
.btn--secondary:hover { background: var(--secondary-bg-hover); }

/* Solid: the primary's colors without the beam, for an action that repeats in one
   view (one per card), so the beam stays reserved for the single primary. */
.btn--solid {
  background: var(--primary-bg); color: var(--primary-fg);
  box-shadow: var(--solid-shadow), var(--primary-inset);
}
.btn--solid .btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn--solid:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Glass controls (small round or pill controls over film) ---------- */
.glass {
  color: var(--white);
  background: rgb(var(--rgb-white) / 0.12);
  border: 1px solid rgb(var(--rgb-white) / 0.45);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgb(var(--rgb-white) / 0.3), 0 6px 20px -10px rgb(var(--rgb-ink) / 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.glass:hover { background: rgb(var(--rgb-white) / 0.22); }
.glass--pill {
  height: var(--control-h); padding: 0 20px;
  display: inline-flex; align-items: center;
  font-size: var(--ui-size); font-weight: var(--weight-semibold); letter-spacing: var(--ui-track);
  line-height: var(--control-leading);
}
.glass--round { width: var(--control-h); height: var(--control-h); display: inline-grid; place-items: center; }

/* ---------- Popover (dropdowns, menus): always paper, even over film ---------- */
.popover {
  padding: var(--space-8);
  background: var(--surface-1); color: var(--text-1); text-shadow: none;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--popover-shadow);
}
.popover[hidden] { display: none; }
.popover__item {
  display: block; padding: 11px 14px; border-radius: var(--radius-item);
  font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track);
  line-height: var(--control-leading);
}
.popover__item small { display: block; margin-top: 2px; font-size: var(--small-size); font-weight: var(--weight-regular); color: var(--text-2); letter-spacing: var(--small-track); }
.popover__item:hover { background: var(--surface-2); }

/* ---------- Proof strip ----------
   Four short facts with line icons, straight under a hero. Four columns split
   by hairlines; two by two under 1100px, icon above the text under 760px.
   Only facts the client can back up go here. */
.proof-strip__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--space-40) var(--gutter);
}
.proof-strip__item {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--space-16);
  padding: var(--space-4) var(--space-24);
}
.proof-strip__item + .proof-strip__item { border-left: 1px solid var(--border); }
/* Top-aligned so titles stay on one line across columns when a subtitle wraps;
   the 7px drop centers the icon on a one-line title plus one-line subtitle. */
.proof-strip__icon { width: 32px; height: 32px; flex: none; margin-top: 7px; color: var(--text-accent); }
.proof-strip__copy { margin: 0; min-width: 0; }
.proof-strip__title {
  display: block;
  font-size: var(--body-size); font-weight: var(--weight-semibold); letter-spacing: var(--btn-track); line-height: 1.3;
  color: var(--text-1);
}
.proof-strip__text {
  display: block; margin-top: 3px;
  font-size: var(--ui-size); letter-spacing: var(--ui-track); line-height: 1.4;
  color: var(--text-2);
}
@media (max-width: 1100px) {
  .proof-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
  .proof-strip__item { justify-content: flex-start; padding: var(--space-32) var(--space-24); }
  .proof-strip__item + .proof-strip__item { border-left: 0; }
  .proof-strip__item:nth-child(odd) { padding-left: 0; }
  .proof-strip__item:nth-child(even) { border-left: 1px solid var(--border); }
  .proof-strip__item:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .proof-strip__item { flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-24) 0; }
  .proof-strip__item:nth-child(odd) { padding-right: var(--space-16); }
  .proof-strip__item:nth-child(even) { padding-left: var(--space-16); }
  .proof-strip__icon { width: 28px; height: 28px; margin-top: 0; }
}

/* ---------- Section head, text link, actions ---------- */
.section-head .t-h2 { margin-top: var(--space-24); max-width: 18em; }
.section-head .t-lede { margin: var(--space-24) 0 0; }
/* Split head (v68, Lino): badge and title on the left, the lede on the right,
   bottom-aligned to the title's last line. Stacks at 1000px and below. */
.section-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--space-64); align-items: end; }
.section-head--split > .t-lede { margin: 0; }
@media (max-width: 1000px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .section-head--split > .t-lede { margin-top: var(--space-24); justify-self: start; }
}
.text-link {
  font-size: var(--btn-size); font-weight: var(--weight-medium); letter-spacing: var(--btn-track);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--border-control);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { color: var(--text-accent); text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); }
.nowrap { white-space: nowrap; }

/* ---------- Capability card ----------
   A photo card for one production line, in the same language as the path card:
   a full-bleed photo under the film scrim, a frosted spec panel at the top (one
   row per spec: line icon, label, value) and, at the bottom over the photo, the
   title, one line and two actions (solid button + text link). The card is film
   (data-surface="film") so text and links use the white film colors. Used in
   pairs on paper; 1:1 on wide screens, 3:4 when the pair or the column gets
   narrow, and it grows past either when its content needs the room. */
.cap-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; aspect-ratio: 1 / 1;
  padding: var(--space-32);
  border-radius: var(--radius-panel);
  background: var(--surface-1);
  container-type: inline-size;
}
.cap-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cap-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform var(--dur-settle) var(--ease-entrance);
}
.cap-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-bottom); pointer-events: none; }
.cap-card:hover .cap-card__media img { transform: scale(1.04); }

.cap-card__specs, .pack-item__specs {
  width: min(100%, 320px); margin: 0; padding: var(--space-4) var(--space-16);
  background: var(--panel-bg); border: 1px solid var(--panel-rim); border-radius: var(--radius-card);
  box-shadow: var(--panel-inset), var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
}
.cap-card__specs > div, .pack-item__specs > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-12) 0;
}
.cap-card__specs > div + div, .pack-item__specs > div + div { border-top: 1px solid var(--panel-rim); }
.cap-card__specs dt, .pack-item__specs dt {
  display: flex; align-items: center; gap: var(--space-12);
  font-size: var(--ui-size); letter-spacing: var(--ui-track); line-height: 1.3;
  color: var(--text-2); text-shadow: var(--text-shadow-film);
}
.cap-card__specs dd, .pack-item__specs dd {
  margin: 0; text-align: right; white-space: nowrap;
  font-size: var(--ui-size); font-weight: var(--weight-semibold); letter-spacing: var(--ui-track); line-height: 1.3;
  color: var(--text-1); text-shadow: var(--text-shadow-film);
}
.cap-card__icon { width: 18px; height: 18px; flex: none; color: var(--signal); }

.cap-card__body { margin-top: auto; padding-top: var(--space-32); }
.cap-card__body .t-h3 { text-shadow: var(--text-shadow-film); }
.cap-card__body .t-body { margin: var(--space-12) 0 var(--space-24); max-width: 30em; text-shadow: var(--text-shadow-film); }
.cap-card .text-link { text-shadow: var(--text-shadow-film); }

@container (max-width: 360px) {
  .cap-card__specs { width: 100%; padding: var(--space-4) var(--space-12); }
  .cap-card__specs > div { padding: var(--space-8) 0; }
  .cap-card__specs :is(dt, dd) { font-size: var(--small-size); letter-spacing: var(--small-track); }
  .cap-card__specs dt { gap: var(--space-8); }
  .cap-card__icon { width: 16px; height: 16px; }
}
/* Laptops: the square stops at --fit-card-h (tokens.css); the photo crops top and bottom. */
@media (min-width: 1001px) and (max-height: 900px) {
  .cap-card { width: 100%; max-height: var(--fit-card-h); } /* width fixed so the cap trims height, not width */
}
@media (max-width: 1000px) {
  .cap-card { aspect-ratio: 3 / 4; }
  .cap-card::before { background: var(--scrim-bottom-tall); }
}
@media (max-width: 760px) {
  .cap-card { aspect-ratio: 1 / 1; padding: var(--space-20); }
  .cap-card__body { padding-top: var(--space-24); }
  .cap-card__body .t-body { margin: var(--space-8) 0 var(--space-20); }
}
@media (max-width: 520px) {
  .cap-card { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-card__media img { transition: none; }
  .cap-card:hover .cap-card__media img { transform: none; }
}

/* ---------- Logo strip ----------
   "Where it sells" row: a small centered caption, then brand marks with their names
   between two hairlines that fade out at the ends, then a short disclaimer.
   Marks are one grey tone (text-2), never brand colors and never links, so they
   read as channels, not partners; the disclaimer is always visible. The row wraps
   centered on narrow screens. */
.logo-strip { text-align: center; }
.logo-strip__caption {
  margin: 0;
  font-size: var(--ui-size); font-weight: var(--weight-regular); letter-spacing: var(--ui-track); line-height: 1.4;
  color: var(--text-2);
}
.logo-strip__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-24) var(--space-52);
  margin: var(--space-24) 0 0; padding: var(--space-32) 0; list-style: none;
  --hairline: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
  background: var(--hairline) top / 100% 1px no-repeat, var(--hairline) bottom / 100% 1px no-repeat;
}
.logo-strip__item {
  display: inline-flex; align-items: center; gap: var(--space-12); white-space: nowrap;
  font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); line-height: 1;
  color: var(--text-2);
}
.logo-strip__mark { width: 22px; height: 22px; flex: none; fill: currentColor; }
.logo-strip__note {
  margin: var(--space-20) auto 0; max-width: 46em;
  font-size: var(--small-size); letter-spacing: var(--small-track); line-height: 1.5;
  color: var(--text-2);
}
@media (max-width: 760px) {
  .logo-strip__list { gap: var(--space-20) var(--space-32); margin-top: var(--space-20); padding: var(--space-24) 0; }
  .logo-strip__mark { width: 20px; height: 20px; }
}

/* ---------- Path card ----------
   A tall photo card for one way in ("I have X"): a full-bleed image under a film
   scrim, an overlay that shows what the path takes, then title, one line and a solid
   CTA at the bottom. The CTA stretches over the whole card, so the card is one link
   and one tab stop. Two overlays:
   .path-card__panel    a frosted panel listing inputs, one row each with a line icon
   .path-card__callouts a dot pinned on the object, a leader line --len long (in
                        percent of the card width) and a small uppercase label
                        outside the object; --x/--y place the dot (percent of
                        the card), .is-end runs the line and label to the left
   Used in pairs; the card grows past 4:5 when its content needs the room. Below
   1000px the pair gets narrow, so the card turns 2:3 to keep the overlay clear of
   the text and the scrim grows taller (--scrim-bottom-tall) for the longer wrapped
   copy; callouts take --x-tall there (the image crops at the sides, not in height). */
.path-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; aspect-ratio: 4 / 5;
  padding: var(--space-32);
  border-radius: var(--radius-panel);
  background: var(--surface-1);
  container-type: inline-size;
}
.path-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.path-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform var(--dur-settle) var(--ease-entrance);
}
.path-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-bottom); pointer-events: none; }
.path-card:hover .path-card__media img { transform: scale(1.04); }

.path-card__panel {
  width: min(100%, 300px); margin: 0; padding: var(--space-8) var(--space-16);
  background: var(--panel-bg); border: 1px solid var(--panel-rim); border-radius: var(--radius-card);
  box-shadow: var(--panel-inset), var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
}
.path-card__panel li {
  display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0;
  font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); line-height: 1.3;
  color: var(--text-1); text-shadow: var(--text-shadow-film);
}
.path-card__panel li + li { border-top: 1px solid var(--panel-rim); }
.path-card__icon { width: 18px; height: 18px; flex: none; color: var(--signal); }

.path-card__callouts { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.path-card__callouts li {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 6px;
  font-size: var(--label-size); font-weight: var(--weight-semibold); letter-spacing: 0.08em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  color: var(--text-1); text-shadow: var(--callout-text-shadow);
  /* translate, not transform: the reveal animation owns transform */
  translate: -7px -50%;
}
.path-card__callouts .is-end { flex-direction: row-reverse; translate: calc(-100% + 7px) -50%; }
.path-card__callouts li::before {
  content: ""; order: -2; width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--white) content-box; padding: 4px;
  box-shadow: 0 0 0 1px rgb(var(--rgb-white) / 0.6), 0 0 14px 2px rgb(var(--rgb-glow) / 0.5);
}
.path-card__callouts li::after {
  content: ""; order: -1; flex: none; height: 1px;
  width: calc(var(--len, 8) * 1cqw);
  background: linear-gradient(90deg, rgb(var(--rgb-white) / 0.8), rgb(var(--rgb-white) / 0.35));
}
.path-card__callouts .is-end::after { background: linear-gradient(270deg, rgb(var(--rgb-white) / 0.8), rgb(var(--rgb-white) / 0.35)); }

.path-card__body { margin-top: auto; padding-top: var(--space-32); }
.path-card__body .t-h3 { text-shadow: var(--text-shadow-film); }
.path-card__body .t-body { margin: var(--space-12) 0 var(--space-24); max-width: 30em; text-shadow: var(--text-shadow-film); }
.path-card .btn { position: static; }
.path-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.path-card:hover .btn__arrow { transform: translateX(4px); }

@container (max-width: 440px) {
  /* Narrow cards: labels shrink and drop the leader line so they stay inside the card */
  .path-card__callouts li { font-size: 11px; letter-spacing: 0.06em; }
  .path-card__callouts li::after { display: none; }
  .path-card__panel { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); padding: var(--space-4) var(--space-12); }
  .path-card__panel li { padding: var(--space-8) 0; font-size: var(--small-size); gap: var(--space-8); }
  .path-card__panel li + li { border-top: 0; }
  .path-card__panel li:nth-child(n+3) { border-top: 1px solid var(--panel-rim); }
  .path-card__icon { width: 16px; height: 16px; }
}
/* Desktop: the page may stretch the card shorter than 4:5 (#start fits the screen
   since v68) and the photo then crops top and bottom around its centre, so the
   callout dots move with it: --yn is --y as a plain number, and 100cqw + 64px is
   the card's width (the card is the container). At exactly 4:5 this equals --y.
   A card whose photo crops off-centre sets --focus: 50% <fy> and --fy as the same
   number (v69: the development photo keeps its notebook clear of the title). */
@media (min-width: 1001px) {
  .path-card__callouts li[style*="--yn"] { top: calc(var(--fy, 0.5) * 100% + (var(--yn) - var(--fy, 0.5)) * 1.25 * (100cqw + 2 * var(--space-32))); }
}
@media (max-width: 1000px) {
  .path-card { aspect-ratio: 2 / 3; }
  .path-card::before { background: var(--scrim-bottom-tall); }
  .path-card__callouts li { left: var(--x-tall, var(--x)); }
}
@media (max-width: 760px) {
  .path-card { padding: var(--space-20); }
  .path-card__body { padding-top: var(--space-24); }
  .path-card__body .t-body { margin: var(--space-8) 0 var(--space-20); }
  .path-card .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .path-card__media img, .path-card .btn__arrow { transition: none; }
  .path-card:hover .path-card__media img { transform: none; }
}

/* ---------- Scene ----------
   A full-screen scene that stays pinned while the page scrolls past it. The
   section is several screens tall; the stage sticks to the viewport and
   ds/powder-scene.js draws into the canvas across the whole screen: the scroll
   position sets the chapter, and the particles keep moving gently on their own
   while the scene is on screen.
   The copy sits in the bottom corners so the scene carries the screen:
   .scene__copy (badge + one sentence split into beats, .scene__beat
   data-beat="0..2", that light up chapter by chapter; past beats step back to
   text-2) bottom-left, and .scene__meta (chapter counter, .scene__now, and the
   progress bars) bottom-right. Tall screens stack the copy above the meta row.
   .is-static (reduced motion, no WebGL2) drops the pinning: one screen, every
   beat shown, the final chapter as a still.
   Use on data-surface="forest". */
.scene { position: relative; height: 500vh; height: 500svh; background: var(--surface-1); --scene-low: max(var(--space-52), env(safe-area-inset-bottom)); }
.scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--scene-bg); }
.scene__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scene-scrim-corner); pointer-events: none; }
.scene__copy { position: absolute; z-index: 2; left: var(--gutter); bottom: var(--scene-low); width: min(30rem, 40vw); }
.scene__line { margin-top: var(--space-16); }
.scene__beat { transition: color var(--dur-reveal) var(--ease-out); }
.scene.is-live .scene__beat { opacity: calc(0.16 + 0.84 * var(--o, 0)); }
.scene.is-live .scene__beat.is-past { color: var(--text-2); }
.scene__meta { position: absolute; z-index: 2; right: var(--gutter); bottom: var(--scene-low); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-12); }
.scene__count { font-variant-numeric: tabular-nums; }
.scene__now { color: var(--text-1); }
.scene__progress { display: flex; gap: var(--space-8); width: 168px; }
.scene__progress i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--scene-track); }
.scene__progress i::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform-origin: left; scale: var(--f, 0) 1; }
@media (max-aspect-ratio: 105/100) {
  .scene { height: 400vh; height: 400svh; --scene-low: max(var(--space-24), env(safe-area-inset-bottom)); }
  .scene__stage { --scene-focus-y: 34%; }
  .scene__stage::after { background: var(--scene-scrim-bottom); }
  .scene__copy { right: var(--gutter); bottom: calc(var(--scene-low) + var(--space-40)); width: auto; max-width: 34rem; }
  .scene__meta { left: var(--gutter); flex-direction: row; align-items: center; justify-content: space-between; }
  .scene__progress { width: 132px; }
}
.scene.is-static { height: auto; }
.scene.is-static .scene__stage { position: relative; min-height: 560px; }
.scene.is-static .scene__meta { display: none; }
.scene.is-static .scene__copy { bottom: var(--scene-low); }

/* Frame scene (ds/frame-scene.js): the same pinned .scene playing a pre-rendered
   sequence, plus .scene__card, the offer that fades in on the final frame in the
   free right-hand part of the picture. --card (0..1) comes from the script; the card
   stays focusable and tabbing into it scrolls the scene to its end. On phones the
   card takes the copy's place at the bottom. Reduced motion: the final frame, copy
   and card together, nothing pinned. */
.scene--frames .scene__stage { --scene-focus-x: 50%; }
.scene--frames .scene__stage::after { background: linear-gradient(to left, rgb(var(--rgb-ink) / calc(0.5 * var(--card, 0))) 0, transparent 46%), var(--scene-scrim-corner); }
.scene__card {
  position: absolute; z-index: 2; right: var(--gutter); top: clamp(96px, 15svh, 168px); width: min(23rem, 30vw);
  display: grid; gap: var(--space-12); padding: var(--space-28, 28px);
  background: rgb(var(--rgb-ink) / 0.42); border: 1px solid rgb(var(--rgb-white) / 0.14); border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  opacity: var(--card, 0); translate: 0 calc((1 - var(--card, 0)) * 16px);
  pointer-events: none;
}
.scene.has-card .scene__card, .scene__card:focus-within { opacity: 1; pointer-events: auto; }
.scene__card > * { margin: 0; }
.scene__card-label { color: var(--text-accent); }
.scene__card-amount small { display: block; font-size: var(--ui-size); font-weight: var(--weight-regular); letter-spacing: var(--ui-track); color: var(--text-2); }
.scene__card .t-small { color: var(--text-2); }
.scene__card .btn { justify-self: start; margin-top: var(--space-4); }
.scene__card-fine { font-size: 0.75rem; line-height: 1.45; }
.scene--frames.is-live .scene__copy { opacity: calc(1 - var(--card-copy, 0)); }
/* Mid-width screens: a higher, tighter card so it clears the stick pack on the final frame */
@media (min-width: 761px) and (max-width: 1200px) {
  .scene__card { top: clamp(88px, 11svh, 140px); gap: var(--space-8); padding: var(--space-24); }
}
@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) {
  .scene--frames .scene__stage::after { background: var(--scene-scrim-bottom); }
  .scene__card { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--scene-low) + var(--space-40)); width: auto; max-width: 34rem; padding: var(--space-20); }
  .scene--frames.is-live { --card-copy: var(--card, 0); }
}
.scene--frames.is-static .scene__card { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .scene--frames.is-static .scene__stage { min-height: 0; padding-bottom: var(--space-40); }
  .scene--frames.is-static .scene__canvas { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .scene--frames.is-static .scene__copy, .scene--frames.is-static .scene__card { position: relative; inset: auto; translate: none; margin: var(--space-24) var(--gutter) 0; }
}

/* ---------- Quote builder (Fast, competitive quoting) ----------
   Shared pinned stage:
   ds/quote-scroll.js writes --k1..--k5 (each step's progress) and data-step on
   the section. The defaults below are the finished state, which is what shows
   without JavaScript and under reduced motion. */
.qs { --qp: 1; --k1: 1; --k2: 1; --k3: 1; --k4: 1; --k5: 1;
  position: relative; height: 340svh; padding: 0 var(--gutter); background: var(--surface-1); color: var(--text-1); }
.qs__stage { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: var(--space-64) 0; box-sizing: border-box; }
.qs__inner { width: 100%; max-width: var(--content-max); margin: 0 auto; }
html:not(.js) .qs, .qs.is-static { height: auto; }
html:not(.js) .qs .qs__stage, .qs.is-static .qs__stage { position: relative; min-height: 0; padding: var(--section-y) 0; }

.qs-adv { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }

@media (max-width: 760px) {
  .qs { height: 300svh; }
  .qs__stage { padding: var(--space-40) 0; }
}

/* ---------- Quoting, version 1: the quote assembles itself ---------- */
.qs1 .qs__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px;
  grid-template-areas: "head sheet" "steps sheet" "cta sheet"; grid-template-rows: auto auto 1fr; }
.qs1__head { grid-area: head; }
.qs1 .t-lede { max-width: 32em; }
.qs1 .qsheet { grid-area: sheet; align-self: center; }
.qs1__cta { grid-area: cta; justify-self: start; align-self: start; margin-top: var(--space-32); }
.qs1__mprog { grid-area: mprog; display: none; }

/* Five steps; the current one is dark with a lime ring and a hairline that fills with the scroll */
.qs-steps { grid-area: steps; list-style: none; margin: var(--space-32) 0 0; padding: 0; border-top: 1px solid var(--border); }
.qs-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 16px; letter-spacing: -0.01em; line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out); }
.qs-steps__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--weight-semibold);
  border: 1px solid var(--border-control); color: var(--text-2); box-sizing: border-box;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.qs-steps__tag { font-size: 12.5px; color: var(--text-2); }
.qs-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--text-accent);
  transform: scaleX(0); transform-origin: left; }
.qs-steps li.is-done { color: var(--text-1); }
.qs-steps li.is-done .qs-steps__n { background: var(--surface-2); border-color: transparent; color: var(--text-accent); }
.qs-steps li.is-now { color: var(--text-1); font-weight: var(--weight-medium); }
.qs-steps li.is-now .qs-steps__n { background: var(--primary-bg); border-color: transparent; color: var(--primary-fg); box-shadow: 0 0 0 5px rgb(var(--rgb-glow) / 0.28); }
.qs-steps li.is-now .qs-steps__tag { color: var(--text-accent); font-weight: var(--weight-medium); }
.qs-steps li.is-now::after { transform: scaleX(var(--f, 0)); }

/* The sample sheet: grey bars instead of figures, so nothing of the real costing tool shows */
.qsheet { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: 22px; padding: 36px 40px 32px;
  box-shadow: 0 1px 0 rgb(var(--rgb-white) / 0.9) inset, 0 40px 80px -40px rgb(var(--rgb-lift) / 0.35), 0 10px 24px -14px rgb(var(--rgb-lift) / 0.25); }
.qbar { display: block; height: 9px; border-radius: var(--radius-pill); background: var(--surface-3); transform-origin: left; }
.qsheet__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.qsheet__brand { font-size: 18px; font-weight: var(--weight-semibold); letter-spacing: -0.035em; }
.qsheet__kind { display: block; margin-top: 4px; font-size: var(--small-size); color: var(--text-2); }
.qsheet__status { display: grid; }
.qsheet__st { grid-area: 1 / 1; justify-self: end; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-out); }
.qsheet__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qsheet__st--run { background: var(--surface-2); color: var(--text-2); }
.qsheet__st--done { background: var(--primary-bg); color: var(--primary-fg); opacity: 0; }
.qsheet__st--done::before { background: var(--signal); }
.qs1[data-step="5"] .qsheet__st--run { opacity: 0; }
.qs1[data-step="5"] .qsheet__st--done { opacity: 1; }

/* Step 1: the brief fills in */
.qsheet__kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.qsheet__kv small, .qrows__head { font-size: 11.5px; color: var(--text-2); letter-spacing: 0.01em; }
.qsheet__kv small { display: block; margin-bottom: 9px; }
.qsheet__kv .qbar { transform: scaleX(clamp(0, calc(var(--k1) * 2.2 - var(--r) * 0.4), 1)); }

/* Step 2: a scan line runs down the sheet and the ingredient lines come in */
.qrows { position: relative; padding-top: 8px; }
.qrows__head, .qrows__list li { display: grid; grid-template-columns: minmax(0, 1fr) 92px 84px 26px; gap: 16px; align-items: center; }
.qrows__head { padding: 14px 0 8px; }
.qrows__list { list-style: none; margin: 0; padding: 0; }
.qrows__list li { --o: clamp(0, calc(var(--k2) * 7 - var(--r)), 1);
  --s: clamp(0, calc(var(--k3) * 7 - var(--r)), 1);
  --c: clamp(0, calc(var(--k4) * 7 - var(--r)), 1);
  padding: 13px 0; border-top: 1px solid var(--border); }
.qrows__name { opacity: calc(0.2 + 0.8 * var(--o)); transform: scaleX(calc(0.35 + 0.65 * var(--o))); }
.qrows__scan { position: absolute; left: -20px; right: -20px; top: calc(36px + var(--k2) * (100% - 36px)); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--signal) 20%, var(--signal) 80%, transparent); box-shadow: 0 0 14px 2px rgb(var(--rgb-glow) / 0.55);
  opacity: clamp(0, min(var(--k2) * 12, (1 - var(--k2)) * 12), 1); }

/* Step 3: each line finds a supplier and a price */
.qrows__src { justify-self: start; height: 20px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-2); opacity: var(--s); transform: scale(calc(0.9 + 0.1 * var(--s))); transform-origin: left; }
.qrows__src::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-accent); opacity: .7; }
.qrows__price { justify-self: end; transform-origin: right; transform: scaleX(var(--s)); }

/* Step 4: a specialist checks every line */
.qchk { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  border: 1px dashed var(--border-control); color: var(--primary-fg); }
.qchk::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--primary-bg); transform: scale(var(--c)); }
.qchk svg { position: relative; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: var(--c); }

.qsheet__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--border-control); }
.qrev { --a: clamp(0, calc((var(--k4) - 0.8) * 5), 1); display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); }
.qrev__av { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: var(--surface-2); border: 1px dashed var(--border-control); color: var(--text-accent); }
.qrev__av::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--primary-bg); opacity: var(--a); }
.qrev__av svg { position: relative; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.qs1[data-step="5"] .qrev__av, .qs1.is-static .qrev__av { color: var(--primary-fg); }
.qrev__txt { display: grid; }
.qrev__st { grid-area: 1 / 1; color: var(--text-1); font-weight: var(--weight-medium); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.qrev__st small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-2); }
.qs1:is([data-step="1"], [data-step="2"], [data-step="3"]) .qrev__st--wait,
.qs1[data-step="4"] .qrev__st--run, .qs1[data-step="5"] .qrev__st--done { opacity: 1; }

/* Step 5: the total settles and the review stamp lands */
.qtotal { text-align: right; font-size: 11.5px; color: var(--text-2); }
.qtotal__bar { width: 110px; height: 14px; margin: 8px 0 0 auto; background: var(--text-1); opacity: .85; transform-origin: right;
  transform: scaleX(clamp(0, calc(var(--k5) * 2), 1)); }
.qstamp { --st: clamp(0, calc((var(--k5) - 0.45) * 2.5), 1);
  position: absolute; right: 28px; bottom: 92px; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  color: var(--text-accent); border: 2px solid currentColor; background: rgb(var(--rgb-white) / 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: var(--st); transform: rotate(-12deg) scale(calc(1.5 - 0.5 * var(--st))); pointer-events: none; }
.qstamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; }
.qstamp b { display: block; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; }
.qstamp svg { width: 30px; height: 30px; margin: 0 auto 6px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Narrow screens: one column. The step list stays for screen readers; a compact
   progress line replaces it on screen so the sheet fits beside nothing. */
@media (max-width: 960px) {
  .qs1 .qs__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "mprog" "sheet" "cta"; grid-template-rows: none; }
  .qs1 .qs-steps { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .qs1__mprog { display: grid; gap: 10px; margin: var(--space-32) 0 var(--space-20); }
  .qs1__ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .qs1__ticks i { position: relative; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
  .qs1__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--text-accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
  .qs1__mstep { font-size: var(--small-size); color: var(--text-2); }
  .qs1__mtitle { font-size: 17px; font-weight: var(--weight-medium); letter-spacing: -0.01em; }
  .qs1 .qsheet { align-self: auto; }
  .qs1__cta { margin-top: var(--space-24); }
}
@media (max-width: 760px) {
  .qsheet { padding: 24px 20px 20px; border-radius: 18px; }
  .qsheet__kv { grid-template-columns: 1fr 1fr; }
  .qsheet__kv > div:nth-child(3), .qrows__list li:nth-child(n+5) { display: none; }
  .qrows__head, .qrows__list li { grid-template-columns: minmax(0, 1fr) 64px 24px; gap: 10px; }
  .qrows__src, .qrows__head span:nth-child(2) { display: none; }
  .qstamp { width: 112px; height: 112px; right: 14px; bottom: 76px; }
  .qstamp b { font-size: 10px; }
  .qstamp svg { width: 22px; height: 22px; }
}

/* ---------- Batch file (Quality & testing) ----------
   A pinned scroll story on paper. One lot moves through four checkpoints on a
   track (.lot__track > .checkpoint, data-qs-step 1 to 4); each card draws its own
   small proof as its step fills (--f). In the last two steps the Certificate of
   Analysis (.coa) lifts out of the fourth card, unfolds to the middle of the
   screen, fills its rows, is signed and stamped, and settles flat (--fan).
   ds/quote-scroll.js drives the steps (--k1..--k5, data-step, .is-done/.is-now);
   ds/quality-file.js moves the certificate and writes its sub-steps on .coa-wrap:
   --rise, --sig, --stamp, --ring, --sheen, --fan, and --r / --pop per row.
   Wide screens: four cards in a row. 900px and below: a vertical list of compact
   rows (the small proofs give way to a thin meter).
   .is-static (reduced motion, ?still): nothing pinned, every checkpoint done and
   the signed certificate laid out under the file.
   Lives on data-surface="brand" (deep teal-900 with grain since v71, Lino 2026-10-29); the file itself
   resets to paper tokens so the lot card and the certificate stay white.
   No stacked sheets behind the lot or the certificate (removed v70, Lino). */
.quality { position: relative; height: 560vh; height: 560svh; }
.quality__stage {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(var(--space-32), 8vh, var(--space-96)) clamp(var(--space-24), 5vh, var(--space-52));
}
.quality__inner { position: relative; width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.quality__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-24) var(--space-64); align-items: end; }
.quality__head .t-h2 { max-width: 15em; }
.quality__head .t-lede { margin: 0 0 4px; justify-self: end; max-width: 25em; }
.quality__file { position: relative; margin-top: clamp(var(--space-40), 6vh, var(--space-64)); padding-top: 30px; }
.quality__pool { position: absolute; left: 50%; top: 50%; width: 960px; height: 760px; translate: -50% -50%; background: var(--file-pool); opacity: 0; pointer-events: none; }

/* v71: the quality ground is the quote section's dark teal with the same fine grain
   (Lino 2026-10-29: "el fondo oscuro que necesito es el de la segunda"). */
:root { --bg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.quality[data-surface="brand"] { background: var(--bg-grain), var(--teal-900); background-blend-mode: soft-light, normal; }
/* Paper tokens for the file, without painting a white block over the brand section */
.quality__file[data-surface] { background: none; }

/* The lot: one main card */
.lot { position: relative; border-radius: var(--radius-panel); }
.lot--main {
  background: var(--card-bg); border: var(--card-rim-width) solid var(--card-rim); box-shadow: var(--card-shadow);
  padding: var(--space-20) var(--space-24) var(--space-24);
  transform-origin: 50% 0;
}
.quality.is-live .lot--main {
  transform: translateY(calc(var(--recede, 0) * 18px)) scale(calc(1 - var(--recede, 0) * 0.05));
  opacity: calc(1 - var(--recede, 0) * 0.72);
}
.lot__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding-bottom: var(--space-20); margin-bottom: var(--space-24); border-bottom: 1px solid var(--border); }
.lot__id { display: flex; align-items: center; gap: var(--space-12); margin: 0; font-size: var(--ui-size); letter-spacing: var(--ui-track); color: var(--text-2); }
.lot__id b { color: var(--text-1); font-weight: var(--weight-medium); font-size: 1.0625rem; letter-spacing: -0.01em; }
.lot__status {
  display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; padding: 5px var(--space-12) 5px 10px;
  font-size: var(--small-size); font-weight: var(--weight-medium); letter-spacing: var(--small-track); color: var(--text-accent);
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-1); white-space: nowrap;
}
.lot__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: var(--file-glow); }
.quality[data-step="5"] .lot__status { background: var(--file-now-bg); border-color: var(--file-now-rim); }
.bar { display: inline-block; vertical-align: middle; width: var(--w, 100%); height: 8px; border-radius: var(--radius-pill); background: var(--file-bar); }

/* The track: a line through the dots that fills as the lot moves on */
.lot__track { --gap: var(--space-16); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.lot__track::before, .lot__track::after { content: ""; position: absolute; left: 13px; top: 13px; height: 2px; border-radius: 2px; }
.lot__track::before { width: calc((100% + var(--gap)) * 0.75); background: var(--file-track); }
.lot__track::after {
  width: calc((100% + var(--gap)) / 4 * (var(--k1, 0) + var(--k2, 0) + var(--k3, 0)));
  background: var(--file-fill); box-shadow: var(--file-glow);
}
/* Wide screens: one height for all four cards (v69, Lino); each card takes the room
   under its dot down to the tallest one's foot. The compact rows below override this. */
.checkpoint { position: relative; min-width: 0; display: flex; flex-direction: column; perspective: 900px; }
/* v73 (Lino): the track line runs behind the dots, never over them. perspective makes each
   checkpoint its own stacking context, so the dot's z-index alone could not beat the line. */
.lot__track > .checkpoint { z-index: 1; }
.checkpoint__card { flex: 1 1 auto; }
.checkpoint__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-1); border: 1.5px solid var(--file-dot-rim); color: var(--file-mark-fg);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.checkpoint__dot svg { width: 13px; height: 13px; opacity: 0; scale: 0.4; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-slow) var(--ease-entrance); }
.checkpoint.is-now .checkpoint__dot { border-color: var(--signal); box-shadow: 0 0 0 6px var(--file-now-bg); }
.checkpoint.is-done .checkpoint__dot { background: var(--file-mark); border-color: transparent; }
.checkpoint.is-done .checkpoint__dot svg { opacity: 1; scale: 1; }
.checkpoint__card {
  margin-top: var(--space-20); padding: var(--space-16) var(--space-16) var(--space-20); min-height: 196px;
  border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--border);
  transition: opacity var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.quality.is-live .checkpoint:not(.is-done):not(.is-now) .checkpoint__card { opacity: 0.5; }
.checkpoint.is-now .checkpoint__card { background: var(--file-now-bg); border-color: var(--file-now-rim); }
.checkpoint__num { display: block; font-variant-numeric: tabular-nums; }
.checkpoint__title { margin: var(--space-8) 0 4px; font-size: 1.0625rem; line-height: 1.25; font-weight: var(--weight-medium); letter-spacing: -0.015em; }
.checkpoint__sub { margin: 0; font-size: var(--small-size); letter-spacing: var(--small-track); color: var(--text-2); }
.checkpoint__meter { display: none; }

/* The small proof on each card. --i orders the parts inside a card */
.proof { display: grid; gap: 9px; margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.proof .bar { transform-origin: left; scale: clamp(0, calc(var(--f, 0) * 4 - var(--i, 0)), 1) 1; }
.proof__row { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: var(--space-8); }
.proof__tick {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--file-dot-rim); color: var(--file-mark-fg); background: var(--surface-1);
}
.proof__tick svg { width: 10px; height: 10px; }
.proof--gmp .proof__tick svg { opacity: clamp(0, calc((var(--f, 0) * 3 - var(--i, 0) - 0.5) * 3), 1); }
.proof--gmp .proof__row .bar { scale: 1 1; }
.proof--test .proof__row { position: relative; grid-template-columns: minmax(0, 1fr) 16px; padding: 3px 6px; margin-inline: -6px; font-size: 12px; letter-spacing: 0; color: var(--text-2); }
.proof--test .proof__row::before {
  --d: calc(var(--f, 0) * 3 - var(--i, 0) - 0.5);
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--file-now-bg);
  opacity: clamp(0, calc(1 - var(--d) * var(--d) * 4), 1);
}
.proof--test { isolation: isolate; }
.proof--test .proof__tick { border-radius: 50%; }
.checkpoint.is-done .proof__tick, .proof--gmp .proof__tick:has(svg) { transition: background-color var(--dur-base) var(--ease-out); }
.proof--test .proof__tick svg { opacity: clamp(0, calc((var(--f, 0) * 3 - var(--i, 0) - 0.7) * 4), 1); }
.checkpoint.is-done .proof__tick { background: var(--file-mark); border-color: transparent; }
.proof--doc { position: relative; width: 74px; height: 92px; margin-top: var(--space-12); padding: 10px 9px; gap: 6px; align-content: start; border-radius: 6px; background: var(--doc-bg); border: 1px solid var(--doc-rim); box-shadow: 0 8px 18px -12px rgb(var(--rgb-lift) / 0.4); }
.proof--doc .bar { height: 5px; scale: 1 1; }
.proof--doc .bar:first-child { height: 7px; background: var(--text-2); opacity: 0.5; }
.quality.is-live .proof--doc { opacity: calc(1 - var(--rise, 0) * 4); }

/* The certificate: lifted out of the fourth card by ds/quality-file.js */
.coa-wrap { position: absolute; left: 0; top: 0; z-index: 3; width: 440px; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }
.quality.is-live .coa-wrap { opacity: 0; }
.coa {
  position: relative; margin: 0; padding: 30px 30px 26px; border-radius: 18px;
  background: var(--doc-bg); border: 1px solid var(--doc-rim); box-shadow: var(--doc-shadow);
  font-size: 13px; line-height: 1.3; color: var(--text-1);
}
.coa__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.coa__sheen::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(var(--rgb-beam) / 0.30) 45%, rgb(var(--rgb-white) / 0.6) 50%, rgb(var(--rgb-beam) / 0.30) 55%, transparent);
  transform: translateX(calc(-110% + var(--sheen, 0) * 340%)) skewX(-12deg);
  opacity: calc(1 - (var(--sheen, 0) - 0.5) * (var(--sheen, 0) - 0.5) * 4);
}
.coa__top { display: flex; justify-content: space-between; align-items: center; }
.coa__brand { font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: -0.035em; }
.coa__stamp {
  position: relative; padding: 4px 8px; border: 1.5px solid var(--doc-stamp); border-radius: 6px;
  font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-stamp);
  transform: rotate(-4deg) scale(calc(1.9 - var(--stamp, 0) * 0.9)); opacity: var(--stamp, 0);
}
.coa__stamp::after {
  content: ""; position: absolute; inset: -3px; border-radius: 8px; border: 2px solid var(--signal);
  scale: calc(1 + var(--ring, 0) * 0.8); opacity: calc((1 - var(--ring, 0)) * var(--stamp, 0) * 0.9);
}
.coa__title { margin: 26px 0 18px; font-size: 25px; line-height: 1.05; letter-spacing: -0.035em; font-weight: var(--weight-medium); }
.coa__kv { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; padding: 14px 0; border-block: 1px solid var(--doc-rule); }
.coa__kv small, .coa__head, .coa__foot small { display: block; font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-2); }
.coa__kv small { margin-bottom: 7px; }
.coa__kv b { font-weight: var(--weight-medium); }
.coa__head, .coa__rows li { display: grid; grid-template-columns: 1fr 1fr 22px; gap: 12px; align-items: center; }
.coa__head { padding: 14px 0 4px; }
.coa__rows { margin: 0; padding: 0; list-style: none; }
.coa__rows li { position: relative; padding: 11px 0; border-top: 1px solid var(--doc-rule); opacity: calc(0.25 + var(--r, 0) * 0.75); }
.coa__rows b { font-weight: var(--weight-medium); }
.coa__rows .bar { transform-origin: left; scale: var(--r, 0) 1; }
.coa__rows li::before {
  content: ""; position: absolute; inset: 2px -12px; z-index: -1; border-radius: 8px; background: var(--file-now-bg);
  opacity: calc(var(--r, 0) * (1 - var(--r, 0)) * 4);
}
.coa { isolation: isolate; }
.coa__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--file-mark); color: var(--file-mark-fg); scale: var(--pop, 0); }
.coa__ok svg { width: 12px; height: 12px; }
.coa__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--doc-rule); }
.coa__foot small { margin-bottom: 8px; }
.coa__sig { display: block; width: 92px; height: 26px; color: var(--text-1); }
.coa__sig path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sig, 0)); }
.coa__foot > div:last-child { text-align: right; }

@media (max-width: 1100px) {
  .quality__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .quality__head .t-lede { justify-self: start; }
  .lot__track { --gap: var(--space-12); }
  .checkpoint__card { padding-inline: var(--space-12); }
}
/* Compact: a vertical list of rows, fixed height so the line can fill in CSS */
@media (max-width: 900px) {
  .quality { height: 460vh; height: 460svh; }
  .quality__file { padding-top: 22px; }
  .lot--main { padding: var(--space-16) var(--space-20) var(--space-20); }
  .lot__top { padding-bottom: var(--space-16); margin-bottom: var(--space-20); }
  .lot__track { --row: 60px; --gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
  .lot__track::before, .lot__track::after { width: 2px; left: 13px; top: 13px; }
  .lot__track::before { height: calc((var(--row) + var(--gap)) * 3); }
  .lot__track::after { height: calc((var(--row) + var(--gap)) * (var(--k1, 0) + var(--k2, 0) + var(--k3, 0))); background: var(--file-fill-y); }
  .checkpoint { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-16); height: var(--row); }
  .checkpoint__card { margin: 0; padding: 4px 0 0; min-height: 0; background: none; border: 0; }
  .checkpoint.is-now .checkpoint__card { background: none; }
  .checkpoint__num, .proof { display: none; }
  .checkpoint__title { margin: 0 0 2px; font-size: 1rem; }
  .checkpoint__meter { display: block; height: 2px; margin-top: var(--space-8); max-width: 220px; border-radius: 2px; background: var(--file-track); overflow: hidden; }
  .checkpoint__meter::after { content: ""; display: block; height: 100%; background: var(--file-fill); transform-origin: left; scale: var(--f, 0) 1; }
}
@media (max-width: 760px) {
  .quality__head .t-lede { margin-top: calc(var(--space-12) * -1); }
  .lot__id { font-size: var(--small-size); gap: var(--space-8); }
  .lot__id b { font-size: 1rem; }
  .lot__id .bar { --w: 40px !important; }
  .coa-wrap { width: min(400px, calc(100vw - 2 * var(--gutter))); }
  .coa { padding: 22px 20px 20px; font-size: 12px; }
  .coa__title { margin: 18px 0 14px; font-size: 21px; }
  .coa__rows li { padding: 9px 0; }
}
@media (max-width: 420px) {
  .lot__id .lot__name { display: none; }
}

.quality.is-static { height: auto; }
.quality.is-static .quality__stage { position: relative; min-height: 0; padding-block: var(--section-y); }
.quality.is-static .coa-wrap { position: relative; margin: var(--space-64) auto 0; transform: none; opacity: 1; max-width: 100%; }

/* ---------- Entrance ----------
   Two triggers, one look. Above the fold, .reveal and .reveal-words run on page
   load (html.js comes from the first script in <head>). Below the fold, a
   [data-reveal] group plays when it scrolls in: ds/reveal.js adds html.reveal-live
   and then .is-in per group, so without that script nothing is ever hidden.
   Inside a group, .rv children rise in order: delay = --i x --group-stagger
   + --n x --stagger, where --i staggers sibling groups and --n the children inside one.
   .word spans pop up from 40% lower and 90% size with a small spring overshoot
   (--ease-spring), --n x --word-stagger after the group's start.
   Cards (.rv--card) rise further, untilt from --tilt and grow from 92% on the same
   spring, --i x --group-stagger apart. Section badges (.badge.rv) twist in from half
   size and -12deg (--ease-pop); channel logos pop from 80%. Ledes, body copy and
   buttons keep the soft rise. The springs follow Stooku (Lino 2026-10-29).
   The keyframes move the `translate`, `scale` and `rotate` properties, never `transform`,
   so hover lifts and the button magnet keep working on animated elements.
   Regression: when the reader scrolls back up past a group, reveal.js swaps .is-in
   for .is-out and everything in it sinks and fades back out together, quicker
   (--dur-exit) and with no stagger, so it is gone before it leaves the screen; it
   plays its entrance again on the way down.
   Reduced motion and ?qa show the final state straight away. */
@keyframes ds-rise { from { opacity: 0; translate: 0 var(--rise); filter: blur(6px); } to { opacity: 1; translate: none; filter: none; } }
@keyframes ds-card { from { opacity: 0; translate: 0 var(--rise-card); rotate: var(--tilt, 0deg); scale: 0.92; } to { opacity: 1; translate: none; rotate: none; scale: none; } }
@keyframes ds-word { from { opacity: 0; translate: 0 40%; scale: 0.9; } to { opacity: 1; translate: none; scale: none; } }
@keyframes ds-pop { from { opacity: 0; scale: 0.5; rotate: -12deg; } to { opacity: 1; scale: none; rotate: none; } }
@keyframes ds-zoom { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: none; } }
@keyframes ds-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes ds-settle { from { scale: 1.12; } to { scale: 1; } }
@keyframes ds-film { from { scale: 1.08; opacity: 0.4; } to { scale: 1; opacity: 1; } }
/* Hero (v68): the film opens from a rounded frame to full bleed while it settles from
   a zoom; title words slide up out of their own line (the clip moves against the
   translate, so it acts as a fixed mask with room for descenders); buttons spring up. */
@keyframes ds-film-open {
  from { clip-path: inset(16% 12% 16% 12% round 32px); scale: 1.22; opacity: 0.35; }
  45% { opacity: 1; }
  to { clip-path: inset(0 0 0 0 round 0); scale: 1; opacity: 1; }
}
@keyframes ds-mask { from { translate: 0 135%; clip-path: inset(-145% -8% 110% -8%); } to { translate: none; clip-path: inset(-10% -8% -25% -8%); } }
@keyframes ds-btn { from { opacity: 0; translate: 0 36px; scale: 0.86; } to { opacity: 1; translate: none; scale: none; } }
/* Quote (v68): the plant still unveils from a zoom and blur when the section arrives */
@keyframes ds-unveil { from { opacity: 0; scale: 1.18; filter: blur(12px); } to { opacity: 1; scale: none; filter: none; } }
@keyframes ds-unveil-out { from { opacity: 1; scale: none; filter: none; } to { opacity: 0; scale: 1.18; filter: blur(12px); } }
@keyframes ds-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-rise-out { from { opacity: 1; translate: none; filter: none; } to { opacity: 0; translate: 0 var(--rise); filter: blur(6px); } }
@keyframes ds-card-out { from { opacity: 1; translate: none; rotate: none; scale: none; } to { opacity: 0; translate: 0 var(--rise-card); rotate: var(--tilt, 0deg); scale: 0.92; } }
@keyframes ds-word-out { from { opacity: 1; translate: none; scale: none; } to { opacity: 0; translate: 0 40%; scale: 0.9; } }
@keyframes ds-pop-out { from { opacity: 1; scale: none; rotate: none; } to { opacity: 0; scale: 0.5; rotate: -12deg; } }
@keyframes ds-zoom-out { from { opacity: 1; scale: none; } to { opacity: 0; scale: 0.8; } }
/* Neighbouring cards lean opposite ways before they land */
:is(.cap-card, .path-card, .pack-item):nth-child(odd) { --tilt: -3deg; }
:is(.cap-card, .path-card, .pack-item):nth-child(even) { --tilt: 3deg; }
@keyframes ds-undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
/* Quality (v69): the lot is filed along its track. The line draws in, each dot ticks
   in as the line reaches it, and its card swings down from the dot like a tag hung on
   a rail, overshooting a little before it settles. The track is its own group (not
   .rv): the card's opacity belongs to .is-live, so these move only scale and rotate. */
@keyframes ds-track { from { scale: var(--track-from, 0 1); } to { scale: 1 1; } }
@keyframes ds-track-out { from { scale: 1 1; } to { scale: var(--track-from, 0 1); } }
@keyframes ds-tick { 0% { scale: 0; } 60% { scale: 1.3; } to { scale: 1; } }
@keyframes ds-tick-out { from { scale: 1; } to { scale: 0; } }
@keyframes ds-swing { 0% { rotate: x -96deg; } 52% { rotate: x 10deg; } 76% { rotate: x -4deg; } to { rotate: x 0deg; } }
@keyframes ds-swing-out { from { rotate: x 0deg; } to { rotate: x -96deg; } }
.checkpoint:nth-child(2) { --q: 1; }
.checkpoint:nth-child(3) { --q: 2; }
.checkpoint:nth-child(4) { --q: 3; }
.lot__track::before { transform-origin: 0 0; }
.checkpoint__card { transform-origin: 50% 0; backface-visibility: hidden; }
@media (max-width: 900px) { .lot__track { --track-from: 1 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* On load */
  .js .reveal {
    animation: ds-rise var(--dur-reveal) var(--ease-entrance) both;
    animation-delay: calc(var(--i, 0) * var(--stagger) + 150ms);
  }
  .js .reveal-words .word {
    animation: ds-word var(--dur-word) var(--ease-spring) both;
    animation-delay: calc(var(--i, 0) * var(--stagger) + var(--n, 0) * var(--word-stagger) + 150ms);
  }
  .js .reveal-drop { animation: ds-drop var(--dur-reveal) var(--ease-entrance) both; animation-delay: var(--d, 0ms); }
  .js .reveal-film { animation: ds-film var(--dur-settle) var(--ease-entrance) both; }
  .js .reveal-open { animation: ds-film-open var(--dur-open) var(--ease-expo) both; }
  /* fill backwards only: once landed the word keeps no clip, so nothing trims its glyphs */
  .js .reveal-mask .word {
    animation: ds-mask var(--dur-mask) var(--ease-expo) backwards;
    animation-delay: calc(var(--d, 0ms) + var(--n, 0) * var(--mask-stagger));
  }
  .js .reveal-pop { animation: ds-pop var(--dur-spring) var(--ease-pop) both; animation-delay: var(--d, 0ms); }
  .js .reveal-btn { animation: ds-btn var(--dur-card) var(--ease-spring) both; animation-delay: var(--d, 0ms); }

  /* On scroll */
  .reveal-live [data-reveal]:not(.is-in) :is(.rv, .word),
  .reveal-live [data-reveal].rv:not(.is-in) { opacity: 0; }
  .reveal-live .is-in .rv, .reveal-live .rv.is-in {
    animation: ds-rise var(--dur-reveal) var(--ease-entrance) both;
    animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--stagger) + 60ms);
  }
  .reveal-live .is-in .word {
    animation: ds-word var(--dur-word) var(--ease-spring) both;
    animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--word-stagger) + 150ms);
  }
  /* Cards travel further, untilt and skip the blur (large layers blur slowly); the photo
     settles from a slight zoom on `scale`, so the hover zoom on `transform` still works */
  .reveal-live .rv--card.is-in, .reveal-live .is-in .rv--card {
    animation-name: ds-card; animation-duration: var(--dur-card); animation-timing-function: var(--ease-spring);
    animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--stagger) + 60ms);
  }
  /* Quote background: its own group (not .rv), so the section's photo unveils first */
  .reveal-live .qc__media[data-reveal]:not(.is-in) img { opacity: 0; }
  .reveal-live .qc__media.is-in img { animation: ds-unveil var(--dur-open) var(--ease-expo) both; }
  .reveal-live .qc__media.is-out img { animation: ds-unveil-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .rv--card.is-in :is(.cap-card__media, .path-card__media) img { animation: ds-settle var(--dur-settle) var(--ease-entrance) both; animation-delay: calc(var(--i, 0) * var(--group-stagger) + 60ms); }
  /* Section badges twist in like a tag; channel logos pop */
  .reveal-live .is-in .badge.rv, .reveal-live .badge.rv.is-in { animation: ds-pop var(--dur-spring) var(--ease-pop) both; animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--stagger) + 60ms); }
  .reveal-live .is-in .logo-strip__item.rv { animation: ds-zoom var(--dur-spring) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--stagger) + 60ms); }
  /* Line icons draw themselves; shapes need pathLength="1" */
  .reveal-live .is-in .rv--draw :is(path, circle, rect) {
    stroke-dasharray: 1; animation: ds-draw var(--dur-draw) var(--ease-entrance) both;
    animation-delay: calc(var(--i, 0) * var(--group-stagger) + var(--n, 0) * var(--stagger) + 200ms);
  }
  /* Quality track: line, then dot, then card, card by card along the line */
  .reveal-live .lot__track[data-reveal]:not(.is-in)::before { scale: var(--track-from, 0 1); }
  .reveal-live .lot__track[data-reveal]:not(.is-in) .checkpoint__dot { scale: 0; }
  .reveal-live .lot__track[data-reveal]:not(.is-in) .checkpoint__card { rotate: x -96deg; }
  .reveal-live .lot__track.is-in::before { animation: ds-track 1100ms var(--ease-expo) both 100ms; }
  .reveal-live .lot__track.is-in .checkpoint__dot { animation: ds-tick var(--dur-spring) var(--ease-entrance) both; animation-delay: calc(200ms + var(--q, 0) * 240ms); }
  .reveal-live .lot__track.is-in .checkpoint__card { animation: ds-swing 1150ms var(--ease-entrance) both; animation-delay: calc(320ms + var(--q, 0) * 240ms); }
  .reveal-live .lot__track.is-out::before { animation: ds-track-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .lot__track.is-out .checkpoint__dot { animation: ds-tick-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .lot__track.is-out .checkpoint__card { animation: ds-swing-out var(--dur-exit) var(--ease-exit) both; }
  /* Regression on the way back up: all together, no stagger */
  .reveal-live .is-out .rv, .reveal-live .rv.is-out { animation: ds-rise-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .is-out .word { animation: ds-word-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .rv--card.is-out, .reveal-live .is-out .rv--card { animation-name: ds-card-out; }
  .reveal-live .is-out .badge.rv, .reveal-live .badge.rv.is-out { animation: ds-pop-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .is-out .logo-strip__item.rv { animation: ds-zoom-out var(--dur-exit) var(--ease-exit) both; }
  .reveal-live .is-out .rv--draw :is(path, circle, rect) { stroke-dasharray: 1; animation: ds-undraw var(--dur-exit) var(--ease-exit) both; }
}
.qa :is(.reveal, .reveal-drop, .reveal-film, .reveal-open, .reveal-pop, .reveal-btn, .rv, .word, .rv--draw *, .cap-card__media img, .path-card__media img, .qc__media img) { animation: none !important; opacity: 1 !important; }
.qa .lot__track::before, .qa :is(.checkpoint__dot, .checkpoint__card) { animation: none !important; }

/* ---------- Motion controls ----------
   .motion-paused comes from the page's pause button; .fx-freeze is a QA hook. */
.motion-paused .btn--primary::before, .motion-paused .btn--primary::after, .motion-paused .btn__arrow,
.fx-freeze .btn--primary::before, .fx-freeze .btn--primary::after, .fx-freeze .btn__arrow { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::before { display: none; }
  .btn__arrow { animation: none !important; }
  .btn--primary { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, [data-surface="film"] .btn--secondary, .path-card__panel, .cap-card__specs { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--rgb-ink) / 0.72); }
}

/* ---------- Scene on paper: the label scene (ds/label-scene.js) ----------
   Same pinned .scene, on a light backdrop. The copy is the badge plus the
   three label deliverables, one at a time (.scene__steps, --o from the script);
   reduced motion shows all three. .scene__crop is four printer's crop marks the
   script places around the landed jar. */
.scene--paper .scene__stage {
  --scene-bg: radial-gradient(70% 80% at 50% 38%, #fafbfb 0%, #f0f3f4 58%, #e3e9ea 100%);
  --scene-track: rgb(var(--rgb-ink) / 0.12);
}
.scene--paper .scene__stage::after { display: none; }
.scene__steps { position: relative; margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.scene__steps li { margin: 0; }
.scene__steps .t-h3 { display: block; }
.scene.is-live .scene__steps { display: grid; }
/* v72 (Lino): steps top-align so every title sits right under the badge; a shorter step leaves its spare height below the tags, never above the title */
.scene.is-live .scene__steps li { grid-area: 1 / 1; align-self: start; opacity: var(--o, 0); translate: 0 calc((1 - var(--o, 0)) * 10px); }
.scene.is-live .scene__steps li[data-current] { z-index: 1; }
.scene.is-static .scene__steps li + li { margin-top: var(--space-8); }
/* Lotus-style copy (v65): a fixed headline on wide screens, and under each step
   title one sentence plus three deliverable tags. Phones keep the title and the
   sentence; reduced motion drops the tags. v66 (Lino): on wide screens the
   headline sits top-left, the step copy bottom-right and the counter bottom-left. */
.scene__head { position: absolute; z-index: 2; top: calc(var(--nav-h) + var(--space-32)); left: var(--gutter); width: min(24rem, 34vw); margin: 0; }
.scene__say { margin: var(--space-8) 0 0; max-width: 28rem; font-size: var(--body-size); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* v70 (Lino): the three tags stay on one row, so none is left alone on a second line */
.scene__head .t-strong { display: block; }
.scene__tags { display: flex; flex-wrap: nowrap; gap: var(--space-8); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.scene__tags li { white-space: nowrap; padding: 5px 12px; font-size: var(--small-size); letter-spacing: var(--small-track); line-height: 1.3; color: var(--text-1); background: rgb(var(--rgb-white) / 0.7); border: 1px solid rgb(var(--rgb-brand) / 0.16); border-radius: var(--radius-pill); }
.scene__tags li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--signal); }
@media (min-aspect-ratio: 105/100) {
  .scene--paper .scene__copy { left: auto; right: var(--gutter); width: min(32rem, 40vw); }
  .scene--paper .scene__meta { left: var(--gutter); right: auto; align-items: flex-start; }
}
.scene.is-static .scene__tags { display: none; }
@media (max-aspect-ratio: 105/100) { .scene__head { display: none; } }
@media (max-width: 760px) { .scene__tags { display: none; } .scene__say { font-size: 0.9375rem; } }
.scene__crop { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; opacity: var(--o, 0); pointer-events: none; }
.scene__crop i { position: absolute; width: 22px; height: 22px; border: 0 solid rgb(var(--rgb-ink) / 0.55); }
.scene__crop i:nth-child(1) { left: -10px; top: -10px; border-width: 1.5px 0 0 1.5px; }
.scene__crop i:nth-child(2) { right: -10px; top: -10px; border-width: 1.5px 1.5px 0 0; }
.scene__crop i:nth-child(3) { left: -10px; bottom: -10px; border-width: 0 0 1.5px 1.5px; }
.scene__crop i:nth-child(4) { right: -10px; bottom: -10px; border-width: 0 1.5px 1.5px 0; }
.scene.is-static .scene__crop, .scene.no-gl .scene__crop { display: none; }
.scene.no-gl .scene__stage { min-height: 0; padding-top: var(--space-52); }
.scene.no-gl .scene__copy { position: relative; left: auto; bottom: auto; width: auto; padding: 0 var(--gutter) var(--space-52); }

/* ---------- Rail ----------
   A horizontal row of cards that runs off the right edge of the page. Native
   sideways scroll with snap: swipe on touch, the round arrow buttons with a mouse,
   arrow keys once the rail has focus. No autoplay. ds/rail.js wires the buttons
   (aria-disabled at the ends) and the progress bar; without it the rail still
   scrolls. The page sets --rail-inset so the first card lines up with the content
   column, and --rail-card for the card width. */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.rail-ctrl { display: flex; gap: var(--space-8); flex: none; }
.rail-btn {
  width: var(--control-h); height: var(--control-h); display: inline-grid; place-items: center;
  border: 1px solid var(--border-control); border-radius: var(--radius-pill);
  background: var(--card-bg); color: var(--text-1);
  transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.rail-btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.rail-btn:hover:not([aria-disabled="true"]) { border-color: var(--text-1); }
.rail-btn[data-rail-step="1"]:hover:not([aria-disabled="true"]) svg { transform: translateX(2px); }
.rail-btn[data-rail-step="-1"]:hover:not([aria-disabled="true"]) svg { transform: translateX(-2px); }
.rail-btn[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.rail-ctrl[hidden], .rail-progress[hidden] { display: none; }
.rail {
  display: flex; gap: var(--space-20); margin: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  /* top and bottom room so the card shadows are not clipped by the scroller */
  padding: var(--space-12) var(--rail-inset, 0) var(--space-40);
  scroll-padding-inline: var(--rail-inset, 0);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 var(--rail-card, 300px); scroll-snap-align: start; }
.rail:focus-visible { outline-offset: -2px; }
.rail-progress {
  position: relative; height: 2px; margin: 0 var(--rail-inset, 0); overflow: hidden;
  border-radius: 2px; background: var(--rail-track);
}
/* thumb width = the share of the row in view; it slides across the free track */
.rail-progress i {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--rail-view, 1) * 100%);
  border-radius: inherit; background: var(--rail-thumb);
  translate: calc(var(--rail-pos, 0) * (1 - var(--rail-view, 1)) / var(--rail-view, 1) * 100%) 0;
}
@media (max-width: 760px) {
  .rail { gap: var(--space-12); padding-bottom: var(--space-32); }
}

/* ---------- Ingredient card ----------
   One branded ingredient in a rail: a tinted tile that carries the name as a typeset
   wordmark (plain name + ™; a supplier logo only when OD Nutra is authorized to use
   it), a small index, then one muted line for category and typical use. */
.ing-card {
  display: flex; flex-direction: column; padding: var(--space-8);
  background: var(--card-bg); border: var(--card-rim-width) solid var(--card-rim); border-radius: var(--radius-panel);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.ing-card:hover { box-shadow: var(--card-shadow-hover); }
.ing-card__tile {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: var(--space-40) var(--space-24) var(--space-24);
  border-radius: calc(var(--radius-panel) - var(--space-8)); background: var(--tile-bg);
}
.ing-card__num { position: absolute; top: var(--space-16); left: var(--space-16); line-height: 1; font-variant-numeric: tabular-nums; }
.ing-card__name {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: var(--h3-size); font-weight: var(--weight-semibold); letter-spacing: var(--h3-track); line-height: 1.1;
  color: var(--text-1);
}
.ing-card__name sup { margin-left: 1px; font-size: 0.45em; font-weight: var(--weight-medium); letter-spacing: 0; vertical-align: 0.95em; line-height: 0; }
.ing-card__meta {
  margin: 0; padding: var(--space-16) var(--space-12) var(--space-8);
  font-size: var(--ui-size); letter-spacing: var(--ui-track); line-height: 1.4;
  color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .rail-btn, .rail-btn svg { transition: none; }
}

/* ---------- Spotlight ----------
   A short list that works as tabs next to one large panel showing the chosen
   item big. Built for the forest surface (Branded ingredients), reads on any
   surface. Click, hover (on devices that hover) and the arrow keys, Home and End
   switch the panel; ds/spotlight.js does the switching and the cross-fade. On
   narrow screens the list turns into a row of chips above the panel. Never give
   the tabs aria-controls: the page disclosure script hides whatever that names. */
.spot-tabs { border-top: 1px solid var(--border); }
.spot-tab {
  display: flex; align-items: baseline; gap: var(--space-20); width: 100%; padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border); text-align: left; color: var(--text-2);
  font-size: var(--lede-size); letter-spacing: var(--lede-track); line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-out);
}
.spot-tab__num { font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.spot-tab__dot {
  width: 6px; height: 6px; margin-left: auto; align-self: center; border-radius: 50%; background: var(--signal);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.spot-tab:hover, .spot-tab[aria-selected="true"] { color: var(--text-1); }
.spot-tab[aria-selected="true"] { font-weight: var(--weight-medium); }
.spot-tab[aria-selected="true"] .spot-tab__dot { opacity: 1; transform: none; }
.spot-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 560px; height: 100%; padding: var(--space-40);
  border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-2);
}
@media (min-width: 1001px) and (max-height: 900px) { /* laptops */
  .spot-panel { min-height: clamp(420px, 100svh - 300px, 560px); padding: var(--space-32); }
}
.spot-panel::before { /* soft lime pool behind the name */
  content: ""; position: absolute; inset: auto -20% -45% 10%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--rgb-glow) / 0.22), transparent);
}
.spot-panel > * { position: relative; }
.spot-panel__top { display: flex; justify-content: space-between; align-items: center; }
.spot-panel__count { font-variant-numeric: tabular-nums; }
.spot-panel__body { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.spot-panel.is-swapping .spot-panel__body { opacity: 0; transform: translateY(10px); }
.spot-panel__name {
  margin: 0; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.75rem); line-height: 1; letter-spacing: -0.04em;
  font-weight: var(--weight-semibold); text-wrap: balance;
}
.spot-panel__name sup { margin-left: 1px; font-size: 0.3em; font-weight: var(--weight-medium); letter-spacing: 0; vertical-align: 1.5em; line-height: 0; }
.spot-panel__meta { margin: var(--space-20) 0 0; font-size: var(--lede-size); letter-spacing: var(--lede-track); color: var(--text-2); }
@media (max-width: 1000px) { .spot-panel { min-height: 380px; } }
@media (max-width: 760px) {
  .spot-tabs {
    display: flex; gap: var(--space-8); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-4);
    overflow-x: auto; border: 0; scrollbar-width: none;
  }
  .spot-tabs::-webkit-scrollbar { display: none; }
  .spot-tab {
    flex: none; width: auto; padding: var(--space-8) var(--space-16);
    border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--ui-size);
  }
  .spot-tab[aria-selected="true"] { border-color: var(--text-1); }
  .spot-tab__dot { display: none; }
  .spot-panel { min-height: 320px; padding: var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  .spot-tab, .spot-tab__dot, .spot-panel__body { transition: none; }
  .spot-panel.is-swapping .spot-panel__body { opacity: 1; transform: none; }
}

/* ---------- Label shelf ----------
   Branded ingredients shown as the brands they are: each supplier's own logo on
   a label card, in two slow rows that run in opposite directions. Hovering the
   shelf pauses it; hovering a card lifts it, tints it green with a lime ring and
   slides up a caption with the name and what the ingredient is. Every row holds
   its cards twice (the second copy aria-hidden) so the loop is seamless at
   translateX(-50%). Surface colors come from the --shelf-* tokens (white cards on
   paper and mist, cream cards on forest). Logos without a file yet are typeset
   placeholders (.shelf-card__word, data-ph). */
.label-shelf { margin-inline: calc(var(--gutter) * -1); }
.label-shelf__track { /* the padding keeps the cards' shadows and the hover ring inside the mask, so they are never cut */
  display: flex; flex-direction: column; gap: var(--space-16); padding-block: 48px; margin-block: -48px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.label-shelf__row { display: flex; width: max-content; gap: var(--space-16); margin: 0; padding: 0; list-style: none; animation: shelf-run 70s linear infinite; }
.label-shelf__row--rev { animation-direction: reverse; animation-duration: 82s; }
.label-shelf:hover .label-shelf__row { animation-play-state: paused; }
@keyframes shelf-run { to { transform: translateX(-50%); } }
.shelf-card { position: relative; flex: none; width: 260px; }
.shelf-card__logo {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 136px; overflow: hidden;
  border-radius: var(--radius-card); background: var(--shelf-card-bg); color: var(--shelf-ink);
  box-shadow: inset 0 0 0 1px var(--shelf-card-rim), var(--shelf-card-shadow);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.shelf-card__logo > * { transition: translate var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out); }
.shelf-card__logo img { display: block; max-width: 72%; max-height: 46%; object-fit: contain; }
.shelf-card__logo img.is-badge { max-height: 70%; }
.shelf-card__word { font-weight: var(--weight-semibold); letter-spacing: -0.03em; line-height: 1; text-align: center; font-size: clamp(1rem, 0.8rem + 0.7vw, 1.375rem); }
.shelf-card__word small { display: block; margin-top: 4px; font-size: 0.5em; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--weight-medium); opacity: 0.7; }
.label-shelf sup { margin-left: 1px; font-size: 0.5em; font-weight: var(--weight-medium); line-height: 0; vertical-align: 0.8em; }
.shelf-card__cap {
  position: absolute; inset: auto 0 0; margin: 0; padding: 10px 14px; border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--shelf-cap-bg); color: var(--shelf-cap-ink); font-size: var(--small-size); line-height: 1.3;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.shelf-card__cap b { display: block; font-weight: var(--weight-semibold); }
.shelf-card__cap span { color: var(--shelf-cap-sub); }
.shelf-card:hover .shelf-card__logo { transform: translateY(-4px); background: var(--shelf-card-bg-hover); box-shadow: var(--shelf-card-hover); }
.shelf-card:hover .shelf-card__logo > * { translate: 0 -24px; scale: 0.8; } /* clears the caption */
.shelf-card:hover .shelf-card__cap { opacity: 1; transform: none; }
/* Stats beside the section lede: big green numbers over a small label */
.shelf-stats { display: flex; gap: var(--space-40); margin: 0; }
.shelf-stats div { display: flex; flex-direction: column; gap: 2px; }
.shelf-stats dt { order: 2; color: var(--text-2); font-size: var(--small-size); }
.shelf-stats dd { margin: 0; color: var(--shelf-stat); font-size: var(--h3-size); font-weight: var(--weight-semibold); letter-spacing: var(--h3-track); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .shelf-card { width: 180px; }
  .shelf-card__logo { height: 96px; }
  .shelf-card:hover .shelf-card__logo > * { translate: 0 -18px; scale: 0.72; }
  .shelf-stats { gap: var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  .label-shelf__row { animation: none; }
  .label-shelf__row [aria-hidden="true"] { display: none; }
  .label-shelf__track { overflow-x: auto; }
  .shelf-card__logo, .shelf-card__logo > *, .shelf-card__cap { transition: none; }
  .shelf-card:hover .shelf-card__logo { transform: none; }
}

/* ---------- Pack gallery ----------
   Five tall photo panels side by side; the open one grows wide and shows its
   name, sizes and a frosted chip with the product it holds, the rest stay as
   narrow strips with the name turned on its side. Sits on paper in the home
   (Packaging options, light since 2026-10-28); each panel is a film surface. ds/pack-gallery.js opens a
   panel on click, on hover (mouse only, wider than 760px) and with the arrow
   keys, Home and End, and runs the All / For powders / For capsules pills. At
   760px and below the strips become 76px rows with a 60px photo thumbnail. */
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; }
.filter-pills button {
  min-height: 40px; padding: 0 var(--space-16); border: 1px solid var(--border-control); border-radius: var(--radius-pill);
  font-size: var(--ui-size); letter-spacing: var(--ui-track); color: var(--text-2); background: transparent;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filter-pills button:hover { color: var(--text-accent); border-color: var(--text-accent); }
/* Active pill in the brand green (v68, Lino): white on forest-600 is 5.11:1 */
.filter-pills button[aria-pressed="true"] { color: var(--white); background: var(--teal-600); border-color: var(--teal-600); }
.filter-pills button[aria-pressed="true"]:hover { color: var(--white); background: var(--teal-700); border-color: var(--teal-700); }
.pack-chip {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-8);
  font-size: var(--small-size); letter-spacing: var(--small-track); line-height: 1.6; color: var(--text-1);
  background: var(--panel-bg); border: 1px solid var(--panel-rim); border-radius: var(--radius-pill);
  box-shadow: var(--panel-inset), var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
}
.pack-chip svg { width: 16px; height: 16px; flex: none; color: var(--signal); }
.pack-gallery { display: flex; gap: var(--space-12); height: clamp(460px, 40vw, 600px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1001px) and (max-height: 900px) { /* laptops: fits under the head on one screen */
  .pack-gallery { height: clamp(420px, min(40vw, 100svh - 290px), 600px); }
}
.pack-item {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0;
  border-radius: var(--radius-panel); background: var(--surface-1);
  transition: flex-grow var(--dur-settle) var(--ease-entrance);
}
.pack-item.is-open { flex-grow: 4.2; }
.pack-item[hidden] { display: none; }
.pack-item__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pack-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pack-item::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scrim-bottom-tall); }
.pack-item::after { /* darkens the closed strips so the side names read */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(var(--rgb-ink) / 0.38); transition: opacity var(--dur-base) var(--ease-out);
}
.pack-item.is-open::after { opacity: 0; }
.pack-item__btn { position: absolute; inset: 0; z-index: 2; width: 100%; border-radius: inherit; background: transparent; cursor: pointer; }
.pack-item__btn:focus-visible { outline-offset: -4px; }
.pack-item.is-open .pack-item__btn { cursor: default; }
.pack-item__num {
  position: absolute; top: var(--space-20); left: var(--space-20); color: var(--text-2);
  font-variant-numeric: tabular-nums; text-shadow: var(--text-shadow-film);
}
.pack-item__side {
  position: absolute; left: var(--space-20); bottom: var(--space-24); margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: var(--lede-size); letter-spacing: var(--lede-track); font-weight: var(--weight-medium); color: var(--text-1);
  text-shadow: var(--text-shadow-film); transition: opacity var(--dur-base) var(--ease-out);
}
.pack-item.is-open .pack-item__side, .pack-item.is-open .pack-item__num { opacity: 0; }
.pack-item__open {
  position: absolute; inset: var(--space-24); display: flex; flex-direction: column; justify-content: space-between;
  min-width: 280px; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pack-item.is-open .pack-item__open { opacity: 1; transform: none; transition-delay: 160ms; }
.pack-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
.pack-item__count { color: var(--text-2); font-variant-numeric: tabular-nums; text-shadow: var(--text-shadow-film); padding-top: var(--space-8); white-space: nowrap; }
.pack-item__name {
  margin: 0; font-size: var(--h2-size); letter-spacing: var(--h2-track); line-height: 1.05; font-weight: var(--weight-semibold);
  text-shadow: var(--text-shadow-film);
}
.pack-item__meta {
  display: flex; gap: var(--space-8); margin: var(--space-8) 0 0;
  font-size: var(--ui-size); letter-spacing: var(--ui-track); line-height: 1.4; color: var(--text-2); text-shadow: var(--text-shadow-film);
}
.pack-item__meta b { font-weight: var(--weight-semibold); color: var(--text-1); }
/* Light variant, used in the home since 2026-10-28 (Lino asked for it "mucho mas
   visual"): bright studio photos, each on its own colored seamless paper, tinted
   with the photo's floor color (--pk-tint, set inline; it also fills the 760px rows).
   Since v51 (Lino 2026-10-28: "titulo sobre un gradiente, mas parecido al estilo que
   tenemos") the open panel reads like the capability cards: the items are film
   surfaces, a dark frosted spec panel at the top (what it holds, sizes) and, at the
   bottom over the forest scrim, a white title and one line. Closed strips darken
   toward their white side name. The open photo settles from a slight zoom. */
.pack-gallery--light .pack-item { background: var(--pk-tint, var(--surface-1)); }
.pack-gallery--light .pack-item::before { background: var(--scrim-bottom); }
.pack-gallery--light .pack-item::after { background: linear-gradient(to top, rgb(var(--rgb-ink) / 0.72) 0, rgb(var(--rgb-ink) / 0.3) 42%, rgb(var(--rgb-ink) / 0.12) 100%); }
.pack-gallery--light .pack-item__media img { transform: scale(1.06); transition: transform var(--dur-settle) var(--ease-entrance); }
.pack-gallery--light .pack-item.is-open .pack-item__media img { transform: none; }
.pack-item__specs { width: min(100%, 280px); }
.pack-item__body .t-h3 { text-shadow: var(--text-shadow-film); }
.pack-item__body .t-body { margin: var(--space-8) 0 0; max-width: 26em; text-shadow: var(--text-shadow-film); }
@media (max-width: 1000px) {
  .pack-gallery { height: 520px; gap: var(--space-8); }
  .pack-item.is-open { flex-grow: 5; }
}
@media (max-width: 760px) {
  .pack-gallery { flex-direction: column; height: auto; gap: var(--space-8); }
  .pack-item { flex: none; height: 76px; transition: height var(--dur-settle) var(--ease-entrance); }
  .pack-item.is-open { height: min(116vw, 520px); }
  /* a 76px slice of the photo reads as a hard slab: closed rows show it as a thumbnail */
  .pack-item:not(.is-open) .pack-item__media { inset: var(--space-8) var(--space-8) var(--space-8) auto; width: 60px; border-radius: var(--radius-card); }
  .pack-item:not(.is-open)::before { background: none; }
  .pack-item:not(.is-open)::after { opacity: 0; }
  .pack-item__side { writing-mode: horizontal-tb; transform: none; left: 68px; bottom: auto; top: 50%; translate: 0 -50%; }
  .pack-item__num { top: 50%; translate: 0 -50%; }
  .pack-item__open { inset: var(--space-20); min-width: 0; }
  .pack-gallery--light .pack-item:not(.is-open) .pack-item__side { color: var(--neutral-950); text-shadow: none; }
  .pack-gallery--light .pack-item:not(.is-open) .pack-item__num { color: rgb(var(--rgb-ink) / 0.72); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-pills button, .pack-item, .pack-item::after, .pack-item__side, .pack-item__open, .pack-item__media img { transition: none !important; }
}

/* ---------- Quote form ----------
   A three-step form (product, details, contact) driven by ds/quote-form.js; the
   markup contract is in that file's header. .qf-* is the form itself and works on
   any light surface; .qc is the home layout (#quote): the hero still under an ink
   scrim, the title on the left (sticky on wide screens) and the form on a white
   paper panel on the right, with "Step N of 3" and a thin lime bar on top and
   the product picked by photo. Lino chose it (option C of options-quote.html) on
   2026-10-27. Errors use --qf-error, a darker red that clears 4.5:1 on paper. */
[data-surface="paper"] { --qf-error: oklch(0.5 0.17 27); }
.qf { display: grid; gap: var(--space-32); }
.qf[hidden], .qf [hidden] { display: none !important; }
.qf-step { display: grid; gap: var(--space-24); }
.qf-step__head { display: grid; gap: var(--space-4); }
.qf-step__title { margin: 0; outline: none; }
.qf-step__head .t-small { margin: 0; }
.qf-set { display: grid; gap: var(--space-12); min-width: 0; margin: 0; padding: 0; border: 0; }
.qf-set > legend, .qf-label {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--space-12);
  font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); line-height: 1.4; color: var(--text-1);
}
.qf-set > legend + * { clear: both; }
.qf-label { float: none; display: block; margin: 0; }
.qf-opt { font-weight: var(--weight-regular); color: var(--text-2); }
.qf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-16); }
.qf-field { display: grid; gap: var(--space-8); min-width: 0; align-content: start; }

.qf-choices { display: grid; gap: var(--space-8); }
.qf-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qf-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qf-choice {
  position: relative; display: flex; align-items: center; gap: var(--space-12);
  min-height: 56px; padding: var(--space-12) var(--space-16); cursor: pointer;
  background: var(--card-bg); border: var(--card-rim-width) solid var(--card-rim); border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.qf-choice:hover { border-color: var(--border-control); }
.qf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qf-choice:has(input:checked) { border-color: var(--primary-bg); box-shadow: inset 0 0 0 1px var(--primary-bg); background: var(--surface-2); }
.qf-choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.qf-dot {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border: 1.5px solid var(--border-control); border-radius: 50%; background: var(--card-bg);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.qf-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.qf-choice:has(input:checked) .qf-dot { border-color: var(--primary-bg); background: var(--primary-bg); }
.qf-choice:has(input:checked) .qf-dot::after { transform: scale(1); }
.qf-dot--box { border-radius: 6px; }
.qf-dot--box::after { width: 9px; height: 5px; border-radius: 0; background: none; border: solid var(--signal); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); }
.qf-choice:has(input:checked) .qf-dot--box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.qf-choice__body { display: grid; gap: 2px; min-width: 0; }
.qf-choice__name { font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); line-height: 1.35; color: var(--text-1); }
.qf-choice__body small { font-size: var(--small-size); letter-spacing: var(--small-track); line-height: 1.4; color: var(--text-2); }
.qf-choice__media { display: none; }
.qf-set[aria-invalid="true"] .qf-choice { border-color: var(--qf-error); }

.qf-input {
  width: 100%; min-height: 52px; margin: 0; padding: 0 var(--space-16); box-sizing: border-box;
  font: inherit; font-size: var(--body-size); letter-spacing: var(--body-track); color: var(--text-1);
  background: var(--card-bg); border: 1px solid var(--border-control); border-radius: var(--radius-item);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.qf-input::placeholder { color: var(--text-2); opacity: 1; }
.qf-input:hover { border-color: var(--text-2); }
.qf-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--primary-bg); }
.qf-input[aria-invalid="true"] { border-color: var(--qf-error); box-shadow: inset 0 0 0 1px var(--qf-error); }
textarea.qf-input { min-height: 128px; padding: var(--space-12) var(--space-16); line-height: 1.5; resize: vertical; }
.qf-select { position: relative; display: block; }
.qf-select select { appearance: none; -webkit-appearance: none; padding-right: var(--space-40); cursor: pointer; }
.qf-select::after {
  content: ""; position: absolute; right: var(--space-16); top: 50%; width: 7px; height: 7px; pointer-events: none;
  border: solid var(--text-2); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg);
}

.qf-drop {
  position: relative; display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-24) var(--space-16);
  text-align: center; font-size: var(--small-size); letter-spacing: var(--small-track); color: var(--text-2);
  background: var(--surface-2); border: 1.5px dashed var(--border-control); border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.qf-drop svg { width: 22px; height: 22px; color: var(--text-accent); }
.qf-drop b { font-size: var(--ui-size); font-weight: var(--weight-medium); letter-spacing: var(--ui-track); color: var(--text-1); }
.qf-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.qf-drop:hover { border-color: var(--text-2); }
.qf-drop:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.qf-files { margin: 0; font-size: var(--small-size); color: var(--text-1); overflow-wrap: anywhere; }
.qf-files:empty { display: none; }
.qf-files[data-bad] { color: var(--qf-error); }

.qf-known {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16);
  padding: var(--space-12) var(--space-16); background: var(--surface-2); border-radius: var(--radius-item);
  font-size: var(--ui-size); letter-spacing: var(--ui-track); color: var(--text-1);
}
.qf-known p { margin: 0; }
.qf-known button { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.qf-error { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; font-size: var(--ui-size); letter-spacing: var(--ui-track); line-height: 1.4; color: var(--qf-error); }
.qf-error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.qf-nav { display: flex; align-items: center; gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--border); }
.qf-nav [data-qf-next] { margin-left: auto; }
.qf-done { justify-items: start; }
.qf-done__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-bg); color: var(--signal); }
.qf-done__mark svg { width: 22px; height: 22px; }
.qf-done p { margin: 0; max-width: 34em; }

/* Progress, default look (A): three labelled segments */
.qf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.qf-steps li {
  display: flex; gap: var(--space-8); padding-top: var(--space-12); position: relative;
  font-size: var(--small-size); letter-spacing: var(--small-track); color: var(--text-2);
}
.qf-steps li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 3px; background: var(--file-track); }
.qf-steps li::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 3px; background: var(--file-fill);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out);
}
.qf-steps li[data-state="done"]::after, .qf-steps li[data-state="current"]::after { transform: scaleX(1); }
.qf-steps li[data-state="current"] { color: var(--text-1); font-weight: var(--weight-medium); }
.qf-steps li[data-state="done"] { color: var(--text-1); }
.qf-steps__n { font-variant-numeric: tabular-nums; color: var(--text-2); }
.qf-progress { display: none; }

/* Home layout: over the plant still, product chosen by picture */
.qc { position: relative; isolation: isolate; overflow: clip; padding: var(--section-y) var(--gutter); }
.qc__media { position: absolute; inset: 0; z-index: -2; }
.qc__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.qc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--rgb-ink) / 0.9) 0, rgb(var(--rgb-ink) / 0.72) 42%, rgb(var(--rgb-ink) / 0.5) 100%);
}
.qc__grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-64); align-items: start; }
.qc__copy { position: sticky; top: calc(var(--nav-h) + var(--space-24)); }
.qc__copy .t-h2 { margin: var(--space-20) 0 0; text-shadow: var(--text-shadow-film); }
.qc__copy .t-lede { margin: var(--space-20) 0 0; }
.qc__card { padding: var(--space-32) var(--space-40) var(--space-40); border-radius: var(--radius-panel); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.6); }
.qc .qf > .qf-steps { display: none; }
.qc .qf-progress { display: grid; gap: var(--space-12); }
.qc .qf-count { display: flex; justify-content: space-between; font-size: var(--small-size); letter-spacing: var(--small-track); color: var(--text-2); font-variant-numeric: tabular-nums; }
.qc .qf-bar { display: block; height: 4px; border-radius: 4px; background: var(--file-track); overflow: hidden; }
.qc .qf-bar::after { content: ""; display: block; height: 100%; background: var(--file-fill); transform: scaleX(var(--p, 0.333)); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.qc .qf-choice--media { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.qc .qf-choice--media .qf-choice__media { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--surface-3); }
@media (min-width: 1101px) and (max-height: 900px) { /* laptops: shorter photos keep Continue on screen */
  .qc .qf-choice--media .qf-choice__media { aspect-ratio: 4 / 3; overflow: hidden; }
  .qc .qf-choice--media .qf-choice__media img { position: absolute; inset: 0; } /* else the photo's own height stretches the box */
  .qc__card { padding: var(--space-24) var(--space-32) var(--space-32); }
}
.qc .qf-choice__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qc .qf-choice__media svg { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: var(--text-accent); }
.qc .qf-choice--media .qf-dot { position: absolute; top: var(--space-12); right: var(--space-12); z-index: 1; }
.qc .qf-choice--media .qf-choice__body { padding: var(--space-12) var(--space-16) var(--space-16); }
/* Background proposals (v70, Lino: "something more solid" than the photo). Chosen by
   html[data-qbg], set from ?qbg= in index.html. Since v71 the section before it
   (#quality) uses the same ground as A (Lino picked that dark), so A reads as one
   continuous field with it.
   A  solid deep teal (teal-900) with a fine grain: the calmest, most solid.
   B  deep teal gradient with an aqua glow behind the card.
   C  light: mist ground, dark text, the white card lifted by a teal shadow.
   D  the photo kept but toned to the brand teal (duotone). */
[data-qbg="a"] .qc__media, [data-qbg="b"] .qc__media, [data-qbg="c"] .qc__media { display: none; }
[data-qbg="a"] .qc::before {
  background: var(--bg-grain), var(--teal-900);
  background-blend-mode: soft-light, normal;
}
[data-qbg="b"] .qc::before {
  background:
    radial-gradient(50% 64% at 70% 46%, rgb(93 178 195 / 0.46) 0%, rgb(93 178 195 / 0.14) 46%, transparent 72%),
    radial-gradient(60% 80% at 0% 100%, rgb(51 100 105 / 0.55) 0%, transparent 70%),
    linear-gradient(160deg, var(--teal-950) 0%, var(--teal-900) 46%, var(--teal-800) 100%);
}
[data-qbg="c"] .qc::before { background: linear-gradient(180deg, var(--teal-50) 0%, #e3eef0 100%); }
[data-qbg="c"] .qc__copy .t-h2 { text-shadow: none; }
[data-qbg="c"] .qc__card { box-shadow: 0 1px 0 rgb(var(--rgb-white)) inset, 0 30px 70px -32px rgb(13 44 47 / 0.45), 0 0 0 1px rgb(13 44 47 / 0.06); }
[data-qbg="c"] .qc__status { --file-track: rgb(13 44 47 / 0.12); }
[data-qbg="d"] .qc__media img { filter: grayscale(1) contrast(1.15) brightness(0.9); }
[data-qbg="d"] .qc::before {
  background: linear-gradient(90deg, rgb(13 44 47 / 0.94) 0, rgb(25 68 73 / 0.80) 42%, rgb(51 100 105 / 0.62) 100%);
}
@media (max-width: 760px) {
  [data-qbg="a"] .qc::before { background-color: var(--teal-900); }
  [data-qbg="d"] .qc::before { background: rgb(13 44 47 / 0.84); }
}

/* Desktop: the step title and hint, then the step count and bar (v53), sit at the foot of the left
   column (.qc__status, kept current by quote-form.js), so the card opens straight
   on the questions. The card's own heading stays for screen readers and focus. */
.qc__status { display: none; }
@media (min-width: 1101px) {
  .qc__grid { grid-template-rows: auto 1fr; row-gap: var(--space-40); }
  .qc__copy { grid-column: 1; grid-row: 1; position: static; }
  .qc__card { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  /* the card keeps the tallest step's height (quote-form.js, data-qf-steady);
     shorter steps keep Back / Continue on the card's bottom edge */
  .qc .qf { flex: 1 1 auto; display: flex; flex-direction: column; }
  .qc .qf > .qf-nav { margin-top: auto; }
  .qc__status {
    grid-column: 1; grid-row: 2; align-self: end; /* v71: no sticky bottom, it slid over the intro while the section entered */
    display: grid; gap: var(--space-12); max-width: 420px; padding-bottom: var(--space-40);
    --file-track: rgb(var(--rgb-white) / 0.18);
  }
  .qc__status .qf-count { margin-top: var(--space-16); color: var(--text-2); }
  .qc__status-title { margin: 0; font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--h3-track); font-weight: var(--h3-weight); color: var(--text-1); }
  .qc__status-hint { margin: 0; color: var(--text-2); }
  .qc__status p:empty { display: none; }
  .qc__card .qf-progress { display: none; }
  .qc .qf-step__head {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@media (max-width: 1100px) {
  .qc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .qc__copy { position: static; }
}
@media (max-width: 760px) {
  .qc__card { padding: var(--space-24) var(--space-20); border-radius: var(--radius-card); }
  .qf-grid2, .qf-choices--2, .qf-choices--3 { grid-template-columns: minmax(0, 1fr); }
  .qf-nav .btn { flex: 1 1 0; }
  .qf-nav [data-qf-next] { flex-grow: 2; }
  .qc::before { background: rgb(var(--rgb-ink) / 0.74); }
  .qc .qf-choice--media { flex-direction: row; align-items: center; }
  .qc .qf-choice--media .qf-choice__media { flex: none; width: 88px; aspect-ratio: 1; }
  .qc .qf-choice--media .qf-dot { position: static; order: 3; margin: 0 var(--space-16) 0 auto; }
  .qc .qf-choice--media .qf-choice__body { padding: var(--space-12); }
}
@media (prefers-reduced-motion: reduce) {
  .qf * { transition: none !important; }
}

/* ---------- Closing: final CTA + footer ----------
   Wireframe §13 and the footer, in that order after #packaging (Lino, 2026-10-28:
   option B's CTA with looping steps, option C's footer; options-closing.html).
   The CTA is copy on the left and a numbered timeline on the right. ds/closing-steps.js
   adds .is-looping to the list and walks .is-on through the steps while it is on
   screen: a dot pops in, its text rises, the line to the next step fills, then all
   three hold, fade out and start again. Without the script, with reduced motion and
   under ?qa the three steps simply stay visible. */
.closing { padding: var(--section-y) var(--gutter) var(--space-32); }
/* The deep green panel of options-closing.html option C (Lino, 2026-10-28), on paper */
.closing__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-64) var(--space-96); align-items: center;
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-96);
  border-radius: var(--radius-panel); overflow: hidden;
  background: radial-gradient(120% 90% at 85% 40%, var(--teal-800) 0, var(--teal-900) 45%, var(--teal-950) 100%);
}
/* On the panel the dot ring matches the gradient and the running line is lime */
.closing__inner .closing-steps li::before { box-shadow: 0 0 0 6px var(--teal-900), 0 0 0 6px rgb(var(--rgb-beam) / 0); }
.closing__inner .closing-steps li:not(:last-child)::after { background: var(--aqua-200); }
/* The copy column is as wide as its widest line: the title in exactly two lines
   (Lino 2026-10-28) or the two buttons side by side, whichever is wider */
.closing__copy .t-h2 { margin-top: var(--space-20); font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.75rem); }
.closing__line { display: block; white-space: nowrap; }
.closing__copy .t-lede { margin: var(--space-20) 0 0; max-width: 30em; }
.closing__copy .actions { margin-top: var(--space-32); flex-wrap: nowrap; gap: var(--space-16); }
.closing-steps { position: relative; display: grid; gap: var(--space-40); margin: 0; padding: var(--space-8) 0 0 var(--space-64); list-style: none; counter-reset: step; }
.closing-steps::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 28px; width: 1px; background: var(--border-control); opacity: 0.4; }
.closing-steps li { position: relative; padding-top: 6px; counter-increment: step; }
.closing-steps li::before {
  content: counter(step); position: absolute; left: calc(-1 * var(--space-64)); top: 0; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: var(--ui-size); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
  color: var(--teal-950); background: var(--aqua-200);
  box-shadow: 0 0 0 6px var(--surface-1), 0 0 0 6px rgb(var(--rgb-beam) / 0);
}
/* The filled part of the line, from this dot to the next one */
.closing-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(-1 * var(--space-64) + 19px); top: 40px; bottom: calc(-1 * var(--space-40)); width: 2px; margin-left: -0.5px;
  background: var(--teal-700); border-radius: 2px; transform: scaleY(0); transform-origin: top;
}
.closing-steps b { display: block; font-size: var(--h3-size); line-height: var(--h3-leading); letter-spacing: var(--h3-track); font-weight: var(--h3-weight); color: var(--text-1); }
.closing-steps span { display: block; margin-top: var(--space-8); font-size: var(--body-size); line-height: var(--body-leading); max-width: 30em; color: var(--text-2); }
@keyframes closing-ping {
  from { box-shadow: 0 0 0 6px var(--ring, var(--surface-1)), 0 0 0 6px rgb(var(--rgb-beam) / 0.7); }
  to { box-shadow: 0 0 0 6px var(--ring, var(--surface-1)), 0 0 0 20px rgb(var(--rgb-beam) / 0); }
}
.closing__inner { --ring: var(--teal-900); }
@media (prefers-reduced-motion: no-preference) {
  .closing-steps.is-looping li::before { opacity: 0; transform: scale(0.5); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
  .closing-steps.is-looping :is(b, span) { opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
  .closing-steps.is-looping li::after { opacity: 0; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
  /* Delays only on the way in, so the reset fades everything together */
  .closing-steps.is-looping li.is-on::before {
    opacity: 1; transform: none; animation: closing-ping 0.9s var(--ease-out) 0.15s both;
    transition: opacity 0.4s var(--ease-entrance) 0.15s, transform 0.55s cubic-bezier(.34, 1.56, .64, 1) 0.15s;
  }
  .closing-steps.is-looping li.is-on b { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-entrance) 0.3s, transform 0.6s var(--ease-entrance) 0.3s; }
  .closing-steps.is-looping li.is-on span { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-entrance) 0.42s, transform 0.6s var(--ease-entrance) 0.42s; }
  /* The line runs down as the next step arrives, just before its dot pops */
  .closing-steps.is-looping li.is-on:has(+ li.is-on)::after { opacity: 1; transform: scaleY(1); transition: opacity 0.2s linear, transform 0.5s var(--ease-out); }
}
.qa .closing-steps li::before, .qa .closing-steps :is(b, span) { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (max-width: 1280px) { .closing__inner { column-gap: var(--space-64); } }
/* One column below 1100: the steps go under the copy, and the title shrinks with
   the panel (the first line is ~10em wide) so it still fits in two lines */
@media (max-width: 1100px) {
  .closing__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-64); padding: var(--space-64) var(--space-52); }
  .closing__copy { container-type: inline-size; }
  .closing__copy .actions { flex-wrap: wrap; }
  .closing__copy .t-h2 { font-size: min(clamp(2.25rem, 1.2rem + 2.6vw, 3.75rem), 100cqi / 10.4); }
}
@media (max-width: 760px) {
  .closing { padding: var(--space-64) var(--space-12) var(--space-24); }
  .closing__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-52); padding: var(--space-52) var(--space-24); }
  .closing-steps { padding-left: var(--space-52); gap: var(--space-32); }
  .closing-steps li::before { left: calc(-1 * var(--space-52)); width: 34px; height: 34px; }
  .closing-steps::before { left: 16px; }
  .closing-steps li:not(:last-child)::after { left: calc(-1 * var(--space-52) + 16px); top: 34px; bottom: calc(-1 * var(--space-32)); }
}

/* Brand wordmark (v70, Lino's logo): the scored OD tablet, then "OD" in Poppins 800
   and "nutra" in Poppins 600. Light grounds: OD teal-500 #46878D, nutra aqua-400
   #5DB2C3, as in the logo. Dark grounds (film, forest, brand, the dark nav): OD
   white, nutra aqua-300. It is a logo, so the 2.3:1 of aqua on white is accepted. */
.wm {
  --wm-od: var(--teal-500); --wm-nutra: var(--aqua-400);
  display: inline-flex; align-items: center; gap: 0.12em;
  font-family: "Poppins", var(--font-sans); line-height: 1; letter-spacing: -0.02em;
  text-decoration: none;
}
:is([data-surface="film"], [data-surface="forest"], [data-surface="brand"]) .wm { --wm-od: var(--white); --wm-nutra: var(--aqua-300); }
.wm__tab { width: 1.42em; height: 1.42em; flex: none; margin-right: 0.3em; filter: drop-shadow(0 1px 2px rgb(var(--rgb-ink) / 0.18)); }
.wm__od { font-family: "Poppins", var(--font-sans); font-weight: 800; color: var(--wm-od, var(--teal-500)); letter-spacing: -0.01em; }
.wm__nutra { font-family: "Poppins", var(--font-sans); font-weight: 600; color: var(--wm-nutra, var(--aqua-400)); letter-spacing: -0.03em; }

/* Footer: wordmark, one line and contact (address, phone and email unconfirmed),
   three link columns, the legal row, then a giant "OD Nutra" cropped by the page end. */
.ft { padding: var(--space-96) var(--gutter) 0; overflow: hidden; }
.ft__inner { max-width: var(--content-max); margin: 0 auto; }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: var(--space-64); }
.ft__mark { font-size: 26px; }
.ft__line { margin: var(--space-16) 0 0; max-width: 24em; }
.ft__contact { display: grid; gap: var(--space-8); margin-top: var(--space-24); font-style: normal; }
.ft__contact a, .ft__contact span { display: inline-flex; align-items: center; gap: var(--space-8); width: fit-content; font-size: var(--ui-size); letter-spacing: var(--ui-track); color: var(--text-2); text-decoration: none; }
.ft__contact a:hover { color: var(--text-1); }
.ft__contact svg { width: 16px; height: 16px; flex: none; color: var(--text-accent); }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.ft__cols h3 { margin: 0 0 var(--space-16); font-size: var(--small-size); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.ft__cols ul { display: grid; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.ft__cols a { font-size: var(--ui-size); letter-spacing: var(--ui-track); color: var(--text-1); text-decoration: none; text-underline-offset: 3px; }
.ft__cols a:hover { text-decoration: underline; }
.ft__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12) var(--space-32);
  margin-top: var(--space-64); padding-top: var(--space-24); border-top: 1px solid var(--border);
}
.ft__bottom p { margin: 0; max-width: 62em; font-variant-numeric: tabular-nums; }
.ft__giant {
  margin: var(--space-52) 0 0; font-size: clamp(80px, 20vw, 300px);
  letter-spacing: -0.05em; line-height: 0.74; white-space: nowrap; text-align: center;
  user-select: none; transform: translateY(4%);
  --wm-od: var(--teal-700); --wm-nutra: var(--aqua-400);   /* the wordmark in brand colours, v70 */
}
@media (max-width: 1100px) { .ft__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-52); } }
@media (max-width: 760px) {
  .ft { padding-top: var(--space-64); }
  .ft__cols { grid-template-columns: 1fr 1fr; gap: var(--space-40) var(--space-24); }
  .ft__cols > :last-child { grid-column: 1 / -1; }
}