/* ============================================================================
 * CONSOLIDATED BRAND STYLES + PROJECT STYLES
 * Inlined from brand/styles/* and brand/assets/colors/colors.css so the deploy
 * package is fully self-contained (no external brand folder required).
 * ============================================================================ */

/* ----- colors.css ----- */
/*
 * Aging In The Comfort Of Home® — canonical color tokens
 * Source of truth: ~/Desktop/Brand Builder/AITCOH/brand/BRAND.md
 * Format: CSS custom properties (Tailwind v4 @theme-compatible)
 */

:root {
  /* Products — Trust Blue */
  --color-trust-blue-dark:  #1b477e;
  --color-trust-blue:       #255ea0;
  --color-trust-blue-light: #d9ecff;

  /* Dealerships — Dealer Green */
  --color-dealer-green-dark:  #154440;
  --color-dealer-green:       #20605c;
  --color-dealer-green-light: #dff7c1;

  /* Programs — Legacy Plum */
  --color-legacy-plum-dark:  #4a204d;
  --color-legacy-plum:       #622c65;
  --color-legacy-plum-light: #fde8ff;

  /* Shared */
  --color-radiant-gold: #fdd841;
  --color-charcoal:     #333333;
  --color-gray:         #e0e0e0;
  --color-light-linen:  #fffce5;
}

/*
 * Tailwind v4 users can copy this entire block into their CSS as:
 * @theme {
 *   --color-trust-blue-dark: #1b477e;
 *   ...
 * }
 */

/* ----- tokens.css ----- */
/*
 * AITCOH Design Tokens
 * Foundation primitives every other stylesheet depends on.
 * Source of truth for spacing, radii, blur, elevation, motion, layout.
 *
 * Brand color tokens are imported separately from ../assets/colors/colors.css.
 */

:root {
  /* ----------------------------------------------------------------------
   * SPACING — 4px base, 8-point hybrid grid
   * Use --space-* tokens for any margin, padding, or gap value.
   * ---------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40: 10rem;      /* 160px */
  --space-48: 12rem;      /* 192px */
  --space-64: 16rem;      /* 256px */

  /* ----------------------------------------------------------------------
   * BORDER RADII
   * AITCOH skews toward generous radii to support the liquid-glass aesthetic.
   * ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
   * GLASS BLUR INTENSITIES
   * Backdrop-filter blur values. Pair with --glass-tint for full effect.
   * Heavier blur is more visually striking but more performance-expensive.
   * Use higher intensities sparingly (hero + 1–2 hero-adjacent cards max).
   * ---------------------------------------------------------------------- */
  --blur-quiet:  8px;
  --blur-soft:   16px;
  --blur-medium: 24px;
  --blur-strong: 40px;
  --blur-loud:   64px;

  /* ----------------------------------------------------------------------
   * GLASS TINT OPACITIES
   * Alpha value applied to the surface fill color inside .glass primitives.
   * "Whisper" reads as nearly invisible film; "Loud" reads as colored panel.
   * ---------------------------------------------------------------------- */
  --tint-whisper: 0.04;
  --tint-quiet:   0.08;
  --tint-soft:    0.12;
  --tint-medium:  0.18;
  --tint-strong:  0.28;
  --tint-loud:    0.42;
  --tint-solid:   0.75;   /* near-opaque "frosted card" — readable text over any background */
  --tint-highlight: 0.90; /* top + left light-source border on .glass-solid */

  /* ----------------------------------------------------------------------
   * GLASS TINT RGB CHANNELS
   * Used inside rgb(<channels> / <alpha>) so we can mix opacity on the fly.
   * Mirrors the canonical hex codes in ../assets/colors/colors.css.
   * ---------------------------------------------------------------------- */
  --glass-rgb-neutral:      255 255 255;
  --glass-rgb-charcoal:     51 51 51;        /* #333333 */
  --glass-rgb-trust-blue:   37 94 160;       /* #255ea0 */
  --glass-rgb-dealer-green: 32 96 92;        /* #20605c */
  --glass-rgb-legacy-plum:  98 44 101;       /* #622c65 */
  --glass-rgb-radiant-gold: 253 216 65;      /* #fdd841 */

  /* ----------------------------------------------------------------------
   * ELEVATION — standard drop shadows
   * Use for non-glass surfaces. Glass surfaces use the --glass-shadow stack.
   * ---------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.05), 0 4px 8px rgb(0 0 0 / 0.06);
  --shadow-3: 0 4px 8px rgb(0 0 0 / 0.06), 0 10px 18px rgb(0 0 0 / 0.07);
  --shadow-4: 0 8px 16px rgb(0 0 0 / 0.08), 0 20px 32px rgb(0 0 0 / 0.08);
  --shadow-5: 0 16px 32px rgb(0 0 0 / 0.10), 0 32px 64px rgb(0 0 0 / 0.12);

  /* ----------------------------------------------------------------------
   * GLASS SHADOWS — drop shadow + inner highlight stack
   * Inner highlight at top suggests light catching the rim of the glass.
   * Outer shadow is soft and diffuse, never harsh.
   * ---------------------------------------------------------------------- */
  --glass-shadow-1:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    0 1px 3px rgb(0 0 0 / 0.04),
    0 4px 12px rgb(0 0 0 / 0.05);
  --glass-shadow-2:
    inset 0 1px 0 rgb(255 255 255 / 0.50),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    0 4px 8px rgb(0 0 0 / 0.05),
    0 12px 32px rgb(0 0 0 / 0.07);
  --glass-shadow-3:
    inset 0 1px 0 rgb(255 255 255 / 0.62),
    inset 0 -1px 0 rgb(255 255 255 / 0.10),
    0 8px 16px rgb(0 0 0 / 0.07),
    0 24px 48px rgb(0 0 0 / 0.10);
  --glass-shadow-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.68),
    inset 0 -1px 0 rgb(255 255 255 / 0.10),
    0 12px 24px rgb(0 0 0 / 0.09),
    0 32px 64px rgb(0 0 0 / 0.12);

  /* Trust Blue–tinted shadow stack for .glass-solid surfaces.
   * Replaces the neutral black shadow with a brand-aligned cool cast.
   * Companion hover state lifts the surface visibly. */
  --glass-shadow-solid:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    0 8px 32px rgb(var(--glass-rgb-trust-blue) / 0.15);
  --glass-shadow-solid-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.80),
    inset 0 -1px 0 rgb(255 255 255 / 0.20),
    0 12px 40px rgb(var(--glass-rgb-trust-blue) / 0.25);

  /* ----------------------------------------------------------------------
   * Z-INDEX SCALE
   * Named layers prevent z-index wars.
   * ---------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-popover:   400;
  --z-tooltip:   500;

  /* ----------------------------------------------------------------------
   * MOTION
   * Durations + easings. Honor prefers-reduced-motion below.
   * ---------------------------------------------------------------------- */
  --motion-instant: 50ms;
  --motion-fast:    150ms;
  --motion-base:    250ms;
  --motion-slow:    400ms;
  --motion-slower:  600ms;

  --ease-out:        cubic-bezier(0.16, 1, 0.30, 1);    /* snappy egress */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);    /* symmetric */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --ease-snap:       cubic-bezier(0.40, 0, 0.20, 1);    /* material-style */

  /* ----------------------------------------------------------------------
   * LAYOUT — container widths
   * Use --container-* on the wrapper that bounds page content.
   * ---------------------------------------------------------------------- */
  --container-narrow: 640px;   /* prose, single-column reading */
  --container-medium: 960px;   /* most landing pages */
  --container-wide:   1200px;  /* dashboard / wide content */
  --container-full:   1440px;  /* hero, full-bleed marketing */

  /* ----------------------------------------------------------------------
   * BREAKPOINTS — for reference only (CSS vars don't work in @media)
   * Mirror these literals in your @media queries.
   * ---------------------------------------------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ----------------------------------------------------------------------
   * FOCUS RING — accessibility primitive
   * ---------------------------------------------------------------------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-trust-blue, #255ea0);
}

/* Reduced motion preference — collapse durations to near-instant */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast:    0ms;
    --motion-base:    0ms;
    --motion-slow:    0ms;
    --motion-slower:  0ms;
  }
}

/* ----- typography.css ----- */
/*
 * AITCOH Typography
 * Montserrat Bold (headings) + Source Sans Pro (body).
 * Modular scale (1.333 — perfect fourth) with optical sizing on display.
 *
 * Font files live in ../assets/fonts/. If serving from Google Fonts CDN,
 * link the families in your <head> instead of @font-face below.
 */

/* ------------------------------------------------------------------------
 * FONT FACES — local variable fonts from ../assets/fonts/
 * Variable fonts ship every weight in one file, so each family + style
 * needs only two @font-face declarations (upright + italic).
 *
 * Note: the actual files are "Source Sans 3" (the 2021 rename of the
 * Source Sans Pro family). The brand still calls the family
 * "Source Sans Pro" — we expose it under that name in CSS so the brand
 * spec and the stylesheet stay aligned.
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../assets/fonts/Source%20Sans%20Pro/SourceSans3-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Source%20Sans%20Pro/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../assets/fonts/Source%20Sans%20Pro/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Source%20Sans%20Pro/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Font families */
  --font-heading: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ----------------------------------------------------------------------
   * TYPE SCALE — 1.333 ratio (perfect fourth), 16px base.
   * Display sizes use clamp() for fluid scaling on mobile.
   * ---------------------------------------------------------------------- */
  --text-caption:    0.75rem;    /* 12px */
  --text-sm:         0.875rem;   /* 14px */
  --text-md:         1rem;       /* 16px — base body */
  --text-lg:         1.125rem;   /* 18px — large body / lead */
  --text-xl:         1.3125rem;  /* 21px — H4 / subhead */
  --text-2xl:        1.75rem;    /* 28px — H3 */
  --text-3xl:        2.3125rem;  /* 37px — H2 */
  --text-4xl:        3.0625rem;  /* 49px — H1 */
  --text-5xl:        clamp(2.5rem, 5vw + 1rem, 4.0625rem);  /* 40–65px display */
  --text-6xl:        clamp(3rem, 6vw + 1.5rem, 5.4375rem); /* 48–87px hero display */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-caps:   0.08em;   /* eyebrow / all-caps labels */
}

/* ------------------------------------------------------------------------
 * BASE TYPOGRAPHY — element defaults
 * ------------------------------------------------------------------------ */

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--color-charcoal, #333333);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal, #333333);
  margin: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-md);  font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--color-trust-blue, #255ea0);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-fast) var(--ease-out);
}

a:hover { color: var(--color-trust-blue-dark, #1b477e); }
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

strong, b { font-weight: var(--weight-semibold); }
em, i { font-style: italic; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ------------------------------------------------------------------------
 * TYPE UTILITY CLASSES
 * Use when you need a type style outside of semantic h1-h6 / p / etc.
 * ------------------------------------------------------------------------ */

.type-display-2xl {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-display-xl {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-h1 { font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-heading); letter-spacing: var(--tracking-tight); }
.type-h2 { font: var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-heading); letter-spacing: var(--tracking-snug); }
.type-h3 { font: var(--weight-bold) var(--text-2xl)/var(--leading-tight) var(--font-heading); letter-spacing: var(--tracking-snug); }
.type-h4 { font: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-heading); }

.type-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
}

.type-body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.type-body-md { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.type-body-sm { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.type-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--glass-rgb-charcoal) / 0.68);
}

.type-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-trust-blue, #255ea0);
}

.type-quote {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
}

/* ------------------------------------------------------------------------
 * BRAND NAME — italicized with ®
 * Use <span class="brand-name">Aging In The Comfort Of Home<sup>®</sup></span>
 * or wrap the brand name in <em class="brand-name"> for inline use.
 * ------------------------------------------------------------------------ */
.brand-name {
  font-style: italic;
  font-weight: inherit;
}

.brand-name sup {
  font-style: normal;
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.05em;
}

/* ------------------------------------------------------------------------
 * TEXT BALANCING — improves headline ragging on supported browsers
 * ------------------------------------------------------------------------ */
h1, h2, h3, h4,
.type-display-2xl, .type-display-xl,
.type-h1, .type-h2, .type-h3, .type-h4 {
  text-wrap: balance;
}

p.type-lead, .type-quote {
  text-wrap: pretty;
}

/* ----- glass.css ----- */
/*
 * AITCOH Liquid Glass Primitives
 *
 * Surface primitives that implement the "liquid glass" aesthetic — translucent,
 * blurred, with subtle inner highlight and gradient sheen. Compose with intensity
 * and tint modifiers to build cards, panels, buttons, navs, and overlays.
 *
 * USAGE
 *   <div class="glass glass-medium glass-tint-trust-blue">…</div>
 *
 * Three layers of modifier:
 *   1. Variant   — .glass-card, .glass-panel, .glass-button, .glass-pill, .glass-nav, .glass-overlay
 *   2. Intensity — .glass-quiet, .glass-medium (default), .glass-loud
 *   3. Tint      — .glass-tint-trust-blue, .glass-tint-dealer-green, .glass-tint-legacy-plum,
 *                  .glass-tint-gold, .glass-tint-dark  (default is neutral white)
 *
 * PERFORMANCE
 *   backdrop-filter is GPU-expensive. Use heavy blur (--blur-strong+) sparingly —
 *   hero surfaces and one or two hero-adjacent cards, not entire pages of cards.
 *   .glass-quiet uses --blur-soft which is safe to use broadly.
 *
 * BROWSER SUPPORT
 *   Chrome/Edge 76+, Safari 9+ (with -webkit prefix), Firefox 103+.
 *   Fallback (no blur) provided via @supports — renders as semi-transparent
 *   solid surface, still readable, still on-brand.
 */

/* ------------------------------------------------------------------------
 * BASE GLASS — the primitive every variant inherits from
 * ------------------------------------------------------------------------ */
.glass {
  /* Defaults — override per variant via custom properties */
  --glass-rgb: var(--glass-rgb-neutral);
  --glass-blur: var(--blur-medium);
  --glass-tint: var(--tint-medium);
  --glass-border-alpha: 0.22;
  --glass-shadow: var(--glass-shadow-2);
  --glass-radius: var(--radius-2xl);

  position: relative;
  background-color: rgb(var(--glass-rgb) / var(--glass-tint));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid rgb(var(--glass-rgb) / var(--glass-border-alpha));
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  color: inherit;
  transition:
    background-color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

/* Specular highlight overlay — subtle diagonal sheen suggesting light refraction.
 * Pointer-events: none so it never blocks interactions. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.14) 0%,
    rgb(255 255 255 / 0.04) 24%,
    rgb(255 255 255 / 0) 48%,
    rgb(255 255 255 / 0) 60%,
    rgb(255 255 255 / 0.06) 100%
  );
  mix-blend-mode: overlay;
  opacity: 0.9;
}

/* Lensing edge — a barely-visible inner ring that suggests refraction. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* Ensure children sit above the ::before sheen */
.glass > * { position: relative; z-index: 1; }

/* Fallback for browsers without backdrop-filter — solid translucent surface */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background-color: rgb(var(--glass-rgb) / 0.92);
  }
}

/* ------------------------------------------------------------------------
 * INTENSITY MODIFIERS
 * Override blur, tint, border, and shadow strength as a set.
 * ------------------------------------------------------------------------ */
.glass-quiet {
  --glass-blur: var(--blur-soft);
  --glass-tint: var(--tint-quiet);
  --glass-border-alpha: 0.16;
  --glass-shadow: var(--glass-shadow-1);
}

.glass-medium {
  --glass-blur: var(--blur-medium);
  --glass-tint: var(--tint-medium);
  --glass-border-alpha: 0.22;
  --glass-shadow: var(--glass-shadow-2);
}

.glass-loud {
  --glass-blur: var(--blur-strong);
  --glass-tint: var(--tint-strong);
  --glass-border-alpha: 0.32;
  --glass-shadow: var(--glass-shadow-3);
}

/* Near-opaque frosted card. The highest-readability variant in the scale.
 * Designed for surfaces that sit over photography, video, or busy backgrounds
 * where prose readability matters (hero cards, sticky nav, service cards).
 * Carries a top + left light-source highlight that suggests light catching
 * the upper rim of the glass — the signature "liquid" specular characteristic.
 * Outer shadow uses a Trust Blue tint instead of neutral black for brand fit. */
.glass-solid {
  --glass-blur: var(--blur-soft);
  --glass-tint: var(--tint-solid);
  --glass-border-alpha: 0.60;
  --glass-shadow: var(--glass-shadow-solid);
  --glass-radius: var(--radius-xl);
}

/* Top + left edges render brighter to suggest a light source from upper-left.
 * Bottom and right edges retain the base border tone, creating the
 * "liquid glass" rim-light effect on .glass-solid surfaces. */
.glass-solid {
  border-top-color: rgb(255 255 255 / var(--tint-highlight));
  border-left-color: rgb(255 255 255 / var(--tint-highlight));
}

/* Interactive .glass-solid surfaces (anchors, buttons, anything with .glass-lift)
 * lift slightly on hover and brighten. Mirrors the behavior of standard .glass-lift
 * but with the Trust Blue–tinted shadow stack. */
