/* ============================================================
   getnessi.ai v2 — film → home → setup → ceremony → handoff

   Sources, in order of authority:
     new_design/…/uploads/GETNESSI-SITE-SPEC.md   copy and sequence
     new_design/…/Nessi Site v2.dc.html           visual reference
     new_design/…/HANDOFF-v2.md                   the send CTA, the typewriter

   The styleguide.md shipped alongside those is the v1 document (cyan,
   IBM Plex Mono, twelve-card storm) and does NOT describe this design.
   v2 is Newsreader for headlines, Schibsted Grotesk for UI, no monospace
   anywhere, teal #7FDFDB for Nessi, coral #FD8360/#E2603A for the user's
   own action. iMessage blue appears exactly once — the handoff preview
   bubble depicts real software, so it carries real software's colour.

   Token names --cream/--body/--cyan etc. are inherited from v1 on
   purpose: /privacy links this sheet for tokens (see legal.v1.css) and
   keeps working unrenamed.
   ============================================================ */

:root{
  /* Base */
  --ink:#07090C;
  --raised:#0D1218;
  --field-focus:#101720;
  --panel:#0D1218;
  --surface:#10161D;
  --line:#151B22;
  --line-2:#1B222B;
  --line-3:#1B222B;
  --line-4:#253039;
  --line-hover:#2B3742;
  --line-skip:#212932;

  /* Text */
  --cream:#F4EFE7;
  --body:#D8D3CA;
  --body-2:#ADB5BF;
  --body-3:#F4EFE7;
  --lede:#ADB5BF;
  --muted:#8B949F;
  --faint:#6C7681;
  --ghost:#4F5966;

  /* Accent. Teal is Nessi; coral is the user acting. */
  --cyan:#7FDFDB;
  --cyan-deep:#2DD3CD;
  --cyan-light:#A8F5F1;
  --teal:#7FDFDB;
  --teal-deep:#2DD3CD;
  --on-cyan:#07171A;
  --coral:#FD8360;
  --coral-deep:#E2603A;
  --coral-text:#26100A;
  --send-dark:#2A1109;

  --grad-cta:linear-gradient(120deg,#FD8360,#E2603A);

  --font-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,serif;

  --col:430px;

  /* Entrances overshoot; consumption accelerates away. */
  --enter:cubic-bezier(.16,1,.3,1);
  --converge:cubic-bezier(.55,0,.35,1);
  --pop:cubic-bezier(.2,1.2,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font-family:inherit}
input{font-family:inherit}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--cyan-light)}

body{
  font-family:var(--font-sans);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}

.stage{display:flex;justify-content:center;min-height:100dvh}

/* The 430px column on a wider field. Light falls from above. */
.frame{
  position:relative;
  width:100%;max-width:var(--col);min-height:100dvh;
  overflow:hidden;
  background:radial-gradient(125% 72% at 50% -8%,#0E141A 0%,#07090C 60%);
}

.view{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--enter),visibility 0s linear .45s;
}
.view.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s var(--enter)}

:where(a,button,input):focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

/* ── keyframes (transcribed from Nessi Site v2.dc.html) ── */

