/**
 * Contact Convoy — website design system (v2)
 * Tokens + components for all new marketing pages. Docs: /DESIGN_SYSTEM.md
 *
 * Load order on a page:  site-nav.css (header chrome)  →  site.css
 * Light/dark follows prefers-color-scheme. The phone mockups stay light because
 * the Android app ships a light theme only.
 */

/* ============================================================
   0. Font (self-hosted Outfit variable, OFL — assets/fonts/)
   ============================================================ */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

  /* Brand (fixed) */
  --cc-midnight: #0b1120;
  --cc-indigo: #2e3192;
  --cc-indigo-deep: #1e1b4b;
  --cc-purple: #7b61ff;
  --cc-cyan: #1bffff;
  --cc-grad: linear-gradient(120deg, #2e3192 0%, #7b61ff 55%, #1bffff 100%);
  --cc-grad-night: linear-gradient(160deg, #0b1120 0%, #1e1b4b 55%, #2e3192 100%);

  /* Accessible derivatives (AA on the surfaces they are used on) */
  --grad-button: linear-gradient(120deg, #2e3192 0%, #6a4df5 100%); /* white text ≥ 5.2:1 */
  --grad-text: linear-gradient(120deg, #2e3192 0%, #6a4df5 55%, #0e7490 100%); /* large text on light ≥ 3:1 */

  /* Semantic colors — light */
  --bg: #f8fafc;
  --bg-tint: #eef0ff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-inverse: #0b1120;
  --text: #0b1120;
  --text-2: #334155; /* 10.4:1 on white */
  --text-muted: #475569; /* 7.5:1 on white — replaces the failing #94A3B8 */
  --text-inverse: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #5b3fe6; /* purple for text/links: 6.3:1 on white */
  --accent-bg: #7b61ff;
  --accent-soft: rgba(123, 97, 255, 0.1);
  --focus: #5b3fe6;
  --success: #047857;
  --success-soft: #d1fae5;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* Lead status colors (match the app's HOT/WARM/COLD/DONE, darkened for AA) */
  --st-hot: #b91c1c;
  --st-hot-bg: #fee2e2;
  --st-warm: #b45309;
  --st-warm-bg: #fef3c7;
  --st-cold: #1d4ed8;
  --st-cold-bg: #dbeafe;
  --st-done: #047857;
  --st-done-bg: #d1fae5;

  /* Type */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; /* inside phone mockups */
  --fs-xs: 0.8125rem; /* 13 */
  --fs-sm: 0.875rem; /* 14 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.1875rem; /* 19 */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.35rem + 2.2vw, 2.875rem);
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem);
  /* Named type scale: display (hero) > h1 > h2 > h3 > body > small */
  --fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
  --fs-h1: var(--fs-4xl);
  --fs-h2: var(--fs-3xl);
  --fs-h3: var(--fs-xl);
  --fs-body: var(--fs-base);
  --fs-small: var(--fs-sm);
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --tracking-tight: -0.025em;

  /* Space (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  --maxw: 1180px;
  --maxw-narrow: 760px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-md: 0 8px 24px -8px rgba(15, 23, 42, 0.16);
  --sh-lg: 0 24px 60px -20px rgba(46, 49, 146, 0.35);
  --sh-glow: 0 14px 36px -10px rgba(123, 97, 255, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;

  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --bg: #0b1120;
    --bg-tint: #141d3a;
    --surface: #121b31;
    --surface-2: #1a2440;
    --surface-inverse: #f8fafc;
    --text: #f1f5f9;
    --text-2: #dbe4f0; /* 13.5:1 on --surface */
    --text-muted: #b8c4d6; /* 9.8:1 on --surface, 8.7:1 on #1a2440 */
    --text-inverse: #0b1120;
    --border: #273250; /* decorative dividers / card edges */
    --border-strong: #64748b; /* UI boundaries (inputs, outline buttons): 3.6:1 on --surface */
    --accent: #b3a5ff;
    --accent-soft: rgba(123, 97, 255, 0.18);
    --focus: #b3a5ff;
    --grad-text: linear-gradient(120deg, #b3a5ff 0%, #8f7bff 45%, #1bffff 100%);
    --success: #6ee7b7;
    --success-soft: rgba(16, 185, 129, 0.16);
    --warn: #fcd34d;
    --warn-soft: rgba(245, 158, 11, 0.16);
    --danger: #fca5a5;
    --danger-soft: rgba(239, 68, 68, 0.16);
    --info: #93c5fd;
    --info-soft: rgba(59, 130, 246, 0.16);
    --st-hot: #fca5a5;
    --st-hot-bg: rgba(239, 68, 68, 0.16);
    --st-warm: #fcd34d;
    --st-warm-bg: rgba(245, 158, 11, 0.16);
    --st-cold: #93c5fd;
    --st-cold-bg: rgba(59, 130, 246, 0.16);
    --st-done: #6ee7b7;
    --st-done-bg: rgba(16, 185, 129, 0.16);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --sh-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.7);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] {
    --bg: #0b1120;
    --bg-tint: #141d3a;
    --surface: #121b31;
    --surface-2: #1a2440;
    --surface-inverse: #f8fafc;
    --text: #f1f5f9;
    --text-2: #dbe4f0; /* 13.5:1 on --surface */
    --text-muted: #b8c4d6; /* 9.8:1 on --surface, 8.7:1 on #1a2440 */
    --text-inverse: #0b1120;
    --border: #273250; /* decorative dividers / card edges */
    --border-strong: #64748b; /* UI boundaries (inputs, outline buttons): 3.6:1 on --surface */
    --accent: #b3a5ff;
    --accent-soft: rgba(123, 97, 255, 0.18);
    --focus: #b3a5ff;
    --grad-text: linear-gradient(120deg, #b3a5ff 0%, #8f7bff 45%, #1bffff 100%);
    --success: #6ee7b7;
    --success-soft: rgba(16, 185, 129, 0.16);
    --warn: #fcd34d;
    --warn-soft: rgba(245, 158, 11, 0.16);
    --danger: #fca5a5;
    --danger-soft: rgba(239, 68, 68, 0.16);
    --info: #93c5fd;
    --info-soft: rgba(59, 130, 246, 0.16);
    --st-hot: #fca5a5;
    --st-hot-bg: rgba(239, 68, 68, 0.16);
    --st-warm: #fcd34d;
    --st-warm-bg: rgba(245, 158, 11, 0.16);
    --st-cold: #93c5fd;
    --st-cold-bg: rgba(59, 130, 246, 0.16);
    --st-done: #6ee7b7;
    --st-done-bg: rgba(16, 185, 129, 0.16);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --sh-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.7);
  }

/* ============================================================
   2. Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-black);
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
}
h2 {
  font-size: var(--fs-3xl);
}
h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

p {
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

/* ~65ch reading measure for running text in split layouts and cards */
.split p,
.split li,
.card p {
  max-width: 65ch;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(123, 97, 255, 0.28);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--cc-midnight);
  color: #fff;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--sp-3);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--maxw-narrow);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tint {
  background: var(--bg-tint);
}