.glass-solid.glass-lift:hover,
a.glass-solid:hover,
button.glass-solid:hover {
  --glass-tint: 0.85;
  --glass-shadow: var(--glass-shadow-solid-hover);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------------
 * TINT MODIFIERS
 * Shift the underlying surface fill toward a brand color.
 * Default tint is neutral white (var(--glass-rgb-neutral)).
 * ------------------------------------------------------------------------ */
.glass-tint-neutral      { --glass-rgb: var(--glass-rgb-neutral); }
.glass-tint-trust-blue   { --glass-rgb: var(--glass-rgb-trust-blue); }
.glass-tint-dealer-green { --glass-rgb: var(--glass-rgb-dealer-green); }
.glass-tint-legacy-plum  { --glass-rgb: var(--glass-rgb-legacy-plum); }
.glass-tint-gold         { --glass-rgb: var(--glass-rgb-radiant-gold); }
.glass-tint-dark         { --glass-rgb: var(--glass-rgb-charcoal); }

/* Convenience aliases bound to division */
.glass-products    { --glass-rgb: var(--glass-rgb-trust-blue); }
.glass-dealerships { --glass-rgb: var(--glass-rgb-dealer-green); }
.glass-programs    { --glass-rgb: var(--glass-rgb-legacy-plum); }

/* ------------------------------------------------------------------------
 * RADIUS MODIFIERS
 * Override the base radius. Default is --radius-2xl (24px).
 * ------------------------------------------------------------------------ */
.glass-radius-sm  { --glass-radius: var(--radius-md); }
.glass-radius-md  { --glass-radius: var(--radius-lg); }
.glass-radius-lg  { --glass-radius: var(--radius-2xl); }
.glass-radius-xl  { --glass-radius: var(--radius-3xl); }
.glass-radius-pill { --glass-radius: var(--radius-pill); }

/* ========================================================================
 * VARIANT 1 — CARD
 * Standard card surface. Default intensity: medium.
 * ======================================================================== */
.glass-card {
  /* Inherits .glass — apply that class alongside */
  padding: var(--space-6) var(--space-6);
}

.glass-card:hover {
  --glass-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

/* ========================================================================
 * VARIANT 2 — PANEL
 * Wider, more architectural. Used for whole sections.
 * ======================================================================== */
.glass-panel {
  padding: var(--space-10) var(--space-8);
  --glass-radius: var(--radius-3xl);
}

@media (min-width: 768px) {
  .glass-panel { padding: var(--space-12) var(--space-12); }
}

/* ========================================================================
 * VARIANT 3 — BUTTON
 * Glass treatment for primary and secondary CTAs.
 * .glass-button     — base interactive
 * .glass-button-primary — filled, high-contrast primary CTA
 * ======================================================================== */
.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  --glass-radius: var(--radius-pill);
  --glass-tint: var(--tint-soft);
  --glass-blur: var(--blur-soft);
  --glass-border-alpha: 0.32;
  color: var(--color-charcoal, #333333);
}

.glass-button:hover {
  --glass-tint: var(--tint-medium);
  --glass-border-alpha: 0.42;
  transform: translateY(-1px);
}

.glass-button:active {
  transform: translateY(0);
  --glass-shadow: var(--glass-shadow-1);
}

.glass-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.glass-button[disabled],
.glass-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary CTA — fully filled with division color, glass treatment over top */
.glass-button-primary {
  --glass-tint: 1;
  --glass-border-alpha: 0;
  color: var(--color-light-linen, #fffce5);
  font-weight: var(--weight-bold);
}

.glass-button-primary:hover {
  --glass-tint: 0.9;
  filter: brightness(1.08);
}

/* ========================================================================
 * VARIANT 4 — PILL / TAG
 * Small inline tag, badge, or chip.
 * ======================================================================== */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  --glass-radius: var(--radius-pill);
  --glass-tint: var(--tint-soft);
  --glass-blur: var(--blur-quiet);
  --glass-border-alpha: 0.28;
  color: var(--color-charcoal, #333333);
}

/* ========================================================================
 * VARIANT 5 — NAV
 * Sticky / floating navigation surface. Stronger blur for legibility over
 * varied scroll content.
 * ======================================================================== */
.glass-nav {
  --glass-blur: var(--blur-strong);
  --glass-tint: var(--tint-strong);
  --glass-border-alpha: 0.18;
  --glass-radius: var(--radius-pill);
  --glass-shadow: var(--glass-shadow-2);
  padding: var(--space-2) var(--space-4);
}

/* ========================================================================
 * VARIANT 6 — OVERLAY (modal / drawer backdrop)
 * Full-screen overlay surface for modal contexts.
 * ======================================================================== */
.glass-overlay {
  --glass-blur: var(--blur-strong);
  --glass-tint: 0.62;
  --glass-rgb: var(--glass-rgb-charcoal);
  --glass-border-alpha: 0;
  --glass-radius: 0;
  --glass-shadow: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

.glass-overlay::before,
.glass-overlay::after { display: none; }

/* ========================================================================
 * SURFACE — non-interactive frosted background (no hover state)
 * Use for hero backgrounds, photo overlays, full-bleed sections.
 * ======================================================================== */
.glass-surface {
  --glass-radius: 0;
  --glass-shadow: none;
}

.glass-surface::after { box-shadow: none; }

/* ------------------------------------------------------------------------
 * UTILITY: PRESS — momentary tactile feedback on click for any .glass
 * Apply alongside any .glass variant to enable a press-down feel.
 * ------------------------------------------------------------------------ */
.glass-press:active {
  transform: scale(0.98);
  transition-duration: var(--motion-fast);
}

/* ------------------------------------------------------------------------
 * UTILITY: LIFT — exaggerated hover lift for hero-cards
 * ------------------------------------------------------------------------ */
.glass-lift:hover {
  transform: translateY(-4px) scale(1.005);
  --glass-shadow: var(--glass-shadow-hover);
}

/* ----- utilities.css ----- */
/*
 * AITCOH Utilities
 * Layout, spacing, grid, flex, visibility, accessibility helpers.
 * Naming follows a Tailwind-adjacent pattern but is intentionally small and curated.
 */

/* ------------------------------------------------------------------------
 * CONTAINERS — bound page content to readable widths
 * ------------------------------------------------------------------------ */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
  max-width: var(--container-medium);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

.container-narrow { max-width: var(--container-narrow); }
.container-medium { max-width: var(--container-medium); }
.container-wide   { max-width: var(--container-wide); }
.container-full   { max-width: var(--container-full); }

/* Full-bleed — escape the parent's container constraints */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ------------------------------------------------------------------------
 * SECTION — vertical rhythm between page sections
 * ------------------------------------------------------------------------ */
.section {
  padding-block: var(--space-16);
}

.section-sm { padding-block: var(--space-10); }
.section-lg { padding-block: var(--space-24); }

@media (min-width: 768px) {
  .section    { padding-block: var(--space-24); }
  .section-sm { padding-block: var(--space-16); }
  .section-lg { padding-block: var(--space-32); }
}

/* ------------------------------------------------------------------------
 * GRID — responsive 12-column with auto-fit option
 * ------------------------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Auto-fit responsive grid — fills with as many columns as fit at minmax(280px, 1fr) */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Mobile-first collapse */
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Column span utilities (for use inside .grid-12) */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* ------------------------------------------------------------------------
 * FLEX
 * ------------------------------------------------------------------------ */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ------------------------------------------------------------------------
 * SPACING — margin + padding (logical properties)
 * Pattern: .{prop}{direction}-{size}
 *   prop = m (margin) | p (padding)
 *   direction = (none = all) | t | b | l | r | x (inline) | y (block)
 *   size = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24
 * ------------------------------------------------------------------------ */

/* Margin (all) */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

/* Margin block (top + bottom) */
.my-0 { margin-block: var(--space-0); }
.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-6 { margin-block: var(--space-6); }
.my-8 { margin-block: var(--space-8); }
.my-12 { margin-block: var(--space-12); }

/* Margin inline (left + right) */
.mx-auto { margin-inline: auto; }
.mx-0 { margin-inline: var(--space-0); }
.mx-2 { margin-inline: var(--space-2); }
.mx-4 { margin-inline: var(--space-4); }
.mx-6 { margin-inline: var(--space-6); }

/* Margin block-start (top) */
.mt-0 { margin-block-start: var(--space-0); }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-12 { margin-block-start: var(--space-12); }
.mt-16 { margin-block-start: var(--space-16); }

/* Margin block-end (bottom) */
.mb-0 { margin-block-end: var(--space-0); }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }

/* Padding (all) */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }

/* Padding block */
.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-24 { padding-block: var(--space-24); }

/* Padding inline */
.px-2 { padding-inline: var(--space-2); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }

/* ------------------------------------------------------------------------
 * TEXT ALIGNMENT + WEIGHT
 * ------------------------------------------------------------------------ */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.italic        { font-style: italic; }

/* Text color helpers */
.text-charcoal     { color: var(--color-charcoal, #333333); }
.text-trust-blue   { color: var(--color-trust-blue, #255ea0); }
.text-dealer-green { color: var(--color-dealer-green, #20605c); }
.text-legacy-plum  { color: var(--color-legacy-plum, #622c65); }
.text-gold         { color: var(--color-radiant-gold, #fdd841); }
.text-light        { color: var(--color-light-linen, #fffce5); }
.text-muted        { color: rgb(var(--glass-rgb-charcoal) / 0.68); }
.text-subtle       { color: rgb(var(--glass-rgb-charcoal) / 0.52); }

/* ------------------------------------------------------------------------
 * BACKGROUNDS — solid brand backgrounds (non-glass)
 * ------------------------------------------------------------------------ */
.bg-trust-blue       { background-color: var(--color-trust-blue, #255ea0); }
.bg-trust-blue-dark  { background-color: var(--color-trust-blue-dark, #1b477e); }
.bg-trust-blue-light { background-color: var(--color-trust-blue-light, #d9ecff); }
.bg-dealer-green     { background-color: var(--color-dealer-green, #20605c); }
.bg-dealer-green-dark { background-color: var(--color-dealer-green-dark, #154440); }
.bg-dealer-green-light { background-color: var(--color-dealer-green-light, #dff7c1); }
.bg-legacy-plum      { background-color: var(--color-legacy-plum, #622c65); }
.bg-legacy-plum-dark { background-color: var(--color-legacy-plum-dark, #4a204d); }
.bg-legacy-plum-light { background-color: var(--color-legacy-plum-light, #fde8ff); }
.bg-gold             { background-color: var(--color-radiant-gold, #fdd841); }
.bg-light-linen      { background-color: var(--color-light-linen, #fffce5); }
.bg-charcoal         { background-color: var(--color-charcoal, #333333); }
.bg-gray             { background-color: var(--color-gray, #e0e0e0); }

/* ------------------------------------------------------------------------
 * DIVISION GRADIENT BACKGROUNDS — for hero sections and full-bleed surfaces
 * Subtle gradient from primary to primary-dark, ideal for placing glass over.
 * ------------------------------------------------------------------------ */
.bg-gradient-products {
  background: linear-gradient(135deg, var(--color-trust-blue, #255ea0) 0%, var(--color-trust-blue-dark, #1b477e) 100%);
}
.bg-gradient-dealerships {
  background: linear-gradient(135deg, var(--color-dealer-green, #20605c) 0%, var(--color-dealer-green-dark, #154440) 100%);
}
.bg-gradient-programs {
  background: linear-gradient(135deg, var(--color-legacy-plum, #622c65) 0%, var(--color-legacy-plum-dark, #4a204d) 100%);
}

/* Warm canvas gradient — for soft section backgrounds (Light Linen) */
.bg-gradient-warm {
  background: linear-gradient(180deg, var(--color-light-linen, #fffce5) 0%, rgb(255 252 229 / 0.4) 100%);
}

/* ------------------------------------------------------------------------
 * DIVISION-AWARE SECTION TINTS
 * Pages use these classes to alternate sections with a soft background tint
 * for visual rhythm. The tint color is set per division so every page in
 * the brand uses the same class names but renders in its division's palette.
 *
 *   Products (default)  →  Trust Blue Light  (--color-trust-blue-light)
 *   Dealerships         →  Light Linen       (--color-light-linen)
 *   Programs            →  Legacy Plum Light (--color-legacy-plum-light)
 *
 * Division overrides for --section-soft-* variables live in components.css
 * under the body.division-* blocks.
 * ------------------------------------------------------------------------ */
:root {
  /* Defaults = Products division (Trust Blue Light) */
  --section-soft-bg: var(--color-trust-blue-light, #d9ecff);
  --section-soft-gradient-top: var(--color-trust-blue-light, #d9ecff);
  --section-soft-gradient-bottom: rgb(217 236 255 / 0.4);

  /* Page-level body background. Division-aware so the global page tone
   * matches the active division. Critical for translucent glass surfaces:
   * a glass-tint-trust-blue panel composited over a cream body resolves to
   * a sage gray, not blue — so the body color must agree with the division. */
  --page-bg: var(--color-trust-blue-light, #d9ecff);
}

.bg-section-soft {
  background-color: var(--section-soft-bg);
}

.bg-section-soft-gradient {
  background: linear-gradient(
    180deg,
    var(--section-soft-gradient-top) 0%,
    var(--section-soft-gradient-bottom) 100%
  );
}

/* ------------------------------------------------------------------------
 * BORDER RADII helpers
 * ------------------------------------------------------------------------ */
.radius-none { border-radius: 0; }
.radius-sm   { border-radius: var(--radius-sm); }
.radius-md   { border-radius: var(--radius-md); }
.radius-lg   { border-radius: var(--radius-lg); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-2xl  { border-radius: var(--radius-2xl); }
.radius-3xl  { border-radius: var(--radius-3xl); }
.radius-pill { border-radius: var(--radius-pill); }

/* ------------------------------------------------------------------------
 * ELEVATION helpers (non-glass shadows)
 * ------------------------------------------------------------------------ */
.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-3); }
.elev-4 { box-shadow: var(--shadow-4); }
.elev-5 { box-shadow: var(--shadow-5); }

/* ------------------------------------------------------------------------
 * ASPECT RATIO helpers
 * ------------------------------------------------------------------------ */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-3-2     { aspect-ratio: 3 / 2; }
.aspect-4-5     { aspect-ratio: 4 / 5; }
.aspect-16-9    { aspect-ratio: 16 / 9; }
.aspect-21-9    { aspect-ratio: 21 / 9; }
.aspect-portrait { aspect-ratio: 4 / 5; }

/* ------------------------------------------------------------------------
 * DISPLAY + VISIBILITY
 * ------------------------------------------------------------------------ */
.block   { display: block; }
.inline-block { display: inline-block; }
.inline  { display: inline; }
.hidden  { display: none; }

@media (max-width: 767px) { .md\:hidden { display: none; } .md\:block { display: block; } }
@media (min-width: 768px) { .md\:hidden { display: none; } .md\:block { display: block; } .md\:flex { display: flex; } }

/* ------------------------------------------------------------------------
 * ACCESSIBILITY
 * ------------------------------------------------------------------------ */

/* Visually hidden but available to screen readers */
.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;
}

/* Skip-to-content link — show on focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-charcoal, #333333);
  color: var(--color-light-linen, #fffce5);
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* Standardized focus ring on interactive elements */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ------------------------------------------------------------------------
 * MOTION helpers
 * ------------------------------------------------------------------------ */
.transition-base {
  transition: all var(--motion-base) var(--ease-out);
}
.transition-fast {
  transition: all var(--motion-fast) var(--ease-out);
}

/* Subtle fade-in for elements as they enter viewport (pair with IntersectionObserver) */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger variant: applied to a parent. Children fade in sequence as the parent
 * becomes visible. Use on grids, lists, or any container where children should
 * animate in cascade rather than all at once. Supports up to 12 children;
 * additional siblings all use the 12th delay (660ms).
 *
 * USAGE
 *   <div class="grid grid-3 fade-in-stagger">
 *     <article>…</article>
 *     <article>…</article>
 *     <article>…</article>
 *   </div>
 */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}
.fade-in-stagger.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.fade-in-stagger.is-visible > *:nth-child(2)  { transition-delay: 60ms; }
.fade-in-stagger.is-visible > *:nth-child(3)  { transition-delay: 120ms; }
.fade-in-stagger.is-visible > *:nth-child(4)  { transition-delay: 180ms; }
.fade-in-stagger.is-visible > *:nth-child(5)  { transition-delay: 240ms; }
.fade-in-stagger.is-visible > *:nth-child(6)  { transition-delay: 300ms; }
.fade-in-stagger.is-visible > *:nth-child(7)  { transition-delay: 360ms; }
.fade-in-stagger.is-visible > *:nth-child(8)  { transition-delay: 420ms; }
.fade-in-stagger.is-visible > *:nth-child(9)  { transition-delay: 480ms; }
.fade-in-stagger.is-visible > *:nth-child(10) { transition-delay: 540ms; }
.fade-in-stagger.is-visible > *:nth-child(11) { transition-delay: 600ms; }
.fade-in-stagger.is-visible > *:nth-child(n+12) { transition-delay: 660ms; }
.fade-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ----- components.css ----- */
/*
 * AITCOH Higher-Level Components
 * Pre-styled UI blocks built on top of glass primitives and utilities.
 * Each component is opinionated but parameterized — override via custom
 * properties or by adding utility classes alongside.
 *
 * COMPONENTS
 *   .hero               — full-bleed hero with glass overlay
 *   .eyebrow            — small uppercase label above headlines
 *   .cta-block          — CTA banner with title + buttons
 *   .feature-card       — small feature card (icon + title + body)
 *   .stat-card          — large stat card (number + label)
 *   .testimonial        — testimonial card with quote + attribution
 *   .faq                — accordion-style FAQ
 *   .disclaimer         — legal disclaimer block (required for Dealerships)
 *   .footer             — page footer
 *   .badge-certified    — Certified AITCOH Dealer Seal placement
 */

/* ========================================================================
 * HERO
 * Full-bleed section with gradient background and glass hero card on top.
 * Pair with a division gradient class on the parent .hero element.
 * ======================================================================== */
.hero {
  position: relative;
  padding-block: var(--space-24) var(--space-16);
  overflow: hidden;
  color: var(--color-light-linen, #fffce5);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--space-32) var(--space-24); }
}

.hero-content {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--container-medium);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgb(255 255 255 / 0.84);
  margin-block-end: var(--space-4);
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  text-wrap: balance;
  margin-block-end: var(--space-6);
}

.hero-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.86);
  max-width: 56ch;
  margin-block-end: var(--space-8);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero decorative background — radial spotlight + subtle noise overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgb(255 255 255 / 0.06) 0%, transparent 45%);
  pointer-events: none;
}

/* ========================================================================
 * EYEBROW — standalone variant for non-hero sections
 * ======================================================================== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-trust-blue, #255ea0);
  margin-block-end: var(--space-3);
}

.eyebrow-dealerships { color: var(--color-dealer-green, #20605c); }
.eyebrow-programs    { color: var(--color-legacy-plum, #622c65); }

/* ========================================================================
 * CTA BLOCK — closing call-to-action banner
 * Place near the end of long-form pages.
 * ======================================================================== */
.cta-block {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

@media (min-width: 768px) {
  .cta-block { padding: var(--space-16) var(--space-12); }
}

.cta-block-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin-block-end: var(--space-4);
  text-wrap: balance;
}

.cta-block-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  text-wrap: pretty;
}

.cta-block-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ========================================================================
 * FEATURE CARD — icon + title + body for "what you get" grids
 * ======================================================================== */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-lg);
  background: rgb(var(--glass-rgb) / 0.20);
  color: var(--color-trust-blue, #255ea0);
  margin-block-end: var(--space-2);
}

.feature-card-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

.feature-card-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
  margin: 0;
}

/* ========================================================================
 * STAT CARD — large numeric stat with label
 * ======================================================================== */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.stat-card-number {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-trust-blue, #255ea0);
}

.stat-card-label {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: rgb(var(--glass-rgb-charcoal) / 0.74);
}

.stat-card-source {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-caption);
  color: rgb(var(--glass-rgb-charcoal) / 0.56);
  font-style: italic;
}

/* ========================================================================
 * TESTIMONIAL
 * ======================================================================== */
.testimonial {
  padding: var(--space-8) var(--space-6);
}

.testimonial-quote {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-6) 0;
  text-wrap: pretty;
}

.testimonial-quote::before {
  content: "\201C";  /* curly opening quote */
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.2em;
  margin-inline-end: 0.1em;
  color: var(--color-trust-blue, #255ea0);
}

.testimonial-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-avatar {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background-color: rgb(var(--glass-rgb) / 0.20);
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: var(--weight-semibold);
  margin: 0;
}

.testimonial-role {
  font-size: var(--text-sm);
  color: rgb(var(--glass-rgb-charcoal) / 0.68);
  margin: 0;
}

/* ========================================================================
 * FAQ — accordion built on <details>/<summary> for accessibility
 * ======================================================================== */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  padding: var(--space-1) 0;
}

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

.faq-item > summary::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--motion-base) var(--ease-out);
}

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

.faq-item > summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.faq-answer {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid rgb(var(--glass-rgb-charcoal) / 0.10);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
  line-height: var(--leading-relaxed);
}

/* ========================================================================
 * DISCLAIMER — required for Dealerships pages; styled as a quiet card
 * ======================================================================== */
.disclaimer {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: rgb(var(--glass-rgb-charcoal) / 0.04);
  border: 1px solid rgb(var(--glass-rgb-charcoal) / 0.10);
  color: rgb(var(--glass-rgb-charcoal) / 0.74);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.disclaimer-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgb(var(--glass-rgb-charcoal) / 0.62);
  margin-block-end: var(--space-2);
}

/* ========================================================================
 * FOOTER
 * ======================================================================== */
.footer {
  padding: var(--space-16) var(--space-6) var(--space-8);
  background: var(--color-trust-blue-dark, #1b477e);
  color: rgb(255 255 255 / 0.82);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  max-width: var(--container-wide);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: rgb(255 255 255 / 0.96);
  margin-block-end: var(--space-3);
}

.footer-link {
  display: block;
  padding: var(--space-1) 0;
  color: rgb(255 255 255 / 0.74);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-link:hover { color: rgb(255 255 255 / 1); }

.footer-bottom {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--text-caption);
  color: rgb(255 255 255 / 0.56);
  text-align: center;
}

/* ========================================================================
 * IMAGE PLACEHOLDERS
 * Used when real imagery hasn't been supplied yet. Renders a branded gradient
 * block with an optional `data-label` caption visible to designers and a
 * proper aria-label for assistive tech. Replace with <img> once a real asset
 * is available — see brand/assets/images/README.md for the convention.
 *
 * USAGE
 *   <div class="placeholder-image placeholder-hero placeholder-trust-blue"
 *        data-label="Hero photo: installer in remodeled bathroom"
 *        role="img"
 *        aria-label="Hero photo placeholder — installer in remodeled bathroom"></div>
 * ======================================================================== */
.placeholder-image {
  --placeholder-rgb: var(--glass-rgb-trust-blue);
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background:
    linear-gradient(135deg,
      rgb(var(--placeholder-rgb) / 0.95) 0%,
      rgb(var(--placeholder-rgb) / 0.72) 60%,
      rgb(var(--placeholder-rgb) / 0.92) 100%);
  box-shadow: var(--shadow-2);
  color: var(--color-light-linen, #fffce5);
}

/* Subtle diagonal sheen — matches glass aesthetic */
.placeholder-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.12) 0%,
    rgb(255 255 255 / 0) 50%,
    rgb(255 255 255 / 0.06) 100%);
}

/* Render the data-label as a small caption in the bottom-left */
.placeholder-image[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-start: var(--space-4);
  inset-inline-end: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  pointer-events: none;
}

/* Aspect-ratio variants */
.placeholder-hero      { aspect-ratio: 21 / 9; }
.placeholder-banner    { aspect-ratio: 21 / 9; }
.placeholder-wide      { aspect-ratio: 16 / 9; }
.placeholder-square    { aspect-ratio: 1 / 1; }
.placeholder-portrait  { aspect-ratio: 4 / 5; }
.placeholder-card-img  { aspect-ratio: 4 / 3; }

/* Icon — small circular placeholder for feature cards */
.placeholder-icon {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  aspect-ratio: 1 / 1;
}

/* Avatar — round portrait placeholder for testimonials */
.placeholder-avatar {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  aspect-ratio: 1 / 1;
}

/* Color tint variants (default is Trust Blue / Products) */
.placeholder-neutral      { --placeholder-rgb: var(--glass-rgb-neutral); color: var(--color-charcoal, #333333); }
.placeholder-trust-blue   { --placeholder-rgb: var(--glass-rgb-trust-blue); }
.placeholder-dealer-green { --placeholder-rgb: var(--glass-rgb-dealer-green); }
.placeholder-legacy-plum  { --placeholder-rgb: var(--glass-rgb-legacy-plum); }
.placeholder-gold         { --placeholder-rgb: var(--glass-rgb-radiant-gold); color: var(--color-charcoal, #333333); }
.placeholder-charcoal     { --placeholder-rgb: var(--glass-rgb-charcoal); }

/* Convenience aliases per division */
.placeholder-products    { --placeholder-rgb: var(--glass-rgb-trust-blue); }
.placeholder-dealerships { --placeholder-rgb: var(--glass-rgb-dealer-green); }
.placeholder-programs    { --placeholder-rgb: var(--glass-rgb-legacy-plum); }

/* Icon and avatar variants suppress the caption (too small to display) */
.placeholder-icon::after,
.placeholder-avatar::after { display: none; }

/* ========================================================================
 * BADGE — Certified Dealer Seal placement (Dealerships only)
 * ======================================================================== */
.badge-certified {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-2xl);
  background-color: var(--color-light-linen, #fffce5);
  color: var(--color-dealer-green, #20605c);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  box-shadow: var(--shadow-2);
}

.badge-certified-icon {
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
}

/* ========================================================================
 * EYEBROW PILL
 * Small uppercase pill used above headlines, especially on hero overlays.
 * Pairs naturally with .glass-solid surfaces — high readability over photos.
 * Defaults to Trust Blue Light fill with Trust Blue Dark text.
 *
 * USAGE
 *   <span class="eyebrow-pill">Southwest Missouri • Northwest Arkansas</span>
 *   <span class="eyebrow-pill eyebrow-pill-gold">Service Areas</span>
 * ======================================================================== */
.eyebrow-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-4);
  border-radius: var(--radius-pill);
  background-color: rgb(var(--glass-rgb-trust-blue) / 0.10);
  border: 1px solid rgb(var(--glass-rgb-trust-blue) / 0.20);
  color: var(--color-trust-blue-dark, #1b477e);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.eyebrow-pill-gold {
  background-color: rgb(var(--glass-rgb-radiant-gold) / 0.18);
  border-color: rgb(var(--glass-rgb-radiant-gold) / 0.45);
  color: var(--color-charcoal, #333333);
}

.eyebrow-pill-light {
  background-color: rgb(255 255 255 / 0.72);
  border-color: rgb(255 255 255 / 0.92);
  color: var(--color-trust-blue-dark, #1b477e);
}

/* ========================================================================
 * SERVICE CARD ("Trust Shield")
 * Centered card with a circular icon, title, descriptive body, and a
 * small "Learn More" link. Designed to sit on .glass-solid surfaces.
 * Use in 2/3/4-up grids for service listings.
 *
 * USAGE
 *   <article class="glass glass-solid service-card">
 *     <div class="service-card-icon">…icon SVG or emoji…</div>
 *     <h3 class="service-card-title">Home Modifications</h3>
 *     <p class="service-card-body">
 *       Expert renovations to make a home safe and comfortable at every stage
 *       of life. Three generations of construction expertise applied to the
 *       rooms you use most.
 *     </p>
 *     <a href="/home-modifications/" class="service-card-link">Learn More →</a>
 *   </article>
 * ======================================================================== */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  max-width: 24rem;
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-16);
  height: var(--space-16);
  margin-block-end: var(--space-4);
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-1);
  font-size: var(--text-2xl);
  color: var(--color-trust-blue, #255ea0);
  flex-shrink: 0;
}

.service-card-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal, #333333);
  margin: 0 0 var(--space-3) 0;
}

.service-card-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
  margin: 0 0 var(--space-4) 0;
  max-width: 28ch;
}

.service-card-link {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-trust-blue, #255ea0);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
  margin-block-start: auto;
}

.service-card-link:hover,
.service-card-link:focus-visible {
  color: var(--color-trust-blue-dark, #1b477e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================================
 * HERO OVERLAY
 * Hero variant that places a near-opaque .glass-solid card over a
 * photographic background. Use when the hero needs to convey warmth,
 * realism, or place (homes, families, neighborhoods) — pair with imagery
 * from brand/imagery/.
 *
 * USAGE
 *   <section class="hero-overlay"
 *            style="background-image: url('../images/hero/homeowner-walkthrough.jpg')">
 *     <div class="hero-overlay-card glass glass-solid">
 *       <span class="eyebrow-pill">Southwest Missouri • Northwest Arkansas</span>
 *       <h1 class="hero-overlay-title">
 *         Live with independence in the home you love.
 *       </h1>
 *       <p class="hero-overlay-subtitle">
 *         Construction expertise for every stage of life.
 *       </p>
 *       <div class="hero-overlay-actions">
 *         <a class="glass-button glass-button-primary bg-trust-blue text-light">
 *           Schedule a Consultation
 *         </a>
 *         <a class="glass glass-solid glass-lift glass-button">
 *           See How It Works
 *         </a>
 *       </div>
 *     </div>
 *   </section>
 * ======================================================================== */
.hero-overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: var(--space-12) var(--space-4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Optional dimming overlay to keep the glass card legible over any photograph.
 * Apply by adding .hero-overlay-dimmed alongside .hero-overlay. */
.hero-overlay-dimmed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--glass-rgb-charcoal) / 0) 0%,
    rgb(var(--glass-rgb-charcoal) / 0.15) 60%,
    rgb(var(--glass-rgb-charcoal) / 0.30) 100%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-overlay {
    min-height: 600px;
    padding: var(--space-20) var(--space-6);
  }
}

.hero-overlay-card {
  position: relative;
  z-index: var(--z-raised);
  /* Brand-standard hero card width: 56rem (~896px). Matches the section
   * container hierarchy (sections at 960px, hero at 896px gives a slightly
   * tighter focal point). All brand pages share this width unless they have
   * an explicit reason to deviate (documented per-page). */
  max-width: 56rem;
  width: 100%;
  padding: var(--space-10) var(--space-8);
  text-align: center;
}

@media (min-width: 768px) {
  .hero-overlay-card {
    padding: var(--space-12) var(--space-12);
  }
}

.hero-overlay-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal, #333333);
  text-wrap: balance;
  margin: 0 0 var(--space-6) 0;
}

@media (min-width: 768px) {
  .hero-overlay-title { font-size: var(--text-5xl); }
}

.hero-overlay-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.82);
  max-width: 48ch;
  margin: 0 auto var(--space-8);
  text-wrap: pretty;
}

.hero-overlay-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-overlay-actions { flex-direction: row; }
}

/* ========================================================================
 * FLOATING STICKY NAV
 * Pill-shaped navigation that floats above the page content, staying with
 * the user as they scroll. Composes with .glass .glass-solid for the surface.
 *
 * USAGE
 *   <nav class="nav-floating glass glass-solid">
 *     <a class="nav-floating-logo" href="/">
 *       <img src="../assets/logos/logo-aitcoh-products-dark-horizontal-new.svg"
 *            alt="Aging In The Comfort Of Home®" width="160" height="48">
 *     </a>
 *     <div class="nav-floating-links">
 *       <a href="/services/">Services</a>
 *       <a href="/about/">About</a>
 *       <a href="/locations/">Locations</a>
 *       <a href="/resources/">Resources</a>
 *     </div>
 *     <a href="tel:+14175278786" class="nav-floating-cta">(417) 527-8786</a>
 *   </nav>
 * ======================================================================== */
.nav-floating {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  --glass-radius: var(--radius-pill);
}

@media (min-width: 1024px) {
  .nav-floating {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 4rem);
  }
}

.nav-floating-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-floating-logo img {
  /* Brand minimum nav-logo height: 64px (var(--space-16)).
   * The nav pill grows vertically to accommodate; other nav items stay
   * vertically centered via .nav-floating's `align-items: center`.
   * Hero sections beneath need padding-top of at least 8rem to clear it. */
  height: var(--space-16);
  width: auto;
}

.nav-floating-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .nav-floating-links { display: flex; }
}

.nav-floating-links a {
  color: var(--color-charcoal, #333333);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.nav-floating-links a:hover,
.nav-floating-links a:focus-visible {
  color: var(--color-trust-blue, #255ea0);
}

.nav-floating-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background-color: var(--color-charcoal, #333333);
  color: var(--color-light-linen, #fffce5);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.nav-floating-cta:hover,
.nav-floating-cta:focus-visible {
  /* Brand-wide hover treatment: background shifts to division primary,
   * text shifts to Radiant Gold. Division overrides below adjust the
   * background color per division but keep the gold text consistent. */
  background-color: var(--color-trust-blue, #255ea0);
  color: var(--color-radiant-gold, #fdd841);
}

/* ========================================================================
 * DIVISION-SCOPED COLOR OVERRIDES
 * The shared design system defaults to Trust Blue (Products division). Pages
 * for other divisions opt into their division's color treatment with a single
 * class on the <body>:
 *
 *   <body class="division-dealerships"> ... </body>
 *   <body class="division-programs">    ... </body>
 *
 * The modifier re-tints shared surfaces (footer, glass-solid shadow, focus
 * ring, default link colors, service-card icons/links, eyebrow pills) to the
 * division's primary color. Existing Products-division pages remain unaffected
 * because they don't carry these class names.
 * ======================================================================== */

/* --- Dealerships (Dealer Green) --- */
body.division-dealerships {
  --glass-shadow-solid:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    0 8px 32px rgb(var(--glass-rgb-dealer-green) / 0.15);
  --glass-shadow-solid-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.80),
    inset 0 -1px 0 rgb(255 255 255 / 0.20),
    0 12px 40px rgb(var(--glass-rgb-dealer-green) / 0.25);
  --focus-ring-color: var(--color-dealer-green, #20605c);
  /* Section tints: Dealerships uses Light Linen (cream) for soft sections */
  --section-soft-bg: var(--color-light-linen, #fffce5);
  --section-soft-gradient-top: var(--color-light-linen, #fffce5);
  --section-soft-gradient-bottom: rgb(255 252 229 / 0.4);
  /* Page background: Dealerships keeps the historical cream tone */
  --page-bg: var(--color-light-linen, #fffce5);
}
body.division-dealerships .footer        { background: var(--color-dealer-green-dark, #154440); }
body.division-dealerships .eyebrow       { color: var(--color-dealer-green, #20605c); }
/* Note: we intentionally do NOT override `a { color }` brand-wide. Doing so
 * would overpower .footer-link, .nav-floating-cta, and .glass-button color
 * choices that are calibrated for contrast against their own backgrounds.
 * Body-copy links that need division color get a targeted rule below. */
body.division-dealerships p > a,
body.division-dealerships li > a,
body.division-dealerships .faq-answer a {
  color: var(--color-dealer-green, #20605c);
}
body.division-dealerships p > a:hover,
body.division-dealerships li > a:hover,
body.division-dealerships .faq-answer a:hover {
  color: var(--color-dealer-green-dark, #154440);
}
body.division-dealerships .service-card-icon { color: var(--color-dealer-green, #20605c); }
body.division-dealerships .service-card-link { color: var(--color-dealer-green, #20605c); }
body.division-dealerships .service-card-link:hover,
body.division-dealerships .service-card-link:focus-visible { color: var(--color-dealer-green-dark, #154440); }
body.division-dealerships .eyebrow-pill {
  background-color: rgb(var(--glass-rgb-dealer-green) / 0.10);
  border-color: rgb(var(--glass-rgb-dealer-green) / 0.22);
  color: var(--color-dealer-green-dark, #154440);
}
body.division-dealerships .nav-floating-links a:hover,
body.division-dealerships .nav-floating-links a:focus-visible { color: var(--color-dealer-green, #20605c); }
body.division-dealerships .nav-floating-cta:hover,
body.division-dealerships .nav-floating-cta:focus-visible {
  background-color: var(--color-dealer-green, #20605c);
  color: var(--color-radiant-gold, #fdd841);
}
body.division-dealerships .testimonial-quote::before { color: var(--color-dealer-green, #20605c); }

/* --- Programs (Legacy Plum) --- */
body.division-programs {
  --glass-shadow-solid:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    0 8px 32px rgb(var(--glass-rgb-legacy-plum) / 0.15);
  --glass-shadow-solid-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.80),
    inset 0 -1px 0 rgb(255 255 255 / 0.20),
    0 12px 40px rgb(var(--glass-rgb-legacy-plum) / 0.25);
  --focus-ring-color: var(--color-legacy-plum, #622c65);
  /* Section tints: Programs uses Legacy Plum Light for soft sections */
  --section-soft-bg: var(--color-legacy-plum-light, #fde8ff);
  --section-soft-gradient-top: var(--color-legacy-plum-light, #fde8ff);
  --section-soft-gradient-bottom: rgb(253 232 255 / 0.4);
  /* Page background: Programs uses Legacy Plum Light */
  --page-bg: var(--color-legacy-plum-light, #fde8ff);
}
body.division-programs .footer        { background: var(--color-legacy-plum-dark, #4a204d); }
body.division-programs .eyebrow       { color: var(--color-legacy-plum, #622c65); }
body.division-programs p > a,
body.division-programs li > a,
body.division-programs .faq-answer a {
  color: var(--color-legacy-plum, #622c65);
}
body.division-programs p > a:hover,
body.division-programs li > a:hover,
body.division-programs .faq-answer a:hover {
  color: var(--color-legacy-plum-dark, #4a204d);
}
body.division-programs .service-card-icon { color: var(--color-legacy-plum, #622c65); }
body.division-programs .service-card-link { color: var(--color-legacy-plum, #622c65); }
body.division-programs .service-card-link:hover,
body.division-programs .service-card-link:focus-visible { color: var(--color-legacy-plum-dark, #4a204d); }
body.division-programs .eyebrow-pill {
  background-color: rgb(var(--glass-rgb-legacy-plum) / 0.10);
  border-color: rgb(var(--glass-rgb-legacy-plum) / 0.22);
  color: var(--color-legacy-plum-dark, #4a204d);
}
body.division-programs .nav-floating-links a:hover,
body.division-programs .nav-floating-links a:focus-visible { color: var(--color-legacy-plum, #622c65); }
body.division-programs .nav-floating-cta:hover,
body.division-programs .nav-floating-cta:focus-visible {
  background-color: var(--color-legacy-plum, #622c65);
  color: var(--color-radiant-gold, #fdd841);
}
body.division-programs .testimonial-quote::before { color: var(--color-legacy-plum, #622c65); }

/* ============================================================================
 * PROJECT STYLES — What a Dealer Receives
 * ============================================================================ */

/* ============================================================================
 * Aging In The Comfort Of Home® — Dealership Opportunity / What a Dealer Receives
 *
 * Refined premium-flyer aesthetic on a unified Dealer Green canvas.
 * Frosted dark-green glass panels float over the canvas. Gold is used as a
 * FLAT solid accent for titles, numbers, dividers, and icons. NO gold
 * text-shadow glows, NO gold radial blooms, NO gold inset glass-glows.
 * The result reads as a luxury financial prospectus rather than a glowing
 * marketing flyer.
 *
 * Scoped to body.wyg-page so this dark-canvas treatment doesn't bleed
 * into other dealerships pages.
 *
 * Sections:
 *   1.  Body canvas + ambient cool-green bloom (no gold)
 *   2.  Container + section rhythm
 *   3.  Nav refinements
 *   4.  Hero: 2-column, logo placeholder, certified badge, investment card
 *   5.  Key Facts row (3-up)
 *   6.  Section headings + section intro paragraph
 *   7.  Six benefit tiles
 *   8.  Inside Certification (2-col list cards)
 *   9.  Marketing & Launch Toolkit (6-item grid)
 *   10. Clarity Up Front (Not Included / Responsibilities 2-col)
 *   11. Stat cards
 *   12. Pull quote
 *   13. Attribute pills
 *   14. CTA panel
 *   15. Footer disclaimer band
 *   16. Hamburger + responsive
 *   17. Reduced motion + focus rings
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * 1. Body canvas + ambient atmospheric depth (cool green only)
 *     Layered approach for premium depth (no gold blooms, no loud color):
 *       - Multi-stop linear gradient for top-to-bottom tonal variation.
 *       - Three radial gradients for warmth (upper-left), center sheen,
 *         and a deep shadow well (lower-right).
 *       - Several positioned blooms in the .wyg-ambient layer for the
 *         scroll-stable atmospheric variation that breaks up the page.
 * ---------------------------------------------------------------------------- */
body.wyg-page {
  /* Local RGB token for Dealer Green Dark (brand defines the regular but
   * not the dark variant) so the rest of the file can mix it via rgb(...). */
  --glass-rgb-dealer-green-dark: 21 68 64;

  /* Flat Dealer Green canvas. Section-level modifiers (.wyg-section-band,
   * .wyg-section-featured) create the visual separation between sections
   * via slightly darker / accented panels. No body gradient, no scroll-
   * stable ambient blooms. */
  color: var(--color-light-linen, #fffce5);
  background-color: #143b38;
  min-height: 100dvh;
}

/* Ambient bloom layer disabled — was creating tonal variation that the
 * new section-band approach replaces. Markup is kept so the structure
 * remains if it's ever re-enabled. */
.wyg-ambient { display: none; }

/* Ambient bloom layer.
 * Multiple cool-green and dark-shadow blooms placed at fixed positions
 * across the viewport so as the user scrolls the cards traverse zones of
 * subtly different tone. All very low opacity. No gold. No warm glow.
 * Filter blur is large so individual blooms read as atmospheric haze. */
.wyg-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.wyg-ambient-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
/* Bottom-left: original cool-green bloom (kept). */
.wyg-ambient-bloom-green-bl {
  width: 36rem;
  height: 36rem;
  bottom: -8rem;
  left: -10rem;
  background-color: rgb(32 96 92 / 0.30);
}
/* Top-right: small cool-green halo near the program-fee card column. */
.wyg-ambient-bloom-green-tr {
  width: 28rem;
  height: 28rem;
  top: -6rem;
  right: -8rem;
  background-color: rgb(40 110 104 / 0.22);
}
/* Mid-left: deeper shadow zone halfway down the page. */
.wyg-ambient-bloom-shadow-ml {
  width: 38rem;
  height: 38rem;
  top: 40%;
  left: -14rem;
  background-color: rgb(6 22 20 / 0.42);
}
/* Mid-right: another shadow well, complementing mid-left for balance. */
.wyg-ambient-bloom-shadow-mr {
  width: 32rem;
  height: 32rem;
  top: 65%;
  right: -10rem;
  background-color: rgb(8 26 24 / 0.36);
}

nav, section, footer {
  position: relative;
  z-index: 1;
}

::selection {
  background-color: rgb(253 216 65 / 0.32);
  color: var(--color-light-linen, #fffce5);
}


/* ----------------------------------------------------------------------------
 * 2. Container + section rhythm
 * ---------------------------------------------------------------------------- */
.wyg-container {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space-6, 1.5rem);
}

.wyg-section {
  padding-block: clamp(var(--space-12, 3rem), 6vw, var(--space-20, 5rem));
}
.wyg-section-tight {
  padding-block: clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem));
}


/* ----------------------------------------------------------------------------
 * 3. Nav refinements
 * ---------------------------------------------------------------------------- */
.wyg-nav {
  background-color: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.nav-floating-cta {
  background-color: var(--color-radiant-gold, #fdd841);
  color: #333333;
}
.nav-floating-cta:hover,
.nav-floating-cta:focus-visible {
  background-color: #ffe87a;
  color: #333333;
}


/* ----------------------------------------------------------------------------
 * 4. Hero
 * ---------------------------------------------------------------------------- */
.wyg-hero {
  padding-top: clamp(7rem, 14vw, 9rem);
  padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.wyg-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-10));
  gap: var(--space-4);
}

/* Certified Dealer badge — clean gold pill, calm shadow (no gold glow).
 * Carries a repeating diagonal shimmer that sweeps across the badge every
 * 3.5s. Implemented as a translucent white ::before that slides from left
 * to right, paused at the end before the next sweep. Respects the user's
 * prefers-reduced-motion setting (see far below). */
.wyg-certified-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl, 1.25rem);
  background: linear-gradient(
    135deg,
    var(--color-radiant-gold, #fdd841) 0%,
    #e8b800 100%
  );
  color: #333333;
  /* Clean depth shadow only. No gold halo. */
  box-shadow:
    0 8px 20px rgb(0 0 0 / 0.30),
    inset 0 1px 0 rgb(255 255 255 / 0.45);
}
.wyg-certified-badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 50%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: wyg-badge-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes wyg-badge-shimmer {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(300%); }
  100% { transform: translateX(300%); }
}
/* The check icon and label need to sit above the shimmer overlay. */
.wyg-certified-badge .wyg-certified-check,
.wyg-certified-badge .wyg-certified-text {
  position: relative;
  z-index: 1;
}
/* Accessibility — disable the shimmer for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .wyg-certified-badge::before {
    animation: none;
    display: none;
  }
}
.wyg-certified-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
}
.wyg-certified-check svg {
  width: 100%;
  height: 100%;
}
.wyg-certified-text {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: #333333;
}

/* Hero grid */
.wyg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}

.wyg-hero-text {
  position: relative;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-radiant-gold, #fdd841);
}

.wyg-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-light-linen, #fffce5);
  margin: 0 0 var(--space-5) 0;
  opacity: 0.94;
}

/* Hero title: SOLID gold, no text-shadow, no background-clip gradient.
 * Clean, document-like, premium. */
.wyg-hero-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-5) 0;
}
.wyg-hero-title-stop {
  color: var(--color-radiant-gold, #fdd841);
}

.wyg-hero-lede {
  font-family: var(--font-body);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--color-light-linen, #fffce5);
  margin: 0 0 var(--space-4) 0;
  opacity: 0.94;
}

.wyg-hero-body {
  font-family: var(--font-body);
  font-size: var(--text-md, 1rem);
  line-height: 1.65;
  color: rgb(255 252 229 / 0.82);
  margin: 0;
  max-width: 38rem;
}

/* Investment card: clean dark glass. NO gold inner glow, NO gold radial
 * bloom behind the number. Just a refined glass panel with a solid gold
 * number and a thin gold divider line. */
.wyg-investment-card {
  position: relative;
  padding: clamp(var(--space-8), 4vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-3xl, 2rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.42) 0%,
    rgb(21 68 64 / 0.55) 100%
  );
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(223 247 193 / 0.14);
  box-shadow:
    0 20px 50px rgb(0 0 0 / 0.35),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  text-align: center;
}

.wyg-investment-label {
  font-family: var(--font-heading);
  font-size: var(--text-md, 1rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.10em;
  color: var(--color-light-linen, #fffce5);
  opacity: 0.92;
  margin: 0 0 var(--space-3) 0;
}

/* Solid gold number. No text-shadow glow. No background-clip. Clean. */
.wyg-investment-amount {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(3.25rem, 8.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-4) 0;
}

.wyg-investment-divider {
  width: 3rem;
  height: 2px;
  margin: var(--space-3) auto var(--space-5) auto;
  background-color: var(--color-radiant-gold, #fdd841);
  border-radius: 2px;
}

.wyg-investment-financing {
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: rgb(255 252 229 / 0.78);
  margin: 0;
  max-width: 32ch;
  margin-inline: auto;
}

/* Independent business costs note under the financing line in the
 * investment card. Visually subordinate to the financing line but
 * still legible (AA contrast). */
.wyg-investment-costs-note {
  margin: var(--space-4, 1rem) auto 0 auto;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid rgb(223 247 193 / 0.10);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.72);
  max-width: 32ch;
}

@media (max-width: 880px) {
  .wyg-hero-grid {
    grid-template-columns: 1fr;
  }
  .wyg-investment-card {
    margin-top: var(--space-4);
  }
}


/* ----------------------------------------------------------------------------
 * 5. Key Facts row (3-up)
 * ---------------------------------------------------------------------------- */
.wyg-keyfacts-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyg-keyfact {
  padding: clamp(var(--space-7, 1.75rem), 3.5vw, var(--space-9, 2.25rem)) clamp(var(--space-7, 1.75rem), 3.5vw, var(--space-9, 2.25rem));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.35) 0%,
    rgb(21 68 64 / 0.50) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  text-align: center;
}

.wyg-keyfact-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(255 252 229 / 0.72);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}

.wyg-keyfact-value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-3, 0.75rem) 0;
  letter-spacing: -0.01em;
}

.wyg-keyfact-note {
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: rgb(255 252 229 / 0.72);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .wyg-keyfacts-row {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 6. Section headings + section intro paragraph
 * ---------------------------------------------------------------------------- */
.wyg-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-10));
}
.wyg-section-heading::before,
.wyg-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(223 247 193 / 0.30) 50%,
    transparent 100%
  );
  max-width: 12rem;
}
.wyg-section-heading h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-light-linen, #fffce5);
  margin: 0;
  text-align: center;
}

.wyg-section-intro {
  max-width: 62ch;
  margin: 0 auto clamp(var(--space-8), 4vw, var(--space-10)) auto;
  font-family: var(--font-body);
  font-size: var(--text-md, 1rem);
  line-height: 1.65;
  color: rgb(255 252 229 / 0.82);
  text-align: center;
}


/* ----------------------------------------------------------------------------
 * 7. Six benefit tiles
 * ---------------------------------------------------------------------------- */
.wyg-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyg-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num body";
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.38) 0%,
    rgb(21 68 64 / 0.55) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}
.wyg-tile:hover {
  transform: translateY(-3px);
  border-color: rgb(253 216 65 / 0.30);
}

.wyg-tile-number {
  grid-area: num;
  align-self: start;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #154440 0%, #20605c 100%);
  color: var(--color-radiant-gold, #fdd841);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  border: 1px solid rgb(253 216 65 / 0.30);
}

.wyg-tile-title {
  grid-area: title;
  align-self: start;
  padding-top: 0.15rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0;
}

.wyg-tile-body {
  grid-area: body;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(255 252 229 / 0.86);
  margin: 0;
}

@media (max-width: 960px) {
  .wyg-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wyg-tile-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 8. Inside Certification (2-column list cards)
 * ---------------------------------------------------------------------------- */
.wyg-twocol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.wyg-list-card {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.32) 0%,
    rgb(21 68 64 / 0.48) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.wyg-list-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-4) 0;
}
.wyg-list-eyebrow-spaced {
  margin-top: clamp(var(--space-9, 2.25rem), 5vw, var(--space-12, 3rem));
}

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

.wyg-list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(255 252 229 / 0.86);
}
.wyg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-radiant-gold, #fdd841);
}
.wyg-list strong {
  color: var(--color-light-linen, #fffce5);
  font-weight: var(--weight-bold);
}

.wyg-list-compact li {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* "X" bullets for "Not Included" list */
.wyg-list-x li::before {
  content: "×";
  width: auto;
  height: auto;
  background-color: transparent;
  color: rgb(255 255 255 / 0.55);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  line-height: 1;
  top: 0.15rem;
  left: 0;
}

/* Check-mark bullets for "Responsibilities" list */
.wyg-list-check li {
  padding-left: 1.75rem;
}
.wyg-list-check li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  border: 2px solid var(--color-radiant-gold, #fdd841);
  border-radius: 50%;
  top: 0.35rem;
  left: 0;
}
.wyg-list-check li::after {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.22rem;
  border-left: 2px solid var(--color-radiant-gold, #fdd841);
  border-bottom: 2px solid var(--color-radiant-gold, #fdd841);
  transform: rotate(-45deg);
  top: 0.55rem;
  left: 0.27rem;
}

@media (max-width: 880px) {
  .wyg-twocol {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 9. Marketing & Launch Toolkit grid (6 compact items)
 * ---------------------------------------------------------------------------- */
.wyg-mkt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyg-mkt-item {
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  border-radius: var(--radius-xl, 1.25rem);
  background-color: rgb(32 96 92 / 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid var(--color-radiant-gold, #fdd841);
  border-left: 1px solid rgb(223 247 193 / 0.08);
  border-right: 1px solid rgb(223 247 193 / 0.08);
  border-bottom: 1px solid rgb(223 247 193 / 0.08);
}

.wyg-mkt-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-2) 0;
}

.wyg-mkt-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(255 252 229 / 0.82);
  margin: 0;
}

@media (max-width: 960px) {
  .wyg-mkt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .wyg-mkt-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 10. Clarity Up Front: 2-column (Not Included / Responsibilities)
 * ---------------------------------------------------------------------------- */
.wyg-clarity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.wyg-clarity-card {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.32) 0%,
    rgb(21 68 64 / 0.48) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.wyg-clarity-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-5) 0;
}

@media (max-width: 880px) {
  .wyg-clarity-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 11. Stat cards (no gold glow on numbers)
 * ---------------------------------------------------------------------------- */
.wyg-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyg-stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon number"
    "icon label"
    "icon source";
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: center;
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.38) 0%,
    rgb(21 68 64 / 0.55) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}
.wyg-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgb(253 216 65 / 0.25);
}

.wyg-stat-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-dealer-green-light, #dff7c1);
  opacity: 0.85;
}
.wyg-stat-icon svg {
  width: 100%;
  height: 100%;
}

/* Solid gold, no glow */
.wyg-stat-number {
  grid-area: number;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0;
}

.wyg-stat-prefix,
.wyg-stat-unit {
  font-size: 0.55em;
  vertical-align: 0.18em;
  margin: 0 0.02em;
  opacity: 0.95;
}

.wyg-stat-label {
  grid-area: label;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(255 252 229 / 0.80);
  margin: 0;
}

/* Source attribution row beneath each stat label.
 * Lives in the named grid area "source" (third row, right column) so the
 * icon column continues to span all rows on the left. */
.wyg-stat-source {
  grid-area: source;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgb(255 252 229 / 0.55);
  margin: var(--space-2, 0.5rem) 0 0 0;
  align-self: start;
}

@media (max-width: 960px) {
  .wyg-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .wyg-stat-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 12. Pull quote (no gold glow on marks)
 * ---------------------------------------------------------------------------- */
.wyg-pull-quote {
  position: relative;
  margin: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-4), 4vw, var(--space-10));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.30) 0%,
    rgb(21 68 64 / 0.45) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.wyg-pull-quote-mark {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--color-radiant-gold, #fdd841);
  flex-shrink: 0;
}
.wyg-pull-quote-mark-left {
  align-self: start;
}
.wyg-pull-quote-mark-right {
  align-self: end;
}

.wyg-pull-quote-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-semibold);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-light-linen, #fffce5);
  margin: 0;
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 600px) {
  .wyg-pull-quote {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .wyg-pull-quote-mark-left,
  .wyg-pull-quote-mark-right {
    align-self: center;
  }
}


/* ----------------------------------------------------------------------------
 * 13. Attribute pills (no gold glow on check)
 * ---------------------------------------------------------------------------- */
.wyg-attribute-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.wyg-attribute {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.40) 0%,
    rgb(21 68 64 / 0.55) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(223 247 193 / 0.14);
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}
.wyg-attribute:hover {
  transform: translateY(-2px);
  border-color: rgb(253 216 65 / 0.30);
}

.wyg-attribute-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-radiant-gold, #fdd841) 0%,
    #e6b800 100%
  );
  color: #154440;
  /* No gold glow shadow. Just an inset highlight for crispness. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45);
}
.wyg-attribute-check svg {
  width: 60%;
  height: 60%;
}

.wyg-attribute-label {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--color-light-linen, #fffce5);
}

@media (max-width: 960px) {
  .wyg-attribute-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .wyg-attribute-row {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 14. CTA panel
 * ---------------------------------------------------------------------------- */
.wyg-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: center;
  padding: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-6), 4vw, var(--space-10));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.42) 0%,
    rgb(21 68 64 / 0.58) 100%
  );
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(223 247 193 / 0.14);
  box-shadow:
    0 20px 50px rgb(0 0 0 / 0.35),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.wyg-cta-left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.wyg-cta-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #154440 0%, #20605c 100%);
  color: var(--color-radiant-gold, #fdd841);
  border: 1px solid rgb(253 216 65 / 0.25);
}
.wyg-cta-chat-icon svg {
  width: 56%;
  height: 56%;
}

.wyg-cta-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  color: var(--color-light-linen, #fffce5);
  opacity: 0.9;
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
}

.wyg-cta-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0;
}

.wyg-cta-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wyg-cta-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md, 1rem);
  color: var(--color-light-linen, #fffce5);
}
/* The brand-wide rule `body.division-dealerships li > a` colors body-copy
 * links in Dealer Green at higher specificity (0,1,3) than a plain
 * `.wyg-cta-contact a` selector (0,1,1). Adding `body.division-dealerships`
 * to this project rule brings specificity to (0,2,2) so the cream override
 * wins. Same logic applies to the hover state. */
body.division-dealerships .wyg-cta-contact a {
  color: var(--color-light-linen, #fffce5);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
body.division-dealerships .wyg-cta-contact a:hover,
body.division-dealerships .wyg-cta-contact a:focus-visible {
  color: var(--color-radiant-gold, #fdd841);
  border-color: var(--color-radiant-gold, #fdd841);
}

.wyg-cta-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-cta-contact-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .wyg-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .wyg-cta-left {
    flex-direction: column;
    text-align: center;
  }
  .wyg-cta-contacts {
    align-items: center;
  }
}


/* ----------------------------------------------------------------------------
 * 15. Footer disclosures band (two-card grid)
 * ---------------------------------------------------------------------------- */
.wyg-footer-band {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
  margin-top: clamp(var(--space-6), 3vw, var(--space-10));
}

.wyg-disclosures-heading {
  margin-bottom: clamp(var(--space-5), 2.5vw, var(--space-8));
}
.wyg-disclosures-heading h2 {
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  letter-spacing: 0.18em;
  color: rgb(255 252 229 / 0.78);
}
.wyg-disclosures-heading::before,
.wyg-disclosures-heading::after {
  max-width: 9rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(223 247 193 / 0.22) 50%,
    transparent 100%
  );
}

.wyg-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 76rem;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .wyg-disclosure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wyg-disclosure-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(var(--space-6), 3vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-9));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.28) 0%,
    rgb(21 68 64 / 0.44) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.wyg-disclosure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: 999px;
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.28);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-disclosure-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.wyg-disclosure-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-3) 0;
}

.wyg-disclosure-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(255 252 229 / 0.86);
  margin: 0;
  max-width: 32rem;
}
.wyg-disclosure-text strong {
  color: rgb(255 252 229 / 0.92);
  font-weight: var(--weight-bold);
}

.wyg-disclosure-subtext {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.65;
  font-style: italic;
  color: rgb(255 252 229 / 0.72);
  margin: var(--space-3) 0 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgb(223 247 193 / 0.08);
  max-width: 32rem;
}

.wyg-footer-copyright-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: clamp(var(--space-7), 4vw, var(--space-10)) 0 0 0;
}
.wyg-footer-band .wyg-footer-copyright {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgb(255 252 229 / 0.45);
  text-align: center !important;
}

@media (max-width: 880px) {
  .wyg-disclosure-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 16. Mobile hamburger + responsive collapses
 * ---------------------------------------------------------------------------- */
.nav-floating-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md, 0.75rem);
  transition: background-color 150ms ease-out;
}
.nav-floating-toggle:hover,
.nav-floating-toggle:focus-visible {
  background-color: rgb(var(--glass-rgb-charcoal) / 0.06);
}
.nav-floating-toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 5px auto;
  background-color: var(--color-charcoal, #333333);
  border-radius: 1px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease-out;
}
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 960px) {
  .nav-floating {
    border-radius: var(--radius-2xl, 1.5rem);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  .nav-floating {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.20);
    align-items: center;
    flex-wrap: nowrap;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .nav-floating-logo img {
    height: 2.75rem;
  }
  .nav-floating-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .nav-floating-links {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-2);
    gap: 0;
    background-color: rgb(255 255 255 / 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.20);
    border-top: 1px solid rgb(var(--glass-rgb-charcoal) / 0.06);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 260ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 200ms ease-out,
      visibility 0s 200ms;
  }
  .nav-floating-links.is-open {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 200ms ease-out,
      visibility 0s 0s;
  }
  .nav-floating-links a {
    display: block;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md, 1rem);
    color: var(--color-charcoal, #333333);
    border-bottom: 1px solid rgb(var(--glass-rgb-charcoal) / 0.06);
  }
  .nav-floating-links a:last-child {
    border-bottom: none;
  }
}


/* ----------------------------------------------------------------------------
 * 17. Accessibility — reduced motion + focus rings
 * ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wyg-tile,
  .wyg-stat-card,
  .wyg-attribute {
    transition: none;
  }
  .wyg-tile:hover,
  .wyg-stat-card:hover,
  .wyg-attribute:hover {
    transform: none;
  }
}

:where(a, button, summary, details):focus-visible {
  outline: 3px solid var(--color-radiant-gold, #fdd841);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 0.5rem);
}
.skip-link:focus-visible {
  outline-offset: 2px;
}


/* ============================================================================
 * 18. New sections (added during finalization pass)
 *      - section subheading (h3 inside a section)
 *      - rollout cards (30-day / 90-day)
 *      - two-col-spaced variant
 *      - campaigns card + pills
 *      - marketing-boundary callout
 *      - product category grid (6 cards)
 *      - operations toolkit grid (8 items)
 *      - business path cards (5 cards)
 *      - scope grid (3 cards: provided / after / financing)
 *      - market disclaimer
 *      - cta sub-text + sub-section spacing
 *      - list-card-emphasis variant
 *      - list-no-dot variant
 *      - stat-number word variant
 * ============================================================================ */

.wyg-section-subheading {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  text-align: center;
  margin: 0 0 clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem)) 0;
}
.wyg-section-subheading-spaced {
  margin-top: clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem));
}

/* ---- Rollout cards (30-day / 90-day) ---- */
.wyg-rollout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6, 1.5rem);
  margin-bottom: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
}
.wyg-rollout-card {
  padding: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.36) 0%,
    rgb(21 68 64 / 0.52) 100%
  );
  background-color: rgb(21 68 64 / 0.62);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}
.wyg-rollout-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 252 229 / 0.70);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}
.wyg-rollout-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}
.wyg-rollout-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.86);
  margin: 0 0 var(--space-4, 1rem) 0;
}
@media (max-width: 880px) {
  .wyg-rollout-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- two-col spaced (rhythm gap between rollout and follow-up grids) ---- */
.wyg-twocol-spaced {
  margin-top: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
}

/* ---- Campaigns card with pills ---- */
.wyg-campaigns-card {
  margin-top: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
}
.wyg-campaigns-intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.82);
  margin: 0 0 var(--space-5, 1.25rem) 0;
}
.wyg-campaigns-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}
.wyg-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.28);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-light-linen, #fffce5);
}

/* ---- Marketing-boundary callout ---- */
.wyg-boundary-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5, 1.25rem);
  align-items: start;
  margin-top: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
  padding: clamp(var(--space-5, 1.25rem), 3vw, var(--space-7, 1.75rem));
  border-radius: var(--radius-xl, 1.25rem);
  background-color: rgb(253 216 65 / 0.06);
  background: linear-gradient(
    160deg,
    rgb(253 216 65 / 0.08) 0%,
    rgb(32 96 92 / 0.28) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(253 216 65 / 0.32);
}
.wyg-boundary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background-color: rgb(253 216 65 / 0.14);
  color: var(--color-radiant-gold, #fdd841);
  flex-shrink: 0;
}
.wyg-boundary-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
.wyg-boundary-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}
@media (max-width: 600px) {
  .wyg-boundary-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .wyg-boundary-icon {
    margin-bottom: var(--space-2, 0.5rem);
  }
}

/* ---- Product category grid ---- */
.wyg-prodcat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
}
.wyg-prodcat-card {
  padding: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.32) 0%,
    rgb(21 68 64 / 0.48) 100%
  );
  background-color: rgb(21 68 64 / 0.55);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 10px 24px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}
.wyg-prodcat-card:hover {
  transform: translateY(-3px);
  border-color: rgb(253 216 65 / 0.28);
}
.wyg-prodcat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4, 1rem);
  border-radius: var(--radius-lg, 1rem);
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.24);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-prodcat-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.wyg-prodcat-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-3, 0.75rem) 0;
}
.wyg-prodcat-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(255 252 229 / 0.86);
  margin: 0;
}
@media (max-width: 960px) {
  .wyg-prodcat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wyg-prodcat-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Operations toolkit grid (8 items) ---- */
.wyg-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
}
.wyg-ops-item {
  padding: clamp(var(--space-4, 1rem), 2vw, var(--space-6, 1.5rem));
  border-radius: var(--radius-xl, 1.25rem);
  background-color: rgb(32 96 92 / 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(223 247 193 / 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.wyg-ops-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-dealer-green-light, #dff7c1);
  opacity: 0.9;
  margin-bottom: var(--space-1, 0.25rem);
}
.wyg-ops-icon svg {
  width: 100%;
  height: 100%;
}
.wyg-ops-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.9375rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0;
}
.wyg-ops-body {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(255 252 229 / 0.82);
  margin: 0;
}
@media (max-width: 1024px) {
  .wyg-ops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .wyg-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .wyg-ops-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Business path cards ---- */
.wyg-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
}
.wyg-paths-grid > .wyg-path-card:nth-child(n+4) {
  /* For 5 cards on a 3-col, the last row of 2 should center */
}
.wyg-path-card {
  padding: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.30) 0%,
    rgb(21 68 64 / 0.46) 100%
  );
  background-color: rgb(21 68 64 / 0.55);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 10px 22px rgb(0 0 0 / 0.20),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.wyg-path-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-4, 1rem) 0;
  padding-bottom: var(--space-3, 0.75rem);
  border-bottom: 1px solid rgb(253 216 65 / 0.22);
}
@media (max-width: 960px) {
  .wyg-paths-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wyg-paths-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Scope grid (3 cards: Provided / After / Financing) ---- */
.wyg-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
}
.wyg-scope-card {
  position: relative;
  padding: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.32) 0%,
    rgb(21 68 64 / 0.48) 100%
  );
  background-color: rgb(21 68 64 / 0.58);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.10);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}
.wyg-scope-card-provided {
  border-top: 3px solid var(--color-radiant-gold, #fdd841);
}
.wyg-scope-card-after {
  border-top: 3px solid rgb(223 247 193 / 0.35);
}
.wyg-scope-card-financing {
  border-top: 3px solid rgb(255 252 229 / 0.45);
}
.wyg-scope-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4, 1rem);
  border-radius: 999px;
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.26);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-scope-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}
.wyg-scope-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-4, 1rem) 0;
}
.wyg-scope-callout {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--color-light-linen, #fffce5);
  margin: 0 0 var(--space-3, 0.75rem) 0;
  opacity: 0.94;
}
.wyg-scope-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.82);
  margin: 0;
}
@media (max-width: 960px) {
  .wyg-scope-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- List variant: no dot bullets (used in scope-card-after) ---- */
.wyg-list-no-dot li::before {
  content: "·";
  color: rgb(223 247 193 / 0.55);
  background-color: transparent;
  width: auto;
  height: auto;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.2rem;
  line-height: 1;
  top: 0.05rem;
  left: 0;
}

/* ---- List card emphasis variant (for supplier responsibility-statement card) ---- */
.wyg-list-card-emphasis {
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.38) 0%,
    rgb(21 68 64 / 0.56) 100%
  );
  background-color: rgb(21 68 64 / 0.62);
  border: 1px solid rgb(253 216 65 / 0.22);
}
.wyg-list-card-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  color: var(--color-light-linen, #fffce5);
  opacity: 0.94;
  margin: 0 0 var(--space-4, 1rem) 0;
}

/* ---- Market disclaimer beneath stat grid ---- */
.wyg-market-disclaimer {
  margin: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem)) auto 0 auto;
  max-width: 56rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.66);
  text-align: center;
  font-style: italic;
}

/* ---- CTA sub-text under the title ---- */
.wyg-cta-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.55;
  color: rgb(255 252 229 / 0.82);
  margin: var(--space-3, 0.75rem) 0 0 0;
  max-width: 34ch;
}


/* ============================================================================
 * 21. PREMIUM UPGRADE PASS
 *      Adds the executive-prospectus polish requested for launch:
 *        - Hero blueprint pattern overlay
 *        - Investment-card column with floating value chips
 *        - "The Dealer Foundation" prospectus-bundle section
 *        - Core Package card refinements (gold rule, refined icons)
 *        - Section rhythm variants (feature, inset, divider)
 *        - Stat-source typography polish + market section editorial feel
 *        - CTA panel v2 with primary action button + secondary contacts
 *        - Disclosure readability bump
 *      All styles scoped to body.wyg-page (or page-specific class chains).
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * 21.1  Hero blueprint pattern overlay
 *        A very faint grid pattern using two repeating linear-gradients,
 *        masked by a radial fade so it dissipates at the edges. Pure CSS,
 *        zero added paint cost on scroll (the pattern is on a non-fixed
 *        absolutely positioned div inside the hero).
 * ---------------------------------------------------------------------------- */
.wyg-hero {
  position: relative;
  overflow: hidden;
}
.wyg-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgb(223 247 193 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(223 247 193 / 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Fade pattern out at edges so the floating glass card doesn't fight a
   * busy edge. Two mask-image lines for cross-browser support. */
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  opacity: 0.85;
}
.wyg-hero > .wyg-container {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
 * 21.2  Investment column (card + value chips) on the right of hero
 * ---------------------------------------------------------------------------- */
.wyg-investment-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  min-width: 0;
}

/* Value chips below the investment card. Frosted dark glass with a small
 * gold dot leading each label. Subtle, premium, no glow. */
.wyg-investment-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  justify-content: center;
}
.wyg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.34) 0%,
    rgb(21 68 64 / 0.50) 100%
  );
  background-color: rgb(21 68 64 / 0.60);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid rgb(223 247 193 / 0.14);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-light-linen, #fffce5);
  white-space: nowrap;
  box-shadow:
    0 6px 14px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.wyg-chip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--color-radiant-gold, #fdd841);
  box-shadow: 0 0 0 2px rgb(253 216 65 / 0.18);
  flex-shrink: 0;
}


/* ----------------------------------------------------------------------------
 * 21.3  "The Dealer Foundation" — prospectus bundle
 *        Left: a CSS-only stack of 6 layered document cards at slight
 *              rotations/offsets, decorative (aria-hidden).
 *        Right: a numbered ordered list of the 6 deliverables, semantic.
 * ---------------------------------------------------------------------------- */
.wyg-section-feature {
  position: relative;
  padding-block: clamp(var(--space-14, 3.5rem), 7vw, var(--space-20, 5rem));
}
/* A thin gold rule across the top of feature sections so they read as a
 * "chapter" within the prospectus. */
.wyg-section-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(8rem, 18vw, 14rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(253 216 65 / 0.55) 50%,
    transparent 100%
  );
}

.wyg-foundation-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-8, 2rem), 5vw, var(--space-12, 3rem));
  align-items: center;
}

/* --- Document stack (decorative) --- */
.wyg-foundation-stack {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  perspective: 1200px;
}
.wyg-foundation-doc {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl, 1.25rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.42) 0%,
    rgb(21 68 64 / 0.62) 100%
  );
  background-color: rgb(21 68 64 / 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgb(223 247 193 / 0.14);
  box-shadow:
    0 24px 48px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* A small "tab" at the top-right corner of each doc card. Suggests a
 * folder tab without resorting to file-icon clichés. */
.wyg-foundation-tab {
  position: absolute;
  top: -0.5rem;
  right: 1.75rem;
  width: 3rem;
  height: 1rem;
  border-radius: var(--radius-sm, 0.5rem) var(--radius-sm, 0.5rem) 0 0;
  background-color: var(--color-radiant-gold, #fdd841);
  opacity: 0.85;
}
.wyg-foundation-doc-label {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(0.9rem, 1.4vw, 1.0625rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin-bottom: var(--space-3, 0.75rem);
}
.wyg-foundation-doc-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wyg-foundation-doc-lines > span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background-color: rgb(223 247 193 / 0.18);
}
.wyg-foundation-doc-lines > span:nth-child(1) { width: 85%; }
.wyg-foundation-doc-lines > span:nth-child(2) { width: 70%; }
.wyg-foundation-doc-lines > span:nth-child(3) { width: 78%; }
.wyg-foundation-doc-lines > span:nth-child(4) { width: 55%; }

/* Stagger the 6 docs in a fanned stack. doc-1 is the top (frontmost) card,
 * doc-6 sits at the bottom (deepest in the stack). Each card has a
 * transition so swapping the active card animates smoothly. */
.wyg-foundation-doc {
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0s 210ms,
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wyg-foundation-doc-1 { transform: translate(0, 0) rotate(-1.5deg); z-index: 6; }
.wyg-foundation-doc-2 { transform: translate(2%, 3%) rotate(0.5deg);  z-index: 5; }
.wyg-foundation-doc-3 { transform: translate(4%, 6%) rotate(-1deg);   z-index: 4; }
.wyg-foundation-doc-4 { transform: translate(6%, 9%) rotate(1.2deg);  z-index: 3; }
.wyg-foundation-doc-5 { transform: translate(8%, 12%) rotate(-0.8deg); z-index: 2; }
.wyg-foundation-doc-6 { transform: translate(10%, 15%) rotate(0.6deg); z-index: 1; }

/* Active state: brings any doc to the front of the stack with a
 * prominent (slightly larger) presentation. z-index transitions
 * instantly so the card appears on top during the slide. */
.wyg-foundation-doc.is-active {
  transform: translate(-2%, -3%) rotate(-1.5deg) scale(1.02);
  z-index: 10;
  box-shadow:
    0 30px 60px rgb(0 0 0 / 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.10);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0s 0s,
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Foundation list (semantic) --- */
.wyg-foundation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}
.wyg-foundation-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4, 1rem);
  align-items: start;
  padding: var(--space-4, 1rem) var(--space-4, 1rem);
  margin-inline: calc(-1 * var(--space-4, 1rem));
  border-bottom: 1px solid rgb(223 247 193 / 0.08);
  border-radius: var(--radius-md, 0.75rem);
  cursor: pointer;
  position: relative;
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out;
}
.wyg-foundation-item:last-child {
  border-bottom: none;
}
/* A subtle gold rail to the left of the active item — quiet indicator
 * that this is the card currently shown in the visual stack. */
.wyg-foundation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 3px;
  background-color: var(--color-radiant-gold, #fdd841);
  opacity: 0;
  transition: height 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out;
}
.wyg-foundation-item:hover {
  background-color: rgb(253 216 65 / 0.04);
}
.wyg-foundation-item:focus-visible {
  outline: none;
  background-color: rgb(253 216 65 / 0.06);
}
.wyg-foundation-item:focus-visible::before,
.wyg-foundation-item.is-active::before {
  height: 64%;
  opacity: 1;
}
.wyg-foundation-item.is-active {
  background-color: rgb(253 216 65 / 0.05);
}
.wyg-foundation-item.is-active .wyg-foundation-num {
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-foundation-item.is-active .wyg-foundation-name {
  color: var(--color-light-linen, #fffce5);
}
.wyg-foundation-num {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-radiant-gold, #fdd841);
  min-width: 2.5rem;
}
.wyg-foundation-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-light-linen, #fffce5);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}
.wyg-foundation-desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.84);
  margin: 0;
}

@media (max-width: 960px) {
  .wyg-foundation-layout {
    grid-template-columns: 1fr;
  }
  .wyg-foundation-stack {
    max-width: 22rem;
    aspect-ratio: 5 / 4;
  }
  .wyg-foundation-doc-lines > span {
    height: 3px;
  }
}
@media (max-width: 600px) {
  .wyg-foundation-stack {
    max-width: 18rem;
  }
  .wyg-foundation-num {
    font-size: 1.25rem;
  }
  .wyg-foundation-name {
    font-size: 1rem;
  }
}


/* ----------------------------------------------------------------------------
 * 21.4  Core Package card refinements
 *        - Adds a 2px gold rule at the top of each tile that brightens on
 *          hover.
 *        - Tightens the icon container with a circular gold-tinted dish.
 *        - Slight scale on hover (already had translateY -3px).
 *        - Subtle bottom-right corner mark (a small dot pair).
 * ---------------------------------------------------------------------------- */
.wyg-tile {
  position: relative;
  overflow: hidden;
}
.wyg-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(253 216 65 / 0.45) 20%,
    rgb(253 216 65 / 0.65) 50%,
    rgb(253 216 65 / 0.45) 80%,
    transparent 100%
  );
  opacity: 0.5;
  transition: opacity 240ms ease-out;
}
.wyg-tile:hover::before,
.wyg-tile:focus-within::before {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * 21.5  Section rhythm — feature/inset/divider variants
 *        Adds two more section-type modifiers beyond the existing
 *        .wyg-section + .wyg-section-tight.
 * ---------------------------------------------------------------------------- */

/* Inset section: subtle inner panel that lifts the section off the canvas.
 * Used optionally on long-content sections to give the page a "chapter"
 * rhythm without making every section identical. */
.wyg-section-inset > .wyg-container {
  padding: clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem));
  border-radius: var(--radius-3xl, 2rem);
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.16) 0%,
    rgb(21 68 64 / 0.26) 100%
  );
  background-color: rgb(21 68 64 / 0.32);
  border: 1px solid rgb(223 247 193 / 0.08);
}

