/* ================================================
   COMPONENTS — Tonic Desk Marketing Site
   ================================================ */

/* ---- Accessibility primitives ---- */
/* Skip-to-content link. Hidden until keyboard focus; first focusable
   element in <header> so keyboard users can jump past the navbar.
   Honours semantic tokens so the focused state flips with the theme. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.625rem 1rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--duration-fast) var(--ease-out);
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Mirror of .sr-only from utilities.css — re-declared here so it
   exists even before utilities.css finishes loading (theme-announcer
   in layout.html depends on it for the polite live region). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Default <summary> cursor for any details/summary (FAQ + docs).
   The .faq-item summary rule below also sets pointer; this catches
   any future <details> blocks that don't carry the .faq-item class. */
summary { cursor: pointer; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

.hero__title {
  font-size: var(--font-size-hero);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  max-width: 720px;
  text-wrap: balance;
}

.hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--text);
  line-height: var(--leading-normal);
  max-width: 560px;
  margin-top: var(--space-lg);
  text-wrap: pretty;
}

.hero__title--centered { margin-left: auto; margin-right: auto; }
.hero__subtitle--centered { margin-left: auto; margin-right: auto; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) ease;
}

.btn:active { transform: scale(0.97); }

.btn:focus-visible,
.navbar__link:focus-visible,
.pricing-toggle__option:focus-visible,
.faq-item summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.btn--primary {
  /* Gradient tonic-600 -> tonic-800 keeps white text >= 5.42:1 across
     the whole button surface (WCAG 1.4.3 AA). Was 500 -> 600 (2.64-4.0). */
  background: linear-gradient(135deg, var(--color-primary-600), var(--tonic-800));
  color: #fff;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), 0 4px 14px -4px rgba(15, 179, 158, 0.40);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 8px 22px -6px rgba(15, 179, 158, 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn--secondary:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover { color: var(--text-primary); background: var(--bg-muted); }

.btn--ghost-light {
  background: transparent;
  color: rgba(241, 245, 249, 0.7);
}

.btn--ghost-light:hover { color: #f1f5f9; background: rgba(255, 255, 255, 0.08); }

.btn--lg {
  padding: 0.8rem 1.75rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-xl);
}

.btn--sm {
  padding: 0.4rem 0.875rem;
  font-size: var(--font-size-xs);
}

/* ---- Cards ---- */
.card {
  background: color-mix(in oklch, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), var(--shadow-md);
  padding: var(--space-xl);
  transition: transform 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out),
              border-color 240ms ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), var(--shadow-lg);
}

[data-theme="dark"] .card {
  background: color-mix(in oklch, var(--bg-elevated) 92%, transparent);
  box-shadow: inset 0 1px 0 0 rgba(56, 197, 153, 0.10), var(--shadow-md);
}

[data-theme="dark"] .card:hover {
  border-color: color-mix(in oklch, var(--brand) 45%, transparent);
  box-shadow: inset 0 1px 0 0 rgba(56, 197, 153, 0.10), var(--shadow-lg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    background: color-mix(in oklch, var(--bg-elevated) 92%, transparent);
    box-shadow: inset 0 1px 0 0 rgba(56, 197, 153, 0.10), var(--shadow-md);
  }
  :root:not([data-theme="light"]) .card:hover {
    border-color: color-mix(in oklch, var(--brand) 45%, transparent);
    box-shadow: inset 0 1px 0 0 rgba(56, 197, 153, 0.10), var(--shadow-lg);
  }
}

.card--feature {
  padding: var(--space-2xl);
}

/* Pain-points + other generic feature cards still use this teal pill */
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-soft), var(--tonic-100));
  color: var(--brand-emphasis);
  border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--space-lg);
}
[data-theme="dark"] .card__icon {
  background: linear-gradient(135deg, var(--tonic-900), var(--tonic-700));
  color: var(--tonic-200);
  border-color: color-mix(in oklch, var(--tonic-400) 35%, transparent);
}

/* ================================================
   FEATURE BENTO — homepage features section
   Asymmetric editorial grid: 2x2 hero tile with a
   watermark icon, four square tiles with icons that
   breathe, and a wide inverted closer at the bottom.
   ================================================ */

.feature-section { padding-block: var(--space-5xl) var(--space-4xl); }

.feature-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: clamp(0.875rem, 0.5rem + 1vw, 1.25rem);
  margin-top: var(--space-3xl);
}

/* Base tile */
.feature-tile {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  isolation: isolate;
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease,
    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--brand) 40%, transparent);
  box-shadow:
    0 24px 48px -20px color-mix(in oklch, var(--brand) 25%, transparent),
    0 6px 14px -8px rgba(15, 23, 42, 0.10);
}

/* Standard tile icon (squares) */
.feature-tile__icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-tile__icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.feature-tile:hover .feature-tile__icon {
  transform: rotate(-4deg) scale(1.06);
}