@keyframes nsChipIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.94)}to{opacity:1;transform:translate(0,0) rotate(var(--r))}}
@keyframes nsDrift{0%{transform:translate(0,0)}50%{transform:translate(-5px,-8px)}100%{transform:translate(0,0)}}
@keyframes nsDim{to{opacity:.42;filter:blur(2px) saturate(.65)}}
@keyframes nsConverge{0%{opacity:1;transform:translate(0,0) scale(1)}60%{opacity:.7}100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.05);filter:blur(3px)}}
@keyframes nsBeat{0%{opacity:0;transform:translateY(12px)}16%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-7px)}}
@keyframes nsUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes nsFade{from{opacity:0}to{opacity:1}}
@keyframes nsOut{to{opacity:0}}
@keyframes nsOrbIn{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
@keyframes nsBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes nsSpin{to{transform:rotate(360deg)}}
@keyframes nsRing{0%{opacity:.38;transform:scale(.85)}100%{opacity:0;transform:scale(1.8)}}
@keyframes nsCheck{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes nsPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes nsDot{0%,100%{box-shadow:0 0 0 0 rgba(127,223,219,.4)}50%{box-shadow:0 0 0 7px rgba(127,223,219,0)}}
@keyframes nsCaret{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes nsSweep{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@keyframes nsHalo{0%{opacity:.5;transform:scale(.99)}100%{opacity:0;transform:scale(1.055)}}
@keyframes nsLift{0%,100%{transform:translateY(0);box-shadow:0 12px 30px rgba(226,96,58,.28)}50%{transform:translateY(-3px);box-shadow:0 20px 44px rgba(226,96,58,.4)}}
@keyframes nsNudge{0%,62%,100%{transform:translate(0,0)}74%{transform:translate(3px,-3px)}86%{transform:translate(1px,-1px)}}

/* ── the shared Skip ──────────────────────────────────── */

.skip{
  position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top));
  padding:11px 18px;border-radius:999px;border:1px solid var(--line-skip);
  background:rgba(7,9,12,.72);backdrop-filter:blur(8px);color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;z-index:2;
}
.skip:hover{color:var(--cream);border-color:#37424E}

/* ═══════════════ A. FILM ═══════════════
   14.3s, auto-advances to Home. Skip is visible from 0.8s and
   always lands on Home. The chips are injected by app.js — geometry
   per chip goes in through the CSSOM (see the CSP note in _headers). */

#vFilm{overflow:hidden}
#vFilm.on{animation:nsOut .7s ease 13.6s both}
#vFilm.on .skip{animation:nsFade .8s ease .8s both}

.chips{position:absolute;inset:0}
#vFilm.on .chips{animation:nsDim 1s ease 1.5s both,nsDrift 18s ease-in-out 2s infinite}

.chip{position:absolute;left:var(--l);top:var(--t)}
#vFilm.on .chip{animation:nsChipIn .55s var(--enter) var(--d1) both}
.chip-cv{}
#vFilm.on .chip-cv{animation:nsConverge .95s var(--converge) var(--d2) both}

.chip-card{
  width:252px;padding:12px 14px;border-radius:17px;
  background:rgba(20,26,33,.94);border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:flex;gap:11px;align-items:flex-start;
}
.chip-tx{min-width:0}
.chip-l{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.chip-m{margin-top:4px;font-size:14px;line-height:1.35;color:var(--body)}

/* App tiles: original glyphs in each app's signature colour, not logos.
   Real software's colours, the one sanctioned exception to the palette. */
.tile{flex-shrink:0;width:34px;height:34px;border-radius:9px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.tile svg{display:block}
.t-mail{background:linear-gradient(160deg,#4DA3FF,#1471E8);display:flex;align-items:center;justify-content:center}
.t-mail svg{width:19px;height:19px}
.t-msg{background:linear-gradient(160deg,#5BE370,#21B93F);display:flex;align-items:center;justify-content:center}
.t-msg svg{width:19px;height:19px}
.t-cal{background:#FFF;overflow:hidden}
.t-cal .cb{height:11px;background:#FF3B30}
.t-cal .cd{height:23px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#16150F}
.t-rem{background:#FFF;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 7px}
.t-rem .rl{display:flex;align-items:center;gap:4px}
.t-rem .rl i{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.t-rem .rl b{flex:1;height:2px;border-radius:2px;background:#D6D0C6}
.t-rem .rl1 i{background:#FF3B30}
.t-rem .rl2 i{background:#FF9500}
.t-rem .rl3 i{background:#007AFF}
.t-notes{background:#FFF;overflow:hidden}
.t-notes .cb{height:10px;background:#FFD60A}
.t-notes .nl{padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.t-notes .nl i{height:2px;background:#D6D0C6;border-radius:2px}
.t-notes .nl i.sh{width:60%}

/* The two film beats. Stacked in one grid cell so the block stays centred
   while only one is ever alive. */
.fbeats{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  padding:0 34px;text-align:center;display:grid;
}
.fbeat{
  grid-area:1/1;
  font-family:var(--serif);font-size:clamp(25px,7.2vw,31px);
  line-height:1.24;font-weight:400;letter-spacing:-.01em;text-wrap:pretty;
}
#vFilm.on .f1{animation:nsBeat 2.95s ease 1.9s both}
#vFilm.on .f2{animation:nsBeat 2.95s ease 4.95s both}
.fbeat .coral{color:var(--coral)}
.fbeat .soft{color:var(--muted)}

/* The orb and the resolve line, one centred column. */
.forb{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:40px;padding:0 34px;
  pointer-events:none;
}
.orb{position:relative;flex-shrink:0;width:128px;height:128px}
#vFilm.on .orb{animation:nsOrbIn 1.1s cubic-bezier(.2,.9,.25,1) 8.35s both}
.orb-b{position:absolute;inset:0}
#vFilm.on .orb-b{animation:nsBreathe 5s ease-in-out 9.5s infinite}
.o-glow{position:absolute;inset:-32px;border-radius:50%;background:radial-gradient(circle,rgba(45,211,205,.2) 0%,rgba(45,211,205,0) 68%)}
.o-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(45,211,205,0),rgba(45,211,205,.85),rgba(45,211,205,0));opacity:.4;animation:nsSpin 14s linear infinite}
.o-core{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#101C22 0%,#07090C 74%);border:1px solid rgba(45,211,205,.24)}
.o-inner{position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle at 40% 36%,rgba(168,245,241,.42) 0%,rgba(45,211,205,.16) 52%,rgba(45,211,205,0) 80%);filter:blur(8px)}
.o-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.o-icon img{width:58px;height:auto;display:block}
.o-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(45,211,205,.4)}
#vFilm.on .o-pulse{animation:nsRing 4.5s ease-out 9.7s infinite}

.fresolve{width:100%;max-width:330px;text-align:center}
#vFilm.on .fresolve{animation:nsUp .9s var(--enter) 9.35s both}
.fr-t{font-family:var(--serif);font-size:clamp(24px,7vw,29px);line-height:1.26;letter-spacing:-.01em;text-wrap:pretty}
.fr-sub{margin-top:16px;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
#vFilm.on .fr-sub{animation:nsFade .9s ease 10.5s both}

/* ═══════════════ B. HOME ═══════════════ */

#vHome.on,#vSetup.on,#vCer.on,#vFin.on{overflow-y:auto}

.home{
  position:relative;min-height:100dvh;
  padding:calc(22px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
}

.h-logo{display:flex;align-items:center;gap:10px}
#vHome.on .h-logo{animation:nsUp .7s var(--enter) both}
.h-logo img{display:block}
.h-logo .ic{width:28px;height:auto}
.h-logo .wd{height:18px;width:auto}

.h-h1{
  margin:52px 0 0;font-family:var(--serif);
  font-size:clamp(38px,11.6vw,48px);line-height:1.04;font-weight:400;
  letter-spacing:-.02em;text-wrap:pretty;
}
#vHome.on .h-h1{animation:nsUp .8s var(--enter) .1s both}
.h-h1 .soft{color:var(--muted)}

.h-sub{margin:22px 0 0;font-size:17px;line-height:1.55;color:var(--body-2);max-width:22em;text-wrap:pretty}
.h-guide{margin:20px 0 0;font-size:17px;line-height:1.55;color:var(--cream);max-width:22em;text-wrap:pretty}
.h-guide .soft{color:var(--body-2)}
#vHome.on .h-sub{animation:nsUp .8s var(--enter) .2s both}
#vHome.on .h-guide{animation:nsUp .8s var(--enter) .28s both}

.h-plan{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
#vHome.on .h-plan{animation:nsUp .8s var(--enter) .36s both}
.h-plan li{display:flex;gap:16px;align-items:flex-start}
.h-plan .n{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-4);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--teal);
}
.h-plan .t{font-size:16px;line-height:1.5;color:var(--body);text-wrap:pretty}

.cta{
  width:100%;min-height:58px;padding:18px 22px;border:0;border-radius:16px;
  background:var(--grad-cta);color:var(--coral-text);
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;box-shadow:0 14px 36px rgba(226,96,58,.26);
}
.cta:hover{filter:brightness(1.07)}
#vHome.on .h-cta{margin:40px 0 0;animation:nsUp .8s var(--enter) .44s both}

.h-alt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--faint)}
#vHome.on .h-alt{animation:nsFade .8s ease .6s both}

/* Desktop bridge note. Shown by media query alone — no JS. */
.h-note{
  display:none;margin:22px 0 0;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line-2);text-align:center;
  font-size:13.5px;line-height:1.5;color:var(--muted);
}
@media (min-width:900px){.h-note{display:block}}

/* The lock-screen proof. Pure CSS/HTML — a mock until a real screenshot
   exists, per the handoff. */
.h-proof{margin:64px 0 0;padding-top:40px;border-top:1px solid var(--line)}
#vHome.on .h-proof{animation:nsFade 1s ease .8s both}

.phone{
  position:relative;margin:0 auto;width:250px;height:420px;
  border-radius:38px;padding:9px;background:#14181D;
  box-shadow:0 32px 70px rgba(0,0,0,.6);
}
.phone-in{
  position:relative;height:100%;border-radius:30px;overflow:hidden;
  background:linear-gradient(170deg,#1B2A33 0%,#0B1116 55%,#0A0D11 100%);
  display:flex;flex-direction:column;align-items:center;padding:26px 12px 18px;
}
.notch{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:74px;height:20px;border-radius:999px;background:#07090C}
.p-date{margin-top:30px;font-size:13px;color:rgba(244,239,231,.72);letter-spacing:.02em}
.p-time{margin-top:2px;font-size:62px;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--cream)}
.glass{
  margin-top:26px;width:100%;padding:12px 13px;border-radius:17px;
  background:rgba(28,34,42,.78);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
  display:flex;gap:10px;align-items:flex-start;text-align:left;
}
.glass .tile{width:30px;height:30px;border-radius:8px;padding:0 6px;gap:4px}
.glass .t-rem .rl i{width:4px;height:4px}
.glass .t-rem .rl b{height:2px}
.g-t{min-width:0;flex:1}
.g-hd{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:rgba(244,239,231,.62)}
.g-hd .now{font-weight:400}
.g-tt{margin-top:3px;font-size:14px;font-weight:500;line-height:1.3;color:var(--cream)}
.g-ts{margin-top:1px;font-size:13px;line-height:1.35;color:rgba(244,239,231,.7)}
.p-bar{flex:1}
.p-home{width:96px;height:4px;border-radius:999px;background:rgba(244,239,231,.4);margin-top:auto}

.h-win{
  margin:30px auto 0;max-width:22em;text-align:center;
  font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--cream);
  text-wrap:pretty;
}
.h-fail{margin:14px auto 0;max-width:22em;text-align:center;font-size:15px;line-height:1.45;color:var(--faint);text-wrap:pretty}

/* The one outbound link. The opt-out switch lives on /privacy; the page
   must not strand it. */
.foot{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--cream)}

/* ═══════════════ C. SETUP ═══════════════
   Nothing is validated and nothing is required except the job choice,
   which arrives pre-selected. The submit is a local stage change for
   now — the workspace endpoint lands in a later pass (see app.js). */

.setup{
  position:relative;min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.s-back{
  align-self:flex-start;margin-bottom:34px;padding:8px 0;border:0;
  background:transparent;color:var(--faint);font-family:inherit;font-size:14px;
  cursor:pointer;
}
.s-back:hover{color:var(--cream)}

.s-lab{display:block;font-size:17px;font-weight:500;color:var(--cream)}
.s-in{
  margin-top:12px;width:100%;min-height:54px;padding:15px 18px;
  border-radius:14px;border:1px solid var(--line-4);background:var(--raised);
  color:var(--cream);font-size:16px;outline:none;
}
.s-in:focus{border-color:var(--teal);background:var(--field-focus)}
.s-help{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--faint)}

.s-name{}
.s-jobs{margin-top:34px}
.s-phone{margin-top:34px}
#vSetup.on .s-name{animation:nsUp .7s var(--enter) both}
#vSetup.on .s-jobs{animation:nsUp .7s var(--enter) .08s both}
#vSetup.on .s-phone{animation:nsUp .7s var(--enter) .16s both}

.joblist{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.job{
  position:relative;width:100%;min-height:54px;padding:15px 18px;
  border:1px solid #1D252E;border-radius:14px;background:var(--raised);
  color:var(--body);font-family:inherit;font-size:16px;text-align:left;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.job:hover{border-color:var(--line-hover)}
.job .ck{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;opacity:0;
}
.job.on .ck{opacity:1}
.job .ring{position:absolute;inset:-1px;border-radius:14px;border:1.5px solid var(--teal);pointer-events:none;opacity:0}
.job.on .ring{opacity:1}

.s-spacer{flex:1;min-height:40px}
#vSetup.on .s-cta{animation:nsUp .7s var(--enter) .24s both}

/* ═══════════════ D1. CEREMONY ═══════════════
   Five quiet checklist lines, ~7.4s, then the end card and the
   handoff. No terminal, no agent id — the spec bans both. */

.cer{
  position:relative;min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;
}
.c-orb{position:relative;align-self:center;width:76px;height:76px;margin-bottom:44px}
#vCer.on .c-orb{animation:nsFade .8s ease both}
.c-orb-b{position:absolute;inset:0;animation:nsBreathe 5s ease-in-out infinite}
.c-glow{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,rgba(45,211,205,.16) 0%,rgba(45,211,205,0) 70%)}
.c-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(45,211,205,.22)}
.c-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.c-icon img{width:36px;height:auto;display:block}

.c-list{display:flex;flex-direction:column;gap:22px;max-width:21em;width:100%;align-self:center}
.c-row{display:flex;gap:14px;align-items:center;font-size:16px;line-height:1.45;color:var(--body)}
.c-ck{position:relative;flex-shrink:0;width:21px;height:21px}
.c-hole{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-4)}
.c-ck svg{position:absolute;inset:0;opacity:0}
#vCer.on .c-row.r1{animation:nsFade .6s ease .2s both}
#vCer.on .c-row.r2{animation:nsFade .6s ease 1.1s both}
#vCer.on .c-row.r3{animation:nsFade .6s ease 2s both}
#vCer.on .c-row.r4{animation:nsFade .6s ease 2.9s both}
#vCer.on .c-row.r5{animation:nsFade .6s ease 3.8s both}
#vCer.on .c-row.r1 .c-ck svg{animation:nsPop .5s var(--pop) 1s both}
#vCer.on .c-row.r2 .c-ck svg{animation:nsPop .5s var(--pop) 1.9s both}
#vCer.on .c-row.r3 .c-ck svg{animation:nsPop .5s var(--pop) 2.8s both}
#vCer.on .c-row.r4 .c-ck svg{animation:nsPop .5s var(--pop) 3.7s both}
#vCer.on .c-row.r5 .c-ck svg{animation:nsPop .5s var(--pop) 4.6s both}
#vCer.on .c-row.r1 .c-ck path{animation:nsCheck .45s ease 1.1s both}
#vCer.on .c-row.r2 .c-ck path{animation:nsCheck .45s ease 2s both}
#vCer.on .c-row.r3 .c-ck path{animation:nsCheck .45s ease 2.9s both}
#vCer.on .c-row.r4 .c-ck path{animation:nsCheck .45s ease 3.8s both}
#vCer.on .c-row.r5 .c-ck path{animation:nsCheck .45s ease 4.7s both}

.c-end{margin-top:44px;max-width:21em;width:100%;align-self:center}
#vCer.on .c-end{animation:nsUp .8s var(--enter) 5.2s both}
.c-end-t{font-family:var(--serif);font-size:26px;line-height:1.3;letter-spacing:-.01em}
.c-end-s{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.c-meta{margin-top:22px;font-size:13px;letter-spacing:.04em;color:var(--ghost)}

/* ═══════════════ D2. HANDOFF ═══════════════ */

.fin{
  position:relative;min-height:100dvh;
  padding:calc(30px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.live{display:flex;align-items:center;gap:9px}
#vFin.on .live{animation:nsFade .7s ease both}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:nsDot 2.6s ease-in-out infinite}
.live-lbl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.finh{
  margin:20px 0 0;font-family:var(--serif);
  font-size:clamp(28px,8.4vw,34px);line-height:1.15;font-weight:400;
  letter-spacing:-.015em;text-wrap:pretty;
}
#vFin.on .finh{animation:nsUp .8s var(--enter) .1s both}
.finh .soft{color:var(--muted)}

.fprev{margin-top:32px;border-radius:20px;border:1px solid var(--line-2);background:#0B1015;overflow:hidden}
#vFin.on .fprev{animation:nsUp .8s var(--enter) .2s both}
.fprev-to{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
.fprev-to .k{font-size:13.5px;color:var(--faint)}
.fprev-to .v{font-size:15px;font-weight:500;color:var(--cream)}
.fprev-body{padding:18px 16px 20px;display:flex;justify-content:flex-end}
.bubble{
  max-width:88%;padding:12px 16px;border-radius:20px 20px 6px 20px;
  background:linear-gradient(150deg,#2E9BFF,#1478E8);
  font-size:15.5px;line-height:1.45;color:#FFF;text-wrap:pretty;
}
.caret{
  display:inline-block;width:2px;height:1.05em;margin-left:1px;
  vertical-align:-.18em;background:#FFF;border-radius:1px;
  animation:nsCaret 1.05s steps(1,end) infinite;
}
.caret.off{display:none}

.f-spacer{flex:1;min-height:32px}

.send-wrap{position:relative}
#vFin.on .send-wrap{animation:nsUp .8s var(--enter) .3s both}
.halo{
  position:absolute;inset:0;border-radius:999px;
  border:1.5px solid rgba(253,131,96,.65);pointer-events:none;
  animation:nsHalo 2.6s ease-out .6s infinite;
}
.halo.h2a{border-color:rgba(253,131,96,.45);animation-delay:1.9s}
.send-a{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:66px;padding:12px 12px 12px 24px;border-radius:999px;
  background:linear-gradient(112deg,#FFA07C 0%,#FD8360 42%,#E2603A 100%);
  color:var(--send-dark);font-size:17px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;animation:nsLift 3.4s ease-in-out 1s infinite;
}
.send-a:hover{filter:brightness(1.06);color:var(--send-dark)}
.sweep{
  position:absolute;top:0;bottom:0;left:0;width:46%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
  pointer-events:none;animation:nsSweep 3.4s cubic-bezier(.5,0,.5,1) 1s infinite;
}
.send-l{position:relative;text-align:left;line-height:1.25}
.send-ic{
  position:relative;flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--send-dark);display:flex;align-items:center;justify-content:center;
}
.send-ic svg{width:19px;height:19px;animation:nsNudge 3.4s ease-in-out 1s infinite}

.fine{margin:16px 0 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--faint)}
#vFin.on .fine{animation:nsFade .8s ease .5s both}

/* Desktop only: sms: is inert on most desktops, so hand them a way
   across to the phone with the message already written. Rendered by
   app.js (qr.v6.js — never a third-party QR service), and .ready is
   only set on a successful render. */
.qrwrap{
  display:none;margin-top:26px;padding:22px;border-radius:18px;
  border:1px solid var(--line-2);align-items:center;gap:18px;
}
.qrwrap.ready{display:flex}
.qr{flex-shrink:0;width:104px;height:104px;border-radius:10px;background:#F4EFE7;display:flex;align-items:center;justify-content:center}
.qr svg{width:96px;height:96px;display:block}
.qrcap{font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* ── reduced motion ─────────────────────────────────────
   Not the prototype's global collapse. The film is skipped outright
   in app.js; the plain entrances on home/setup/handoff resolve
   instantly; the ambient loops stop. The ceremony keeps its stagger —
   five quiet fades are the narrative, and collapsing them onto one
   frame removes the story rather than the motion. The typewriter
   keeps running: it is content, not decoration. */

@media (prefers-reduced-motion: reduce){
  #vHome.on *,#vSetup.on *,#vFin.on *{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
  }
  .chips,.o-ring,.o-pulse,#vFilm.on .orb-b,.c-orb-b,.live-dot,.halo,.sweep,.send-a,.send-ic svg{
    animation:none !important;
  }
  .caret{animation:none !important}
}