/* Subtle horizontal divider used between major section clusters */
.wyg-divider {
  display: block;
  width: 100%;
  max-width: 76rem;
  margin: clamp(var(--space-4, 1rem), 3vw, var(--space-8, 2rem)) auto;
  padding-inline: var(--space-6, 1.5rem);
  height: 1px;
  border: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(223 247 193 / 0.18) 50%,
    transparent 100%
  );
}

/* ----------------------------------------------------------------------------
 * 21.5b  Soft "valley" gradients on transitional sections
 *         Sections that act as natural breaks in the prospectus rhythm
 *         get a very subtle top-to-bottom darkening overlay so the cards
 *         on either side feel like they emerge from a shallow shadow.
 *         All overlays sit behind content (z-index: 0), all are 6–10%
 *         opacity, all are pure CSS, no animation.
 * ---------------------------------------------------------------------------- */

/* Soft darkening band above the Operations (inset) section — creates a
 * "valley" between the dense product/supplier cluster and the calmer
 * inset operations chapter. */
.wyg-section-inset {
  position: relative;
}
.wyg-section-inset::before {
  content: "";
  position: absolute;
  inset: -2rem 0 -2rem 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgb(6 22 20 / 0.30) 0%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}
.wyg-section-inset > .wyg-container {
  position: relative;
  z-index: 1;
}

