/* 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/backtesting.css */
/* Backtesting PPC landing page. Builds on c9 system.css + product.css (nav, buttons, faq, reel band). */

/* No terminal styling: drop the "> " marker on the current nav link and the mono menu button */
.nav-links a.on::before { content: none; }
.nav-links a.on { color: var(--fg); }
.nav-menu summary { font-family: var(--sans); border-radius: 999px; }
.btn-lg { padding: 17px 30px; font-size: 17px; }

/* Review strip: grey chrome for the owner's review, one line until expanded */
.review { background: rgb(222, 222, 222); color: rgb(40, 40, 40); font: 12px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; border-bottom: 1px solid rgb(170, 170, 170); }
.review-in { max-width: 1600px; margin: 0 auto; padding: 0 16px; }
.review summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 28px; min-width: 0; }
.review summary::-webkit-details-marker { display: none; }
.review-tag { flex: none; background: rgb(60, 60, 60); color: rgb(245, 245, 245); border-radius: 3px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; }
.review-sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(80, 80, 80); }
.review-more { flex: none; background: rgb(255, 255, 255); border: 1px solid rgb(160, 160, 160); border-radius: 4px; padding: 1px 10px; font-size: 11px; }
.review-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 0 10px; }
.ad { background: rgb(245, 245, 245); border: 1px solid rgb(200, 200, 200); border-radius: 4px; padding: 6px 8px; min-width: 0; font-size: 11.5px; line-height: 1.3; }
.ad-path { color: rgb(100, 100, 100); font-size: 10.5px; }
.ad-h { color: rgb(26, 13, 171); font-weight: 600; font-size: 12px; }
.ad-d { color: rgb(50, 50, 50); }
.ad-k { color: rgb(110, 110, 110); font-size: 10.5px; margin-top: 2px; }
.ad-flag { color: rgb(150, 40, 20); font-size: 10.5px; margin-top: 4px; }
@media (max-width: 900px) { .review-ads { grid-template-columns: minmax(0, 1fr); } }

/* Shared screenshot crop: --x/--y/--w/--h in the image's own coordinates, --iw its full width in those units */
.cut { position: relative; overflow: hidden; aspect-ratio: calc(var(--w) / var(--h)); }
.cut img { position: absolute; max-width: none; width: calc(100% * var(--iw) / var(--w)); left: calc(-100% * var(--x) / var(--w)); top: calc(-100% * var(--y) / var(--h)); }

.bt-cta { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.bt-cta span { color: var(--muted); font-size: 15px; }
.bt-cap { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* Hero: headline and CTA on top, then the code beside the backtest it produces */
.bt-hero { position: relative; padding: 56px 0 72px; overflow: hidden; }
.bt-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 50% at 72% 70%, rgba(255, 193, 63, 0.08), transparent 70%); }
.bt-hero .wrap { position: relative; max-width: 1360px; }
.bt-hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.bt-hero h1 { font: 700 clamp(40px, 5vw, 76px)/1.0 var(--display); letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.bt-lede { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; margin: 0; }

.ide { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--card); border: 1px solid rgb(52, 52, 50); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); }
.ide-code, .ide-run { min-width: 0; display: flex; flex-direction: column; }
.ide-run { border-left: 1px solid var(--line); }
.ide-tab { display: flex; justify-content: space-between; gap: 12px; align-items: center; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--sans); color: var(--muted); background: rgb(21, 21, 21); }
.ide-tab .on { color: var(--fg); }
pre.code { position: relative; margin: 0; padding: 14px 0; background: rgb(17, 17, 17); font: 12.5px/1.75 var(--mono); font-variant-ligatures: none; color: rgb(214, 214, 212); overflow: hidden; counter-reset: ln; flex: 1 1 0; min-height: 0; }
pre.code::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(0deg, rgb(17, 17, 17), rgba(17, 17, 17, 0)); pointer-events: none; }
pre.code .l { display: block; white-space: pre; padding-right: 16px; border-left: 2px solid transparent; }
pre.code .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 38px; padding-right: 14px; text-align: right; color: rgb(90, 90, 90); }
pre.code .l.ed { background: rgba(238, 238, 238, 0.05); border-left-color: var(--gold); }
pre.code .l.ed .n { background: rgba(238, 238, 238, 0.10); border-radius: 3px; padding: 0 2px; }
.code .k { color: var(--violet); }
.code .f { color: var(--blue); }
.code .s { color: rgb(195, 232, 141); }
.code .n { color: rgb(247, 140, 108); }
.code .p { color: var(--teal); }

.ide-screen { position: relative; flex: 1; background: rgb(10, 10, 10); display: flex; align-items: center; }
.ide-screen video { width: 100%; height: auto; aspect-ratio: 1376 / 774; object-fit: cover; }