.section--surface {
  background: var(--surface);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .section--surface,
:root:not([data-theme="light"]) .section--tint {
    border-block: 1px solid var(--border);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .section--surface,
:root[data-theme="dark"] .section--tint {
    border-block: 1px solid var(--border);
  }

.section--dark {
  background: var(--cc-grad-night);
  color: #e2e8f0;
  --text: #f8fafc;
  --text-2: #dbe4f0;
  --text-muted: #b8c4d6;
  --accent: #b3a5ff;
  --border: rgba(148, 163, 184, 0.28);
  --border-strong: rgba(203, 213, 225, 0.55);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --grad-text: linear-gradient(120deg, #b3a5ff 0%, #8f7bff 45%, #1bffff 100%);
  --focus: #b3a5ff;
}

/* Section weight tiers: hero > feature explorer (--major) > supporting (default) > --compact */
.section--major {
  padding-block: calc(var(--section-y) * 1.15);
}
.section--compact {
  padding-block: calc(var(--section-y) * 0.7);
}

/* Consistent eyebrow -> H2 -> lead -> content rhythm (8px scale) */
.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); /* 40 -> 64 */
}

.section-head > .eyebrow {
  margin-bottom: var(--sp-4); /* 16 */
}

.section-head > h2 {
  margin-bottom: var(--sp-4); /* 16 */
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  font-size: var(--fs-lg);
  color: var(--text-2);
  max-width: 62ch;
}

.section-head--center p {
  margin-inline: auto;
}

.section-head > :last-child {
  margin-bottom: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--text-2);
  max-width: 62ch;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: var(--fs-sm);
}

.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent); /* fallback */
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--sp-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-3));
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--sp-6));
}

.grid-2 {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center;
}

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .split--flip > :first-child {
    order: 2;
  }
}

/* ============================================================
   4. Buttons & badges
   ============================================================ */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background-color var(--dur-fast), border-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  text-decoration: none;
  border-color: var(--accent);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.btn--primary {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: transparent;
  background-image: var(--grad-button);
  box-shadow: var(--sh-glow);
}

.btn--primary:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -10px rgba(123, 97, 255, 0.7);
}

.btn--secondary {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--accent);
  --btn-bd: transparent;
}

.btn--ghost {
  --btn-bg: transparent;
}

.btn--dark {
  --btn-bg: var(--cc-midnight);
  --btn-fg: #fff;
  --btn-bd: var(--cc-midnight);
}

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--cc-midnight);
  --btn-bd: #fff;
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.55);
}

.btn--outline-light:hover {
  border-color: #fff;
}

.btn--sm {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
}

.btn--lg {
  min-height: 56px;
  padding: 0.95rem 1.8rem;
  font-size: 1.0625rem;
}

.btn--block {
  width: 100%;
}

.btn-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Google Play button (text-based; no third-party badge artwork) */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0.5rem 1.25rem 0.5rem 1rem;
  border-radius: var(--r-md);
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  line-height: 1.1;
  transition: transform var(--dur) var(--ease-out);
}

.store-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.store-btn small {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.store-btn strong {
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
}

.store-btn svg {
  width: 26px;
  height: 26px;
}

/* Official "Get it on Google Play" badge (assets/brand/google-play-badge.svg).
   Colours are fixed by Google's badge guidelines; keep clear space around it. */
.play-badge {
  display: inline-block;
  flex: none;
  margin: 4px; /* clear space */
  border-radius: 10px;
  line-height: 0;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.play-badge img {
  display: block;
  width: auto;
  height: 48px;
}

.play-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(11, 17, 32, 0.55);
}

.play-badge:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (max-width: 599px) {
  .play-badge img {
    height: 44px;
  }
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .play-badge {
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.28);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .play-badge {
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.28);
  }

.section--dark .play-badge,
.cta-band .play-badge {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .play-badge,
  .play-badge:hover {
    transform: none;
    transition: none;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.badge--neutral {
  background: var(--surface-2);
  color: var(--text-2);
}
.badge--success {
  background: var(--success-soft);
  color: var(--success);
}
.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.badge--info {
  background: var(--info-soft);
  color: var(--info);
}
.badge--new {
  background: var(--grad-button);
  color: #fff;
}
.badge--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.pill .badge {
  padding: 0.15rem 0.55rem;
}

/* ============================================================
   5. Cards, feature grid, steps, stats, use cases
   ============================================================ */
/* Feature explorer: the demo panel is framed as the page's second-heaviest block */
.tabs--stage .tabs__panel {
  padding: clamp(1.5rem, 0.5rem + 3.5vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
}

/* Card tiers: flat (default: border only) -> --raised (sh-md) -> featured price card (sh-lg).
   Padding and radius are the same for every tier. */
.card {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.card--raised {
  box-shadow: var(--sh-md);
}

/* On a surface-coloured section, flip the card fill so it still reads as a card */
.section--surface .card,
.section--surface .step {
  background: var(--bg);
}

.card--interactive {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}

.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(123, 97, 255, 0.35);
}

.card h3 {
  margin-bottom: var(--sp-2);
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--text-2);
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: 14px;
  background: var(--grad-button);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(123, 97, 255, 0.7);
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

.feature-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.feature {
  display: flex;
  flex-direction: column;
}

.feature > p {
  margin-bottom: var(--sp-4);
}

/* Plan badges sit on one baseline at the bottom of every feature card */
.feature .badge {
  margin-top: auto;
  align-self: flex-start;
}

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  position: relative;
  padding-top: var(--sp-2);
}

.step__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  font-weight: var(--fw-black);
  font-size: 1.125rem;
  color: #fff;
  background: var(--grad-button);
  box-shadow: var(--sh-glow);
}

.step__visual {
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stat__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.stat-row {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

/* Inside the narrow use-case card, three stats sit on one row (no orphaned third stat) */
.usecase .stat-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* "Use case" — a scenario block, NOT a testimonial. Never attribute to a real person. */
.usecase {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.usecase__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.usecase__title {
  font-size: var(--fs-xl);
  margin: 0;
}

.usecase__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.usecase__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  color: var(--text-2);
}

.usecase__time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--accent);
  min-width: 3.6em;
}

/* Timeline (exhibition-day story) */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-8);
  display: grid;
  gap: var(--sp-6);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, #7b61ff, rgba(27, 255, 255, 0.6));
  border-radius: 2px;
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-8) + 4px);
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--cc-purple);
}

.section--dark .timeline__item::before {
  background: var(--cc-midnight);
}

.timeline__time {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.timeline__item h3 {
  margin: var(--sp-1) 0 var(--sp-2);
}

.timeline__item p {
  color: var(--text-2);
  margin: 0;
}

/* Check list */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.checklist li {
  position: relative;
  padding-left: 1.9em;
  color: var(--text-2);
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--success-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E")
    center / 70% no-repeat;
}

.checklist li.is-off {
  color: var(--text-muted);
}

.checklist li.is-off::before {
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E")
    center / 70% no-repeat;
}

/* ============================================================
   6. Tabs (feature explorer)
   ============================================================ */
.tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* let the tab strip scroll instead of widening the page */
  gap: var(--sp-8);
}

.tabs__list {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  justify-self: center;
  max-width: 100%;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  flex: none;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}

.tabs__tab:hover {
  color: var(--text);
}