/* Soft darkening behind the Market section so the stat cards read as
 * "in deeper water" — fits the editorial, footnoted feel. */
#market {
  position: relative;
}
#market::before {
  content: "";
  position: absolute;
  inset: -3rem 0 -3rem 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(6 22 20 / 0.18) 30%,
    rgb(6 22 20 / 0.22) 70%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
}
#market > .wyg-container {
  position: relative;
  z-index: 1;
}

/* Soft warm-ish darkening behind the CTA section so the gold primary
 * button reads with deeper contrast against a slightly lower-key
 * surrounding tone. Very subtle — keeps the prospectus quiet. */
#start {
  position: relative;
}
#start::before {
  content: "";
  position: absolute;
  inset: -3rem 0 -3rem 0;
  background: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgb(8 26 24 / 0.32) 0%,
    transparent 75%
  );
  z-index: 0;
  pointer-events: none;
}
#start > .wyg-container {
  position: relative;
  z-index: 1;
}

/* Bottom-of-page deep zone for the footer disclosures — gives the
 * required disclaimer area a settled, anchored feel rather than feeling
 * like it's floating at the bottom of a flat page. */
.wyg-footer-band {
  position: relative;
}
.wyg-footer-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(6 18 16 / 0.18) 40%,
    rgb(4 14 12 / 0.32) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.wyg-footer-band > .wyg-container {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
 * 21.6  Market section editorial polish
 *        - Slightly larger stat-source label
 *        - Tighter market-disclaimer block treated as a small "publisher's
 *          note" beneath the grid.
 * ---------------------------------------------------------------------------- */
.wyg-stat-source {
  font-size: 0.7rem;
  color: rgb(255 252 229 / 0.62);
  letter-spacing: 0.02em;
}
.wyg-market-disclaimer {
  font-size: 0.8125rem;
  color: rgb(255 252 229 / 0.72);
  font-style: normal;
  border-top: 1px solid rgb(223 247 193 / 0.10);
  padding-top: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
}


/* ----------------------------------------------------------------------------
 * 21.7  CTA Panel v2
 *        Stacked layout: header (icon + headings) on top, action button
 *        row in the middle, contact rail at the bottom. Reads as a calm,
 *        confident closing page rather than a noisy CTA banner.
 * ---------------------------------------------------------------------------- */
.wyg-cta-panel-v2 {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
  grid-template-columns: none;
  padding: clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem)) clamp(var(--space-6, 1.5rem), 4vw, var(--space-12, 3rem));
  text-align: left;
  position: relative;
  overflow: hidden;
}
/* A wide, faint gold ambient behind the CTA panel (kept subtle — no bloom). */
.wyg-cta-panel-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgb(253 216 65 / 0.04) 0%, transparent 70%);
}
.wyg-cta-panel-v2 > * {
  position: relative;
}

