/* Miru — public site design system.
   Self-hosted fonts only: no CDN, no third-party assets, nothing that observes a
   visitor. Three deliberate typefaces give the page identity instead of the
   system-font default that reads as generic:
     - Space Grotesk (display/headings) — a grotesk with real character
     - Instrument Sans (body) — clean neo-grotesque, warm, high legibility
     - JetBrains Mono (prices, SKUs, timestamps) — the data voice of a monitor
   All OFL-licensed, subset to latin, ~15KB each.

   Craft notes:
   - one accent hue used SPARINGLY as a true accent, not on everything
   - a real modular type scale and a single spacing rhythm
   - subtle, purposeful motion; honours reduced-motion
   - the hero shows product UI (alert cards per channel), not an illustration */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}

:root {
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* Neutrals — a deep blue-black (not pure grey), layered so panels read as
     depth. The slight blue in the base is what keeps the teal accent from
     looking bolted on, and stops the "default dark SaaS grey" look. */
  --bg:        #080a0f;
  --bg-2:      #0c0f16;
  --panel:     #12151d;
  --panel-2:   #171b25;
  --line:      #232a37;
  --line-soft: #1a202b;

  --ink:       #f2f5fa;
  --ink-2:     #aeb7c6;
  --muted:     #737e90;

  /* Brand: a single teal-leaning cyan as the true accent, with a blue companion.
     Used sparingly — a CTA, a live dot, one accent bar — not on every element. */
  --brand:     #34d3b4;      /* teal — the primary accent */
  --brand-2:   #6ea8ff;      /* blue — the companion, for gradients/links */
  --brand-ink: #05221c;      /* readable text on the teal button */
  --grad: linear-gradient(120deg, #6ea8ff 0%, #34d3b4 100%);

  --good:      #4ec98a;
  --warn:      #e8c34a;

  /* Type scale (1.25 minor-third), spacing scale (4px base). */
  --step--1: .833rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  2.1rem;
  --step-4:  2.9rem;
  --step-5:  3.9rem;

  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 68rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Atmospheric glow, so the page has depth without an image. */
  background-image:
    radial-gradient(60rem 40rem at 72% -10%, rgba(110,168,255,.10), transparent 60%),
    radial-gradient(50rem 40rem at 10% 8%, rgba(86,226,198,.06), transparent 55%);
  background-attachment: fixed;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(11, 13, 18, .72);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand svg { display: block; width: 1.85rem; height: 1.85rem; }
nav.links { display: flex; align-items: center; gap: var(--sp-6); }
nav.links a {
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .01em;
}
nav.links a:hover { color: var(--ink); }
nav.links .nav-cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem 1rem;
  color: var(--ink);
  background: var(--panel);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
nav.links .nav-cta:hover { border-color: var(--brand); background: var(--panel-2); }
@media (max-width: 40rem) {
  nav.links a:not(.nav-cta) { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--step-0);
  border-radius: 10px;
  padding: .8rem 1.5rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary {
  background: var(--grad);
  color: var(--brand-ink);
  box-shadow: 0 8px 24px -8px rgba(110, 168, 255, .5);
}
.btn-primary:hover {
  transform: translateY(-2px);
  color: var(--brand-ink);
  box-shadow: 0 14px 34px -8px rgba(110, 168, 255, .6);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--ink); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: var(--sp-24) 0 var(--sp-16); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 56rem) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--sp-12); }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: .35rem .85rem;
}
.eyebrow .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(78, 201, 138, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 201, 138, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(78, 201, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 201, 138, 0); }
}
h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: var(--sp-6) 0 var(--sp-4);
  font-weight: 700;
}
h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 56rem) { h1 { font-size: var(--step-4); } }
.lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 34rem;
  margin: 0 0 var(--sp-8);
}
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero-note { margin-top: var(--sp-6); color: var(--muted); font-size: var(--step--1); }

