/* Inkoff 2026 - Custom Styles */
/* Brand: Teal #008080, Navy #2c3e50, Red #ff4747, White #fff, Gray #6f8090 */
/* Typography: Inter (unified) */

:root {
  /* Brand Colours */
  --primary: #008080;
  --primary-dark: #006666;
  --primary-light: #a0d7e7;
  --secondary: #2c3e50;
  /* P16.2 fix: booking-chip/panel rules shipped referencing --teal/--navy,
     which were never defined — active chips rendered white-on-transparent.
     Alias them to the brand tokens rather than rewriting every rule. */
  --teal: #008080;
  --navy: #2c3e50;
  --card-border: #d4d4d4;
  --body-text: #46586a;
  --cta: #e02b2b;
  --cta-hover: #c81e1e;
  --cta-light: #fff0f0;
  /* Surfaces */
  --bg: #ffffff;
  --bg-white: #ffffff;
  --bg-warm: #f5f5dc;
  --bg-pale: #eeeeee;
  --bg-lavender: #e6e6fa;
  /* Text */
  --text: #46586a;
  --text-light: #5a6b7b;
  --text-lighter: #64748b;
  --text-heading: #2c3e50;
  /* Borders & States */
  --border: #d3d3d3;
  --success: #15803d;
  --success-light: #f0fdf4;
  --error: #ff4c4c;              /* borders/accents only — fails AA as text */
  --error-text: #c81e1e;         /* P16.7 UX F-1: 3.29:1 → 5.9:1 on white for error COPY */
  --focus-ring: #006666;         /* P16.7 UX F-3: primary-light ring measured 1.57:1 vs page */
  /* Accents */
  --soft-blue: #a0d7e7;
  --mint: #98ff98;
  --coral: #f08080;
  --dusty-rose: #dcae96;
  --gold: #f9e79f;
  --lavender: #e6e6fa;
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  /* Layout */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --transition: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Global fixed-nav offset: no heading or anchor target may ever clip under
   the 72px fixed header (P9 — protects every page, incl. /guarantee-conditions). */
#main { scroll-margin-top: 134px; } /* UX P2-12 */
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; scroll-padding-top: 134px; /* P16.4 UX review P0-4: nav 72 + address bar 50 + 12 breathing room */ }
[id] { scroll-margin-top: 96px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-heading);
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

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

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Skip Link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: 0.75rem 1.5rem; background: var(--primary); color: #fff;
  font-weight: 600; border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.skip-link:focus { left: 50%; transform: translateX(-50%); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 2rem; font-family: 'Inter', sans-serif; font-size: 1rem;
  font-weight: 700; border: none; border-radius: 6px; cursor: pointer;
  transition: all var(--transition); text-decoration: none; line-height: 1.2;
  min-height: 48px; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.btn-primary {
  background: var(--cta); color: #fff;
  box-shadow: 0 2px 8px rgb(255 71 71 / 0.3);
}
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgb(255 71 71 / 0.4); color: #fff; }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-white); color: var(--primary); border: 1px solid #d4d4d4;
}
.btn-secondary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn-ghost {
  background: transparent; color: var(--primary); padding: 0.75rem 1.5rem;
}
.btn-ghost:hover { background: rgb(0 128 128 / 0.08); }

.btn-lg { padding: 1.25rem 3rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; min-height: 40px; }

/* Navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); transition: all 300ms ease;
}
.nav.scrolled { box-shadow: var(--shadow-md); }
/* 3-zone header: logo | links | phone + one Book CTA. Nothing wraps (P9). */
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 72px;
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-right: 0.75rem; }
.nav-logo-text { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--secondary); }
.nav-logo-text span { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a { color: var(--text); font-weight: 500; font-size: 0.9375rem; transition: color var(--transition); white-space: nowrap; flex-shrink: 0; }
.nav-links a:hover { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nav-cta .btn { white-space: nowrap; }
.nav-phone { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.nav-phone svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
/* Hamburger toggle — base state hidden. MUST be declared BEFORE the
   collapse media query below, otherwise (media queries add no specificity)
   this later rule wins at every width and the hamburger never shows,
   leaving a no-nav dead zone under 1220px (P10 root-cause fix). */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.mobile-toggle svg { width: 28px; height: 28px; color: var(--text); }

/* Single breakpoint: the moment the full nav hides, the hamburger appears —
   so a working menu exists at EVERY width (no dead zone). */
@media (max-width: 1220px) {
  .nav-links, .nav-cta .nav-phone { display: none; }
  .mobile-toggle { display: block; }
}
@media (max-width: 640px) {
  /* mobile menu + sticky CTA carry the Book action on small screens */
  .nav-cta .nav-book { display: none; }
  /* P17.2: the hero no longer reserves space for the sticky CTA — the bar is
     hidden at first paint and only revealed by JS after the user scrolls past
     the form, so there is nothing to reserve against. (The old rule reserved
     69px; index.html's own page-scoped rule reserved 76px for the same bar —
     both deleted.) */
}

.mobile-menu {
  /* NOTE: .nav has backdrop-filter, which makes it the containing block for
     this position:fixed child — so `bottom:0` would resolve to the 72px-tall
     nav box and collapse the menu (P10 fix). Use an explicit height instead so
     the panel always fills the screen below the header and fully covers the
     page (no content bleed-through). */
  display: none; position: fixed; top: 72px; left: 0; right: 0;
  height: calc(100vh - 72px); height: calc(100dvh - 72px);
  background: var(--bg-white); z-index: 999; padding: 1.5rem;
  flex-direction: column; gap: 0.5rem; overflow-y: auto;
}
.mobile-menu.active { display: flex; }
.mobile-menu a {
  display: block; padding: 1rem; font-size: 1.125rem; font-weight: 500;
  color: var(--text); border-radius: var(--radius-md);
}
.mobile-menu a:hover { background: var(--bg); color: var(--primary); }
/* UX P1-5: footer links and the header client link were 16–32px tall — below
   the 44px touch minimum. Flex-centre them to a real target height. */
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
/* P16.2: .mobile-menu a (0,1,1) outranks .btn/.btn-primary (0,1,0) on display
   AND color, so the CTA rendered as dark text overflowing the red box (Alex
   iPhone screenshot 2026-08-12). Re-assert the full button treatment at higher
   specificity. */
.mobile-menu a.btn.btn-primary {
  display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; height: auto; min-height: 48px;
  color: #fff; padding: 0.875rem 1.25rem;
}
.mobile-menu a.btn.btn-primary:hover { background: var(--cta-hover); color: #fff; }
/* P16.5 (Alex): two-button stack at the top of the mobile menu — the
   existing-client booking is a proper secondary button under the red CTA,
   not a buried menu link. */
.mobile-menu a.btn.menu-book-btn { margin: 0; }
.mobile-menu a.btn.menu-book-btn--client {
  display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; height: auto; min-height: 48px;
  background: var(--bg-white); color: var(--primary);
  border: 2px solid var(--primary); padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
}
.mobile-menu a.btn.menu-book-btn--client:hover,
.mobile-menu a.btn.menu-book-btn--client:focus {
  background: var(--primary); color: #fff;
}

/* Hero */
.hero {
  padding: 8rem 0 5rem; background: linear-gradient(135deg, #f7f9fa 0%, #e6f2f2 50%, #f7f9fa 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgb(0 128 128 / 0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
  background: var(--success-light); border: 1px solid rgb(22 163 74 / 0.2);
  border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600;
  color: var(--success); margin-bottom: 1.5rem;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 1.5rem; letter-spacing: -0.02em; font-weight: 800; }
.hero h1 .highlight { color: var(--primary); }
.hero p { font-size: 1.1875rem; color: var(--text-light); margin-bottom: 2rem; max-width: 520px; line-height: 1.7; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-trust { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-light); }
.hero-trust-item svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.hero-image {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-xl); aspect-ratio: 4/3;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image-badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  padding: 0.75rem 1rem; border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow-md);
}
.hero-image-badge .stars { color: #FBBF24; }

/* Trust Bar */
.trust-bar { padding: 3rem 0; background: var(--bg-white); border-bottom: 1px solid var(--border); }
.trust-bar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; text-align: center; }
.trust-bar-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.trust-bar-number { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 800; color: var(--primary); }
.trust-bar-label { font-size: 0.875rem; color: var(--text-light); font-weight: 500; }

/* Section defaults */
.section { padding: 5rem 0; }
.section-alt { background: var(--bg-white); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.section-header h2 { font-size: 2.75rem; margin-bottom: 1rem; font-weight: 700; }
.section-header p { font-size: 1.0625rem; color: var(--text-light); }
.section-tag {
  display: inline-block; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--primary); margin-bottom: 0.75rem;
}

/* Features / Why Inkoff */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card {
  padding: 2rem; background: var(--bg-white); border: 1px solid #d4d4d4;
  border-radius: 8px; transition: all var(--transition);
}
.feature-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgb(0 128 128 / 0.08); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.feature-icon svg { width: 24px; height: 24px; color: var(--primary); }
.feature-card h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.feature-card p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.65; }

/* Technology */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.tech-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.tech-image img { width: 100%; }
.tech-content h2 { font-size: 2.25rem; margin-bottom: 1.25rem; }
.tech-content p { color: var(--text-light); margin-bottom: 1.5rem; font-size: 1.0625rem; line-height: 1.7; }
.tech-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.tech-stat { text-align: center; padding: 1.25rem; background: var(--bg); border-radius: var(--radius-md); }
.tech-stat-number { font-family: 'Inter', sans-serif; font-size: 1.75rem; font-weight: 800; color: var(--primary); }
.tech-stat-label { font-size: 0.8125rem; color: var(--text-light); margin-top: 0.25rem; }

/* Before/After Comparison Sliders */
.ba-comparisons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem;
}
.ba-compare-card {
  border-radius: 8px; overflow: hidden;
  background: var(--bg-white); border: 1px solid #d4d4d4;
  transition: all var(--transition);
}
.ba-compare-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.ba-compare-slider {
  position: relative; overflow: hidden; cursor: ew-resize;
  aspect-ratio: 16/10; user-select: none; -webkit-user-select: none;
}
.ba-compare-slider picture,
.ba-compare-slider img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.ba-compare-slider picture img {
  position: relative;
}
.ba-img-after { clip-path: inset(0 50% 0 0); }
picture:has(.ba-img-after) { clip-path: inset(0 50% 0 0); }
.ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); z-index: 2; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.ba-slider-line {
  width: 3px; flex: 1; background: #fff;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.3);
}
.ba-slider-btn {
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--primary);
}
.ba-slider-btn svg { width: 14px; height: 14px; }
.ba-compare-slider::before, .ba-compare-slider::after {
  position: absolute; top: 0.75rem; z-index: 3;
  font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-full);
  pointer-events: none;
}
.ba-compare-slider::before {
  content: attr(data-after); left: 0.75rem;
  background: var(--primary); color: #fff;
}
.ba-compare-slider::after {
  content: attr(data-before); right: 0.75rem;
  background: rgb(0 0 0 / 0.6); color: #fff;
}
/* Real Client badge */
.ba-real-badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 4;
  background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.625rem;
  border-radius: 4px;
}
.ba-compare-info { padding: 1.25rem; }
.ba-compare-info h3, .ba-compare-info h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.ba-compare-info p { font-size: 0.8125rem; color: var(--text-light); }

