/* =========================================================================
   X Capital - "live terminal" layer, ported from the original lander.
   Everything here is prefixed x- so it never collides with site.css.
   ========================================================================= */
:root{
  --x-acc:#ffb020; --x-glow:rgba(255,176,32,.55); --x-line:rgba(255,255,255,.08); --x-line2:rgba(255,255,255,.16);
  --x-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --x-ease:cubic-bezier(.2,.7,.2,1);
}
html{ scroll-padding-top:calc(var(--header-h) + 44px); }

/* ---------- scroll progress ---------- */
#x-progress{ position:fixed; top:0; left:0; right:0; height:2px; background:var(--x-acc); transform-origin:0 50%; transform:scaleX(0); z-index:200; box-shadow:0 0 10px var(--x-glow); pointer-events:none; }

/* ---------- header: market status strip ---------- */
.hdr{ height:auto; }
.hdr__in{ height:var(--header-h); }
.x-strip{ height:32px; border-bottom:1px solid var(--x-line); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.x-status{ font-family:var(--x-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-fg-dim); display:flex; align-items:center; gap:14px; white-space:nowrap; }
.x-status .x-sep{ width:1px; height:12px; background:var(--x-line2); }
.x-status .x-mkt{ display:inline-flex; align-items:center; gap:10px; color:var(--c-fg); }
.x-status #x-clock{ font-variant-numeric:tabular-nums; }
@media (max-width:720px){ .x-status .x-hide-s{ display:none; } .x-status{ font-size:10px; gap:10px; } }

/* ---------- pulse dot ---------- */
.x-dot{ position:relative; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--x-acc); box-shadow:0 0 8px var(--x-glow); flex:none; animation:x-breathe 1.8s ease-in-out infinite; }
.x-dot::before,.x-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--x-acc); animation:x-ripple 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
.x-dot::after{ animation-delay:.9s; }
@keyframes x-ripple{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(3.6); opacity:0; } }
@keyframes x-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.65; } }
.x-closed .x-dot{ background:var(--c-fg-faint); box-shadow:none; animation:none; }
.x-closed .x-dot::before,.x-closed .x-dot::after{ display:none; }
@keyframes x-blink{ 0%,70%{ opacity:1; } 71%,100%{ opacity:.15; } }

/* ---------- numbered eyebrows ---------- */
.x-eyebrow{ font-family:var(--x-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-fg-dim); display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.x-eyebrow--live::before{ display:none!important; }
.x-eyebrow::before{ content:""; width:6px; height:6px; background:var(--x-acc); display:inline-block; flex:none; }
.x-dim{ color:var(--c-fg-faint); }
.x-mono-note{ font-family:var(--x-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-fg-faint); margin:18px 0 0; }

/* ---------- corner-bracket frames ---------- */
.x-frame{ position:relative; border:1px solid var(--x-line2); background:var(--c-bg-soft); border-radius:0!important; }
.x-frame > .x-c{ position:absolute; inset:-1px; pointer-events:none; z-index:2; --cc:var(--c-fg); --cw:1px; --cl:14px;
  background:
    linear-gradient(var(--cc),var(--cc)) left top/var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc),var(--cc)) left top/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) right top/var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc),var(--cc)) right top/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) left bottom/var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc),var(--cc)) left bottom/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) right bottom/var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc),var(--cc)) right bottom/var(--cw) var(--cl) no-repeat; }
.x-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--x-line); font-family:var(--x-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-fg-faint); }
.x-bar .x-live{ display:inline-flex; align-items:center; gap:9px; color:var(--c-fg-dim); }
@media (max-width:520px){ .x-bar{ font-size:9.5px; letter-spacing:.08em; padding:9px 12px; } }

