/* ═══════════════════════════════════════════════════════════════════
   flaude — Claude Code, in your pocket
   Cinematic editorial. Near-black canvas, cream display type,
   one electric coral accent (#de5656). Plain CSS, no build step.
═══════════════════════════════════════════════════════════════════ */

:root{
  --canvas:#08060a;
  --canvas-2:#0c0810;
  --cream:#f4efe6;
  --cream-dim:#cabfae;
  --muted:rgba(244,239,230,.55);
  --faint:rgba(244,239,230,.16);
  --faint-2:rgba(244,239,230,.09);
  --coral:#de5656;
  --coral-bright:#ff6a5a;
  --ember:#ff8a5c;
  --wine:#5a1230;
  --term-green:#6bf0a4;

  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --frame-inset:18px;
  --ease:cubic-bezier(.22,1,.36,1);

  --fs-headline: clamp(2.6rem, 9vw, 8rem);
  --fs-micro: clamp(.62rem, 1.05vw, .76rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--canvas);
  color:var(--cream);
  font-family:var(--sans);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  text-size-adjust:100%;
}
/* keep the giant cropped type from ever producing sideways scroll */
html,body{ max-width:100%; }
img,svg,canvas{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:.005em; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; left:-999px; top:8px; z-index:200; background:var(--coral); color:#0a0608; padding:.6em 1em; font-family:var(--mono); font-size:.72rem; border-radius:4px; }
.skip:focus{ left:8px; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,72px); }

/* ── global cinematic overlays ─────────────────────────────────── */
.scanlines{ position:fixed; inset:0; z-index:88; pointer-events:none; opacity:.4; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 3px, rgba(0,0,0,0) 4px); mix-blend-mode:multiply; }
.grain{ position:fixed; inset:-150%; z-index:89; pointer-events:none; opacity:.045; mix-blend-mode:screen; 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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 1.1s steps(4) infinite; }
@keyframes grainShift{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-2%)} 75%{transform:translate(-1%,1%)} 100%{transform:translate(1%,-1%)} }

/* ── shared label ──────────────────────────────────────────────── */
.label{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--coral); display:inline-flex; align-items:center; gap:.6em; }
.label::before{ content:''; width:22px; height:1px; background:var(--coral); display:inline-block; opacity:.8; }

/* pinwheel marks */
.brand-mark{ width:28px; height:28px; color:var(--cream); filter:drop-shadow(0 0 8px rgba(255,138,92,.4)); }
.brand-mark.sm{ width:18px; height:18px; vertical-align:-3px; }