.wyg-cta-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5, 1.25rem);
  max-width: 56rem;
}
.wyg-cta-headings {
  flex: 1;
  min-width: 0;
}
.wyg-cta-panel-v2 .wyg-cta-sub {
  max-width: 52ch;
  font-size: var(--text-md, 1rem);
  line-height: 1.6;
  color: rgb(255 252 229 / 0.88);
  margin-top: var(--space-4, 1rem);
}

.wyg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
}

.wyg-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-md, 0.75rem);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out,
    color 200ms ease-out,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.wyg-cta-button-primary {
  background-color: var(--color-radiant-gold, #fdd841);
  color: #1c2a28;
  box-shadow:
    0 10px 22px rgb(0 0 0 / 0.30),
    inset 0 1px 0 rgb(255 255 255 / 0.40);
}
.wyg-cta-button-primary:hover,
.wyg-cta-button-primary:focus-visible {
  background-color: #ffe273;
  transform: translateY(-1px);
}
body.division-dealerships .wyg-cta-button-primary {
  color: #1c2a28;
}
.wyg-cta-button-secondary {
  background-color: rgb(255 252 229 / 0.04);
  border-color: rgb(223 247 193 / 0.28);
  color: var(--color-light-linen, #fffce5);
}
.wyg-cta-button-secondary:hover,
.wyg-cta-button-secondary:focus-visible {
  background-color: rgb(255 252 229 / 0.08);
  border-color: rgb(253 216 65 / 0.50);
  color: var(--color-radiant-gold, #fdd841);
}
body.division-dealerships .wyg-cta-button-secondary {
  color: var(--color-light-linen, #fffce5);
}
body.division-dealerships .wyg-cta-button-secondary:hover,
body.division-dealerships .wyg-cta-button-secondary:focus-visible {
  color: var(--color-radiant-gold, #fdd841);
}

.wyg-cta-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(223 247 193 / 0.18) 25%,
    rgb(223 247 193 / 0.18) 75%,
    transparent 100%
  );
}

/* When CTA panel uses v2, the contact list goes on a single row beneath
 * the rule, with icons + cream links spaced evenly. */
.wyg-cta-panel-v2 .wyg-cta-contacts {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(var(--space-3, 0.75rem), 2vw, var(--space-6, 1.5rem)) clamp(var(--space-5, 1.25rem), 3vw, var(--space-8, 2rem));
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 760px) {
  .wyg-cta-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
  }
  .wyg-cta-panel-v2 .wyg-cta-contacts {
    flex-direction: column;
    align-items: flex-start;
  }
  .wyg-cta-button {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
}


/* ----------------------------------------------------------------------------
 * 21.8  Disclosure readability bump
 *        Bigger body text, tighter top divider, more spacing inside cards.
 * ---------------------------------------------------------------------------- */
.wyg-footer-band {
  padding-block: clamp(var(--space-10, 2.5rem), 6vw, var(--space-14, 3.5rem));
}
.wyg-disclosures-heading h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}
.wyg-disclosure-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgb(255 252 229 / 0.90);
}
.wyg-disclosure-subtext {
  font-size: 0.875rem;
  color: rgb(255 252 229 / 0.78);
}
.wyg-disclosure-card {
  padding: clamp(var(--space-7, 1.75rem), 3.5vw, var(--space-9, 2.25rem)) clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem));
}