/* white inverted cards */
.x-light{ --c-fg:#0b0b0b; --c-fg-dim:#353535; --c-fg-faint:#676767; --x-line:rgba(0,0,0,.1); --x-line2:rgba(0,0,0,.18); --x-acc:#e09400; --x-glow:rgba(224,148,0,.35); --x-ink:#a86a00; background:#f5f5f3!important; color:#0b0b0b; border-color:transparent!important; }
.x-light > .x-c{ --cc:#ff9d00; --cw:3px; --cl:20px; inset:-2px; }

/* ---------- reveal ---------- */
.js .x-rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--x-ease),transform .8s var(--x-ease); }
.js .x-rv.in{ opacity:1; transform:none; }
.js .x-rv.d1{ transition-delay:.08s; } .js .x-rv.d2{ transition-delay:.16s; } .js .x-rv.d3{ transition-delay:.24s; }
.x-count.counting{ color:var(--x-acc)!important; transition:color .6s; }

/* ---------- data tape ---------- */
.x-tape{ border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); overflow:hidden; background:var(--c-bg-soft); -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.x-tape__in{ display:flex; width:max-content; animation:x-tape 60s linear infinite; }
.x-tape:hover .x-tape__in{ animation-play-state:paused; }
.x-tape__set{ display:flex; }
.x-tape span{ font-family:var(--x-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-fg-faint); padding:13px 22px; border-right:1px solid var(--x-line); white-space:nowrap; }
.x-tape b{ font-weight:500; color:var(--c-fg); margin-left:8px; }
.x-tape b.up{ color:var(--x-acc); }
@keyframes x-tape{ to{ transform:translateX(-50%); } }

/* ---------- section 02: engine ---------- */
.x-engine{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.x-eng{ display:flex; flex-direction:column; }
.x-eng .x-viz{ height:230px; border-bottom:1px solid var(--x-line); position:relative; overflow:hidden; }
.x-txt{ padding:24px 22px 28px; }
.x-k{ font-family:var(--x-mono); font-size:11px; letter-spacing:.14em; color:var(--c-fg-faint); text-transform:uppercase; }
.x-txt .h3{ margin:12px 0 10px; }
.x-txt .body{ font-size:15px; }
.x-meter{ padding:18px 18px 10px; display:grid; gap:7px; }
.x-meter-row{ display:grid; grid-template-columns:34px 1fr 30px; gap:10px; align-items:center; font-family:var(--x-mono); font-size:10.5px; color:var(--c-fg-dim); }
.x-meter-bar{ height:8px; background:rgba(255,255,255,.06); position:relative; }
.x-meter-bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--c-fg); transition:width 1.1s var(--x-ease); }
.x-meter-row .v{ text-align:right; color:var(--c-fg-faint); }
.x-meter-row.lead .x-meter-bar i{ background:var(--x-acc); box-shadow:0 0 10px var(--x-glow); }
.x-meter-row.lead .v{ color:var(--x-acc); }
.x-cap{ position:absolute; left:18px; right:18px; bottom:10px; display:flex; justify-content:space-between; font-family:var(--x-mono); font-size:9.5px; letter-spacing:.14em; color:var(--c-fg-faint); }
.x-pairs{ position:absolute; inset:16px 18px 30px; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; align-content:start; }
.x-pair{ display:flex; justify-content:space-between; align-items:center; font-family:var(--x-mono); font-size:10.5px; color:var(--c-fg-dim); padding:5px 0; border-bottom:1px solid var(--x-line); }
.x-pair s{ text-decoration:none; font-size:9px; letter-spacing:.12em; padding:2px 6px; border:1px solid var(--x-line2); color:var(--c-fg-dim); transition:all .4s; }
.x-pair.paused{ color:var(--c-fg-faint); }
.x-pair.paused s{ border-color:var(--x-acc); color:var(--x-acc); background:rgba(255,176,32,.08); }
.x-log{ position:absolute; inset:0; padding:18px; font-family:var(--x-mono); font-size:11.5px; line-height:1.9; color:var(--c-fg-dim); overflow:hidden; white-space:pre; }
.x-log .ok{ color:var(--x-acc); }
.x-log .cur{ display:inline-block; width:7px; height:13px; background:var(--x-acc); vertical-align:-2px; animation:x-blink 1s steps(1) infinite; }