/* Real Client Photo heading */
.ba-real-heading {
  text-align: center; font-size: 1.25rem; margin-bottom: 1.5rem;
  color: var(--text-light); font-weight: 600;
}

/* Before/After Real Photos Grid */
.ba-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ba-card { border-radius: 8px; overflow: hidden; background: var(--bg-white); border: 1px solid #d4d4d4; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ba-images { position: relative; }
.ba-images img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba-info { padding: 1.25rem; }
.ba-info h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.ba-info p { font-size: 0.875rem; color: var(--text-light); }

/* Clinic Gallery */
.clinic-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.clinic-gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--secondary);
}
.clinic-gallery-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.clinic-gallery-item:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}
.clinic-gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pricing-card {
  padding: 2rem; background: var(--bg-white); border: 1px solid #d4d4d4;
  border-radius: 8px; position: relative; transition: all var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pricing-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-lg); }
.pricing-card.featured { border-color: var(--primary); }
.pricing-card.featured::before {
  content: 'Most Popular'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: 0.8125rem; font-weight: 700;
  padding: 0.375rem 1rem; border-radius: var(--radius-full);
}
.pricing-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.5rem; }
.pricing-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.5rem; }
.pricing-amount { font-family: 'Inter', sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--secondary); }
.pricing-period { font-size: 1rem; color: var(--text-light); }
.pricing-desc { font-size: 0.875rem; color: var(--text-light); margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.pricing-features { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--text); }
.pricing-features svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* Process / How it works */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; }
.process-grid::before {
  content: ''; position: absolute; top: 32px; left: 10%; right: 10%; height: 2px;
  background: var(--border); z-index: 0;
}
.process-step { text-align: center; position: relative; z-index: 1; }
.process-number {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
  box-shadow: 0 4px 12px rgb(0 128 128 / 0.3);
}
.process-step h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.process-step p { font-size: 0.875rem; color: var(--text-light); line-height: 1.6; max-width: 220px; margin: 0 auto; }

/* Guarantee Section */
.guarantee {
  padding: 5rem 0; background: #f5f5f5;
  position: relative; overflow: hidden;
}
.guarantee::before { display: none; }
.guarantee-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.guarantee-content {
  background: #fff; border-left: 4px solid var(--primary); border-radius: 8px;
  padding: 2.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.guarantee h2 { font-size: 2.5rem; color: var(--text-heading); margin-bottom: 1.25rem; }
.guarantee h2 .highlight { color: var(--cta); }
.guarantee p { color: var(--text); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.5rem; }
.guarantee-points { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.guarantee-points li {
  display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; color: var(--text-heading);
  /* P16.6: the label is inline flow (no wrapped column beside the sentence) —
     the old flex-centred strong collapsed into a ragged two-column look on
     narrow screens (Alex: "amateurish"). */
  line-height: 1.5;
}
.guarantee-points li strong { display: inline; }
.guarantee-points svg { width: 22px; height: 22px; color: var(--cta); flex-shrink: 0; margin-top: 0.15rem; }
.guarantee-badge {
  background: #fff; border: 1px solid #d4d4d4;
  border-radius: 8px; padding: 2.5rem; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.guarantee-shield { width: 80px; height: 80px; margin: 0 auto 1.5rem; }
.guarantee-badge h3 { font-size: 1.5rem; color: var(--text-heading); margin-bottom: 0.75rem; }
.guarantee-badge p { color: var(--text); font-size: 0.9375rem; }
.guarantee-math {
  background: #fff7f7; border: 1px solid rgb(255 71 71 / 0.2); border-radius: 8px;
  padding: 1.5rem; margin-top: 1.5rem; text-align: center;
}
.guarantee-math strong { color: var(--cta); font-size: 1.125rem; }
.guarantee-math p { color: var(--text); font-size: 0.875rem; margin-bottom: 0; }

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.testimonial-card {
  padding: 2rem; background: var(--bg-white); border: 1px solid #d4d4d4;
  border-radius: 8px; position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.testimonial-card::before {
  content: '\201C'; position: absolute; top: 1rem; right: 1.5rem;
  font-size: 4rem; line-height: 1; color: #e8e8e8; font-family: Georgia, serif;
}
.testimonial-stars { display: flex; gap: 0.125rem; color: #FBBF24; margin-bottom: 1rem; }
.testimonial-stars svg { width: 18px; height: 18px; }
.testimonial-card blockquote { font-size: 0.9375rem; color: var(--text); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1rem;
}
.testimonial-info { font-size: 0.875rem; }
.testimonial-name { font-weight: 600; color: var(--text); }
.testimonial-location { color: var(--text-light); }

/* FAQ */
.faq-list { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: var(--bg-white); border: 1px solid #d4d4d4; border-radius: 8px; overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 1.0625rem; font-weight: 600;
  color: var(--text); text-align: left; gap: 1rem; min-height: 48px;
}
.faq-question:hover { color: var(--primary); }
.faq-question:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition); color: var(--text-light); }
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; color: var(--text-light); line-height: 1.7; display: none; }
.faq-item.active .faq-answer { display: block; }

/* CTA Section */
.cta-section {
  padding: 5rem 0; background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
  text-align: center;
}
.cta-section h2 { font-size: 2.25rem; margin-bottom: 1rem; }
.cta-section p { font-size: 1.0625rem; color: var(--text-light); margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cta-note { font-size: 0.875rem; color: var(--text-light); }

/* Footer */
.footer { padding: 4rem 0 2rem; background: var(--secondary); color: rgb(255 255 255 / 0.7); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-brand p { font-size: 0.9375rem; line-height: 1.7; margin-top: 1rem; }
.footer h3 { color: #fff; font-size: 0.9375rem; margin-bottom: 1.25rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a { color: rgb(255 255 255 / 0.6); font-size: 0.9375rem; transition: color var(--transition); display: inline-block; padding: 0.25rem 0; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.8125rem; color: rgb(255 255 255 / 0.75);
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-grid, .tech-grid, .guarantee-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { font-size: 2.75rem; }
  .features-grid, .pricing-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .ba-comparisons { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .clinic-gallery { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero { padding: 6rem 0 3rem; }
  .hero h1 { font-size: 2rem; }
  .section { padding: 3.5rem 0; }
  .section-header h2 { font-size: 2rem; }
  .features-grid, .pricing-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .ba-comparisons { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .clinic-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  .guarantee h2 { font-size: 1.75rem; }
  .guarantee-content { padding: 1.5rem; }
  .hero-image { order: -1; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; }
}

/* ===== Quick Actions Bar ===== */
.quick-actions {
  padding: 2.5rem 0;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  transition: all var(--transition);
  text-decoration: none;
  gap: 0.5rem;
}
.quick-action-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}
.quick-action-card svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  flex-shrink: 0;
}
.quick-action-card strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.3;
}
.quick-action-card span {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ===== Care Summary Section ===== */
.care-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.care-card {
  padding: 2rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.care-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.care-card-header svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  flex-shrink: 0;
}
.care-card-header h3 {
  font-size: 1.25rem;
}
.care-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.care-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.6;
}
.care-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* Quick Actions responsive */
@media (max-width: 1024px) {
  .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { padding: 1.5rem 0; }
  .care-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .quick-action-card { padding: 1rem 0.5rem; }
  .quick-action-card strong { font-size: 0.8125rem; }
}

/* ===== Parallax & Decorative Elements ===== */

/* Floating background shapes */
.parallax-shapes {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.parallax-shape {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: floatIn 0.8s ease-out forwards;
}
.parallax-shape--circle {
  border: 2px solid rgb(0 128 128 / 0.12);
}
.parallax-shape--dot {
  background: rgb(0 128 128 / 0.10);
}
.parallax-shape--ring {
  border: 2px solid rgb(160 215 231 / 0.20);
  background: transparent;
}
.parallax-shape--gradient {
  background: radial-gradient(circle, rgb(0 128 128 / 0.08) 0%, transparent 70%);
  filter: blur(40px);
}
.parallax-shape--cross {
  width: 20px !important; height: 20px !important; border-radius: 0 !important;
  background: none !important; border: none !important;
}
.parallax-shape--cross::before, .parallax-shape--cross::after {
  content: ''; position: absolute; background: rgb(0 128 128 / 0.15);
}
.parallax-shape--cross::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.parallax-shape--cross::after { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}
@keyframes floatMedium {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-2deg); }
}
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.parallax-shape[data-float="slow"] { animation: floatIn 0.8s ease-out forwards, floatSlow 8s ease-in-out infinite 0.8s; }
.parallax-shape[data-float="medium"] { animation: floatIn 0.8s ease-out forwards, floatMedium 6s ease-in-out infinite 0.8s; }
.parallax-shape[data-float="pulse"] { animation: floatIn 0.8s ease-out forwards, pulseSoft 5s ease-in-out infinite 0.8s; }

/* Section divider waves */
.section-wave {
  position: relative; overflow: hidden;
}
.section-wave::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  background: var(--bg-white);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.section-wave--reverse::after {
  top: -1px; bottom: auto;
  background: var(--bg);
  clip-path: ellipse(55% 100% at 50% 0%);
}
.section-wave--teal::after { background: var(--bg); }

/* Ensure section content sits above parallax shapes */
.hero > .container,
.section > .container,
.section-alt > .container,
.guarantee > .container,
.cta-section > .container,
.form-section > .container {
  position: relative; z-index: 1;
}

/* Hero enhanced */
.hero::after {
  content: ''; position: absolute; bottom: -50%; left: -20%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgb(255 76 76 / 0.04) 0%, transparent 70%);
  border-radius: 50%;
}

/* Subtle gradient mesh on sections */
.section { position: relative; overflow: hidden; }
.section-alt { position: relative; overflow: hidden; }

/* ===== Background Image Parallax Sections ===== */

/* Parallax background image — fixed attachment creates depth effect */
.bg-parallax {
  position: relative;
}
.bg-parallax::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.06;
}
/* iOS doesn't support background-attachment: fixed — fallback to scroll */
@supports (-webkit-touch-callout: none) {
  .bg-parallax::before { background-attachment: scroll; }
}

/* Real laser room parallax bg for process section.
   P16.8: opacity alone was tuned against a BLURRED video frame, which was
   inherently low-contrast. The reshot photo is sharp, so at the same opacity its
   hard edges (chair back, laser housing) read as competing shapes behind the body
   copy. Desaturating and flattening contrast restores the intended "texture, not
   picture" effect without darkening the section. */
.bg-parallax--clinic::before {
  background-image: url('../images/laser-room-bg.webp');
  opacity: 0.07;
  filter: grayscale(0.72) contrast(0.62);
}

/* Real storefront parallax bg for location section — the WIDE crop: this is a
   full-bleed background, so the 3:4 tile version would crop to the door alone. */
.bg-parallax--street::before {
  background-image: url('../images/storefront-wide.webp');
  opacity: 0.09;
  filter: grayscale(0.72) contrast(0.62); /* see --clinic above */
}

/* ===== Subtle Background Patterns ===== */

/* Dot grid pattern */
.bg-dots {
  position: relative;
}
.bg-dots::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(0 128 128 / 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Gradient mesh — subtle color washes */
.bg-mesh {
  position: relative;
}
.bg-mesh::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 10% 20%, rgb(0 128 128 / 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 90% 80%, rgb(160 215 231 / 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgb(255 71 71 / 0.03) 0%, transparent 70%);
}

/* Diagonal lines pattern */
.bg-lines::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 40px,
    rgb(0 128 128 / 0.04) 40px,
    rgb(0 128 128 / 0.04) 41px
  );
}

