/* Intent landing page. The look is D7's (design/v2/landing.html); structure
   and copy follow Ramon's feedback (specs/feedback-3.md). Every colour, face and radius comes
   from the app's src/App.css :root and docs/DESIGN.md, copied below under the
   same names; brand/SOURCES.md records where each came from and
   scripts/brand-check.mjs holds the palette to it. Where D7 typed its own
   hexes (#FF8A45 and the rim's peach stops) the nearest app value stands in:
   --accent-soft and the field's light stop. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2260, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2260, U+FEFF, U+FFFD;
}

:root {
  /* From src/App.css :root, values unchanged (the v2 tokens since 12 Oct). */
  --text:          #F9F9F9;
  --text-muted:    #A7A7A7;
  --text-faint:    #7E7E7E;
  --line-strong:   #333333;
  --line:          #1C1C1C;
  --raised:        #141414;
  --surface:       #0A0A0A;
  --bg:            #000000;
  --accent:        #E85002;
  --accent-soft:   #F16001;
  --accent-text:   #FF8A45;
  --accent-press:  #C10801;
  --accent-glint:  #FFDCBE;
  --on-accent:     #140700;
  --danger:        #FF453A;
  --font-display:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:     'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease-lift:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-moment:    700ms;
  /* Edge light (docs/DESIGN.md), verbatim. */
  --e: 1;
  --h: 1;
  --g: 1;
  --f: 1;
  --rim:       linear-gradient(140deg, rgba(255,255,255,calc(.62*var(--e))) 0%, rgba(255,255,255,calc(.14*var(--e))) 24%, rgba(255,255,255,calc(.05*var(--e))) 50%, rgba(255,255,255,calc(.14*var(--e))) 76%, rgba(255,255,255,calc(.5*var(--e))) 100%);
  --live-rim:  linear-gradient(140deg, #FFC59E 0%, #FF8A45 10%, rgba(232,80,2,0) 34%, rgba(232,80,2,0) 66%, rgba(255,138,69,.85) 90%, #FFB07A 100%);
  --halo:      0 0 24px -12px rgba(255,255,255,calc(.16*var(--h)));
  --live-glow: 0 0 28px -16px rgba(232,80,2,calc(.6*var(--g))), 0 0 22px -14px rgba(255,255,255,calc(.12*var(--h)));
  --fill:      rgba(255,255,255,calc(.02*var(--f)));
  --in:        rgba(255,255,255,.05);
  --edge-mask:  linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  --edge-mask-webkit: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  --veil:          rgba(0,0,0,0.72);
  /* The warm glow under phones and buttons: the live glow's own orange. */
  --warm:          rgba(232,80,2,calc(.6*var(--g)));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { display: block; overflow: clip; }
p, h1, h2, h3, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.accent { color: var(--accent-text); }
.nb { white-space: nowrap; }
.center { text-align: center; display: grid; justify-items: center; }

/* The page uses the width: up to 1320px of content, gutters that grow with it. */
.wrap { width: 100%; max-width: calc(1440px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:root { --gutter: clamp(20px, 4vw, 56px); --section: clamp(104px, 13vw, 184px); }
section { padding-block: var(--section) 0; }

/* ── Type roles (docs/DESIGN.md: Display is Archivo, wide, heavy, uppercase). */
h1, .display, .display-m, .display-s {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 7.2vw, 52px); }
.display { font-size: clamp(20px, 4.4vw, 32px); margin: 12px 0 16px; max-width: 18em; text-wrap: balance; }
/* Long headings break into two balanced lines rather than one wide one. */
.center .display, .center-h { margin-inline: auto; }
.display-m { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.15; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lead { color: var(--text-muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 34em; text-wrap: pretty; }

/* ── Glass blocks */
.glass {
  position: relative;
  border-radius: 24px;
  background: var(--fill);
  box-shadow: var(--halo);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask: var(--edge-mask-webkit);
  -webkit-mask-composite: xor;
  mask: var(--edge-mask);
  pointer-events: none;
}
.glass.live { box-shadow: var(--live-glow); }
.glass.live::before { background: var(--live-rim); }

/* ── Buttons: orange pills with black letters (D1.7). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 12px var(--font-display);
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: clip;
  transition: scale .2s var(--ease-lift), background-color .2s, box-shadow .3s;
}
.btn:hover { box-shadow: 0 10px 34px -12px var(--warm); }
.btn:active { scale: 0.97; background: var(--accent-press); }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, var(--text) 50%, transparent 70%);
  opacity: 0.45;
  translate: -120% 0;
  pointer-events: none;
}
/* The shine crosses a button each time it comes fully into view (js/site.mjs adds .lit). */
.btn.lit::after { animation: shine 1.4s var(--ease-lift) .25s both; }
.btn.ghost { background: none; color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.btn.ghost:active { background: var(--in); }
.cta-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.join .m-beta, .join.beta .m-wait { display: none; }
.join.beta .m-beta { display: inline; }
.reel-dots { display: flex; justify-content: center; margin-top: 6px; }
.reel-dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.reel-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--line-strong); transition: width .35s; }
.reel-dots button[aria-current="true"]::before { width: 22px; background: var(--accent); }
.feat-icons h3 { margin: 0; font: 800 15px/1.2 var(--font-display); font-stretch: 112%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
.feat-icons p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.feat-icons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; max-width: 980px; margin-inline: auto; }
.feat-icons svg { display: block; width: 28px; height: 28px; margin-bottom: 12px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat-more { margin-top: 24px; text-align: center; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--in); color: var(--accent-text); font: 700 11px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: box-shadow .2s; }
.pill-link:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pill-link svg { width: 14px; height: 14px; }
.all-feats { max-width: calc(1040px + 2 * var(--gutter)); padding-block: 40px 96px; }
.all-feats .display { margin: 48px 0 40px; }
.all-group { padding-block: 28px; border-top: 1px solid var(--line); }
.all-group h2 { margin: 0 0 8px; font: 700 11px/1.2 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.all-group ul { margin: 0; padding: 0; list-style: none; }
.all-group li { padding-block: 14px; }
.all-group li + li { border-top: 1px solid var(--line); }
.all-group h3 { margin: 0; font: 700 15px/1.25 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.all-group p { margin: 4px 0 0; color: var(--text-muted); line-height: 1.5; }
.all-cta { margin-top: 28px; text-align: center; padding: 36px 20px; }
.all-cta > * { position: relative; }
.all-cta .display { margin: 0 auto 8px; }
.all-cta p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.btn.small { min-height: 36px; padding: 0 16px; font-size: 10px; letter-spacing: 0.12em; }
.note { color: var(--text-muted); font-size: 13px; line-height: 1.45; max-width: 26em; }

/* ── Top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--veil);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.top-bar { display: flex; justify-content: space-between; align-items: center; height: 64px; container-type: inline-size; }
.top-home { transition: translate .6s var(--ease-lift); }
.js .top:not(.past) .top-home { translate: calc(50cqw - 50%) 0; }
.js .top-cta { opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .35s var(--ease-lift), translate .4s var(--ease-lift), visibility .35s; }
.js .top.past .top-cta { opacity: 1; visibility: visible; translate: none; }
.top-home { display: block; }
.top-wordmark { height: 22px; width: auto; }

/* ── 1. Hero: the warm glow lives here only (D7). */
.hero { position: relative; padding-block: clamp(48px, 7vw, 120px) clamp(24px, 4vw, 64px); }
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 22% 0%, var(--accent), transparent 72%);
  opacity: 0.3;
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: clamp(48px, 6vw, 80px); justify-items: center; text-align: center; }
.hero-grid > * { min-width: 0; }
.hero-text { display: grid; justify-items: center; }
.hero h1 { max-width: 13em; line-height: 1.14; }
.hero-sub { margin: 24px 0 40px; color: var(--text); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; }
.hero-visual { position: relative; display: grid; place-items: center; }

/* A phone: the screen image inside a thin bezel. */
.phone {
  width: min(320px, 76vw);
  aspect-ratio: 1170 / 2535;
  border-radius: 46px;
  overflow: clip;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--raised), 0 0 0 9px var(--bg), 0 0 0 10px var(--line-strong), 0 40px 90px -30px var(--warm);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual { perspective: 1400px; }
/* Three phones: Today in front, Progress and the summary fanned out behind
   it. The group turns a little toward the pointer and as the page scrolls
   (js/site.mjs sets --rx and --ry). */
.hero-stack {
  position: relative;
  display: grid;
  place-items: center;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-lift);
}
.hero-stack > .phone { grid-area: 1 / 1; }
.hero-phone { position: relative; z-index: 2; width: min(220px, 56vw); animation: rise var(--dur-moment) var(--ease-lift) .35s both; }
.hero-back { width: min(184px, 47vw); filter: brightness(calc(.5 + var(--pop, 0) * .38)); box-shadow: 0 0 0 1px var(--raised), 0 0 0 8px var(--bg), 0 0 0 9px var(--line-strong); }
/* As the page scrolls they come out to the sides, brighter and a little
   bigger (js/site.mjs sets --pop, 0 to 1). The fan-in owns translate and
   rotate, so the scroll moves them with transform, on top of it. */
.hero-back { transform: translateX(calc(var(--pop, 0) * var(--side) * 30%)) translateY(calc(var(--pop, 0) * -5%)) rotate(calc(var(--pop, 0) * var(--side) * 5deg)) scale(calc(1 + var(--pop, 0) * .06)); transition: transform .35s var(--ease-lift), filter .35s var(--ease-lift); }
.hero-back.left { --side: -1; translate: -46% 7%; rotate: -8deg; animation: fan-l 1s var(--ease-lift) .7s both; }
.hero-back.right { --side: 1; translate: 46% 7%; rotate: 8deg; animation: fan-r 1s var(--ease-lift) .8s both; }
@keyframes fan-l { from { opacity: 0; translate: 0 7%; rotate: 0deg; } }
@keyframes fan-r { from { opacity: 0; translate: 0 7%; rotate: 0deg; } }
.cta-block { display: grid; gap: 12px; justify-items: center; }
.cta-block .note { text-align: center; font-size: 12px; text-wrap: balance; }

/* ── 2. Train with intent (Ramon, 21 Oct: "the boxes flip ... beautiful"):
   each card shows what to stop, in grey, and turns over to what Intent
   gives, in orange, as it moves up a little past the middle of the screen,
   one after the other, and back again on the way up (js/site.mjs sets --p,
   0 to 1, and --over, the face that shows). Without the script, or with
   reduced motion, each problem sits above its answer. */
.center-h { text-align: center; }
.tag { font: 700 11px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.tag.start { color: var(--accent-text); }
.vs { display: grid; gap: var(--vs-gap, 18px); max-width: 560px; margin: clamp(28px, 4vw, 44px) auto 0; }
.vs-row { display: grid; gap: 10px; }
.vs-stop, .vs-go { display: grid; align-content: center; justify-items: center; gap: 10px; min-height: 128px; margin: 0; padding: 22px 24px; border-radius: 22px; text-align: center; font: 700 clamp(19px, 4.6vw, 26px)/1.2 var(--font-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.vs-stop { color: var(--text-muted); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vs-go { color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent-text), var(--live-glow); }
@media (prefers-reduced-motion: no-preference) {
  .js .vs-row { perspective: 1000px; }
  .js .vs-row > p { grid-area: 1 / 1; }
  /* Each face shows only on its own half of the turn: iPhone Safari does not
     hide a card's back reliably (backface-visibility). */
  .js .vs-stop { transform: rotateX(calc(var(--p, 0) * 180deg)); opacity: calc(1 - var(--over, 0)); }
  .js .vs-go { transform: rotateX(calc(var(--p, 0) * 180deg - 180deg)); opacity: var(--over, 0); }
}

/* ── 3. "I'm not scrolling, I'm logging.", written out word by word. */
.logging { text-align: center; display: grid; justify-items: center; gap: 22px; }
.say { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.08; font-size: clamp(22px, 4.2vw, 40px); text-wrap: balance; max-width: 11em; }
.say .w { opacity: var(--o, 1); transition: opacity .15s linear; }
.say .w.hot { color: var(--accent-text); }
.center-lead { text-align: center; font-size: 14px; max-width: 30em; }

/* ── 4. The screens: a 3D ring on every screen (js/site.mjs places each
   slide); without the script, a row you scroll. A click enlarges one. */
.app .center { margin-bottom: clamp(24px, 3vw, 40px); }
.reel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: -2px;
}
.reel::-webkit-scrollbar { display: none; }
.reel.dragging { cursor: grabbing; scroll-snap-type: none; }
.reel-row { display: flex; gap: clamp(14px, 2vw, 28px); padding: 40px calc(50vw - 130px) 30px; width: max-content; perspective: 1400px; }
.slide { flex: none; width: 260px; scroll-snap-align: center; }
.slide-btn {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.reel.dragging .slide-btn { cursor: grabbing; }
.slide .phone { width: 100%; border-radius: 38px; }
.cap { font: 700 12px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.reel.is-ring { overflow: visible; cursor: grab; touch-action: pan-y; scroll-snap-type: none; }
.reel { --slide-w: clamp(190px, 52vw, 260px); }
/* The ring's screens wait until it is near (js/site.mjs adds .near): a lazy
   image that is not displayed is not fetched, so the first load stays light. */
.js .reel:not(.near) .phone img { display: none; }
.reel.is-ring .reel-row { display: block; position: relative; width: auto; height: calc(var(--slide-w) * 2.167 + 76px); padding: 0; perspective: 1600px; }
/* z-index moves with the turn (it animates in steps), so a screen never jumps in front of its neighbour before it gets there. */
.reel.is-ring .slide { position: absolute; left: 50%; top: 10px; width: var(--slide-w); margin-left: calc(var(--slide-w) / -2); transition: transform .7s var(--ease-lift), opacity .7s var(--ease-lift), z-index .7s var(--ease-lift); will-change: transform; }
.reel.is-ring.dragging .slide { transition: none; }
.reel.is-ring .slide:not(.current) .cap { display: none; }
.reel.is-ring .slide.current .cap { animation: rise .5s var(--ease-lift) .15s both; }
.lightbox {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  overflow: visible;
}
.lightbox::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox[open] figure { animation: pop-in .45s var(--ease-lift) both; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 18px; }
.lightbox .phone { width: min(380px, 80vw, calc((100svh - 140px) * 1170 / 2535)); }
.lightbox-close { position: fixed; top: 18px; right: 18px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--in); color: var(--text); cursor: pointer; }
.lightbox-close svg { width: 22px; height: 22px; }

/* ── 5. Features */
.features .center { margin-bottom: clamp(24px, 5vw, 64px); }

/* ── 6. Why it's worth it. */
.worth-box { position: relative; max-width: 860px; margin-inline: auto; padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px); overflow: clip; text-align: center; }
.worth-box > .worth { position: relative; }
.worth-2 { display: block; margin-top: 18px; }
.js [data-type] .ch { opacity: 0; transition: opacity .12s linear; }
.js [data-type].typed .ch { opacity: 1; transition-delay: calc(var(--i) * 26ms); }
.worth {
  margin: 0 auto;
  max-width: 36em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* ── 7. The person behind it. */
.maker-grid { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; }
.maker-line { font-size: clamp(18px, 2vw, 24px); }
/* The founder story stays folded until someone asks for it. */
.story { border: 0; padding: 0; display: grid; justify-items: center; }
/* A text button in orange, so it never reads as a second Join button. */
.story-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--in); color: var(--accent-text); font: 700 11px/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: box-shadow .2s; margin-top: 14px; }
.story-toggle:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.story-toggle { display: none; }
.js .story-toggle { display: inline-flex; }
.story-open, .story.open .story-closed { display: none; }
.story.open .story-open { display: inline; }
.story-arrow { width: 14px; height: 14px; transition: rotate .3s var(--ease-lift); }
.story.open .story-arrow { rotate: 180deg; }
.js .story:not(.open) .story-body { max-height: 13.5em; overflow: hidden; -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); }
.story-body { display: grid; gap: 12px; max-width: 34em; margin-top: 4px; color: var(--text-muted); font-size: 15px; line-height: 1.6; text-align: center; }
.story.open .story-body { animation: rise .5s var(--ease-lift) both; }

/* ── 8. Questions */
.split { display: grid; gap: 28px; }
.split > * { min-width: 0; }
details { border-top: 1px solid var(--line); padding: 20px 0; }
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 700 15px var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
summary::-webkit-details-marker { display: none; }
.sign::before { content: '+'; color: var(--accent-text); font-size: 20px; line-height: 1; }
details[open] .sign::before { content: '\2212'; }
.answer { color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease-lift), content-visibility .4s allow-discrete; }
details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ── 9. The ask and the waitlist */
.ask { padding-bottom: var(--section); }
.ask-panel {
  padding: clamp(40px, 6vw, 88px) 22px clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  overflow: clip;
}
.panel-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 15% 0%, var(--accent), transparent 80%);
  opacity: 0.22;
  pointer-events: none;
}
.ask-panel > :not(.panel-glow) { position: relative; }
.ask-panel .display { margin: 0; }
.waitlist { position: relative; width: 100%; max-width: 540px; display: grid; gap: 12px; text-align: left; margin-top: 10px; }
.field-label { font: 700 11px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: 500 16px var(--font-body);
}
.field-row input::placeholder { color: var(--text-faint); }
.field-row input:focus-visible { outline-offset: 1px; }
.field-row .btn { flex: none; }
/* No tickbox: pressing Join is the consent, said in this line (Ramon, 14 Oct). */
.consent { color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.ask-note { color: var(--text-muted); font-size: 14px; }
.status { min-height: 1.5em; font-size: 15px; line-height: 1.5; color: var(--text); }
.status.error { color: var(--danger); }
/* The dialog stays unclipped so the panel's glow shows; the panel scrolls inside on a short screen. */
.join { width: min(460px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: none; color: var(--text); overflow: visible; }
/* On a phone it opens near the top, so the email field stays above the
   keyboard when it comes up, the same way every time (also inside the
   Artifact viewer's frame, where the keyboard cannot be measured). */
@media (max-width: 599px) { .join { margin: calc(max(16px, 6vh) + var(--join-top, 82px)) auto auto; } .join .join-panel { max-height: calc(100dvh - max(16px, 6vh) - var(--join-top, 82px) - 16px); } }
/* A short screen (a small phone, or one on its side): straight under the top. */
@media (max-width: 599px) and (max-height: 640px), (max-height: 480px) { .join { margin: 16px auto auto; } .join .join-panel { max-height: calc(100dvh - 32px); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.join:focus { outline: none; }
/* An open pop-up holds the page still behind it (Ramon, 15 Oct: the page scrolled under it). */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
html.held body { position: fixed; inset-inline: 0; top: var(--held-top, 0); }
.join-panel { overscroll-behavior: contain; }
.join::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.join[open] .join-panel { animation: pop-in .45s var(--ease-lift) both; }
.join-panel { position: relative; display: grid; gap: 14px; padding: 44px 24px 24px; max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; background: var(--surface); }
.join-panel > :not(.panel-glow) { position: relative; }
.join-panel .display { margin: 0 auto; }
.join-note { margin-top: -6px; color: var(--accent-text); font-size: 14px; font-weight: 600; line-height: 1.45; }
.join-panel .eyebrow, .ask-panel .eyebrow { margin-bottom: -6px; }
.join-panel .waitlist { text-align: left; }
.join-panel .status { min-height: 0; }
.join-panel > .join-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--in); color: var(--text); cursor: pointer; }
.join-close svg { width: 20px; height: 20px; }
/* The honeypot: a field people never see or reach, so only a bot fills it. */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.waitlist.done .field-row, .waitlist.done .consent, .waitlist.done .field-label { display: none; }

/* ── Footer */
.footer {
  padding-block: 40px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.foot-wordmark { height: 20px; width: auto; }
.footer nav { display: flex; gap: 22px; }
.footer nav a { color: var(--text-muted); }

/* ── Wider screens */
@media (min-width: 900px) {
  .hero-phone { width: 270px; }
  .hero-back { width: 226px; }
  .answers { grid-template-columns: repeat(3, 1fr); }
  .primary { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
  .feat-icons { grid-template-columns: repeat(4, 1fr); gap: 44px 32px; max-width: 1100px; }
  .feat-icons svg { width: 34px; height: 34px; }
  .all-group { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; align-items: start; }
  .all-group h2 { margin: 16px 0 0; }
}

/* ── Motion: blocks arrive as they come on screen and go back to waiting
   when you scroll back above them, so they play again on the way down
   (Ramon, 13 Oct). js/site.mjs adds and removes .in. */
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes pop-in { from { opacity: 0; scale: .86; translate: 0 18px; } }
@keyframes shine { from { translate: -120% 0; } to { translate: 120% 0; } }
.load { animation: rise .8s var(--ease-lift) both; }
.l1 { animation-delay: .05s; } .l2 { animation-delay: .15s; } .l3 { animation-delay: .3s; }
.js .rise { transition: opacity .7s var(--ease-lift) var(--d, 0s), translate .8s var(--ease-lift) var(--d, 0s); }
.js .rise { opacity: 0; translate: 0 28px; }
.js .rise.in { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rise { opacity: 1; translate: none; }
  .say .w, .js [data-type] .ch { opacity: 1; }
}
/* Its own rule: a browser without ::details-content would drop the whole list. */
@media (prefers-reduced-motion: reduce) {
  ::details-content { transition: none !important; }
}

/* ── /confirm and /unsubscribe: one panel, one button. */
.one-step { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 32px; padding-block: 48px; }
.one-step .ask-panel { width: 100%; max-width: 560px; }
.link-step { display: grid; justify-items: center; gap: 12px; }
.link-step .status { text-align: center; }

/* ── The waitlist's privacy page: one readable column. */
.policy { max-width: calc(40em + 2 * var(--gutter)); padding-block: 40px 96px; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
.policy .display { margin: 48px 0 8px; color: var(--text); }
.policy h2 { margin: 40px 0 12px; font: 800 15px/1.2 var(--font-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 12px; }
.policy ul { display: grid; gap: 10px; padding-left: 1.2em; list-style: disc; }
.policy strong { color: var(--text); }
.policy-updated { margin-bottom: 24px; color: var(--text-faint); font-size: 13px; }