/* ── pills / buttons ───────────────────────────────────────────── */
.pill{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); border:1px solid var(--faint); padding:.7em 1.1em; border-radius:3px; transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s var(--ease); white-space:nowrap; display:inline-flex; align-items:center; }
.pill:hover,.pill:focus-visible{ background:var(--coral); border-color:var(--coral-bright); color:#0a0608; box-shadow:0 0 26px rgba(255,106,90,.35); transform:translateY(-1px); }
.pill-solid{ background:var(--coral); border-color:var(--coral-bright); color:#0a0608; }
.pill-solid:hover,.pill-solid:focus-visible{ background:var(--coral-bright); box-shadow:0 0 30px rgba(255,106,90,.5); }

/* ═══════════════════ STICKY NAV ═══════════════════ */
.topnav{ position:sticky; top:0; z-index:80; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); background:linear-gradient(to bottom, rgba(8,6,10,.82), rgba(8,6,10,.4)); border-bottom:1px solid var(--faint-2); }
.topnav-inner{ max-width:1280px; margin:0 auto; padding:14px clamp(20px,5vw,46px); padding-left:max(clamp(20px,5vw,46px), env(safe-area-inset-left)); padding-right:max(clamp(20px,5vw,46px), env(safe-area-inset-right)); display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-name{ font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.topnav-links{ display:flex; gap:24px; margin-left:auto; }
.topnav-links a{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); transition:color .2s; }
.topnav-links a:hover{ color:var(--cream); }

/* ═══════════════════ HERO ═══════════════════ */
.hero{ position:relative; min-height:100svh; width:100%; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(222,86,86,.10), transparent 55%),
    radial-gradient(85% 70% at 15% 115%, rgba(90,18,48,.42), transparent 60%),
    radial-gradient(70% 60% at 92% 108%, rgba(255,138,92,.06), transparent 55%),
    linear-gradient(180deg, #08060a 0%, #0a070d 55%, #07050a 100%);
}
#rain{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none; }
.legibility{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(60% 46% at 50% 40%, rgba(8,6,10,.8), transparent 72%); }
.vignette{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 100% at 50% 38%, transparent 55%, rgba(0,0,0,.5) 100%); }

.hero-content{ position:relative; z-index:5; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:13vh 6vw 22vh; }
.mark{ position:relative; width:clamp(56px,7vw,86px); aspect-ratio:1; margin-bottom:clamp(20px,3.4vh,38px); display:grid; place-items:center; }
.mark .bloom{ position:absolute; inset:-70%; background:radial-gradient(circle at 50% 50%, rgba(255,106,90,.55), rgba(222,86,86,.22) 40%, transparent 68%); filter:blur(14px); z-index:-1; animation:pulse 4.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.55; transform:scale(.96)} 50%{opacity:.95; transform:scale(1.08)} }
.mark-svg{ width:100%; height:100%; color:#fff; filter:drop-shadow(0 0 10px rgba(255,138,92,.45)); animation:spin 26s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.eyebrow{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.42em; text-transform:uppercase; color:var(--coral-bright); margin-bottom:clamp(14px,2.2vh,24px); padding-left:.42em; }
h1.headline{ font-family:var(--serif); font-weight:400; font-size:var(--fs-headline); line-height:.96; letter-spacing:-.01em; max-width:13ch; color:var(--cream); text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 42px rgba(222,86,86,.16); }
h1.headline .em{ font-style:italic; background:linear-gradient(180deg, var(--ember), var(--coral) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ margin-top:clamp(18px,2.6vh,28px); max-width:52ch; color:var(--cream-dim); font-size:clamp(15px,1.6vw,18px); line-height:1.6; }

.hero-install{ margin-top:clamp(22px,3vh,34px); display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; justify-content:center; }
.install{ font-family:var(--mono); font-size:clamp(.66rem,1.1vw,.82rem); letter-spacing:.02em; color:var(--cream-dim); background:rgba(244,239,230,.035); border:1px solid var(--faint-2); padding:.7em 1.05em; border-radius:4px; display:inline-flex; align-items:center; gap:.7em; white-space:nowrap; max-width:88vw; overflow:auto; }
.install .pr{ color:var(--coral); } .install b{ color:var(--cream); font-weight:400; }

.copybtn{ position:relative; overflow:hidden; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); background:rgba(244,239,230,.05); border:1px solid var(--faint); border-radius:4px; padding:.6em 1em; transition:border-color .2s, background .2s; }
.copybtn:hover{ border-color:var(--coral); }
.copybtn .copy-done{ position:absolute; inset:0; display:grid; place-items:center; background:var(--coral); color:#0a0608; opacity:0; transform:translateY(100%); transition:opacity .2s, transform .3s var(--ease); }
.copybtn.copied .copy-default{ opacity:0; }
.copybtn.copied .copy-done{ opacity:1; transform:translateY(0); }
.copybtn.wide{ flex:1; min-width:200px; }

/* "coming soon" pill — shown where an action isn't live yet */
.soon-pill{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-bright); border:1px solid rgba(222,86,86,.42); background:rgba(222,86,86,.09); padding:.7em 1.05em; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.soon-pill.wide{ flex:1; min-width:200px; }
.install.soon{ opacity:.62; }

.scrollcue{ margin-top:clamp(26px,4vh,46px); font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:1rem; }
.cue-line{ position:relative; width:60px; height:1px; background:var(--faint); overflow:hidden; }
.cue-line::after{ content:''; position:absolute; inset:0; width:50%; background:var(--coral); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-110%)} 60%,100%{transform:translateX(220%)} }

