/* marketing-site/fonts/fonts.css */
/*
 * The marketing pages' two typefaces, self-hosted (see `selfHostFonts` in
 * `scripts/marketing-site-transforms.js`). These are the exact latin variable files Google Fonts
 * served for `Inter:wght@400;500;600;700` and `Space Grotesk:wght@500;600;700`, with the same
 * unicode-range and the same swap display. Both are SIL Open Font License 1.1 (`OFL.txt`).
 *
 * The build rewrites each `url()` to a content-hashed `/marketing/<sha256-10>.woff2` and preloads it.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/marketing/188fbe2b03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/marketing/ea3e0114e4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* css/c9/system.css */
/* c6 "Built for quants": IDE and terminal aesthetic. Dark only. */
:root {
  --bg: rgb(17, 17, 17);
  --card: rgb(25, 25, 25);
  --panel: rgb(21, 21, 21);
  --line: rgb(44, 44, 44);
  --line-soft: rgb(34, 34, 34);
  --fg: rgb(238, 238, 238);
  --muted: rgb(180, 180, 180);
  --dim: rgb(130, 130, 130);
  --gold: rgb(255, 193, 63);
  --ink: rgb(8, 26, 27);
  --red: rgb(255, 110, 80);
  --green: rgb(74, 222, 128);
  --blue: rgb(122, 184, 255);
  --violet: rgb(199, 146, 234);
  --teal: rgb(110, 214, 200);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 80px;
  overflow-x: hidden;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); }
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.red { color: var(--red); }
.green { color: var(--green); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; font-size: 17px; }
.logo .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--gold); color: var(--ink); font-family: var(--mono); font-size: 13px; display: grid; place-items: center; font-weight: 700; }
.nav-links { display: flex; gap: 20px; font-size: 14px; color: var(--muted); }
.nav-links a { text-decoration: none; }
.nav-links a:hover, .nav-links a.on { color: var(--fg); }
.nav-links a.on::before { content: '> '; color: var(--gold); font-family: var(--mono); }
.nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.nav-menu { display: none; margin-left: auto; }
.nav-menu summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--muted); border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] .menu-panel { display: flex; }
.menu-panel { display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 20px 18px; gap: 12px; }
.menu-panel a { text-decoration: none; color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: rgb(255, 205, 100); }
.btn-ghost { border-color: var(--line); color: var(--fg); background: var(--card); }
.btn-ghost:hover { border-color: rgb(80, 80, 80); }
.btn-sm { padding: 7px 12px; font-size: 14px; }

/* section heads */
section { padding: 88px 0; }
.kicker { font-family: var(--mono); font-size: 13px; color: var(--gold); letter-spacing: 0.02em; margin: 0 0 14px; }
.kicker .dim { color: var(--dim); }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 640px; margin: 18px 0 0; }
.sec-head { max-width: 760px; margin-bottom: 44px; }

/* window chrome */
.win { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.win-bar { display: flex; align-items: center; gap: 0; height: 36px; border-bottom: 1px solid var(--line); background: var(--card); font-family: var(--mono); font-size: 12px; color: var(--dim); }
.dots { display: flex; gap: 6px; padding: 0 12px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(60, 60, 60); }
.tab { padding: 0 14px; height: 100%; display: flex; align-items: center; border-right: 1px solid var(--line); }
.tab.on { color: var(--fg); background: var(--panel); box-shadow: inset 0 -2px 0 var(--gold); }
.win-status { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--dim); padding: 7px 12px; background: var(--card); flex-wrap: wrap; }

/* code */
pre.code { font-variant-ligatures: none; margin: 0; padding: 14px 0; font-family: var(--mono); font-size: 13px; line-height: 1.7; overflow-x: auto; counter-reset: ln; }
pre.code span.l { display: block; padding: 0 16px 0 0; white-space: pre; }
pre.code span.l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 40px; padding-right: 14px; text-align: right; color: rgb(80, 80, 80); }
.k { color: var(--violet); }
.f { color: var(--blue); }
.s { color: rgb(195, 232, 141); }
.n { color: rgb(247, 140, 108); }
.c { color: rgb(110, 110, 110); font-style: italic; }
.p { color: var(--teal); }