/* ----------------------------------------------------------------------------
 * 21.9  Hero composition refinements
 *        Tighter rhythm between badge / title / lede / body, and a slight
 *        gold left accent that runs the full vertical height of the
 *        hero-text block.
 * ---------------------------------------------------------------------------- */
.wyg-hero-grid {
  align-items: stretch;
}
.wyg-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wyg-hero-lede {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
}
.wyg-hero-body {
  font-size: var(--text-md, 1rem);
  max-width: 36rem;
}


/* ----------------------------------------------------------------------------
 * 21.10  Premium-pass responsive refinements
 *         Specific to the new components (chips, foundation, CTA actions).
 * ---------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .wyg-investment-chips {
    gap: 0.4rem;
  }
}
@media (max-width: 880px) {
  .wyg-investment-column {
    margin-top: var(--space-5, 1.25rem);
  }
}
@media (max-width: 480px) {
  .wyg-chip {
    font-size: 0.7rem;
    padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  }
  .wyg-foundation-stack {
    aspect-ratio: 4 / 3;
  }
  .wyg-foundation-item {
    grid-template-columns: 1fr;
    row-gap: var(--space-1, 0.25rem);
  }
  .wyg-foundation-num {
    font-size: 1.125rem;
    min-width: 0;
  }
  .wyg-cta-button {
    font-size: 0.875rem;
    padding: 0.8rem 1.2rem;
  }
}
@media (max-width: 390px) {
  .wyg-foundation-stack {
    max-width: 14rem;
  }
  .wyg-foundation-tab {
    right: 1.25rem;
    width: 2.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wyg-foundation-doc,
  .wyg-foundation-doc.is-active {
    transition: none;
  }
  .wyg-foundation-item,
  .wyg-foundation-item::before {
    transition: none;
  }
  .wyg-tile::before {
    transition: none;
  }
  .wyg-cta-button {
    transition: none;
  }
  .wyg-cta-button-primary:hover {
    transform: none;
  }
}


/* ============================================================================
 * 19. Backdrop-filter fallback
 *      Some older browsers (and Firefox without enabling the feature) don't
 *      support backdrop-filter. Bump the solid background opacity so glass
 *      panels still read as cards rather than translucent washouts.
 * ============================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wyg-investment-card,
  .wyg-keyfact,
  .wyg-tile,
  .wyg-list-card,
  .wyg-clarity-card,
  .wyg-rollout-card,
  .wyg-prodcat-card,
  .wyg-path-card,
  .wyg-scope-card,
  .wyg-cta-panel,
  .wyg-pull-quote,
  .wyg-stat-card,
  .wyg-attribute,
  .wyg-disclosure-card,
  .wyg-ops-item,
  .wyg-mkt-item,
  .wyg-boundary-card,
  .wyg-campaigns-card,
  .wyg-chip,
  .wyg-foundation-doc {
    background: rgb(21 68 64 / 0.88);
  }
  .wyg-nav {
    background-color: rgb(255 255 255 / 0.98);
  }
}


/* ============================================================================
 * 20. Mobile + responsive refinements
 *      - Mobile: background-attachment: fixed kills iOS scroll perf, so
 *        downgrade to scroll on small screens.
 *      - Reduced motion: also disable iOS-painful fixed background.
 *      - Tighten container padding at 480 / 390 narrow-mobile widths.
 * ============================================================================ */
@media (max-width: 768px) {
  body.wyg-page {
    background-attachment: scroll;
  }
  .wyg-ambient-bloom-green-bl {
    width: 24rem;
    height: 24rem;
    filter: blur(70px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.wyg-page {
    background-attachment: scroll;
  }
}

/* 1280px: tighten container and grid gaps slightly */
@media (max-width: 1280px) {
  .wyg-container {
    max-width: 70rem;
  }
}

/* 1024px: drop ops grid, prodcat grid already drop. Adjust hero. */
@media (max-width: 1024px) {
  .wyg-hero {
    padding-top: clamp(6.5rem, 12vw, 8rem);
  }
}

/* 480px: tighten container padding for narrow phones */
@media (max-width: 480px) {
  .wyg-container {
    padding-inline: var(--space-4, 1rem);
  }
  .wyg-hero-title {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
  }
  .wyg-investment-amount {
    font-size: clamp(2.75rem, 11vw, 3.5rem);
  }
  .wyg-section {
    padding-block: clamp(var(--space-8, 2rem), 8vw, var(--space-12, 3rem));
  }
  .wyg-pill {
    font-size: 0.75rem;
  }
}

/* 390px: very narrow */
@media (max-width: 390px) {
  .wyg-container {
    padding-inline: var(--space-3, 0.75rem);
  }
  .wyg-hero-title {
    font-size: 2rem;
  }
  .wyg-section-heading h2 {
    font-size: 1.25rem;
    letter-spacing: 0.04em;
  }
  .wyg-attribute {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  }
}


/* ============================================================================
 * 22. Brand-authority additions
 *      Hero logo (light variant on dark canvas), footer logo (light variant
 *      on dark canvas), and verbatim Required Program Disclaimer placed
 *      directly above the commitment-step CTA buttons.
 * ============================================================================ */

/* 22.1  Hero logo — REMOVED at user request.
 *       The hero now relies on the floating nav-bar logo. The certified
 *       badge sits alone in the hero-top row (original right-aligned
 *       behavior restored). Logo CSS below is retained as dormant.    */
.wyg-hero-top {
  justify-content: flex-end;
}
.wyg-hero-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-md, 0.75rem);
}
.wyg-hero-logo img {
  display: block;
  width: clamp(180px, 26vw, 280px);
  height: auto;
}
.wyg-hero-logo:focus-visible {
  outline: 2px solid var(--color-radiant-gold, #fdd841);
  outline-offset: 4px;
}

/* 22.2  Footer logo
 *       Placed above the disclosures heading on the deep-green footer
 *       band. Uses the light horizontal variant because this canvas is
 *       dark (the dark variant would not be legible). */
.wyg-footer-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(var(--space-6, 1.5rem), 3vw, var(--space-9, 2.25rem));
}
.wyg-footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-md, 0.75rem);
}
.wyg-footer-logo img {
  display: block;
  width: clamp(180px, 22vw, 240px);
  height: auto;
  opacity: 0.96;
}
.wyg-footer-logo:focus-visible {
  outline: 2px solid var(--color-radiant-gold, #fdd841);
  outline-offset: 4px;
}

/* 22.3  Required Program Disclaimer block above commitment CTA
 *       Compact card-style disclaimer that sits between the CTA header
 *       and the action buttons. Reads as quiet legal acknowledgement,
 *       not as marketing copy. Verbatim language; do not edit without
 *       reviewing the FTC linter. */
.wyg-cta-disclaimer {
  position: relative;
  padding: clamp(var(--space-4, 1rem), 2vw, var(--space-5, 1.25rem)) clamp(var(--space-5, 1.25rem), 3vw, var(--space-6, 1.5rem));
  border-radius: var(--radius-md, 0.75rem);
  background-color: rgb(6 22 20 / 0.32);
  border: 1px solid rgb(223 247 193 / 0.16);
  border-left: 3px solid var(--color-radiant-gold, #fdd841);
  max-width: 56rem;
}
.wyg-cta-disclaimer-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}
.wyg-cta-disclaimer-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(255 252 229 / 0.88);
  margin: 0;
}


/* ============================================================================
 * 23. Visual separation system + frosted-edge cards
 *      Flat canvas, with explicit darker section bands and one featured
 *      section. All cards get a subtle frost halo on the inner edges so
 *      the glass treatment feels softer and more dimensional without
 *      reading as glow.
 * ============================================================================ */


/* 23.1  Section band — slightly darker than the base canvas.
 *       Applied to alternating major sections to create visual rhythm.
 *       Uses a faint linear gradient so the band edges feather subtly
 *       into the canvas rather than reading as hard rectangles. */
.wyg-section-band {
  position: relative;
}
.wyg-section-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(6 22 20 / 0.18) 0%,
      rgb(6 22 20 / 0.32) 12%,
      rgb(6 22 20 / 0.32) 88%,
      rgb(6 22 20 / 0.18) 100%
    );
  z-index: 0;
}
.wyg-section-band > .wyg-container {
  position: relative;
  z-index: 1;
}


/* 23.2  Section featured — the "Marketing, Brand & Launch Materials"
 *       treatment. A subtle lifted panel with two Radiant Gold hairlines
 *       at top + bottom, a faint warm sheen in the panel itself, and an
 *       eyebrow chip that reads "Featured Toolkit". The eyebrow + section
 *       heading are scaled up slightly inside this section. */
.wyg-section-featured {
  position: relative;
}
.wyg-section-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Soft warm sheen down the panel */
    linear-gradient(
      180deg,
      rgb(253 216 65 / 0.025) 0%,
      rgb(253 216 65 / 0.045) 30%,
      rgb(253 216 65 / 0.045) 70%,
      rgb(253 216 65 / 0.020) 100%
    ),
    /* Slightly lifted Dealer Green tone vs. the base canvas */
    linear-gradient(
      180deg,
      rgb(40 110 104 / 0.16) 0%,
      rgb(40 110 104 / 0.20) 50%,
      rgb(40 110 104 / 0.16) 100%
    );
  z-index: 0;
}
.wyg-section-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Top Radiant Gold hairline */
    linear-gradient(
      180deg,
      rgb(253 216 65 / 0.48) 0%,
      rgb(253 216 65 / 0.48) 1.5px,
      transparent 1.5px
    ),
    /* Bottom Radiant Gold hairline */
    linear-gradient(
      0deg,
      rgb(253 216 65 / 0.48) 0%,
      rgb(253 216 65 / 0.48) 1.5px,
      transparent 1.5px
    );
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  z-index: 0;
}
.wyg-section-featured > .wyg-container {
  position: relative;
  z-index: 1;
}

/* Featured eyebrow chip */
.wyg-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  margin: 0 0 var(--space-4, 1rem) 0;
  border-radius: 999px;
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.40);
  color: var(--color-radiant-gold, #fdd841);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wyg-featured-eyebrow-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-radiant-gold, #fdd841);
  box-shadow: 0 0 8px rgb(253 216 65 / 0.55);
}

/* Heading lift inside the featured section */
.wyg-section-featured .wyg-section-heading h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.01em;
}

/* Marketing items get a subtle border accent in the featured section */
.wyg-section-featured .wyg-mkt-item {
  border-top: 2px solid rgb(253 216 65 / 0.32);
}
.wyg-section-featured .wyg-mkt-title {
  color: var(--color-radiant-gold, #fdd841);
}


/* 23.3  Frosted-edge cards — shared across all card classes.
 *       Subtle frost halo that fades from the edges inward, plus a
 *       slightly brighter top highlight and faint left/right rails.
 *       Reads as light catching the glass, not as glow.              */
.wyg-tile,
.wyg-list-card,
.wyg-mkt-item,
.wyg-rollout-card,
.wyg-prodcat-card,
.wyg-ops-item,
.wyg-path-card,
.wyg-stat-card,
.wyg-keyfact,
.wyg-investment-card,
.wyg-cta-panel,
.wyg-foundation-doc {
  border: 1px solid rgb(255 252 229 / 0.14);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 -1px 0 rgb(255 252 229 / 0.06),
    inset 1px 0 0 rgb(255 252 229 / 0.05),
    inset -1px 0 0 rgb(255 252 229 / 0.05),
    inset 0 0 28px rgb(255 252 229 / 0.04);
}

/* Smaller chip/pill/attribute cards get a lighter version of the same
 * treatment — same logic, scaled down so they don't feel heavy. */
.wyg-chip,
.wyg-pill,
.wyg-attribute {
  border: 1px solid rgb(255 252 229 / 0.16);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 0.20),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 0 12px rgb(255 252 229 / 0.04);
}


/* 23.4  Certification badge inside the investment card
 *       Badge was moved from the hero-top row to sit centered above the
 *       "ONE-TIME PROGRAM FEE" label. Center it within the card and give
 *       it a small bottom margin so it doesn't crowd the label. */
.wyg-certified-badge-card {
  align-self: center;
  margin: 0 auto var(--space-4, 1rem) auto;
}
.wyg-investment-card {
  /* Allow the centered badge to use auto margins by ensuring the card's
   * content stack treats children as block-aligned. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


/* ============================================================================
 * 24. Editorial image bands
 *      Wide cinematic image panels placed between dense sections to add
 *      visual variety and break up the card rhythm. Treated as part of
 *      the design system: same frosted-edge box-shadow stack as the
 *      other glass cards, plus a soft Dealer Green vignette at the top
 *      and bottom of each image so it feathers into the canvas.
 * ============================================================================ */

.wyg-section-image {
  padding-block: clamp(var(--space-6, 1.5rem), 3vw, var(--space-10, 2.5rem));
}

.wyg-image-band {
  margin: 0;
  position: relative;
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  overflow: hidden;
  border: 1px solid rgb(255 252 229 / 0.14);
  /* Same depth + frosted-edge treatment as the other glass cards */
  box-shadow:
    0 18px 40px rgb(0 0 0 / 0.40),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 -1px 0 rgb(255 252 229 / 0.06),
    inset 1px 0 0 rgb(255 252 229 / 0.05),
    inset -1px 0 0 rgb(255 252 229 / 0.05);
  aspect-ratio: 21 / 9;
  background-color: rgb(21 68 64 / 0.4);
}

.wyg-image-band-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Soft Dealer Green vignette at the top and bottom edges of each image
 * so the panel feathers into the canvas rather than sitting as a hard
 * rectangle. Very subtle — the photo is still the focus. */
.wyg-image-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgb(20 59 56 / 0.22) 0%,
      transparent 14%,
      transparent 78%,
      rgb(20 59 56 / 0.34) 100%);
}

/* On narrow viewports, soften the cinematic 21:9 to something taller so
 * the image doesn't read as a thin sliver of texture. */
@media (max-width: 760px) {
  .wyg-image-band {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 480px) {
  .wyg-image-band {
    aspect-ratio: 4 / 3;
  }
}


/* ============================================================================
 * 25. Dealer Foundation — image-card grid
 *      Replaces the decorative document stack + bullet list with a 6-card
 *      image grid. Each card has a fixed 4:3 image area on top (proportion
 *      locked across all viewports via aspect-ratio) and a body below with
 *      a small gold number badge, the section title, and a description.
 *      Same frosted-edge treatment as the rest of the design system.
 * ============================================================================ */

.wyg-foundation-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-5, 1.25rem), 2vw, var(--space-7, 1.75rem));
}