/* giant cropped hero wordmark */
.wordmark-wrap{ position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none; line-height:.74; text-align:center; will-change:transform; }
.wordmark-hero{ display:block; font-family:var(--sans); font-weight:700; font-size:25vw; letter-spacing:-.03em; margin:0 -6vw -2.2vw; white-space:nowrap; background:linear-gradient(176deg, rgba(244,239,230,.16) 0%, rgba(244,239,230,.92) 34%, #fff 50%, rgba(222,86,86,.78) 66%, rgba(90,18,48,.55) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; transform:translateZ(0); }
.wordmark-wrap::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg, transparent, var(--canvas) 92%); }

/* ═══════════════════ section primitives ═══════════════════ */
section{ position:relative; }
.sec-title{ font-size:clamp(2rem,5vw,4rem); line-height:1.02; margin-top:18px; }

/* ═══════════════════ INSTALL SECTION ═══════════════════ */
.install-sec{ padding:14vh 0; }
.install-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:clamp(36px,6vh,64px); }

.terminal{ position:relative; border-radius:16px; background:linear-gradient(180deg, rgba(20,10,20,.96), rgba(12,6,12,.98)); border:1px solid var(--faint); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(222,86,86,.12), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; }
.term-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--faint-2); background:rgba(255,255,255,.025); }
.dots{ display:flex; gap:7px; } .dots i{ width:11px; height:11px; border-radius:50%; display:block; } .dots i:nth-child(1){background:#ff5f56} .dots i:nth-child(2){background:#ffbd2e} .dots i:nth-child(3){background:#27c93f}
.term-title{ font-family:var(--mono); color:var(--muted); font-size:.78rem; margin:0 auto; } .term-spacer{ width:46px; }
.term-body{ padding:20px 18px 24px; min-height:226px; font-family:var(--mono); font-size:.9rem; }
.term-line{ display:flex; gap:9px; align-items:baseline; } .ps1{ color:var(--coral-bright); } .ps1::after{ content:' $'; color:var(--muted); }
.cmd{ color:var(--cream); white-space:pre-wrap; word-break:break-word; }
.cursor{ display:inline-block; width:8px; height:1.05em; transform:translateY(2px); background:var(--coral-bright); margin-left:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.term-out{ margin-top:13px; display:flex; flex-direction:column; gap:6px; }
.out-line{ opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; color:var(--cream-dim); }
.out-line.show{ opacity:1; transform:none; }
.out-line .tick-g{ color:var(--term-green); } .out-line .arr{ color:var(--coral-bright); } .out-line .dim{ color:var(--muted); } .out-line .ok{ color:var(--term-green); font-weight:700; }

.appstore-card{ position:absolute; left:16px; right:16px; bottom:74px; display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px; border:1px solid var(--faint); background:linear-gradient(135deg, rgba(40,16,38,.96), rgba(18,8,18,.98)); box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 40px rgba(222,86,86,.22); transform:translateY(180%); opacity:0; transition:transform .6s var(--ease), opacity .4s; }
.appstore-card.show{ transform:translateY(0); opacity:1; }
.appstore-icon{ width:40px; height:40px; color:#fff; filter:drop-shadow(0 4px 12px rgba(222,86,86,.5)); }
.appstore-text{ display:flex; flex-direction:column; font-family:var(--sans); } .appstore-text b{ font-weight:600; font-size:.98rem; } .appstore-text i{ font-style:normal; color:var(--muted); font-size:.8rem; }
.appstore-get{ margin-left:auto; background:var(--coral); color:#0a0608; font-family:var(--mono); font-weight:700; font-size:.74rem; letter-spacing:.08em; padding:6px 15px; border-radius:999px; }
.term-actions{ display:flex; gap:10px; padding:0 16px 16px; }
.ghostbtn{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); background:transparent; border:1px solid var(--faint); border-radius:4px; padding:.6em 1em; transition:border-color .2s; }
.ghostbtn:hover{ border-color:var(--coral); }

.steps{ list-style:none; display:flex; flex-direction:column; gap:26px; }
.steps li{ border-top:1px solid var(--faint); padding-top:18px; }
.snum{ font-family:var(--mono); font-size:.82rem; letter-spacing:.16em; color:var(--coral-bright); }
.steps h3{ font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:8px 0 6px; }
.steps p{ color:var(--muted); font-size:.96rem; line-height:1.55; max-width:34ch; }

/* ═══════════════════ [T1] PINNED REVEAL ═══════════════════ */
.pin-wrap{ height:240vh; position:relative; }
.pin-stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; padding:0 clamp(20px,6vw,90px); }
.reveal-head{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6.2vw,90px); line-height:1.08; max-width:20ch; letter-spacing:-.005em; }
.reveal-head .w{ display:inline-block; opacity:.12; transform:translateY(.12em); transition:opacity .15s linear; will-change:opacity,transform; }
.reveal-head .w.lit{ color:var(--cream); }
.reveal-head .w em{ font-style:italic; color:var(--coral); }
.pin-progress{ position:absolute; left:clamp(20px,6vw,90px); bottom:9vh; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); }

