/* QuantX landing page - one warm ember palette, institutional restraint, dark only. */
:root {
  /* Neutral dark. Orange is an ACCENT - buttons, brand, active state, numbers - and nothing else. */
  --bg: #0e0e0f;
  --bg-2: #121214;
  --surface: #161618;
  --surface-2: #1c1c1f;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #ededf0;
  --text-2: #9a9aa2;
  --muted: #6e6e76;
  --ember: #ff7a12;
  --ember-2: #ff9a2e;
  --amber: #f0a830;
  --gold: #e0a645;
  --rust: #b45a2a;
  --apricot: #d99464;
  --crimson: #d8505f;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;   /* numbers only */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* No overflow-x on html or body: `hidden` turns them into scroll containers (breaking
   position:sticky and scrollTo), and `clip` on the root makes Chrome stop scrolling entirely.
   Anything that could overflow sideways is contained on the element itself instead. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--ember-2); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.eyebrow { font: 600 13px var(--sans); letter-spacing: .01em; color: var(--ember-2); }
.mut { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- ambient glow */
.glow { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; }
.glow.a { width: 1000px; height: 440px; top: -300px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--ember) 0%, transparent 70%); opacity: .07; }
.glow.b { display: none; }

/* ---------------------------------------------------------------- header */
.nav { position: sticky; top: 0; z-index: 60; padding: 20px 0; background: rgba(14, 14, 15, .7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s, padding .25s; }
.nav.stuck { border-bottom-color: var(--line); background: rgba(14, 14, 15, .95); padding: 13px 0; }
.nav .wrap { display: flex; align-items: center; }

.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 30px; width: auto; display: block; transition: height .25s; }
.nav.stuck .brand img { height: 26px; }

.nav-links { display: flex; align-items: center; gap: 34px; margin-inline: auto; }
.nav-links a { position: relative; font-size: 14.5px; font-weight: 500; color: var(--text-2); padding: 6px 0;
  transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }
.nav-links a.on { color: var(--text); }

.nav-r { flex: none; display: flex; align-items: center; gap: 16px; }

.burger { display: none; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 10px;
  background: transparent; cursor: pointer; padding: 0; place-items: center; gap: 5px; }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* live pill - the badge, rebuilt in ember */
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  font: 600 14.5px var(--sans); cursor: pointer; white-space: nowrap; transition: transform .16s, filter .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--ember); color: #140b03;
}
.btn.primary:hover { background: var(--ember-2); color: #140b03; }
.btn.ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .04); }
.btn.ghost:hover { border-color: var(--ember-2); color: var(--text); }
.btn .i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.sm { padding: 10px 16px; font-size: 13.5px; border-radius: 10px; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; z-index: 1; padding: 86px 0 0; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); margin: 0; }
.kicker em { font-style: normal; font-weight: 600; color: var(--ember); }
.kicker em::after { content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 10px;
  background: var(--line-2); vertical-align: -1px; }
.hero h1 { font-size: clamp(36px, 5.4vw, 62px); font-weight: 600; max-width: 20ch; margin: 22px auto 0; color: var(--text); }
.hero .lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--text-2); max-width: 60ch; margin: 22px auto 0; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; justify-content: center; }
.hero .note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* the product itself as the hero image - the real dashboard, framed */
.shot { position: relative; margin-top: 64px; perspective: 1800px; perspective-origin: 50% 0%; }
/* The dashboard is embedded directly, no fake browser chrome. It leans back as if photographed
   from slightly below and eases upright as you scroll, but never goes fully flat. */
.shot-frame { position: relative; border-radius: 18px 18px 0 0; overflow: hidden;
  border: 1px solid var(--line-2); border-bottom: none; background: var(--bg);
  transform-origin: 50% 100%;
  transform: rotateX(var(--tilt, 13deg)) scale(var(--tilt-s, .96));
  transition: opacity .8s ease; will-change: transform; }
.shot.rv:not(.in) .shot-frame { opacity: 0; }
.shot-skel { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 54px), var(--bg-2); }
.shot-view { position: relative; height: clamp(340px, 48vw, 600px); }
.shot-view iframe { position: absolute; inset: 0; width: calc(100% + 18px); height: 100%; border: 0;
  pointer-events: none; }   /* overshoot hides the inner scrollbar */
