/* ============================================================
   Stay Unseen — brand.css
   Re-skins the constellation layout with Stay Unseen's own palette,
   taken from the live site's theme.css:

     dark  · surfaces #0b0d12 → #232935, ink #f1f3f7, slate #5c6c8d,
             one accent blue #499ef3 (mark's download badge)
     light · surfaces #f5f6f8 → #dbe0ea, ink #0f131a, blue #2166aa

   Loaded AFTER design.css and app.css. Everything is driven by the
   --su-* tokens below, so both themes work from one rule set.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  color-scheme: dark;

  /* remap the layout's own tokens */
  --bg: #0b0d12;
  --bg-warm: #0f1218;
  --ink: #f1f3f7;
  --ink-soft: #9ba3b0;
  --cream: #151922;
  --cream-2: #1c212b;
  --cream-line: rgb(148 163 184 / .18);
  --cream-deep: #2a3140;
  --yellow: #499ef3;
  --yellow-light: #6cb0f7;
  --yellow-deep: #2f80d2;
  --yellow-line: #2571bb;
  --mint: #16302b; --mint-light: #1c3b34; --mint-deep: #45b183;
  --purple: #212a40; --purple-light: #28324c; --purple-deep: #6d84ab;
  --dot-color: #7f8895;
  --line-color: rgb(148 163 184 / .42);

  --su-panel: #151922;
  --su-panel-2: #1c212b;
  --su-panel-3: #232935;
  --su-line: rgb(148 163 184 / .18);
  --su-line-soft: rgb(148 163 184 / .1);
  --su-ink: #f1f3f7;
  --su-muted: #9ba3b0;
  --su-glass: rgba(21, 25, 34, .74);
  --su-glass-2: rgba(28, 33, 43, .62);
  --su-hi: rgba(255, 255, 255, .07);
  --su-hi-strong: rgba(255, 255, 255, .14);
  --su-accent: #499ef3;
  --su-accent-2: #2f80d2;
  --su-accent-soft: rgba(73, 158, 243, .16);
  --su-on-accent: #06121f;
  --su-shadow: 0 18px 40px -20px rgba(0, 0, 0, .65);
  --su-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --su-good: #45b183;
  --su-danger: #d4797f;
}

/* ---------- 2. page shell ---------- */
body { background: var(--bg); color: var(--ink); }
body::before { opacity: .05; mix-blend-mode: overlay; }
.top-rule { background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%); }
.ambient-1 { background: radial-gradient(circle, rgba(73, 158, 243, .15) 0%, transparent 62%); }
.ambient-2 { background: radial-gradient(circle, rgba(92, 108, 141, .18) 0%, transparent 62%); }
:focus-visible { outline-color: var(--su-accent); }

/* ---------- 3. navigation ---------- */
.nav-pill {
  background: linear-gradient(180deg, var(--su-panel-3) 0%, var(--su-panel) 100%);
  box-shadow: inset 0 1px 0 var(--su-hi), 0 2px 0 rgba(0, 0, 0, .35), 0 10px 26px -10px rgba(0, 0, 0, .6);
}
.logo { color: var(--su-ink); }
.brand-badge { background: var(--su-accent); color: var(--su-on-accent); }
.header-nav a { color: var(--su-muted); }
.header-nav a:hover { color: var(--su-ink); background: var(--su-hi); }
.book-cta {
  border-color: var(--su-accent-2);
  background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%);
  color: var(--su-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px -2px rgba(0, 0, 0, .45);
}
.menu-btn { background: var(--su-hi); border-color: var(--su-line); }
.mb-lines i { background: var(--su-ink); }
.logo-mark img, .f-cube img { display: block; border-radius: 7px; }
.logo .logo-mark { width: 24px; height: 24px; }
.f-cube img { width: 22px; height: 22px; }
.network-hub img { border-radius: 18px; }

/* ---------- 4. hero ---------- */
.hero {
  background:
    radial-gradient(58% 70% at 78% 50%, var(--su-accent-soft) 0%, rgba(73, 158, 243, 0) 70%),
    linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .6), var(--su-inset);
}
.glass {
  background: var(--su-glass);
  border-color: var(--su-line);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.glass--tab { color: var(--su-ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5), inset 0 1px 0 var(--su-hi); }
.glass--disc { background: radial-gradient(circle at 35% 30%, var(--su-panel-3), var(--su-panel)); }
.hero-eyebrow { color: var(--su-muted); }
.px-on .hero-eyebrow .px { --px-fill: var(--su-muted); }
.hero-desc { color: var(--su-muted); }
.hero-trust li { color: var(--su-muted); border-right-color: var(--su-line); }
.hero-trust svg { color: var(--su-ink); }
.demo-btn {
  background: var(--su-panel-2);
  border-color: var(--su-line);
  color: var(--su-ink);
  box-shadow: var(--su-inset), 0 14px 30px -18px rgba(0, 0, 0, .5);
}
.demo-play { background: var(--su-ink); color: var(--bg); }
.hv-glow { background: radial-gradient(circle, rgba(73, 158, 243, .55) 0%, rgba(73, 158, 243, .22) 38%, rgba(73, 158, 243, 0) 70%); }
.hv-dots { background-image: radial-gradient(circle, var(--su-line-soft) 1.6px, transparent 2px); }
.hv-dots { background-image: radial-gradient(circle, rgba(148, 163, 184, .35) 1.6px, transparent 2px); }
.glass--tab .live-dot, .metrics-live .live-dot, .mm-status .live-dot { background: var(--su-good); }
.live-dot { background: var(--su-good); box-shadow: 0 0 0 4px rgba(69, 177, 131, .18); }

/* title accent: blue pixels with an ink offset */
.px-on .title-hl .px { --px-fill: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%); }
.px-on .px-shadow { filter: drop-shadow(0.035em 0.045em 0 rgba(0, 0, 0, .45)); }
.title-hl::before { background: linear-gradient(90deg, rgba(73, 158, 243, .4), rgba(73, 158, 243, .16)); }
.px-on .accent-line .title-hl::before { background: linear-gradient(90deg, rgba(73, 158, 243, .34), rgba(73, 158, 243, .12)); }
.px-on .final-cta-h2 .px { --px-fill: var(--su-accent); }

/* ---------- 5. buttons ---------- */
.btn { color: var(--su-on-accent); background-image: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%); }
.btn:hover { background-color: var(--su-accent); filter: brightness(1.12); }
.btn:active { filter: brightness(.94); }
.btn.btn-lg {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--su-accent-2), 0 18px 30px -12px rgba(0, 0, 0, .55);
}
.btn-svg { stroke: rgba(0, 0, 0, .55); fill: rgba(255, 255, 255, .5); }
.btn.btn-lg .btn-svg { stroke: var(--su-on-accent); fill: none; }
.btn:hover .btn-svg { stroke: rgba(0, 0, 0, .7); fill: var(--su-accent); }

/* ---------- 6. hero demo panel ---------- */
.chat {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: 0 0 0 8px var(--su-hi), var(--su-inset), 0 30px 70px -24px rgba(0, 0, 0, .65);
}
.chat-head { background: linear-gradient(180deg, var(--su-panel-3) 0%, var(--su-panel) 100%); }
.chat-avatar { background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%); color: var(--su-on-accent); }
.chat-tag { background: var(--su-panel-3); color: var(--su-ink); }
.chat-status { color: var(--su-muted); }
.chat-status::before { background: var(--su-good); box-shadow: 0 0 0 3px rgba(69, 177, 131, .18); }
.from-ai .bubble { background: var(--su-panel-3); color: var(--su-ink); box-shadow: var(--su-inset); }
.from-you .bubble {
  background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%);
  color: var(--su-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.stamp { color: var(--su-muted); }
.typing i { background: var(--su-muted); }
.chip { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); box-shadow: var(--su-inset); }
.chip:hover { background: var(--su-accent); color: var(--su-on-accent); }
.composer { background: var(--su-panel-3); border-color: var(--su-line); }
.composer textarea { color: var(--su-ink); }
.composer textarea::placeholder { color: var(--su-muted); }
.send {
  border-color: var(--su-accent-2);
  background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%);
  color: var(--su-on-accent);
}
.sys-note {
  background: rgba(69, 177, 131, .14);
  border-color: rgba(69, 177, 131, .4);
  color: var(--su-ink);
}
.sys-note i { background: var(--su-good); }
.sys-note.off { background: var(--su-hi); border-color: var(--su-line); color: var(--su-muted); }
.sys-note.off i { background: var(--su-muted); }
.chat-controls { border-top-color: var(--su-line); }
.ctrl-chip { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); box-shadow: var(--su-inset); }
.ctrl-chip::before { background: var(--su-muted); }
.ctrl-chip[aria-pressed="true"] { background: rgba(69, 177, 131, .16); border-color: rgba(69, 177, 131, .45); }
.ctrl-chip[aria-pressed="true"]::before { background: var(--su-good); box-shadow: 0 0 0 3px rgba(69, 177, 131, .18); }
.chat-statusbar { background: linear-gradient(180deg, var(--su-panel-3) 0%, var(--su-panel) 100%); }
.chat-statusbar b { color: var(--su-accent); }

/* floating cards */
.fl-inner {
  background: linear-gradient(180deg, var(--su-glass), var(--su-glass-2));
  border-color: var(--su-line);
  box-shadow: var(--su-inset), 0 22px 40px -20px rgba(0, 0, 0, .6);
}
.fl-label { color: var(--su-muted); }
.fl-big { color: var(--su-ink); }
.fl-up { color: var(--su-good); background: rgba(69, 177, 131, .14); }
.fl-spark path { stroke: var(--su-accent); }
.fl-spark circle { fill: var(--su-accent); stroke: var(--su-panel); }
.fl-title { color: var(--su-ink); }
.fl-list li { color: var(--su-ink); }
.fl-conf { color: var(--su-good); }

/* ---------- 7. marquee ---------- */
.logos-label { color: var(--su-muted); }
.wordmark { color: var(--su-muted); }