/* ===== Decorative Gradient Blobs ===== */
.deco-blob {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.deco-blob--teal {
  background: rgb(0 128 128 / 0.10);
}
.deco-blob--red {
  background: rgb(255 71 71 / 0.08);
}
.deco-blob--blue {
  background: rgb(160 215 231 / 0.10);
}

/* ===== Unlimited Removal Banner ===== */
.unlimited-banner {
  padding: 4.5rem 0;
  background: linear-gradient(135deg, #006666 0%, #008080 40%, #00a3a3 100%);
  position: relative; overflow: hidden; color: #fff;
}
.unlimited-banner::before {
  content: ''; position: absolute; top: -150px; right: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.06) 0%, transparent 60%);
  border-radius: 50%;
}
.unlimited-banner::after {
  content: ''; position: absolute; bottom: -100px; left: -50px; width: 350px; height: 350px;
  background: radial-gradient(circle, rgb(255 76 76 / 0.08) 0%, transparent 60%);
  border-radius: 50%;
}
.unlimited-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}
.unlimited-tag {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600;
  color: #fff; margin-bottom: 1.5rem;
}
.unlimited-banner h2 { font-size: 2.5rem; color: #fff; margin-bottom: 1.25rem; line-height: 1.15; }
.unlimited-banner h2 .highlight { color: var(--gold); }
.unlimited-banner > .container p { color: rgb(255 255 255 / 0.8); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.5rem; }
.unlimited-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;
}
.unlimited-feature {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem;
  background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-md);
}
.unlimited-feature svg { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.unlimited-feature-text { font-size: 0.9375rem; }
.unlimited-feature-text strong { display: block; color: #fff; margin-bottom: 0.125rem; }
.unlimited-feature-text span { color: rgb(255 255 255 / 0.65); font-size: 0.8125rem; }
.unlimited-price-card {
  background: rgb(255 255 255 / 0.1); backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.15); border-radius: var(--radius-xl);
  padding: 2.5rem; text-align: center;
}
.unlimited-price-card .price-label {
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold); margin-bottom: 0.75rem;
}
.unlimited-price-card .price-amount {
  font-family: 'Inter', sans-serif; font-size: 3.5rem; font-weight: 800;
  color: #fff; line-height: 1; margin-bottom: 0.25rem;
}
.unlimited-price-card .price-period { color: rgb(255 255 255 / 0.65); font-size: 1rem; margin-bottom: 0.5rem; }
.unlimited-price-card .price-note {
  display: inline-block; padding: 0.375rem 1rem; border-radius: var(--radius-full);
  background: rgb(255 76 76 / 0.2); border: 1px solid rgb(255 76 76 / 0.3);
  color: #fff; font-size: 0.8125rem; font-weight: 600; margin-bottom: 1.5rem;
}
.unlimited-price-card .price-detail {
  font-size: 0.875rem; color: rgb(255 255 255 / 0.6); line-height: 1.6; margin-bottom: 1.5rem;
}
.unlimited-disclaimer {
  margin-top: 1rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.75);
  text-align: center; font-style: italic;
}

/* ===== Responsive additions ===== */
@media (max-width: 1024px) {
  .unlimited-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .unlimited-banner h2 { font-size: 2rem; }
}
@media (max-width: 768px) {
  .unlimited-features { grid-template-columns: 1fr; }
  .unlimited-banner h2 { font-size: 1.75rem; }
  .unlimited-price-card .price-amount { font-size: 2.75rem; }
  .parallax-shapes { display: none; }
  .section-wave::after { height: 30px; }
}

/* ===== Hero (teal gradient — brand aligned) ===== */
/* P16.8: the 0.88–0.92 wash was tuned to hide a generic AI room. The real clinic
   is now worth seeing, so the overlay is lifted to 0.80–0.87 and angled to stay
   densest behind the copy column (left) while thinning over the laser on the right.
   Text contrast is unchanged where it matters: the headline sits on the dense end.
   Do not raise the transparency further without re-checking a11y contrast. */
.hero-dark {
  padding: 9rem 0 4rem; position: relative; overflow: hidden;
  background: linear-gradient(115deg, rgb(0 102 102 / 0.93) 0%, rgb(0 128 128 / 0.86) 52%, rgb(0 102 102 / 0.78) 100%),
              url('../images/hero-laser-room.webp') center/cover no-repeat;
  color: #fff; position: relative; overflow: hidden;
}
.hero-dark::before {
  content: ''; position: absolute; top: -200px; right: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.06) 0%, transparent 70%); border-radius: 50%;
}
.hero-dark::after {
  content: ''; position: absolute; bottom: -200px; left: -100px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.04) 0%, transparent 70%); border-radius: 50%;
}
.hero-dark .container { position: relative; z-index: 1; }

/* Location Bar */
.location-bar {
  background: var(--primary-dark); color: rgb(255 255 255 / 0.85);
  text-align: center; font-size: 0.8125rem; padding: 0.5rem 0;
  font-weight: 500; letter-spacing: 0.02em;
  position: fixed; top: 72px; left: 0; right: 0; z-index: 999;
}
.location-bar a { color: rgb(255 255 255 / 0.85); }

/* Hero Guarantee Badge */
.hero-guarantee-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem;
  background: var(--cta); border-radius: 20px; font-size: 0.75rem; font-weight: 700;
  color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.5rem;
}

.hero-location {
  text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.6); margin-bottom: 1.5rem;
}
.hero-dark h1 {
  font-size: 3.5rem; font-weight: 800; color: #fff; text-align: center; max-width: 800px;
  margin: 0 auto 1.5rem; letter-spacing: -0.02em;
}
.hero-dark h1 .highlight { color: var(--cta); }
.hero-sub {
  text-align: center; color: #fff; /* UX P1-1: 0.7 alpha measured 3.39:1 on the hero gradient */ font-size: 1.125rem;
  max-width: 600px; margin: 0 auto 2rem; line-height: 1.7;
}
.hero-badges {
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.hero-badge-item {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgb(255 255 255 / 0.85); font-size: 0.9375rem; font-weight: 500;
}
.hero-badge-item svg { width: 20px; height: 20px; color: var(--cta); }
.hero-cta-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.btn-outline-light {
  background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / 0.3);
  padding: 0.875rem 2rem; border-radius: 6px; font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: all var(--transition);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-outline-light:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.5); color: #fff; }

