/* instiv2 home.css: landing only parts (hero curves and strip, trust line, money flow, evidence layers, record wall,
   desk of screens, bento, reviews, founder, FAQ, close). */

/* trust band */
.trust { position: relative; z-index: 1; padding: clamp(36px, 6vh, 64px) var(--pad); background: var(--page); color: var(--page-text); border-bottom: 1px solid var(--page-line); }
.trust-nums { list-style: none; margin: 0 auto; padding: 0; max-width: 1400px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.trust-nums li { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--page-line); }
.trust-nums b { font: 600 clamp(26px, 2.6vw, 40px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.trust-nums span { font-size: 13px; color: var(--page-muted); }
.trust-row { max-width: 1400px; margin: 34px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.trust-lbl { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--page-faint); }
.trust-via { font-size: 13px; color: var(--page-muted); }
.trust-sep { width: 1px; height: 26px; margin: 0 8px; background: var(--page-line); }
.trust .logo { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.trust .logo img { height: 22px; width: auto; }
.trust .broker { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.trust .broker img { height: 18px; width: auto; }
.trust .broker b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 700 11px/1 Inter, "Inter Fallback", sans-serif; color: #fff; background: var(--c); }
.trust .broker i { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; color: var(--page-faint); background: var(--page); }
.trust .broker.live i { color: #087553; background: rgba(11,143,98,.1); }
html[data-theme="dark"] .trust .broker.live i { color: var(--gain); background: rgba(61,220,151,.1); }
.lg-dark { display: none; } html[data-theme="dark"] .lg-dark { display: block; } html[data-theme="dark"] .lg-light { display: none; }
.trust-feat { max-width: 1400px; margin: 22px auto 0; font-size: 13px; color: var(--page-muted); }
.trust-feat span { display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px; border-radius: 50%; background: var(--page-faint); }

/* rings */
.ig-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; align-items: center; height: 100%; }
.ig-rings figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 10px; text-align: center; }
.rg-w { position: relative; width: 170px; max-width: 100%; }
.pl-body .ig-rings .rg-w > svg { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1; transform: rotate(-90deg); }
.ig-rings .rg-t { fill: none; stroke: rgba(214,226,255,.08); stroke-width: 9; }
.ig-rings .rg-v { fill: none; stroke: #7FB2FF; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); filter: drop-shadow(0 0 8px rgba(127,178,255,.5)); }
.ig-rings .rg-x .rg-v { stroke: #FF7B7B; filter: drop-shadow(0 0 8px rgba(255,123,123,.45)); }
.pl.is-on .ig-rings .rg-v { stroke-dashoffset: calc(314.16 * (1 - var(--v))); }
.ig-rings .rg-w b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(18px, 2.1vw, 30px)/1 "JetBrains Mono", "JBM Fallback", monospace; }
.ig-rings figcaption { font-size: 13px; color: rgba(226,233,246,.7); max-width: 11.36em; }

/* survivors */
.survivors { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; align-items: center; }
.sv-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.sv-grid i { aspect-ratio: 1; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 10px rgba(61,220,151,.5); transition: background .6s, box-shadow .6s, transform .6s; transition-delay: calc(var(--k) * 22ms); }
.pl.is-on .sv-grid i.gone { background: rgba(255,123,123,.18); box-shadow: none; transform: scale(.6); }
.sv-side { display: grid; gap: 10px; align-content: center; }
.sv-k { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(226,233,246,.55); }
.sv-k i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,123,123,.5); } .sv-k i.on { background: #3DDC97; }

/* human vs system */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; }
.vs-col { padding: 18px; border-radius: 16px; background: rgba(214,226,255,.04); border: 1px solid rgba(214,226,255,.08); }
.vs-col.us { background: rgba(61,220,151,.06); border-color: rgba(61,220,151,.3); }
.vs-h { margin: 0 0 12px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,233,246,.6); }
.vs-r { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 9px 0; font-size: 15px; border-top: 1px solid rgba(214,226,255,.06); opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--k) * 90ms); }
.vs-r::before { flex: none; font: 600 13px/1 "JetBrains Mono", "JBM Fallback", monospace; }
.vs-r.x::before { content: "x"; color: #FF9B9B; } .vs-r.ok::before { content: "+"; color: #3DDC97; }
.pl.is-on .vs-r { opacity: 1; transform: none; }

/* plain vs rupeecase */
.diff { display: grid; align-content: center; gap: 6px; }
.df-h, .df-r { display: grid; grid-template-columns: 22% 1fr 1fr; gap: 14px; align-items: center; }
.df-h span { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,233,246,.5); }
.df-h span:last-child { color: #3DDC97; }
.df-r { padding: 14px 0; border-top: 1px solid rgba(214,226,255,.08); font-size: 15px; opacity: 0; transition: opacity .6s; transition-delay: calc(var(--k) * 110ms); }
.df-r b { font-weight: 600; } .df-r span:nth-child(2) { color: rgba(226,233,246,.55); } .df-r span:nth-child(3) { color: #EAF0FA; }
.pl.is-on .df-r { opacity: 1; }

/* horse race */
.race { display: grid; gap: 3px; align-content: start; }
.rc-row { display: grid; grid-template-columns: 112px 1fr 40px; gap: 10px; align-items: center; height: 15px; font-size: 12px; line-height: 1; transition: transform .7s cubic-bezier(.2,.7,.1,1); }
.rc-row .bar { height: 7px; border-radius: 99px; background: rgba(214,226,255,.07); overflow: hidden; }
.rc-row .bar i { display: block; height: 100%; border-radius: inherit; background: rgba(214,226,255,.3); transition: width .7s cubic-bezier(.2,.7,.1,1), background .4s; }
.rc-row.in .bar i { background: linear-gradient(90deg, rgba(61,220,151,.5), #3DDC97); }
.rc-row.in .nm { color: #EAF0FA; } .rc-row .nm { color: rgba(226,233,246,.5); }
.rc-row .sc { font: 500 12px "JetBrains Mono", "JBM Fallback", monospace; text-align: right; color: rgba(226,233,246,.6); }
.rc-row.swap { animation: rcFlash 1s ease; }
@keyframes rcFlash { 30% { background: rgba(127,178,255,.12); } }
.race-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.race-ctl .btn { min-height: 40px; }
.race-ctl #raceLap { font: 500 12px "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.7); }

/* reviews */
.reviews { position: relative; padding: clamp(80px, 12vh, 140px) 0; overflow: hidden; color: var(--text); background: var(--ink); }
.rv-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) saturate(.7) blur(2px); transform: scale(1.05); }
.rv-head { position: relative; max-width: 1400px; margin: 0 auto 44px; padding: 0 var(--pad); }
.rv-head .sub { color: var(--muted); }
.rv-track { position: relative; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rv-row { flex: none; display: flex; gap: 14px; padding-right: 14px; animation: rvMove 80s linear infinite; }
.rv-track:hover .rv-row, .rv-track:focus .rv-row { animation-play-state: paused; }
@keyframes rvMove { to { transform: translateX(-100%); } }
.rv { flex: none; width: 360px; margin: 0; padding: 22px; border-radius: 20px; background: rgba(10,18,34,.62); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 14px; }
.rv-stars { color: #F5C451; letter-spacing: 2px; font-size: 14px; }
.rv blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(242,245,251,.9); }
.rv figcaption { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; margin-top: auto; }
.rv figcaption i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 600 13px/1 Inter, "Inter Fallback", sans-serif; font-style: normal; background: rgba(127,178,255,.18); color: var(--accent); }
.rv figcaption b { font-size: 14px; } .rv figcaption span { font-size: 12px; color: var(--muted); }

/* founder */
.founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 90px); align-items: center; padding: clamp(70px, 11vh, 130px) var(--pad); background: var(--frame-glow); color: var(--page-text); }
.fd-ph { position: relative; margin: 0; max-width: 560px; justify-self: end; width: 100%; border-radius: 26px; overflow: hidden; cursor: zoom-in; box-shadow: 0 50px 110px -50px rgba(5,8,15,.6), 0 0 0 1px var(--page-line); }
.fd-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.fd-ph figcaption { position: absolute; left: 18px; bottom: 18px; display: grid; padding: 12px 16px; border-radius: 14px; color: #F2F5FB; background: rgba(5,8,15,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fd-ph figcaption b { font-size: 15px; } .fd-ph figcaption span { font-size: 12px; color: rgba(226,233,246,.7); }
.founder .kicker { color: var(--page-muted); } .founder .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.founder .sub { color: var(--page-muted); max-width: 30.28em; }
.fd-stats { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--page-line); }
.fd-stats li { display: grid; gap: 4px; } .fd-stats b { font: 600 clamp(26px, 2.6vw, 38px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.03em; } .fd-stats span { font-size: 13px; color: var(--page-muted); }
.fd-creds { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 0; padding: 0; }
.fd-creds li { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--page-glass); box-shadow: 0 0 0 1px var(--page-line); }
.fd-creds b { font-size: 14px; } .fd-creds span { font-size: 12.5px; color: var(--page-muted); }
.fd-reg { margin: 20px 0 0; font-size: 12.5px; color: var(--page-faint); max-width: 37.85em; }

/* FAQ groups */
.fq-g + .fq-g { margin-top: 26px; }
.fq-gh { margin: 0 0 4px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pg-faq .sub { color: var(--muted); }

@media (max-width: 860px) {
  .trust-nums { grid-template-columns: repeat(2, 1fr); }
  .trust-sep { display: none; }
  .ig-rings { grid-template-columns: 1fr 1fr; gap: 10px 6%; align-content: center; }
  .rg-w { width: 92px; }
  .ig-rings .rg-w b { font-size: 17px; }
  .ig-rings figcaption { font-size: 12px; line-height: 1.3; }
  .survivors { grid-template-columns: 1fr; gap: 14px; align-content: start; }
  .sv-grid { gap: 5px; }
  .sv-side .sv-k:nth-of-type(2), .sv-side .ig-chips:last-child { display: none; }
  .survivors .ig-chips span:nth-child(n+7) { display: none; }
  .sv-grid { max-width: 260px; }
  /* P1: the two columns side by side and compact, so the layer body never runs into the title above or the note below */
  .vs { grid-template-columns: 1fr 1fr; gap: 6px; align-content: safe center; } .vs-col { padding: 9px 10px; } .vs-h { margin-bottom: 6px; letter-spacing: .06em; } .vs-r { font-size: 12px; line-height: 1.3; padding: 4px 0; }
  .df-h, .df-r { grid-template-columns: 1fr 1fr; font-size: 12.5px; gap: 8px; } .df-h span:first-child, .df-r b { grid-column: 1 / -1; } .df-r { padding: 8px 0; }
  /* P1: fifteen rows in 11 px steps fit the phone layer above the Rebalance button (they ran under it) */
  .rc-row { grid-template-columns: 84px 1fr 28px; font-size: 11px; gap: 6px; height: 11px; } .race { gap: .5px; } .rc-row .bar { height: 6px; }
  .race-ctl { margin-top: 4px; gap: 10px; }
  .bx .pl-top { font-size: 12px; letter-spacing: .08em; }
  .rv { width: 290px; }
  .founder { grid-template-columns: 1fr; } .fd-ph { justify-self: stretch; }
  .fd-creds { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rv-row { animation: none; } .rv-row + .rv-row { display: none; } .rv-track { overflow-x: auto; } }

/* engine: compare table, ticks tape, coming next */
.ig-cmp { display: grid; gap: 4px; align-content: center; height: 100%; font-size: 14px; }
.cmp-h, .cmp-r { display: grid; grid-template-columns: 16% repeat(4, 1fr); gap: 10px; align-items: center; }
.cmp-h span { font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(226,233,246,.5); }
.cmp-h .us { color: #3DDC97; }
.cmp-r { padding: 11px 0; border-top: 1px solid rgba(214,226,255,.08); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--k) * 90ms); }
.cmp-r span { color: rgba(226,233,246,.6); } .cmp-r span.us { color: #EAF0FA; font-weight: 600; }
.cmp-r .us { position: relative; } .cmp-r .us::before { content: ""; position: absolute; left: -8px; top: -11px; bottom: -11px; right: -6px; z-index: -1; background: rgba(61,220,151,.06); }
.pl.is-on .cmp-r { opacity: 1; transform: none; }
.ticks { font: 500 12.5px/1 "JetBrains Mono", "JBM Fallback", monospace; overflow: hidden; display: grid; align-content: start; gap: 2px; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.tk { display: grid; grid-template-columns: 92px 64px 1fr 70px 90px 64px; gap: 10px; padding: 7px 10px; border-radius: 8px; color: rgba(226,233,246,.75); }
.tk.is-new { animation: tkIn .5s cubic-bezier(.2,.7,.1,1); }
.tk:nth-child(odd) { background: rgba(214,226,255,.025); }
.tk .b { color: #3DDC97; } .tk .s { color: #FF9B9B; } .tk .f { color: #7FB2FF; }
@keyframes tkIn { from { opacity: .2; background: rgba(127,178,255,.18); } }
.ig-soon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: 100%; align-content: center; }
.ig-soon a { position: relative; display: grid; gap: 8px; align-content: start; min-height: 170px; padding: 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(127,178,255,.10), rgba(127,178,255,.02)); border: 1px solid rgba(214,226,255,.12); transition: transform .4s cubic-bezier(.2,.7,.1,1), border-color .3s; }
.ig-soon a:hover { transform: translateY(-4px); border-color: rgba(127,178,255,.5); }
.ig-soon b { font-size: 18px; } .ig-soon span { font-size: 14px; color: rgba(226,233,246,.65); }
.ig-soon i { position: absolute; right: 14px; top: 14px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; color: #F5C451; background: rgba(245,196,81,.12); }
@media (max-width: 860px) {
  .cmp-h, .cmp-r { grid-template-columns: 20% repeat(4, 1fr); gap: 4px; font-size: 11px; } .cmp-h span { font-size: 11px; } .cmp-r { padding: 7px 0; }
  .tk { grid-template-columns: 78px 38px minmax(0, 1fr) 30px; font-size: 11px; gap: 6px; padding: 7px 8px; } .tk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk span:nth-child(4) { text-align: right; } .tk span:nth-child(5), .tk span:nth-child(6) { display: none; }
  .ig-soon { grid-template-columns: 1fr; gap: 8px; } .ig-soon a { min-height: 0; padding: 14px; }
}

/* who it is for, and the wealth creation engine */
.seg { padding: clamp(70px, 11vh, 130px) var(--pad); background: var(--page); color: var(--page-text); }
.seg-head { max-width: 1400px; margin: 0 auto clamp(30px, 5vh, 54px); }
.seg-head .kicker { color: var(--page-muted); } .seg-head .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.seg-head .sub { color: var(--page-muted); max-width: 32.81em; }
.seg-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; max-width: 1400px; margin: 0 auto; }
.seg-card { position: relative; display: block; min-height: min(62vh, 560px); border-radius: 22px; overflow: hidden; color: var(--text); background: var(--ink); }
.seg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.seg-card:hover img { transform: scale(1.06); }
.seg-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,.92), rgba(5,8,15,.15) 60%); }
.seg-card > div { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 6px; }
.seg-card b { font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -0.03em; }
.seg-card span { font-size: 14px; color: var(--muted); }
.seg-card i { justify-self: start; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; color: #F5C451; background: rgba(245,196,81,.14); }
@media (max-width: 1100px) { .seg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .seg-grid { grid-template-columns: 1fr; } }
/* ===================== pass L2: every remaining data point of the current landing ===================== */
:root { --hk: #2563EB; --hk-gain: #087553; --t-g: #3DDC97; --t-a: #F5C451; --t-r: #FF7B91; }
html[data-theme="dark"] { --hk: #7FB2FF; --hk-gain: #3DDC97; }

/* hero: rotating subline, walkthrough button, status column */
.hero-rot { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; min-height: 20px; font: 500 13px/1.3 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .03em; color: #EAF0FA; }
.hero-rot i { flex: none; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--gain)); box-shadow: 0 0 12px rgba(127,178,255,.7); }
.hero-rot span { display: inline-block; transition: opacity .38s var(--ease), transform .5s var(--ease), filter .38s; }
.hero-rot span.is-out { opacity: 0; transform: translateY(-10px); filter: blur(5px); }
.hero-rot span.is-in { opacity: 0; transform: translateY(10px); filter: blur(5px); transition: none; }
.btn-play svg { width: 20px; height: 20px; flex: none; }
.hm-dial { flex: none; width: 22px; height: 22px; --v: 0; }
.hm-dial > svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.hm-dial circle:first-child { stroke: rgba(214,226,255,.16); }
.hm-dial circle:last-child { stroke: var(--gain); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--v))); transition: stroke-dashoffset 1.4s var(--ease); }

