/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-10));
}
.container--narrow { max-width: 760px; }
.container--default { max-width: var(--content-default); }

section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

/* Section rhythm modifiers — layered on top of base padding to shape
   the page's vertical pacing. xl for tentpole moments (hero, pricing),
   sm for utility strips (trust bars, legal lines), tight for inline filler. */
.section--xl { padding-block: clamp(var(--space-20), 12vw, var(--space-32)); }
.section--sm { padding-block: clamp(var(--space-6), 3vw, var(--space-10)); }
.section--tight { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: var(--space-4);
}

[data-theme='dark'] .eyebrow {
  color: var(--color-primary-active);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-primary);
  border-radius: 0;
  margin-right: 0;
}

/* ============================================================
   Header / nav  — v3 (world-class remodel)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* slightly translucent so backdrop-filter has something to blur once scrolled */
  background: rgb(15 15 15 / 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(0px);
  backdrop-filter: saturate(140%) blur(0px);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  transition:
    border-color 240ms cubic-bezier(.2,.7,.2,1),
    background 240ms cubic-bezier(.2,.7,.2,1),
    backdrop-filter 240ms cubic-bezier(.2,.7,.2,1),
    box-shadow 240ms cubic-bezier(.2,.7,.2,1);
  color: var(--color-bone, #E8E1CE);
}
.site-header.is-scrolled {
  background: rgb(13 13 13 / 0.78);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgb(255 255 255 / 0.14);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.35), 0 10px 24px -12px rgb(0 0 0 / 0.55);
}
.site-header .site-header__brand-name,
.site-header .site-header__brand { color: var(--color-bone, #E8E1CE); }
.site-header .site-header__brand-sub { color: rgb(255 255 255 / 0.6); }
.site-header .site-nav a { color: rgb(232 225 206 / 0.78); }
.site-header .site-nav a:hover,
.site-header .site-nav a.is-active { color: #FFFFFF; }
.site-header .site-nav a.is-active::after { background: var(--color-primary, #00A8E8); }
.site-header .mobile-menu-btn { color: var(--color-bone, #E8E1CE); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  transition: padding-block 240ms cubic-bezier(.2,.7,.2,1);
}
.site-header.is-scrolled .site-header__inner { padding-block: calc(var(--space-4) - 4px); }

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-strong);
  outline-offset: 4px;
  border-radius: 6px;
}
.site-header__brand-mark {
  width: 40px;
  height: 48px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.site-header__wordmark {
  display: block;
  height: 26px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  transition: height 240ms cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 880px) {
  .site-header__wordmark { height: 30px; }
}
.site-header.is-scrolled .site-header__wordmark { height: 24px; }
@media (min-width: 880px) {
  .site-header.is-scrolled .site-header__wordmark { height: 26px; }
}
.site-header__brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.site-header__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-strong);
}
.site-header__brand-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ----- Desktop primary nav ----- */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-7, 1.75rem);
}
@media (min-width: 880px) {
  .site-nav { display: flex; }
}
.site-nav a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  padding-block: 6px;
  white-space: nowrap;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 180ms cubic-bezier(.2,.7,.2,1);
}
/* Tighten spacing on smaller desktop widths to fit all nav items on one row */
@media (min-width: 880px) and (max-width: 1200px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.75rem; letter-spacing: 0.06em; }
}
/* Animated underline: draws in from left on hover, full-width when active */
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--color-primary, #00A8E8);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--color-text-strong); }
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a:focus-visible {
  outline: 2px solid var(--color-primary, #00A8E8);
  outline-offset: 4px;
  border-radius: 4px;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
/* Header CTA — compact pill, hide on small viewports (drawer carries it) */
.site-header__cta .btn--primary {
  padding: 0.5rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.005em;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-header__cta .btn--primary .arrow {
  width: 14px;
  height: 14px;
}
.site-header__cta .site-header__cta-btn { display: none; }
@media (min-width: 880px) {
  .site-header__cta .site-header__cta-btn { display: inline-flex; }
}

/* ----- Hamburger button (with animated bars → X) ----- */
.mobile-menu-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: var(--color-bone, #E8E1CE);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.mobile-menu-btn:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); }
.mobile-menu-btn:active { transform: scale(0.96); }
.mobile-menu-btn:focus-visible { outline: 2px solid var(--color-primary, #00A8E8); outline-offset: 3px; }
@media (min-width: 880px) { .mobile-menu-btn { display: none; } }

.mobile-menu-btn__icon {
  position: relative;
  width: 20px;
  height: 16px;
  display: block;
}
.mobile-menu-btn__bar {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease, top 240ms cubic-bezier(.2,.7,.2,1);
}
.mobile-menu-btn__bar--1 { top: 2px; }
.mobile-menu-btn__bar--2 { top: 7px; width: 14px; }
.mobile-menu-btn__bar--3 { top: 12px; width: 18px; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--1 { top: 7px; transform: rotate(45deg); width: 20px; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--2 { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__bar--3 { top: 7px; transform: rotate(-45deg); width: 20px; }

/* ----- Mobile nav backdrop (dims content under the panel) ----- */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  opacity: 0;
  visibility: hidden;
  z-index: 40;
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1), visibility 280ms;
  pointer-events: none;
}
.mobile-nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (min-width: 880px) { .mobile-nav-backdrop { display: none; } }

/* ----- Mobile nav panel — anchored under the header, full-bleed dark glass ----- */
.mobile-nav {
  /* viewport-fixed panel so it stays under the header at any scroll position */
  position: fixed;
  left: 0;
  right: 0;
  top: 64px; /* header height */
  z-index: 45;
  background: linear-gradient(180deg, rgb(13 13 13 / 0.98), rgb(10 10 10 / 0.98));
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 24px 40px -16px rgb(0 0 0 / 0.6);
  /* hidden state: slide up + fade, clip away */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 360ms cubic-bezier(.2,.7,.2,1),
    opacity 220ms cubic-bezier(.2,.7,.2,1),
    border-color 240ms;
}
.mobile-nav.is-open {
  max-height: calc(100vh - 64px);
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}
@media (min-width: 880px) { .mobile-nav { display: none; } }

.mobile-nav__inner {
  padding: clamp(1rem, 5vw, 1.5rem) clamp(1rem, 5vw, 1.5rem) clamp(1.25rem, 6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Status pill at the top of the drawer */
.mobile-nav__status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(232 225 206 / 0.85);
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mobile-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #34D399;
  box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6);
  animation: navPulse 2.4s cubic-bezier(.66,0,.34,1) infinite;
}
@keyframes navPulse {
  0%   { box-shadow: 0 0 0 0 rgb(52 211 153 / 0.55); }
  70%  { box-shadow: 0 0 0 8px rgb(52 211 153 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(52 211 153 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__dot { animation: none; }
}

/* Item list */
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  padding-block: 6px;
}
.mobile-nav__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 20px;
  border-radius: 12px;
  text-decoration: none;
  color: rgb(232 225 206 / 0.92);
  background: transparent;
  /* slide-in entrance handled via .is-open .mobile-nav__item below */
  transform: translateY(8px);
  opacity: 0;
  transition:
    background 200ms ease,
    transform 360ms cubic-bezier(.2,.7,.2,1),
    opacity 360ms cubic-bezier(.2,.7,.2,1),
    color 180ms ease;
}
.mobile-nav.is-open .mobile-nav__item {
  transform: translateY(0);
  opacity: 1;
}
.mobile-nav.is-open .mobile-nav__item:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(2) { transition-delay: 110ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(3) { transition-delay: 160ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(4) { transition-delay: 210ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(5) { transition-delay: 260ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(6) { transition-delay: 310ms; }

.mobile-nav__item:hover,
.mobile-nav__item:focus-visible {
  background: rgb(255 255 255 / 0.05);
  color: #FFFFFF;
  outline: none;
}
.mobile-nav__item:active { background: rgb(255 255 255 / 0.08); }
.mobile-nav__item:focus-visible { box-shadow: inset 0 0 0 1px rgb(0 168 232 / 0.4); }

.mobile-nav__num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: rgb(232 225 206 / 0.42);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  transition: color 180ms ease;
}
.mobile-nav__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mobile-nav__label {
  font-family: var(--font-display, var(--font-body));
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: inherit;
}
.mobile-nav__sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgb(232 225 206 / 0.48);
  letter-spacing: 0;
  line-height: 1.3;
}
.mobile-nav__chev {
  color: rgb(232 225 206 / 0.36);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), color 180ms ease;
}
.mobile-nav__item:hover .mobile-nav__chev,
.mobile-nav__item:focus-visible .mobile-nav__chev { transform: translateX(3px); color: rgb(232 225 206 / 0.85); }

/* Active item: cyan rail on the left, cyan number, white label */
.mobile-nav__item.is-active {
  background: rgb(0 168 232 / 0.06);
  color: #FFFFFF;
}
.mobile-nav__item.is-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--color-primary, #00A8E8);
  box-shadow: 0 0 0 2px rgb(0 168 232 / 0.15);
}
.mobile-nav__item.is-active .mobile-nav__num { color: var(--color-primary, #00A8E8); }
.mobile-nav__item.is-active .mobile-nav__chev { color: var(--color-primary, #00A8E8); transform: translateX(2px); }

/* CTA cluster */
.mobile-nav__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}
.mobile-nav__primary {
  width: 100%;
  justify-content: space-between;
  padding: 14px 20px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  border-radius: 12px !important;
}
.mobile-nav__primary .arrow { width: 18px; height: 18px; }
.mobile-nav__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(232 225 206 / 0.92);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.mobile-nav__secondary:hover {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.18);
  color: #FFFFFF;
}
.mobile-nav__secondary:focus-visible {
  outline: 2px solid var(--color-primary, #00A8E8);
  outline-offset: 2px;
}

/* Drawer footer micro-row */
.mobile-nav__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(232 225 206 / 0.38);
}
.mobile-nav__foot-sep { color: rgb(232 225 206 / 0.22); }
.mobile-nav__foot-brand { color: rgb(232 225 206 / 0.58); }

/* Body scroll lock when drawer is open */
body.has-mobile-nav-open { overflow: hidden; touch-action: none; }

/* Keep header visible above the drawer regardless of scroll position.
   Sticky positioning collapses when body overflow is hidden, so we pin the
   header to the viewport while the drawer is open. */
body.has-mobile-nav-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  border-radius: var(--radius-full);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
}

/* Tertiary — text link with arrow, no chrome */
.btn--text {
  padding: 0.5rem 0;
  background: transparent;
  color: var(--color-primary);
  border: 0;
  border-radius: 0;
}
.btn--text:hover {
  color: var(--color-primary-hover, var(--color-primary));
}
.btn--text .arrow {
  margin-left: 2px;
}
.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary-deep);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { transform: translateY(0); }

.btn--signal {
  background: var(--color-signal);
  color: #FFFFFF;
  border-color: var(--color-signal-hover);
}
.btn--signal:hover {
  background: var(--color-signal-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
  border-color: var(--color-text-muted);
}

.btn--dark {
  background: var(--color-charcoal);
  color: var(--color-text-inverse);
}
.btn--dark:hover { background: var(--color-charcoal-2); }

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.btn .arrow {
  width: 14px; height: 14px;
  transition: transform var(--transition-interactive);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 12vw, var(--space-32));
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-2) 100%);
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 24px, color-mix(in oklab, var(--color-text-strong) 4%, transparent) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 24px, color-mix(in oklab, var(--color-text-strong) 4%, transparent) 24px 25px);
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
}
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-surface);
  margin-bottom: var(--space-6);
}
.hero__badge .dot {
  width: 8px; height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 30%, transparent);
  animation: pulse-signal 2.4s ease-in-out infinite;
}
@keyframes pulse-signal {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 30%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--color-success) 0%, transparent); }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.5rem + 5vw, 5rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  margin-bottom: var(--space-6);
}
.hero__title em {
  font-style: normal;
  color: var(--color-primary);
  font-family: var(--font-display);
}
[data-theme='dark'] .hero__title em { color: var(--color-primary-active); }
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-8);
  line-height: 1.5;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.hero__meta-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.hero__meta-item svg { color: var(--color-primary); width: 14px; height: 14px; }

