/* OD Nutra remake: frame 2, the manufacturing films.
   Lino's direction (2026-11-10, second pass): scrolling from the hero, each hero panel slides
   off to its own side, the jar fades away, and from the centre the first film opens until it is
   almost full screen (inset by the same frame as the hero). Then the capsule film rises from
   below and covers it while the powder film shrinks back and dims. The navbar is only the logo
   and the pill floating over everything: no band behind it.

   Two modes, chosen by JS on <html>:
   - .reel-on (tablets and desktops at least 640px tall, motion allowed): the hero and both films
     share one pinned stage; JS writes the progress numbers below from the scroll position.
   - otherwise (phones, short screens, reduced motion, no JS): the hero scrolls away normally and
     each film is a full-screen sticky card; the next card rises over the previous one.

   Numbers JS writes (0 to 1):
     on .reel__stage   --slide (hero panels leaving), --jar-out (jar fading)
     on each .scene    --in (arrived), --out (covered by the next card), --a (copy opacity),
                       --open and --reveal (powder only: how far the film window has opened, and
                       its opacity at the very start)
     on the powder card --clip-t/r/b/l and --clip-rad (the opening window, in px) */

:root {
  /* From the top edge of a film card to the bottom of the floating nav pill */
  --bar-clear: calc(clamp(16px, 2.2vw, 26px) + 54px);
  --copy-top: calc(var(--bar-clear) + clamp(20px, 4.5svh, 52px));
  --scene-r: var(--radius-panel);
  --scene-ground: #dde4e6;             /* the films' own backdrop, so the poster and edges meet */
  --ink-scene: var(--neutral-800);
}

/* ---------- The reel: hero plus films ---------- */
.reel { position: relative; }
.reel__stage { position: relative; }

.scene {
  --in: 1; --out: 0; --a: 1; --open: 1;
  position: sticky; top: var(--frame);
  height: calc(100svh - 2 * var(--frame)); min-height: 520px;
  margin: 0 var(--frame);
  scroll-margin-top: var(--frame);
}
.scene + .scene { margin-top: var(--seam); }
.scene:last-child { margin-bottom: var(--frame); }
.scene:focus { outline: none; }

.scene__card {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--scene-r); background: var(--scene-ground);
  /* Flow mode: the card grows from 90% as it arrives, then shrinks back as the next one covers it */
  transform: translateZ(0) scale(calc((0.9 + 0.1 * var(--in)) * (1 - 0.07 * var(--out))));
  transform-origin: 50% 50%;
  box-shadow: 0 -18px 50px -24px rgb(var(--rgb-ink) / calc(0.35 * var(--in) * (1 - var(--out))));
  will-change: transform;
}

/* The film: arrives zoomed in and settles as the card opens or arrives */
.scene__media {
  position: absolute; inset: 0; z-index: -2;
  transform: scale(calc(1.08 - 0.08 * var(--in) + 0.22 * (1 - var(--open))));
  will-change: transform;
}
.scene__video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; background: var(--scene-ground); }
/* A soft wash on the left so the copy always reads, whatever frame the film is on */
.scene__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(221 228 230 / 0.82) 0%, rgb(221 228 230 / 0.5) 30%, rgb(221 228 230 / 0) 56%);
}
/* Dims the card as the next one covers it */
.scene__dim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #0b1828; opacity: calc(0.42 * var(--out)); }

