/* StoreParity website. The house style (house/tokens.json 0.2.4, ADR-0008):
   true neutrals, StoreParity's gradient for brand fields and the icon only,
   the raspberry fill for actions, charcoal cards for the figures that matter.
   System type, no web fonts. Light, dark and Increase Contrast. */

:root {
  color-scheme: light dark;
  --canvas: #F4F4F6;
  --surface: #FFFFFF;
  --ink: #16161A;
  --ink2: #6E6E73;
  --line: #E0E0E4;
  --selection: rgba(22, 22, 26, 0.06);
  --card: #1C1C1F;
  --card-ink: #FFFFFF;
  --card-ink2: #A3A3A8;
  --card-line: rgba(255, 255, 255, 0.10);
  --card-raised: rgba(255, 255, 255, 0.07);
  --card-rim: rgba(0, 0, 0, 0);
  --accent: #DB0F75;
  --on-accent: #FFFFFF;
  --accent-text: #CB106C;
  --accent-on-card: #FE76A6;
  --positive: #17714F;
  --negative: #B42318;
  --attention: #8F5600;
  --info: #2358BE;
  --soft: 0.1;
  --g1: #FF6B33;
  --g2: #FF408F;
  --g3: #CC52FF;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-window: 0 2px 6px rgba(0, 0, 0, 0.06), 0 30px 80px rgba(22, 22, 26, 0.18);
  --glass: rgba(244, 244, 246, 0.72);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 22px;
  --radius-sm: 14px;
  --wrap: 1180px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0D0D0F;
    --surface: #161618;
    --ink: #F5F5F7;
    --ink2: #98989F;
    --line: #2A2A2E;
    --selection: rgba(245, 245, 247, 0.08);
    --card: #26262B;
    --card-rim: rgba(255, 255, 255, 0.08);
    --accent-text: #FE76A6;
    --positive: #34C77B;
    --negative: #FF8478;
    --attention: #FFB340;
    --info: #80B0FF;
    --soft: 0.16;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-window: 0 2px 8px rgba(0, 0, 0, 0.5), 0 30px 90px rgba(0, 0, 0, 0.6);
    --glass: rgba(13, 13, 15, 0.72);
  }
}