/* lineup KPI strip */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1400px; margin: 0 auto 18px; }
.kpi-t { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px 22px 22px; border-radius: 20px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line), 0 30px 70px -50px rgba(5,8,15,.4); overflow: hidden; }
.kpi-hi { background: linear-gradient(160deg, rgba(37,99,235,.08), rgba(37,99,235,0) 55%), var(--page-2); box-shadow: 0 0 0 1px rgba(37,99,235,.28), 0 30px 70px -50px rgba(5,8,15,.4); }
.kpi-l { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--page-faint); }
.kpi-t > b { font: 600 clamp(30px, 3vw, 46px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kpi-c { font-size: 12.5px; color: var(--page-muted); }
.kpi-dots { display: flex; flex-wrap: wrap; gap: 4px; min-height: 16px; align-items: center; }
.kpi-dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--page-line); transition: background .4s, transform .5s var(--ease); transition-delay: calc(var(--k) * 45ms); }
.kpi.is-on .kpi-dots i { background: var(--hk); transform: scale(1.0); }
.kpi.is-on .kpi-dots i:nth-child(3n+1) { background: var(--hk-gain); }
.kpi-bar, .kpi-pulse, .kpi-range { position: relative; height: 16px; }
.kpi-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 4px; background: var(--page-line); }
.kpi-bar i { position: absolute; left: 0; top: 4px; height: 8px; width: var(--w); border-radius: 4px; background: var(--hk-gain); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.kpi.is-on .kpi-bar i { transform: scaleX(1); }
.kpi-range::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--page-line); }
.kpi-range i { position: absolute; top: 1px; left: var(--x); width: 2px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--hk); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); transition-delay: calc(var(--k) * 50ms); }
.kpi-range i:first-child { background: var(--hk-gain); height: 16px; top: 0; width: 3px; }
.kpi.is-on .kpi-range i { opacity: .85; transform: none; }
.kpi-pulse { display: flex; gap: 5px; align-items: center; }
.kpi-pulse i { width: 26px; height: 8px; border-radius: 3px; background: var(--page-line); }
.kpi.is-on .kpi-pulse i { animation: kpiTrade 3.2s ease-in-out infinite; } .kpi-pulse i:nth-child(2) { animation-delay: .5s !important; } .kpi-pulse i:nth-child(3) { animation-delay: 1s !important; }
@keyframes kpiTrade { 0%, 60%, 100% { background: var(--page-line); } 12%, 30% { background: var(--hk-gain); } }

