/*
 * Marketing site design system (docs/SITE-DESIGN.md, style guide at /design/).
 * Neutral and blue tokens repeat the dashboard's (apps/dashboard/src/index.css), so the site reads as the same product.
 * CSP: style-src 'self', img-src 'self' data:. So no JS, no inline styles, no web fonts; icons are data: SVG masks.
 */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Surfaces and text */
  --bg: #f7f8fa;
  --fg: #11161d;
  --card: #ffffff;
  --surface: #eef1f6; /* quiet panels, stat tiles, table head */
  --muted: #4a5565; /* secondary text */
  --line: #d5dbe5; /* decorative borders */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.9);

  /* Action */
  --primary: #1d4ed8;
  --primary-strong: #1e3a8a;
  --on-primary: #ffffff;
  --accent: #e0e7f5; /* icon tiles, highlighted column */
  --ring: #1d4ed8;

  /* Status: text on its -soft background */
  --ok: #166534;
  --ok-soft: #dcfce7;
  --warn: #8a3b0a;
  --warn-soft: #fef0c7;
  --info: #1e40af;
  --info-soft: #dbeafe;

  /* Decoration */
  --glow-a: rgba(29, 78, 216, 0.16);
  --glow-b: rgba(14, 165, 233, 0.14);
  --sky: #0ea5e9;

  /* Closing band */
  --band-a: #1d4ed8;
  --band-b: #1e3a8a;
  --on-band: #ffffff;
  --on-band-muted: #dbe6ff;

  /* Type scale */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.75rem, 4.5vw, 2.5rem);
  --step-4: clamp(2.25rem, 7vw, 3.75rem);

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --section: clamp(3.5rem, 9vw, 6rem);

  /* Shape and depth */
  --r-sm: 0.5rem;
  --r: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(17, 22, 29, 0.04), 0 4px 16px rgba(17, 22, 29, 0.05);
  --shadow-lift: 0 2px 4px rgba(17, 22, 29, 0.05), 0 12px 32px rgba(17, 22, 29, 0.08);
  --shadow-pop: 0 4px 8px rgba(17, 22, 29, 0.05), 0 24px 64px rgba(29, 78, 216, 0.16);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #e8ebf1;
    --card: #151b24;
    --surface: #1a222d;
    --muted: #a6b0c0;
    --line: #2b3544;
    --glass: rgba(21, 27, 36, 0.72);
    --glass-line: rgba(255, 255, 255, 0.08);

    --primary: #7aa7ff;
    --primary-strong: #a9c6ff;
    --on-primary: #0b1220;
    --accent: #263245;
    --ring: #7aa7ff;

    --ok: #86efac;
    --ok-soft: #12301d;
    --warn: #fcd34d;
    --warn-soft: #36270a;
    --info: #9cc0ff;
    --info-soft: #14284f;

    --glow-a: rgba(122, 167, 255, 0.18);
    --glow-b: rgba(56, 189, 248, 0.1);
    --sky: #38bdf8;

    --band-a: #1e3a8a;
    --band-b: #172554;
    --on-band: #ffffff;
    --on-band-muted: #cfe0ff;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

/* Icons: stroke SVGs used as masks, so they take currentColor. Set --i with an .i-* class. */
.i-chart {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18M7 15l4-4 3 3 6-6'/%3E%3C/svg%3E");
}
.i-activity {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
}
.i-flag {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
}
.i-link {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3A4 4 0 0 0 13 5.3l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.7l1-1'/%3E%3C/svg%3E");
}
.i-send {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
}
.i-shield {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E");
}
.i-clock {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.i-users {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-3.5 3-6 7-6s7 2.5 7 6M16 4.5a3.5 3.5 0 0 1 0 7M18 14c2.4.6 4 3 4 6'/%3E%3C/svg%3E");
}
.i-download {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E");
}
.i-page {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}
.i-target {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
}
.i-bolt {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
}
.i-check {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.i-x {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.i-plus {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem; /* anchors clear the sticky bar (two rows on phones) */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--step-0) / 1.6 var(--font);
  overflow-wrap: break-word;
}
h1,
h2,
h3,
h4 {
  line-height: 1.15;
  margin: 0 0 var(--s2);
  color: var(--fg);
  text-wrap: balance;
}
h1 {
  font-size: var(--step-4);
  letter-spacing: -0.035em;
  font-weight: 750;
}
h2 {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  font-weight: 700;
}
h3 {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  font-weight: 650;
}
p {
  margin: 0;
  color: var(--muted);
}
a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
code {
  font-family: var(--mono);
  font-size: 0.9em;
}
img,
svg {
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 10;
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-lift);
}
.skip:focus {
  top: var(--s3);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--s4);
}
@media (min-width: 40rem) {
  .wrap {
    padding: 0 var(--s5);
  }
}
.section {
  padding-block: var(--section);
}
.section.tint {
  background: var(--surface);
}
.section-head {
  max-width: 44rem;
  margin: 0 auto var(--s7);
  text-align: center;
}
.section-head.left {
  margin-left: 0;
  text-align: left;
}
.lede {
  font-size: var(--step-1);
  max-width: 62ch;
  margin-top: var(--s4);
}
.section-head .lede {
  margin-inline: auto;
}
.section-head.left .lede {
  margin-inline: 0;
}
.split {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
  }
}
.stack > * + * {
  margin-top: var(--s4);
}