.scene__copy, .scene__lede, .note { opacity: var(--a); }
/* The copy starts just under the floating nav */
.scene__copy {
  position: absolute; left: var(--pad-x); top: var(--copy-top); max-width: 40rem;
  transform: translateY(calc((1 - var(--in)) * 56px));
}
.scene__eyebrow { margin: 0 0 clamp(4px, 0.5vw, 8px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.scene__title {
  margin: 0 0 clamp(22px, 2.2vw, 32px);
  font-size: clamp(2.5rem, 1rem + 3.3vw, 4.375rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; color: var(--ink-scene);
}
.scene__title em { font-style: normal; color: var(--teal-600); }   /* Lino 2026-11-12: Powder / Capsule in the site teal, like the hero's "manufacturing." */
.scene__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--sm { height: 44px; padding: 0 4px 0 20px; font-size: 0.9375rem; box-shadow: 0 8px 22px -10px rgb(53 208 198 / 0.7); }
.btn--sm .btn__dot { width: 36px; height: 36px; }

.scene__lede {
  position: absolute; left: var(--pad-x); bottom: clamp(28px, 3.4vw, 52px); max-width: 23em; margin: 0;
  font-size: var(--text-body); line-height: 1.42; letter-spacing: -0.01em; color: var(--ink-body);
  transform: translateY(calc((1 - var(--in)) * 32px));
}

/* "Ready for more." card: frosted white, product photo on the right */
.note {
  position: absolute; right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 26px);
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch;
  width: min(440px, 36%); padding: 12px; border-radius: 24px;
  background: rgb(255 255 255 / 0.7); border: 1px solid rgb(255 255 255 / 0.8);
  box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.05), 0 24px 48px -24px rgb(var(--rgb-ink) / 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  transform: translateY(calc((1 - var(--in)) * 44px));
}
.note__body { display: flex; flex-direction: column; padding: 8px 0 8px 10px; }
.note__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--white); color: var(--teal-700); box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.08); }
.note__icon svg { width: 18px; height: 18px; }
.note__title { margin: auto 0 6px; padding-top: 18px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-1); }
.note__text { margin: 0; font-size: 0.8125rem; line-height: 1.38; letter-spacing: var(--small-track); color: var(--ink-body); }
.note__img { width: clamp(118px, 10vw, 150px); height: auto; aspect-ratio: 1; border-radius: 16px; object-fit: cover; }


/* ---------- Pinned reel (tablets and desktops) ---------- */
.reel-on .reel__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.reel-on .hero { position: absolute; inset: 0; height: 100%; }
/* Each hero panel slides off to its own side */
.reel-on .panel { will-change: transform; }
.reel-on .panel--a { transform: translate3d(calc(var(--slide, 0) * (-100% - var(--frame) - 32px)), 0, 0); }
.reel-on .panel--b { transform: translate3d(calc(var(--slide, 0) * (100% + var(--frame) + 32px)), 0, 0); }
/* The jar fades and settles back while the film opens behind it */
.reel-on .jar { opacity: calc(1 - var(--jar-out, 0)); transform: translate(-50%, -50%) scale(calc(1 - 0.16 * var(--jar-out, 0))); }
.is-past .jar, .is-past .jar * { animation-play-state: paused !important; }

/* Both films are full-stage layers: inset by the hero frame, the nav floating on top */
.reel-on .scene { position: absolute; inset: var(--frame); height: auto; min-height: 0; margin: 0; }
.reel-on .scene--powder { z-index: 4; }        /* above the panels, under the fading jar */
.reel-on .scene--capsule { z-index: 11; transform: translate3d(0, calc((1 - var(--in)) * 0.42 * var(--stage-h, 100svh) - var(--ex, 0) * var(--stage-h, 100svh)), 0); will-change: transform; }
.reel-on .scene--capsule:not(.is-up) { visibility: hidden; }
/* Card counter beside the inset cards (Lino 2026-11-11, second pass), centred in the dark margin.
   --cnt (visible) and --cr (the deck flip, 0 to 1) come from the reel script. */
.reel__count { display: none; }
@media (min-width: 1000px) {
  .reel-on .reel__count {
    --k: clamp(0, calc((var(--cr, 0) - 0.3) / 0.4), 1);
    position: absolute; z-index: 10; top: 50%; left: calc(var(--frame) + var(--ix, 0px) / 2);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transform: translate(-50%, -50%); opacity: var(--cnt, 0); pointer-events: none;
    font-size: 0.9375rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #fff;
  }
  .reel__num { display: block; height: 1em; overflow: hidden; }
  .reel__num .reel__roll { display: flex; flex-direction: column; transform: translate3d(0, calc(var(--k) * -50%), 0); }
  .reel__num .reel__roll > span { height: 1em; }
  .reel__track { position: relative; width: 1px; height: clamp(64px, 12svh, 104px); background: rgb(255 255 255 / 0.18); }
  .reel__fill { position: absolute; inset: 0; background: #7fd8d0; transform-origin: 50% 0; transform: scaleY(calc(0.5 + 0.5 * var(--cr, 0))); }
  .reel__total { color: rgb(255 255 255 / 0.55); }
  .reel__name {
    display: grid; margin-top: 10px; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.62);
  }
  .reel__name .reel__roll { display: grid; }
  .reel__name .reel__roll > span { grid-area: 1 / 1; }
  .reel__name .reel__roll > span:first-child { opacity: calc(1 - var(--k)); }
  .reel__name .reel__roll > span:last-child { opacity: var(--k); }
}
/* Pinned, both films land as an inset card (--ix, --iy from the reel script, Lino 2026-11-11), so
   their copy sits inside that card */