.tabs__tab[aria-selected='true'] {
  background: var(--cc-midnight);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tabs__tab[aria-selected='true'] {
    background: #fff;
    color: var(--cc-midnight);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .tabs__tab[aria-selected='true'] {
    background: #fff;
    color: var(--cc-midnight);
  }

.tabs__panel[hidden] {
  display: none;
}

/* No-JS: all panels stacked, tablist hidden */
html:not(.js) .tabs__list {
  display: none;
}
html:not(.js) .tabs__panel[hidden] {
  display: block !important;
}
html:not(.js) .tabs__panel + .tabs__panel {
  margin-top: var(--sp-16);
}

/* ============================================================
   7. Segmented control (radio group) — billing toggle, calculator
   ============================================================ */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-1);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  min-inline-size: 0;
}

.segmented legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.segmented label,
.segmented button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}

.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.segmented label:has(input:checked),
.segmented button.active,
.segmented button[aria-pressed='true'] {
  background: var(--cc-midnight);
  color: #fff;
}

.segmented label:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .segmented label:has(input:checked),
:root:not([data-theme="light"]) .segmented button.active,
:root:not([data-theme="light"]) .segmented button[aria-pressed='true'] {
    background: #fff;
    color: var(--cc-midnight);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .segmented label:has(input:checked),
:root[data-theme="dark"] .segmented button.active,
:root[data-theme="dark"] .segmented button[aria-pressed='true'] {
    background: #fff;
    color: var(--cc-midnight);
  }

.segmented .save {
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  color: var(--success);
}

/* ============================================================
   8. Pricing
   ============================================================ */
.pricing-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  position: relative;
}

.price-card--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cc-purple) 9%, var(--surface)) 0%, var(--surface) 42%) padding-box,
    var(--cc-grad) border-box;
  box-shadow: var(--sh-lg);
}

/* Recommended plan: filled badge, and lifted above its neighbours on wide screens */
.price-card--featured .price-card__name .badge {
  background: var(--grad-button);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(123, 97, 255, 0.6);
}

@media (min-width: 1100px) {
  .pricing-grid {
    padding-top: var(--sp-3);
  }
  .price-card--featured {
    transform: translateY(-12px);
    padding-bottom: calc(clamp(1.25rem, 1rem + 1vw, 1.75rem) + 12px);
    margin-bottom: -12px;
  }
}

.price-card--soon {
  background: var(--surface-2);
  box-shadow: none;
}

.price-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-xl);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.price-card__price small {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  letter-spacing: 0;
}

.price-card__tax {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 2.6em;
}

.price-card__tax strong {
  color: var(--text);
}

.price-card__desc {
  margin: 0;
  color: var(--text-2);
}

.price-card .checklist {
  flex: 1;
  font-size: var(--fs-sm);
}

.price-card__cta {
  margin-top: auto;
}

.price-note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.price-note strong {
  color: var(--text-2);
}

/* Pricing calculator: centred card, configurator left, sticky live summary right */
.calc {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: 55fr 45fr;
    align-items: start;
  }
  .calc__summary {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.calc__controls {
  display: grid;
  gap: var(--sp-6); /* 24px between groups */
  align-content: start;
  min-width: 0;
}

.calc__group {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

.calc__eyebrow,
.calc__group > legend,
.calc__label {
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Segmented radio group with a sliding pill */
.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  isolation: isolate;
}

.seg__pill {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 4px;
  width: 0;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm), 0 0 0 1px var(--border-strong);
  opacity: 0;
  will-change: transform;
}

.seg.has-pill .seg__pill {
  opacity: 1;
}

.seg__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur);
}

.seg__opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg__opt:has(input:checked) {
  color: var(--text);
}

/* No-JS / pre-measure fallback: highlight the checked option directly */
.seg:not(.has-pill) .seg__opt:has(input:checked) {
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.seg__opt:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.seg__opt:hover {
  color: var(--text);
}

.seg__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.seg.is-disabled {
  opacity: 0.5;
}

.seg.is-disabled .seg__opt {
  cursor: not-allowed;
}

/* Savings badge: floats above its segment so it never shifts the layout */
.seg__save {
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 2px) scale(0.92);
  opacity: 0.85;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .seg__save {
    background: #0f2a22;
  }
:root:not([data-theme="light"]) .seg__pill {
    background: #2a3656;
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.25);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .seg__save {
    background: #0f2a22;
  }
:root[data-theme="dark"] .seg__pill {
    background: #2a3656;
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.25);
  }

.seg__opt:hover .seg__save,
.seg__opt:has(input:checked) .seg__save,
.seg__opt:has(input:focus-visible) .seg__save {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

[data-seg='interval'] {
  margin-top: 10px;
}

.calc__soon {
  margin: calc(var(--sp-2) * -1) 0 0;
}

.calc__soon .badge {
  cursor: help;
}

.calc__helper {
  margin: calc(var(--sp-3) * -1) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 2.8em;
}

.calc__summary {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--bg-tint);
  border: 1px solid var(--border);
}

.calc__plan {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent);
}

.calc__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
}

.calc__total {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.calc__per {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.calc__billed {
  margin: calc(var(--sp-2) * -1) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.calc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.calc__features {
  margin: 0;
}

.calc__cta .play-badge {
  margin-inline: 0;
}

.calc__compare {
  justify-self: start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.calc__tax {
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

.calc__tax summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.calc__tax[open] summary {
  margin-bottom: var(--sp-2);
}

.calc__breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.calc__breakdown dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.calc__disclaimer {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 420px) {
  .seg__opt {
    padding: 0 0.4rem;
    font-size: var(--fs-xs);
  }
  .seg__icon {
    display: none;
  }
}

/* ============================================================
   9. FAQ (details/summary)
   ============================================================ */
.faq {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}

.faq details {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur);
}

.faq details[open] {
  border-color: rgba(123, 97, 255, 0.45);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b3fe6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E")
    center / 60% no-repeat;
  transition: transform var(--dur) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b3a5ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b3a5ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  }

.faq .faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-2);
}

.faq .faq__body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   10. CTA band
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--cc-grad-night);
  color: #e2e8f0;
  text-align: center;
  isolation: isolate;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 97, 255, 0.55), transparent 65%);
  z-index: -1;
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: auto auto -50% -10%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 255, 255, 0.22), transparent 65%);
  z-index: -1;
}

.cta-band h2 {
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
}

.cta-band p {
  max-width: 56ch;
  margin-inline: auto;
  color: #cbd5e1;
  font-size: var(--fs-lg);
}

.cta-band .cluster {
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ============================================================
   11. Forms
   ============================================================ */
.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.field__error {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-bg);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.2);
}

.input[aria-invalid='true'] {
  border-color: var(--danger);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent-bg);
}

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.alert--error {
  background: var(--danger-soft);
  color: var(--danger);
}

.alert--ok {
  background: var(--success-soft);
  color: var(--success);
}

/* ============================================================
   12. Hero
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(1.5rem, 0.5rem + 2.5vw, 2.75rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.hero__glow--a {
  width: 620px;
  height: 620px;
  right: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(123, 97, 255, 0.28), transparent 65%);
}

.hero__glow--b {
  /* kept fully inside the hero so overflow:hidden never cuts a hard edge */
  width: 420px;
  height: 420px;
  left: -200px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(27, 255, 255, 0.18), transparent 65%);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}

.hero h1 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-5);
  max-width: 13ch;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero .lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.hero__actions {
  margin-top: var(--sp-8);
  --cluster-gap: var(--sp-4);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__meta li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-grad);
}