/* ── Channel showcase (the hero visual: a slideshow of alert mechanisms) ─── */
/* The same alert, shown as it actually lands on each channel. This is the motif
   the desktop app and web app reuse: a device frame, channel tabs, and a stack of
   cards in the blue/teal system. No image, no AI art — real UI in markup. */
.showcase { display: flex; flex-direction: column; gap: var(--sp-4); }

.chan-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.chan-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: var(--step--1); font-weight: 600;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .85rem;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease);
}
.chan-tab:hover { color: var(--ink); border-color: #33405a; }
.chan-tab[aria-selected="true"] {
  color: var(--brand-ink);
  background: var(--grad);
  border-color: transparent;
}
.chan-tab svg { width: 1rem; height: 1rem; }
.chan-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.device {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-4);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8),
              0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.device-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-4);
  flex: none;
}
.device-bar i {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #333b48; display: inline-block;
}
.device-bar .where { margin-left: auto; color: var(--muted); font-size: .75rem; }

/* The slide area is a fixed-height stage so switching channels does not resize
   the frame (jarring), and each slide is CENTERED within it so a short slide
   (Push, SMS) sits in the middle instead of pinned to the top with dead space
   below. 17rem holds the tallest slide (the Discord/Slack embed) comfortably. */
.stage {
  position: relative;
  min-height: 17rem;
  display: flex;
}
.slide {
  display: none;
  width: 100%;
  margin: auto 0;            /* vertical centering within the stage */
}
.slide.active { display: block; animation: slidein .45s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }

/* A generic alert card, reused and re-skinned per channel. */
.alert-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.alert-card:last-child { margin-bottom: 0; }
.thumb {
  width: 2.75rem; height: 2.75rem; border-radius: 9px;
  background: linear-gradient(135deg, #222a38, #171d27);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.alert-meta { min-width: 0; }
.alert-title {
  font-weight: 600; font-size: var(--step-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-sub { color: var(--muted); font-size: var(--step--1);
  font-family: var(--font-mono); letter-spacing: -.02em; }
.alert-sub .rt { color: var(--ink-2); }
.pill {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(78, 201, 138, .12);
  color: var(--good);
  border: 1px solid rgba(78, 201, 138, .3);
  white-space: nowrap;
}
.pill.drop { background: rgba(232, 195, 74, .12); color: var(--warn);
  border-color: rgba(232, 195, 74, .3); }

/* ── Per-channel chrome, so each slide reads as that channel ────────────── */
/* Chat-style header used by Discord/Slack slides. */
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.chat-ava {
  width: 2.2rem; height: 2.2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .95rem; flex: none;
}
.chat-ava.discord { background: #5865F2; border-radius: 50%; }
.chat-ava.slack { background: #4A154B; }
.chat-name { font-weight: 700; }
.chat-name .bot {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  background: #5865F2; color: #fff; padding: .1rem .35rem;
  border-radius: 4px; margin-left: .4rem; vertical-align: middle;
}
.chat-name .bot.slk { background: #611f69; }
.chat-time { color: var(--muted); font-size: .72rem; margin-left: .5rem; }

/* Discord/Slack rich embed — left accent bar in the brand gradient. */
.embed {
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  background: #12151a;
  border-radius: 4px;
  padding: var(--sp-3) var(--sp-4);
  display: grid; grid-template-columns: 1fr 3.5rem; gap: var(--sp-4);
  align-items: start;
}
.embed h4 { margin: 0 0 .3rem; font-size: var(--step-0); }
.embed h4 a { color: var(--brand); }
.embed .fields { display: flex; gap: var(--sp-6); margin-top: var(--sp-3); }
.embed .field .k { color: var(--muted); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; }
.embed .field .v { font-weight: 500; font-size: var(--step--1);
  font-family: var(--font-mono); }
.embed .art {
  width: 3.5rem; height: 3.5rem; border-radius: 8px;
  background: linear-gradient(135deg, #222a38, #171d27);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

/* Email slide — a mini inbox message. */
.email-head { margin-bottom: var(--sp-3); }
.email-subj { font-weight: 700; font-size: var(--step-1); }
.email-from { color: var(--muted); font-size: var(--step--1); margin-top: .15rem; }
.email-from b { color: var(--ink-2); font-weight: 600; }
.email-cta {
  display: inline-block; margin-top: var(--sp-4);
  background: var(--grad); color: var(--brand-ink);
  font-weight: 700; font-size: var(--step--1);
  padding: .5rem 1rem; border-radius: 8px;
}

/* Phone frames for push + SMS. */
.phone {
  max-width: 17rem; margin: 0 auto;
  background: #05070b; border: 1px solid var(--line);
  border-radius: 22px; padding: var(--sp-4) var(--sp-3);
}
.phone .statusbar {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: .68rem; padding: 0 .3rem var(--sp-3);
}
.push-note {
  background: rgba(21, 25, 34, .9);
  border: 1px solid var(--line);
  border-radius: 14px; padding: var(--sp-3) var(--sp-4);
  display: grid; grid-template-columns: 1.8rem 1fr; gap: var(--sp-3);
  align-items: start;
}
.push-note .app { width: 1.8rem; height: 1.8rem; border-radius: 6px;
  background: var(--grad); display: flex; align-items: center;
  justify-content: center; color: var(--brand-ink); font-weight: 800;
  font-size: .8rem; }
.push-note .head { display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--muted); }
.push-note .body { font-size: var(--step--1); margin-top: .15rem; }
.push-note .body b { color: var(--ink); }

.sms-bubble {
  background: #12151a; border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1); line-height: 1.5;
  max-width: 90%;
  font-family: var(--font-mono);
}
.sms-bubble .sender { color: var(--brand-2); font-weight: 700; }
.sms-from { color: var(--muted); font-size: .68rem; text-align: center;
  margin-bottom: var(--sp-3); }

/* Desktop OS notification toast. */
.toast {
  background: rgba(21, 25, 34, .96);
  border: 1px solid var(--line);
  border-radius: 12px; padding: var(--sp-4);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-3);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
.toast .app { width: 2.4rem; height: 2.4rem; border-radius: 8px;
  background: var(--grad); display: flex; align-items: center;
  justify-content: center; color: var(--brand-ink); font-weight: 800; }
.toast .head { display: flex; justify-content: space-between; font-size: .7rem;
  color: var(--muted); }
.toast .title { font-weight: 700; margin: .15rem 0; }
.toast .body { color: var(--ink-2); font-size: var(--step--1); }

/* ── Trust bar ──────────────────────────────────────────────────────────── */
.trust {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--sp-8) 0;
  background: var(--bg-2);
}
.trust .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-6);
}
.trust .label { color: var(--muted); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  background: var(--panel);
}

/* ── Sections ───────────────────────────────────────────────────────────── */
section.block { padding: var(--sp-24) 0; }
.section-head { max-width: 40rem; margin-bottom: var(--sp-12); }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
  font-weight: 700;
}
.section-head p { color: var(--ink-2); font-size: var(--step-1); margin: 0; }

/* Feature grid */
.grid { display: grid; gap: var(--sp-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) { .grid-3 { grid-template-columns: 1fr; } }
.feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-8);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); border-color: #33405a; }
.feature .ico {
  width: 2.6rem; height: 2.6rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(110, 168, 255, .12);
  border: 1px solid rgba(110, 168, 255, .25);
  margin-bottom: var(--sp-4);
}
.feature .ico svg { width: 1.4rem; height: 1.4rem; stroke: var(--brand); }
.feature h3 { font-family: var(--font-display); font-size: var(--step-1);
  margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: -.01em; }
.feature p { color: var(--ink-2); margin: 0; font-size: var(--step-0); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute; top: -1rem; left: var(--sp-6);
  font-size: var(--step-2); font-weight: 800;
  background: var(--grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.step h3 { font-size: var(--step-1); margin: var(--sp-2) 0 var(--sp-2); }
.step p { color: var(--ink-2); margin: 0; }

/* "Coming soon" badge, used on not-yet-shipped sections. Honest, not hidden. */
.soon {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-2);
  border: 1px solid rgba(86, 226, 198, .35);
  background: rgba(86, 226, 198, .08);
  border-radius: 999px; padding: .25rem .7rem;
  vertical-align: middle; margin-left: .6rem;
}

/* Watch-profiles showcase: a two-column split, copy + a mock profile panel. */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 56rem) { .split { grid-template-columns: 1fr; gap: var(--sp-12); } }
.split ul { list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
.split li { display: flex; gap: .6rem; align-items: flex-start;
  color: var(--ink-2); margin: var(--sp-4) 0; }
.split li svg { width: 1.15rem; height: 1.15rem; stroke: var(--brand-2);
  flex: none; margin-top: .25rem; }

.profile-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-6);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.8);
}
.profile-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2);
  margin-bottom: var(--sp-3);
}
.profile-row:last-child { margin-bottom: 0; }
.profile-row .pico {
  width: 2.4rem; height: 2.4rem; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: linear-gradient(135deg, #222a38, #171d27); border: 1px solid var(--line);
}
.profile-row .pmeta { flex: 1; min-width: 0; }
.profile-row .pname { font-weight: 600; }
.profile-row .psub { color: var(--muted); font-size: var(--step--1); }
.profile-row .pchan { display: flex; gap: .3rem; }
.profile-row .pchan span {
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  color: var(--ink-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 5px; padding: .12rem .4rem;
}
.toggle {
  width: 2.4rem; height: 1.35rem; border-radius: 999px; flex: none;
  background: var(--grad); position: relative;
}
.toggle.off { background: #2a323f; }
.toggle::after {
  content: ""; position: absolute; top: 2px; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: #fff; right: 2px;
}
.toggle.off::after { right: auto; left: 2px; background: #7f8a9c; }

/* Pricing */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 48rem) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-8);
}
.tier.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset,
  0 30px 60px -30px rgba(110, 168, 255, .35); }
