/* ══════════════════════════════════════════════════════════════
   PROVOQ — provoq.ai
   Tokens lifted from the Provoq design system.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* live · dark neutrals */
  --ink:        #0e0d10;
  --ink-1:      #161518;
  --ink-2:      #1f1e22;
  --line:       #2c2b30;
  --line-2:     #3a393f;

  /* type — every value here clears 4.5:1 on --ink, and the three used for
     small uppercase and monospace labels now clear 7:1, because tracked-out
     11px mono needs more separation than body text at the same ratio. */
  --fg:         #fafafa;  /* 18.6:1 */
  --fg-2:       #b4afa6;  /*  9.0:1 — body copy */
  --fg-3:       #a09a90;  /*  7.1:1 — secondary body, beats */
  --fg-4:       #9e9890;  /*  7.0:1 — captions, sources, fine print */
  --fg-5:       #948fa0;  /*  6.3:1 — speaker labels, footer meta */

  /* signature accent */
  --pink:       #ff2e7e;
  --pink-deep:  #e6005c;
  --pink-soft:  #ff8fb9;

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:    6px;
  --r-lg: 10px;

  --pad:  clamp(22px, 5vw, 64px);
  --ease: cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
/* both-edges reserves the scrollbar's width on the left as well, so the layout
   viewport stays symmetrical inside the window. Without it, a classic
   scrollbar makes every centred block sit half its width left of the true
   centre, which is small enough to read as a mistake rather than a scrollbar.
   Browsers with overlay scrollbars reserve nothing and are unaffected. */
/* scroll-padding clears the tallest state of the sticky header (76px) with room
   to spare, so an anchored heading never lands underneath it. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;scrollbar-gutter:stable both-edges}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
/* `display` on .form/.done would otherwise beat the hidden attribute. */
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
a{color:var(--pink);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--pink-soft)}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:3px}

.mono{font-family:var(--mono)}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--pink-deep);color:#fff;padding:10px 16px;border-radius:var(--r);
  font-size:14px;font-weight:600;
}
.skip:focus{left:12px;color:#fff}

/* ── ambient grain ───────────────────────────────────────────── */
.grain{
  position:fixed;inset:-120px;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-9px,6px)}
  40%{transform:translate(7px,-8px)}
  60%{transform:translate(-6px,-5px)}
  80%{transform:translate(8px,7px)}
}

/* ── scroll progress ─────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--pink-deep),var(--pink),var(--pink-soft));
  box-shadow:0 0 14px rgba(255,46,126,.55);
  transition:width .1s linear;
}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px var(--pad);
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(#0e0d10cc,transparent);
}
.nav.is-stuck{
  padding:13px var(--pad);
  background:rgba(14,13,16,.82);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
}
.nav__brand{display:flex;align-items:center;gap:10px;padding:5px 4px;min-height:44px;color:var(--fg)}
.nav__brand:hover{color:var(--fg)}
.nav__brand .mark{height:26px;width:auto;color:var(--pink);transition:transform .5s var(--ease)}
.nav__brand:hover .mark{transform:translateY(-2px) rotate(-4deg)}
.nav__word{font-size:19px;font-weight:700;letter-spacing:-.6px}
.nav__cta{flex:none;margin-left:clamp(14px,2vw,28px)}
.nav__links{
  --nav-gap:clamp(22px,2.9vw,40px);
  display:flex;align-items:center;gap:var(--nav-gap);
  margin-right:auto;margin-left:clamp(16px,3vw,44px);
}
.nav__links a{
  position:relative;
  font-size:14px;font-weight:500;color:var(--fg-2);white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;
}
.nav__links a:hover{color:var(--fg);border-bottom-color:var(--pink)}
/* Three states that must never be mistaken for one another, and none of which
   is only a colour. Hover is a hairline rule. Focus is the global outline ring.
   Current is a heavier rule, heavier weight and a leading dot, so it still
   reads for anyone who cannot separate the pink from the grey. */
.nav__links a.is-current{
  color:var(--fg);font-weight:600;
  border-bottom:2px solid var(--pink);padding-bottom:5px;
}
.nav__links a.is-current::before{
  content:'';position:absolute;left:-12px;top:50%;translate:0 -50%;
  width:5px;height:5px;border-radius:50%;background:var(--pink);
}
/* A separator sitting in the gap rather than inside either link, so the
   underline on hover still belongs to the word and nothing shifts. */
.nav__links a:not(:last-child)::after{
  content:'·';
  position:absolute;right:calc(var(--nav-gap) / -2);top:50%;
  translate:50% -50%;
  color:var(--pink);opacity:.65;pointer-events:none;
}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:14px 24px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease), background .2s var(--ease),
             border-color .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