/* selection + position management */
.x-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.x-duo .x-viz{ height:192px; border-bottom:1px solid var(--x-line); position:relative; overflow:hidden; }
.x-grid20{ position:absolute; inset:18px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; align-content:start; }
.x-chip{ font-family:var(--x-mono); font-size:10px; letter-spacing:.04em; color:var(--c-fg-faint); border:1px solid var(--x-line); padding:7px 0 6px; text-align:center; position:relative; transition:color .35s,border-color .35s,background .35s; }
.x-chip.scan{ color:var(--c-fg); border-color:var(--x-line2); background:rgba(255,255,255,.04); }
.x-chip.match{ color:#000; border-color:var(--x-acc); background:var(--x-acc); box-shadow:0 0 16px rgba(255,176,32,.35); }
.x-ladder{ position:absolute; inset:18px 18px 34px; display:grid; gap:9px; align-content:start; }
.x-rung{ display:grid; grid-template-columns:76px 1fr 64px; gap:12px; align-items:center; font-family:var(--x-mono); font-size:10.5px; color:var(--c-fg-faint); letter-spacing:.06em; text-transform:uppercase; }
.x-rung .t{ height:10px; background:rgba(255,255,255,.05); position:relative; overflow:hidden; }
.x-rung .t i{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--c-fg); transform-origin:left; transform:scaleX(0); transition:transform .9s var(--x-ease),background .4s; }
.x-rung.open .t i{ transform:scaleX(1); }
.x-rung.closed .t i{ transform:scaleX(1); background:var(--x-acc); box-shadow:0 0 10px var(--x-glow); }
.x-rung .s{ text-align:right; }
.x-rung.open .s{ color:var(--c-fg-dim); }
.x-rung.closed .s{ color:var(--x-acc); }
.x-specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--x-line); margin-top:18px; }
.x-specs > div{ padding:12px 14px; border-left:1px solid var(--x-line); min-width:0; }
.x-specs > div:first-child{ border-left:0; }
.x-specs .k{ font-family:var(--x-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-fg-faint); }
.x-specs .v{ font-size:16px; font-weight:500; margin-top:4px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--c-fg); }
@media (max-width:980px){ .x-engine,.x-duo{ grid-template-columns:1fr; } }

