:root{
    --primary:#EBBB7B;
    --on-primary:#0D0F14;
    --bg:#0A0C10;
    --surface:#13161C;
    --surface-input:#181C25;
    --cont-hi:#1A1F2A;
    --outline:#2A3040;
    --on-surface:#F0F0F2;
    --on-surface-var:#9AA3B0;
    --on-surface-dim:#666E7C;
    --error:#E35D5D;
    --success:#5CBA7D;
    --display:"Big Shoulders",sans-serif;
    --body:"Space Grotesk",sans-serif;
    --mono:"IBM Plex Mono",monospace;
    --hairline:1px solid var(--outline);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--primary);color:var(--on-primary)}
html{scroll-behavior:smooth}
body{
    background:var(--bg);color:var(--on-surface);
    font-family:var(--body);font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:radial-gradient(circle,rgba(42,48,64,.5) 1px,transparent 1px);
    background-size:48px 48px;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.92em;color:var(--primary)}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ================= NAV ================= */
nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    border-bottom:var(--hairline);
    background:rgba(10,12,16,.72);backdrop-filter:blur(16px);
}
.nav-in{display:flex;align-items:stretch;height:60px}
.nav-in>*{display:flex;align-items:center}
.brand{gap:12px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.12em;padding-right:32px}
.brand img{height:26px;width:auto;display:block}
.nav-mid{flex:1;gap:0;border-left:var(--hairline)}
.nav-mid a{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--on-surface-var);padding:0 26px;height:100%;display:flex;align-items:center;
    border-right:var(--hairline);transition:color .15s,background .15s;
}
.nav-mid a:hover{color:var(--primary);background:var(--surface)}
.nav-cta{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    background:var(--primary);color:var(--on-primary);padding:0 30px;height:100%;
    font-weight:500;transition:letter-spacing .2s ease;
}
.nav-cta:hover{letter-spacing:.28em}

/* language switcher — outside .nav-mid so it survives the 980px collapse */
.nav-lang{display:flex;align-items:stretch;border-left:var(--hairline);flex:none}
.nav-lang>*{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;
    display:flex;align-items:center;padding:0 15px;
}
.nav-lang .on{color:var(--primary);font-weight:500}
.nav-lang a{color:var(--on-surface-var);border-left:var(--hairline);transition:color .15s,background .15s}
.nav-lang a:hover{color:var(--primary);background:var(--surface)}

/* ================= HERO ================= */
.hero{
    min-height:100svh;display:flex;flex-direction:column;
    padding-top:60px;position:relative;
}
.hero-top{
    flex:1;display:flex;flex-direction:column;justify-content:center;
    position:relative;
}
.hero h1{
    font-family:var(--display);font-weight:800;text-transform:uppercase;
    font-size:clamp(56px,10vw,160px);line-height:.88;letter-spacing:.005em;
    user-select:none;
}
.hero h1 .l2{color:transparent;-webkit-text-stroke:1.5px var(--outline);display:inline-block}
.hero h1 .l3{color:var(--primary)}
.hero-sub{
    display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
    margin-top:clamp(28px,4vh,56px);flex-wrap:wrap;
}
.hero-sub p{max-width:44ch;color:var(--on-surface-var);font-size:clamp(15px,1.3vw,18px)}
.hero-sub p b{color:var(--on-surface);font-weight:500}
.hero-actions{display:flex;gap:1px;background:var(--outline);border:var(--hairline)}
.hact{
    padding:18px 32px;background:var(--bg);
    font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    display:flex;align-items:center;gap:12px;transition:background .2s,color .2s;
}
.hact.solid{background:var(--primary);color:var(--on-primary);font-weight:500}
/* hover only where there is something to click — the pre-launch buttons are spans */
a.hact.solid:hover{background:#f3ca8f}
a.hact:not(.solid):hover{background:var(--surface);color:var(--primary)}
span.hact,span.gplay{cursor:default}

/* data strip */
.datastrip{
    border-top:var(--hairline);
    display:grid;grid-template-columns:repeat(4,1fr);
}
.ds{
    padding:22px clamp(20px,3vw,40px);border-right:var(--hairline);
}
.ds:last-child{border-right:none}
.ds .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-surface-var)}
.ds .v{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:.02em;margin-top:2px}
.ds .v em{font-style:normal;color:var(--primary)}
.ds .v small{font-family:var(--mono);font-size:11px;color:var(--on-surface-var);font-weight:400;letter-spacing:.05em}

