/* 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/market-replay.css */
/* Campaign landing page: TP | Market Replay (Market replay, Trading simulator) and Charting replay seekers.
   Loaded after ../c9/system.css and ../c9/product.css. One focal point above the fold: the headline, with the
   replay trade playing beside it and its result card landing when the take profit fills. */

/* ---------- review strip: ad being reviewed, not part of the design. Collapsed to one line. ---------- */
.ad-review { background: rgb(46, 46, 46); color: rgb(200, 200, 200); font: 400 12px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; border-bottom: 1px solid rgb(70, 70, 70); position: relative; }
.ad-review .in { max-width: 1400px; margin: 0 auto; padding: 6px 44px 6px 16px; }
.ad-review .sum { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.ad-review .sum .one { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.ad-review .tag { font-weight: 600; color: rgb(150, 150, 150); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.ad-review .grp { color: rgb(230, 230, 230); font-weight: 600; }
.ad-review .hl { color: rgb(160, 190, 255); }
.ad-review .kw { color: rgb(160, 160, 160); }
.ad-review .rv-toggle { flex: none; border: 1px solid rgb(80, 80, 80); background: rgb(36, 36, 36); color: rgb(220, 220, 220); border-radius: 6px; font: 500 11.5px/1 system-ui, sans-serif; padding: 5px 8px; cursor: pointer; }
.ad-review .ads { display: none; gap: 6px; padding: 8px 0 4px; }
.ad-review.open .ads { display: grid; }
.ad-review .ad { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 2px 14px; }
.ad-review .ad + .ad { border-top: 1px solid rgb(64, 64, 64); padding-top: 6px; }
.ad-review .x { position: absolute; top: 4px; right: 10px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgb(80, 80, 80); background: rgb(36, 36, 36); color: rgb(200, 200, 200); cursor: pointer; font: 400 15px/1 system-ui, sans-serif; }
.ad-review .x:hover, .ad-review .rv-toggle:hover { background: rgb(60, 60, 60); }
@media (max-width: 1100px) { .ad-review .ad { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .ad-review .sum .one { display: none; } .ad-review .grp { overflow: hidden; text-overflow: ellipsis; min-width: 0; } }

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

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 60px 0 104px; }
.hero::before { content: ''; position: absolute; right: -10%; top: -10%; width: 70%; height: 120%; background: radial-gradient(ellipse at 55% 50%, rgba(255, 193, 63, 0.16), rgba(255, 193, 63, 0) 60%); pointer-events: none; }
.hero .wrap { position: relative; max-width: 1440px; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 72px; align-items: center; }
.hero h1 { font-size: clamp(44px, 5.3vw, 80px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede { margin: 26px 0 0; font-size: 20px; line-height: 1.45; color: rgb(214, 214, 212); max-width: 560px; text-wrap: pretty; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 34px; }
.hero .ctas .btn { padding: 17px 30px; font-size: 17px; box-shadow: 0 10px 40px rgba(255, 193, 63, 0.25); }
.hero .note { font-size: 15px; color: var(--muted); }
.heroshot { position: relative; margin: 0 -40px 0 0; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.p-hero { --iw: 1076; --x: 0; --y: 0; --w: 1076; --h: 615; }

/* the outcome card that lands on the media */
.result { position: absolute; left: -64px; bottom: -34px; z-index: 3; width: 290px; padding: 18px 20px 16px; border-radius: 16px; background: rgba(25, 25, 25, 0.96); border: 1px solid rgba(255, 193, 63, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(255, 193, 63, 0.06); backdrop-filter: blur(8px); }
.result .rt { display: flex; justify-content: space-between; gap: 10px; font: 600 12.5px/1 var(--sans); color: var(--muted); letter-spacing: 0.01em; }
.result .rt b { color: var(--fg); }
.result .st, .chip .st { display: none; }
.result .st.on, .chip .st.on { display: block; animation: pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
.result .big { display: block; margin-top: 12px; font: 700 34px/1 var(--display); letter-spacing: -0.03em; color: var(--fg); }
.result .big.up { color: var(--green); font-size: 44px; }
.result .sub { display: block; margin-top: 8px; font-size: 14px; color: rgb(214, 214, 212); }
.result .sub .g { color: var(--gold); font-weight: 600; }
.result .demo { display: block; text-align: left; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgb(48, 48, 48); font-size: 12px; color: var(--muted); }
.result:has(.card.on.done) { border-color: var(--gold); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 50px rgba(255, 193, 63, 0.28); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

@media (max-width: 1180px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 0 28px; }
  .hero .copy { max-width: 760px; }
  .heroshot { margin: 0; }
  .result { left: auto; right: 16px; bottom: -28px; }
}
@media (max-width: 700px) {
  .hero { padding: 32px 0 72px; }
  .hero .wrap { padding: 0 16px; gap: 30px; }
  .hero h1 { font-size: 46px; }
  .hero .lede { font-size: 17px; margin-top: 18px; }
  .hero .ctas { margin-top: 24px; }
  .hero .ctas .btn { padding: 15px 26px; }
  .win-bar { height: 32px; }
  .result { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -40px 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .heroshot, .result .st { animation: none !important; } }

/* ---------- proof sections: one claim, one visual ---------- */
.proof { padding: 120px 0; border-top: 1px solid var(--line); }
.proof .wrap { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.proof.flip .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.proof.flip .wrap > :first-child { order: 2; }
.proof .n { font: 600 14px/1 var(--sans); color: var(--gold); margin: 0 0 18px; }
.proof h2 { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.04em; }
.proof p { color: var(--muted); font-size: 18px; margin: 20px 0 0; max-width: 520px; }
.proof .more { display: inline-block; margin-top: 24px; font: 600 16px/1.4 var(--sans); color: var(--gold); text-decoration: none; }
.proof .more:hover { text-decoration: underline; }
.proof figure { margin: 0; }
.proof .win { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 193, 63, 0.06); }
.proof .win > video { width: 100%; display: block; }
@media (max-width: 900px) {
  .proof { padding: 72px 0; }
  .proof .wrap, .proof.flip .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proof.flip .wrap > :first-child { order: 0; }
  .proof p { font-size: 17px; }
}

/* ---------- plan line and faq ---------- */
.plan-line { padding: 0 0 8px; }
.plan-line .box { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; display: flex; gap: 12px 28px; align-items: baseline; flex-wrap: wrap; }
.plan-line b { font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; }
.plan-line b em { font-style: normal; color: var(--gold); }
.plan-line .box { align-items: center; }
.plan-line b { flex: 1 1 260px; font-size: clamp(26px, 2.6vw, 34px); }
.plan-line .link { color: var(--gold); font-weight: 600; font-size: 15px; white-space: nowrap; }
.faq-sec { padding: 88px 0 110px; }
.faq-sec .wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; }
.faq-sec h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.035em; }
.faq details p { font-size: 16px; }
@media (max-width: 900px) { .faq-sec { padding: 64px 0 80px; } .faq-sec .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }


/* ---------- result cards: one card per clip, its states keyed to the clip's moments ---------- */
.result .card { display: none; }
.result .card.on { display: block; }
.result .big.down { color: var(--red); font-size: 44px; }

/* ---------- section clips: a moving recording with a result chip that lands on the key moment ---------- */
.proof figure.clip { position: relative; }
.proof .win > video { width: 100%; height: auto; display: block; }
.chip { position: absolute; right: -28px; bottom: 34px; z-index: 3; min-width: 210px; padding: 14px 18px; border-radius: 14px; background: rgba(25, 25, 25, 0.96); border: 1px solid rgba(255, 193, 63, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); transition: border-color 0.3s, box-shadow 0.3s; }
.proof.flip .chip { right: auto; left: -28px; }
.chip.done { border-color: var(--gold); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 44px rgba(255, 193, 63, 0.28); }
.chip .big { display: block; font: 700 26px/1.05 var(--display); letter-spacing: -0.025em; color: var(--fg); }
.chip .big.up { color: var(--green); font-size: 34px; }
.chip .sub { display: block; margin-top: 6px; font-size: 14px; color: rgb(214, 214, 212); }
@media (max-width: 900px) {
  .chip, .proof.flip .chip { position: relative; left: auto; right: auto; bottom: auto; margin: 12px 0 0; min-width: 0; padding: 12px 16px; }
  .chip .st.on { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .chip .big, .chip .big.up { font-size: 26px; }
  .chip .sub { margin-top: 0; }
}

/* ---------- closing band: the c3 full-bleed hero treatment, the replay at full strength behind the headline ---------- */
.bleed { position: relative; height: 86vh; min-height: 560px; max-height: 960px; overflow: hidden; background: rgb(10, 10, 10); border-top: 1px solid var(--line); }
.bleed video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 0; }
.bleed::after { content: ''; position: absolute; inset: 0; 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%); pointer-events: none; }
.bleed .overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(48px, 9vh, 96px); }
.bleed h2 { font-size: clamp(44px, 7vw, 104px); line-height: 0.95; letter-spacing: -0.045em; max-width: 900px; }
.bleed h2 em { font-style: normal; color: var(--gold); }
.bleed p { font-size: clamp(17px, 1.6vw, 21px); color: rgb(214, 214, 212); margin: 22px 0 30px; }
.bleed .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bleed .btn { padding: 17px 30px; font-size: 17px; }
@media (max-width: 700px) {
  .bleed { height: 78vh; min-height: 520px; }
  .bleed::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%); }
}
@media (prefers-reduced-motion: reduce) { .chip .st, .result .st { animation: none !important; } }

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