/* DeepFunded landing page — only index.html loads this file.
   The design system (fonts, tokens, base, buttons, controls, cards, section scaffolding,
   motion primitives) is theme.css and the shared header/footer are site.css, both imported
   first; this file is the page's own layer: hero, builder and the page sections. */
@import url('theme.css?v=1');
@import url('site.css?v=1');

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:clip;padding:clamp(28px,4vw,56px) 0 clamp(72px,9vw,120px)}
.hero-deco{position:absolute;inset:0;z-index:-1;max-width:100%;overflow:hidden;pointer-events:none}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(48% 56% at 76% 38%,rgba(239,192,123,.085),transparent 70%),
  radial-gradient(60% 70% at 8% -6%,rgba(34,56,104,.42),transparent 72%)}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000 0%,transparent 78%);mask-image:radial-gradient(70% 60% at 70% 40%,#000 0%,transparent 78%)}
.hero-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
/* sized so "Your challenge." (~6.75em wide) always holds one line in its column */
.hero-title{margin:22px 0 26px;font-size:clamp(2.5rem,5.2vw,4.6rem);font-weight:600;line-height:.95;letter-spacing:-.045em}
.hero-title span{display:block}
.hero-sub{max-width:46ch;font-size:clamp(1.03rem,1.25vw,1.16rem);line-height:1.6;color:var(--text-2);text-wrap:pretty}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.hero-facts dt{font-size:.78rem;color:var(--text-3);margin-bottom:4px}
.hero-facts dd{font-family:var(--mono);font-size:.88rem;color:var(--text)}

@media (max-width:1020px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-copy{max-width:640px}
  .hero-title{font-size:clamp(2.4rem,12.4vw,4.6rem)}
}
@media (max-width:520px){
  .hero-facts{grid-template-columns:1fr 1fr;gap:16px 24px}
  .hero-ctas .btn{flex:1 1 100%}
}

/* ── builder ─────────────────────────────────────────────── */
/* the panel itself is .card.card-accent (theme.css) */
.bld{min-width:0}
.bld-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.bld-live{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}
.bld-live i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(239,192,123,.16);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.bld-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.bld-ctls{padding:20px 22px;display:grid;gap:18px}
.bld-out{padding:22px;border-left:1px solid var(--line);background:rgba(4,6,14,.22);display:flex;flex-direction:column}

.ctl-top{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin-bottom:10px;font-size:.84rem;color:var(--text-2)}
.ctl-val{font-family:var(--mono);font-size:.84rem;color:var(--text)}
.ctl-hint{margin-top:8px;font-size:.76rem;color:var(--text-3)}

/* segmented options (.seg), range (.rng) and switch (.sw) are in theme.css */

/* switch row */
.ctl-switch{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sw-label{display:grid;gap:2px;font-size:.84rem;color:var(--text-2);cursor:pointer}
.sw-label small{font-size:.76rem;color:var(--text-3)}

/* readout */
.out-label{font-size:.78rem;color:var(--text-3)}
.out-price{margin:4px 0 2px;font-size:clamp(2.6rem,4.2vw,3.3rem);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.out-title{font-family:var(--mono);font-size:.76rem;color:var(--gold)}
.out-spec{margin:22px 0;display:grid;gap:0;border-top:1px solid var(--line)}
.out-spec div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.out-spec dt{color:var(--text-2)}
.out-spec dd{font-family:var(--mono);color:var(--text)}
.diff{margin-top:auto}
.diff-top{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-2);margin-bottom:10px}
.diff-top b{font-weight:500;color:var(--text)}
.diff-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.diff-bar i{height:4px;border-radius:2px;background:rgba(214,222,240,.1);transition:background-color .3s}
.diff-bar i.on{background:var(--gold)}

/* rails */
.rails-wrap{padding:18px 22px 20px;border-top:1px solid var(--line)}
.rails-top{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-2);margin-bottom:10px}
.rails-note{font-size:.72rem;color:var(--text-3)}
.rails{position:relative;height:124px;overflow:hidden}
.rails svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rails g,.r-band{transition:transform .5s var(--ease-out),opacity .3s}
.r-band{fill:rgba(239,192,123,.05);transform-box:view-box;transform-origin:0 62px}
.r-path{transform-box:view-box;transform-origin:0 62px}
.r-path path{fill:none;stroke:rgba(236,234,229,.55);stroke-width:1.4}
.r-start line{stroke:rgba(214,222,240,.28);stroke-width:1}
.r-target line{stroke:var(--gold);stroke-width:1.4}
.r-floor line{stroke:rgba(214,222,240,.55);stroke-width:1.2;stroke-dasharray:6 5}
.r-daily line{stroke:rgba(214,222,240,.3);stroke-width:1;stroke-dasharray:2 4}
.rl{position:absolute;top:62px;padding:1px 7px;border-radius:5px;background:var(--panel);font-family:var(--mono);font-size:.68rem;line-height:16px;white-space:nowrap;transform:translateY(calc(-50% + var(--dy,0px)));transition:transform .5s var(--ease-out),opacity .3s}
.rl-target{left:0;color:var(--gold)}
.rl-start{left:0;color:var(--text-3)}
.rl-floor{left:0;color:var(--text-2)}
.rl-daily{right:0;color:var(--text-3)}
.rails.no-daily .r-daily,.rails.no-daily .rl-daily{opacity:0}

.bld-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 22px;border-top:1px solid var(--line)}
.bld-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--gold);text-decoration:none}
.bld-note{font-size:.76rem;color:var(--text-3)}

@media (max-width:620px){
  .bld-body{grid-template-columns:minmax(0,1fr)}
  .bld-ctls,.bld-out,.rails-wrap,.bld-foot{padding-inline:16px}
  .bld-head{padding-inline:16px}
  .bld-out{border-left:0;border-top:1px solid var(--line)}
  .diff{margin-top:0}
}

/* ── markets strip ───────────────────────────────────────── */
.markets{border-block:1px solid var(--line);background:var(--bg-2)}
.markets-in{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;padding-block:22px}
.markets p{font-size:.88rem;color:var(--text-3)}
.markets ul{display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--text-2);letter-spacing:.04em}

/* ── sections ────────────────────────────────────────────── */
/* section scaffolding (.sec, .sec-tight, .sec-head, .sec-lede) is in theme.css */

/* ledger of dials */
.ledger{border-top:1px solid var(--line-2)}
.ledger li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr) minmax(150px,auto);gap:8px 32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.lg-n{font-family:var(--mono);font-size:.78rem;color:var(--text-3)}
.ledger h3{font-size:1.3rem;font-weight:500;letter-spacing:-.02em}
.ledger p{max-width:52ch;color:var(--text-2);line-height:1.6}
.lg-r{justify-self:end;font-family:var(--mono);font-size:.86rem;color:var(--gold)}
.ledger-foot{margin-top:28px;font-size:.92rem;color:var(--text-3)}
.ledger-foot a{margin-left:6px;color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:820px){
  .ledger li{grid-template-columns:40px minmax(0,1fr);padding:22px 0}
  .ledger p,.lg-r{grid-column:2}
  .lg-r{justify-self:start;margin-top:4px}
}