/* ===== Price Comparison Table ===== */
.price-compare-wrapper {
  max-width: 700px; margin: 3rem auto 0; text-align: center;
}
.price-compare-title {
  font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--secondary);
}
.table-scroll-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
}
.lp-compare-table {
  width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; min-width: 420px;
}
.lp-compare-table th, .lp-compare-table td {
  padding: 1rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border);
}
.lp-compare-table th {
  background: var(--bg); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light);
}
.lp-compare-table td { font-size: 0.9375rem; }
.lp-compare-table .inkoff-price { font-weight: 700; color: var(--primary); }
.lp-compare-table .save { font-weight: 700; color: var(--success); }
.price-compare-note {
  font-size: 0.8125rem; color: var(--text-lighter); text-align: center;
}

/* ===== Form Section ===== */
.form-section {
  padding: 4rem 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgb(0 128 128 / 0.90) 0%, rgb(0 102 102 / 0.93) 100%),
              url('../images/waiting-room-bg.webp') center/cover no-repeat;
}
/* P17 Phase 1: ONE form-box component, sitewide. The four LP pages and
   moneyback previously carried near-duplicate .lp-form-box blocks in their
   page <style> tags, and guarantee.html added a bespoke 460px
   .lp-hero-form-box — the drift is what made /lp/guarantee read "thinner".
   All three class names stay live forever: the 640px mobile-gutter rule below
   (body .form-box, body .lp-form-box, …) lists them by name. */
.form-box, .lp-form-box, .lp-hero-form-box {
  max-width: 560px; margin: 0 auto; background: var(--bg-white);
  border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow-lg);
}
.form-box h2, .lp-form-box h2, .lp-hero-form-box h2 { font-size: 1.5rem; text-align: center; margin-bottom: 0.75rem; }
.form-box > p, .lp-form-box > p, .lp-hero-form-box > p { text-align: center; color: var(--text-light); font-size: 0.9375rem; margin-bottom: 1.5rem; }
/* The guarantee hero variant is the SAME component at a narrower measure —
   only the outer box and heading size differ; fields, trust row, button and
   footer are inherited identically to every other form. */
.lp-hero-form-box { max-width: 460px; padding: 1.75rem; }
.lp-hero-form-box h2 { font-size: 1.1875rem; }
.form-trust, .lp-form-trust, .lp-hero-form-trust {
  display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem;
  font-size: 0.8125rem; color: var(--text-light); flex-wrap: wrap;
}
.form-trust span, .lp-form-trust span, .lp-hero-form-trust span { display: flex; align-items: center; gap: 0.375rem; }
.form-trust svg, .lp-form-trust svg, .lp-hero-form-trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-size: 0.875rem; font-weight: 600;
  color: var(--text); margin-bottom: 0.375rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); font-family: 'Inter', sans-serif;
  font-size: 1rem; color: var(--text); background: var(--bg-white);
  transition: border-color var(--transition); min-height: 48px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgb(0 128 128 / 0.1);
}
.form-optional { font-weight: 400; color: var(--text-lighter); }
.form-submit { width: 100%; margin-top: 0.5rem; }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.form-privacy {
  text-align: center; font-size: 0.8125rem; color: var(--text-lighter);
  margin-top: 1rem; line-height: 1.6;
}
.lp-callblock { text-align: center; margin-top: 2rem; }
.lp-callblock p { font-size: 0.9375rem; color: var(--text-light); }
.lp-hours { font-size: 0.8125rem; color: var(--text-lighter); margin-top: 0.5rem; }
.input-error {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgb(255 76 76 / 0.1) !important;
}
.form-error {
  display: block; font-size: 0.8125rem; color: var(--error-text);
  margin-top: 0.25rem; font-weight: 500;
}
.form-alt {
  text-align: center; margin-top: 2rem;
}
.form-alt > p { font-size: 0.9375rem; color: var(--text-light); margin-bottom: 0.5rem; }
.video-consult-info {
  display: flex; align-items: flex-start; gap: 1rem; text-align: left;
  background: rgb(255 255 255 / 0.08); border-radius: var(--radius-lg); padding: 1.25rem;
  margin-bottom: 1.25rem; border: 1px solid rgb(255 255 255 / 0.12);
}
.video-consult-info svg { flex-shrink: 0; color: var(--accent-soft); margin-top: 0.125rem; }
.video-consult-info strong { display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; }
.video-consult-info p { font-size: 0.8125rem; color: rgb(255 255 255 / 0.7); margin: 0; line-height: 1.5; }
.video-consult-quote {
  font-style: italic; font-size: 0.875rem; line-height: 1.6;
  color: rgb(255 255 255 / 0.8); text-align: left;
  border-left: 3px solid var(--accent-soft); padding-left: 1rem; margin: 1rem 0;
}
.video-consult-quote cite {
  display: block; margin-top: 0.5rem; font-style: normal;
  font-size: 0.8125rem; color: rgb(255 255 255 / 0.75);
}

/* ===== Founder Section ===== */
.founder-section {
  max-width: 700px; margin: 0 auto; text-align: center;
}
/* P16.8: was 100px against a 96x96 source file — a thumbnail on the page where
   Alex personally backs the refund. Now a real 640px portrait, so it gets the
   size a trust signal deserves. Teal ring ties it to the brand and stops the
   dark studio backdrop bleeding into the white section. */
.founder-photo {
  width: 148px; height: 148px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 1.5rem;
  border: 3px solid var(--bg-white);
  box-shadow: 0 0 0 2px rgb(0 128 128 / 0.28), var(--shadow-md);
}
@media (max-width: 480px) {
  .founder-photo { width: 124px; height: 124px; }
}
.founder-quote {
  font-size: 1.0625rem; line-height: 1.8; color: var(--text);
  font-style: italic; margin-bottom: 1.5rem;
}
.founder-name { font-weight: 700; color: var(--text); }
.founder-role { font-size: 0.875rem; color: var(--text-light); }

/* ===== Location Section ===== */
.location-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.location-info h2 { font-size: 2.25rem; margin-bottom: 2rem; }
.location-detail {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
}
.location-detail svg {
  width: 24px; height: 24px; color: var(--primary); flex-shrink: 0; margin-top: 2px;
}
.location-detail strong { display: block; margin-bottom: 0.25rem; }
.location-detail p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.6; }
.location-transport {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.location-transport strong { display: block; margin-bottom: 0.5rem; }
.location-transport p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.6; }
.location-map {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}

/* ===== Additional Responsive ===== */
@media (max-width: 1024px) {
  .location-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .location-bar { font-size: 0.75rem; padding: 0.375rem 0; }
  .hero-guarantee-badge { font-size: 0.75rem; padding: 0.375rem 1rem; }
  .hero-dark h1 { font-size: 2rem; }
  .hero-dark { padding: 7.5rem 0 3rem; }
  .hero-badges { gap: 0.75rem; }
  .hero-badge-item { font-size: 0.8125rem; }
  .hero-cta-row { flex-direction: column; align-items: center; }
  .hero-cta-row .btn, .hero-cta-row .btn-outline-light { width: 100%; max-width: 320px; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .lp-compare-table th, .lp-compare-table td { padding: 0.75rem; font-size: 0.875rem; }
  .location-grid { grid-template-columns: 1fr; }
}

/* ===== Sticky Book CTA (P10: all widths, visible from page load — no scroll
   trigger, no width gate; suppressed only via <body data-no-sticky>) ===== */
/* ===== Sticky Book CTA =====
   P17 Phase 2 (panel-revised; H+U converged on this contract):
   - DESKTOP: gone entirely. The nav carries a permanent booking button above
     640px, so the bar was redundant chrome (Alex: "not required because it is
     on the top of the page permanently").
   - MOBILE: hidden by default; revealed by JS only when no lead form is in
     view and the user has scrolled past the first one (see main.js). The old
     always-on bar collided with in-page CTAs — the exact user complaint.
   - visibility:hidden (not transform alone) keeps the hidden bar out of tab
     order and the a11y tree. */
.sticky-cta {
  display: block; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 998; padding: 0.625rem 1rem; text-align: center;
  /* UX P1-4: keep the CTA clear of the iPhone home indicator */
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgb(0 0 0 / 0.08);
  transition: transform 300ms ease, visibility 300ms;
  transform: translateY(110%);
  visibility: hidden;
}
.sticky-cta--revealed { transform: none; visibility: visible; }
.sticky-cta .btn { width: 100%; max-width: 420px; font-size: 1rem; min-height: 48px; }
/* .hidden-by-form retained as a no-op alias for one release (main.js wrote it
   before P17.2); nothing references it after this phase. */
body[data-no-sticky] .sticky-cta { display: none; }
@media (min-width: 641px) { .sticky-cta { display: none; } }
/* Footer breathing room only where a revealed bar could cover it, and never
   on data-no-sticky pages (was unconditional — dead space on desktop + the 5
   LP pages that have no bar at all). */
@media (max-width: 640px) { body:not([data-no-sticky]) .footer { padding-bottom: 6rem; } }

/* ===== Booking modal (P10: primary Book CTAs open the GHL calendar in a
   lightbox; /book stays as the full-page fallback) ===== */
.booking-modal { position: fixed; inset: 0; z-index: 2000; }
.booking-modal[hidden] { display: none; }
.booking-modal-backdrop { position: absolute; inset: 0; background: rgb(20 35 45 / 0.62); }
.booking-modal-dialog {
  position: relative; margin: 3vh auto 0; width: min(760px, calc(100% - 2rem));
  height: 94vh; height: 94dvh; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
}
.booking-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem; border-bottom: 1px solid var(--border);
}
.booking-modal-head h2 { font-size: 1.0625rem; font-weight: 700; color: var(--secondary); }
.booking-modal-close {
  background: none; border: none; cursor: pointer; padding: 0.5rem;
  border-radius: var(--radius-md); color: var(--text); line-height: 0;
}
.booking-modal-close:hover, .booking-modal-close:focus-visible { background: var(--bg); color: var(--secondary); }
.booking-modal-close svg { width: 24px; height: 24px; }
.booking-modal-body { flex: 1; min-height: 0; }
.booking-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .booking-modal-dialog { margin: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .parallax-shapes { display: none; }
}

