/* SoftWave Marietta — production stylesheet */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, iframe, video { max-width: 100%; display: block; }
svg { width: 1.25em; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-link); }
/* Exclude .btn: without this, this rule outranks every .btn--* variant's own
   color on hover (a:hover has higher specificity than a single class), so
   button text silently swapped to this link color on hover. */
a:not(.btn):hover { color: var(--color-primary-bright); }

/* ---------- Tokens ---------- */
/* Metric-matched fallbacks: Arial scaled to Inter / Inter Tight widths and
   line metrics, so the swap to the web font does not reflow the hero. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'); size-adjust: 95%; ascent-override: 102%; descent-override: 25.4%; line-gap-override: 0%; }

:root {
  /* brand */
  --color-primary: #494fdf;
  --color-primary-bright: #4f55f1;
  --color-primary-deep: #3a40c4;
  --color-on-primary: #ffffff;
  --color-brand-yellow: #f5c344;
  --color-brand-yellow-deep: #e0a91e;
  /* canvas */
  --color-canvas-light: #ffffff;
  --color-canvas-dark: #000000;
  --color-surface-soft: #f4f4f4;
  --color-surface-card: #ffffff;
  --color-surface-deep: #0a0a0a;
  --color-surface-elevated: #16181a;
  --color-hairline-light: #e2e2e7;
  --color-hairline-dark: rgba(255, 255, 255, .12);
  --color-hairline-strong: #191c1f;
  /* text */
  --color-ink: #191c1f;
  --color-body: #1f2226;
  --color-mute: #505a63;
  --color-on-dark: #ffffff;
  --color-on-dark-mute: rgba(255, 255, 255, .72);
  --color-accent-light-green: #2f7a12;
  --color-accent-danger: #c22a3a;
  --color-link: #376cd5;
  /* type */
  --font-display: 'Inter Tight', 'Inter Tight Fallback', Inter, 'Inter Fallback', -apple-system, sans-serif;
  --font-body: Inter, 'Inter Fallback', -apple-system, sans-serif;
  --weight-display: 500;
  --weight-body-bold: 600;
  --size-display-lg: 48px; --lh-display-lg: 1.21; --ls-display-lg: -0.48px;
  --size-display-md: 40px; --lh-display-md: 1.2;  --ls-display-md: -0.4px;
  --size-heading-lg: 32px; --lh-heading-lg: 1.19; --ls-heading-lg: -0.32px;
  --size-heading-md: 24px; --lh-heading-md: 1.33;
  --size-heading-sm: 20px; --lh-heading-sm: 1.4;
  --size-body-lg: 18px; --lh-body-lg: 1.56; --ls-body-lg: -0.09px;
  --size-body-md: 16px; --lh-body-md: 1.5; --ls-body-md: 0.24px;
  --size-body-sm: 14px; --lh-body-sm: 1.43;
  --size-button-lg: 20px; --size-button-md: 16px; --ls-button-md: 0.24px; --size-button-sm: 14px;
  --size-caption: 13px; --lh-caption: 1.4;
  /* space */
  --space-xxs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 14px; --space-lg: 16px;
  --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px;
  --space-block: 80px; --space-section: 88px; --space-band: 120px;
  --container-max: 1200px;
  /* radii */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;
  /* neumorphism */
  --color-neu-shadow-dark: #d7d7dc;
  --color-neu-shadow-light: #ffffff;
  /* motion */
  --ease: 0.15s ease;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  background: var(--color-canvas-light);
  color: var(--color-ink);
  font-size: var(--size-body-md);
  line-height: var(--lh-body-md);
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

.band-dark { background: var(--color-canvas-dark); color: var(--color-on-dark); }
/* Subtle graph-paper grid (adapted from uiverse.io/kennyotsu-monochromia/spotty-cheetah-65),
   recolored from raw greys to the site's own hairline token on white. */
.band-light {
  background-color: var(--color-canvas-light);
  background-image:
    linear-gradient(0deg, transparent 24%, var(--color-hairline-light) 25%, var(--color-hairline-light) 26%, transparent 27%, transparent 74%, var(--color-hairline-light) 75%, var(--color-hairline-light) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--color-hairline-light) 25%, var(--color-hairline-light) 26%, transparent 27%, transparent 74%, var(--color-hairline-light) 75%, var(--color-hairline-light) 76%, transparent 77%, transparent);
  background-size: 55px 55px;
  color: var(--color-ink);
}

section.section { padding: var(--space-section) 0; }
section.section-band { padding: var(--space-band) 0; }

h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.25rem, 1.6rem + 3.4vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -1.2px;
}
h2.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
}
h2.display-md, h3.display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
}
/* Keyword emphasis inside headings: italic + accent color, adapting to
   whichever band it sits in so it always reads against its background. */
.accent {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-primary-bright);
}
.band-dark .accent { color: var(--color-brand-yellow); }

p.lede {
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--color-canvas-light);
  color: var(--color-ink);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  z-index: 100;
  transition: top var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-canvas-dark);
  color: var(--color-on-dark);
  min-height: 80px;
  padding: 0 24px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 44px;
  min-width: 0;
  flex-shrink: 1;
}
.brand-mark { width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center; flex-shrink: 0; }
.brand-mark img { height: 40px; width: auto; max-width: none; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-sm);
  color: var(--color-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.primary-nav { display: flex; gap: 28px; }
.primary-nav a {
  font-size: var(--size-button-md);
  font-weight: 600;
  letter-spacing: var(--ls-button-md);
  color: var(--color-on-dark-mute);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { color: var(--color-on-dark); }

.header-cta {
  display: inline-flex;
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--color-on-dark);
  flex-shrink: 0;
}
.hamburger svg { width: 24px; height: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ease), opacity var(--ease);
  min-height: 44px;
}
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn--primary { background: var(--color-canvas-light); color: var(--color-canvas-dark); border: none; }
.btn--dark { background: var(--color-canvas-dark); color: var(--color-on-dark); border: none; }
.btn--soft { background: var(--color-surface-soft); color: var(--color-ink); border: none; }
.btn--outline-light { background: var(--color-canvas-light); color: var(--color-ink); border: 1px solid var(--color-hairline-strong); }
.btn--outline-dark { background: var(--color-canvas-dark); color: var(--color-on-dark); border: 1px solid var(--color-on-dark); }
.btn:hover { opacity: 0.85; }

.btn--lg { padding: 14px 28px; height: 56px; font-size: var(--size-button-lg); font-family: var(--font-display); font-weight: var(--weight-display); }
.btn--md { padding: 14px 28px; height: 48px; font-size: var(--size-button-md); font-weight: 600; letter-spacing: var(--ls-button-md); }
.btn--sm { padding: 8px 16px; height: 36px; font-size: var(--size-button-sm); font-weight: 600; }
.btn--block { width: 100%; }

/* Isolated CTA — animated brand-gradient glow (adapted from uiverse.io/kirzin/selfish-kangaroo-64) */
.btn--glow {
  position: relative;
  z-index: 1;
  border: none;
  color: var(--color-on-primary);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-bright), var(--color-brand-yellow), var(--color-primary));
  background-size: 300%;
}
.btn--glow:hover { opacity: 1; }
.btn--glow::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-bright), var(--color-brand-yellow), var(--color-primary));
  background-size: 400%;
  transition: filter 1s ease;
}
/* The color shift + blur live only in this halo behind the button — the
   button's own face (and its white text) stay on a fixed, legible background. */
.btn--glow:hover::before { filter: blur(20px); animation: btn-glow-shift 8s linear infinite; }
.btn--glow:active { background-image: linear-gradient(32deg, var(--color-primary), var(--color-primary-bright), var(--color-brand-yellow), var(--color-primary)); }
@keyframes btn-glow-shift { 0% { background-position: 0%; } 100% { background-position: 400%; } }

/* Paired/side-by-side CTAs — neon scanline outline (adapted from uiverse.io/adamgiebl/ugly-robin-41) */
.btn--scan {
  --scan-color: var(--color-primary);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid var(--scan-color);
  background: linear-gradient(to right, color-mix(in srgb, var(--scan-color) 10%, transparent) 1%, transparent 40%, transparent 60%, color-mix(in srgb, var(--scan-color) 10%, transparent) 100%);
  color: var(--scan-color);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--scan-color) 40%, transparent), 0 0 9px 3px color-mix(in srgb, var(--scan-color) 10%, transparent);
  letter-spacing: 0.02em;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
.btn--scan::before {
  content: '';
  position: absolute;
  left: -4em;
  top: 0;
  width: 4em;
  height: 100%;
  background: linear-gradient(to right, transparent 1%, color-mix(in srgb, var(--scan-color) 12%, transparent) 40%, color-mix(in srgb, var(--scan-color) 12%, transparent) 60%, transparent 100%);
  transition: transform 0.4s ease-in-out;
}
.btn--scan:hover {
  color: color-mix(in srgb, var(--scan-color) 60%, white);
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--scan-color) 60%, transparent), 0 0 9px 3px color-mix(in srgb, var(--scan-color) 20%, transparent);
  opacity: 1;
}
.btn--scan:hover::before { transform: translateX(15em); }
.btn--scan-accent { --scan-color: var(--color-brand-yellow-deep); }
.btn--scan-onDark { --scan-color: var(--color-on-dark); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  background: var(--color-surface-soft);
  color: var(--color-ink);
}
/* ---------- Hero ---------- */
.hero {
  padding: var(--space-band) 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Trust bar (rotating fact ticker) ---------- */
.trust-bar {
  background: var(--color-canvas-dark);
  padding: 28px 0;
  overflow: hidden;
}
.trust-track {
  display: flex;
  width: max-content;
  animation: trust-scroll 34s linear infinite;
}
.trust-bar:hover .trust-track { animation-play-state: paused; }
.trust-track-group {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
  color: var(--color-on-dark-mute);
  font-size: var(--size-body-sm);
  font-weight: 600;
  white-space: nowrap;
}
.trust-track-group .dot { color: var(--color-brand-yellow); opacity: 0.7; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Hero video (full-height ambient panel, right column) ---------- */
.hero-media {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
}
.hero-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  /* The clip is square on pure black. Feather all four edges so the close-up
     shots that run past the frame dissolve into the page instead of showing a hard crop line. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
/* ---------- Product mockup (photography placeholder) ---------- */
.product-mockup {
  position: relative;
  background: var(--color-canvas-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.product-mockup[data-aspect="4-3"] { aspect-ratio: 4 / 3; }
.product-mockup[data-aspect="4-5"] { aspect-ratio: 4 / 5; }
.product-mockup img { width: 100%; height: 100%; object-fit: cover; }
.product-mockup span {
  position: relative;
  z-index: 1;
  color: var(--color-on-dark-mute);
  font-size: var(--size-body-sm);
}
.product-mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: mockup-shimmer 7s ease-in-out infinite;
}
@keyframes mockup-shimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* ---------- Feature cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.feature-card {
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid transparent;
  transition: box-shadow 0.48s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.48s cubic-bezier(0.23, 1, 0.32, 1), transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Every variant carries a trailing "0 0 0 0 <accent>" shadow layer at rest —
   invisible (zero offset/blur/spread), but it makes the hover state's layer
   count and order match exactly. Browsers can only interpolate box-shadow
   smoothly when both sides have the same number of layers; without this,
   the neumorphic/clay layers would have to snap to a completely different
   hard shadow on hover instead of flowing into it. */
.feature-card--light {
  background: var(--color-surface-card);
  color: var(--color-ink);
  border-color: var(--color-hairline-light);
  box-shadow: 0 0 0 0 var(--color-primary);
}
.feature-card--dark {
  background: var(--color-surface-elevated);
  color: var(--color-on-dark);
  box-shadow: 0 0 0 0 var(--color-primary);
}
/* Soft neumorphic card (adapted from uiverse.io/Codewithvinay/orange-earwig-38) */
.feature-card--neu {
  background: var(--color-surface-soft);
  color: var(--color-ink);
  border-radius: var(--radius-xl);
  box-shadow: 20px 20px 60px var(--color-neu-shadow-dark), -20px -20px 60px var(--color-neu-shadow-light), 0 0 0 0 var(--color-primary);
}
/* Soft clay card, dark variant (adapted from uiverse.io/adamgiebl/horrible-rabbit-39) */
.feature-card--neu-dark {
  background: var(--color-surface-elevated);
  color: var(--color-on-dark);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 -23px 25px 0 rgba(255, 255, 255, 0.04),
    inset 0 -36px 30px 0 rgba(255, 255, 255, 0.03),
    inset 0 -79px 40px 0 rgba(255, 255, 255, 0.02),
    0 2px 1px rgba(0, 0, 0, 0.4),
    0 4px 2px rgba(0, 0, 0, 0.35),
    0 8px 4px rgba(0, 0, 0, 0.3),
    0 16px 8px rgba(0, 0, 0, 0.25),
    0 32px 16px rgba(0, 0, 0, 0.2),
    0 0 0 0 var(--color-brand-yellow);
}
/* Same pop hover on every card variant: hard offset shadow + shift, matching
   .testimonial-card and .step-card for one consistent feel site-wide. Each
   variant only changes its own trailing accent layer's offset — everything
   before it is repeated unchanged so the transition interpolates cleanly. */
.feature-card:hover { border-color: var(--color-primary); transform: translate(-8px, -8px); }
.feature-card--light:hover,
.feature-card--dark:hover { box-shadow: 8px 8px 0 0 var(--color-primary); }
.feature-card--neu:hover { box-shadow: 20px 20px 60px var(--color-neu-shadow-dark), -20px -20px 60px var(--color-neu-shadow-light), 8px 8px 0 0 var(--color-primary); }
.feature-card--neu-dark:hover {
  box-shadow:
    inset 0 -23px 25px 0 rgba(255, 255, 255, 0.04),
    inset 0 -36px 30px 0 rgba(255, 255, 255, 0.03),
    inset 0 -79px 40px 0 rgba(255, 255, 255, 0.02),
    0 2px 1px rgba(0, 0, 0, 0.4),
    0 4px 2px rgba(0, 0, 0, 0.35),
    0 8px 4px rgba(0, 0, 0, 0.3),
    0 16px 8px rgba(0, 0, 0, 0.25),
    0 32px 16px rgba(0, 0, 0, 0.2),
    8px 8px 0 0 var(--color-brand-yellow);
}
/* Round icon seals. Raster artwork is adapted from softwavetrt.com and recolored
   to --color-primary; the line glyphs are redrawn as SVG in the same indigo disc. */
.icon-seal {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-seal img { width: 100%; height: 100%; border-radius: inherit; }
.icon-seal svg { width: 30px; height: 30px; }
.feature-card .eyebrow {
  display: inline-block;
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feature-card--light .eyebrow { color: var(--color-mute); }
.feature-card--dark .eyebrow { color: var(--color-on-dark-mute); }
.feature-card--neu .eyebrow { color: var(--color-primary); }
.feature-card--neu-dark .eyebrow { color: var(--color-brand-yellow); }
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
}
.feature-card p { font-size: var(--size-body-md); line-height: var(--lh-body-md); }
.feature-card--light p { color: var(--color-mute); }
.feature-card--dark p { color: var(--color-on-dark-mute); }
.feature-card--neu-dark p { color: var(--color-on-dark-mute); }

/* ---------- Compare tabs (adapted from uiverse.io/Admin12121/cold-bobcat-20) ---------- */
.compare-tabs { display: flex; flex-direction: column; gap: 28px; }
.compare-tabs .tabs {
  --radius: 9999px;
  --border: 4px;
  --height: 52px;
  --speed: 0.25s;
  --ease: linear(0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.96%, 0.6539 19.12%, 0.738 23.5%, 0.8086 28.15%, 0.8662 33.12%, 0.9078 37.92%, 0.9405 43.12%, 0.965 48.84%, 0.9821 55.28%, 0.992 61.97%, 0.9976 70.09%, 1);
  height: var(--height);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  position: relative;
  background: hsl(0 0% 0%);
  border-radius: var(--radius);
  border: var(--border) solid hsl(0 0% 0%);
}
.compare-tabs .tabs > .input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.compare-tabs .tabs:has(:checked:nth-of-type(1)) { --active: 0; }
.compare-tabs .tabs:has(:checked:nth-of-type(2)) { --active: 1; }
.compare-tabs .tabs:has(:checked:nth-of-type(3)) { --active: 2; }
.compare-tabs .tabs:has(.input:nth-of-type(2)) { --count: 2; }
.compare-tabs .tabs:has(.input:nth-of-type(3)) { --count: 3; }
.compare-tabs .tabs :checked + .label { --highlight: 1; }
.compare-tabs .tabs .label {
  padding: 0 clamp(12px, 4vw, 24px);
  cursor: pointer;
  text-align: center;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) - var(--border));
  color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
  font-weight: 600;
  font-size: var(--size-body-sm);
  transition: background, color, transform;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease, ease);
}
.compare-tabs .tabs .input:not(:checked) + .label:hover { --highlight: 0.35; background: hsl(0 0% 20%); transform: scale(1.04); }
.compare-tabs .tabs .input:focus-visible + .label { outline: 3px solid var(--color-brand-yellow); outline-offset: 2px; }
.compare-tabs .tabs .input:checked + .label { animation: compare-tab-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes compare-tab-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.compare-tabs .tabs::after {
  pointer-events: none;
  content: '';
  width: calc(100% / var(--count));
  height: 100%;
  background: hsl(0 0% 100%);
  position: absolute;
  border-radius: calc(var(--radius) - var(--border));
  mix-blend-mode: difference;
  translate: calc(var(--active, 0) * 100%) 0;
  transition: translate;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease, ease);
}
.compare-panels { position: relative; display: grid; }
.compare-panel {
  position: relative;
  grid-area: 1 / 1;
  min-height: 220px;
  color: var(--color-on-dark);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated)) padding-box,
    linear-gradient(315deg, var(--color-primary), var(--color-brand-yellow)) border-box;
  padding: var(--space-xxl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.compare-panel::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(315deg, var(--color-primary), var(--color-brand-yellow));
  filter: blur(28px);
  opacity: 0.55;
}
.compare-panel .compare-versus {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-sm);
  color: var(--color-on-dark);
}
.compare-panel .compare-versus::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-brand-yellow);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.compare-panel p {
  margin: 0;
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-on-dark-mute);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease 0.1s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
/* Matched by tab position, not by specific IDs, so any .compare-tabs
   instance works (currently used on both index.html and technology.html
   with entirely different ids/labels). */
.compare-tabs:has(.tabs .input:nth-of-type(1):checked) .compare-panel:nth-child(1),
.compare-tabs:has(.tabs .input:nth-of-type(2):checked) .compare-panel:nth-child(2),
.compare-tabs:has(.tabs .input:nth-of-type(3):checked) .compare-panel:nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.compare-tabs:has(.tabs .input:nth-of-type(1):checked) .compare-panel:nth-child(1) .compare-versus::after,
.compare-tabs:has(.tabs .input:nth-of-type(2):checked) .compare-panel:nth-child(2) .compare-versus::after,
.compare-tabs:has(.tabs .input:nth-of-type(3):checked) .compare-panel:nth-child(3) .compare-versus::after {
  width: 48px;
}
.compare-tabs:has(.tabs .input:nth-of-type(1):checked) .compare-panel:nth-child(1) p,
.compare-tabs:has(.tabs .input:nth-of-type(2):checked) .compare-panel:nth-child(2) p,
.compare-tabs:has(.tabs .input:nth-of-type(3):checked) .compare-panel:nth-child(3) p {
  opacity: 1;
  transform: none;
}

/* ---------- Profile glow card (adapted from uiverse.io/Daniel1227k/moody-newt-4) ---------- */
.profile-glow-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}
.profile-glow-card::before,
.profile-glow-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(315deg, var(--color-primary), var(--color-brand-yellow));
}
.profile-glow-card::before { z-index: 0; }
.profile-glow-card::after { z-index: -1; filter: blur(30px); opacity: 0.75; }
.profile-glow-card .frame {
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  background: var(--color-canvas-dark);
}
.profile-glow-card .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-glow-card:hover .frame img { transform: scale(1.06); }
.profile-glow-card .caption {
  position: absolute;
  inset: 3px 3px auto 3px;
  bottom: 3px;
  top: auto;
  z-index: 2;
  padding: 28px 20px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: var(--color-on-dark);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.profile-glow-card:hover .caption,
.profile-glow-card:focus-within .caption { transform: translateY(0); opacity: 1; }
.profile-glow-card .caption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-sm);
}
.profile-glow-card .caption span {
  display: block;
  font-size: var(--size-body-sm);
  color: var(--color-on-dark-mute);
  margin-top: 2px;
}
.profile-glow-card .sci {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.profile-glow-card .sci a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-dark);
  transition: background 0.25s ease, color 0.25s ease;
}
.profile-glow-card .sci a svg { width: 16px; height: 16px; fill: currentColor; }
.profile-glow-card .sci a:hover { background: var(--color-brand-yellow); color: var(--color-canvas-dark); }

/* ---------- Video feature (same gradient-glow frame as .profile-glow-card) ---------- */
.video-feature {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}
.video-feature::before,
.video-feature::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(315deg, var(--color-primary), var(--color-brand-yellow));
}
.video-feature::before { z-index: 0; }
.video-feature::after { z-index: -1; filter: blur(30px); opacity: 0.75; }
.video-feature .frame {
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  background: var(--color-canvas-dark);
}
.video-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-feature iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Testimonials (adapted from uiverse.io/gharsh11032000/tidy-termite-70) ---------- */
.testimonial-card {
  position: relative;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xxl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 280px;
  box-shadow: 0 0 0 0 var(--color-primary);
  transition: box-shadow 0.48s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.48s cubic-bezier(0.23, 1, 0.32, 1), transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial-card:hover {
  box-shadow: 8px 8px 0 0 var(--color-primary);
  border-color: var(--color-primary);
  transform: translate(-8px, -8px);
}
.testimonial-card .testimonial-name { font-style: normal; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading-sm); color: var(--color-ink); }
.testimonial-card .testimonial-role { font-size: var(--size-body-sm); color: var(--color-mute); margin-top: 2px; }
.testimonial-card .quotes { width: 36px; height: 36px; opacity: 0.9; }
.testimonial-card .quotes path { fill: var(--color-primary); }
.testimonial-card p { font-size: var(--size-body-lg); line-height: var(--lh-body-lg); color: var(--color-ink); opacity: 0.85; }
.testimonial-card .footer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.testimonial-card .review-link {
  position: relative;
  align-self: flex-start;
  font-family: inherit;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: var(--size-body-md);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  overflow: hidden;
}
.testimonial-card .review-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 112%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.64s cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial-card .review-link:hover::before { transform: scaleX(1); transform-origin: left; }
.testimonial-card .review-link:active { opacity: 0.8; }

/* ---------- Step cards ---------- */
/* Dark backdrop so the hover-lift's translate() doesn't expose the light
   band behind it. flex-direction:column stretches .step-card to fill the
   frame's full width by default; flex:1 on .step-card (below) makes it fill
   the height too — without that, CSS Grid stretches this frame to match the
   tallest card in the row, but the inner .step-card only sized to its own
   text, leaving a mismatched sliver of the frame showing under shorter cards. */
.step-card-frame { display: flex; flex-direction: column; background: var(--color-canvas-dark); border-radius: var(--radius-lg); }
.step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
  color: var(--color-on-dark);
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 var(--color-primary);
  transition: box-shadow 0.48s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.48s cubic-bezier(0.23, 1, 0.32, 1), transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
.step-card:hover {
  box-shadow: 8px 8px 0 0 var(--color-primary);
  border-color: var(--color-primary);
  transform: translate(-8px, -8px);
}
.step-card .num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
  color: var(--color-brand-yellow);
}
.step-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-md);
}
.step-card p { font-size: var(--size-body-md); line-height: var(--lh-body-md); color: var(--color-on-dark-mute); }

/* ---------- Accordion (native details/summary) ---------- */
.accordion { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.accordion-item {
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.accordion-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-sm);
  color: var(--color-ink);
  min-height: 44px;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-mute);
  transition: transform var(--ease);
}
.accordion-item[open] summary .icon { transform: rotate(45deg); }
.accordion-item .accordion-body {
  padding: 0 24px 24px;
  font-size: var(--size-body-md);
  line-height: var(--lh-body-md);
  color: var(--color-mute);
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
}
.cta-band .container {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span, .field > label { font-size: var(--size-body-sm); color: var(--color-mute); }
.field input, .field select, .field textarea {
  background: var(--color-canvas-light);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  min-height: 56px;
  font-size: var(--size-body-md);
  font-family: var(--font-body);
  outline: none;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-status { font-size: var(--size-body-md); min-height: 1.5em; }
.form-status[data-state="success"] { color: var(--color-accent-light-green); }
.form-status[data-state="error"] { color: var(--color-accent-danger); }

/* ---------- Contact layout ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.contact-form-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
}
.contact-side { display: flex; flex-direction: column; gap: 24px; }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.clinic-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-heading-md); color: var(--color-ink); }
.hours-list { display: flex; flex-direction: column; gap: 6px; }
.hours-list dt, .hours-list dd { margin: 0; font-size: var(--size-body-sm); color: var(--color-mute); }
.hours-row { display: flex; justify-content: space-between; gap: 24px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-canvas-dark);
  color: var(--color-on-dark-mute);
  padding: 80px 0;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-columns h2 {
  color: var(--color-on-dark);
  font-weight: 600;
  font-size: var(--size-body-sm);
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col span { font-size: var(--size-body-sm); color: var(--color-on-dark-mute); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.footer-col a:hover { color: var(--color-on-dark); }
.footer-col p { font-size: var(--size-body-sm); line-height: var(--lh-body-sm); color: var(--color-on-dark-mute); margin: 0; }
.footer-bottom {
  max-width: var(--container-max);
  margin: 48px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--color-hairline-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { font-size: var(--size-caption); color: var(--color-on-dark-mute); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-on-dark); }
.footer-mark { width: 28px; height: 28px; overflow: hidden; display: inline-flex; align-items: center; flex-shrink: 0; }
.footer-mark img { height: 28px; width: auto; max-width: none; opacity: 0.9; }
.footer-bottom span { font-size: var(--size-caption); color: var(--color-on-dark); }

/* ---------- Mobile nav drawer ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: min(320px, 86vw);
  background: var(--color-canvas-dark);
  color: var(--color-on-dark);
  z-index: 50;
  transition: right 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  overflow-y: auto;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
body.nav-open .nav-drawer { right: 0; }
body.nav-open { overflow: hidden; }
.nav-drawer-top { display: flex; justify-content: flex-end; }
.nav-drawer-close {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--color-on-dark);
}
.nav-drawer-close svg { width: 22px; height: 22px; }
.nav-drawer-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.nav-drawer-links a {
  color: var(--color-on-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-heading-sm);
  padding: 12px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-drawer .btn { margin-top: 16px; }

/* ---------- Scroll reveal ---------- */
/* Gated behind .js-reveal-ready (set only when IntersectionObserver exists)
   so content stays visible if JS fails to load — never hidden by default. */
/* Uses the standalone `translate` property (not `transform`) for the
   entrance offset, so it never competes with a component's own :hover
   `transform` (e.g. .feature-card--neu:hover translateY) — the two apply
   independently and compose. Mixing this with `transform` for the offset
   caused every card's hover lift/shift to go dead once scrolled into view.
   The transition list below also repeats each card's own hover-transition
   properties (box-shadow/border-color/transform): this selector's higher
   specificity than e.g. `.feature-card` means its `transition` shorthand
   otherwise fully replaces — not merges with — the card's own, silently
   dropping those properties from the transition list and making hover snap
   instead of animate on any element that carries [data-reveal] directly. */
/* The stagger delay lives in --stagger-delay and is only wired into the
   opacity/translate terms below — box-shadow/border-color/transform keep an
   explicit 0s delay. A plain `transition-delay: Xms` here would apply to
   every property in the list, including hover's, making a card's hover
   response lag by however much its entrance was staggered. */
.js-reveal-ready [data-reveal] {
  --stagger-delay: 0ms;
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger-delay), translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger-delay), box-shadow 0.48s cubic-bezier(0.23, 1, 0.32, 1) 0s, border-color 0.48s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.48s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.js-reveal-ready [data-reveal].is-visible { opacity: 1; translate: 0 0; }
.card-grid > [data-reveal]:nth-child(1) { --stagger-delay: 0ms; }
.card-grid > [data-reveal]:nth-child(2) { --stagger-delay: 90ms; }
.card-grid > [data-reveal]:nth-child(3) { --stagger-delay: 180ms; }
.card-grid > [data-reveal]:nth-child(4) { --stagger-delay: 270ms; }
.card-grid > [data-reveal]:nth-child(5) { --stagger-delay: 360ms; }
.card-grid > [data-reveal]:nth-child(6) { --stagger-delay: 450ms; }
.stat-grid > [data-reveal]:nth-child(1) { --stagger-delay: 0ms; }
.stat-grid > [data-reveal]:nth-child(2) { --stagger-delay: 80ms; }
.stat-grid > [data-reveal]:nth-child(3) { --stagger-delay: 160ms; }
.stat-grid > [data-reveal]:nth-child(4) { --stagger-delay: 240ms; }
.stat-grid > [data-reveal]:nth-child(5) { --stagger-delay: 320ms; }
.stat-grid > [data-reveal]:nth-child(6) { --stagger-delay: 400ms; }
.accordion > [data-reveal]:nth-child(1) { --stagger-delay: 0ms; }
.accordion > [data-reveal]:nth-child(2) { --stagger-delay: 60ms; }
.accordion > [data-reveal]:nth-child(3) { --stagger-delay: 120ms; }
.accordion > [data-reveal]:nth-child(4) { --stagger-delay: 180ms; }
.accordion > [data-reveal]:nth-child(5) { --stagger-delay: 240ms; }
.accordion > [data-reveal]:nth-child(6) { --stagger-delay: 300ms; }
.accordion > [data-reveal]:nth-child(7) { --stagger-delay: 360ms; }
.accordion > [data-reveal]:nth-child(8) { --stagger-delay: 420ms; }

/* ---------- Stat strip (by-the-numbers) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; gap: 8px; }
.stat-number {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-display-md);
  color: var(--color-brand-yellow);
}
.stat-label {
  font-size: var(--size-body-sm);
  color: var(--color-on-dark-mute);
}

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .primary-nav, .header-cta { display: none; }
  .hamburger { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; position: relative; }
  .hero-grid .product-mockup,
  .hero-grid .profile-glow-card { order: -1; }
  /* Homepage hero only: the device video drops behind the text as a dimmed,
     full-bleed backdrop instead of its own stacked block, so the headline and
     CTAs read first and the whole hero fits one mobile screen without scrolling. */
  .hero:has(.hero-media) { padding: 40px 0 32px; }
  .hero-grid .hero-media {
    order: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    opacity: 0.32;
  }
  /* Show the whole square frame (its black margins vanish into the page) instead of center-cropping the device */
  .hero-grid .hero-media video { object-fit: contain; object-position: center; }
  .hero-grid .hero-copy { position: relative; z-index: 1; }
  /* The long-form CTA label ("Schedule Your SoftWave Consultation") is wider
     than any phone screen at btn--lg size with nowrap; let it wrap and take
     the full row instead of overflowing past the viewport edge. */
  .hero-actions .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; }
  .btn--lg { height: auto; min-height: 56px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .footer-columns { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-tabs .tabs { height: auto; min-height: var(--height); grid-auto-columns: minmax(0, 1fr); }
  .compare-tabs .tabs .label { padding: 8px 4px; font-size: 0.75rem; line-height: 1.2; overflow-wrap: anywhere; }
  section.section { padding: var(--space-block) 0; }
  section.section-band { padding: 64px 0; }
}

@media (max-width: 430px) {
  .site-header { padding: 0 16px; gap: 8px; }
  .hamburger { flex-shrink: 0; }
  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-mark img { height: 30px; max-width: none; }
  .brand-name { font-size: var(--size-body-sm); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}