/* Hero — spans 2×2, watermark icon in bottom-right */
.feature-tile--hero {
  grid-column: span 2;
  grid-row: span 2;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-xl);
  background:
    radial-gradient(120% 80% at 100% 100%, color-mix(in oklch, var(--brand-soft) 70%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--bg-elevated) 0%, color-mix(in oklch, var(--brand-soft) 35%, var(--bg-elevated)) 100%);
  border-color: color-mix(in oklch, var(--brand) 18%, var(--border));
}
.feature-tile--hero .feature-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 36ch;
  align-self: end;
  position: relative;
  z-index: 1;
}
.feature-tile--hero .feature-tile__title {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.feature-tile--hero .feature-tile__text {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
}
.feature-tile__mark {
  position: absolute;
  right: clamp(-3rem, -4vw, -1.5rem);
  bottom: clamp(-3rem, -4vw, -1.5rem);
  width: clamp(220px, 36vw, 360px);
  height: clamp(220px, 36vw, 360px);
  opacity: 0.20;
  z-index: 0;
  transition:
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms ease;
  pointer-events: none;
}
.feature-tile__mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.feature-tile--hero:hover .feature-tile__mark {
  transform: rotate(-8deg) scale(1.06);
  opacity: 0.28;
}

/* Wide bottom — inverted dark, horizontal layout */
.feature-tile--wide {
  grid-column: span 4;
  display: grid;
  grid-template-columns: clamp(96px, 14vw, 140px) 1fr;
  gap: clamp(1.5rem, 0.8rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.feature-tile--inverted {
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in oklch, var(--tonic-800) 50%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--slate-900) 0%, var(--slate-950) 100%);
  border-color: var(--slate-800);
}
.feature-tile--inverted .feature-tile__title {
  color: var(--gin-50);
}
.feature-tile--inverted .feature-tile__text {
  color: var(--slate-300);
  max-width: 64ch;
}
.feature-tile--inverted:hover {
  border-color: color-mix(in oklch, var(--brand) 55%, var(--slate-800));
}
.feature-tile__icon-large {
  display: block;
  width: clamp(96px, 14vw, 140px);
  height: clamp(96px, 14vw, 140px);
  flex-shrink: 0;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-tile__icon-large img {
  width: 100%;
  height: 100%;
  filter: brightness(1.6) saturate(1.15);
}
.feature-tile--wide:hover .feature-tile__icon-large {
  transform: rotate(-10deg) scale(1.04);
}
.feature-tile__hairline {
  position: absolute;
  inset: 0 auto auto 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--brand) 50%, transparent), transparent);
  opacity: 0.5;
}

/* Body wrapper for hero + wide tiles */
.feature-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Meta row (number + kicker) on standard + wide tiles */
.feature-tile__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: auto;
}

/* Editorial numerals — top-right on hero, inline elsewhere */
.feature-tile__num {
  position: absolute;
  top: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  right: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  font-family: var(--font-mono, var(--font-family));
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}
.feature-tile__num--inline {
  position: static;
  font-size: 0.625rem;
}
.feature-tile__num--light {
  color: color-mix(in oklch, var(--gin-50) 55%, transparent);
}

/* Tiny uppercase eyebrow per tile */
.feature-tile__kicker {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-emphasis);
}
.feature-tile__kicker--light {
  color: var(--tonic-300);
}

/* Titles + body */
.feature-tile__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