/* Print */
@media print {
  .nav, .mobile-menu, .btn, .cta-section, .footer, .parallax-shapes { display: none; }
  body { background: #fff; color: #000; }
}

/* ===== P1: hero mini-form, booking panel, a11y utilities ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.hero-form-wrap { max-width: 760px; margin: 0 auto; }
.hero-mini-form {
  /* P16.3 fix: was `1fr 1fr 1fr auto` — a phantom 4th track (no 4th child)
     plus its gap skewed the row off-centre, and the submit sat 8px below the
     50px inputs. Three real tracks + stretch alignment. */
  display: grid; grid-template-columns: 1fr 1fr minmax(200px, 1.2fr);
  gap: 0.75rem; align-items: stretch;
  background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 10px; padding: 0.85rem; backdrop-filter: blur(6px);
}
.hero-mini-form .form-group { margin: 0; }
.hero-mini-form input {
  width: 100%; min-height: 50px; padding: 0.7rem 0.9rem; border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.25); background: #fff; color: var(--navy);
  font: inherit; font-size: 1rem; height: 100%;
}
.hero-mini-form input:focus { outline: 3px solid var(--soft-blue); outline-offset: 1px; }
.hero-mini-form .btn { min-height: 50px; height: 100%; white-space: normal; padding: 0.5rem 1rem; margin-top: 0; }
.hero-form-note { margin-top: 0.85rem; font-size: 0.9rem; color: rgb(255 255 255 / 0.85); text-align: center; }
.hero-form-note a { color: #fff; text-decoration: underline; }
.hero-sub-link { color: inherit; text-decoration: underline; }
.guarantee-conditions-link { margin: 0 0 1.25rem; }
.guarantee-conditions-link a { color: var(--teal); font-weight: 600; text-decoration: underline; }

/* Booking panel (post-submit rollover) */
.booking-panel { background: #fff; border-radius: 12px; }
.booking-panel h3 { color: var(--navy); margin-bottom: 0.5rem; }
.booking-panel-sub { color: var(--body-text); margin-bottom: 1rem; }
.booking-iframe { width: 100%; min-height: 720px; border: 1px solid var(--card-border, #d4d4d4); border-radius: 10px; background: #fff; }
.booking-alts { margin-top: 1rem; font-size: 0.95rem; }
.booking-alts a { color: var(--teal); font-weight: 600; }
.booking-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.booking-chips-label { font-size: 0.9rem; color: var(--body-text); margin-right: 0.25rem; }
.booking-chip {
  min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-border, #d4d4d4); background: #fff; color: var(--navy); font: inherit; font-size: 0.9rem;
}
.booking-chip:hover { border-color: var(--teal); }
.booking-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }
.booking-chip--active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .hero-mini-form { grid-template-columns: 1fr 1fr; }
  .hero-mini-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .hero-mini-form { grid-template-columns: 1fr; }
}

/* a11y: in-text links must not rely on colour alone (WCAG 1.4.1) */
p > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* a11y: links on the navy footer — 6.9:1 soft blue + underline (not colour-only) */
.footer-brand p a, .footer-bottom a, .footer p a { color: #a0d7e7; text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   P9 — Site optimisation (2026-07-08)
   Shared page components consolidated from per-page <style> blocks, the
   consult-first journey timeline, the /book page, article chrome, and the
   guarantee-page redesign. Single design system — no per-page duplicates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Content-page shell (was inline in pages/aftercare.html — also used by
      /guarantee-conditions, which previously rendered unstyled) ─────────── */
.aftercare-wrapper { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.aftercare-hero { text-align: center; padding: 7rem 0 2.5rem; }
.aftercare-hero h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.aftercare-hero p { color: var(--text-light); font-size: 1.0625rem; line-height: 1.7; max-width: 600px; margin: 0 auto; }
.aftercare-section { margin-bottom: 3rem; }
.aftercare-section h2 {
  font-size: 1.5rem; color: var(--text-heading); margin-bottom: 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 2px solid rgb(0 128 128 / 0.15);
}
.aftercare-section h3 { font-size: 1.125rem; color: var(--text-heading); margin-bottom: 0.75rem; margin-top: 1.5rem; }
.aftercare-section p { font-size: 0.9375rem; color: var(--text); line-height: 1.75; margin-bottom: 1rem; }
.aftercare-section ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.aftercare-section ul li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--text); line-height: 1.65; }
.aftercare-section ul li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* Timeline cards */
.timeline { display: flex; flex-direction: column; gap: 1rem; }
.timeline-item { display: flex; gap: 1.25rem; padding: 1.25rem 1.5rem; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-md); }
.timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.timeline-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(0 128 128 / 0.08); color: var(--primary); font-size: 0.75rem; font-weight: 700; }
.timeline-content { flex: 1; }
.timeline-label { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.375rem; }
.timeline-desc { font-size: 0.9375rem; color: var(--text-light); line-height: 1.65; }