/* Right column: a real-looking phone lifted off the page (no flat panel behind it).
   A soft glow sits behind it, a contact shadow under it, and it tilts slightly in 3D. */
.hero__stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: var(--sp-6) 0;
  perspective: 1600px;
}

.hero__stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 6% 22%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(123, 97, 255, 0.34), transparent),
    radial-gradient(60% 50% at 30% 80%, rgba(27, 255, 255, 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.hero__demo {
  margin: 0;
  gap: var(--sp-3);
}

.hero__demo .phone {
  --phone-w: min(280px, 80vw);
  --tilt-x: 4deg;
  --tilt-y: -12deg;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(0.6deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* metal frame with a lit edge */
  background: linear-gradient(135deg, #64748b 0%, #1e293b 14%, #0b1120 52%, #1e293b 86%, #475569 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 4px #0b1120,
    -18px 34px 50px -18px rgba(11, 17, 32, 0.55),
    -40px 70px 90px -40px rgba(46, 49, 146, 0.55),
    10px 10px 30px -12px rgba(123, 97, 255, 0.25);
  animation: phone-float 6s ease-in-out infinite;
}

/* side buttons (volume on the left, power on the right) */
.phone__keys {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.phone__keys::before,
.phone__keys::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #334155, #94a3b8 60%, #334155);
}
.phone__keys::before { left: -3px; top: 21%; height: 11%; box-shadow: 0 calc(var(--phone-w) * 0.34) 0 #475569; }
.phone__keys::after { right: -3px; top: 27%; height: 15%; }

/* glass reflection over the screen */
.hero__demo .phone__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 42%);
  pointer-events: none;
}

/* contact shadow on the "floor" under the phone */
.hero__demo .phone::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -46px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 17, 32, 0.45), transparent);
  filter: blur(6px);
  transform: translateZ(-60px);
  animation: phone-shadow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes phone-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes phone-shadow {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.7; scale: 0.9; }
}

@media (max-width: 900px) {
  .hero__demo .phone { --tilt-x: 2deg; --tilt-y: -6deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__demo .phone,
  .hero__demo .phone::after { animation: none; }
  .hero__demo .phone { transition: none; }
}

.hero__demo .demo__controls .btn {
  min-height: 34px;
  padding: 0.3rem 0.8rem;
  font-size: var(--fs-xs);
}

.hero__demo .demo__caption {
  min-height: 2.8em;
}

/* Floating notes next to a phone (decorative) */
.float-note {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  font-size: var(--fs-sm);
  line-height: 1.3;
  max-width: 220px;
}

.float-note b {
  display: block;
  color: var(--text);
}

.float-note span {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.float-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
}

/* Anchored to the hero stage panel edges, overlapping the phone frame */
.float-note--tl {
  left: 0;
  top: 17%;
}

.float-note--br {
  right: 0;
  top: 46%;
}

@media (min-width: 1200px) {
  .float-note--tl {
    left: -2%;
  }
  .float-note--br {
    right: -2%;
  }
}

@media (max-width: 599px) {
  .float-note {
    display: none;
  }
}

/* ============================================================
   13. Phone mockup + in-app UI primitives (.ui-*)
   The screen is always light: it mirrors the real (light-only) app.
   ============================================================ */
.phone {
  --phone-w: min(300px, 84vw);
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19;
  padding: 10px;
  border-radius: 44px;
  background: linear-gradient(145deg, #1e293b, #0b1120 60%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(11, 17, 32, 0.6),
    0 20px 40px -20px rgba(46, 49, 146, 0.5);
  flex: none;
}

.phone::before {
  /* camera notch */
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #0b1120;
  z-index: 3;
}

.phone__screen {
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-text: #1e293b;
  --ui-muted: #475569;
  --ui-border: #e2e8f0;
  --ui-primary: #2e3192;
  --ui-accent: #6a4df5;
  /* the app is light-only: pin light status colors inside the phone */
  --st-hot: #b91c1c;
  --st-hot-bg: #fee2e2;
  --st-warm: #b45309;
  --st-warm-bg: #fef3c7;
  --st-cold: #1d4ed8;
  --st-cold-bg: #dbeafe;
  --st-done: #047857;
  --st-done-bg: #d1fae5;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  color-scheme: light;
  isolation: isolate;
}

.phone__screen button {
  font-family: inherit;
}

.phone--sm {
  --phone-w: min(260px, 78vw);
}

.demo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
}

.demo__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.demo__caption {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 2.7em;
}

/* status bar */
.ui-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 12px 22px 0;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}

.ui-appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  font-size: 15px;
  font-weight: 700;
}

.ui-appbar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-appbar--brand {
  background: linear-gradient(120deg, #0b1120, #1e1b4b 55%, #2e3192);
  color: #fff;
}

.ui-icon {
  display: inline-block;
  vertical-align: -0.2em;
  width: 18px;
  height: 18px;
  flex: none;
}

.ui-body {
  padding: 10px 12px;
}

.ui-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
}

.ui-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ui-text);
}

.ui-search input::placeholder {
  color: #64748b;
}

.ui-search:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(106, 77, 245, 0.18);
}

.ui-chips {
  display: flex;
  gap: 6px;
  margin: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ui-chip {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ui-chip[aria-pressed='true'] {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}

.ui-chip:focus-visible,
.ui-btn:focus-visible,
.ui-seg button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-tile {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

.ui-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0e7ff, #ede9fe);
  color: var(--ui-primary);
  font-weight: 800;
  font-size: 13px;
}

.ui-tile__name {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-tile__meta {
  color: var(--ui-muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-tile > div {
  min-width: 0;
}

.ui-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ui-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ui-status-badge--hot {
  color: var(--st-hot);
  background: var(--st-hot-bg);
}
.ui-status-badge--warm {
  color: var(--st-warm);
  background: var(--st-warm-bg);
}
.ui-status-badge--cold {
  color: var(--st-cold);
  background: var(--st-cold-bg);
}
.ui-status-badge--done {
  color: var(--st-done);
  background: var(--st-done-bg);
}
.ui-status-badge--none {
  color: #475569;
  background: #f1f5f9;
}

.ui-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--ui-muted);
}

.ui-section-label {
  margin: 12px 2px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ui-muted);
  text-transform: uppercase;
}

.ui-field {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  transition: border-color 0.3s, background-color 0.3s;
}

.ui-field__label {
  display: block;
  font-size: 10px;
  color: var(--ui-muted);
}

.ui-field__value {
  display: block;
  min-height: 1.3em;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-field--ai {
  border-color: rgba(106, 77, 245, 0.55);
  background: #f5f3ff;
}

.ui-field__ai {
  position: absolute;
  right: 8px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #ede9fe;
  color: #4c1d95;
  font-size: 9.5px;
  font-weight: 800;
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, #2e3192, #6a4df5);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ui-btn--block {
  width: 100%;
}

.ui-btn--ghost {
  background: #eef2ff;
  color: var(--ui-primary);
}

.ui-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
}

.ui-seg button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
}

.ui-seg button[aria-pressed='true'][data-status='hot'] {
  background: var(--st-hot);
  color: #fff;
}
.ui-seg button[aria-pressed='true'][data-status='warm'] {
  background: var(--st-warm);
  color: #fff;
}
.ui-seg button[aria-pressed='true'][data-status='cold'] {
  background: var(--st-cold);
  color: #fff;
}
.ui-seg button[aria-pressed='true'][data-status='done'] {
  background: var(--st-done);
  color: #fff;
}

.ui-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b1120;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(11, 17, 32, 0.6);
}