/* Cues: a card that lands on the frame where the result appears */
.cue { position: absolute; z-index: 2; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.cue.on { opacity: 1; transform: none; }
.cue.result { right: 18px; bottom: 18px; min-width: 260px; background: rgba(25, 25, 25, 0.96); border: 1px solid rgb(64, 64, 62); border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.cue-k { display: block; color: var(--muted); font-size: 13px; }
.cue.result b { display: block; font: 700 40px/1.05 var(--display); letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.cue.result dl { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cue.result dt { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cue.result dd { margin: 2px 0 0; font: 600 18px/1.2 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; }
.cue.tag { right: 22px; top: 22px; transform: translateY(-12px); white-space: nowrap; background: rgba(25, 25, 25, 0.96); border: 1px solid rgba(255, 110, 80, 0.55); border-radius: 999px; padding: 12px 20px; font: 500 17px/1.2 var(--sans); color: var(--fg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.cue.tag.on { transform: none; }
.cue.tag b { color: var(--red); font-weight: 700; margin-right: 4px; }

@media (max-width: 960px) {
  .bt-hero { padding: 36px 0 56px; }
  .bt-hero-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ide { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .ide-run { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  pre.code { flex: none; height: 240px; font-size: 12px; }
}
@media (max-width: 560px) {
  .bt-hero h1 { font-size: 38px; }
  .bt-cta { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
  .bt-cta .btn { justify-content: center; }
  .cue.result { position: static; opacity: 1; transform: none; min-width: 0; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; padding: 14px 16px; }
  .ide-screen { flex-direction: column; align-items: stretch; }
  .cue.result b { font-size: 32px; }
  .cue.result dl { gap: 12px; }
  .cue.result:not(.on) b, .cue.result:not(.on) dl { opacity: 0.35; }
  .cue.tag { left: 10px; right: 10px; top: 10px; white-space: normal; text-align: center; transform: translateY(-8px); font-size: 14px; padding: 9px 12px; border-radius: 12px; }
  .cue.tag.on { transform: none; }
}

/* Sections: one benefit headline, one large moving clip */
.bt-sec { padding: 110px 0; border-top: 1px solid var(--line); }
.bt-head { max-width: 860px; margin-bottom: 40px; }
.bt-head h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.bt-head p { color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); margin: 16px 0 0; max-width: 700px; }
.bt-fig { margin: 0; }
.bt-fig .screen { position: relative; }
/* The tester page's hero is one product clip under the headline, spaced as the .ide hero is. */
.bt-hero .bt-fig { margin-top: 44px; }
@media (max-width: 960px) { .bt-hero .bt-fig { margin-top: 32px; } }
/* Phone: each product shot (and, through its media-queried sources, the hero clip) swaps to a crop of the part its section talks about, captured at phone width, so its labels stay readable down to 320px. */
.bt-fig .screen > .phone-shot { display: none; }
@media (max-width: 640px) { .bt-fig .screen > .phone-shot { display: block; width: 100%; height: auto; } .bt-fig .screen > .wide-shot { display: none; } .bt-fig .screen > .hero-clip { aspect-ratio: 780 / 1036; } }
.bt-fig .screen > video { aspect-ratio: 1376 / 774; }
.bt-fig .sync-screen > video { aspect-ratio: 1800 / 1200; }
.bt-fig figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .bt-sec { padding: 72px 0; } .bt-head { margin-bottom: 28px; } }

/* Two verdicts side by side */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vd { margin: 0; min-width: 0; background: var(--card); border: 1px solid rgb(52, 52, 50); border-radius: 16px; overflow: hidden; transition: opacity 0.6s ease, transform 0.6s ease; }
.vd.pre { opacity: 0; transform: translateY(24px); }
.vd.pre.in { opacity: 1; transform: none; }
.vd.good.pre.in { transition-delay: 0.15s; }
.vd.bad { border-color: rgba(255, 110, 80, 0.45); }
.vd.good { border-color: rgba(255, 193, 63, 0.45); }
.vd-top { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 16px; }
.vd-verdict { font: 700 clamp(28px, 2.8vw, 40px)/1 var(--display); letter-spacing: -0.03em; }
.vd.bad .vd-verdict { color: var(--red); }
.vd.good .vd-verdict { color: var(--gold); }
.vd-name { color: var(--fg); font-size: 15px; }
.vd-shot { margin: 0 24px; border-radius: 10px; overflow: hidden; border: 1px solid rgb(44, 44, 44); background: rgb(17, 17, 17); }
.vd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 24px; }
.vd-facts > div { padding: 18px 0 22px; }
.vd-facts dt { color: var(--muted); font-size: 13px; }
.vd-facts dd { margin: 4px 0 0; font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--display); color: var(--fg); font-variant-numeric: tabular-nums; }
.vd.bad .vd-facts dd { color: var(--red); }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 560px) { .vd-top { padding: 18px 16px 14px; } .vd-shot { margin: 0 16px; } .vd-facts { padding: 0 16px; } }

/* FAQ */
.bt-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.bt-faq h2 { font-size: clamp(32px, 4vw, 52px); }
.faq summary::before { font-family: var(--sans); }
@media (max-width: 900px) { .bt-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Closing band: full-bleed clip at full strength, headline bottom-left over a gradient (c3 hero style) */
.stage-band { position: relative; padding: 0; height: 88svh; min-height: 560px; max-height: 900px; overflow: hidden; background: rgb(10, 10, 10); display: flex; align-items: flex-end; border-top: 1px solid var(--line); }
.stage-band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.stage-band::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) 72%), linear-gradient(0deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0) 45%); }
.stage-band .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(56px, 10vh, 104px); }
.stage-band h2 { font-size: clamp(42px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.045em; max-width: 900px; text-wrap: balance; }
.stage-band p { color: rgb(214, 214, 212); font-size: clamp(18px, 1.6vw, 21px); margin: 20px 0 0; }
@media (max-width: 700px) {
  .stage-band { height: auto; min-height: 520px; }
  .stage-band::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.75) 55%, rgba(10, 10, 10, 0.25) 100%); }
  .stage-band .bt-cta .btn { width: 100%; }
}

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

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