.wyg-foundation-card {
  display: flex;
  flex-direction: column;
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgb(32 96 92 / 0.38) 0%,
    rgb(21 68 64 / 0.55) 100%
  );
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgb(255 252 229 / 0.14);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 -1px 0 rgb(255 252 229 / 0.06),
    inset 1px 0 0 rgb(255 252 229 / 0.05),
    inset -1px 0 0 rgb(255 252 229 / 0.05),
    inset 0 0 28px rgb(255 252 229 / 0.04);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}
.wyg-foundation-card:hover {
  transform: translateY(-3px);
  border-color: rgb(253 216 65 / 0.30);
}

/* Image area — proportion locked at 4:3, preserved across every viewport.
 * Per the requirement "we want the same image proportion" on mobile, the
 * aspect-ratio is intentionally NOT changed in any media query. The image
 * fills the box with object-fit: cover. */
.wyg-foundation-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgb(20 59 56 / 0.4);
  position: relative;
}
.wyg-foundation-image-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Subtle 1px hairline between image and body so the image edge reads as
 * intentional, not as a seam. */
.wyg-foundation-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgb(255 252 229 / 0.08);
  pointer-events: none;
}

/* Body — number eyebrow + title + description in a clean vertical stack. */
.wyg-foundation-body {
  padding: clamp(var(--space-5, 1.25rem), 2.4vw, var(--space-7, 1.75rem));
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  flex: 1;
}

/* Override the legacy circular number-badge styling for the card layout.
 * The new number is a small gold pill that reads as an editorial eyebrow. */
.wyg-foundation-card .wyg-foundation-num {
  align-self: flex-start;
  width: auto;
  height: auto;
  display: inline-block;
  background: none;
  border: 1px solid rgb(253 216 65 / 0.40);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  color: var(--color-radiant-gold, #fdd841);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.wyg-foundation-card .wyg-foundation-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  color: var(--color-light-linen, #fffce5);
}

.wyg-foundation-card .wyg-foundation-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgb(255 252 229 / 0.82);
}

/* Responsive — collapse to 2 then 1 column, but the image's 4:3 ratio
 * stays the same at every breakpoint. */
@media (max-width: 1023px) {
  .wyg-foundation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .wyg-foundation-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================================================================
 * 26. Image swap for the rotating Dealer Foundation stack
 *      Restored the original rotating stack + semantic list layout. The
 *      decorative tab + label + lines treatment inside each doc card is
 *      replaced with the actual section imagery. The parent stack carries
 *      aspect-ratio: 4/5, so every doc card holds that same proportion at
 *      every viewport (the user-requested "same image proportion on
 *      mobile" constraint). The image fills via absolute positioning so
 *      it bleeds to the card's rounded edges without fighting the legacy
 *      flex/padding rules left on .wyg-foundation-doc.
 * ============================================================================ */

.wyg-foundation-doc {
  overflow: hidden;
}

/* Photo is centered on the card on BOTH axes (translate-from-center) and
 * sized to its natural aspect ratio. max-width / max-height cap the photo
 * so there is always at least clamp(1rem, 4%, 1.5rem) of card-background
 * padding between the photo's actual edges and the card edges, on every
 * side. Top padding = bottom padding, left padding = right padding (the
 * "even padding all around" effect). The card's Dealer Green glass shows
 * through the padding band. */
.wyg-foundation-doc-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2 * clamp(1rem, 4%, 1.5rem));
  max-height: calc(100% - 2 * clamp(1rem, 4%, 1.5rem));
  width: auto;
  height: auto;
  display: block;
}


/* ============================================================================
 * 27. Dealer Marketing Launch Package — detailed highlight
 *      Sits inside the FEATURED Marketing section, after the 6-card grid.
 *      Reads as a "spec sheet" deep dive: deep Dealer Green glass panel,
 *      Radiant Gold eyebrow + accents, 5-column inventory grid that
 *      collapses to 2-up and 1-up at smaller widths.
 * ============================================================================ */

.wyg-launch-pkg {
  margin-top: clamp(var(--space-9, 2.25rem), 5vw, var(--space-12, 3rem));
  padding: clamp(var(--space-7, 1.75rem), 4vw, var(--space-10, 2.5rem));
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  background: linear-gradient(
    160deg,
    rgb(21 68 64 / 0.55) 0%,
    rgb(12 37 34 / 0.72) 100%
  );
  border: 1px solid rgb(255 252 229 / 0.14);
  /* Same frosted-edge depth as the rest of the glass system, slightly
   * deeper drop-shadow to lift this panel above the marketing items. */
  box-shadow:
    0 24px 48px rgb(0 0 0 / 0.36),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 -1px 0 rgb(255 252 229 / 0.06),
    inset 1px 0 0 rgb(255 252 229 / 0.05),
    inset -1px 0 0 rgb(255 252 229 / 0.05),
    inset 0 0 32px rgb(255 252 229 / 0.04);
  position: relative;
}

/* A Radiant Gold hairline on the top edge so the panel reads as a featured
 * deep-dive instead of just another card. */
.wyg-launch-pkg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(253 216 65 / 0.55) 18%,
    rgb(253 216 65 / 0.85) 50%,
    rgb(253 216 65 / 0.55) 82%,
    transparent 100%
  );
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem)) clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem)) 0 0;
  pointer-events: none;
}

.wyg-launch-pkg-header {
  margin-bottom: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
}

.wyg-launch-pkg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  margin: 0 0 var(--space-4, 1rem) 0;
  border-radius: 999px;
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.40);
  color: var(--color-radiant-gold, #fdd841);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wyg-launch-pkg-eyebrow-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-radiant-gold, #fdd841);
  box-shadow: 0 0 8px rgb(253 216 65 / 0.55);
}

.wyg-launch-pkg-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-light-linen, #fffce5);
}

/* Subtitle below the title — short pitch reinforcing the value */
.wyg-launch-pkg-subtitle {
  margin: var(--space-3, 0.75rem) 0 0 0;
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.55;
  color: rgb(255 252 229 / 0.78);
}

/* At-a-glance stats strip — 4 punchy numbers framed by gold hairlines.
 * Sits above the body intro so readers immediately understand the scope. */
.wyg-launch-pkg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(var(--space-7, 1.75rem), 3vw, var(--space-9, 2.25rem)) 0;
  padding: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem)) 0;
  border-top: 1px solid rgb(253 216 65 / 0.30);
  border-bottom: 1px solid rgb(253 216 65 / 0.30);
}
.wyg-launch-pkg-stat {
  text-align: center;
  padding: 0 var(--space-3, 0.75rem);
  border-right: 1px solid rgb(255 252 229 / 0.08);
}
.wyg-launch-pkg-stat:last-child {
  border-right: none;
}
.wyg-launch-pkg-stat-value {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--color-radiant-gold, #fdd841);
  letter-spacing: -0.02em;
}
.wyg-launch-pkg-stat-plus {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.05em;
  opacity: 0.85;
}
.wyg-launch-pkg-stat-label {
  margin: var(--space-2, 0.5rem) 0 0 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 252 229 / 0.80);
}

.wyg-launch-pkg-intro {
  max-width: 64ch;
  margin: 0 0 clamp(var(--space-7, 1.75rem), 3vw, var(--space-9, 2.25rem)) 0;
}
.wyg-launch-pkg-intro p {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgb(255 252 229 / 0.90);
}
.wyg-launch-pkg-intro p:last-child {
  margin-bottom: 0;
}

/* Balanced 3+2 grid — 6-column underlying grid where the first 3 items
 * each span 2 cols (row 1: 3 cards) and the last 2 items each span 3
 * cols (row 2: 2 wider cards). Visually rhythmic, no orphan card. */
.wyg-launch-pkg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
}

.wyg-launch-pkg-item {
  grid-column: span 2;
  padding: clamp(var(--space-5, 1.25rem), 2.2vw, var(--space-6, 1.5rem));
  border-radius: var(--radius-lg, 1rem);
  background-color: rgb(255 252 229 / 0.04);
  border: 1px solid rgb(255 252 229 / 0.10);
  box-shadow: inset 0 1px 0 rgb(255 252 229 / 0.10);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out,
    background-color 200ms ease-out;
}
.wyg-launch-pkg-item:nth-child(4),
.wyg-launch-pkg-item:nth-child(5) {
  grid-column: span 3;
}
.wyg-launch-pkg-item:hover {
  transform: translateY(-2px);
  border-color: rgb(253 216 65 / 0.36);
  background-color: rgb(255 252 229 / 0.06);
}

/* Category icon — Radiant Gold stroke inside a tinted gold pill. */
.wyg-launch-pkg-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.75rem);
  background-color: rgb(253 216 65 / 0.10);
  border: 1px solid rgb(253 216 65 / 0.32);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-launch-pkg-item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.wyg-launch-pkg-item-title {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  padding-bottom: var(--space-3, 0.75rem);
  border-bottom: 1px solid rgb(253 216 65 / 0.22);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-radiant-gold, #fdd841);
}

.wyg-launch-pkg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.wyg-launch-pkg-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(255 252 229 / 0.85);
}
.wyg-launch-pkg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--color-radiant-gold, #fdd841);
  opacity: 0.85;
}

.wyg-launch-pkg-outro {
  margin: clamp(var(--space-7, 1.75rem), 3vw, var(--space-9, 2.25rem)) 0 0 0;
  max-width: 64ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgb(255 252 229 / 0.78);
  font-style: italic;
}

/* Responsive grid: 3+2 → 2-up (with the 5th spanning full width) → 1-up */
@media (max-width: 960px) {
  .wyg-launch-pkg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wyg-launch-pkg-item,
  .wyg-launch-pkg-item:nth-child(4) {
    grid-column: span 1;
  }
  .wyg-launch-pkg-item:nth-child(5) {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .wyg-launch-pkg-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .wyg-launch-pkg-item:nth-child(5) {
    grid-column: span 1;
  }
  /* Stats collapse to 2-up so they stay punchy on phones */
  .wyg-launch-pkg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 1rem) 0;
  }
  .wyg-launch-pkg-stat {
    border-right: none;
  }
  .wyg-launch-pkg-stat:nth-child(odd) {
    border-right: 1px solid rgb(255 252 229 / 0.08);
  }
  .wyg-launch-pkg-stat:nth-child(-n+2) {
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid rgb(255 252 229 / 0.08);
  }
}


/* ============================================================================
 * 28. Placement callout — the "A Word On Placement" positive statement.
 *      Sits between the pull quote and the attribute pills. Reframes
 *      "no protected territory" as a curation principle by lifting the
 *      exact language from the dealer overview document.
 * ============================================================================ */

.wyg-placement-callout {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(var(--space-6, 1.5rem), 3vw, var(--space-8, 2rem))
           clamp(var(--space-7, 1.75rem), 3vw, var(--space-10, 2.5rem));
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  background: linear-gradient(
    160deg,
    rgb(21 68 64 / 0.40) 0%,
    rgb(12 37 34 / 0.55) 100%
  );
  border: 1px solid rgb(255 252 229 / 0.14);
  border-left: 3px solid var(--color-radiant-gold, #fdd841);
  box-shadow:
    0 14px 30px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 252 229 / 0.18);
}
.wyg-placement-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md, 0.75rem);
  background-color: rgb(253 216 65 / 0.12);
  border: 1px solid rgb(253 216 65 / 0.32);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-placement-callout-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}
.wyg-placement-callout-content {
  flex: 1;
  min-width: 0;
}
.wyg-placement-callout-eyebrow {
  margin: 0 0 var(--space-2, 0.5rem) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-placement-callout-text {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
  color: rgb(255 252 229 / 0.92);
}
@media (max-width: 640px) {
  .wyg-placement-callout {
    flex-direction: column;
    text-align: left;
    padding: clamp(var(--space-5, 1.25rem), 4vw, var(--space-7, 1.75rem));
  }
}


/* ============================================================================
 * 29. Section heading icons
 *      Small brand icons placed to the left of selected section h2 titles
 *      (Receive, Foundation, Certification, Marketing, Operations, Business
 *      Paths, CTA). Icons render at a consistent size regardless of source
 *      format (AVIF or SVG). Display as their natural colors — the icons
 *      are AITCOH brand-tinted so they read well on the Dealer Green canvas.
 * ============================================================================ */

/* When an h2 contains a .wyg-section-heading-icon, switch its layout to
 * inline-flex so the icon and text align cleanly. Other h2s without an
 * icon are unaffected. Uses :has() which is well-supported in current
 * browsers (Safari 15.4+, Chrome 105+, Firefox 121+). */
.wyg-section-heading h2:has(.wyg-section-heading-icon),
.wyg-cta-title:has(.wyg-section-heading-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

/* Icon size — responsive scaling with a hard 150px ceiling per the user
 * direction. Floor at 60px so icons stay legible on phones. */
.wyg-section-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(60px, 8vw, 150px);
  height: clamp(60px, 8vw, 150px);
  max-width: 150px;
  max-height: 150px;
}
.wyg-section-heading-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

/* The CTA chat icon scales a bit more aggressively to balance the larger
 * CTA title (still capped at the same 150px ceiling). */
.wyg-cta-title .wyg-section-heading-icon {
  width: clamp(72px, 10vw, 150px);
  height: clamp(72px, 10vw, 150px);
}

/* On narrow viewports, drop the icon down by reducing the gap so the
 * heading line wraps cleanly without the icon orphaning above. */
@media (max-width: 560px) {
  .wyg-section-heading h2:has(.wyg-section-heading-icon),
  .wyg-cta-title:has(.wyg-section-heading-icon) {
    gap: var(--space-2, 0.5rem);
  }
  .wyg-section-heading-icon {
    width: clamp(48px, 12vw, 80px);
    height: clamp(48px, 12vw, 80px);
  }
}


/* ============================================================================
 * 30. "What You Receive" hero image — small editorial image immediately
 *      above the section title. Capped at 300px max-width per direction,
 *      centered, with the same frosted-edge box-shadow treatment as the
 *      other glass elements on the page so it sits cohesively in the
 *      design system rather than looking like a stray asset.
 * ============================================================================ */

.wyg-receive-hero-image {
  margin: 0 auto clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem)) auto;
  max-width: 300px;
  display: block;
}
.wyg-receive-hero-image img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: clamp(var(--radius-lg, 1rem), 2vw, var(--radius-xl, 1.25rem));
}


/* ============================================================================
 * 31. Larger eyebrow modifier
 *      Applied to specific list-card eyebrows that function as real
 *      subheadings (Lead Magnet Examples, Referral Development Ideas,
 *      Campaign Examples, What Is Included). Keeps the all-caps editorial
 *      treatment but bumps the size from ~0.7rem to ~1.125-1.25rem.
 *      Also enlarges the "A Word On Placement" callout eyebrow to match.
 * ============================================================================ */

.wyg-list-eyebrow-lg {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
}

/* Placement callout eyebrow scales up to match the new section subheadings */
.wyg-placement-callout-eyebrow {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
}


/* ============================================================================
 * 32. Video highlight section
 *      A featured, theater-feel section that frames the dealer cartoon
 *      video in a premium frosted-glass panel. Uses a calmer, slightly
 *      darker section background than the rest of the page so the video
 *      itself reads as the brightest, most attention-grabbing element on
 *      the screen. Gold corner accents + a gold top-edge hairline echo
 *      the rest of the design system's featured-section language.
 * ============================================================================ */

.wyg-section-video {
  position: relative;
  padding-block: clamp(var(--space-9, 2.25rem), 5vw, var(--space-14, 3.5rem));
}
/* Theater background — slightly darker tone for the video section so the
 * video itself becomes the bright focal point. */
.wyg-section-video::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgb(6 22 20 / 0.35) 0%,
      rgb(6 22 20 / 0.55) 50%,
      rgb(6 22 20 / 0.35) 100%
    );
  z-index: 0;
}
.wyg-section-video > .wyg-container {
  position: relative;
  z-index: 1;
}

/* Premium video frame — glass card treatment, capped width so the video
 * doesn't sprawl on ultrawide displays, generous depth shadow to lift
 * it above the theater background, and frosted edges that frame the
 * picture without competing with it. */
.wyg-video-frame {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  overflow: hidden;
  background-color: #0a201d;
  border: 1px solid rgb(255 252 229 / 0.14);
  box-shadow:
    0 32px 64px rgb(0 0 0 / 0.50),
    0 8px 20px rgb(0 0 0 / 0.30),
    inset 0 1px 0 rgb(255 252 229 / 0.22),
    inset 0 -1px 0 rgb(255 252 229 / 0.06),
    inset 1px 0 0 rgb(255 252 229 / 0.05),
    inset -1px 0 0 rgb(255 252 229 / 0.05),
    inset 0 0 40px rgb(255 252 229 / 0.04);
}

/* Top-edge Radiant Gold hairline — same language as the Launch Package
 * highlight, so this section reads as a sibling premium moment. */
.wyg-video-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(253 216 65 / 0.55) 18%,
    rgb(253 216 65 / 0.85) 50%,
    rgb(253 216 65 / 0.55) 82%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Four Radiant Gold corner brackets — subtle filmstrip/theater detail. */
.wyg-video-corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: rgb(253 216 65 / 0.65);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
}
.wyg-video-corner-tl {
  top: 0.75rem;
  left: 0.75rem;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 0.35rem;
}
.wyg-video-corner-tr {
  top: 0.75rem;
  right: 0.75rem;
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-right-radius: 0.35rem;
}
.wyg-video-corner-bl {
  bottom: 0.75rem;
  left: 0.75rem;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-bottom-left-radius: 0.35rem;
}
.wyg-video-corner-br {
  bottom: 0.75rem;
  right: 0.75rem;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 0.35rem;
}

/* Video element — 16:9 aspect ratio locked across all viewports so the
 * frame's proportions stay consistent. */
.wyg-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #0a201d;
  position: relative;
  z-index: 1;
}

/* On narrow viewports, soften corner-bracket positioning so they don't
 * crowd the controls. */
@media (max-width: 560px) {
  .wyg-video-corner {
    width: 0.875rem;
    height: 0.875rem;
  }
  .wyg-video-corner-tl,
  .wyg-video-corner-tr { top: 0.5rem; }
  .wyg-video-corner-bl,
  .wyg-video-corner-br { bottom: 0.5rem; }
  .wyg-video-corner-tl,
  .wyg-video-corner-bl { left: 0.5rem; }
  .wyg-video-corner-tr,
  .wyg-video-corner-br { right: 0.5rem; }
}

/* Accessibility: respect reduced-motion by not auto-playing or animating
 * any future motion treatment (the video itself only plays on user
 * action — preload="metadata", no autoplay — so this is preventative). */
@media (prefers-reduced-motion: reduce) {
  .wyg-video {
    /* no transitions to disable currently — placeholder for future motion */
  }
}


/* ============================================================================
 * 33. NEW SECTIONS introduced by the PDF-aligned content refactor:
 *      - Dealer Advantages At A Glance (checkmark card grid)
 *      - Lead Gen card spacing variant
 *      - "What The Dealer Receives" gold-checkmark list
 *      - Dealer Success Foundation featured block
 *      - Footer final-note italic small print
 * ============================================================================ */