/* Two-column comparison + products cards */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.compare-card { padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-white); }
.compare-card h3 { font-size: 1rem; margin-bottom: 1rem; margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.compare-card ul { margin-bottom: 0; }
.compare-card--normal { border-left: 3px solid var(--success); }
.compare-card--normal h3, .compare-card--normal h3 svg { color: var(--success); }
.compare-card--contact { border-left: 3px solid var(--cta); }
.compare-card--contact h3, .compare-card--contact h3 svg { color: var(--cta); }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.products-card { padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-white); }
.products-card h3 { font-size: 1rem; margin-bottom: 1rem; margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.products-card ul { margin-bottom: 0; }
.products-card--use { border-left: 3px solid var(--primary); }
.products-card--use h3 { color: var(--primary); }
.products-card--avoid { border-left: 3px solid var(--cta); }
.products-card--avoid h3 { color: var(--cta); }

/* Callout box (shared by guides, articles, guarantee) */
.callout-box {
  background: rgb(0 128 128 / 0.04); border: 1px solid rgb(0 128 128 / 0.15); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.callout-box p { margin-bottom: 0; font-size: 0.9375rem; color: var(--text); line-height: 1.7; }
.callout-box strong { color: var(--text-heading); }

/* End-of-page CTA banner (guides) */
.aftercare-cta {
  text-align: center; padding: 3rem 2rem; margin-top: 1rem;
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
  border-radius: var(--radius-xl); border: 1px solid var(--border);
}
.aftercare-cta h2 { font-size: 1.75rem; margin-bottom: 0.75rem; border: none; padding-bottom: 0; }
.aftercare-cta p { color: var(--text-light); font-size: 1rem; margin-bottom: 1.5rem; }
.aftercare-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.aftercare-cta-note { font-size: 0.8125rem; color: var(--text-lighter); }
.aftercare-faq { margin-bottom: 3rem; }
.aftercare-faq h2 { font-size: 1.5rem; color: var(--text-heading); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgb(0 128 128 / 0.15); }

@media (max-width: 640px) {
  .aftercare-hero { padding: 6rem 0 2rem; }
  .aftercare-hero h1 { font-size: 1.75rem; }
  .compare-grid, .products-grid { grid-template-columns: 1fr; }
  .timeline-item { flex-direction: column; gap: 0.75rem; }
  .aftercare-cta { padding: 2rem 1.5rem; }
  .aftercare-cta h2 { font-size: 1.5rem; }
  .aftercare-cta-buttons { flex-direction: column; align-items: center; }
  .aftercare-cta-buttons .btn { width: 100%; }
}

/* ── Article chrome (was duplicated inline in every pages/articles/*.html) ── */
.article-wrapper { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.article-breadcrumb { padding: 6rem 0 0; font-size: 0.9375rem; color: var(--text-light); font-weight: 500; }
.article-breadcrumb a { color: var(--primary); text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-back { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.article-back a { color: var(--primary); font-weight: 600; }
.article-hero { text-align: center; padding: 1.5rem 0 2.5rem; }
.article-hero h1 { font-size: 2.125rem; margin-bottom: 1rem; line-height: 1.25; }
.article-hero .article-sub { color: var(--text-light); font-size: 1.0625rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.article-meta { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-lighter); }
.article-section { margin-bottom: 3rem; }
.article-section h2 { font-size: 1.5rem; color: var(--text-heading); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgb(0 128 128 / 0.15); }
.article-section h3 { font-size: 1.125rem; color: var(--text-heading); margin: 1.5rem 0 0.75rem; }
.article-section p { color: var(--text); line-height: 1.75; margin-bottom: 1.1rem; font-size: 0.9875rem; }
.article-section ul, .article-section ol { margin: 0 0 1.25rem 1.25rem; color: var(--text); line-height: 1.75; font-size: 0.9875rem; }
.article-section li { margin-bottom: 0.5rem; }
.article-section a { color: var(--primary); }
.takeaways {
  background: rgb(0 128 128 / 0.04); border: 1px solid rgb(0 128 128 / 0.15); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin-bottom: 3rem;
}
.takeaways h2 { font-size: 1.0625rem; color: var(--text-heading); margin-bottom: 0.875rem; border: none; padding: 0; }
.takeaways ul { margin: 0 0 0 1.1rem; }
.takeaways li { margin-bottom: 0.55rem; color: var(--text); line-height: 1.65; font-size: 0.9375rem; }
.article-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.article-table th { text-align: left; background: rgb(0 128 128 / 0.06); color: var(--text-heading); padding: 0.75rem 0.875rem; border: 1px solid var(--border); }
.article-table td { padding: 0.75rem 0.875rem; border: 1px solid var(--border); color: var(--text); line-height: 1.55; }
.article-sources { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-bottom: 3rem; font-size: 0.8125rem; color: var(--text-lighter); line-height: 1.7; }
.article-sources h2 { font-size: 0.9375rem; color: var(--text-heading); border: none; padding: 0; margin-bottom: 0.75rem; }
.article-sources ul { margin: 0 0 0.75rem 1.1rem; }
.article-disclosure { background: var(--bg-alt, #f7f9fa); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.875rem 1.125rem; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3rem; }
.related-card {
  display: block; padding: 1.125rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-white); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.related-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.related-card .related-tag { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); font-weight: 700; }
.related-card h3 { font-size: 0.9875rem; color: var(--text-heading); margin: 0.375rem 0 0; line-height: 1.45; }
.article-cta {
  text-align: center; padding: 3rem 2rem; margin-top: 1rem;
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
  border-radius: var(--radius-xl); border: 1px solid var(--border);
}
.article-cta h2 { font-size: 1.75rem; margin-bottom: 0.75rem; border: none; padding-bottom: 0; }
.article-cta p { color: var(--text-light); font-size: 1rem; margin-bottom: 1.5rem; }
.article-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.article-cta-note { font-size: 0.8125rem; color: var(--text-lighter); }
@media (max-width: 640px) {
  .article-hero h1 { font-size: 1.65rem; }
  .related-grid { grid-template-columns: 1fr; }
  .article-cta { padding: 2rem 1.5rem; }
  .article-cta-buttons { flex-direction: column; align-items: center; }
  .article-cta-buttons .btn { width: 100%; }
}

/* ── P13: article visuals (photos, SVG diagrams, static before/after, TRG badge) ──
   Figures live inside .article-wrapper (760px column). All images lazy-load and
   carry alt text; before/after pairs MUST carry the imagery-policy label. */
.article-figure { margin: 0 0 1.75rem; }
.article-figure > img,
.article-figure > svg,
.article-figure picture > img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-figure.article-photo > img {
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.article-figure.article-diagram {
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 0.5rem;
}
.article-figure.article-diagram > img,
.article-figure.article-diagram > svg { border-radius: 0; }
.article-figure figcaption {
  margin-top: 0.625rem; font-size: 0.8125rem; color: var(--text-light);
  line-height: 1.55; text-align: center;
}
.article-figure figcaption .illus-tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-lighter); background: var(--bg-alt, #f7f9fa);
  border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.1rem 0.55rem; margin-right: 0.4rem;
}

/* Static before/after pair (NOT a slider — articles are read, not swiped).
   Always paired with .article-ba-label per IMAGERY-POLICY (Lane A). */
.article-ba { margin: 0 0 1.75rem; }
.article-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.article-ba-cell { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-white); }
.article-ba-cell img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.article-ba-cell span {
  position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: rgb(44 62 80 / 0.82);
  border-radius: var(--radius-full); padding: 0.15rem 0.6rem;
}
.article-ba-caption { margin-top: 0.625rem; font-size: 0.8438rem; color: var(--text); line-height: 1.55; }
.article-ba-label { margin-top: 0.375rem; font-size: 0.75rem; color: var(--text-lighter); line-height: 1.5; }

/* "Verified on TRG" inbound badge (self-serve Featured tier, common ownership disclosed) */
.trg-verify {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem;
}
.trg-verify img { width: 88px; height: auto; flex-shrink: 0; }
.trg-verify .trg-verify-body { font-size: 0.8125rem; color: var(--text-light); line-height: 1.55; }
.trg-verify .trg-verify-body a { color: var(--primary); font-weight: 600; }
.trg-verify .trg-verify-disclosure { display: block; margin-top: 0.25rem; color: var(--text-lighter); font-size: 0.75rem; }
@media (max-width: 640px) {
  .trg-verify { flex-direction: column; text-align: center; align-items: center; }
  .article-ba-pair { gap: 0.5rem; }
}

/* Desktop sticky rail on articles (built by main.js from the on-page related
   cards — progressive enhancement, no duplicate crawlable content) */
.article-rail {
  position: fixed; top: 108px; right: max(1.25rem, calc(50vw - 760px));
  width: 250px; z-index: 10;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow-md);
}
.article-rail .btn { width: 100%; font-size: 0.8125rem; padding: 0.75rem 1rem; }
.article-rail-links { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.article-rail-links strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-lighter); margin-bottom: 0.625rem; }
.article-rail-links a { display: block; font-size: 0.8438rem; line-height: 1.45; color: var(--text); padding: 0.375rem 0; }
.article-rail-links a:hover { color: var(--primary); }
@media (max-width: 1399px) { .article-rail { display: none; } }

/* ── Consult-first journey (6 steps) — home + /how-it-works ──────────────── */
.steps { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; position: relative; }
.step { display: flex; gap: 1.5rem; position: relative; padding-bottom: 2.25rem; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px;
  background: rgb(0 128 128 / 0.2);
}
.step:last-child::before { display: none; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 1.375rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 12px rgb(0 128 128 / 0.3); position: relative; z-index: 1;
}
.step-body { flex: 1; padding-top: 0.375rem; }
.step-body h3 { font-size: 1.1875rem; margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.step-body h3 svg { width: 20px; height: 20px; color: var(--cta); flex-shrink: 0; }
.step-body p { font-size: 0.9688rem; color: var(--text-light); line-height: 1.65; margin: 0; max-width: 560px; }
.step-media { margin-top: 0.875rem; border-radius: var(--radius-md); overflow: hidden; max-width: 380px; border: 1px solid var(--border); }
.step-media img { width: 100%; display: block; }
.step-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgb(224 43 43 / 0.08); color: var(--cta); border-radius: var(--radius-full); padding: 0.2rem 0.625rem;
}
.steps-cta { text-align: center; margin-top: 2.75rem; }
.steps-cta .steps-cta-note { margin-top: 0.875rem; font-size: 0.875rem; color: var(--text-light); }
@media (max-width: 640px) {
  .step { gap: 1rem; }
  .step-num { width: 44px; height: 44px; font-size: 1.125rem; }
  .step::before { left: 21px; top: 46px; }
}

/* Condensed 3-line journey in the hero */
.hero-steps { max-width: 620px; margin: 0 auto 2rem; display: flex; flex-direction: column; gap: 0.625rem; text-align: left; }
.hero-step { display: flex; align-items: flex-start; gap: 0.75rem; color: rgb(255 255 255 / 0.9); font-size: 0.9688rem; line-height: 1.5; }
.hero-step-num {
  width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / 0.15); border: 1px solid rgb(255 255 255 / 0.3);
  color: #fff; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.hero-step strong { color: #fff; }

/* ── /book page ──────────────────────────────────────────────────────────── */
/* P10: compact header so the calendar embed sits above the fold on load */
.book-wrapper { max-width: 1100px; margin: 0 auto; padding: 5.75rem 1.5rem 4rem; }
.book-header { text-align: center; margin-bottom: 1.25rem; }
.book-header h1 { font-size: 1.75rem; margin-bottom: 0.375rem; }
.book-header p { color: var(--text-light); font-size: 0.9375rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.book-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.book-cal-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 0.75rem; }
.book-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.book-aside-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.book-aside-card h2 { font-size: 1.0625rem; margin-bottom: 0.875rem; }
.book-aside-card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; counter-reset: bk; }
.book-aside-card ol li { counter-increment: bk; display: flex; gap: 0.625rem; font-size: 0.875rem; color: var(--text); line-height: 1.5; }
.book-aside-card ol li::before {
  content: counter(bk); width: 22px; height: 22px; border-radius: 50%; background: rgb(0 128 128 / 0.1);
  color: var(--primary); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.book-aside-card .btn { width: 100%; }
.book-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.book-trust li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--text); line-height: 1.5; }
.book-trust svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 900px) {
  /* P10: calendar stays FIRST — it must be above the fold; aside follows below */
  .book-wrapper { padding-top: 5.25rem; }
  .book-header { margin-bottom: 0.875rem; }
  .book-header h1 { font-size: 1.375rem; margin-bottom: 0.25rem; }
  .book-header p { font-size: 0.875rem; }
  .book-header .section-tag { display: none; }
  .book-grid { grid-template-columns: 1fr; }
  .book-cal-card { padding: 0.375rem; }
  .book-aside-card--steps { display: none; }
}

/* ── Home pricing: P10 tier details (monthly equivalence + size limits) ───── */
.pricing-monthly { font-size: 0.9375rem; font-weight: 600; color: var(--text-light); margin: -0.375rem 0 0.75rem; }
.pricing-size-note {
  max-width: 760px; margin: 2rem auto 0; text-align: center;
  font-size: 0.9063rem; color: var(--text-light); line-height: 1.65;
}

/* ── Home pricing: savings module header + sourced note ──────────────────── */
.savings-banner { text-align: center; max-width: 700px; margin: 0 auto 2.5rem; }
.savings-banner .savings-headline { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin-bottom: 0.375rem; }
.savings-banner .savings-headline .save-hl { color: var(--success); }
.savings-banner p { font-size: 0.9688rem; color: var(--text-light); }

/* ── Location: static map fallback (never a blank white box) ─────────────── */
.map-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: block; }
.map-card img { width: 100%; display: block; }
.map-card .map-open-btn {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  white-space: nowrap;
}
.map-attrib { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.6875rem; color: var(--text); background: rgb(255 255 255 / 0.85); padding: 0.125rem 0.5rem; border-radius: 4px; }