/* index finder */
.finder { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: var(--text); background: var(--ink); }
.fx-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.85); transform: scale(1.04); }
.finder::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 75% 50%, rgba(5,8,15,.15), rgba(5,8,15,.75)), linear-gradient(to right, rgba(5,8,15,.7), rgba(5,8,15,0) 60%); pointer-events: none; }
.fx-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(0, 600px); gap: clamp(28px, 6vw, 110px); align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: calc(var(--hdr) + 40px) var(--pad) clamp(60px, 10vh, 110px); }
.fx-copy .sub { color: var(--muted); max-width: 20.19em; }
.fx-rp { display: flex; align-items: center; gap: 16px; margin-top: 30px; max-width: 460px; padding: 14px 18px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .3s, transform .4s var(--ease); }
.fx-rp:hover { border-color: rgba(214,226,255,.4); transform: translateY(-2px); }
.fx-rp b { display: block; font-size: 15px; } .fx-rp small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.fx-rp-g { flex: none; width: 64px; }
.fx-rp-g svg { width: 64px; height: 36px; fill: none; stroke-width: 5; stroke-linecap: round; overflow: visible; }
.fx-rp-g path:first-child { stroke: rgba(214,226,255,.14); }
.fx-rp-g .v { stroke: var(--accent); stroke-dasharray: 82; stroke-dashoffset: 30; }
.fx-rp-g circle { fill: #EAF0FA; stroke: none; } .fx-rp-g .nd { stroke: #EAF0FA; stroke-width: 2; }
.qz { position: relative; width: 100%; }
.qz-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; min-height: 40px; }
.qz-back { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-hi); color: var(--text); cursor: pointer; }
.qz-back svg { width: 18px; height: 18px; } .qz-back[hidden] { display: none; }
.qz-prog { flex: 1; display: flex; gap: 6px; }
.qz-prog i { flex: 1; height: 4px; border-radius: 4px; background: rgba(214,226,255,.14); overflow: hidden; position: relative; }
.qz-prog i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gain)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }
.qz-prog i.cur::after { transform: scaleX(.4); } .qz-prog i.on::after { transform: scaleX(1); }
.qz-step { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 9ch; text-align: right; }
.qz-deck { position: relative; height: 430px; margin-top: 34px; perspective: 1400px; }
.qz-card { --d: 0; position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 30px); border-radius: 26px; overflow: hidden; color: #EAF0FA;
  background: radial-gradient(90% 60% at 10% 0%, rgba(127,178,255,.14), rgba(127,178,255,0) 60%), rgba(8,13,26,.82); border: 1px solid rgba(214,226,255,.14);
  box-shadow: 0 50px 120px -50px rgba(0,0,0,.8); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  transform-origin: 50% 0; transform: translate3d(0, calc(var(--d) * -20px), calc(var(--d) * -50px)) scale(calc(1 - var(--d) * .05)); opacity: calc(1 - var(--d) * .28);
  transition: transform .7s var(--ease), opacity .6s var(--ease), filter .6s; pointer-events: none; }