/* ---------- Nav bar ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s4);
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  color: var(--fg);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.mark-bg {
  fill: var(--primary);
}
.mark-line {
  fill: none;
  stroke: var(--on-primary);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark-dot {
  fill: var(--on-primary);
}
.bar-actions {
  display: flex;
  gap: var(--s2);
  margin-left: auto;
}
/* Phones: links wrap to a second full-width row, still 44px tall. */
.bar-links {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s4);
  width: 100%;
  border-top: 1px solid var(--line);
}
.bar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
}
.bar-links a:hover {
  color: var(--fg);
  text-decoration: underline;
}
@media (min-width: 52rem) {
  .bar-links {
    order: 0;
    width: auto;
    border-top: 0;
    margin-left: auto;
    gap: var(--s5);
  }
  .bar-actions {
    margin-left: var(--s2);
  }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: 0 var(--s5);
  border: 1px solid var(--primary);
  border-radius: var(--r);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(17, 22, 29, 0.1);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}
.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.button.ghost {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}
.button.small {
  min-height: 2.75rem; /* still a 44px touch target */
  padding: 0 var(--s4);
  font-size: var(--step--1);
}
.button.large {
  min-height: 3.5rem;
  padding: 0 var(--s6);
  font-size: var(--step-1);
  border-radius: var(--r-lg);
}
.button.inverse {
  background: var(--on-band);
  border-color: var(--on-band);
  color: var(--band-a);
}
.button.on-band {
  background: transparent;
  border-color: var(--on-band-muted);
  color: var(--on-band);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.section-head .actions {
  justify-content: center;
}

/* ---------- Eyebrow and badge ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--primary-strong);
  font-size: var(--step--1);
  font-weight: 650;
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primary);
}
.eyebrow.plain {
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--step--2);
}
.eyebrow.plain::before {
  display: none;
}
/* Status badge: always words, colour is a second signal. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.125rem var(--s2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--step--2);
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.badge.info {
  background: var(--info-soft);
  color: var(--info);
}

/* ---------- Hero ---------- */
.hero-bg {
  background:
    radial-gradient(60rem 32rem at 90% -10%, var(--glow-a), transparent 60%),
    radial-gradient(40rem 26rem at -10% 10%, var(--glow-b), transparent 60%), var(--bg);
}
.hero {
  display: grid;
  gap: var(--s7);
  align-items: center;
  padding-block: var(--s8) var(--section);
}
@media (min-width: 60rem) {
  .hero {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s8);
    padding-top: 5.5rem;
  }
}
.hero h1 {
  max-width: 18ch;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--step--1);
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.hero-points li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--ok);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.hero-points,
.yes {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

/* ---------- Dashboard mockup (decorative; mark it aria-hidden or give it a label) ---------- */
.mock {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.mock-top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mock-dots {
  display: flex;
  gap: 0.375rem;
}
.mock-dots span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--line);
}
.mock-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0.125rem var(--s3);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--muted);
  font-size: var(--step--2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-body {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
}
.mock-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--fg);
  font-size: var(--step--1);
  font-weight: 650;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--s3);
}
.stat {
  padding: var(--s3);
  border-radius: var(--r);
  background: var(--surface);
}
.stat-label,
.stat-hint {
  display: block;
  color: var(--muted);
  font-size: var(--step--2);
}
.stat-value {
  display: block;
  color: var(--fg);
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* A rising trace, the logo's shape drawn as a chart. */
.spark {
  height: 3.5rem;
  background: linear-gradient(90deg, var(--primary), var(--sky));
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 56' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 50 30 40 52 44 80 30 104 34 132 18 156 22 198 6'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 56' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 50 30 40 52 44 80 30 104 34 132 18 156 22 198 6'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.feed {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feed li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.feed li:first-child {
  border-top: 0;
}
.feed-what {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--fg);
}
.feed-what small {
  display: block;
  color: var(--muted);
  font-size: var(--step--2);
}
.feed-time {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Cards, bento, icon tiles ---------- */
.cards,
.bento {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
@media (min-width: 40rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento .wide {
    grid-column: span 2;
  }
}
@media (min-width: 64rem) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  min-width: 0;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.card h3 {
  margin-top: var(--s4);
}
.card > h3:first-child {
  margin-top: 0;
}
.card.glass {
  border-color: var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Glassy illustration area at the top of a card: soft gradient, big icon. */
.art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background:
    radial-gradient(70% 90% at 20% 0%, var(--glow-a), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, var(--glow-b), transparent 70%), var(--surface);
  overflow: hidden;
}
.art::after {
  content: "";
  position: absolute;
  inset: 22% 30%;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--shadow-lift);
}
.art .icon {
  position: relative;
  z-index: 1;
}
.icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--primary);
}
.icon::before {
  content: "";
  width: 50%;
  height: 50%;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icon.large {
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-lg);
}
.icon.bare {
  width: 1.25rem;
  height: 1.25rem;
  background: none;
}
.icon.bare::before {
  width: 100%;
  height: 100%;
}

/* ---------- Checklist ---------- */
.checks {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checks li {
  position: relative;
  padding-left: 2.25rem;
  color: var(--muted);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ok-soft);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.4rem;
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Steps (numbered journey) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--s4);
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--accent);
}
@media (min-width: 64rem) {
  .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--s5) + 1.25rem);
    left: calc(var(--s5) + 3.25rem);
    right: calc(var(--s4) * -1);
    border-top: 2px dashed var(--line);
  }
}