/* ═══════════════════ [T2] HORIZONTAL PANELS ═══════════════════ */
.h-wrap{ position:relative; }
.h-stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.h-track{ display:flex; gap:clamp(20px,3vw,44px); padding:0 clamp(20px,8vw,12vw); will-change:transform; }
.h-head{ position:absolute; top:11vh; left:clamp(20px,6vw,90px); z-index:3; pointer-events:none; }
.h-head h2{ font-size:clamp(30px,4.2vw,56px); line-height:1; margin-top:8px; }
.card{ position:relative; flex:0 0 auto; width:min(78vw,400px); height:min(64vh,500px); border:1px solid var(--faint); border-radius:18px; background:linear-gradient(165deg, rgba(244,239,230,.05), rgba(244,239,230,.01)); padding:34px 32px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); will-change:transform; }
.card .num{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--muted); }
.card h3{ font-size:clamp(26px,3vw,38px); line-height:1.05; margin-top:auto; }
.card p{ margin-top:.9rem; color:var(--muted); font-size:14.5px; max-width:30ch; line-height:1.5; }
.card .glyph{ position:absolute; right:-26px; top:-24px; font-family:var(--serif); font-size:190px; line-height:1; color:var(--coral); opacity:.08; will-change:transform; }
.card.active{ border-color:rgba(222,86,86,.55); box-shadow:0 0 0 1px rgba(222,86,86,.25), 0 30px 80px -30px rgba(222,86,86,.55), inset 0 0 60px -30px rgba(222,86,86,.4); }
.card-soon{ border-style:dashed; }