@media (prefers-contrast: more) {
  :root { --line: #C7C7CC; --card-line: rgba(255, 255, 255, 0.18); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --line: #48484A; --card-rim: rgba(255, 255, 255, 0.16); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(219, 15, 117, 0.18); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 16px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } body { font-size: 16px; } }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; font-weight: 700; }
.display { font-size: clamp(42px, 6.4vw, 80px); letter-spacing: -0.04em; line-height: 1.0; }
h2, .h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.032em; line-height: 1.05; }
h3 { font-size: 21px; letter-spacing: -0.015em; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; color: var(--ink2); letter-spacing: -0.01em; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink2); }
.meta { font-size: 14px; color: var(--ink2); }
.small { font-size: 13px; color: var(--ink2); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.strong { font-weight: 650; }
.cc {
  display: inline-block; min-width: 2.2em; padding: 1px 6px; margin-right: 6px;
  font: 600 11px/1.6 var(--mono); letter-spacing: 0.02em; text-align: center;
  color: var(--ink2); border: 1px solid var(--line); border-radius: 5px; vertical-align: 1px;
}
.est { font-size: 11px; font-weight: 600; color: var(--attention); letter-spacing: 0.02em; }
.delta { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--selection); color: var(--ink); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
/* The hidden attribute wins over a component's display, so a script can hide
   a button (Show all storefronts, once they are all shown) by setting it. */
[hidden] { display: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--on-accent);
  font: 600 17px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(219, 15, 117, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(0.96); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-quiet {
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset;
}
.btn-quiet:hover { box-shadow: 0 0 0 1px var(--ink2) inset; filter: none; }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.site-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.site-nav a { color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a.btn, .site-nav a.btn:hover { color: var(--on-accent); }
@media (max-width: 820px) { .site-nav .hide-sm { display: none; } }
@media (max-width: 520px) { .site-nav { gap: 16px; } .site-nav a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero { text-align: center; }
/* The stage holds the halo: the content box is the clearing, the stage's
   padding leaves room for the ring on every side. */
.hero-stage { position: relative; isolation: isolate; padding: 64px 0 150px; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 32px 32px 28px; max-width: 860px; margin: 0 auto; }
@media (max-width: 640px) { .hero-stage { padding: 32px 0 88px; } .hero-content { padding: 20px var(--gutter); gap: 18px; } .hero-icon { width: 84px; height: 84px; border-radius: 19px; } }
.hero-icon { width: 104px; height: 104px; border-radius: 23px; box-shadow: 0 10px 30px rgba(255, 64, 143, 0.35); }
.hero .lede { max-width: 680px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero-note { font-size: 14px; color: var(--ink2); }
.hero-note span + span::before { content: "\00B7"; margin: 0 8px; }
.hero-shot { margin: -64px auto 0; max-width: 1120px; padding: 0 var(--gutter); position: relative; }

/* Launch state: one attribute on <html> flips the page from "notify me" to the badge. */
html[data-launch="soon"] .when-live { display: none !important; }
html[data-launch="live"] .when-soon { display: none !important; }

.notify { display: flex; gap: 8px; width: min(440px, 100%); padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow); }
.notify input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: 16px var(--font); padding: 0 14px; min-height: 44px; outline: none;
}
.notify input::placeholder { color: var(--ink2); }
.notify .btn { min-height: 44px; flex: none; }
.notify:focus-within { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 520px) {
  .notify { flex-direction: column; border-radius: 22px; padding: 8px; }
  .notify input[type="email"] { text-align: center; }
  .notify .btn { width: 100%; }
}
.badge img { height: 54px; width: auto; }

/* ---------- Product window ---------- */
.window { border-radius: 14px; box-shadow: var(--shadow-window); overflow: hidden; background: var(--surface); }
.window img { width: 100%; }
.window video { display: block; width: 100%; height: auto; }
.video-window { position: relative; }
.video-toggle { position: absolute; right: 12px; bottom: 12px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: #FFFFFF; background: rgba(22, 22, 26, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); cursor: pointer; }
.video-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Sections ---------- */
section { padding: 120px 0 0; }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
@media (max-width: 640px) { section { padding-top: 84px; } .section-head { margin-bottom: 32px; } }

/* Charcoal card: the app's SummaryCard. */
.card {
  background: var(--card); color: var(--card-ink); border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px var(--card-rim) inset; padding: 28px;
}
.card .meta, .card .small, .card .eyebrow { color: var(--card-ink2); }
.card .cc { color: var(--card-ink2); border-color: var(--card-line); }
.card .delta { background: var(--card-raised); color: var(--card-ink); }
.card a { color: var(--accent-on-card); }

/* Surface panel: grouped rows. */
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; padding: 28px; }

/* The comparison table inside a card. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; }
table.data caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.card table.data caption { color: var(--card-ink2); }
table.data th, table.data td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.card table.data th, .card table.data td { border-bottom-color: var(--card-line); }
table.data thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); border-bottom-width: 1px; }
.card table.data thead th { color: var(--card-ink2); }
table.data tbody th { font-weight: 600; }
table.data .num { text-align: right; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num.strong { font-size: 17px; }
@media (max-width: 640px) {
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: 11px 5px; }
  table.data thead th { font-size: 11px; letter-spacing: 0.04em; }
  table.data .cc { display: none; }
  table.data td.num.strong { font-size: 15px; }
  .card { padding: 22px 18px; }
}

/* Problem section: figure + the table */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.split > *, .feature > *, .plans > *, .calc-controls > *, .keyflow > * { min-width: 0; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.stat { background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line) inset; padding: 18px 20px; }
.stat b { display: block; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 6px; }
@media (max-width: 520px) { .stat-row { grid-template-columns: 1fr; } }
.stat span { font-size: 14px; color: var(--ink2); }
.source { font-size: 13px; color: var(--ink2); margin-top: 14px; }
.center-text { text-align: center; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; padding: 24px; display: grid; gap: 10px; align-content: start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--selection); color: var(--ink); font-weight: 700; font-size: 15px;
}
.step p { color: var(--ink2); font-size: 15px; }

/* Feature with a picture */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 960px) { .feature { grid-template-columns: 1fr; gap: 32px; } .feature.flip > :first-child { order: 0; } }
.feature-copy { display: grid; gap: 18px; }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--accent-text); margin-top: 2px; }
.checks b { display: block; font-weight: 650; }
.checks span { color: var(--ink2); font-size: 15px; }
.sheet-shot { max-width: 520px; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(22, 22, 26, 0.22)); }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.calc-controls { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: end; }
@media (max-width: 760px) { .calc-controls { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 8px; }
.field label, .field .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.price-input { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.price-input:focus-within { box-shadow: 0 0 0 2px var(--accent) inset; }
.price-input span { color: var(--ink2); font-weight: 600; }
.price-input input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); font: 650 24px var(--font); letter-spacing: -0.02em; outline: none; font-variant-numeric: tabular-nums; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.segmented button {
  flex: 1 1 auto; min-height: 42px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent;
  color: var(--ink); font: 600 15px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.segmented button .tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--selection); color: var(--ink2); }
