/* 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/pricing/final.css */
/* Pricing, final: option 7's cinematic hero merged with option 5's comparison table. Loaded after ../c9/system.css,
   ../c9/product.css and ../campaigns/brand.css (tokens, pill buttons, nav, footer, FAQ). Self-contained: nothing here
   depends on the lane-*.css files. */

body { padding-bottom: 80px; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--gold); }
.wrap.wide { max-width: 1400px; }
.btn-lg { padding: 17px 30px; font-size: 17px; }
/* A signed-in visitor's current plan (and Free while they pay): a label, not an offer (js/pricing/final.js). */
.btn.is-current { background: transparent; color: var(--muted); border-color: transparent; box-shadow: none; cursor: default; pointer-events: none; }
@media (max-width: 1180px) { .nav-cta .btn-ghost { display: inline-flex; } }
@media (max-width: 480px) {
  .nav .wrap { gap: 10px; padding: 0 14px; }
  .nav-menu summary { padding: 7px 11px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-sm { padding: 8px 12px; }
}

/* ---------- monthly / yearly: one class on <html> flips every price on the page ---------- */
.yr [data-m] { display: none !important; }
html:not(.yr) [data-y] { display: none !important; }
.bill { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(25, 25, 25); border: 1px solid rgb(58, 58, 54); gap: 2px; }
.bill button { border: 0; background: none; color: rgb(214, 214, 212); font: 600 14px/1 var(--sans); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.bill button:hover { color: var(--fg); background: rgba(63, 63, 70, 0.6); }
.bill button.on { background: var(--gold); color: var(--ink); }
.bill button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- hero: the replay full bleed, plans on glass ---------- */
.cine { position: relative; min-height: max(720px, calc(100svh - 60px)); max-height: 1040px; overflow: hidden; background: rgb(10, 10, 10); display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
.cine > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 30%; }
/* UX audit 2026-10-06, P1: the clip's own toolbar sat blown up behind the headline, so the top band is now near-opaque
   down past it (0.97 to 14%) before the fade the approved page had. */
.cine::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.92) 14%, rgba(10, 10, 10, 0.25) 34%, rgba(10, 10, 10, 0) 48%, rgba(10, 10, 10, 0.75) 76%, rgba(10, 10, 10, 1) 100%), linear-gradient(90deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0) 55%); }
.cine .top, .cine .glass-row { position: relative; z-index: 2; }
.cine .top { padding-top: clamp(40px, 7vh, 80px); }
.cine h1 { font: 700 clamp(46px, 6.6vw, 104px)/0.94 var(--display); letter-spacing: -0.05em; max-width: 980px; text-wrap: balance; }
.cine .sub { margin: 20px 0 0; font-size: clamp(17px, 1.6vw, 21px); color: rgb(226, 226, 224); max-width: 720px; }
.cine .bill { margin-top: 24px; background: rgba(17, 17, 17, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Below the clip's toolbar band, not on its icons (P1). */
.cine-cap { position: absolute; right: 20px; top: 104px; z-index: 3; font-size: 12.5px; color: rgb(214, 214, 212); background: rgba(10, 10, 10, 0.6); padding: 7px 11px; border-radius: 999px; }
.glass-row { padding-bottom: 36px; }
.glass-row .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* 0.82, the phone value: at 0.55 red and green candles showed through the Trader and Quant prices (P1). */
.glass { padding: 24px 24px 22px; border-radius: 20px; background: rgba(20, 20, 20, 0.82); border: 1px solid rgba(238, 238, 238, 0.16); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; min-width: 0; }
.glass.gold { border-color: rgba(255, 193, 63, 0.55); }
.glass .nm { margin: 0; font: 600 14px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.glass .pr { margin: 10px 0 0; font: 700 52px/1 var(--display); letter-spacing: -0.04em; }
.glass .pr small { font: 500 15px/1 var(--sans); letter-spacing: 0; color: rgb(214, 214, 212); }
.glass .alt { margin: 8px 0 0; font-size: 13.5px; color: rgb(200, 200, 198); }
.glass .what { margin: 14px 0 0; color: rgb(232, 232, 230); font-size: 16px; line-height: 1.4; }
.glass .who { margin: 6px 0 18px; color: rgb(200, 200, 198); font-size: 14.5px; line-height: 1.4; }
.glass .act { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.glass .act span { font-size: 13.5px; color: rgb(214, 214, 212); }
@media (max-width: 900px) {
  .cine { max-height: none; min-height: 0; }
  .cine > video { position: relative; height: 56vw; order: 1; }
  @media (max-width: 600px) { .cine > video { height: 78vw; object-position: 70% 40%; } }
  .cine::after { display: none; }
  .cine .top { order: 0; padding-bottom: 24px; }
  .glass-row { order: 2; margin-top: -14vw; }
  .glass-row .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .glass { background: rgba(20, 20, 20, 0.82); }
  .cine .cine-cap { position: relative; order: 3; top: auto; right: auto; align-self: flex-start; margin: 0 20px 24px; padding: 0; background: none; color: var(--muted); }
}
@media (max-width: 600px) {
  .cine h1 { font-size: 44px; }
  .glass { padding: 20px 18px 18px; }
  .glass .pr { font-size: 44px; }
}

/* ---------- comparison: rows, not a <table>, so the plan head can stick under the nav ---------- */
.cmp-sec { padding: 64px 0 110px; }
.cmp-sec .wrap { max-width: 1340px; }
.cmp-head { max-width: 860px; margin-bottom: 30px; }
.cmp-head h2 { font: 700 clamp(32px, 3.6vw, 52px)/1.03 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.cmp-head p { font-size: 18px; color: var(--muted); margin: 16px 0 0; max-width: 640px; }
.bill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 22px; }
.bill-row .note { font-size: 13.5px; color: var(--muted); }
.la-cmp { border: 1px solid var(--line); border-radius: 18px; background: rgb(21, 21, 21); }
.la-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.la-row:first-child { border-top: 0; }
.la-row > * { padding: 14px 18px; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.la-row > :first-child { color: rgb(214, 214, 212); }
.la-row > :not(:first-child) { color: var(--fg); font-variant-numeric: tabular-nums; }
.la-row .no { color: var(--dim); }
.la-row .yes { color: var(--gold); font-weight: 600; }
.la-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.la-row.head { position: sticky; top: 60px; z-index: 20; background: rgb(21, 21, 21); border-radius: 18px 18px 0 0; border-bottom: 1px solid rgb(58, 56, 50); transition: box-shadow 0.2s ease, border-radius 0.2s ease; }
.la-row.head.stuck { border-radius: 0; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
.la-row.head > * { padding-top: 20px; padding-bottom: 18px; }
.la-row.head b { display: block; font: 600 20px/1.1 var(--display); color: var(--fg); }
.la-row.head .hp { display: block; margin-top: 6px; font: 600 15px/1 var(--sans); color: var(--gold); }
.la-row.head .hp i { font-style: normal; color: var(--muted); font-weight: 500; }
.la-row.head .btn { margin-top: 14px; }
.la-row.head .cell-note { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.la-grp { padding: 22px 18px 10px; font: 600 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border-top: 1px solid var(--line); }
.cmp-tabs, .m-cta { display: none; }
@media (max-width: 1000px) and (min-width: 701px) {
  .la-row > * { padding: 12px 12px; font-size: 14px; }
  .la-row.head .btn { padding: 8px 12px; }
}

/* phones: the plan head becomes three tabs, and the grid shows one plan beside each feature */
@media (max-width: 700px) {
  .cmp-sec { padding: 48px 0 72px; }
  .cmp-head p { font-size: 17px; }
  .la-row.head { display: none; }
  .cmp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; position: sticky; top: 60px; z-index: 20; padding: 6px; background: rgb(21, 21, 21); border-radius: 18px 18px 0 0; border-bottom: 1px solid rgb(58, 56, 50); }
  .cmp-tabs.stuck { border-radius: 0; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
  .cmp-tabs button { border: 1px solid transparent; background: none; color: rgb(214, 214, 212); border-radius: 12px; padding: 10px 6px; cursor: pointer; text-align: center; font: 600 15px/1.1 var(--display); }
  .cmp-tabs button .hp { display: block; margin-top: 5px; font: 600 13px/1 var(--sans); color: var(--muted); }
  .cmp-tabs button .hp i { font-style: normal; font-weight: 500; }
  .cmp-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); }
  .cmp-tabs button[aria-selected="true"] .hp { color: var(--ink); }
  .cmp-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .m-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 14px; border-bottom: 1px solid var(--line); }
  .m-cta > div { display: none; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
  .m-cta span { font-size: 13.5px; color: var(--muted); }
  .la-cmp[data-show="0"] .m-cta > :nth-child(1), .la-cmp[data-show="1"] .m-cta > :nth-child(2), .la-cmp[data-show="2"] .m-cta > :nth-child(3) { display: flex; }
  .la-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .la-row > :not(:first-child) { display: none; }
  .la-cmp[data-show="0"] .la-row > :nth-child(2), .la-cmp[data-show="1"] .la-row > :nth-child(3), .la-cmp[data-show="2"] .la-row > :nth-child(4) { display: block; }
  .la-row > * { padding: 12px 14px; font-size: 14.5px; }
  .la-grp { padding: 20px 14px 8px; }
}

/* ---------- faq ---------- */
.faq-sec { padding: 110px 0; 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-sec .faq details p { font-size: 16px; }
@media (max-width: 900px) { .faq-sec { padding: 72px 0; } .faq-sec .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- closing band: the replay at full strength behind a big headline ---------- */
.stage { position: relative; height: 86svh; min-height: 560px; max-height: 960px; overflow: hidden; background: rgb(10, 10, 10); border-top: 1px solid var(--line); padding: 0; }
.stage > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 0; }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 22%), linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 42%, rgba(10, 10, 10, 0) 70%), linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0.9) 32%, rgba(10, 10, 10, 0) 58%); }
.stage .overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(48px, 9vh, 96px); }
.stage h2 { font: 700 clamp(44px, 7vw, 104px)/0.95 var(--display); letter-spacing: -0.045em; max-width: 900px; text-wrap: balance; }
.stage p { font-size: clamp(17px, 1.6vw, 21px); color: rgb(214, 214, 212); margin: 22px 0 30px; }
.stage .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.stage .stage-cap { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
@media (max-width: 700px) {
  .stage { height: 78svh; min-height: 520px; }
  .stage > video { object-position: 78% 0; }
  .stage::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.75) 55%, rgba(10, 10, 10, 0.2) 100%); }
}

/* Wide screens: the hero's subline sits over the replay's candles once the copy column moves right of the dark
   left-hand gradient; a soft shadow keeps it legible without dimming the clip. */
.cine .sub { text-shadow: 0 1px 14px rgba(10, 10, 10, 0.9), 0 0 2px rgba(10, 10, 10, 0.8); }

/* 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; }