/* ═══════════════════ [T3] PARALLAX WORDMARK ═══════════════════ */
.wordmark-sec{ height:108vh; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.wordmark-mid{ font-family:var(--serif); font-weight:400; font-size:clamp(140px,30vw,460px); line-height:.8; letter-spacing:-.03em; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(244,239,230,.32); will-change:transform; }
.wordmark-mid b{ color:var(--coral); -webkit-text-stroke:0; font-weight:400; }
.wordmark-cap{ position:absolute; bottom:12vh; left:clamp(20px,6vw,90px); max-width:34ch; color:var(--muted); font-size:15px; }

/* ═══════════════════ [T4] DOT-WAVE + MANIFESTO ═══════════════════ */
.dotwave-sec{ position:relative; min-height:120vh; display:flex; align-items:center; overflow:hidden; padding:0 clamp(20px,6vw,90px); }
#dotwave{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.dotwave-sec .inner{ position:relative; z-index:1; max-width:40ch; }
.dotwave-sec h2{ font-size:clamp(36px,6vw,84px); line-height:1.02; margin-top:1rem; }
.dotwave-sec p{ margin-top:1.2rem; color:var(--cream-dim); font-size:16px; line-height:1.65; max-width:46ch; }

/* ═══════════════════ [T5] STAGGERED REVEALS ═══════════════════ */
[data-reveal]{ opacity:0; transform:translateY(34px) skewY(2.2deg); transition:opacity .9s var(--ease), transform 1.05s var(--ease); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
.story{ padding:18vh clamp(20px,6vw,90px); }
.eyebrow-static{ margin-bottom:2rem; }
.story h2{ font-size:clamp(34px,6vw,80px); line-height:1.04; max-width:16ch; margin-top:1.4rem; }
.reveal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,40px); margin-top:3.4rem; }
.reveal-grid .cell{ border-top:1px solid var(--faint); padding-top:1.4rem; }
.reveal-grid .cell h4{ font-size:26px; margin-bottom:.4rem; }
.reveal-grid .cell p{ color:var(--muted); font-size:14.5px; line-height:1.55; }

/* ═══════════════════ CTA / WAITLIST ═══════════════════ */
.get{ padding:16vh 0; text-align:center; position:relative; }
.get-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(50% 60% at 50% 50%, rgba(214,59,134,.12), transparent 70%); }
.get-inner{ position:relative; z-index:1; max-width:680px; display:flex; flex-direction:column; align-items:center; }
.get .label{ justify-content:center; }
.get-title{ font-size:clamp(2.4rem,6vw,5rem); line-height:1; margin-top:16px; }
.get-title .em{ font-style:italic; color:var(--coral); }
.get-sub{ margin-top:18px; color:var(--cream-dim); font-size:1.05rem; max-width:48ch; }
.get-cta{ margin-top:30px; font-size:13px; padding:.95em 1.6em; }
.waitlist{ display:flex; gap:10px; margin-top:30px; width:100%; max-width:480px; flex-wrap:wrap; justify-content:center; }
.waitlist input{ flex:1; min-width:220px; padding:.85em 1.1em; border-radius:4px; background:rgba(244,239,230,.06); border:1px solid var(--faint); color:var(--cream); font-family:var(--mono); font-size:.92rem; }
.waitlist input::placeholder{ color:var(--muted); }
.waitlist input:focus{ border-color:var(--coral); outline:none; background:rgba(244,239,230,.09); }
.waitlist .pill{ font-size:13px; padding:.85em 1.4em; }
.waitlist-msg{ margin-top:16px; min-height:1.4em; color:var(--term-green); font-family:var(--mono); font-size:.85rem; }
.waitlist-msg.error{ color:var(--coral-bright); }
.get-reassure{ margin-top:18px; color:var(--cream-dim); font-size:.95rem; }
.get-note{ margin-top:10px; color:var(--muted); font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; max-width:52ch; }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer{ border-top:1px solid var(--faint); padding:16vh clamp(20px,6vw,90px) 8vh; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.footer-big{ font-size:clamp(40px,8vw,120px); line-height:.9; }
.footer-big em{ font-style:italic; color:var(--coral); }
.footer-cols{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.fcol{ display:flex; flex-direction:column; gap:9px; }
.fcol h4{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:4px; }
.fcol a{ color:var(--cream-dim); font-size:.92rem; transition:color .2s; } .fcol a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:12vh; padding-top:24px; border-top:1px solid var(--faint-2); color:var(--muted); font-size:.84rem; }
.footer-sign{ display:inline-flex; align-items:center; gap:8px; }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:900px){
  .install-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  :root{ --frame-inset:10px; }
  .topnav-links{ display:none; }
  .topnav-inner{ gap:12px; }
  .brand-name{ font-size:1.05rem; }
  h1.headline{ max-width:18ch; }
  .wordmark-hero{ font-size:38vw; margin:0 -10vw -3vw; }

  /* generous tap targets (≥44px) for the controls people actually press */
  .pill{ min-height:44px; }
  .copybtn,.ghostbtn{ min-height:44px; }
  .waitlist .pill{ width:100%; }
  .waitlist input{ min-height:46px; width:100%; flex:1 0 100%; }

  /* hero: tighter vertical rhythm + let the install command wrap, not scroll */
  .hero-content{ padding:12vh 6vw 18vh; }
  .hero-install{ width:100%; }
  .install{ white-space:normal; word-break:break-word; max-width:100%; overflow:visible; flex:1 1 auto; }
  .copybtn{ flex:0 0 auto; }

  /* T1/T2 scroll-jack → normal stacked flow */
  .pin-wrap{ height:auto; }
  .pin-stage{ position:relative; height:auto; padding:16vh 0; }
  .reveal-head .w{ opacity:1; transform:none; color:var(--cream); }
  .pin-progress{ display:none; }
  .h-stage{ position:relative; height:auto; overflow:visible; padding:12vh 0; }
  .h-track{ flex-direction:column; transform:none!important; padding:0; gap:20px; }
  .h-head{ position:relative; top:auto; left:auto; margin-bottom:2.2rem; }
  .card{ width:100%; height:auto; min-height:300px; padding:30px 26px; }
  .card .glyph{ font-size:150px; right:-14px; top:-16px; }
  .card.active{ box-shadow:0 0 0 1px rgba(222,86,86,.2); }
  .wordmark-sec{ height:auto; padding:16vh 0; }
  .wordmark-cap{ position:relative; bottom:auto; left:auto; margin-top:2rem; padding:0 6vw; }
  .dotwave-sec{ min-height:auto; padding:18vh clamp(20px,6vw,90px); }
  .footer{ padding:12vh clamp(20px,6vw,90px) calc(6vh + env(safe-area-inset-bottom)); }
  .footer-bottom{ margin-top:8vh; }

  /* respect the notch / home-indicator on the full-bleed edges */
  .hero-content{ padding-bottom:max(18vh, env(safe-area-inset-bottom)); }
  .get{ padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); }
}