.hero__visual {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--color-bone) 18%, transparent);
  pointer-events: none;
  margin: 6px;
}
.hero__visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__visual-overlay {
  position: absolute; inset: auto var(--space-5) var(--space-5) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-deep);
  border-radius: 2px;
  border-left: 3px solid var(--color-primary);
  color: var(--color-bone);
  display: flex; align-items: center; gap: var(--space-4);
}
.hero__visual-overlay-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}
.hero__visual-overlay-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__visual-overlay-label {
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.85);
  line-height: 1.35;
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip {
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-6);
  background: var(--color-charcoal);
  color: var(--color-bone);
}
.trust-strip .trust-item__title { color: var(--color-bone); }
.trust-strip .trust-item__desc { color: color-mix(in oklab, var(--color-bone) 65%, transparent); }
.trust-strip .trust-item svg { color: var(--color-primary-active); }
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 760px) {
  .trust-strip__inner { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding-right: var(--space-3);
}
@media (min-width: 760px) {
  .trust-item { padding-right: var(--space-4); }
}
.trust-item svg {
  width: 20px; height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.trust-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: 2px;
}
.trust-item__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ============================================================
   Section header
   ============================================================ */
.section-header {
  max-width: 760px;
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
}
.section-header .eyebrow { margin-bottom: var(--space-4); }
.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.08;
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
}
.section-header__lede {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.5;
}

/* ============================================================
   Steps / How It Works
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-primary-active);
}
.step__num {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  line-height: 1;
  position: relative;
}
.step__num::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-primary-deep);
  pointer-events: none;
}
[data-theme='dark'] .step__num { color: var(--color-charcoal); }
.step__num span { display: inline-block; }
.step__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text-strong);
  letter-spacing: 0.005em;
}
.step__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.step__time {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ============================================================
   Feature / split sections
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 879px) { .split--reverse > :first-child { order: 0; } }

.split__visual {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.split__visual img { width: 100%; height: 100%; object-fit: cover; }

.split__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
}
.split__lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  position: relative;
  padding-left: calc(18px + var(--space-3));
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A8E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--content-default);
  margin-inline: auto;
}
@media (min-width: 880px) { .pricing { grid-template-columns: repeat(2, 1fr); } }

/* 3-tier pricing grid: 1 col mobile → 3 cols desktop */
.pricing--three {
  max-width: 1080px;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .pricing--three { grid-template-columns: repeat(3, 1fr); }
}

/* Slight scale + z-index on the popular tier so it visually rises out of the row */
@media (min-width: 900px) {
  .pricing--three .pricing-card--popular {
    transform: scale(1.04);
    z-index: 1;
    box-shadow: 0 20px 60px -20px rgba(0, 168, 232, 0.4), var(--shadow-lg);
  }
}

/* Tighter checklist inside 3-tier cards so cards stay a similar height */
.pricing--three .pricing-card { padding: var(--space-6) var(--space-5); }
.pricing--three .pricing-card .checklist { margin-bottom: var(--space-6); font-size: var(--text-sm); }
.pricing--three .pricing-card .checklist li { padding-block: var(--space-1); }
.pricing--three .pricing-card h3 { font-size: var(--text-xl); }
.pricing--three .pricing-card__desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  min-height: 3.6em;
}
.pricing--three .pricing-card__price { margin-bottom: var(--space-3); padding-bottom: var(--space-4); }
.pricing--three .pricing-card__price-num { font-size: 2.75rem; }
.pricing--three .pricing-card__commitment {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  letter-spacing: 0.02em;
}
.pricing--three .pricing-card--featured .pricing-card__commitment { color: rgb(255 255 255 / 0.7); }

/* Guardrail note under the pricing grid */
.pricing-note {
  max-width: 780px;
  margin: var(--space-10) auto 0;
  padding: var(--space-5) var(--space-6);
  background: color-mix(in oklab, var(--color-primary) 6%, var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-primary) 20%, var(--color-divider));
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}
.pricing-note strong { color: var(--color-text-strong); }

.pricing-card {
  position: relative;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  display: flex; flex-direction: column;
}
.pricing-card--featured {
  background: var(--color-charcoal);
  color: var(--color-text-inverse);
  border-color: var(--color-charcoal);
  box-shadow: var(--shadow-lg);
}
.pricing-card--featured h3,
.pricing-card--featured .pricing-card__price-num,
.pricing-card--featured .pricing-card__price-suffix {
  color: var(--color-text-inverse);
}
.pricing-card--featured .pricing-card__price-suffix { color: rgb(255 255 255 / 0.7); }
.pricing-card--featured .pricing-card__desc { color: rgb(255 255 255 / 0.8); }
.pricing-card--featured .checklist li { color: rgb(255 255 255 / 0.95); }
.pricing-card--featured .checklist li::before {
  background: rgb(0 168 232 / 0.20);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380D6F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.pricing-card__tag {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  color: var(--color-bone, #E8E1CE);
  border-radius: var(--radius-full);
}
.pricing-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.pricing-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.pricing-card--featured .pricing-card__price { border-bottom-color: rgb(255 255 255 / 0.1); }
.pricing-card__price-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
}
.pricing-card__price-suffix {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pricing-card .checklist {
  margin-bottom: var(--space-8);
  flex-grow: 1;
}
.pricing-card .btn { width: 100%; }
.pricing-card--featured .btn--ghost {
  color: var(--color-text-inverse);
  border-color: rgb(255 255 255 / 0.2);
}
.pricing-card--featured .btn--ghost:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.4);
}

/* Pricing section surface — keep the page-bg flat (so the body grain stays
   invisible) and delineate the section with hairline rules + a faint cyan
   glow behind the card. The card itself does the heavy lifting visually. */
.pricing-section {
  position: relative;
  background: var(--color-bg);
}
/* Soft cyan halo behind the dark card — subtle context, no noise amplification */
.pricing-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 45% at 50% 60%,
    color-mix(in oklab, var(--color-primary) 7%, transparent) 0%,
    transparent 70%
  );
  z-index: 0;
}
/* Hairlines top & bottom */
.pricing-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-divider) 25%, var(--color-divider) 75%, transparent);
}
.pricing-section > .container {
  position: relative;
  z-index: 1;
}

/* Trust chips — pill row beneath the pricing card */
.trust-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-8) auto 0;
  padding: 0;
  list-style: none;
  max-width: var(--content-default);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-strong);
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color var(--transition-interactive, 180ms cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--transition-interactive, 180ms cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--transition-interactive, 180ms cubic-bezier(0.16, 1, 0.3, 1));
}
.trust-chip:hover {
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-divider));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.trust-chip__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-primary);
}
@media (max-width: 480px) {
  .trust-chips {
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .trust-chip {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}
.faq-item {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-interactive);
}
.faq-item[open] {
  border-color: var(--color-primary-soft);
  background: var(--color-surface-2);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-strong);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 24px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--transition-interactive);
}
.faq-item[open] summary::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A8E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.faq-item-body {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============================================================
   CTA banner
   ============================================================ */
.cta-banner {
  position: relative;
  padding: clamp(var(--space-10), 6vw, var(--space-20));
  background: var(--color-charcoal);
  color: var(--color-text-inverse);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in oklab, var(--color-primary-deep) 28%, transparent), transparent 55%);
  pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 {
  font-size: var(--text-2xl);
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
  color: var(--color-text-inverse);
}
.cta-banner p {
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.85);
  margin: 0 auto var(--space-8);
  max-width: 56ch;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--color-charcoal);
  color: rgb(255 255 255 / 0.7);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--text-sm);
  overflow: hidden;
  isolation: isolate;
}
/* Oversized brand wordmark backdrop — sits behind everything, very subtle.
   Stretches across the bottom-right of the footer for a confident sign-off. */
.footer__backdrop {
  position: absolute;
  inset: auto 0 -8% 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12rem, 28vw, 24rem);
  line-height: 0.85;
  letter-spacing: 0.005em;
  color: transparent;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0.015) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-10));
}
.site-footer > .container {
  position: relative;
  z-index: 1;
}
/* Closing brand line — large display type just above the legal divider.
   Nested inside .container so it inherits the container's padding & max-width. */
.footer__closing {
  margin: 0 0 var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: #FFFFFF;
  text-wrap: balance;
  max-width: 36ch;
  hyphens: manual;
  word-break: keep-all;
}
.site-footer h4 {
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}
.site-footer a {
  color: rgb(255 255 255 / 0.7);
  text-decoration: none;
}
.site-footer a:hover { color: var(--color-primary); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
@media (min-width: 760px) and (max-width: 1099px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }

.footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: #FFFFFF;
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer__brand-mark { width: 28px; height: 28px; }
.footer__brand .site-header__wordmark {
  height: 44px;
  width: auto;
}
@media (min-width: 760px) {
  .footer__brand .site-header__wordmark { height: 48px; }
}
.footer__locality {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
  margin: 0 0 var(--space-4);
}
.footer__tag {
  color: rgb(255 255 255 / 0.6);
  font-size: var(--text-sm);
  max-width: 38ch;
  line-height: 1.55;
}

.footer__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.footer__legal {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  padding-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.5);
  line-height: 1.6;
}
.footer__legal-disclaimer {
  max-width: 78ch;
}

/* ============================================================
   Page hero (interior)
   ============================================================ */
.page-hero {
  padding-block: clamp(var(--space-20), 12vw, var(--space-32)) clamp(var(--space-10), 6vw, var(--space-16));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 0%, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent 55%);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-hero h1 {
  font-size: var(--text-2xl);
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
  max-width: 22ch;
}
.page-hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text);
  max-width: 60ch;
  line-height: 1.5;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.card:hover {
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-strong);
}
.card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Forms
   ============================================================ */
.form-card {
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
.form-stack { display: grid; gap: var(--space-5); }
.form-row {
  display: grid; gap: var(--space-2);
}
label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-strong);
}
.form-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
select,
textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