.qz-card:not(.is-top) { filter: brightness(.75); }
.qz-card.is-top { pointer-events: auto; }
.qz-card[style*="--d: 3"], .qz-card[style*="--d:3"] { opacity: 0; }
.qz-card.is-gone { transform: translate3d(-18%, 26px, 80px) rotate(-7deg); opacity: 0; filter: blur(6px); }
.qz-n { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,233,246,.55); }
.qz-q { margin: 12px 0 18px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 650; line-height: 1.1; letter-spacing: -0.03em; }
.qz-opts { display: grid; gap: 10px; }
.qz-opt { display: grid; grid-template-columns: 46px 1fr 20px; gap: 14px; align-items: center; width: 100%; padding: 13px 16px; border-radius: 18px; text-align: left; cursor: pointer; color: inherit; background: rgba(214,226,255,.04); border: 1px solid rgba(214,226,255,.1); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.qz-opt:hover, .qz-opt:focus-visible { background: rgba(127,178,255,.09); border-color: rgba(127,178,255,.45); transform: translateX(4px); }
.qz-opt.is-picked { background: rgba(61,220,151,.1); border-color: rgba(61,220,151,.6); }
.qz-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--accent); background: linear-gradient(150deg, rgba(127,178,255,.22), rgba(61,220,151,.08)); box-shadow: inset 0 0 0 1px rgba(214,226,255,.12); }
.qz-ic svg { width: 22px; height: 22px; }
.qz-opt.is-picked .qz-ic { color: var(--gain); }
.qz-l b { display: block; font-size: 16px; font-weight: 600; } .qz-l small { display: block; margin-top: 2px; font-size: 13px; color: rgba(226,233,246,.6); }
.qz-go svg { width: 18px; height: 18px; color: rgba(226,233,246,.45); transition: transform .3s; } .qz-opt:hover .qz-go svg { transform: translateX(3px); color: var(--accent); }
.qz-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px rgba(61,220,151,.18); }
.qz-res .qz-n { color: var(--gain); }
.qz-name { margin: 10px 0 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.qz-why { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(226,233,246,.72); }
.qz-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.qz-tiles > div { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 14px; background: rgba(214,226,255,.05); border: 1px solid rgba(214,226,255,.1); }
.qz-tiles b { font: 600 18px/1.1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.02em; } .qz-tiles span { font-size: 11.5px; color: rgba(226,233,246,.55); }
.qz-tiles > div:first-child b { color: var(--gain); }
.qz-tiles b.qz-risk { font: 600 14px/1.25 Inter, "Inter Fallback", sans-serif; }
.qz-meter { display: flex; gap: 3px; } .qz-meter i { flex: 1; height: 5px; border-radius: 3px; background: rgba(214,226,255,.12); } .qz-meter i.on { background: linear-gradient(90deg, #F5C451, #FF9B6B); }
.qz-cap { margin: 12px 0 0; font: 400 11px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.5); }
.qz-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }
.qz-res.is-top .qz-name, .qz-res.is-top .qz-why, .qz-res.is-top .qz-tiles > div { animation: qzIn .7s var(--ease) both; }
.qz-res.is-top .qz-why { animation-delay: .08s; } .qz-res.is-top .qz-tiles > div:nth-child(2) { animation-delay: .14s; } .qz-res.is-top .qz-tiles > div:nth-child(3) { animation-delay: .2s; } .qz-res.is-top .qz-tiles > div:nth-child(4) { animation-delay: .26s; }
@keyframes qzIn { from { opacity: 0; transform: translateY(12px); } }

/* the curriculum */
.lp { padding: clamp(70px, 11vh, 130px) var(--pad); background: var(--page); color: var(--page-text); }
.lp-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.lp-shelf { display: flex; align-items: flex-end; gap: 4px; height: 168px; padding: 0 6px 6px; border-bottom: 3px solid var(--page-line); }
.sp { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: calc(var(--m) * 2.4px + 16px); height: calc(78px + var(--m) * 8px); padding: 7px 0 8px; border-radius: 4px 4px 2px 2px; color: #fff;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.12) 40%, rgba(0,0,0,.12)), hsl(calc(212 + var(--k) * 11) 62% 46%);
  transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: calc(var(--k) * 60ms); }
.lp-shelf.is-on .sp { transform: none; }
.sp b { font: 600 11px/1 "JetBrains Mono", "JBM Fallback", monospace; }
.sp em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .9; }
.sp-soon { background: transparent; color: var(--page-faint); box-shadow: inset 0 0 0 1px var(--page-line); border: 1px dashed var(--page-faint); }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr .62fr; gap: 14px; max-width: 1400px; margin: 0 auto; }
.lp-card { position: relative; display: block; min-height: min(66vh, 600px); border-radius: 22px; overflow: hidden; color: var(--text); background: var(--ink); }
.lp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lp-card:hover img { transform: scale(1.06); }
.lp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,.95) 10%, rgba(5,8,15,.35) 60%, rgba(5,8,15,.1)); }
.lp-in { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 10px; }
.lp-n { font: 600 56px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(242,245,251,.7); }
.lp-in > b { font-size: clamp(21px, 1.8vw, 27px); line-height: 1.1; letter-spacing: -0.03em; }
.lp-d { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lp-meta { display: flex; align-items: center; gap: 10px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; color: #EAF0FA; }
.lp-dots { display: flex; gap: 3px; } .lp-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--gain); box-shadow: 0 0 8px rgba(61,220,151,.5); }
.lp-min { height: 3px; border-radius: 3px; background: rgba(214,226,255,.15); overflow: hidden; } .lp-min i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--accent), var(--gain)); }
.lp-more { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px; border-radius: 22px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); transition: transform .4s var(--ease); }
.lp-more:hover { transform: translateY(-4px); }
.lp-more-n { font: 600 clamp(56px, 6vw, 88px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.06em; color: var(--hk); margin-bottom: auto; }
.lp-more b { font-size: 19px; letter-spacing: -0.02em; } .lp-more > span:not([class]) { font-size: 14px; color: var(--page-muted); }
.lp-arrow { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 12px; border-radius: 50%; background: var(--page-text); color: var(--page); } .lp-arrow svg { width: 20px; height: 20px; }

/* The Tanmay Edge */
.edge { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: var(--text); background: var(--ink); }
.edge-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: brightness(.38) saturate(.8); }
.edge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(5,8,15,.85), rgba(5,8,15,.3) 70%); pointer-events: none; }
.edge-in { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 90px); align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: calc(var(--hdr) + 40px) var(--pad) clamp(60px, 10vh, 110px); }
.edge-copy .sub { color: var(--muted); max-width: 27.76em; font-size: 15px; }
.edge-dials { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 6px; }
.edge-dials > div { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.edge-dials svg { width: 72px; height: 72px; flex: none; }
.edge-dials span { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); max-width: 12.62em; }
.edge-dials b { font: 600 26px/1 "JetBrains Mono", "JBM Fallback", monospace; color: #F2F5FB; letter-spacing: -0.03em; }
.edge-dials small { font-size: 12px; }
.clock .cf { fill: rgba(214,226,255,.05); stroke: rgba(214,226,255,.25); stroke-width: 1.5; }
.clock .tks line { stroke: rgba(226,233,246,.5); stroke-width: 2; stroke-linecap: round; }
.clock .hh, .clock .mh { stroke-linecap: round; transform-box: view-box; transform-origin: 50px 50px; transition: transform 2s var(--ease) .2s; }
.clock .hh { stroke: #F2F5FB; stroke-width: 4; } .clock .mh { stroke: var(--accent); stroke-width: 2.5; }
.clock circle:last-child { fill: var(--accent); }
.edge-dials.is-on .hh { transform: rotate(255deg); } .edge-dials.is-on .mh { transform: rotate(900deg); }
.hitd { --v: 0; } .hitd svg { transform: rotate(-90deg); fill: none; stroke-width: 8; }
.hitd circle:first-child { stroke: rgba(214,226,255,.12); }
.hitd circle:last-child { stroke: var(--gain); stroke-linecap: round; stroke-dasharray: 263.9; stroke-dashoffset: 263.9; transition: stroke-dashoffset 1.6s var(--ease) .3s; filter: drop-shadow(0 0 6px rgba(61,220,151,.5)); }
.edge-dials.is-on .hitd circle:last-child { stroke-dashoffset: calc(263.9 * (1 - var(--v))); }
.listen { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.listen a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #EAF0FA; background: var(--glass-hi); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.listen a:hover { border-color: rgba(214,226,255,.4); background: rgba(255,255,255,.1); }
.listen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.edge-list { padding: clamp(16px, 2vw, 24px); border-radius: 26px; background: rgba(8,13,26,.62); border: 1px solid rgba(214,226,255,.12); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 60px 140px -60px rgba(0,0,0,.9); }
.ed-head { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 14px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,233,246,.55); }
.ed-head a { position: relative; color: var(--accent); }
.ed-head a::after { content: ""; position: absolute; inset: -17px -6px; }
.ed-rows { display: grid; gap: 8px; }
.ed-empty { margin: 0; padding: 30px; text-align: center; color: var(--faint); font-size: 13px; }
.ed-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 132px; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(214,226,255,.035); border: 1px solid rgba(214,226,255,.08); transition: border-color .3s, transform .4s var(--ease), background .3s; animation: edIn .7s var(--ease) both; animation-delay: calc(var(--k) * 90ms); }
.ed-row:hover { transform: translateX(4px); border-color: rgba(214,226,255,.3); background: rgba(214,226,255,.06); }
@keyframes edIn { from { opacity: 0; transform: translateY(10px); } }
.ed-ep { font: 600 14px/1.2 "JetBrains Mono", "JBM Fallback", monospace; } .ed-ep small { display: block; margin-top: 3px; font: 400 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.5); }
.ed-t { font-size: 14px; line-height: 1.4; color: rgba(242,245,251,.88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-g { display: grid; justify-items: end; gap: 7px; }
.ed-segs { display: flex; gap: 3px; }
.ed-segs i { position: relative; width: 18px; height: 7px; border-radius: 3px; background: rgba(214,226,255,.1); overflow: hidden; }
.ed-segs i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); background: var(--tc); }
.ed-g b { padding: 4px 9px; border-radius: 99px; font: 600 12px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); }
.t-g { --tc: var(--t-g); } .t-a { --tc: var(--t-a); } .t-r { --tc: var(--t-r); }
.ed-note { margin: 14px 4px 2px; font: 400 11px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.6); }
@media (max-width: 860px) { .ed-note, .ed-head { font-size: 12px; } }