/* ================= SECTIONS ================= */
section{padding:clamp(90px,12vh,150px) 0;position:relative}
.sec-label{
    font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--primary);display:flex;align-items:center;gap:16px;margin-bottom:28px;
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--outline)}
h2{
    font-family:var(--display);font-weight:800;text-transform:uppercase;
    font-size:clamp(40px,5.6vw,84px);line-height:.94;letter-spacing:.005em;
}
h2 .ghost{color:transparent;-webkit-text-stroke:1.2px var(--outline)}

/* ---- MODULE ROWS (features as ledger) ---- */
.rows{margin-top:clamp(40px,6vh,72px);border-top:var(--hairline)}
.row{
    display:grid;grid-template-columns:120px 1fr 1.1fr auto;gap:clamp(20px,3vw,56px);
    align-items:center;padding:clamp(26px,4vh,44px) 0;border-bottom:var(--hairline);
    position:relative;transition:background .25s;
}
.row:hover{background:linear-gradient(90deg,transparent,rgba(235,187,123,.045),transparent)}
.row .idx{
    font-family:var(--mono);font-size:12px;color:var(--on-surface-var);letter-spacing:.1em;
}
.row .idx b{display:block;color:var(--primary);font-weight:500;font-size:13px}
.row h3{
    font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,50px);
    text-transform:uppercase;letter-spacing:.01em;line-height:1;
    transition:color .2s;
}
.row:hover h3{color:var(--primary)}
.row p{color:var(--on-surface-var);font-size:15px;max-width:52ch}
.row .meta{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--on-surface-var);
    text-align:right;line-height:2;text-transform:uppercase;white-space:nowrap;
}
.row .meta i{font-style:normal;color:var(--success)}
/* Rows that carry no .meta cell. Without this the fourth track stays in the
   grid: it collapses to 0 wide, but its gap doesn't, so the copy stops short
   of the hairline underneath. Reset in the mobile block. */
.row.no-meta{grid-template-columns:120px 1fr 1.1fr}

/* ---- COUNTER STATEMENT ---- */
.statement{
    border-top:var(--hairline);border-bottom:var(--hairline);
    background:var(--surface);text-align:center;overflow:hidden;
}
.statement .k{
    font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--on-surface-var);
}
.bignum{
    font-family:var(--display);font-weight:800;color:var(--primary);
    font-size:clamp(90px,17vw,280px);line-height:1;letter-spacing:.01em;
    font-variant-numeric:tabular-nums;display:block;margin:8px 0 4px;
}
.statement .s{
    font-family:var(--mono);font-size:12px;color:var(--on-surface-var);letter-spacing:.1em;
}
.statement .s em{font-style:normal;color:var(--on-surface)}

/* ---- STATS / TERMINAL ---- */
.term-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:start;margin-top:clamp(40px,6vh,72px)}
.term{
    border:var(--hairline);background:var(--surface);
    font-family:var(--mono);font-size:12.5px;
}
.term .bar{
    display:flex;justify-content:space-between;padding:12px 20px;
    border-bottom:var(--hairline);font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--on-surface-var);background:var(--cont-hi);
}
.term .bar i{font-style:normal;color:var(--success)}
.trow{
    display:grid;grid-template-columns:1fr auto auto;gap:18px;
    padding:13px 20px;border-bottom:1px solid var(--outline);align-items:baseline;
}
.trow:last-child{border-bottom:none}
.trow .a{color:var(--on-surface)}
.trow .a small{display:block;color:var(--on-surface-var);font-size:10.5px;margin-top:1px}
.trow .b{color:var(--primary);font-weight:500;text-align:right}
.trow .c{font-size:10.5px;text-align:right;min-width:74px}
.trow .c.up{color:var(--success)}.trow .c.dn{color:var(--error)}.trow .c.nt{color:var(--on-surface-var)}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px;padding:14px 20px 16px;border-bottom:1px solid var(--outline)}
.spark i{flex:1;background:var(--primary);opacity:.85;border-radius:1px;min-height:2px;transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.stats-copy p{color:var(--on-surface-var);font-size:clamp(16px,1.4vw,19px);max-width:46ch}
.stats-copy p b{color:var(--on-surface);font-weight:500}
.stats-copy .claims{margin-top:36px;border-top:var(--hairline)}
.claim{
    display:flex;gap:20px;padding:18px 0;border-bottom:var(--hairline);
    font-size:14.5px;color:var(--on-surface-var);align-items:baseline;
}
.claim .m{font-family:var(--mono);font-size:11px;color:var(--primary);letter-spacing:.08em;flex:none;min-width:88px}

/* ---- FAQ ---- */
.faq{margin-top:clamp(40px,6vh,72px);border-top:var(--hairline)}
.faq details{border-bottom:var(--hairline)}
.faq summary{
    list-style:none;cursor:pointer;padding:20px 0;
    display:flex;align-items:baseline;gap:20px;
    color:var(--on-surface);transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
    content:"+";margin-left:auto;padding-left:20px;
    font-family:var(--mono);color:var(--primary);font-size:17px;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--primary)}