.radio-group, .check-group {
  display: grid; gap: var(--space-2);
}
.radio-option, .check-option {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.radio-option:has(input:checked),
.check-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.radio-option input, .check-option input { margin-top: 4px; flex-shrink: 0; }
.radio-option__label, .check-option__label {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.4;
}

/* Notice banner */
.notice-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-primary-deep);
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
[data-theme='dark'] .notice-banner { color: var(--color-primary); }
.notice-banner svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Disclaimer block */
.disclaimer {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: none;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Prose for legal/long-form pages */
.prose {
  max-width: 720px;
  margin-inline: auto;
}
.prose h2 {
  font-size: var(--text-xl);
  margin-block: var(--space-10) var(--space-4);
  letter-spacing: 0.005em;
}
.prose h3 {
  font-size: var(--text-lg);
  margin-block: var(--space-6) var(--space-3);
}
.prose p { margin-bottom: var(--space-4); line-height: 1.65; }
.prose ul, .prose ol {
  margin-block: var(--space-4);
  padding-left: var(--space-6);
  display: grid; gap: var(--space-2);
}
.prose li { line-height: 1.6; }
.prose a { color: var(--color-primary-deep); }
[data-theme='dark'] .prose a { color: var(--color-primary); }

/* ============================================================
   Sticky mobile CTA bar — Call now + Sign up
   Mobile only; hides until past hero; tucks away near footer.
   ============================================================ */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  /* Deep glass panel that reads as part of the page, not a light interruption */
  background: linear-gradient(180deg,
                rgba(10, 15, 20, 0.72) 0%,
                rgba(10, 15, 20, 0.94) 60%,
                rgba(10, 15, 20, 0.98) 100%);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Soft cyan glow bleeding up from the edge so the transition is atmospheric */
  box-shadow: 0 -18px 40px -12px rgba(0, 168, 232, 0.10),
              0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Faded top edge — no hard rule line */
.sticky-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
  background: linear-gradient(180deg, rgba(10, 15, 20, 0) 0%, rgba(10, 15, 20, 0.55) 100%);
  pointer-events: none;
}
@media (max-width: 759px) {
  .sticky-cta { display: flex; }
  /* Reserve space so content isn't hidden behind the bar */
  body { padding-bottom: 84px; }
}
.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
/* When mobile nav is open, the drawer's own CTAs take over —
   sticky bar dissolves out of the way so we never have two Get started buttons on screen. */
.has-mobile-nav-open .sticky-cta {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-interactive),
              background var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
/* Primary — solid cyan with soft outer glow */
.sticky-cta__btn--primary {
  background: linear-gradient(180deg, #00B7F5 0%, #00A8E8 100%);
  color: #001820;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 22px rgba(0, 168, 232, 0.35),
              0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.sticky-cta__btn--primary:hover,
.sticky-cta__btn--primary:active {
  background: linear-gradient(180deg, #22C1F7 0%, #0097D0 100%);
  box-shadow: 0 8px 28px rgba(0, 168, 232, 0.45),
              0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
/* Secondary — ghost glass, white text, subtle cyan-tinted border */
.sticky-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sticky-cta__btn--secondary:hover,
.sticky-cta__btn--secondary:active {
  background: rgba(0, 168, 232, 0.08);
  border-color: rgba(0, 168, 232, 0.45);
  color: #FFFFFF;
}
.sticky-cta__btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* Pricing card — minimum commitment line */
.pricing-card__commitment {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  letter-spacing: 0.02em;
}
.pricing-card--featured .pricing-card__commitment {
  color: rgb(255 255 255 / 0.75);
}

/* ============================================================
   Cinematic full-bleed hero (home)
   ============================================================ */
.hero--cinematic {
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  padding-block: clamp(var(--space-16), 12vw, var(--space-32));
  overflow: hidden;
  isolation: isolate;
  background: #0A0A0A;
  color: #FFFFFF;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
/* neutralize the legacy .hero__bg pattern for the cinematic variant */
.hero--cinematic .hero__bg { display: none; }

.hero--cinematic .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero--cinematic .hero__media picture,
.hero--cinematic .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero--cinematic .hero__media img {
  object-fit: cover;
  object-position: 78% center; /* keeps the subject's face visible while content sits on the left */
}
@media (max-width: 760px) {
  .hero--cinematic .hero__media img {
    object-position: 65% center;
  }
}
.hero--cinematic .hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(8, 10, 14, 0.96) 0%,
      rgba(8, 10, 14, 0.88) 32%,
      rgba(8, 10, 14, 0.55) 55%,
      rgba(8, 10, 14, 0.15) 78%,
      rgba(8, 10, 14, 0.00) 100%
    ),
    linear-gradient(180deg,
      rgba(8, 10, 14, 0.50) 0%,
      rgba(8, 10, 14, 0.00) 30%,
      rgba(8, 10, 14, 0.00) 70%,
      rgba(8, 10, 14, 0.55) 100%
    );
}
@media (max-width: 760px) {
  .hero--cinematic .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 10, 14, 0.55) 0%,
        rgba(8, 10, 14, 0.30) 30%,
        rgba(8, 10, 14, 0.55) 60%,
        rgba(8, 10, 14, 0.92) 100%
      );
  }
}

.hero--cinematic .container {
  position: relative;
  z-index: 1;
}
.hero--cinematic .hero__content {
  max-width: 560px;
}
/* At very wide viewports, keep the copy on the darker left third to avoid competing
   with subject/product elements on the right side of the photo. */
@media (min-width: 1400px) {
  .hero--cinematic .hero__content {
    max-width: 600px;
  }
}

/* Mobile: split layout — photo gets its own block at the top (uncovered),
   text sits cleanly below on solid dark surface. No overlay, no scrim hiding the subject. */
@media (max-width: 760px) {
  .hero--cinematic {
    min-height: 0;
    display: block;
    overflow: visible;
    padding-block: 0;
  }
  /* Photo block — dedicated top section, sized so the h1 lands near/above the fold */
  .hero--cinematic .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 42vh;
    min-height: 300px;
    max-height: 420px;
    /* Soft fade-to-black at the bottom — starts at 50% so the lower half of the
       photo dissolves into the text section that overlaps it. Head + shoulders stay solid. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  }
  .hero--cinematic .hero__media picture,
  .hero--cinematic .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
  }
  /* No scrim on mobile — let the photo show clean and crisp */
  .hero--cinematic .hero__scrim {
    background: transparent;
  }
  /* Content block — raised up to overlap the lower half of the photo,
     landing the badge over the mid-torso zone. Head + shoulders stay clean. */
  .hero--cinematic .container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -160px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-10);
    background: linear-gradient(180deg, transparent 0%, #0A0A0A 80px);
  }
  .hero--cinematic .hero__content {
    max-width: 100%;
  }
  /* Drop the secondary "How it works" ghost button on mobile — keep one clear primary CTA */
  .hero--cinematic .hero__cta .btn--ghost-on-dark { display: none; }
  .hero--cinematic .hero__cta .btn--primary { width: 100%; justify-content: center; }
}

/* Cinematic title — sentence-case, display font, no military uppercase */
.hero__title--cinematic {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #FFFFFF;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero__title--cinematic em {
  font-style: normal;
  color: var(--color-primary-active, var(--color-primary));
  font-family: var(--font-display);
}

/* On-dark variants of existing hero pieces */
.hero__badge--on-dark {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.06);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__lede--on-dark {
  color: rgb(255 255 255 / 0.86);
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  margin-bottom: var(--space-8);
}
.hero__meta--on-dark {
  color: rgb(255 255 255 / 0.78);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}
.hero__meta--on-dark .hero__meta-item svg {
  color: var(--color-primary-active, var(--color-primary));
}

/* Ghost button on dark hero — readable on photo */
.btn--ghost-on-dark {
  border-color: rgb(255 255 255 / 0.55);
  color: #FFFFFF;
  background: rgb(255 255 255 / 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost-on-dark:hover,
.btn--ghost-on-dark:focus-visible {
  border-color: #FFFFFF;
  background: rgb(255 255 255 / 0.10);
  color: #FFFFFF;
}

/* Beat the aesthetics.css hairline-badge override with stronger specificity */
.hero--cinematic .hero__badge--on-dark {
  background: rgb(255 255 255 / 0.06) !important;
  border: 1px solid rgb(255 255 255 / 0.22) !important;
  border-left: 1px solid rgb(255 255 255 / 0.22) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: 999px !important;
}
.hero--cinematic .hero__meta--on-dark {
  border-top-color: rgb(255 255 255 / 0.14) !important;
}

/* Beat .btn--ghost color on cinematic hero */
.hero--cinematic .btn--ghost,
.btn--ghost-on-dark {
  color: #FFFFFF !important;
  border-color: rgb(255 255 255 / 0.55) !important;
}
.hero--cinematic .btn--ghost:hover,
.btn--ghost-on-dark:hover {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  background: rgb(255 255 255 / 0.10) !important;
}

/* Tablet — modest scrim only between 760px and 1024px (content still overlays photo) */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero--cinematic .hero__media img {
    object-position: 80% center;
  }
  .hero--cinematic .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 10, 14, 0.55) 0%,
        rgba(8, 10, 14, 0.30) 35%,
        rgba(8, 10, 14, 0.30) 65%,
        rgba(8, 10, 14, 0.65) 100%
      );
  }
}
@media (max-width: 760px) {
  .hero__title--cinematic {
    font-size: clamp(2rem, 1.05rem + 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  /* Kill the forced <br/> that leaves dead space on the right of narrow-viewport lines */
  .hero__title--cinematic br { display: none; }
  .hero__title--cinematic em::before { content: ' '; }
}

/* ============================================================
   Product rail (horizontal scrolling carousel — home)
   ============================================================ */
.product-rail {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  background: var(--color-bg);
  overflow: hidden; /* keep the rail's outer fade contained */
  position: relative;
}
.product-rail__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.product-rail__head .eyebrow { display: block; margin-bottom: var(--space-2); }
.product-rail__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 1.4rem + 1.6vw, var(--text-2xl));
  line-height: 1.05;
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.005em;
}
.product-rail__lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0;
  line-height: 1.55;
}
.product-rail__controls {
  display: none;
  gap: var(--space-2);
  flex-shrink: 0;
}
@media (min-width: 760px) {
  .product-rail__controls { display: inline-flex; }
}
.product-rail__nav {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color var(--transition-interactive, 180ms ease-out),
    background var(--transition-interactive, 180ms ease-out),
    color var(--transition-interactive, 180ms ease-out),
    transform var(--transition-interactive, 180ms ease-out),
    opacity var(--transition-interactive, 180ms ease-out);
}
.product-rail__nav svg { width: 18px; height: 18px; }
.product-rail__nav:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.product-rail__nav:active { transform: translateY(0); }
.product-rail__nav[disabled],
.product-rail__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.product-rail__viewport {
  position: relative;
  /* Fade the edges where cards bleed past the container */
  --fade: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
}
@media (max-width: 760px) {
  .product-rail__viewport {
    --fade: 16px;
  }
}
.product-rail__track {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding-block: var(--space-2) var(--space-4);
  /* Align the first card's left edge with the container content's left edge.
     The container is centered with max-width --content-wide and padded
     inline with clamp(--space-4, 4vw, --space-10). To match exactly, the
     rail's padding-inline is max((viewport - content-wide)/2, 0) + that
     same clamp — i.e. the centering gutter plus the container's own pad.
     scroll-padding-inline must mirror padding-inline so scroll-snap
     respects the start padding instead of snapping past it. */
  --rail-pad: calc(
    max((100vw - var(--content-wide)) / 2, 0px)
    + clamp(var(--space-4), 4vw, var(--space-10))
  );
  padding-inline: var(--rail-pad);
  scroll-padding-inline: var(--rail-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.product-rail__track::-webkit-scrollbar { display: none; }

.product-rail__item {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 280px);
  scroll-snap-align: start;
}
@media (max-width: 760px) {
  .product-rail__item {
    width: 72vw;
    max-width: 300px;
  }
}

.rail-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl, 20px);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform var(--transition-interactive, 180ms ease-out),
    box-shadow var(--transition-interactive, 180ms ease-out),
    border-color var(--transition-interactive, 180ms ease-out);
  box-shadow: 0 1px 0 rgb(15 20 16 / 0.02), 0 8px 20px -10px rgb(15 20 16 / 0.08);
}
.rail-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 32%, var(--color-border));
  box-shadow: 0 1px 0 rgb(15 20 16 / 0.03), 0 18px 32px -10px rgb(15 20 16 / 0.14);
}
.rail-card__media {
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
}
.rail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rail-card:hover .rail-card__media img { transform: scale(1.04); }
.rail-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rail-card__tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.rail-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.rail-card__spec {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* End-of-rail card linking to full products page */
.product-rail__item--end .rail-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  min-height: 100%;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-charcoal) 0%, #0F0F0F 100%);
  color: #FFFFFF;
  border-radius: var(--radius-2xl, 20px);
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 0.08);
  transition:
    transform var(--transition-interactive, 180ms ease-out),
    box-shadow var(--transition-interactive, 180ms ease-out);
  box-shadow: 0 8px 20px -10px rgb(15 20 16 / 0.12);
}
.rail-end:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -10px rgb(15 20 16 / 0.22);
}
.rail-end__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
  line-height: 1.15;
  max-width: 14ch;
}
.rail-end__arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rail-end__arrow svg { width: 20px; height: 20px; }