.feature-tile__text {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* Dark mode: hero gradient flips toward tonic-900, watermark stays
   tinted but slightly brighter so the line drawing reads against dark. */
[data-theme="dark"] .feature-tile--hero {
  background:
    radial-gradient(120% 80% at 100% 100%, color-mix(in oklch, var(--tonic-800) 70%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--bg-elevated) 0%, color-mix(in oklch, var(--tonic-900) 55%, var(--bg-elevated)) 100%);
}
[data-theme="dark"] .feature-tile__mark img,
[data-theme="dark"] .feature-tile__icon img {
  filter: brightness(1.45) saturate(1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feature-tile--hero {
    background:
      radial-gradient(120% 80% at 100% 100%, color-mix(in oklch, var(--tonic-800) 70%, transparent) 0%, transparent 55%),
      linear-gradient(155deg, var(--bg-elevated) 0%, color-mix(in oklch, var(--tonic-900) 55%, var(--bg-elevated)) 100%);
  }
  :root:not([data-theme="light"]) .feature-tile__mark img,
  :root:not([data-theme="light"]) .feature-tile__icon img {
    filter: brightness(1.45) saturate(1.15);
  }
}

/* Responsive: 2-col at tablet, 1-col at mobile */
@media (max-width: 960px) {
  .feature-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .feature-tile--hero {
    grid-column: span 2;
    grid-row: auto;
    min-height: 360px;
  }
  .feature-tile--wide {
    grid-column: span 2;
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .feature-tile--wide .feature-tile__body { align-items: center; }
  .feature-tile--wide .feature-tile__meta { justify-content: center; }
  .feature-tile__icon-large { margin: 0 auto; }
}

@media (max-width: 560px) {
  .feature-bento {
    grid-template-columns: 1fr;
  }
  .feature-tile,
  .feature-tile--hero,
  .feature-tile--wide {
    grid-column: span 1;
  }
  .feature-tile--hero {
    min-height: 320px;
  }
}

/* Strict reduced-motion compliance */
@media (prefers-reduced-motion: reduce) {
  .feature-tile,
  .feature-tile__icon,
  .feature-tile__mark,
  .feature-tile__icon-large {
    transition: none !important;
    animation: none !important;
  }
  .feature-tile:hover,
  .feature-tile:hover .feature-tile__icon,
  .feature-tile--hero:hover .feature-tile__mark,
  .feature-tile--wide:hover .feature-tile__icon-large {
    transform: none !important;
  }
}
/* Dark mode: invert the gradient so the icon stays luminous (tonic-700->900
   with bright tonic-200 stroke), instead of dark-slate->pale-mint which
   buried the icon stroke. */
[data-theme="dark"] .card__icon {
  background: linear-gradient(135deg, var(--tonic-900), var(--tonic-700));
  color: var(--tonic-200);
  border-color: color-mix(in oklch, var(--tonic-400) 35%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__icon {
    background: linear-gradient(135deg, var(--tonic-900), var(--tonic-700));
    color: var(--tonic-200);
    border-color: color-mix(in oklch, var(--tonic-400) 35%, transparent);
  }
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.card__text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---- Pricing Cards ---- */
/* ---- Pricing Grid ---- */
.pricing-grid {
  display: flex;
  gap: var(--space-lg);
  align-items: stretch;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.pricing-card--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-glow);
}

.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.pricing-card__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.pricing-card__price {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.pricing-card__price span {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-card__period {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.pricing-card__features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.pricing-card__features li {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding-left: 1.375rem;
  position: relative;
  line-height: 1.5;
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 14px;
  height: 14px;
  background: var(--brand-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d9488'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}
/* Dark mode: brand-soft becomes slate-900 (~card bg) and the dark-teal
   SVG check is invisible. Swap fill to bright tonic-300 (#6fdab3) and
   the circle to a tonic-tinted alpha. */
[data-theme="dark"] .pricing-card__features li::before {
  background: color-mix(in oklch, var(--tonic-700) 40%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236fdab3'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-card__features li::before {
    background: color-mix(in oklch, var(--tonic-700) 40%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236fdab3'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  }
}

.pricing-card__features li.excluded {
  color: var(--text-muted);
  text-decoration: line-through;
}

.pricing-card__features li.excluded::before {
  background: var(--bg-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.pricing-card .btn {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .pricing-grid {
    flex-wrap: wrap;
    max-width: 560px;
  }
  .pricing-card {
    max-width: none;
    flex: 1 1 calc(50% - var(--space-md));
  }
}

@media (max-width: 600px) {
  .pricing-grid {
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
  }
  .pricing-card {
    max-width: none;
    flex: none;
  }
}

/* ---- Comparison Table ---- */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.comparison-table th,
.comparison-table td {
  padding: 0.75rem var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.comparison-table thead th {
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  background: var(--bg-muted);
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: var(--navbar-height);
  z-index: 10;
}

.comparison-table th.highlight {
  background: var(--brand-soft);
  color: var(--brand-emphasis);
}
/* Dark-mode highlight: brand-soft flips to slate-900 (same as table bg),
   so override with a tonic-tinted fill that actually pops. */
[data-theme="dark"] .comparison-table th.highlight,
[data-theme="dark"] .comparison-table td.highlight {
  background: color-mix(in oklch, var(--tonic-900) 60%, transparent);
  color: var(--tonic-200);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .comparison-table th.highlight,
  :root:not([data-theme="light"]) .comparison-table td.highlight {
    background: color-mix(in oklch, var(--tonic-900) 60%, transparent);
    color: var(--tonic-200);
  }
}
.comparison-table td.highlight {
  background: var(--brand-soft);
}

.comparison-table tbody tr:last-child td { border-bottom: none; }

.comparison-table tbody tr:hover {
  background: var(--bg-muted);
}

.comparison-table tbody tr:hover td.highlight {
  background: rgba(20, 184, 166, 0.08);
}

.comparison-table td strong {
  color: var(--text-primary);
}

.comparison-table .check {
  color: var(--brand);
  font-weight: 700;
}

.comparison-table .cross {
  color: var(--text-soft);
}

/* ---- Badges / Tags ----
   Base pill used for category labels, status tags, and editorial accents.
   The four ramped variants (--tonic / --quinine / --slate / --citrus) replace
   prior inline `background: var(--N-100); color: var(--N-700)` patterns
   across blog/blog-post/changelog/roadmap, giving each a proper dark-mode
   counterpart via color-mix overlays on the dark ramp ends. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.badge--primary {
  background: var(--brand-soft);
  color: var(--brand-emphasis);
}

.badge--neutral {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.badge--savings {
  background: var(--color-success-light);
  color: var(--color-success);
  font-weight: 700;
}

.badge--tonic    { background: var(--tonic-100);   color: var(--tonic-700);   border-color: var(--tonic-200); }
.badge--quinine  { background: var(--quinine-300); color: var(--quinine-600); border-color: var(--quinine-400); }
.badge--slate    { background: var(--slate-100);   color: var(--slate-700);   border-color: var(--slate-200); }
.badge--citrus   { background: var(--citrus-100);  color: var(--citrus-800);  border-color: var(--citrus-300); }

[data-theme="dark"] .badge--tonic {
  background: color-mix(in oklch, var(--tonic-900) 50%, transparent);
  color: var(--tonic-200);
  border-color: color-mix(in oklch, var(--tonic-500) 30%, transparent);
}
[data-theme="dark"] .badge--quinine {
  background: color-mix(in oklch, var(--quinine-600) 35%, transparent);
  color: var(--quinine-300);
  border-color: color-mix(in oklch, var(--quinine-500) 40%, transparent);
}
[data-theme="dark"] .badge--slate {
  background: color-mix(in oklch, var(--slate-800) 60%, transparent);
  color: var(--slate-300);
  border-color: color-mix(in oklch, var(--slate-600) 40%, transparent);
}
[data-theme="dark"] .badge--citrus {
  background: color-mix(in oklch, var(--citrus-900) 40%, transparent);
  color: var(--citrus-200);
  border-color: color-mix(in oklch, var(--citrus-700) 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge--tonic {
    background: color-mix(in oklch, var(--tonic-900) 50%, transparent);
    color: var(--tonic-200);
    border-color: color-mix(in oklch, var(--tonic-500) 30%, transparent);
  }
  :root:not([data-theme="light"]) .badge--quinine {
    background: color-mix(in oklch, var(--quinine-600) 35%, transparent);
    color: var(--quinine-300);
    border-color: color-mix(in oklch, var(--quinine-500) 40%, transparent);
  }
  :root:not([data-theme="light"]) .badge--slate {
    background: color-mix(in oklch, var(--slate-800) 60%, transparent);
    color: var(--slate-300);
    border-color: color-mix(in oklch, var(--slate-600) 40%, transparent);
  }
  :root:not([data-theme="light"]) .badge--citrus {
    background: color-mix(in oklch, var(--citrus-900) 40%, transparent);
    color: var(--citrus-200);
    border-color: color-mix(in oklch, var(--citrus-700) 40%, transparent);
  }
}

/* ---- Pricing Toggle ---- */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--bg-muted);
  padding: 4px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3xl);
}

.pricing-toggle__option {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.pricing-toggle__option.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.pricing-toggle__savings {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--brand-emphasis);
}

/* ---- Screenshot Showcase ---- */
.screenshot {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.screenshot--hero {
  max-width: 900px;
  height: auto;
  margin: var(--space-3xl) auto 0;
  /* Pointer-tracking spotlight — JS sets --spot-x/--spot-y/--spot-on
     in animations.js on pointermove. ::after below paints the glow. */
  position: relative;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-on: 0;
}

.screenshot--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    220px at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.20),
    transparent 60%
  );
  opacity: var(--spot-on);
  transition: opacity 280ms ease;
  border-radius: inherit;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .screenshot--hero::after { display: none; }
}

@media (pointer: coarse) {
  /* Touch devices never trigger the JS spotlight — hide the pseudo-element
     so it doesn't render an empty stacking context. */
  .screenshot--hero::after { display: none; }
}

/* ---- Stats Row ---- */
.stats-row {
  display: flex;
  gap: var(--space-3xl);
  justify-content: center;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat__value {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--brand-emphasis);
}

.stat__label {
  font-size: var(--font-size-sm);
  /* Was --color-neutral-400 (~3.4:1 on --gin-50) — fails WCAG AA.
     --text-muted resolves to --slate-600 in light (~7:1) and
     --slate-300 in dark (passes AA on slate-950). */
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ============================================
   COST BARS — homepage comparison
   Horizontal bar chart for "what you actually
   pay" — scroll-triggered fill via reveal-stagger.
   ============================================ */
.cost-bars {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cost-bars__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr auto;
  align-items: center;
  gap: var(--space-md);
}

.cost-bars__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text);
}

.cost-bars__track {
  height: 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.cost-bars__fill {
  height: 100%;
  /* Initial state: zero width. .visible on the parent
     animates the fill out to its --target value. */
  width: 0;
  border-radius: var(--radius-full);
  transition: width 1200ms var(--ease-out);
  transform-origin: left;
}

.reveal-stagger.visible .cost-bars__fill {
  width: var(--target);
}

.cost-bars__fill--salesforce {
  background: linear-gradient(90deg, var(--slate-700), var(--slate-500));
}
/* Dark mode: slate-700 on slate-900-ish muted bg = ~1.5:1 contrast.
   Shift one ramp lighter so the bar still reads as 'longest = worst'
   without disappearing into the section. */
[data-theme="dark"] .cost-bars__fill--salesforce {
  background: linear-gradient(90deg, var(--slate-500), var(--slate-300));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cost-bars__fill--salesforce {
    background: linear-gradient(90deg, var(--slate-500), var(--slate-300));
  }
}

.cost-bars__fill--hubspot {
  background: linear-gradient(90deg, var(--citrus-700), var(--citrus-500));
}

.cost-bars__fill--tonic {
  background: linear-gradient(90deg, var(--tonic-600), var(--tonic-400));
  box-shadow: 0 0 12px rgba(15, 179, 158, 0.35);
}

.cost-bars__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 90px;
  text-align: right;
}

.cost-bars__row--featured .cost-bars__label,
.cost-bars__row--featured .cost-bars__value {
  color: var(--brand-emphasis);
}

.cost-bars__footnote {
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  text-align: center;
  margin-top: var(--space-lg);
  max-width: 640px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .cost-bars__row {
    grid-template-columns: 1fr auto;
    gap: var(--space-xs);
  }
  .cost-bars__track {
    grid-column: 1 / -1;
  }
}

/* Reduced motion — bars appear at full width with no animation */
@media (prefers-reduced-motion: reduce) {
  .cost-bars__fill {
    width: var(--target);
    transition: none;
  }
}

/* ============================================
   HOMEPAGE — section-scoped helpers
   Replaces inline styles previously scattered
   across templates/homepage.html.
   ============================================ */

/* Hero showcase: pulls the screenshot frame down
   below the headline+CTA stack. */
.hero-showcase--spaced {
  margin-top: var(--space-3xl);
}

/* "Free cost audit" CTA block on the homepage —
   centred narrow column with reveal animation. */
.home-cta {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.home-cta__actions {
  margin-top: var(--space-xl);
}

/* ---- FAQ ---- */
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-lg) 0;
}

.faq-item summary {
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.faq-item summary::after {
  content: '+';
  font-size: var(--font-size-xl);
  color: var(--text-muted);
  transition: transform var(--duration-fast) ease;
  flex-shrink: 0;
  margin-left: var(--space-md);
}

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

.faq-item__answer {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---- CTA Banner ---- */
/* Matches .feature-tile--inverted: tonic-800 radial from bottom-left over a
   slate-900 -> slate-950 diagonal. One dark idiom across the site. */
.cta-banner {
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in oklch, var(--tonic-800) 50%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--slate-900) 0%, var(--slate-950) 100%);
  border: 1px solid var(--slate-800);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl) var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--citrus-500) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner__title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: var(--tracking-tight);
  position: relative;
}

.cta-banner__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-neutral-400);
  margin-top: var(--space-md);
  position: relative;
}

.cta-banner__actions {
  margin-top: var(--space-xl);
  position: relative;
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Code Blocks (docs) ---- */
pre {
  background: var(--color-neutral-900);
  color: #e2e8f0;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ---- Migration Steps ---- */
.steps {
  counter-reset: step;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.step {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__content h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.step__content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---- Prose (Markdown-rendered content) ---- */
article p,
.prose p {
  margin-bottom: var(--space-md);
  line-height: var(--leading-relaxed);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-wrap: pretty;
}

article p strong, .prose p strong {
  color: var(--text-primary);
}

article h2, .prose h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

article h3, .prose h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-sm);
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  letter-spacing: var(--tracking-tight);
}

article h3:first-child, .prose h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

article h4, .prose h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

article ul, article ol,
.prose ul, .prose ol {
  margin: var(--space-md) 0;
  padding-left: 1.5rem;
}

article li, .prose li {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-relaxed);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

article ul li::marker { color: var(--brand); }
article ol li::marker { color: var(--brand); font-weight: 600; }

article blockquote, .prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: var(--space-lg);
  margin: var(--space-lg) 0;
  color: var(--text-secondary);
  font-style: italic;
}

article strong, .prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

article a, .prose a {
  color: var(--brand-emphasis);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--brand) 45%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-fast) ease;
}

article a:hover, .prose a:hover {
  text-decoration-color: var(--brand-emphasis);
}

article hr, .prose hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--space-2xl) 0;
}