.ui-toast__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  flex: none;
}

.ui-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 14px 14px 18px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -12px 30px -12px rgba(11, 17, 32, 0.35);
}

.ui-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: #cbd5e1;
}

.ui-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ui-kpi {
  padding: 10px;
  border-radius: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

.ui-kpi__value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ui-kpi__label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ui-muted);
}

.ui-kpi--hot .ui-kpi__value {
  color: var(--st-hot);
}
.ui-kpi--warm .ui-kpi__value {
  color: var(--st-warm);
}
.ui-kpi--cold .ui-kpi__value {
  color: var(--st-cold);
}
.ui-kpi--done .ui-kpi__value {
  color: var(--st-done);
}

.ui-kpi.is-bumped {
  box-shadow: 0 0 0 2px rgba(106, 77, 245, 0.45);
}

/* Camera viewfinder (scan demo) */
.ui-camera {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #334155, #0b1120 75%);
  color: #fff;
  overflow: hidden;
}

.ui-camera__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 44px 16px 0;
  font-size: 11px;
  font-weight: 700;
}

.ui-camera__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.ui-viewfinder {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 26%;
  aspect-ratio: 1.75;
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.45);
}

.ui-viewfinder::before,
.ui-viewfinder::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 3px solid transparent;
  border-top-color: #1bffff;
  border-bottom-color: #1bffff;
  -webkit-mask: linear-gradient(90deg, #000 22%, transparent 22% 78%, #000 78%);
  mask: linear-gradient(90deg, #000 22%, transparent 22% 78%, #000 78%);
}

.ui-viewfinder::after {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #1bffff;
  border-right-color: #1bffff;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 30% 70%, #000 70%);
  mask: linear-gradient(180deg, #000 30%, transparent 30% 70%, #000 70%);
}

.ui-scanline {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #1bffff, transparent);
  box-shadow: 0 0 14px 2px rgba(27, 255, 255, 0.65);
  opacity: 0;
  z-index: 2;
}

.ui-camera__hint {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #e2e8f0;
}

.ui-shutter {
  position: absolute;
  /* Centre without transform: the press animation drives transform (scale). */
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.25);
}

.ui-shutter::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.ui-ocr {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 110px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(11, 17, 32, 0.8);
  border: 1px solid rgba(27, 255, 255, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  color: #a5f3fc;
  white-space: pre-wrap;
  min-height: 72px;
}

/* A fictional business card, drawn in HTML */
.biz-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  padding: 9% 8%;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
  color: #0f172a;
  font-family: Georgia, 'Times New Roman', serif;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.biz-card__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.biz-card__title {
  font-size: 9px;
  color: #475569;
  font-style: italic;
}

.biz-card__co {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9a3412;
  text-transform: uppercase;
}

.biz-card__lines {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 8.2px;
  line-height: 1.45;
  color: #334155;
}

.biz-card__logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: conic-gradient(from 200deg, #ea580c, #f59e0b, #ea580c);
}

/* ============================================================
   14. Team / roles UI
   ============================================================ */
.role-toggle {
  margin-bottom: var(--sp-4);
}

.member-picker {
  display: grid;
  gap: 6px;
}

.member-picker button {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: #fff;
  text-align: left;
  font-size: 12px;
  color: var(--ui-text);
  cursor: pointer;
}

.member-picker button[aria-pressed='true'] {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px rgba(106, 77, 245, 0.25);
}

.ui-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 11px;
  border-radius: 50%;
}

.ui-transfer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  text-align: center;
}

.ui-transfer__count {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ui-transfer__who {
  font-size: 11px;
  color: var(--ui-muted);
}

.ui-progress {
  height: 6px;
  border-radius: 6px;
  background: #e2e8f0;
  overflow: hidden;
}

.ui-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e3192, #6a4df5, #1bffff);
  transform-origin: left center;
}

/* Email preview (follow-up demo) */
.email-preview {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  font-size: var(--fs-sm);
}

.email-preview__head {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  color: var(--text-2);
}

.email-preview__head b {
  color: var(--text);
}

.email-preview__body {
  padding: var(--sp-4);
  color: var(--text-2);
}

.email-preview__body p {
  margin-bottom: var(--sp-3);
}

/* ============================================================
   14b. Blog cards (rendered by js/blog.js)
   ============================================================ */
.blog-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.section--surface .blog-card {
  background: var(--bg);
}

/* The whole card is the click target (the title link is stretched over it) */
.blog-card h2 a::after,
.blog-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.blog-card:has(a:hover) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.blog-card .tag {
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.blog-card h2 {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.blog-card h2 a {
  color: var(--text);
  text-decoration: none;
}

.blog-card h2 a:hover {
  color: var(--accent);
}

.blog-card .meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.blog-card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.blog-card .read-more {
  margin-top: auto;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.blog-loading,
.blog-error {
  color: var(--text-muted);
}

html:not(.js) .billing-toggle,
html:not(.js) [data-demo-controls],
html:not(.js) [data-js-only] {
  display: none;
}

/* ============================================================
   15. Footer
   ============================================================ */
.site-footer {
  margin-top: var(--footer-gap);
  padding: var(--sp-16) 0 var(--sp-8);
  background: var(--cc-midnight);
  color: #cbd5e1;
  font-size: var(--fs-sm);
}

.site-footer a {
  color: #e2e8f0;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

.site-footer h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.site-footer ul a {
  display: inline-block;
  padding-block: 2px;
}

.site-footer__about {
  max-width: 34ch;
  margin-top: var(--sp-4);
  color: #a3b1c6;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #a3b1c6;
}

/* ============================================================
   16. Motion states (see js/motion-kit.js)
   Elements only start hidden when JS runs AND motion is allowed.
   boot.js adds .js; motion-kit adds .mk-ready (or .mk-failed on error).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(18px);
  }
  .js [data-reveal='fade']:not(.is-revealed) {
    transform: none;
  }
  .js [data-reveal='scale']:not(.is-revealed) {
    transform: scale(0.96);
  }
  .js [data-stagger] > :not(.is-revealed) {
    opacity: 0;
    transform: translateY(14px);
  }
}

.mk-failed [data-reveal],
.mk-failed [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}

[data-magnetic] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   17. Utilities
   ============================================================ */
.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-8 {
  margin-top: var(--sp-8);
}
.mb-0 {
  margin-bottom: 0;
}
.nowrap {
  white-space: nowrap;
}
.hide-sm {
  display: none;
}
@media (min-width: 600px) {
  .hide-sm {
    display: revert;
  }
}

/* Dark-mode component tweaks */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn--dark {
    --btn-bg: #f8fafc;
    --btn-fg: #0b1120;
    --btn-bd: #f8fafc;
  }
:root:not([data-theme="light"]) .segmented label:has(input:checked) .save,
:root:not([data-theme="light"]) .segmented button.active .save,
:root:not([data-theme="light"]) .segmented button[aria-pressed='true'] .save {
    background: #d1fae5;
    color: #047857;
  }
:root:not([data-theme="light"]) .checklist li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236ee7b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E");
  }
:root:not([data-theme="light"]) .checklist li.is-off::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E");
  }
:root:not([data-theme="light"]) .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b3a5ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .btn--dark {
    --btn-bg: #f8fafc;
    --btn-fg: #0b1120;
    --btn-bd: #f8fafc;
  }
:root[data-theme="dark"] .segmented label:has(input:checked) .save,
:root[data-theme="dark"] .segmented button.active .save,
:root[data-theme="dark"] .segmented button[aria-pressed='true'] .save {
    background: #d1fae5;
    color: #047857;
  }
:root[data-theme="dark"] .checklist li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236ee7b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E");
  }
:root[data-theme="dark"] .checklist li.is-off::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E");
  }