/* ---------- section 03: risk explainer ---------- */
.x-stress-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:end; margin-bottom:28px; }
.x-stress-head h3{ font-size:clamp(24px,2.6vw,32px); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:0; }
.x-tests{ padding:8px 24px 18px; }
.x-test{ padding:20px 0; border-bottom:1px solid var(--x-line); }
.x-test:last-of-type{ border-bottom:0; }
.x-test-top{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:14px; }
.x-test-top b{ font-weight:500; font-size:16px; }
.x-test-top b span{ font-family:var(--x-mono); font-size:11px; letter-spacing:.1em; color:var(--c-fg-faint); margin-right:10px; font-weight:400; }
.x-test-top em{ font-style:normal; font-family:var(--x-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--x-ink,var(--x-acc)); white-space:nowrap; }
.x-tbar{ display:grid; grid-template-columns:130px 1fr 92px; gap:14px; align-items:center; font-size:13.5px; color:var(--c-fg-dim); margin-top:8px; }
.x-tbar .track{ height:10px; background:rgba(0,0,0,.07); position:relative; overflow:hidden; }
.x-tbar .fill{ position:absolute; inset:0 auto 0 0; width:var(--w); transform-origin:left; transform:scaleX(0); transition:transform 1.3s var(--x-ease); transition-delay:var(--d); }
.x-tbar.off .fill{ background:repeating-linear-gradient(135deg,rgba(0,0,0,.55) 0 6px,rgba(0,0,0,.3) 6px 12px); }
.x-tbar.on .fill{ background:var(--x-acc); box-shadow:0 0 12px var(--x-glow); }
.x-tests.in .x-tbar .fill{ transform:scaleX(1); }
.x-tbar .val{ font-family:var(--x-mono); text-align:right; color:var(--c-fg); }
.x-tbar.on .val{ color:var(--x-ink,var(--x-acc)); }
.x-scale{ display:grid; grid-template-columns:130px 1fr 92px; gap:14px; font-family:var(--x-mono); font-size:10px; color:var(--c-fg-faint); padding-top:6px; }
.x-scale div{ display:flex; justify-content:space-between; }
.x-take{ margin-top:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.x-take .x-frame{ padding:22px 24px; }
.x-take h4{ margin:0 0 8px; font-weight:500; font-size:16px; letter-spacing:-.01em; }
.x-take p{ font-size:14.5px; }
.x-take .big{ font-size:clamp(30px,3vw,40px); font-weight:500; letter-spacing:-.04em; line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.x-controls{ margin-top:56px; }
.x-controls .row__k .h3{ display:flex; gap:12px; align-items:baseline; }
.x-controls .row__k .h3 span{ font-family:var(--x-mono); font-size:11px; letter-spacing:.1em; color:var(--x-acc); font-weight:400; }
@media (max-width:900px){ .x-stress-head,.x-take{ grid-template-columns:1fr; } }
@media (max-width:600px){ .x-tests{ padding:4px 14px 12px; } .x-tbar,.x-scale{ grid-template-columns:78px 1fr 62px; gap:10px; font-size:12px; } .x-test-top{ flex-direction:column; gap:6px; } }

/* ---------- section 04: timeline accordion ---------- */
.x-steps{ padding:6px clamp(16px,3vw,28px); }
.x-step{ position:relative; padding-left:58px; }
.x-step + .x-step::before{ content:""; position:absolute; left:58px; right:0; top:0; height:1px; background:var(--x-line); }
.x-node{ position:absolute; left:0; top:16px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--x-line2); background:var(--c-bg); font-family:var(--x-mono); font-size:12px; letter-spacing:.06em; color:var(--c-fg-faint); z-index:1; transition:color .3s,border-color .3s,background .3s,box-shadow .3s; }
.x-step.done .x-node{ border-color:rgba(255,176,32,.55); color:var(--x-acc); }
.x-step.on .x-node{ border-color:var(--x-acc); color:#000; background:var(--x-acc); box-shadow:0 0 0 4px rgba(255,176,32,.12),0 0 22px rgba(255,176,32,.35); }
.x-sg{ position:absolute; left:19px; top:54px; bottom:-16px; width:1px; background:var(--x-line2); overflow:hidden; }
.x-step:last-of-type .x-sg{ display:none; }
.x-sg i{ position:absolute; left:0; top:0; width:1px; height:0; background:var(--x-acc); box-shadow:0 0 8px var(--x-glow); }
.x-step.done .x-sg i{ height:100%; transition:height .5s var(--x-ease); }
.x-steps.auto .x-step.on .x-sg i{ animation:x-segfill 3.2s linear forwards; }
@keyframes x-segfill{ to{ height:100%; } }
.x-step-head{ appearance:none; width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; min-height:70px; }
.x-step-head b{ display:block; font-weight:500; font-size:18px; letter-spacing:-.01em; color:var(--c-fg-dim); transition:color .3s; }
.x-step-head em{ display:block; font-style:normal; font-family:var(--x-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-fg-faint); margin-top:4px; }
.x-step.on .x-step-head b,.x-step-head:hover b{ color:var(--c-fg); }
.x-pm{ font-family:var(--x-mono); color:var(--c-fg-faint); flex:none; transition:transform .3s var(--x-ease),color .3s; }
.x-step.on .x-pm{ transform:rotate(45deg); color:var(--x-acc); }
.x-step-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--x-ease); }
.x-step.on .x-step-body{ grid-template-rows:1fr; }
.x-step-in{ overflow:hidden; min-height:0; }
.x-step-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px 36px; align-items:start; padding:0 0 22px; opacity:0; transform:translateY(-6px); transition:opacity .4s,transform .4s var(--x-ease); }
.x-step.on .x-step-grid{ opacity:1; transform:none; transition-delay:.12s; }
.x-step-grid .body{ font-size:15.5px; max-width:520px; }
.x-step-grid .x-specs{ margin-top:0; }
@media (max-width:760px){ .x-step-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){
  .x-steps{ padding:2px 14px; } .x-step{ padding-left:48px; } .x-step + .x-step::before{ left:48px; }
  .x-node{ width:32px; height:32px; top:15px; font-size:11px; } .x-sg{ left:16px; top:47px; }
  .x-step-head{ padding:15px 0; min-height:62px; } .x-step-head b{ font-size:16px; } .x-step-head em{ font-size:10px; letter-spacing:.08em; }
  .x-step-grid .body{ font-size:14.5px; } .x-specs > div{ padding:10px; } .x-specs .k{ font-size:9px; letter-spacing:.08em; } .x-specs .v{ font-size:14px; white-space:normal; line-height:1.25; }
}