.product-rail__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
@media (min-width: 760px) {
  .product-rail__foot { display: none; } /* desktop uses the inline arrow buttons + end card */
}

/* Override global h1-h6 uppercase for the rail (we ditched the military theme) */
.product-rail__title,
.rail-card__name,
.rail-end__label {
  text-transform: none !important;
  letter-spacing: 0.005em;
}

/* Refine the rail viewport mask so the first/last card stay fully readable.
   The mask now starts AFTER the container edge, only fading the truly off-canvas overflow. */
@media (min-width: 760px) {
  .product-rail__viewport {
    --fade: 32px;
  }
}
@media (max-width: 760px) {
  .product-rail__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ============================================================
   Single-card pricing layout (home pricing teaser)
   ============================================================ */
.pricing--single {
  grid-template-columns: 1fr !important;
  max-width: 560px;
  margin-inline: auto;
}

/* Starter "Get started today $297" callout inside the pricing card */
.pricing-card__starter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5) var(--space-5);
  border-radius: var(--radius-lg, 14px);
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.16);
}
.pricing-card__starter-label {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary-active, var(--color-primary));
  line-height: 1;
  margin-bottom: var(--space-1);
}
.pricing-card__starter-price {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 0.005em;
}
.pricing-card__starter-desc {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.82);
  margin: 0;
  line-height: 1.45;
}

/* Non-featured (light) card variant — fall back to body text colors */
.pricing-card:not(.pricing-card--featured) .pricing-card__starter {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.pricing-card:not(.pricing-card--featured) .pricing-card__starter-price {
  color: var(--color-text-strong);
}
.pricing-card:not(.pricing-card--featured) .pricing-card__starter-desc {
  color: var(--color-text-muted);
}

/* ============================================================
   Long-form guide pages (SEO content pages)
   Used by: /pages/guides/*.html
   Editorial layout: TOC sidebar + article body + callouts + tables
   ============================================================ */

/* Article hero — restrained, content-led; no full-bleed image.
   Subtle radial wash anchors the page; cyan rule above eyebrow chip
   reads as the site's signature hairline accent. */
.article-hero {
  position: relative;
  padding: clamp(var(--space-12), 8vw, var(--space-20)) 0 var(--space-6);
  background:
    radial-gradient(1100px 420px at 18% -10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 65%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden;
}
.article-hero::after {
  /* Hairline that reads as the site's signature linework */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent);
  opacity: 0.6;
}
.article-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-6);
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
}
.article-hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.article-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
}
.article-hero__meta > span:not(.article-hero__meta-sep) {
  color: var(--color-text-muted);
}
.article-hero__meta-sep {
  width: 1px; height: 10px;
  border-radius: 0;
  background: var(--color-divider);
}
.article-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  max-width: 22ch;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.article-hero__lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0;
}
.article-hero__lede strong { color: var(--color-text-strong); font-weight: 600; }
.article-hero__byline {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.article-hero__byline-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  display: grid; place-items: center;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.article-hero__byline-text {
  display: flex; flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
}
.article-hero__byline-author {
  color: var(--color-text-strong);
  font-weight: 600;
}
.article-hero__byline-meta { color: var(--color-text-muted); }

/* Article layout — TOC sidebar + body */
/* Override default section padding so byline-to-body gap stays tight */
section:has(> .article-layout) {
  padding-block: clamp(var(--space-4), 3vw, var(--space-10)) clamp(var(--space-10), 6vw, var(--space-16));
}
.article-layout {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 960px) {
  .article-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* TOC — sits in a soft surface card so it reads as a true UI element */
.article-toc {
  position: sticky;
  top: calc(var(--space-16) + var(--space-4));
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 60%, var(--color-bg)) 100%);
  border: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
  max-height: calc(100vh - var(--space-20));
  overflow-y: auto;
}
.article-toc__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.article-toc ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
  counter-reset: toc;
}
.article-toc li { counter-increment: toc; }
.article-toc a {
  display: flex;
  gap: var(--space-2);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  margin-left: -2px;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.article-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding-top: 2px;
  flex-shrink: 0;
}
.article-toc a:hover {
  color: var(--color-text-strong);
  border-color: var(--color-primary);
}
@media (max-width: 959px) {
  .article-toc { display: none; }
}

/* Article body — prose extensions */
.article-body {
  max-width: 68ch;
  min-width: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}
.article-body > * + * { margin-top: var(--space-5); }
/* Section H2 with editorial numeral eyebrow */
.article-body {
  counter-reset: artsec;
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  scroll-margin-top: var(--space-20);
  position: relative;
  counter-increment: artsec;
  padding-top: var(--space-5);
}
.article-body h2::before {
  content: counter(artsec, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary-deep);
  padding-left: 24px;
}
.article-body h2::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--color-primary);
}
.article-body h2:first-child { margin-top: 0; }
/* Exempt component h2s (CTA card) from article numbering */
.article-body .guide-cta h2 {
  counter-increment: none;
  padding-top: 0;
}
.article-body .guide-cta h2::before,
.article-body .guide-cta h2::after { content: none; display: none; }
.article-body h3 {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-strong);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
.article-body h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.article-body p { margin: 0; }
.article-body strong { color: var(--color-text-strong); font-weight: 600; }
.article-body ul, .article-body ol {
  margin: 0;
  padding-left: var(--space-6);
  display: grid; gap: var(--space-2);
}
.article-body li { line-height: 1.65; }
.article-body li::marker { color: var(--color-primary); }
.article-body p a,
.article-body li a,
.article-body td a,
.article-body .article-sources a,
.article-body .article-faq details > div a {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-color: rgb(0 168 232 / 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-interactive), color var(--transition-interactive);
}
.article-body p a:hover,
.article-body li a:hover,
.article-body td a:hover,
.article-body .article-sources a:hover,
.article-body .article-faq details > div a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
/* Defensive: never underline component links (cards, buttons, CTAs) */
.article-body .related-guide,
.article-body .related-guide *,
.article-body .guide-cta a,
.article-body .guide-cta .btn,
.article-body .btn {
  text-decoration: none;
}

/* TL;DR / Key takeaway block — premium card with hairline cyan rule */
.tldr {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-bg)) 0%, var(--color-bg) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
  overflow: hidden;
}
.tldr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, transparent) 60%, transparent);
}
.tldr__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-3);
}
.tldr__label::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--color-primary);
}
.tldr p { margin: 0; }
.tldr strong { color: var(--color-text-strong); font-weight: 600; }

/* Callout — neutral asides ("Why this matters", warnings) */
.callout {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.callout__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.callout--warn { background: var(--color-warning-soft); border-color: rgb(181 115 26 / 0.25); }
.callout--warn .callout__label { color: var(--color-warning); }
.callout--note { background: var(--color-primary-highlight); border-color: rgb(0 168 232 / 0.18); }
.callout--note .callout__label { color: var(--color-primary-deep); }
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-2); }

/* Pull-quote — for emphasized statistics or insights */
.pullquote {
  margin: var(--space-10) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
}
.pullquote__cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Comparison table — clean, scannable */
.cmp-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--color-bg);
}
.cmp-table th,
.cmp-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
  line-height: 1.5;
}
.cmp-table thead th {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 60%, var(--color-bg)) 100%);
  border-bottom: 1px solid var(--color-border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover { background: var(--color-surface); }
.cmp-table td strong { color: var(--color-text-strong); font-weight: 600; }
.cmp-table .yes { color: var(--color-success); font-weight: 600; }
.cmp-table .no { color: var(--color-text-faint); }
.cmp-table .accent { color: var(--color-primary-deep); font-weight: 600; }
.cmp-table tr.is-highlight td {
  background: var(--color-primary-highlight);
}
.cmp-table tr.is-highlight td:first-child { border-left: 3px solid var(--color-primary); padding-left: calc(var(--space-4) - 3px); }

/* Stats strip — three-number row.
   Single column on narrow screens (no orphan empty cells), then
   grow to a full row once there's room for all stats on one line. */
.stats-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-6) 0;
}
@media (min-width: 600px) {
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
}
/* If a .stats-strip has only 2 cells, keep it as 2 columns when wide */
.stats-strip:has(.stat-cell:nth-child(2):last-child) {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .stats-strip:has(.stat-cell:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
}
.stat-cell {
  background: var(--color-bg);
  padding: var(--space-5) var(--space-6);
}
.stat-cell {
  position: relative;
}
.stat-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-6);
  width: 24px;
  height: 2px;
  background: var(--color-primary);
}
.stat-cell__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
}
.stat-cell__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* FAQ list within article — different from .faq global */
.article-faq {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
}
.article-faq details {
  border-bottom: 1px solid var(--color-divider);
}
.article-faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  -webkit-font-smoothing: antialiased;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  transition: transform var(--transition-interactive);
}
.article-faq details[open] summary::after { transform: rotate(180deg); }
.article-faq details > div {
  padding: 0 0 var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 64ch;
}
.article-faq details > div p { margin: 0 0 var(--space-3); }
.article-faq details > div p:last-child { margin-bottom: 0; }
.article-faq details > div a {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-color: rgb(0 168 232 / 0.35);
  text-underline-offset: 3px;
}