:root[data-theme="dark"] .faq summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b3a5ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  }

/* ============================================================
   18. Dark-mode overrides for the shared header (site-nav.css is light-only
   because legacy pages are light-only; pages that load site.css get dark chrome)
   ============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cc-site-header {
    background: rgba(11, 17, 32, 0.86);
    border-bottom-color: rgba(148, 163, 184, 0.14);
  }
:root:not([data-theme="light"]) .cc-site-header .cc-brand-name,
:root:not([data-theme="light"]) .cc-site-header .cc-brand {
    color: #fff;
  }
:root:not([data-theme="light"]) .cc-site-header .nav-links a,
:root:not([data-theme="light"]) .cc-menu-btn {
    color: #cbd5e1;
  }
:root:not([data-theme="light"]) .cc-site-header .nav-links a:hover,
:root:not([data-theme="light"]) .cc-site-header .nav-links a[aria-current='page'] {
    color: #fff;
  }
:root:not([data-theme="light"]) .cc-site-header .btn-ghost-dark,
:root:not([data-theme="light"]) .cc-user {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.3);
  }
:root:not([data-theme="light"]) .cc-mobile-nav {
    background: #0b1120;
    border-color: rgba(148, 163, 184, 0.14);
  }
:root:not([data-theme="light"]) .cc-mobile-nav a {
    color: #e2e8f0;
  }
:root:not([data-theme="light"]) .cc-menu-btn {
    border-color: rgba(148, 163, 184, 0.3);
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .cc-site-header {
    background: rgba(11, 17, 32, 0.86);
    border-bottom-color: rgba(148, 163, 184, 0.14);
  }
:root[data-theme="dark"] .cc-site-header .cc-brand-name,
:root[data-theme="dark"] .cc-site-header .cc-brand {
    color: #fff;
  }
:root[data-theme="dark"] .cc-site-header .nav-links a,
:root[data-theme="dark"] .cc-menu-btn {
    color: #cbd5e1;
  }
:root[data-theme="dark"] .cc-site-header .nav-links a:hover,
:root[data-theme="dark"] .cc-site-header .nav-links a[aria-current='page'] {
    color: #fff;
  }
:root[data-theme="dark"] .cc-site-header .btn-ghost-dark,
:root[data-theme="dark"] .cc-user {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.3);
  }
:root[data-theme="dark"] .cc-mobile-nav {
    background: #0b1120;
    border-color: rgba(148, 163, 184, 0.14);
  }
:root[data-theme="dark"] .cc-mobile-nav a {
    color: #e2e8f0;
  }
:root[data-theme="dark"] .cc-menu-btn {
    border-color: rgba(148, 163, 184, 0.3);
  }

/* Wrapped segmented controls (narrow screens) read better as rounded rectangles */
.calc__group .segmented {
  display: flex;
  border-radius: var(--r-lg);
}

/* Demos are wrapped in <figure>; drop browser-default margins that caused
   sideways scroll on phones, and anchor .sr-only text inside scrollers. */
figure.demo { margin: 0; }
.table-wrap, .compare-wrap, .tour-nav { position: relative; }

/* ============================================================
   19. Page end: one consistent gap between the last section and the footer
   (40px on phones -> 64px on desktop). The footer owns the gap, so the last
   section drops its bottom padding.
   ============================================================ */
:root {
  --footer-gap: clamp(2.5rem, 1.94rem + 2.29vw, 4rem);
}

main > .section:last-child,
main > .post-cta:last-child {
  padding-block-end: 0;
}

main.auth-shell {
  padding-block-end: 0;
}

/* legal.css zeroes the footer margin on legal pages; its hub ends with a 16px text margin */
main > .legal-hub:last-child {
  padding-block-end: calc(var(--footer-gap) - 1rem);
}

/* ============================================================
   20. Card system v2 (home page first; reusable)
   - .icon-duo: one duotone icon style (44px tile, 24px glyph), tinted by a tone
   - .tile + --flat | --raised | --featured: same padding + radius, three elevations
   - hover lifts (translate, so it never fights Motion's transform) and a glow
     follows the pointer (--mx/--my set by js/home-cards.js)
   ============================================================ */