/* ---------- section 06: testimonials ---------- */
.x-tcar{ position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.x-tcar.dragging{ cursor:grabbing; }
.x-ttrack{ display:flex; gap:18px; width:max-content; will-change:transform; }
.x-tcard{ flex:none; width:320px; margin:0; cursor:zoom-in; background:var(--c-bg-soft); border:1px solid var(--x-line2); position:relative; transition:border-color .25s; }
.x-tcard:hover{ border-color:var(--x-acc); }
.x-tcard .img{ aspect-ratio:1/1.11; overflow:hidden; background:#0a0a0a; }
.x-tcard img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; -webkit-user-drag:none; pointer-events:none; }
.x-tcard figcaption{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-top:1px solid var(--x-line); font-size:14px; font-weight:500; }
.x-tcard figcaption span{ font-family:var(--x-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--x-acc); font-weight:400; }
.x-tnav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:22px; }
.x-tnav .x-mono-note{ margin:0; }
.x-tnav .btns{ display:flex; gap:10px; flex:none; }
.x-tnav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--x-line2); background:transparent; color:var(--c-fg); font-family:var(--x-mono); font-size:16px; cursor:pointer; transition:border-color .2s,color .2s; }
.x-tnav button:hover{ border-color:var(--x-acc); color:var(--x-acc); }
.x-lb{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.92); display:none; place-items:center; padding:24px; cursor:zoom-out; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.x-lb.on{ display:grid; }
.x-lb img{ max-width:min(92vw,900px); max-height:86vh; object-fit:contain; border:1px solid var(--x-line2); }
.x-lb .x{ position:absolute; top:18px; right:22px; font-family:var(--x-mono); font-size:12px; letter-spacing:.14em; color:var(--c-fg-dim); }
@media (max-width:640px){ .x-tcard{ width:250px; } .x-tnav{ flex-direction:column; align-items:flex-start; } }