.reel-on .scene__copy { left: calc(var(--ix, 0px) + var(--pad-x)); top: calc(var(--iy, 0px) + max(clamp(28px, 3.4vw, 52px), var(--copy-top) - var(--iy, 0px))); }
.reel-on .scene__lede { left: calc(var(--ix, 0px) + var(--pad-x)); bottom: calc(var(--iy, 0px) + clamp(28px, 3.4vw, 52px)); }
.reel-on .note { right: calc(var(--ix, 0px) + clamp(16px, 1.6vw, 26px)); bottom: calc(var(--iy, 0px) + clamp(16px, 1.6vw, 26px)); }
/* Inside the smaller card the upload line must end before the "Ready for more" card starts */
.reel-on .scene { --note-w: min(440px, 36%); }
.reel-on .scene__lede { max-width: min(23em, calc(100% - 2 * var(--ix, 0px) - var(--pad-x) - var(--note-w) - clamp(16px, 1.6vw, 26px) - 28px)); }
.reel-on .scene__card { transform: translateZ(0) scale(calc(1 - 0.07 * var(--out))); }
/* The powder film opens as a window from a small card in the middle of the stage */
.reel-on .scene--powder .scene__card {
  clip-path: inset(var(--clip-t, 0px) var(--clip-r, 0px) var(--clip-b, 0px) var(--clip-l, 0px) round var(--clip-rad, var(--scene-r)));
  box-shadow: none; opacity: var(--reveal, 1); transform: translateZ(0);
}
/* ...and, until it lands, sits a little lower, so the growing card is cut by the bottom edge of
   the screen, as in Dvele's "Let's build the future" (section 2) */
.reel-on .scene--powder {
  transform: perspective(2200px) translate3d(0, calc(var(--rise-y, 0px) - var(--fy, 0px)), 0) rotateX(var(--fr, 0deg));
  transform-origin: 50% var(--iy, 0px); will-change: transform;
}
/* Deck flip into the capsule film (Lino's Brand Appart reference): the powder card stays on top
   while it tips back and leaves upwards, the capsule card rises flat underneath it */
.reel-on .scene--powder.is-flip { z-index: 12; }
.reel-on .scene--powder.is-flown { visibility: hidden; }
/* Section 2's navy wash over the film while the card grows; it leaves (--ho) as before. It sits
   under the left scrim and the card's information, which since Lino's round M takes the white
   line's place and climb (--info-y). */
.scene__hello { display: none; }
.reel-on .scene--powder .scene__hello {
  display: block; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: calc(1 - var(--ho, 0));
  background:
    radial-gradient(120% 70% at 50% 50%, rgb(7 15 31 / 0.30), rgb(7 15 31 / 0) 70%),
    rgb(7 15 31 / 0.34);
}
.reel-on .scene--powder .scene__copy,
.reel-on .scene--powder .scene__lede,
.reel-on .scene--powder .note { transform: translate3d(0, var(--info-y, 0px), 0); }
/* While the card is small the film is the whole screen scaled down with it (Dvele) */
.reel-on .scene--powder .scene__media {
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--media-dy, 0px), 0) scale(calc(var(--media-s, 1) * (1.08 - 0.08 * var(--in))));
}

/* ---------- Section 2: "Two specialized production lines" (Lino 2026-11-11) ----------
   An introduction centred on white, after dvele-homes.webflow.io #welcome-home.
   Pinned: the text sits in the middle of the stage, above the powder film, which rises from
   below as a small portrait card and grows until it fills the frame; the text leaves as the card
   lands. JS writes --ia (text in) and --io (text out) on the stage, --rise-y on the powder scene,
   and .is-gone on .cap once the film has taken over.
   Flow (phones, short screens, reduced motion): a short white section the powder card then rises over. */