/* Source list */
.article-sources {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.article-sources__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.article-sources ol {
  list-style: decimal;
  padding-left: var(--space-5);
  display: grid; gap: var(--space-2);
  color: var(--color-text-muted);
}
.article-sources a {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-color: rgb(0 168 232 / 0.30);
  text-underline-offset: 2px;
  word-break: break-word;
}

/* Related guides grid */
.related-guides {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 720px) {
  .related-guides { grid-template-columns: repeat(2, 1fr); }
}
.related-guide {
  position: relative;
  display: block;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.related-guide::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 30%, transparent) 70%, transparent);
  opacity: 0;
  transition: opacity var(--transition-interactive);
}
.related-guide:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-divider));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.related-guide:hover::after { opacity: 1; }
.related-guide__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-2);
}
.related-guide__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text-strong);
  margin: 0;
}
.related-guide__desc {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Region grid (used on MA statewide page) */
.region-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-6) 0;
}
@media (min-width: 600px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
.region-card {
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.region-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
}
.region-card__cities {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* Numbered list with primary accent (used in step-by-step sections) */
.steps-list {
  list-style: none;
  padding: 0; margin: var(--space-6) 0;
  display: grid; gap: var(--space-7);
  counter-reset: stepl;
}
.steps-list > li {
  counter-increment: stepl;
  padding-left: calc(var(--space-12) + var(--space-2));
  position: relative;
  line-height: 1.7;
}
.steps-list > li::before {
  content: counter(stepl, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: var(--space-8); height: var(--space-8);
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-divider));
  color: var(--color-primary-deep);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 5px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.steps-list strong { color: var(--color-text-strong); }

/* Inline keyword pill (used in cost breakdowns, bloodwork tables) */
.kw {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-strong);
}

/* Guide bottom CTA */
.guide-cta {
  margin-top: var(--space-12);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-bg-deep);
  border-radius: var(--radius-xl);
  color: #FFFFFF;
  text-align: center;
  display: grid; gap: var(--space-4);
  justify-items: center;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.guide-cta > * { min-width: 0; max-width: 100%; }
.guide-cta__body { max-width: 100%; display: grid; gap: var(--space-3); justify-items: center; }
.guide-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; max-width: 100%; }
.guide-cta__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.guide-cta h2, .guide-cta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin: 0;
  max-width: 24ch;
}
.guide-cta p {
  margin: 0;
  max-width: min(50ch, 100%);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.85);
}
.guide-cta .btn { margin-top: var(--space-2); }
/* Ensure ghost button is legible on the dark CTA card */
.guide-cta .btn--ghost {
  color: #FFFFFF;
  border-color: rgb(255 255 255 / 0.35);
  background: transparent;
}
.guide-cta .btn--ghost:hover,
.guide-cta .btn--ghost:focus-visible {
  background: rgb(255 255 255 / 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ============================================================ */
/* BLOODWORK SECTION — Lab panel + physician chart note         */
/* ============================================================ */
.bloodwork {
  background: var(--color-bg);
  padding-top: clamp(var(--space-16), 6vw, var(--space-24));
  padding-bottom: clamp(var(--space-16), 6vw, var(--space-24));
  position: relative;
}
.bloodwork::before {
  /* subtle cyan hairline divider at top — feels like a chart edge */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 64px; height: 2px;
  background: var(--color-primary);
  transform: translateX(-50%);
  opacity: 0.5;
}

.bloodwork__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
}
@media (min-width: 880px) {
  .bloodwork__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: var(--space-8);
    align-items: stretch;
  }
}

/* -- LAB PANEL --------------------------------------------------- */
.lab-panel {
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2.4vw, var(--space-8));
  box-shadow: 0 1px 0 rgba(15,15,15,0.02), 0 12px 32px -20px rgba(15,15,15,0.18);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.lab-panel::before {
  /* thin cyan rule on left edge — like a chart tab */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary), transparent 80%);
  opacity: 0.85;
}

.lab-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.lab-panel__head-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lab-panel__head-right { display: flex; flex-direction: column; gap: 4px; text-align: right; min-width: 0; }

.lab-panel__kicker {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.lab-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  margin: 0;
}
.lab-panel__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.lab-panel__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
  flex-wrap: wrap;
}
.lab-panel__legend .lab-dot { width: 8px; height: 8px; }
.lab-legend__text {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

.lab-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.lab-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name    dot"
    "value   value"
    "range   range";
  gap: 2px var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-divider);
  align-items: center;
}
.lab-row:last-child { border-bottom: none; }

@media (min-width: 560px) {
  .lab-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "name value range dot";
    gap: var(--space-3);
  }
}

.lab-row__name {
  grid-area: name;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}
.lab-row__value {
  grid-area: value;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  color: var(--color-text-strong);
}
.lab-num {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.lab-unit {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lab-row__range {
  grid-area: range;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-dot {
  grid-area: dot;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: var(--color-divider);
}
.lab-dot--ok    { background: var(--color-success);  box-shadow: 0 0 0 3px rgba(31,138,76,0.10); }
.lab-dot--watch { background: var(--color-primary);  box-shadow: 0 0 0 3px rgba(0,168,232,0.12); }
.lab-dot--flag  { background: var(--color-error);    box-shadow: 0 0 0 3px rgba(168,58,42,0.12); }

.lab-panel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.lab-panel__foot-id,
.lab-panel__foot-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.lab-panel__foot-tag {
  color: var(--color-primary);
  font-weight: 600;
}

/* -- CHART NOTE -------------------------------------------------- */
.chart-note {
  background: #FAFBFC;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 2.4vw, var(--space-8));
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15,15,15,0.02), 0 12px 32px -20px rgba(15,15,15,0.12);
}
.chart-note::before {
  /* faint cyan paper-edge wash */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(0,168,232,0.05), transparent 60%),
    radial-gradient(600px 240px at 100% 100%, rgba(0,168,232,0.04), transparent 70%);
  pointer-events: none;
}
.chart-note > * { position: relative; }

.chart-note__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.chart-note__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep, #005C85));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,168,232,0.10);
}
.chart-note__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-note__author {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1.2;
}
.chart-note__stamp {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.chart-note__body {
  padding: var(--space-5) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.chart-note__line {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-divider);
  position: relative;
}
.chart-note__line::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.5em;
  width: 1px;
  height: 0.7em;
  background: var(--color-primary);
}
.chart-note__label {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-text-strong);
  margin-right: 6px;
}

/* Typewriter / line-by-line reveal */
.chart-note__body[data-typewriter] .chart-note__line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-note__body[data-typewriter].is-visible .chart-note__line {
  opacity: 1;
  transform: translateY(0);
}
.chart-note__body[data-typewriter].is-visible .chart-note__line[data-line="1"] { transition-delay: 0ms; }
.chart-note__body[data-typewriter].is-visible .chart-note__line[data-line="2"] { transition-delay: 320ms; }
.chart-note__body[data-typewriter].is-visible .chart-note__line[data-line="3"] { transition-delay: 640ms; }
.chart-note__body[data-typewriter].is-visible .chart-note__line[data-line="4"] { transition-delay: 960ms; }
.chart-note__body[data-typewriter].is-visible .chart-note__line[data-line="5"] { transition-delay: 1280ms; }
@media (prefers-reduced-motion: reduce) {
  .chart-note__body[data-typewriter] .chart-note__line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.chart-note__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.chart-note__sig {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.chart-note__pubsig {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.bloodwork__disclaimer {
  margin-top: clamp(var(--space-6), 2vw, var(--space-8));
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 76ch;
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-4);
}

/* ============================================================ */
/* HERO — Cinematic motion (parallax + breathing cyan ambient)  */
/* ============================================================ */

/* Parallax: --hero-parallax is updated via JS, default 0 */
.hero--cinematic .hero__media {
  will-change: transform;
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
}

/* Ambient cyan glow over the right third — breathes in/out */
.hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(720px 540px at 78% 42%,
      rgba(0, 168, 232, 0.22) 0%,
      rgba(0, 168, 232, 0.10) 35%,
      rgba(0, 168, 232, 0.00) 70%);
  opacity: 0.55;
  filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__ambient {
    animation: heroAmbientBreath 8s ease-in-out infinite;
  }
}
@keyframes heroAmbientBreath {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(1.04); }
}
@media (max-width: 760px) {
  /* Mobile: tone the ambient down — photo is its own block, glow shouldn't fight the face */
  .hero__ambient {
    background:
      radial-gradient(420px 320px at 70% 30%,
        rgba(0, 168, 232, 0.18) 0%,
        rgba(0, 168, 232, 0.06) 40%,
        rgba(0, 168, 232, 0.00) 75%);
    opacity: 0.45;
  }
}

/* Reduced motion: kill parallax binding too */
@media (prefers-reduced-motion: reduce) {
  .hero--cinematic .hero__media {
    transform: none !important;
  }
}

/* ============================================================ */
/* #4 — SCROLL-DRIVEN STEP ILLUMINATION                          */
/* ============================================================ */

/* Make the .steps container a relative anchor for the connecting rule */
.steps {
  position: relative;
}

/* Connecting rule removed per user — per-card cyan border-top retained */
.steps::before,
.steps::after { content: none !important; }

/* Steps default state: muted/outlined until lit */
.step {
  transition:
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive),
    border-color var(--transition-interactive),
    opacity 600ms ease;
}
.step:not(.is-lit) {
  opacity: 0.62;
}
.step:not(.is-lit) .step__num {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  box-shadow: none !important;
  transition: background 500ms ease, color 500ms ease, border-color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms ease !important;
}
.step:not(.is-lit) .step__title {
  color: var(--color-text-muted);
  transition: color 500ms ease;
}

.step.is-lit {
  opacity: 1;
}
.step.is-lit .step__num {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--color-primary-deep, #005C85) !important;
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 0 0 4px rgba(0,168,232,0.14),
    0 1px 2px rgb(0 92 133 / 0.20) !important;
}
.step.is-lit .step__title {
  color: var(--color-text-strong);
}

/* Reduced motion: skip the outline-to-fill animation; show lit state always */
@media (prefers-reduced-motion: reduce) {
  .step:not(.is-lit) { opacity: 1; }
  .step:not(.is-lit) .step__num {
    background: var(--color-primary);
    color: #FFFFFF;
    border: none;
  }
  .step:not(.is-lit) .step__title { color: var(--color-text-strong); }
}

/* ============================================================ */
/* #5 — SECTION TRANSITIONS                                      */
/* ============================================================ */

/* (a) Scroll progress bar — thin cyan rule at very top of viewport */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-deep, #005C85));
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  transition: transform 80ms linear;
  box-shadow: 0 0 8px rgba(0,168,232,0.45);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__fill { transition: none; }
}

/* (b) Hero → trust strip — soft bleed at the bottom of hero, top of trust-strip */
.hero--cinematic::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0) 30%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
  z-index: 1;
}

/* (c) Section seam tick — for white→white transitions (e.g. bloodwork ↔ how-it-works) */
.seam-tick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  justify-content: center;
}
.seam-tick__rule {
  flex: 0 1 80px;
  height: 1px;
  background: var(--color-divider);
}
.seam-tick__rule--cyan {
  flex: 0 0 24px;
  background: var(--color-primary);
}
.seam-tick__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* (d) Spotlight section — deep charcoal background */
.section--spotlight {
  background: #0E1116 !important;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--spotlight::before {
  /* faint cyan ambient at top-left */
  content: "";
  position: absolute;
  top: -10%; left: -5%;
  width: 60%; height: 80%;
  background: radial-gradient(closest-side, rgba(0,168,232,0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--spotlight > * { position: relative; z-index: 1; }
.section--spotlight .eyebrow { color: var(--color-primary); }
.section--spotlight .split__title,
.section--spotlight h2 { color: #FFFFFF; }
.section--spotlight .split__lede,
.section--spotlight p { color: rgba(255,255,255,0.78); }
.section--spotlight .checklist li {
  color: rgba(255,255,255,0.86);
  border-bottom-color: rgba(255,255,255,0.08);
}
.section--spotlight .checklist li::before {
  /* keep cyan checkmark - usually styled via SVG; if it's a CSS char, ensure cyan */
  color: var(--color-primary);
}
.section--spotlight .btn--dark {
  background: #FFFFFF;
  color: #0E1116;
  border-color: #FFFFFF;
}
.section--spotlight .btn--dark:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
.section--spotlight .split__visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}

/* ============================================================
   Page hero — How it works variant
   ============================================================ */
.page-hero--how {
  padding-block: clamp(var(--space-20), 12vw, var(--space-32)) clamp(var(--space-12), 7vw, var(--space-20));
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 50%),
    var(--color-surface);
}
.page-hero--how::before {
  background:
    radial-gradient(ellipse at 92% 8%, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in oklab, var(--color-primary-deep) 8%, transparent), transparent 60%);
}
.page-hero__title {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: 0.005em;
  line-height: 1.06;
  margin-bottom: var(--space-6);
  max-width: 22ch;
  color: var(--color-text-strong);
  text-wrap: balance;
}
.page-hero--how .page-hero__lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--color-text);
  max-width: 64ch;
  line-height: 1.55;
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  background: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.page-hero__chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 22%, transparent);
  flex-shrink: 0;
}

/* ============================================================
   Workup grid — full panel breakdown (how-it-works)
   ============================================================ */