/* Markdown-generated tables get polished styling automatically */
article table, .prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  margin: var(--space-xl) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

article table th, .prose table th {
  padding: 0.75rem var(--space-lg);
  text-align: left;
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  background: var(--bg-muted);
  border-bottom: 2px solid var(--border-color);
}

article table td, .prose table td {
  padding: 0.75rem var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

article table td strong, .prose table td strong {
  color: var(--text-primary);
  font-weight: 700;
}

article table tbody tr:last-child td { border-bottom: none; }
article table tbody tr:hover { background: var(--brand-soft); }

/* Highlight the Tonic Desk column (2nd data column typically) */
article table th:last-child,
article table td:last-child,
.comparison-table th:last-child,
.comparison-table td:last-child {
  /* No automatic highlight — use .highlight class explicitly */
}

/* Table responsive wrapper */
article .table-wrap, .prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-lg) 0;
}

article img, .prose img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
}

article code, .prose code {
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

/* ================================================
   LISTICLE Pros/Cons labels — theme-aware so dark mode
   doesn't show pastel pills on the dark canvas.
   ================================================ */
.listicle-proscons__label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.listicle-proscons__label--pros { color: var(--brand-emphasis); }
.listicle-proscons__label--cons { color: var(--text-muted); }

.listicle-proscons__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.875em;
}
.listicle-proscons__icon--pros { background: var(--tonic-100); color: var(--tonic-700); }
.listicle-proscons__icon--cons { background: var(--slate-100); color: var(--slate-700); }