/* --pink-deep rather than --pink: white on #ff2e7e is only 3.5:1. */
.btn--solid{background:var(--pink-deep);color:#fff;box-shadow:0 6px 24px -8px rgba(255,46,126,.7)}
.btn--solid:hover{background:#c40050;color:#fff;box-shadow:0 10px 34px -8px rgba(255,46,126,.85);transform:translateY(-1px)}
.btn--solid[disabled],.btn--solid[aria-busy="true"]{background:#a80045;color:#fff}
.btn--ghost{border-color:var(--line-2);color:var(--fg);background:transparent;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:12px 18px;border-radius:999px}
.btn--ghost:hover{border-color:var(--pink);color:var(--pink-soft);background:rgba(255,46,126,.07)}
.btn--quiet{background:transparent;color:var(--fg-2);border-color:transparent;padding:14px 8px}
.btn--quiet:hover{color:var(--fg)}
.btn--sm{font-size:13px;padding:9px 16px}
.btn--sm.btn--ghost{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;border-radius:var(--r);padding:8px 16px;font-weight:500}
.btn--sm.btn--quiet{color:var(--fg-3);padding:8px}
.btn--lg{font-size:16px;padding:16px 30px}

/* ── layout ──────────────────────────────────────────────────── */
/* Sections size to their content. Only the hero claims a whole viewport —
   everything else earns its height, so related ideas stay in one field. */
.s{
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding:clamp(76px,9vh,116px) var(--pad);
  /* Small on purpose: html carries scroll-padding-top, and the two stack. This
     is the extra breathing room on top of the header clearance, not the
     clearance itself. */
  scroll-margin-top:16px;
  isolation:isolate;
}
.s::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glow,none);
}
.s--hero      {--glow:radial-gradient(ellipse 70% 55% at 50% 32%, rgba(255,46,126,.17), transparent 62%), radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255,46,126,.06), transparent 70%)}
.s--moment    {--glow:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,46,126,.09), transparent 68%);background:linear-gradient(180deg,transparent,rgba(22,21,24,.55) 14%,rgba(22,21,24,.55) 86%,transparent)}
.s--partnership{--glow:radial-gradient(ellipse 62% 52% at 12% 24%, rgba(255,46,126,.11), transparent 66%)}
.s--before    {--glow:radial-gradient(ellipse 72% 55% at 50% 18%, rgba(255,46,126,.10), transparent 66%)}
.s--value     {--glow:radial-gradient(ellipse 64% 55% at 16% 60%, rgba(255,46,126,.12), transparent 66%)}
.s--built     {--glow:radial-gradient(ellipse 66% 52% at 78% 26%, rgba(255,46,126,.12), transparent 66%)}
.s--access    {--glow:radial-gradient(ellipse 80% 62% at 50% 30%, rgba(255,46,126,.19), transparent 66%)}

.s--hero{
  min-height:100svh;
  flex-direction:column;justify-content:center;text-align:center;
  padding-top:128px;padding-bottom:104px;
}
.s--access{flex-direction:column;justify-content:center}

.wrap{width:100%;max-width:880px;margin-right:auto}
.wrap--center{margin-inline:auto;text-align:center}
.wrap--right{margin-left:auto;margin-right:0;text-align:right}
/* Wider, but still flush with every other left-aligned section. Centring this
   container used to start its copy 109px right of its neighbours, which read
   as a third axis on a page that should only have two. */
.wrap--wide{max-width:1080px}
.wrap--narrow{max-width:760px}
.wrap--form{max-width:720px}
.s--hero .wrap{max-width:1040px}

/* ── type ────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:4px;text-transform:uppercase;color:var(--pink-soft);
  margin-bottom:26px;
}
.eyebrow b{color:var(--pink);font-weight:500;padding:0 2px}
/* Letter-spacing is added after the last character too, so a centred eyebrow
   carries 4px of dead space on its right and the word sits 2px left of the
   axis. Everything under it is set at normal tracking and lands true, which is
   what makes the drift visible. Half the tracking as left padding puts the
   glyphs back on centre. */
.wrap--center .eyebrow{padding-left:4px}

.d1{font-size:clamp(50px,7.4vw,108px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
/* Longer headline: a touch smaller, and self-balancing once the break is dropped. */
.d1--wide{font-size:clamp(40px,6.6vw,96px);line-height:1.06;text-wrap:balance}
.d2{font-size:clamp(31px,4.5vw,58px);font-weight:600;letter-spacing:-.028em;line-height:1.2}
.d2--tight{font-weight:700;letter-spacing:-.035em;line-height:1.12;font-size:clamp(34px,4.9vw,64px)}
.d3{font-size:clamp(27px,3.6vw,46px);font-weight:600;letter-spacing:-.022em;line-height:1.28}

.lede{font-size:clamp(17px,1.5vw,22px);color:var(--fg-2);line-height:1.62;margin-top:20px;max-width:640px}
.lede--center{margin-inline:auto}
.lede p + p{margin-top:16px}
/* The format list reads as a second eyebrow closing the hero, so it takes the
   same mono, the same tracking and the same pink as the one above the H1. */
.scope{margin-top:30px;margin-bottom:0}
.body{font-size:clamp(16.5px,1.3vw,19px);color:var(--fg-2);line-height:1.68;margin-top:17px;max-width:64ch}
.body p + p{margin-top:16px}
/* Emphasis inside body copy carries the weight a pull line used to. Bold alone
   is too quiet against the dimmed body colour, so it takes the full text
   colour as well. */
.body strong{font-weight:600;color:var(--fg)}
.body--center{margin-inline:auto}
.wrap--right .body{margin-left:auto}
.pull{font-size:clamp(19px,1.8vw,24px);font-weight:700;color:var(--fg);margin-top:28px;max-width:34ch;text-wrap:balance}
.wrap--center .pull{margin-inline:auto}
.note{font-size:16px;color:var(--fg-3);line-height:1.6;margin-top:clamp(28px,3vw,38px);max-width:60ch}
.lbl{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--fg-3);
  margin-top:clamp(30px,3.5vw,44px);
}
/* Visually hidden, still announced. Used where the design has no room for a
   section heading but the document outline needs one. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.caption{font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;color:var(--fg-4);line-height:1.75;margin-top:20px;max-width:74ch}

/* Sub-blocks inside a merged section: same left edge, hairline between. */
.sub{margin-top:clamp(48px,6vw,76px);padding-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.sub .body{margin-top:17px}
.sub .pull{margin-top:26px}

/* Closing stamp. Mirrors the opening eyebrow so the section shuts the way it
   opened. */
.stamp{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:4px;text-transform:uppercase;color:var(--pink-soft);
  margin-top:clamp(30px,3.5vw,42px);
}

/* ── hero extras ─────────────────────────────────────────────── */
.hero__rings{position:absolute;top:32%;left:50%;translate:-50% -50%;width:min(78vw,620px);aspect-ratio:1;z-index:-1;pointer-events:none}
.hero__rings i{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,46,126,.34);
  opacity:0;animation:ring 6s var(--ease) infinite;
}
.hero__rings i:nth-child(2){animation-delay:1.5s}
.hero__rings i:nth-child(3){animation-delay:3s}
.hero__rings i:nth-child(4){animation-delay:4.5s}
@keyframes ring{
  0%  {transform:scale(.24);opacity:0}
  12% {opacity:.75}
  100%{transform:scale(1);opacity:0}
}

.hero__actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:42px}
.hero__note{
  margin-top:26px;margin-inline:auto;max-width:60ch;
  font-family:var(--sans);font-size:15px;letter-spacing:0;
  color:var(--fg-3);line-height:1.6;
}

