/* Option Trident, concept F (5 Nov 2026): the Thalamus-style layout from concept E, re-themed in
   blue, with every product image cropped to one subject at one scale (2x captures shown at half
   size), set in one window frame, layered with live HTML callouts, and moved by scroll.
   Type: Newsreader (for Tiempos Headline) + DM Sans (for Maax New). */
:root {
  --ink: #0b2a4f;
  --ink-2: #44608a;
  --sky: #cfe2fb;
  --sky-2: #bad4f8;
  --accent: #2d63d8;
  --indigo: #3a3f78;
  --navy-deep: #071c3b;
  --navy: #0e3466;
  --card-dark: #10396f;
  --slate: #4a5f80;
  --pale: #c9d8ee;
  --page: #eef3fa;
  --white: #ffffff;
  --line: rgba(11, 42, 79, 0.12);
  --profit: #0f9466;
  --loss: #c8344a;
  --serif: "Newsreader", "Tiempos Headline", Georgia, serif;
  --sans: "DM Sans", "Maax New", Arial, sans-serif;
  --r-pill: 1000px;
  --r-card: 22px;
  --r-section: 48px;
  --container: 1280px;
  --shadow-window: 0 1px 1px rgba(11,42,79,.04), 0 6px 14px -6px rgba(11,42,79,.12), 0 30px 60px -24px rgba(11,42,79,.28);
  --shadow-float: 0 2px 4px rgba(11,42,79,.05), 0 18px 40px -14px rgba(11,42,79,.32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.3; color: var(--ink);
  background: linear-gradient(180deg, #f3f7fd 0%, #edf2fa 45%, #e9eff9 100%);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.container { max-width: var(--container); margin: 0 auto; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }

/* Scroll progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; background: transparent; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #6aa1ff, var(--accent)); }

/* Announcement bar */
.announce { background: var(--navy-deep); color: #fff; text-align: center; font-weight: 700; font-size: 15px; padding: 9px 16px; }
.announce a { color: #9cc3ff; font-weight: 400; text-underline-offset: 3px; }

/* Floating pill nav */
.nav-wrap { position: sticky; top: 14px; z-index: 60; padding: 16px 0 0; }
.nav { display: flex; align-items: center; gap: 24px; padding: 12px 12px 12px 30px; background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-radius: 46px; box-shadow: 0 14px 40px -18px rgba(11,42,79,.32), 0 0 0 1px rgba(11,42,79,.04); transition: box-shadow .3s, background .3s; }
.nav.scrolled { background: rgba(255,255,255,.92); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.brand svg { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 34px; margin: 0 auto; list-style: none; padding: 0; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.nav-links a::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .7; }
.nav-actions { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); padding: 16px 32px; font: 700 16px/1.3 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; border: 1px solid transparent; }
.btn-sky { background: var(--sky); color: var(--ink); box-shadow: 0 10px 26px -10px rgba(45, 99, 216, .55); }
.btn-sky:hover { background: var(--sky-2); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(45, 99, 216, .6); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; padding: 15px 26px; }
.btn-outline:hover { background: rgba(11, 42, 79, .06); }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* Window frame: the one way product screens are shown */
.window { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-window); position: relative; }
.window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11,42,79,.10); pointer-events: none; }
.window-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: linear-gradient(180deg, #f7f9fd, #eef2f9); border-bottom: 1px solid rgba(11,42,79,.08); } /* design-lint: divider */
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3dbe8; }
.window-bar span { margin-left: 10px; font: 600 12px var(--sans); color: var(--ink-2); letter-spacing: .01em; }
.window-bar b { margin-left: auto; font: 600 11px var(--sans); color: var(--accent); background: #e6efff; padding: 3px 8px; border-radius: 6px; }
.window img { width: 100%; height: auto; }

/* Floating callouts (live HTML, crisp at any size) */
.chip { position: absolute; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-float); font: 500 13px/1.3 var(--sans); color: var(--ink); white-space: nowrap; z-index: 3; }
.chip .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.chip .v { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; }
.chip .v.pos { color: var(--profit); }
.chip .v.neg { color: var(--loss); }
.chip .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--profit); font-weight: 700; }
.chip .ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--profit); box-shadow: 0 0 0 4px rgba(15,148,102,.15); }

/* Hero */
.hero { position: relative; padding: 120px 0 110px; min-height: 820px; overflow-x: clip; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; }
.glow.g1 { width: 620px; height: 620px; right: -120px; top: -60px; background: radial-gradient(circle, #b9d4ff, transparent 65%); animation: drift 18s ease-in-out infinite alternate; }
.glow.g2 { width: 420px; height: 420px; right: 380px; top: 360px; background: radial-gradient(circle, #d9e6ff, transparent 65%); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(-40px, 30px, 0) scale(1.08); } }
.hero-copy { position: relative; z-index: 4; max-width: 560px; }
.hero h1 { font-size: 56px; line-height: 1.08; letter-spacing: -0.012em; }
.hero p.lede { font-size: 20px; line-height: 1.28; margin-top: 26px; max-width: 520px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-note { margin-top: 26px; font-size: 14px; color: var(--ink-2); }
.hero-stage { position: absolute; left: calc(50% + 10px); top: 110px; width: 820px; perspective: 2200px; z-index: 2; }
.hero-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 38deg)) rotateY(var(--ry, -6deg)) rotateZ(var(--rz, -18deg)); transform-origin: 40% 30%; will-change: transform; }
.hero-tilt .window { width: 820px; }
.hero-tilt .chip { transform: translateZ(60px); }
.hero .c1 { left: -70px; top: 70px; }
.hero .c2 { right: 150px; top: 18px; }
.hero .c3 { left: 120px; bottom: -34px; }
.hero .c4 { right: 40px; bottom: 30px; }

/* Facts strip */
.strip { overflow: hidden; padding: 0 0 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.strip-track { display: flex; gap: 72px; width: max-content; animation: marquee 40s linear infinite; }
.strip-item { display: flex; align-items: center; gap: 10px; font: 600 18px var(--sans); color: #6a83a6; white-space: nowrap; }
.strip-item b { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Trust / stats */
.trust { padding: 70px 0 100px; text-align: center; }
.trust .kicker { font-weight: 700; color: var(--ink-2); max-width: 470px; margin: 0 auto; }
.trust h2 { font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; margin: 18px auto 0; max-width: 640px; }
.trust p.sub { color: var(--ink-2); margin: 22px auto 0; max-width: 460px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 46px; }
.stat { background: rgba(255,255,255,.92); border-radius: var(--r-card); padding: 44px 20px 42px; box-shadow: 0 1px 0 rgba(11,42,79,.04), 0 18px 40px -30px rgba(11,42,79,.25); }
.stat h3 { font-size: 64px; line-height: 1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.stat p { font-family: var(--serif); font-size: 20px; margin-top: 18px; }

/* White rounded section */
.core { background: var(--white); border-radius: var(--r-section); padding: 76px 0 110px; position: relative; z-index: 2; }
.tag-pill { display: inline-block; background: #e1ecfb; color: var(--ink); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill); }
.center { text-align: center; }
.core h2 { font-size: 48px; line-height: 1; letter-spacing: -0.02em; margin: 22px auto 0; max-width: 760px; }
.core .intro { max-width: 720px; margin: 26px auto 0; text-align: center; line-height: 1.32; }

/* Pinned walkthrough */
.walk { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; margin-top: 80px; }
.walk-stage { position: sticky; top: 130px; align-self: start; height: 560px; }
.walk-panel { position: absolute; inset: 0; border-radius: 26px; padding: 34px; background: linear-gradient(160deg, #eaf2ff, #dfe9fb 60%, #e8eefc); box-shadow: inset 0 0 0 1px rgba(11,42,79,.06); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s ease, transform .55s ease; display: grid; place-items: center; overflow: hidden; }
.walk-panel.active { opacity: 1; transform: none; }
.walk-panel .compose { position: relative; width: 100%; }
.walk-panel .window { width: 100%; }
.walk-panel .side { position: absolute; width: 38%; }
.walk-steps { display: grid; gap: 0; }
.step { min-height: 520px; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; opacity: .35; transition: opacity .4s; }
.step.active { opacity: 1; }
.step .num { font: 700 13px var(--sans); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.step h3 { font-size: 38px; line-height: 1.05; letter-spacing: -0.015em; margin-top: 12px; }
.step p { margin-top: 16px; font-size: 17px; line-height: 1.4; color: var(--ink); max-width: 440px; }
.triad { margin-top: 22px; display: grid; gap: 10px; max-width: 460px; }
.triad div { display: grid; grid-template-columns: 82px 1fr; gap: 12px; font-size: 15px; line-height: 1.35; }
.triad b { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.step .inline-shot { display: none; margin-top: 22px; }
.caption { text-align: center; color: var(--ink-2); font-size: 13px; margin-top: 30px; }

/* Greeks spotlight */
.spot { padding: 130px 0 40px; }
.spot-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.spot h2 { font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; }
.spot p.sub { margin-top: 22px; font-size: 18px; line-height: 1.4; max-width: 460px; }
.spot ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.spot li { display: flex; gap: 10px; }
.spot li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.stack { position: relative; height: 560px; }
.stack .w1 { position: absolute; left: 0; top: 0; width: 360px; }
.stack .w2 { position: absolute; right: 0; top: 150px; width: 360px; }
.stack .w3 { position: absolute; left: 70px; bottom: 0; width: 340px; }

/* Before / with */
.compare { padding: 110px 0 40px; }
.compare h2 { font-size: 48px; line-height: 1; letter-spacing: -0.02em; text-align: center; max-width: 760px; margin: 0 auto; }
.compare .sub { text-align: center; color: var(--ink-2); margin: 20px auto 0; max-width: 520px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 46px; }
.cmp { border-radius: var(--r-card); padding: 34px 34px 36px; }
.cmp h3 { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.cmp ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.cmp li { font-family: var(--serif); font-size: 24px; line-height: 1.15; display: flex; gap: 14px; align-items: baseline; }
.cmp-before { background: rgba(255,255,255,.7); color: #6b7d97; box-shadow: inset 0 0 0 1px var(--line); }
.cmp-before li::before { content: "\00d7"; font-family: var(--sans); font-size: 18px; color: #a5b3c7; }
.cmp-with { background: linear-gradient(160deg, var(--card-dark), var(--navy-deep)); color: #fff; box-shadow: 0 30px 60px -30px rgba(7,28,59,.6); }
.cmp-with li::before { content: "\2713"; font-family: var(--sans); font-size: 16px; color: #9cc3ff; }

/* Connector + orbit */
.addons { padding: 0 0 140px; text-align: center; position: relative; }
.connector { display: block; margin: 0 auto; width: 160px; height: 200px; }
.connector path { stroke-dasharray: 420; stroke-dashoffset: calc(420 * (1 - var(--draw, 1))); }
.addons .tag-pill { background: #dbe5f4; color: #3c5478; }
.addons h2 { font-size: 38px; line-height: 1; letter-spacing: -0.012em; color: var(--indigo); margin-top: 26px; }
.addons p.sub { color: var(--ink-2); margin: 16px auto 0; max-width: 340px; }
.orbit { position: relative; height: 560px; max-width: 860px; margin: 40px auto 0; }
.orbit svg.rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.node { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 16px 14px 20px; font: 400 21px var(--serif); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(11,42,79,.32); white-space: nowrap; transition: transform .3s; }
.node:hover { transform: translateY(-3px); }
.node .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font: 400 20px/1 var(--sans); }
.node-core { left: 50%; top: 50%; transform: translate(-50%, -50%); background: #dce9fd; font-size: 30px; padding: 14px 26px; box-shadow: 0 0 0 14px rgba(220,233,253,.5); }
.node-core:hover { transform: translate(-50%, -52%); }
.node-core svg { width: 34px; height: 34px; }

/* Dark "built for" section */
.built { position: relative; color: #fff; padding: 180px 0 180px; background: radial-gradient(1100px 560px at 25% 0%, rgba(120,170,255,.25), transparent 60%), linear-gradient(180deg, #0e3466 0%, #0a2a55 55%, #071f43 100%); overflow: hidden; }
.built::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.built > .container { position: relative; }
.built h2 { font-size: 48px; line-height: 1; letter-spacing: -0.02em; text-align: center; }
.built p.sub { text-align: center; max-width: 620px; margin: 22px auto 0; color: #d3e0f3; line-height: 1.32; }
.seg { display: flex; justify-content: center; margin-top: 34px; }
.seg-inner { display: inline-flex; background: rgba(255,255,255,.12); padding: 4px; border-radius: var(--r-pill); }
.seg button { border: 0; background: transparent; color: #e3ecfa; font: 700 14px var(--sans); padding: 13px 44px; border-radius: var(--r-pill); cursor: pointer; transition: background .25s, color .25s; }
.seg button[aria-selected="true"] { background: var(--sky); color: var(--ink); }
.org { position: relative; margin-top: 70px; grid-template-columns: 1fr 1fr; gap: 40px 80px; }
.org .frame { position: absolute; left: 0; right: 0; top: 50%; height: 46%; transform: translateY(-50%); border: 1px dashed rgba(255,255,255,.3); border-radius: 18px; pointer-events: none; }
.org-card { position: relative; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 26px 28px 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -30px rgba(0,0,0,.5); }
.org-card.top, .org-card.bottom { grid-column: 1 / -1; width: min(560px, 100%); justify-self: center; }
.org-card h3 { font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; }
.org-card p { color: #d7e3f4; font-size: 15px; margin-top: 10px; line-height: 1.33; }
.org-card ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; font-size: 15px; }
.org-card li { display: flex; gap: 10px; align-items: center; }
.org-card li svg { width: 16px; height: 16px; flex: none; opacity: .9; }
.org-card .go { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 9px; background: #e8f0fc; color: var(--ink); display: grid; place-items: center; text-decoration: none; font-size: 18px; }
.org-card .pills { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.org-card .pills .btn { padding: 11px 18px; font-size: 13px; }
.pill-dim { background: rgba(255,255,255,.16); color: #fff; }
.hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: #dce9fd; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(220,233,253,.14); z-index: 2; }
.hub svg { width: 36px; height: 36px; }
[data-path] { display: none; }
[data-path].on { display: grid; }

/* Principles carousel */
.quotes { padding: 120px 0 80px; }
.qtrack { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.qtrack::-webkit-scrollbar { display: none; }
.qcard { flex: 0 0 min(640px, 86%); scroll-snap-align: start; border-radius: var(--r-card); padding: 46px 40px 34px; color: #fff; background: radial-gradient(500px 260px at 90% 0%, rgba(120,170,255,.28), transparent 70%), linear-gradient(150deg, #123d74, #0b2c58); min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
.qcard blockquote { margin: 0; font: 400 46px/1 var(--serif); letter-spacing: -0.015em; }
.qcard .by { font: 700 14px var(--sans); margin-top: 26px; }
.qcard .by span { display: block; font-weight: 400; color: #c3d4ee; margin-top: 3px; }
.qnav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.dots { display: flex; gap: 8px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #9fb3d1; transition: width .3s; }
.dots i.on { background: var(--ink); width: 22px; border-radius: 4px; }
.arrows { display: flex; gap: 10px; }
.arrows button { width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--slate); color: #fff; font-size: 20px; cursor: pointer; }
.arrows button:hover { background: var(--ink); }
.quotes .note { font-size: 13px; color: var(--ink-2); margin-top: 14px; }

/* Pricing */
.pricing { padding: 60px 0 40px; }
.pricing .head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pricing h2 { font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; max-width: 620px; }
.label { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--sans); margin-bottom: 14px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.tier { background: #fff; border-radius: var(--r-card); padding: 30px 26px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(11,42,79,.05), 0 24px 50px -36px rgba(11,42,79,.35); transition: transform .3s, box-shadow .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(11,42,79,.05), 0 34px 60px -34px rgba(11,42,79,.45); }
.tier.rec { background: radial-gradient(420px 240px at 100% 0%, rgba(120,170,255,.3), transparent 70%), linear-gradient(160deg, #123d74, #0b2c58); color: #fff; }
.tier .badge { align-self: flex-start; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--sky); color: var(--ink); border-radius: var(--r-pill); padding: 5px 11px; }
.tier h3 { font-size: 30px; line-height: 1; }
.tier .amt { font: 400 40px/1 var(--serif); letter-spacing: -0.02em; }
.tier .amt small { font: 400 14px var(--sans); opacity: .75; letter-spacing: 0; }
.tier .alt { font-size: 14px; opacity: .8; }
.tier ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; font-size: 15px; line-height: 1.3; flex: 1; }
.tier li { display: flex; gap: 9px; }
.tier li::before { content: "\2713"; color: var(--accent); font-weight: 700; }
.tier.rec li::before { color: #9cc3ff; }
.tier .trial { font-size: 13px; opacity: .8; }
.founding { margin-top: 18px; background: #dce9fd; border-radius: var(--r-card); padding: 22px 28px; display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.founding p { font-family: var(--serif); font-size: 22px; }

/* Guides with drawn payoff art */
.insights { padding: 100px 0 40px; }
.insights .head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.insights h2 { font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; max-width: 620px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.post { border-radius: var(--r-card); overflow: hidden; background: linear-gradient(160deg, #123d74, #0b2c58); color: #fff; text-decoration: none; display: flex; flex-direction: column; transition: transform .3s; }
.post:hover { transform: translateY(-4px); }
.post .art { aspect-ratio: 16 / 7; position: relative; background: radial-gradient(400px 200px at 80% 10%, rgba(120,170,255,.35), transparent 70%), linear-gradient(160deg, #e9f1ff, #d8e5fb); }
.grid3 .post .art { aspect-ratio: 16 / 9; }
.post .art svg { position: absolute; inset: 12% 8%; width: 84%; height: 76%; }

/* guide artwork: three review options (guides.js) */
.post .art:has(.guide-art) { background: radial-gradient(520px 260px at 85% 0%, rgba(80,140,255,.28), transparent 70%), linear-gradient(165deg, #0d3266, #071c3b); box-shadow: inset 0 0 0 1px rgba(156,195,255,.14); }
.guide-art { position: absolute; inset: 0; overflow: hidden; }
.guide-art svg.bp { position: absolute; inset: 0; width: 100%; height: 100%; }
.guide-art canvas { position: absolute; inset: 0; display: block; }
.bp-hd { font: 700 11px var(--sans); letter-spacing: .08em; fill: rgba(220,233,255,.8); }
.bp-lbl { font: 500 10.5px ui-monospace, "SFMono-Regular", Consolas, monospace; fill: rgba(170,205,255,.75); }
.bp-val { font: 700 12px ui-monospace, "SFMono-Regular", Consolas, monospace; fill: #fff; }
.mode-blueprint::after, .mode-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(7,28,59,.55)); }
.tk { position: absolute; inset: 14px 16px 44px; border-radius: 12px; background: rgba(9,30,62,.78); box-shadow: inset 0 0 0 1px rgba(156,195,255,.22), 0 18px 40px rgba(0,0,0,.35); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; font: 500 12px ui-monospace, "SFMono-Regular", Consolas, monospace; color: #dce9ff; backdrop-filter: blur(6px); }
.tk-top { display: flex; justify-content: space-between; font: 700 11px var(--sans); letter-spacing: .04em; color: #eaf2ff; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid rgba(156,195,255,.16); } /* design-lint: divider */
.tk-top .live { color: #9cc3ff; font-weight: 600; }
.tk-leg { display: grid; grid-template-columns: 44px 34px 1fr 64px; gap: 6px; align-items: center; }
.tk-leg .b { color: #7fd3ff; font-weight: 700; } .tk-leg .s { color: #ffb3c0; font-weight: 700; }
.tk-leg em { font-style: normal; color: #86a6d6; }
.tk-leg .mk { text-align: right; transition: color .6s; }
.tk-leg .mk.up { color: #8fe3c0; } .tk-leg .mk.dn { color: #ffb3c0; }
.tk-figs { display: flex; gap: 18px; margin-top: 4px; font-size: 12px; }
.tk-figs b { display: block; font: 600 10px var(--sans); color: #86a6d6; letter-spacing: .05em; text-transform: uppercase; }
.tk-trace { margin-top: auto; width: 100%; height: 30px; }
.tk-trace path { fill: none; stroke: #9cc3ff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grid2 .tk { inset: 18px 22% 44px 22%; }
.post .tags { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 6px; }
.post .tags span { background: rgba(11, 42, 79, .85); color: #fff; font: 700 11px var(--sans); padding: 4px 8px; border-radius: 5px; }
.post .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post .date { font-size: 13px; color: #c3d4ee; }
.post h3 { font-size: 21px; line-height: 1.2; }
.post p { font-size: 14px; color: #c3d4ee; line-height: 1.35; }
.post .read { margin-top: auto; align-self: flex-start; background: rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 8px 16px; font: 700 13px var(--sans); }

/* Big CTA */
.big-cta { padding: 90px 0 130px; position: relative; overflow: hidden; }
.big-cta .glow { width: 700px; height: 400px; left: 30%; top: 0; background: radial-gradient(circle, #cfe0ff, transparent 65%); }
.big-cta .row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.big-cta h2 { font-size: 64px; line-height: 1; letter-spacing: -0.02em; max-width: 720px; }

/* Footer */
.footer { background: var(--navy-deep); color: #fff; padding: 40px 0 34px; }
.foot-card { background: #eef3fa; color: var(--ink); border-radius: 28px; padding: 40px 40px 34px; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr) auto; gap: 28px; }
.foot-card h4 { font: 400 17px var(--serif); margin: 0 0 14px; }
.foot-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot-card a { text-decoration: none; }
.foot-card a:hover { text-decoration: underline; }
.foot-card .contact { display: grid; gap: 10px; justify-items: end; font-size: 14px; }
.foot-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #4f6890; padding-top: 24px; border-top: 1px solid var(--line); } /* design-lint: divider */
.foot-bottom { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 46px; flex-wrap: wrap; }
.foot-bottom .tagline { font: 400 48px/1 var(--serif); letter-spacing: -0.02em; }
.news { min-width: min(420px, 100%); }
.news label { display: block; font-size: 14px; margin-bottom: 10px; text-align: right; }
.news .field { display: flex; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; padding: 4px 6px 4px 16px; }
.news input { flex: 1; background: transparent; border: 0; color: #fff; font: 15px var(--sans); padding: 10px 0; outline: none; }
.news input::placeholder { color: #b3c6e3; }
.news button { background: transparent; border: 0; color: #fff; font-size: 20px; cursor: pointer; padding: 0 8px; }
.foot-fine { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; font-size: 13px; color: #b3c6e3; }
.foot-fine a { color: #b3c6e3; text-decoration: none; margin-left: 18px; }
.risk { font-size: 12px; color: #93abd0; margin-top: 16px; max-width: 900px; line-height: 1.45; }

/* Reveal: visible by default; scripts only hide what is below the fold */
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.pre { opacity: 0; transform: translateY(26px); }
[data-speed] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .strip-track, .orbit svg.rings, .glow { animation: none; }
  .js .reveal.pre { opacity: 1; transform: none; }
  * { scroll-behavior: auto; }
  .walk-panel { transition: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .hero { min-height: 0; padding-top: 70px; }
  .hero-stage { position: relative; left: auto; top: auto; width: 100%; margin-top: 50px; }
  .hero-tilt .window { width: 100%; }
  .walk { grid-template-columns: 1fr; gap: 0; }
  .walk-stage { display: none; }
  .step { min-height: 0; opacity: 1; padding: 40px 0; }
  .step .inline-shot { display: block; }
  .spot-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .foot-card { grid-template-columns: 1fr 1fr; }
  .foot-card .contact { justify-items: start; }
}
@media (max-width: 720px) {
  .container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .announce { font-size: 13px; }
  .nav { padding: 10px 10px 10px 18px; gap: 10px; }
  .nav .btn-outline { display: none; }
  .nav .btn-sky { padding: 12px 18px; font-size: 14px; }
  .brand { font-size: 20px; }
  .hero h1 { font-size: 40px; }
  .hero p.lede { font-size: 18px; }
  .hero .chip { display: none; }
  .trust h2, .core h2, .compare h2, .built h2, .pricing h2, .insights h2, .spot h2 { font-size: 34px; }
  .step h3 { font-size: 30px; }
  .big-cta h2 { font-size: 40px; }
  .stats, .compare-grid, .grid2, .grid3, .tiers, .org { grid-template-columns: 1fr; }
  .org .frame, .hub { display: none; }
  .stack { height: auto; display: grid; gap: 14px; }
  .stack .w1, .stack .w2, .stack .w3 { position: static; width: 100%; }
  .cmp li { font-size: 20px; }
  .qcard blockquote { font-size: 32px; }
  .orbit { height: auto; display: grid; gap: 12px; justify-items: center; }
  .orbit svg.rings { display: none; }
  .node, .node-core { position: static; transform: none; }
  .foot-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .foot-bottom .tagline { font-size: 34px; }
  .seg button { padding: 12px 22px; }
  .insights .head { flex-direction: column; align-items: start; }
  .triad div { grid-template-columns: 1fr; gap: 2px; }
}
.post .art .guide-art .tk-trace { position: static; inset: auto; width: 100%; height: 30px; }
.post .art:has(.mode-surface) .tags, .post .art:has(.mode-blueprint) .tags { bottom: 10px; }

/* modules orbit: pinned, turns with scroll (orbit.js) */
.orbit-track { position: relative; height: calc(var(--n, 5) * 80vh); margin-top: 30px; }
.orbit-stage { position: sticky; top: 96px; height: calc(100vh - 116px); min-height: 520px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.orbit-track .orbit { height: min(600px, calc(100vh - 150px)); width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: auto; }
.orbit-track .orbit svg.rings { animation: none; }
.orbit-track .ticks { transform-origin: 50% 50%; transform-box: view-box; transform: rotate(var(--turn, 0deg)); }
.onode { left: 0; top: 0; border: 0; cursor: pointer; transition: background .35s, color .35s, box-shadow .35s; will-change: transform; font: 400 20px var(--serif); }
.onode:hover { transform: none; box-shadow: 0 22px 46px -16px rgba(11,42,79,.42); }
.onode.on { background: var(--indigo); color: #fff; box-shadow: 0 24px 50px -14px rgba(58,63,120,.55), 0 0 0 8px rgba(58,63,120,.10); }
.onode.on .plus { background: #fff; color: var(--indigo); }
.onode:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.orbit-panels { position: relative; height: min(560px, calc(100vh - 150px)); text-align: left; }
.op { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -28px rgba(11,42,79,.35), inset 0 0 0 1px rgba(11,42,79,.06); opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; overflow: hidden; }
.op.active { opacity: 1; transform: none; pointer-events: auto; }
.op-num { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.op h3 { font: 400 32px/1.1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.op p { color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.op ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.op li::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%; background: #e6efff; color: var(--accent); font: 700 13px/1 var(--sans); }
.op .window { margin-top: auto; }
.op .window img { max-height: 200px; object-fit: cover; object-position: top left; }
@media (prefers-reduced-motion: reduce) { .op { transition: none; } }
@media (max-width: 900px) {
  .orbit-track { height: auto; }
  .orbit-stage { position: static; height: auto; min-height: 0; display: block; }
  .orbit-track .orbit { height: auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
  .orbit-track .orbit svg.rings, .orbit-track .node-core { display: none; }
  .onode { position: static; transform: none !important; opacity: 1 !important; font-size: 17px; }
  .orbit-panels { height: auto; display: grid; gap: 16px; }
  .op { position: static; opacity: 1; transform: none; pointer-events: auto; }
}