[data-theme="dark"] .listicle-proscons__icon--pros {
  background: color-mix(in oklch, var(--tonic-800) 60%, transparent);
  color: var(--tonic-200);
}
[data-theme="dark"] .listicle-proscons__icon--cons {
  background: color-mix(in oklch, var(--slate-700) 60%, transparent);
  color: var(--slate-200);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .listicle-proscons__icon--pros {
    background: color-mix(in oklch, var(--tonic-800) 60%, transparent);
    color: var(--tonic-200);
  }
  :root:not([data-theme="light"]) .listicle-proscons__icon--cons {
    background: color-mix(in oklch, var(--slate-700) 60%, transparent);
    color: var(--slate-200);
  }
}

/* ================================================
   THEME TOGGLE (navbar dark/light switch)
   Uses Tokens-v2 semantic surface tokens so the
   toggle itself flips correctly even if a given
   page hasn't been migrated to semantic tokens yet.
   ================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border, var(--border-color));
  border-radius: var(--radius-md);
  color: var(--text, var(--text-primary));
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.theme-toggle:hover {
  background: var(--brand-soft, var(--color-primary-50));
  border-color: var(--brand, var(--color-primary-500));
  color: var(--brand, var(--color-primary-600));
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary-400));
  outline-offset: 2px;
}
.theme-toggle__icon { display: none; }
.theme-toggle__icon--sun { display: block; }

/* Dark-mode pop: stronger border + subtle bg so the toggle reads
   clearly against a dark navbar surface. */