.faq summary .q{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    color:var(--primary);flex:none;min-width:88px;
}
.faq details p{color:var(--on-surface-var);font-size:14.5px;max-width:74ch;padding:0 0 22px 108px}
.faq details p em{font-style:normal;color:var(--on-surface)}

/* ---- CTA ---- */
.cta .inner{
    border:var(--hairline);background:var(--surface);
    padding:clamp(60px,10vh,110px) clamp(24px,5vw,80px);
    text-align:center;position:relative;overflow:hidden;
}
.cta .ring{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(760px,120%);aspect-ratio:1;border:1px solid var(--outline);border-radius:50%;
    pointer-events:none;opacity:.6;
}
.cta .ring::before,.cta .ring::after{content:"";position:absolute;border-radius:50%;border:1px dashed var(--outline)}
.cta .ring::before{inset:12%}
.cta .ring::after{inset:26%;border-style:solid;border-color:rgba(235,187,123,.2)}
.cta .cta-mark{
    position:relative;z-index:1;display:block;margin:0 auto 28px;
    height:clamp(56px,8vw,84px);width:auto;
}
.cta h2{position:relative;z-index:1}
.cta p{position:relative;z-index:1;color:var(--on-surface-var);max-width:52ch;margin:20px auto 44px}
.gplay{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:16px;
    background:var(--primary);color:var(--on-primary);
    padding:20px 44px;font-family:var(--mono);font-size:13px;
    letter-spacing:.2em;text-transform:uppercase;font-weight:500;
    transition:letter-spacing .25s ease,background .2s;
}
a.gplay:hover{letter-spacing:.32em;background:#f3ca8f}
.cta .fine{
    position:relative;z-index:1;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.14em;color:var(--on-surface-var);margin-top:26px;text-transform:uppercase;
}

/* ---- FOOTER ---- */
footer{border-top:var(--hairline)}
.foot{
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    padding:26px 0;flex-wrap:wrap;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    color:var(--on-surface-var);text-transform:uppercase;
}
.foot .brand{display:flex;align-items:center;font-size:16px;padding:0}
.foot .brand img{height:20px}
.foot a:hover{color:var(--primary)}
.foot .nav-links{display:flex;gap:28px}

/* ---- CONTENT PAGES (privacy, error) ---- */
.page{padding-top:calc(60px + clamp(56px,9vh,110px))}
.page h1{
    font-family:var(--display);font-weight:800;text-transform:uppercase;
    font-size:clamp(40px,5.6vw,84px);line-height:.94;letter-spacing:.005em;
    margin-bottom:28px;
}
.page h2,.page h3{
    font-family:var(--display);font-weight:800;text-transform:uppercase;
    font-size:clamp(22px,2.4vw,34px);line-height:1.1;margin:36px 0 12px;
}
.page p{color:var(--on-surface-var);max-width:70ch;margin-bottom:14px}
.page p b,.page p strong{color:var(--on-surface);font-weight:500}
.page code{font-family:var(--mono);font-size:13px;color:var(--primary)}
.page .danger{color:var(--error)}
.page ul{color:var(--on-surface-var);max-width:70ch;margin:0 0 18px;padding-left:22px}
.page li{margin-bottom:7px}
.page li::marker{color:var(--primary)}
.page li b,.page li strong{color:var(--on-surface);font-weight:500}
.page .updated{
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--on-surface-var);margin:-14px 0 30px;
}