.cap {
  position: relative; z-index: 1; min-height: 88svh;
  display: grid; place-items: center;
  padding: calc(var(--frame) + var(--bar-clear) + 24px) var(--pad-x) clamp(48px, 8svh, 96px);
  background: var(--hero-bg, #070f1f); text-align: center;   /* dark ground through section 2 (Lino 2026-11-11) */
}
.cap:focus { outline: none; }
.cap__inner { display: flex; flex-direction: column; align-items: center; max-width: 72rem; }
.cap__eyebrow { margin: 0 0 clamp(2px, 0.4vw, 6px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }   /* frame 7's eyebrow, not a pill (Lino 2026-11-11); light on the dark ground */
.cap__title {
  margin: 0; max-width: 11em;
  font-size: clamp(2.5rem, 1rem + 5vw, 6.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em;
  color: var(--white); text-wrap: balance;
}
.cap__title em { font-style: normal; color: var(--aqua-cta); }   /* 10:1 on the dark ground */
.cap__text {
  margin: clamp(20px, 2.2vw, 30px) 0 0; max-width: 24em;
  font-size: var(--text-body); line-height: 1.42; letter-spacing: -0.01em; color: rgb(255 255 255 / 0.76); text-wrap: balance;
}
/* Flow (phones, short screens, reduced motion): the ground stays dark around both film cards too */
html:not(.reel-on) .scene { background: var(--hero-bg, #070f1f); box-shadow: 0 0 0 var(--frame) var(--hero-bg, #070f1f); }
/* Flow: the three lines rise in, one after the other, when the section comes on screen */
.cap__eyebrow, .cap__title, .cap__text { transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.cap__title { transition-delay: 90ms; }
.cap__text { transition-delay: 200ms; }
html.js:not(.reel-on) .cap:not(.is-in) .cap__eyebrow,
html.js:not(.reel-on) .cap:not(.is-in) .cap__title,
html.js:not(.reel-on) .cap:not(.is-in) .cap__text { opacity: 0; transform: translate3d(0, 24px, 0); }

/* Pinned: a text layer in the middle of the stage, over the powder card. Centred on the whole
   screen and lifted slightly (optical centre); clearing the bar from the top pushed it about 40px
   below the middle (Lino 2026-11-12, "parece estar mas abajo de lo que deberia, subelo un poco"). */
.reel-on .cap {
  position: absolute; inset: 0; z-index: 3; min-height: 0; padding: 0 var(--pad-x) clamp(16px, 4svh, 48px);
  background: none; pointer-events: none;
}
.reel-on .cap.is-gone { visibility: hidden; }
.reel-on .cap__eyebrow, .reel-on .cap__title, .reel-on .cap__text { transition: none; will-change: transform, opacity; }
.reel-on .cap__eyebrow, .reel-on .cap__title {
  opacity: calc(clamp(0, var(--ia, 0) * 1.25 - 0.25, 1) * clamp(0, (1 - var(--io, 0)) * 4, 1));
  transform: translate3d(0, calc((1 - var(--ia, 0)) * 24svh - var(--io, 0) * 7svh), 0);
}
.reel-on .cap__eyebrow { opacity: calc(var(--ia, 0) * clamp(0, (1 - var(--io, 0)) * 4, 1)); }
/* Pinned, the second line is not shown (Lino round M: the card goes straight to its own copy);
   it stays for assistive technology */
.reel-on .cap__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Frame 3: "Start where your product is." ----------
   Pinned (tablets and desktops): the capsule card narrows into the tall card in the middle, the
   film slides so the bottle is centred and zooms a little, a soft band of mist lifts the film
   behind the headline, and the text rises in over it. JS writes, on the capsule scene, --n (0 to 1
   narrowing), --cx/--cy (the clip on each side), --shift/--ox (film slide and zoom origin),
   on .start, --sa (text in); and on the
   stage, --card-w/--card-h (the card's size).
   Flow (phones, short screens, reduced motion): its own white section rising over the capsule
   card: headline, then a card with its own film and the two choices, then the line of text. */
.scene__veil { display: none; }
.start {
  --sa: 1;
  position: relative; z-index: 1; min-height: 100svh;
  display: grid; grid-template-areas: "head" "card" "lede"; justify-items: center; align-content: center;
  row-gap: clamp(24px, 3vw, 40px);
  padding: calc(var(--frame) + var(--bar-clear) + 32px) var(--pad-x) clamp(40px, 6vw, 72px);
  background: var(--white); text-align: center;
}
.start:focus { outline: none; }
.start__head { grid-area: head; }
.start__eyebrow { margin: 0 0 clamp(2px, 0.4vw, 6px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.start__title {
  margin: 0; font-size: clamp(2.5rem, 7.4vw, 8.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em;
  color: var(--navy-900); text-wrap: balance;
}
.start__title em { font-style: normal; color: var(--teal-700); }   /* 6.6:1 on white, >= 3:1 over the misted film */

.start__card {
  grid-area: card; position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, 420px, 76svh * 0.62); aspect-ratio: 0.62;
  border-radius: var(--scene-r); background: var(--scene-ground);
}
.start__media { position: absolute; inset: 0; z-index: -1; }
.start__card .scene__video { object-position: 80% 50%; }

/* The two starting points: a frosted pill with a white thumb under the chosen one */
.start__paths {
  grid-area: card; align-self: end; z-index: 1; margin-bottom: 16px;
  position: relative; display: inline-flex; padding: 4px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.86); border: 1px solid rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.05), 0 14px 34px -16px rgb(var(--rgb-ink) / 0.35);
}
.start__paths::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--thumb-w, 50%);
  transform: translateX(var(--thumb-x, 4px)); border-radius: var(--radius-pill); background: var(--white);
  box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.08), 0 6px 16px -8px rgb(var(--rgb-ink) / 0.3);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}
.start__path {
  position: relative; height: clamp(44px, 3.4vw, 54px); padding: 0 clamp(14px, 1.5vw, 24px);
  border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: clamp(0.875rem, 0.74rem + 0.32vw, 1.0625rem); font-weight: 500; letter-spacing: -0.015em;
  color: var(--neutral-700); transition: color var(--dur-fast) var(--ease-out);
}
.start__path:hover { color: var(--text-1); }
.start__path[aria-selected="true"] { color: var(--navy-900); }

.start__lede {
  grid-area: lede; max-width: 22em; margin: 0;
  font-size: var(--text-body); line-height: 1.42; letter-spacing: -0.01em; color: var(--ink-body);
}

/* Pinned: the text layer over the stage; the capsule card is the card */
.reel-on .start {
  position: absolute; inset: 0; z-index: 12; display: block; min-height: 0; padding: 0;
  background: none; pointer-events: none;
}
.reel-on .start.is-in .start__head, .reel-on .start.is-in .start__paths, .reel-on .start.is-in .start__lede { pointer-events: auto; }
.reel-on .start__card { display: none; }
.reel-on .start__head {
  position: absolute; left: var(--pad-x); right: var(--pad-x); top: 34.5%;
  opacity: var(--sa); transform: translate3d(0, calc((1 - var(--sa)) * 48px - var(--ex, 0) * var(--stage-h, 100svh) * 1.25), 0);
}
.reel-on .start__paths {
  position: absolute; left: 50%; bottom: calc((100% - var(--card-h, 80%)) / 2 + 18px); margin: 0;
  opacity: var(--sa); transform: translate3d(-50%, calc((1 - var(--sa)) * 28px + var(--ex, 0) * var(--pill-dy, 0px)), 0);
}
.reel-on .start__lede {
  position: absolute; right: clamp(32px, 5.4vw, 92px); bottom: calc(var(--frame) + clamp(24px, 3.2vw, 48px));
  max-width: 18em; text-align: left;
  opacity: calc(var(--sa) * (1 - 1.6 * var(--ex, 0)));
  transform: translate3d(0, calc((1 - var(--sa)) * 28px - var(--ex, 0) * var(--stage-h, 100svh) * 0.7), 0);
}
.reel-on .scene--capsule .scene__card { clip-path: inset(var(--cy, 0px) var(--cx, 0px) round var(--scene-r)); }
.reel-on .scene--capsule .scene__media {
  transform-origin: var(--ox, 50%) 0;
  transform: translate3d(calc(var(--n, 0) * var(--shift, 0px)), 0, 0) scale(calc(1.08 - 0.08 * var(--in) + 0.2 * var(--n, 0)));
}
.reel-on .scene--capsule .scene__scrim { opacity: calc(1 - var(--n, 0)); }
/* A soft band of mist behind the headline, so it reads over the bottle and the capsules */
.reel-on .scene--capsule .scene__veil {
  display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--n, 0);
  background: linear-gradient(180deg, rgb(221 228 230 / 0) 25%, rgb(221 228 230 / 0.76) 32.5%, rgb(221 228 230 / 0.76) 54%, rgb(221 228 230 / 0) 61%);
}
.is-start .scene--powder, .is-paths .scene--capsule { visibility: hidden; }

/* ---------- Frame 4: the two starting points ----------
   An information panel and a film side by side. "I Have a Formula" (the default) puts the
   information on the left; "I Need Development" swaps the two panels' sides: they glide past
   each other (the film in front), dipping back a little on the way, while the text and the film
   cross-fade to the other path.
   Pinned: everything of frame 3 except the selector leaves upwards (scenes rules above, --ex),
   and the panels rise in at two speeds (--pb, written on the stage). The selector of frame 3 is
   the one used here; frame 4's own copy of it only shows in the flow layout.
   Flow: a white section after frame 3, the selector sticking to the bottom of the screen;
   on phones the film sits above the information. */
.paths {
  --board-x: clamp(var(--frame), 5.7vw, 104px);
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;
  padding: calc(var(--frame) + var(--bar-clear) + clamp(16px, 4svh, 56px)) var(--board-x) calc(var(--frame) + 20px);
  background: var(--white);
}
.paths:focus { outline: none; }
.paths__switch { order: 2; align-self: center; position: sticky; bottom: calc(var(--frame) + 12px); margin: 0; }
.js .paths:not(.is-near):not(:focus-within) .paths__switch { opacity: 0; transform: translate3d(0, 14px, 0); }
.paths__switch { transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.paths__board {
  --gap: 12px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap);
  height: clamp(440px, calc(100svh - var(--bar-clear) - 150px), 760px);
}
/* wide screens: the film leads, the information card is a little narrower */
@media (min-width: 1200px) { .paths__board { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); } }
.paths__info, .paths__film { position: relative; grid-row: 1; min-width: 0; overflow: hidden; border-radius: var(--scene-r); }
.paths__info {
  grid-column: 1; display: grid; container-type: inline-size;
  background: radial-gradient(120% 90% at 0% 0%, #f6f9f9 0%, rgb(246 249 249 / 0) 60%), linear-gradient(180deg, #edf1f1 0%, #e4eaeb 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 0 0 1px rgb(var(--rgb-ink) / 0.04), 0 30px 60px -40px rgb(var(--rgb-ink) / 0.4);
}
.paths__film {
  grid-column: 2; z-index: 1; isolation: isolate; box-shadow: 0 30px 60px -36px rgb(var(--rgb-ink) / 0.45);
  /* Lino round M: the reel's light films are back here, with a little more contrast than in the reel
     so the ground reads as a grey studio wall beside the pale information card (like frame 3) */
  --film-grade: brightness(0.93) contrast(1.1) saturate(1.06);
  background: #d5dcdf;   /* the films' ground (#dde4e6) after the grade, so poster edges meet */
}

/* Switching path (Lino 2026-11-11): the cards stay where they are and their contents change
   with an upward parallax. In the film card the new film rises from below, its edge sweeping
   up while the picture inside travels less (the parallax), and the old film drifts up and
   darkens beneath it. In the information card each line leaves upwards and the new lines rise
   in, every one travelling a little further than the one before. */
.paths__video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; visibility: hidden;
  object-fit: cover; object-position: var(--film-pos, 80%) 50%; background: var(--scene-ground); filter: var(--film-grade);
}
.paths__video.is-on { z-index: -1; visibility: visible; }
.paths__video.is-out { visibility: visible; animation: paths-film-out 1.15s var(--paths-ease) both; }
.paths__video.is-enter { animation: paths-film-in 1.15s var(--paths-ease) both; }
.paths__board { --paths-ease: cubic-bezier(0.72, 0, 0.18, 1); }
@keyframes paths-film-in {
  from { clip-path: inset(100% 0 0 0); transform: translate3d(0, 24%, 0) scale(1.1); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes paths-film-out { to { transform: translate3d(0, -22%, 0) scale(1.04); filter: var(--film-grade) brightness(0.55); } }

.paths__copy {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 0; padding: clamp(24px, 3.4vw, 52px);
}
.paths__copy[inert]:not(.is-out) { visibility: hidden; }
/* the title block sits higher in the panel, with more room under the buttons (Lino 2026-11-12) */
.paths__body { padding-bottom: clamp(8px, 2.6vw, 40px); }
/* tall portrait tablets: the card is much taller than its text, so the block sits in the middle of the free room instead of at the bottom */
@media (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .paths__copy { justify-content: flex-start; }
  .paths__body { margin-block: auto; padding-bottom: 0; }
}
.paths__copy.is-out .rv { animation: paths-copy-out 0.4s cubic-bezier(0.55, 0, 0.9, 0.45) calc(var(--i, 0) * 18ms) both; }
/* the old lines are gone (0.4s + 7 x 18ms) before the first new one appears */
.paths__copy.is-enter .rv { animation: paths-copy-in 0.95s cubic-bezier(0.16, 0.84, 0.24, 1) calc(0.54s + var(--i, 0) * 55ms) both; }
@keyframes paths-copy-out { to { opacity: 0; transform: translate3d(0, calc(-28px - var(--i, 0) * 7px), 0); } }
@keyframes paths-copy-in { from { opacity: 0; transform: translate3d(0, calc(40px + var(--i, 0) * 9px), 0); } }

.paths__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
/* An eyebrow like every other section's (uppercase, no pill, no icon; Lino 2026-11-12) */
.paths__chip { margin: 0; font-size: var(--text-eyebrow); font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--navy-700); }
.paths__step { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-body); font-variant-numeric: tabular-nums; }
.paths__step b { font-weight: 600; color: var(--ink-title); }
.paths__bars { display: inline-flex; gap: 4px; }
.paths__bars i { width: 18px; height: 2px; border-radius: 2px; background: rgb(var(--rgb-ink) / 0.16); }
.paths__bars i.is-on { width: 30px; background: var(--teal-600); }
/* phones: a tighter counter so the longer eyebrow and the counter share one line (it wraps if not) */
@media (max-width: 479px) {
  .paths__step { gap: 6px; }
  .paths__bars i { width: 10px; }
  .paths__bars i.is-on { width: 18px; }
}
.paths__title {
  margin: 0 0 clamp(10px, 1vw, 14px);
  font-size: clamp(1.875rem, 1.1rem + 1.9vw, 3rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.045em; color: var(--navy-900);
}
.paths__accent { color: var(--teal-600); }   /* 4.3:1 on the panel, large text */
.paths__text { max-width: 27em; margin: 0 0 clamp(18px, 1.8vw, 26px); font-size: var(--text-body); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-body); }
/* The four items, one under the other; no rules between them (Lino) */
/* Same type values as .paths__text so the title leads and the text and items read as one level (Lino 2026-11-12) */
.paths__list {
  display: grid; gap: var(--row-gap, 10px);
  max-width: 26em; margin: 0 0 clamp(22px, 2.2vw, 30px); padding: 0; list-style: none;
  font-size: var(--text-body); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-body);
}
.paths__list li { display: flex; align-items: center; gap: 14px; }
/* each item gets its own icon, bare, without the white tile (Lino 2026-11-12) */
.paths__ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--teal-700); }
.paths__ico svg { width: 22px; height: 22px; }