[data-theme="dark"] .theme-toggle {
  background: color-mix(in oklch, var(--bg-elevated) 60%, transparent);
  border-color: var(--border-strong);
}
[data-theme="dark"] .theme-toggle:hover {
  background: color-mix(in oklch, var(--brand-soft) 70%, transparent);
  border-color: var(--brand);
  color: var(--brand);
}
[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle {
    background: color-mix(in oklch, var(--bg-elevated) 60%, transparent);
    border-color: var(--border-strong);
  }
  :root:not([data-theme="light"]) .theme-toggle:hover {
    background: color-mix(in oklch, var(--brand-soft) 70%, transparent);
    border-color: var(--brand);
    color: var(--brand);
  }
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: block; }
}

article pre, .prose pre {
  margin: var(--space-lg) 0;
}

article pre code, .prose pre code {
  background: none;
  padding: 0;
}

/* ---- Cookie Consent ---- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-neutral-900);
  color: var(--color-neutral-200);
  padding: var(--space-lg) var(--space-xl);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.cookie-banner__text {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-300);
  line-height: var(--leading-normal);
  flex: 1;
  min-width: 260px;
}

.cookie-banner__text a {
  color: var(--color-primary-400);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 0.5rem 1.25rem;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.cookie-banner__btn--accept {
  background: var(--color-primary-500);
  color: #fff;
}

.cookie-banner__btn--accept:hover {
  background: var(--color-primary-400);
}

.cookie-banner__btn--decline {
  background: transparent;
  color: var(--color-neutral-400);
  border: 1px solid var(--color-neutral-700);
}

.cookie-banner__btn--decline:hover {
  border-color: var(--color-neutral-500);
  color: var(--color-neutral-200);
}

/* ---- Feature Split (alternating image + copy rows on /features/) ---- */
.feature-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4xl);
  align-items: center;
}

.feature-split__media--leading { order: -1; }

.feature-split__title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.feature-split__lede {
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
  text-wrap: pretty;
}

.feature-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feature-split__list-item {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.feature-split__list-item::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 768px) {
  .feature-split {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .feature-split__media--leading { order: 0; }
  .feature-split__title { font-size: var(--font-size-2xl); }
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
}

.breadcrumbs a {
  color: var(--brand-emphasis);
  text-decoration: none;
}

.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 0.5rem; }

/* ---- Responsive Components ---- */
@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-4xl); }
  .hero__subtitle { font-size: var(--font-size-base); }
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  .pricing-card { padding: var(--space-lg); }
  .stats-row { gap: var(--space-xl); }
  .stat__value { font-size: var(--font-size-3xl); }
  .cta-banner { padding: var(--space-2xl) var(--space-lg); }
  .cta-banner__title { font-size: var(--font-size-2xl); }
  .comparison-table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
  .hero__title { font-size: var(--font-size-3xl); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn--lg { width: 100%; }
}

/* ---- Pricing matrix tweaks on top of existing .comparison-table ---- */
.pricing-matrix th .pricing-matrix__sub {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.15rem;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.pricing-matrix__highlight {
  background: var(--brand-soft);
  position: relative;
}
.pricing-matrix__category td {
  background: var(--bg-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-sm);
}
.pricing-matrix tbody td {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.pricing-matrix tbody td:first-child {
  font-weight: 600;
  color: var(--text);
}
.pricing-matrix tbody td:nth-child(4) {  /* Pro column emphasis */
  background: color-mix(in oklch, var(--brand-soft) 50%, transparent);
}

/* ---- Placeholder badge ----
   Used on customer-story hub cards and the customer-story page hero when
   the entry is editorial placeholder copy rather than a real published case
   study. Dot indicator via ::before signals provisional-content status; citrus
   palette ties to the brand's "soft warning" accent without screaming. */
.placeholder-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: color-mix(in oklch, var(--citrus-100) 70%, transparent);
  color: var(--citrus-800);
  border: 1px solid var(--citrus-300);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.placeholder-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--citrus-600);
  flex-shrink: 0;
}

[data-theme="dark"] .placeholder-badge {
  background: color-mix(in oklch, var(--citrus-900) 40%, transparent);
  color: var(--citrus-200);
  border-color: var(--citrus-700);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .placeholder-badge {
    background: color-mix(in oklch, var(--citrus-900) 40%, transparent);
    color: var(--citrus-200);
    border-color: var(--citrus-700);
  }
}

/* ---- Editorial panel ----
   Mint-tinted callout used for "After" cards in use-case templates and
   similar editorial highlights. In light mode it sits on a pale tonic-50
   wash; in dark mode it shifts to a translucent tonic-900 overlay so the
   warmth survives without clashing with the dark-page surface tokens. */
.editorial-panel {
  background: var(--tonic-50);
  color: var(--text-primary);
  border-color: var(--tonic-200);
}
.editorial-panel__eyebrow {
  color: var(--tonic-700);
}