.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:34px;margin-top:56px}
.wave i{
  width:2px;height:8px;border-radius:2px;
  background:linear-gradient(180deg,var(--pink),rgba(255,46,126,.25));
  animation:wave 1.5s var(--ease) infinite;
  transform-origin:center;
}
.wave i:nth-child(3n)  {animation-duration:1.9s}
.wave i:nth-child(3n+1){animation-duration:1.25s}
.wave i:nth-child(4n)  {animation-delay:-.7s}
.wave i:nth-child(5n)  {animation-delay:-1.1s}
.wave i:nth-child(2n)  {animation-delay:-.35s}
@keyframes wave{0%,100%{transform:scaleY(1);opacity:.45}50%{transform:scaleY(3.4);opacity:1}}

.scroll-cue{position:absolute;bottom:24px;left:50%;translate:-50% 0;padding:6px 14px;color:var(--fg-5);animation:drift 2.6s ease-in-out infinite}
.scroll-cue:hover{color:var(--fg-3)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── the moment ──────────────────────────────────────────────── */
.moment{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);
  align-items:start;margin-top:clamp(30px,4vw,48px);
}
.moment > figcaption{grid-column:1/-1}
.panel{position:relative;min-width:0}

.panel--stage{
  background:rgba(14,13,16,.72);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px 18px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.panel__head{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:11px}
.panel__head .mono{font-size:11px;color:var(--fg-4);letter-spacing:.5px}
.panel__t{margin-left:auto}
.live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink-soft);
}
.live i{width:7px;height:7px;border-radius:50%;background:var(--pink);position:relative;flex:none}
.live i::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:var(--pink);
  animation:pulse 1.9s var(--ease) infinite;
}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3)}}