.segmented button[aria-pressed="true"] .tag { background: rgba(255, 255, 255, 0.2); color: #fff; }
.calc-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.calc-scope { margin: 0; font-size: 14px; color: var(--ink2); }
.chip {
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink); font: 500 14px var(--font); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.search { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink); font: 15px var(--font); width: min(260px, 100%); }
.search:focus { outline: none; box-shadow: 0 0 0 2px var(--accent) inset; }
.calc-table { background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; padding: 8px 20px; }
.calc-table table.data tbody tr { cursor: pointer; }
.calc-table table.data tbody tr:hover { background: var(--selection); }
.calc-table table.data tbody tr[aria-expanded="true"] { background: var(--selection); }
.calc-why td { padding: 4px 10px 18px !important; cursor: default; }
.calc-why ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink2); font-size: 15px; }
.calc-more { display: flex; justify-content: center; padding: 14px 0 6px; }
.calc-note { font-size: 13px; color: var(--ink2); }
noscript .panel { margin-top: 12px; }

/* Safety grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; padding: 24px; display: grid; gap: 10px; align-content: start; }
.tile svg { width: 26px; height: 26px; color: var(--accent-text); }
.tile p { color: var(--ink2); font-size: 15px; }
.wide-shot { margin-top: 40px; }

/* Key diagram */
.keyflow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.keyflow .node { background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset; padding: 22px; display: grid; gap: 6px; text-align: center; justify-items: center; }
.keyflow .node svg { width: 34px; height: 34px; }
.keyflow .wire { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.keyflow .wire span { display: block; width: 120px; height: 2px; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); border-radius: 2px; }
.keyflow .absent { grid-column: 1 / -1; text-align: center; font-size: 14px; color: var(--ink2); }
@media (max-width: 640px) { .keyflow { grid-template-columns: 1fr; } .keyflow .wire span { width: 2px; height: 40px; background: linear-gradient(180deg, var(--g1), var(--g2), var(--g3)); } }

/* Sources */
.sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .sources { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sources { grid-template-columns: 1fr; } }
.source-card { display: grid; gap: 8px; align-content: start; }
.source-card .plan { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--card-raised); color: var(--card-ink2); }
.source-card b { font-size: 18px; }
.coverage { display: block; width: 100%; height: 6px; margin-top: 4px; }
.coverage .track { fill: var(--card-raised); }
.coverage .fill { fill: var(--accent-on-card); }

