/* Answerbid site styles
   Deep navy with electric blue. Outfit for everything. Fonts are self-hosted (no Google requests). */


@font-face { font-family: "Outfit"; src: url("../fonts/outfit.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --paper: #FFFFFF;
  --white: #FFFFFF;
  --ink: #0A1530;
  --ink-2: #3F4B66;
  --muted: #667190;
  --line: rgba(10, 21, 48, 0.09);
  --line-2: rgba(10, 21, 48, 0.16);
  --electric: #1F66FF;
  --electric-hover: #1652D9;
  --electric-ink: #FFFFFF;
  --electric-soft: rgba(31, 102, 255, 0.08);
  --electric-line: rgba(31, 102, 255, 0.30);
  --signal: #0A73A8;
  --signal-ink: #0A6A9C;
  --signal-soft: rgba(14, 140, 200, 0.10);
  --warn: #B4600F;
  --warn-soft: rgba(240, 166, 96, 0.10);
  --night: #F4F7FC;
  --night-ink: #0A1530;
  --night-muted: #667190;
  --night-line: rgba(10, 21, 48, 0.09);
  --night-surface: #FFFFFF;
  --grid-line: transparent;
  --shadow: 0 30px 60px -36px rgba(16, 38, 90, 0.22);
  --shadow-sm: 0 12px 30px -18px rgba(16, 38, 90, 0.20);
  --sans: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 14px;
  --r-sm: 10px;
  --wrap: 1180px;
  --header-h: 68px;
  color-scheme: light;
}



/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
img, svg { max-width: 100%; }
svg { flex: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; letter-spacing: -0.03em; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
ul, ol { margin: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--electric); color: var(--electric-ink); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--electric); color: var(--electric-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Layout */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.sec { padding-block: clamp(64px, 9vw, 112px); }
.sec-sm { padding-block: clamp(48px, 6vw, 72px); }
.alt { background: var(--white); border-block: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.top { align-items: start; }
.split-wide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--electric); }
.h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; }
.h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); max-width: 38em; }
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; text-align: center; align-items: center; }
.sec-head.flush { margin-bottom: 0; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.demo-tag { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.fine { font-size: 13px; color: var(--muted); }
.fine a { color: var(--muted); }
.text-link { color: var(--electric); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; border: 1px solid transparent; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
.btn-primary { background: var(--electric); color: var(--electric-ink); box-shadow: 0 10px 24px -12px var(--electric); }
.btn-primary:hover { background: var(--electric-hover); transform: translateY(-1px); box-shadow: 0 14px 28px -12px var(--electric); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-light { background: var(--night-ink); color: var(--night); }
.btn-light:hover { transform: translateY(-1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Topbar + header */
.topbar { background: var(--night); color: var(--night-ink); font-size: 14px; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; min-height: 40px; padding-block: 8px; text-align: center; }
.topbar a { color: var(--night-ink); font-weight: 600; }
.dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); flex: none; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--white) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.logo-bg { fill: var(--ink); }
.logo-a { fill: var(--electric); }
.logo-b { fill: var(--white); }
.nav-panel { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links > li > a, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; background: none; border: 0; cursor: pointer; }
.nav-links > li > a:hover, .nav-trigger:hover, .nav-links a[aria-current="page"], .nav-trigger.is-current { color: var(--ink); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--electric); }
.nav-trigger svg { transition: transform 0.2s ease; }
.has-menu { position: relative; }
.has-menu.is-open .nav-trigger svg { transform: rotate(180deg); }
.menu { display: none; position: absolute; top: calc(100% + 10px); left: -20px; width: 560px; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.has-menu.is-open .menu { display: grid; }
.menu-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.menu-item:hover, .menu-item[aria-current="page"] { background: var(--paper); }
.menu-title { font-weight: 600; font-size: 15px; }
.menu-desc { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.menu-item.wide { grid-column: 1 / -1; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.nav-end { display: flex; align-items: center; gap: 10px; }
.nav-cta-mobile { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn .i-close { display: none; }
.nav.is-open .menu-btn .i-open { display: none; }
.nav.is-open .menu-btn .i-close { display: block; }

@media (max-width: 980px) {
  .nav-panel { display: none; position: absolute; top: calc(100% + 1px); left: calc(-1 * clamp(16px, 4vw, 40px)); right: calc(-1 * clamp(16px, 4vw, 40px)); flex-direction: column; align-items: stretch; gap: 12px; padding: 12px clamp(16px, 4vw, 40px) 20px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow-y: auto; }
  .nav.is-open .nav-panel { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-links > li > a, .nav-trigger { width: 100%; justify-content: space-between; padding: 14px 2px; font-size: 17px; }
  .nav-links a[aria-current="page"] { box-shadow: none; color: var(--electric); }
  .menu { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 10px; grid-template-columns: minmax(0, 1fr); background: transparent; }
  .menu-item { padding: 10px 12px; }
  .menu-item.wide { border-top: 0; margin-top: 0; }
  .nav-cta-mobile { display: inline-flex; }
  .menu-btn { display: inline-flex; }
  .nav-end .btn { display: none; }
}

/* Page hero (subpages) */
.page-hero { position: relative; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; border-bottom: 1px solid var(--line); }
.page-hero .split { align-items: center; }
.page-hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.page-hero.solo .page-hero-copy { max-width: 820px; }

/* Home hero */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 104px); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.hero h1 { font-size: clamp(44px, 6.4vw, 78px); line-height: 0.98; letter-spacing: -0.05em; }
.hero h1 .two { display: block; color: var(--ink); text-decoration: underline; text-decoration-color: var(--electric); text-decoration-thickness: 0.085em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.hero .lede { font-size: clamp(18px, 1.6vw, 20px); max-width: 32em; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { color: var(--signal); }

/* Product UI: chat + ad + alert */
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.chat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-bar .label { display: inline-flex; align-items: center; gap: 8px; }
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bubble { align-self: flex-end; max-width: 88%; background: var(--paper); border: 1px solid var(--line); padding: 11px 15px; border-radius: 14px 14px 4px 14px; font-size: 15px; line-height: 1.45; }
.answer-lines { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.answer-lines b { color: var(--ink); font-weight: 600; }
.sponsored { border: 1px solid var(--electric-line); background: var(--electric-soft); border-radius: var(--r-sm); padding: 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.fav { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.sp-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sp-title { font-weight: 600; font-size: 15.5px; margin-top: 2px; }
.sp-text { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.sp-url { font-family: var(--mono); font-size: 12px; color: var(--electric); margin-top: 6px; overflow-wrap: anywhere; }
.alert { position: relative; margin: -20px 14px 0 auto; width: min(360px, 92%); background: var(--night); color: var(--night-ink); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.alert-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alert-top .label { color: var(--night-muted); display: inline-flex; align-items: center; gap: 8px; }
.score { font-family: var(--mono); font-size: 12px; font-weight: 500; background: var(--signal); color: #FFFFFF; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.alert-name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.alert-meta { font-size: 13.5px; color: var(--night-muted); line-height: 1.5; }
.alert-meta b { color: var(--night-ink); font-weight: 500; }
.stage-note { margin-top: 12px; text-align: right; }

/* Generic UI panel (subpage heroes) */
.ui { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.ui-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ui-title { font-weight: 700; font-size: 15.5px; }
.ui-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ui-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; }
.ui-row small { display: block; color: var(--muted); font-size: 12.5px; }
.ui-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--electric); }
.bar.ok > span { background: var(--signal); }
.meter { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 14px; }
.meter .mono { text-align: right; font-size: 13px; color: var(--muted); }
.check { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; font-size: 12px; font-family: var(--mono); }
.check.yes { background: var(--signal-soft); color: var(--signal-ink); }
.check.no { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.engines { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 28px); gap: 8px; align-items: center; font-size: 14px; }
.engines .head { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: center; letter-spacing: 0.04em; }
.engines .q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pills */
.pill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-ok { background: var(--signal-soft); color: var(--signal-ink); }
.pill-blue { background: var(--electric-soft); color: var(--electric); }
.pill-muted { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.stat { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { font-size: clamp(40px, 5vw, 60px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--electric); }
.stat p { color: var(--ink-2); font-size: 15.5px; }
.stats-src { margin-top: 12px; }

/* Dark band + versus */
.band { background: var(--night); color: var(--night-ink); }
.band .eyebrow { color: var(--night-muted); }
.band .eyebrow::before { background: var(--signal); }
.band .lede { color: var(--night-muted); }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--night-line); border-radius: var(--r); overflow: hidden; }
.vs-col { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vs-col + .vs-col { border-left: 1px solid var(--night-line); background: var(--night-surface); }
.vs-head { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.vs-head small { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); font-weight: 400; margin-bottom: 6px; }
.vs-col.us .vs-head small { color: var(--signal); }
.vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-list li { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--night-line); }
.vs-list .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.vs-list .v { font-size: 16px; }

/* Capability cards (link cards) */
.cap { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); min-width: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.cap:hover { border-color: var(--electric); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cap h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.cap p { font-size: 15.5px; color: var(--ink-2); }
.cap .text-link { margin-top: auto; padding-top: 6px; }
.cap.key { border-color: var(--electric-line); background: linear-gradient(180deg, var(--electric-soft), transparent 60%), var(--white); }
.icon { width: 40px; height: 40px; border-radius: 10px; background: var(--electric-soft); color: var(--electric); display: inline-flex; align-items: center; justify-content: center; }
.icon.ok { background: var(--signal-soft); color: var(--signal-ink); }

/* Feature tiles (non-link) */
.tile { background: var(--paper); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alt .tile, .tile.on-paper { background: var(--paper); }
.tile.raised { background: var(--white); border: 1px solid var(--line); }
.tile h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
.tile p { font-size: 15px; color: var(--ink-2); }

/* How it works tabs */
.tabs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.tab-list { display: flex; flex-direction: column; gap: 10px; }
.tab { text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-size: inherit; }
.tab:hover { border-color: var(--ink-2); }
.tab[aria-selected="true"] { border-color: var(--electric); box-shadow: 0 0 0 1px var(--electric), var(--shadow); }
.tab-num { width: 40px; height: 40px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.tab[aria-selected="true"] .tab-num { background: var(--electric); border-color: var(--electric); color: var(--electric-ink); }
.tab-title { display: block; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
.tab-sub { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { font-size: 24px; letter-spacing: -0.02em; }
.panel p { color: var(--ink-2); }
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); }

/* Lists */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ticks svg { color: var(--signal); margin-top: 3px; }
.ticks.blue svg { color: var(--electric); }
.crosses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crosses li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.crosses svg { color: var(--muted); margin-top: 3px; }

/* Can / cannot */
.target-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 16px; }
.can { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cannot { background: var(--night); color: var(--night-ink); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cannot h3 { font-size: 20px; letter-spacing: -0.015em; }
.cannot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.cannot li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.cannot li svg { color: var(--night-muted); margin-top: 3px; }
.cannot p { font-size: 14px; color: var(--night-muted); border-top: 1px solid var(--night-line); padding-top: 14px; }

/* Dashboard */
.dash { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dash-title { font-weight: 700; font-size: 17px; }
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.f-cell { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-cell + .f-cell { border-left: 1px solid var(--line); }
.f-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.f-lab { font-size: 13px; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.accounts { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
.accounts th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 12px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.accounts td { padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.accounts tr:last-child td { border-bottom: 0; }
.co { font-weight: 600; }
.co small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.fit { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.row-muted td { color: var(--muted); }

/* Spec tables */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
.spec th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper); white-space: nowrap; }
.spec td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.spec td:first-child { color: var(--ink); font-weight: 600; }
.spec tr:last-child td { border-bottom: 0; }
.spec td.yes { color: var(--signal-ink); font-weight: 600; }
.spec td.no { color: var(--muted); }

/* Callouts */
.callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--electric-line); background: var(--electric-soft); font-size: 15.5px; }
.callout svg { color: var(--electric); margin-top: 2px; }
.callout strong { display: block; margin-bottom: 2px; }
.callout p { color: var(--ink-2); }
.callout.ok { border-color: var(--signal); background: var(--signal-soft); }
.callout.ok svg { color: var(--signal-ink); }
.callout.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.callout.warn svg { color: var(--warn); }

/* Paid + organic */
.po { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.po-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.po-card.paid { border-color: var(--electric-line); }
.po-card h3 { font-size: 24px; letter-spacing: -0.02em; }
.po-card p { color: var(--ink-2); }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 16px; }
.calc-in, .calc-out { border-radius: var(--r); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.calc-in { background: var(--white); border: 1px solid var(--line); }
.calc-out { background: var(--night); color: var(--night-ink); }
.calc-in label { font-weight: 600; }
.budget { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.range { width: 100%; accent-color: var(--electric); min-height: 32px; }
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.out { background: var(--night-surface); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.out-num { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.out-lab { font-size: 13px; color: var(--night-muted); }
.out.key { background: var(--signal-soft); outline: 1px solid var(--signal); }
.out.key .out-num { color: var(--signal); }
.calc-out .fine { color: var(--night-muted); }
.calc-out .fine a { color: var(--night-muted); }
.cost-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 15px; }
.cost-line b { font-variant-numeric: tabular-nums; }

/* Pricing */
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden; }
.price-main { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; }
.price-name { font-size: 22px; letter-spacing: -0.015em; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-size: clamp(56px, 6vw, 76px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.per { color: var(--muted); font-size: 17px; }
.price-sub { color: var(--ink-2); font-size: 15px; max-width: 30em; }
.refund { align-self: stretch; background: var(--signal-soft); border: 1px solid var(--signal); border-radius: var(--r-sm); padding: 16px 18px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.refund svg { color: var(--signal-ink); margin-top: 2px; }
.refund strong { display: block; font-size: 17px; margin-bottom: 4px; }
.refund p { font-size: 14.5px; color: var(--ink-2); }
.price-side { padding: clamp(26px, 4vw, 48px); background: var(--paper); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; }
.incl li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.incl svg { color: var(--electric); margin-top: 3px; }
.incl b { font-weight: 600; }
.excl { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; color: var(--muted); }

/* Refund timeline */
.refund-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.refund-line > div { padding: 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.refund-line > div + div { border-left: 1px solid var(--line); }
.refund-line .amt { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.refund-line .amt.ok { color: var(--signal-ink); }

/* Steps + timeline */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.step.key { border-color: var(--electric); box-shadow: 0 0 0 1px var(--electric); }
.step-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--electric); }
.step h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
.step p { font-size: 14.5px; color: var(--ink-2); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
.timeline li::before { content: ""; position: absolute; left: 117px; top: 8px; bottom: -6px; width: 1px; background: var(--line-2); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 112px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--electric); }
.timeline li.done::after { background: var(--electric); }
.t-when { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--electric); padding-top: 1px; }
.t-what { padding-left: 24px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-what h3 { font-size: 19px; letter-spacing: -0.015em; }
.t-what p { color: var(--ink-2); font-size: 15.5px; }

/* Stage blocks (how it works page) */
.stage-block { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 40px); padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); align-items: start; }
.stage-no { font-family: var(--mono); font-size: 13px; color: var(--electric); letter-spacing: 0.06em; padding-top: 8px; }
.stage-block h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-list { border-bottom: 1px solid var(--line); min-width: 0; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 20px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: var(--muted); }
.faq-list details[open] .pm-v { opacity: 0; }
.faq-list .faq-a { padding: 0 0 20px; color: var(--ink-2); max-width: 46em; display: flex; flex-direction: column; gap: 10px; }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 56px); }
.faq-group h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; margin-bottom: 12px; }

/* Final CTA */
.final { background: var(--night); color: var(--night-ink); border-radius: 24px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: end; background-image: linear-gradient(rgba(10, 21, 48, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 21, 48, 0.03) 1px, transparent 1px); background-size: 48px 48px; }
.final .h2 { font-size: clamp(34px, 4.6vw, 58px); }
.final .eyebrow { color: var(--night-muted); }
.final .eyebrow::before { background: var(--signal); }
.final-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.final-copy p { color: var(--night-muted); font-size: 18px; max-width: 32em; }
.final-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.call-gets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--night-ink); }
.call-gets li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.call-gets svg { color: var(--signal); margin-top: 3px; }

/* Booking page */
.book-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.book-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.book-card-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.booking-embed { min-height: 660px; display: flex; }
.booking-embed iframe, .booking-embed > div { width: 100%; min-height: 660px; border: 0; }
.booking-fallback { padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.slot-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.slot { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; font-size: 14px; color: var(--ink-2); background: var(--paper); }
.slot b { display: block; color: var(--ink); font-size: 15px; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email-chip { font-family: var(--mono); font-size: 14.5px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); user-select: all; overflow-wrap: anywhere; }
.copy-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 600; }
.copy-status { font-size: 13.5px; color: var(--muted); min-height: 1.3em; }
.qs { counter-reset: q; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.qs li { counter-increment: q; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.qs li::before { content: counter(q); width: 26px; height: 26px; border-radius: 8px; background: var(--electric-soft); color: var(--electric); font-family: var(--mono); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }

/* Prose (guide, legal, about) */
.doc-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.toc .label { margin-bottom: 8px; }
.toc a { color: var(--muted); text-decoration: none; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-left-color: var(--electric); }
.prose { max-width: 70ch; min-width: 0; font-size: 17px; color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { color: var(--ink); font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; margin-top: 2.2em; letter-spacing: -0.025em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); font-size: 20px; line-height: 1.25; margin-top: 1.8em; letter-spacing: -0.015em; }
.prose a { color: var(--electric); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 0.45em; }
.prose li::marker { color: var(--muted); }
.prose .spec-wrap, .prose .callout { margin-top: 1.4em; }
.prose .spec { font-size: 14.5px; }
.prose blockquote { margin: 1.4em 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--electric); color: var(--ink); font-size: 18px; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.prose .sources { font-size: 14.5px; }
.prose .sources li { overflow-wrap: anywhere; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
.placeholder { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 4px; font-family: var(--mono); font-size: 0.9em; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 56px) 28px; background: var(--white); }
.foot { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.foot-brand p { font-size: 14.5px; color: var(--muted); }
.foot-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foot-col h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.foot-col a, .foot-col button { color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 6px 0; background: none; border: 0; text-align: left; cursor: pointer; }
.foot-col a:hover, .foot-col button:hover { color: var(--ink); }
.legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }

/* Mobile booking bar */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--white) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 12px; }
.mobile-bar span { font-size: 13px; color: var(--muted); line-height: 1.3; }
.mobile-bar span b { display: block; color: var(--ink); font-size: 15px; }
.mobile-bar .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }

/* Consent banner */
.consent { position: fixed; z-index: 60; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100% - 32px)); background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.consent p { color: var(--ink-2); }
.consent a { color: var(--electric); }
.consent .actions .btn { min-height: 42px; padding: 0 16px; font-size: 14.5px; }

/* Responsive */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 960px) {
  .hero-grid, .split, .split-wide, .tabs, .target-grid, .calc, .price-card, .faq-grid, .final, .po, .book-grid, .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .price-side { border-left: 0; border-top: 1px solid var(--line); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-block { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stage-no { padding-top: 0; }
  .toc { position: static; display: none; }
  .menu { width: auto; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .vs, .grid-2, .grid-3, .grid-4, .stats, .refund-line { grid-template-columns: minmax(0, 1fr); }
  .vs-col + .vs-col { border-left: 0; border-top: 1px solid var(--night-line); }
  .stat + .stat, .refund-line > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .can { grid-template-columns: minmax(0, 1fr); }
  .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-cell:nth-child(3) { border-left: 0; }
  .f-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .outs { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-bar { display: flex; }
  body.has-mobile-bar { padding-bottom: 76px; }
  .consent { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .stage-note { text-align: left; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 28px; }
  .timeline li::before { left: 5px; }
  .timeline li::after { left: 0; }
  .t-what { padding-left: 0; }
  .slot-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-embed, .booking-embed iframe, .booking-embed > div { min-height: 720px; }
}
@media (max-width: 440px) {
  .actions .btn { width: 100%; }
  .final .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .tab, .cap, .nav-trigger svg { transition: none; }
  .btn-primary:hover, .cap:hover, .btn-light:hover { transform: none; }
}

/* Utilities and variants */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.meter-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-block.ind { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 0.75fr); }
.band .text-link { color: var(--night-ink); }
@media (max-width: 1080px) {
  .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .stage-block.ind { grid-template-columns: minmax(0, 1fr); }
  .stage-block.ind > .pill { justify-self: start; }
}
@media (max-width: 720px) {
  .steps.four, .stats.two { grid-template-columns: minmax(0, 1fr); }
}

/* Booking layout: intro, calendar, details (calendar moves up on phones) */
.book-grid { grid-template-areas: "intro card" "details card"; row-gap: 32px; }
.book-intro { grid-area: intro; }
.book-card { grid-area: card; align-self: start; }
.book-details { grid-area: details; }
.pills a.pill { text-decoration: none; font-size: 12.5px; padding: 6px 12px; }
.pills a.pill:hover { background: var(--electric); color: var(--electric-ink); }
.stage-block.ind > .pill { justify-self: start; }
@media (max-width: 960px) {
  .book-grid { grid-template-areas: "intro" "card" "details"; }
}
@media (max-width: 720px) {
  .tb-more { display: none; }
}

/* Prompt-to-Pipeline loop */
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.loop li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.loop li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -14px; top: 30px; width: 14px; height: 2px; background: var(--electric); }
.loop li:not(:last-child)::before { content: ""; position: absolute; z-index: 1; right: -15px; top: 26px; border: 5px solid transparent; border-left: 6px solid var(--electric); border-right: 0; }
.loop li.key { border-color: var(--electric); box-shadow: 0 0 0 1px var(--electric); }
.loop-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--electric); }
.loop h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; }
.loop p { font-size: 14.5px; color: var(--ink-2); }
.loop-out { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.loop-out b { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.loop-return { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border: 1px dashed var(--electric-line); border-radius: var(--r); background: var(--electric-soft); color: var(--ink-2); font-size: 15px; text-align: left; }
.loop-return svg { color: var(--electric); flex: none; }

/* Stage detail rows */
.split.row { padding-block: 28px; }
.split.row + .split.row { border-top: 1px solid var(--line); }
.idflow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.idflow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.idn { width: 30px; height: 30px; border-radius: 50%; background: var(--electric); color: var(--electric-ink); font-family: var(--mono); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.idflow h4 { font-size: 16.5px; letter-spacing: -0.01em; margin: 3px 0 2px; }
.idflow p { font-size: 15px; color: var(--ink-2); }

/* Stack chips */
.stack-band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(22px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.stack-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* Report and pricing additions */
.funnel.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.agency-strip { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: border-color 0.2s ease; }
.agency-strip:hover { border-color: var(--electric); }
.agency-strip .label { color: var(--electric); }
.agency-text { font-size: 15.5px; color: var(--ink-2); }
.agency-text b { color: var(--ink); }
.price-side .label + .incl { margin-top: -6px; }

/* White-label preview (agencies page) */
.wl-logo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-right: 10px; border: 1px dashed var(--line-2); border-radius: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.mini-funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mini-funnel > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-funnel > div + div { border-left: 1px solid var(--line); }
.mini-funnel .f-num { font-size: 24px; }
.spec td svg { width: 16px; height: 16px; color: var(--signal); vertical-align: -3px; margin-right: 4px; }

@media (max-width: 1080px) {
  .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loop li:nth-child(3)::after, .loop li:nth-child(3)::before { display: none; }
}
@media (max-width: 960px) {
  .stack-band { grid-template-columns: minmax(0, 1fr); }
  .funnel.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .funnel.five .f-cell:nth-child(4) { border-left: 0; }
  .funnel.five .f-cell:nth-child(n+4) { border-top: 1px solid var(--line); }
  .split.row .ui { order: 2; }
}
@media (max-width: 720px) {
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop li:not(:last-child)::after { display: block; right: auto; left: 30px; top: auto; bottom: -14px; width: 2px; height: 14px; }
  .loop li:not(:last-child)::before { display: block; right: auto; left: 26px; top: auto; bottom: -15px; border: 5px solid transparent; border-top: 6px solid var(--electric); border-bottom: 0; }
  .loop li:nth-child(3)::after, .loop li:nth-child(3)::before { display: block; }
  .funnel.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel.five .f-cell:nth-child(n) { border-left: 0; border-top: 0; }
  .funnel.five .f-cell:nth-child(even) { border-left: 1px solid var(--line); }
  .funnel.five .f-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .agency-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mini-funnel { grid-template-columns: minmax(0, 1fr); }
  .mini-funnel > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .loop-return { justify-content: flex-start; }
}

/* Wordmark */
.wordmark { white-space: nowrap; }
.wm-l { color: var(--electric); }
.band .wm-l, .final .wm-l { color: var(--electric); }

/* Two-package pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plan .label { color: var(--electric); }
.plan-for { color: var(--ink-2); font-size: 15.5px; }
.plan .incl { padding-top: 16px; border-top: 1px solid var(--line); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plans-foot { margin-top: 16px; }
.plans-note { margin-top: 10px; text-align: center; }
.loop-n .pkg { display: block; margin-top: 4px; font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Answerbid dark identity ---------- */
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1, h2, .h1, .h2, .hero h1, .price, .stat-num, .final h2, .page-hero h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; }
.h3, h3 { letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(50px, 7.2vw, 96px); line-height: 0.96; letter-spacing: -0.03em; }
.h2 { letter-spacing: -0.02em; }
.stat-num, .price { font-weight: 500; letter-spacing: -0.03em; }
.f-num { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }

/* the one bold move: the marker line under the answer */
.hero h1 .two { color: var(--ink); text-decoration: none; }
.hero h1 .mark { background-image: linear-gradient(var(--electric), var(--electric)); background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 0.075em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 0.04em; animation: markline 900ms cubic-bezier(.2,.7,.2,1) 250ms both; }
@keyframes markline { from { background-size: 0% 0.075em; } to { background-size: 100% 0.075em; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .mark { animation: none; } }

/* quieter template chrome */
.eyebrow, .kicker { display: none; }
.label, .step-n, .loop-n, .t-when, .stage-no, .demo-tag, .engines .head, .vs-list .k, .accounts th, .vs-head small, .alert-top .label, .chat-bar .label, .ui-title { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.label { font-size: 13px; color: var(--muted); }
.step-n, .loop-n { font-size: 13px; color: var(--electric); font-weight: 600; }
.demo-tag { font-size: 12px; color: var(--muted); border-color: var(--line-2); }
.btn svg, .text-link svg { display: none; }
.mono { font-family: var(--mono); }

/* brand */
.brand { gap: 0; font-family: var(--sans); font-weight: 650; font-size: 23px; letter-spacing: -0.035em; color: var(--ink); }
.wordmark { white-space: nowrap; line-height: 1; }
.wm-l { color: inherit; background-image: linear-gradient(var(--electric), var(--electric)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 3px; padding-bottom: 5px; }

/* surfaces */
.site-header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--line); }
.topbar { background: var(--night); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--electric); }
.hero { background: var(--paper); background-image: none; }
.sec.alt, .alt { background: #F5F8FD; }
.ui, .dash, .price-card, .plan, .stack-band, .chat, .tile.raised, .po-card, .step, .loop li, .agency-strip, .cap { background: var(--white); border-color: var(--line); box-shadow: none; }
.ui-row, .mini-funnel, .engines .q { background: transparent; }
.ui-row { background: rgba(10, 21, 48, 0.03); border-color: var(--line); }
.chips li { background: transparent; border-color: var(--line-2); color: var(--ink-2); font-weight: 500; }
.tile { background: rgba(10, 21, 48, 0.03); }
.btn-primary { background: var(--electric); color: var(--electric-ink); border-color: var(--electric); }
.btn-primary:hover { background: var(--electric-hover); color: var(--electric-ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }
.btn-light { background: var(--electric); color: var(--electric-ink); }
.text-link { color: var(--electric); }
a { color: var(--electric); }

/* chat mock: the answer, underlined, then the ad */
.chat { background: #FFFFFF; }
.bubble { background: rgba(10, 21, 48, 0.07); color: var(--ink); border: 0; }
.answer-lines { padding-bottom: 14px; border-bottom: 2px solid var(--electric); }
.answer-lines p, .answer-lines b { color: var(--ink-2); }
.sponsored { background: rgba(10, 21, 48, 0.04); border: 1px solid var(--line); }
.sp-tag { color: var(--muted); }
.sp-url { color: var(--electric); }
.fav { background: var(--ink); color: var(--paper); }
.alert { background: #F5F8FD; border: 1px solid var(--line-2); }
.score, .pill-ok { background: var(--signal-soft); color: var(--signal-ink); border-color: transparent; }
.pill-blue { background: var(--electric-soft); color: var(--electric); border-color: transparent; }
.pill-muted { background: rgba(10, 21, 48, 0.06); color: var(--muted); }
.check.yes { background: var(--signal-soft); color: var(--signal-ink); }
.check.no { color: var(--muted); }
.bar { background: rgba(10, 21, 48, 0.08); }
.bar span, .bar.ok span { background: var(--electric); }
.loop li.key, .step.key { border-color: var(--electric); box-shadow: none; }
.loop li:not(:last-child)::after { background: var(--electric); }
.loop li:not(:last-child)::before { border-left-color: var(--electric); }
.loop-return { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); }
.loop-return svg { color: var(--electric); }
.loop-out { border-top-color: var(--line-2); }
.loop-out b { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; }
.loop-n .pkg { color: var(--muted); font-weight: 400; }
.idn { background: var(--electric); color: var(--electric-ink); font-family: var(--sans); font-weight: 600; }
.stat { border-color: var(--line); }
.stats { border-color: var(--line); background: transparent; }
.refund { background: transparent; border: 1px solid var(--line-2); }
.refund svg { color: var(--electric); }
.callout { background: var(--electric-soft); border-color: var(--electric-line); }
.callout svg { color: var(--electric); }
.final { background: #F5F8FD; border: 1px solid var(--line); }
.final h2 { color: var(--ink); }
.site-footer { background: #F5F8FD; border-top: 1px solid var(--line); }
.consent { background: #FFFFFF; color: var(--ink); border-color: var(--line-2); }
.mobile-bar { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line); }
.spec th { color: var(--muted); }
.spec td, .spec th, .accounts td, .accounts th { border-color: var(--line); }
.accounts .fit { color: var(--signal-ink); }
.row-muted td { color: var(--muted); }
.wl-logo { border-color: var(--line-2); color: var(--muted); font-family: var(--sans); text-transform: none; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
.foot-col h2 { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.pill { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-weight: 600; }
.btn-primary, .btn-primary:hover, .btn-light, .btn-light:hover { box-shadow: none; transform: none; }
.stat-num { color: var(--ink); }
.split.row .h3, .page-hero .h3, .po-card h3, .price-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; }
.split.row .h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.price-name { font-size: 26px; }
.engines .head { font-family: var(--sans); }
.score { font-family: var(--sans); font-weight: 600; }
.partner-extras { margin-top: 16px; align-items: stretch; } .partner-extras .refund { align-self: stretch; }
.plan.key { border-color: var(--electric); }
.compare { margin-top: 28px; }
.compare-title { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.015em; margin-bottom: 12px; }
.compare-table { min-width: 560px; }
.compare-table th[scope="row"] { font-weight: 500; color: var(--ink); text-align: left; }
.compare-table td.yes svg { width: 18px; height: 18px; color: var(--electric); margin: 0; }
.compare-table td.no { color: var(--muted); }
.compare-table thead th:nth-child(3), .compare-table td:nth-child(3) { background: var(--electric-soft); }
.spec th { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; }
.compare, .compare .spec-wrap { min-width: 0; max-width: 100%; }
.compare-table th[scope="row"] { white-space: normal; background: transparent; font-size: 15px; }
.compare-table td { white-space: normal; }
@media (max-width: 720px) {
  .compare-table { min-width: 0; font-size: 14px; }
  .compare-table th, .compare-table td { padding: 10px 10px; }
}
.spec-wrap, .table-wrap { position: relative; }
.benefits { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.benefit-list li { background: var(--white); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.benefit-list b { font-size: 16px; color: var(--ink); }
.benefit-list span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 720px) { .benefit-list { grid-template-columns: minmax(0, 1fr); } }

/* One package: wide plan card */
.plan.solo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.solo-head { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.solo-head .btn { margin-top: 6px; align-self: flex-start; }
.solo-head .price { font-size: clamp(48px, 6vw, 72px); }
.solo-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--line); }
.incl-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.incl-group h4 { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.plan.solo .incl { padding-top: 0; border-top: 0; font-size: 15px; }
.margin-list { margin: 0; display: flex; flex-direction: column; }
.margin-list div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.margin-list dt { color: var(--ink-2); }
.margin-list dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.margin-list .keep dt, .margin-list .keep dd { color: var(--electric); font-weight: 600; }
@media (max-width: 960px) {
  .plan.solo { grid-template-columns: minmax(0, 1fr); }
  .solo-head { position: static; }
  .solo-groups { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) { .solo-groups { grid-template-columns: minmax(0, 1fr); } }

/* v3: three parts, buyer flow, value calculator, two plans */
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.part { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.part.key { border-color: var(--electric); }
.part-n { font-size: 13.5px; font-weight: 600; color: var(--electric); }
.part h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.015em; }
.part-what { color: var(--ink-2); font-size: 15.5px; }
.part-block { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.part-block > b, .part-gain > b { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.part .ticks { font-size: 15px; }
.part-gain { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: rgba(14, 140, 200, 0.08); border: 1px solid rgba(14, 140, 200, 0.28); }
.part-gain span { font-size: 15px; color: var(--ink); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--white); overflow: hidden; }
.flow li { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; min-width: 0; position: relative; }
.flow li + li { border-left: 1px solid var(--line); }
.flow-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.flow li:nth-child(4) .flow-n, .flow li:nth-child(5) .flow-n { background: var(--electric); color: var(--electric-ink); border-color: var(--electric); }
.flow b { display: block; font-size: 16px; margin-bottom: 6px; }
.flow p { font-size: 14.5px; color: var(--ink-2); }
.flow-part { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.value { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; }
.value-in, .value-out { border-radius: 20px; padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.value-in { background: var(--white); border: 1px solid var(--line); }
.value-in .field { display: flex; flex-direction: column; gap: 8px; }
.value-in label { font-weight: 600; }
.value-in output { font-family: var(--display); font-size: clamp(34px, 4vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; }
.value-out { background: var(--deep, #F5F8FD); border: 1px solid var(--line); gap: 0; }
.vo-row, .vo-break { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.vo-row span, .vo-break span { color: var(--ink-2); font-size: 15px; }
.vo-row b { font-size: 22px; font-variant-numeric: tabular-nums; text-align: right; }
.vo-row small, .vo-break small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.vo-break { border-bottom: 0; padding-top: 20px; }
.vo-break span { color: var(--ink); font-weight: 600; }
.vo-break b { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5vw, 60px); line-height: 1; color: var(--electric); text-align: right; }
.gains { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gains > div { padding: 18px 20px; border-top: 2px solid var(--electric); display: flex; flex-direction: column; gap: 6px; }
.gains b { font-size: 16px; }
.gains p { font-size: 15px; color: var(--ink-2); }
.method { margin-top: 14px; max-width: 70em; }
.plans.two { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.price-contact { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; color: var(--ink); }
@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow li:nth-child(4) { border-left: 0; }
  .flow li:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .parts, .gains { grid-template-columns: minmax(0, 1fr); }
  .value { grid-template-columns: minmax(0, 1fr); }
  .plans.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* v4: new era, try strip, example scenarios, needs */
.era { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.era-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.era-n { font-size: 13.5px; font-weight: 600; color: var(--electric); }
.era-card h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.15; letter-spacing: -0.01em; }
.era-card p { color: var(--ink-2); font-size: 15.5px; }
.era-stats { display: flex; flex-direction: column; gap: 0; }
.era-stats > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.era-stats b { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); white-space: nowrap; }
.era-stats span { font-size: 15px; color: var(--ink-2); }
.try { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.try li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 16px 0 0; border-top: 2px solid var(--electric); font-size: 15px; color: var(--ink-2); }
.try li svg { color: var(--electric); margin-top: 3px; }
.try b { color: var(--ink); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.case-tag { align-self: flex-start; font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line-strong, rgba(10, 21, 48, 0.22)); border-radius: 999px; padding: 4px 12px; }
.case h3 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 29px); line-height: 1.12; letter-spacing: -0.01em; }
.case-start { font-size: 15px; color: var(--ink-2); }
.case-start b { color: var(--ink); }
.case-did { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.case-did li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--line); }
.case-did span { font-size: 12.5px; font-weight: 600; color: var(--electric); padding-top: 1px; }
.case-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: auto; }
.case-res > div { background: var(--deep, #F5F8FD); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.case-res b { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); }
.case-res span { font-size: 13.5px; color: var(--ink-2); }
.case-pay { font-size: 15px; font-weight: 600; color: var(--signal); }
.cases-note { margin-top: 14px; max-width: 70em; }
.needs { margin-top: 16px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--r); display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.needs h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.needs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.needs li { font-size: 15px; color: var(--ink-2); }
.needs li b { display: block; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 1100px) { .era { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .era-card:first-child { grid-column: 1 / -1; } .try { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cases { grid-template-columns: minmax(0, 1fr); } .needs, .needs ul { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .era, .try { grid-template-columns: minmax(0, 1fr); } .era-stats > div { grid-template-columns: 80px minmax(0, 1fr); } }

/* =====================================================================
   v5 · Answerbid brand: deep navy, electric blue, Outfit, planet glow
   ===================================================================== */
:root {
  --blue: #1F66FF;
  --blue-hi: #1652D9;
  --blue-text: #1A57E8;
  --blue-soft: rgba(31, 102, 255, 0.07);
  --blue-line: rgba(31, 102, 255, 0.30);
  --card: #FFFFFF;
  --card-line: #E1E7F1;
  --signal: #0A73A8;
  --r: 16px;
}
body { font-size: 17px; line-height: 1.6; background: var(--paper); }
h1, h2, h3, h4, .h1, .h2, .h3, .price, .price-name, .final h2, .page-hero h1, .stat-num, .f-num { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; }
a, .text-link { color: var(--blue-text); }
::selection { background: var(--blue); color: #fff; }
:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; }

/* brand */
.brand { font-weight: 700; font-size: 25px; letter-spacing: -0.04em; }
.wm-l { background-image: none; padding-bottom: 0; color: var(--blue); }
.foot-tag { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }

/* labels: the brand board's spaced caps, used once per section */
.eyebrow, .kicker, .ab-lbl { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-text); background: none; border: 0; padding: 0; }
.eyebrow::before, .kicker::before { display: none; }

/* buttons */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary, .btn-light { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 12px 32px -12px rgba(31, 102, 255, 0.85); }
.btn-primary:hover, .btn-light:hover { background: var(--blue-hi); border-color: var(--blue-hi); color: #fff; box-shadow: 0 16px 40px -12px rgba(31, 102, 255, 0.95); }
.btn-ghost { background: #FFFFFF; border: 1px solid var(--card-line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue-line); background: var(--blue-soft); color: var(--ink); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; }

/* chrome */
.topbar { background: #F5F8FD; }
.topbar a { color: var(--blue-text); }
.site-header { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(10, 21, 48, 0.10); }
.sec.alt, .alt { background: #F5F8FD; }
.site-footer { background: #F5F8FD; }
.final { background: radial-gradient(120% 140% at 100% 0%, rgba(31, 102, 255, 0.30), rgba(31, 102, 255, 0) 55%), #F5F8FD; border: 1px solid var(--card-line); }
.final .eyebrow { color: var(--blue-text); }
.final-copy p { color: var(--ink-2); }
.dot-live, .ab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(14, 140, 200, 0.18); display: inline-block; }
.ab-dot { margin-right: 8px; vertical-align: 1px; animation: abpulse 2s ease-in-out infinite; }
@keyframes abpulse { 50% { box-shadow: 0 0 0 7px rgba(14, 140, 200, 0.05); } }

/* section heads */
.ab-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.ab-head.center { margin-inline: auto; text-align: center; align-items: center; }
.ab-head.flush { margin-bottom: 0; }
.ab-h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1; letter-spacing: -0.045em; }
.ab-h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.03; letter-spacing: -0.04em; }
.ab-lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--ink-2); max-width: 40em; }
.ab-blue { color: var(--blue); }
.ab-tag { font-size: 12px; color: var(--muted); border: 1px solid var(--card-line); border-radius: 999px; padding: 2px 10px; }

/* planet glow */
.ab-planet { position: absolute; z-index: 0; width: 1500px; aspect-ratio: 1; border-radius: 50%; left: 42%; top: 70px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #050912 0 69%, rgba(5, 9, 18, 0) 71%);
  box-shadow: 0 0 0 1.5px rgba(110, 160, 255, 0.55), -30px -40px 90px -10px rgba(31, 102, 255, 0.55), -60px -80px 220px 20px rgba(31, 102, 255, 0.22), inset 60px 70px 140px -50px rgba(61, 123, 255, 0.55); }
.ab-planet.small { width: 1100px; left: 76%; top: 30px; opacity: 0.85; }

/* hero */
.ab-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); background: radial-gradient(70% 60% at 85% 0%, rgba(31, 102, 255, 0.14), rgba(31, 102, 255, 0) 70%), var(--paper); }
.ab-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ab-hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ab-hero h1 { font-size: clamp(48px, 7.2vw, 92px); line-height: 0.98; letter-spacing: -0.05em; }
.ab-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ab-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 15px; }
.ab-mini li { display: inline-flex; align-items: center; gap: 8px; }
.ab-mini svg { color: var(--blue-text); width: 18px; height: 18px; }

.ab-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; box-shadow: 0 40px 90px -40px rgba(16, 38, 90, 0.22), 0 1px 0 rgba(10, 21, 48, 0.02); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ab-card-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.ab-card-bar svg { width: 14px; height: 14px; color: var(--blue-text); vertical-align: -2px; }
.ab-stage { position: relative; min-height: 540px; }
.ab-chat { position: relative; width: min(100%, 470px); padding: 22px; display: flex; flex-direction: column; gap: 14px; margin-top: 56px; }
.ab-q { align-self: flex-end; max-width: 88%; background: rgba(10, 21, 48, 0.08); border-radius: 14px 14px 4px 14px; padding: 12px 14px; font-size: 15px; color: var(--ink); }
.ab-a { font-size: 15px; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--card-line); }
.ab-you { color: #1447C8; background: #EAF1FF; border: 1px solid var(--blue-line); border-radius: 6px; padding: 0 5px; font-weight: 600; }
.ab-sp { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(31, 102, 255, 0.08); border: 1px solid var(--blue-line); font-size: 14px; color: var(--ink-2); }
.ab-sp b { font-size: 15.5px; color: var(--ink); }
.ab-sp-tag { font-size: 12px; color: var(--blue-text); font-weight: 600; }
.ab-sp-url { color: var(--blue-text); font-size: 13px; }
.ab-score { position: absolute; right: 0; top: 0; width: 230px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.ab-card-k { font-size: 12.5px; color: var(--muted); }
.ab-score-row { display: flex; align-items: flex-end; gap: 10px; }
.ab-score-row b { font-size: 52px; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); }
.ab-score-row span { font-size: 13px; line-height: 1.3; color: var(--ink-2); padding-bottom: 4px; }
.ab-spark { width: 100%; height: 48px; }
.ab-up { font-size: 13px; font-weight: 600; color: var(--signal); }
.ab-live { position: absolute; right: -8px; bottom: 0; width: 340px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ab-live .ab-card-bar { color: var(--ink-2); margin-bottom: 4px; }
.ab-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(10, 21, 48, 0.04); border: 1px solid rgba(10, 21, 48, 0.10); }
.ab-row b { display: block; font-size: 14.5px; color: var(--ink); }
.ab-row small { display: block; font-size: 12.5px; color: var(--muted); }
.ab-row em, .ab-accts em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ab-row em.ab-em-soft, .ab-accts em.ab-em-soft { background: transparent; color: var(--blue-text); border: 1px solid var(--blue-line); }

/* strip + marquee */
.ab-strip { border-block: 1px solid rgba(10, 21, 48, 0.10); background: #F5F8FD; }
.ab-strip-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 24px; align-items: center; padding-block: 22px; }
.ab-strip-in > p { font-size: 15px; color: var(--ink-2); }
.ab-strip-in > p b { color: var(--ink); }
.ab-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ab-marquee-track { display: flex; gap: 40px; width: max-content; animation: abscroll 42s linear infinite; }
.ab-marquee-track span { font-size: 17px; font-weight: 600; color: #5E6A86; white-space: nowrap; letter-spacing: -0.01em; }
@keyframes abscroll { to { transform: translateX(-50%); } }

/* problem */
.ab-pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-pains li { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-num { font-size: 15px; font-weight: 700; color: var(--blue-text); letter-spacing: 0.02em; }
.ab-pain-tag { font-size: 13px; color: var(--muted); }
.ab-pains h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.ab-pains p { font-size: 15.5px; color: var(--ink-2); }
.ab-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--card-line); border-radius: var(--r); overflow: hidden; }
.ab-stats > div { padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; background: rgba(31, 102, 255, 0.04); }
.ab-stats > div + div { border-left: 1px solid var(--card-line); }
.ab-stats b { font-size: clamp(42px, 5vw, 60px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.ab-stats span { font-size: 15.5px; color: var(--ink-2); }
.ab-src { margin-top: 12px; }

/* word band */
.ab-band { overflow: hidden; padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid rgba(10, 21, 48, 0.10); background: #F5F8FD; }
.ab-band-track { display: flex; align-items: baseline; gap: 0.5em; width: max-content; animation: abscroll 36s linear infinite; font-size: clamp(40px, 6vw, 84px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; white-space: nowrap; }
.ab-band-track span { color: var(--ink); }
.ab-band-track b { color: var(--blue-hi); font-weight: 700; }
.ab-band-track i { font-style: normal; color: rgba(10, 21, 48, 0.30); }
.ab-band-track span:not(:first-child) { margin-left: 0.6em; }

/* platform */
.ab-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -12px 0 clamp(24px, 4vw, 40px); }
.ab-tabs a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; border: 1px solid var(--card-line); background: #FFFFFF; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.ab-tabs a:hover { border-color: var(--blue-line); background: var(--blue-soft); }
.ab-tabs span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 13px; }
.ab-feat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid rgba(10, 21, 48, 0.10); }
.ab-feat.rev .ab-feat-copy { order: 2; }
.ab-feat-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ab-feat-copy h3 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.035em; }
.ab-feat-copy > p { color: var(--ink-2); font-size: 17px; }
.ab-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ab-ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; color: var(--ink); }
.ab-ticks svg { color: var(--blue-text); margin-top: 3px; }
.ab-note { font-size: 15px; color: var(--ink-2); padding: 14px 16px; border-radius: 12px; background: rgba(14, 140, 200, 0.06); border: 1px solid rgba(14, 140, 200, 0.25); }
.ab-note b { color: var(--ink); }

.ab-mock { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; box-shadow: 0 50px 100px -50px rgba(31, 102, 255, 0.45), 0 40px 80px -40px rgba(16, 38, 90, 0.22); }
.ab-mock-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--card-line); }
.ab-mock-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--card-line); }
.ab-mock-foot b { color: var(--ink); }
.ab-track { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 52px); gap: 8px; align-items: center; }
.ab-th { font-size: 12px; color: var(--muted); }
.ab-th.c { text-align: center; }
.ab-tq { font-size: 14.5px; color: var(--ink-2); }
.ab-track i { font-style: normal; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: var(--muted); background: rgba(10, 21, 48, 0.04); }
.ab-track i.y { background: var(--blue); color: #fff; font-weight: 700; }
.ab-audit { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
.ab-audit-score { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: rgba(31, 102, 255, 0.07); border: 1px solid var(--blue-line); }
.ab-audit-score span { font-size: 13px; color: var(--muted); }
.ab-audit-score b { font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.ab-audit-score b i { font-style: normal; color: var(--blue-text); font-size: 28px; }
.ab-meter { height: 8px; border-radius: 99px; background: rgba(10, 21, 48, 0.10); overflow: hidden; }
.ab-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--signal)); border-radius: 99px; }
.ab-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-checks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.ab-checks li span { flex: none; min-width: 88px; text-align: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 8px; }
.ab-checks .ok { background: var(--blue); color: #fff; }
.ab-checks .wip { background: rgba(14, 140, 200, 0.14); color: var(--signal); }
.ab-checks .todo { border: 1px solid var(--card-line); color: var(--muted); }
.ab-adb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ab-sp.big { padding: 18px 20px; font-size: 15px; }
.ab-sp.big b { font-size: 18px; }
.ab-fields { display: flex; flex-direction: column; }
.ab-fields > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(10, 21, 48, 0.10); font-size: 14px; }
.ab-fields > div:last-child { border-bottom: 0; }
.ab-fields span { color: var(--muted); }
.ab-fields b { color: var(--ink); font-weight: 500; }
.ab-fields b.live { color: var(--signal); font-weight: 600; }
.ab-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-tiles > div { padding: 14px; border-radius: 12px; background: rgba(10, 21, 48, 0.05); border: 1px solid rgba(10, 21, 48, 0.12); display: flex; flex-direction: column; gap: 4px; }
.ab-tiles span { font-size: 12px; color: var(--muted); }
.ab-tiles b { font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.ab-bars { display: flex; flex-direction: column; gap: 8px; }
.ab-bars > div { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.ab-bars i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--blue-hi)); }
.ab-bars b { text-align: right; color: var(--ink); font-weight: 600; }
.ab-accts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-accts > div { padding: 12px; border-radius: 12px; background: rgba(10, 21, 48, 0.04); border: 1px solid rgba(10, 21, 48, 0.12); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ab-accts b { font-size: 14px; color: var(--ink); line-height: 1.25; }
.ab-accts small { font-size: 12px; color: var(--muted); }

/* steps */
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.ab-steps li { position: relative; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-steps li:first-child { border-color: var(--blue-line); box-shadow: 0 0 0 1px rgba(31, 102, 255, 0.25), 0 30px 60px -40px rgba(31, 102, 255, 0.8); }
.ab-when { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--signal); background: rgba(14, 140, 200, 0.08); border-radius: 999px; padding: 3px 10px; }
.ab-steps h3 { font-size: 24px; letter-spacing: -0.025em; }
.ab-steps p { font-size: 15px; color: var(--ink-2); }

/* compare */
.ab-compare { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.ab-compare th, .ab-compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid rgba(10, 21, 48, 0.10); color: var(--ink-2); }
.ab-compare thead th { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ab-compare th[scope="row"] { text-align: left; color: var(--ink); font-weight: 500; letter-spacing: 0; }
.ab-compare .ab-us { background: #F0F5FF; color: var(--ink); }
.ab-compare thead .ab-us { background: var(--blue); color: #fff; font-weight: 700; border-radius: 14px 14px 0 0; font-size: 16px; }
.ab-compare tbody tr:last-child .ab-us { border-radius: 0 0 14px 14px; }
.ab-compare td svg { width: 20px; height: 20px; color: var(--blue-text); }
.ab-compare td.ab-us svg { color: var(--blue); }

/* teaser */
.ab-teaser { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: end; padding: clamp(32px, 5vw, 56px); border-radius: 24px; border: 1px solid var(--card-line); background: #F5F8FD; }
.ab-teaser-glow { position: absolute; width: 900px; aspect-ratio: 1; border-radius: 50%; right: -420px; top: -620px; box-shadow: 0 0 0 1.5px rgba(110, 160, 255, 0.5), 0 0 120px 10px rgba(31, 102, 255, 0.45), inset -40px -60px 120px -40px rgba(61, 123, 255, 0.55); background: #050912; pointer-events: none; }
.ab-teaser-copy { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ab-teaser .actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* existing components, rebranded */
.case, .plan, .value-in, .era-card, .needs, .refund, .faq-list details { background: var(--card); border-color: var(--card-line); }
.value-out { background: #F5F8FD; border-color: var(--card-line); }
.case-tag { border-color: rgba(10, 21, 48, 0.3); }
.case-did span, .part-n, .era-n { color: var(--blue-text); }
.case-pay { color: var(--signal); }
.case-res > div { background: #F5F8FD; }
.plan.key { border-color: var(--blue-line); box-shadow: 0 0 0 1px rgba(31, 102, 255, 0.2), 0 60px 120px -60px rgba(31, 102, 255, 0.6); }
.plan .label { color: var(--blue-text); }
.incl svg { color: var(--blue-text); }
.vo-break b { color: var(--blue-hi); }
.range { accent-color: var(--blue); }
.solo-head .price { font-size: clamp(56px, 6.4vw, 80px); letter-spacing: -0.05em; }

/* page hero for inner pages */
.ab-pagehero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(70% 70% at 90% 0%, rgba(31, 102, 255, 0.14), rgba(31, 102, 255, 0) 70%), var(--paper); }
.ab-pagehero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.ab-tight { padding-top: 0; }
.page-hero { background: radial-gradient(70% 70% at 90% 0%, rgba(31, 102, 255, 0.12), rgba(31, 102, 255, 0) 70%), var(--paper); }

/* responsive */
@media (max-width: 1100px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .ab-chat { grid-column: 1 / -1; width: 100%; margin-top: 0; }
  .ab-score, .ab-live { position: static; width: auto; }
  .ab-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-steps li:last-child { grid-column: 1 / -1; }
  .ab-planet { left: 30%; top: 420px; }
}
@media (max-width: 900px) {
  .ab-feat, .ab-feat.rev { grid-template-columns: minmax(0, 1fr); }
  .ab-feat.rev .ab-feat-copy { order: 0; }
  .ab-strip-in { grid-template-columns: minmax(0, 1fr); }
  .ab-teaser { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab-stats { grid-template-columns: minmax(0, 1fr); }
  .ab-stats > div + div { border-left: 0; border-top: 1px solid var(--card-line); }
}
@media (max-width: 640px) {
  .ab-stage { grid-template-columns: minmax(0, 1fr); }
  .ab-pains, .ab-steps { grid-template-columns: minmax(0, 1fr); }
  .ab-audit { grid-template-columns: minmax(0, 1fr); }
  .ab-accts, .ab-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-accts > div:last-child { grid-column: 1 / -1; }
  .ab-track { grid-template-columns: minmax(0, 1fr) repeat(4, 34px); gap: 6px; }
  .ab-tq { font-size: 13px; }
  .ab-planet { width: 1100px; left: 10%; top: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-marquee-track, .ab-band-track, .ab-dot { animation: none; }
  .ab-marquee { overflow-x: auto; }
  .ab-band-track { flex-wrap: wrap; width: auto; white-space: normal; padding-inline: 16px; }
}

/* v5 fixes */
.ab-hero h1 { font-size: clamp(44px, 5.8vw, 78px); line-height: 1; }
.ab-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.ab-chat { width: min(100%, 420px); margin-top: 36px; }
.ab-score { width: 222px; }
.ab-live { top: 356px; bottom: auto; right: -12px; width: 318px; }
.ab-stage { min-height: 580px; }
.ab-feat-copy p.ab-lbl { font-size: 12.5px; color: var(--blue-text); }
.ab-feat.rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.final-copy p.eyebrow { font-size: 12.5px; color: var(--blue-text); }
.foot-brand p.foot-tag { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 1100px) { .ab-live { top: auto; } .ab-stage { min-height: 0; } }
@media (max-width: 900px) { .ab-feat.rev { grid-template-columns: minmax(0, 1fr); } }
/* hero stage: layered collage without hiding content */
.ab-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 14px; align-items: start; padding: 8px 0 8px; }
.ab-chat { grid-column: 1 / -1; width: 92%; margin: 0; }
.ab-score, .ab-live { position: relative; inset: auto; width: auto; margin-top: -26px; z-index: 2; }
.ab-score { margin-left: -18px; }
.ab-live { margin-right: -18px; }
@media (max-width: 1100px) { .ab-chat { width: 100%; } .ab-score, .ab-live { margin: 0; } }
@media (max-width: 640px) { .ab-stage { grid-template-columns: minmax(0, 1fr); } }
/* responsive overrides must come last */
@media (max-width: 1100px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-stage { max-width: 640px; }
}
@media (max-width: 640px) {
  .ab-stage { grid-template-columns: minmax(0, 1fr); }
  .ab-hero .actions .btn { width: 100%; }
  .ab-teaser .actions .btn { width: 100%; }
}

/* =====================================================================
   v6 · light: white and cool mist, navy text, electric blue accent.
   The planet glow becomes a bright horizon line in the hero.
   ===================================================================== */
:root { --mist: #F5F8FD; --mist-2: #EEF3FF; --line-soft: #E8EDF5; --dot: #19A7E8; }
body { background: #FFFFFF; color: var(--ink); }
.sec.alt, .alt { background: var(--mist); }

/* chrome */
.topbar { background: var(--mist-2); color: var(--ink-2); border-bottom: 1px solid rgba(31, 102, 255, 0.12); }
.topbar a { color: var(--blue-text); font-weight: 600; }
.site-header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--card-line); }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.menu-btn { background: #FFFFFF; border-color: var(--card-line); color: var(--ink); }
.nav-panel { background: #FFFFFF; }
.site-footer { background: var(--mist); border-top: 1px solid var(--card-line); }
.site-footer, .site-footer p { color: var(--ink-2); }
.foot-col a, .foot-col button { color: var(--ink-2); }
.foot-col a:hover, .foot-col button:hover { color: var(--blue-text); }
.legal p { color: var(--muted); }
.mobile-bar { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--card-line); box-shadow: 0 -12px 30px -20px rgba(16, 38, 90, 0.25); }
.mobile-bar span { color: var(--ink-2); }
.mobile-bar b { color: var(--ink); }
.consent { background: #FFFFFF; color: var(--ink); border-color: var(--card-line); box-shadow: 0 30px 60px -30px rgba(16, 38, 90, 0.3); }
.dot-live, .ab-dot { background: var(--dot); box-shadow: 0 0 0 4px rgba(25, 167, 232, 0.16); }
@keyframes abpulse { 50% { box-shadow: 0 0 0 7px rgba(25, 167, 232, 0.04); } }

/* buttons */
.btn-primary, .btn-light { box-shadow: 0 10px 24px -12px rgba(31, 102, 255, 0.6); }
.btn-primary:hover, .btn-light:hover { background: var(--blue-hi); border-color: var(--blue-hi); box-shadow: 0 12px 28px -12px rgba(31, 102, 255, 0.7); }
.btn-ghost { background: #FFFFFF; border: 1px solid #CDD6E4; color: var(--ink); }
.btn-ghost:hover { background: var(--mist-2); border-color: var(--blue-line); color: var(--ink); }

/* planet: a bright horizon instead of a dark globe */
.ab-planet { background: #FFFFFF; box-shadow: 0 0 0 1.5px rgba(31, 102, 255, 0.55), 0 -18px 70px -14px rgba(31, 102, 255, 0.45), 0 -70px 180px 0 rgba(31, 102, 255, 0.14); }
.ab-hero { background: linear-gradient(180deg, #F1F6FF 0%, #FFFFFF 70%); }
.ab-pagehero, .page-hero { background: linear-gradient(180deg, #F1F6FF 0%, #FFFFFF 85%); }

/* hero cards */
.ab-card { background: #FFFFFF; border: 1px solid var(--card-line); box-shadow: 0 30px 70px -34px rgba(16, 38, 90, 0.32); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ab-q { background: #F1F4FA; color: var(--ink); }
.ab-a { color: var(--ink-2); }
.ab-sp { background: #F5F8FF; border: 1px solid rgba(31, 102, 255, 0.22); }
.ab-row { background: #F8FAFD; border: 1px solid var(--line-soft); }
.ab-up { color: var(--signal); }

/* strip: static, quiet */
.ab-strip { background: #FFFFFF; border-block: 1px solid var(--card-line); }
.ab-strip-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding-block: 20px; }
.ab-logos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.ab-logos-k { font-size: 13px; color: var(--muted); }
.ab-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ab-logos li { font-size: 16px; font-weight: 600; color: #4A5672; letter-spacing: -0.01em; }

/* how it works: four connected steps */
.ab-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ab-flow li { position: relative; min-width: 0; display: flex; }
.ab-flow li:not(:last-child)::after { content: ""; position: absolute; top: 41px; right: -20px; width: 20px; height: 2px; background: rgba(31, 102, 255, 0.45); }
.ab-flow-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 22px 22px 24px; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 18px; color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ab-flow-card:hover { border-color: var(--blue-line); box-shadow: 0 20px 40px -28px rgba(16, 38, 90, 0.35); }
.ab-flow-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ab-flow-n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #FFFFFF; font-weight: 700; font-size: 16px; flex: none; }
.ab-flow-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mist-2); color: var(--blue); flex: none; }
.ab-flow-ic svg { width: 20px; height: 20px; }
.ab-flow-top .ab-when { margin-left: auto; }
.ab-flow-k { font-size: 13px; font-weight: 600; color: var(--blue-text); }
.ab-flow-card h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.ab-flow-card p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ab-flow-out { margin-top: 20px; padding: 18px 22px; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(31, 102, 255, 0.22); font-size: 16.5px; color: var(--ink-2); }
.ab-flow-out b { color: var(--ink); }
.ab-when { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: #1447C8; background: var(--mist-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* stats */
.ab-stats { margin-top: 0; border-color: var(--card-line); }
.ab-stats > div { background: #FFFFFF; }
.ab-stats > div + div { border-left-color: var(--card-line); }

/* platform */
.ab-feat { border-top: 1px solid var(--card-line); }
.ab-feat:first-of-type { border-top: 0; padding-top: 8px; }
.ab-mock { background: #FFFFFF; border: 1px solid var(--card-line); box-shadow: 0 40px 80px -44px rgba(16, 38, 90, 0.35); }
.ab-mock-bar, .ab-mock-foot { border-color: var(--line-soft); }
.ab-track i { background: #F1F4FA; color: #9AA4BA; }
.ab-tiles > div, .ab-accts > div { background: #F8FAFD; border: 1px solid var(--line-soft); }
.ab-audit-score { background: #F3F7FF; border: 1px solid rgba(31, 102, 255, 0.2); }
.ab-meter { background: #E6ECF5; }
.ab-meter span { background: linear-gradient(90deg, var(--blue), var(--dot)); }
.ab-checks .wip { background: rgba(14, 140, 200, 0.12); color: var(--signal); }
.ab-checks .todo { border: 1px solid var(--card-line); color: var(--muted); }
.ab-fields > div { border-bottom: 1px solid var(--line-soft); }
.ab-note { background: #F0F8FD; border: 1px solid rgba(14, 140, 200, 0.22); }

/* getting started */
.ab-steps li { background: #FFFFFF; border: 1px solid var(--card-line); }
.ab-steps li:first-child { border-color: var(--blue-line); box-shadow: 0 0 0 1px rgba(31, 102, 255, 0.18); }
.ab-steps h3 { font-size: 22px; }

/* compare */
.ab-compare th, .ab-compare td { border-bottom: 1px solid var(--line-soft); }
.ab-compare td { color: var(--muted); }
.ab-compare td svg { color: var(--blue); }

/* examples */
.case { background: #FFFFFF; border: 1px solid var(--card-line); }
.case-tag { color: var(--muted); border-color: rgba(10, 21, 48, 0.22); }
.case-did li { border-top-color: var(--line-soft); }
.case-res { background: var(--line-soft); border-color: var(--line-soft); }
.case-res > div { background: var(--mist); }

/* pricing teaser: a light card with the horizon in the corner */
.ab-teaser { background: linear-gradient(135deg, #F1F6FF 0%, #FFFFFF 70%); border: 1px solid rgba(31, 102, 255, 0.18); }
.ab-teaser-glow { background: #FFFFFF; box-shadow: 0 0 0 1.5px rgba(31, 102, 255, 0.45), 0 0 90px 0 rgba(31, 102, 255, 0.28); }

/* faq */
.faq-list details { background: #FFFFFF; border-color: var(--card-line); }
.faq-list summary { color: var(--ink); }
.faq-a p { color: var(--ink-2); }

/* final call to action: the one saturated moment */
.final { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, #4F8BFF 0%, rgba(79, 139, 255, 0) 60%), #1F66FF; border: 0; color: #FFFFFF; box-shadow: 0 40px 80px -40px rgba(31, 102, 255, 0.6); }
.final::before { content: ""; position: absolute; width: 1100px; aspect-ratio: 1; border-radius: 50%; right: -560px; top: -760px; border: 1.5px solid rgba(255, 255, 255, 0.45); box-shadow: 0 0 80px 0 rgba(255, 255, 255, 0.18); pointer-events: none; }
.final > * { position: relative; }
.final h2, .final .final-copy h2 { color: #FFFFFF; }
.final .final-copy p { color: rgba(255, 255, 255, 0.88); }
.final .final-copy p.eyebrow { color: rgba(255, 255, 255, 0.85); }
.final .call-gets li, .final .call-gets span { color: #FFFFFF; }
.final .call-gets svg { color: #FFFFFF; }
.final .btn-light { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; box-shadow: 0 12px 28px -14px rgba(10, 21, 48, 0.5); }
.final .btn-light:hover { background: var(--mist-2); color: var(--ink); border-color: var(--mist-2); }

/* pricing page and shared components */
.plan.key { border-color: var(--blue-line); box-shadow: 0 0 0 1px rgba(31, 102, 255, 0.14), 0 40px 80px -44px rgba(16, 38, 90, 0.3); }
.plan, .needs, .refund, .value-in { background: #FFFFFF; border-color: var(--card-line); }
.value-out { background: #F3F7FF; border-color: rgba(31, 102, 255, 0.22); }
.vo-row { border-color: rgba(31, 102, 255, 0.14); }
.vo-break b { color: var(--blue); }
.crumbs li + li::before { color: #B5BFD1; }

/* responsive */
@media (max-width: 1100px) {
  .ab-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-flow li::after { display: none; }
}
@media (max-width: 640px) {
  .ab-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-strip-in { flex-direction: column; }
  .ab-logos li { font-size: 15px; }
}
/* v6 fixes */
.site-header { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ab-hero .ab-planet { left: 52%; top: 40px; }
.final::before { display: none; }
.ab-teaser-glow { top: -780px; right: -470px; }
@media (max-width: 1100px) { .ab-hero .ab-planet { left: 30%; top: 520px; } }
@media (max-width: 640px) { .ab-hero .ab-planet { left: 6%; top: 640px; } }
.mono, .doc-meta { font-family: var(--sans); letter-spacing: 0; }
.doc-meta { font-size: 14px; }
.kicker .dot-live, .eyebrow .dot-live { margin-right: 10px; vertical-align: 1px; }

/* blog */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card { min-width: 0; display: flex; }
.post-card a { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 26px 26px 24px; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 18px; color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.post-card a:hover { border-color: var(--blue-line); box-shadow: 0 20px 40px -28px rgba(16, 38, 90, 0.35); }
.post-k { font-size: 13px; font-weight: 600; color: var(--blue-text); }
.post-card h3 { font-size: 23px; line-height: 1.18; letter-spacing: -0.025em; }
.post-card p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.post-meta { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--muted); }
.post-card.big { grid-column: 1 / -1; }
.post-card.big a { padding: clamp(28px, 4vw, 44px); background: linear-gradient(135deg, #F1F6FF 0%, #FFFFFF 75%); border-color: rgba(31, 102, 255, 0.22); }
.post-card.big h3 { font-size: clamp(28px, 3.4vw, 40px); max-width: 22ch; }
.post-card.big p { font-size: 17px; max-width: 60ch; }
.related .ab-head { margin-bottom: 28px; }
.related-all { margin-top: 20px; }
@media (max-width: 960px) { .post-grid, .post-grid.three { grid-template-columns: minmax(0, 1fr); } }

/* article tables and quick answers */
.prose .spec-wrap { margin: 18px 0 8px; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--mist-2); color: #1447C8; border-radius: 6px; padding: 1px 6px; }
.prose h3 { font-size: 20px; margin-top: 26px; }
.prose .fine { font-size: 14px; color: var(--muted); }
.prose .spec tbody th { font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; }
.legal-bits[hidden] { display: none; }

/* blog index by topic */
.blog-top { padding-bottom: clamp(28px, 4vw, 48px); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--card-line); background: #FFFFFF; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.cat-chip span { font-size: 12px; font-weight: 700; color: #1447C8; background: var(--mist-2); border-radius: 999px; padding: 1px 8px; }
.cat-chip:hover { border-color: var(--blue-line); }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.cat-head > div { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.post-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post-row { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.post-row:hover { border-color: var(--blue-line); }
.post-row-t { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.post-row-d { font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 960px) { .post-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .post-rows { grid-template-columns: minmax(0, 1fr); } }
.prose .post-start { margin-top: 28px; padding: 16px 18px; border-radius: 12px; background: var(--mist-2); color: var(--ink-2); font-size: 15.5px; }

/* landing pages */
.lp-hero .wrap { display: flex; flex-direction: column; gap: 18px; }
.lp-hero .ab-h1 { max-width: 16ch; }
.lp-hero .ab-lede { max-width: 44em; }
.lp-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-body { max-width: 820px; }
.lp-body > p { font-size: 17.5px; }
.lp-body ul.lp-ticks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; max-width: none; }
.lp-sec .lp-body { max-width: none; }
.lp-sec .lp-body > p, .lp-sec .lp-body > ol, .lp-sec .lp-body > h3 { max-width: 760px; }
.lp-body ul.lp-ticks li { position: relative; padding: 16px 18px 16px 46px; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.lp-body ul.lp-ticks li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-body ul.lp-ticks li strong { color: var(--ink); }
.sec.alt .lp-body ul.lp-ticks li { background: #FFFFFF; }
.lp-sources { padding-top: 0; }
@media (max-width: 760px) { .lp-body ul.lp-ticks { grid-template-columns: minmax(0, 1fr); } }
/* footer with five link columns */
.foot { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); gap: 28px 28px; }
@media (max-width: 1180px) { .foot { grid-template-columns: repeat(5, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 860px) { .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-hero .ab-h1 { font-size: clamp(38px, 5vw, 64px); max-width: 22ch; text-wrap: balance; }

/* ===== v7: hero tree (question → organic + sponsored → click → named companies) ===== */
.ab-tree { margin: 0; width: 100%; max-width: 600px; justify-self: end; display: flex; flex-direction: column; align-items: stretch; }
.ab-tree .t-node { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; border-radius: 16px; }
.ab-tree .t-ask .ab-q { align-self: stretch; max-width: none; margin: 0; }
.t-link { display: block; width: 100%; height: 34px; overflow: visible; }
.t-link path { fill: none; stroke: #8FB0F5; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; animation: abflow 1.1s linear infinite; }
.t-down { height: 20px; }
.t-v { display: none; height: 18px; }
@keyframes abflow { to { stroke-dashoffset: -10; } }
.t-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.t-k { font-size: 12.5px; font-weight: 600; color: var(--blue-text); }
.t-h { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.t-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.t-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.t-chips li { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink); background: var(--mist); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 10px; }
.ab-tree .t-paid { background: #F5F8FF; border-color: rgba(31, 102, 255, 0.24); }
.t-intents li { font-weight: 500; color: #1447C8; background: #FFFFFF; border-color: rgba(31, 102, 255, 0.24); }
.t-intents li::before { content: "\201C"; }
.t-intents li::after { content: "\201D"; }
.t-click { align-self: center; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: 14px; font-weight: 600; box-shadow: 0 12px 24px -14px rgba(31, 102, 255, 0.8); }
.ab-tree .t-signals { gap: 7px; }
.ab-tree .t-signals .ab-card-bar { color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.ab-tree .ab-row { padding: 8px 10px; }
.t-foot { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 1100px) { .ab-tree { justify-self: stretch; max-width: 640px; } }
@media (max-width: 600px) {
  .t-branches { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .t-fork, .t-merge { display: none; }
  .t-v { display: block; }
  .ab-tree .t-node { padding: 14px 15px; }
}
@media (prefers-reduced-motion: reduce) { .t-link path { animation: none; } }
/* v7 hero tree: tighter on desktop, arc kept clear of the connectors */
.ab-tree .t-node { padding: 14px 16px; gap: 7px; }
.t-fork, .t-merge { height: 28px; }
.ab-tree .ab-row { padding: 6px 10px; }
.ab-tree .ab-row b { font-size: 14px; }
.t-chips li { padding: 3px 9px; }
@media (min-width: 1101px) { .ab-hero .ab-planet { left: 60%; top: 10px; } }
/* v7 hero tree: one soft panel so the horizon arc passes behind the whole diagram */
.ab-tree { padding: 16px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--card-line); border-radius: 24px; box-shadow: 0 40px 90px -46px rgba(16, 38, 90, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ab-tree .ab-card { box-shadow: 0 10px 24px -20px rgba(16, 38, 90, 0.35); }
@media (max-width: 600px) { .ab-tree { padding: 12px; border-radius: 20px; } }

/* ===== v7: platform strip as two slow, looping rows (names now, logo files optional via config.js) ===== */
.ab-strip-mq { display: flex; flex-direction: column; gap: 10px; padding-block: 18px; }
.ab-mq-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 16px; }
.ab-mq-row .ab-logos-k { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ab-strip-mq .ab-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ab-strip-mq .ab-marquee-track { gap: 0; align-items: center; animation-duration: 60s; }
.ab-strip-mq .ab-mq-b { animation-direction: reverse; animation-duration: 66s; }
.ab-logo { display: inline-flex; align-items: center; height: 34px; margin-right: 56px; font-size: 17px; font-weight: 600; color: #4A5672; letter-spacing: -0.01em; white-space: nowrap; }
.ab-logo-img { display: block; height: 24px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
.ab-strip-mq .ab-marquee:hover .ab-marquee-track { animation-play-state: paused; }
@media (max-width: 640px) {
  .ab-mq-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ab-logo { font-size: 15px; margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-strip-mq .ab-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ===== v7: homepage budget calculator ===== */
.hc .value-in { gap: 24px; }
.hc-money { display: flex; align-items: center; gap: 4px; padding: 6px 14px; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 12px; }
.hc-money:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 102, 255, 0.16); }
.hc-money span { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--muted); }
.hc-money input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.hc-money input::-webkit-outer-spin-button, .hc-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hc-money.small span, .hc-money.small input { font-size: 22px; }
.hc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hc-hint { font-size: 13px; color: var(--muted); }
.hc .value-in output { font-size: clamp(28px, 3vw, 36px); }
@media (max-width: 860px) { .value.hc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .hc-pair { grid-template-columns: minmax(0, 1fr); } }
.hc-note { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #F5F8FF; border: 1px solid rgba(31, 102, 255, 0.22); }
.hc-note b { font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -0.03em; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.hc-note span { font-size: 14.5px; color: var(--ink-2); }
.foot-brand .foot-mail { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.foot-brand .foot-mail:hover { color: var(--blue-text); text-decoration: underline; }

/* ===== final logo: the two-bubble ab mark next to the wordmark ===== */
.brand .brand-mark { display: block; width: 34px; height: 34px; margin-right: 10px; flex: none; }
.foot-brand .brand .brand-mark { width: 38px; height: 38px; }

/* =====================================================================
   v8 · Three packages, sample report, report charts
   ===================================================================== */
:root {
  --s-ads: #1F66FF;
  --s-ai: #13A07A;
  --s-other: #9AA3B5;
  --s-you: #1F66FF;
  --s-ca: #6B7590;
  --s-cb: #959EB2;
  --s-cc: #B7BECC;
  --grid: #E9EDF4;
  --axis: #C9D0DC;
}

/* packages */
.plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plans.three .plan { box-shadow: none; gap: 14px; }
.plans.three .plan.key { box-shadow: 0 0 0 1px rgba(31, 102, 255, 0.25), 0 30px 60px -40px rgba(31, 102, 255, 0.8); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 26px; }
.plan-pill { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-text); white-space: nowrap; }
.plan-pill.save { background: rgba(14, 140, 200, 0.08); color: var(--signal); }
.plans.three .price-name { font-size: 28px; line-height: 1.1; }
.plans.three .price { font-size: clamp(46px, 4.6vw, 58px); font-weight: 700; }
.plans.three .per { color: var(--muted); font-size: 16px; }
.plan-media { font-size: 15px; color: var(--ink-2); margin-top: -6px; }
.plan-media b { color: var(--ink); }
.plans.three .incl { padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; gap: 11px; }
.plans.three .btn { margin-top: auto; align-self: stretch; justify-content: center; }
.plans.three .incl + .btn { margin-top: 8px; }
.plans.three .plan { justify-content: flex-start; }
.plans-every { margin-top: 18px; text-align: center; color: var(--ink-2); font-size: 15.5px; }
.billing { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.billing > div { border: 1px solid var(--card-line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.billing h3 { font-size: 20px; letter-spacing: -0.02em; }
.billing p { font-size: 15px; color: var(--ink-2); }
.pkg-wrap { border-radius: var(--r); }
.pkg-compare { min-width: 760px; }
.pkg-compare th[scope="row"] { font-size: 15px; max-width: 360px; }
.pkg-compare thead th { vertical-align: bottom; color: var(--ink); font-size: 16px; }
.pkg-compare thead th:first-child { text-align: left; color: var(--muted); font-size: 14px; }
.pkg-compare thead th small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.pkg-compare thead .ab-us small { color: rgba(255, 255, 255, 0.85); }
.pkg-compare td { font-size: 14.5px; }
.pkg-compare .pkg-group th { text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--blue-text); background: #F5F8FD; padding-top: 12px; padding-bottom: 12px; }
.pkg-compare tbody .pkg-group + tr th, .pkg-compare tbody .pkg-group + tr td { border-top: 0; }
.report-band { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 1px solid var(--blue-line); border-radius: var(--r); background: linear-gradient(90deg, var(--blue-soft), rgba(31, 102, 255, 0)); }
.report-band b { font-size: 19px; letter-spacing: -0.015em; }
.report-band p { font-size: 15px; color: var(--ink-2); max-width: 46em; margin-top: 2px; }
.report-band .btn { flex: none; }
.pkg-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pkg-pick legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pkg-pick label { position: relative; display: block; cursor: pointer; }
.pkg-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pkg-pick label > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 12px; font-weight: 600; font-size: 15.5px; }
.pkg-pick label > span small { font-weight: 500; color: var(--muted); font-size: 14px; }
.pkg-pick input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.pkg-pick input:focus-visible + span { outline: 2px solid var(--blue-text); outline-offset: 2px; }
@media (min-width: 560px) { .pkg-pick { display: grid; grid-template-columns: 1fr 1fr; } .pkg-pick legend { grid-column: 1 / -1; } }
@media (max-width: 1020px) { .plans.three { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; } .billing { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .report-band { flex-direction: column; align-items: flex-start; } }

/* sample report: page parts */
.rp-hero-actions { margin-top: 28px; }
.rp-fict { margin-top: 18px; }
.rp-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rp-role { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--card-line); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; min-width: 0; }
.rp-role:hover { border-color: var(--blue-line); }
.rp-role-k { font-size: 13px; font-weight: 600; color: var(--signal); }
.rp-role h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.rp-role ul { margin: 0; padding: 0 0 0 18px; font-size: 15px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.rp-role .text-link { margin-top: auto; padding-top: 6px; font-size: 15px; }
.rp-frame { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; overflow: hidden; }
.rp-frame-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--card-line); }
.rp-frame-t { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.025em; }
.rp-frame-bar p { font-size: 15px; color: var(--muted); margin-top: 4px; }
.rp-frame-bar .ab-tag { flex: none; }
.rp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--card-line); }
.rp-kpis > div { background: var(--card); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-kpis span { font-size: 14px; color: var(--ink-2); }
.rp-kpis b { font-size: clamp(30px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.rp-kpis small { font-size: 13px; color: var(--muted); }
.rp-kpis small.up { color: #0B7A3B; font-weight: 600; }
.rp-kpis.rp-cost { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--card-line); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.rp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--card-line); border-top: 1px solid var(--card-line); }
.rp-summary > div { background: var(--card); padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.rp-summary h3 { font-size: 19px; letter-spacing: -0.015em; }
.rp-summary ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.rp-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: clamp(18px, 3vw, 28px); min-width: 0; }
.rp-card-t { font-size: 21px; letter-spacing: -0.02em; }
.rp-card-s { font-size: 14.5px; color: var(--muted); margin: 4px 0 16px; }
.rp-two { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-sub { margin: 40px 0 14px; }
.rp-sub h3 { font-size: 24px; letter-spacing: -0.02em; }
.rp-sub p { font-size: 15.5px; color: var(--ink-2); margin-top: 4px; }
table.spec.rp-accts { min-width: 820px; }
table.spec.rp-groups { min-width: 0; }
.spec td small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.spec.rp-accts td b, .spec.rp-groups td b { color: var(--ink); }
.spec-wrap.flat { border: 0; border-radius: 0; }
.spec-wrap.flat table.spec { font-size: 14.5px; }
.spec-wrap.flat .spec th { background: transparent; padding-inline: 10px; }
.spec-wrap.flat .spec td { padding: 12px 10px; }
.rp-src { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rp-src::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--s-other); flex: none; }
.rp-src.ads::before { background: var(--s-ads); }
.rp-src.ai::before { background: var(--s-ai); }
.rp-note-line { margin-top: 12px; }
.rp-method { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: m; }
.rp-method li { counter-increment: m; border: 1px solid var(--card-line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 8px; background: var(--card); min-width: 0; }
.rp-method li::before { content: counter(m); width: 30px; height: 30px; border-radius: 9px; background: var(--blue-soft); color: var(--blue-text); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rp-method h3 { font-size: 19px; letter-spacing: -0.015em; }
.rp-method p { font-size: 14.5px; color: var(--ink-2); }
.rp-cfo { border: 1px solid var(--card-line); border-radius: var(--r); padding: 22px 24px; background: var(--card); display: flex; flex-direction: column; gap: 14px; }
.rp-cfo h3 { font-size: 21px; letter-spacing: -0.02em; }
table.spec.rp-spend { min-width: 0; }
.rp-spend td:last-child { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.rp-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rp-sec > div { border: 1px solid var(--card-line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.rp-sec h3 { font-size: 19px; letter-spacing: -0.015em; }
.rp-sec p { font-size: 15px; color: var(--ink-2); }
.rp-cadence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rp-cadence > div { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.rp-cadence h3 { font-size: 21px; letter-spacing: -0.02em; }
.rp-cadence p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 1100px) { .rp-method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .rp-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rp-kpis.rp-cost { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-two, .rp-summary { grid-template-columns: minmax(0, 1fr); }
  .rp-sec, .rp-cadence { grid-template-columns: minmax(0, 1fr); }
  .rp-method { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rp-roles { grid-template-columns: minmax(0, 1fr); }
  .rp-frame-bar { flex-direction: column; }
  .rp-kpis > div, .rp-summary > div { padding: 16px; }
}

/* report charts (all identity colours sit beside text; text stays in ink tokens) */
.rp-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2); }
.rp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.rp-sw { display: inline-block; flex: none; background: var(--c); }
.rp-sw.rect { width: 12px; height: 12px; border-radius: 3px; }
.rp-sw.line { width: 16px; height: 3px; border-radius: 2px; }
.rp-chart { --h: 260px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: var(--h) auto; column-gap: 8px; }
.rp-chart.has-ends { grid-template-columns: 38px minmax(0, 1fr) 128px; }
.rp-chart.compact { --h: 170px; }
.rp-y { grid-column: 1; grid-row: 1; position: relative; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.rp-area { grid-column: 2; grid-row: 1; position: relative; border-bottom: 1px solid var(--axis); }
.rp-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--grid); }
.rp-x { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rp-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rp-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; outline-offset: -2px; border-radius: 6px; }
.rp-col:hover, .rp-col:focus-visible { background: rgba(10, 21, 48, 0.035); }
.rp-bar { width: min(24px, 64%); margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 2px; }
.rp-bar i { display: block; background: var(--c); flex-basis: 0; min-height: 2px; }
.rp-bar i:last-child { border-radius: 4px 4px 0 0; }
.rp-note { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: #fff; padding: 1px 6px; border: 1px solid var(--card-line); border-radius: 999px; }
.rp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rp-ln { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-ln.you { stroke-width: 3; }
.rp-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; transform: translate(-50%, 50%); pointer-events: none; }
.rp-vline { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--axis); }
.rp-vnote { position: absolute; top: 0; transform: translateX(6px); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: #fff; padding: 0 4px; }
.rp-hits { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rp-hit { position: relative; outline-offset: -2px; }
.rp-hit:hover::before, .rp-hit:focus-visible::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--ink-2); opacity: 0.45; }
.rp-ends { grid-column: 3; grid-row: 1; position: relative; }
.rp-end { position: absolute; left: 0; transform: translateY(50%); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.15; color: var(--ink-2); white-space: nowrap; }
.rp-end b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-end.you { color: var(--ink); font-weight: 600; }
.rp-hchart, .rp-cchart { display: flex; flex-direction: column; gap: 16px; }
.rp-hgroup { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.rp-hlab { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.rp-hbars { display: flex; flex-direction: column; gap: 4px; }
.rp-hrow { display: flex; align-items: center; gap: 8px; min-height: 22px; border-radius: 4px; outline-offset: 2px; }
.rp-hbar { display: block; height: 14px; background: var(--c); border-radius: 0 4px 4px 0; min-width: 2px; }
.rp-hrow b { font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-hrow:hover .rp-hbar, .rp-hrow:focus-visible .rp-hbar { filter: brightness(1.12); }
.rp-crow { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 230px; gap: 14px; align-items: center; }
.rp-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.rp-st svg { flex: none; }
.rp-st.ok { color: #0B7A3B; }
.rp-st.own { color: var(--blue-text); }
.rp-st.gap { color: var(--warn); }
.rp-data summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--blue-text); width: max-content; }
.rp-data .spec-wrap { margin-top: 10px; }
table.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rp-table th, table.rp-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
table.rp-table th:first-child, table.rp-table thead th:first-child { text-align: left; }
table.rp-table thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #F5F8FD; }
table.rp-table tbody th { color: var(--ink); font-weight: 500; }
.rp-tip { position: fixed; z-index: 90; pointer-events: none; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 10px; box-shadow: 0 14px 34px -14px rgba(16, 38, 90, 0.35); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 150px; max-width: 280px; }
.rp-tip[hidden] { display: none; }
.rp-tip p { margin: 0; display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.rp-tip p.rp-tip-t { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.rp-tip p i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.rp-tip p i.none { background: transparent; }
.rp-tip p b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rp-chart { --h: 220px; }
  .rp-chart.has-ends { grid-template-columns: 34px minmax(0, 1fr) 104px; }
  .rp-end { font-size: 12px; }
  .rp-x span:nth-child(even) { visibility: hidden; }
  .rp-crow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .rp-hgroup { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rp-vnote { font-size: 11px; }
}

/* homepage: report teaser */
.rp-teaser { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.rp-teaser-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.rp-teaser-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.rp-teaser-roles li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.rp-teaser-roles b { font-size: 13px; color: var(--signal); }
.rp-teaser-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--card-line); border-radius: 20px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 30px 60px -40px rgba(16, 38, 90, 0.45); min-width: 0; }
.rp-teaser-card:hover { border-color: var(--blue-line); }
.rp-teaser-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rp-teaser-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rp-teaser-foot b { color: var(--ink); }
@media (max-width: 900px) { .rp-teaser { grid-template-columns: minmax(0, 1fr); } }
@media print { .rp-tip { display: none; } .rp-data[open] summary { display: none; } }
@media (max-width: 760px) {
  .pkg-compare { min-width: 560px; }
  .pkg-compare th[scope="row"], .pkg-compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: #FFFFFF; min-width: 160px; max-width: 170px; font-size: 13.5px; padding-left: 14px; padding-right: 10px; box-shadow: 1px 0 0 var(--card-line); }
  .pkg-compare th, .pkg-compare td { padding: 12px 10px; }
  .pkg-compare td { font-size: 13px; }
  .pkg-compare .pkg-group th { position: sticky; left: 0; }
}

/* v9 · bigger header logo, hero copy raised */
:root { --header-h: 76px; }
.site-header .brand { font-size: 31px; }
.site-header .brand .brand-mark { width: 44px; height: 44px; margin-right: 12px; }
@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .site-header .brand { font-size: 27px; }
  .site-header .brand .brand-mark { width: 38px; height: 38px; margin-right: 10px; }
}
@media (min-width: 1101px) {
  .ab-hero-grid { align-items: start; }
  .ab-hero-copy { padding-top: 36px; }
}