/* ── touch devices: trim GPU-heavy overlays + hover affordances ──── */
@media (hover:none) and (pointer:coarse){
  /* film grain + scanlines + blend-modes are costly and add little on a phone */
  .grain,.scanlines{ display:none; }
  .topnav{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  /* no sticky hover states to get "stuck" after a tap */
  .pill:hover,.pill-solid:hover{ box-shadow:none; transform:none; }
}

/* ── very small phones ──────────────────────────────────────────── */
@media (max-width:380px){
  :root{ --fs-headline: clamp(2.2rem, 13vw, 3.4rem); }
  .install{ font-size:.72rem; }
  .hero-sub{ font-size:14.5px; }
  .topnav .pill-solid{ font-size:11px; padding:.6em .8em; }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  .mark-svg{ animation:none; } .mark .bloom{ animation:none; opacity:.7; }
  .grain{ animation:none; } .cue-line::after{ animation:none; } .cursor{ animation:none; }
  .wordmark-wrap{ transform:none!important; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .pin-wrap{ height:auto; } .pin-stage{ position:relative; height:auto; padding:18vh 0; }
  .reveal-head .w{ opacity:1; transform:none; color:var(--cream); transition:none; }
  .h-stage{ position:relative; height:auto; overflow:visible; } .h-track{ flex-direction:column; transform:none!important; padding:0; gap:20px; }
  .h-head{ position:relative; top:auto; left:auto; margin-bottom:2rem; } .card{ width:100%; height:auto; min-height:300px; transition:none; }
  .wordmark-mid{ transform:none!important; }
}