/* FoxBox product pages (/strings, /voice): full-bleed and cinematic, big type only.
   Tokens from docs/LANDING_PAGE_HANDOFF.md. */
:root{
  --bg:#15100D;--ink:#F6EFE6;--mute:#B5A798;--accent:#F2701F;--soft:#FFB27A;--red:#FF4D2E;
  --line:rgba(255,255,255,.12);
  --navy:#0B1222;--navy-deep:#070C18;--ice:#EEF3F8;--silver:#B8C2CE;--blue:#9CC7E8;--teal:#5FE6CF;--violet:#A699FF;
  --pad:clamp(20px,5vw,80px);
  --dim:var(--mute);--fg:var(--ink);--base:var(--bg);--hi:var(--soft);
}
*{box-sizing:border-box}
body{margin:0;background:var(--base);color:var(--fg);font:400 clamp(18px,1.25vw,20px)/1.55 Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.cool{--dim:var(--silver);--fg:var(--ice);--base:var(--navy);--hi:var(--teal)}
a{color:var(--hi);text-decoration:none}
a:hover{color:var(--fg)}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px;border-radius:6px}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
.dim{color:var(--dim)}
.hi{color:var(--hi)}
.aurora{background:linear-gradient(90deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

/* header floats over the hero */
.top{position:absolute;inset:0 0 auto 0;z-index:10;background:linear-gradient(color-mix(in srgb,var(--base) 70%,transparent),transparent);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px var(--pad)}
.top .home{white-space:nowrap;display:flex;align-items:center;gap:12px;font:800 24px Geist,sans-serif;letter-spacing:-.03em;color:var(--fg)}
.top .home img{height:28px;width:auto}
.top .home .icon{width:32px;height:32px;border-radius:22%}
.top nav{display:flex;gap:clamp(18px,2.6vw,36px);font:500 18px Geist,sans-serif}
.top nav a{color:var(--fg)}
.top nav a[aria-current]{color:var(--hi)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:20px 32px;border-radius:999px;font:700 18px Geist,sans-serif;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.warm{background:var(--accent);color:var(--bg);box-shadow:0 12px 36px rgba(242,112,31,.4)}
.btn.warm:hover{background:var(--soft);color:var(--bg)}
.btn.ice{background:var(--ice);color:var(--navy)}
.btn.ice:hover{background:#fff;color:var(--navy)}
.btn.ghost{border:1.5px solid color-mix(in srgb,var(--hi) 60%,transparent);color:var(--fg);background:color-mix(in srgb,var(--base) 35%,transparent)}
.btn.ghost:hover{border-color:var(--hi);color:var(--hi)}

/* hero: full-viewport loop */
.hero{position:relative;min-height:max(680px,100svh);display:flex;align-items:flex-end;overflow:hidden}
.hero.copy-right{justify-content:flex-end}
.media{position:absolute;inset:0;background:var(--poster) var(--pos,center)/cover}
.media video{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;pointer-events:none}
.hero-copy{position:relative;width:min(700px,100%);display:flex;flex-direction:column;gap:28px;padding:120px var(--pad) clamp(56px,9vh,110px)}
.hero h1{font:800 clamp(48px,min(7.4vw,11svh),124px)/.92 Geist,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.hero p{font-size:clamp(20px,1.6vw,24px);color:var(--dim);max-width:560px}
@media (prefers-reduced-motion:reduce){.media video{display:none}}

/* big statements */
.statement{padding:clamp(110px,15vw,220px) var(--pad) clamp(56px,7vw,110px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.statement h2{font:800 clamp(52px,8vw,136px)/.92 Geist,sans-serif;letter-spacing:-.055em;text-wrap:balance;max-width:14ch}
.statement p{font-size:clamp(20px,1.8vw,28px);color:var(--dim);max-width:34ch}
.giant{font:900 clamp(110px,24vw,380px)/.78 Geist,sans-serif;letter-spacing:-.065em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--hi) 40%,transparent);white-space:nowrap;margin-left:-.05em}
.giant.red{-webkit-text-stroke-color:rgba(255,77,46,.45)}

/* full-bleed images, optional overlay copy */
.bleed{position:relative;overflow:hidden;background:#000}
.bleed>img,.bleed>.media{width:100%;height:clamp(440px,64vw,96svh);object-fit:cover}
.bleed>.media{position:relative}
.bleed picture img{width:100%;height:auto}
.over{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,7vw,110px);display:flex;flex-direction:column;gap:24px;max-width:640px}
.over.right{left:auto}
.over h2{font:800 clamp(44px,5.6vw,96px)/.94 Geist,sans-serif;letter-spacing:-.05em;text-wrap:balance}
.over p{font-size:clamp(19px,1.5vw,22px);color:var(--dim)}

/* big rows */
.rows{padding:clamp(48px,7vw,110px) var(--pad)}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,80px);align-items:baseline;padding:clamp(28px,3.4vw,52px) 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row h3{font:700 clamp(30px,3.6vw,60px)/1.02 Geist,sans-serif;letter-spacing:-.04em;text-wrap:balance}
.row p{font-size:clamp(19px,1.5vw,23px);color:var(--dim)}
.row b{color:var(--fg);font-weight:600}
.row.kv{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
.row .big{font:600 clamp(26px,3vw,48px)/1.1 Geist,sans-serif;letter-spacing:-.03em;color:var(--fg)}

/* hand-shape strips */
.shapes{display:grid;grid-template-columns:repeat(var(--n),1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shape{display:flex;flex-direction:column;gap:clamp(20px,3vw,44px);padding:clamp(28px,3.4vw,52px) clamp(16px,2vw,32px);border-left:1px solid var(--line);transition:background .4s}
.shape:first-child{border-left:0}
.shape:hover{background:rgba(242,112,31,.08)}
.shape .e{font-size:clamp(48px,5vw,80px);line-height:1}
.shape .l{font:700 clamp(19px,1.6vw,24px)/1.2 Geist,sans-serif;letter-spacing:-.01em}
.shape.hot{background:var(--red);color:var(--bg)}
.shape-note{padding:22px var(--pad) 0;color:var(--dim)}

/* Voice rack, full width */
.rack{position:relative;overflow:hidden;padding:clamp(72px,10vw,150px) var(--pad);display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);background:var(--navy-deep)}
.sky{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 10% 0%,rgba(95,230,207,.18),transparent 70%),radial-gradient(50% 55% at 90% 15%,rgba(166,153,255,.18),transparent 70%)}
.rack>*{position:relative}
.script{font:500 clamp(30px,5.4vw,88px)/1.15 'Geist Mono',monospace;letter-spacing:-.03em}
.script .b{color:var(--teal)}
.script .t{color:var(--violet)}
.caret{display:inline-block;width:.06em;height:1em;background:var(--blue);vertical-align:-.12em;margin-left:.15em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.rack .how{display:flex;flex-wrap:wrap;gap:12px 56px;font-size:clamp(19px,1.6vw,24px);color:var(--dim)}
.rack .how b{color:var(--fg);font-weight:600}
.presets{display:flex;flex-wrap:wrap;gap:6px clamp(20px,2.6vw,40px);font:700 clamp(22px,2.6vw,40px) Geist,sans-serif;letter-spacing:-.02em;color:color-mix(in srgb,var(--ice) 45%,transparent)}
.presets b{color:var(--ice);border-bottom:3px solid var(--teal)}
.macros{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px)}
.macro{display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(22px,3vw,40px) 10px;border-radius:28px;background:rgba(14,22,42,.7);border:1px solid rgba(184,194,206,.14);font:700 clamp(17px,1.4vw,20px) Geist,sans-serif;letter-spacing:.02em}
.knob{width:clamp(64px,7vw,104px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 225deg,var(--c) calc(var(--v)*270deg),rgba(184,194,206,.15) 0 270deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}

/* footer */
footer{padding:clamp(48px,6vw,80px) var(--pad);border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(90deg,#1a110c,var(--bg) 50%,var(--navy));display:flex;flex-direction:column;gap:32px;color:var(--ink)}
footer .r{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer nav{display:flex;flex-wrap:wrap;gap:16px 36px;font:500 18px Geist,sans-serif}
footer p{color:var(--mute);max-width:640px}

/* Filament feature graphics: a 960x600 stage scaled into a 16:10 box by /gfx.js */
.gfx{position:relative;container-type:inline-size;aspect-ratio:16/10;overflow:hidden;border-radius:clamp(16px,2vw,28px);background:#0c0806}
.gfx>div{position:absolute!important;left:0;top:0;transform-origin:0 0;visibility:hidden}
.gfx.on>div{visibility:visible}
@container (max-width:614px){.gfx-sm{display:none}}  /* big text or no text: 25px stage text is <16px here */
.row.with-gfx{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.row.with-gfx .copy{display:flex;flex-direction:column;gap:16px}
/* real app captures (S2): 16:9 on desktop, 4:5 on phones, first frame as the still */
.cap{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(16px,2vw,28px);background:#1a1410 var(--poster) center/cover}
.cap video{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.cap video{display:none}}
@media (prefers-reduced-motion:reduce){.gfx *{animation:none!important}}
@keyframes fv-play{from{transform:translateX(0)}to{transform:translateX(720px)}}
@keyframes fv-aurora{0%,100%{transform:translateX(-4%) scaleY(1)}50%{transform:translateX(4%) scaleY(1.15)}}
@keyframes fa-sweep{from{transform:translateX(0)}to{transform:translateX(440px)}}
@keyframes fa-beat{0%,18%{background:#F2701F;box-shadow:0 0 12px #F2701F}25%,100%{background:rgba(246,239,230,.16);box-shadow:none}}
@keyframes fa-breathe{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes fw-shimmer{0%,100%{box-shadow:0 0 0 rgba(242,112,31,0)}50%{box-shadow:0 0 16px rgba(242,112,31,.55)}}
@keyframes fw-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}

@media (max-width:860px){
  .desk-only{display:none}  /* wide app stills: on a phone their labels would drop under 16px */
  .row.with-gfx{grid-template-columns:1fr}
  .row.with-gfx .gfx{border-radius:0;margin:12px calc(-1 * var(--pad)) 0}
  .row.with-gfx .cap{aspect-ratio:4/5;background-image:var(--poster4);border-radius:0;margin:12px calc(-1 * var(--pad)) 0}
  .top{padding:20px var(--pad)}
  .top .home{font-size:20px}
  .top .home img{height:20px}
  .top .home .icon{width:28px;height:28px}
  .top nav{gap:16px;font-size:17px}
  .top .gh{display:none}
  /* hero and art: picture first (edge to edge, fox in frame), copy below on the page colour */
  .hero{height:auto;min-height:0;display:block}
  .media{background-image:var(--poster4,var(--poster));background-position:center}
  .hero .media{position:relative;aspect-ratio:4/5}
  .hero .scrim{background:linear-gradient(transparent 70%,var(--base))!important;height:calc(125vw + 2px)}
  .hero-copy{width:auto;padding-top:8px}
  .bleed>img,.bleed>.media{height:auto;aspect-ratio:4/5;max-height:80svh}
  .bleed.wide>img{aspect-ratio:3/2}
  .bleed .scrim{display:none}
  .over,.over.right{position:static;max-width:none;padding:36px var(--pad) 8px;background:var(--base)}
  .row{grid-template-columns:1fr;gap:12px}
  .shapes{grid-template-columns:repeat(2,1fr)}
  .shape{border-top:1px solid var(--line)}
  .shape:nth-child(odd){border-left:0}
  .macros{grid-template-columns:repeat(2,1fr)}
}