/* ---- FLOW: one entry -> whole ledger ---- */
.flow{display:grid;grid-template-columns:1fr 90px 1.05fr;align-items:center;margin-top:clamp(40px,6vh,72px)}
.ev-card{border:var(--hairline);background:var(--surface);font-family:var(--mono);font-size:12.5px}
.ev-card .bar{display:flex;justify-content:space-between;padding:12px 20px;border-bottom:var(--hairline);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-surface-var);background:var(--cont-hi)}
.ev-card .bar i{font-style:normal;color:var(--primary)}
.ev-line{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid var(--outline)}
.ev-line .k{color:var(--on-surface-var);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.ev-line .v{color:var(--on-surface);text-align:right}
.ev-line .v.gold{color:var(--primary)}
.ev-save{display:block;text-align:center;padding:14px;background:var(--primary);color:var(--on-primary);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
.ev-stack{display:flex;flex-direction:column;gap:14px}
.ev-series{display:flex;flex-direction:column;gap:8px}
.ev-series-card{
    border:var(--hairline);background:var(--surface);
    font-family:var(--mono);font-size:10.5px;
    display:flex;align-items:center;gap:14px;
    padding:11px 16px;
}
.ev-series-card .si{color:var(--primary);font-weight:600;letter-spacing:.08em;flex:none;min-width:58px}
.ev-series-card .sv{color:var(--on-surface-var);flex:1}
.ev-series-card .sv.gold{color:var(--primary);text-align:right;flex:none}
.flow-conn{align-self:stretch;position:relative}
.flow-conn svg{position:absolute;inset:0;width:100%;height:100%}
.results{display:flex;flex-direction:column;gap:14px}
.res{border:var(--hairline);background:var(--bg);padding:15px 20px;display:flex;gap:18px;align-items:baseline}
.res .rt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--primary);flex:none;min-width:86px;text-transform:uppercase}
.res p{font-size:13.5px;color:var(--on-surface-var);margin:0}
.res p b{color:var(--on-surface);font-weight:500}
.res p i{font-style:normal;font-family:var(--mono);font-size:12px}
.res p i.up{color:var(--success)}.res p i.dn{color:var(--error)}
.flow-note{margin-top:14px;border:var(--hairline);background:var(--surface);padding:16px 22px;display:flex;gap:18px;align-items:baseline}
.flow-note .rt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--primary);flex:none;min-width:86px;text-transform:uppercase}
.flow-note p{font-size:13.5px;color:var(--on-surface-var)}
.flow-note p b{color:var(--on-surface);font-weight:500}

/* ---- SCREENSHOTS ---- */
/* A shot is a .term with a picture in it: same frame, same mono bar, so real
   screenshots sit in the page's vocabulary instead of next to it. Sources are
   720x1603 WebP (see assets/screenshots/convert.py) — always give the <img>
   both attributes, or every strip reflows as it loads. */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,6vh,72px)}
/* Fewer than four across, capped: a 9:20 phone rendered 600px wide would be
   1300px tall and swallow the section it belongs to. Capped strips are centred
   in the wrap — left-aligned they read as a row that lost its last column. */
.shots.two,.shots.three{justify-content:center}
.shots.two{grid-template-columns:repeat(2,minmax(0,360px))}
.shots.three{grid-template-columns:repeat(3,minmax(0,360px))}
.shot{border:var(--hairline);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.shot .bar{
    display:flex;justify-content:space-between;gap:12px;padding:12px 16px;
    border-bottom:var(--hairline);font-family:var(--mono);font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--on-surface-var);
    background:var(--cont-hi);
}
.shot .bar i{font-style:normal;color:var(--primary)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{
    padding:13px 16px;border-top:var(--hairline);
    font-size:13px;color:var(--on-surface-var);
}
.shot figcaption b{color:var(--on-surface);font-weight:500}
/* One shot beside a column of copy: cap it, or a half-width phone renders
   nearly 1200px tall. */
.shot-solo{max-width:360px;margin:0 auto}
.shots-note{
    margin-top:16px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-var);
}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .rv{opacity:1;transform:none}
    html{scroll-behavior:auto}
}

@media (max-width:980px){
    .flow{grid-template-columns:1fr;gap:18px}
    .flow-conn{display:none}
    .ev-series-card{flex-wrap:wrap;gap:6px 14px}
    .row{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
    .row h3{grid-column:2}
    .row p{grid-column:2}
    .row .meta{grid-column:2;text-align:left;margin-top:6px}
    .row.no-meta{grid-template-columns:64px 1fr}
    .datastrip{grid-template-columns:1fr 1fr}
    .ds:nth-child(2){border-right:none}
    .ds:nth-child(1),.ds:nth-child(2){border-bottom:var(--hairline)}
    .term-grid{grid-template-columns:1fr}
    .nav-mid{display:none}
    .faq summary{gap:14px}
    .faq summary .q{min-width:34px}
    .faq details p{padding-left:48px}
    /* A 9:20 phone in a narrow column is unreadable, so the strip becomes one
       swipeable row instead of shrinking. */
    .shots,.shots.two,.shots.three{
        grid-template-columns:none;grid-auto-flow:column;
        grid-auto-columns:minmax(200px,64%);
        overflow-x:auto;scroll-snap-type:x proximity;
        padding-bottom:10px;overscroll-behavior-x:contain;
    }
    .shot{scroll-snap-align:start}
}
@media (max-width:560px){
    .hero-actions{width:100%;flex-direction:column}
    .hact{justify-content:center}
}