[data-theme="dark"] .editorial-panel {
  background: color-mix(in oklch, var(--tonic-900) 30%, transparent);
  color: var(--tonic-100);
  border-color: color-mix(in oklch, var(--tonic-600) 40%, transparent);
}
[data-theme="dark"] .editorial-panel__eyebrow {
  color: var(--tonic-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editorial-panel {
    background: color-mix(in oklch, var(--tonic-900) 30%, transparent);
    color: var(--tonic-100);
    border-color: color-mix(in oklch, var(--tonic-600) 40%, transparent);
  }
  :root:not([data-theme="light"]) .editorial-panel__eyebrow {
    color: var(--tonic-300);
  }
}

/* ================================================
   SECTION SPACING HELPERS
   Small modifier set so templates can opt out of
   .section's default --space-5xl padding without
   inline `style="padding-top: ..."` calls. The
   `--tight` and `--snug` variants are taken from
   the prior inline values across customer-story,
   comparison, industry, and glossary templates.
   ================================================ */
.section--tight {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.section--snug {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
/* Page-top hero: clears the fixed navbar and adds breathing room.
   Used on industry/customer-story/glossary headers (non-citrus hero). */
.section--page-hero {
  padding-top: calc(var(--navbar-height) + var(--space-4xl));
  padding-bottom: var(--space-2xl);
}
.section--page-hero-sm {
  padding-top: calc(var(--navbar-height) + var(--space-3xl));
  padding-bottom: var(--space-xl);
}
/* Lops the bottom padding off a section so the next one can hug. */
.section--no-pb { padding-bottom: 0; }

/* ================================================
   PAGE HEAD — standardised non-hero page title block
   Used on the customer-story, industry, glossary,
   and glossary-section templates. Replaces a half-dozen
   slightly-different inline h1/p combinations.
   ================================================ */
.page-head__title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-top: var(--space-sm);
  max-width: 720px;
  text-wrap: balance;
}
.page-head__lede {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-md);
  max-width: 640px;
  text-wrap: pretty;
}
.page-head__meta {
  margin-top: var(--space-lg);
  font-size: var(--font-size-xs);
  color: var(--text-soft);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ================================================
   PULLQUOTE — shared figure for customer-story hero
   quote, industry testimonial. Tonic-tinted left rule,
   elevated surface, snug typography.
   ================================================ */
.pullquote {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.pullquote--lg .pullquote__body {
  font-size: var(--font-size-2xl);
  line-height: var(--leading-snug);
}
.pullquote__body {
  font-size: var(--font-size-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-weight: 500;
  text-wrap: pretty;
}
.pullquote__cite {
  margin-top: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

/* ================================================
   CUSTOMER STORY — page-scoped components
   Replaces the 42-occurrence inline-style soup in
   templates/customer-story.html.
   ================================================ */

/* Hero meta strip: industry badge, switched-from pill, pub date pill. */
.customer-story__hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.customer-story__placeholder-wrap {
  margin-top: var(--space-lg);
}
.customer-story__hero-eyebrow {
  margin-top: var(--space-xl);
}

/* "Switched from X" pill — slate variant of .badge, kept in the
   same visual family so it sits next to .badge--neutral cleanly. */
.badge--switched {
  background: var(--slate-100);
  color: var(--slate-700);
}
[data-theme="dark"] .badge--switched {
  background: color-mix(in oklch, var(--slate-800) 60%, transparent);
  color: var(--slate-200);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge--switched {
    background: color-mix(in oklch, var(--slate-800) 60%, transparent);
    color: var(--slate-200);
  }
}

/* Date pill: tabular numerals, muted surface, full-pill radius. */
.date-pill {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
}

/* Metrics strip — n-up grid of stat cells with internal dividers. */
.metrics-strip {
  display: grid;
  grid-template-columns: repeat(var(--metrics-cols, 3), 1fr);
  gap: var(--space-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.metrics-strip__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}
.metrics-strip__cell + .metrics-strip__cell {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-lg);
}
.metrics-strip__value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--brand-emphasis);
  line-height: 1;
}
.metrics-strip__label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}
@media (max-width: 640px) {
  .metrics-strip {
    grid-template-columns: 1fr;
  }
  .metrics-strip__cell + .metrics-strip__cell {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: var(--space-lg);
  }
}

/* Article + sidebar layout */
.customer-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-3xl);
  align-items: start;
}
.customer-story__article { min-width: 0; }
.customer-story__summary {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2xl);
}

/* Sectioned article body with alternating-side tonic rule */
.customer-story__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
.customer-story__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
.customer-story__section--rule-right {
  padding-right: var(--space-xl);
  border-right: 3px solid var(--brand-soft);
}
.customer-story__section--rule-left {
  padding-left: var(--space-xl);
  border-left: 3px solid var(--tonic-200);
}
[data-theme="dark"] .customer-story__section--rule-right {
  border-right-color: color-mix(in oklch, var(--tonic-700) 50%, transparent);
}
[data-theme="dark"] .customer-story__section--rule-left {
  border-left-color: color-mix(in oklch, var(--tonic-600) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .customer-story__section--rule-right {
    border-right-color: color-mix(in oklch, var(--tonic-700) 50%, transparent);
  }
  :root:not([data-theme="light"]) .customer-story__section--rule-left {
    border-left-color: color-mix(in oklch, var(--tonic-600) 50%, transparent);
  }
}
.customer-story__section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: var(--leading-snug);
}
.customer-story__section-body {
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

/* Sidebar: sticky company snapshot panel */
.customer-story__sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-lg));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.customer-story__sidebar-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Definition list used inside the sidebar */
.snapshot-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
}
.snapshot-list__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.snapshot-list__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.snapshot-list__term {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-soft);
}
.snapshot-list__def {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}
.snapshot-list__def--tabular {
  font-variant-numeric: tabular-nums;
}

.customer-story__sidebar-foot {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}
.customer-story__back-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-emphasis);
}

