/* Operator style preview: v3 fonts, palette, top bar and type treatment over the v4 layout. Style only. */
:root, :root[data-theme="dark"] {
  --bg: #f4f4f1; --surface: #ffffff; --sunk: #f4f4f1; --ink: #1f2023; --muted: #5c5d61;
  --line: #d9d9d3; --red: #be1e22; --red-hover: #8f1417; --red-soft: #faeded; --on-red: #ffffff;
  --green: #2f8f4d; --green-soft: #ebf4ee;
  --band: #1f2023; --band-surface: #2a2b2f; --band-ink: #e8e8e4; --band-muted: #b9bab6; --band-line: #3a3b3f;
  --shadow: 0 1px 2px rgba(31, 32, 35, 0.06), 0 8px 28px rgba(31, 32, 35, 0.08);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --radius: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #f4f4f1; --surface: #ffffff; --sunk: #f4f4f1; --ink: #1f2023; --muted: #5c5d61;
    --line: #d9d9d3; --red: #be1e22; --red-hover: #8f1417; --red-soft: #faeded;
    --green: #2f8f4d; --green-soft: #ebf4ee;
    --band: #1f2023; --band-surface: #2a2b2f; --band-ink: #e8e8e4; --band-muted: #b9bab6; --band-line: #3a3b3f;
    color-scheme: light;
  }
}
body { line-height: 1.65; }

/* top bar (v3 .ticker) */
.ticker { background: var(--ink); color: #c9cac6; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 0; overflow: hidden; white-space: nowrap; }
.ticker .wrap { display: flex; justify-content: space-between; gap: 24px; }
.ticker .ok { color: #6fc08a; }
.ticker .hide-sm { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .ticker .hide-sm { display: none; }
  .ticker { font-size: 0.6rem; }
  .ticker .wrap { min-width: 0; }
  .ticker .wrap > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ticker .ok { flex-shrink: 0; }
}

/* headings */
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; line-height: 0.98; letter-spacing: 0.01em; font-weight: 700; }
h1 { font-size: clamp(2.9rem, 6.4vw, 4.9rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
h3 { font-size: 1.45rem; letter-spacing: 0.03em; }
.page-hero h1 { max-width: 24ch; }

/* header */
.site-header { background: #f4f4f1; }
.site-header .wrap { min-height: 76px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.brand-tag { font-family: var(--mono); font-size: 0.575rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-top: 4px; }
.nav > a, .nav summary { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.nav > a:hover, .nav summary:hover { color: var(--ink); background: transparent; }
.nav > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }
.nav-toggle { background: none; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.dropdown strong { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }

/* buttons (v3) */
.btn { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 26px 13px; border-radius: var(--radius); border: 2px solid var(--ink); line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.band .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.band .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.nav .btn { padding: 12px 26px 13px; }

/* eyebrows (v3 .eyebrow) on the v4 kicker/tag labels */
.hero-kicker, .way-tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red); font-weight: 400; display: flex; align-items: center; gap: 10px; }
.hero-kicker::before, .way-tag::before { content: ""; width: 26px; height: 2px; background: var(--red); display: inline-block; flex: none; }
.band .hero-kicker { color: #e57373; }
.band .hero-kicker::before { background: #e57373; }

/* mono labels */
.path li::before { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.more, .cap-row em, .text-link { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.toggle button { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.flow .head { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.flow .hub-text { font-family: var(--display); font-weight: 700; }

/* prices / stats in display face */
.way .way-price, .modal .price-line strong, .modal .tier .tier-price { font-family: var(--display); font-weight: 700; }
.case-card .stat { font-family: var(--display); font-weight: 700; }

/* cards: v3 top-border accent */
.way, .case-card { border-top: 4px solid var(--ink); }
.way-featured { border-color: var(--red); border-top: 4px solid var(--red); box-shadow: none; }
.cap-row strong, .path li strong { text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; }
.modal h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.faq summary::after { font-family: var(--display); }
.nav > a.btn, .nav > a.btn:hover { color: #fff; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; font-weight: 600; box-shadow: none; }
.nav > a.btn:hover { background: var(--red-hover); }

/* Wider page + tighter hero headline (Brian, Oct 27: too much blank space) */
:root { --max: 1360px; }
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 0.98; }
body { font-size: 1.0625rem; }
@media (min-width: 1500px) { :root { --max: 1440px; } }