/* ---------- 8. metrics ---------- */
.metric {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: var(--su-inset), var(--su-shadow);
}
.metric:hover { box-shadow: var(--su-inset), 0 28px 50px -24px rgba(0, 0, 0, .7); }
.m-dark { background: linear-gradient(170deg, var(--su-panel-3) 0%, #0a0c11 100%); border-color: #000; }
.m-yellow {
  background: linear-gradient(170deg, var(--su-accent) 0%, var(--su-accent-2) 100%);
  border-color: var(--su-accent-2);
}
.m-yellow .metric-label .px { --px-fill: rgba(0, 0, 0, .62); }
.m-yellow .stat-num { color: #06121f; }
.m-yellow .stat-num .accent { color: #06121f; }
.m-yellow .m-foot { color: rgba(0, 0, 0, .66); border-color: rgba(0, 0, 0, .18); }
.m-matrix i { background: rgba(0, 0, 0, .14); }
.m-matrix i.on { background: #06121f; }
@keyframes blink { 50% { background: rgba(0, 0, 0, .14); } }
.m-foot { border-top-color: var(--su-line); color: var(--su-muted); }
.g-track { stroke: var(--su-panel-3); }
.g-fill { stroke: var(--su-accent); }
.g-ticks path { stroke: var(--su-line); }
.g-needle { stroke: var(--su-ink); }
.g-hub { fill: var(--su-ink); stroke: var(--su-panel); }
.race-bar { background: var(--su-panel-3); border-color: var(--su-line); }
.race-bar.slow i { background: repeating-linear-gradient(135deg, var(--su-panel-3) 0 6px, var(--su-panel) 6px 12px); }
.race-bar.fast i { background: var(--su-accent); box-shadow: 0 0 10px rgba(73, 158, 243, .7); }
.race-row b { color: var(--su-ink); }
.metrics-live { color: var(--su-muted); background: var(--su-glass-2); border-color: var(--su-line); }
.section-eyebrow { color: var(--su-muted); }
.section-eyebrow::before { background: var(--su-ink); }
.px-on .section-eyebrow .px { --px-fill: var(--su-muted); }
.features-meta { color: var(--su-muted); }

/* ---------- 9. feature cards ---------- */
.feature-card.fc-mint { background: linear-gradient(165deg, var(--mint-light) 0%, var(--mint) 100%); box-shadow: var(--su-inset), 0 24px 50px -28px rgba(0, 0, 0, .6); }
.feature-card.fc-yellow { background: linear-gradient(165deg, var(--su-accent) 0%, var(--su-accent-2) 100%); box-shadow: var(--su-inset), 0 24px 50px -28px rgba(0, 0, 0, .6); }
.feature-card.fc-purple { background: linear-gradient(165deg, var(--purple-light) 0%, var(--purple) 100%); box-shadow: var(--su-inset), 0 24px 50px -28px rgba(0, 0, 0, .6); }
.feature-card h3 { color: var(--su-ink); }
.feature-card p { color: var(--su-muted); opacity: 1; }
.feature-card.fc-yellow h3 { color: #06121f; }
.feature-card.fc-yellow p { color: rgba(0, 0, 0, .68); }
.fc-step { -webkit-text-stroke: 1.5px var(--su-line); color: transparent; }
.feature-card.fc-yellow .fc-step { -webkit-text-stroke-color: rgba(0, 0, 0, .45); }
.fc-chip { background: var(--su-hi); border-color: var(--su-line); box-shadow: var(--su-inset); }
.fc-chip .px { --px-fill: var(--su-ink); }
.feature-card.fc-yellow .fc-chip { background: rgba(255, 255, 255, .22); border-color: rgba(0, 0, 0, .16); }
.feature-card.fc-yellow .fc-chip .px { --px-fill: #06121f; }
.fc-visual { background: var(--su-glass-2); border-color: var(--su-line); box-shadow: var(--su-inset); }
.feature-card.fc-yellow .fc-visual { background: rgba(255, 255, 255, .16); border-color: rgba(0, 0, 0, .12); }
.ask-input { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.feature-card.fc-yellow .ask-input { background: rgba(255, 255, 255, .3); border-color: rgba(0, 0, 0, .1); color: #06121f; }
.ask-answer { background: var(--su-panel-3); color: var(--su-ink); }
.feature-card.fc-yellow .ask-answer { background: rgba(255, 255, 255, .3); color: #06121f; }
.ask-answer em { color: var(--su-danger); }
.ask-meta { color: var(--su-muted); }
.feature-card.fc-yellow .ask-meta { color: rgba(0, 0, 0, .5); }
.leak-head b { background: var(--su-panel-3); color: var(--su-danger); }
.feature-card.fc-yellow .leak-head b { background: rgba(255, 255, 255, .3); }
.lk-area { fill: var(--su-hi); }
.lk-line { stroke: var(--su-ink); }
.feature-card.fc-yellow .lk-line { stroke: #06121f; }
.lk-deploy { stroke: var(--su-line); }
.lk-dot { fill: var(--su-danger); stroke: var(--su-panel); }
.leak-tag { background: var(--su-glass); color: var(--su-muted); }
.feature-card.fc-yellow .leak-tag { background: rgba(255, 255, 255, .3); color: rgba(0, 0, 0, .6); }
.ab-key { background: var(--su-panel-3); color: var(--su-ink); }
.ab-bar { background: var(--su-hi); }
.ab-bar i { background: var(--su-line); }
.ab-row.win .ab-bar i { background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); }
.ab-row.win .ab-key { background: var(--su-accent); color: var(--su-on-accent); }
.ab-row b { color: var(--su-ink); }
.ab-foot { color: var(--su-muted); }
.ab-conf { color: var(--su-good); }
.ab-conf i { background: var(--su-good); }
.ab-badge { color: var(--su-on-accent); }

/* ---------- 10. bento ---------- */
.tile {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border-color: var(--su-line);
  box-shadow: var(--su-inset), var(--su-shadow);
}
.tile h3 { color: var(--su-ink); }
.t-yellow { background: linear-gradient(170deg, var(--su-accent) 0%, var(--su-accent-2) 100%); border-color: var(--su-accent-2); }
.t-yellow h3 { color: #06121f; }
.t-yellow p, .t-yellow .tile-kicker { color: rgba(0, 0, 0, .66); }
.t-yellow .big-num { color: #06121f; }
.t-yellow .meter-legend { color: rgba(0, 0, 0, .7); }
.t-yellow .meter-track { background: rgba(0, 0, 0, .18); }
.t-yellow .meter-track i { background: #06121f; }
.t-dark { background: linear-gradient(170deg, var(--su-panel-3) 0%, #0a0c11 100%); border-color: #000; }
.story-row { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.story-row span small { color: var(--su-muted); }
.story-row .ok { color: var(--su-good); }
.story-row .muted { color: var(--su-muted); }
.toast { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.toast small { color: var(--su-muted); }
.toast-dot { background: var(--su-accent); box-shadow: 0 0 0 4px var(--su-accent-soft); }
.meter-track { background: rgba(148, 163, 184, .18); }
.meter-track i { background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); }
.meter-legend { color: var(--su-muted); }
.int { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.int i { background: var(--su-good); }
.int.more { background: var(--su-accent); color: var(--su-on-accent); border-color: var(--su-accent-2); }
.platform-chip { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.funnel-bar { background: var(--su-panel-3); border-color: var(--su-line); }
.funnel-bar i { background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); }
.funnel-note { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.queue-row { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.queue-row .q-ico { background: var(--su-accent); color: var(--su-on-accent); }

/* ---------- downloads hero + follow status visuals ---------- */
.dl-hero { isolation: isolate; }
.dl-hero::after {
  content: ""; position: absolute; top: -60px; right: -40px; width: 240px; height: 240px;
  background: radial-gradient(closest-side, var(--su-accent-soft), transparent 72%);
  pointer-events: none; z-index: -1;
}
.dl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dl-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 16px 15px; border-radius: 18px;
  background: var(--su-panel-3); border: 1px solid var(--su-line);
}
.dl-card.is-tiktok { border-color: var(--su-accent-2); }
.dl-card.is-tiktok::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 85% at 100% 0%, var(--su-accent-soft), transparent 62%);
}
.dl-ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--su-panel); border: 1px solid var(--su-line);
}
.dl-ico svg { width: 18px; height: 18px; display: block; }
.dl-card.is-tiktok .dl-ico { background: #f2f4f8; border-color: #e3e7ef; }
.dl-card b { font-size: 14px; font-weight: 650; color: var(--su-ink); letter-spacing: -0.01em; }
.dl-card small { font: 9.5px/1.5 "JetBrains Mono", monospace; color: var(--su-muted); }
.dl-save {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  font: 650 11.5px/1 "Funnel Display", system-ui, sans-serif;
  color: var(--su-on-accent); background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2));
  border: 1px solid var(--su-accent-2); box-shadow: 0 8px 16px -8px var(--su-accent-2);
}
.dl-save svg { width: 14px; height: 14px; }
.dl-tag {
  margin-top: auto; flex: none; white-space: nowrap;
  font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 11px; border-radius: 999px;
  color: var(--su-on-accent); background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2));
  border: 1px solid var(--su-accent-2); box-shadow: 0 6px 14px -6px var(--su-accent-2);
}
@media (max-width: 760px) { .dl-cards { grid-template-columns: 1fr; } }
.follow-list { display: grid; gap: 9px; }
.follow-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 12px;
  background: var(--su-panel-3); border: 1px solid var(--su-line);
}
.f-ava {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px/1 "Funnel Display", system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #5c6b86, #2c3446);
}
.follow-row.is-yes .f-ava { background: linear-gradient(135deg, #3fbf82, #1e7d54); }
.follow-row.is-no .f-ava { background: linear-gradient(135deg, #6b6f7a, #3a3f4a); }
.follow-row.is-self .f-ava { background: linear-gradient(135deg, var(--su-accent), var(--su-accent-2)); color: var(--su-on-accent); }
.f-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-name b { font-size: 12.5px; font-weight: 600; color: var(--su-ink); }
.f-name small { font: 8.5px/1.3 "JetBrains Mono", monospace; color: var(--su-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.f-badge {
  margin-left: auto; flex: none; white-space: nowrap;
  font: 700 9px/1 "JetBrains Mono", monospace; letter-spacing: 0.02em;
  padding: 7px 9px; border-radius: 999px; border: 1px solid transparent;
}
.follow-row.is-yes .f-badge { color: #12632f; background: #d3f7de; border-color: #93e0ac; }
.follow-row.is-no .f-badge { color: #8c1c1c; background: #fbdcdf; border-color: #efa8ac; }
.follow-row.is-self .f-badge { color: var(--su-muted); background: var(--su-panel); border-color: var(--su-line); }
.code { color: var(--su-ink); }

/* ---------- 11. quote, voices ---------- */
.quote-mark { color: var(--su-accent); }
.quote-text { color: var(--su-ink); }
.quote-author { color: var(--su-muted); }
.voice {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: var(--su-inset), var(--su-shadow);
}
.voice blockquote { color: var(--su-ink); }
.voice-metric b { color: var(--su-ink); }
.voice-metric span { color: var(--su-muted); }
.voice-who { border-top-color: var(--su-line); }
.voice-who small { color: var(--su-muted); }
.voice-av { color: var(--su-on-accent); }

/* ---------- 12. pricing ---------- */
.plan {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: var(--su-inset), var(--su-shadow);
}
.plan.featured { background: linear-gradient(180deg, var(--su-panel-3) 0%, var(--su-panel) 100%); border-color: var(--su-accent-2); }
.plan-name { color: var(--su-muted); }
.plan-desc { color: var(--su-muted); }
.plan.featured .plan-name, .plan.featured .plan-desc, .plan.featured .per { color: var(--su-muted); }
.price .amt { color: var(--su-ink); }
.plan ul { color: var(--su-ink); }
.plan li::before { background: var(--su-accent); box-shadow: none; }
.plan-cta { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.plan.featured .plan-cta { background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); border-color: var(--su-accent-2); color: var(--su-on-accent); }
.plan-badge { background: var(--su-accent); color: var(--su-on-accent); }
.pricing-foot { color: var(--su-muted); }
.billing button { color: var(--su-muted); background: var(--su-panel-3); border-color: var(--su-line); }
.billing button[aria-pressed="true"] { background: var(--su-accent); color: var(--su-on-accent); }

/* ---------- 13. faq ---------- */
.faq-item {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border: 1px solid var(--su-line);
  box-shadow: var(--su-inset);
}
.faq-item summary { color: var(--su-ink); }
.faq-plus { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.faq-item[open] .faq-plus { background: var(--su-accent); border-color: var(--su-accent-2); color: var(--su-on-accent); }
.faq-item p { color: var(--su-muted); }
.faq-item p a, .faq-side a, .doc-section a { color: var(--su-ink); }

/* ---------- 14. finale / footer ---------- */
.final-cta.finale { background: linear-gradient(180deg, var(--su-panel-3) 0%, #0a0c11 55%, #08090c 100%); }
.final-cta-card { background: linear-gradient(165deg, var(--su-panel-3) 0%, #0a0c11 100%); }
.final-cta-h2 .accent { color: var(--su-accent); }
.finale-kicker { color: var(--su-muted); }
.cta-form { background: rgba(255, 255, 255, .06); border-color: var(--su-line); }
.cta-note { color: var(--su-muted); }
.footer-col h4 { color: var(--su-muted); }
.footer-col h4 .px { --px-fill: var(--su-muted); }
.footer-col a { color: var(--su-ink); }
.footer-brand p { color: var(--su-muted); }
.f-status { color: var(--su-muted); }
.footer-bottom { color: var(--su-muted); border-top-color: var(--su-line); }
.f-badges span { border-color: var(--su-line); }
.footer-bottom { align-items: center; row-gap: 4px; }
.footer-legal { flex: 1 1 100%; text-align: center; margin-top: 0; line-height: 1.7; }
.footer-mark .px { --px-fill: rgba(73, 158, 243, .3); }
html:not(.px-on) .footer-mark { color: rgba(73, 158, 243, .28); }
.site-footer { border-top-color: var(--su-line); }

/* ---------- 15. mobile menu ---------- */
.mobile-menu { background: linear-gradient(180deg, var(--su-panel-3) 0%, #0a0c11 100%); }
.mm-primary { background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); color: var(--su-on-accent); }
.mm-secondary .demo-play { background: var(--su-ink); color: var(--bg); }
.mm-list a, .mm-label { color: var(--su-ink); }
.mm-sub { color: var(--su-muted); }
.mm-foot { color: var(--su-muted); }
.mm-foot a { color: var(--su-ink); text-decoration-color: var(--su-accent); }

/* ---------- 16. doc pages (app.css components) ---------- */
.doc-card {
  background: linear-gradient(180deg, var(--su-panel) 0%, var(--su-panel-2) 100%);
  border-color: var(--su-line);
  box-shadow: var(--su-inset), var(--su-shadow);
}
.doc-card h3 { color: var(--su-ink); }
.doc-card p { color: var(--su-muted); }
.doc-card .kicker { color: var(--su-muted); }
.doc-section p, .doc-section > h2, .doc-section > h3 { color: var(--su-ink); }
.doc-section p { color: var(--su-muted); }
.doc-lede { color: var(--su-muted); }
.doc-title { color: var(--su-ink); }
.doc-meta span { background: var(--su-glass-2); border-color: var(--su-line); color: var(--su-muted); }
.doc-list li { color: var(--su-muted); }
.doc-list li b { color: var(--su-ink); }
.doc-list li::before { background: var(--su-accent); box-shadow: none; }
.doc-note { background: var(--su-panel-2); border-color: var(--su-line); color: var(--su-muted); }
.doc-note strong { color: var(--su-ink); }
.doc-note .note-ico { background: var(--su-accent); color: var(--su-on-accent); box-shadow: none; }
.doc-table-wrap { background: var(--su-panel); border-color: var(--su-line); }
.doc-table th { background: var(--su-panel-2); color: var(--su-muted); border-bottom-color: var(--su-line); }
.doc-table td { border-bottom-color: var(--su-line); color: var(--su-ink); }
.doc-table .yes { color: var(--su-good); }
.doc-chips a { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-ink); }
.doc-chips a:hover { background: var(--su-accent); color: var(--su-on-accent); }
.release { border-left-color: var(--su-line); }
.release::before { background: var(--su-accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--su-accent-2); }
.release-ver { color: var(--su-ink); }
.release-date { color: var(--su-muted); }
.release-tag { background: var(--su-panel-3); color: var(--su-ink); }
.release-tag.free { background: var(--mint); color: var(--su-ink); }
.release-tag.pro { background: var(--su-accent); color: var(--su-on-accent); }
.release h3 { color: var(--su-ink); }
.release p { color: var(--su-muted); }
.mini-tag { background: var(--su-panel-3); border-color: var(--su-line); color: var(--su-muted); }
.mini-tag.pro { background: var(--su-accent); border-color: var(--su-accent-2); color: var(--su-on-accent); }
.legend-item { background: var(--su-glass-2); border-color: var(--su-line); }
.legend-item strong { color: var(--su-ink); }
.legend-item small { color: var(--su-muted); }
.mark.ok::before { background: var(--su-good); box-shadow: 0 0 0 3px rgba(69, 177, 131, .18); }
.mark.soon::before { background: var(--su-danger); box-shadow: 0 0 0 3px rgba(212, 121, 127, .18); }
.mark.wait::before { background: var(--su-muted); }
.err-wrap p { color: var(--su-muted); }
.err-wrap h1 { color: var(--su-ink); }
.err-code { color: var(--su-accent); -webkit-text-stroke: 0.03em var(--su-ink); text-shadow: 0.04em 0.05em 0 rgba(0, 0, 0, .45); }
.px-on .hero-eyebrow, .px-on .section-eyebrow { letter-spacing: 0; }

/* ---------- 17. corrections: the finale slab stays dark in both themes ---------- */
.final-cta.finale { background: linear-gradient(180deg, #171b24 0%, #0a0c11 55%, #08090c 100%); color: #fff; }
.final-cta-card { background: linear-gradient(165deg, #1c212b 0%, #0a0c11 100%); color: #fff; }
.finale .footer-col h4 { color: rgba(255, 255, 255, .55); }
.finale .footer-col h4 .px { --px-fill: rgba(255, 255, 255, .55); }
.finale .footer-col a { color: #fff; }
.finale .footer-brand p { color: rgba(255, 255, 255, .62); }
.finale .f-logo { color: #fff; }
.finale .f-status { color: rgba(255, 255, 255, .62); }
.finale .footer-bottom { color: rgba(255, 255, 255, .5); border-top-color: rgba(255, 255, 255, .1); }
.finale .f-badges span { border-color: rgba(255, 255, 255, .12); }
.finale .site-footer { border-top-color: rgba(255, 255, 255, .08); }
.finale .finale-rule i { background: rgba(255, 255, 255, .6); }
.footer-disclaimer {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  max-width: 640px;
}

/* ---------- 18. surfaces that stay dark in both themes ---------- */
.nav-pill { background: linear-gradient(180deg, #232935 0%, #151922 100%); }
.logo, .logo a { color: #fff; }
.header-nav a { color: rgba(255, 255, 255, .66); }
.header-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-pill .menu-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.nav-pill .mb-lines i { background: #fff; }
.nav-pill .brand-badge { color: #06121f; }

.chat-head { background: linear-gradient(180deg, #232935 0%, #151922 100%); color: #fff; }
.chat-statusbar { background: linear-gradient(180deg, #232935 0%, #151922 100%); color: #fff; }
.chat-statusbar b { color: var(--su-accent); }

.m-dark { background: linear-gradient(170deg, #232935 0%, #0a0c11 100%); border-color: #000; color: #fff; }
.m-dark .metric-label .px { --px-fill: var(--su-muted); }
.m-dark .stat-num, .m-dark .stat-num .accent { color: #f1f3f7; }
.m-dark .m-foot { color: #a9a9a2; border-color: rgba(255, 255, 255, .12); }

.t-dark { background: linear-gradient(170deg, #232935 0%, #0a0c11 100%); border-color: #000; color: #fff; }
.t-dark h3 { color: #fff; }
.t-dark p, .t-dark .tile-kicker { color: #a9a9a2; }
.t-dark .code { color: #f1f3f7; }
.t-dark .queue-row { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }

.mobile-menu { background: linear-gradient(180deg, #232935 0%, #0a0c11 100%); }
.mm-list a, .mm-label { color: #fff; }
.mm-sub { color: rgba(255, 255, 255, .45); }
.mm-foot { color: rgba(255, 255, 255, .5); }
.mm-foot a { color: #fff; }
.mm-secondary { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.mm-top .px { --px-fill: var(--su-accent); }
.mm-status { color: rgba(255, 255, 255, .6); }

/* ---------- 19. brand icon ---------- */
.logo-mark img, .f-cube img { display: block; border-radius: 7px; }
.logo .logo-mark { width: 24px; height: 24px; }
.f-cube img { width: 22px; height: 22px; }

/* ---------- 20. anchor jumps clear the fixed nav ---------- */
/* The root already reserves room for the fixed navigation. */
section[id], main[id] { scroll-margin-top: 16px; }

/* ============================================================
   21. defect fixes
   ============================================================ */

/* the switch pill must not inherit the row's flex:1 (it was stretching) */
.switch-row > span:not(.switch-pill) { flex: 1; min-width: 0; }

/* metric bars still carried the old yellow accent */
.m-bars i { background: rgba(148, 163, 184, .22); }
.m-bars i:nth-last-child(-n+4) { background: rgba(73, 158, 243, .5); }
.m-bars i:last-child { background: var(--su-accent); box-shadow: 0 0 14px rgba(73, 158, 243, .6); }

/* a 100% gauge needs the needle at the right-hand end, not straight up */
.metric.g-full .g-needle { transform: rotate(84deg); }
.metric.g-full.pre .g-needle { transform: rotate(-90deg); }

/* "Free" read as an error in red */
.ask-answer em { color: var(--su-good); }

/* the outlined step number was too faint on the tinted cards */
.feature-card .fc-step { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3); }
.feature-card.fc-yellow .fc-step { -webkit-text-stroke-color: rgba(0, 0, 0, .42); }

/* the config snippet overflowed its tile */
.code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.7; }

/* ---------- replacement instruments for the facts band ---------- */
.m-zero { display: grid; gap: 9px; align-self: stretch; width: 100%; }
.m-zero-bar { height: 14px; border-radius: 99px; background: rgba(0, 0, 0, .22); overflow: hidden; }
.m-zero-bar i { display: block; height: 100%; width: 0; }
.m-zero-legend {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
  color: rgba(0, 0, 0, .62);
}

.m-pay-wrap { display: grid; gap: 8px; align-self: stretch; width: 100%; }
.m-pay { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.m-pay i { height: 28px; border-radius: 5px; background: var(--su-panel-3); border: 1px solid var(--su-line); }
.m-pay i:first-child { background: var(--su-accent); border-color: var(--su-accent-2); box-shadow: 0 0 14px var(--su-accent-soft); }
.m-pay-legend {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--su-muted);
}

/* ---------- 22. scroll progress on the top rule ---------- */
.top-rule { background: var(--su-panel-3); overflow: hidden; }
.top-rule::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--su-accent-2) 0%, var(--su-accent) 100%);
  box-shadow: 0 0 14px var(--su-accent-soft);
  transition: width .12s linear;
}

/* ---------- 23. v2 refinements: retain the constellation design ---------- */
html { scroll-padding-top: 112px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--su-accent); outline-offset: 5px; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hero, .stats-bar, .features, .section { max-width: 1600px; margin-inline: auto; }
.hero { width: calc(100% - 64px); }
.hero-desc { line-height: 1.65; max-width: 480px; }
.accent-line .title-hl { background-image: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)); color: var(--su-accent); }
.hero .float-card { pointer-events: none; }
/* The chat card stops growing at 500px while .hero-visual keeps widening, so a
   percentage offset kept drifting the cards away from the chat on large screens
   (~57px of dead space at 1664px). Position them off the chat card's own left
   edge instead. offset = 0.5*W - chatW/2 + marginLeft*W, which with the chat at
   500px and margin-left 12% is 0.56*W - 250px; subtract 162px of tuck so the
   cards sit against the chat's edge. */
.hero .fc-rate, .hero .fc-fix { left: calc(56% - 412px); }
.hero .fc-rate .fl-inner { width: 164px; }
.hero .fc-fix .fl-inner { width: 176px; }
.hero .fl-list { gap: 11px; font-size: 12px; }
.hero .fl-list svg { width: 18px; height: 18px; }
.hero .fl-row { gap: 10px; }
.hero .fl-big { font-size: 27px; }
.chat { height: auto; min-height: 565px; }
.chat-stage { width: min(88%, 500px); }
.chat-log { overflow: visible; mask-image: none; -webkit-mask-image: none; padding-top: 17px; gap: 13px; flex: none; }
.chat-head, .chat-controls, .chat-statusbar { flex-shrink: 0; }
.chat-tag { font-size: 9.5px; letter-spacing: .04em; padding: 6px 8px; white-space: nowrap; }
.chat-head .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-status.is-off::before { background: var(--su-muted); box-shadow: none; }
.demo-caption { font-family: "JetBrains Mono", monospace; font-size: 9px; line-height: 1.6; color: var(--su-muted); text-align: center; }
.msg .chat-avatar { margin-bottom: 0; }
.demo-draft { padding: 11px 14px; margin: 2px 0; border: 1px dashed var(--su-line); background: var(--su-panel-3); border-radius: 14px; }
.demo-draft > span { font: 9.5px "JetBrains Mono", monospace; color: var(--su-muted); text-transform: uppercase; letter-spacing: .12em; }
.demo-draft p { margin-top: 5px; font-size: 13px; color: var(--su-ink); }
.demo-draft i { display: inline-block; width: 1px; height: 13px; background: var(--su-accent); margin-left: 3px; vertical-align: -2px; }
.demo-signals { display: grid; gap: 7px; padding-bottom: 8px; }
.demo-signals .sys-note { align-self: auto; width: 100%; border-radius: 10px; font-size: 9px; line-height: 1.6; letter-spacing: 0; padding: 7px 9px; animation: none; }
.chat-controls { justify-content: center; padding: 12px 10px; gap: 6px; margin-top: auto; }
.ctrl-chip { min-height: 40px; font-size: 10px; padding: 8px 9px; gap: 6px; }
.chat-statusbar { font-size: 9px; letter-spacing: .03em; }
.logos { position: relative; }
html:not(.js) .menu-btn { display: none; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.features-head, .section-head { margin-bottom: 48px; }
.section { padding-top: 96px; padding-bottom: 96px; }
.features { padding-top: 96px; padding-bottom: 96px; }
.metric .m-foot { line-height: 1.6; min-height: 46px; }
.metric.g-full .metric-label { max-width: 100%; }
.cx-node { font: inherit; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 16px; }
.cx-node[aria-pressed="true"] b { border-color: var(--su-accent); box-shadow: 0 0 0 5px var(--su-accent-soft), var(--su-shadow); }
.cx-node[aria-pressed="true"] span { color: var(--su-accent); }
.platform-detail { max-width: 720px; margin: 26px auto 0; padding: 26px 30px; border: 1px solid var(--su-line); border-radius: 25px; background: linear-gradient(155deg, var(--su-panel-3), var(--su-panel)); box-shadow: var(--su-inset), var(--su-shadow); }
.platform-detail-head { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 13px; }
.platform-detail h3 { font-size: 22px; letter-spacing: -.03em; line-height: 1.25; }
.platform-detail .mini-tag { order: 2; color: var(--su-accent); }
.coverage-index { margin-left: auto; order: 3; font: 10px "JetBrains Mono", monospace; color: var(--su-muted); }
.platform-detail > p { font-size: 14px; color: var(--su-muted); line-height: 1.75; min-height: 74px; }
.platform-detail > a { display: inline-block; margin-top: 17px; font-size: 12px; color: var(--su-accent); text-decoration: underline; text-underline-offset: 4px; }
.bento { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.t-big { grid-column: span 1; grid-row: auto; }
.tile { min-width: 0; }
.tile.t-broad { grid-column: 1 / -1; }
.gp-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: auto; }
@media (max-width: 760px) { .gp-stage { grid-template-columns: 1fr; } }
.tile .toast + .toast { opacity: 1; transform: none; }
.tool-preview { position: relative; isolation: isolate; min-height: 190px; padding: 18px; margin-top: 12px; border-radius: 22px; border: 1px solid var(--su-line); background: #111923; overflow: hidden; }
.sample-feed { transition: filter .3s, opacity .3s; }
.sample-profile { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.sample-profile i { width: 19px; height: 19px; border-radius: 50%; background: #54677f; }
.sample-profile span { width: 90px; height: 5px; border-radius: 3px; background: #3b4e67; }
.sample-photo { height: 85px; border-radius: 12px; background: radial-gradient(ellipse at 70% 30%, #a0c0bb, transparent 45%), linear-gradient(135deg, #315d69, #7a9697 55%, #405d7c); }
.sample-lines { display: grid; gap: 8px; margin-top: 12px; }
.sample-lines i { width: 76%; height: 5px; border-radius: 3px; background: #3b4e67; }
.sample-lines i + i { width: 43%; }
.sample-pill { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 8px 12px 8px 8px; border: 1px solid #51657f; border-radius: 25px; background: #1b2738; box-shadow: 0 8px 24px #0008; font-size: 11px; }
.sample-pill img { border-radius: 50%; }
.sample-pill .live-dot { width: 6px; height: 6px; }
.sample-pill small { font: 10px "JetBrains Mono", monospace; color: var(--su-muted); }
.sample-focus { position: absolute; top: 40px; left: 10px; right: 10px; text-align: center; font-size: 17px; line-height: 1.65; color: var(--su-muted); }
.sample-focus strong { font-weight: 600; color: var(--su-ink); }
.focus-active .sample-feed { opacity: 0; }
.screen-active .sample-feed, .screen-active .sample-focus { filter: blur(9px); pointer-events: none; user-select: none; }
.pause-active .sample-pill .live-dot { background: #d9b27a; box-shadow: 0 0 0 4px #d9b27a18; }
.tile .tool-feedback { font: 10px/1.7 "JetBrains Mono", monospace; color: var(--su-muted); margin-top: 2px; min-height: 34px; max-width: none; }
.local-data-visual { padding: 22px 10px; display: flex; align-items: center; text-align: center; flex-direction: column; gap: 8px; border: 1px dashed var(--su-line); border-radius: 20px; }
.local-data-icon { font-size: 36px; line-height: 1.2; color: var(--su-accent); }
.local-data-visual b { font-size: 16px; }
.local-data-visual span:not(.local-data-icon), .local-data-visual small { font: 9px/1.7 "JetBrains Mono", monospace; color: var(--su-muted); }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.setup-grid .doc-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: 28px; }
.setup-step { font: 38px "JetBrains Mono", monospace; letter-spacing: -.08em; color: var(--su-accent); margin-bottom: 22px; }
.setup-grid h3 { font-size: 22px; margin-bottom: 12px; }
.setup-grid p { font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.setup-grid a { margin-top: auto; color: var(--su-accent); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-foot { max-width: 750px; margin-inline: auto; font-size: 10px; line-height: 1.9; text-transform: none; letter-spacing: .03em; }
.plan-desc { line-height: 1.65; }
.plan-cta { min-height: 48px; }
.finale-glow, .mm-glow { background: radial-gradient(closest-side, rgba(73, 158, 243, .25), rgba(73, 158, 243, .06) 55%, transparent); }
.menu-btn { box-shadow: var(--su-inset), 0 4px 12px #0004; }
.mm-primary { box-shadow: inset 0 2px 0 #ffffff30, 0 3px 0 var(--su-accent-2), 0 15px 30px -15px #0008; border-color: var(--su-accent-2); }
.mm-sub, .mm-foot { color: #aeb7c5; }
.footer-finale.final-cta.finale { padding-top: 0; margin-top: 0; border-radius: 0; box-shadow: none; background: linear-gradient(#0a0c11, #08090c); }
.footer-finale.final-cta.finale .site-footer { border-top: 0; padding-top: 30px; }
.final-cta.finale .footer-disclaimer { font-size: 10px; line-height: 1.8; color: #9ba3b0; margin-bottom: 12px; }
.final-cta.finale .footer-col h4, .final-cta.finale .footer-col h4 .px { color: #aeb7c5; --px-fill: #aeb7c5; }
.final-cta.finale .footer-brand p, .final-cta.finale .footer-bottom { color: #aeb7c5; }
.doc-table-wrap { overscroll-behavior-x: contain; }
.status-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 20px; }
.status-heading .section-eyebrow { margin-bottom: 12px; }
.status-refresh { flex: none; padding: 12px 18px; border: 1px solid var(--su-line); background: var(--su-panel-3); color: var(--su-ink); border-radius: 16px / 50%; font: 12px "JetBrains Mono", monospace; cursor: pointer; }
.status-refresh:hover { border-color: var(--su-accent); }
.status-refresh:disabled { opacity: .6; cursor: wait; }
.live-status p[data-status-message] { color: var(--su-accent); font-size: 14px; }
.compatibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 25px; }
.compat-card { padding: 24px; border: 1px solid var(--su-line); border-radius: 24px; background: linear-gradient(var(--su-panel), var(--su-panel-2)); }
.compat-card h3 { font-size: 20px; margin-bottom: 6px; }
.compat-card > p { font: 10px/1.7 "JetBrains Mono", monospace; margin-bottom: 15px; }
.compat-card ul { list-style: none; padding: 0; }
.compat-card li { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid var(--su-line); font-size: 12px; }
.compat-card li > span { display: flex; flex-direction: column; gap: 5px; }
.compat-card small { font: 9px/1.7 "JetBrains Mono", monospace; color: var(--su-muted); }
.compat-state { font: 9px/1.7 "JetBrains Mono", monospace; text-align: right; color: var(--su-muted); white-space: nowrap; }
.compat-state[data-state=working] { color: #8ed6b4; }
.compat-state[data-state=issue], .compat-state[data-state=degraded] { color: #efb794; }

/* 1351–1400px: design.css caps .chat-stage at 430px and sets margin-left: 18%,
   so the chat's left edge is 0.59*W - 215px. design.css also applies
   scale: 0.86 here, which pulls the card's visual edge inwards, hence -366. */
@media (min-width: 1351px) and (max-width: 1400px) {
  .hero .fc-rate, .hero .fc-fix { left: calc(59% - 366px); }
}
@media (min-width: 1101px) and (max-width: 1350px) {
  .hero { gap: 42px; }
  .hero .fc-rate, .hero .fc-fix { left: -12%; scale: .75; }
  .chat-stage { margin-left: 12%; width: 92%; }
  .chat-tag { display: none; }
  .bento { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* Single column here and the chat is centred, so track it the same way
     (offset = 0.5*W - 215px) but never let the cards leave the hero panel. */
  .hero .fc-rate, .hero .fc-fix { left: max(calc(50% - 377px), 0px); }
  .chat-stage { margin-left: 0; width: min(78%, 500px); }
  .hero-visual { min-height: 660px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-big { grid-column: span 2; grid-row: auto; }
  .mark-seen-card { grid-column: span 1; }
  .tool-preview { width: 100%; }
  .tile.t-big > p { max-width: 600px; }
  .setup-grid { gap: 14px; }
  .setup-grid .doc-card { padding: 24px; }
  .section-head { gap: 30px; }
  /* app.css caps this at 560px while the later 2-column rule still applies,
     which squeezed each pricing card down to 270px on 761–1100px screens. */
  .plans.two { max-width: 900px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 105px; }
  html:not(.js) .nav-pill { flex-wrap: wrap; justify-content: center; }
  html:not(.js) .header-nav { display: flex; flex-wrap: wrap; justify-content: center; }
  html:not(.js) .header-nav a { padding: 10px; font-size: 12px; }
  .features-head > div, .section-head > div { min-width: 0; max-width: 100%; }
  .section-eyebrow { max-width: 100%; gap: 8px; }
  .section-eyebrow::before { width: 22px; flex: none; }
  .section-eyebrow .px { font-size: 11px; }
  .hero { width: calc(100% - 24px); padding-top: 58px; }
  .hero-desc { font-size: 16px; line-height: 1.65; }
  .hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 24px; }
  .hero-trust li { flex-direction: column; align-items: flex-start; gap: 9px; font-size: 10px; line-height: 1.6; }
  .hero-trust svg { width: 20px; height: 20px; }
  .hero-trust img { width: 16px; height: 16px; }
  .hero-visual { min-height: 0; padding-top: 20px; }
  .chat-stage { width: 100%; max-width: 500px; }
  .chat { min-height: 0; height: auto; border-radius: 27px; }
  .chat-log { padding: 16px 12px 12px; gap: 12px; }
  .chat-head { padding-right: 10px; gap: 8px; }
  .chat-tag { font-size: 7px; padding: 5px; }
  .chat-name { font-size: 15px; }
  .chat-status { font-size: 9px; }
  .chat-statusbar { font-size: 8px; padding-inline: 10px; }
  .bubble { font-size: 12px; padding: 10px 11px; }
  .demo-signals .sys-note { font-size: 8px; }
  .ctrl-chip { font-size: 9px; padding: 8px; min-height: 42px; }
  .ctrl-chip::before { width: 7px; height: 7px; }
  .chat-controls { gap: 5px; padding: 10px 8px; }
  .section, .features { padding-top: 64px; padding-bottom: 64px; }
  .features-head, .section-head { margin-bottom: 32px; }
  .features-meta { font-size: 9px; }
  .stats-bar { padding-top: 44px; padding-bottom: 24px; }
  .metric { padding: 22px; }
  .metric-label .px { font-size: 12px; }
  .metric .m-foot { font-size: 11px; }
  .section-head .section-lede { font-size: 15px; line-height: 1.7; }
  .platform-detail { margin-top: 24px; padding: 23px; }
  .platform-detail > p { font-size: 13px; min-height: 138px; }
  .platform-detail-head { gap: 10px; }
  .coverage-index { font-size: 9px; }
  .platform-detail h3 { font-size: 22px; }
  .bento { grid-template-columns: 1fr; }
  .t-big { grid-column: 1; }
  .setup-grid, .plans.two { grid-template-columns: 1fr; }
  .setup-grid .doc-card { padding: 26px; }
  .setup-step { margin-bottom: 16px; font-size: 32px; }
  .plans.two { max-width: 560px; }
  .pricing-foot { font-size: 10px; }
  .final-cta.finale { padding-top: 80px; }
  .final-cta.finale .finale-kicker { font-size: 9px; line-height: 1.7; }
  .final-cta.finale .cta-note { font-size: 10px; }
  .final-cta.finale .footer-disclaimer { font-size: 9px; }
  .mm-inner { padding-top: 108px; }
  .mm-sub { font-size: 12px; line-height: 1.6; }
  .status-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .compatibility-grid { grid-template-columns: 1fr; }
  .compat-card { padding: 22px; }
  .compat-card li { font-size: 11px; }
}
@media (max-width: 680px) {
  .cx-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 10px; }
  .cx-hub { grid-column: 1 / -1; width: 116px; height: 116px; margin: 8px auto 20px; flex-basis: auto; }
  .cx-hub span { font-size: 8px; letter-spacing: .12em; }
  .cx-node { width: 100%; min-width: 0; align-self: start; }
  .cx-node span { font-size: 12px; line-height: 1.3; }
  .cx-node small { font-size: 8px; }
}
@media (max-width: 380px) {
  .nav-frame { padding-inline: 9px; }
  .logo { padding-inline: 10px; font-size: 15px; }
  .hero { padding-inline: 17px; }
  .hero-eyebrow .px { font-size: 13px; }
  .chat-tag { display: none; }
  .chat-statusbar { letter-spacing: 0; }
  .ctrl-chip { font-size: 8px; padding: 7px; }
  .demo-caption { font-size: 8px; }
  .demo-draft p { font-size: 12px; }
  .platform-detail { padding: 20px; }
  .platform-detail-head .mini-tag { font-size: 8px; }
  .coverage-index { display: none; }
  .metric { padding: 20px; }
}
/* ---------- 24. Checkout, coverage and a more useful Pro preview ---------- */
html { scrollbar-gutter: stable; }
html.checkout-open { overflow: hidden; }
.checkout-dialog { width: min(500px, calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: hidden; color: var(--su-ink); border: 1px solid #43546d; border-radius: 32px; background: radial-gradient(ellipse at top right, #25416488, transparent 65%), linear-gradient(155deg, #1c2635, #10151e); box-shadow: 0 40px 130px #000a, inset 0 1px #ffffff12; }
.checkout-dialog[open] { display: flex; flex-direction: column; align-items: flex-start; }
.checkout-dialog::backdrop { background: #05080fd6; backdrop-filter: blur(9px); }
.checkout-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; width: 100%; padding: 24px 24px 24px 36px; }
.checkout-body { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; width: 100%; padding: 8px 36px 36px; overflow: auto; overscroll-behavior: contain; }
.checkout-body > * { flex-shrink: 0; }
.checkout-close { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 50%; background: #223145; color: #e6edf7; font: 27px/1 system-ui, sans-serif; cursor: pointer; }
.checkout-close:hover { background: #ffffff12; border-color: var(--su-accent); }
.checkout-brand { display: flex; align-items: center; gap: 11px; }
.checkout-brand img { border-radius: 13px; }
.checkout-brand > span { font: 10px/1.8 "JetBrains Mono", monospace; letter-spacing: .08em; }
.checkout-brand b { display: inline-block; margin-left: 5px; color: #06121f; background: var(--su-accent); padding: 1px 5px; border-radius: 3px; font-size: 9px; }
.checkout-eyebrow { font: 9px/1.7 "JetBrains Mono", monospace; letter-spacing: .13em; color: #a8b9ce; }
.checkout-dialog h2 { font-family: "Funnel Display", system-ui, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -.04em; margin: 15px 0 23px; }
.checkout-dialog h2 > span { color: #72b6fc; }
.checkout-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font: 700 41px/1.2 "Funnel Display", system-ui, sans-serif; letter-spacing: -.04em; }
.checkout-price > span { font: 10px/1.7 "JetBrains Mono", monospace; letter-spacing: 0; color: #b1bdd0; }
.checkout-dialog #checkout-description { font-size: 14px; line-height: 1.75; color: #b1bdd0; margin-top: 14px; }
.checkout-progress { display: flex; align-items: center; gap: 11px; width: 100%; padding: 16px; margin-top: 24px; border-radius: 15px; border: 1px solid #87bdff35; background: #87bdff09; color: #c6e0ff; font-size: 13px; line-height: 1.65; }
.checkout-spinner { width: 17px; height: 17px; flex: none; border-radius: 50%; border: 2px solid #87bdff40; border-top-color: #87bdff; animation: checkout-spin .8s linear infinite; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.checkout-frame { display: none; width: 100%; height: min(640px, 68dvh); margin-top: 24px; border: 1px solid #ffffff14; border-radius: 18px; background: #fff; }
.checkout-dialog[data-state=ready] .checkout-frame { display: block; }
.checkout-dialog[data-state=ready] .checkout-progress, .checkout-dialog[data-state=ready] .checkout-eyebrow, .checkout-dialog[data-state=ready] h2, .checkout-dialog[data-state=ready] #checkout-description { display: none; }
.checkout-dialog[data-state=error] .checkout-spinner { display: none; }
.checkout-dialog[data-state=error] .checkout-progress { color: #e5cbac; background: #deb89008; border-color: #deb89025; }
.checkout-recovery { width: 100%; display: grid; gap: 15px; text-align: center; margin-top: 14px; }
.checkout-retry { width: 100%; padding: 13px 20px; min-height: 46px; color: #06121f; border: 1px solid var(--su-accent-2); border-radius: 14px / 50%; background: linear-gradient(var(--su-accent), var(--su-accent-2)); font-size: 14px; font-weight: 600; cursor: pointer; }
.checkout-recovery a { font-size: 12px; color: #a9c9ef; text-decoration: underline; text-underline-offset: 4px; padding-block: 7px; }
.checkout-dialog .checkout-provider { width: 100%; font-size: 11px; color: #9baac0; line-height: 1.8; margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff10; }
/* Keep Gumroad's embed button stylesheet from replacing our v2 button. */
a[data-checkout].gumroad-button { font-family: "Funnel Display", system-ui, sans-serif !important; font-weight: 600 !important; text-shadow: none !important; text-decoration: none !important; }
a[data-checkout].gumroad-button::before, a[data-checkout].gumroad-button::after { display: none !important; }
.plan.featured a.plan-cta.gumroad-button { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; padding: 14px 20px !important; min-height: 50px !important; border-radius: 14px / 50% !important; background: linear-gradient(180deg, var(--su-accent), var(--su-accent-2)) !important; color: var(--su-on-accent) !important; border: 1px solid var(--su-accent-2) !important; font-size: 15px !important; box-shadow: inset 0 1px #ffffff30, 0 6px 20px #0002 !important; }
.plan.featured a.plan-cta.gumroad-button:hover { filter: brightness(1.12); }
.doc-card a.gumroad-button { display: inline-flex !important; align-items: center !important; padding: 12px 20px !important; background: var(--su-accent) !important; color: #06121f !important; border: 1px solid var(--su-accent-2) !important; border-radius: 14px / 50% !important; font-size: 14px !important; }
.checkout-assurance { display: flex; justify-content: center; align-items: center; gap: 9px; max-width: 620px; margin: 28px auto 0; font-size: 12px; line-height: 1.7; color: #a3b4c9; text-align: center; }
.checkout-assurance svg { flex: none; width: 17px; height: 17px; fill: none; stroke: #89bcf3; stroke-width: 1.6; }
.checkout-assurance + .pricing-foot { margin-top: 12px; }
.plan .plan-name { font-family: "Funnel Display", system-ui, sans-serif; font-size: 25px; letter-spacing: -.025em; text-transform: none; font-weight: 650; color: var(--su-ink); }
.plan.featured .plan-name { color: var(--su-ink); }
.plan-caption { font-size: 12px; line-height: 1.6; color: var(--su-muted); margin-top: 5px; }
.plan-badge { box-shadow: 0 6px 14px -4px #0006; font-size: 9px; }
.plan li { line-height: 1.6; }
.plan li::before, .plan.featured li::before { margin-top: 3px; background: #499ef326 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ac4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mark-seen-card > p { color: #0e3155; font-size: 13px; line-height: 1.7; }
.receipt-preview { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.receipt-preview-bubble { font-size: 13px; background: #eaf5ff; color: #173250; padding: 12px 16px; border-radius: 16px 16px 4px 16px; border: 1px solid #ffffff66; box-shadow: 0 7px 18px #0a28491a; }
.receipt-preview > span { font: 10px/1.7 "JetBrains Mono", monospace; color: #123758; min-height: 17px; }
.receipt-preview.is-seen > span { color: #092842; }
.mark-seen-demo { min-height: 43px; margin-top: 10px; padding: 11px 15px; display: flex; justify-content: center; align-items: center; gap: 11px; font: 600 12px "Funnel Display", system-ui, sans-serif; cursor: pointer; border: 1px solid #1b5485; border-radius: 12px / 50%; background: #0a2b4c; color: #edf7ff; }
.mark-seen-demo:hover { background: #143f67; }
.receipt-demo-note { font: 9.5px/1.8 "JetBrains Mono", monospace; color: #153955; text-align: center; }
.tile.t-big .tool-preview { min-height: 225px; }
.tile.t-big .sample-photo { height: 118px; }
.tile.t-big .tool-feedback { margin-top: auto; padding-top: 5px; }
.queue-row b { color: #87d6ae; }
.t-yellow .meter-legend, .m-yellow .m-zero-legend { color: #103555; }
.m-yellow .m-foot { color: var(--su-on-accent); }
.footer-col a { min-height: 30px; }

/* Status: supported features first, with separate dated compatibility checks. */
.doc.status-page { max-width: 1340px; padding-top: 154px; }
.status-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(180px, .75fr); gap: 40px; align-items: center; margin-bottom: 52px; }
.status-intro .doc-title { font-size: clamp(44px, 5.6vw, 78px); }
.status-intro .doc-title > span { color: var(--su-accent); }
.status-intro .doc-lede { max-width: 600px; font-size: 17px; line-height: 1.75; }
.status-intro .doc-meta span { font-size: 9px; letter-spacing: .06em; }
.status-orbit { width: 265px; height: 265px; position: relative; display: grid; place-items: center; justify-self: center; }
.status-orbit-ring { position: absolute; inset: 15px; border: 1px dashed #8ebaf133; border-radius: 50%; }
.status-orbit-ring::after { content: ''; position: absolute; inset: 32px; border: 1px solid #8ebaf11a; border-radius: 50%; }
.status-orbit img { position: relative; border-radius: 22px; outline: 12px solid #ffffff04; box-shadow: 0 0 75px #499ef322; }
.orbit-point { position: absolute; width: 12px; height: 12px; border: 3px solid #152131; border-radius: 50%; background: var(--su-accent); box-shadow: 0 0 0 1px #6eb2ff55; }
.orbit-point.p1 { left: 56px; top: 31px; }
.orbit-point.p2 { right: 24px; top: 75px; background: #aeb5e0; }
.orbit-point.p3 { bottom: 41px; left: 42px; background: #78bfad; }
.orbit-caption { position: absolute; bottom: 34px; font: 9px/1.8 "JetBrains Mono", monospace; text-align: center; letter-spacing: .13em; color: #a3b4c8; }
.status-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 19px 0; border-block: 1px solid var(--su-line); margin-bottom: 34px; }
.status-tabs { display: flex; padding: 5px; gap: 5px; border: 1px solid var(--su-line); background: #111822; border-radius: 16px; }
.status-tabs button { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #a8b4c4; font-size: 13px; font-weight: 600; cursor: pointer; }
.status-tabs button > span { font: 9px "JetBrains Mono", monospace; color: #879bb5; }
.status-tabs button[aria-selected=true] { color: #eaf3ff; background: linear-gradient(#25354a, #1d2b3d); border-color: #4b658633; box-shadow: inset 0 1px #ffffff0a, 0 3px 8px #0003; }
.status-tabs button[aria-selected=true] > span { color: #8fc3ff; }
.status-tabs button:hover { color: var(--su-ink); }
.status-filter { display: flex; align-items: center; gap: 13px; }
.status-filter label { font-size: 11px; color: var(--su-muted); }
.status-filter select { font: 12px "Funnel Display", system-ui, sans-serif; padding: 11px 32px 11px 13px; border: 1px solid #3a4a60; border-radius: 11px; min-height: 44px; color: var(--su-ink); background: #182332; cursor: pointer; max-width: 100%; }
.coverage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.coverage-heading h2, .status-page .status-heading h2 { font: 650 30px/1.2 "Funnel Display", system-ui, sans-serif; letter-spacing: -.03em; }
.coverage-heading p { font-size: 13px; line-height: 1.8; color: var(--su-muted); margin-top: 10px; }
.coverage-count { font: 9px/1.6 "JetBrains Mono", monospace; color: #a5bad2; white-space: nowrap; padding: 7px 10px; margin-top: 4px; border: 1px solid var(--su-line); border-radius: 9px; }
.coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.coverage-card { padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--su-line); border-radius: 28px; background: linear-gradient(150deg, #1b2330, #131921 65%); box-shadow: var(--su-inset), 0 20px 45px -32px #0009; min-width: 0; }
.coverage-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.coverage-logo { display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid #ffffff0d; border-radius: 16px; background: #ffffff04; }
.coverage-logo svg { width: 28px; height: 28px; }
.coverage-card h3 { font: 650 26px/1.2 "Funnel Display", system-ui, sans-serif; letter-spacing: -.03em; }
.coverage-card .coverage-tagline { font-size: 12px; line-height: 1.7; color: #a3afbf; margin: 10px 0 2px; min-height: 41px; }
.coverage-group { padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--su-line); }
.coverage-group h4 { display: flex; align-items: center; gap: 8px; font: 9px/1.7 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: #a8d6bd; margin-bottom: 13px; }
.coverage-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.coverage-group.pro h4 { color: #8cbeef; }
.coverage-group ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.coverage-group li { position: relative; padding-left: 16px; font-size: 12px; line-height: 1.7; color: #c3cdd9; }
.coverage-group li::before { content: '✓'; position: absolute; left: 0; top: 1px; font-size: 10px; color: #7d9ab9; }
.coverage-card .coverage-card-note { font-size: 11px; line-height: 1.8; color: #a1b0c4; padding: 16px; border: 1px dashed #53647d66; border-radius: 14px; margin-top: 25px; }
.shared-tools { margin-top: 23px; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 28px 30px; border: 1px solid #36445b; border-radius: 24px; background: radial-gradient(ellipse at right, #26375055, transparent 65%), #141d29; }
.shared-tools .mini-tag { margin-bottom: 11px; }
.shared-tools h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.3; }
.shared-tools p { font-size: 12px; line-height: 1.8; color: var(--su-muted); margin-top: 10px; max-width: 660px; }
.shared-tools > a, .status-help > a { flex: none; font-size: 12px; line-height: 1.6; color: #91c6ff; text-decoration: underline; text-underline-offset: 5px; padding-block: 12px; }
.status-page .live-status { margin-top: 54px; }
.js .status-page .live-status { margin-top: 0; }
.status-page .checks-intro { max-width: 760px; color: var(--su-muted); font-size: 13px; line-height: 1.8; margin: 10px 0 22px; }
.status-page .status-message { padding: 17px 20px; font-size: 12px; line-height: 1.8; color: #b9d5f4; border-radius: 14px; background: #499ef30b; border: 1px solid #499ef329; }
.status-page [data-connection=unavailable] .status-message, .status-page [data-connection=cached] .status-message { color: #d8c5ad; border-color: #d8b07b33; background: #d8b07b06; }
.checks-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 20px; font-size: 10px; color: #a1b0c3; }
.checks-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.checks-legend i { width: 6px; height: 6px; border-radius: 50%; }
.checks-legend .working { background: #8ed6b4; }
.checks-legend .attention { background: #efb794; }
.checks-legend .pending { background: #8797ac; }
.status-page .compatibility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.status-page .compat-card { min-width: 0; border-radius: 24px; }
.status-page .compat-card li { flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 13px; }
.status-page .compat-state { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #ffffff05; border: 1px solid #ffffff08; font-size: 10px; }
.status-page .compat-card small { font-size: 10px; }
.status-help { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--su-line); margin-top: 50px; padding-top: 30px; }
.status-help-mark { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border: 1px solid #8ac4ff33; border-radius: 15px; background: #8ac4ff0b; color: #8ac4ff; font-size: 22px; }
.status-help > div { flex: 1; min-width: 0; }
.status-help h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }
.status-help p { font-size: 12px; line-height: 1.8; color: #a2b0c2; margin-top: 8px; max-width: 700px; }

@media (max-width: 1100px) {
  .status-intro { grid-template-columns: minmax(0, 1fr) 210px; gap: 24px; }
  .status-orbit { width: 210px; height: 210px; }
  .orbit-caption { bottom: 17px; font-size: 9px; letter-spacing: .06em; }
  .status-orbit-ring { inset: 8px; }
  .status-orbit .p1 { left: 33px; top: 31px; }
  .status-orbit .p2 { right: 8px; top: 76px; }
  .status-orbit .p3 { left: 28px; bottom: 40px; }
  .coverage-grid, .status-page .compatibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-tabs button { padding-inline: 13px; font-size: 12px; gap: 8px; }
  .status-filter label { display: none; }
  .shared-tools { flex-direction: column; align-items: flex-start; gap: 10px; }
  .status-help { flex-wrap: wrap; }
  .status-help > div { flex: 1; }
  .status-help > a { margin-left: 68px; }
}
@media (max-width: 760px) {
  .hero { row-gap: 28px; }
  .hero-right { margin-top: 0; }
  .plan .plan-name { font-size: 25px; }
  .plan.featured { transform: none; }
  .plans.two { gap: 32px; }
  .plan-badge { top: -14px; right: 24px; max-width: calc(100% - 48px); font-size: 8px; line-height: 1.7; }
  .checkout-assurance { font-size: 10px; gap: 8px; max-width: 300px; align-items: flex-start; }
  .checkout-assurance svg { margin-top: 2px; }
  .mark-seen-card { min-height: 340px; }
  .mark-seen-card .receipt-preview { margin-top: 14px; }
  .receipt-demo-note { font-size: 9px; }
  .doc.status-page { padding-top: 133px; padding-bottom: 64px; }
  .status-intro { display: block; margin-bottom: 28px; }
  .status-intro .doc-title { font-size: clamp(40px, 8.5vw, 62px); }
  .status-intro .doc-lede { font-size: 15px; }
  .status-orbit { display: none; }
  .status-toolbar { flex-direction: column; gap: 17px; align-items: stretch; margin-bottom: 27px; padding-block: 18px; }
  .status-tabs { width: 100%; }
  .status-tabs button { flex: 1; min-height: 47px; font-size: 12px; padding-inline: 11px; gap: 8px; }
  .status-filter { justify-content: space-between; }
  .status-filter label { display: flex; align-items: center; min-height: 24px; font-size: 11px; }
  .status-filter select { min-width: 168px; }
  .coverage-heading { gap: 15px; align-items: flex-start; }
  .coverage-heading h2, .status-page .status-heading h2 { font-size: 25px; line-height: 1.2; }
  .coverage-heading p { font-size: 12px; line-height: 1.8; }
  .coverage-count { font-size: 9.5px; padding: 5px 7px; }
  .coverage-card { padding: 24px; }
  .coverage-group li { font-size: 12px; }
  .status-help h2 { font-size: 18px; }
  .status-help p { font-size: 11px; }
  .status-help { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 17px; align-items: start; }
  .status-help > a { grid-column: 2; margin-left: 0; justify-self: start; }
  .status-page .status-message { font-size: 12px; padding: 16px; }
  .shared-tools { padding: 24px; }
  .shared-tools h3 { font-size: 20px; }
}
@media (max-width: 560px) {
  .coverage-grid, .status-page .compatibility-grid { grid-template-columns: 1fr; gap: 16px; }
  .coverage-heading { flex-wrap: wrap; gap: 9px; }
  .coverage-heading p { max-width: 330px; }
  .coverage-count { margin-top: 0; }
  .coverage-card .coverage-tagline { min-height: 0; }
  .status-page .compat-card li { flex-direction: row; gap: 12px; font-size: 12px; }
  .status-page .compat-card small { font-size: 10px; }
  .status-page .compat-state { white-space: normal; min-width: 65px; max-width: 90px; }
  .checkout-dialog { width: calc(100% - 28px); max-height: calc(100dvh - 28px); border-radius: 27px; }
  .checkout-header { padding: 20px 20px 23px 25px; }
  .checkout-body { padding: 6px 25px 29px; }
  .checkout-dialog h2 { font-size: 43px; }
  .checkout-close { width: 44px; height: 44px; }
  .checkout-brand { gap: 9px; }
  .checkout-brand > span { font-size: 9px; }
  .checkout-brand img { width: 34px; height: 34px; }
  .checkout-eyebrow { font-size: 8px; }
  .checkout-price { font-size: 37px; }
  .checkout-dialog #checkout-description { font-size: 13px; }
  .checkout-progress { font-size: 12px; padding: 13px; }
  .checkout-provider { font-size: 10px; }
}
@media (max-width: 380px) {
  .status-tabs { gap: 3px; padding: 4px; }
  .status-tabs button { font-size: 10px; padding-inline: 9px; gap: 5px; }
  .status-tabs button > span { display: none; }
  .status-intro .doc-title { font-size: 38px; }
  .status-intro .doc-meta { gap: 7px; }
  .status-intro .doc-meta span { font-size: 8px; padding-inline: 8px; }
  .coverage-card { padding: 23px; }
  .checkout-header { padding: 17px 17px 20px 21px; }
  .checkout-body { padding: 5px 21px 25px; }
  .checkout-dialog h2 { font-size: 39px; }
  .checkout-price > span { font-size: 9px; }
  .status-page .compat-card { padding: 20px; }
}
/* Standalone card and detail links were only as tall as their line box. */
.setup-grid .doc-card > a, .platform-detail > a { display: inline-flex; align-items: center; min-height: 32px; }
/* Phone pass: these labels were scaled down with the layout until they stopped
   being readable, so hold a floor instead of shrinking them further. */
@media (max-width: 760px) {
  .chat-status, .chat-statusbar, .chat-tag, .demo-signals .sys-note, .demo-caption, .demo-draft > span, .features-meta, .coverage-index, .coverage-group h4, .status-tabs button > span, .cx-hub span, .cx-node small, .compat-card small, .status-page .compat-card small, .checkout-eyebrow, .status-intro .doc-meta span, .final-cta.finale .finale-kicker, .final-cta.finale .footer-disclaimer, .motion-control, .plat-tag, .platform-detail-head .mini-tag, .ctrl-chip, .hero .glass--tab > span, .ab-badge, .sample-pill small, .local-data-visual span:not(.local-data-icon), .local-data-visual small, .receipt-demo-note, .plan-badge { font-size: 10px; }
  .hero-trust li, .pricing-foot, .final-cta.finale .cta-note, .metric .m-foot, .m-zero-legend span, .m-zero-legend b, .m-pay-legend span, .m-pay-legend b { font-size: 11px; }
  .doc-table th, .doc-table td { font-size: 12px; }
  .doc-table-wrap { overscroll-behavior-x: contain; }
}
/* Standalone links used the paragraph line box as their whole tap target. */
@media (max-width: 760px) {
  .setup-grid .doc-card > a, .footer-col a, .checkout-recovery a, .platform-detail > a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* The typed draft in the ask demo cannot fit its pill on the narrowest phones. */
@media (max-width: 360px) {
  .ask-input { white-space: normal; }
  .ask-q { animation: none; max-width: 100%; overflow: visible; white-space: normal; }
}
/* Once the framed checkout is up it needs the whole viewport, not a card. */
@media (max-width: 560px) {
  .checkout-dialog[data-state=ready] { width: 100%; max-width: 100%; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .checkout-dialog[data-state=ready] .checkout-header { padding: 12px 14px; }
  .checkout-dialog[data-state=ready] .checkout-body { padding: 0 12px 12px; }
  .checkout-dialog[data-state=ready] .checkout-price { display: none; }
  .checkout-dialog[data-state=ready] .checkout-frame { height: calc(100dvh - 118px); margin-top: 8px; }
  .checkout-dialog[data-state=ready] .checkout-provider { margin-top: 12px; padding-top: 12px; }
}
/* design.css paints the skip link with --ink, which this theme inverts to a
   near-white, so its only text was white on white exactly when keyboard users
   focus it. */
.skip { background: var(--su-ink); color: var(--bg); }
/* Same light-palette leftover: hovering the blue hero CTA washed the frame
   with cream yellow. */
@keyframes frame-wash {
  80% { background-color: transparent; }
  100% { background-color: var(--su-accent-soft); }
}
/* fc-yellow repaints the leak chip's surface but not its text, and never gave
   the row itself a colour for the light card. */
.feature-card.fc-yellow .leak-head { color: #06121f; }
.feature-card.fc-yellow .leak-head b { color: #b3261e; }

/* ============================================================
   25. motion layer — entrances, reveals, instruments, micro-interactions

   Every entrance rule here is gated behind `html.anim`, which main.js adds
   unconditionally as soon as it runs. Without that class the page keeps its
   plain, fully visible state, so a script error can never leave content
   stuck at opacity 0.

   The keyframes animate the independent `translate` / `scale` CSS
   properties rather than `transform`, so they compose with the static
   transforms already on these elements (the chat card's 3D tilt, the
   float cards' rotations, the featured plan's lift) instead of
   replacing them the way a `both`-filled transform animation would.
   ============================================================ */

/* ---------- 25.1 keyframes ---------- */
@keyframes su-mask-up { from { translate: 0 112%; } to { translate: 0 0; } }
@keyframes su-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes su-rise-sm { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes su-pop { from { opacity: 0; scale: .84; } to { opacity: 1; scale: 1; } }
@keyframes su-drop { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-sheen { from { transform: translateX(-180%) skewX(-14deg); } to { transform: translateX(280%) skewX(-14deg); } }
@keyframes su-breathe { 0%, 100% { opacity: .82; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes su-draw { to { stroke-dashoffset: 0; } }
@keyframes su-line { from { width: 0; } }

/* ---------- 25.2 hero entrance ---------- */
.anim .hero .glass--tab { animation: su-drop .7s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.anim .hero-eyebrow { animation: su-rise-sm .7s cubic-bezier(.2, .7, .2, 1) .05s both; }
.anim .hero .title-line .title-inner { animation: su-mask-up .85s cubic-bezier(.2, .7, .2, 1) both; }
.anim .hero .title-line:nth-child(2) .title-inner { animation-delay: .14s; }
.anim .hero .title-line:nth-child(3) .title-inner { animation-delay: .28s; }
.anim .hero-desc { animation: su-rise .8s cubic-bezier(.2, .7, .2, 1) .42s both; }
.anim .hero-ctas { animation: su-rise .8s cubic-bezier(.2, .7, .2, 1) .52s both; }
.anim .hero-trust li { animation: su-rise-sm .7s cubic-bezier(.2, .7, .2, 1) both; }
.anim .hero-trust li:nth-child(2) { animation-delay: .68s; }
.anim .hero-trust li:nth-child(3) { animation-delay: .76s; }
.anim .hero .chat { animation: su-pop .9s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.anim .hero .float-card { animation: su-fade .8s ease .9s both; }
.anim .hv-glow { animation: su-breathe 7s ease-in-out 1.2s infinite; }
/* eyebrow rules draw themselves in */
.anim .section-eyebrow::before { animation: su-line .6s cubic-bezier(.2, .7, .2, 1) .25s both; }

/* ---------- 25.3 hero pointer parallax ----------
   main.js writes --hx / --hy (-0.5 … 0.5) on .hero-visual; the
   decorations below drift against the pointer. */
.anim .hero-visual { --hx: 0; --hy: 0; }
.anim .hv-glow, .anim .hv-dots--a, .anim .hv-dots--b, .anim .fc-rate, .anim .fc-fix { transition: translate .45s ease-out; }
.anim .hv-glow { translate: calc(var(--hx) * 16px) calc(var(--hy) * 10px); }
.anim .hv-dots--a { translate: calc(var(--hx) * 12px) calc(var(--hy) * 8px); }
.anim .hv-dots--b { translate: calc(var(--hx) * -14px) calc(var(--hy) * -9px); }
.anim .fc-rate { translate: calc(var(--hx) * -10px) calc(var(--hy) * -7px); }
.anim .fc-fix { translate: calc(var(--hx) * 8px) calc(var(--hy) * 5px); }

/* ---------- 25.4 hero sparkline draw ---------- */
.anim .fl-spark path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: su-draw 1.5s cubic-bezier(.2, .7, .2, 1) 1.3s forwards; }
.anim .fl-spark circle { opacity: 0; animation: su-fade .5s ease 2.5s forwards; }

/* ---------- 25.5 button sheen ---------- */
.btn.btn-lg, .plan.featured .plan-cta, .store-btn, .mm-primary { position: relative; overflow: hidden; }
.btn.btn-lg::after, .plan.featured .plan-cta::after, .store-btn::after, .mm-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
  transform: translateX(-180%) skewX(-14deg);
  pointer-events: none;
}
.btn.btn-lg:hover::after, .btn.btn-lg:focus-visible::after,
.plan.featured .plan-cta:hover::after, .store-btn:hover::after, .mm-primary:hover::after { animation: su-sheen .75s ease; }

/* ---------- 25.6 pointer tilt (transform is written by main.js) ---------- */
.anim .feature-card, .anim .tile { transition: transform .25s ease-out, box-shadow .35s ease; }

/* ---------- 25.7 featured plan glow + constellation counter-ring ---------- */
.plan.featured { animation: su-glow 4.6s ease-in-out infinite; }
@keyframes su-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #000, 0 30px 60px -24px rgba(0, 0, 0, .5), 0 0 0 0 var(--su-accent-soft); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #000, 0 30px 60px -24px rgba(0, 0, 0, .5), 0 0 26px 1px var(--su-accent-soft); }
}
.cx-ring.r1 { animation: cx-spin 120s linear infinite reverse; }

/* ---------- 25.8 metric instruments ----------
   main.js adds .pre to every metric on load and removes it when the
   card scrolls into view, so the gauge sweeps, the needle swings and
   the bars and pay cells grow from nothing. */
.metric .m-bars i { transform-origin: bottom; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.metric.pre .m-bars i { transform: scaleY(0); }
.metric .m-pay i { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease; }
.metric.pre .m-pay i { transform: scale(0); opacity: 0; }
.motion-paused .metric .m-bars i, .motion-paused .metric .m-pay i,
.motion-paused .metric .g-fill, .motion-paused .metric .g-needle { transition: none !important; }

/* ---------- 25.9 faq accordion ---------- */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1); }
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-body > .faq-inner { overflow: hidden; min-height: 0; }

/* ---------- 25.10 checkout dialog + 404 ---------- */
.checkout-dialog[open] { animation: su-pop .38s cubic-bezier(.2, .9, .3, 1.15) both; }
.checkout-dialog[open]::backdrop { animation: su-fade .3s ease both; }
.anim .err-code { animation: su-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
.anim .err-wrap h1 { animation: su-rise .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
.anim .err-wrap p { animation: su-rise .7s cubic-bezier(.2, .7, .2, 1) .25s both; }
.anim .err-actions { animation: su-rise .7s cubic-bezier(.2, .7, .2, 1) .35s both; }

/* ---------- 25.11 back to top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 65;
  width: 46px; height: 46px; border-radius: 15px / 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--su-panel-3) 0%, var(--su-panel) 100%);
  border: 1px solid var(--su-line); color: var(--su-ink);
  box-shadow: var(--su-inset), 0 14px 30px -12px rgba(0, 0, 0, .6);
  cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 12px; pointer-events: none;
  transition: opacity .3s ease, translate .35s cubic-bezier(.34, 1.56, .64, 1), background .2s, border-color .2s, color .2s;
}
.to-top.show { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%); color: var(--su-on-accent); border-color: var(--su-accent-2); }
.to-top svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .to-top { right: 14px; bottom: 16px; width: 44px; height: 44px; } }

/* ---------- 25.12 small life ---------- */
.demo-draft i { animation: caret .9s steps(1) infinite; }
.chat-status::before { animation: live 2.4s ease-in-out infinite; }
/* A user-paused page also means instant transitions, so pausing never
   leaves a half-finished hover state behind. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition-duration: .001ms !important; }

/* ---------- themed dark/light images (kills duplicate badges) ---------- */
.brand-logo.light-icon,
.themed-icon.light-icon {
  display: none !important;
}
.brand-logo.dark-icon,
.themed-icon.dark-icon {
  display: inline-block !important;
}
.featured-badge .themed-icon.dark-icon {
  display: block !important;
}
[data-theme="light"] .brand-logo.dark-icon,
[data-theme="light"] .themed-icon.dark-icon {
  display: none !important;
}
[data-theme="light"] .brand-logo.light-icon,
[data-theme="light"] .themed-icon.light-icon {
  display: inline-block !important;
}
[data-theme="light"] .featured-badge .themed-icon.light-icon {
  display: block !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .brand-logo.dark-icon,
  :root:not([data-theme]) .themed-icon.dark-icon {
    display: none !important;
  }
  :root:not([data-theme]) .brand-logo.light-icon,
  :root:not([data-theme]) .themed-icon.light-icon {
    display: inline-block !important;
  }
}

/* ---------- home footer ---------- */
.final-cta.finale .footer-top { margin-bottom: 52px; }
.footer-finale.final-cta.finale { padding-inline: clamp(20px, 4vw, 56px); }
.footer-finale.final-cta.finale .shared-footer { max-width: 1240px; margin-inline: auto; padding: 40px 0 28px; }
.final-cta.finale .shared-footer .footer-top { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr); gap: 64px; margin-bottom: 32px; }
.shared-footer .footer-brand { min-width: 0; }
.shared-footer .f-logo { min-height: 44px; margin-bottom: 12px; font-size: 24px; }
.shared-footer .f-cube { width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff50, 0 4px 16px -6px #499ef360; }
.shared-footer .f-cube img { width: 28px; height: 28px; }
.final-cta.finale .shared-footer .footer-brand p { margin-bottom: 8px; font-size: 15px; line-height: 1.65; }
.shared-footer .f-status { min-height: 44px; gap: 10px; padding: 0; border: 0; border-radius: 4px; color: #aeb7c5; font-family: inherit; font-size: 13px; letter-spacing: 0; }
.shared-footer .f-status > span:first-child { padding: 3px 7px; border: 1px solid var(--su-line); border-radius: 5px; color: #c8d0dc; font: 11px "JetBrains Mono", monospace; }
.shared-footer .f-status:hover { color: #8cc4fa; }
.footer-install { margin-top: 16px; }
.footer-install-label { display: block; margin-bottom: 10px; color: #aeb7c5; font-size: 12px; }
.shared-footer ul { margin: 0; padding: 0; list-style: none; }
.footer-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-stores a { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--su-line); border-radius: 9px; background: #ffffff03; color: #dbe1eb; font-size: 13px; transition: background .2s, border-color .2s; }
.footer-stores a:hover { background: #499ef314; border-color: #499ef380; }
.footer-stores img { flex: none; }
.final-cta.finale .shared-footer .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.shared-footer .footer-col h2 { margin: 5px 0 12px; color: #f1f3f7; font: 600 11px/1.5 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.final-cta.finale .shared-footer .footer-col a { display: flex; align-items: center; gap: 5px; min-height: 44px; max-width: 100%; margin: 0; padding-block: 8px; color: #aeb7c5; font-size: 14px; line-height: 1.5; }
.final-cta.finale .shared-footer .footer-col a::after { bottom: 6px; }
.final-cta.finale .shared-footer .footer-col a:hover { color: #fff; }
.shared-footer a:focus-visible { outline: 2px solid #8cc4fa; outline-offset: 4px; }
.shared-footer .featured-badges { display: grid; justify-items: center; gap: 18px; padding: 28px 0; border-top: 1px solid var(--su-line); }
.shared-footer .featured-caption { margin: 0; color: #aeb7c5; font: 600 11px/1.5 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.shared-footer .featured-badge-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 820px; }
.featured-badge-list li { min-width: 0; }
.featured-badge { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 10px 12px; border: 1px solid #ffffff0d; border-radius: 10px; background: #ffffff03; transition: background .2s, border-color .2s; }
.featured-badge:hover { background: #ffffff08; border-color: #499ef360; }
.featured-badge img { display: block; width: 100%; height: 44px; object-fit: contain; }
.final-cta.finale .shared-footer .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding-top: 16px; border-top: 1px solid var(--su-line); color: #aeb7c5; font-family: inherit; font-size: 12px; line-height: 1.7; letter-spacing: 0; text-transform: none; }
.final-cta.finale .shared-footer .footer-bottom p { max-width: none; margin: 0; color: inherit; font: inherit; }
.shared-footer .footer-legal { grid-column: 1 / -1; text-align: left; }
.footer-top-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #dbe1eb; }
.footer-top-link:hover { color: #8cc4fa; }
@media (max-width: 1000px) {
  .final-cta.finale .shared-footer .footer-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .shared-footer .footer-brand { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 32px; }
  .shared-footer .f-logo, .shared-footer .footer-brand > p, .shared-footer .f-status { grid-column: 1; justify-self: start; }
  .shared-footer .footer-install { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; }
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-finale.final-cta.finale .shared-footer { padding-top: 28px; }
  .shared-footer .footer-brand { display: block; }
  .shared-footer .footer-install { margin-top: 16px; }
  .final-cta.finale .shared-footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .shared-footer .footer-col:last-child { grid-column: 1 / -1; }
  .shared-footer .footer-col:last-child ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
  .shared-footer .featured-badge-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
  .featured-badge { min-height: 62px; padding: 8px; }
  .featured-badge img { height: 40px; }
}

/* ============================================================
   26. free / pro clarity — tier pills, feature matrix, 7-node
   constellation, denser pricing cards
   ============================================================ */

/* ---------- 26.1 tier pill component ---------- */
.tier-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px 2px; border-radius: 6px; white-space: nowrap;
  border: 1px solid transparent;
}
.tier-pill.is-free { color: #5fd6a8; background: rgba(69, 177, 131, .12); border-color: rgba(69, 177, 131, .34); }
.tier-pill.is-pro { color: #8cc4fa; background: rgba(73, 158, 243, .12); border-color: rgba(73, 158, 243, .34); }
.tier-pill.is-mixed { color: var(--su-ink); background: linear-gradient(90deg, rgba(69, 177, 131, .16), rgba(73, 158, 243, .18)); border-color: rgba(148, 163, 184, .34); }

/* constellation node chips */
.cx-node small { border: 1px solid transparent; }
.cx-node small.tier-pill.is-mixed { color: var(--su-ink); background: linear-gradient(90deg, rgba(69, 177, 131, .18), rgba(73, 158, 243, .2)); border-color: rgba(148, 163, 184, .34); }
.cx-node small.tier-pill.is-pro { color: #8cc4fa; background: rgba(73, 158, 243, .12); border-color: rgba(73, 158, 243, .34); }
/* detail-card tier tag follows the same system */
.platform-detail-head .mini-tag.tier-pill { border: 1px solid rgba(148, 163, 184, .34); background: linear-gradient(90deg, rgba(69, 177, 131, .16), rgba(73, 158, 243, .18)); color: var(--su-ink); }
/* marquee tags */
.plat-tag { background: rgba(73, 158, 243, .14); border: 1px solid rgba(73, 158, 243, .36); color: #8cc4fa; }
.plat-tag.is-mixed { background: rgba(69, 177, 131, .14); border-color: rgba(69, 177, 131, .38); color: #6fe0b8; }

/* ---------- 26.2 constellation: seven nodes, even spacing ---------- */
.cx-node.n1 { transform: translate(-50%, -50%) translate(0, -218px); }
.cx-node.n2 { transform: translate(-50%, -50%) translate(170px, -136px); }
.cx-node.n3 { transform: translate(-50%, -50%) translate(213px, 49px); }
.cx-node.n4 { transform: translate(-50%, -50%) translate(95px, 196px); }
.cx-node.n5 { transform: translate(-50%, -50%) translate(-95px, 196px); }
.cx-node.n6 { transform: translate(-50%, -50%) translate(-213px, 49px); }
.cx-node.n7 { transform: translate(-50%, -50%) translate(-170px, -136px); }

/* ---------- 26.3 platform-detail feature matrix ---------- */
.pd-matrix { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--su-line); }
.pd-matrix-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pd-tally { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--su-ink); white-space: nowrap; }
.pd-meter { flex: 1; min-width: 60px; height: 6px; border-radius: 99px; background: var(--su-panel-3); border: 1px solid var(--su-line-soft); overflow: hidden; }
.pd-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3fae7f, #56c99b); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.pd-features { list-style: none; display: grid; gap: 6px; }
.pd-features li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--su-panel-2); border: 1px solid var(--su-line-soft); font-size: 13.5px; font-weight: 500; color: var(--su-ink); }
.pd-features li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pd-features li.is-free::before { background: #45b183; box-shadow: 0 0 0 3px rgba(69, 177, 131, .16); }
.pd-features li.is-pro::before { background: var(--su-accent); box-shadow: 0 0 0 3px var(--su-accent-soft); }
.pd-features li .tier-pill { margin-left: auto; }

/* ---------- 26.5 pricing: stats, groups, meters, not-included, trust ---------- */
/* design.css lifts the featured plan 12px with a transform, which pushes its
   top, bottom and CTA out of alignment with the free plan (the grid already
   stretches both cards to equal height). The dark fill, blue border, badge
   and glow carry the emphasis, so the lift goes — desktop now matches the
   ≤1100px breakpoint, where the transform was already removed. */
.plan.featured { transform: none; }
/* the two CTAs must bottom-align exactly: the Gumroad button override is
   50px tall with 14px 20px padding, so match it on the plain CTA */
.plan .plan-cta { min-height: 50px; padding: 14px 20px; }
.pricing-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.pricing-stat { display: flex; flex-direction: column; gap: 3px; min-width: 170px; padding: 14px 20px 15px; border-radius: 18px; background: var(--su-panel-2); border: 1px solid var(--su-line-soft); }
.pricing-stat b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--su-ink); }
.pricing-stat span { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--su-muted); }
.plan-features .plan-group { margin-top: 14px; padding-bottom: 6px; border-bottom: 1px dashed var(--su-line); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--su-muted); }
.plan-features .plan-group:first-child { margin-top: 0; }
.plan-meter { margin-top: 16px; }
.plan-meter-label { display: block; margin-bottom: 7px; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--su-muted); }
.plan-meter-track { display: block; height: 8px; border-radius: 99px; background: var(--su-panel-3); border: 1px solid var(--su-line-soft); overflow: hidden; }
.plan-meter-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, #3fae7f, #56c99b); }
.plan-meter.is-pro .plan-meter-track i { background: linear-gradient(90deg, var(--su-accent-2), var(--su-accent)); }
.plan-note { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--su-muted); }
.plan-not { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px dashed var(--su-line); }
.plan-not-label { display: block; margin-bottom: 9px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--su-muted); }
.plan-not ul { list-style: none; display: grid; gap: 6px; }
.plan-not li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--su-muted); }
.plan-not li::before { content: "–"; position: absolute; left: 2px; top: 0; color: var(--su-muted); }
.pricing-trust { list-style: none; display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: center; margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--su-line); }
.pricing-trust li { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--su-muted); }
.pricing-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--su-accent); box-shadow: 0 0 0 3px var(--su-accent-soft); flex: none; }
.pricing-foot a { color: #8cc4fa; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .cx-node.n1 { transform: translate(-50%, -50%) translate(0, -178px); }
  .cx-node.n2 { transform: translate(-50%, -50%) translate(139px, -111px); }
  .cx-node.n3 { transform: translate(-50%, -50%) translate(174px, 40px); }
  .cx-node.n4 { transform: translate(-50%, -50%) translate(77px, 160px); }
  .cx-node.n5 { transform: translate(-50%, -50%) translate(-77px, 160px); }
  .cx-node.n6 { transform: translate(-50%, -50%) translate(-174px, 40px); }
  .cx-node.n7 { transform: translate(-50%, -50%) translate(-139px, -111px); }
}
@media (max-width: 700px) {
  .pricing-stats { gap: 10px; }
  .pricing-stat { min-width: 140px; flex: 1 1 140px; }
}

/* ---------- site-wide review: navigation, comparisons and reading ---------- */
.header-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.menu-btn, .checkout-close { min-width: 44px; min-height: 44px; }
.ctrl-chip { min-height: 44px; }
.motion-control, .mark-seen-demo { min-height: 44px; }
.header-nav a[aria-current="page"] { color: var(--su-ink); background: var(--su-accent-soft); }
.shared-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.menu-open .to-top, .checkout-open .to-top { visibility: hidden; pointer-events: none; }
.plan .plan-features { align-content: start; }
.plan .plan-features .plan-group { padding-left: 0; }
.plan .plan-features .plan-group::before { display: none; }
.plan .plan-not ul { margin: 0; }
.plan .plan-not li { display: block; padding-left: 20px; }
.plan .plan-not li::before { content: "–"; position: absolute; left: 0; top: 0; width: auto; height: auto; margin: 0; background: none; border-radius: 0; }
.plan .plan-cta { margin-top: 24px; }
.plan .plan-features { gap: 12px; }
.pricing-foot { max-width: 850px; font-family: "Funnel Display", system-ui, sans-serif; font-size: 13px; line-height: 1.7; letter-spacing: 0; }
.plan-note, .plan-not-label, .pricing-stat span { font-size: 11px; line-height: 1.7; }
.platform-detail > p { min-height: 0; }
.doc-toc { margin: -16px 0 40px; padding: 20px 24px; border: 1px solid var(--su-line); border-radius: 20px; background: var(--su-panel); }
.doc-toc > span { display: block; margin-bottom: 8px; color: var(--su-muted); font: 600 11px/1.6 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.doc-toc ul { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; padding: 0; margin: 0; }
.doc-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--su-ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--su-line); text-underline-offset: 5px; }
.doc-toc a:hover { color: var(--su-accent); }
.doc-toc + .doc-section { margin-top: 40px; }
.doc-table { min-width: 560px; }
.doc-table th, .doc-table td { overflow-wrap: anywhere; }
.doc-table-wrap:focus-visible { outline: 2px solid var(--su-accent); outline-offset: 5px; }
.err-actions { align-items: center; }
.err-actions .demo-btn { min-height: 50px; padding-block: 13px; }
.checkout-external { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: #a9c9ef; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.checkout-frame { margin-top: 8px; }
@media (min-width: 1101px) {
  .constellation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1240px; margin-inline: auto; padding-top: 0; }
  .cx-stage { width: 100%; min-width: 0; margin: 0; }
  .constellation .platform-detail { width: 100%; margin: 0; min-height: 520px; }
}
@media (min-width: 1101px) and (max-width: 1250px) {
  .cx-stage { height: 510px; }
  .cx-ring.r1 { width: 250px; height: 250px; }
  .cx-ring.r2 { width: 400px; height: 400px; }
  .cx-node.n1 { transform: translate(-50%, -50%) translate(0, -178px); }
  .cx-node.n2 { transform: translate(-50%, -50%) translate(139px, -111px); }
  .cx-node.n3 { transform: translate(-50%, -50%) translate(174px, 40px); }
  .cx-node.n4 { transform: translate(-50%, -50%) translate(77px, 160px); }
  .cx-node.n5 { transform: translate(-50%, -50%) translate(-77px, 160px); }
  .cx-node.n6 { transform: translate(-50%, -50%) translate(-174px, 40px); }
  .cx-node.n7 { transform: translate(-50%, -50%) translate(-139px, -111px); }
}
@media (max-width: 680px) {
  .cx-stage { gap: 24px 10px; }
  .cx-hub { width: auto; height: auto; display: flex; flex-direction: row; gap: 12px; margin: 0 auto 6px; padding: 12px 18px; border-radius: 18px; box-shadow: var(--su-inset); }
  .cx-hub img { width: 36px; height: 36px; }
  .cx-hub span { position: static; margin: 0; font-size: 11px; }
  .cx-node.n7 { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
  .cx-node.n7 span, .cx-node.n7 small { margin: 0; }
  .cx-node.n7 b { width: 44px; height: 44px; }
  .doc-toc { padding: 16px 20px; }
  .doc-toc ul { gap: 0 18px; }
}
/* ---------- targeted smooth animations & mobile install bar ---------- */
.ambient-1 { animation: floatBlob 14s ease-in-out infinite alternate; }
.ambient-2 { animation: floatBlobReverse 18s ease-in-out infinite alternate; }
@keyframes floatBlob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 25px) scale(1.08); }
}
@keyframes floatBlobReverse {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-25px, -30px) scale(1.06); }
}

.live-dot { animation: pulseDot 2s infinite; }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(69, 177, 131, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(69, 177, 131, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 177, 131, 0); }
}

.platform-detail {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.platform-detail:hover { border-color: rgba(73, 158, 243, 0.35); }

.pd-features li {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.pd-features li:hover {
  transform: translateX(3px);
  background: var(--su-panel-3);
}

/* Mobile sticky install bar */
.mobile-install-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  padding: 12px 20px;
  background: rgba(11, 13, 18, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--su-line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  animation: slideUpBar 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes slideUpBar {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.mobile-install-content {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 600px; margin: 0 auto;
}
.mobile-install-text {
  display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: var(--su-ink);
}
.mobile-install-text small { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--su-muted); font-weight: 400; }
.mobile-install-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 99px;
  background: linear-gradient(180deg, var(--su-accent) 0%, var(--su-accent-2) 100%);
  color: var(--su-on-accent);
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 700; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(73, 158, 243, 0.4);
  text-decoration: none; white-space: nowrap;
}
@media (max-width: 768px) {
  .mobile-install-bar { display: block; }
  body { padding-bottom: 76px; }
}