* { box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font:14px/1.55 var(--font-ui); margin:0; }
  a { text-decoration:none; color:inherit; }

  /* ── per-tier stance accents (drawn from house tokens; violet = the orb/Opus tier) ── */
  :root { --t-free:var(--muted); --t-insider:var(--info); --t-pro:#8b5cf6;
    /* Content surfaces use an OPAQUE elevated fill (not the floating-menu --glass-bg,
       which is translucent and needs backdrop-filter to be legible). backdrop-filter
       stays on as an enhancement; the fill guarantees contrast without it. */
    --surface:color-mix(in srgb, var(--panel) 96%, var(--text)); }
  html[data-theme="light"] { --t-pro:#7c5cff;
    --surface:color-mix(in srgb, var(--panel) 97%, #000); }

  /* ── page shell ─────────────────────────────────────────────────────── */
  .wrap { max-width:1120px; margin:0 auto; padding:22px 18px 72px; }
  @media (min-width:900px){ .wrap{ padding:30px 26px 96px; } }

  /* ── hero ───────────────────────────────────────────────────────────── */
  .hero { position:relative; text-align:center; padding:26px 6px 8px; }
  .hero .eyebrow { font:600 11px/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; }
  .hero .eyebrow::before, .hero .eyebrow::after { content:""; width:26px; height:1px;
    background:linear-gradient(90deg,transparent,var(--line)); }
  .hero .eyebrow::after { background:linear-gradient(90deg,var(--line),transparent); }
  .hero h1 { font:700 clamp(28px,5.4vw,44px)/1.08 var(--font-ui); letter-spacing:-.02em;
    margin:0 auto; max-width:15ch; }
  .hero h1 .accent { background:linear-gradient(100deg,var(--t-insider),var(--t-pro));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .hero .sub { font-size:clamp(14.5px,2.2vw,17px); color:var(--muted); max-width:56ch;
    margin:16px auto 0; line-height:1.5; }

  /* ── billing toggle (the signature interaction) ─────────────────────── */
  .toggle-wrap { display:flex; justify-content:center; margin:28px 0 6px; }
  .btoggle { position:relative; display:inline-flex; align-items:center; gap:2px; padding:5px;
    border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:var(--card-shadow); }
  .btoggle .knob { position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
    border-radius:999px; background:linear-gradient(180deg,color-mix(in srgb,var(--t-insider) 22%,var(--panel2)),var(--panel2));
    border:1px solid color-mix(in srgb,var(--t-insider) 40%,var(--line));
    box-shadow:inset 0 1px 0 var(--gbtn-sheen), 0 4px 14px -6px color-mix(in srgb,var(--t-insider) 55%,transparent);
    transition:transform .34s cubic-bezier(.34,1.4,.5,1); z-index:0; }
  .btoggle.annual .knob { transform:translateX(100%); }
  .btoggle button { position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer;
    font:600 13px/1 var(--font-ui); color:var(--muted); padding:9px 20px; border-radius:999px;
    display:inline-flex; align-items:center; gap:8px; transition:color .24s ease; white-space:nowrap; }
  .btoggle button.on { color:var(--text); }
  .btoggle .save-flag { font:700 10px/1 var(--font-ui); letter-spacing:.02em; color:var(--t-pro);
    background:color-mix(in srgb,var(--t-pro) 16%,transparent);
    border:1px solid color-mix(in srgb,var(--t-pro) 34%,transparent);
    padding:3px 7px; border-radius:999px; }
  .toggle-note { text-align:center; font-size:12px; color:var(--muted); margin:4px 0 0; min-height:1.2em; }

  /* ── tier cards ─────────────────────────────────────────────────────── */
  .cards { display:grid; gap:16px; margin-top:26px; grid-template-columns:1fr; align-items:stretch; }
  @media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); gap:14px; } }

  .card { --accent:var(--muted); position:relative; display:flex; flex-direction:column;
    background:var(--surface); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-brd); border-radius:18px; padding:22px 20px 20px; overflow:hidden;
    box-shadow:var(--card-shadow); transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
  .card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.9; }
  .card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 34%,var(--glass-brd));
    box-shadow:0 20px 50px -24px color-mix(in srgb,var(--accent) 40%,transparent), var(--card-shadow); }
  .card.free { --accent:var(--t-free); }
  .card.insider { --accent:var(--t-insider); }
  .card.pro { --accent:var(--t-pro);
    border-color:color-mix(in srgb,var(--t-pro) 32%,var(--glass-brd));
    box-shadow:0 22px 54px -26px color-mix(in srgb,var(--t-pro) 46%,transparent), var(--card-shadow); }
  .card.pro::after { content:""; position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
    background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--t-pro) 12%,transparent),transparent 60%); }

  .ribbon { position:absolute; top:19px; right:-38px; transform:rotate(45deg); z-index:2;
    background:linear-gradient(180deg,var(--t-pro),color-mix(in srgb,var(--t-pro) 70%,#000));
    color:#fff; font:700 9.5px/1 var(--font-ui); letter-spacing:.07em; text-transform:uppercase;
    padding:5px 44px; box-shadow:0 4px 12px -4px rgba(0,0,0,.5); text-align:center; }

  .card .tname { display:inline-flex; align-items:center; gap:8px; font:700 15px/1 var(--font-ui);
    letter-spacing:.01em; color:var(--text); }
  .card .tname .dot { width:9px; height:9px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
  .card .tfor { font-size:12.5px; color:var(--muted); margin:8px 0 0; min-height:2.4em; line-height:1.4; }

  /* price block — mono numerals (the trading-desk numeric face) */
  .price { display:flex; align-items:flex-end; gap:4px; margin:18px 0 2px; min-height:44px; }
  .price .cur { font:600 18px/1 var(--font-mono); color:var(--muted); margin-bottom:5px; }
  .price .amt { font:600 40px/.9 var(--font-mono); letter-spacing:-.01em; color:var(--text);
    font-variant-numeric:tabular-nums; transition:opacity .18s ease; }
  .price .per { font-size:12.5px; color:var(--muted); margin-bottom:5px; }
  .price.free-price .amt { font-size:28px; }
  .billed { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);
    min-height:1.5em; margin-top:2px; }
  .badge-save { font:700 10.5px/1 var(--font-ui); color:var(--accent);
    background:color-mix(in srgb,var(--accent) 15%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
    padding:3px 8px; border-radius:999px; white-space:nowrap; }
  .badge-save.hidden { display:none; }

  .cta { margin:18px 0 4px; }
  .cta .gbtn { width:100%; }
  .cta-note { font-size:11.5px; color:var(--muted); text-align:center; margin:9px 0 0; min-height:1.3em; }
  .cta-note.on-plan { color:var(--t-insider); font-weight:600; }

  /* per-card highlight list — glance-tier plain words, one line each */
  .feats { list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:9px; }
  .feats li { display:flex; align-items:flex-start; gap:9px; font-size:12.8px; line-height:1.4; color:var(--text); }
  .feats li .ic { flex:none; margin-top:1px; width:15px; height:15px; }
  .feats li .ic svg { width:15px; height:15px; display:block; }
  .feats li.on .ic { color:var(--accent); }
  .feats li.off { color:var(--muted); }
  .feats li.off .ic { color:color-mix(in srgb,var(--muted) 70%,transparent); }
  .feats li b { font-weight:600; }

  /* ── comparison matrix ──────────────────────────────────────────────── */
  .matrix-sec { margin-top:56px; }
  .sec-head { text-align:center; margin-bottom:22px; }
  .sec-head h2 { font:700 clamp(19px,3vw,25px)/1.15 var(--font-ui); letter-spacing:-.01em; margin:0; }
  .sec-head p { color:var(--muted); margin:8px auto 0; max-width:52ch; font-size:14px; }

  .mtx-shell { border:1px solid var(--glass-brd); border-radius:16px; overflow:hidden;
    background:var(--surface); box-shadow:var(--card-shadow); }
  .mtx { width:100%; border-collapse:collapse; font-size:13px; }
  .mtx th, .mtx td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line);
    vertical-align:middle; }
  .mtx thead th { position:sticky; top:0; background:var(--surface); z-index:3;
    box-shadow:0 1px 0 var(--line); }
  .mtx tbody tr:last-child td { border-bottom:0; }
  .mtx tbody tr:hover td { background:color-mix(in srgb,var(--text) 3%,transparent); }
  .mtx .col-feat { width:34%; }
  .mtx .col-tier { width:22%; text-align:center; }
  .mtx td.col-tier, .mtx th.col-tier { text-align:center; }
  .mtx thead .th-tier { display:inline-flex; flex-direction:column; align-items:center; gap:3px; }
  .mtx thead .th-tier .tn { font:700 13px/1 var(--font-ui); }
  .mtx thead .th-tier .tp { font:500 11px/1 var(--font-mono); color:var(--muted); }
  .mtx thead .th-free .tn { color:var(--t-free); }
  .mtx thead .th-insider .tn { color:var(--t-insider); }
  .mtx thead .th-pro .tn { color:var(--t-pro); }
  .mtx .col-pro { background:color-mix(in srgb,var(--t-pro) 5%,transparent); }
  .mtx .rlabel { font-weight:600; color:var(--text); }
  .mtx .rsub { display:block; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:2px; }
  .mtx .val { color:var(--text); font-size:12.6px; }
  .mtx .val-muted { color:var(--muted); }
  .mtx .yes { color:var(--up); }
  .mtx .yes svg { width:17px; height:17px; }
  .mtx .dash { color:color-mix(in srgb,var(--muted) 60%,transparent); font-size:15px; }
  .mtx .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; }

  /* ── FAQ ────────────────────────────────────────────────────────────── */
  .faq-sec { margin-top:56px; }
  .faq { display:grid; gap:10px; max-width:760px; margin:22px auto 0; }
  .faq details { border:1px solid var(--glass-brd); border-radius:12px; background:var(--surface);
    overflow:hidden; }
  .faq summary { list-style:none; cursor:pointer; padding:15px 18px; font:600 14px/1.4 var(--font-ui);
    display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary .chev { flex:none; width:16px; height:16px; color:var(--muted); transition:transform .22s ease; }
  .faq details[open] summary .chev { transform:rotate(180deg); }
  .faq .ans { padding:0 18px 16px; color:var(--muted); font-size:13.4px; line-height:1.6; }

  /* ── disclaimer ─────────────────────────────────────────────────────── */
  .disclaimer { margin-top:44px; padding:16px 18px; border:1px solid var(--line); border-radius:12px;
    background:color-mix(in srgb,var(--panel) 60%,transparent); color:var(--muted);
    font-size:11.8px; line-height:1.6; max-width:820px; margin-left:auto; margin-right:auto; }
  .disclaimer b { color:color-mix(in srgb,var(--text) 80%,var(--muted)); font-weight:600; }

  /* ── inline ? help tips (Tier-2 home for the fine mechanics) ─────────── */
  .phelp { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
    border-radius:50%; border:1px solid var(--muted); color:var(--muted); font:600 10px/1 var(--font-ui);
    cursor:help; position:relative; vertical-align:middle; margin-left:5px; }
  .phelp .ptip { display:none; position:absolute; bottom:150%; left:50%; transform:translateX(-50%);
    width:250px; background:var(--panel); border:1px solid var(--line); padding:9px 11px; border-radius:9px;
    z-index:70; font:400 12px/1.45 var(--font-ui); color:var(--text); box-shadow:var(--popover-shadow);
    text-align:left; }
  .phelp:hover .ptip, .phelp:focus .ptip { display:block; }

  /* ── return-flag banner (?checkout=success | cancel) ────────────────── */
  .flag-banner { display:none; align-items:center; gap:12px; margin:0 0 20px; padding:13px 16px;
    border-radius:12px; font-size:13.5px; border:1px solid var(--line); }
  .flag-banner.show { display:flex; }
  .flag-banner.ok { border-color:color-mix(in srgb,var(--up) 42%,var(--line));
    background:color-mix(in srgb,var(--up) 10%,transparent); color:var(--text); }
  .flag-banner.cancel { border-color:color-mix(in srgb,var(--warn) 42%,var(--line));
    background:color-mix(in srgb,var(--warn) 10%,transparent); color:var(--text); }
  .flag-banner .ficon { flex:none; font-size:17px; }
  .flag-banner .fx { margin-left:auto; cursor:pointer; color:var(--muted); background:none; border:0;
    font-size:16px; line-height:1; padding:2px 4px; }

  /* ── toast (checkout errors — interface voice, no apology) ──────────── */
  #ptoast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    max-width:min(92vw,420px); background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:12px 16px; border-radius:12px; box-shadow:var(--glass-shadow); font-size:13px; z-index:2147483600;
    opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
  #ptoast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  .gbtn[aria-busy="true"] { pointer-events:none; opacity:.75; }
  .gbtn .spin { width:14px; height:14px; border:2px solid color-mix(in srgb,var(--text) 30%,transparent);
    border-top-color:var(--text); border-radius:50%; animation:pspin .7s linear infinite; }
  @keyframes pspin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){
    .btoggle .knob, .card, .price .amt, .faq summary .chev, #ptoast { transition:none; }
    .gbtn .spin { animation-duration:1.4s; }
  }