.tone-indigo { --tone: #3730a3; }
.tone-violet { --tone: #5b3fe6; }
.tone-blue { --tone: #1d4ed8; }
.tone-teal { --tone: #0e7490; }
.tone-green { --tone: #047857; }
.tone-amber { --tone: #b45309; }
.tone-rose { --tone: #be123c; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tone-indigo { --tone: #a5b4fc; }
:root:not([data-theme="light"]) .tone-violet { --tone: #b3a5ff; }
:root:not([data-theme="light"]) .tone-blue { --tone: #93c5fd; }
:root:not([data-theme="light"]) .tone-teal { --tone: #67e8f9; }
:root:not([data-theme="light"]) .tone-green { --tone: #6ee7b7; }
:root:not([data-theme="light"]) .tone-amber { --tone: #fcd34d; }
:root:not([data-theme="light"]) .tone-rose { --tone: #fda4af; }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .tone-indigo { --tone: #a5b4fc; }
:root[data-theme="dark"] .tone-violet { --tone: #b3a5ff; }
:root[data-theme="dark"] .tone-blue { --tone: #93c5fd; }
:root[data-theme="dark"] .tone-teal { --tone: #67e8f9; }
:root[data-theme="dark"] .tone-green { --tone: #6ee7b7; }
:root[data-theme="dark"] .tone-amber { --tone: #fcd34d; }
:root[data-theme="dark"] .tone-rose { --tone: #fda4af; }

.icon-duo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  color: var(--tone, var(--accent));
  background: color-mix(in srgb, var(--tone, var(--accent)) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent);
}

.icon-duo svg {
  width: 24px;
  height: 24px;
}

.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  transition:
    translate var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.tile--flat {
  box-shadow: none;
}

.tile--raised {
  box-shadow: var(--sh-md);
}

.card.tile--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cc-purple) 9%, var(--surface)) 0%, var(--surface) 55%) padding-box,
    linear-gradient(135deg, rgba(123, 97, 255, 0.6), rgba(27, 255, 255, 0.4) 55%, var(--border) 100%) border-box;
  box-shadow: var(--sh-lg);
}

.tile h3,
.tile__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tile p {
  color: var(--text-2);
}

/* Pointer glow: shared by every card family on the page */
.tile::after,
.pricing-grid .price-card::after,
.timeline--cards .timeline__item::after,
.blog-grid--bento .blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--tone, var(--cc-purple)) 16%, transparent),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.pricing-grid .price-card,
.timeline--cards .timeline__item,
.blog-grid--bento .blog-card {
  isolation: isolate;
  transition:
    translate var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile:hover,
  .pricing-grid .price-card:not(.price-card--soon):hover,
  .blog-grid--bento .blog-card:hover {
    translate: 0 -4px;
  }
  .timeline--cards .timeline__item:hover {
    translate: 4px 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tile--flat:hover,
  .blog-grid--bento .blog-card:hover {
    box-shadow: var(--sh-md);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  }
  .tile--raised:hover,
  .pricing-grid .price-card:not(.price-card--soon):not(.price-card--featured):hover {
    box-shadow: var(--sh-lg);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  .card.tile--featured:hover,
  .pricing-grid .price-card--featured:hover {
    box-shadow: var(--sh-lg), 0 18px 48px -22px rgba(123, 97, 255, 0.55);
  }
  .timeline--cards .timeline__item:hover {
    border-color: rgba(179, 165, 255, 0.5);
  }
  .tile:hover::after,
  .pricing-grid .price-card:hover::after,
  .timeline--cards .timeline__item:hover::after,
  .blog-grid--bento .blog-card:hover::after {
    opacity: 1;
  }
}

/* Whole-card links: the title link is stretched over the card, so the card has
   one accessible name (the title). Other links in the card sit above it. */
.tile__link {
  color: inherit;
  text-decoration: none;
}

.tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.tile a:not(.tile__link) {
  position: relative;
  z-index: 2;
}

.tile__link:focus-visible {
  outline: none;
}

.tile:has(.tile__link:focus-visible),
.blog-card:has(h2 a:focus-visible, h3 a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.blog-card h2 a:focus-visible,
.blog-card h3 a:focus-visible {
  outline: none;
}

.tile:has(.tile__link:hover) .tile__link {
  color: var(--accent);
}

.tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--accent);
}

.tile__arrow {
  transition: translate var(--dur) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .tile:hover .tile__arrow {
    translate: 4px 0;
  }
}

.tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
}

.tile__chips li {
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

/* ------------------------------------------------ hero: "Built for" row */
.hero__audience {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: var(--sp-6);
}

.hero__audience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.hero__audience-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__audience-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__audience-list li {
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

/* ------------------------------------------------ how it works: numbered steps on a line */
.flow-steps {
  --num: 48px;
  --ring: var(--surface);
  position: relative;
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-steps::before {
  content: '';
  position: absolute;
  left: calc(var(--num) / 2 - 1px);
  top: calc(var(--num) / 2);
  bottom: var(--sp-10);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--cc-purple), rgba(27, 255, 255, 0.7));
}

.flow-step {
  display: grid;
  grid-template-columns: var(--num) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.flow-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--num);
  height: var(--num);
  border-radius: 50%;
  font-size: 1.125rem;
  font-weight: var(--fw-black);
  color: #fff;
  background: var(--grad-button);
  box-shadow: 0 0 0 6px var(--ring), var(--sh-glow);
}

.flow-step__card {
  height: 100%;
}

@media (min-width: 860px) {
  .flow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flow-steps::before {
    top: calc(var(--num) / 2 - 1px);
    bottom: auto;
    left: calc((100% - 2 * var(--sp-6)) / 6);
    right: calc((100% - 2 * var(--sp-6)) / 6);
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--cc-purple), rgba(27, 255, 255, 0.75));
  }
  .flow-step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--sp-5);
  }
  .flow-step__card {
    width: 100%;
  }
}

/* ------------------------------------------------ feature bento */
.bento-head {
  margin: var(--sp-16) auto var(--sp-6);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bento {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento__hero,
  .bento__wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bento__hero {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento__wide {
    grid-column: span 2;
  }
}

.feature-art {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cc-purple) 7%, var(--surface-2));
  border: 1px solid var(--border);
}

.feature-art--scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-4);
  align-items: center;
}

.mini-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  aspect-ratio: 1.7;
  padding: 14px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.45);
}

.mini-card__line {
  display: block;
  height: 6px;
  width: 80%;
  border-radius: 3px;
  background: #cbd5e1;
}

.mini-card__line--name {
  height: 9px;
  width: 58%;
  background: #0b1120;
}

.mini-card__line--co {
  width: 70%;
  background: #7b61ff;
}

.mini-card__line--short {
  width: 42%;
}

.mini-card__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1bffff, transparent);
  box-shadow: 0 0 12px 2px rgba(27, 255, 255, 0.6);
  animation: cc-mini-scan 2.6s var(--ease-in-out) infinite alternate;
}

@keyframes cc-mini-scan {
  to {
    top: 86%;
  }
}

.mini-fields {
  display: grid;
  gap: 6px;
  font-size: var(--fs-xs);
}

.mini-fields span {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-fields b {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 479px) {
  .feature-art--scan {
    grid-template-columns: minmax(0, 1fr);
  }
  .mini-card {
    max-width: 240px;
  }
}

.card.bento__wide {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

@media (min-width: 640px) {
  .card.bento__wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .bento__wide .feature-art {
    margin-bottom: 0;
  }
}

.feature__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-art--bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  height: 150px;
}

.mini-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--text-muted);
}

.mini-bar i {
  display: block;
  height: var(--h, 50%);
  border-radius: 6px 6px 3px 3px;
  background: var(--c);
  opacity: 0.85;
}

.mini-bar--hot { --h: 55%; --c: var(--st-hot); }
.mini-bar--warm { --h: 80%; --c: var(--st-warm); }
.mini-bar--cold { --h: 38%; --c: var(--st-cold); }
.mini-bar--done { --h: 64%; --c: var(--st-done); }

/* ------------------------------------------------ exhibition story (dark) */
.timeline--cards {
  gap: var(--sp-4);
}

.timeline--cards .timeline__item {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.timeline--cards .timeline__item::before {
  top: calc(var(--sp-5) + 4px);
}

.timeline--cards .timeline__time {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: var(--fs-xs);
}

.timeline--cards .timeline__item h3 {
  margin-top: var(--sp-2);
}

.usecase--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(123, 97, 255, 0.2), rgba(15, 23, 42, 0.35) 60%) padding-box,
    linear-gradient(135deg, rgba(179, 165, 255, 0.7), rgba(27, 255, 255, 0.4) 50%, rgba(148, 163, 184, 0.2)) border-box;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.usecase--featured .stat {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.usecase--featured .stat__value {
  font-size: var(--fs-2xl);
}

@media (min-width: 960px) {
  .usecase--featured {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    align-self: start;
  }
}

/* ------------------------------------------------ security: trust panel */
.trust {
  display: grid;
  gap: var(--sp-10) var(--sp-6);
}

@media (min-width: 1024px) {
  .trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .trust__group--where {
    grid-column: 1 / -1;
  }
  .trust__group--where .trust__tiles {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.trust__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trust__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

.trust__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.trust__num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.trust__tiles {
  display: grid;
  flex: 1;
  gap: var(--sp-4);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .trust__group:not(.trust__group--where):not(.trust__group--control) .trust__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trust-hero {
  container-type: inline-size;
  gap: var(--sp-5);
}

.trust-hero__copy {
  display: flex;
  flex-direction: column;
}

.trust-hero__copy p {
  margin-bottom: 0;
}

@container (min-width: 620px) {
  .trust-hero__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--sp-4);
    align-items: center;
  }
  .trust-hero__copy .icon-duo {
    grid-row: span 2;
    margin-bottom: 0;
  }
  .trust-hero__copy .tile__title {
    margin-bottom: var(--sp-1);
  }
  .trust-hero__copy p {
    grid-column: 2;
  }
  .trust-hero__copy .tile__more {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-top: 0;
  }
}

/* Data-flow diagram: SVG, themed with tokens, animated by js/home-cards.js */
.dataflow {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-muted) 22%, transparent) 1px, transparent 0) 0 0 / 16px 16px,
    color-mix(in srgb, var(--cc-purple) 5%, var(--surface-2));
  border: 1px solid var(--border);
}