/* hero */
.hero { padding: 56px 0 56px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.hero-top .lede { margin-top: 0; }
@media (max-width: 1000px) { .hero-top { grid-template-columns: minmax(0, 1fr); gap: 0; } .hero-top .lede { margin-top: 18px; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hero-copy { max-width: 820px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-note { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 14px; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; }
.hero-split > div { min-width: 0; }
.hero-split .chart-pane { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.chart-crop { height: 380px; background: #0a0a0a url('../assets/hero-chart.png') no-repeat; background-size: 230% auto; background-position: 100% 54%; }
.pane-label { font-family: var(--mono); font-size: 12px; color: var(--dim); padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.pane-label b { color: var(--gold); font-weight: 600; }

/* figures */
figure { margin: 0; }
.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0a0a0a; }
.shot img { width: 100%; height: auto; }
figcaption { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 10px; }
figcaption::before { content: '// '; color: rgb(90, 90, 90); }

/* two-column feature */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bullets { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.bullets li { padding-left: 26px; position: relative; color: var(--muted); }
.bullets li::before { content: '$'; position: absolute; left: 0; font-family: var(--mono); color: var(--gold); }
.bullets li b { color: var(--fg); font-weight: 600; }

/* api chips */
.api { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.api code { font-family: var(--mono); font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--blue); }

/* callout */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--card); border-radius: 8px; padding: 18px 20px; margin-top: 28px; }
.callout .t { font-family: var(--mono); font-size: 12px; color: var(--gold); margin-bottom: 6px; }
.callout p { margin: 0; color: var(--muted); }
.callout p b { color: var(--fg); }
.callout.warn { border-left-color: var(--red); }
.callout.warn .t { color: var(--red); }

/* tests list (scoring) */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.check { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.check .id { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.check h3 { margin: 6px 0 8px; }
.check p { margin: 0; color: var(--muted); font-size: 15px; }
.check .tier { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--gold); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; }

/* benchmark */
.bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.bench > div { padding: 26px 24px; border-right: 1px solid var(--line); }
.bench > div:last-child { border-right: 0; }
.bench .v { font-family: var(--mono); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; }
.bench .u { font-size: 0.5em; color: var(--muted); margin-left: 4px; }
.bench .l { color: var(--muted); font-size: 14px; margin-top: 6px; }
.bar { height: 6px; background: rgb(40, 40, 40); border-radius: 3px; margin-top: 16px; position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 3px; }
.bench-note { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 14px; }

/* spec sheet */
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.spec-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.spec-wrap .spec { border: 0; border-radius: 0; }
.spec th, .spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { font-family: var(--mono); font-size: 12px; color: var(--dim); font-weight: 500; background: var(--panel); text-transform: uppercase; letter-spacing: 0.06em; }
.spec tbody th { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 500; width: 30%; }
.spec td { font-family: var(--mono); font-size: 13px; }
.spec tr.grp th { background: var(--panel); color: var(--gold); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec .no { color: var(--dim); }

/* steps (fork / publish) */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 28px; }
.flow > div { padding: 18px; border-right: 1px solid var(--line); background: var(--card); }
.flow > div:last-child { border-right: 0; }
.flow .cmd { font-family: var(--mono); font-size: 13px; color: var(--gold); }
.flow p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* faq */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; font-family: var(--mono); color: var(--gold); width: 14px; flex: none; }
.faq details[open] summary::before { content: '-'; }
.faq details p { color: var(--muted); margin: 10px 0 0 26px; max-width: 760px; }

/* closing */
.closing { border-top: 1px solid var(--line); }
.prompt { font-family: var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 36px 28px; }
.prompt .line { color: var(--dim); font-size: 13px; }
.prompt h2 { font-family: var(--sans); margin: 14px 0 10px; }
.prompt p { font-family: var(--sans); color: var(--muted); margin: 0 0 24px; max-width: 620px; }
.cursor { display: inline-block; width: 9px; height: 17px; background: var(--gold); vertical-align: -3px; margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* footer */
footer { border-top: 1px solid var(--line); padding: 48px 0 24px; background: var(--bg); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.foot h4 { font-family: var(--mono); font-size: 12px; color: var(--dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot .about { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 300px; }
.legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; }
.plan.hl { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.plan .pid { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.plan h3 { font-size: 24px; margin: 4px 0 6px; }
.plan .desc { color: var(--muted); font-size: 14.5px; min-height: 46px; margin: 0; }
.price { font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; margin: 18px 0 2px; }
.price small { font-size: 15px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.price-alt { font-family: var(--mono); font-size: 12.5px; color: var(--dim); min-height: 20px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 9px; font-size: 14.5px; }
.plan li { padding-left: 22px; position: relative; color: var(--muted); }
.plan li::before { content: '+'; position: absolute; left: 0; font-family: var(--mono); color: var(--gold); }
.plan li.x::before { content: '-'; color: var(--dim); }
.plan li b { color: var(--fg); font-weight: 600; }
.plan .btn { margin-top: auto; justify-content: center; }
.flag { font-family: var(--mono); font-size: 11px; background: var(--gold); color: var(--ink); padding: 2px 7px; border-radius: 4px; font-weight: 600; margin-left: 8px; vertical-align: 3px; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: var(--card); font-family: var(--mono); font-size: 13px; margin-top: 28px; }
.toggle button { background: none; border: 0; color: var(--muted); padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit; }
.toggle button.on { background: var(--gold); color: var(--ink); font-weight: 600; }

/* vs */
.claim { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.claim q { display: block; font-size: 19px; font-weight: 600; quotes: none; }
.claim .src { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 10px; word-break: break-word; }
.claim .src a { color: var(--muted); }
.claim .ours { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 15px; }
.claim .ours b { color: var(--gold); font-family: var(--mono); font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px; }
.claims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.diff { width: 100%; border-collapse: collapse; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1000px) {
  .hero-split, .split, .split.rev { grid-template-columns: minmax(0, 1fr); }
  .hero-split .chart-pane { border-left: 0; border-top: 1px solid var(--line); }
  .chart-crop { min-height: 300px; }
  .split.rev > :first-child { order: 2; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > :first-child { grid-column: 1 / -1; }
  .plans, .claims { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > div:nth-child(2) { border-right: 0; }
  .flow > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-cta { margin-left: 0; }
  .nav-menu { display: block; }
  section { padding: 64px 0; }
  .checks, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bench > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .bench > div:last-child { border-bottom: 0; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow > div:last-child { border-bottom: 0; }
  pre.code { font-size: 11.5px; }
  pre.code span.l::before { width: 30px; padding-right: 10px; }
  .spec tbody th { width: auto; }
  .spec th, .spec td { padding: 10px 10px; }
  .spec-scroll { overflow-x: auto; }
  .win-bar .tab:not(.on) { display: none; }
}

.results { flex: 1; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.results .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.results .row span:first-child { color: var(--dim); }
.results .warn { color: var(--gold); padding: 10px 12px; line-height: 1.5; }
@media (max-width: 1000px) { .chart-crop { height: 300px; } }

.nav-cta .sm { display: none; }
@media (max-width: 760px) { .nav-cta .lg { display: none; } .nav-cta .sm { display: inline; } .nav .wrap { gap: 12px; } }

/* css/c9/product.css */
/* c9 product page. system.css supplies tokens and components; this file restyles them into c3's
   cinematic look (full-bleed replay video, large sans type, generous space) and adds the scroll tour. */
:root { --display: 'Space Grotesk', Inter, system-ui, sans-serif; }
body { background-image: none; font-family: var(--sans); padding-bottom: 88px; }
video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; }
section { padding: 110px 0; }
.lede { font-size: 19px; }
@media (max-width: 760px) { section { padding: 72px 0; } }

/* kicker: small gold label with a square, no monospace */
.kicker { font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
.sec-head { margin-bottom: 56px; }
.sec-head .lede { margin-top: 16px; }

/* buttons: pills */
.btn { border-radius: 999px; padding: 14px 22px; font: 600 15px/1 var(--sans); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-ghost { background: rgba(17, 17, 17, 0.6); border: 1px solid rgba(238, 238, 238, 0.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(63, 63, 70, 0.7); border-color: rgba(238, 238, 238, 0.28); }
.hero-note, .bench-note { font-family: var(--sans); font-size: 13px; color: var(--muted); }

/* nav */
.logo { font-family: var(--display); font-size: 19px; }
.logo .mark { font-family: var(--display); border-radius: 50%; }
.nav-links { gap: 2px; }
.nav-links a { white-space: nowrap; color: rgb(214, 214, 212); padding: 8px 12px; border-radius: 999px; }
.nav-links a:hover, .nav-links a.on { color: var(--fg); background: rgba(63, 63, 70, 0.6); }
.nav-links a.on::before { content: none; }
.nav-menu summary { font-family: var(--sans); border-radius: 999px; padding: 7px 14px; color: var(--fg); }
.menu-panel a { padding: 6px 0; }
.menu-panel a.on { color: var(--fg); font-weight: 600; }
@media (max-width: 1180px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-cta { margin-left: 0; }
  .nav-menu { display: block; }
}

/* screens */
.screen { border-radius: 14px; overflow: hidden; border: 1px solid rgb(52, 52, 50); background: rgb(10, 10, 10); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.screen > video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.crop { --iw: 2000; position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); background: rgb(10, 10, 10); }
.crop img { position: absolute; max-width: none; width: calc(100% * var(--iw) / var(--w)); height: auto; left: calc(-100% * var(--x) / var(--w)); top: calc(-100% * var(--y) / var(--h)); }
figcaption { font-family: var(--sans); font-size: 13px; color: var(--dim); }
figcaption::before { content: none; }

/* full-bleed replay band: the hero here, the closing band on every c9 page */
.reel { position: relative; overflow: hidden; text-align: center; background: rgb(10, 10, 10); }
.reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.reel .wrap { position: relative; }
.reel h1, .reel h2 { font-size: clamp(42px, 6.8vw, 96px); line-height: 0.98; letter-spacing: -0.045em; max-width: 1000px; margin: 0 auto; }
.reel .lede { margin: 22px auto 0; color: rgb(214, 214, 212); max-width: 620px; }
.reel .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.reel .hero-note { margin-top: 16px; }
.reel.closing-band { padding: 140px 0; border-top: 1px solid var(--line); }
.reel.closing-band p { color: rgb(214, 214, 212); font-size: 18px; margin: 18px 0 0; }
.hero-reel { min-height: calc(100svh - 60px); max-height: 1000px; display: flex; align-items: center; padding: 96px 0; }
.hero-reel > video { opacity: 0.38; }
.hero-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.3) 70%), linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 25%); }
.hero-reel .wrap { z-index: 2; width: 100%; }
.rec { position: absolute; top: 20px; right: 20px; z-index: 2; font: 500 12px/1 var(--sans); color: var(--fg); background: rgba(10, 10, 10, 0.78); border: 1px solid rgba(238, 238, 238, 0.16); padding: 9px 12px; border-radius: 999px; display: flex; gap: 8px; align-items: center; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: recblink 1.2s infinite; }
@keyframes recblink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec i { animation: none; } }
@media (max-width: 760px) { .rec { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; } }

/* facts strip under the hero */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(14, 14, 14); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip .wrap > div { padding: 22px 18px; border-right: 1px solid var(--line); }
.strip .wrap > div:last-child { border-right: 0; }
.strip b { display: block; font: 600 28px/1.1 var(--display); letter-spacing: -0.02em; }
.strip span { font-size: 13px; color: var(--muted); }
@media (max-width: 800px) {
  .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .wrap > div:nth-child(2) { border-right: 0; }
  .strip .wrap > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* sticky scroll tour: text steps on one side, media swaps on the other */
.tour { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
.tour .steps { display: grid; }
.tour .step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: 0.35; transition: opacity 0.3s; }
.tour .step.on { opacity: 1; }
.tour .step .n { font: 600 13px/1 var(--sans); color: var(--gold); margin-bottom: 14px; }
.tour .step .n em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: 8px; }
.tour .step h3 { font-size: 26px; line-height: 1.15; }
.tour .step p { color: var(--muted); font-size: 17px; margin: 14px 0 0; }
.tour .step p.small { font-size: 15px; }
.tour .step .bullets { margin-top: 16px; gap: 10px; font-size: 15.5px; }
.tour .step .bullets li::before { content: ''; width: 6px; height: 6px; top: 10px; border-radius: 2px; background: var(--gold); }
.tour .step .bullets li { padding-left: 18px; }
.tour .more { margin-top: 18px; font: 600 15px/1.4 var(--sans); color: var(--gold); text-decoration: none; align-self: flex-start; }
.tour .more:hover { text-decoration: underline; }
.tour .media { position: sticky; top: 96px; height: calc(100vh - 140px); max-height: 720px; display: flex; align-items: center; }
.tour .slot { position: relative; width: 100%; aspect-ratio: 16 / 10.5; }
.tour .slot > * { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; transform: translateY(-50%) scale(0.98); transition: opacity 0.4s, transform 0.4s; }
.tour .slot > .on { opacity: 1; transform: translateY(-50%); }
.m-inline { display: none; margin-top: 22px; }
@media (max-width: 900px) {
  .tour { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tour .media { display: none; }
  .tour .step { min-height: 0; opacity: 1; padding: 36px 0; border-top: 1px solid var(--line); }
  .m-inline { display: block; }
}

/* keyboard */
.keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.keys span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 8px; background: linear-gradient(180deg, rgb(52, 52, 50), rgb(34, 34, 33)); border: 1px solid rgb(70, 70, 66); border-bottom-width: 3px; font: 600 14px/1 var(--sans); color: var(--fg); }
kbd.buy { color: var(--green); }
kbd.sell { color: var(--red); }

/* plan strip */
.plan-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-strip > a { display: block; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; }
.plan-strip > a:hover { border-color: rgb(80, 80, 76); }
.plan-strip > a.hl { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.plan-strip .pname { font: 600 22px/1 var(--display); }
.plan-strip .pp { font: 600 44px/1 var(--display); letter-spacing: -0.04em; margin-top: 14px; }
.plan-strip .pp small { font: 400 15px/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.plan-strip ul { list-style: none; padding: 0; margin: 18px 0 0; }
.plan-strip li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .plan-strip { grid-template-columns: minmax(0, 1fr); } }
.strip-note { font-size: 13px; color: var(--dim); margin-top: 18px; }
.strip-note a { color: var(--gold); }

/* footer, faq, spec tables and claims in sans */
.foot h4, .spec thead th, .spec tbody th, .spec td, .claim .src, .claim .ours b { font-family: var(--sans); }
.spec td { font-size: 14px; font-variant-numeric: tabular-nums; }
.faq summary { font: 600 19px/1.3 var(--display); }
.faq summary::before { font-family: var(--sans); }
.logo .mark { font-size: 12px; }
.logo svg { width: 24px; height: 24px; }
.tour .steps, .tour .step { min-width: 0; }

/* css/campaigns/brand.css */
/* Production brand chrome for the campaign pages: the real logo (packages/traderpier/frontend/src/@static/images/logo.png,
   which is the sun-and-pier mark AND the white wordmark in one image) and the production footer. Loaded last. */

/* Logo: production renders the image alone, alt="TraderPier", no text beside it. */
.logo.brand-logo { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; line-height: 0; border-radius: 6px; }
.logo.brand-logo img { display: block; height: 28px; width: auto; }
.logo.brand-logo:focus-visible { outline: 2px solid rgb(255, 193, 63); outline-offset: 4px; }

/* Footer */
footer.site-foot { border-top: 1px solid var(--line); background: rgb(17, 17, 17); padding: 56px 0 28px; color: rgb(180, 180, 180); }
footer.site-foot .foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
footer.site-foot .foot-brand .about { color: rgb(180, 180, 180); font-size: 14px; line-height: 1.55; margin: 16px 0 0; max-width: 300px; }
footer.site-foot .foot-brand .contact { margin: 14px 0 0; font-size: 14px; }
footer.site-foot .foot-brand .contact a { color: rgb(238, 238, 238); text-decoration: none; }
footer.site-foot .foot-brand .contact a:hover { color: rgb(255, 193, 63); }
footer.site-foot .foot-brand .social { margin: 14px 0 0; display: flex; gap: 14px; }
footer.site-foot .foot-brand .social a { display: inline-flex; color: rgb(180, 180, 180); text-decoration: none; }
footer.site-foot .foot-brand .social a:hover { color: rgb(238, 238, 238); }
footer.site-foot .foot-brand .social svg { width: 20px; height: 20px; }
footer.site-foot .foot h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; color: rgb(238, 238, 238); text-transform: none; letter-spacing: 0; margin: 0 0 14px; }
footer.site-foot .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
footer.site-foot .foot a { color: rgb(180, 180, 180); text-decoration: none; }
footer.site-foot .foot a:hover { color: rgb(238, 238, 238); }
footer.site-foot .foot a:focus-visible, footer.site-foot .foot-bottom a:focus-visible { outline: 2px solid rgb(255, 193, 63); outline-offset: 2px; border-radius: 3px; }
footer.site-foot .legal { display: block; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: rgb(180, 180, 180); }
footer.site-foot .legal p { margin: 0 0 6px; max-width: 920px; }
footer.site-foot .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 18px; font-size: 12.5px; color: rgb(180, 180, 180); }
footer.site-foot .foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.site-foot .foot-bottom a { color: rgb(180, 180, 180); text-decoration: none; }
footer.site-foot .foot-bottom a:hover { color: rgb(238, 238, 238); }

@media (max-width: 1000px) {
  footer.site-foot .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.site-foot .foot > .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .logo.brand-logo img { height: 24px; }
  footer.site-foot { padding-top: 44px; }
  footer.site-foot .foot { gap: 28px 20px; }
}
footer.site-foot .foot-brand .contact a { display: inline-flex; align-items: center; gap: 8px; }
footer.site-foot .foot-brand .discord-ico { width: 20px; height: 20px; flex-shrink: 0; }

/* Upgrade section: the one paid-plan moment on each campaign page (approved copy, UPSELL-COPY-REVIEW.md section 1).
   A raised neutral card with a gold rule along its top edge so it reads as a distinct moment, white heading, muted
   subheading, and "See plans" in the secondary button style (the solid gold button stays reserved for "Start free").
   No gold tint sits behind any text. */
.upgrade { padding: 110px 0; border-top: 1px solid var(--line); }
.upgrade .wrap { max-width: 1320px; }
.up-card { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; padding: 56px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(160deg, rgb(28, 28, 28), rgb(19, 19, 19) 70%); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); overflow: hidden; }
.up-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgb(255, 193, 63), rgba(255, 193, 63, 0.15)); }
.up-card h2 { font: 700 clamp(32px, 3.6vw, 52px)/1.04 var(--display, var(--sans)); letter-spacing: -0.04em; color: var(--fg); text-wrap: balance; margin: 0; }
.up-card p { color: var(--muted); font-size: 18px; line-height: 1.55; margin: 20px 0 0; max-width: 520px; }
.up-card .up-cta { margin-top: 30px; }
.up-card .up-cta .btn { padding: 15px 26px; font-size: 16px; border-color: rgb(80, 80, 80); background: rgb(33, 33, 33); color: var(--fg); }
.up-card .up-cta .btn:hover { border-color: rgb(140, 140, 140); background: rgb(40, 40, 40); }
.up-card .up-cta .btn:focus-visible { outline: 2px solid rgb(255, 193, 63); outline-offset: 3px; }
.up-media { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgb(62, 62, 58); background: rgb(10, 10, 10); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.up-media video { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .upgrade { padding: 72px 0; }
  .up-card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 22px; }
  .up-card .up-cta .btn { width: 100%; justify-content: center; }
}

/* Responsive pass (phones to 1920): headlines break evenly instead of stranding their last word; the result chips
   that hang off the section clips stay inside the viewport on 1024-1400px screens (they pushed the page sideways);
   and every tap target on a phone is at least 44px tall. Layout only, no copy. */
h1, h2 { text-wrap: balance; }
@media (min-width: 901px) and (max-width: 1400px) {
  .chip { right: -12px; }
  .proof.flip .chip { left: -12px; }
}
@media (max-width: 760px) {
  .logo.brand-logo { min-height: 44px; }
  .nav-menu summary { min-height: 44px; display: inline-flex; align-items: center; }
  .btn-sm, .tour-tabs button, .bill button { min-height: 44px; }
  .tour .more, .proof .more, .plan-line .link { display: inline-flex; align-items: center; min-height: 44px; }
  .faq details { padding: 8px 0; }
  .faq summary { padding: 10px 0; }
  footer.site-foot .foot ul { gap: 0; }
  footer.site-foot .foot ul a, footer.site-foot .foot-brand .contact a, footer.site-foot .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  footer.site-foot .foot-bottom nav { gap: 0 18px; }
}
/* Running text never strands a single word on its last line, and the small gold eyebrow above a centred headline
   breaks evenly. */
p { text-wrap: pretty; }
.lp-for { text-wrap: balance; }
/* Closing bands on phones and portrait tablets: the headline sits low over the clip, where the clip's own axis labels and tab names
   showed through the old gradient and read as text colliding with the headline. Darken the lower 60% fully. */
@media (max-width: 900px) {
  body .bleed::after, body .lp-stage::after, body .stage::after, body .stage-band::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.99) 0%, rgba(10, 10, 10, 0.97) 60%, rgba(10, 10, 10, 0.4) 84%, rgba(10, 10, 10, 0.15) 100%); }
}

/* css/site/learn.css */
/* Learn pages (glossary, tools, spreadsheet). Loaded after /c9/system.css, /c9/product.css and /campaigns/brand.css.
   The proof, window and chip rules are the campaign product page's (campaigns/product.css), so a clip here looks like
   a clip there. Everything else is the reading layout: a hook-led hero, an article with a contents rail, term cards. */

body.learn { padding-bottom: 0; }

/* ---------- media primitives (from campaigns/product.css) ---------- */
.win { position: relative; border-radius: 16px; overflow: hidden; background: rgb(10, 10, 10); border: 1px solid rgb(62, 62, 58); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 193, 63, 0.08), 0 0 90px rgba(255, 193, 63, 0.10); }
.win-bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: rgb(25, 25, 25); border-bottom: 1px solid rgb(44, 44, 44); font: 500 12.5px/1 var(--sans); color: var(--muted); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgb(64, 64, 62); flex: none; }
.win-bar span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-bar b { color: var(--fg); font-weight: 600; }
.win > video { width: 100%; height: auto; display: block; }
.cap { margin: 14px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
figure { margin: 0; }
figure.clip { position: relative; }

.chip { position: absolute; right: -28px; bottom: 34px; z-index: 3; min-width: 210px; padding: 14px 18px; border-radius: 14px; background: rgba(25, 25, 25, 0.96); border: 1px solid rgba(255, 193, 63, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); transition: border-color 0.3s, box-shadow 0.3s; }
.chip.done { border-color: var(--gold); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 44px rgba(255, 193, 63, 0.28); }
.chip .st { display: none; }
.chip .st.on { display: block; animation: pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
.chip .big { display: block; font: 700 26px/1.05 var(--display); letter-spacing: -0.025em; color: var(--fg); }
.chip .big.up { color: var(--green); font-size: 34px; }
.chip .big.down { color: var(--red); font-size: 34px; }
.chip .sub { display: block; margin-top: 6px; font-size: 14px; color: rgb(214, 214, 212); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.proof.flip .chip, .g-visual .chip { right: auto; left: -28px; }

/* ---------- hero: the term, a hook that explains it, why it costs money, one visual ---------- */
.g-hero { position: relative; overflow: hidden; padding: 64px 0 104px; }
.g-hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 70%; height: 130%; background: radial-gradient(ellipse at 55% 50%, rgba(255, 193, 63, 0.14), rgba(255, 193, 63, 0) 60%); pointer-events: none; }
.g-hero .wrap { position: relative; max-width: 1440px; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.g-hero.wide-visual .wrap { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.g-hero.idx .wrap, .g-hero.tool .wrap { grid-template-columns: minmax(0, 1fr); }
.g-hero.idx, .g-hero.tool { padding-bottom: 48px; }
.g-hero.idx .g-copy, .g-hero.tool .g-copy { max-width: 980px; }
.g-hero h1 { font-size: clamp(42px, 5vw, 76px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.g-hero h1 em { font-style: normal; color: var(--gold); }
.g-hero .hook { margin: 26px 0 0; font: 500 clamp(21px, 1.9vw, 27px)/1.32 var(--display); letter-spacing: -0.015em; color: var(--fg); max-width: 620px; text-wrap: pretty; }
.g-hero.idx .hook, .g-hero.tool .hook { max-width: 780px; }
.g-hero .cost { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 580px; padding-left: 16px; border-left: 2px solid var(--gold); }
.g-hero.tool .cost { max-width: 760px; }
.g-hero .ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 34px; }
.g-hero .ctas .btn { padding: 17px 30px; font-size: 17px; box-shadow: 0 10px 40px rgba(255, 193, 63, 0.25); }
.g-hero .note, .g-cta .note { font-size: 15px; color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 600 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin: 0 0 22px; }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.g-visual { min-width: 0; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* ---------- the luck chart (lab) ---------- */
.lab { background: rgb(22, 22, 22); border: 1px solid rgb(62, 62, 58); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 193, 63, 0.08); }
.lab-body { padding: 24px; }
.lab svg { width: 100%; height: auto; display: block; margin: 10px 0 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: middle; }
.legend i.dash { border-top: 2px dashed rgb(150, 150, 148); height: 0; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.controls label { font-size: 13px; color: var(--muted); display: grid; gap: 8px; min-width: 0; }
.controls label b { font: 600 20px/1 var(--display); color: var(--fg); }
.controls input[type=range] { width: 100%; accent-color: rgb(255, 193, 63); }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 22px; }
.readouts > div { padding: 16px 16px 0 0; font-size: 13px; color: var(--muted); min-width: 0; }
.readouts b { display: block; font: 600 32px/1.1 var(--display); color: var(--fg); margin-bottom: 4px; letter-spacing: -0.02em; }
.readouts .warn b { color: var(--red); }
.g-part .luck-fig { margin-top: 26px; }

/* ---------- CSCV splits (PBO) ---------- */
.cscv { background: rgb(22, 22, 22); border: 1px solid rgb(62, 62, 58); border-radius: 16px; padding: 26px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 193, 63, 0.08); }
.cscv-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 14px; color: var(--muted); }
.cscv-top b { color: var(--fg); font: 600 16px/1 var(--display); }
.cscv-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cscv-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cscv-key i + i, .cscv-key .k-oos { margin-left: 10px; }
.k-is { background: var(--gold); }
.k-oos { background: rgb(70, 70, 68); }
.cscv-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 22px 0 6px; }
.cscv-row .cell { height: 132px; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font: 600 13px/1 var(--sans); transition: background-color 0.35s, color 0.35s, transform 0.35s; background: rgb(70, 70, 68); color: rgb(214, 214, 212); }
.cscv-row .cell.is { background: var(--gold); color: var(--ink); transform: translateY(-6px); }
.cscv-real { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 20px; }
.cscv-real > div { padding: 16px 14px 0 0; font-size: 13px; color: var(--muted); min-width: 0; }
.cscv-real b { display: block; font: 600 32px/1.1 var(--display); color: var(--fg); margin-bottom: 4px; }
.cscv-real .warn b { color: var(--red); }

/* ---------- 60/20/20 split (walk-forward) ---------- */
.wf { background: rgb(22, 22, 22); border: 1px solid rgb(62, 62, 58); border-radius: 16px; padding: 26px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 193, 63, 0.08); }
.wf-bar { display: grid; grid-template-columns: 60fr 20fr 20fr; gap: 6px; }
.seg { position: relative; border-radius: 10px; padding: 16px 14px 18px; min-height: 190px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }
.seg.rank { background: linear-gradient(180deg, rgba(255, 193, 63, 1), rgb(224, 165, 40)); color: var(--ink); }
.seg.val { background: rgb(36, 36, 35); border: 1px solid rgb(70, 70, 68); color: var(--fg); }
.seg .pct { font: 700 15px/1 var(--display); }
.seg .nm { font: 600 15px/1.2 var(--sans); }
.seg .dt { font-size: 13px; opacity: 0.8; }
.seg .sc { margin-top: auto; font: 700 clamp(26px, 2.6vw, 40px)/1 var(--display); letter-spacing: -0.03em; }
.seg.val .sc { opacity: 0; transform: translateY(10px); animation: land 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards; }
.seg.v1 .sc { animation-delay: 1.1s; }
.seg.v2 .sc { animation-delay: 1.9s; }
.seg.rank::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); animation: scan 1s 0.2s ease-out forwards; }
@keyframes scan { to { transform: translateX(100%); } }
@keyframes land { to { opacity: 1; transform: none; } }
.down { color: var(--red); }
.wf-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.wf-notes p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.wf-notes b { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .seg.val .sc { animation: none; opacity: 1; transform: none; } .seg.rank::after { display: none; } .g-visual { animation: none; } }

/* ---------- article ---------- */
.g-read { padding: 96px 0; border-top: 1px solid var(--line); }
.g-read .wrap { max-width: 1240px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
.g-toc { position: sticky; top: 92px; }
.g-toc p { font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.g-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; border-left: 1px solid var(--line); }
.g-toc li { counter-increment: toc; }
.g-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--muted); text-decoration: none; }
.g-toc a:hover { color: var(--fg); border-left-color: var(--gold); }
.g-article { max-width: 760px; }
.g-part + .g-part { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line-soft); }
.g-part { scroll-margin-top: 90px; }
.g-part h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 20px; text-wrap: balance; }
.g-part p { font-size: 18px; line-height: 1.7; color: rgb(214, 214, 212); margin: 0 0 18px; }
.g-part ul { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 12px; }
.g-part li { position: relative; padding: 16px 18px 16px 44px; background: rgb(22, 22, 22); border: 1px solid var(--line); border-radius: 12px; font-size: 17px; line-height: 1.6; color: rgb(214, 214, 212); }
.g-part li::before { content: ''; position: absolute; left: 18px; top: 25px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.g-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 22px 0 0; }
.g-links a { font: 600 16px/1.4 var(--sans); color: var(--gold); text-decoration: none; }
.g-links a::after { content: ' \2192'; }
.g-links a:hover { text-decoration: underline; }
.g-part .luck-fig .lab svg { margin-top: 6px; }