.paths__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--line {
  height: 44px; padding: 0 20px 0 16px; gap: 8px; background: var(--white); color: var(--navy-900); font-size: 0.9375rem;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-ink) / 0.12);
}
.btn--line svg { width: 16px; height: 16px; color: var(--teal-700); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--navy-900); }
/* Short screens (laptops around 700 to 820px tall): tighter rows so the card never crowds.
   Lino 2026-11-12, "se ve terrible" at laptop size: the extra room under the buttons left the
   eyebrow almost touching the title and the title sitting on the text, so on short screens the
   block drops that room (the space under the buttons equals the card padding) and the freed
   height goes above the title; the title, text, items and buttons get even steps. */
@media (min-width: 760px) and (max-height: 820px) {
  .paths__body { padding-bottom: 0; }
  .paths__list { --row-gap: 8px; }
  .paths__title { margin-bottom: 12px; }
  .paths__text { margin-bottom: 16px; }
  .paths__list { margin-bottom: 22px; }
  .paths__copy { gap: 20px; }
}
/* very short laptop windows (about 740px tall and under): the card's top and bottom padding
   follow the screen height and the steps tighten a little more, so the block still clears the eyebrow */
@media (min-width: 760px) and (max-height: 740px) {
  .paths__copy { padding-block: clamp(24px, 4.6svh, 44px); }
  .paths__list { --row-gap: 6px; margin-bottom: 20px; }
  .paths__title { margin-bottom: 10px; }
  .paths__text { margin-bottom: 14px; }
}

