/* ══════════════════════════════════════════════════════════════════════════
   TurboGem waitlist — built one-to-one from the owner's two reference frames.
   Black ground, white Inter, one yellow, the gem drawn as gold wire off the
   right edge. This site does NOT load neu.css (DECISIONS D51).

   Two layouts, switched automatically:
   · DESKTOP (pointer + ≥1025px): the frame. Copy left, gem right, everything
     sized from the viewport so the whole hero fits one screen from a 1366×768
     laptop to a 4K monitor.
   · MOBILE (≤1024px, or any coarse-pointer device): stacked. The gem is a
     cropped crest behind the top of the page, type and spacing are for thumbs,
     the button is full width, safe areas respected.
   The switch is CSS media queries (instant, no reload, handles rotation); a
   tiny script also stamps <html data-device="phone|tablet|desktop"> for JS.
   ══════════════════════════════════════════════════════════════════════════ */
/* Inter is linked from the page head (preconnect + stylesheet) so the browser finds it before this file. */

:root {
  --bg: #070709;
  --ink: #ffffff;
  --ink-2: #d9d9d9;
  --ink-3: #9a9a9a;
  --line: rgba(255, 255, 255, 0.14);
  --yellow: #f7f200;
  --yellow-ink: #121200;
  --bad: #ff7a70;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* desktop scale — everything derives from the viewport */
  --gutter: clamp(36px, 5vw, 84px);
  --logo: clamp(44px, 3.6vw, 64px);
  --header-h: calc(var(--logo) + 28px);
  --h1: clamp(36px, 3.7vw, 66px);
  --h1-bold: clamp(36px, 3.6vw, 62px);
  --lede: clamp(16px, 1.2vw, 20px);
  --stage-top: clamp(40px, 9vh, 120px);
  --stage-bottom: clamp(40px, 8vh, 100px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--yellow); color: var(--yellow-ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ── header: the mark, one quiet link, one hairline ── */
header.top { position: relative; z-index: 3; border-bottom: 1px solid var(--line); }
.top-inner {
  height: var(--header-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: var(--logo); height: auto; display: block; }
.top-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  color: var(--ink); text-decoration: none; font-size: clamp(14px, 1vw, 16px); font-weight: 500;
}
.top-link:hover { color: var(--yellow); }
.top-link svg { width: 18px; height: 18px; }

/* ── stage: copy left, gem bleeding off the right; one screen tall ── */
.stage { position: relative; overflow: hidden; }
.stage-inner {
  position: relative; z-index: 2;
  padding: var(--stage-top) var(--gutter) var(--stage-bottom);
  display: grid; grid-template-columns: minmax(0, 48%) 1fr; gap: 40px; align-items: start;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}
.stage:not(.quiet) .stage-inner { align-items: center; padding-bottom: calc(var(--stage-bottom) + 6vh); }   /* the frame's copy sits at mid-height */
.copy { max-width: 900px; }
h1.hero {
  font-size: var(--h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.012em;
  margin: 0 0 0.42em; color: var(--ink);
}
.form h1.hero { font-size: var(--h1-bold); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.3em; }
/* the underline bar: flat yellow, draws once */
.uw { position: relative; display: inline-block; white-space: nowrap; }
.uw::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.14em; height: 0.09em; background: var(--yellow);
  transform-origin: left center; transform: scaleX(0); animation: uw-draw .9s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes uw-draw { to { transform: scaleX(1); } }
.lede { font-size: var(--lede); line-height: 1.5; color: var(--ink-2); margin: 0 0 2em; max-width: 60ch; font-weight: 400; }
.form .lede { margin-bottom: 2.2em; max-width: 46ch; }

/* ── the one action on the first page ── */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: clamp(44px, 5vh, 52px); padding: 0 clamp(24px, 2.2vw, 30px); border-radius: 999px;
  background: var(--yellow); color: var(--yellow-ink); text-decoration: none;
  font-size: clamp(15px, 1.05vw, 17px); font-weight: 600; letter-spacing: -0.005em;
  transition: transform .15s ease, filter .15s ease;
}
.cta:hover { filter: brightness(1.04); transform: translateY(-1px); }
.cta:active { transform: scale(.985); }
.cta svg { width: 18px; height: 18px; transition: transform .15s ease; }
.cta:hover svg { transform: translateX(3px); }
.fine { margin: 1.4em 0 0; font-size: 13px; color: var(--ink); }
.form-error { display: none; margin: 14px 0 0; font-size: 14px; color: var(--bad); }
.form-error.show { display: block; }

/* ── the wireframe gem ── */
.gem-art { position: absolute; top: 0; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); z-index: 1; pointer-events: none; }
.gem-art svg { position: absolute; top: 50%; right: -5%; width: min(50vw, 86vh); height: auto; transform: translateY(-50%); }
.gem-art .g { fill: none; stroke: url(#gold); stroke-width: 0.85;   /* viewBox is the traced mark (~352 units); ≈2px on screen */ stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.65,0,.35,1) forwards; animation-delay: calc(.15s + var(--i, 0) * 70ms); }
.gem-art .halo { filter: url(#gem-blur); will-change: opacity; }   /* one blur for the whole glow, rasterised once; opacity animates on the compositor */
.gem-art .halo .g { stroke-width: 2.4; opacity: .28; animation-delay: .35s; }
.gem-art .halo .s { opacity: .26; }
.gem-art .streak-1 { animation-delay: .5s; }
.gem-art .streak-2 { animation-delay: .65s; }
.gem-art .streak-3 { animation-delay: .8s; }
.gem-art .trail { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── request form: underline fields, exactly as the frame ── */
.form { max-width: 705px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.field { display: flex; flex-direction: column; margin: 0 0 clamp(24px, 3.6vh, 40px); }
.field label { font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--font); font-size: 16px; outline: none;
  transition: border-color .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--yellow); }
.field textarea { min-height: 44px; resize: vertical; line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-primary {
  display: block; width: 100%; height: clamp(44px, 5vh, 50px); margin-top: 12px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--yellow); color: var(--yellow-ink); font-family: var(--font); font-size: 17px; font-weight: 700;
  transition: transform .15s ease, filter .15s ease;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { transform: scale(.99); }
.btn-primary:disabled { cursor: progress; opacity: .8; transform: none; }

/* ── the signed-up screen: the frame's closing beat ── */
.done { display: none; }
.done.show { display: block; }
.copy.reserved > h1, .copy.reserved > .lede { display: none; }   /* the signed-up screen replaces the page's own heading */
.done h2 { font-size: var(--h1-bold); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 26px; color: var(--ink); }
.done .uw::after { animation-delay: .55s; }
.pos { display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px; }
.pos[hidden] { display: none; }
.pos .num { font-size: clamp(60px, 7vw, 116px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--yellow);
  font-variant-numeric: tabular-nums; }
.pos .num::before { content: "#"; font-size: .55em; letter-spacing: 0; margin-right: .04em; opacity: .9; }
.pos .lbl { font-size: var(--lede); color: var(--ink-2); }
.done p { margin: 0 0 10px; font-size: var(--lede); color: var(--ink-2); max-width: 46ch; }
.done .done-line { color: var(--ink); }
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }
.share span { color: var(--ink-2); font-size: 16px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--ink); font-family: var(--font); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .12s ease; }
.share-btn:hover { border-color: var(--ink); }
.share-btn:active { transform: scale(.97); }
.share-btn.copied { border-color: var(--yellow); color: var(--yellow); }
/* the screen arrives the way the page did: line by line */
.done.show > * { opacity: 0; animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
.done.show > :nth-child(1) { animation-delay: .05s; }
.done.show > :nth-child(2) { animation-delay: .25s; }
.done.show > :nth-child(3) { animation-delay: .5s; }
.done.show > :nth-child(4) { animation-delay: .65s; }
.done.show > :nth-child(5) { animation-delay: .8s; }
/* one more sweep of light along the wire when a spot is reserved — the celebration, no confetti */
@keyframes sweep-again { 0% { stroke-dashoffset: 0.14; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .85; } 100% { stroke-dashoffset: -0.86; opacity: 0; } }
.gem-art.cheer .sweep .g { animation: sweep-again 1.8s cubic-bezier(.45,.05,.2,1) .2s 1 forwards; }

/* ── the privacy page: one column of prose in the same frame ── */
.stage-inner.single { grid-template-columns: 1fr; }
.legal { max-width: 720px; }
.legal h1.hero { font-size: var(--h1-bold); font-weight: 800; letter-spacing: -0.03em; margin-bottom: .3em; }
.legal h2 { font-size: clamp(17px, 1.3vw, 21px); font-weight: 600; color: var(--ink); margin: 1.8em 0 .45em; }
.legal p, .legal li { color: var(--ink-2); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; margin: 0 0 .8em; }
.legal ul { padding-left: 1.2em; margin: 0 0 .8em; }
.legal li strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--yellow); }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--ink); }
.legal .updated { color: var(--ink-3); font-size: 13px; margin-bottom: 0; }
.legal .lede { max-width: 640px; }
/* the policy link in the fine print: a 44px tap target that does not change the line */
.fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 14px 0; margin: -14px 0; }
.fine a:hover { color: var(--ink); }

