/* ————————————————————————————————————————————————
   Finding Future Perfect · Mission 2071
   Tokens taken from the MOTF design system (motf-design-system.vercel.app):
   F2 grey canvas · white panels at 32px · black ink · pill buttons
   4px spacing grid · radii 8/24/32/pill · 300ms motion
   Type: ABC Diatype (ours) on their scale
   ———————————————————————————————————————————————— */

:root{
  /* core palette */
  --canvas:#F2F2F2;           /* the page */
  --panel:#FFFFFF;            /* content panels */
  --card-bg:#FAFAFA;
  --ink:#000000;
  --grey-30:#262626;          /* dark hover */
  --grey-57:#6E6E6E;          /* secondary text, 4.55:1 on canvas */
  --grey-42:#949494;
  --grey-15:#D9D9D9;          /* field borders */
  --grey-10:#E6E6E6;          /* hairlines */

  /* aliases kept so existing rules resolve */
  --paper:#FFFFFF;
  --ink-55:var(--grey-57);
  --ink-35:var(--grey-42);
  --fill:#F2F2F2;
  --fill-hi:var(--grey-10);
  --line:var(--grey-10);

  /* radii */
  --r-sm:8px;                 /* small controls */
  --r-field:12px;
  --card:24px;                /* cards */
  --card-lg:32px;             /* panels */
  --pill:999px;

  /* 4px spacing grid */
  --s-1:4px;  --s-2:8px;  --s-4:16px; --s-8:32px;
  --s-10:40px; --s-20:80px; --s-30:120px; --s-40:160px;

  /* motion */
  --dur:300ms; --dur-hover:150ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-fade:cubic-bezier(0,0,.58,1);
  --ease-transform:cubic-bezier(.22,1,.36,1);

  --font:'ABC Diatype', "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page:40px;                /* xl outer gutter */
  --gap:clamp(18px, 3vh, 26px);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  padding:var(--page);
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--font);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* buttons take a soft halo; fields just deepen their own border (their spec) */
:is(button, a):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
input:focus-visible{outline:none;}
[tabindex="-1"]:focus{outline:none;}

/* ————— Shell — white panel on the grey canvas ————— */
.shell{
  min-height:calc(100dvh - var(--page) * 2);
  min-height:calc(100vh - var(--page) * 2);
  display:flex; flex-direction:column;
  background:var(--panel);
  border-radius:var(--card-lg);
  padding:0 var(--s-10);
  max-width:1600px; margin-inline:auto;
}
.shell > *{width:100%; max-width:1200px; margin-inline:auto;}

/* top bar — their header sits 110px tall; inside the panel that reads as 32px in */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:var(--s-8) 0;
  min-height:78px;
}
.brand{display:block; line-height:0; border-radius:var(--r-sm);}
.brand img{height:48px; width:auto; display:block;}
.progress{display:flex; align-items:center; gap:14px; font-size:14px; font-weight:500; color:var(--ink-55);}
.progress-label{font-variant-numeric:tabular-nums; white-space:nowrap;}
.progress-bar{display:flex; gap:4px;}
.progress-bar i{width:28px; height:4px; border-radius:var(--pill); background:var(--grey-10); transition:background var(--dur) var(--ease);}
.progress-bar i.on{background:var(--ink);}


/* ————— Stage ————— */
.stage{
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-8);
  min-height:calc(100svh - var(--page) - 118px);   /* header ≈118px; footer starts below the fold */
  padding-block:var(--s-10) var(--s-20);
}
.state{display:flex; flex-direction:column; gap:var(--gap);}

