/* DeepFunded design system — shared by any page that opts in.
   Brand: gold #EFC07B on near-black navy, Space Grotesk + JetBrains Mono (vendored in fonts/).

   Here: fonts, tokens, reset/base (incl. the film grain), skip link, layout and type
   primitives (.wrap, .kicker, .sec*), buttons, form controls (segmented options, range,
   switch), cards, and the motion primitives (.rise entrance, [data-reveal] scroll reveal).
   Not here: page chrome (header, footer) and page sections — those stay in the page's own
   stylesheet (landing.css for index.html).

   Use: `@import url('theme.css?v=1');` first thing in the page stylesheet, and preload
   fonts/*.woff2 in the page <head> as index.html does.
   JS hooks the primitives expect (landing.js provides them on index.html):
     - [data-reveal] only hides when <html> has .js, and shows when .in is added;
     - .seg's sliding indicator is sized/positioned by script (.is-set/.is-ready) —
       without it the checked option gets a plain wash;
     - .rng reads its filled fraction from --p.

   Not combinable with style.css: the older site stylesheet reuses some of these names
   with different values (--bg --gold --line --text --r-* --wrap; .btn .btn-gold .wrap
   .mono). A page uses one system or the other. */

@font-face{font-family:'Space Grotesk';src:url(fonts/space-grotesk-latin.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');font-weight:400 600;font-display:swap}

:root{
  --bg:#0A0D16; --bg-2:#0D111C; --panel:#111726; --panel-2:#161E31;
  --line:rgba(214,222,240,.075); --line-2:rgba(214,222,240,.14);
  --text:#ECEAE5; --text-2:#A3A9B8; --text-3:#6B7285;
  --gold:#EFC07B; --gold-hi:#F5D3A0; --gold-wash:rgba(239,192,123,.11); --gold-line:rgba(239,192,123,.34); --on-gold:#1C1508;

  --font:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --r-sm:7px; --r-md:10px; --r-lg:18px;
  --wrap:1240px; --gutter:clamp(16px,4vw,48px);
  /* Section rhythm. There is no stepped spacing scale: component spacing is tuned value by
     value (33 distinct px values from 1 to 128), and snapping it to a scale would move
     things. What recurs is the gutter above and this fluid section rhythm. */
  --sec-pad-top:clamp(72px,9vw,128px); --sec-pad-bottom:clamp(64px,8vw,112px);
  --sec-gap:clamp(40px,6vw,72px);   /* .sec-tight top padding; space under a .sec-head */
  --z-header:50; --z-skip:100;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;min-width:0;overflow-x:clip;background:var(--bg);font-family:var(--font);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* film grain: fixed to the viewport, never wider than it. Content sits above it by being
   positioned at z-index:1 — <main> is lifted here; a page lifts its own header/footer. */
body::before{content:'';position:fixed;inset:0;max-width:100%;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:1}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:rgba(239,192,123,.3);color:#fff}
.mono{font-family:var(--mono)}
.gold{color:var(--gold)}

.skip{position:absolute;left:16px;top:-64px;z-index:var(--z-skip);padding:10px 16px;border-radius:var(--r-sm);background:var(--gold);color:var(--on-gold);font-weight:600;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--r-md);border:1px solid transparent;font:600 .98rem/1 var(--font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .2s,border-color .2s,box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn-sm{height:38px;padding:0 16px;font-size:.88rem;border-radius:var(--r-sm)}
.btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,244,226,.55),0 12px 32px -14px rgba(239,192,123,.6)}
.btn-line{color:var(--text);border-color:var(--line-2);background:rgba(214,222,240,.025)}
.btn-arrow{flex:none;transition:transform .22s var(--ease-out)}
@media (hover:hover){
  .btn-gold:hover{background:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(255,244,226,.6),0 16px 40px -14px rgba(239,192,123,.75)}
  .btn-line:hover{border-color:var(--gold-line);background:var(--gold-wash)}
  a:hover > .btn-arrow{transform:translateX(3px)}
}

/* ── cards ───────────────────────────────────────────────── */
/* .card: the raised panel (the landing builder). .card-accent adds the gold hairline on
   its top edge. .card-quiet: the flat, translucent panel (the landing price curve). */
.card{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--panel-2),var(--panel) 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 50px 90px -50px rgba(2,4,12,.95),0 0 0 1px rgba(0,0,0,.25)}
.card-accent::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(239,192,123,.55),transparent)}
.card-quiet{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(22,30,49,.6),rgba(17,23,38,.3))}

/* ── form controls ───────────────────────────────────────── */
/* segmented radios with a sliding indicator */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:3px;border-radius:var(--r-md);background:rgba(3,5,12,.4);border:1px solid var(--line)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{position:relative;z-index:1;display:block;padding:9px 0;text-align:center;border-radius:var(--r-sm);font-size:.86rem;font-weight:500;color:var(--text-2);cursor:pointer;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums;transition:color .2s}
.seg input:checked + label{color:var(--gold-hi)}
.seg input:focus-visible + label{outline:2px solid var(--gold);outline-offset:-2px}
.seg-ind{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:var(--r-sm);background:var(--gold-wash);border:1px solid var(--gold-line)}
.seg.is-ready .seg-ind{transition:transform .34s var(--ease-out)}
.seg:not(.is-set) input:checked + label{background:var(--gold-wash)}
@media (hover:hover){.seg label:hover{color:var(--text)}.seg input:checked + label:hover{color:var(--gold-hi)}}

/* range */
.rng{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.rng::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(214,222,240,.12) var(--p))}
.rng::-moz-range-track{height:4px;border-radius:4px;background:rgba(214,222,240,.12)}
.rng::-moz-range-progress{height:4px;border-radius:4px;background:var(--gold)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--gold-hi);border:4px solid var(--panel-2);box-shadow:0 0 0 1px var(--gold),0 4px 12px rgba(0,0,0,.4);transition:transform .15s var(--ease-out)}
.rng::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--gold-hi);border:4px solid var(--panel-2);box-shadow:0 0 0 1px var(--gold);transition:transform .15s var(--ease-out)}
.rng:active::-webkit-slider-thumb{transform:scale(1.15)}
.rng:active::-moz-range-thumb{transform:scale(1.15)}
.rng:focus-visible{outline:none}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--gold),0 0 0 5px rgba(239,192,123,.3)}

/* switch */
.sw{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border-radius:999px;background:rgba(214,222,240,.12);border:1px solid var(--line-2);cursor:pointer;transition:background-color .2s,border-color .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-2);transition:transform .28s var(--ease-out),background-color .2s}
.sw:checked{background:var(--gold-wash);border-color:var(--gold-line)}
.sw:checked::after{transform:translateX(18px);background:var(--gold)}

/* ── sections ────────────────────────────────────────────── */
.sec{padding:var(--sec-pad-top) 0 var(--sec-pad-bottom)}
.sec-tight{padding-top:var(--sec-gap)}
.sec h2{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:600;line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:var(--sec-gap)}
.sec-head h2{margin-top:18px}
.sec-head-solo{display:block}
.sec-lede{max-width:48ch;font-size:1.04rem;line-height:1.65;color:var(--text-2);text-wrap:pretty}
@media (max-width:820px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* ── motion ──────────────────────────────────────────────── */
/* one-time staged entrance, CSS only so it never waits on JS; stagger with --i */
.rise{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* scroll reveals (only when JS is present to reveal them); stagger with --i */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .seg.is-ready .seg-ind{transition:none}
}