.shot-view::after { content: ""; position: absolute; inset: auto 0 0 0; height: 130px;
  background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
/* phone stand-in for the embedded dashboard, see the 860px block */
.shot-lite { display: none; padding: 22px 20px; }
.shot-lite-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.shot-lite-row span { color: var(--text-2); font-size: 14.5px; }
.shot-lite-row b { font-family: var(--mono); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.shot-lite p { color: var(--muted); font-size: 13px; margin-top: 16px; }
.shot-cta { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 4; }
.shot-cta:hover { transform: translateX(-50%) translateY(-1px); }

.v.up { color: var(--amber); } .v.down { color: var(--crimson); }

/* ---------------------------------------------------------------- sections */
section { position: relative; z-index: 1; padding: 84px 0; }
section.alt { background: rgba(255, 255, 255, .018); border-block: 1px solid var(--line); }
.shead { max-width: 70ch; margin-bottom: 46px; }
.shead h2 { font-size: clamp(27px, 3.4vw, 40px); margin-top: 14px; }
.shead p { color: var(--text-2); margin-top: 16px; font-size: 16.5px; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px;
  transition: border-color .22s, background .22s;
}
.card:hover { border-color: var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.card h3 { font-size: 19px; margin-bottom: 11px; }
.card p { color: var(--text-2); font-size: 15px; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag { font: 500 12.5px var(--sans); padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255, 255, 255, .04); }

.phase { border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: var(--bg-2); position: relative; }
.phase.now { border-color: rgba(255, 154, 46, .42); background: linear-gradient(180deg, rgba(255, 122, 18, .10), var(--bg-2)); }
.phase .st { font: 600 12.5px var(--sans); color: var(--muted); }
.phase.now .st { color: var(--ember-2); }
.phase h3 { font-size: 19px; margin: 12px 0 11px; }
.phase p { color: var(--text-2); font-size: 15px; }
.phase ul { margin: 16px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14.5px; }
.phase li { margin-bottom: 7px; }

/* honest findings */
.finding { border-left: 2px solid var(--rust); padding: 4px 0 4px 24px; margin-bottom: 26px; }
.finding b { font: 600 15.5px var(--sans); color: var(--crimson); letter-spacing: -.01em; }
.finding p { color: var(--text-2); margin-top: 7px; font-size: 15px; }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tbl tbody tr { transition: background .18s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .025); }
.tbl th { font: 600 13px var(--sans); color: var(--muted); }
.tbl td:first-child { color: var(--text); font-weight: 500; }
.tbl td { color: var(--text-2); }
.tbl tr:last-child td { border-bottom: none; }
.frictions { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }

/* ---------------------------------------------------------------- waitlist */
.access { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.form { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 30px; }
.field { margin-bottom: 15px; }
.field label { display: block; font: 600 13px var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(10, 10, 11, .6); color: var(--text); font: 400 15px var(--sans);
}
.field textarea { resize: vertical; min-height: 86px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ember-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.segs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 11px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); transition: .18s;
}
.seg input:checked + span { border-color: var(--ember-2); background: rgba(255, 122, 18, .14); color: var(--text); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--ember-2); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.msg { margin-top: 15px; padding: 12px 15px; border-radius: 10px; font-size: 14.5px; display: none; }
.msg.ok { display: block; background: rgba(255, 176, 46, .13); border: 1px solid rgba(255, 176, 46, .4); color: var(--amber); }
.msg.err { display: block; background: rgba(232, 71, 90, .12); border: 1px solid rgba(232, 71, 90, .4); color: var(--crimson); }

.bullets { list-style: none; padding: 0; margin: 26px 0 0; }
.bullets li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.bullets li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--ember-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- faq */
.faq { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 21px 26px; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ember-2); font-size: 21px; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .ans { padding: 0 26px 23px; color: var(--text-2); font-size: 15.5px; max-width: 85ch; }
.faq .ans p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- disclaimer + footer */
.disclaimer { border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; background: var(--surface); }
.disclaimer h3 { font-size: 15px; margin-bottom: 10px; color: var(--ember); }
.disclaimer p { color: var(--muted); font-size: 13.5px; }
.disclaimer p + p { margin-top: 9px; }

.foot { border-top: 1px solid var(--line); margin-top: 20px; position: relative; z-index: 1; }
.foot-cta { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
  padding: 56px 0 48px; border-bottom: 1px solid var(--line); }
.foot-cta h2 { font-size: clamp(24px, 2.8vw, 33px); }
.foot-cta p { color: var(--text-2); margin-top: 11px; font-size: 15.5px; max-width: 52ch; }
.foot-cta-b { display: flex; gap: 12px; flex-wrap: wrap; }

.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding: 48px 0 44px; }
.foot-brand img { height: 28px; width: auto; display: block; margin-bottom: 16px; }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 38ch; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col h3 { font: 600 13px var(--sans); color: var(--text); margin: 0 0 14px; }
.foot-col a { color: var(--muted); font-size: 14.5px; margin-bottom: 11px; transition: color .18s; }
.foot-col a:hover { color: var(--ember-2); }

.foot-bar { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding: 24px 0 36px; font-size: 13.5px; color: var(--muted); }
.foot-bar .tta b { color: var(--text-2); font-weight: 600; }
.foot-legal { max-width: 56ch; }

/* ================================================================ splash screen */
.splash {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 42%, #18181b 0%, var(--bg) 62%);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), visibility .7s;
}
.splash.done { opacity: 0; visibility: hidden; }
.splash-in { display: grid; justify-items: center; gap: 26px; }
.splash svg.mark { width: clamp(96px, 15vw, 150px); height: auto; overflow: visible; }
.splash .ring { stroke-dasharray: 823; stroke-dashoffset: 823; animation: draw 1.15s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.splash .tail { opacity: 0; transform-origin: 350px 428px; animation: tail .6s cubic-bezier(.34, 1.3, .64, 1) .95s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes tail { from { opacity: 0; transform: translate(-22px, -22px) scale(.82); } to { opacity: 1; transform: none; } }
.splash .word { display: flex; gap: .06em; font: 600 clamp(26px, 4vw, 40px)/1 var(--sans); letter-spacing: -.02em; }
.splash .word span { opacity: 0; transform: translateY(14px); animation: rise .5s cubic-bezier(.2, .7, .3, 1) forwards; }
.splash .word span:last-child { background: linear-gradient(135deg, var(--gold), var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rise { to { opacity: 1; transform: none; } }
.splash .bar { width: 142px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.splash .bar i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold)); animation: load 1.8s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
@keyframes load { to { width: 100%; } }

/* ================================================================ scroll reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; } .rv-d3 { transition-delay: .21s; }
.rv-d4 { transition-delay: .28s; } .rv-d5 { transition-delay: .35s; } .rv-d6 { transition-delay: .42s; }

/* ================================================================ misc motion */
.count { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .splash .ring, .splash .tail, .splash .word span, .splash .bar i { animation-duration: .01s !important; }
  .shot-frame { transform: none !important; }
  .stat-g.bars rect { animation: none; transform: scaleY(1); }
  .stat-g.pulse path { animation: none; stroke-dashoffset: 0; }
}

/* ================================================================ stat cards */
.stats-sec { padding: 70px 0 10px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  background: var(--surface); overflow: hidden; transition: border-color .25s, background .25s;
  /* fixed rows: header, value, graphic, caption. Keeps all four cards on the same baselines. */
  display: grid; grid-template-rows: 26px 46px 56px auto; gap: 14px; align-content: start; }
.stat:hover { border-color: var(--line-2); background: var(--surface-2); }
.stat header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.stat h3 { font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.stat-tag { font: 500 12.5px var(--sans); color: var(--muted); padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-tag.up { color: var(--amber); border-color: rgba(240, 168, 48, .3); }
.stat-tag.down { color: var(--crimson); border-color: rgba(216, 80, 95, .3); }
.stat-tag.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); }
.stat-tag.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none;
  animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stat-v { font-family: var(--mono); font-size: clamp(25px, 2.4vw, 31px); font-weight: 600; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--text); align-self: center; margin: 0; }
.stat-v.up { color: var(--amber); } .stat-v.down { color: var(--crimson); }
.stat p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.stat-g { display: block; width: 100%; height: 56px; margin: 0; color: var(--amber); align-self: center; }
.stat-g.bars rect { fill: currentColor; opacity: .55; transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0); animation: growY .7s cubic-bezier(.2, .7, .3, 1) forwards; }
.stat-g.bars rect.neg { fill: var(--crimson); }
@keyframes growY { to { transform: scaleY(1); } }
.stat-g .line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-g .area { fill: url(#netFill); }
.stat-g.meter { height: 56px; display: flex; align-items: center; }
.stat-g.meter i { display: block; height: 7px; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--rust), var(--ember)); transition: width 1.2s cubic-bezier(.2, .7, .3, 1); }
.stat-g.meter { position: relative; }
.stat-g.meter::before { content: ""; position: absolute; left: 0; right: 0; height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .06); }
.stat-g.meter i { position: relative; }
.stat-g.pulse path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 340; stroke-dashoffset: 340; animation: sweep 3.4s linear infinite; opacity: .85; }
@keyframes sweep { 0% { stroke-dashoffset: 340; } 60%, 100% { stroke-dashoffset: -340; } }