/* Comparison */
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th:nth-child(2) { color: var(--ink); }
.compare td:nth-child(2) { background: rgba(219, 15, 117, 0.05); }
.yes, .no, .part { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.yes { color: var(--positive); }
.no { color: var(--ink2); font-weight: 500; }
.part { color: var(--attention); }
.yes svg, .no svg, .part svg { width: 18px; height: 18px; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: stretch; max-width: 940px; margin: 0 auto; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }
.plan { display: grid; gap: 18px; align-content: start; padding: 32px; }
.plan h3 { font-size: 24px; }
.plan .price { font-size: 48px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink2); margin-left: 6px; }
.card.plan .price small { color: var(--card-ink2); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; }
.plan li svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 1px; }
.card.plan li svg { color: var(--accent-on-card); }
.billing { display: flex; gap: 4px; padding: 4px; margin-top: 8px; border-radius: 12px; background: var(--card-raised); }
.billing label { position: relative; flex: 1 1 0; min-width: 0; text-align: center; min-height: 36px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--card-ink2); cursor: pointer; }
.billing input { position: absolute; opacity: 0; pointer-events: none; }
.billing label:has(input:checked) { background: var(--card-ink); color: var(--card); }
.billing label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The pill sits on the segment's top edge, out of the flow, so the three
   segments stay the same width with or without it. */
.best-value { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); pointer-events: none; }
/* All three prices share one grid cell and only the chosen one is visible,
   so the cell is always as tall as the tallest and the card never changes
   size when the billing changes. */
.plan-prices { display: grid; }
.plan-price { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; visibility: hidden; }
.plan:has(#bill-annual:checked) .plan-price.annual,
.plan:has(#bill-monthly:checked) .plan-price.monthly,
.plan:has(#bill-lifetime:checked) .plan-price.lifetime { visibility: visible; }
html[data-promo="over"] .launch-promo { display: none; }
.plan .note { font-size: 13px; color: var(--ink2); }
.card.plan .note { color: var(--card-ink2); }
.launch-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(254, 118, 166, 0.18); color: var(--accent-on-card); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.faq details { background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line) inset; padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; position: relative; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 20px; color: var(--ink2); display: grid; gap: 10px; }

/* Closing band */
.closing { position: relative; isolation: isolate; text-align: center; padding: 140px 0 150px; margin-top: 40px; overflow: hidden; }
.closing .lede { margin-top: 18px; }
.closing-field { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; width: 100%; z-index: -1; pointer-events: none; }
.closing .hero-actions { margin-top: 28px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 56px; font-size: 14px; color: var(--ink2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 13px; color: var(--ink); margin-bottom: 12px; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--ink2); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-grid .brand { color: var(--ink); margin-bottom: 12px; }
.legal-line { margin-top: 36px; display: grid; gap: 8px; font-size: 12px; line-height: 1.6; }

/* ---------- Document pages (privacy, terms, support, guide) ---------- */
.doc { padding-top: 64px; padding-bottom: 40px; }
.doc header { display: grid; gap: 14px; margin-bottom: 40px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1.04; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; margin: 52px 0 14px; scroll-margin-top: 90px; }
.doc h3 { font-size: 19px; margin: 28px 0 10px; }
.doc p, .doc li { color: var(--ink); }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; }
.doc .answer { font-size: 19px; line-height: 1.5; padding: 18px 22px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; margin: 0 0 18px; }
.doc .tldr { border-left: 4px solid var(--accent); }
.doc .table-wrap { margin: 20px 0; }
.doc figure { margin: 28px 0; }
.doc figcaption { font-size: 13px; color: var(--ink2); margin-top: 10px; }
.doc .note { padding: 16px 20px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--attention) calc(var(--soft) * 100%), transparent); color: var(--ink); }
.doc code, code { font-family: var(--mono); font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--selection); }
.doc .byline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink2); }
.doc .toc { padding: 20px 24px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.doc .toc ol { margin: 8px 0 0; gap: 6px; }
.doc .toc a { color: var(--ink); text-decoration: none; }
.doc .toc a:hover { color: var(--accent-text); }
.doc dl { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 12px 24px; margin: 16px 0; }
@media (max-width: 640px) { .doc dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .doc dd { margin-bottom: 12px; } }
.doc dt { font-weight: 650; }
.doc dd { margin: 0; color: var(--ink2); }
.doc .cta-box { margin: 48px 0 0; padding: 28px; border-radius: var(--radius); display: grid; gap: 14px; }
.posts { display: grid; gap: 16px; }
.post-card { display: grid; gap: 10px; padding: 28px; text-decoration: none; color: var(--ink); }
.post-card:hover h2 { color: var(--accent-text); }
.post-card h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }