/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, 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: 32px;
  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: 36px; }
}
.site-header.is-scrolled .site-header__wordmark { height: 30px; }
@media (min-width: 880px) {
  .site-header.is-scrolled .site-header__wordmark { height: 32px; }
}
.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;
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 180ms cubic-bezier(.2,.7,.2,1);
}
/* 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: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 16px;
  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 {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.checklist li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  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); } }

.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;
}

/* MA gate banner */
.ma-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'] .ma-banner { color: var(--color-primary); }
.ma-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: var(--space-3);
  padding: var(--space-3) var(--space-4)
           calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--color-divider);
  box-shadow: 0 -8px 24px rgb(15 15 15 / 0.08);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@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;
}
.sticky-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  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);
}
.sticky-cta__btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgb(0 168 232 / 0.3);
}
.sticky-cta__btn--primary:hover,
.sticky-cta__btn--primary:active {
  background: var(--color-primary-hover);
}
.sticky-cta__btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
}
.sticky-cta__btn--secondary:hover,
.sticky-cta__btn--secondary:active {
  background: var(--color-text);
  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: 70% 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.95) 0%,
      rgba(8, 10, 14, 0.78) 28%,
      rgba(8, 10, 14, 0.40) 52%,
      rgba(8, 10, 14, 0.10) 75%,
      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: 640px;
}

/* 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, full width, tall enough to feel cinematic */
  .hero--cinematic .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 64vh;
    min-height: 460px;
    max-height: 640px;
    /* Soft fade-to-black at the bottom — starts at 65% so the lower portion of the
       photo dissolves into the text section that overlaps it. Head + shoulders stay solid. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 65%, 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 portion of the photo,
     landing the badge just below the T1 chest logo. Head + shoulders stay clean. */
  .hero--cinematic .container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -110px;
    padding-top: var(--space-6);
    padding-bottom: var(--space-12);
    background: linear-gradient(180deg, transparent 0%, #0A0A0A 60px);
  }
  .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(2.25rem, 1.2rem + 6.5vw, 3.25rem);
  }
}

/* ============================================================
   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;
}
.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 {
  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: 50ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}
.guide-cta .btn { margin-top: var(--space-2); }

/* ============================================================ */
/* 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%; }
}