.transcript{display:flex;flex-direction:column;gap:13px}
.ln{font-size:15px;line-height:1.6;color:var(--fg-3);letter-spacing:-.1px}
.ln b{
  display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--fg-5);margin-bottom:5px;
}
.ln--now{color:var(--fg)}
.ln--now b{color:var(--pink-soft)}
.caret{
  display:inline-block;width:2px;height:1em;background:var(--pink);
  vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.listening{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.listening i{
  flex:1;height:100%;border-radius:2px;background:var(--line-2);
  transform-origin:bottom;transform:scaleY(.18);
  animation:listen 1.4s ease-in-out infinite;
}
.listening i:nth-child(3n)  {animation-duration:1.8s;background:rgba(255,46,126,.5)}
.listening i:nth-child(4n+1){animation-duration:1.1s}
.listening i:nth-child(2n)  {animation-delay:-.55s}
.listening i:nth-child(5n)  {animation-delay:-.9s}
@keyframes listen{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}

.panel--card{padding-top:clamp(0px,2vw,28px);display:flex;flex-direction:column;gap:14px}
.panel__label{
  font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--fg-4);
  display:flex;align-items:center;gap:9px;
}
.panel__label::before{content:'';width:16px;height:1px;background:var(--line-2);flex:none}
.qcard{
  background:var(--ink-1);
  border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:8px;padding:22px 24px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,46,126,.05);
  animation:cardin .9s var(--ease) both;
}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.qcard__head{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.qcard__head .mono{font-size:11px;color:var(--fg-3);letter-spacing:.4px}
.qcard__t{margin-left:auto}
.tag{
  background:rgba(255,46,126,.16);color:var(--pink-soft);
  font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
}
/* Second-suggestion tag: same shape, quieter fill — the mode name still
   carries the meaning, so nothing depends on colour alone. */
.tag--quiet{background:rgba(255,255,255,.07);color:var(--fg-2);border:1px solid var(--line-2)}
.qcard__q{font-size:clamp(16.5px,1.4vw,19px);font-weight:600;line-height:1.45;color:var(--fg);letter-spacing:-.3px}
.qcard__src{font-size:10.5px;letter-spacing:.8px;color:var(--fg-4);margin-top:13px;text-transform:uppercase}
.qcard__acts{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.qcard__acts .btn{cursor:default}
/* The alternate direction: same object, lower in the stack. */
.qcard--alt{
  background:rgba(22,21,24,.6);border-left-color:var(--line-2);
  box-shadow:none;animation-delay:.12s;
}

/* ── tenets ──────────────────────────────────────────────────── */
.tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.tenets--4{grid-template-columns:repeat(4,1fr)}
/* Same card, no ordinal. These three support a claim rather than enumerate
   steps, so numbering them would imply a sequence that isn't there. */
.tenets--plain h3,.tenets--plain h4{margin-top:2px}
.tenets li{
  border-top:1px solid var(--line);padding-top:16px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .4s var(--ease);
}
.tenets li:hover{border-top-color:var(--pink)}
.tenets .mono{font-size:11px;letter-spacing:2px;color:var(--pink-soft)}
.tenets h3,.tenets h4,.tenets b{font-size:16px;font-weight:600;color:var(--fg);letter-spacing:-.2px;line-height:1.35}
.tenets span:last-child{font-size:14.5px;color:var(--fg-3);line-height:1.6;max-width:46ch}

/* ── editorial moves ─────────────────────────────────────────── */
/* ── supporting beats ─────────────────────────────────────────
   Deliberately not a card grid. These run to very different lengths, and an
   even three-up would flatten them into something that reads as generated.
   Stacked and hairline-ruled, they stay closer to prose. */
.beats{margin-top:clamp(20px,2.4vw,28px);max-width:70ch}
.beats li{padding:22px 0;border-top:1px solid var(--line)}
.beats li:last-child{border-bottom:1px solid var(--line)}
.beats h3,.beats h4{font-size:17px;font-weight:600;color:var(--fg);letter-spacing:-.2px;line-height:1.35;margin-bottom:9px}
.beats p{font-size:16px;color:var(--fg-3);line-height:1.7}
.beats + .lbl{margin-top:clamp(34px,4vw,50px)}
.beats + .note{margin-top:22px}
/* Numbered variant. These four are a sequence, so they carry ordinals; the
   unnumbered beats elsewhere are a set, and numbering them would imply an
   order that isn't there. */
.beats--steps h3{display:flex;align-items:center;gap:14px}
.beats--steps h3 .mono{
  flex:none;
  background:rgba(255,46,126,.16);color:var(--pink-soft);
  font-size:10.5px;font-weight:500;letter-spacing:1.6px;
  padding:4px 10px;border-radius:999px;
}

.moves{margin-top:clamp(24px,3vw,34px);max-width:900px}
/* The pill column is right-aligned so the tags present one clean edge to the
   text beside them, instead of four ragged ones. */
.moves > div{
  display:grid;grid-template-columns:auto 1fr;gap:8px 28px;align-items:baseline;
  border-top:1px solid var(--line);padding:24px 0;
  transition:border-color .4s var(--ease);
}
.moves dt{justify-self:end;min-width:132px;text-align:right}
.moves > div:hover{border-top-color:var(--pink)}
.moves > div:last-child{border-bottom:1px solid var(--line)}
.moves dd{font-size:16px;color:var(--fg-2);line-height:1.6;max-width:62ch}

/* ── formats ─────────────────────────────────────────────────── */
.formats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,4vw,56px);margin-top:16px;max-width:820px;
}
.formats li{
  border-top:1px solid var(--line);padding:13px 0;
  font-size:15.5px;color:var(--fg-2);line-height:1.5;
  display:flex;align-items:baseline;gap:12px;
}
.formats li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pink);flex:none;translate:0 -2px}