.workup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}
@media (min-width: 880px) {
  .workup-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.workup-card {
  position: relative;
  padding: clamp(var(--space-6), 2.4vw, var(--space-8));
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.workup-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 4%, transparent), transparent 28%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-interactive);
}
.workup-card:hover {
  border-color: var(--color-primary-soft);
  box-shadow: 0 12px 32px -16px rgba(0, 168, 232, 0.18), 0 0 0 1px var(--color-primary-soft);
  transform: translateY(-2px);
}
.workup-card:hover::before { opacity: 1; }
.workup-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary-deep, #005C85);
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.workup-card__title {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  letter-spacing: 0.005em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
}
.workup-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.workup-card__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text);
}
.workup-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 14%, transparent);
}
.workup-card__sub {
  display: inline;
  margin-left: 0.4rem;
  color: var(--color-text-faint, #757575);
  font-size: 0.8125rem;
  font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", monospace);
  letter-spacing: 0.01em;
}
.workup-card__copy {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.workup-card__copy:last-child { margin-bottom: 0; }
.workup-card__copy strong { color: var(--color-text-strong); font-weight: 600; }

/* ============================================================
   Timeline — vertical, cyan marker rail (how-it-works)
   ============================================================ */
.timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-12) 0 0;
  position: relative;
  display: grid;
  gap: var(--space-6);
}
.timeline::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 4.5rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklab, var(--color-primary) 55%, transparent) 10%,
    color-mix(in oklab, var(--color-primary) 55%, transparent) 90%,
    transparent 100%
  );
  border-radius: 2px;
  pointer-events: none;
}
@media (max-width: 879px) {
  .timeline::before { left: 0.5rem; top: 12px; bottom: 12px; }
}
.timeline__item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-8);
  align-items: start;
  position: relative;
}
@media (max-width: 879px) {
  .timeline__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-left: 1.5rem;
  }
}
.timeline__marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  background: #FFFFFF;
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, var(--color-divider));
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", "IBM Plex Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-deep, #005C85);
  white-space: nowrap;
  justify-self: start;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 8%, transparent);
}
@media (max-width: 879px) {
  .timeline__marker { justify-self: start; }
  .timeline__item::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.9rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
    transform: translateX(-50%);
  }
}
@media (min-width: 880px) {
  .timeline__marker {
    margin-left: 0;
    position: relative;
    z-index: 1;
  }
  .timeline__marker::after {
    content: '';
    position: absolute;
    left: calc(100% + 1.25rem);
    top: 50%;
    width: 0.75rem;
    height: 1px;
    background: color-mix(in oklab, var(--color-primary) 45%, transparent);
    transform: translateY(-50%);
  }
}
.timeline__body {
  padding-bottom: var(--space-4);
}
.timeline__title {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
}
.timeline__body p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================
   CTA banner — action row (two buttons)
   ============================================================ */
.cta-banner__actions {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}
.cta-banner__actions .btn--ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgb(255 255 255 / 0.35);
}
.cta-banner__actions .btn--ghost:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.6);
  color: #FFFFFF;
}
@media (max-width: 559px) {
  .cta-banner__actions { width: 100%; flex-direction: column; }
  .cta-banner__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Pricing — single featured card desktop polish
   Eliminates dead space by switching the card to a 2-col interior
   on desktop (left: price + intent, right: includes + CTA)
   ============================================================ */
.pricing.pricing--single {
  grid-template-columns: 1fr;
  max-width: min(1100px, 100%);
}
@media (min-width: 880px) {
  .pricing--single .pricing-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-8), 4vw, var(--space-16));
    row-gap: var(--space-6);
    padding: clamp(var(--space-8), 3.5vw, var(--space-12));
    align-items: start;
  }
  .pricing--single .pricing-card__tag {
    top: var(--space-6);
    right: var(--space-6);
  }
  /* Single-card body: two visual columns implemented via grid rows.
     Left col: tag (absolute), title, desc, price, commitment, starter $297
     Right col: checklist, then CTA button stacked directly below */
  .pricing--single .pricing-card h3,
  .pricing--single .pricing-card__desc,
  .pricing--single .pricing-card__price,
  .pricing--single .pricing-card__commitment,
  .pricing--single .pricing-card__starter {
    grid-column: 1;
  }
  .pricing--single .pricing-card .checklist,
  .pricing--single .pricing-card > .btn {
    grid-column: 2;
    border-left: 1px solid rgb(255 255 255 / 0.08);
    padding-left: clamp(var(--space-6), 2.5vw, var(--space-10));
  }
  .pricing--single .pricing-card h3 { margin-top: 0; grid-row: 1; }
  .pricing--single .pricing-card__desc { grid-row: 2; }
  .pricing--single .pricing-card__price { grid-row: 3; }
  .pricing--single .pricing-card__commitment { grid-row: 4; }
  .pricing--single .pricing-card__starter { grid-row: 5; }
  .pricing--single .pricing-card .checklist {
    grid-row: 1 / 5;
    align-self: start;
    margin: 0;
  }
  .pricing--single .pricing-card > .btn {
    grid-row: 5;
    align-self: end;
    margin: 0;
  }
  /* Tighten internal spacing */
  .pricing--single .pricing-card__desc { margin-bottom: var(--space-5); }
  .pricing--single .pricing-card__price {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .pricing--single .pricing-card__price-num { font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: 1; }
  .pricing--single .pricing-card__commitment { margin-bottom: var(--space-6); }
}
@media (min-width: 1080px) {
  .pricing--single .pricing-card .checklist { padding-left: var(--space-10); }
}
@media (min-width: 880px) {
  .pricing--single .pricing-card > .btn {
    width: auto;
    justify-self: stretch;
    max-width: 320px;
  }
}

/* ============================================================
   PRICE CARD — full aesthetic remodel
   Apple/Linear/Stripe-tier composition:
   - Charcoal #0E1116 base with cyan-deep gradient halo
   - Hairline 1px border + 1px inner top-light (lifted glass)
   - Left cyan rail accent (4px → fades)
   - Small geometric corner mark (top-right)
   - 2-col interior on desktop (deal | includes) with hairline divider
   - Single col on mobile, price block reads as a hero ticker
   - Footer action row spans full width with CTA + reassurance note
   ============================================================ */

.pricing--single { max-width: min(1120px, 100%); margin-inline: auto; }

.price-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 92% -10%, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 70% at -10% 110%, color-mix(in oklab, var(--color-primary-deep, #005C85) 18%, transparent), transparent 65%),
    linear-gradient(180deg, #131820 0%, #0E1116 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 4vw, 56px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 28px 80px -28px rgba(0, 168, 232, 0.18),
    0 18px 56px -18px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 2.5vw, var(--space-10));
}

/* Left cyan rail — full-height vertical accent, gradient fade */
.price-card__rail {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-primary) 18%,
    var(--color-primary-deep, #005C85) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Top-right geometric corner mark */
.price-card__corner {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 16px; height: 16px;
  color: color-mix(in oklab, var(--color-primary) 65%, transparent);
  pointer-events: none;
  z-index: 1;
}
.price-card__corner svg { width: 100%; height: 100%; }

/* HEAD --------------------------------------------------------- */
.price-card__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
}
.price-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.4rem 0.75rem;
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-primary) 28%, transparent);
  border-radius: 999px;
  color: #B8E4F4;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.price-card__eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 22%, transparent);
}
.price-card__title {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
  color: #FFFFFF;
  text-wrap: balance;
}
.price-card__lede {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 54ch;
}

/* COLUMNS ----------------------------------------------------- */
.price-card__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}
@media (min-width: 880px) {
  .price-card__columns {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(var(--space-8), 3.5vw, var(--space-12));
  }
  .price-card__deal {
    padding-right: clamp(var(--space-6), 2vw, var(--space-10));
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* DEAL (left) ------------------------------------------------- */
.price-card__deal {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}
.price-card__amount {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  background: linear-gradient(180deg, #FFFFFF 0%, #D9E8F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.price-card__period {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.price-card__period span { letter-spacing: 0.06em; }

.price-card__sub {
  margin: -0.25rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.01em;
}

/* Starter sub-block — compact, no nested card-in-card */
.price-card__starter {
  position: relative;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.price-card__starter::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 60%);
  pointer-events: none;
}
.price-card__starter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  position: relative;
}
.price-card__starter-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #80D6F2;
}
.price-card__starter-amount {
  font-family: var(--font-display, "Oswald", "Cabinet Grotesk", sans-serif);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.005em;
  color: #FFFFFF;
}
.price-card__starter-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  position: relative;
}

/* Guarantee inline row */
.price-card__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding-top: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.price-card__guarantee svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--color-primary);
  margin-top: 1px;
}
.price-card__guarantee strong {
  color: #FFFFFF;
  font-weight: 600;
}

/* INCLUDES (right) -------------------------------------------- */
.price-card__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.price-card__includes-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
}
.price-card__list li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.price-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    color-mix(in oklab, var(--color-primary) 18%, transparent)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380D6F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    no-repeat center / 11px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 28%, transparent);
}

/* ACTION (footer) --------------------------------------------- */
.price-card__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: clamp(var(--space-5), 2vw, var(--space-8));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.price-card__cta {
  position: relative;
}
.price-card__action-note {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.5);
  flex: 1;
  min-width: 200px;
}

/* Hover lift — subtle */
@media (hover: hover) {
  .price-card { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1); }
  .price-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 1px 0 rgba(0, 0, 0, 0.25),
      0 36px 96px -28px rgba(0, 168, 232, 0.26),
      0 22px 64px -18px rgba(0, 0, 0, 0.6);
  }
}

/* Mobile refinements ----------------------------------------- */
@media (max-width: 559px) {
  .price-card { padding: 24px 20px; gap: var(--space-5); }
  .price-card__corner { top: 0.9rem; right: 0.9rem; }
  .price-card__amount { font-size: 4.5rem; }
  .price-card__starter { padding: var(--space-3) var(--space-4); }
  .price-card__starter-amount { font-size: 1.625rem; }
  .price-card__action { gap: var(--space-3); }
  .price-card__cta { width: 100%; justify-content: center; }
  .price-card__action-note { text-align: center; flex-basis: 100%; }
}

/* ============================================================
   News hub — /pages/news/
   Card grid, category filters, featured card, article disclaimer
   ============================================================ */

/* Filter chip row */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-10);
}
.news-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive);
}
.news-filter__chip:hover {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-divider));
  color: var(--color-text-strong);
}
.news-filter__chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* Featured card — image/visual left, text right (desktop); stacked (mobile) */
.news-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
@media (min-width: 860px) {
  .news-featured {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
    padding: var(--space-8);
  }
}
.news-featured:hover {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-divider));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.news-featured__visual {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(720px 280px at 20% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    var(--color-bg-deep);
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  overflow: hidden;
}
@media (min-width: 860px) { .news-featured__visual { min-height: 100%; } }
.news-featured__visual-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}
.news-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.news-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  margin: 0;
  text-wrap: balance;
}
.news-featured:hover .news-featured__title { color: var(--color-primary-deep); }
.news-featured__excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 56ch;
}

/* Article grid */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  height: 100%;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.news-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-divider));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.news-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}
.news-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--color-text-strong);
  margin: 0;
  text-wrap: balance;
  transition: color var(--transition-interactive);
}
.news-card:hover .news-card__title { color: var(--color-primary-deep); }
.news-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-faint);
}
.news-card__meta-sep { width: 1px; height: 10px; background: var(--color-divider); }
.news-card__meta-author { color: var(--color-text-muted); font-weight: 600; }

