/* 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/journal.css */
/* campaigns/journal: PPC landing page for the TP | Trade Journal ad groups.
   Loads after ../c9/system.css and ../c9/product.css. vs-tradezella.html reuses the review strip,
   the hero, the app windows, the sections, the FAQ and the closing stage. */

.wrap.wide { max-width: 1420px; }
em { font-style: normal; color: var(--gold); }

/* ---------- review strip: reviewer chrome, one line until expanded ---------- */
.ppc-review { background: rgb(54, 54, 54); color: rgb(222, 222, 222); border-bottom: 1px dashed rgb(110, 110, 110); font: 400 11px/1.35 system-ui, -apple-system, Segoe UI, sans-serif; }
.ppc-review[hidden] { display: none; }
.ppc-review details { padding: 4px 0; }
.ppc-review summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ppc-review summary::-webkit-details-marker { display: none; }
.ppc-review .rv-badge { flex: none; background: rgb(90, 90, 90); color: rgb(245, 245, 245); border-radius: 4px; padding: 2px 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.ppc-review .rv-sum { color: rgb(200, 200, 200); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppc-review .rv-toggle { flex: none; color: rgb(235, 235, 235); text-decoration: underline; }
.ppc-review .rv-toggle::after { content: 'Show ads'; }
.ppc-review details[open] .rv-toggle::after { content: 'Collapse'; }
.ppc-review .rv-close { flex: none; margin-left: auto; background: none; border: 1px solid rgb(120, 120, 120); color: rgb(230, 230, 230); border-radius: 4px; padding: 1px 8px; font: inherit; cursor: pointer; }
.ppc-review .rv-close:hover { background: rgb(80, 80, 80); }
.ppc-review .rv-ads { display: grid; grid-template-columns: repeat(var(--ads, 3), minmax(0, 1fr)); gap: 6px; margin: 6px 0 2px; }
.ppc-review .rv-ad { background: rgb(44, 44, 44); border: 1px solid rgb(76, 76, 76); border-radius: 6px; padding: 5px 8px; }
.ppc-review .rv-group { display: block; color: rgb(170, 170, 170); }
.ppc-review .rv-h { display: block; color: rgb(250, 250, 250); font-weight: 600; font-size: 11.5px; margin: 1px 0; }
.ppc-review .rv-d { display: block; color: rgb(215, 215, 215); margin-top: 2px; }
.ppc-review .rv-k { display: block; color: rgb(165, 165, 165); margin-top: 1px; }
.ppc-review .rv-flag { display: block; color: rgb(255, 170, 150); font-weight: 600; margin-top: 2px; }
@media (max-width: 900px) { .ppc-review .rv-ads { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ppc-review .rv-sum { display: none; } }

/* ---------- buttons ---------- */
.btn-lg { padding: 17px 30px; font-size: 17px; }

/* ---------- hero: one centred headline over the product window ---------- */
.lp-hero { position: relative; overflow: hidden; padding: 40px 0 40px; }
.lp-hero::before { content: ''; position: absolute; left: 50%; top: 300px; width: 1500px; height: 760px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255, 193, 63, 0.16), rgba(255, 193, 63, 0) 62%); pointer-events: none; }
.lp-hero .wrap { position: relative; }
.lp-head { text-align: center; max-width: 1180px; margin: 0 auto; }
.lp-for { margin: 0 0 16px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.lp-head h1 { font: 700 clamp(40px, 5.3vw, 78px)/1.0 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.lp-sub { margin: 18px auto 0; max-width: 980px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.45; color: var(--muted); text-wrap: balance; }
.lp-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.lp-cta span { font-size: 15px; color: var(--muted); }
.lp-caption { margin: 12px 0 0; text-align: left; font-size: 13px; color: var(--dim); }

/* the product media: a real app window with depth, a second window in front, an outcome card */
.lp-media { position: relative; margin: 36px auto 0; max-width: 1240px; }
.app-win { background: rgb(12, 12, 12); border: 1px solid rgb(62, 62, 58); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 193, 63, 0.05); }
.app-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; background: rgb(28, 28, 28); border-bottom: 1px solid rgb(48, 48, 46); }
.app-bar .dots { display: flex; gap: 7px; padding: 0; }
.app-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: rgb(70, 70, 68); }
.app-title { font: 500 12.5px/1 var(--sans); color: var(--dim); }
.app-win video { width: 100%; display: block; }

/* the journal window sits right; the replay window sits over its equity-curve panel, so the journal's stats, calendar and expectancy stay in view */
.j-media { padding-bottom: 9%; }
.j-dash { width: 84%; margin-left: auto; }
.j-dash .crop { --x: 80; --y: 0; --w: 1920; --h: 650; }
.j-review { position: absolute; left: -2%; top: 29%; width: 50%; border-color: rgb(90, 84, 66); box-shadow: 0 50px 110px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 193, 63, 0.18); animation: popin 0.8s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.outcome { position: absolute; z-index: 3; display: grid; gap: 4px; padding: 16px 20px; border-radius: 14px; background: rgb(250, 250, 248); color: rgb(17, 17, 17); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: popin 0.6s 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.o-label { font: 600 13px/1.2 var(--sans); color: rgb(80, 80, 80); }
.o-num { font: 700 38px/1 var(--display); letter-spacing: -0.03em; color: rgb(16, 140, 70); }
.o-note { font: 500 13px/1.3 var(--sans); color: rgb(60, 60, 60); }
.j-outcome { right: -2%; bottom: 17%; }
@keyframes popin { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .j-review, .outcome { animation: none; } }

/* ---------- sections: one claim, one real visual ---------- */
.lp-sec { padding: 120px 0; border-top: 1px solid var(--line); }
.lp-sec .wrap { max-width: 1340px; }
.lp-sec .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.lp-sec .split.rev { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.lp-sec figure { margin: 0; }
.lp-sec .screen > video { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; }
.lp-sec h2 { font: 700 clamp(32px, 3.4vw, 48px)/1.04 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.lp-sec .lede { font-size: 18.5px; line-height: 1.55; }
.lp-sec .fine { margin-top: 18px; font-size: 15px; color: var(--muted); }
.lp-sec figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
.lp-sec .screen { border-color: rgb(58, 58, 54); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); }
@media (max-width: 1000px) {
  .lp-sec .split, .lp-sec .split.rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-sec .split.rev > :first-child { order: 2; }
}
@media (max-width: 760px) { .lp-sec { padding: 72px 0; } .lp-sec .lede { font-size: 17px; } }

/* FAQ */
.faq-sec .faq { max-width: 860px; margin-top: 36px; }

/* closing stage: the replay video full-bleed at full strength, the headline over its dark corner (c3 hero style) */
.lp-stage { position: relative; height: 86svh; min-height: 540px; max-height: 920px; overflow: hidden; background: rgb(10, 10, 10); border-top: 1px solid var(--line); }
.lp-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.lp-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 20%), linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.65) 42%, rgba(10, 10, 10, 0) 70%), linear-gradient(0deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.4) 30%, rgba(10, 10, 10, 0) 52%); pointer-events: none; }
.lp-stage .stage-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(48px, 9vh, 96px); }
.lp-stage h2 { font: 700 clamp(44px, 6.6vw, 100px)/0.96 var(--display); letter-spacing: -0.045em; max-width: 880px; margin: 0; text-wrap: balance; }
.lp-stage p { margin: 20px 0 0; font-size: clamp(17px, 1.5vw, 21px); color: rgb(214, 214, 212); }
.lp-stage .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-stage .stage-cap { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* ---------- phones and tablets ---------- */
@media (max-width: 900px) {
  .lp-hero { padding: 36px 0 32px; }
  .lp-media { margin-top: 32px; }
  .j-media { padding-bottom: 0; }
  .j-dash { width: 74%; margin-left: 0; }
  .j-dash .crop { --x: 1360; --y: 330; --w: 630; --h: 320; }
  .j-review { position: relative; left: auto; top: auto; width: 100%; margin: -10% 0 0; }
  .j-outcome { right: 0; bottom: auto; top: 6%; }
  .lp-stage { height: 78svh; }
  .lp-stage > video { object-position: 78% 40%; }
  .lp-stage::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.1) 100%); }
}
@media (max-width: 560px) {
  .lp-for { margin: 0 0 16px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.lp-head h1 { font-size: 42px; line-height: 1.02; }
  .lp-sub { font-size: 16.5px; }
  .lp-cta { margin-top: 22px; }
  .app-bar { height: 26px; padding: 0 10px; }
  .app-bar .dots i { width: 8px; height: 8px; }
  .app-title { font-size: 11px; }
  .outcome { padding: 10px 14px; gap: 2px; }
  .o-num { font-size: 26px; }
  .o-label, .o-note { font-size: 11.5px; }
  .lp-for { font-size: 11.5px; }
}

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