/* P16.8: the brightness(1.16) lift added in P9 existed to rescue dim, motion-blurred
   frames pulled from a walkthrough video. Alex reshot the clinic on 2026-08-14 in
   daylight; applying that lift to the new frames blows out the highlights (the
   waiting-room pressed-tin wall and the laser-room floor both clip). Only a light
   saturation nudge remains, to match the warmth of the rest of the palette. */
.clinic-gallery-item img { filter: saturate(1.03); }
.clinic-gallery-item:hover img { transform: scale(1.05); opacity: 1; filter: saturate(1.05); }

/* ── Candidacy check: two-column desktop layout (kills the empty-white page) */
.kd-layout { max-width: 1080px; margin: 0 auto; padding: 6.5rem 1.25rem 4rem; display: grid; grid-template-columns: minmax(0, 720px) 320px; gap: 2.5rem; justify-content: center; }
.kd-main { min-width: 0; }
.kd-aside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; align-self: start; }
/* P16.2: the "size limits" card is authored TWICE — once in .kd-main (desktop, to
   close the ~680x330 dead void under the quiz card) and once in the aside (mobile,
   where the single column makes the void impossible). Exactly one is ever visible,
   so there is no duplicate content in the rendered page at any width. */
.kd-aside-card--mobile-only { display: none; }
.kd-main-note { margin-top: 1.25rem; }
@media (max-width: 1023px) {
  .kd-layout { grid-template-columns: minmax(0, 720px); }
  .kd-aside { position: static; }
  /* P16: this aside card repeats the results card's message+CTA when stacked
     on mobile — hide it there (the results CTA remains the single ask). */
  .kd-aside-card--desktop-only { display: none; }
  .kd-aside-card--mobile-only { display: block; }
}

/* Case-study labels under before/after photos */
.ba-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; /* UX P2-9: ≥8px between tap targets */ margin-top: 0.625rem; }
.ba-meta span {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  background: rgb(0 128 128 / 0.07); color: var(--primary-dark); border-radius: var(--radius-full); padding: 0.2rem 0.625rem;
}
.ba-meta .ba-meta-status { background: rgb(224 43 43 / 0.08); color: #b91c1c; }

/* Featured before/after drag slider variants (real split frames) */
.ba-featured { max-width: 760px; margin: 0 auto 2.5rem; }
.ba-featured .ba-compare-card { box-shadow: var(--shadow-md); }
.ba-compare-slider--landscape { aspect-ratio: 1200 / 588; }
.ba-compare-slider--portrait { aspect-ratio: 3 / 4; }

/* a11y: in-content links inside list items must not rely on colour alone */
main li a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   P16.2 DESIGN POLISH LAYER
   ----------------------------------------------------------------------------
   Findings + rationale: .agent/state/evidence/p16.2/design-review.md

   The problem this solves: the decorative system defined above (.bg-mesh,
   .bg-dots, .deco-blob, .section-wave) was only ever applied to index.html.
   Fourteen of fifteen audited pages had ZERO decorative elements, so pages built
   after the homepage read as unfinished rather than minimal. Everything here is
   additive and opt-in via a class — no existing selector is redefined, so the
   homepage and the four /lp/* pages are untouched unless they opt in.

   Restraint rules for anyone extending this:
     • These treatments sit BEHIND text. Contrast is the constraint, not the
       decoration — every value below is chosen so body text stays >= AA.
     • Textures are decorative CSS backgrounds (not <img>), so they carry no
       alt text and are correctly invisible to screen readers.
     • Never stack more than one page-scale treatment in a single band.
   ========================================================================== */

/* ---- 1. Page hero band -----------------------------------------------------
   Ten pages opened on flat white with a small eyebrow and a dark h1 — no anchor,
   no depth, and no family resemblance to the /lp/* pages. .page-hero gives those
   pages a light band with the generated teal wash; --dark uses the navy plate and
   matches the existing /lp/* gradient heroes. */
.page-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.86) 0%, rgb(255 255 255 / 0.62) 55%, var(--bg-white) 100%),
    url('../images/texture/texture-teal-wash.webp') center / cover no-repeat,
    linear-gradient(160deg, #f2f9f9 0%, #ffffff 70%);
  border-bottom: 1px solid rgb(0 128 128 / 0.10);
  overflow: hidden;
}
.page-hero > * { position: relative; z-index: 1; }
/* Hairline of brand colour along the top so the band reads as intentional.
   Suppressed on pages carrying the fixed .client-strip: there the strip already
   supplies a coloured edge under the nav, and a second line reads as a seam. */
.page-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 45%, var(--cta) 100%);
  opacity: 0.75;
}
body:has(.client-strip) .page-hero::before { display: none; }
.page-hero--dark {
  background:
    linear-gradient(180deg, rgb(26 42 58 / 0.90) 0%, rgb(44 62 80 / 0.84) 100%),
    url('../images/texture/texture-navy-depth.webp') center / cover no-repeat,
    linear-gradient(135deg, #2c3e50 0%, #1a2a3a 100%);
  border-bottom: none;
}
.page-hero--dark h1,
.page-hero--dark h2 { color: #fff; }
.page-hero--dark p { color: rgb(255 255 255 / 0.85); }
.page-hero--dark .section-tag { color: var(--primary-light); }
.page-hero--dark a:not([class]) { color: #fff; text-decoration: underline; }
/* Confirmation/arrival moment (post-conversion) — warmer, still very quiet. */
.page-hero--arrival {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.55) 60%, var(--bg-white) 100%),
    url('../images/texture/texture-mint-arrival.webp') center / cover no-repeat,
    linear-gradient(170deg, #eaf7f4 0%, #ffffff 75%);
}

/* ---- 2. Section banding ----------------------------------------------------
   The div-stack pages (no <section> elements, so no inherited rhythm) need a way
   to alternate surface without inventing new colours. .band-* are the only two
   alternates; anything more becomes stripey. */
.band-soft {
  background: linear-gradient(180deg, #f7fbfb 0%, #f2f9f9 100%);
  border-block: 1px solid rgb(0 128 128 / 0.08);
}
.band-texture {
  position: relative;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.90) 0%, rgb(255 255 255 / 0.70) 100%),
    url('../images/texture/texture-teal-wash.webp') center / cover no-repeat,
    #f7fbfb;
}
.band-texture > * { position: relative; z-index: 1; }

/* ---- 3. Card token normalisation -------------------------------------------
   Six different radius/border/shadow triples were in use for what is semantically
   one object. .card-std and .card-accent are the two sanctioned variants. Existing
   page-scoped card rules are left alone; new work should use these. */
.card-std {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-accent {
  background: var(--bg-white);
  border: 1px solid rgb(0 128 128 / 0.22);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Lift on interactive cards only — a static card that lifts is noise. */
a.card-std, a.card-accent { display: block; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
a.card-std:hover, a.card-accent:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  a.card-std, a.card-accent { transition: none; }
  a.card-std:hover, a.card-accent:hover { transform: none; }
}

/* ---- 4. Typographic scale --------------------------------------------------
   Ten distinct desktop h1 sizes were measured across fifteen pages (56/48/46/40/
   36/32/30/28px), which made the money pages look lower-status than the article
   pages. .page-hero h1 pins utility-page h1s to one clamped size. The homepage and
   /lp/* heroes set their own larger sizes and are deliberately not caught here. */
.page-hero h1 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.15; }
.page-hero p.page-hero-lead {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--text-light); line-height: 1.7; max-width: 620px; margin-left: auto; margin-right: auto;
}
.page-hero--dark p.page-hero-lead { color: rgb(255 255 255 / 0.85); }

/* ---- 5. Section rule -------------------------------------------------------
   A quiet divider for long text pages, so h2s read as chapter starts instead of
   just larger paragraphs. */
.rule-brand {
  border: 0; height: 2px; width: 56px; margin: 0 0 1.25rem;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-full);
}
.rule-brand--center { margin-left: auto; margin-right: auto; }

/* ---- 6. Decorative blob positioning helpers --------------------------------
   .deco-blob has no size/position of its own (index.html sets both inline). These
   presets let a section opt in without inline styles. Parent needs position:
   relative + overflow: hidden — .page-hero and .band-texture already have both. */
.deco-blob--tr { width: 420px; height: 420px; top: -160px; right: -140px; }
.deco-blob--bl { width: 360px; height: 360px; bottom: -170px; left: -130px; }
@media (max-width: 768px) {
  .deco-blob--tr { width: 260px; height: 260px; top: -110px; right: -100px; }
  .deco-blob--bl { width: 220px; height: 220px; bottom: -110px; left: -90px; }
}
/* The blur(80px) on .deco-blob is expensive to composite on low-end mobile and
   the effect is nearly invisible at that size — drop it where it does not pay. */
@media (max-width: 520px) {
  .deco-blob { filter: blur(48px); }
}

/* ---- 7. Framed media -------------------------------------------------------
   Real clinic/equipment photos appeared as bare <img> on plain white on several
   pages while the before/after cards elsewhere are ribboned and bordered. This
   gives non-B/A photography a consistent, quieter frame. Deliberately NOT the
   teal 2px B/A treatment: only real client results earn that ribbon. */
.media-frame {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-white); box-shadow: var(--shadow-sm);
}
.media-frame img { display: block; width: 100%; height: auto; }
.media-frame figcaption {
  padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--text-lighter);
  line-height: 1.5; border-top: 1px solid var(--border); background: #fbfdfd;
}