/* Load more stub */
.news-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

/* Newsletter CTA */
.news-newsletter {
  margin-top: var(--space-16);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-bg-deep);
  border-radius: var(--radius-xl);
  color: #FFFFFF;
  text-align: center;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}
.news-newsletter__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.news-newsletter h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin: 0;
  max-width: 26ch;
}
.news-newsletter p {
  margin: 0;
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}
.news-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  width: 100%;
  max-width: 480px;
}
.news-newsletter__form input[type="email"] {
  flex: 1 1 240px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.news-newsletter__form input[type="email"]::placeholder { color: rgb(255 255 255 / 0.5); }
.news-newsletter__disclaimer {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.5);
  max-width: 44ch;
}

/* Article footer disclaimer (medical) */
.article-disclaimer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-faint);
}

/* ============================================================
   Quiz wizard — multi-track eligibility quiz
   (TRT / Weight loss / Recovery / Longevity)
   ============================================================ */

.quiz-progress {
  margin-bottom: var(--space-6);
}
.quiz-progress__label {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.quiz-progress__bar {
  width: 100%;
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.quiz-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-wizard {
  position: relative;
  display: block;
}

.quiz-step {
  display: none;
  opacity: 0;
  transform: translateX(24px);
}
.quiz-step.is-active {
  display: block;
  animation: quiz-step-in 200ms ease-out forwards;
}
@keyframes quiz-step-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-step.is-active { animation: none; opacity: 1; transform: none; }
}

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.quiz-nav .btn--primary {
  flex: 1 1 auto;
}
.quiz-back,
.quiz-nav .btn--ghost {
  flex: 0 0 auto;
}

/* Track branches within Step 3 — only the active track's branch renders */
.quiz-branch {
  display: none;
}
.quiz-branch.is-active {
  display: grid;
  gap: var(--space-5);
}

/* Goal selector cards — Step 2 */
.quiz-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .quiz-goal-grid { grid-template-columns: 1fr; }
}
.quiz-goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 96px;
}
.quiz-goal-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-goal-card:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-highlight);
}
.quiz-goal-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  box-shadow: var(--shadow-glow);
}
.quiz-goal-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: 0.005em;
}
.quiz-goal-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* BMI inputs — Weight loss branch */
.quiz-bmi-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 480px) {
  .quiz-bmi-inputs { grid-template-columns: 1fr; }
}
.quiz-bmi-field {
  display: grid;
  gap: var(--space-2);
}
.quiz-bmi-row {
  display: flex;
  gap: var(--space-2);
}
.quiz-bmi-row input {
  width: 100%;
}

/* Mobile — stack wizard nav buttons full-width */
@media (max-width: 480px) {
  .quiz-nav {
    flex-direction: column-reverse;
  }
  .quiz-nav .btn {
    width: 100%;
  }
}

/* =========================================================
   WEIGHT LOSS PAGE — .wl-* namespace
   ========================================================= */

/* Hero override: darker scrim + right-anchored composition */
.wl-hero .hero__media img {
  object-position: center right;
}
.wl-hero__scrim {
  background: linear-gradient(90deg,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.78) 40%,
    rgba(10, 10, 10, 0.35) 70%,
    rgba(10, 10, 10, 0.15) 100%);
}
.wl-hero__content {
  max-width: 620px;
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

/* Trust chip row */
.wl-trust-row {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-5) 0 var(--space-6);
  flex-wrap: wrap;
}
.wl-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.wl-trust-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-primary);
  flex-shrink: 0;
}
.wl-trust-icon svg { width: 20px; height: 20px; }
.wl-trust-text {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
}

/* Steps grid (4 numbered cards) */
.wl-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 720px) {
  .wl-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .wl-steps-grid { grid-template-columns: repeat(4, 1fr); }
}
.wl-step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.wl-step-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.wl-step-card__num {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.wl-step-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.wl-step-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Eligibility comparison (2 columns: fit / not fit) */
.wl-eligibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 800px) {
  .wl-eligibility-grid { grid-template-columns: repeat(2, 1fr); }
}
.wl-eligibility-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.wl-eligibility-col--yes {
  border-top: 3px solid var(--color-success, #10b981);
}
.wl-eligibility-col--no {
  border-top: 3px solid var(--color-error, #ef4444);
}
.wl-eligibility-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: var(--space-4);
}
.wl-eligibility-col--yes .wl-eligibility-header svg { color: var(--color-success, #10b981); width: 22px; height: 22px; }
.wl-eligibility-col--no .wl-eligibility-header svg { color: var(--color-error, #ef4444); width: 22px; height: 22px; }
.wl-eligibility-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wl-eligibility-list li {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
  padding-left: var(--space-4);
  position: relative;
}
.wl-eligibility-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

/* Honest section */
.wl-honest-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8) var(--space-7);
}
@media (max-width: 640px) {
  .wl-honest-card { padding: var(--space-6); }
}
.wl-honest-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1.2;
  margin: var(--space-2) 0 var(--space-6);
  letter-spacing: -0.01em;
}
.wl-honest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 800px) {
  .wl-honest-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
.wl-honest-h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wl-honest-grid p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* Waitlist card */
.wl-waitlist-card {
  background: linear-gradient(135deg, #0a0a0a 0%, #131316 100%);
  border: 1px solid rgba(0, 184, 212, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  color: #fff;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wl-waitlist-card::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 184, 212, 0.28) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .wl-waitlist-card { padding: var(--space-6) var(--space-5); }
}
.wl-waitlist-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0, 184, 212, 0.1);
  border: 1px solid rgba(0, 184, 212, 0.3);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}
.wl-waitlist-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
.wl-waitlist-title {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.wl-waitlist-lede {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
  position: relative;
  z-index: 1;
}
.wl-waitlist-form {
  position: relative;
  z-index: 1;
}
.wl-waitlist-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  text-align: left;
}
@media (min-width: 640px) {
  .wl-waitlist-fields { grid-template-columns: 1.4fr 1fr; }
}
.wl-waitlist-field__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-2);
}
.wl-waitlist-card .wl-waitlist-field input,
.wl-waitlist-card .wl-waitlist-field select,
.wl-waitlist-field input[type="email"],
.wl-waitlist-field input[type="text"],
.wl-waitlist-field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: var(--text-base);
  font-family: inherit;
  box-shadow: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.wl-waitlist-field input::placeholder { color: rgba(255,255,255,0.4); }
.wl-waitlist-card .wl-waitlist-field input:focus,
.wl-waitlist-card .wl-waitlist-field select:focus,
.wl-waitlist-field input[type="email"]:focus,
.wl-waitlist-field input[type="text"]:focus,
.wl-waitlist-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.09);
}
/* Prevent iOS/Chrome autofill from painting the input solid white */
.wl-waitlist-field input:-webkit-autofill,
.wl-waitlist-field input:-webkit-autofill:hover,
.wl-waitlist-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #131316 inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}
.wl-waitlist-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%), linear-gradient(-45deg, transparent 50%, rgba(255,255,255,0.5) 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.wl-waitlist-submit {
  width: 100%;
  justify-content: center;
}
.wl-waitlist-submit:disabled {
  opacity: 0.7;
  cursor: default;
}
.wl-waitlist-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: left;
}
.wl-waitlist-result strong { color: var(--color-primary); }
.wl-waitlist-result a { color: var(--color-primary); text-decoration: underline; }
.wl-waitlist-fineprint {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin: var(--space-4) 0 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Bottom disclaimer */
.wl-disclaimer {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-text-muted);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.wl-disclaimer p { margin: 0; }
.wl-disclaimer strong { color: var(--color-text); }

/* =========================================================
   COMPOUND REFERENCE PAGES — .cmp-* namespace
   Individual educational pages at /pages/compounds/<slug>.html
   Design: Defy narrative arc + Examine citation rigor + LabCorp data blocks
   ========================================================= */

/* --- Compound hero (shorter than homepage hero, more editorial) --- */
.cmp-hero {
  background: linear-gradient(180deg, #0A0A0A 0%, #131316 100%);
  color: #fff;
  padding: var(--space-12) 0 var(--space-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.cmp-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 184, 212, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.cmp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .cmp-hero__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-10);
  }
}
.cmp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.cmp-hero__eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}
.cmp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 var(--space-4);
}
.cmp-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
  max-width: 640px;
}
.cmp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.cmp-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.cmp-hero__tag--cyan {
  color: var(--color-primary);
  background: rgba(0, 184, 212, 0.10);
  border-color: rgba(0, 184, 212, 0.28);
}

/* Right side: aliases / data block */
.cmp-hero__data {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--text-sm);
}
.cmp-hero__data-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.cmp-hero__data-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cmp-hero__data-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}
.cmp-hero__data-list li strong {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Two-column layout: TOC sidebar + content --- */
.cmp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-10) 0 var(--space-12);
}
@media (min-width: 1080px) {
  .cmp-layout {
    grid-template-columns: 230px 1fr;
    gap: var(--space-10);
  }
}

.cmp-toc {
  display: none;
}
@media (min-width: 1080px) {
  .cmp-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-height, 64px) + 24px);
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    font-size: var(--text-sm);
  }
  .cmp-toc__title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }
  .cmp-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cmp-toc__list a {
    display: block;
    padding: 8px 10px;
    color: var(--color-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    line-height: 1.4;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  }
  .cmp-toc__list a:hover {
    color: var(--color-text-strong);
    background: var(--color-surface);
  }
  .cmp-toc__list a.is-active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: rgba(0, 184, 212, 0.06);
  }
}

/* --- Main article column --- */
.cmp-article {
  max-width: 760px;
}
.cmp-section {
  padding-top: var(--space-8);
  scroll-margin-top: 90px;
}
.cmp-section:first-child { padding-top: 0; }
.cmp-section > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
.cmp-section > h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: var(--space-6) 0 var(--space-3);
}
.cmp-section p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.cmp-section p:last-child { margin-bottom: 0; }
.cmp-section ul,
.cmp-section ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  color: var(--color-text);
  line-height: 1.75;
}
.cmp-section li { margin-bottom: 6px; }
.cmp-section strong { color: var(--color-text-strong); font-weight: 600; }

/* Inline superscript citations */
sup.cmp-cite {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  vertical-align: super;
  line-height: 0;
  padding: 0 1px;
}
sup.cmp-cite a {
  color: inherit;
  text-decoration: none;
}
sup.cmp-cite a:hover { text-decoration: underline; }

/* --- Evidence callout box (animal vs. human, weak-data warnings) --- */
.cmp-evidence {
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.cmp-evidence__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.cmp-evidence p { margin: 0; font-size: var(--text-sm); line-height: 1.7; }

/* --- Safety callout (yellow-ish warning for acute risks) --- */
.cmp-safety {
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-left: 3px solid rgb(202, 138, 4);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.cmp-safety__icon {
  color: rgb(202, 138, 4);
  flex-shrink: 0;
  margin-top: 2px;
}
.cmp-safety__icon svg { width: 22px; height: 22px; }
.cmp-safety__body h4 {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: 0.02em;
}
.cmp-safety__body p { margin: 0; font-size: var(--text-sm); line-height: 1.65; }

/* --- Data table (dosing / typical protocol / molecular data) --- */
.cmp-datatable {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cmp-datatable th,
.cmp-datatable td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.cmp-datatable th {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmp-datatable tr:last-child td { border-bottom: none; }
.cmp-datatable td strong { display: block; color: var(--color-text-strong); }

/* --- FAQ accordion --- */
.cmp-faq { margin-top: var(--space-4); }
.cmp-faq details {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.cmp-faq details:last-child { border-bottom: 1px solid var(--color-border); }
.cmp-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text-strong);
  list-style: none;
  padding-right: 32px;
  position: relative;
  line-height: 1.5;
}
.cmp-faq summary::-webkit-details-marker { display: none; }
.cmp-faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms ease;
}
.cmp-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--color-primary);
}
.cmp-faq details p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: var(--text-sm);
}

