/* bg/panel/border/text/muted/accent are overwritten at runtime by branding.js,
     which picks the admin's theme AND follows the visitor's OS light/dark setting.
     Everything else below is derived from those, so the page restyles itself with
     the chosen brand colour instead of fighting it. Values here are the light
     fallbacks used before branding.js lands (or if it fails). */
  :root {
    --bg: #f5f7fb; --panel: #ffffff; --border: #dde1e8;
    --text: #1a1d24; --muted: #5b6472; --accent: #3b6fe0;
    /* Darker than the dark-theme equivalents on purpose: these are used as small
       text (issue chips, status chips, score numbers) on a near-white background,
       where the lighter shades fall under the 4.5:1 WCAG AA floor. */
    --good: #268042; --warn: #94690f; --bad: #cb4036;
    --panel-2: #eef1f7;
    --header-bg: rgba(255,255,255,.86);
    --shadow: 0 18px 44px rgba(20,26,40,.10);
    --tint: rgba(20,26,40,.022);
    --ghost-bg: rgba(20,26,40,.015);
    --dot: #cbd2de;
    --thumb-a: #e7ebf2; --thumb-b: #f3f6fa;
    --thumb-line: #c8d0dd; --thumb-block: #dae0ea;
    --radius: 14px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1115; --panel: #181b22; --border: #2a2f3a;
      --text: #e7eaf0; --muted: #9aa3b2; --accent: #4f8cff;
      --good: #57ab5a; --warn: #d4a72c; --bad: #e5534b;
      --panel-2: #1a1e28;
      --header-bg: rgba(15,17,21,.84);
      --shadow: 0 20px 50px rgba(0,0,0,.45);
      --tint: rgba(255,255,255,.02);
      --ghost-bg: rgba(255,255,255,.022);
      --dot: #39404e;
      --thumb-a: #232a36; --thumb-b: #1a1f29;
      --thumb-line: #333c4c; --thumb-block: #2b3341;
    }
  }
  /* Gradient partner colour, derived from the live accent so a rebrand stays
     coherent. Static fallback first for engines without color-mix. */
  :root { --accent-2: #7c4dd6; }
  @supports (color: color-mix(in oklab, red, blue)) {
    :root { --accent-2: color-mix(in oklab, var(--accent) 58%, #8b5cf6); }
  }
  /* Accent used as *small text*. On a light background every admin theme's accent
     sits under 4.5:1 at label sizes (sunset is worst at 2.90:1), so it gets darkened
     there - 30% clears AA on all five themes with margin. Dark mode already passes,
     and darkening would make it worse, so it stays untouched. Backgrounds, borders
     and icons keep using --accent directly (graphics only need 3:1). */
  :root { --accent-text: var(--accent); }
  @media (prefers-color-scheme: light) {
    @supports (color: color-mix(in srgb, red, blue)) {
      :root { --accent-text: color-mix(in srgb, var(--accent) 70%, #000); }
    }
  }

  .audit-launch { display: flex; gap: 10px; flex-wrap: wrap; max-width: 620px;
                  margin: 0 auto; }
  .audit-launch input { flex: 1; min-width: 220px; padding: 13px 15px; border-radius: 10px;
                        font-size: 15px; border: 1px solid var(--border);
                        background: var(--panel); color: var(--text); font-family: inherit; }
  .audit-launch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* translucent accent washes, used for glows/tints/borders throughout */
  :root {
    --accent-05: color-mix(in srgb, var(--accent) 5%, transparent);
    --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
    --accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
    --bad-12: color-mix(in srgb, var(--bad) 12%, transparent);
    --bad-30: color-mix(in srgb, var(--bad) 30%, transparent);
    --warn-14: color-mix(in srgb, var(--warn) 14%, transparent);
    --good-14: color-mix(in srgb, var(--good) 14%, transparent);
    --good-30: color-mix(in srgb, var(--good) 30%, transparent);
    --warn-30: color-mix(in srgb, var(--warn) 30%, transparent);
    --muted-14: color-mix(in srgb, var(--muted) 14%, transparent);
    --accent2-14: color-mix(in srgb, var(--accent-2) 14%, transparent);
    --accent2-32: color-mix(in srgb, var(--accent-2) 32%, transparent);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: var(--accent-text); }
  h1, h2, h3 { letter-spacing: -0.02em; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; width: 100%; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
    text-decoration: none; border: none; cursor: pointer; font-family: inherit;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
  }
  .btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    box-shadow: 0 8px 24px var(--accent-30);
  }
  .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--accent-45); }
  .btn.ghost { border: 1px solid var(--border); color: var(--text); background: var(--ghost-bg); }
  .btn.ghost:hover { border-color: var(--accent); background: var(--accent-08); }
  .btn.lg { padding: 16px 34px; font-size: 16.5px; }
  .btn:disabled { opacity: .6; cursor: default; transform: none; }


  /* ---------- hero ---------- */
  .hero { position: relative; padding: 78px 0 20px; text-align: center; overflow: hidden; }
  .hero::before {
    content: ''; position: absolute; top: -320px; left: 50%; transform: translateX(-50%);
    width: 1000px; height: 700px; pointer-events: none;
    background:
      radial-gradient(ellipse 34% 40% at 22% 62%, var(--accent2-14), transparent 70%),
      radial-gradient(ellipse 32% 36% at 80% 56%, var(--accent-20), transparent 70%),
      radial-gradient(ellipse at center, var(--accent-20), var(--accent2-14) 42%, transparent 68%);
  }
  /* Dot grid behind the hero, faded out at the edges so it never meets a hard line.
     z-index:-1 keeps it under the glow and the content (same trick .mockup-wrap::after
     already uses); body's background propagates to the canvas, so nothing hides it. */
  .hero::after {
    content: ''; position: absolute; inset: 0 -60px auto -60px; height: 560px;
    pointer-events: none; z-index: -1; opacity: .7;
    background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 22%, #000, transparent 74%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 22%, #000, transparent 74%);
  }
  .hero > * { position: relative; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
    padding: 7px 15px; border-radius: 100px; font-size: 13.5px; font-weight: 600;
    background: var(--accent-12); border: 1px solid var(--accent-30); color: var(--accent-text);
  }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-14); }
  .hero h1 {
    font-size: 58px; line-height: 1.08; margin: 0 0 20px; font-weight: 800;
    max-width: 900px; margin-inline: auto;
  }
  /* background-clip:text is still only "limited availability" per Baseline. The
     colour: transparent that makes the gradient show through would render the text
     invisible where it is unsupported, so the gradient is applied only behind an
     @supports gate and a solid accent is the fallback. */
  .hero h1 .grad { color: var(--accent); }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero h1 .grad {
      background: linear-gradient(120deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
  .hero p.lead { font-size: 19.5px; color: var(--muted); max-width: 680px; margin: 0 auto 32px; }
  .hero .ctaRow { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
  .section-cta { display: flex; justify-content: center; margin-top: 22px; }
  .hero .reassure {
    margin: 18px 0 0; font-size: 13.5px; color: var(--muted);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
  }
  .hero .reassure span { white-space: nowrap; }
  /* Its own row rather than a third button in .ctaRow: Public Mode hides .ctaRow
     outright, and the demo button is gated on a different switch. */
  .hero .demoRow { margin: 16px 0 0; }
  .hero .demoRow .demo-note { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }
  .hero .demoRow .demo-error { color: var(--bad); }

  /* ---------- trial box (Public Mode) ---------- */
  .trial-box {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px; margin: 6px auto 0; max-width: 680px; text-align: left; box-shadow: var(--shadow);
  }
  .trial-box .trial-title { font-weight: 700; font-size: 16px; margin: 0 0 14px; text-align: center; }
  .trial-form { display: flex; gap: 10px; flex-wrap: wrap; }
  .trial-form input, .trial-form select {
    flex: 1; min-width: 130px; padding: 12px 13px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14.5px; font-family: inherit;
  }
  .trial-form input:focus, .trial-form select:focus { outline: none; border-color: var(--accent); }
  /* The radius field carries its unit beside it, so "5" is never a bare number. */
  .trial-radius { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 8px; }
  .trial-radius input { min-width: 0; }
  .trial-unit { color: var(--muted); font-size: 14.5px; }
  .trial-hint { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; text-align: center; }
  .trial-error { color: var(--bad); font-size: 13.5px; margin: 12px 0 0; }
  .trial-progress {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 16px; padding: 13px; border-radius: 10px;
    background: var(--accent-08); border: 1px solid var(--accent-30);
    font-size: 13.5px; color: var(--text);
  }
  .spinner {
    width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--accent-30); border-top-color: var(--accent);
    animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
  .trial-results { margin-top: 18px; display: grid; gap: 10px; }
  .trial-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
  .trial-card .name { font-weight: 700; font-size: 14.5px; }
  .trial-card .sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
  .trial-card ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); }
  .trial-card .score { font-weight: 700; font-size: 14px; padding: 4px 11px; border-radius: 7px; flex-shrink: 0; white-space: nowrap; }
  .trial-card .score.bad { background: var(--bad-12); color: var(--bad); }
  .trial-card .score.warn { background: var(--warn-14); color: var(--warn); }
  .trial-card .score.good { background: var(--good-14); color: var(--good); }
  /* Ad activity is teased, never named: the guest payload carries a count and a flag
     but no platform (see _public_view in app/main.py). Same accent recipe as .eyebrow so
     it reads as a native element, and --accent-text/--accent-12/--accent-30 all derive
     from --accent, which theme.py redefines per data-theme - so no media-query-keyed
     rule here needs a [data-theme] counterpart. */
  .trial-card .ad-lock {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 7px;
    padding: 2px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600;
    background: var(--accent-12); border: 1px solid var(--accent-30);
    color: var(--accent-text); white-space: nowrap; vertical-align: 2px;
  }
  .trial-upsell { margin-top: 18px; padding: 16px; border-radius: 10px; background: var(--accent-08); border: 1px solid var(--accent-30); font-size: 13.5px; text-align: center; }
  .trial-upsell .btn { margin-top: 12px; }
  /* Two tiers, two claims, two buttons. What a free account unlocks and what a paid plan
     unlocks are different answers, and the ad teaser belongs to the second: the Free
     plan's ad_check_limit is 0, so folding it under "Sign up free" would promise
     something the free tier cannot deliver. */
  .trial-upsell .tier + .tier { margin-top: 16px; padding-top: 16px;
                                border-top: 1px solid var(--accent-30); }

  /* ---------- product mockup ---------- */
  .mockup-wrap { position: relative; margin: 54px auto 0; max-width: 1000px; }
  .mockup-wrap::after {
    content: ''; position: absolute; left: 6%; right: 6%; bottom: -30px; height: 60px;
    background: radial-gradient(ellipse at center, var(--accent-30), transparent 70%);
    filter: blur(22px); z-index: -1;
  }
  .mockup {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); text-align: left;
  }
  .mockup-bar {
    display: flex; align-items: center; gap: 7px; padding: 11px 15px;
    background: var(--panel-2); border-bottom: 1px solid var(--border);
  }
  .mockup-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); display: block; }
  .mockup-bar .url {
    margin-left: 10px; flex: 1; background: var(--bg); border-radius: 6px; padding: 5px 12px;
    font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .mockup-body { padding: 18px; }
  .mock-toolbar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 15px; }
  .mock-field {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 13px; font-size: 13px; color: var(--muted);
  }
  .mock-field b { color: var(--text); font-weight: 600; }
  .mock-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; }
  .mock-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 13px; }
  .mock-sample {
    display: inline-block; margin-left: 8px; padding: 1.5px 8px; border-radius: 100px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--border); vertical-align: middle;
  }
  .mock-row {
    display: flex; align-items: center; gap: 13px; padding: 13px;
    border: 1px solid var(--border); border-radius: 10px; margin-bottom: 9px; background: var(--bg);
  }
  .mock-row:last-child { margin-bottom: 0; }
  /* A miniature of the site being audited: title bar, a couple of copy lines, a hero
     block, and a red fault dot - enough shape to read as "a web page with a problem"
     at 72px rather than as two grey bars. */
  .mock-thumb {
    width: 72px; height: 50px; border-radius: 6px; flex-shrink: 0; overflow: hidden;
    background:
      radial-gradient(circle at calc(100% - 7px) 7px, var(--bad) 2.5px, transparent 3px),
      linear-gradient(150deg, var(--thumb-a), var(--thumb-b));
    border: 1px solid var(--border);
    position: relative;
  }
  .mock-thumb::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 12px; background: var(--thumb-line); opacity: .5; }
  .mock-thumb::after {
    content: ''; position: absolute; inset: 18px 7px 7px 7px;
    background:
      linear-gradient(var(--thumb-block), var(--thumb-block)) left top / 70% 4px no-repeat,
      linear-gradient(var(--thumb-block), var(--thumb-block)) left 9px / 46% 4px no-repeat,
      linear-gradient(var(--thumb-block), var(--thumb-block)) left 19px / 100% 6px no-repeat;
  }
  .mock-info { flex: 1; min-width: 0; }
  .mock-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
  .mock-sub { font-size: 12px; color: var(--muted); }
  .mock-issues { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
  .mock-issue { font-size: 11px; padding: 2.5px 8px; border-radius: 5px; background: var(--bad-12); color: var(--bad); }
  .mock-issue.amber { background: var(--warn-14); color: var(--warn); }
  .mock-score { font-weight: 800; font-size: 19px; flex-shrink: 0; }
  .mock-score.bad { color: var(--bad); }
  .mock-score.warn { color: var(--warn); }
  .mock-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 100px; border: 1px solid var(--border); color: var(--muted); margin-left: 6px; vertical-align: middle; }
  .mock-pill.ads { border-color: var(--warn); color: var(--warn); }

  /* ---------- generic section ---------- */
  section { padding: 84px 0; }
  section.alt {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, transparent, var(--tint), transparent);
  }
  /* Decorative only - overflow:hidden on the section keeps it off the x-axis, since
     only body carries overflow-x:hidden. */
  section.alt::before {
    content: ''; position: absolute; top: -170px; left: 50%; transform: translateX(-50%);
    width: 940px; height: 480px; pointer-events: none;
    background: radial-gradient(ellipse at center, var(--accent-12), var(--accent2-14) 45%, transparent 70%);
  }
  section.alt > * { position: relative; }
  .section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
  .section-tag {
    display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent-text); margin-bottom: 13px;
  }
  .section-head h2 { font-size: 38px; margin: 0 0 14px; line-height: 1.15; font-weight: 800; }
  .section-head p { color: var(--muted); margin: 0; font-size: 17.5px; }

  /* ---------- stats band ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px; }
  .stat {
    position: relative; overflow: hidden;
    text-align: center; padding: 26px 18px; border-radius: var(--radius);
    background: var(--panel); border: 1px solid var(--border);
  }
  .stat::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 52px; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  .stat .s-ico {
    width: 40px; height: 40px; border-radius: 11px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-12); border: 1px solid var(--accent-30); color: var(--accent);
  }
  .stat:nth-child(2) .s-ico { background: var(--accent2-14); border-color: var(--accent2-32); color: var(--accent-2); }
  .stat:nth-child(3) .s-ico { background: var(--good-14); border-color: var(--good-30); color: var(--good); }
  .stat:nth-child(4) .s-ico { background: var(--warn-14); border-color: var(--warn-30); color: var(--warn); }
  .stat .num {
    font-size: 38px; font-weight: 800; line-height: 1; margin-bottom: 8px;
    color: var(--accent);
  }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .stat .num {
      background: linear-gradient(120deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
  .stat .lbl { font-size: 14px; color: var(--muted); }

  /* ---------- before/after ---------- */
  .compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 22px; }
  .compare-col { border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); background: var(--panel); }
  .compare-col.bad-col { border-color: var(--bad-30); }
  .compare-col.good-col { border-color: var(--accent-45); background: linear-gradient(180deg, var(--accent-05), var(--panel)); }
  .compare-col h3 { margin: 0 0 6px; font-size: 20px; }
  .compare-col .cap { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
  .compare-list { list-style: none; margin: 0; padding: 0; }
  .compare-list li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 14.5px; color: var(--muted); }
  .compare-list li svg { flex-shrink: 0; margin-top: 3px; }
  .compare-col.bad-col .compare-list li svg { color: var(--bad); }
  .compare-col.good-col .compare-list li svg { color: var(--good); }
  .compare-col.good-col .compare-list li { color: var(--text); }

  /* ---------- steps ---------- */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; counter-reset: step; }
  .step {
    position: relative; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0; overflow: hidden;
  }
  /* Locked to the artwork's own 300x138 viewBox so the SVG is never cropped - the
     cards are much narrower on a phone than in a 3-up row, and a fixed height would
     slice the top and bottom off the illustration there. */
  .step-art {
    position: relative; aspect-ratio: 300 / 138; border-bottom: 1px solid var(--border);
    background: linear-gradient(155deg, var(--accent-08), var(--accent2-14));
  }
  .step-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .step-body { padding: 0 24px 26px; }
  /* The numbered badge straddles the art strip's bottom edge. */
  .step .step-num { margin: -21px 0 14px; }
  .step .step-num {
    counter-increment: step; width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
    margin-bottom: 16px; box-shadow: 0 6px 18px var(--accent-30);
  }
  .step .step-num::before { content: counter(step); }
  .step h3 { margin: 0 0 8px; font-size: 18px; }
  .step p { margin: 0; color: var(--muted); font-size: 14.5px; }

  /* Shared palette for the inline step/section artwork. Decorative shapes only, so
     --accent can be used directly (graphics need 3:1, not 4.5:1). */
  .art-faint { stroke: var(--border); fill: none; }
  .art-panel { fill: var(--panel); stroke: var(--border); }
  .art-block { fill: var(--thumb-block); }
  .art-accent { fill: var(--accent); }
  .art-accent-2 { fill: var(--accent-2); }
  .art-accent-line { stroke: var(--accent); fill: none; }
  .art-bad { fill: var(--bad); }
  .art-warn { fill: var(--warn); }
  .art-good { fill: var(--good); }
  .art-wash { fill: var(--accent-12); }

  /* ---------- feature grid ---------- */
  .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
  .feat {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px; transition: transform .18s ease, border-color .18s ease;
  }
  .feat:hover { transform: translateY(-3px); border-color: var(--accent-45); }
  .feat .ico {
    width: 44px; height: 44px; border-radius: 11px; margin-bottom: 15px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-12); border: 1px solid var(--accent-30); color: var(--accent);
  }
  /* Twelve identical accent tiles read as a wall of one colour. Cycling the four
     status hues breaks that up without introducing any colour the theme doesn't
     already define, so a rebrand still carries all of them. */
  .feat:nth-child(4n+2) .ico { background: var(--accent2-14); border-color: var(--accent2-32); color: var(--accent-2); }
  .feat:nth-child(4n+3) .ico { background: var(--good-14); border-color: var(--good-30); color: var(--good); }
  .feat:nth-child(4n+4) .ico { background: var(--warn-14); border-color: var(--warn-30); color: var(--warn); }
  .feat h3 { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* The plan badge sits beside the heading, not in it, so the heading's text (what a
     screen reader's heading list and a search snippet read) is just the feature name. */
  .feat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
  .feat-head h3 { margin: 0; }
  .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; }
  .feat p { margin: 0; color: var(--muted); font-size: 14.5px; }
  .badge-pro {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 100px; color: var(--accent-2);
    background: var(--accent2-14); border: 1px solid var(--accent2-32);
  }
  /* Same tinted-background problem as the status chips, and this one is the smallest
     text on the page (10.5px), so it fails in both themes on the base token. */
  @supports (color: color-mix(in srgb, red, blue)) {
    .badge-pro { color: color-mix(in srgb, var(--accent-2) 78%, #fff); }
    @media (prefers-color-scheme: light) {
      .badge-pro { color: color-mix(in srgb, var(--accent-2) 68%, #000); }
    }
    :root[data-theme="dark"] .badge-pro { color: color-mix(in srgb, var(--accent-2) 78%, #fff); }
    :root[data-theme="light"] .badge-pro { color: color-mix(in srgb, var(--accent-2) 68%, #000); }
  }

  /* ---------- split feature rows ---------- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; margin-bottom: 88px; }
  .split:last-child { margin-bottom: 0; }
  .split.rev .split-text { order: 2; }
  .split h3 { font-size: 30px; margin: 12px 0 14px; line-height: 1.2; font-weight: 800; }
  .split p.body { color: var(--muted); font-size: 16.5px; margin: 0 0 20px; }
  .check-list { list-style: none; margin: 0; padding: 0; }
  .check-list li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 15px; }
  .check-list li svg { flex-shrink: 0; margin-top: 4px; color: var(--good); }

  /* mini panels used inside split rows */
  .panel-visual {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow);
  }
  .lead-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); margin-bottom: 9px;
  }
  .lead-row:last-child { margin-bottom: 0; }
  .lead-row .lr-name { font-weight: 600; font-size: 13.5px; }
  .lead-row .lr-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .status-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
  .status-chip.new { background: var(--muted-14); color: var(--muted); }
  .status-chip.contacted { background: var(--accent-12); color: var(--accent-text); }
  .status-chip.replied { background: var(--good-14); color: var(--good); }
  .status-chip.dnc { background: var(--bad-12); color: var(--bad); }
  /* These chips sit on a tinted wash of their own colour rather than the plain panel,
     which lifts the background and costs roughly 0.7 of contrast - enough to drop them
     under AA at 11px even with the already-darkened light-mode tokens. Shifted further
     here only, so the tokens stay correct everywhere else they are used. */
  @supports (color: color-mix(in srgb, red, blue)) {
    @media (prefers-color-scheme: light) {
      .status-chip.replied { color: color-mix(in srgb, var(--good) 82%, #000); }
      .status-chip.dnc { color: color-mix(in srgb, var(--bad) 82%, #000); }
    }
    :root[data-theme="dark"] .status-chip.replied { color: var(--good); }
    :root[data-theme="dark"] .status-chip.dnc { color: var(--bad); }
    :root[data-theme="light"] .status-chip.replied { color: color-mix(in srgb, var(--good) 82%, #000); }
    :root[data-theme="light"] .status-chip.dnc { color: color-mix(in srgb, var(--bad) 82%, #000); }
  }
  .email-draft { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-size: 13.5px; line-height: 1.7; }
  .email-draft .subj { font-weight: 700; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .email-draft .hl { color: var(--accent-text); }
  .score-bars { display: grid; gap: 13px; }
  .score-bar .sb-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
  .score-bar .sb-track { height: 8px; border-radius: 100px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
  .score-bar .sb-fill { height: 100%; border-radius: 100px; }
  .score-bar .sb-fill.bad { background: var(--bad); }
  .score-bar .sb-fill.warn { background: var(--warn); }
  .score-bar .sb-fill.good { background: var(--good); }

  /* ---------- audience cards ---------- */
  .who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
  .who-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; }
  .who-card .ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: linear-gradient(135deg, var(--accent-12), var(--accent2-14)); border: 1px solid var(--accent2-32); color: var(--accent-2); }
  .who-card:nth-child(2) .ico { background: linear-gradient(135deg, var(--good-14), var(--accent-12)); border-color: var(--good-30); color: var(--good); }
  .who-card:nth-child(3) .ico { background: linear-gradient(135deg, var(--warn-14), var(--accent2-14)); border-color: var(--warn-30); color: var(--warn); }
  .who-card h3 { margin: 0 0 9px; font-size: 18px; }
  .who-card p { margin: 0; color: var(--muted); font-size: 14.5px; }

  /* ---------- pricing ---------- */
  /* The card caps its own width, not the grid track: auto-fit counts tracks from the max
     when that max is a fixed length, so minmax(280px, 340px) would only fit two columns
     at laptop width and drop the third plan onto a second row. */
  #pricingCards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 22px; max-width: 1080px; margin: 0 auto;
  }
  .plan-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 26px; display: flex; flex-direction: column; position: relative;
    width: 100%; max-width: 340px; margin: 0 auto;
  }
  .plan-card.featured {
    border-color: var(--accent-45);
    background: linear-gradient(180deg, var(--accent-08), var(--panel));
    box-shadow: 0 14px 40px var(--accent-20);
  }
  .plan-card .plan-flag {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 14px; border-radius: 100px; white-space: nowrap;
  }
  .plan-card h3 { margin: 0 0 4px; font-size: 21px; }
  .plan-card .price { font-size: 40px; font-weight: 800; margin: 12px 0 18px; line-height: 1; }
  .plan-card .price small { font-size: 15px; color: var(--muted); font-weight: 400; }
  .plan-card .price .price-annual { margin-top: 8px; line-height: 1.3; }
  .plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14.5px; }
  .plan-card li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--muted); }
  .plan-card li svg { flex-shrink: 0; margin-top: 4px; color: var(--good); }
  /* The feature tick, as a mask over the --good colour, so the theme still colours it. */
  .plan-card li::before {
    content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; background: var(--good);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .plan-card .btn { margin-top: auto; width: 100%; }
  .pricing-note { text-align: center; color: var(--muted); font-size: 14px; margin: 30px 0 0; }
  /* Above the founding card, whose flag hangs 11px over its top edge. */
  #pricingTrial { max-width: 700px; margin: -20px auto 36px; }
  .founding-countdown { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 0 18px; }
  #pricingFounding { max-width: 640px; margin: 0 auto 24px; }
  .founding-copy { color: var(--muted); }
  /* "Current plan" on a signed-in visitor's own card: a label where the button was. */
  .plan-card .plan-current { cursor: default; pointer-events: none; }

  /* ---------- FAQ ---------- */
  .faq { max-width: 780px; margin: 0 auto; }
  .faq-item { border: 1px solid var(--border); border-radius: 11px; margin-bottom: 12px; background: var(--panel); overflow: hidden; }
  .faq-item summary {
    cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; font-size: 22px; color: var(--accent); font-weight: 400; flex-shrink: 0; line-height: 1; }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

  /* ---------- final CTA ---------- */
  .final-cta {
    position: relative; text-align: center; border-radius: 22px; padding: 66px 30px; overflow: hidden;
    background: linear-gradient(135deg, var(--accent-12), var(--accent2-14));
    border: 1px solid var(--accent-30);
  }
  .final-cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--accent-12) 1px, transparent 1px),
      linear-gradient(90deg, var(--accent-12) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, transparent 32%, #000 92%);
    mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, transparent 32%, #000 92%);
  }
  .final-cta::after {
    content: ''; position: absolute; inset: -30% -10%; pointer-events: none;
    background:
      radial-gradient(circle 240px at 8% 12%, var(--accent-20), transparent 70%),
      radial-gradient(circle 260px at 94% 88%, var(--accent2-14), transparent 70%);
  }
  .final-cta > * { position: relative; }
  .final-cta h2 { font-size: 40px; margin: 0 0 14px; font-weight: 800; line-height: 1.13; }
  .final-cta p { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0 auto 30px; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--border); padding: 52px 0 40px; color: var(--muted); font-size: 14px; margin-top: 80px; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 38px; }
  .foot-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; margin-bottom: 12px; }
  .foot-col h3 { color: var(--text); font-size: 14px; margin: 0 0 14px; font-weight: 700; }
  .foot-col a { display: block; color: var(--muted); text-decoration: none; padding: 5px 0; }
  .foot-col a:hover { color: var(--accent); }
  .foot-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; }

  #adSlotLanding { margin: 40px 0; text-align: center; }
  #adSlotLanding:empty { display: none; }

  /* ---------- responsive ---------- */
  @media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: 30px; margin-bottom: 62px; }
    .split.rev .split-text { order: 0; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  }
  @media (max-width: 700px) {
    .hero { padding: 52px 0 10px; }
    .hero h1 { font-size: 36px; }
    .hero p.lead { font-size: 17px; }
    section { padding: 60px 0; }
    .section-head { margin-bottom: 36px; }
    .section-head h2 { font-size: 29px; }
    .section-head p { font-size: 16px; }
    .split h3 { font-size: 25px; }
    .final-cta { padding: 46px 22px; border-radius: 16px; }
    .final-cta h2 { font-size: 29px; }
    .final-cta p { font-size: 16px; }
    .stat .num { font-size: 31px; }
    .foot-grid { grid-template-columns: 1fr; gap: 26px; }
    .mockup-body { padding: 13px; }
    .mock-thumb { display: none; }
    .trial-form { flex-direction: column; }
    .trial-form input, .trial-form select, .trial-form button, .trial-radius { width: 100%; }
    .trial-radius input { width: auto; }
    .btn.lg { padding: 14px 26px; font-size: 15.5px; }
  }
  @media (max-width: 420px) {
    .hero h1 { font-size: 30px; }
  }