/* Pinned: a layer of the stage; the panels rise in at two speeds */
.reel-on .paths { position: absolute; inset: 0; z-index: 11; display: block; padding: 0; background: none; pointer-events: none; }
.reel-on .paths__switch { display: none; }
.reel-on .paths__board {
  position: absolute; height: auto; left: var(--board-x); right: var(--board-x);
  top: calc(var(--frame) + var(--bar-clear) + clamp(14px, 4.4svh, 60px));
  bottom: calc(var(--p4b, 30px) + var(--pill-h, 62px) + clamp(12px, 1.8svh, 20px));
}
.reel-on .paths.is-on .paths__board { pointer-events: auto; }
.reel-on .paths__info { transform: translate3d(0, calc((1 - var(--pb, 0)) * var(--stage-h, 100svh) * 0.95), 0); }
.reel-on .paths__film { transform: translate3d(0, calc((1 - var(--pb, 0)) * var(--stage-h, 100svh) * 1.2), 0); }

/* ---------- Phones: copy on top, film in the middle, the white card across the bottom ---------- */
@media (max-width: 759px) {
  :root { --bar-clear: 62px; --scene-r: 22px; }
  .scene { min-height: 0; }
  .scene__video { object-position: 74% 50%; }
  .scene__scrim { background: linear-gradient(180deg, rgb(221 228 230 / 0.9) 0%, rgb(221 228 230 / 0.6) 34%, rgb(221 228 230 / 0) 52%, rgb(221 228 230 / 0) 62%, rgb(221 228 230 / 0.75) 82%); }
  /* In flow, so the upload line and the white card can never collide */
  .scene__card { display: flex; flex-direction: column; padding: calc(var(--bar-clear) + 22px) 10px 10px; }
  .scene__copy, .scene__lede, .note { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .scene__copy { padding: 0 10px; }
  .scene__title { font-size: clamp(2.125rem, 9.6vw, 2.75rem); margin-bottom: 18px; }
  /* Over the product the film is dark, so the line gets the same frosted backing as the card */
  .scene__lede {
    align-self: flex-start; margin: auto 0 8px; padding: 10px 14px; max-width: 22em; font-size: var(--text-body); color: var(--ink-body);
    border-radius: 16px; background: rgb(255 255 255 / 0.88); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  }
  .note { width: auto; }
  .note__img { width: 104px; }
  /* Frame 4: film on top, information under it */
  .paths__board { grid-template-columns: minmax(0, 1fr); height: auto; }
  .paths__film { grid-column: 1; grid-row: 1; height: min(56svh, 480px); }
  .paths__info { grid-column: 1; grid-row: 2; }
  .paths__copy { padding: 26px 22px 24px; }
}
@media (max-width: 379px) {
  .scene__card { padding-top: calc(var(--bar-clear) + 16px); }
  .scene__ctas { gap: 8px; }
  .scene__ctas .btn { height: 40px; padding-left: 14px; gap: 8px; font-size: 0.875rem; }
  .scene__ctas .btn__dot { width: 32px; height: 32px; }
  .scene__title { margin-bottom: 14px; }
  .note__img { width: 84px; }
  .note__body { padding-left: 6px; }
  /* Frame 3: the card takes the width so both choices fit inside it */
  .start { padding-inline: var(--frame); }
  .start__head, .start__lede { padding-inline: 14px; }
  .start__path { padding: 0 11px; font-size: 0.8125rem; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .note { width: min(400px, 48%); }
  .scene__lede { max-width: 18em; }
  .reel-on .scene { --note-w: min(400px, 44%); }
  .reel-on .note { width: var(--note-w); }
  .reel-on .start__lede { max-width: 15em; right: clamp(24px, 3vw, 40px); }
}

/* ---------- Reduced motion: posters, no zoom, no growing, no rising copy ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene { --in: 1 !important; --out: 0 !important; --a: 1 !important; --open: 1 !important; }
  .start__paths::before { transition: none !important; }
  .paths__video, .paths__copy .rv { animation: none !important; }
  .cap__eyebrow, .cap__title, .cap__text { transition: none !important; opacity: 1 !important; transform: none !important; }
}