/* footer: newsletter and the landing columns */
.nlb { position: relative; max-width: 1400px; margin: 0 auto 50px; border-radius: 28px; overflow: hidden; color: var(--text); background: var(--ink); box-shadow: 0 50px 110px -60px rgba(5,8,15,.6); }
.nlb-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 58%; filter: brightness(.42) saturate(.9); }
.nlb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,8,15,.85), rgba(5,8,15,.35)); }
.nlb-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(30px, 5vw, 64px); }
.nlb .kicker { color: var(--muted); }
.nlb-sub { margin: 14px 0 0; max-width: 29.02em; font-size: 15px; color: var(--muted); }
.nl { position: relative; }
.nl-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.nl-field { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 99px; background: rgba(10,18,34,.6); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color .3s, box-shadow .3s; }
.nl-field:focus-within { border-color: rgba(127,178,255,.6); box-shadow: 0 0 0 4px rgba(127,178,255,.12); }
.nl-field svg { flex: none; width: 20px; height: 20px; fill: none; stroke: rgba(226,233,246,.6); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nl-field input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: #F2F5FB; font: 400 16px Inter, "Inter Fallback", sans-serif; }
.nl-field input::placeholder { color: rgba(226,233,246,.42); }
.nl-field .btn { flex: none; }
.nl-field .btn:disabled { opacity: .75; cursor: default; }
.nl-msg { min-height: 20px; margin: 10px 0 0 18px; font-size: 13.5px; color: var(--muted); }
.nl.is-ok .nl-msg { color: var(--gain); } .nl.is-err .nl-msg { color: #FF9B9B; }
.nl.is-ok .nl-field { border-color: rgba(61,220,151,.55); }
.nl-fine { margin: 8px 0 0 18px; font-size: 12px; line-height: 1.5; color: var(--faint); } .nl-fine a { text-decoration: underline; }
.fcols { display: grid; grid-template-columns: .9fr .9fr .9fr 1.3fr; gap: 28px; max-width: 1400px; margin: 0 auto 40px; padding-bottom: 36px; border-bottom: 1px solid var(--page-line); }
.fcol-h { margin: 0 0 14px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--page-faint); }
.listen-f { margin: 0; }
.listen-f a { color: var(--page-text); background: var(--page-2); border-color: var(--page-line); }
.listen-f a:hover { background: var(--page-2); border-color: var(--page-faint); }
.fcol-mail { font-size: 16px; font-weight: 600; } .fcol-mail:hover { text-decoration: underline; }
.fcol-t { margin: 8px 0 0; font-size: 13px; color: var(--page-muted); }
.fcol-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fcol-links a { padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ent { display: grid; gap: 4px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ent b { font-size: 14px; } .ent i { font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--page-faint); }
.fcol-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--page-muted); }
.fcol-ul a { text-decoration: underline; }