/* ---- 8. Banded page heroes -------------------------------------------------
   tools/site-visuals/apply-hero-band.mjs wraps the existing hero of the flat
   utility pages in .page-hero. The hero keeps its own class (and therefore its
   own copy and structure); these rules only rebalance the padding that used to
   belong to the page wrapper, and pin those h1s to the shared scale. */
.page-hero .aftercare-hero,
.page-hero .tech-hero,
.page-hero .reviews-hero { padding-bottom: 2.75rem; }
.page-hero .aftercare-wrapper,
.page-hero .tech-wrapper,
.page-hero .reviews-wrapper { padding-bottom: 0; }
/* The wrapper reopens after the band for the page body — give it back a top gap. */
main > .aftercare-wrapper,
main > .tech-wrapper,
main > .reviews-wrapper { padding-top: 3rem; }
.page-hero .aftercare-hero h1,
.page-hero .tech-hero h1,
.page-hero .reviews-hero h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);
  letter-spacing: -0.015em; line-height: 1.15;
}
@media (max-width: 768px) {
  .page-hero .aftercare-hero,
  .page-hero .tech-hero,
  .page-hero .reviews-hero { padding-bottom: 2rem; }
  main > .aftercare-wrapper,
  main > .tech-wrapper,
  main > .reviews-wrapper { padding-top: 2.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   P16.2 — MOBILE GUTTER SYSTEM  (Alex directive, iPhone dead-space sweep)
   ═══════════════════════════════════════════════════════════════════════════
   PROBLEM (measured at 390x844 across all 41 routes):
   every page stacked a page wrapper's horizontal padding UNDER a card's own
   padding, so body copy sat in a 262-292px column inside a 390px screen —
   64-73px of dead margin per side. Worst case /calculator "Get your treatment
   plan": .calc-wrapper (24px) + .form-box (40px) = 64px each side -> 262px of
   usable width (67.2% of viewport).

   RULE (mobile only, <= 640px):
     ONE gutter, owned by the page wrapper       -> 16px each side
     cards keep a modest internal pad             -> 14px each side
   Total for text inside a card = 30px per side (content >= 330px / 84.6%);
   text NOT inside a card gets the full 358px (91.8%).

   WHY padding-inline: it overrides only the horizontal axis, so every rule's
   vertical rhythm (padding-top/bottom, hero band spacing) is untouched.

   WHY the `body` prefix: several pages define these same classes in a
   page-scoped <style> block that loads AFTER this stylesheet. At equal
   specificity the page block would win; `body .x` (0,1,1) outranks `.x` (0,1,0)
   so one shared rule fixes the page-scoped copies too. Verified in-browser.

   NO negative margins / full-bleed: .section and .section-alt are
   `overflow: hidden`, and several wrappers sit inside them — a bleed would be
   clipped or would create horizontal scroll. Padding reduction only, so
   scrollWidth stays exactly 390.

   NOT touched: tap targets (only horizontal padding changes; .btn keeps its
   min-height and full width), colours/contrast, and any copy.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── 1. Page gutter wrappers — the single 16px gutter ──────────────────── */
  body .container,
  body .article-wrapper,
  body .aftercare-wrapper,
  body .tech-wrapper,
  body .reviews-wrapper,
  body .prep-wrapper,
  body .areas-wrapper,
  body .bys-wrapper,
  body .policy-wrapper,
  body .hub-wrapper,
  body .calc-wrapper,
  body .dir-wrap,
  body .kd-layout,
  body .ty-wrapper,
  body .ty-arrival { padding-inline: 16px; }

  /* ── 2. Cards — 12px internal pad instead of 20-40px ───────────────────── */
  body .form-box,
  body .lp-form-box,
  body .lp-hero-form-box,
  body .article-cta,
  body .aftercare-cta,
  body .tech-cta,
  body .reviews-cta,
  body .prep-cta,
  body .areas-cta,
  body .hub-cta,
  body .dir-cta,
  body .takeaways,
  body .callout-box,
  body .guarantee-content,
  body .guarantee-badge,
  body .guarantee-math,
  body .calc-guarantee-card,
  body .calc-price-card,
  body .compare-card,
  body .products-card,
  body .timeline-item,
  body .rating-card,
  body .review-card,
  body .trg-card,
  body .trust-note,
  body .video-consult-info,
  body .getting-card,
  body .prep-card,
  body .bys-numb-card,
  body .bys-feel-box,
  body .bys-callout,
  body .book-aside-card,
  body .kd-card,
  body .lp-story,
  body .lp-conditions,
  body .lp-callout,
  body .lp-compare-card,
  body .lp-gstrip-inner,
  body .lp-math-box,
  body .lp-cap-banner,
  body .article-disclosure,
  body .article-diagram,
  body .related-card,
  body .trg-verify,
  body .hub-card,
  body .dir-summary,
  body .dir-disclaimer,
  body .dir-details,
  body .ba-compare-info,
  body .lp-step,
  body .lp-kirby-factor,
  body .prep-alert,
  body .prep-expect-item,
  body .prep-comfort-item,
  body .kd-feature,
  body .p16-price-row,
  body .lp-price-row,
  body .testimonial-card,
  body .tech-photo-caption { padding-inline: 12px; }

  /* These carry a 2-class selector (0,2,0) or a descendant selector (0,1,1) in
     their own rule, so a plain `body .x` (0,1,1) would lose or tie-and-lose to
     a later page <style>. Match at (0,2,1)+ so the gutter still collapses. */
  body .article-figure.article-diagram,
  body .dir-faq details,
  body .dir-details.dir-details,
  body .compare-card.compare-card--normal,
  body .compare-card.compare-card--contact,
  body .compare-card.compare-card--pico,
  body .compare-card.compare-card--q,
  body .products-card.products-card--use,
  body .products-card.products-card--avoid,
  body .lp-compare-card.lp-compare-card--pico,
  body .kd-card.kd-welcome,
  body .book-aside-card.kd-aside-card--mobile-only,
  body .prep-alert.prep-alert--warn,
  body .prep-alert.prep-alert--info { padding-inline: 12px; }

  /* Slider caption sits inside a bordered figure that is already flush to the
     gutter — keep it aligned with the image edge rather than indenting again.
     (/technology builds the same component out of <div>s, /gallery + the
     category pages out of <figure>/<figcaption>, hence both selectors.) */
  body .ba-compare-card--real .ba-compare-info,
  body .ba-compare-card .ba-compare-info,
  body div.ba-compare-info,
  body figcaption.ba-compare-info { padding-inline: 10px; }

  /* Accent-bar cards: a 3-4px coloured left border is the design language on
     these panels, so keep the border but stop it costing content width. */
  body .takeaways,
  body .guarantee-content,
  body .lp-conditions,
  body .lp-gstrip-inner,
  body .trg-card,
  body .lp-compare-card,
  body .compare-card,
  body .products-card { padding-inline: 10px; }

  /* ── 3. Card-in-card — the inner box loses its gutter entirely ──────────
     (measured nests: .prep-card>.prep-alert/.prep-expect-item/.prep-comfort-item,
      .bys-numb-card>.bys-check-box, .kd-welcome>.kd-feature,
      .lp-story>blockquote, .dir-details>.dir-disclaimer.)
     Without this the user sees pad+border+pad+border before the first word. */
  body .prep-card .prep-alert,
  body .prep-card .prep-expect-item,
  body .prep-card .prep-comfort-item,
  body .kd-card .kd-feature,
  body .dir-details .dir-disclaimer { padding-inline: 10px; }
  body .lp-story blockquote { padding-inline: 12px 0; }
  /* Deepest nest on the site: wrapper > .bys-numb-card > .bys-check-box > ul.
     Three padded boxes before the first character — drop the middle one's
     gutter entirely on mobile so the warning box reads at full width. */
  body .bys-numb-card .bys-check-box { padding-inline: 10px; }
  body .bys-numb-card > p,
  body .bys-numb-card > h3 { padding-inline: 0; }

  /* ── 4. List indents — a marker indent is not a reason to lose 20-40px ─── */
  body .article-section ul,
  body .article-section ol { margin-left: 1.05rem; }
  body .takeaways ul,
  body .bys-check-box ul,
  body .getting-card ul,
  body .compare-card ul,
  body .products-card ul,
  body .dir-details ul,
  body .prep-card ul { margin-left: 0.9rem; padding-left: 0; }

  /* ── 5. Journey steps: the 56px numbered rail + 24px gap cost 80px of the
     copy column on /how-it-works and the home page. Tighten the rail only —
     .step-num keeps a 44px hit area (set in the .step rules above, unchanged),
     so this reduces dead space without shrinking a touch target. ─────────── */
  body .step { gap: 0.75rem; }
  body .step-media { max-width: none; }
  body .step-body p { max-width: none; }

  /* ── 6. Inner max-widths that are narrower than the gutter box already is:
     at 390px these cap nothing useful but do centre content into a narrower
     column on some pages. Let them use the wrapper's full inner width. ───── */
  body .steps,
  body .dir-faq,
  body .dir-real-wrap,
  body .lp-ba-wrap,
  body .lp-steps-grid,
  body .lp-compare,
  body .lp-tech-inner,
  body .lp-kirby-grid,
  body .hero-steps { max-width: none; }
}

/* Very small phones (iPhone SE, 320px): drop the gutter one more notch so the
   card column never falls below ~84% of the viewport. */
@media (max-width: 360px) {
  body .container,
  body .article-wrapper,
  body .aftercare-wrapper,
  body .tech-wrapper,
  body .reviews-wrapper,
  body .prep-wrapper,
  body .areas-wrapper,
  body .bys-wrapper,
  body .policy-wrapper,
  body .hub-wrapper,
  body .calc-wrapper,
  body .dir-wrap,
  body .kd-layout,
  body .ty-wrapper,
  body .ty-arrival { padding-inline: 12px; }
}