/* the frame's closing hairline */
.rule { padding: 0 var(--gutter); }
.rule::after { content: ""; display: block; height: 1px; background: var(--line); }

/* ── short desktop screens (13" laptops, browser chrome): tighten the vertical rhythm ── */
@media (min-width: 1025px) and (max-height: 820px) {
  :root { --stage-top: clamp(20px, 5vh, 64px); --stage-bottom: 20px; --logo: clamp(44px, 3.2vw, 56px); }
  .lede { margin-bottom: 1.4em; }
  .form .lede { margin-bottom: 1em; }
  .field { margin-bottom: 14px; }
  .field input, .field textarea { padding: 4px 0 8px; }
  .field textarea { min-height: 40px; }
  .btn-primary { height: 46px; margin-top: 8px; }
  .fine { margin-top: 12px; }
  .stage.quiet .stage-inner { padding-top: 18px; }
  .form h1.hero { margin-bottom: .2em; }
}
/* very wide screens: keep the copy from drifting into the gem */
@media (min-width: 1700px) {
  .stage-inner { grid-template-columns: minmax(0, 900px) 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — phones and tablets, or any device driven by touch
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px), (pointer: coarse) {
  :root {
    --gutter: 24px; --logo: 56px; --header-h: 84px;
    --h1: clamp(36px, 8.4vw, 56px); --h1-bold: clamp(36px, 8.4vw, 54px); --lede: clamp(17px, 2.6vw, 20px);
  }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .top-inner { padding-top: env(safe-area-inset-top); }
  .top-link { font-size: 16px; }

  /* the gem becomes a crest: cropped into the top-right corner, behind the headline */
  .stage-inner {
    grid-template-columns: 1fr; gap: 0;
    padding: clamp(230px, 34vh, 300px) var(--gutter) 64px;
    min-height: 0;
  }
  .gem-art { height: 380px; }   /* a fixed band, so the crest sits identically on both pages */
  .gem-art svg {
    top: -22px; right: -28%; width: min(112vw, 620px); transform: none; opacity: .9;
  }
  h1.hero { line-height: 1.1; margin-bottom: 0.5em; }
  h1.hero br { display: none; }                  /* let the lines wrap for the width at hand */
  .lede { margin-bottom: 1.6em; max-width: none; }
  .form .lede { margin-bottom: 1.8em; }
  .cta { width: 100%; min-height: 54px; font-size: 17px; }
  .fine { font-size: 12.5px; color: var(--ink-2); margin-top: 16px; }

  /* the form stacks; fields keep the underline language, spaced for thumbs */
  .form { max-width: none; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 26px; }
  .field label { font-size: 15px; }
  .field input, .field textarea { font-size: 16px; padding: 8px 0 10px; }   /* 16px stops iOS zooming the field */
  .field textarea { min-height: 56px; }
  .btn-primary { height: 54px; font-size: 17px; margin-top: 8px; }
  .done h2 { font-size: 36px; margin-bottom: 20px; }
  .pos .num { font-size: 64px; }
  .done p { font-size: 16px; }
  .share { margin-top: 24px; }
  .share-btn { width: 100%; }
  .rule { padding: 0 var(--gutter); }
}
/* tablets in landscape have the width for two columns in the form, and a bigger crest */
@media (min-width: 700px) and (max-width: 1024px) {
  .row { grid-template-columns: 1fr 1fr; gap: 28px; }
  .form { max-width: 705px; }
  .gem-art { height: 520px; }
  .gem-art svg { width: min(76vw, 760px); right: -18%; top: -40px; }
  .stage-inner { padding-top: clamp(300px, 38vh, 420px); }
}
/* phones in landscape: short and wide — fade the crest and shorten the top gap */
@media (max-width: 1024px) and (max-height: 480px) {
  .stage-inner { padding-top: 72px; }
  .gem-art svg { opacity: .3; top: -120px; }
}

@media (prefers-reduced-motion: reduce) {
  .uw::after { animation: none; transform: none; }
  .gem-art .g { animation: none; stroke-dashoffset: 0; }
  .cta, .btn-primary, .cta svg, .done .next svg { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM LAYER — eight touches, all tied to the gem and the type. Each one
   is a few lines, none needs a library, and every one switches off under
   prefers-reduced-motion. Hover and parallax run only on mouse devices.
   ══════════════════════════════════════════════════════════════════════════ */

/* 5. film grain: one tiled SVG noise tile at 4.5%, no JS; kills flat screen-black */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 1. one sweep of light along the wire after the draw finishes */
.gem-art .sweep .g {
  stroke: #fff7b0; stroke-width: 1.25; opacity: 0;
  stroke-dasharray: 0.14 0.86; stroke-dashoffset: 0.14;
  animation: sweep 2.4s cubic-bezier(.45,.05,.2,1) 2.6s 1 forwards;
}
@keyframes sweep {
  0%   { stroke-dashoffset: 0.14; opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .85; }
  100% { stroke-dashoffset: -0.86; opacity: 0; }
}

/* 7. breathing halo: 8s cycle, small amplitude, starts once the wire is drawn */
.gem-art .halo { animation: breathe 8s ease-in-out 3.4s infinite; }
@keyframes breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

/* 4. facet fill on hover (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .gem-art path.g { pointer-events: all; transition: fill .25s ease; }
  .gem-art .halo path.g, .gem-art .sweep path.g { pointer-events: none; }
  .gem-art path.g:hover { fill: rgba(244, 233, 58, 0.09); }
}

/* 2. parallax: the gem drifts against the cursor, the copy a touch the other way (JS sets the vars) */
.gem-art { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }   /* the script eases; no CSS transition on top of it */
.copy { transform: translate3d(calc(var(--px, 0px) * -.3), calc(var(--py, 0px) * -.3), 0); }

/* 3. staggered reveal: headline lines rise one after another, then the bar, the lede, the action */
.ln { display: inline-block; opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
h1.hero .ln:nth-child(1) { animation-delay: .15s; }
h1.hero .ln:nth-child(3) { animation-delay: .32s; }
h1.hero .ln:nth-child(5) { animation-delay: .49s; }
.uw::after { animation-delay: 1.15s; }
.lede, .cta, .fine, form, .top-link { opacity: 0; animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
.lede { animation-delay: .8s; }
.cta, form { animation-delay: .95s; }
.fine { animation-delay: 1.15s; }
.top-link { animation-delay: .5s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1025px) { h1.hero .ln { display: block; } h1.hero br { display: none; } }   /* one line per block on desktop; inline flow on phones */

/* 6. press feel */
.cta, .btn-primary { transition: transform .12s ease, filter .12s ease; }
.cta:active, .btn-primary:active { transform: scale(.97); filter: brightness(.9); }

/* 8. hand-off between the two pages: copy leaves, the gem stays; the next page shows the gem already drawn */
html.leaving .copy { opacity: 0; transform: translateY(-10px); transition: opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .gem-art .sweep { display: none; }
  .gem-art .halo { animation: none; }
  .gem-art, .copy { transform: none; }
  .ln, .lede, .cta, .fine, form, .top-link { animation: none; opacity: 1; transform: none; }
  .done.show > * { animation: none; opacity: 1; transform: none; }
  .gem-art.cheer .sweep .g { animation: none; }
  html.leaving .copy { transition: none; opacity: 1; transform: none; }
}

/* ── entrance gate: nothing starts until html.enter, which the head script adds on the first
   frame after the fonts are ready (600ms ceiling). Otherwise the show plays before first paint. */
html:not(.enter) .gem-art .g,
html:not(.enter) .gem-art .halo,
html:not(.enter) .uw::after,
html:not(.enter) .ln,
html:not(.enter) .lede, html:not(.enter) .cta, html:not(.enter) .fine, html:not(.enter) form, html:not(.enter) .top-link {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.enter) .gem-art .g, html:not(.enter) .ln, html:not(.enter) .lede, html:not(.enter) .cta, html:not(.enter) .fine, html:not(.enter) form, html:not(.enter) .top-link { animation: none; }
}
/* per-line stagger without inline style attributes (CSP-clean): the body paths are the svg's direct path children, in trace order */
.gem-art > svg > path.g:nth-of-type(1) { --i: 0; }
.gem-art > svg > path.g:nth-of-type(2) { --i: 1; }
.gem-art > svg > path.g:nth-of-type(3) { --i: 2; }
.gem-art > svg > path.g:nth-of-type(4) { --i: 3; }
.gem-art > svg > path.g:nth-of-type(5) { --i: 4; }
.gem-art > svg > path.g:nth-of-type(6) { --i: 5; }
.gem-art > svg > path.g:nth-of-type(7) { --i: 6; }
.gem-art > svg > path.g:nth-of-type(8) { --i: 7; }
.gem-art > svg > path.g:nth-of-type(9) { --i: 8; }
.gem-art > svg > path.g:nth-of-type(10) { --i: 9; }
.gem-art > svg > path.g:nth-of-type(11) { --i: 10; }
.gem-art > svg > path.g:nth-of-type(12) { --i: 11; }

/* the privacy page starts right under the header on every device (later than the media queries above on purpose) */
.stage.quiet .stage-inner.single { padding-top: clamp(28px, 5vh, 56px); }