.tier .name { font-weight: 700; font-size: var(--step-1); }
.tier .tag { color: var(--brand-2); font-size: var(--step--1); font-weight: 600; }
.tier ul { list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
.tier li { display: flex; gap: .6rem; align-items: flex-start;
  color: var(--ink-2); margin: var(--sp-3) 0; }
.tier li svg { width: 1.1rem; height: 1.1rem; stroke: var(--good); flex: none;
  margin-top: .25rem; }

/* FAQ */
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-6);
  margin: var(--sp-3) 0;
  background: var(--panel);
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: #33405a; }
.faq summary {
  cursor: pointer; font-weight: 600; padding: var(--sp-4) 0;
  list-style: none; display: flex; justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: var(--step-2);
  line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--ink-2); margin: 0 0 var(--sp-4); }

/* CTA band */
.cta-band {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-16) var(--sp-8);
  background-image: radial-gradient(40rem 20rem at 50% -20%,
    rgba(110, 168, 255, .15), transparent 60%);
}
.cta-band h2 { font-size: var(--step-4); }
.cta-band p { color: var(--ink-2); font-size: var(--step-1); margin: 0 auto var(--sp-8);
  max-width: 34rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line-soft);
  padding: var(--sp-12) 0 var(--sp-16);
  margin-top: var(--sp-16);
  color: var(--muted);
  font-size: var(--step--1);
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-6); }
footer a { color: var(--ink-2); margin-right: var(--sp-6); }
footer a:hover { color: var(--ink); }
footer .brand { font-size: var(--step-0); }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal { padding: var(--sp-16) 0; }
.legal .wrap { max-width: 48rem; }
.legal h1 { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.legal .updated { color: var(--muted); margin-bottom: var(--sp-8); }
.legal h2 { font-size: var(--step-2); margin: var(--sp-12) 0 var(--sp-3); }
.legal p, .legal li { color: var(--ink-2); }
.legal .sample {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-4);
  white-space: pre-wrap; word-break: break-word; font-size: var(--step--1);
  color: var(--ink);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}