/* ================================================================ job cards with imagery */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--surface); transition: border-color .25s; }
.job:hover { border-color: var(--line-2); }
/* the art has its own near-black ground, so it is faded into the card rather than boxed off */
.job-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.job-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1); }
.job:hover .job-img img { transform: scale(1.04); }
.job-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,22,24,.35) 0%, transparent 22%, transparent 48%, var(--surface) 97%); }
.job-img::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--surface), transparent 14%, transparent 86%, var(--surface)); }
.job-b { padding: 4px 24px 26px; position: relative; z-index: 2; margin-top: -26px; }
.job-b h3 { font-size: 19px; margin-bottom: 10px; }
.job-b p { font-size: 14.5px; color: var(--text-2); }

/* ================================================================ mechanism stepper */
/* The section is pinned while you scroll through it: the scroll position picks the step,
   then the page carries on. Height = one viewport per mechanism. */
.stepper-scroll { position: relative; height: 480vh; }
.stepper { position: sticky; top: 92px; display: grid; grid-template-columns: 340px 1fr; gap: 18px;
  align-items: start; }
.steps { display: grid; gap: 4px; }
.stepper-prog { position: sticky; top: 92px; height: 2px; margin-top: 26px; border-radius: 2px;
  background: rgba(255, 255, 255, .07); overflow: hidden; }