/* ---------- see it in TraderPier (proof, from campaigns/product.css) ---------- */
.proof { padding: 120px 0; border-top: 1px solid var(--line); }
.proof .wrap { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.proof.flip .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.proof.flip .wrap > :first-child { order: 2; }
.proof .n { font: 600 14px/1 var(--sans); color: var(--gold); margin: 0 0 18px; }
.proof h2 { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.proof p { color: var(--muted); font-size: 18px; margin: 20px 0 0; max-width: 520px; }
.proof .more { display: inline-block; margin-top: 24px; font: 600 16px/1.4 var(--sans); color: var(--gold); text-decoration: none; }
.proof .more::after { content: ' \2192'; }
.proof .more:hover { text-decoration: underline; }
.proof .win { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 193, 63, 0.06); }
.see-it { background: linear-gradient(180deg, rgba(255, 193, 63, 0.035), rgba(255, 193, 63, 0) 60%); }

/* ---------- term cards ---------- */
.g-related { padding: 100px 0; border-top: 1px solid var(--line); }
.g-related h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.035em; margin-bottom: 36px; }
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.term-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; background: linear-gradient(160deg, rgb(28, 28, 28), rgb(20, 20, 20) 70%); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--fg); transition: border-color 0.2s, transform 0.2s; }
.term-card:hover { border-color: rgb(110, 100, 70); transform: translateY(-2px); }
.term-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.term-card h3, .term-card h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.term-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.tc-tag { align-self: flex-start; font: 600 11.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: rgb(36, 36, 35); padding: 6px 9px; border-radius: 999px; }
.tc-go { font: 600 14px/1 var(--sans); color: var(--gold); margin-top: 6px; }
.tc-go::after { content: ' \2192'; }
.term-card.tool { border-color: rgb(90, 80, 50); }
.g-index { padding: 0 0 100px; }
.g-index .wrap { max-width: 1320px; }
.term-grid.five { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.term-grid.five .term-card { grid-column: span 2; min-height: 260px; padding: 30px 28px 26px; }
.term-grid.five .term-card:nth-child(4) { grid-column: 2 / span 2; }
.term-card.big h2 { font-size: clamp(26px, 2.2vw, 32px); }
.term-card.big p { font-size: 17px; }
.tc-num { position: absolute; right: 24px; top: 22px; font: 700 40px/1 var(--display); color: rgb(48, 48, 46); letter-spacing: -0.04em; }

/* ---------- calculator ---------- */
.g-calc-sec { padding: 96px 0; border-top: 1px solid var(--line); }
.g-calc-sec .wrap { max-width: 1320px; }
.g-calc-sec.tool-calc { padding-top: 24px; border-top: 0; }
.g-calc-sec .g-links { margin-top: 26px; }
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 0; border: 1px solid rgb(62, 62, 58); border-radius: 18px; overflow: hidden; background: rgb(22, 22, 22); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 193, 63, 0.07); }
.calc-form { padding: 30px; display: grid; gap: 20px; align-content: start; }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.fl { font: 600 14px/1.35 var(--sans); color: var(--fg); }
.fh { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.field input, .field textarea { width: 100%; background: rgb(14, 14, 14); border: 1px solid rgb(70, 70, 68); border-radius: 10px; color: var(--fg); font: 500 17px/1.4 var(--sans); padding: 12px 14px; font-variant-numeric: tabular-nums; }
.field textarea { font-size: 15px; line-height: 1.6; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 193, 63, 0.18); }
.calc-form .btn { justify-self: start; padding: 15px 24px; font-size: 16px; border: 0; cursor: pointer; font-family: var(--sans); }
.calc-form .btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.calc-out { padding: 30px; background: rgb(17, 17, 17); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.out-label { font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
#dsr-output p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: rgb(214, 214, 212); }
#dsr-output p.headline { font: 700 clamp(26px, 2.4vw, 34px)/1.15 var(--display); letter-spacing: -0.025em; color: var(--fg); margin-bottom: 18px; }
#dsr-output[data-status="ok"] p:last-child { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgb(28, 28, 28); border: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--fg); }
#dsr-output[data-status="input-error"] p, #dsr-output[data-status="unavailable"] p:first-child { color: var(--red); }
.out-note { margin: auto 0 0; padding-top: 20px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- spreadsheet comparison ---------- */
.vs-sheet { padding: 100px 0; border-top: 1px solid var(--line); }
.vs-sheet .wrap { max-width: 1100px; }
.vs-sheet h2 em { font-style: normal; color: var(--gold); }
.cmp { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgb(20, 20, 20); }
.cmp-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row > span { padding: 18px 22px; font-size: 16px; line-height: 1.45; color: var(--muted); min-width: 0; }
.cmp-row > span:first-child { color: var(--fg); font-weight: 600; }
.cmp-row .us { color: var(--fg); background: rgba(255, 255, 255, 0.025); border-left: 1px solid var(--line); }
.cmp-row .us::before { content: '\2713'; color: var(--gold); font-weight: 700; margin-right: 10px; }
.cmp-head > span { font: 600 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding: 16px 22px; }
.cmp-head > span:last-child { color: var(--gold); border-left: 1px solid var(--line); }
.g-hero.sheet h1 { font-size: clamp(40px, 4.4vw, 68px); }
/* The free journal template download (2026-10-09): the comparison section's head, with the hero's button row. */
.sheet-template .sec-head { margin-bottom: 28px; }
.sheet-template .ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.sheet-template .note { font-size: 15px; color: var(--muted); margin: 0; }
.sheet-template .ctas + .note { margin-top: 18px; }

/* ---------- faq (from campaigns/product.css) ---------- */
.faq-sec { padding: 88px 0 110px; border-top: 1px solid var(--line); }
.faq-sec .wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; }
.faq-sec h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.035em; }
.faq details p { font-size: 16px; color: var(--muted); }

/* ---------- closing CTA ---------- */
.g-cta { padding: 40px 0 120px; }
.cta-box { position: relative; overflow: hidden; text-align: center; padding: 80px 32px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 50% 120%, rgba(255, 193, 63, 0.20), rgba(255, 193, 63, 0) 60%), linear-gradient(160deg, rgb(28, 28, 28), rgb(17, 17, 17) 70%); }
.cta-box h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.045em; max-width: 900px; margin: 0 auto; text-wrap: balance; }
.cta-box p { font-size: clamp(17px, 1.6vw, 21px); color: rgb(214, 214, 212); margin: 20px 0 30px; }
.cta-box .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-box .btn-gold { box-shadow: 0 10px 40px rgba(255, 193, 63, 0.25); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .g-hero .wrap, .g-hero.wide-visual .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 0 28px; }
  .g-hero .g-copy { max-width: 760px; }
  .g-visual .chip { left: auto; right: 16px; }
  .term-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term-grid.five .term-card, .term-grid.five .term-card:nth-child(4) { grid-column: auto; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .g-read { padding: 64px 0; }
  .g-read .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .g-toc { position: static; }
  .proof { padding: 72px 0; }
  .proof .wrap, .proof.flip .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proof.flip .wrap > :first-child { order: 0; }
  .proof p { font-size: 17px; }
  .chip, .proof.flip .chip, .g-visual .chip { position: relative; left: auto; right: auto; bottom: auto; margin: 12px 0 0; min-width: 0; padding: 12px 16px; }
  .chip .st.on { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .chip .big, .chip .big.up, .chip .big.down { font-size: 26px; }
  .chip .sub { margin-top: 0; }
  .faq-sec { padding: 64px 0 80px; }
  .faq-sec .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .g-related, .vs-sheet, .g-calc-sec { padding: 72px 0; }
  .g-calc-sec.tool-calc { padding-top: 8px; }
}
@media (max-width: 700px) {
  .g-hero { padding: 32px 0 64px; }
  .g-hero .wrap, .g-hero.wide-visual .wrap { padding: 0 16px; gap: 32px; }
  .g-hero h1 { font-size: 42px; }
  .g-hero.sheet h1 { font-size: 36px; }
  .g-hero .hook { font-size: 20px; }
  .g-hero .cost { font-size: 16px; }
  .g-hero .ctas .btn { padding: 15px 26px; }
  .win-bar { height: 32px; }
  .lab-body, .cscv, .wf { padding: 16px; }
  .controls, .readouts, .cscv-real { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .readouts > div, .cscv-real > div { padding-top: 12px; }
  .cscv-row { gap: 4px; }
  .cscv-row .cell { height: 84px; font-size: 11px; }
  .wf-bar { grid-template-columns: minmax(0, 1fr); }
  .seg { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px; }
  .seg .sc { margin: 0 0 0 auto; font-size: 26px; }
  .wf-notes { grid-template-columns: minmax(0, 1fr); }
  .g-part p { font-size: 17px; }
  .g-part li { font-size: 16px; padding: 14px 14px 14px 38px; }
  .g-part li::before { left: 15px; top: 22px; }
  .term-grid.five { grid-template-columns: minmax(0, 1fr); }
  .term-grid.five .term-card { min-height: 0; }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-form, .calc-out { padding: 20px; }
  .calc-form .btn { justify-self: stretch; justify-content: center; white-space: normal; text-align: center; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); }
  .cmp-row > span { padding: 6px 16px; }
  .cmp-row > span:first-child { padding-top: 16px; }
  .cmp-row > span:nth-child(2)::before { content: 'Spreadsheet: '; color: var(--dim); }
  .cmp-row .us { border-left: 0; background: none; padding-bottom: 16px; }
  .cta-box { padding: 52px 20px; }
  .cta-box .ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .chip .st, .cscv-row .cell { animation: none !important; transition: none !important; } }

/* One left edge for every learn section: the hero's (1440 max, 48px gutter), so cards, article and calculator line up under the headline. */
.g-read .wrap, .g-index .wrap, .g-calc-sec .wrap, .g-related .wrap, .g-cta .wrap, .vs-sheet .wrap { max-width: 1440px; padding: 0 48px; }
.vs-sheet .cmp, .vs-sheet .sec-head { max-width: 1100px; }
@media (max-width: 1180px) { .g-read .wrap, .g-index .wrap, .g-calc-sec .wrap, .g-related .wrap, .g-cta .wrap, .vs-sheet .wrap { padding: 0 28px; } }
@media (max-width: 700px) { .g-read .wrap, .g-index .wrap, .g-calc-sec .wrap, .g-related .wrap, .g-cta .wrap, .vs-sheet .wrap { padding: 0 16px; } }

/* css/site/site.css */
/* Preview site chrome, shared by every page under /site/. Loads last, after the page's own CSS.
   1. The Compare dropdown in the desktop nav (opens on hover with a pointer, and on click/tap and keyboard via
      /site/js/nav.js), styled like the nav's pill links.
   2. The mobile menu's Compare group, and a scroll cap so the longer menu never runs off a short phone screen.
   3. The footer grid for four columns (brand + Product + Compare + Company) now the Learn column is gone.
   4. A chip offset fix for the spreadsheet page (below). */

.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: inherit; color: rgb(214, 214, 212); background: none; border: 0; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.nav-drop-btn::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.nav-drop-btn:hover, .nav-drop-btn.on, .nav-drop.open .nav-drop-btn { color: var(--fg); background: rgba(63, 63, 70, 0.6); }
.nav-drop.open .nav-drop-btn::after { transform: translateY(1px) rotate(225deg); }
.nav-drop-btn:focus-visible { outline: 2px solid rgb(255, 193, 63); outline-offset: 2px; }
.nav-drop-panel { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; z-index: 60; }
.nav-drop-panel .in { display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: rgb(24, 24, 24); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.nav-links .nav-drop-panel a { display: block; padding: 9px 12px; border-radius: 9px; color: rgb(214, 214, 212); }
.nav-links .nav-drop-panel a:hover, .nav-links .nav-drop-panel a:focus-visible, .nav-links .nav-drop-panel a.on { color: var(--fg); background: rgba(63, 63, 70, 0.6); }
.nav-links .nav-drop-panel a:focus-visible { outline: 2px solid rgb(255, 193, 63); outline-offset: -2px; }
.nav-drop.open .nav-drop-panel { display: block; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-panel { display: block; }
}

.menu-panel { max-height: calc(100svh - 60px); overflow-y: auto; }
.menu-group { display: flex; flex-direction: column; gap: 12px; }
.menu-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(150, 150, 150); padding-top: 6px; }
.menu-group a { padding-left: 12px; }

footer.site-foot .foot { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  footer.site-foot .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  footer.site-foot .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* learn.css (the spreadsheet page) loads after brand.css and restores the -28px chip offset that brand.css pulls in
   to -12px on 901-1400px screens, so its result chips pushed the page 8px sideways at 1024. Same fix as brand.css. */
@media (min-width: 901px) and (max-width: 1400px) {
  body.learn .proof .chip { right: -12px; }
  body.learn .proof.flip .chip { right: auto; left: -12px; }
}

/* Every hero headline carries one orange closing phrase, whatever the page's hero class. */
h1 em { font-style: normal; color: var(--gold, rgb(255, 193, 63)); }

/* Journal hero base: the v6 dashboard still is 2432x936 (2000x770 in crop units) with no app sidebar; phones crop onto
   the calendar and the expectancy card. */
.j-dash .crop { --iw: 2000; --x: 0; --y: 0; --w: 2000; --h: 770; }
@media (max-width: 900px) { .j-dash .crop { --x: 1000; --y: 340; --w: 1000; --h: 430; } }

/* "Open chart" (owner, 2026-10-02): a secondary nav button between Sign in and Start free, and a quiet text link
   on its own line under each hero's main button. Both go to the account-free chart. The nav button folds into the
   mobile menu at phone widths, where the bar has no room for a third button. */
.nav-cta .btn-ghost.nav-chart { white-space: nowrap; }
@media (max-width: 760px) { .nav-cta .btn-ghost.nav-chart { display: none; } }
/* Below 375px the bar has no room for Sign in either: /product and /pricing keep it visible on phones, and at 320px
   it pushed the page 50px sideways. It folds into the mobile menu, which already lists it; 375px and up are unchanged. */
@media (max-width: 374px) { .nav-cta .btn-ghost { display: none; } }
.chart-link { margin: 14px 0 0; font-size: 14px; line-height: 1.4; }
.chart-link a { color: var(--muted, rgb(170, 170, 168)); text-decoration: none; text-underline-offset: 3px; }
.chart-link a:hover, .chart-link a:focus-visible { color: var(--fg, rgb(238, 238, 238)); text-decoration: underline; }

/* blog/blog.css */
/* Blog posts and the blog index. Loaded after learn.css and site.css: the hero (.g-hero.idx), the
   reading column (.g-article) and the body typography (.g-part) are the learn pages' own, so a post
   reads like the spreadsheet page. This file adds only what markdown produces that learn.css never
   styles: several headings in one part, inline links, images and clips, captioned code, the date and
   the closing band. Dark only, like every marketing page; no prefers-color-scheme. */

.blog .g-hero .hook { max-width: 760px; }

.blog-article { padding: 72px 0 40px; border-top: 1px solid var(--line); }
.blog-article .wrap { max-width: 1440px; padding: 0 48px; }
.blog-article .g-article { min-width: 0; }
.blog-article .g-part h2:not(:first-child) { margin-top: 56px; }
.blog-article .g-part h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; margin: 40px 0 14px; }
.blog-article .g-part h2, .blog-article .g-part h3 { scroll-margin-top: 90px; }
.blog-article .g-part ol { margin: 8px 0 18px; padding-left: 24px; font-size: 18px; line-height: 1.7; color: rgb(214, 214, 212); }
.blog-article .g-part ol li { padding: 0 0 6px; background: none; border: 0; border-radius: 0; }
.blog-article .g-part ol li::before { display: none; }
.blog-article .g-part a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.blog-article .g-part a:hover { color: var(--fg); }
.blog-article .g-part strong { color: var(--fg); }
.blog-article .g-part blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--gold); }
.blog-article .g-part code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
/* A picture or clip is a link to its full-size file (tap to enlarge; scripts/marketing-blog.js). */
.blog-article .g-part a.blog-media { display: block; cursor: zoom-in; text-decoration: none; }
.blog-article .g-part img, .blog-article .g-part video { display: block; max-width: 100%; height: auto; margin: 8px 0 18px; border-radius: 12px; border: 1px solid var(--line); }
.blog-article .blog-discuss { margin: 32px 0 0; font-size: 16px; line-height: 1.6; }
.blog-article .blog-discuss a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Captioned code. The <pre> scrolls inside itself, so a long line never widens the page at 320px. */
.blog-article figure.code { margin: 8px 0 24px; min-width: 0; }
.blog-article figure.code pre { margin: 0; overflow-x: auto; padding: 18px 20px; background: rgb(22, 22, 22); border: 1px solid var(--line); border-radius: 12px; }
.blog-article figure.code code { font: 400 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(212, 212, 212); white-space: pre; }
.blog-article figure.code figcaption { margin: 10px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }

/* The indicator editor's dark-plus colours, the share page's SOURCE_TOKEN_CLASS hexes (pinned by test). */
.tok-comment { color: #6A9955; font-style: italic; }
.tok-string { color: #CE9178; }
.tok-number { color: #B5CEA8; }
.tok-keyword { color: #C586C0; }
.tok-type { color: #4EC9B0; }
.tok-builtin { color: #4FC1FF; }

/* The blog's eyebrow: small gold capitals over a dark surface. */
.blog .eyebrow { font: 600 13px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* Topic ink: each topic's color on the neutral dark surface (never on a gold tint). */
.tp-trading-process { color: var(--gold); }
.tp-ai-in-trading { color: var(--violet); }
.tp-backtesting { color: var(--teal); }
.tp-engineering { color: var(--blue); }

/* The meta line: topic links, date, read time (posts, list rows and More in). */
.blog .bm { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.blog .bm-tag { text-decoration: none; }
.blog .bm-tags { display: contents; }
.blog .bm-tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog .bm-tag + .bm-tag::before { content: '\00B7'; display: inline-block; margin-right: 10px; color: var(--dim); }

/* A post's breadcrumb and topic chips, above its title. */
.blog-crumb { margin: 0 0 14px; font: 600 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.blog-crumb a { color: var(--muted); text-decoration: none; }
.blog-crumb a:hover { color: var(--gold); }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.blog-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font: 600 12px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.blog-chip:hover { border-color: rgb(80, 80, 80); }
.blog-hero .bm { margin: 16px 0 18px; }

/* "In TraderPier": the post's primary topic, its product page and the app. */
.blog-product { padding: 8px 0 24px; }
.blog-product .wrap { max-width: 1440px; padding: 0 48px; }
.blog-product-box { max-width: 760px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.blog-product-box .eyebrow { margin: 0 0 8px; }
.blog-product-box h2 { margin: 0 0 8px; font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -0.02em; }
.blog-product-text { margin: 0 0 16px; color: rgb(214, 214, 212); }
.blog-product-box .ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.blog-pagelink { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.blog-pagelink:hover { color: var(--gold); }
.blog-product-box .chart-link { margin: 12px 0 0; }
.blog-product-box .chart-link a { color: var(--muted); }

/* "More in <topic>". */
.blog-more-band { padding: 56px 0 8px; }
.blog-more-band .wrap { max-width: 1440px; padding: 0 48px; }
/* Set apart from the "In TraderPier" box above: a hairline, more room and a muted label, so the two
   blocks never read as one (owner, 2026-10-07). */
.blog-more { max-width: 760px; padding-top: 28px; border-top: 1px solid var(--line); }
.blog-more .eyebrow { color: var(--muted); }
.blog-more ol { list-style: none; margin: 12px 0 0; padding: 0; }
.blog-more li { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.blog-more li > a { font: 600 20px/1.25 var(--display); color: var(--fg); text-decoration: none; overflow-wrap: break-word; }
.blog-more li > a:hover { color: var(--gold); }

/* ---------- List pages: "Big type, Brand gradient" (blog addendum section 2) ---------- */

/* A soft, slowly drifting mesh in the brand colors behind a huge typographic list. No media. */
.bx { display: grid; position: relative; background: rgb(17, 17, 17); }
body.blog section.bl-page { padding: 0; }
.bx-bg { grid-area: 1 / 1; position: sticky; top: 60px; height: calc(100vh - 60px); align-self: start; overflow: hidden; }
.v9-mesh {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 20%, rgba(255, 193, 63, 0.14), rgba(255, 193, 63, 0) 70%),
    radial-gradient(35% 30% at 85% 30%, rgba(110, 214, 200, 0.09), rgba(110, 214, 200, 0) 70%),
    radial-gradient(40% 35% at 70% 80%, rgba(199, 146, 234, 0.08), rgba(199, 146, 234, 0) 70%),
    radial-gradient(35% 30% at 20% 75%, rgba(122, 184, 255, 0.07), rgba(122, 184, 255, 0) 70%),
    rgb(17, 17, 17);
  animation: bl-drift 60s ease-in-out infinite alternate;
}
@keyframes bl-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.bx-list { grid-area: 1 / 1; position: relative; min-width: 0; padding: 56px 0 64px; }
.bx-wrap { position: relative; }

/* Head: the index's heading at eyebrow scale; a topic's breadcrumb, big heading and intro. */
.bl-head { margin-bottom: 28px; }
.bl-eyebrow { margin: 0; }
.bl-crumb { margin: 0 0 14px; }
.bl-crumb a { color: inherit; text-decoration: none; }
.bl-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-topic-h { margin: 0 0 14px; font: 600 clamp(40px, 6vw, 84px)/1 var(--display); letter-spacing: -0.035em; overflow-wrap: break-word; }
.bl-intro { max-width: 720px; margin: 12px 0 0; color: rgb(214, 214, 212); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }

/* Anything the page script hides stays hidden, whatever display its class sets. */
.bl-list [hidden] { display: none !important; }

/* Tools: search (revealed by the page script) and the topic chips (plain links). */
.bl-tools { display: grid; gap: 16px; margin-bottom: 20px; }
.bl-search { display: grid; gap: 8px; max-width: 560px; }
.bl-search[hidden] { display: none; }
.bl-search label { font: 600 12px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.bl-field { position: relative; display: flex; align-items: center; }
.bl-ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.bl-field input { width: 100%; min-width: 0; min-height: 48px; font: 400 16px/1.2 var(--sans); color: var(--fg); background: rgba(24, 24, 27, 0.85); border: 1px solid var(--line); border-radius: 12px; padding: 13px 92px 13px 42px; -webkit-appearance: none; appearance: none; }
.bl-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bl-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.bl-kbd { position: absolute; right: 12px; font: 600 12px/1 var(--sans); color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; pointer-events: none; }
.bl-field input:focus ~ .bl-kbd, .bl-clear:not([hidden]) ~ .bl-kbd { display: none; }
.bl-search:has(.bl-clear:not([hidden])) .bl-kbd { display: none; }
.bl-clear { position: absolute; right: 6px; min-height: 40px; font: 600 13px/1 var(--sans); color: var(--muted); background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.bl-clear:hover { color: var(--fg); background: rgba(63, 63, 70, 0.5); }

.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chips .tchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 500 14px/1 var(--sans); color: var(--muted); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; }
.bl-chips .tchip:hover { color: var(--fg); border-color: rgb(80, 80, 80); }
.bl-chips .tchip .bl-c { font-weight: 500; color: var(--dim); }
.bl-chips .tchip.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.bl-chips .tchip.on .bl-c { color: var(--ink); opacity: 0.7; }
.bl-chips .tchip.on:hover { background: rgb(255, 193, 63); color: var(--ink); opacity: 0.9; }

/* Search status, empty and failure states. */
.bl-status { min-height: 24px; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.bl-status p { margin: 0 0 4px; }
.bl-status a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.bl-status a:hover { color: var(--gold); }
.bl-empty { padding: 40px 0 24px; border-top: 1px solid rgba(238, 238, 238, 0.1); color: var(--muted); }
.bl-empty[hidden] { display: none; }
.bl-empty p { margin: 0; }
.bl-empty .bl-empty-h { margin-bottom: 10px; font: 600 clamp(26px, 3.4vw, 44px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--fg); overflow-wrap: anywhere; }

/* The rows: number, huge title, meta line. Pointing at (or tabbing into) one lights its number gold
   and dims the rest; a device with no hover shows every row at full strength. */
.bl-rows { list-style: none; margin: 0; padding: 0; }
.bx-it { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid rgba(238, 238, 238, 0.1); transition: opacity 0.25s; }
.bx-n { padding-top: 14px; font: 600 18px/1 var(--display); color: var(--dim); }
.bx-body { min-width: 0; }
.bx-it h2.bt { max-width: 1100px; margin: 0 0 12px; font: 600 clamp(28px, 4.6vw, 64px)/1.02 var(--display); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; }
.bx-it h2.bt a { color: var(--fg); text-decoration: none; }
.bx-it h2.bt a:hover { color: var(--gold); }
@media (hover: hover) {
  .bl-rows:hover .bx-it, .bl-rows:focus-within .bx-it { opacity: 0.45; }
  .bl-rows .bx-it:hover, .bl-rows .bx-it:focus-within { opacity: 1; }
  .bx-it:hover .bx-n, .bx-it:focus-within .bx-n { color: var(--gold); }
}

/* Pagination. */
.bl-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(238, 238, 238, 0.1); }
.bl-pg { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font: 600 15px/1 var(--sans); color: var(--fg); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; }
.bl-pg:hover { color: var(--gold); border-color: rgb(80, 80, 80); }
.bl-pg-none { visibility: hidden; }
.bl-nums { display: flex; gap: 6px; }
.bl-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; font: 600 16px/1 var(--display); color: var(--muted); text-decoration: none; border-radius: 10px; }
.bl-num:hover { color: var(--fg); background: rgba(63, 63, 70, 0.5); }
.bl-num.on { background: var(--gold); color: var(--ink); }
.bl-num.on:hover { background: rgb(255, 193, 63); color: var(--ink); opacity: 0.9; }
.bl-pageof { margin: 10px 0 0; color: var(--dim); font-size: 13px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .v9-mesh, .bx-it { animation: none; transition: none; }
}

@media (max-width: 700px) {
  .bx-list { padding: 32px 0 44px; }
  .bx-it { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  .bx-n { padding-top: 8px; font-size: 14px; }
  .bx-it h2.bt { font-size: clamp(26px, 8vw, 34px); }
  .bl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .bl-chips::-webkit-scrollbar { display: none; }
  .bl-chips .tchip { flex: 0 0 auto; min-height: 44px; }
  .bl-kbd { display: none; }
  .bl-field input { padding-right: 72px; }
  .bl-pg { padding: 0 10px; font-size: 14px; }
  .bl-num { min-width: 40px; }
}

@media (max-width: 380px) {
  .bl-nums { order: 3; width: 100%; justify-content: center; }
}

/* The closing band: the product page's hero call to action, reused word for word. */
.blog-closing { padding: 40px 0 120px; }
.blog-closing .wrap { max-width: 1440px; padding: 0 48px; }
.blog-closing .ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.blog-closing .note { font-size: 15px; color: var(--muted); }

@media (max-width: 1180px) {
  .blog-article .wrap, .blog-closing .wrap, .blog-product .wrap, .blog-more-band .wrap { padding: 0 28px; }
}

@media (max-width: 700px) {
  .blog-article { padding: 48px 0 24px; }
  .blog-article .wrap, .blog-closing .wrap, .blog-product .wrap, .blog-more-band .wrap { padding: 0 16px; }
  .blog-product-box { padding: 18px; }
  .blog-chip { min-height: 44px; }
  .blog-article .g-part ol { font-size: 17px; }
  .blog-article figure.code pre { padding: 14px 14px; }
  .blog-article figure.code code { font-size: 13px; }
  .blog-closing { padding: 24px 0 80px; }
}

/* studies/studies.css */
/* Study pages (`scripts/marketing-studies.js`, `marketing-site/studies/studies.js`): the answer, the interactive
   charts and the tables, on the blog shell's tokens. Charts use one hue: the site gold for the row or column the title
   is about, a dimmer gold for the rest (owner, 2026-10-09: charts must say what they show, never truncate, and react
   to hover, tap and keys). */
.study-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 18px 0 6px; }
.study-answer-number { font: 700 56px/1 var(--display); color: var(--gold); margin: 0; font-variant-numeric: tabular-nums; }
.study-answer-text { font: 400 18px/1.5 var(--sans); color: var(--fg); margin: 0; flex: 1 1 280px; }
.study-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.study-split .study-answer { flex-direction: column; align-items: flex-start; }
.study-split .study-answer-text { flex: none; font-size: 16px; }
.study-answer-second .study-answer-number { color: var(--fg); }

/* The chart card. */
.study-viz { margin: 24px 0; padding: 18px 18px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.blog-article .g-part .study-viz { margin: 24px 0; }
.study-viz-title, .blog-article .g-part .study-viz-title { font: 600 18px/1.4 var(--display); color: var(--fg); margin: 0 0 4px; overflow-wrap: anywhere; }
.study-viz-axis, .blog-article .g-part .study-viz-axis { font: 400 13px/1.45 var(--sans); color: var(--muted); margin: 0 0 12px; overflow-wrap: anywhere; }
.study-viz-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.study-viz-table th, .study-viz-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
.study-viz-table th[scope="row"], .study-viz-table thead th:first-child { text-align: left; font-weight: 500; color: var(--fg); }
.study-viz-table thead th { font-size: 12px; font-weight: 500; color: var(--muted); }
.sv-details { margin: 12px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.sv-details summary { cursor: pointer; color: var(--gold); }
.sv-details summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sv-details .study-viz-table { margin-top: 8px; }

/* Controls: radio-style button groups that wrap. */
.sv-controls { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 14px; }
.sv-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-control-label { font: 500 12px/1.2 var(--sans); color: var(--muted); }
.sv-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-option { font: 500 13px/1.2 var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.sv-option:hover { color: var(--fg); background: rgba(63, 63, 70, 0.5); }
.sv-option[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sv-option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The readout: exact value and sample size for whatever is hovered, tapped or focused. Inside the card, two lines. */
.sv-readout, .blog-article .g-part .sv-readout { margin: 12px 0 0; min-height: 2.9em; font: 500 14px/1.45 var(--sans); color: var(--fg); background: var(--panel); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; }

/* Horizontal bars: label column, bar, value column. Labels wrap; values never sit inside a bar. */
.sv-bars { display: grid; gap: 4px; }
.sv-row { display: grid; grid-template-columns: minmax(84px, 9.5rem) minmax(0, 1fr) 4.6rem; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; cursor: default; outline: none; }
.sv-row:hover, .sv-row-active { background: var(--panel); }
.sv-row:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.sv-label { font: 500 14px/1.3 var(--sans); color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.sv-row-on .sv-label { color: var(--fg); font-weight: 600; }
.sv-track { display: block; height: 14px; background: var(--line-soft); border-radius: 0 4px 4px 0; min-width: 0; }
.sv-fill { display: block; height: 100%; background: rgba(255, 193, 63, 0.55); border-radius: 0 4px 4px 0; }
.sv-row-on .sv-fill { background: var(--gold); }
.sv-value { font: 600 14px/1.3 var(--display); color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A series over the session (line or columns), with HTML labels so text stays readable at any width. */
.sv-series { position: relative; padding: 0 0 0 44px; }
.sv-y { position: absolute; left: 0; width: 38px; text-align: right; font: 500 11px/1 var(--sans); color: var(--dim); transform: translateY(-50%); }
.sv-y-top { top: 0; }
.sv-y-mid { top: 110px; }
.sv-y-zero { top: 220px; }
.sv-area { position: relative; height: 220px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(var(--line-soft), var(--line-soft)) 0 50% / 100% 1px no-repeat; cursor: crosshair; touch-action: pan-y; outline: none; }
.sv-area:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.sv-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-line { fill: none; stroke: var(--gold); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sv-line-area { fill: rgba(255, 193, 63, 0.12); stroke: none; }
.sv-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; }
.sv-col { flex: 1 1 0; min-width: 0; background: rgba(255, 193, 63, 0.4); border-radius: 2px 2px 0 0; }
.sv-col-on { background: var(--gold); }
.sv-dot, .sv-cursor-dot { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--card); }
.sv-mark { position: absolute; font: 600 12px/1.2 var(--sans); color: var(--fg); background: var(--card); padding: 2px 5px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.sv-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--fg); display: none; pointer-events: none; }
.sv-cursor-dot { display: none; background: var(--fg); }
.sv-picking .sv-cursor, .sv-picking .sv-cursor-dot { display: block; }
.sv-xaxis { position: relative; height: 18px; margin: 6px 0 0; }
.sv-xtick { position: absolute; transform: translateX(-50%); font: 500 11px/1.2 var(--sans); color: var(--dim); white-space: nowrap; }
.sv-xtick-first { transform: none; }
.sv-xtick-last { transform: translateX(-100%); }

/* The page's own table, the example buttons, a share still to be made. */
.study-table-wrap { overflow-x: auto; margin: 28px 0 8px; border: 1px solid var(--line); border-radius: 10px; }
.study-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.study-table th, .study-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.study-table thead th { font-weight: 500; font-size: 12px; color: var(--muted); white-space: normal; vertical-align: bottom; min-width: 84px; }
.study-table th[scope="row"] { text-align: left; color: var(--fg); font-weight: 500; }
.study-table td { color: var(--fg); }
.study-row-all th, .study-row-all td { font-weight: 600; }
.study-table tbody tr:last-child th, .study-table tbody tr:last-child td { border-bottom: 0; }
.blog-article .g-part .study-example a.btn { text-decoration: none; }
.blog-article .g-part .study-example a.btn-gold, .blog-article .g-part .study-example a.btn-gold:hover { color: var(--ink); }
.blog-article .g-part .study-example a.btn-ghost, .blog-article .g-part .study-example a.btn-ghost:hover { color: var(--fg); }
.study-example { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 26px 0 8px; }
.study-share-pending { opacity: 0.5; cursor: not-allowed; white-space: normal; text-align: center; }

@media (max-width: 640px) {
  .study-answer-number { font-size: 44px; }
  .study-split { grid-template-columns: 1fr; }
  .study-viz { padding: 14px 12px 12px; }
  .study-viz-title { font-size: 16px; }
  .sv-row { grid-template-columns: minmax(64px, 6.5rem) minmax(0, 1fr) 4rem; gap: 8px; padding: 4px; }
  .sv-label, .sv-value { font-size: 13px; }
  .sv-series { padding-left: 42px; }
  .sv-y { width: 38px; font-size: 10px; }
  .study-example .btn { flex: 1 1 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* The studies index (`/market-replay/studies`), on the famous-days list (`days.css`): the symbols and the answer each sit on
   their own line under the link, on every row, so a long question can never share (or collide with) the symbols' line. */
.study-list li { align-items: baseline; }
.study-list .day-row-meta { flex: 1 1 100%; }
.study-row-answer, .blog-article .study-row-answer { flex: 1 1 100%; margin: 2px 0 0; font: 400 15px/1.5 var(--sans); color: var(--fg); }