/* --- References section --- */
.cmp-refs {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.cmp-refs__updated {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-4);
}
.cmp-refs ol {
  padding-left: 24px;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.cmp-refs li {
  margin-bottom: 8px;
  scroll-margin-top: 90px;
}
.cmp-refs li:target {
  background: rgba(0, 184, 212, 0.08);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.cmp-refs a {
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-word;
}
.cmp-refs a:hover { text-decoration: underline; }
.cmp-refs__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Bottom CTA (only for compounds we prescribe) --- */
.cmp-cta {
  background: linear-gradient(135deg, #0a0a0a 0%, #131316 100%);
  border: 1px solid rgba(0, 184, 212, 0.22);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
  margin: var(--space-8) 0 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cmp-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 184, 212, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.cmp-cta__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
  position: relative;
}
.cmp-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  position: relative;
}
.cmp-cta__body {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
  max-width: 560px;
  position: relative;
}
.cmp-cta__buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  position: relative;
}

/* --- Related compounds strip --- */
.cmp-related {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.cmp-related__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-4);
}
.cmp-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.cmp-related__card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.cmp-related__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.cmp-related__card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.cmp-related__card-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0;
}

/* --- Compound hub landing page --- */
.cmp-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 720px) {
  .cmp-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .cmp-hub-grid { grid-template-columns: repeat(3, 1fr); }
}
.cmp-hub-card {
  display: block;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.cmp-hub-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.cmp-hub-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.cmp-hub-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.cmp-hub-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.cmp-hub-section {
  margin-top: var(--space-10);
}
.cmp-hub-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}
.cmp-hub-section__lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
  max-width: 720px;
}

/* ============================================================
   HERO SLIDESHOW — 3-slide crossfade with Ken Burns pan/zoom
   ============================================================ */

/* Slide media stack — each slide layered in the same box */
.hero--slides .hero-slides__media {
  /* inherits .hero__media positioning */
}
.hero--slides .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  z-index: 0;
}
.hero--slides .hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero--slides .hero-slide picture,
.hero--slides .hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero--slides .hero-slide img {
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  transition: transform 5000ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
/* Ken Burns: on the ACTIVE slide, drift the image slowly */
.hero--slides .hero-slide.is-active img {
  transform: scale(1.09) translateX(-0.9%);
}
/* Slide-specific composition tuning — keep faces / subjects visible */
.hero--slides .hero-slide[data-slide="0"] img {
  /* TRT physician-office portrait — subject on right, clean dark wall on left */
  object-position: 72% center;
}
.hero--slides .hero-slide[data-slide="1"] img {
  /* Weight loss photo — subject sits right of center */
  object-position: 70% center;
}
.hero--slides .hero-slide[data-slide="2"] img {
  /* Peptide gym photo — subject sits right, keep left clear for text */
  object-position: 75% center;
}
/* Scrim + ambient sit above every slide */
.hero--slides .hero__scrim,
.hero--slides .hero__ambient {
  z-index: 2;
}

/* Copy stack — layered like slides */
.hero-slides__content {
  position: relative;
}
.hero-slide-copy {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 700ms;
  will-change: opacity, transform;
}
.hero-slide-copy.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1) 200ms,
    transform 800ms cubic-bezier(0.4, 0, 0.2, 1) 200ms,
    visibility 0s linear 0s;
}
/* Stack all copy blocks in the same box so the active one is visible without pushing layout */
@media (min-width: 761px) {
  .hero-slides__content .hero-slide-copy:not(.is-active) {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero-slides__content .hero-slide-copy.is-active {
    position: relative;
    pointer-events: auto;
  }
}
/* Mobile: single active slide takes normal flow, inactive collapse */
@media (max-width: 760px) {
  .hero-slide-copy:not(.is-active) {
    display: none;
  }
}

/* Prev / Next chevrons */
.hero-slides__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(8 10 14 / 0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms ease,
    opacity 220ms ease;
}
.hero-slides__nav svg {
  width: 22px;
  height: 22px;
}
.hero-slides__nav:hover,
.hero-slides__nav:focus-visible {
  background: rgb(8 10 14 / 0.55);
  border-color: rgb(255 255 255 / 0.55);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}
.hero-slides__nav:focus-visible {
  box-shadow: 0 0 0 3px rgb(0 194 209 / 0.4);
}
.hero-slides__nav--prev { left: clamp(var(--space-4), 3vw, var(--space-8)); }
.hero-slides__nav--next { right: clamp(var(--space-4), 3vw, var(--space-8)); }

/* Hide chevrons on mobile — dots + swipe are enough */
@media (max-width: 760px) {
  .hero-slides__nav { display: none; }
}

/* Dot indicators (bottom-center) */
.hero-slides__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--space-5), 4vw, var(--space-8));
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  gap: var(--space-3);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(8 10 14 / 0.42);
  border: 1px solid rgb(255 255 255 / 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-slides__dot {
  position: relative;
  width: 32px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: rgb(255 255 255 / 0.30);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: background 220ms ease, width 320ms ease;
}
.hero-slides__dot:hover {
  background: rgb(255 255 255 / 0.50);
}
.hero-slides__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(0 194 209 / 0.5);
}
.hero-slides__dot.is-active {
  background: rgb(255 255 255 / 0.20);
  width: 56px;
}
.hero-slides__dot-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--color-primary, #00c2d1);
  border-radius: 999px;
  transition: width 100ms linear;
}
.hero-slides__dot.is-active .hero-slides__dot-fill {
  /* JS drives the width for the active dot */
}

/* Mobile: dots sit as a floating chip in the TOP-LEFT of the photo — out of the way of the
   subject's face, doesn't fight the badge, and keeps the vertical reading flow intact
   (photo → badge → title → body). */
@media (max-width: 760px) {
  .hero-slides__dots {
    left: var(--space-4);
    top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
    bottom: auto;
    transform: none;
    background: rgb(8 10 14 / 0.55);
    padding: 6px 10px;
    gap: var(--space-2);
  }
  .hero-slides__dot {
    width: 22px;
    height: 5px;
  }
  .hero-slides__dot.is-active {
    width: 40px;
  }
}

/* Reduced motion — kill the Ken Burns transform and slow crossfade */
@media (prefers-reduced-motion: reduce) {
  .hero--slides .hero-slide {
    transition: opacity 250ms linear;
  }
  .hero--slides .hero-slide img,
  .hero--slides .hero-slide.is-active img {
    transition: none;
    transform: none;
  }
  .hero-slide-copy {
    transition: opacity 200ms linear;
    transform: none;
  }
  .hero-slide-copy.is-active {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ============================================================
   CATEGORY GRID (home) — condition-first tile section
   4 image cards with dark label bar, matches Aurafil dark
   editorial aesthetic. Replaces the old product-rail formulary.
   ============================================================ */
.cat-grid {
  padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 7vw, 96px);
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(56, 197, 246, 0.045) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  position: relative;
}
.cat-grid__head {
  max-width: 780px;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.cat-grid__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0A0F14;
  margin: 0.35rem 0 0.75rem;
  text-wrap: balance;
}
.cat-grid__lede {
  font-family: var(--font-sans, inherit);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: #3a4553;
  margin: 0;
  max-width: 62ch;
}
.cat-grid__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  padding: 0;
  margin: 0;
  list-style: none;
}
.cat-grid__item { display: block; margin: 0; }

/* ---- CARD ---- */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: #0A0F14;
  text-decoration: none;
  color: #fff;
  box-shadow:
    0 1px 2px rgba(10, 15, 20, 0.06),
    0 12px 32px -12px rgba(10, 15, 20, 0.18);
  transform: translateZ(0);
  transition:
    transform 480ms cubic-bezier(0.2, 0.7, 0.15, 1),
    box-shadow 480ms cubic-bezier(0.2, 0.7, 0.15, 1);
  isolation: isolate;
}
.cat-card:hover,
.cat-card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(10, 15, 20, 0.08),
    0 24px 60px -18px rgba(10, 15, 20, 0.35);
}
.cat-card:focus-visible {
  outline: 2px solid var(--color-primary-active, #38C5F6);
  outline-offset: 3px;
}

/* Media (photo) — top ~72% of the card */
.cat-card__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #0A0F14;
}
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.15, 1),
              filter   900ms cubic-bezier(0.2, 0.7, 0.15, 1);
  will-change: transform;
  filter: saturate(1.02) contrast(1.02);
}
.cat-card:hover .cat-card__media img,
.cat-card:focus-visible .cat-card__media img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}
/* Gradient scrim bottom so the label bar reads even if it were transparent */
.cat-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 15, 20, 0.00) 55%,
    rgba(10, 15, 20, 0.20) 78%,
    rgba(10, 15, 20, 0.55) 100%);
  pointer-events: none;
}

/* Small A-mark chip in the top-right of every image */
.cat-card__mark {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(10, 15, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #38C5F6;
  z-index: 2;
  transition: background 320ms ease;
}
.cat-card__mark svg,
.cat-card__mark img { width: 20px; height: 20px; display: block; }
.cat-card:hover .cat-card__mark { background: rgba(10, 15, 20, 0.75); }

/* Body (dark label bar bottom) — fixed height so all four line up */
.cat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px 14px;
  background: linear-gradient(180deg, #0F1620 0%, #0A0F14 100%);
  border-top: 1px solid rgba(56, 197, 246, 0.14);
  flex: 0 0 auto;
  min-height: 84px;
}
.cat-card__copy { min-width: 0; flex: 1 1 auto; }
.cat-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 0 0 4px;
}
.cat-card__benefit {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-weight: 400;
}
.cat-card__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(56, 197, 246, 0.12);
  color: #38C5F6;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.15, 1),
              background 320ms ease,
              color 320ms ease;
}
.cat-card__arrow svg { width: 18px; height: 18px; display: block; }
.cat-card:hover .cat-card__arrow,
.cat-card:focus-visible .cat-card__arrow {
  background: #38C5F6;
  color: #0A0F14;
  transform: translateX(3px);
}

/* Footer link */
.cat-grid__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 48px);
}
.cat-grid__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, inherit);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #3a4553;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 200ms ease, border-color 200ms ease;
}
.cat-grid__all:hover {
  color: #0A0F14;
  border-color: rgba(56, 197, 246, 0.6);
}
.cat-grid__all .arrow { width: 16px; height: 16px; }

/* ---- MEDIUM: 2x2 grid ---- */
@media (max-width: 1024px) {
  .cat-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cat-card { aspect-ratio: 4 / 5; }
}

/* ---- MOBILE: single column with photo left, copy right = looks like Mosh's
   dense list. On small screens we keep the tall aspect and stack vertically. ---- */
@media (max-width: 640px) {
  .cat-grid { padding: 56px 0 40px; }
  .cat-grid__list { grid-template-columns: 1fr; gap: 16px; }
  .cat-card { aspect-ratio: 5 / 4; }
  .cat-card__media img { object-position: 60% 28%; }
  .cat-card__body { padding: 10px 16px 12px; min-height: 68px; }
  .cat-card__name { font-size: 1.25rem; }
  .cat-card__benefit { font-size: 0.875rem; }
  .cat-card__mark { top: 12px; right: 12px; width: 32px; height: 32px; }
  .cat-card__arrow { width: 40px; height: 40px; }
}