@media (max-width: 900px) {
  .customer-story__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .customer-story__sidebar {
    position: static;
    order: -1;
  }
}
@media (max-width: 640px) {
  .customer-story__section--rule-left,
  .customer-story__section--rule-right {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ================================================
   COMPARISON — page-scoped helpers
   Center-aligned breadcrumb variant for the hero, plus
   the SEO reverse-keyword prose block at page end.
   ================================================ */
.compare-hero { text-align: center; }
.compare-hero .breadcrumbs {
  color: var(--color-neutral-600);
  justify-content: center;
  display: flex;
}
.compare-hero .breadcrumbs a {
  color: var(--color-neutral-700);
}
.compare-hero .hero__title { margin: 0 auto; }
.compare-hero .hero__subtitle { margin: var(--space-lg) auto 0; }
.compare-hero .hero__actions { justify-content: center; }

.compare-seo__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}
.compare-seo__body {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.section__subtitle--centered {
  margin: var(--space-md) auto;
}
.compare-cta-actions {
  margin-top: var(--space-xl);
}

.compare-table-wrap { overflow-x: auto; }

/* ================================================
   INDUSTRY — workflow + visual placeholder
   ================================================ */
.industry-workflow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4xl);
  align-items: center;
}
.industry-workflow__copy {}
.industry-workflow__copy--flip { order: -1; }
.industry-workflow__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}
.industry-workflow__body {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.industry-workflow__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(145deg, var(--brand-soft) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  padding: var(--space-2xl);
}
[data-theme="dark"] .industry-workflow__visual {
  background: linear-gradient(145deg, color-mix(in oklch, var(--tonic-900) 45%, var(--bg-elevated)) 0%, var(--bg-elevated) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .industry-workflow__visual {
    background: linear-gradient(145deg, color-mix(in oklch, var(--tonic-900) 45%, var(--bg-elevated)) 0%, var(--bg-elevated) 100%);
  }
}
.industry-workflow__plate {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--brand-emphasis);
  opacity: 0.55;
  text-align: center;
  line-height: 1;
}
.industry-workflow__plate-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: var(--space-md);
  opacity: 0.9;
}
@media (max-width: 768px) {
  .industry-workflow { grid-template-columns: 1fr; }
  .industry-workflow__copy--flip { order: 0; }
}

/* ================================================
   GLOSSARY — letter jump nav + term cards
   Replaces the 25-occurrence inline-style block in
   templates/glossary-section.html and the 16-occurrence
   block in templates/glossary.html. Removes the
   `onmouseover=` / `onmouseout=` JS by promoting the
   hover behaviour into CSS `:hover`.
   ================================================ */

/* Sticky A-Z nav strip. Hub uses a thinner version. */
.letter-jump {
  position: sticky;
  top: var(--navbar-height);
  z-index: 50;
  background: color-mix(in oklch, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  padding: var(--space-md) 0;
}
.letter-jump--flat {
  position: static;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
}
.letter-jump__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}
.letter-jump__pill,
.letter-jump__pill--inactive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.letter-jump__pill {
  color: var(--brand-emphasis);
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, transparent);
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.letter-jump__pill:hover {
  background: color-mix(in oklch, var(--brand) 30%, transparent);
  transform: translateY(-1px);
}
.letter-jump__pill--inactive {
  font-weight: 600;
  color: var(--slate-300);
  background: transparent;
  border: 1px solid var(--border);
  cursor: default;
}
[data-theme="dark"] .letter-jump__pill--inactive {
  color: var(--slate-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .letter-jump__pill--inactive {
    color: var(--slate-600);
  }
}
@media (prefers-reduced-motion: reduce) {
  .letter-jump__pill { transition: none; }
  .letter-jump__pill:hover { transform: none; }
}

/* Term list */
.glossary-terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.glossary-letter-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.glossary-letter-row--spaced {
  margin-top: var(--space-lg);
}
.glossary-letter-row__letter {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--brand-emphasis);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.glossary-letter-row__rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Glossary term card */
.glossary-term {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-margin-top: calc(var(--navbar-height) + 72px);
}
.glossary-term__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.glossary-term__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.glossary-deeplink {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast) ease;
}
.glossary-deeplink:hover,
.glossary-deeplink:focus-visible {
  color: var(--brand-emphasis);
}
.glossary-term__body {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  font-size: var(--font-size-base);
}
.glossary-term__foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
}
.glossary-term__related-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Tonic-pill link — used for related-term chips and sibling nav */
.tonic-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--brand-emphasis);
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, transparent);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--duration-fast) ease;
}
.tonic-pill:hover {
  background: color-mix(in oklch, var(--brand) 22%, transparent);
}
.tonic-pill--lg {
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 0.4rem 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
  .tonic-pill { transition: none; }
}

/* Sibling navigation bar (glossary section pages) */
.sibling-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
}
.sibling-nav__back {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--brand-emphasis);
  text-decoration: none;
}
.sibling-nav__list {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Glossary hub: section card variant of .card--feature */
.glossary-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.glossary-section-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.glossary-section-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.glossary-section-card__range {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--brand-emphasis);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.glossary-section-card__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.glossary-section-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.glossary-section-card__sample {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  font-size: var(--font-size-sm);
}
.glossary-section-card__cta {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--brand-emphasis);
}
@media (prefers-reduced-motion: reduce) {
  .glossary-section-card { transition: none; }
  .glossary-section-card:hover { transform: none; }
}
.grid--glossary-sections { gap: var(--space-xl); }