/* ── form ────────────────────────────────────────────────────── */
.form{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;
  text-align:left;margin-top:38px;
}
.form .lbl{margin-top:0;margin-bottom:-4px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--fg-3);
}
.opt{color:var(--fg-5);letter-spacing:1.2px}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--ink-1);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:14px 16px;
  font-family:var(--sans);font-size:15px;color:var(--fg);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#4a4954}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink);background:var(--ink-2);
  box-shadow:0 0 0 3px rgba(255,46,126,.14);
}
/* Keyboard focus additionally takes the page's own outline ring. The pink
   border and glow above are the design; this is the part that survives
   forced-colours mode, where box-shadow is dropped and a border colour change
   alone would leave a keyboard user with no indicator at all. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#ff7676;box-shadow:0 0 0 3px rgba(255,92,92,.13)}
/* Error text, not just a red edge — colour is never the only signal. */
.field__err{font-size:13px;line-height:1.5;color:#ff9d9d}
.field input[type="date"]{min-height:49px}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
.select{position:relative;display:flex}
.select select{cursor:pointer;padding-right:42px}
.select select option{background:var(--ink-1);color:var(--fg)}
.select svg{position:absolute;right:16px;top:50%;translate:0 -50%;width:12px;color:var(--fg-3);pointer-events:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.fine{font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--fg-4);line-height:1.6}
.form__msg{
  font-size:14.5px;line-height:1.6;color:#ff9d9d;
  border-left:2px solid #ff7676;padding-left:14px;margin-top:2px;
}
.form__msg[data-tone="ok"]{color:var(--pink-soft);border-left-color:var(--pink)}

.spin{display:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-submit][aria-busy="true"]{pointer-events:none}
[data-submit][aria-busy="true"] .spin{display:block}

.done{
  margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:cardin .7s var(--ease) both;
}
.done:focus{outline:none}
.done:focus-visible{outline:2px solid var(--pink);outline-offset:12px}
.done__mark{color:var(--pink)}
.done__mark svg{height:52px;width:auto}
.done__t{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.6px;margin-top:8px}
.done__b{font-size:16px;color:var(--fg-2);line-height:1.6;max-width:420px}

/* ── footer ──────────────────────────────────────────────────── */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:38px var(--pad)}
.foot__in{
  max-width:1140px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot__id{display:flex;flex-direction:column;gap:2px}
/* Section 07 spends itself arguing the system doesn't provoke, so the wordmark
   line can't claim it does. The name carries that on its own. */
.foot__sig{font-size:12.5px;color:var(--fg-4);letter-spacing:-.1px}
.foot__brand{display:flex;align-items:center;gap:9px;padding:9px 0 0;color:var(--fg-3)}
.foot__brand:hover{color:var(--fg)}
.foot__brand .mark{height:18px;width:auto;color:var(--pink)}
.foot .mono{font-size:11px;letter-spacing:1.6px}
.foot__c{color:var(--fg-5)}
.foot__nav{--nav-gap:clamp(14px,2vw,26px);display:flex;gap:var(--nav-gap);flex-wrap:wrap;justify-content:center}
.foot__nav a{position:relative;color:var(--fg-3);letter-spacing:1.2px;padding:9px 0}
.foot__nav a:hover{color:var(--fg)}
.foot__nav a:not(:last-child)::after{
  content:'·';
  position:absolute;right:calc(var(--nav-gap) / -2);top:50%;
  translate:50% -50%;
  color:var(--fg-5);pointer-events:none;
}

/* ── intents ─────────────────────────────────────────────────────
   Labels, never cards. In the hero they are the value proposition and have to
   clear the fold at 390px, so they stay one tracked-out row that wraps rather
   than four boxes that stack. In the interface they are the same four words
   again, this time as a mode strip, because the range is what stops the
   product reading as adversarial and it should be visible in the product. */
.intents{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}
.intents--hero{
  --int-gap:clamp(15px,2.1vw,30px);
  justify-content:center;gap:8px var(--int-gap);
  margin-top:clamp(22px,2.6vw,30px);
}
.intents--hero li{
  position:relative;
  font-family:var(--mono);font-size:clamp(11px,1vw,12.5px);font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--fg);
  white-space:nowrap;
}
.intents--hero li:not(:last-child)::after{
  content:'\00b7';
  position:absolute;right:calc(var(--int-gap) / -2);top:50%;
  translate:50% -50%;
  color:var(--pink);opacity:.75;pointer-events:none;
}
.intents__note{
  margin:13px auto 0;max-width:54ch;
  font-size:15px;color:var(--fg-3);line-height:1.6;
}

/* ── loop diagram ────────────────────────────────────────────────
   Site typography and accent only. The visible labels sit behind role="img"
   so assistive technology gets the written description in #loop-desc rather
   than eleven disconnected fragments. Horizontal on desktop, vertical on
   mobile: shrinking a three-across cycle to 390px costs legibility, and
   turning it is free. */
.loop{margin-top:clamp(26px,3.2vw,42px)}
.loop__ring{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;gap:clamp(8px,1.2vw,16px);
}
/* Four stages: preparation, run, ask, review. Two rows of two below 1080px,
   because four nodes across a tablet leaves each one about six characters
   wide. The arrow between the rows turns down instead of along. */
.loop__ring--4{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
@media (max-width:1080px) and (min-width:861px){
  .loop__ring--4{grid-template-columns:1fr auto 1fr}
  .loop__ring--4 > .loop__arrow--turn{grid-column:1/-1;justify-self:center;padding:4px 0}
  .loop__ring--4 > .loop__arrow--turn span{width:1px;height:20px}
  .loop__ring--4 > .loop__arrow--turn span::after{
    right:auto;left:50%;top:auto;bottom:-1px;translate:-50% 0;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid var(--pink);border-bottom:0;
  }
  padding:clamp(18px,2.2vw,28px) clamp(16px,2.2vw,28px) 0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(31,30,34,.45),rgba(22,21,24,.15));
}
.loop__node{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:16px 18px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(14,13,16,.55);
}
.loop__node--core{border-color:var(--pink);background:rgba(255,46,126,.09)}
.loop__k{font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--pink-soft)}
.loop__v{font-size:14px;color:var(--fg-2);line-height:1.5}
.loop__arrow{display:flex;align-items:center;justify-content:center}
.loop__arrow span{position:relative;display:block;width:clamp(16px,2vw,32px);height:1px;background:var(--line-2)}
.loop__arrow span::after{
  content:'';position:absolute;right:-1px;top:50%;translate:0 -50%;
  border-left:5px solid var(--pink);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
/* The one arrow that runs backwards: Review to Prepare. It carries no label,
   because the caption underneath says exactly what it means and a second
   explanation inside the diagram would only compete with it. */
.loop__back{
  grid-column:1/-1;position:relative;
  margin:clamp(14px,1.8vw,20px) 0 0;height:14px;
  border-top:1px dashed var(--line-2);
}
.loop__back::before{
  content:'';position:absolute;left:0;top:-4px;
  border-right:5px solid var(--pink);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.loop .caption{margin-top:14px}

/* ── device treatment ────────────────────────────────────────────
   A tablet in the site's own identity: no generic mockup chrome, no drop
   shadow on white. The angle is a whisper and only on wide screens, because
   anything stronger is paid for in legibility. Below 520px the frame is
   dropped entirely and the content is kept, which is the trade the brief
   asks for. */
.device{position:relative}
.device__badge{
  position:absolute;z-index:3;top:-10px;left:18px;
  padding:5px 12px;border-radius:999px;
  background:var(--ink);border:1px solid var(--line-2);
  font-size:9.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--fg-2);
}
.device__frame{
  position:relative;
  padding:26px 14px 22px;
  border:1px solid var(--line-2);border-radius:22px;
  background:linear-gradient(158deg,#1c1b21,#121115 62%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.device__cam{
  position:absolute;top:12px;left:50%;translate:-50% 0;
  width:6px;height:6px;border-radius:50%;background:#26252b;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
}
.device__bar{
  position:absolute;bottom:9px;left:50%;translate:-50% 0;
  width:76px;height:3px;border-radius:2px;background:var(--line-2);opacity:.75;
}
.device__screen{
  border:1px solid #17161b;border-radius:11px;overflow:hidden;
  background:rgba(9,8,11,.94);
}
/* Inside the frame the panel is the screen, so it drops its own edges. */
.device__screen .panel--stage{
  background:transparent;border:0;border-radius:0;
  padding:18px 18px 14px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ── in-product control strip ────────────────────────────────────
   Temperature is shown rather than described. Moment marking is not here on
   purpose: it is a TODO(verify) claim, and an unimplemented control would be
   a lie told in an interface, which is worse than one told in prose. */
.ui{
  display:flex;flex-direction:column;gap:12px;
  padding:14px 18px 16px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.016);
}
.intents--ui{gap:6px}
.intents--ui li{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-3);
  padding:6px 10px;border:1px solid var(--line);border-radius:999px;
}
.intents--ui li.is-on{color:var(--pink-soft);border-color:var(--pink);background:rgba(255,46,126,.15)}
.intents--ui li.is-on::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--pink);margin-right:6px;vertical-align:1.5px;
}
.ui__row{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.ui__temp{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
/* Marking is host-side, on the moderator's own surface, so it belongs beside
   temperature rather than on a second screen someone has to be staffed for. */
.ui__mark{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;
  font-size:9.5px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-3);
}
.ui__mark i{
  width:7px;height:7px;flex:none;background:var(--pink);
  clip-path:polygon(0 0,100% 22%,0 44%,0 100%);
}
/* The slide readout. This is the claim "it reads the wall too" shown rather
   than asserted: your host is the one person who cannot see the screen. */
.ui__slide{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-3);
  padding-top:10px;border-top:1px solid var(--line);
}

/* Source provenance. The deck asks the interface to distinguish approved
   preloaded material from anything else, so the chip sits in front of the
   deck's own source string rather than replacing it. */
.prov{
  display:inline-block;margin-right:8px;padding:2px 7px;border-radius:3px;
  font-size:9px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
}
.prov--ok{background:rgba(255,46,126,.16);color:var(--pink-soft)}
.prov--room{background:rgba(255,255,255,.08);color:var(--fg-2)}
.ui__k{font-size:9.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--fg-4)}
.ui__scale{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.ui__scale i{
  font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:500;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--fg-4);
  padding:6px 11px;
}
.ui__scale i + i{border-left:1px solid var(--line)}
.ui__scale i.is-on{background:rgba(255,46,126,.16);color:var(--pink-soft)}

/* ── proof slot ──────────────────────────────────────────────────
   Built so real evidence drops in without a redesign: replace .proof__ph with
   a figure, a video or a quotation, delete the tag, and the surrounding
   spacing and caption still hold. */
.proof{margin-top:clamp(26px,3.2vw,40px)}
.proof__ph{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:13px;
  min-height:clamp(140px,20vw,210px);
  padding:clamp(18px,2.2vw,26px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(255,46,126,.055),transparent 72%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px);
}
.proof__tag{
  padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;
  font-size:9.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--fg-2);
}
.proof__t{font-size:16px;color:var(--fg-2);line-height:1.5;max-width:42ch}
.proof__n{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  color:var(--fg-4);line-height:1.75;margin-top:14px;max-width:68ch;
}

/* ── stage clusters in section 4 ─────────────────────────────────
   Run, Ask and Review are the same three stages as the diagram in section 3,
   which is the point: the visitor meets the loop as a picture, then walks
   through it. The stage marker is a label rather than a heading, so the
   document outline stays H2 to H3 to H4. */
.lbl--stage{
  display:flex;align-items:center;gap:12px;
  color:var(--pink-soft);letter-spacing:3px;
  margin-top:clamp(34px,4vw,52px);
}
.lbl--stage::after{content:'';flex:1;height:1px;background:var(--line)}
.d-cluster{
  font-size:clamp(20px,2.1vw,27px);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;color:var(--fg);
  margin-top:10px;
}
.d-cluster + .beats{margin-top:clamp(14px,1.8vw,20px)}
/* The autocue beat is where the producer analogy stops being an analogy, so
   it gets weight the others do not. */
.beats__lead{position:relative;padding-left:18px!important}
.beats__lead::before{
  content:'';position:absolute;left:0;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--pink),rgba(255,46,126,.15));
}
.beats__lead h4{font-size:19px}
.beats__lead p{color:var(--fg-2)}

/* ── research boundary ───────────────────────────────────────────
   Bound to the dossier step, never floated away from it. */
.bound{
  margin-top:14px;padding:13px 16px;
  border:1px solid var(--line-2);border-left:2px solid var(--pink);border-radius:var(--r);
  background:rgba(255,46,126,.05);
  font-size:15px!important;color:var(--fg-2)!important;line-height:1.6;
}
.bound__k{
  display:block;margin-bottom:6px;
  font-size:9.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--pink-soft);
}

/* ── founder evidence slots ──────────────────────────────────────
   Prepared and empty. Renders nothing at all until there is something real
   to put in it, so the page never advertises a gap to a visitor. */
.ev-slots{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,30px)}
.ev-slots:empty{display:none}
.ev{display:flex;flex-direction:column;gap:8px}
.ev__img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line)}
.ev__k{font-size:15px;font-weight:500}
@media (min-width:861px){
  .ev-slots{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ── privacy page ────────────────────────────────────────────────
   Same identity, no glow, no theatre. A page about what happens to a
   recording of someone else's voice should look like it is being straight
   with you: long measure, plain hierarchy, nothing competing with the text. */
.s--legal{align-items:flex-start;padding-top:clamp(120px,15vh,164px)}
.legal h2.lbl{margin-top:clamp(36px,4.5vw,54px)}
.legal .body{margin-top:14px}
.legal .body a,.legal__back a{text-decoration:underline;text-underline-offset:3px}
.legal__status{
  margin-top:26px;padding:18px 20px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(31,30,34,.5);
  font-size:15.5px;color:var(--fg-2);line-height:1.65;
}
.legal__status-k{
  display:block;margin-bottom:8px;
  font-size:10px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--pink-soft);
}
.legal__list{margin-top:16px;max-width:64ch}
.legal__list li{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 0;border-top:1px solid var(--line);
}
.legal__list li:last-child{border-bottom:1px solid var(--line)}
.legal__list b{font-size:15.5px;font-weight:600;color:var(--fg)}
.legal__list span{font-size:15px;color:var(--fg-3);line-height:1.6}

.legal__foot{
  margin-top:clamp(38px,4.5vw,56px);padding-top:20px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.5px;color:var(--fg-4);line-height:1.75;
}
.legal__back{margin-top:18px;font-size:15px}

/* ── form live region ────────────────────────────────────────────
   Present in the accessibility tree from load and never removed, so the
   message is announced into a region the screen reader is already watching.
   Toggling a role="alert" element with `hidden` is announced inconsistently. */
.form__live{width:100%;text-align:left}

/* ── reveal ──────────────────────────────────────────────────── */
/* Armed by boot.js: without scripting the .js class never lands and nothing
   here applies, so the page renders complete. Short and shallow on purpose —
   motion should mark hierarchy, never gate reading. */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0ms), transform .5s var(--ease) var(--d,0ms);
}
/* Anchored-to or already-seen content skips the entrance entirely. */
.js .reveal.is-now{opacity:1;transform:none;transition:none}

/* ── responsive ──────────────────────────────────────────────── */
/* The angle is deliberately tiny and only where there is room for it. A real
   perspective rotation reads better in a screenshot and worse to a person
   trying to read six lines of transcript. */
@media (min-width:1200px){
  .device{transform:rotate(-1.1deg)}
}
/* A wide but short viewport — a 720p laptop — is the one case where a
   full-height hero pushes the primary CTA off the bottom. Spend less height
   there rather than everywhere. */
@media (min-width:861px) and (max-height:800px){
  .s--hero{min-height:0;padding-top:104px;padding-bottom:48px}
  .s--hero .eyebrow{margin-bottom:14px}
  .s--hero .lede{margin-top:14px}
  .scope{margin-top:18px}
  .intents--hero{margin-top:16px}
  .hero__actions{margin-top:22px}
  .hero__note{margin-top:16px}
  .wave{margin-top:26px;height:22px}
}
@media (max-width:1080px){
  .tenets--4{grid-template-columns:repeat(2,1fr)}
}
/* Below this the forced break fights the width — let the balancer wrap it. */
@media (max-width:700px){
  .brk{display:none}
}
/* The inline nav would crowd the mark and the CTA; the footer nav carries the
   same links below this. */
@media (max-width:1000px){
  .nav__links{display:none}
}
@media (max-width:860px){
  /* The header is never taller than 76px, so this clears it with 16px in hand
     at every scroll position and in both the stuck and unstuck states. */
  html{scroll-padding-top:92px}
  /* Vertical rhythm is cut hard here rather than type size. Not every
     paragraph gets a viewport, and the page was roughly a third too long. */
  .s{padding:clamp(30px,3.6vh,48px) var(--pad)}
  /* 110px against a 77px header: the eyebrow keeps a clear 25px even at scroll
     zero, where scroll-padding cannot help because there is nowhere to go.
     svh rather than vh so this is the height with the browser toolbars showing,
     which is the state a phone is actually in most of the time.
     The bottom padding has to clear the scroll cue, which is absolutely
     positioned 24px off the bottom and 42px tall. At 36px it was sitting on
     top of the buttons. */
  .s--hero{min-height:100svh;padding-top:110px;padding-bottom:92px}
  /* The hero fills the screen, so it keeps a looser rhythm than the sections
     below it, which are tuned for length rather than presence. */
  .s--hero .eyebrow{margin-bottom:20px}
  .s--hero .lede{margin-top:24px}
  .s--hero .hero__actions{margin-top:30px}
  .s--hero .scope{margin-top:30px;margin-bottom:0}
  .wrap--right{text-align:left;margin-left:0}
  .wrap--right .body{margin-left:0}
  .moment{grid-template-columns:1fr;gap:16px}
  .panel--card{padding-top:0}
  .tenets{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .moves > div{grid-template-columns:1fr;gap:8px;padding:11px 0}
  .formats{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;gap:14px;margin-top:18px}
  /* 44px minimum on the one header control there is. */
  .nav__cta{font-size:11px;letter-spacing:1.2px;padding:13px 16px;min-height:44px}
  .nav__brand{padding:5px 6px}

  /* Rhythm, not type size. Every value below is white space between blocks;
     nothing here makes a word smaller or a line tighter than comfortable. */
  .eyebrow{margin-bottom:13px}
  .lbl--stage{margin-top:22px}
  .d-cluster + .beats{margin-top:12px}
  .beats__lead{padding-left:14px!important}
  .bound{margin-top:11px;padding:11px 13px}
  .proof{margin-top:20px}
  .proof__ph{min-height:100px;gap:10px}
  .ev-slots{margin-top:20px}
  .scope{margin-top:22px}
  .lede{margin-top:16px;line-height:1.56}
  .body{margin-top:14px;line-height:1.6}
  .hero__actions{margin-top:22px}
  .hero__note{margin-top:16px}
  .intents--hero{margin-top:18px}
  .intents__note{margin-top:10px}
  .beats li{padding:11px 0}
  .beats p{line-height:1.58}
  .lbl{margin-top:20px}
  .note{margin-top:16px}
  .sub{margin-top:22px;padding-top:18px}
  .loop{margin-top:16px}
  .foot{padding:22px var(--pad)}
  .pull{margin-top:16px}
  .stamp{margin-top:24px}
  .caption{margin-top:14px}
  .moment{margin-top:16px}
  .loop{margin-top:20px}
  .transcript{gap:10px}
  .listening{height:16px;margin-top:14px;padding-top:12px}
  .proof__ph{min-height:120px}
  .proof__n{margin-top:11px}
  .foot{padding:26px var(--pad)}
  /* 44px tap targets in the one nav that is always available on mobile. */
  .foot__nav a{padding:13px 0;min-height:44px;display:inline-flex;align-items:center}
  .foot__brand{min-height:44px;align-items:center;padding:0}
  .beats h3,.beats h4{margin-bottom:7px}
  .qcard__acts{margin-top:13px}
  .form__foot{gap:14px}
  .field{gap:7px}
  .ui{padding:10px 14px 12px;gap:10px}

  /* Vertical, not shrunk. A three-across cycle at 390px is unreadable; the
     same cycle turned through ninety degrees is not. */
  .loop__ring{grid-template-columns:1fr;padding:16px 16px 0}
  .loop__node{padding:13px 15px}
  .loop__arrow span{width:1px;height:20px;margin-inline:auto}
  .loop__arrow span::after{
    right:auto;left:50%;top:auto;bottom:-1px;translate:-50% 0;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid var(--pink);border-bottom:0;
  }
}
/* A short phone screen, which is most of them once Safari's toolbars are
   showing. The generous hero above would run past the fold here, so it tightens
   and the scroll cue goes: there is no room to sit it below the buttons without
   putting it back on top of them, and a hero that ends level with the fold
   already tells you there is more underneath. */
@media (max-width:860px) and (max-height:700px){
  .s--hero{padding-top:98px;padding-bottom:40px}
  .s--hero .eyebrow{margin-bottom:14px}
  .s--hero .lede{margin-top:18px}
  .s--hero .scope{margin-top:22px}
  .s--hero .hero__actions{margin-top:22px}
  .scroll-cue{display:none}
}
@media (max-width:520px){
  .nav__word{display:none}
  /* Decorative and expensive in a viewport this short. */
  .wave{display:none}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{width:100%}
  .foot__in{flex-direction:column;text-align:center}
  .panel--stage{padding:16px 16px 14px}
  .qcard{padding:15px 16px}
  .panel--card{gap:12px}
  .loop__ring{padding:14px 14px 0}
  .loop__node{padding:11px 14px}
  .loop__back{margin-top:12px;padding:9px 0 11px}
  /* 44px, so the illustrative controls are the same size as real ones. */
  .qcard__acts .btn{flex:1 1 auto;min-height:44px}

  /* The frame costs more than it earns at this width, so it goes and the
     content stays. The label does not go: a visitor must never mistake a
     designed scenario for footage. */
  .device__frame{padding:0;border-radius:var(--r-lg);background:none;box-shadow:none;border-color:var(--line)}
  .device__cam,.device__bar{display:none}
  .device__screen{border-radius:var(--r-lg);background:rgba(14,13,16,.72)}
  .device__badge{left:12px}
  .ui{padding:12px 16px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.hero__rings i,.wave i,.listening i,.scroll-cue,.live i::after,.caret{animation:none!important}
  .reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .qcard,.done{animation:none!important}
  *{transition-duration:.01ms!important}
}