/* statement screens sit centred; record screens run two-up */
:is(#s-locked, #s-wait){align-items:center; text-align:center;}
:is(#s-locked, #s-wait) :is(.lede, .b4-lead, .b4-ask){margin-inline:auto;}

/* ————— Type ————— */
.ghost{
  margin:0 0 calc(var(--gap) * -.55);
  font-size:clamp(16px, 1.8vw, 19px); font-weight:400; line-height:1.35;
  color:var(--ink-35);
}
h1{
  margin:0; text-wrap:balance;
  font-size:clamp(34px, 4vw, 56px); font-weight:500; line-height:1.06; letter-spacing:-.035em;
}
h2{
  margin:0; text-wrap:balance;
  font-size:clamp(24px, 3.2vw, 34px); font-weight:500; line-height:1.18; letter-spacing:-.022em;
}
.eyebrow{margin:0; font-size:14px; font-weight:500; color:var(--ink-55);}
.lede{margin:0; max-width:52ch; font-size:17px; line-height:1.55; color:var(--ink-55);}
.lede.small{font-size:15px;}

/* ————— Locked: notify ————— */
.notify{display:flex; gap:8px; width:100%; max-width:460px; margin-inline:auto;}
.notify input{
  flex:1; min-width:0;
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--pill);
  color:var(--ink); padding:15px 22px; font-size:15px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.notify input::placeholder{color:var(--grey-42);}
.notify input:focus{border-color:var(--grey-42); outline:none;}
.notify button{
  background:var(--ink); color:#fff; border:0; border-radius:var(--pill);
  font-family:inherit; font-size:14px; font-weight:500;
  padding:14px 28px; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-hover) var(--ease);
}
.notify button:hover{background:var(--grey-30);}
.notify-ok{margin:0; font-size:15px; color:var(--ink-55);}


/* ————— Image reel — edge-to-edge inside the panel, loops forever ————— */
.reel{
  align-self:stretch;
  margin-top:var(--s-4);
  margin-inline:calc(var(--s-10) * -1);      /* bleed to the panel edges */
  width:calc(100% + var(--s-10) * 2);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reel-track{
  --reel-gap:12px;
  --reel-w:240px;              /* integer width keeps the wrap exact */
  --reel-n:4;                  /* images per set */
  display:flex; gap:var(--reel-gap); width:max-content;
  animation:reel 46s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.reel img{
  width:var(--reel-w); height:auto; aspect-ratio:4/3;  /* size known before load — no reflow mid-loop */
  flex:none; display:block;
  border-radius:var(--card); object-fit:cover;
  background:var(--canvas);
}
/* Travel exactly one set: n images plus the gap that follows each.
   Pixel maths, not a percentage — percentages drift on subpixel widths and the
   loop then jumps a pixel or two every cycle. */
@keyframes reel{
  to{ transform:translateX(calc((var(--reel-w) + var(--reel-gap)) * var(--reel-n) * -1)); }
}
.reel:hover .reel-track{animation-play-state:paused;}

@media (max-width:880px){
  .reel{ margin-inline:calc(var(--s-8) * -1); width:calc(100% + var(--s-8) * 2); }
  .reel-track{--reel-w:200px;}
}
@media (max-width:560px){
  .reel{ margin-inline:-20px; width:calc(100% + 40px); }
  .reel img{border-radius:16px;}
  .reel-track{--reel-w:168px; --reel-gap:10px; animation-duration:34s;}
}
@media (prefers-reduced-motion: reduce){
  .reel-track{animation:none;}
  .reel{overflow-x:auto;}
}


/* ————— Countdown to the pods opening ————— */
.countdown{
  /* needs a real width: the parent centres its children, so without this the
     flex:1 cells on mobile collapse to their minimum */
  width:100%; max-width:424px; margin-inline:auto;
  display:flex; gap:8px; justify-content:center;
  margin-top:calc(var(--gap) * -.25);
}
.cd-cell{
  /* fixed square so the four cells match — otherwise each sizes to its label
     and "Seconds" comes out wider than "Days" */
  width:92px; height:92px; flex:none;
  background:var(--canvas); border-radius:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.cd-num{
  font-size:30px; font-weight:500; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd-lab{font-size:13px; line-height:1; color:var(--grey-57);}
@media (max-width:560px){
  .countdown{gap:6px;}
  .cd-cell{width:auto; height:78px; flex:1 1 0; min-width:0;}
  .cd-num{font-size:24px;}
  .cd-lab{font-size:12px;}
}

/* ————— Ready: their pill chip row ————— */
.brief{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.brief li{
  background:var(--canvas); color:var(--grey-57);
  font-size:14px; font-weight:500; line-height:1;
  padding:11px 17px; border-radius:var(--pill);
}

/* ————— Viewfinder: their media card ————— */
.state-record{gap:calc(var(--gap) * .9);}
.q-col{display:flex; flex-direction:column; gap:14px;}
.view{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--ink);
  border-radius:var(--card); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.view video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1); display:none;
}
.view.has-cam video{display:block;}
.corner{position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.35); z-index:2;}
.corner.tl{top:18px; inset-inline-start:18px; border-inline-end:0; border-bottom:0;}
.corner.br{bottom:18px; inset-inline-end:18px; border-inline-start:0; border-top:0;}
.view-idle,.view-live{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hint{font-size:15px; color:rgba(255,255,255,.65);}
.clock{font-variant-numeric:tabular-nums; font-size:clamp(46px,9vw,68px); font-weight:500; letter-spacing:-.02em; color:#fff;}
.view.low .clock{animation:pulse 1s steps(2,end) infinite;}
.recline{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14); border-radius:var(--pill); padding:8px 16px;
  font-size:14px; font-weight:500; color:#fff;
}
.dot{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.1s steps(2,end) infinite;}
@keyframes pulse{50%{opacity:.25}}

.fuse{
  position:absolute; bottom:0; inset-inline-start:0; z-index:3;
  height:3px; width:100%; background:#fff;
  transform-origin:0 50%; transform:scaleX(0);
}
.view.armed .fuse{transform:scaleX(1);}
.view.running .fuse{transition:transform 45s linear; transform:scaleX(0);}
.view.low .fuse{height:5px;}

/* ————— B3 · First question ————— */
.b3 .q-col{gap:var(--gap);}
.b3 .question{
  font-size:clamp(30px, 3.5vw, 48px); line-height:1.1; letter-spacing:-.03em; max-width:22ch;
}
.b3 .q-col .lede.large{max-width:36ch;}
.q-note{
  margin:calc(var(--gap) * -.35) 0 0; max-width:36ch;
  font-size:clamp(19px, 1.9vw, 24px); font-weight:400; line-height:1.35; letter-spacing:-.01em;
  color:var(--ink);
}
.b3 .v-col{display:flex; flex-direction:column; gap:var(--s-4);}
.b3 .view.has-cam .view-idle{display:none;}          /* the live picture is the message */
.rec-status{
  margin:0; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.rec-status::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--ink); flex:none;}
.rec-status[data-s="off"]{color:var(--ink-55); font-weight:400;}
.rec-status[data-s="off"]::before{background:none; border:1.5px solid var(--grey-42);}
.q-col .actions .fineprint{color:var(--ink-55);}

/* ————— B4 · Surprise + second question ————— */
.b4-wait{
  font-size:clamp(72px, 11vw, 150px); font-weight:500; line-height:.95; letter-spacing:-.045em;
  text-transform:uppercase;
}
.b3 .b4-lead{margin-bottom:calc(var(--gap) * -.5);}
.b4-lead{margin:0; max-width:36ch; font-size:clamp(17px, 1.6vw, 20px); line-height:1.4; color:var(--ink-55);}
.b4-ask{
  max-width:24ch;
  font-size:clamp(28px, 3.2vw, 42px); font-weight:400; line-height:1.15; letter-spacing:-.025em;
  color:var(--ink);
}
/* the surprise lands: WAIT. first, then the new brief */
#s-wait:not([hidden]) .b4-wait{animation:b4-in 520ms var(--ease-transform) both;}
#s-wait:not([hidden]) :is(.b4-lead, .b4-ask){animation:b4-up 420ms var(--ease-transform) 380ms both;}
@keyframes b4-in{from{opacity:0; transform:scale(1.08);}}
@keyframes b4-up{from{opacity:0; transform:translateY(10px);}}
@media (prefers-reduced-motion: reduce){
  #s-wait :is(.b4-wait, .b4-lead, .b4-ask){animation:none !important;}
}

/* ————— Form ————— */
#form{display:flex; flex-direction:column; width:100%;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.field label{font-size:14px; font-weight:500; color:var(--ink);}
.field input{
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--r-field);
  color:var(--ink); padding:15px 18px; font-size:16px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.field input:focus{border-color:var(--grey-42); outline:none;}
.field input.invalid{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}

/* ————— HOME · opening portrait → persona wheel —————
   Fully scroll-driven (no scroll lock, no timers): one portrait layer closes onto its outline, then shrinks into the
   first card of the wheel. Geometry and per-frame values come from app.js (measure / layout / paint). */
body[data-state="ready"]{padding:0;}
body[data-state="ready"] .shell{border-radius:0; max-width:none; padding:0;}
body[data-state="ready"] .shell > :is(.bar, .stage){max-width:none;}
body[data-state="ready"] .bar{position:absolute; inset:0 0 auto; z-index:8; padding:var(--s-8) var(--s-10); min-height:0;}
body[data-state="ready"] .brand img{filter:brightness(0) invert(1); transition:filter .6s cubic-bezier(.35,0,0,1);}
body[data-state="ready"]:has(.scene:not(.is-sky)) .brand img{filter:none;}
body[data-state="ready"] .stage{padding:0; min-height:0; display:block;}
body[data-state="ready"] .ftr{width:calc(100% - var(--s-10) * 2); max-width:1520px; margin:0 auto var(--s-10);}

.state.home{display:block; max-width:none; width:100%; margin:0;}
.scene{
  --ink:#1f1f1f;
  position:relative; height:600vh;                  /* set exactly by JS: transition + settle + wheel + black card */
  background:#fff;
}
.scene-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;}

/* landing intro: the page paints with only the sky (the veil, a copy of it over the whole scene); intro() fades the veil
   off in one piece once the portrait has decoded, then the copy rises and the outline draws in */
.intro-veil{position:absolute; inset:0; z-index:5; background:url(assets/img/sky.webp) 0 0 / 100% 100% no-repeat; pointer-events:none;}
html.intro .hero-copy > *, html.intro .hero-outline{opacity:0;}

/* ——— the opening portrait: ONE layer (sky + portrait + outline). Scroll drives two phases, written by paint():
   1 · its clip closes from the full screen onto the outline (white rises around the face; the face never moves)
   2 · the framed portrait shrinks and lifts into the first card's slot, where card 1 takes over pixel-for-pixel ——— */
.hero-shot{
  position:absolute; inset:0; z-index:3;
  background:url(assets/img/sky.webp) 0 0 / 100% 100% no-repeat;
  transform-origin:0 0; will-change:transform, clip-path;
}
.hero-photo{position:absolute;}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover;}
.hero-outline{position:absolute; border:3px solid #fff; border-bottom:0; pointer-events:none;}
.scene:not(.is-hero) .hero-shot{visibility:hidden;}

.hero-copy{
  position:absolute; z-index:6; left:0; top:0;
  padding:clamp(120px, 20vh, 190px) var(--s-10) 0;
  display:flex; flex-direction:column; align-items:flex-start;
  color:#fff; will-change:transform, opacity;
}
.hero-head{
  margin:0;
  font-size:clamp(44px, 5vw, 76px); font-weight:400; line-height:1.02; letter-spacing:-.035em; text-wrap:balance;
}
.hero-sub{margin:28px 0 0; max-width:30ch; font-size:18px; line-height:1.45; opacity:.92;}
.hero-scroll{
  margin-top:32px;
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px; border-radius:var(--pill);
  background:var(--ink); color:#fff;
  font-size:15px; font-weight:500; letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-hover) var(--ease);
}
.hero-scroll:hover{background:#000;}

/* ——— the wheel screen ——— */
.screen2{position:absolute; inset:0; z-index:2; pointer-events:none;}
.screen2 > *{pointer-events:auto;}
.reveal-copy{
  position:absolute; left:0; right:0; bottom:var(--title-bottom, 60vh); z-index:3;
  padding-inline:var(--s-4); text-align:center; color:var(--ink); will-change:transform, opacity;
}
.reveal-head{font-size:clamp(36px, 3.6vw, 52px); font-weight:500; line-height:1; letter-spacing:-.012em;}
.reveal-sub{margin:var(--s-4) auto 0; max-width:44ch; font-size:18px; line-height:1.33;}

/* the wheel, drawn at card size (after hugeinc.com's radial-cards-marquee) */
.deck-wrap{position:absolute; z-index:2; --enter:1; --settle:1;}
.deck{position:absolute; inset:0;}
.deck:focus-visible{outline:none;}
.deck-track{list-style:none; margin:0; padding:0; position:absolute; inset:0; will-change:transform;}
.card{position:absolute; inset:0; cursor:pointer;}
.card.is-active{cursor:default;}
.card-inner{position:absolute; inset:0; overflow:hidden; background:#c9d4f0; border-radius:var(--rad, 16px);}
/* during the opening the neighbours ease in from the side; card 1 stays hidden until the portrait lands on it */
.card:not([data-k="0"]) .card-inner{opacity:var(--enter); transform:translateX(calc((1 - var(--enter)) * var(--side, 1) * 18%));}
.scene.is-hero .card[data-k="0"]{visibility:hidden;}
.card[data-k="0"] :is(.card-body, .card-shade){opacity:var(--settle);}

.card-media{position:absolute; inset:0; background:url(assets/img/sky.webp) center / cover no-repeat;}
.card-photo{position:absolute; inset:0; display:block; object-fit:cover;}
.card:not([data-k="0"]) .card-photo{width:100%; height:100%;}
.card-shade{position:absolute; inset:50% 0 0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(10,20,45,.55), rgba(10,20,45,0));}
.card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:7% 6%; color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.4em;
  font-size:calc(var(--card-h) * .034);
}
.card-head{margin:0; font-size:1.9em; font-weight:500; line-height:1.1; letter-spacing:-.012em;}
.card-tag{margin:0 0 .8em; font-size:1em; opacity:.92;}


/* the ninth, black card */
.card--cta .card-inner{background:#000;}
.card--cta::after{display:none;}
.card-cta-body{
  position:absolute; inset:0; padding:0 10%;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.55em;
  color:#fff; font-size:calc(var(--card-h) * .07);
}
.cta-head, .finale-head{margin:0; font-size:1em; font-weight:500; line-height:1.04; letter-spacing:-.025em; text-wrap:balance;}
.cta-btn, .finale-cta{
  border:0; border-radius:var(--pill); cursor:pointer;
  background:#fff; color:#000; font-family:inherit; font-weight:500;
  font-size:.48em; padding:.85em 1.5em; line-height:1;
}
.finale-cta{font-size:min(.48em, 18px);}
.finale-cta:hover{background:#e9e9e9;}

/* the finale layer: sits exactly over the black card when it lands, then grows to fill the screen */
.finale{position:absolute; inset:0; z-index:7; visibility:hidden; pointer-events:none;}
.finale.is-on{visibility:visible;}
.finale-bg{position:absolute; inset:0; background:#000;}
.finale-copy{
  position:absolute; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; gap:.55em;
  color:#fff; pointer-events:auto;
}
.finale-copy .finale-head{max-width:12em;}

/* ——— shared reveals ——— */
[data-reveal]{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.35,0,0,1), transform 1.1s cubic-bezier(.35,0,0,1);}
[data-reveal].is-in{opacity:1; transform:none;}
.ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em;}
.ln-i{display:block; transform:translateY(105%); transition:transform 1.1s cubic-bezier(.35,0,0,1) calc(var(--i) * 90ms);}
.is-in > .ln > .ln-i{transform:none;}

/* ——— shared section type: one display size, one rhythm (after hugeinc.com: display-l, tracking −.05em) ——— */
.sec-head, .role-head{margin:0; font-size:clamp(56px, 9vw, 146px); font-weight:400; line-height:.9; letter-spacing:-.05em;}
.pill-light, .pill-dark{
  height:56px; padding:0 30px; border:0; border-radius:var(--pill); cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500; letter-spacing:-.005em;
  transition:background .35s cubic-bezier(.35,0,0,1), transform .35s cubic-bezier(.35,0,0,1);
}
.pill-light{background:#fff; color:#000;}
.pill-light:hover{background:#e9e9e9;}
.pill-dark{background:#1f1f1f; color:#fff;}
.pill-dark:hover{background:#000;}
.pill-light:active, .pill-dark:active{transform:scale(.97);}

/* ——— Section 4 · Make this your job (black) ——— */
.role{position:relative; background:#000; color:#fff; margin-top:-1px; padding:12vh 0 0;}
.role-intro{
  padding:0 max(40px, 6vw);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:6vw; align-items:end;
}
.role-statement{
  margin:0; padding-bottom:.35em; max-width:17em;
  font-size:clamp(28px, 2.9vw, 48px); font-weight:400; line-height:1.12; letter-spacing:-.03em;
}
.role-statement .w{color:rgba(255,255,255,.2); transition:color .35s linear;}
.role-statement .w.on{color:#fff;}

/* the photo panel: rounded card → full bleed (clip-path driven by scroll), image drifts inside (parallax) */
.role-panel{position:relative; margin-top:16vh; height:100vh; height:100svh;}
.role-media{
  position:absolute; inset:0; margin:0; overflow:hidden;
  clip-path:inset(var(--ci-y, 12vh) var(--ci-x, 12vw) round var(--ci-r, 20px));
  will-change:clip-path;
}
.role-media img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; transform:translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.12)); will-change:transform;}
.role-media::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);}
.role-panel-line{
  position:absolute; left:0; right:0; bottom:12vh; z-index:1; margin:0; padding:0 24px; text-align:center;
  font-size:clamp(30px, 3.6vw, 52px); font-weight:500; line-height:1.05; letter-spacing:-.025em; text-wrap:balance;
}

.role-skills-wrap{padding:14vh max(40px, 6vw) 18vh;}
.role-skills{list-style:none; margin:0; padding:0;}
.role-skills li{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); column-gap:6vw; align-items:baseline;
  padding:clamp(20px, 3.4vh, 40px) 0;
}
.skill-t{
  margin:0; font-size:clamp(52px, 7.6vw, 128px); font-weight:400; line-height:.95; letter-spacing:-.05em;
  color:rgba(255,255,255,.16); transition:color .6s cubic-bezier(.35,0,0,1);
}
.skill-d{
  margin:0; max-width:24ch; font-size:clamp(18px, 1.5vw, 24px); line-height:1.35; letter-spacing:-.01em;
  color:#fff; opacity:.18; transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.35,0,0,1), transform .8s cubic-bezier(.35,0,0,1);
}
.role-skills li.is-on .skill-t{color:#fff;}
.role-skills li.is-on .skill-d{opacity:.72; transform:none;}
.role-cta-row{margin-top:12vh; display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.role-cta-note{margin:0; font-size:17px; color:rgba(255,255,255,.62);}

/* ——— Section 5 · How to get the job — hugeinc.com "projects-stack" (sticky cards, 20px stagger, covered cards dim) ——— */
.steps{
  --dock:96px; --stagger:20px;
  --card-h:clamp(28rem, calc(100svh - var(--dock) - 2 * var(--stagger) - 40px), 46rem);
  background:#fff; color:#1f1f1f; padding:18vh max(24px, 3vw) 16vh;
}
.steps-intro{
  max-width:1360px; margin:0 auto 10vh; padding:0 max(16px, 3vw);
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
}
.steps-count{
  margin:0 0 .6em; display:inline-flex; align-items:center; gap:10px;
  font-size:18px; font-weight:500; letter-spacing:-.01em; color:#1f1f1f;
}
.live-dot{position:relative; width:10px; height:10px; border-radius:50%; background:#2D3AC1; flex:none;}
.live-dot::after{content:''; position:absolute; inset:0; border-radius:50%; background:#2D3AC1; animation:live 1.8s cubic-bezier(.2,0,.2,1) infinite;}
@keyframes live{from{transform:scale(1); opacity:.6;} to{transform:scale(3.2); opacity:0;}}

.stack{list-style:none; margin:0 auto; padding:0; max-width:1360px; display:flex; flex-direction:column; gap:5em;}
.stack-item{position:sticky; top:calc(var(--dock) + var(--i) * var(--stagger));}
.stack-card{
  --fg:#fff; --fg-2:rgba(255,255,255,.72); --line:rgba(255,255,255,.28);
  position:relative; height:var(--card-h); border-radius:20px; overflow:hidden;
  padding:clamp(28px, 4.2vw, 60px);
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--bg); color:var(--fg);
  transform:scale(var(--stack-scale, 1)); transform-origin:50% 0; will-change:transform;
}
.stack-card::after{content:''; position:absolute; inset:0; border-radius:inherit; background:#fff; opacity:var(--stack-dim, 0); pointer-events:none;}
.stack-card[data-tone="blue"]{--bg:#2D3AC1;}
.stack-card[data-tone="lilac"]{--bg:#9889FE; --fg:#120f3a; --fg-2:rgba(18,15,58,.72); --line:rgba(18,15,58,.25);}
.stack-card[data-tone="ink"]{--bg:#141414;}

.sc-top{display:flex; justify-content:space-between; align-items:center; gap:16px;}
.sc-n{font-size:clamp(40px, 4.4vw, 78px); font-weight:500; line-height:.9; letter-spacing:-.05em;}
.sc-status{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 18px; border-radius:var(--pill);
  border:1px solid var(--line); font-size:15px; font-weight:500; white-space:nowrap;
}
.sc-status:empty{display:none;}
.sc-status .live-dot{background:#fff;} .sc-status .live-dot::after{background:#fff;}
.sc-main{display:flex; justify-content:space-between; align-items:flex-end; gap:32px;}
.sc-copy{max-width:36rem;}
.sc-title{margin:0; font-size:clamp(34px, 4vw, 68px); font-weight:500; line-height:.98; letter-spacing:-.04em; text-wrap:balance;}
.sc-body{margin:22px 0 0; max-width:32ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.45; color:var(--fg-2);}
.sc-date{margin:0; display:grid; justify-items:end; text-align:right; line-height:.8;}
.sc-pre, .sc-mon{font-size:clamp(18px, 1.5vw, 24px); font-weight:500; letter-spacing:-.01em; line-height:1.2;}
.sc-day{font-size:clamp(120px, 17vw, 260px); font-weight:400; letter-spacing:-.07em; font-variant-numeric:tabular-nums; margin-right:-.04em;}
.sc-progress{
  position:relative; height:2px; margin-top:clamp(24px, 3vw, 40px); background:var(--line); border-radius:2px;
  display:flex; justify-content:space-between;
}
.sc-progress i{position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, 0) * 100%); background:var(--fg); border-radius:2px; transform-origin:0 50%; transform:scaleX(var(--grow, 0)); transition:transform 1.6s cubic-bezier(.35,0,0,1);}
.sc-progress.is-in i{--grow:1;}
.sc-progress span{position:relative; top:14px; font-size:13px; font-weight:500; color:var(--fg-2);}

/* ——— Section 6 · Good questions ——— */
.faq{
  background:#f4f4f6; color:#1f1f1f;
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.25fr); gap:6vw; align-items:start;
  padding:18vh max(40px, 6vw);
}
.faq-side{position:sticky; top:16vh;}
.faq .sec-head{font-size:clamp(52px, 6.6vw, 116px);}
.faq-note{margin:36px 0 0; max-width:24ch; font-size:20px; line-height:1.4; letter-spacing:-.01em; color:#6e6e73;}
.faq-list{position:relative;}
.qa{position:relative;}
.qa::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#d6d6db;
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s cubic-bezier(.35,0,0,1);
}
.qa.is-in::after{transform:none;}
.qa:first-child::before{content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#d6d6db;}
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:clamp(24px, 2.4vw, 36px) 0;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:focus-visible{outline:2px solid #2D3AC1; outline-offset:4px; border-radius:4px;}
.qa-q{
  font-size:clamp(22px, 2.1vw, 34px); font-weight:400; line-height:1.15; letter-spacing:-.025em;
  transition:transform .6s cubic-bezier(.35,0,0,1), color .3s ease;
}
.qa summary:hover .qa-q{transform:translateX(10px);}
.qa[open]:not(.is-closing) .qa-q{color:#2D3AC1;}
.qa-i{position:relative; flex:none; width:22px; height:22px; transition:transform .6s cubic-bezier(.35,0,0,1);}
.qa-i::before, .qa-i::after{content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:currentColor; transition:transform .6s cubic-bezier(.35,0,0,1);}
.qa-i::after{transform:rotate(90deg);}
.qa[open]:not(.is-closing) .qa-i{transform:rotate(180deg); color:#2D3AC1;}
.qa[open]:not(.is-closing) .qa-i::after{transform:rotate(0deg);}
.qa-a{overflow:hidden;}
.qa-a p{margin:0; padding:0 48px clamp(28px, 2.6vw, 40px) 0; max-width:54ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.5; color:#55555a;}

/* ——— Section 7 · the strip (museum gradient) ——— */
.closing{background:#fff; padding:14vh max(24px, 4vw) 10vh;}
.strip{position:relative; border-radius:44px; overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center; background:linear-gradient(100deg, #2D3AC1, #9889FE 55%, #CB9EEB);}
.strip-gl{position:absolute; inset:0; width:100%; height:100%; display:block;}
.strip-gl.no-gl{display:none;}
.strip-copy{position:relative; z-index:1; padding:72px 24px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center;}
.strip-head{margin:0; font-size:clamp(40px, 5.4vw, 88px); font-weight:400; line-height:1; letter-spacing:-.04em;}
.strip-copy .pill-dark{margin-top:36px;}
.strip-note{margin:22px 0 0; font-size:16px; color:rgba(255,255,255,.88);}



@media (max-width:880px){
  .role{padding-top:96px;}
  .role-intro{padding:0 20px; grid-template-columns:1fr; row-gap:40px;}
  .role-panel{margin-top:72px; height:80svh;}
  .role-skills-wrap{padding:88px 20px 96px;}
  .role-skills li{grid-template-columns:1fr; row-gap:12px; padding:22px 0;}
  .skill-t{font-size:clamp(44px, 13vw, 64px);}
  .steps{--dock:76px; --stagger:14px; --card-h:clamp(26rem, calc(100svh - var(--dock) - 2 * var(--stagger) - 24px), 34rem); padding:96px 12px 88px;}
  .steps-intro{padding:0 8px; margin-bottom:56px;}
  .stack{gap:3em;}
  .sc-main{flex-direction:column-reverse; align-items:flex-start; gap:24px;}
  .sc-date{justify-items:start; text-align:left; grid-auto-flow:column; align-items:baseline; gap:10px; line-height:1;}
  .sc-day{font-size:clamp(84px, 25vw, 120px); line-height:.82;}
  .faq{grid-template-columns:1fr; gap:48px; padding:96px 20px;}
  .faq-side{position:relative; top:0;}
  .qa-a p{padding-right:0;}
  .closing{padding:72px 12px 56px;}
  .strip{min-height:360px; border-radius:32px;}
  body[data-state="ready"] .bar{padding:20px;}
  /* phones: headline above the face, the rest at the foot of the screen — never over the face */
  .hero-copy{padding:96px 20px 28px; height:100%; right:0;}
  .hero-sub{margin-top:auto; text-shadow:0 1px 14px rgba(10,20,45,.35);}
  .hero-scroll{margin-top:var(--s-2);}
}
@media (prefers-reduced-motion: reduce){
  .scene *, .scene *::before, .scene *::after{transition-duration:0s !important; transition-delay:0s !important;}
}

/* ————— B1 · Before you begin — intro left, checklist card right ————— */
.kicker{
  margin:0; font-size:14px; font-weight:500; line-height:1.4;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-55);
}
.display{
  font-size:clamp(56px, 8.4vw, 112px); font-weight:500; line-height:1; letter-spacing:-.045em;
}
.lede.large{font-size:clamp(18px, 1.7vw, 21px); line-height:1.5; max-width:30ch;}
.b1-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b1-card{
  display:flex; flex-direction:column; gap:var(--s-4);
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--card-lg);
  padding:var(--s-10);
}
.card-title{font-size:20px; line-height:1.3; letter-spacing:-.01em;}
.b1-card .lede{max-width:none;}
.b1-consent{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  margin-top:var(--s-4);
}
.b1-consent input{margin-top:2px; accent-color:var(--ink); width:18px; height:18px; flex:none; cursor:pointer;}
.b1-consent span{font-size:14px; line-height:1.5; color:var(--ink);}
.b1-link{
  align-self:flex-start;
  font-size:14px; font-weight:500; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  border-radius:var(--r-sm);
  transition:opacity var(--dur-hover) var(--ease);
}
.b1-link:hover{opacity:.6;}
.b1-consent + .b1-link{margin-left:30px; margin-top:calc(var(--s-2) * -1);}   /* aligns under the consent text */
.btn-block{width:100%; margin-top:var(--s-4);}
.b1-alt{align-self:center;}

/* ————— B2 · Camera and microphone check ————— */
.btn.btn-outline{
  background:var(--panel); color:var(--ink); border:1px solid var(--grey-15);
}
.btn.btn-outline:hover{background:var(--panel); border-color:var(--ink);}
.btn.btn-outline[disabled]:hover{border-color:var(--grey-15);}
.b2-media, .b2-side{display:flex; flex-direction:column; gap:var(--s-4);}
.b2-preview{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--card-bg); border:1px dashed var(--grey-42); border-radius:var(--card);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease-fade), border-color var(--dur) var(--ease-fade);
}
.b2-preview.has-cam{background:var(--ink); border-color:transparent; border-style:solid;}
.b2-preview video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.b2-preview.has-cam video:not([hidden]){display:block;}
#b2-cam{transform:scaleX(-1);}                     /* mirror, like a selfie camera */
#b2-playback{background:var(--ink);}                   /* unmirrored: flipping it would flip the player controls too */
.b2-empty{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  padding:var(--s-8); text-align:center; color:var(--ink-55);
}
.b2-empty p{margin:0; font-size:16px;}
.b2-icon{color:var(--ink);}
.b2-test{
  display:flex; flex-direction:column; gap:var(--s-2);
  border-top:1px solid var(--line); padding-top:var(--s-8); margin-top:var(--s-4);
}
.b2-test .lede{max-width:none; font-size:15px;}
.b2-test-row{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-2);}
.btn.is-rec{font-variant-numeric:tabular-nums; border-color:var(--ink);}
.btn.is-rec::before{
  content:''; display:inline-block; width:8px; height:8px; margin-inline-end:9px; vertical-align:1px;
  border-radius:50%; background:var(--ink); animation:pulse 1.1s steps(2,end) infinite;
}
button.b1-link{background:none; border:0; padding:0; font-family:inherit; cursor:pointer;}

.b2-side .lede.large{max-width:36ch;}
.b2-status{margin:var(--s-4) 0 0;}
.b2-row{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding-block:var(--s-4); border-bottom:1px solid var(--line);
}
.b2-row dt{font-size:16px; font-weight:500;}
.b2-row dd{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:15px; color:var(--ink-55); text-align:end;
}
.b2-row dd::before{
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  border:1.5px solid var(--grey-42);
}
.b2-row dd[data-s="asking"]::before{animation:pulse 1.1s steps(2,end) infinite;}
.b2-row dd:is([data-s="on"],[data-s="heard"]){color:var(--ink);}
.b2-row dd:is([data-s="on"],[data-s="heard"])::before{background:var(--ink); border-color:var(--ink);}
.b2-row dd:is([data-s="blocked"],[data-s="missing"]){color:var(--ink); font-weight:500;}
.b2-row dd:is([data-s="blocked"],[data-s="missing"])::before{border-color:var(--ink); border-radius:2px; transform:rotate(45deg);}
#t-b2-say{margin-top:var(--s-4);}
.b2-meter-note{margin:0; font-size:14px; color:var(--ink-35);}
.b2-meter{display:flex; gap:3px; height:22px; align-items:center;}
.b2-meter i{
  flex:1; height:100%; border-radius:var(--pill); background:var(--grey-10);
  transition:background 80ms linear;
}
.b2-meter i.on{background:var(--ink);}
.b2-links{display:flex; gap:var(--s-8); margin-top:var(--s-2);}

/* below the two-up width the columns dissolve so the heading leads the screen */
@media (max-width:879px){
  .b2-media, .b2-side{display:contents;}
  .b2-side h1{order:1;} .b2-side > .lede.large{order:2;} .b2-preview{order:3;}
  .b2-status{order:4; margin-top:0;} #t-b2-say{order:5; margin-top:0;}
  .b2-meter-note, .b2-meter{order:6;} .b2-test{order:7; margin-top:0;}
  #b2-go{order:8;} .b2-links{order:9;}
}

/* ————— B5 · Details ————— */
.b5-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b5-saved{list-style:none; margin:var(--s-4) 0 0; padding:0; border-top:1px solid var(--line);}
.b5-saved li{
  display:flex; align-items:center; gap:12px;
  padding-block:var(--s-4); border-bottom:1px solid var(--line);
  font-size:16px; font-weight:500;
}
.b5-saved svg{
  flex:none; width:22px; height:22px; padding:3px; border-radius:50%;
  background:var(--ink); color:#fff;
}
.b5 #form{gap:0;}
.field-hint{margin:0; font-size:14px; color:var(--ink-55);}
.field-error{margin:0; font-size:14px; font-weight:500; color:var(--ink);}
.field-error::before{content:'! '; }
.b5-privacy{margin:var(--s-2) 0 var(--s-2);}
.b5 .b1-consent{margin-top:var(--s-2);}
.b1-consent input.invalid{outline:2px solid var(--ink); outline-offset:2px;}
.b5-consent-error{margin:var(--s-2) 0 0 30px;}
.b5 .btn-block{margin-top:var(--s-8);}

/* ————— B6 · Application received ————— */
.b6-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b6-ref{
  display:flex; flex-direction:column; gap:6px;
  border-block:1px solid var(--line); padding-block:var(--s-4) calc(var(--s-4) + 4px); margin-top:var(--s-2);
}
.b6-ref-num{margin:0; font-size:28px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.b6-next{display:flex; flex-direction:column; gap:var(--s-2);}
.b6-next .lede{max-width:44ch;}
.b6-dates{margin:var(--s-2) 0 0; display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-55);}

.b6-file-col{display:flex; flex-direction:column; gap:var(--s-4);}
.b6-file{
  display:flex; flex-direction:column; gap:var(--s-4);
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--card-lg);
  padding:var(--s-8);
}
.b6-media{
  position:relative; aspect-ratio:16/10; border-radius:var(--card); overflow:hidden;
  background:var(--ink); margin-block:var(--s-2);
}
.b6-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ink);}
.b6-play{
  position:absolute; inset:0; width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:none; border:0; color:#fff; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500;
  transition:background var(--dur-hover) var(--ease);
}
.b6-play:hover:not([disabled]){background:rgba(255,255,255,.06);}
.b6-play[disabled]{cursor:default; color:rgba(255,255,255,.55);}
.b6-play svg{width:44px; height:44px; padding:11px; border-radius:50%; background:rgba(255,255,255,.16);}
.b6-name{margin:0; font-size:clamp(26px, 2.6vw, 34px); font-weight:500; line-height:1.15; letter-spacing:-.025em;}
.b6-file .lede{max-width:none;}
.b6-actions{display:flex; gap:var(--s-2); flex-wrap:wrap;}
.b6-actions .btn{min-width:140px;}
.b6-note{margin:0; min-height:1.5em; font-size:14px; color:var(--ink-55);}

/* ————— Actions: their pill buttons ————— */
.actions{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.btn{
  border:0; border-radius:var(--pill); cursor:pointer;
  background:var(--ink); color:#fff;
  font-family:var(--font); font-weight:500; font-size:14px; line-height:1;
  padding:14px 28px; min-height:50px;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn:hover{background:var(--grey-30);}
.btn.rec{background:var(--ink);}
.btn[disabled]{opacity:.25; cursor:not-allowed;}
.btn.ghost-btn{
  background:none; border:1px solid var(--ink); color:var(--ink);
}
.btn.ghost-btn:hover{background:var(--ink); color:#fff;}
.fineprint{margin:0; text-align:center; max-width:460px; font-size:14px; color:var(--ink-35);}

/* ————— Footer — the museum's own footer pattern: grey panel inside the white page —————
   Full on the landing and confirmation screens; during the application it shrinks to
   legal + social so nothing competes with the task. */
.ftr{
  margin-top:auto; margin-bottom:var(--s-10);
  background:var(--canvas); border-radius:var(--card-lg);
  padding:var(--s-10);
  display:flex; flex-direction:column; gap:var(--s-8);
}
.ftr-top{display:flex; justify-content:space-between; align-items:center; gap:var(--s-8); flex-wrap:wrap;}
.ftr-intro{display:flex; flex-direction:column; gap:var(--s-2);}
.ftr-head{
  font-size:clamp(28px, 3vw, 40px); font-weight:400; line-height:1.15; letter-spacing:-.02em;
}
.ftr-sub{margin:0; font-size:17px; line-height:1.45; color:var(--ink-55);}
.ftr-actions{margin:0; display:flex; gap:var(--s-2); flex-wrap:wrap;}
.ftr-actions .btn{display:inline-flex; align-items:center; text-decoration:none;}

.ftr-bottom{
  border-top:1px solid var(--grey-15); padding-top:var(--s-8);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4) var(--s-8); flex-wrap:wrap;
}
.ftr-legal{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-8); font-size:14px;}
.ftr-legal .b1-link{font-size:14px; font-weight:400;}
.ftr-copy{color:var(--grey-57);}
.ftr-social{list-style:none; margin:0; padding:0; display:flex; gap:8px;}
.ftr-social a{
  width:44px; height:44px; border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.05); color:var(--ink);
  transition:background var(--dur-hover) var(--ease);
}
.ftr-social a:hover{background:rgba(0,0,0,.1);}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr-top{display:none;}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr{padding-block:var(--s-8);}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr-bottom{border-top:0; padding-top:0;}

/* ————— Prototype nav ————— */
.demo{
  position:fixed; bottom:16px; inset-inline-end:16px; z-index:40;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  pointer-events:none;
}
.demo > *{pointer-events:auto;}
.demo-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); border:0; color:#fff;
  border-radius:var(--pill); font-family:inherit; font-size:13px; font-weight:500;
  padding:10px 16px; cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
}
.demo-dot{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:pulse 1.6s steps(2,end) infinite;
}
.demo-panel{
  background:var(--panel); border:1px solid var(--grey-15);
  border-radius:var(--card); padding:14px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.35);
  width:min(260px, calc(100vw - 32px));
}
.demo-title{
  margin:0 0 10px; font-size:12px; font-weight:500; color:var(--grey-57);
}
.demo-grid{display:flex; flex-direction:column; gap:4px;}
.demo-grid button{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-radius:var(--r-sm);
  font-family:inherit; font-size:14px; color:var(--ink);
  padding:9px 10px; cursor:pointer; text-align:start;
  transition:background var(--dur-hover) var(--ease);
}
.demo-grid button b{
  flex:none; min-width:22px; height:22px; padding-inline:4px; border-radius:var(--pill);
  background:var(--canvas); color:var(--grey-57);
  font-size:11px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.demo-grid button:hover{background:var(--canvas);}
.demo-grid button[aria-current="true"]{background:var(--ink); color:#fff;}
.demo-grid button[aria-current="true"] b{background:rgba(255,255,255,.22); color:#fff;}

/* ————— Desktop ————— */
@media (min-width:880px){
  .state{max-width:680px; margin-inline:auto;}
  #s-wait{max-width:820px;}
  /* locked screen runs full container so the card row is full width.
     width+margin:0 are required: an auto inline margin makes a flex item shrink-to-fit */
  #s-locked{max-width:none; width:100%; margin-inline:0;}
  #s-locked :is(.ghost, h1, .lede, .notify, .notify-ok){max-width:760px; margin-inline:auto;}
  .state-record{
    /* width+margin:0 stop the auto inline margin shrinking the grid to its
       content — without them Q1 and Q2 render at different widths */
    max-width:none; width:100%; margin-inline:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(40px, 5vw, 72px); align-items:center;
  }
  .q-col{gap:16px;}
  .q-col .lede{max-width:40ch;}
  .view{aspect-ratio:16/10; max-height:60vh;}
  /* app.js moves the action into the question column at this width */
  .q-col .actions{align-items:flex-start; padding-block:12px 0;}
  .q-col .actions .fineprint{text-align:start;}
  .state-split{
    max-width:none; width:100%; margin-inline:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(40px, 5vw, 72px); align-items:center;
  }
  .state-split.b5, .state-split.b6{align-items:start;}
  .b5-intro{position:sticky; top:var(--s-10);}
  .state-split.b2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start;}
}

/* ————— Phones ————— */
@media (max-width:1024px){ :root{--page:24px;} .shell{padding-inline:var(--s-8);} }
@media (max-width:560px){
  :root{--page:12px; --card:20px; --card-lg:24px;}
  .shell{padding-inline:20px;}

  /* explicit type ladder so the hierarchy holds at phone width:
     14 label · 34 title · 16 body */
  .ghost{font-size:14px; line-height:1.4; margin-bottom:calc(var(--gap) * -.75);}
  h1{font-size:34px; line-height:1.12; letter-spacing:-.025em;}
  h2{font-size:24px; line-height:1.2;}
  .lede{font-size:16px; line-height:1.5; max-width:34ch;}
  .lede.small{font-size:15px;}
  .eyebrow{font-size:14px;}
  .brand img{height:36px;}
  .progress-bar i{width:14px;}
  .progress{gap:10px; font-size:13px;}
  .stage{min-height:0; justify-content:flex-start;}
  .bar{padding-block:20px 0; min-height:0;}
  .stage{padding-block:28px 24px;}
  .ftr{padding:var(--s-8) 20px; gap:var(--s-8); margin-bottom:20px; margin-inline:-8px; width:calc(100% + 16px);}
  .ftr-actions{width:100%; flex-direction:column;}
  .ftr-actions .btn{width:100%; justify-content:center; white-space:nowrap;}
  .ftr-bottom{flex-direction:column-reverse; align-items:flex-start;}
  .ftr-legal{flex-direction:column; align-items:flex-start; gap:var(--s-2);}
  .ftr-legal .ftr-copy{order:3;}
  .notify{flex-direction:column;}
  .notify button{padding:16px 28px;}
  .btn{width:100%; padding:17px 28px;}
  .actions > *{width:100%;}
  .b6-file{padding:var(--s-6, 24px) 20px;}
  .b6-actions .btn{flex:1; min-width:0;}
  .b4-wait{font-size:72px;}
  .display{font-size:56px;}
  .b1-card{padding:var(--s-8) 20px;}
  .state-split{gap:var(--s-8);}
}

/* every touch device gets a 44px minimum target, regardless of width */
@media (pointer: coarse){
  .demo-toggle{min-height:44px;}
  .demo-grid button{min-height:44px;}
}

@media (prefers-reduced-motion: reduce){
  .view.running .fuse{transition:none;}
  .dot, .view.low .clock{animation:none;}
}

/* ——— Footer: dark, with the pigment trail behind it ——— */
.ftr{position:relative; overflow:hidden; isolation:isolate; background:#0a0a0a; color:#fff;}
.ftr-trail{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;}
.ftr > :not(.ftr-trail){position:relative;}
.ftr-sub, .ftr-copy{color:rgba(255,255,255,.55);}
.ftr-bottom{border-top-color:rgba(255,255,255,.12);}
.ftr .b1-link{color:#fff;}
.ftr-actions .btn{background:#fff; color:#0b0b0c;}
.ftr-actions .btn:hover{background:#e9e9e9;}
.ftr-actions .btn.btn-outline{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);}
.ftr-actions .btn.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.ftr-social a{background:rgba(255,255,255,.08); color:#fff;}
.ftr-social a:hover{background:rgba(255,255,255,.16);}
body[data-state="ready"] .ftr{margin-top:0;}
@media (max-width:880px){ .ftr-social{flex-wrap:wrap;} }

/* landing footer: a full-bleed dark painting surface — the ink is the feature, content sits over it */
body[data-state="ready"] .ftr{
  width:100%; max-width:none; margin:0; border-radius:0;
  min-height:max(560px, 80vh); padding:14vh max(40px, 6vw) 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:12vh;
}
body[data-state="ready"] .ftr-top{align-items:flex-end;}
body[data-state="ready"] .ftr-head{font-size:clamp(48px, 7.4vw, 132px); line-height:.95; letter-spacing:-.045em; max-width:11ch;}
body[data-state="ready"] .ftr-sub{margin-top:24px; font-size:20px;}
.ftr-top, .ftr-bottom{pointer-events:auto;}
@media (max-width:880px){
  body[data-state="ready"] .ftr{min-height:620px; padding:80px 20px 28px; gap:64px;}
}