/* 33.1  Dealer Advantages At A Glance — 6 checkmark cards */
.wyg-advantages-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-4, 1rem), 2vw, var(--space-6, 1.5rem));
}
.wyg-advantage-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-4, 1rem), 1.5vw, var(--space-5, 1.25rem));
  padding: clamp(var(--space-5, 1.25rem), 2vw, var(--space-7, 1.75rem));
  border-radius: clamp(var(--radius-lg, 1rem), 2vw, var(--radius-xl, 1.25rem));
  background: linear-gradient(160deg, rgb(32 96 92 / 0.32) 0%, rgb(21 68 64 / 0.48) 100%);
  border: 1px solid rgb(255 252 229 / 0.14);
  box-shadow:
    0 12px 28px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 252 229 / 0.20),
    inset 0 0 24px rgb(255 252 229 / 0.04);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease-out;
}
.wyg-advantage-card:hover {
  transform: translateY(-2px);
  border-color: rgb(253 216 65 / 0.30);
}
.wyg-advantage-card p {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
  line-height: 1.5;
  color: rgb(255 252 229 / 0.92);
}
.wyg-advantage-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgb(253 216 65 / 0.16);
  border: 1px solid rgb(253 216 65 / 0.45);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-advantage-check svg {
  width: 1.1rem;
  height: 1.1rem;
}
@media (max-width: 760px) {
  .wyg-advantages-grid { grid-template-columns: 1fr; }
}

/* 33.2  Lead Gen card extra top margin (separates from Launch Package above) */
.wyg-leadgen-card {
  margin-top: clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem));
}

/* 33.3  "What The Dealer Receives" gold-checkmark list */
.wyg-receives-list {
  list-style: none;
  margin: 0 auto clamp(var(--space-8, 2rem), 4vw, var(--space-12, 3rem)) auto;
  padding: 0;
  max-width: 72rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}
.wyg-receives-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 1rem);
  padding: clamp(var(--space-4, 1rem), 2vw, var(--space-5, 1.25rem)) clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-7, 1.75rem));
  border-radius: var(--radius-lg, 1rem);
  background-color: rgb(255 252 229 / 0.04);
  border: 1px solid rgb(255 252 229 / 0.10);
  box-shadow: inset 0 1px 0 rgb(255 252 229 / 0.10);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.90);
}
.wyg-receives-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: rgb(253 216 65 / 0.16);
  border: 1px solid rgb(253 216 65 / 0.45);
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-receives-check svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* 33.4  Dealer Success Foundation featured block */
.wyg-success-foundation {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(var(--space-7, 1.75rem), 4vw, var(--space-10, 2.5rem)) clamp(var(--space-7, 1.75rem), 4vw, var(--space-12, 3rem));
  border-radius: clamp(var(--radius-xl, 1.25rem), 2vw, var(--radius-2xl, 1.5rem));
  background: linear-gradient(160deg, rgb(12 37 34 / 0.85) 0%, rgb(6 22 20 / 0.92) 100%);
  border: 1px solid rgb(255 252 229 / 0.14);
  border-top: 3px solid var(--color-radiant-gold, #fdd841);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.40), inset 0 1px 0 rgb(255 252 229 / 0.10);
}
.wyg-success-eyebrow {
  margin: 0 0 var(--space-3, 0.75rem) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-radiant-gold, #fdd841);
}
.wyg-success-text {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.65;
  color: rgb(255 252 229 / 0.92);
}

/* 33.5  Footer final note — small italic legal-style line */
.wyg-footer-finalnote {
  max-width: 72rem;
  margin: clamp(var(--space-7, 1.75rem), 4vw, var(--space-9, 2.25rem)) auto 0 auto;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(255 252 229 / 0.55);
  font-style: italic;
  text-align: center;
}




/* ============================================================================
 * 34. MOBILE WORLD-CLASS PASS
 *      Final consolidated mobile layer. Supersedes all earlier mobile
 *      patches. Wins via cascade order (last rules with same specificity
 *      take precedence over earlier media queries).
 *
 *      Goals: premium guided scroll, one clear idea per screen, tight
 *      spacing, generous tap targets, readable hierarchy, performant
 *      glass treatment, no horizontal overflow at 390px / 430px / 768px.
 * ============================================================================ */


/* ---- 34.1  Section heading icons STACK on mobile (icon above text) ----- */
@media (max-width: 760px) {
  .wyg-section-heading h2:has(.wyg-section-heading-icon),
  .wyg-cta-title:has(.wyg-section-heading-icon) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
  }
  .wyg-section-heading-icon {
    margin: 0 auto;
  }
}


/* ============================================================================
 * 34.2  Primary mobile breakpoint (≤ 760px)
 * ============================================================================ */
@media (max-width: 760px) {

  /* Container + section rhythm */
  .wyg-container {
    padding-inline: 1rem;
  }
  .wyg-section {
    padding-block: 2.75rem;
  }

  /* --- Nav bar: compact, premium, more screen real estate --- */
  .nav-floating {
    top: 10px;
    width: calc(100% - 24px);
    padding: 0.65rem 0.75rem;
    border-radius: 18px;
  }
  .nav-floating-logo img {
    max-width: 145px;
    height: auto;
  }
  /* Hamburger tap target stays at least 44px */
  .nav-floating-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Hide the nav CTA on the closed mobile bar. When the menu opens,
     the CTA appears at the bottom of the dropdown via sibling selector. */
  .nav-floating > .nav-floating-cta {
    display: none;
  }
  .nav-floating-links.is-open ~ .nav-floating-cta {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin: 0.75rem auto 0 auto;
    padding: 0.85rem 1.25rem;
    text-align: center;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  /* Mobile menu links: stacked with 48px minimum tap height */
  .nav-floating-links a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.5rem;
    font-size: 1rem;
  }

  /* --- Hero --- */
  .wyg-hero {
    padding-top: 5.5rem;
    padding-bottom: 2.75rem;
  }
  .wyg-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .wyg-hero-text {
    padding-left: 0;
    border-left: 0;
    text-align: center;
    align-items: center;
  }
  .wyg-hero-eyebrow {
    text-align: center;
  }
  .wyg-hero-title {
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1.02;
    text-align: center;
    margin-inline: auto;
  }
  .wyg-hero-lede {
    font-size: 1.05rem;
    max-width: 30ch;
    margin-inline: auto;
    text-align: center;
  }
  .wyg-hero-body {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 34ch;
    margin-inline: auto;
    text-align: center;
  }
  .wyg-investment-column {
    align-items: center;
  }
  .wyg-investment-card {
    padding: 1.35rem;
    border-radius: 22px;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }
  .wyg-investment-amount {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
  }
  .wyg-investment-chips {
    max-width: 22rem;
    margin-inline: auto;
  }

  /* --- Single-column grids --- */
  .wyg-keyfacts-row,
  .wyg-tile-grid,
  .wyg-mkt-grid,
  .wyg-launch-pkg-grid,
  .wyg-prodcat-grid,
  .wyg-path-grid,
  .wyg-scope-grid,
  .wyg-advantages-grid,
  .wyg-twocol,
  .wyg-ops-grid,
  .wyg-rollout-grid,
  .wyg-stat-grid {
    grid-template-columns: 1fr;
  }
  /* Reset any nth-child span overrides on the launch package grid */
  .wyg-launch-pkg-item:nth-child(4),
  .wyg-launch-pkg-item:nth-child(5) {
    grid-column: span 1;
  }

  /* --- Card padding + radius normalization --- */
  .wyg-keyfact,
  .wyg-tile,
  .wyg-mkt-item,
  .wyg-launch-pkg-item,
  .wyg-prodcat-card,
  .wyg-path-card,
  .wyg-scope-card,
  .wyg-advantage-card,
  .wyg-ops-item,
  .wyg-list-card,
  .wyg-rollout-card {
    padding: 1.25rem;
    border-radius: 20px;
  }

  /* Receives list items - keep checkmark stack but tighten padding */
  .wyg-receives-list li {
    padding: 1.1rem 1.25rem;
    border-radius: 18px;
  }

  /* --- Section headings: hide decorative side hairlines, center, scale --- */
  .wyg-section-heading {
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    text-align: center;
  }
  .wyg-section-heading::before,
  .wyg-section-heading::after {
    display: none;
  }
  .wyg-section-heading h2 {
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.15;
    text-align: center;
  }

  /* --- Section intro paragraph --- */
  .wyg-section-intro {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 34ch;
    margin-inline: auto;
    text-align: center;
  }

  /* --- Body copy in card bodies for readability --- */
  .wyg-tile-body,
  .wyg-mkt-body,
  .wyg-prodcat-body,
  .wyg-advantage-card p {
    font-size: 0.97rem;
    line-height: 1.55;
  }

  /* --- Dealer Marketing Launch Package: hero mobile section --- */
  .wyg-launch-pkg {
    padding: 1.25rem;
    border-radius: 24px;
  }
  .wyg-launch-pkg-header {
    text-align: center;
  }
  .wyg-launch-pkg-eyebrow {
    margin-inline: auto;
  }
  .wyg-launch-pkg-title {
    font-size: clamp(1.35rem, 7vw, 2rem);
    line-height: 1.15;
    text-align: center;
  }
  .wyg-launch-pkg-subtitle {
    text-align: center;
    margin-inline: auto;
  }
  /* Keep stats in a clean 2x2 grid on mobile so the headline numbers
     stay punchy instead of stacking into a tall column */
  .wyg-launch-pkg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .wyg-launch-pkg-stat {
    min-height: 6.25rem;
    padding: 1rem 0.75rem;
    border-right: none;
    border-bottom: none;
  }
  .wyg-launch-pkg-stat-value {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }
  .wyg-launch-pkg-stat-label {
    font-size: 0.75rem;
    line-height: 1.25;
  }
  .wyg-launch-pkg-intro,
  .wyg-launch-pkg-outro {
    text-align: center;
    margin-inline: auto;
  }

  /* --- Image bands: 16:10 on mobile to stay meaningful, not stretched --- */
  .wyg-image-band {
    aspect-ratio: 16 / 10;
    border-radius: 22px;
  }
  .wyg-section-image {
    padding-block: 1.5rem;
  }

  /* --- Video frame --- */
  .wyg-video-frame {
    border-radius: 22px;
  }

  /* --- Placement callout: stack icon above content on mobile --- */
  .wyg-placement-callout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
  }
  .wyg-placement-callout-content {
    text-align: center;
  }

  /* --- Dealer Success Foundation block --- */
  .wyg-success-foundation {
    padding: 1.5rem 1.25rem;
    border-radius: 22px;
  }

  /* --- CTA panel: centered content, full-width buttons --- */
  .wyg-cta-panel,
  .wyg-cta-panel-v2 {
    padding: 1.5rem 1.25rem;
    border-radius: 24px;
    text-align: center;
  }
  .wyg-cta-panel-v2 .wyg-cta-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .wyg-cta-panel-v2 .wyg-cta-headings,
  .wyg-cta-panel-v2 .wyg-cta-sub {
    text-align: center;
    max-width: 100%;
  }
  .wyg-cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .wyg-cta-button {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
    min-height: 48px;
  }

  /* --- Footer --- */
  .wyg-footer-logo-wrap {
    justify-content: center;
  }
  .wyg-footer-finalnote {
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: center;
    max-width: 34ch;
    margin-inline: auto;
  }
  .wyg-footer-copyright {
    text-align: center;
  }

  /* --- Receive hero image: respectable mobile size, centered --- */
  .wyg-receive-hero-image {
    margin: 0 auto 1.25rem auto;
  }
  .wyg-receive-hero-image img {
    max-width: 240px;
  }
}


/* ============================================================================
 * 34.3  Secondary mobile breakpoint (≤ 480px) — small phones
 * ============================================================================ */
@media (max-width: 480px) {

  .wyg-container {
    padding-inline: 0.875rem;
  }
  .wyg-section {
    padding-block: 2.35rem;
  }

  .wyg-hero {
    padding-top: 5rem;
  }
  .wyg-hero-title {
    font-size: clamp(2rem, 12vw, 2.6rem);
  }

  .wyg-keyfact,
  .wyg-tile,
  .wyg-mkt-item,
  .wyg-launch-pkg-item,
  .wyg-advantage-card,
  .wyg-prodcat-card,
  .wyg-ops-item {
    padding: 1.1rem;
  }

  .wyg-launch-pkg-stats {
    gap: 0.65rem;
  }
  .wyg-launch-pkg-stat {
    min-height: 5.75rem;
    padding: 0.85rem 0.65rem;
  }

  /* Image bands at very narrow widths: 4:3 keeps the photo meaningful */
  .wyg-image-band {
    aspect-ratio: 4 / 3;
  }

  /* Smaller section icons on very narrow widths */
  .wyg-section-heading-icon {
    width: 56px;
    height: 56px;
  }

  /* Investment card */
  .wyg-investment-card {
    padding: 1.1rem;
    border-radius: 18px;
  }

  /* Final footer note */
  .wyg-footer-finalnote {
    font-size: 0.8rem;
    padding-inline: 0.5rem;
  }
}


/* ============================================================================
 * 34.4  Mobile performance pass
 *       - Reduce backdrop-filter blur intensity (mobile GPUs struggle)
 *       - Dim and shrink ambient bloom decorations
 *       - background-attachment: scroll on mobile (fixed kills perf on iOS)
 * ============================================================================ */
@media (max-width: 760px) {
  .wyg-investment-card,
  .wyg-keyfact,
  .wyg-tile,
  .wyg-list-card,
  .wyg-launch-pkg,
  .wyg-launch-pkg-item,
  .wyg-prodcat-card,
  .wyg-path-card,
  .wyg-scope-card,
  .wyg-advantage-card,
  .wyg-cta-panel,
  .wyg-cta-panel-v2,
  .wyg-success-foundation,
  .wyg-placement-callout,
  .wyg-mkt-item,
  .wyg-ops-item {
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
  }
  .wyg-ambient,
  .wyg-ambient-bloom,
  .wyg-ambient-bloom-green-bl,
  .wyg-ambient-bloom-green-tr,
  .wyg-ambient-bloom-shadow-ml,
  .wyg-ambient-bloom-shadow-mr {
    opacity: 0.35;
    filter: blur(48px);
  }
  body.wyg-page {
    background-attachment: scroll;
  }
}


/* ============================================================================
 * 34.5  Reduced motion — respect user OS preference site-wide
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the certified badge from sweeping its gold shimmer for users
     with vestibular sensitivity */
  .wyg-certified-badge::before {
    display: none;
  }
}


/* ============================================================================
 * 35. HORIZONTAL OVERFLOW GUARD — definitive site-wide fix
 *      Prevents any rogue element from causing left/right scroll on mobile.
 *      Applies at all viewports because the guard is harmless on desktop
 *      and the scroll glitch can affect any narrow viewport.
 * ============================================================================ */

html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Any image / media element caps at parent width by default.
 * (Doesn't override explicit `width` attributes on title icons etc. —
 *  it just enforces an upper bound.) */
img,
svg,
video,
picture,
iframe {
  max-width: 100%;
}

/* Allow grid + flex items to shrink BELOW their min-content width so
 * long unbroken words / wide children can't blow out their container. */
.wyg-container,
.wyg-tile,
.wyg-mkt-item,
.wyg-launch-pkg-item,
.wyg-prodcat-card,
.wyg-keyfact,
.wyg-list-card,
.wyg-advantage-card,
.wyg-foundation-doc,
.wyg-launch-pkg-stat,
.wyg-investment-card,
.wyg-hero-text,
.wyg-investment-column,
.wyg-cta-panel,
.wyg-cta-panel-v2,
.wyg-success-foundation,
.wyg-placement-callout,
.wyg-placement-callout-content,
.wyg-receives-list li,
.wyg-ops-item,
.wyg-path-card,
.wyg-scope-card,
.wyg-rollout-card {
  min-width: 0;
}

/* Same for grid containers themselves so the grid can shrink with parent */
.wyg-keyfacts-row,
.wyg-tile-grid,
.wyg-mkt-grid,
.wyg-launch-pkg-grid,
.wyg-launch-pkg-stats,
.wyg-prodcat-grid,
.wyg-advantages-grid,
.wyg-twocol,
.wyg-rollout-grid,
.wyg-scope-grid,
.wyg-path-grid,
.wyg-ops-grid,
.wyg-stat-grid {
  min-width: 0;
}


/* ============================================================================
 * 36. CARD CONTAINMENT — bulletproof fit-within-viewport
 *      Root cause of cards bleeding past the right edge on mobile:
 *      box-sizing was never set, so width: 100% + padding overflowed
 *      the container. Adding border-box globally + max-width: 100% on
 *      every card class fixes the overflow. Card padding tightened to
 *      5px on mobile per direction.
 * ============================================================================ */

/* 36.1  Universal border-box — width INCLUDES padding + border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 36.2  Every card type capped at parent width — at every viewport.
 *       Removes any chance of an explicit width or grid item exceeding
 *       its container. */
.wyg-tile,
.wyg-mkt-item,
.wyg-launch-pkg,
.wyg-launch-pkg-item,
.wyg-prodcat-card,
.wyg-keyfact,
.wyg-list-card,
.wyg-advantage-card,
.wyg-foundation-doc,
.wyg-launch-pkg-stat,
.wyg-investment-card,
.wyg-cta-panel,
.wyg-cta-panel-v2,
.wyg-success-foundation,
.wyg-placement-callout,
.wyg-receives-list,
.wyg-receives-list li,
.wyg-ops-item,
.wyg-path-card,
.wyg-scope-card,
.wyg-rollout-card,
.wyg-video-frame,
.wyg-image-band,
.wyg-investment-chips,
.wyg-launch-pkg-stats {
  max-width: 100%;
  box-sizing: border-box;
}


/* ============================================================================
 * 37. MOBILE PADDING TIGHTEN (≤ 760px)
 *      Per direction: text inside any card has only 5px of padding on
 *      all sides on mobile. Keeps cards visually compact and guarantees
 *      content fits within the card without bleeding edges.
 *      Investment card keeps slightly more breathing room since the
 *      $134,900 value is the largest text element on the page.
 * ============================================================================ */
@media (max-width: 760px) {
  .wyg-tile,
  .wyg-mkt-item,
  .wyg-launch-pkg-item,
  .wyg-prodcat-card,
  .wyg-keyfact,
  .wyg-list-card,
  .wyg-advantage-card,
  .wyg-ops-item,
  .wyg-path-card,
  .wyg-scope-card,
  .wyg-rollout-card,
  .wyg-launch-pkg-stat,
  .wyg-receives-list li,
  .wyg-success-foundation,
  .wyg-placement-callout,
  .wyg-cta-panel,
  .wyg-cta-panel-v2,
  .wyg-launch-pkg {
    padding: 5px;
  }

  /* Investment card is the visual anchor of the hero — keep enough
     padding so the $134,900 amount and chips below feel premium. */
  .wyg-investment-card {
    padding: 12px;
  }

  /* List items inside cards (where the text actually sits) shouldn't
     add their own padding on top of the new 5px card padding. */
  .wyg-tile-body,
  .wyg-mkt-body,
  .wyg-prodcat-body,
  .wyg-keyfact-note,
  .wyg-launch-pkg-list,
  .wyg-launch-pkg-list li,
  .wyg-list,
  .wyg-list li,
  .wyg-advantage-card p,
  .wyg-success-text,
  .wyg-placement-callout-text {
    margin: 0;
    padding: 0;
  }

  /* Spacing BETWEEN list items inside cards stays useful via gap, not
     padding. */
  .wyg-list,
  .wyg-launch-pkg-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  /* Card titles get a tiny bit of bottom margin so they don't collide
     with body text below them. */
  .wyg-tile-title,
  .wyg-mkt-title,
  .wyg-prodcat-title,
  .wyg-launch-pkg-item-title,
  .wyg-path-title {
    margin-bottom: 5px;
  }
}