/* ---------- section 07: pricing ---------- */
.x-paid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.x-card{ padding:30px 26px 32px; }
.x-card .idx{ font-family:var(--x-mono); font-size:11px; letter-spacing:.14em; color:var(--x-ink); text-transform:uppercase; }
.x-card .big{ font-size:56px; font-weight:500; letter-spacing:-.05em; line-height:1; margin-top:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.x-card .h3{ margin:18px 0 10px; color:#0b0b0b; }
.x-card .body{ font-size:15px; }
.x-split{ display:flex; height:6px; margin-top:16px; background:rgba(0,0,0,.08); }
.x-split i{ display:block; height:100%; transform-origin:left; transform:scaleX(0); transition:transform 1.2s var(--x-ease) .3s; }
.in .x-split i,.x-split.in i{ transform:scaleX(1); }
.x-win{ margin-top:28px; font-size:clamp(18px,2vw,22px); font-weight:500; letter-spacing:-.01em; color:var(--c-fg); }
.x-win span{ color:var(--c-fg-faint); }
.x-hl{ color:inherit; font-weight:500; background-image:linear-gradient(transparent 55%,rgba(255,176,32,.55) 55%,rgba(255,176,32,.55) 92%,transparent 92%); background-repeat:no-repeat; background-size:0% 100%; transition:background-size 1s var(--x-ease) .5s; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 2px; }
.in .x-hl{ background-size:100% 100%; }
.lead .x-hl{ color:var(--c-fg); background-image:linear-gradient(transparent 66%,rgba(255,176,32,.45) 66%,rgba(255,176,32,.45) 94%,transparent 94%); }
@media (max-width:900px){ .x-paid{ grid-template-columns:1fr; } }

/* ---------- framed existing panels ---------- */
.x-framed{ border-radius:0!important; position:relative; }

/* ---------- hero without panel; track record toggle panel ---------- */
.hero__grid--solo .hero__copy{ grid-column:1/11; }
.hero__grid--solo .hero__copy .lead{ max-width:640px; }
.perf--wide{ max-width:1040px; }
.x-tr{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.x-tr__main{ min-width:0; padding-bottom:12px; }
.x-tr__dl{ margin:0; border-left:1px solid var(--c-edge); display:flex; flex-direction:column; }
.x-tr__dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 18px; border-bottom:1px solid var(--c-edge); flex:1; }
.x-tr__dl > div:last-child{ border-bottom:0; }
.x-tr__dl dt{ font-size:13.5px; color:var(--c-fg-faint); }
.x-tr__dl dd{ margin:0; font-size:14.5px; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.x-tr__dl dd small{ color:var(--c-fg-faint); font-weight:400; margin-left:4px; }
.x-tr__dl a{ color:var(--c-fg); text-decoration:none; border-bottom:1px solid var(--c-green-dim); }
.perf--wide .perf__stats{ border-bottom:0; }
@media (max-width:860px){ .x-tr{ grid-template-columns:1fr; } .x-tr__dl{ border-left:0; border-top:1px solid var(--c-edge); } .x-tr__dl > div{ padding:12px 16px; } }

/* ---------- headline word rise ---------- */
.x-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.x-w > i{ display:inline-block; font-style:normal; transform:translateY(110%); transition:transform 1s var(--x-ease); transition-delay:calc(var(--i) * 45ms); }
.js .x-wsplit{ opacity:1!important; transform:none!important; }
.x-wsplit.in .x-w > i{ transform:none; }

/* ---------- chart draw-in ---------- */
.js .perf__chart path.x-draw{ transition:stroke-dashoffset 2.2s var(--x-ease); }
.js .perf__chart .x-fade{ opacity:0; transition:opacity 1.2s ease .6s; }
.js .perf__chart.in .x-fade{ opacity:1; }

/* ---------- inline CTA rows ---------- */
.x-ctarow{ margin-top:clamp(40px,5vw,64px); padding:22px 24px; border:1px dashed var(--x-line2); display:flex; justify-content:space-between; align-items:center; gap:20px 32px; flex-wrap:wrap; }
.x-ctarow p{ margin:0; font-size:clamp(16px,1.5vw,19px); font-weight:500; letter-spacing:-.01em; color:var(--c-fg); max-width:560px; }
.x-ctarow .actions{ margin:0; }
@media (max-width:600px){ .x-ctarow{ padding:18px 16px; } .x-ctarow .actions{ width:100%; } }


/* ---------- white cards: shared light palette ---------- */
.x-light{ --c-bg:#f5f5f3; --c-bg-soft:#f5f5f3; --c-bg-raise:#ffffff; --c-edge:rgba(0,0,0,.09); --c-edge-hi:rgba(0,0,0,.16);
  --c-green:#c97f00; --c-green-dim:rgba(201,127,0,.45); --c-red:#c2362b; --c-r1:#6d3fe0; --c-r2:#1a66cc; }
.x-light .h3,.x-light strong,.x-light b{ color:var(--c-fg); }
.x-light svg line[stroke^="rgba(255"]{ stroke:rgba(0,0,0,.1); }
.x-light .tab[aria-selected="true"]{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.06); }
.x-light .calc__dip{ background:rgba(194,54,43,.06); }
.x-light .x-step.on .x-node{ color:#000; }
/* engine cards: white card, dark "screen" inset for the live visual */
.x-light .x-viz{ background:#0b0b0b; margin:12px 12px 0; border:0!important;
  --c-fg:#fafafa; --c-fg-dim:#c2c2c2; --c-fg-faint:#8c8c8c; --x-line:rgba(255,255,255,.08); --x-line2:rgba(255,255,255,.16); --x-acc:#ffb020; --x-glow:rgba(255,176,32,.55); }
.x-light .x-viz .x-chip.match{ color:#000; }

/* ---------- white market strip + data tape ---------- */
.x-strip{ background:#f5f5f3; border-bottom-color:rgba(0,0,0,.1); }
.x-strip .x-status{ color:#353535; } .x-strip .x-mkt{ color:#0b0b0b; } .x-strip .x-sep{ background:rgba(0,0,0,.18); }
.x-strip .x-dot,.x-strip .x-dot::before,.x-strip .x-dot::after{ --x-acc:#e08a00; }
.x-tape{ background:#f5f5f3; border-color:transparent; }
.x-tape span{ color:#676767; border-right-color:rgba(0,0,0,.1); }
.x-tape b{ color:#0b0b0b; } .x-tape b.up{ color:#b06f00; }

/* ---------- hero live graphic ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__grid{ position:relative; }
.hero__grid--solo .hero__copy{ grid-column:1/8; position:relative; z-index:1; }
.x-hero-viz{ position:absolute; top:-70px; bottom:-60px; right:calc(var(--gutter) * -1); width:62%; height:calc(100% + 130px); pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%); mask-image:linear-gradient(90deg,transparent 0,#000 14%); }
@media (max-width:980px){ .hero__grid--solo .hero__copy{ grid-column:1/-1; } .x-hero-viz{ width:100%; right:0; left:0; top:-40px; opacity:.45; -webkit-mask-image:none; mask-image:none; } }

/* hero: taller stage for the graphic, facts sit just above the tape */
@media (min-width:981px){
  .hero{ display:flex; flex-direction:column; min-height:calc(100vh - 105px); min-height:calc(100svh - 105px); padding-bottom:0!important; }
  .hero > .hero__grid{ flex:1; min-height:560px; width:100%; }
  .hero > .wrap{ width:100%; }
  .hero .facts{ margin-top:clamp(40px,5vw,64px)!important; }
  .x-hero-viz{ top:-40px; height:calc(100% + 80px); }
}

@media (min-width:981px){ .hero .facts{ border-bottom:0; margin-bottom:0!important; } .hero > .wrap:last-child{ padding-bottom:0; } }
/* facts row always sits flush on the tape, at every width */
.hero{ padding-bottom:0!important; }
.hero .facts{ border-bottom:0!important; margin-bottom:0!important; }
.x-w{ white-space:nowrap; }

/* hero title: fixed line breaks on phones so it never re-flows while the page loads */
@media (max-width:600px){
  .hero .display#hero-title{ font-size:min(42px,calc((100vw - 40px) / 7.2)); text-wrap:initial; }
  .x-hl1{ display:block; white-space:nowrap; }
}