.stepper-prog i { display: block; height: 100%; width: 0; background: var(--ember); border-radius: 2px;
  transition: width .18s linear; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; text-align: left;
  padding: 15px 16px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  cursor: pointer; font: inherit; color: inherit; transition: background .2s, border-color .2s; }
.step:hover { background: rgba(255, 255, 255, .03); }
.step[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); }
.step-n { font: 600 12px var(--mono); color: var(--muted); padding-top: 3px; }
.step[aria-selected="true"] .step-n { color: var(--ember); }
.step-t { display: grid; gap: 3px; min-width: 0; }
.step-t b { font-size: 15.5px; font-weight: 600; color: var(--text-2); }
.step[aria-selected="true"] .step-t b { color: var(--text); }
.step-t i { font-style: normal; font-size: 13px; color: var(--muted); }

.panels { position: relative; }
/* `display: grid` beats the [hidden] attribute's `display: none`, so say it explicitly. */
.panel[hidden] { display: none; }
.panel { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 28px;
  min-height: 300px; animation: panelIn .4s cubic-bezier(.2, .7, .3, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The art is near-black on a near-black card, so it is feathered in rather than framed. */
.panel-fig { margin: -8px 0 0 -8px; overflow: hidden; aspect-ratio: 1;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 78%); }
.panel-fig img { transform: scale(1.1); transition: transform 1.1s cubic-bezier(.2, .7, .3, 1); }
.panel:hover .panel-fig img { transform: scale(1.15); }
.panel-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-b h3 { font-size: 20px; margin-bottom: 11px; }
.panel-b p { color: var(--text-2); font-size: 15px; }

/* ================================================================ cost waterfall */
.falls { display: grid; gap: 10px; margin-top: 26px; }
.fall { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; align-items: center; font-size: 14px; }
.fall span { color: var(--text-2); }
.fall .track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .055); overflow: hidden; }
.fall .track i { display: block; height: 100%; border-radius: 5px; width: 0;
  transition: width 1.1s cubic-bezier(.2, .7, .3, 1); }
.fall .track i.gross { background: var(--text-2); }
.fall .track i.fee { background: var(--ember); }
.fall .track i.net { background: var(--crimson); }
.fall b.down { color: var(--crimson); }
.fall b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }

/* ================================================================ phase timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.timeline::before { content: ""; position: absolute; top: 19px; left: 10%; right: 10%; height: 1px;
  background: var(--line); }
.phase { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 26px;
  background: var(--surface); padding-top: 52px; }
.phase .pin { position: absolute; top: 12px; left: 26px; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); display: grid; place-items: center; }
.phase .pin::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.phase.now { border-color: rgba(255, 122, 18, .35); }
.phase.now .pin { border-color: var(--ember); }
.phase.now .pin::after { background: var(--ember); }
.phase .st { font: 500 12.5px var(--sans); color: var(--muted); }
.phase.now .st { color: var(--ember); font-weight: 600; }
.phase h3 { font-size: 18px; margin: 10px 0 10px; }
.phase p { color: var(--text-2); font-size: 14.5px; }
.phase ul { margin: 16px 0 0; padding: 0; list-style: none; }
.phase li { position: relative; padding-left: 20px; margin-bottom: 9px; color: var(--text-2); font-size: 14px; }
.phase li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line-2); }
.phase.now li::before { background: var(--ember); opacity: .65; }
.phase .prog { margin-top: 18px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.phase .prog i { display: block; height: 100%; width: 34%; background: var(--ember); border-radius: 2px; }



/* ================================================================ cost sources */
.srcbox { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px;
  background: var(--surface); }
.srcbox h3 { font-size: 15px; margin-bottom: 10px; }
.srcbox p { color: var(--text-2); font-size: 14px; }
.srcbox p + p { margin-top: 10px; }
.srcbox b { color: var(--text); font-weight: 600; }
.srcbox a { color: var(--ember-2); }

/* ================================================================================ responsive
   One consolidated layer. Three stops: 1080 (two columns collapse), 860 (phone layout, the live
   dashboard is no longer embedded), 480 (small phones). */

@media (max-width: 1080px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .access { grid-template-columns: 1fr; gap: 40px; }
  .jobs, .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stepper { grid-template-columns: 260px 1fr; }
  .panel { grid-template-columns: 170px 1fr; gap: 22px; }
}

@media (max-width: 940px) {
  .burger { display: grid; }
  .nav .wrap { gap: 12px; }
  /* anchored to the bar itself, so it follows the nav height instead of a hardcoded 68px that
     was wrong as soon as the bar shrank on scroll */
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0; padding: 10px 24px 22px; background: rgba(14, 14, 15, .98);
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s; max-height: calc(100dvh - 100%); overflow-y: auto; }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links a::after { display: none; }
  .nav-links a:last-child { border-bottom: none; }
}

@media (max-width: 860px) {
  .wrap { width: calc(100% - 32px); }
  section { padding: 56px 0; }
  .shead { margin-bottom: 32px; }
  .hero { padding: 48px 0 0; }
  .hero h1 { max-width: none; }
  .hero .lead { font-size: 16px; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 100%; padding: 15px 20px; }       /* full-width, thumb-sized */

  /* The dashboard is a live app. Embedding it on a phone costs data and reads as a postage stamp,
     so the iframe is never created below this width and a compact live summary takes its place. */
  .shot { margin-top: 36px; perspective: none; }
  .shot-frame { transform: none !important; border-radius: 14px; border-bottom: 1px solid var(--line-2); }
  .shot-view { height: auto; }
  .shot-view iframe, .shot-skel { display: none; }
  .shot-view::after { display: none; }
  .shot-lite { display: block; }
  .shot-cta { position: static; transform: none; display: flex; width: 100%; margin-top: 14px; }
  .shot-cta:hover { transform: none; }

  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { grid-template-rows: auto auto 48px auto; gap: 12px; padding: 18px; }
  .stat-g, .stat-g.meter { height: 48px; }

  /* The step list and the panel stack cannot both fit, so the list goes and every panel is shown
     with its own number. Nothing is hidden behind an interaction the thumb has to find. */
  .stepper-scroll { height: auto; }
  .stepper { position: static; grid-template-columns: 1fr; }
  .stepper-prog, .steps { display: none; }
  .panels { display: grid; gap: 12px; }
  .panel, .panel[hidden] { display: grid; grid-template-columns: 1fr; padding: 22px; animation: none; min-height: 0; }
  .panel::before { content: attr(data-n); font: 600 12px var(--mono); color: var(--ember); }
  .panel-fig { max-width: 150px; margin: 0 0 4px -6px; }

  .fall { grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
  .fall .track { grid-column: 1 / -1; order: 3; }

  /* two-column table folds into labelled rows */
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tbl tr:last-child { border-bottom: none; }
  .tbl td { border: none; padding: 0; }
  .tbl td:first-child { font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .tbl caption { padding: 18px 16px 10px !important; }

  .segs { grid-template-columns: 1fr 1fr; }
  .form { padding: 20px; }
  .field input, .field textarea { font-size: 16px; }   /* 16px stops iOS zooming the page on focus */
  .faq summary { padding: 18px 20px; font-size: 15.5px; }
  .faq .ans { padding: 0 20px 20px; font-size: 15px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 32px; }
  .foot-cta { padding: 40px 0 32px; }
  .foot-cta-b { width: 100%; }
  .foot-cta-b .btn { flex: 1; justify-content: center; }
  .srcbox { padding: 18px 20px; }
}

@media (max-width: 480px) {
  .wrap { width: calc(100% - 26px); }
  .hero h1 { font-size: 31px; }
  .kicker { font-size: 12.5px; gap: 7px; }
  .brand img { height: 26px; }
  .nav .btn.sm { padding: 9px 13px; font-size: 13px; }
  .stat-v { font-size: 26px; }
  .panel-fig { max-width: 120px; }
  .segs { grid-template-columns: 1fr; }
}