.dataflow__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-sans);
}

.dataflow__svg--wide {
  display: none;
}

@container (min-width: 460px) {
  .dataflow__svg--wide {
    display: block;
  }
  .dataflow__svg--tall {
    display: none;
  }
}

.dataflow__svg--tall {
  max-width: 340px;
  margin-inline: auto;
}

.df-label {
  font-size: 15px;
  font-weight: var(--fw-bold);
  fill: var(--text);
}

.df-sub {
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  fill: var(--text-muted);
}

.df-tag {
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  fill: var(--accent);
}

.df-node {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--accent) 55%, var(--border));
  stroke-width: 1.5;
}

.df-node--top {
  fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.df-line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 40%, var(--border));
  stroke-width: 1.5;
}

.df-screen {
  fill: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.df-card {
  fill: #fff;
  stroke: #7b61ff;
  stroke-width: 1.2;
}

.df-row {
  fill: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.df-led {
  fill: var(--success);
}

.df-wire {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 5;
}

.df-return {
  fill: none;
  stroke: var(--tone-teal, #0e7490);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
}

.df-arrow {
  fill: none;
  stroke: var(--tone-teal, #0e7490);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.df-lock,
.df-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.df-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
}

.df-lock-bg {
  fill: var(--accent-bg);
}

.df-lock-glyph {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.df-lock-body {
  fill: #fff;
}

.df-chip {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--tone-teal, #0e7490) 45%, var(--border));
  stroke-width: 1.2;
}

.df-chip-text {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  fill: var(--text);
}

.df-ring-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--tone-teal, #0e7490) 22%, transparent);
  stroke-width: 2.5;
}

.df-ring {
  fill: none;
  stroke: var(--tone-teal, #0e7490);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 11;
}

:root {
  --tone-teal: #0e7490;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --tone-teal: #67e8f9;
  }
:root:not([data-theme="light"]) .df-card {
    fill: #e2e8f0;
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] {
    --tone-teal: #67e8f9;
  }
:root[data-theme="dark"] .df-card {
    fill: #e2e8f0;
  }

/* Private-photo illustration */
.photo-art {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cc-purple) 7%, var(--surface-2));
  border: 1px solid var(--border);
}

.photo-art__img {
  display: grid;
  align-content: start;
  gap: 7px;
  width: min(100%, 200px);
  aspect-ratio: 1.7;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.45);
  filter: blur(1.5px);
}

.photo-art__line {
  display: block;
  height: 6px;
  width: 80%;
  border-radius: 3px;
  background: #cbd5e1;
}

.photo-art__line--name {
  height: 9px;
  width: 58%;
  background: #0b1120;
}

.photo-art__line--co {
  width: 70%;
  background: #7b61ff;
}

.photo-art__line--short {
  width: 42%;
}

.photo-art__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--cc-midnight);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  box-shadow: 0 8px 20px -8px rgba(11, 17, 32, 0.6);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .photo-art__img {
    background: #e2e8f0;
  }
:root:not([data-theme="light"]) .photo-art__pill {
    background: #f8fafc;
    color: #0b1120;
  }
}
/* manual dark (theme toggle) */
:root[data-theme="dark"] .photo-art__img {
    background: #e2e8f0;
  }
:root[data-theme="dark"] .photo-art__pill {
    background: #f8fafc;
    color: #0b1120;
  }

.trust-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.trust-cta__text {
  margin: 0;
  color: var(--text-2);
}

.trust-cta__text strong {
  color: var(--text);
}

/* ------------------------------------------------ blog teaser bento */
@media (min-width: 860px) {
  .blog-grid--bento {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .blog-grid--bento > .blog-card:first-child {
    grid-row: span 2;
  }
}

.blog-card h3 {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.blog-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.blog-card h3 a:hover {
  color: var(--accent);
}

.blog-card h3 a::after {
  z-index: 1;
}

.section--surface .blog-grid--bento > .blog-card:first-child,
.blog-grid--bento > .blog-card:first-child {
  justify-content: flex-end;
  min-height: 320px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 1px 1px, rgba(123, 97, 255, 0.28) 1px, transparent 0) 0 0 / 18px 18px padding-box,
    radial-gradient(120% 80% at 100% 0%, rgba(123, 97, 255, 0.22), transparent 60%) padding-box,
    radial-gradient(90% 70% at 0% 0%, rgba(27, 255, 255, 0.14), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(123, 97, 255, 0.6), rgba(27, 255, 255, 0.4) 55%, var(--border)) border-box;
  box-shadow: var(--sh-lg);
}

.blog-grid--bento > .blog-card:first-child h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.blog-grid--bento > .blog-card:first-child .read-more {
  margin-top: var(--sp-2);
}

/* Delete-account illustration (fills the tall "Your control" tile) */
.delete-art {
  display: none;
  place-items: center;
  margin-bottom: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tone, var(--danger)) 6%, var(--surface-2));
  border: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .delete-art {
    display: grid;
  }
}

.delete-art__dialog {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 220px);
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  font-size: var(--fs-sm);
  color: var(--text);
}

.delete-art__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--danger);
  background: var(--danger-soft);
}

.delete-art__line {
  display: block;
  width: 85%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.delete-art__line--short {
  width: 55%;
}

.delete-art__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.delete-art__btns i {
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--text-2);
}

.delete-art__btns .is-danger {
  border-color: transparent;
  background: #b91c1c;
  color: #fff;
}

/* The 2x2 hero tile: the illustration takes the spare height */
@media (min-width: 1024px) {
  .bento__hero .feature-art {
    flex: 1;
  }
  .bento__hero .mini-card {
    padding: 18px;
    gap: 10px;
  }
}

.dataflow__svg--tall .df-label { font-size: 17px; }
.dataflow__svg--tall .df-sub { font-size: 14px; }
.dataflow__svg--tall .df-tag { font-size: 12px; }
.dataflow__svg--tall .df-chip-text { font-size: 13.5px; }

@media (max-width: 1023px) {
  .photo-art {
    display: none;
  }
}

/* Android platform mark used in place of the word "Android" in pills */
.pill .badge--android,
.badge--android {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(61, 220, 132, 0.16);
  color: #1c8d52;
}
.pill .badge--android svg,
.badge--android svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .badge--android { color: #3ddc84; background: rgba(61, 220, 132, 0.14); }
}
:root[data-theme="dark"] .badge--android { color: #3ddc84; background: rgba(61, 220, 132, 0.14); }

/* The hero demo loops on its own (tap the phone to pause), so no Pause/Replay buttons. */
.hero__demo .demo__controls { display: none; }

/* Theme toggle: native controls and scrollbars follow the chosen theme */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }