/* Audio Catcher — shared landing styles.
   Tokens lifted verbatim from the extension's css/style_append.css
   ("Blue Grain Theme"). Dark only; the extension has no light theme. */

/* ============================================================
       Design tokens — lifted verbatim from css/style_append.css
       ("Blue Grain Theme"). Dark only; the extension has no light
       theme, so the page does not invent one.
       ============================================================ */
    :root {
      color-scheme: dark;

      --bg: #090d12;
      --surface: #111821;
      --surface-hover: #17212c;
      --elevated: #0f151d;

      --primary: #53a8ff;
      --primary-hover: #7dc0ff;
      --accent: #dbeeff;

      --text: #eef6ff;
      --muted: #9fb1c8;
      /* The extension's --color-text-dim is #667790, which lands at 4.27:1 on
         this background — just under WCAG AA for small text. Nudged one step
         lighter (5.2:1) for a public page; same hue, same family. */
      --dim: #76859c;

      --border: #223041;
      --border-hover: #35506b;
      --border-strong: rgba(146, 197, 255, .22);

      --success: #56d7ff;
      --danger: #ef4444;

      /* Gold marks the paid plan and nothing else — see css/dialogs.css:390 */
      --gold: #f0b429;
      --gold-soft: #ffd97a;
      --gold-ink: #2a1d02;
      --gold-glow: rgba(240, 180, 41, .18);

      --grad-primary: linear-gradient(135deg, #2c68ff 0%, #3c95ff 42%, #65d6ff 100%);
      --grad-wordmark: linear-gradient(135deg, #f4f9ff 0%, #dbeeff 42%, #73b9ff 100%);
      --grad-panel:
        linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .01)),
        linear-gradient(180deg, rgba(13, 18, 24, .985), rgba(9, 13, 18, .985));
      --grad-panel-strong:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(16, 22, 30, .985), rgba(8, 11, 15, .995));

      --shadow-md: 0 18px 36px rgba(0, 0, 0, .3), 0 8px 18px rgba(0, 0, 0, .18);
      --shadow-neon: 0 0 0 1px rgba(146, 197, 255, .05), 0 18px 40px rgba(22, 52, 93, .26);
      --shadow-btn: 0 12px 26px rgba(27, 88, 160, .24);

      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 24px;
      --r-full: 9999px;

      --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
      --t-normal: 250ms cubic-bezier(.4, 0, .2, 1);

      --maxw: 1120px;
      --pad: clamp(20px, 5vw, 40px);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; scroll-padding-top: 88px; }

    body {
      position: relative;
      background:
        radial-gradient(circle at top right, rgba(69, 143, 255, .08), transparent 24%),
        radial-gradient(circle at bottom left, rgba(64, 100, 255, .1), transparent 26%),
        var(--bg);
      color: var(--text);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* The two-layer grain. Without it the page reads as generic dark SaaS
       instead of Audio Catcher. Copied from css/style_append.css:98-120. */
    body::before,
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    body::before {
      background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .05) .6px, transparent .8px);
      background-size: 28px 28px;
      opacity: .22;
    }

    body::after {
      background:
        radial-gradient(circle at 18% 24%, rgba(47, 97, 255, .1), transparent 18%),
        radial-gradient(circle at 80% 10%, rgba(67, 196, 255, .08), transparent 18%),
        radial-gradient(circle at center, rgba(255, 255, 255, .024) .7px, transparent .9px);
      background-size: auto, auto, 4px 4px;
      opacity: .5;
      mix-blend-mode: screen;
    }

    main, header, footer { position: relative; z-index: 1; }

    img { max-width: 100%; display: block; }
    a { color: var(--primary); text-decoration: none; }
    a:hover { color: var(--primary-hover); }

    ::selection { background: rgba(83, 168, 255, .28); }

    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ---------- layout primitives ---------- */
    .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

    section { padding-block: clamp(64px, 9vw, 112px); }

    .eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 14px;
    }

    h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }

    h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; }

    .section-lead {
      color: var(--muted);
      font-size: clamp(16px, 1.6vw, 18px);
      max-width: 62ch;
      margin-top: 16px;
    }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: var(--r-md);
      font: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
      white-space: nowrap;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: var(--grad-primary);
      color: #f4f9ff;
      box-shadow: var(--shadow-btn);
    }

    .btn-primary:hover { color: #fff; box-shadow: 0 14px 30px rgba(27, 88, 160, .32); }

    .btn-ghost {
      background: transparent;
      border-color: var(--border-hover);
      color: var(--text);
    }

    .btn-ghost:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--text); }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold-soft), var(--gold));
      color: var(--gold-ink);
      box-shadow: 0 6px 18px var(--gold-glow);
    }

    .btn-gold:hover { background: linear-gradient(135deg, #ffe49b, #f8c243); color: var(--gold-ink); }

    .btn-lg { padding: 16px 30px; font-size: 16px; }

    .btn-block { width: 100%; white-space: normal; text-align: center; }

    .cta-note {
      color: var(--dim);
      font-size: 13.5px;
      margin-top: 14px;
      max-width: 44ch;
    }

    /* ---------- nav ---------- */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(11, 15, 20, .8);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      gap: 24px;
      height: 68px;
    }

    .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }

    .brand img {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      /* The icon is pink/orange and the UI is blue; the app header softens the
         clash with exactly this glow (css/style_append.css .app-logo). */
      filter: drop-shadow(0 0 14px rgba(84, 168, 255, .24));
    }

    .brand strong {
      white-space: nowrap;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.02em;
      background: var(--grad-wordmark);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav-links { display: flex; gap: 26px; }

    .nav-links a {
      color: var(--muted);
      font-size: 14.5px;
      font-weight: 500;
      transition: color var(--t-fast);
    }

    .nav-links a:hover { color: var(--text); }

    @media (max-width: 860px) { .nav-links { display: none; } }

    @media (max-width: 460px) {
      .nav-inner { gap: 12px; }
      .brand img { width: 30px; height: 30px; }
      .brand strong { font-size: 15.5px; }
      .nav-inner .btn { padding: 10px 14px; font-size: 14px; }
    }

    /* ---------- hero ---------- */
    .hero { padding-top: clamp(48px, 7vw, 84px); padding-bottom: 0; overflow: hidden; }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(32px, 5vw, 64px);
      align-items: start;
    }

    .hero-shot { --shot-h: 620px; }

    .hero h1 {
      font-size: clamp(36px, 5.6vw, 60px);
      letter-spacing: -.035em;
    }

    .hero h1 .hl {
      background: var(--grad-wordmark);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p.lead {
      color: var(--muted);
      font-size: clamp(16.5px, 1.8vw, 19px);
      margin-top: 22px;
      max-width: 54ch;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 34px;
      padding-top: 26px;
      border-top: 1px solid var(--border);
    }

    .trust-item { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--dim); }

    .trust-item b { color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

    /* the panel shot, tilted and bleeding right — the store banner's own formula */
    .hero-shot { position: relative; perspective: 1600px; }

    .hero-shot::before {
      content: '';
      position: absolute;
      inset: -14% -30% -10% -14%;
      background: radial-gradient(ellipse at 55% 45%, rgba(48, 97, 255, .22), transparent 62%);
      filter: blur(12px);
      pointer-events: none;
    }

    .panel-frame {
      position: relative;
      border-radius: 20px;
      border: 1px solid var(--border-strong);
      background: var(--grad-panel-strong);
      box-shadow: var(--shadow-md), var(--shadow-neon);
      overflow: hidden;
      transform: rotateY(-9deg) rotateX(2deg) rotateZ(.4deg);
      transform-origin: left center;
    }

    .panel-frame.flat { transform: none; }

    .panel-chrome {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 11px 14px;
      background: rgba(8, 12, 17, .9);
      border-bottom: 1px solid var(--border);
    }

    .panel-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #2c3a4c; }

    .panel-chrome i:first-child { background: #3d2b31; }

    .panel-chrome span {
      margin-left: 8px;
      font-size: 11px;
      color: var(--dim);
      letter-spacing: .02em;
    }

    /* The panel shots are ~1:2.25 (a tall side panel). Left unconstrained they
       dominate every section, so each frame caps its height and crops from the
       top, with a fade so the cut reads as intentional. */
    .panel-frame img {
      width: 100%;
      height: var(--shot-h, 460px);
      object-fit: cover;
      object-position: top center;
    }

    .panel-frame::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 84px;
      background: linear-gradient(180deg, rgba(9, 13, 18, 0), rgba(9, 13, 18, .92));
      pointer-events: none;
    }

    .panel-frame.whole img { height: auto; object-fit: fill; }

    /* The dialog shots are cropped to the dialog itself, so they get a plain
       frame rather than a browser chrome bar they were never inside. */
    .shot-plain {
      border-radius: var(--r-lg);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      background: var(--surface);
    }

    .shot-plain img { width: 100%; height: auto; display: block; }

    .shot-cap { color: var(--dim); font-size: 12.5px; margin-top: 10px; }

    .panel-frame.whole::after { display: none; }

    .shot-fade { position: relative; }

    .shot-fade::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 90px;
      background: linear-gradient(180deg, transparent, var(--bg));
      pointer-events: none;
    }

    @media (max-width: 940px) {
      .hero-grid { grid-template-columns: minmax(0, 1fr); }
      .panel-frame { transform: none; max-width: 420px; margin-inline: auto; }
      .hero-shot::before { inset: -8%; }
    }

    /* ---------- trust strip ---------- */
    .strip { border-block: 1px solid var(--border); background: rgba(13, 18, 25, .55); }

    .strip .wrap {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      padding-block: 26px;
    }

    .strip-item { text-align: center; }

    .strip-item b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

    .strip-item span { font-size: 12.5px; color: var(--dim); }

    @media (max-width: 720px) { .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }

    /* ---------- generic cards ---------- */
    .cards { display: grid; gap: 18px; margin-top: 44px; }

    .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    @media (max-width: 900px) { .cols-3 { grid-template-columns: minmax(0, 1fr); } .cols-2 { grid-template-columns: minmax(0, 1fr); } }

    .card {
      background:
        radial-gradient(circle at top right, rgba(83, 168, 255, .05), transparent 34%),
        var(--grad-panel);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
      transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    }

    .card:hover {
      border-color: var(--border-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .card h3 { font-size: 17px; margin-bottom: 9px; }

    .card p { color: var(--muted); font-size: 14.5px; }

    .card-ico {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: rgba(83, 168, 255, .1);
      border: 1px solid rgba(83, 168, 255, .18);
      color: var(--primary);
      margin-bottom: 16px;
    }

    .card-ico.warn { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .2); color: #f87171; }

    /* ---------- steps ---------- */
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }

    @media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }

    .step { display: flex; flex-direction: column; }

    .step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

    .step-num {
      flex: none;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--grad-primary);
      color: #f4f9ff;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(27, 88, 160, .28);
    }

    .step h3 { font-size: 17px; }

    .step p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }

    .step .panel-frame,
    .step .ac-stage { margin-top: auto; --shot-h: 430px; }

    .panel-frame img { object-position: center var(--shot-y, top); }

    /* ---------- feature grid ---------- */
    .features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }

    @media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 620px) { .features { grid-template-columns: minmax(0, 1fr); } }

    .feature {
      background: var(--grad-panel);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 22px;
      transition: border-color var(--t-fast), transform var(--t-fast);
    }

    .feature:hover { border-color: var(--border-hover); transform: translateY(-2px); }

    .feature h3 { font-size: 15.5px; margin-bottom: 8px; }

    .feature p { color: var(--muted); font-size: 14px; }

    .kbd {
      display: inline-block;
      padding: 1px 7px;
      margin: 2px 2px 2px 0;
      border: 1px solid var(--border-hover);
      border-radius: 6px;
      background: var(--elevated);
      color: var(--accent);
      font-size: 11.5px;
      font-weight: 600;
    }

    /* ---------- split showcase ---------- */
    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(32px, 5vw, 64px);
      align-items: center;
    }

    .split.rev > :first-child { order: 2; }

    @media (max-width: 940px) {
      .split { grid-template-columns: minmax(0, 1fr); }
      .split.rev > :first-child { order: 0; }
      .split .panel-frame { max-width: 400px; margin-inline: auto; }
    }

    .split .panel-frame { --shot-h: 520px; }

    .showcase { align-items: start; gap: clamp(28px, 4vw, 52px); }

    .showcase .shot-plain { max-width: 340px; }

    .showcase h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 14px; }

    .checklist { list-style: none; margin-top: 24px; display: grid; gap: 13px; }

    .checklist li { display: flex; gap: 12px; color: var(--muted); font-size: 15px; }

    /* Size the icon in CSS, not on the element: an inline SVG with only a
       viewBox has no intrinsic size and blows up to fill the flex line. */
    .checklist svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--primary); }

    .checklist b { color: var(--text); font-weight: 600; }

    /* ---------- privacy receipt ---------- */
    .receipt {
      margin-top: 44px;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      background: var(--grad-panel-strong);
      overflow: hidden;
    }

    .receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    @media (max-width: 820px) { .receipt-grid { grid-template-columns: minmax(0, 1fr); } }

    .receipt-col { padding: 30px; }

    .receipt-col + .receipt-col { border-left: 1px solid var(--border); }

    @media (max-width: 820px) { .receipt-col + .receipt-col { border-left: 0; border-top: 1px solid var(--border); } }

    .receipt-col h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }

    .perm { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(34, 48, 65, .6); }

    .perm:last-child { border-bottom: 0; }

    .perm code {
      flex: none;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12.5px;
      color: var(--accent);
      min-width: 92px;
    }

    .perm span { font-size: 13.5px; color: var(--muted); }

    .perm.no code { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(102, 119, 144, .5); }

    /* Acceptable-use columns: a claim list rather than the permission table
       the receipt grid was originally built for. */
    .use-list { list-style: none; display: grid; gap: 14px; }

    .use-list li { display: flex; gap: 11px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

    .use-list svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--primary); }

    .use-list.no svg { color: var(--danger); }

    .use-list b { color: var(--text); font-weight: 600; }

    .receipt-foot {
      padding: 22px 30px;
      border-top: 1px solid var(--border);
      background: rgba(9, 13, 18, .6);
      color: var(--dim);
      font-size: 13.5px;
    }

    /* ---------- pricing ---------- */
    .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; align-items: start; }

    @media (max-width: 820px) { .plans { grid-template-columns: minmax(0, 1fr); } }

    .plan {
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      background: var(--grad-panel);
      padding: 30px;
    }

    .plan.pro {
      border-color: rgba(240, 180, 41, .38);
      background:
        radial-gradient(circle at top right, rgba(240, 180, 41, .07), transparent 46%),
        var(--grad-panel-strong);
      box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
    }

    .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }

    .plan h3 { font-size: 19px; }

    .badge {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: var(--r-full);
    }

    .badge.gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--gold-ink); }

    .badge.plain { background: rgba(255, 255, 255, .07); color: var(--muted); }

    .price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; }

    .price b { font-size: 42px; font-weight: 700; letter-spacing: -.035em; }

    .price span { color: var(--dim); font-size: 15px; }

    .price-sub { color: var(--muted); font-size: 13.5px; min-height: 20px; }

    .plan ul { list-style: none; margin: 24px 0; display: grid; gap: 12px; }

    .plan li { display: flex; gap: 11px; font-size: 14.5px; color: var(--muted); }

    .plan li svg { flex: none; margin-top: 4px; color: var(--primary); }

    .plan.pro li svg { color: var(--gold); }

    .plan-note { color: var(--dim); font-size: 12.5px; margin-top: 14px; text-align: center; }

    /* ---------- pricing page ---------- */
    .page-head { padding-bottom: clamp(36px, 5vw, 56px); }

    .page-head h1 {
      font-size: clamp(34px, 5vw, 52px);
      letter-spacing: -.035em;
      margin-bottom: 4px;
    }

    .page-head h1 .hl {
      background: var(--grad-wordmark);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .plan-title { font-size: 19px; letter-spacing: -.02em; font-weight: 700; }

    .price-legal {
      margin-top: 26px;
      color: var(--dim);
      font-size: 13px;
      max-width: 70ch;
    }

    .price-legal strong { color: var(--muted); font-weight: 600; }

    /* ---------- comparison table ---------- */
    .table-scroll {
      margin-top: 44px;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--grad-panel);
    }

    .compare {
      width: 100%;
      min-width: 520px;
      border-collapse: collapse;
      font-size: 14.5px;
    }

    .compare th, .compare td { padding: 14px 18px; text-align: left; }

    .compare thead th {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--dim);
      border-bottom: 1px solid var(--border);
      background: rgba(9, 13, 18, .5);
    }

    .compare tbody th {
      font-weight: 500;
      color: var(--text);
      width: 46%;
    }

    .compare td { color: var(--muted); text-align: center; width: 27%; }

    .compare tbody tr + tr th,
    .compare tbody tr + tr td { border-top: 1px solid rgba(34, 48, 65, .55); }

    .compare tbody tr:hover th,
    .compare tbody tr:hover td { background: rgba(255, 255, 255, .015); }

    /* The three rows that actually differ carry the gold accent, so the table
       answers "what am I paying for" without being read end to end. */
    .compare tr.diff th { color: var(--text); font-weight: 600; }

    .compare tr.diff td.is-pro { color: var(--gold-soft); }

    .compare tr.diff td.is-pro b { color: var(--gold-soft); font-weight: 700; }

    .compare .is-pro { background: rgba(240, 180, 41, .035); }

    .compare thead th.is-pro { color: var(--gold); background: rgba(240, 180, 41, .07); }

    .compare td.yes { color: var(--primary); font-size: 16px; }

    .compare td.yes.is-pro { color: var(--gold); }

    .compare td.no { color: var(--dim); }

    .table-hint {
      display: none;
      margin: 28px 0 -28px;
      color: var(--dim);
      font-size: 13px;
    }

    /* Under ~700px the three columns cannot fit, so the table scrolls inside its
       own container. Say so — otherwise the Pro column is simply invisible. */
    @media (max-width: 700px) {
      .table-hint { display: block; }
      .compare { min-width: 440px; font-size: 13.5px; }
      .compare th, .compare td { padding: 12px 13px; }
      .compare tbody th { width: 42%; }
    }

    /* ---------- upgrade flow (two evenly framed shots) ---------- */
    .flow {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* Top-aligned and hugging their content: the two dialogs are genuinely
         different heights, and stretching them left a card half empty. */
      align-items: start;
      gap: 20px;
      margin-top: 44px;
    }

    @media (max-width: 820px) { .flow { grid-template-columns: minmax(0, 1fr); } }

    .flow-item {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--grad-panel);
      overflow: hidden;
    }

    /* Both shots sit in an identical box and are contained inside it, so two
       very different aspect ratios still line up as a pair. */
    .flow-shot {
      /* The shots are live components now, not fixed-ratio images. */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 26px 22px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(83, 168, 255, .06), transparent 60%),
        var(--elevated);
      border-bottom: 1px solid var(--border);
    }

    /* Absolute max-height, not a percentage: the shots carry intrinsic
       width/height attributes, and a percentage max-height does not resolve
       against a flex line reliably enough to clamp them. 420 - 2x22 padding. */
    .flow-shot img {
      max-height: 376px;
      max-width: 100%;
      width: auto;
      height: auto;
      border-radius: 10px;
      box-shadow: var(--shadow-md);
    }

    .flow-item figcaption {
      padding: 20px 22px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    .flow-item figcaption b { display: block; color: var(--text); font-size: 15px; margin-bottom: 5px; }

    .nav-links a[aria-current="page"] { color: var(--text); }

    /* ---------- faq ---------- */
    .faq { margin-top: 44px; display: grid; gap: 12px; }

    details {
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: var(--grad-panel);
      transition: border-color var(--t-fast);
    }

    details[open] { border-color: var(--border-hover); }

    summary {
      cursor: pointer;
      list-style: none;
      padding: 18px 22px;
      font-size: 15.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    summary::-webkit-details-marker { display: none; }

    summary::after {
      content: '';
      flex: none;
      width: 9px;
      height: 9px;
      border-right: 2px solid var(--dim);
      border-bottom: 2px solid var(--dim);
      transform: rotate(45deg) translate(-2px, -2px);
      transition: transform var(--t-fast);
    }

    details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

    details p { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; max-width: 78ch; }

    details p + p { padding-top: 0; margin-top: -8px; }

    /* ---------- legal pages ---------- */
    .legal { max-width: 74ch; }

    .legal-head { padding-bottom: clamp(28px, 4vw, 44px); }

    .legal-head h1 { font-size: clamp(32px, 4.6vw, 46px); letter-spacing: -.035em; }

    .legal-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      margin-top: 18px;
      color: var(--dim);
      font-size: 13px;
    }

    .legal-meta b { color: var(--muted); font-weight: 600; }

    /* The plain-language summary that sits above the legal text. */
    .legal-tldr {
      margin-top: 30px;
      padding: 22px 24px;
      border: 1px solid var(--border-strong);
      border-radius: var(--r-lg);
      background:
        radial-gradient(circle at 12% 0%, rgba(48, 97, 255, .1), transparent 60%),
        var(--grad-panel-strong);
    }

    .legal-tldr h2 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 12px;
    }

    .legal-tldr ul { list-style: none; display: grid; gap: 9px; }

    .legal-tldr li { display: flex; gap: 11px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

    .legal-tldr li::before { content: '—'; color: var(--dim); flex: none; }

    .legal-toc {
      margin-top: 30px;
      padding: 20px 24px;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: var(--grad-panel);
    }

    .legal-toc h2 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 12px;
    }

    .legal-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

    .legal-toc li { color: var(--muted); font-size: 14px; }

    .legal-body { padding-top: 0; }

    .legal-body section + section { margin-top: 44px; }

    .legal-body h2 {
      font-size: clamp(20px, 2.4vw, 25px);
      letter-spacing: -.02em;
      margin-bottom: 14px;
      scroll-margin-top: 90px;
    }

    .legal-body h3 { font-size: 16.5px; margin: 26px 0 10px; color: var(--text); }

    .legal-body p { color: var(--muted); font-size: 15px; line-height: 1.72; }

    .legal-body p + p { margin-top: 14px; }

    .legal-body ul, .legal-body ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 10px; }

    .legal-body li { color: var(--muted); font-size: 15px; line-height: 1.68; }

    .legal-body li::marker { color: var(--dim); }

    .legal-body b, .legal-body strong { color: var(--text); font-weight: 600; }

    .legal-body code {
      padding: 2px 6px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--elevated);
      color: var(--accent);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
    }

    .legal-note {
      margin-top: 44px;
      padding: 20px 22px;
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: var(--r-md);
      background: var(--grad-panel);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .legal-contact {
      margin-top: 44px;
      padding-top: 26px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.7;
    }

    /* ---------- final cta ---------- */
    .final {
      text-align: center;
      border: 1px solid var(--border-strong);
      border-radius: var(--r-xl);
      padding: clamp(40px, 6vw, 68px) var(--pad);
      background:
        radial-gradient(circle at 14% 84%, rgba(48, 97, 255, .2), transparent 42%),
        radial-gradient(circle at 82% 8%, rgba(68, 205, 255, .16), transparent 40%),
        var(--grad-panel-strong);
      box-shadow: var(--shadow-neon);
    }

    .final h2 { max-width: 20ch; margin-inline: auto; }

    .final p { color: var(--muted); margin: 18px auto 30px; max-width: 52ch; }

    .final .cta-note { margin-inline: auto; }

    /* ---------- footer ---------- */
    footer { border-top: 1px solid var(--border); padding-block: 40px; }

    .foot-inner { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }

    .foot-links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }

    .foot-links a, footer small { color: var(--dim); font-size: 13.5px; }

    .foot-links a:hover { color: var(--text); }

    .disclaimer {
      margin-top: 26px;
      padding-top: 22px;
      border-top: 1px solid rgba(34, 48, 65, .6);
      color: var(--dim);
      font-size: 12.5px;
      max-width: 88ch;
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      html { scroll-behavior: auto; }
      .panel-frame { transform: none !important; }
    }