@media (max-width: 1100px) {
  .kpi { grid-template-columns: 1fr 1fr; }
  .lp-grid { grid-template-columns: 1fr 1fr; } .lp-more { min-height: 220px; }
  .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hide-s { display: none !important; }
  .hero-rot { font-size: 12px; margin-top: 12px; }
  .copy-hero .ctas { flex-wrap: nowrap; gap: 10px; }
  .copy-hero .ctas .btn-lg { min-height: 50px; padding: 0 18px; font-size: 15px; }
  .kpi { gap: 10px; } .kpi-t { padding: 16px; gap: 8px; } .kpi-t > b { font-size: 28px; } .kpi-c { font-size: 12px; }
  .kpi-dots i { width: 8px; height: 8px; } .kpi-pulse i { width: 18px; }
  .fx-in, .edge-in { grid-template-columns: 1fr; padding-top: calc(var(--hdr) + 28px); }
  .fx-rp { margin-top: 20px; }
  .qz-deck { height: 520px; }
  .qz-q { font-size: 21px; margin: 10px 0 14px; }
  .qz-opt { grid-template-columns: 40px 1fr 16px; gap: 12px; padding: 11px 12px; }
  .qz-ic { width: 40px; height: 40px; border-radius: 12px; }
  .qz-l b { font-size: 15px; } .qz-l small { font-size: 12px; }
  .qz-tiles { grid-template-columns: 1fr 1fr; }
  .qz-why { font-size: 13px; }
  .lp-head { grid-template-columns: 1fr; }
  .lp-shelf { height: 132px; max-width: 100%; overflow: hidden; }
  .sp { width: calc(var(--m) * 1.4px + 14px); height: calc(64px + var(--m) * 6px); }
  .lp-grid { grid-template-columns: 1fr; } .lp-card { min-height: 64vh; } .lp-more { min-height: 0; }
  .lp-more-n { font-size: 52px; }
  .edge-dials > div { flex: 1 1 100%; } .edge-dials svg { width: 60px; height: 60px; }
  .ed-row { grid-template-columns: 62px minmax(0, 1fr); gap: 4px 12px; padding: 12px; }
  .ed-g { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 10px; }
  .ed-t { font-size: 13px; }
  .nlb { border-radius: 22px; } .nlb-in { grid-template-columns: 1fr; padding: 26px 20px; }
  .nl-field { padding-left: 14px; } .nl-field svg { display: none; } .nl-field .btn { padding: 0 16px; }
  .nl-msg, .nl-fine { margin-left: 4px; }
  .fcols { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rot span, .qz-card, .sp, .kpi-dots i, .kpi-range i, .kpi-bar i { transition: none !important; }
  .ed-row, .kpi-pulse i, .qz-res .qz-name, .qz-res .qz-why, .qz-res .qz-tiles > div { animation: none !important; }
  .sp { transform: none; } .kpi-range i { opacity: .85; transform: none; } .kpi-bar i { transform: none; }
}
/* sections that set position: relative for their photo plate must still pin inside the lay stack */
.lay-stack > .lay.finder, .lay-stack > .lay.reel, .lay-stack > .lay.reviews, .lay-stack > .lay.edge, .lay-stack > .lay.pg-faq { position: sticky; }
@media (prefers-reduced-motion: reduce) { .lay-stack > .lay.finder, .lay-stack > .lay.reel, .lay-stack > .lay.reviews, .lay-stack > .lay.edge, .lay-stack > .lay.pg-faq { position: relative; } }
/* walkthrough button in How it works, reviews from social.js */
.pnl-wt { margin-top: 18px; gap: 10px; background: var(--page-text); color: var(--page); }
.pnl-wt:hover { transform: translateY(-2px); }
.pnl-wt svg { width: 20px; height: 20px; }
.rv-soc { position: relative; }
@media (max-width: 860px) {
  .pnl-wt { display: none; }
  .edge-dials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .edge-dials > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .edge-dials svg { width: 52px; height: 52px; } .edge-dials b { font-size: 22px; }
}

/* hero over the night skyline: a soft shade behind the copy so the lights never fight the words */
#layer-hero .scrim { background: linear-gradient(to right, rgba(5,8,15,.78) 0%, rgba(5,8,15,.42) 38%, rgba(5,8,15,.05) 66%), linear-gradient(to top, rgba(5,8,15,.92) 0%, rgba(5,8,15,.38) 42%, rgba(5,8,15,.12) 78%, rgba(5,8,15,.4) 100%); }
@media (max-width: 860px) { #layer-hero .scrim { background: linear-gradient(to top, rgba(5,8,15,.95) 0%, rgba(5,8,15,.72) 45%, rgba(5,8,15,.25) 75%, rgba(5,8,15,.5) 100%); } }

/* ===================== pass D1: rhythm, hero, money flow, desk of screens, bento ===================== */

/* ---------- hero: one statement, one primary action, one status strip ---------- */
#layer-hero .copy-hero { bottom: clamp(84px, 13vh, 140px); }
.h-hero { margin: 0; max-width: 8.76em; font-weight: 700; font-size: clamp(42px, 6.3vw, 104px); line-height: .95; letter-spacing: -0.05em; text-wrap: balance;
  color: #F2F5FB; background: linear-gradient(180deg, #FFFFFF 35%, rgba(214,226,255,.74)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hx-sub { max-width: 27.76em; }
.hx-ctas { align-items: center; gap: 12px 26px; margin-top: 30px; }
.hx-wt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: rgba(242,245,251,.88); font-size: 15px; font-weight: 600; cursor: pointer; }
.hx-wt svg { width: 30px; height: 30px; flex: none; transition: transform .4s var(--ease); }
.hx-wt span { padding-bottom: 2px; border-bottom: 1px solid rgba(242,245,251,.32); transition: border-color .3s; }
.hx-wt:hover { color: #fff; } .hx-wt:hover svg { transform: scale(1.08); } .hx-wt:hover span { border-color: #fff; }
.hx-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0; margin: 0; padding: 0 var(--pad); list-style: none; min-height: 52px;
  font-size: 12.5px; line-height: 1.35; color: rgba(226,233,246,.8); background: rgba(5,8,15,.42); border-top: 1px solid rgba(214,226,255,.12); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.hx-strip li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 14px 22px 14px 0; margin-right: 22px; border-right: 1px solid rgba(214,226,255,.12); }
.hx-strip li:last-child { border-right: 0; margin-right: 0; }
.hx-strip a { display: flex; align-items: center; gap: 9px; transition: color .25s; } .hx-strip a:hover { color: #fff; }
.hx-strip b { color: #F2F5FB; font-weight: 600; }
.hx-strip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #EAF0FA; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hx-strip .hm-dial { width: 20px; height: 20px; } .hx-strip .hm-dial > svg { width: 100%; height: 100%; stroke-width: 4; }
.hx-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px rgba(61,220,151,.16); animation: hxPulse 2.4s ease-in-out infinite; }
@keyframes hxPulse { 50% { box-shadow: 0 0 0 7px rgba(61,220,151,.04); } }
.hx-cue { position: absolute; z-index: 3; right: var(--pad); bottom: 74px; display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,233,246,.62); }
.hx-cue i { position: relative; width: 1px; height: 30px; overflow: hidden; background: rgba(214,226,255,.2); }
.hx-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #F2F5FB; animation: hxCue 2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes hxCue { to { transform: translateY(350%); } }
.hx-cue:hover { color: #F2F5FB; }
#peel .lens-hint { bottom: auto; top: calc(var(--hdr) + 16px); }

/* the 18 model curves behind the headline (home.js); drawn once, then still */
.hx-curves { position: absolute; z-index: 2; left: 30%; right: var(--pad); top: calc(var(--hdr) + 8vh); bottom: 40vh; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
.hx-curves > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-gl { stroke: rgba(214,226,255,.07); stroke-width: 1; }
.hx-l { fill: none; stroke: rgba(226,233,246,.26); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45,.05,.15,1); transition-delay: calc(.3s + var(--k, 0) * 60ms); }
.hx-hi { stroke: url(#hxg); stroke-width: 2.6; }
.hx-b { fill: none; stroke: rgba(226,233,246,.5); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: 0; transition: opacity 1s 2s; }
.hx-dot { opacity: 0; transition: opacity .6s 3.2s; } .hx-dot circle { fill: #3DDC97; }
.hx-dot .hx-ring { fill: none; stroke: #3DDC97; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hxRing 2.6s ease-out infinite; }
@keyframes hxRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(2); opacity: 0; } }
.hx-cap { position: absolute; right: 0; top: 100%; max-width: 52ch; margin: 12px 0 0; text-align: right; font: 400 12px/1.45 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.62); opacity: 0; transition: opacity .8s 2.6s; }
.hx-cap b { color: #F2F5FB; font-weight: 600; }
.hx-curves.is-in .hx-l { stroke-dashoffset: 0; }
.hx-curves.is-in .hx-b, .hx-curves.is-in .hx-dot, .hx-curves.is-in .hx-cap { opacity: 1; }

/* spec lists on the product plates */
.specs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 540px; }
.specs li { display: grid; gap: 3px; align-content: start; padding: 11px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.specs b { font: 600 14px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.01em; }
.specs span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
@media (min-width: 861px) {
  .layer-framed .specs li { background: var(--page-glass); border-color: var(--page-line); box-shadow: 0 10px 30px rgba(11,18,32,.06); }
  .layer-framed .specs span { color: var(--page-muted); }
}

/* ---------- trust line ---------- */
.trust { padding: 16px var(--pad); }
.trust-row { margin: 0 auto; justify-content: center; gap: 8px 12px; }
.trust .logo, .trust .broker { height: 40px; }

/* ---------- custody as a money flow ---------- */
.flow { position: relative; overflow: hidden; padding: clamp(80px, 13vh, 150px) var(--pad); color: var(--text); background: radial-gradient(80% 70% at 72% 45%, #0F1F3D 0%, #05080F 72%); }
.flow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(214,226,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(214,226,255,.04) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 70% 50%, #000, transparent); }
.flow-in { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.45fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.flow .kicker { color: var(--muted); }
.flow .h-l { font-size: clamp(36px, 4.4vw, 68px); max-width: 8.09em; }
.flow-copy .sub { color: var(--muted); max-width: 25.24em; }
.flow-key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 28px 0 0; padding: 0; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.flow-key li { display: flex; align-items: center; gap: 8px; }
.flow-key i { width: 10px; height: 10px; border-radius: 50%; }
.k-m { background: #3DDC97; } .k-o { background: #7FB2FF; } .k-s { background: #F2F5FB; box-shadow: 0 0 10px rgba(242,245,251,.8); }
.flow-fig { position: relative; margin: 0; aspect-ratio: 1000 / 470; }
.fl-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl-lane { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; opacity: .55; }
.ln-m, .ln-s { stroke: #3DDC97; } .ln-o, .ln-f { stroke: #7FB2FF; } .ln-g { stroke: rgba(242,245,251,.75); }
.flow.is-on .fl-lane, .flow-fig.is-on .fl-lane { animation: igDash 1.2s linear infinite; }
.fl-never { fill: none; stroke: rgba(255,123,123,.65); stroke-width: 1.6; stroke-dasharray: 3 7; }
.fl-x circle { fill: #1A0E16; stroke: rgba(255,123,123,.85); stroke-width: 1.5; } .fl-x path { stroke: #FF9B9B; stroke-width: 2.2; stroke-linecap: round; }
.fl-node rect { fill: rgba(13,22,40,.94); stroke: rgba(214,226,255,.24); stroke-width: 1.2; transition: stroke .35s, fill .35s; }
.fl-node.hi rect { stroke: rgba(127,178,255,.85); fill: rgba(20,38,72,.96); }
.fl-node.hi.is-ping rect { stroke: #F2F5FB; fill: rgba(34,58,104,.98); }
.fl-node.ok rect { stroke: rgba(61,220,151,.8); }
.fl-t { fill: #EAF0FA; font: 600 18px Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing: -0.01em; }
.fl-s { fill: rgba(226,233,246,.66); font: 500 13.5px "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .04em; }
.fl-lb { font: 500 13.5px "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .05em; }
.lb-m { fill: rgba(61,220,151,.9); } .lb-o { fill: rgba(127,178,255,.95); } .lb-s { fill: rgba(242,245,251,.72); } .lb-x { fill: #FF9B9B; }
.fl-p-coin circle { fill: #3DDC97; } .fl-p-coin text { fill: #04281A; font: 700 14px Inter, "Inter Fallback", sans-serif; }
.fl-p-share rect { fill: rgba(61,220,151,.15); stroke: #3DDC97; stroke-width: 2; }
.fl-p-ord circle { fill: #7FB2FF; } .fl-p-fill circle { fill: none; stroke: #7FB2FF; stroke-width: 2; }
.fl-p-sig circle:last-child { fill: #FFFFFF; }

/* ---------- the two screen panels: shorter scroll per layer, steady titles, clear of the dock ---------- */
@media (prefers-reduced-motion: no-preference) {
  #how.pnl, #why.pnl { height: calc(100svh + (var(--n, 4) - 1) * 64svh); }
}
#how .pnl-steps li small, #why .pnl-steps li small { max-height: none; opacity: .8; transition: opacity .4s; }
#how .pnl-steps li.is-on small, #why .pnl-steps li.is-on small { opacity: 1; }
#how .pnl-steps li, #why .pnl-steps li { padding: 10px 14px; }
@media (min-width: 861px) {
  #how .pnl-sticky, #why .pnl-sticky { padding-bottom: 92px; }
  #how .pnl-screen, #why .pnl-screen { max-height: calc(100svh - var(--hdr) - 3vh - 120px); }
}
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pl-chips span { padding: 6px 10px; border-radius: 99px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.82); border: 1px solid rgba(214,226,255,.16); background: rgba(214,226,255,.04); }

/* ---------- the record wall ---------- */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; max-width: 1400px; margin: 0 auto 18px; align-items: start; }
.rec-grid .record-curve { margin: 0; }
.rec-rot { display: grid; gap: 12px; min-width: 0; }
.rec-rot-h { margin: 4px 0 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 650; letter-spacing: -0.02em; }

/* ---------- the desk of screens (reel.js plays the recordings) ---------- */
#reel { padding: clamp(80px, 12vh, 140px) var(--pad) clamp(90px, 11vh, 130px); color: var(--text); background: radial-gradient(70% 60% at 50% 0%, #10213F 0%, #05080F 70%); }
#reel .kicker { color: var(--muted); } #reel .kicker .num { color: var(--text); border-color: var(--line); }
#reel .reel-head h2 { max-width: 10.11em; }
#reel .sec-sub { color: var(--muted); }
.mx { --mxp: 0; max-width: 1400px; margin: 0 auto; }
.mx-stage { position: relative; max-width: 1240px; margin: 0 auto; padding-bottom: 2%; }
#reel .laptop { width: 64%; margin: 0 auto; z-index: 2; }
.mx-mon { position: absolute; left: 0; top: 6%; z-index: 1; width: 33%; margin: 0; padding: 1.1%; border-radius: 14px; background: linear-gradient(160deg, #1b2438, #070b14);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1);
  transform: perspective(1600px) rotateY(20deg) scale(.94); transform-origin: right center; translate: 0 calc(var(--mxp) * 34px); opacity: .92; }
.mx-mon .scr { aspect-ratio: 16 / 10; border-radius: 6px; }
.mx-mon figcaption, .handset-x figcaption { position: absolute; left: 10px; bottom: -30px; font: 500 13px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#reel .handset-x { width: 16%; right: 5%; bottom: -6%; z-index: 3; translate: 0 calc(var(--mxp) * -60px); }
#reel .scr video { background: #060A14; }
#reel .reel-tabs { display: flex; width: fit-content; max-width: 100%; margin: 46px auto 0; border-color: var(--line); background: rgba(10,18,34,.55);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 22px; }
@media (min-width: 1100px) { #reel .reel-tabs { -webkit-mask-image: none; mask-image: none; padding-right: 4px; } }
#reel .reel-tabs button { color: var(--muted); }
#reel .reel-tabs button[aria-pressed="true"] { background: #F2F5FB; color: #05080F; }
.mx-feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px auto 0; padding: 0; }
.mx-feats li { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 18px; background: rgba(214,226,255,.04); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.mx-feats li:has(button) { padding: 0; }
.mx-feats button { all: unset; box-sizing: border-box; display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; padding: 18px 20px; border-radius: 18px; cursor: pointer; }
.mx-feats button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-feats li:has(button[aria-pressed="true"]) { border-color: rgba(127,178,255,.6); background: rgba(127,178,255,.08); }
.mx-feats li:hover { border-color: rgba(214,226,255,.32); }
.mx-feats b { font-size: 16px; letter-spacing: -0.01em; }
.mx-feats span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mx-pledge svg { width: 120px; height: 32px; margin-bottom: 4px; overflow: visible; }
.mx-pledge rect { fill: rgba(13,22,40,.9); stroke: rgba(214,226,255,.3); }
.mx-pledge rect:nth-of-type(2) { stroke: rgba(127,178,255,.85); } .mx-pledge rect:nth-of-type(3) { stroke: rgba(61,220,151,.8); }
#reel.lay .mx-pledge .ig-flow { animation: igDash 1.2s linear infinite; }
.mx-shots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; max-width: 1400px; margin: 34px auto 0; }
.mx-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #060A14; box-shadow: 0 0 0 1px rgba(214,226,255,.12); transition: transform .4s var(--ease), box-shadow .3s; }
.mx-shot:hover, .mx-shot:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(127,178,255,.6), 0 24px 50px -24px rgba(0,0,0,.8); }
.mx-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.mx-phone img { object-position: top center; }
.mx-shot figcaption { padding: 8px 10px 9px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #EAF0FA; }
.mx-shot figcaption b { margin-right: 6px; font: 500 12px "JetBrains Mono", "JBM Fallback", monospace; color: var(--accent); }
.mx-note { max-width: 1400px; margin: 14px auto 0; font: 400 12px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: var(--faint); }

/* ---------- the journey, as a bento of live tiles ---------- */
.bx-sec { padding: clamp(70px, 11vh, 130px) var(--pad); background: var(--page); color: var(--page-text); }
.bx-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 90px); align-items: end; }
.bx-head .sub { margin: 0; }
.bx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; }
.bx { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(18px, 1.8vw, 26px); border-radius: 24px; overflow: hidden; color: #EAF0FA;
  background: radial-gradient(90% 70% at 15% 0%, rgba(127,178,255,.12), rgba(127,178,255,0) 60%), #070C18; box-shadow: 0 0 0 1px rgba(214,226,255,.10), 0 40px 90px -50px rgba(5,8,15,.6); }
.bx-cmp { grid-column: span 4; } .bx-val { grid-column: span 2; } .bx-inv, .bx-ml, .bx-tk { grid-column: span 2; } .bx-soon { grid-column: span 6; }
.bx-t { margin: 0; font-size: clamp(19px, 1.6vw, 25px); font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; }
.bx .pl-note { margin: auto 0 0; padding-top: 4px; font-size: 12px; }
.bx-body { position: relative; flex: 1; min-height: 210px; }
.bx-ml .bx-body > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bx-media { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #060A14; }
.bx-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bx .ig-cmp { height: auto; font-size: 14px; }
.bx .ticks { height: 252px; }
.bx-soon .ig-soon { height: auto; }
.bx-soon .ig-soon a { min-height: 0; }
.bx .iv2 { --iv2-surface: #070C18; --iv2-surface-2: #0D1628; --iv2-fg: #F2F5FB; --iv2-muted: rgba(226,233,246,.66); --iv2-faint: rgba(226,233,246,.42); --iv2-line: rgba(214,226,255,.14); --iv2-grid: rgba(214,226,255,.06); --iv2-strat: #7FB2FF; --iv2-gain: #3DDC97; --iv2-gain-soft: rgba(61,220,151,.10); --iv2-loss: #FF7B7B; --iv2-loss-soft: rgba(255,123,123,.08); --iv2-shadow: none; }
.bx .iv2 .iv2-head { padding-left: 0; padding-right: 0; } .bx .iv2 .iv2-cap { padding-left: 0; }
.bx.is-on .cmp-r { opacity: 1; transform: none; }
.bx.is-on .ig-flow { animation: igDash 1.2s linear infinite; }

/* ---------- reviews: the proof, once ---------- */
.rv-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.rv-nums { list-style: none; display: grid; grid-template-columns: 1fr 1fr; align-self: end; gap: 10px; margin: 0; padding: 0; }
.rv-nums li { display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: rgba(10,18,34,.55); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.rv-nums b { font: 600 clamp(26px, 2.6vw, 40px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.04em; color: #F2F5FB; }
.rv-nums span { font-size: 13px; color: var(--muted); }
#reviews .soc-mq-head { display: none; }

/* ---------- founder: one block, with the QC Alpha line ---------- */
.fd-quote { margin: 20px 0 0; padding-left: 16px; max-width: 19.79em; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; border-left: 3px solid var(--accent); }

/* ---------- FAQ: eight, and where the rest live ---------- */
.fq-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.fq-more p { flex-basis: 100%; margin: 0 0 4px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fq-more a { padding: 9px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #EAF0FA; background: rgba(255,255,255,.07); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.fq-more a:hover { border-color: rgba(214,226,255,.4); background: rgba(255,255,255,.12); }

/* ---------- the close ---------- */
.close { padding: clamp(80px, 12vh, 140px) var(--pad); background: var(--frame-glow); color: var(--page-text); }
.close-in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.close .h-xl { font-size: clamp(44px, 5.8vw, 92px); }
.close .kicker { color: var(--page-muted); }
.close .sub { color: var(--page-muted); max-width: 25.24em; }
.close .btn-solid { background: var(--page-text); color: var(--page); }
.close .btn-ghost { color: var(--page-text); border-color: var(--page-line); background: var(--page-glass); }
.close-pics { position: relative; aspect-ratio: 5 / 4; }
.close-pics figure { position: absolute; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--page-line), 0 50px 100px -50px rgba(5,8,15,.55); }
.close-pics img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.close-pics figure:hover img { transform: scale(1.04); }
.cp-a { inset: 0 16% 16% 0; }
.cp-b { right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; outline: 6px solid var(--page-2); }
.close-pics figcaption { position: absolute; left: 14px; top: 12px; padding: 7px 12px; border-radius: 999px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .04em; color: #0B1220; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- tablet ---------- */
.lu-more { display: none; }
@media (max-width: 1100px) {
  .mx-feats { grid-template-columns: 1fr 1fr; }
  .mx-shots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bx-cmp, .bx-soon { grid-column: span 6; } .bx-val, .bx-inv, .bx-ml, .bx-tk { grid-column: span 3; }
  .hx-strip .hx-learn { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  #layer-hero .copy-hero { bottom: 70px; }
  .h-hero { font-size: clamp(40px, 11vw, 54px); max-width: 7.42em; }
  .hx-sub { font-size: 15.5px; margin-top: 14px; }
  .hero-rot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hx-ctas { margin-top: 20px; gap: 6px 18px; }
  .hx-ctas .btn-lg { min-height: 50px; padding: 0 24px; font-size: 15.5px; }
  .hx-wt { font-size: 14px; } .hx-wt svg { width: 26px; height: 26px; }
  .hx-strip { min-height: 46px; font-size: 12px; }
  .hx-strip li { padding: 12px 0; margin: 0; border: 0; }
  .hx-strip .hx-live, .hx-strip .hx-own, .hx-strip .hx-learn { display: none; }
  .hx-cue { display: none; }
  .hx-curves { left: 0; right: 0; top: calc(var(--hdr) + 14px); bottom: auto; height: 27svh; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 40%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 40%); }
  .hx-curves > svg { left: var(--pad); right: var(--pad); width: auto; }
  .hx-cap { left: var(--pad); right: var(--pad); max-width: none; text-align: left; margin-top: 8px; }
  .hx-l { stroke-width: 1; }
  .specs { gap: 6px; margin-top: 18px; }
  .specs li { padding: 8px 10px; border-radius: 12px; }
  .specs b { font-size: 13px; } .specs span { font-size: 12px; }
  .trust { padding: 12px 0; }
  .trust-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .trust-row::-webkit-scrollbar { display: none; }
  .trust-row > * { flex: none; }
  .flow { padding: 76px var(--pad) 64px; }
  .flow-in { grid-template-columns: 1fr; gap: 26px; }
  .flow .h-l { font-size: 36px; }
  .flow-key { margin-top: 18px; }
  .flow-fig { aspect-ratio: 360 / 560; max-width: 440px; width: 100%; margin: 0 auto; }
  #how .pnl-sticky, #why .pnl-sticky { padding-bottom: 76px; }
  #how .pnl-screen, #why .pnl-screen { max-height: calc(100svh - var(--hdr) - 250px); }
  .pnl-steps { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .pl-chips { display: none; }
  .rec-grid { grid-template-columns: 1fr; }
  /* carousels instead of tall stacks */
  .snap { display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scroll-padding: 0 var(--pad); }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { scroll-snap-align: start; grid-column: auto !important; }
  .seg-card { min-height: 58svh; }
  .lp-card { min-height: 60svh; } .lp-more { min-height: 0; }
  .seg-head { margin-bottom: 22px; }
  /* the desk of screens */
  #reel { padding-top: 76px; padding-bottom: 80px; }
  .mx-mon { display: none; }
  #reel .laptop { width: 86%; margin: 0; }
  #reel .handset-x { width: 27%; right: 0; bottom: -8%; }
  #reel .reel-tabs { margin-top: 34px; }
  .mx-feats { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .mx-feats li, .mx-feats button { padding: 12px 13px; }
  .mx-feats li:has(button) { padding: 0; }
  .mx-feats b { font-size: 14.5px; } .mx-feats span { font-size: 12.5px; }
  .mx-pledge svg { display: none; }
  .mx-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 4px var(--pad) 6px; scroll-snap-type: x proximity; }
  .mx-shots::-webkit-scrollbar { display: none; }
  .mx-shot { scroll-snap-align: start; }
  /* bento as a carousel */
  .bx-head { grid-template-columns: 1fr; gap: 14px; }
  .bx-grid.snap { grid-auto-columns: 86%; align-items: stretch; }
  .bx { border-radius: 20px; }
  .bx .ig-cmp { font-size: 12px; } .bx .cmp-h span { font-size: 11px; letter-spacing: 0; }
  /* P1: on phones each row's label takes its own line, so the four columns get the full width and never collide */
  .bx .cmp-h, .bx .cmp-r { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
  .bx .cmp-h > span:first-child { display: none; }
  .bx .cmp-r > b { grid-column: 1 / -1; font: 600 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,233,246,.62); }
  .bx .cmp-r { padding: 9px 0; font-size: 12px; }
  .bx .cmp-r .us::before { top: -4px; bottom: -9px; left: -5px; right: -4px; }
  .bx .ticks { height: 260px; }
  .bx-soon .ig-soon { grid-template-columns: 1fr; }
  .bx-body { min-height: 180px; }
  /* reviews, founder, close */
  .rv-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }
  .rv-nums li { padding: 12px 14px; } .rv-nums b { font-size: 24px; } .rv-nums span { font-size: 12px; }
  .founder { gap: 22px; padding-top: 76px; padding-bottom: 76px; }
  .fd-ph img { aspect-ratio: 4 / 3; object-position: 50% 25%; }
  .fd-quote { font-size: 19px; margin-top: 14px; }
  .fd-creds { grid-template-columns: 1fr 1fr; gap: 8px; } .fd-creds li { padding: 10px 12px; } .fd-creds b { font-size: 13px; } .fd-creds span { font-size: 12px; }
  .fd-stats { gap: 18px; margin-top: 18px; padding-top: 16px; } .fd-stats b { font-size: 24px; }
  .close-in { grid-template-columns: 1fr; gap: 30px; }
  .close .h-xl { font-size: 44px; }
  .close-pics { aspect-ratio: 4 / 3; }
  .cp-b figcaption { display: none; }
  #peel .copy-left, #peel .copy-right { bottom: 84px; }
  #layer-hero .kicker { letter-spacing: .07em; }
  .peel-progress { display: none; }
  .rg-w { width: 70px; } .ig-rings { gap: 6px 6%; align-content: safe center; } .ig-rings figure { gap: 6px; }
  .fq-more { margin-top: 20px; }
  .fq-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .listen a { height: 44px; }
  .pg-faq-in { gap: 18px; }
  /* the strategy wall: one row per strategy, nothing under 12px, nothing cut */
  #record .iv2-lu-grid { grid-template-columns: 1fr; gap: 6px; }
  #record .iv2-card { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 4px; padding: 10px 12px; }
  #record .iv2-card .rk { grid-row: 1; grid-column: 1; font-size: 12px; }
  #record .iv2-card .nm { grid-row: 1; grid-column: 2; font-size: 15px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
  #record .iv2-card .nm small { display: none; }
  #record .iv2-card .spk { grid-row: 2; grid-column: 2; }
  #record .iv2-card svg { height: 22px; }
  #record .iv2-card .fg { grid-row: 1 / 3; grid-column: 3; display: grid; grid-template-columns: auto; gap: 6px; justify-items: end; }
  #record .iv2-card .fg span { flex-direction: row; align-items: baseline; gap: 5px; font-size: 14px; }
  #record .iv2-card .fg span em { font-size: 12px; letter-spacing: .04em; }
  #record .iv2-card .fg span.s { display: none; }
  #record .iv2-lu-sort button { font-size: 12px; }
  #record .record-lineup:not(.is-all) .iv2-card:nth-child(n+7) { display: none; }
  .lu-more { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 48px; margin-top: 10px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font-size: 15px; font-weight: 600; cursor: pointer; }
  #record .iv2-lu-ovlab { font-size: 12px; }
  #record .kpi-l { font-size: 12px; }
}
@media (max-width: 700px) { .flow-fig { aspect-ratio: 360 / 560; } }

@media (prefers-reduced-motion: reduce) {
  .hx-l, .hx-b, .hx-dot, .hx-cap { transition: none !important; }
  .hx-dot .hx-ring, .hx-cue i::after, .hx-live i, .fl-lane { animation: none !important; }
  .mx-mon, #reel .handset-x { translate: none; }
}