/* ---------- Comparison table ---------- */
.table-scroll {
  overflow-x: auto; /* the table scrolls, never the page */
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.compare caption {
  padding: var(--s4) var(--s5) 0;
  color: var(--muted);
  text-align: left;
}
.compare th,
.compare td {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  border-top: 0;
  background: var(--surface);
  color: var(--fg);
  font-weight: 650;
}
.compare tbody th {
  color: var(--fg);
  font-weight: 550;
}
.compare td {
  color: var(--muted);
}
.compare .ours {
  background: var(--accent);
  color: var(--fg);
}
.compare thead .ours {
  background: var(--primary);
  color: var(--on-primary);
}
.yes,
.no {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.yes::before,
.no::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.yes::before {
  background: var(--ok);
}
.no {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.no::before {
  background: var(--muted);
}

/* ---------- FAQ accordion ---------- */
.faq {
  display: grid;
  gap: var(--s3);
  max-width: 48rem;
  margin: 0 auto;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 3.5rem;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-lg);
  color: var(--fg);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  transition: transform 0.2s ease;
}
.faq summary {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details > :not(summary) {
  padding: 0 var(--s5) var(--s4);
}

/* ---------- Closing CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--s8) var(--s5);
  border-radius: var(--r-xl);
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 70%),
    /* above 8% the muted band text drops under 4.5:1 */ linear-gradient(135deg, var(--band-a), var(--band-b));
  color: var(--on-band);
  text-align: center;
  box-shadow: var(--shadow-pop);
}
.cta-band h2 {
  color: var(--on-band);
}
.cta-band p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--on-band-muted);
  font-size: var(--step-1);
}
.cta-band .actions {
  justify-content: center;
}
.cta-band :focus-visible {
  outline-color: var(--on-band);
}

/* ---------- Footer ---------- */
.foot {
  margin-top: var(--section);
  padding-block: var(--s7) var(--s6);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s6);
}
.foot h3 {
  font-size: var(--step--1);
}
.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
}
.foot li a:hover {
  color: var(--fg);
}
.foot-note {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

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