/* price curve */
.curve-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.curve-copy h2{margin:18px 0 20px}
.curve-keys{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 32px;margin-top:34px}
.curve-keys dt{font-size:.78rem;color:var(--text-3);margin-bottom:4px}
.curve-keys dd{font-family:var(--mono);font-size:1.02rem;color:var(--text)}
.curve-keys div:nth-child(2) dd{color:var(--gold)}
.curve{min-width:0;padding:22px 22px 16px}   /* the panel itself is .card-quiet (theme.css) */
.curve svg{width:100%;height:280px;overflow:visible}
.curve figcaption{margin-top:10px;font-size:.76rem;color:var(--text-3)}
.c-grid line{stroke:var(--line);stroke-width:1}
.c-axis text{fill:var(--text-3);font-family:var(--mono);font-size:11px}
.c-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;transition:d .5s var(--ease-out)}
.c-area{transition:d .5s var(--ease-out)}
.c-mark{transition:transform .5s var(--ease-out)}
.c-mark line{stroke:var(--gold-line);stroke-dasharray:3 4}
.c-mark circle{fill:var(--bg);stroke:var(--gold);stroke-width:2}
.c-mark rect{fill:var(--gold)}
.c-mark text{fill:var(--on-gold);font-family:var(--mono);font-size:11px;font-weight:600}
@media (max-width:1020px){.curve-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .curve{padding:16px 12px 12px}
  .curve svg{height:220px}
  .curve-keys{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.steps-line{position:absolute;left:0;right:0;top:14px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(239,192,123,.15));transform-origin:left}
.step{position:relative;padding-top:48px}
.step::before{content:'';position:absolute;top:10px;left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--gold)}
.step-n{font-family:var(--mono);font-size:.78rem;color:var(--gold)}
.step h3{margin:10px 0 12px;font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.step p{max-width:36ch;color:var(--text-2);line-height:1.6}
@media (max-width:820px){
  .steps{grid-template-columns:minmax(0,1fr);gap:36px;padding-left:28px}
  .steps-line{left:4px;right:auto;top:10px;bottom:10px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(239,192,123,.15));transform-origin:top}
  .step{padding-top:0}
  .step::before{left:-28px;top:6px}
}

/* index of reading */
.index{border-top:1px solid var(--line-2)}
.index a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 22px;gap:8px 32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ix-t{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500;letter-spacing:-.03em;transition:color .2s}
.ix-d{color:var(--text-2);line-height:1.55}
.ix-a{color:var(--text-3);transition:transform .25s var(--ease-out),color .2s}
@media (hover:hover){
  .index a:hover .ix-t{color:var(--gold)}
  .index a:hover .ix-a{color:var(--gold);transform:translateX(4px)}
}
@media (max-width:640px){
  .index a{grid-template-columns:minmax(0,1fr) 22px;padding:22px 0}
  .ix-d{grid-row:2;grid-column:1}
  .ix-a{grid-row:1;grid-column:2}
}

/* final */
.final{padding-top:0}
.final-in{position:relative;overflow:hidden;padding:clamp(48px,8vw,104px) clamp(20px,6vw,88px);border-radius:24px;border:1px solid var(--line-2);
  background:radial-gradient(70% 90% at 100% 0%,rgba(239,192,123,.1),transparent 60%),linear-gradient(180deg,var(--panel-2),var(--panel))}
.final-in h2{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.045em}
.final-in > p{margin-top:22px;max-width:44ch;color:var(--text-2);font-size:1.06rem}
.final-note{font-family:var(--mono);font-size:.74rem !important;color:var(--text-3) !important;margin-top:28px !important}

/* ── scroll reveals: the [data-reveal] primitive is in theme.css; this is the process
   steps' own choreography (landing.js adds .in to .steps) ── */
.js .steps .step{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 160ms + 200ms)}
.js .steps.in .step{opacity:1;transform:none}
.js .steps-line{transform:scaleX(0);transition:transform 1.2s var(--ease-io) .1s}
.js .steps.in .steps-line{transform:none}
@media (max-width:820px){.js .steps-line{transform:scaleY(0)}}

@media (prefers-reduced-motion:reduce){
  .bld-live i{animation:none}
  .js .steps .step,.js .steps-line{opacity:1;transform:none;transition:none}
  .rails g,.r-band,.rl,.c-line,.c-area,.c-mark{transition:none}
}

/* final block: echo of the builder's rails, parked in the empty right half */
.final-note{max-width:none !important}
.final-in::after{content:'';position:absolute;right:0;top:48%;bottom:16%;width:38%;max-width:100%;pointer-events:none;opacity:.9;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/100% 1.5px no-repeat,
    linear-gradient(rgba(214,222,240,.22),rgba(214,222,240,.22)) 0 50%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(214,222,240,.45) 0 6px,transparent 6px 11px) 0 100%/100% 1.2px no-repeat,
    linear-gradient(180deg,rgba(239,192,123,.07),rgba(239,192,123,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
@media (max-width:820px){.final-in::after{display:none}}