/* =============================================================================
   aerial-handoff.css
   -----------------------------------------------------------------------------
   Purpose: Provide a single stylesheet that gives pages generated in Lovable
   pixel-accurate rendering in BOTH the Lovable preview environment AND in
   FusionCMS production after handoff for the Aerial Wakeboarding tenant.

   How to use:
   1. Load this file once globally in the FusionCMS v5 Aerial theme
      (recommended: include it after theme.css so it layers on top without
      conflicting with the existing Bootstrap-derived rules).
   2. When Lovable generates content_html that uses class names prefixed with
      `.aerial-*`, those classes resolve against the rules in this file —
      producing identical visual output to the live site.
   3. No Tailwind runtime required. All values here are hand-written CSS that
      references either verified Aerial hex values or --aerial-* custom
      properties declared at the top of this file.

   Source of truth for all values: mem://design/aerial-branding.md and the
   verified brand tokens collected during the Cycle 1 branding extraction
   (site_id 0953958f-756f-4075-a3bc-1ae8e82a488b — production-Aerial).


   Version: 1.0 — 2026-04-21 (Cycle 2 pivot: first Aerial handoff CSS,
   mirrors Stryker §6b markup contract for #compare card-stack,
   feature-grid collapse, CTA stack, hero/section sizing — replaces
   SHARED_CLAUSES Pattern A/BUTTON TYPOGRAPHY inlines)

   KEY BRAND DIFFERENCES vs Stryker (for future-me reading this):
     - NO colored-heading rule. H2/H3/H4/H5 all render in body text color.
       Do NOT paint H4/H5 in the primary color; that's a Stryker convention.
     - Primary is cyan (#00A1D6), accent is orange (#EF963C). Both are used
       on buttons; primary for the dominant CTA, accent for "recommended"
       emphasis (Airborne 2.0 featured column, Most Popular badges).
     - Button typography is IDENTICAL to Stryker (Montserrat 12px 700
       uppercase 4px radius) — intentional shared platform convention
       across PW Marine OEM sub-brands.
     - Two fonts only: Oswald, "Oswald Fallback" (headings) + Barlow Semi Condensed, "Barlow Semi Condensed Fallback" (body).
       Stryker has 4 font families; Aerial has 2. No secondary-display
       or accent-display families.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   §1 — Design tokens as CSS custom properties
   These are the canonical values. Everything below references them.
   ----------------------------------------------------------------------------- */
:root {
  /* Colors — primary palette (cyan) */
  --aerial-primary:               #00a1d6;
  --aerial-primary-hover-bg:      #008cb8;
  --aerial-primary-hover-border:  #0082ab;
  --aerial-primary-active-bg:     #0082ab;
  --aerial-primary-active-border: #00779d;
  --aerial-primary-deep:          #004f69;
  --aerial-link-hover:            #007ea8;

  /* Colors — accent palette (orange, for "recommended" emphasis) */
  --aerial-accent:                #ef963c;
  --aerial-accent-hover-bg:       #e08225;
  --aerial-accent-soft-bg:        rgba(239, 150, 60, 0.08);

  /* Colors — neutrals */
  --aerial-secondary:             #222222;
  --aerial-body-text:             #222222;
  --aerial-ink-soft:              #444444;
  --aerial-muted-text:            #707070;
  --aerial-inverse-text:          #ffffff;
  --aerial-surface-alt-1:         #f6f6f6;
  --aerial-surface-alt-2:         #f0f0f0;
  --aerial-border-subtle:         #e7e7e7;
  --aerial-border-card:           #dddddd;
  --aerial-border-form-focus:     #66c7e4;
  --aerial-divider:               #dddddd;

  /* Colors — semantic only, NOT brand accents */
  --aerial-semantic-success:      #28a745;
  --aerial-semantic-warning:      #ffc107;
  --aerial-semantic-info:         #17a2b8;

  /* Fonts — two families only for Aerial */
  --aerial-font-primary-display:  'Oswald', 'Oswald Fallback', sans-serif;
  --aerial-font-body:             'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif;
  /* Button typography shares Montserrat across PW Marine OEM sub-brands */
  --aerial-font-button:           'Montserrat', 'Montserrat Fallback', sans-serif;

  /* Spacing */
  --aerial-section-margin-bottom:         5.3125rem; /* 85px */
  --aerial-section-padding-y:             6.25rem;   /* 100px */
  --aerial-cta-padding-y:                 65px;
  --aerial-outer-gutter:                  15px;
  --aerial-heading-margin-bottom:         1.375rem;  /* 22px */
  --aerial-heading-margin-bottom-content: 2.5rem;    /* 40px */
  --aerial-card-margin-bottom:            1.875rem;  /* 30px */

  /* Radii */
  --aerial-radius-default: 0;
  --aerial-radius-small:   3px;
  --aerial-radius-button:  4px;
  --aerial-radius-btn-lg:  6px;

  /* Shadows */
  --aerial-shadow-focus:       0 0 0 0.2rem rgba(0, 161, 214, 0.25);
  --aerial-shadow-page-header: 0 0 10px 3px rgba(0, 0, 0, 0.2);
  --aerial-shadow-card:        0 8px 20px 0 rgba(0, 0, 0, 0.08);
  --aerial-shadow-card-hover:  0 12px 28px 0 rgba(0, 0, 0, 0.12);
  --aerial-shadow-modal:       0 2px 10px rgba(0, 0, 0, 0.3);
}


/* -----------------------------------------------------------------------------
   §2 — Typography
   No colored-heading rule. H4/H5 inherit body_text color, NOT primary.
   ----------------------------------------------------------------------------- */

/* Scope to .aerial-page to avoid overriding FusionCMS native page styles. */
.aerial-page {
  font-family: var(--aerial-font-body);
  font-size: 1rem;               /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--aerial-body-text);
  background-color: #ffffff;
  /* UX-8 polish: interior page body padding so text isn't flush with viewport
     edge after full-width container fix removed per-section max-width.
     R3 Fix 5: add top padding for breathing room below header. */
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .aerial-page { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .aerial-page { padding-left: 4rem; padding-right: 4rem; }
}

/* All headings share Oswald with letter-spacing; H4/H5 are NOT colored. */
.aerial-page h1,
.aerial-page .aerial-h1,
.aerial-page h2,
.aerial-page .aerial-h2,
.aerial-page h3,
.aerial-page .aerial-h3,
.aerial-page h4,
.aerial-page .aerial-h4,
.aerial-page h5,
.aerial-page .aerial-h5 {
  font-family: var(--aerial-font-primary-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aerial-body-text);        /* body_text across all heading levels — Aerial has no colored-heading rule */
  margin-bottom: var(--aerial-heading-margin-bottom);
}

.aerial-page h1,
.aerial-page .aerial-h1 { font-size: 1.875rem; }   /* 30px mobile, bumps to 45px desktop in §6 */
.aerial-page h2,
.aerial-page .aerial-h2 { font-size: 1.75rem; }    /* 28px */
.aerial-page h3,
.aerial-page .aerial-h3 { font-size: 1.125rem; line-height: 1.278; }  /* 18px */
.aerial-page h4,
.aerial-page .aerial-h4 { font-size: 1rem; line-height: 1.4; }        /* 16px */
.aerial-page h5,
.aerial-page .aerial-h5 { font-size: 0.875rem; line-height: 1.4; }    /* 14px */

.aerial-page h6,
.aerial-page .aerial-h6 {
  font-family: var(--aerial-font-primary-display);
  font-size: 0.8125rem;                    /* 13px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aerial-body-text);
  margin-bottom: var(--aerial-heading-margin-bottom);
}

/* Content-page H2 override — the large intro heading on content sections.
   Stryker colors this red; Aerial leaves it body_text and just scales it up. */
.aerial-page .aerial-h2-content,
.aerial-page .aerial-content-section > h2:first-child,
.aerial-page .aerial-content-section > h2.is-lead {
  font-size: 2.5rem;                       /* 40px */
  color: var(--aerial-body-text);
}

/* Display variants */
.aerial-page .aerial-display-lead {
  font-family: var(--aerial-font-primary-display);
  font-size: 2.8125rem;                    /* 45px mobile, bumps in §6 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: var(--aerial-heading-margin-bottom);
}
.aerial-page .aerial-display-xxl {
  font-family: var(--aerial-font-primary-display);
  font-size: 2.1875rem;                    /* 35px mobile, bumps in §6 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--aerial-heading-margin-bottom);
}

/* Eyebrow label — uppercase small-caps feel, above hero H1 */
.aerial-page .aerial-eyebrow {
  font-family: var(--aerial-font-button);   /* Montserrat for eyebrow tracking */
  font-size: 0.75rem;                       /* 12px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aerial-muted-text);
  margin-bottom: 0.5rem;
}

/* Body links */
.aerial-page a {
  color: var(--aerial-primary);
  text-decoration: underline;
}
.aerial-page a:hover {
  color: var(--aerial-link-hover);
}

/* Body text spacing */
.aerial-page p  { margin: 0 0 1rem; }
.aerial-page ul { margin: 0 0 1rem 1.25rem; }
.aerial-page ol { margin: 0 0 1rem 1.25rem; }
.aerial-page li { margin-bottom: 0.5rem; }


/* -----------------------------------------------------------------------------
   §3 — Buttons
   Shared PW Marine OEM platform convention: Montserrat 12px 700 uppercase
   4px radius. Color variants switch to Aerial's cyan primary + orange accent.
   ----------------------------------------------------------------------------- */

.aerial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--aerial-radius-button);
  padding: 0.563rem 2.5rem;                /* 9px 40px */
  font-family: var(--aerial-font-button);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.667;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  margin: 0 !important;
}

.aerial-btn:focus,
.aerial-btn:focus-visible {
  outline: 0;
  box-shadow: var(--aerial-shadow-focus);
}

.aerial-btn--sm {
  padding: 0.1875rem 0.625rem;             /* 3px 10px */
  font-size: 0.938rem;                     /* 15px */
  border-radius: var(--aerial-radius-small);
}

.aerial-btn--lg {
  padding: 1rem 3rem;                      /* 16px 48px */
  font-size: 1.25rem;                      /* 20px */
  border-radius: var(--aerial-radius-btn-lg);
}

/* Primary — the dominant cyan brand CTA */
.aerial-btn--primary {
  background-color: var(--aerial-primary);
  border-color: var(--aerial-primary);
  color: #ffffff !important;
}
.aerial-btn--primary:hover {
  background-color: var(--aerial-primary-hover-bg);
  border-color: var(--aerial-primary-hover-border);
  color: #ffffff !important;
}
.aerial-btn--primary:active,
.aerial-btn--primary.is-active {
  background-color: var(--aerial-primary-active-bg);
  border-color: var(--aerial-primary-active-border);
  color: #ffffff !important;
}
.aerial-btn--primary:disabled,
.aerial-btn--primary.is-disabled {
  background-color: var(--aerial-primary);
  border-color: var(--aerial-primary);
  opacity: 0.65;
  cursor: not-allowed;
}

/* Accent — for "recommended" / "most popular" CTAs. Orange, used sparingly,
   typically on the Airborne 2.0 (featured column) CTA or a Most Popular badge.
   Do NOT use as the default site-wide CTA color. */
.aerial-btn--accent {
  background-color: var(--aerial-accent);
  border-color: var(--aerial-accent);
  color: #ffffff !important;
}
.aerial-btn--accent:hover {
  background-color: var(--aerial-accent-hover-bg);
  border-color: var(--aerial-accent-hover-bg);
  color: #ffffff !important;
}

/* Secondary — solid dark, for paired actions */
.aerial-btn--secondary {
  background-color: var(--aerial-secondary);
  border-color: var(--aerial-secondary);
  color: #ffffff !important;
}
.aerial-btn--secondary:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff !important;
}

/* Outline primary */
.aerial-btn--outline-primary {
  background-color: transparent;
  border-color: var(--aerial-primary);
  color: var(--aerial-primary) !important;
}
.aerial-btn--outline-primary:hover {
  background-color: var(--aerial-primary);
  border-color: var(--aerial-primary);
  color: #ffffff !important;
}

/* Outline secondary */
.aerial-btn--outline-secondary {
  background-color: transparent;
  border-color: var(--aerial-secondary);
  color: var(--aerial-secondary) !important;
}
.aerial-btn--outline-secondary:hover {
  background-color: var(--aerial-secondary);
  border-color: var(--aerial-secondary);
  color: #ffffff !important;
}

/* Link-style button — no border, text only */
.aerial-btn--link {
  background-color: transparent;
  border-color: transparent;
  color: var(--aerial-primary) !important;
  padding-left: 0;
  padding-right: 0;
}
.aerial-btn--link:hover {
  color: var(--aerial-link-hover) !important;
  border-color: transparent;
}

/* Inverse — for use on dark hero / cta-strip backgrounds ONLY */
.aerial-btn--inverse {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}
.aerial-btn--inverse:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--aerial-body-text) !important;
}


/* -----------------------------------------------------------------------------
   §4 — Section patterns
   Named patterns that correspond to the live site's section vocabulary.
   Use these class names in Lovable-generated content_html.
   ----------------------------------------------------------------------------- */

/* ===== Hero =====
   Aerial's hero uses the primary cyan as the default background color
   when no image is provided. When a page provides a hero image via the
   page_mastheads setting, the image layers on top with a dark overlay. */
.aerial-hero {
  position: relative;
  padding: var(--aerial-section-padding-y) var(--aerial-outer-gutter);
  background-color: var(--aerial-primary);    /* cyan default; image overrides via inline style when present */
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
/* Dark overlay applied only when hero has a background image (hook class) */
.aerial-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.aerial-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.aerial-hero h1,
.aerial-hero .aerial-h1 {
  color: #ffffff;
  font-size: 2.1875rem;                        /* 35px mobile, bumps in §6 */
}
.aerial-hero p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
/* Hero eyebrow inverts to white on the cyan/dark background */
.aerial-hero .aerial-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

/* ===== Section CTA (dark full-bleed band) =====
   Aerial uses cyan instead of black as its mid-page CTA background — this
   matches the Promo Banner treatment from the brand spec (BG: #00a1d6). */
.aerial-section-cta {
  position: relative;
  margin: var(--aerial-outer-gutter);
  padding: var(--aerial-cta-padding-y) var(--aerial-outer-gutter);
  background-color: var(--aerial-primary);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
.aerial-section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);       /* lighter overlay since cyan is lighter than black */
  z-index: 1;
}
.aerial-section-cta__inner {
  position: relative;
  z-index: 2;
  font-size: 1.375rem;                         /* 22px */
}
/* Inverse-section heading color override — closes bug #25. Headings inside
   dark/inverse bands always render white, regardless of the body_text default. */
.aerial-section-cta h2,
.aerial-section-cta .aerial-h2,
.aerial-section-cta h3,
.aerial-section-cta .aerial-h3,
.aerial-hero h2,
.aerial-hero .aerial-h2 {
  color: var(--aerial-inverse-text);
}
/* Default button styling inside dark sections = inverse pattern. */
.aerial-section-cta .aerial-btn,
.aerial-hero .aerial-btn {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.aerial-section-cta .aerial-btn:hover,
.aerial-hero .aerial-btn:hover {
  background-color: #ffffff;
  color: var(--aerial-body-text);
}

/* ===== Content section (editorial prose block) ===== */
.aerial-content-section {
  max-width: 1200px;
  margin: 0 auto var(--aerial-section-margin-bottom);
  padding: 0 var(--aerial-outer-gutter);
}
.aerial-content-section > h2:first-child {
  font-size: 2.5rem;                           /* 40px */
  color: var(--aerial-body-text);              /* NOT primary — Aerial has no colored-heading rule */
  margin-bottom: 1.375rem;
}
.aerial-content-section p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ===== Explainer / tip callout ===== */
.aerial-callout {
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  background-color: rgba(0, 161, 214, 0.06);
  border-left: 4px solid var(--aerial-primary);
  border-radius: var(--aerial-radius-small);
}
.aerial-callout p:last-child { margin-bottom: 0; }
.aerial-callout strong        { color: var(--aerial-body-text); }

/* ===== Feature grid (3–4 column cards) ===== */
.aerial-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--aerial-card-margin-bottom);
  max-width: 1200px;
  margin: 0 auto var(--aerial-section-margin-bottom);
  padding: 0 var(--aerial-outer-gutter);
}
/* Defensive: if the generator accidentally places a heading or intro paragraph
   inside the grid wrapper, span it across all columns instead of letting it
   render as a stray grid cell. The cards should still be the only direct
   children — see vocabulary `featureGrid.when` — but this prevents a broken
   layout when the contract is violated. */
.aerial-feature-grid > h1,
.aerial-feature-grid > h2,
.aerial-feature-grid > h3,
.aerial-feature-grid > h4,
.aerial-feature-grid > h5,
.aerial-feature-grid > h6,
.aerial-feature-grid > p {
  grid-column: 1 / -1;
}
.aerial-feature-grid__card {
  position: relative;
  padding: 1.75rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--aerial-border-card);
  border-radius: var(--aerial-radius-small);
  box-shadow: var(--aerial-shadow-card);
  text-align: left;
  transition: box-shadow 0.18s ease-in-out, transform 0.18s ease-in-out;
}
.aerial-feature-grid__card:hover {
  box-shadow: var(--aerial-shadow-card-hover);
}
.aerial-feature-grid__card img,
.aerial-feature-grid__card .aerial-icon {
  display: block;
  margin: 0 0 1rem;
  max-width: 72px;
}
.aerial-feature-grid__card h3,
.aerial-feature-grid__card .aerial-h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
/* Recommended-card treatment — orange accent border + Most Popular badge.
   Generator marks the card with class="aerial-feature-grid__card aerial-feature-grid__card--recommended". */
.aerial-feature-grid__card--recommended {
  border: 3px solid var(--aerial-accent);
  background-color: var(--aerial-accent-soft-bg);
  box-shadow: var(--aerial-shadow-card-hover);
}
.aerial-feature-grid__card--recommended::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 1rem;
  padding: 4px 10px;
  background-color: var(--aerial-accent);
  color: #ffffff;
  font-family: var(--aerial-font-button);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  border-radius: var(--aerial-radius-small);
}

/* ===== Spec strip (surface-alt band with icon+label columns) ===== */
.aerial-spec-strip {
  background-color: var(--aerial-surface-alt-1);
  padding: 5rem var(--aerial-outer-gutter);
  margin-bottom: var(--aerial-section-margin-bottom);
}
.aerial-spec-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.aerial-spec-strip__item {
  padding: 1rem;
}
.aerial-spec-strip__item h4,
.aerial-spec-strip__item .aerial-h4 {
  /* stays body_text — Aerial has no colored-heading rule */
  color: var(--aerial-body-text);
  margin-bottom: 0.5rem;
}
.aerial-spec-strip__item p { margin: 0; }

/* ===== FAQ list ===== */
.aerial-faq-list {
  max-width: 900px;
  margin: 0 auto var(--aerial-section-margin-bottom);
  padding: 0 var(--aerial-outer-gutter);
}
.aerial-faq-list__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--aerial-divider);
}
.aerial-faq-list__item:last-child { border-bottom: none; }
.aerial-faq-list__item h3,
.aerial-faq-list__question {
  font-family: var(--aerial-font-primary-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aerial-body-text);
  line-height: 1.278;
  margin-bottom: 0.75rem;
}
.aerial-faq-list__answer p,
.aerial-faq-list__answer ul,
.aerial-faq-list__answer ol {
  font-family: var(--aerial-font-body);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.aerial-faq-list__answer strong { font-weight: 600; }


/* ===== Defensive layout for #compare, #decision, #faq sections =====
   When the generator emits `<section id="compare">` without wrapping the
   table in a `.aerial-content-section`, this rule provides the same
   container behavior (centered, gutter padding, max-width, section rhythm)
   so the content doesn't hit the viewport edge. */
.aerial-page section#compare,
.aerial-page section#decision,
.aerial-page section#faq {
  max-width: 1200px;
  margin: 0 auto var(--aerial-section-margin-bottom);
  padding: 0 var(--aerial-outer-gutter);
}

/* Heading/lead inside these sections follows content-section rhythm. */
.aerial-page section#compare > h2:first-of-type,
.aerial-page section#decision > h2:first-of-type {
  font-size: 2.5rem;
  color: var(--aerial-body-text);
  margin-bottom: 0.75rem;
}
.aerial-page section#compare > h2:first-of-type + p,
.aerial-page section#decision > h2:first-of-type + p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--aerial-body-text);
  margin-bottom: 1.5rem;
  max-width: 900px;
}

/* ===== #compare — desktop table styling ===== */
.aerial-page #compare table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto 1.5rem;
  background-color: #ffffff;
}

/* Column headers (thead) — Oswald uppercase, bottom-bordered */
.aerial-page #compare thead th {
  padding: 1rem 1.25rem;
  font-family: var(--aerial-font-primary-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aerial-body-text);
  text-align: left;
  border-bottom: 3px solid var(--aerial-border-card);
  background-color: #ffffff;
  vertical-align: bottom;
}
.aerial-page #compare thead th:first-child {
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Row header cells (column 1 of each body row) — feature labels */
.aerial-page #compare tbody th[scope="row"] {
  padding: 1rem 1.25rem 1rem 0;
  font-family: var(--aerial-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--aerial-body-text);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--aerial-divider);
  white-space: nowrap;
  width: 1%;
}

/* Data cells */
.aerial-page #compare tbody td {
  padding: 1rem 1.25rem;
  font-family: var(--aerial-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--aerial-body-text);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--aerial-divider);
}

/* Last-row cells drop the bottom border */
.aerial-page #compare tbody tr:last-child td,
.aerial-page #compare tbody tr:last-child th[scope="row"] {
  border-bottom: none;
}

/* ===== Featured column (data-featured="true") — desktop accent treatment ===== */
.aerial-page #compare tbody td[data-featured="true"] {
  background-color: var(--aerial-accent-soft-bg);
  border-left: 3px solid var(--aerial-accent);
  border-right: 3px solid var(--aerial-accent);
  padding-left: calc(1.25rem - 3px);
  padding-right: calc(1.25rem - 3px);
}
.aerial-page #compare tbody tr:first-child td[data-featured="true"] {
  border-top: 3px solid var(--aerial-accent);
  padding-top: calc(1rem - 3px);
}
.aerial-page #compare tbody tr:last-child td[data-featured="true"] {
  border-bottom: 3px solid var(--aerial-accent);
  padding-bottom: calc(1rem - 3px);
}

/* Anchor link / CTA group inside #compare — spacing below the table */
.aerial-page #compare .aerial-stack {
  margin-top: 1.5rem;
  text-align: center;
}

/* Equal-width comparison table columns */
.aerial-page #compare table { table-layout: fixed; }
.aerial-page #compare thead th:first-child,
.aerial-page #compare tbody th[scope="row"] { width: 18%; }
.aerial-page #compare thead th:not(:first-child),
.aerial-page #compare tbody td { width: calc((100% - 18%) / 3); }


/* Button text wrapping inside feature-grid cards */
.aerial-page .aerial-feature-grid__card .aerial-btn {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   §5 — Utility + layout helpers
   Only the helpers needed to hand off generated pages cleanly. Not a full
   utility framework. Avoid bloat.
   ----------------------------------------------------------------------------- */

.aerial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--aerial-outer-gutter);
}

.aerial-center-text { text-align: center; }
.aerial-left-text   { text-align: left; }

.aerial-stack > * + * { margin-top: 1rem; }
.aerial-stack-lg > * + * { margin-top: 2rem; }

.aerial-surface-alt { background-color: var(--aerial-surface-alt-1); }


/* -----------------------------------------------------------------------------
   §6 — Responsive (desktop bumps for display sizes)
   Mirrors Stryker's pattern: display sizes scale up at >= 768px and
   section-cta padding widens at >= 992px.
   ----------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .aerial-page .aerial-display-lead { font-size: 5.625rem; }  /* 90px */
  .aerial-page .aerial-display-xxl  { font-size: 3.4375rem; } /* 55px */
  .aerial-hero h1,
  .aerial-hero .aerial-h1 { font-size: 2.8125rem; }           /* 45px */
}

@media (min-width: 992px) {
  .aerial-section-cta { padding: 5rem 2rem; }
  .aerial-content-section { padding: 0 2rem; }
}


/* -----------------------------------------------------------------------------
   §6b — Mobile responsive (≤768px)
   These rules previously had to be hand-emitted by the LLM via inline <style>
   blocks per SHARED_CLAUSES Pattern A/B. Now lives here so every Aerial page
   inherits responsive behavior automatically — no per-page mobile patching.

   Markup contract (enforced at generation time, system prompt + tool schema):
     - Comparison table sits inside a <section id="compare">
     - Body rows use <th scope="row"> for the feature label in column 1
     - Each data <td> in columns 2+ carries data-feature="<feature-name>"
     - First row's data cells carry data-model="<model-name>"
     - Recommended column's data cells carry data-featured="true"
     - Decision cards section uses id="decision"
     - CTA button groups wrap in .aerial-stack
     - Feature card grids use .aerial-feature-grid
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Hero + section heading sizes */
  .aerial-page .aerial-h1,
  .aerial-page h1                       { font-size: 1.9rem !important; }
  .aerial-page .aerial-h2-content       { font-size: 1.75rem !important; }
  .aerial-page .aerial-h2,
  .aerial-page h2                       { font-size: 1.6rem !important; }

  .aerial-hero                          { padding: 60px 15px !important; }
  .aerial-hero p                        { font-size: 1rem !important; }

  .aerial-section-cta {
    padding: 50px 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* CTA button stacks: wrap and full-width */
  .aerial-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .aerial-stack a,
  .aerial-stack .aerial-btn             { display: block !important; text-align: center !important; }

  /* Feature grids: collapse to single column */
  .aerial-feature-grid                  { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Recommended-card badge sits flush-left on narrow viewports */
  .aerial-feature-grid__card--recommended::before { left: 1rem; }

  /* Spec strip grid: collapse to single column */
  .aerial-spec-strip__grid              { grid-template-columns: 1fr !important; }

  /* MOBILE-COMPARE-MATRIX-OVERLAP-1 — comparison table → horizontal scroll
     with a sticky feature column. Mirror of Stryker §6b; see that file for the
     full defect write-up.

     Short version: the previous card-stack used `tr { display: contents }` plus
     a fixed `grid-row` per column index, so every source row landed in the same
     three grid rows and painted on top of itself. It also required
     `data-feature`/`data-model`/`scope="row"` hooks that live authored content
     does not carry. This replacement needs no attributes — only "the first cell
     of each row is the label" — and sizes itself in em off the tenant type
     scale. */

  .aec-table-scroll,
  #compare div:has(> table) {
    overflow-x: auto !important;   /* beats the wrapper's inline overflow:hidden */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .aec-table-scroll > table,
  #compare table {
    display: table !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  .aec-table-scroll > table thead,
  #compare table thead                  { display: table-header-group; }
  .aec-table-scroll > table tbody tr,
  #compare table tbody tr               { display: table-row; }
  .aec-table-scroll > table tbody tr > th,
  #compare table tbody tr > th,
  .aec-table-scroll > table tbody tr > td,
  #compare table tbody tr > td          { display: table-cell; }

  .aec-table-scroll > table thead th:not(:first-child),
  #compare table thead th:not(:first-child),
  .aec-table-scroll > table tbody tr > *:not(:first-child),
  #compare table tbody tr > *:not(:first-child) {
    min-width: 8.5em;
    max-width: 13em;
    padding: 0.75em 0.85em !important;
    white-space: normal;
  }

  /* Width, padding and alignment for the FIRST column apply to every matrix,
     sticky or not — the sizing rule above deliberately excludes column 1, so
     without this it is unconstrained and blows out to ~680px on Aerial's
     matrix, pushing the comparison itself off-screen. */
  .aec-table-scroll > table thead th:first-child,
  #compare table thead th:first-child,
  .aec-table-scroll > table tbody tr > *:first-child,
  #compare table tbody tr > *:first-child {
    min-width: 7.5em;
    max-width: 9.5em;
    padding: 0.75em 0.85em !important;
    text-align: left !important;
  }

  /* Sticky first column — ONLY for matrices that actually have a label column.
     The `:has(tbody tr > th:first-child)` guard is the point: Stryker's matrix
     opens each row with `<th>Best Use</th>`, so pinning column 1 keeps the
     question on screen while the answers scroll. Aerial's own matrix has no
     label column at all — its first column is the *Ascent model* — so pinning
     it would freeze one product while its competitors scroll past, which reads
     as a bug. Those tables simply scroll, all columns equal. Structure decides
     this, not tenant. */
  .aec-table-scroll > table:has(tbody tr > th:first-child) thead th:first-child,
  #compare table:has(tbody tr > th:first-child) thead th:first-child,
  .aec-table-scroll > table:has(tbody tr > th:first-child) tbody tr > th:first-child,
  #compare table:has(tbody tr > th:first-child) tbody tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;

    background-color: #f6f6f6 !important;
    box-shadow: 1px 0 0 var(--aerial-border-card);
  }
  .aec-table-scroll > table:has(tbody tr > th:first-child) thead th:first-child,
  #compare table:has(tbody tr > th:first-child) thead th:first-child {
    background-color: #ffffff !important;
    z-index: 3;
  }

  .aec-table-scroll > table tbody tr > th,
  #compare table tbody tr > th,
  .aec-table-scroll > table tbody tr > td,
  #compare table tbody tr > td {
    border-bottom: 1px solid var(--aerial-divider) !important;
  }
  .aec-table-scroll > table tbody tr:last-child > th,
  #compare table tbody tr:last-child > th,
  .aec-table-scroll > table tbody tr:last-child > td,
  #compare table tbody tr:last-child > td { border-bottom: none !important; }

  /* Featured column keeps the ORANGE accent (Aerial reserves primary cyan for
     CTAs). Optional — absent the attribute the table is still correct. */
  .aec-table-scroll > table tbody td[data-featured="true"],
  #compare table tbody td[data-featured="true"] {
    background-color: var(--aerial-accent-soft-bg) !important;
  }

  /* Decision-cards table (id="decision") — simpler stack, no per-card label injection */
  #decision table,
  #decision table tbody,
  #decision table tr                    { display: block; width: 100%; }
  #decision table td                    { display: block; width: auto !important; margin-bottom: 18px; }
  #decision table                       { border-spacing: 0 !important; }

  /* CTA button blockquotes wrap full-width */
  blockquote a,
  blockquote .aerial-btn                { display: block !important; margin: 8px auto !important; max-width: 280px; }

  /* FAQ list breathing room */
  .aerial-faq-list                      { padding: 0 var(--aerial-outer-gutter); }
}


/* =============================================================================
   §8 — Shared-component overrides for the Aerial public site
   -----------------------------------------------------------------------------
   These rules target the rendered output of shared React components (Index.tsx
   homepage sections, SiteFooter, CTABanner). They are NOT class-prefixed with
   `.aerial-*` because the components don't emit those classes — instead they
   are scoped under `body main.public-content` (PublicLayout main) and the
   footer chrome, which is sufficient because PublicLayout only injects this
   stylesheet when the active tenant is `aerial-wakeboarding`.

   Pattern mirrors Fusion's live aerialwakeboarding.com:
     - Hero: warm reddish overlay, centered title, outlined-white CTA
     - Carousel: hide brand-name text labels under logos, tighten gutters
     - Highlights: edge-to-edge cards, uppercase white labels with chevron
     - Featured review: borderless, centered, 5/5 numeric label
     - CTA banner: warm overlay, outlined-white CTA
     - Footer: cyan column headings, larger trust badges & social icons
   ============================================================================= */


/* ----- 8.1 Hero section -----
   HERO-CLASS-1 (2026-08-25): these rules used to identify the hero by DOM
   POSITION (`> section:first-of-type:not(.not-hero)`). After a client-side
   route change the real hero is no longer :first-of-type, so `section
   .content-body` inherited hero styling and every body link was painted
   #ffffff on a white page — invisible until hover. A positional selector with
   an opt-out fails silently and fails towards hiding content.
   The hero components (HeroSection in src/pages/Index.tsx and PageBanner)
   now emit an explicit `is-hero` class; the `.not-hero` opt-out is gone. */
body main.public-content > div > section.is-hero {
  text-align: center;
}
body main.public-content > div > section.is-hero h1 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
}
body main.public-content > div > section.is-hero .prose {
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Outlined-white CTA inside the hero (overrides the solid primary button) */
body main.public-content > div > section.is-hero a[href] {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
  padding: 0.85rem 2rem !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body main.public-content > div > section.is-hero a[href]:hover {
  background-color: #ffffff !important;
  color: var(--aerial-body-text) !important;
}


/* ----- 8.2 Carousel ("Find Your Boat…") ----- */
/* Hide brand-name text label + subtitle under each logo card */
body main.public-content section .snap-x .snap-start h3,
body main.public-content section .snap-x .snap-start p {
  display: none !important;
}
body main.public-content section .snap-x .snap-start > div > div.border-t {
  display: none !important;
}
/* Tighten the card border and let the logo breathe */
body main.public-content section .snap-x .snap-start > div {
  border-color: var(--aerial-border-card) !important;
  border-radius: 4px !important;
  background: #ffffff;
}
body main.public-content section .snap-x .snap-start img {
  max-height: 70px !important;
}
/* Section title — uppercase Oswald, "Oswald Fallback", larger, centered */
body main.public-content section .max-w-6xl > .flex.items-center.justify-between {
  justify-content: center !important;
  position: relative;
}
body main.public-content section .max-w-6xl > .flex.items-center.justify-between > h2 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.875rem;
  text-align: center;
}
body main.public-content section .max-w-6xl > .flex.items-center.justify-between > a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aerial-primary) !important;
}

/* ----- 8.3 Highlights grid ----- */
/* LIVE parity: visible gutter (~16px) between tiles. The previous
   `gap: 0 !important` collapse was a stale Fusion-touch-edge rule; LIVE
   actually renders a Bootstrap row gutter. Restore Tailwind's gap-4 (1rem)
   on both the outer column-pair grid and each inner 2-col grid. */
body main.public-content section .grid.grid-cols-2.gap-4 {
  gap: 1rem !important;
}
body main.public-content section .grid.gap-6.md\:grid-cols-2 {
  gap: 1rem !important;
}
/* Remove the card border and rounded corners */
body main.public-content section .grid.grid-cols-2 > div > a > div,
body main.public-content section .grid.grid-cols-2 > div > div {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Card label: LIVE-parity Oswald uppercase 27px/400 white over scrim */
body main.public-content section .grid.grid-cols-2 h3 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #ffffff !important;
  font-size: 27px;
}
body main.public-content section .grid.grid-cols-2 h3::after {
  content: " ›";
  display: inline-block;
  margin-left: 0.35em;
  font-weight: 400;
}
/* Flat solid scrim — LIVE uses a single rgba fill, not a gradient.
   Targets the new `.highlight-scrim` class on HighlightCard's overlay div. */
body main.public-content section .grid.grid-cols-2 .highlight-scrim {
  background: rgba(0, 0, 0, 0.65) !important;
}
/* Highlight body text — sentence-case white over photo, matches LIVE parity. */
body main.public-content section .grid.grid-cols-2 h3 + p {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  margin-top: 0.25rem;
}

/* ----- 8.4 Featured review ----- */
body main.public-content section .max-w-4xl > .rounded-xl.border {
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}
body main.public-content section .max-w-4xl > .rounded-xl.border > h2 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
body main.public-content section .max-w-4xl > .rounded-xl.border > p {
  text-align: center;
}
/* Center the star row + append "5/5" numeric label */
body main.public-content section .max-w-4xl > .rounded-xl.border > .flex.gap-0\.5 {
  justify-content: center;
  align-items: center;
  position: relative;
}
body main.public-content section .max-w-4xl > .rounded-xl.border > .flex.gap-0\.5::after {
  content: "5/5";
  margin-left: 0.6rem;
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  font-weight: 700;
  color: var(--aerial-body-text);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
body main.public-content section .max-w-4xl > .rounded-xl.border > .prose {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body main.public-content section .max-w-4xl > .rounded-xl.border > p:last-child {
  text-align: center;
  font-style: italic;
}

/* ----- 8.5 Content body inside PageContentSection ----- */
body main.public-content .content-body h2 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: left;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
body main.public-content .content-body h2:first-child { margin-top: 0; }
body main.public-content .content-body h3 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: left;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}
body main.public-content .content-body h4 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
body main.public-content .content-body p {
  text-align: left;
}
body main.public-content .content-body ul {
  list-style: disc outside;
  padding-left: 1.5rem;
  text-align: left;
  margin: 0 0 1rem;
}
body main.public-content .content-body ul li {
  margin-bottom: 0.4rem;
}

/* ----- 8.6 CTA banner ----- */
body main.public-content section.bg-primary {
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.55),
    rgba(20, 20, 20, 0.35)
  );
}
body main.public-content section.bg-primary img {
  opacity: 0.45 !important;
}
body main.public-content section.bg-primary h2 {
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
body main.public-content section.bg-primary a[href] {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  padding: 0.85rem 2rem !important;
}
body main.public-content section.bg-primary a[href]:hover {
  background-color: #ffffff !important;
  color: var(--aerial-body-text) !important;
}

/* ----- 8.7 Footer -----
   Selectors target semantic class names declared as the footer region class
   contract in src/components/public/SiteFooter.tsx. Do not reintroduce
   Tailwind-utility selectors. */

/* Cyan column headings */
.footer-nav-columns h4,
.footer-contact-column h3,
.footer-contact-phone-section h4,
.footer-contact-email-section h4 {
  color: var(--aerial-primary) !important;
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Trust badges — Fusion renders these notably smaller than our R1 default.
   Wave A partial: shrink to 40px pending an exact measurement in Wave B. */
.footer-trust-badges img {
  height: 40px !important;
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

/* Newsletter band — dark/blue full-width above columns */
.footer-newsletter {
  background-color: var(--aerial-primary);
  color: #ffffff;
  /* 2rem → 1rem (10 Aug tightening). Band whitespace only; the Turnstile
     reservation below the form is untouched. */
  padding: 1rem;
  text-align: center;
}
.footer-newsletter h2,
.footer-newsletter h3 {
  text-transform: uppercase;
  font-family: var(--aerial-font-heading, "Oswald", "Oswald Fallback"), sans-serif;
  letter-spacing: 0.08em;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.footer-newsletter form {
  display: inline-flex;
  gap: 0.5rem;
  max-width: 480px;
  width: 100%;
}
.footer-newsletter input[type="email"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  color: var(--aerial-body-text);
  background-color: #ffffff;
  border: 0;
  border-radius: 2px;
}
.footer-newsletter button[type="submit"] {
  background-color: #ffffff;
  color: var(--aerial-primary);
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  text-transform: uppercase;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

/* Inline desktop layout (10 Aug): headline left, form + Turnstile slot right.
   Mobile keeps the stacked centred layout above. The 65px Turnstile reservation
   moves from below the form to beside it, so it no longer drives band height. */
@media (min-width: 768px) {
  .footer-newsletter--inline .footer-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .footer-newsletter--inline h2,
  .footer-newsletter--inline h3 {
    margin-bottom: 0;
    text-align: left;
  }
  .footer-newsletter--inline form {
    width: auto;
    margin: 0;
  }
  .footer-newsletter--inline .footer-newsletter-turnstile-slot {
    margin: 0;
    flex: 0 0 auto;
  }
}

/* Circular blue icon tiles next to Call Us / Send us an Email */
.footer-contact-icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--aerial-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.75rem;
}
.footer-contact-phone-section .footer-contact-icon-tile {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>");
}
.footer-contact-email-section .footer-contact-icon-tile {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}

/* Trust badges already centered; remove any inherited divider */
.footer-trust-badges {
  border-top: 0 !important;
  text-align: center;
}

/* Social icon refinement: smaller, no circle outline per Fusion */
.footer-social {
  gap: 1rem !important;
  margin-top: 1.5rem !important;
  border-top: 0 !important;
}
.footer-social a {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.25rem;
  color: var(--aerial-body-text);
  transition: color 0.2s ease;
}
.footer-social a:hover {
  background-color: transparent !important;
  color: var(--aerial-primary) !important;
}
.footer-social svg {
  width: 20px !important;
  height: 20px !important;
}

/* -----------------------------------------------------------------------------
   §8.5 — Site header (logo + main nav parity with Fusion)
   The handoff CSS is only injected for the Aerial tenant, so the selectors
   can target .site-header directly without a tenant attribute scope.
   ----------------------------------------------------------------------------- */

/* Logo — Fusion's logo renders ~150px tall in a taller header row.
   Bump our header row height + logo cap to ~80px as a first pass. */
.site-header {
  --aerial-header-row-h: 96px;
}
.site-header > div.max-w-7xl {
  height: var(--aerial-header-row-h) !important;
}
.site-header-logo img,
.site-header-logo .site-header-logo-img {
  height: 95px !important;
  max-height: 95px !important;
  width: auto !important;
  max-width: none !important;
}

/* Main nav items — Fusion uses Montserrat 11px/700 uppercase for top-level
   triggers (live-measured 2026-05-24 Wave A §3). Override the global
   --aerial-font-primary-display (Oswald, "Oswald Fallback") at the nav-only selector to avoid
   touching headings, which legitimately use Oswald, "Oswald Fallback". */
/* Scope: top-level trigger links only. Do NOT cascade into mega-panel cards —
   the 14px side padding broke .nav-mega-product-image-link /
   .nav-mega-product-variant-link width parity inside .nav-mega-product-card. */
/* Wave A round 2 (2026-05-24): cascade was losing to Tailwind utilities
   on .nav-mega-trigger (text-xs, font-heading, font-semibold,
   tracking-wide). Specificity bumped via header.site-header prefix and
   !important applied to every property as a tactical override.
   Markup-contract cleanup (removing the conflicting Tailwind utilities
   from MegaNavItem.tsx) is Wave B / Round 2 audit scope. */
header.site-header nav .nav-mega-trigger,
header.site-header nav > a,
header.site-header nav a.nav-mega-trigger,
.site-header nav .nav-mega-trigger,
.site-header nav > a {
  font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
  /* EYEBROW-4 (2026-08-18): main-nav trigger size 13px→17px. Deliberate
     design decision by John after reviewing a rendered preview — NOT a
     parity restoration. Mirrored in §16.1, which wins the source-order
     tiebreak; both must carry the same value. */
  font-size: 17px !important;

  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  /* LIVE parity: nav links render solid black (rgb(0,0,0)), not
     foreground @ 0.8 alpha (MegaNavItem uses text-foreground/80). */
  color: #000000 !important;
  padding: 0 14px;

}


/* Nav layout — Fusion centers the main nav between the logo (far-left)
   and the utility icons (far-right). Override the default left-aligned
   flex-1 layout so the nav justifies center within its available space. */
.site-header nav {
  justify-content: center !important;
}

/* Utility bar typography — Fusion uses Barlow Semi Condensed 13px/700,
   uppercase, letter-spacing 0.075em (≈0.975px @ 13px). Live-measured on
   aerialwakeboarding.com 2026-05-24 Wave A §3 Element 3.

   Wave A round 2 (2026-05-24): font-size, letter-spacing, and
   text-transform were not landing on the leaf <a> inside
   .site-header-utility-item — SiteHeader.tsx sets text-[11px] on the
   .site-header-utility-bar-inner container via Tailwind arbitrary value,
   which (at equal specificity, loaded later) was beating our 13px rule
   on certain build orderings, and text-transform wasn't inheriting at
   all. Bumped specificity with header.site-header prefix and added
   !important to every property. Typography is identical mobile↔desktop;
   only visibility differs (see UX-6 @media block below). */
header.site-header .site-header-utility-bar-inner,
header.site-header .site-header-utility-item,
header.site-header .site-header-utility-item a,
header.site-header .site-header-utility-item span,
.site-header .site-header-utility-bar-inner,
.site-header .site-header-utility-item,
.site-header .site-header-utility-item a,
.site-header .site-header-utility-item span {
  font-family: 'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif !important;
  font-size: 13px !important;
  /* EYEBROW-5 (2026-08-18, John's decision): eyebrow copy unbolded — weight
     700→400 on every utility-bar element. !important retained so it still
     beats the component's Tailwind font-semibold/font-bold classes. */
  font-weight: 400 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  /* EYEBROW-4 (2026-08-18, supersedes EYEBROW-1/2/3): utility bar size is
     13px (back to the source-derived size) and the colour stays darkened to
     the site --foreground token. Deliberate design decision by John after
     reviewing a rendered preview — NOT a parity restoration. Weight,
     tracking and text-transform above remain source-derived. */

  color: hsl(var(--foreground)) !important;
}


/* -----------------------------------------------------------------------------
   §9 — End
   ----------------------------------------------------------------------------- */


/* UX-5 Google Translate widget styling */
#google_translate_element .goog-te-gadget-simple {
  border: 0;
  font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* UX-6 — Translate trigger legibility against bg-muted/60 (desktop) and white (mobile) */
#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple a {
  color: var(--aerial-body-text);
}

/* UX-6 — Mobile utility bar: only Translate slot visible, white background to match Fusion */
@media (max-width: 1279px) {
  .site-header-utility-bar {
    background-color: #ffffff;
  }
  .site-header-utility-bar-inner {
    justify-content: flex-start;
  }
  .site-header-utility-items {
    display: none;
  }
}

/* UX-6 — Mobile drawer utility section: larger tap targets */
.site-header-mobile-drawer-utility li {
  padding: 0.5rem 0;
}
.site-header-mobile-drawer-utility a,
.site-header-mobile-drawer-utility span {
  font-size: 14px;
  display: block;
  padding: 0.25rem 0;
}
.site-header-mobile-drawer-utility a {
  color: var(--aerial-body-text);
  text-decoration: none;
}
.site-header-mobile-drawer-utility a:hover,
.site-header-mobile-drawer-utility a:active {
  color: var(--aerial-primary);
}

/* UX-7 — Google Translate widget container hardening.
   Suppress Google's injected banner iframe + constrain ALL inner injected
   nodes so the widget renders as a compact inline pill (matching Fusion).
   Without the inner cascade, the gadget anchor + flag <img> children expand
   the container to ~235px tall and overflow the utility bar vertically.

   UX-7 redux v4 (2026-05-18): NARROWED suppression. Previous rules hid
   `body > .skiptranslate` (which removes the hidden translation iframe
   Google injects to perform the actual translation) AND
   `iframe.goog-te-menu-frame.skiptranslate` (the language dropdown menu).
   The dropdown opened (it's appended outside the menu-frame in modern GT)
   but selecting a language did nothing because the worker iframe was
   gone. Also removed `body { top: 0 !important }` which prevented Google
   from offsetting the body when activating translation.
   ONLY the banner frame is suppressed now (it causes the layout shift). */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
#google_translate_element {
  height: auto !important;
  max-height: 24px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  vertical-align: middle;
}
#google_translate_element .goog-te-gadget {
  height: auto !important;
  font-size: 0;        /* suppress Google's "Powered by" text node */
  line-height: 1;
}
#google_translate_element .goog-te-gadget > span {
  display: none !important; /* hides "Powered by Google" branding row */
}
#google_translate_element .goog-te-gadget-simple {
  height: auto;
  line-height: 1.2;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
}
#google_translate_element .goog-te-gadget-simple .VIpgJd-ZVi9od-l4eHX-hSRGPd,
#google_translate_element .goog-te-gadget-simple a.VIpgJd-ZVi9od-xl07Ob-lTBxed {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}
#google_translate_element .goog-te-gadget-simple img {
  /* UX-7 redux v3 (2026-05-18): Constrain (don't hide) the inner <img>
     elements. Prior `display: none` removed them from the layout tree and
     broke Google Translate's click-handler delegation — widget rendered as
     compact pill but clicking produced no dropdown. This approach keeps
     elements in the layout tree (events propagate) but collapses visible
     size to prevent the 234px overflow. */
  max-width: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  /* Note: NOT display:none — display:none breaks Google Translate's
     click handler binding. */
}
#google_translate_element .goog-te-menu-value {
  margin: 0;
}

/* Label parity: ensure the Google Translate trigger always reads "Select Language".
   The live site uses the SIMPLE layout (a button), but the current AEC widget
   renders as a native <select> whose first option is already "Select Language".
   This rule hardens the button-layout case so the label never falls back to
   "Translate". */
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value > span:first-child {
  font-size: 0 !important;
}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value > span:first-child::after {
  content: "Select Language";
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ============================================================
   UX-7 — Mega-menu styling (Phase 2)
   Data-driven mega-panels rendered by src/components/public/MegaNavItem.tsx
   from curated_list_items (owner_type='nav_mega_panel').
   Two variants: nav-mega-dropdown (single-column list) and nav-mega-columns
   (product card grid, e.g. Wakeboard Towers).
   ============================================================ */

.nav-mega-root {
  position: relative;
}

.nav-mega-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 16px 18px;
  min-width: 220px;
  margin-top: 4px;
  border-radius: 2px;
}

/* Dropdown variant */
.nav-mega-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega-dropdown-item {
  margin: 0;
}
.nav-mega-dropdown-link {
  display: block;
  padding: 8px 10px;
  font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* UX-8 polish R2 Fix 3B: force proper-case for dropdown submenu items */
  text-transform: none !important;
  color: var(--aerial-body-text, #1c1c1c);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.nav-mega-dropdown-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--aerial-accent, #c8102e);
}

/* Columns variant (product cards)
   UX-7 redux v3 (2026-05-18): Fusion target — label TOP, image MIDDLE
   (~204×143 displayed near native), buttons BOTTOM (full-width, light gray
   background, dark text, larger font). DOM order set in MegaNavItem.tsx. */
/* UX-7 redux v4 (2026-05-18): Columns variant spans the header content
   width and centers under the nav bar (Fusion parity). Approach:
   - `.site-header` becomes the positioning ancestor.
   - For nav-mega-roots whose panel is a columns variant, the root drops
     out of the positioning context (`position: static`), so the panel's
     `position:absolute` resolves against `.site-header` instead of the
     individual trigger item. Left/right:0 + max-width + auto margins
     centers it across the header content area.
   The dropdown variant is untouched (still anchored to its trigger). */
.site-header { position: relative; }
.nav-mega-root:has(.nav-mega-columns) { position: static; }
.nav-mega-columns {
  left: 0 !important;
  right: 0 !important;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  /* PLAT-megamenu-visual-editor: padding driven by mega_menu_settings */
  padding: var(--mega-panel-padding, 24px 28px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.nav-mega-columns-grid {
  display: grid;
  /* PLAT-megamenu-visual-editor: column min/card width + gap driven by settings.
     Default card width 175px (Fusion target — downscales 204px native crisply).
     Use fixed card-width tracks so --mega-columns-gap controls the visible
     space between product cards instead of being absorbed by flexible 1fr tracks. */
  grid-template-columns: repeat(6, var(--mega-card-width, 175px));
  gap: var(--mega-columns-gap, 16px);
  align-items: stretch;
  justify-items: center;
  justify-content: center;
}
@media (max-width: 1280px) {
  .nav-mega-columns {
    min-width: 600px;
  }
  .nav-mega-columns-grid {
    grid-template-columns: repeat(3, var(--mega-card-width, 175px));
  }
}
.nav-mega-product-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 8px;
  height: 100%;
  width: var(--mega-card-width, 175px);
}
.nav-mega-product-label {
  font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none !important;
  color: var(--aerial-body-text, #1c1c1c);
  text-decoration: none;
  margin: 0 0 2px 0;
  line-height: 1.2;
  text-align: left;
}
.nav-mega-product-label:hover {
  color: var(--aerial-accent, #c8102e);
}
.nav-mega-product-image-link {
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  box-sizing: border-box;
}
/* PLAT-megamenu-visual-editor: image fills card width; height + fit driven by settings */
.nav-mega-product-image {
  width: 100% !important;
  height: var(--mega-image-height, auto) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--mega-image-fit, cover);
  display: block;
}
.nav-mega-product-variants {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
}
.nav-mega-product-variant-link {
  display: block;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--aerial-body-text, #1c1c1c);
  background: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 6px !important;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-mega-product-variant-link:hover {
  background: var(--aerial-accent, #c8102e);
  color: #ffffff;
}


/* ============================================================
   UX-8 polish R2 Fix 2 — Logo sizing
   Tailwind arbitrary-value classes on the <img> can lose to
   parent flex/object-contain constraints. Force-size here so
   the logo matches Fusion's prominent treatment regardless of
   utility-class compilation. Scoped to .site-header-logo to
   avoid affecting other logos.
   ============================================================ */
.site-header-logo img,
header .site-header-logo img,
.site-header-logo .site-header-logo-img {
  height: 95px !important;
  max-height: 95px !important;
  width: auto !important;
  max-width: none !important;
}

/* =============================================================================
   §9 — Wave B
   -----------------------------------------------------------------------------
   - Finding #5b: promo bar size remediation (Aerial-scoped).
   - Finding #6: sub-footer dark band (.footer-sub-footer-band) markup
     contract + Aerial styling.
   - Finding #7: trust badges horizontal layout inside GET IN TOUCH column
     (.footer-trust-badges--in-column variant from SiteFooter.tsx).
   - Finding #8: social icons relocated into sub-footer band; styled here
     in the band context (.footer-sub-footer-band .footer-social).
   All Wave B selectors live in this single block for easy diffing /
   rollback. Stryker handoff CSS does NOT reference these classes.
   ============================================================================= */

/* ----- 9.1 Promo bar — Finding #5b -----
   PromoBanner.tsx applies py-2.5 (~10px) + text-sm (~14px). Live Aerial
   promo strip is visibly thinner. Reduce vertical padding and font size;
   bump font weight to match the all-caps emphasis. */
body .relative.bg-primary.text-primary-foreground.font-body,
body div.bg-primary.text-primary-foreground.text-center.font-body {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
}

/* ----- 9.2 Trust badges inside contact column — Finding #7 -----
   Component renders .footer-trust-badges--in-column when the band is
   enabled. Override the size set in 8.7 (40px) only for the in-column
   variant: keep badges in a single horizontal row, left-aligned. */
.footer-contact-column .footer-trust-badges--in-column {
  text-align: left !important;
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.footer-contact-column .footer-trust-badges--in-column img {
  height: 40px !important; /* placeholder; Wave B follow-up will refine */
  margin: 0 0.75rem 0.5rem 0 !important;
  display: inline-block !important;
  vertical-align: middle;
}
.footer-contact-column .footer-trust-badges--in-column figure {
  display: inline-block !important;
  margin: 0 0.75rem 0.5rem 0 !important;
  vertical-align: middle;
}

/* ----- 9.3 Sub-footer dark band — Findings #6 + #8 -----
   Markup contract: see SiteFooter.tsx (.footer-sub-footer-band region).
   Aerial styling: black band, white text, brand-family list inline, social
   icons right-aligned at desktop, stacked at mobile. */
.footer-sub-footer-band {
  background-color: #000000;
  color: #ffffff;
  padding: 1.25rem 0;
  margin-top: 2.5rem;
  font-size: 12px;
  font-family: var(--aerial-font-body, "Barlow Semi Condensed", "Barlow Semi Condensed Fallback"), sans-serif;
  letter-spacing: 0.03em;
}
.footer-sub-footer-band a {
  color: #ffffff !important;
  text-decoration: none;
}
.footer-sub-footer-band a:hover {
  color: var(--aerial-primary) !important;
  text-decoration: underline;
}
.footer-sub-footer-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.footer-sub-footer-band .footer-copyright {
  color: #ffffff !important;
  font-size: 12px !important;
  margin: 0 !important;
  text-align: left !important;
}
.footer-sub-footer-band .footer-brand-family {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}
.footer-sub-footer-band .footer-brand-family-label {
  font-weight: 600;
  text-transform: uppercase;
}
.footer-sub-footer-band .footer-brand-family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}
.footer-sub-footer-band .footer-brand-family-list li:not(:last-child)::after {
  content: "|";
  margin-left: 0.75rem;
  opacity: 0.5;
}
.footer-sub-footer-band .footer-credit {
  opacity: 0.85;
}

/* Social icons docked to the right edge of the band. Override the centered
   defaults applied in 8.7 — inside the band, icons are right-aligned,
   white, and slightly smaller. */
.footer-sub-footer-band .footer-social {
  margin: 0 0 0 auto !important; /* push to right edge of flex row */
  border-top: 0 !important;
  gap: 0.75rem !important;
}
.footer-sub-footer-band .footer-social a {
  color: #ffffff !important;
  padding: 0.15rem !important;
}
.footer-sub-footer-band .footer-social a:hover {
  color: var(--aerial-primary) !important;
  background-color: transparent !important;
}
.footer-sub-footer-band .footer-social svg {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 640px) {
  .footer-sub-footer-band-inner {
    justify-content: flex-start;
    text-align: left;
  }
  .footer-sub-footer-band .footer-copyright {
    text-align: left !important;
    width: 100%;
  }
  /* Brand-family list: keep both lines left-justified at mobile so the
     wrapped Aerial entry doesn't appear centered while the Stryker entry
     stays left. Stack items vertically and remove the inline "|" separators. */
  .footer-sub-footer-band .footer-brand-family {
    display: block;
    width: 100%;
    text-align: left;
  }
  .footer-sub-footer-band .footer-brand-family-list {
    display: block;
    text-align: left;
  }
  .footer-sub-footer-band .footer-brand-family-list li {
    display: block;
    text-align: left;
  }
  .footer-sub-footer-band .footer-brand-family-list li:not(:last-child)::after {
    content: none;
  }
  .footer-sub-footer-band .footer-social {
    margin: 0.5rem 0 0 !important;
  }
}


/* Wave B Round 3 (2026-06-27): Support / "HAVE QUESTIONS?" promo bar
   parity with LIVE aerialwakeboarding.com.
   - Font family: Roboto Slab, "Roboto Slab Fallback" (slab serif), loaded via SUPPLEMENTAL_FONTS_BY_SLUG
     (Aerial entry registers Roboto Slab weight 700 only). LIVE loads 700 and
     lets the browser synthesize the heavier 900 emphasis weight — do NOT
     load a real 900 weight or the bar will render heavier than LIVE.
   - Font size 16px / line-height 24px — buttons reset font-size from their
     ancestor, so inline styles on the wrapper div were getting clobbered by
     the user-agent button stylesheet. Re-assert with !important on the
     button-text node itself so nothing in the Tailwind/preflight chain wins.
   - Scope: .aerial-promo-bar* selectors only — no other component is
     affected. Added in src/components/public/PromoBanner.tsx (Wave B). */
.aerial-promo-bar,
.aerial-promo-bar .aerial-promo-bar-text,
.aerial-promo-bar .aerial-promo-bar-text span {
  font-family: 'Roboto Slab', 'Roboto Slab Fallback', serif !important;
}
.aerial-promo-bar .aerial-promo-bar-text {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 900 !important;
}

/* Wave B Round 4 (2026-06-27): Support nav dropdown hover-open restoration.
   The text-foreground/80 → text-black trigger-class change (MegaNavItem.tsx
   Wave B Round 3) regressed the dropdown variant's hover-open behavior on
   the served build — Tailwind's `group-hover:block` no longer fires for
   the dropdown root (the columns variant still opens because
   `.nav-mega-root:has(.nav-mega-columns) { position: static }` reshapes
   its hover region). Pin the open state with explicit CSS so we don't
   depend on Tailwind compiling `group-hover:block` for this case.
   Also: the `color: #000000 !important` at line 1365 was blocking the
   Tailwind `hover:text-primary` utility (equal specificity + !important).
   Add a higher-priority hover-color rule so the label flips to LIVE's
   primary blue rgb(0,161,214) on hover while resting stays solid black. */
.nav-mega-root:hover > .nav-mega-panel,
.nav-mega-root:focus-within > .nav-mega-panel {
  display: block !important;
}
header.site-header nav .nav-mega-root:hover .nav-mega-trigger,
header.site-header nav .nav-mega-trigger:hover,
.site-header nav .nav-mega-root:hover .nav-mega-trigger,
.site-header nav .nav-mega-trigger:hover {
  color: #00a1d6 !important;
}

/* =============================================================================
   Wave B Round 5 (2026-06-28): Featured Products section + footer parity
   with LIVE aerialwakeboarding.com. Aerial-only — scoped to this handoff CSS
   which is injected only for the Aerial tenant. Decision Impact Pass: this
   ONLY touches homepage body (.featured-products-section) and footer
   surfaces — does NOT alter §14 chrome (header/nav/utility-bar/support-bar).
   ============================================================================= */

/* ----- Featured Products section ----- */
.featured-products-section {
  background-color: transparent !important;
}
.featured-products-section .featured-products-heading {
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: #000000 !important;
}
/* Borderless transparent cards */
.featured-products-section .featured-product-card {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Title: 16px / 700 / brand blue */
.featured-products-section .featured-product-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #00a1d6 !important;
}
/* Price: 500 weight, black */
.featured-products-section .featured-product-price span {
  color: #000000 !important;
  font-weight: 500 !important;
}
/* "Shop All Products" CTA → outlined brand-blue button */
.featured-products-section .featured-products-cta {
  background-color: transparent !important;
  color: #00a1d6 !important;
  border: 2px solid #00a1d6 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 9px 40px !important;
  letter-spacing: 0.05em;
}
.featured-products-section .featured-products-cta:hover {
  background-color: #00a1d6 !important;
  color: #ffffff !important;
}

/* ----- Footer ----- */
/* Container transparent (was bg-card) */
footer.site-footer {
  background-color: transparent !important;
}

/* Newsletter heading — 24px / 700 / uppercase / white (already uppercase &
   white in §8.7; reassert size + weight to match LIVE). */
.footer-newsletter h2,
.footer-newsletter h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* Trust badges — LIVE proportions. Aerial migrated images have UUID
   filenames (no "abyc"/"nmma" substring), so match by alt text. The default
   .footer-trust-badges img sets h-10/w-auto (height:40px); override per
   badge by setting an explicit height and width:auto to preserve the
   image's natural aspect ratio (avoids stretching).
   Targets: BBB ~53x85, ABYC ~106x29 (h:29), NMMA ~106x35 (h:35). */
.footer-trust-badges img[alt*="BBB" i] {
  width: 53px !important;
  height: 85px !important;
}
/* ABYC alt = "American Boat and Yacht Council" / "American Boat & Yacht Council" */
.footer-trust-badges img[alt*="Yacht" i] {
  height: 29px !important;
  width: auto !important;
}
/* NMMA alt = "National Marine Manufacturers Association" */
.footer-trust-badges img[alt*="Marine Manufacturers" i] {
  height: 35px !important;
  width: auto !important;
}

/* Sub-footer band padding: 1.25rem → ~5px to match LIVE compact band. */
.footer-sub-footer-band {
  padding: 5px 0 !important;
  margin-top: 1.5rem !important;
}

/* =============================================================================
   §15 — Mobile header overflow remediation (2026-06-29)
   -----------------------------------------------------------------------------
   Defect: at viewports <768px, the forced logo width (~340px intrinsic at
   height:95px) inside a shrink-0 wrapper pushed the right-aligned icon group
   (search/cart/hamburger) past the viewport's right edge. Document
   scrollWidth measured 397px at a 375px viewport (22px horizontal overflow),
   making the hamburger off-screen on load.
   Targeted fix: shrink the logo and tighten header padding below the md
   breakpoint. The forced 95px height + width:auto rules above are scoped to
   ≥768px; on mobile we cap height ~56px and let max-width float so the
   intrinsic ratio keeps the icon row inside the viewport.
   ============================================================================= */
@media (max-width: 1279px) {
  .site-header > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 0.5rem !important;
  }
  .site-header-logo img,
  header .site-header-logo img,
  .site-header-logo .site-header-logo-img {
    height: 56px !important;
    max-height: 56px !important;
    max-width: 60vw !important;
  }
}

/* =============================================================================
   §16 — Readability type pass (2026-07-24)
   -----------------------------------------------------------------------------
   Aerial-only readability bumps. This file is injected only for the Aerial
   tenant (see tenantRegistry.HANDOFF_CSS_BY_SLUG + PublicLayout.tsx effect),
   so bare selectors below are effectively tenant-scoped.

   Rules only touch text currently ≤18px:
   - Promo bar text:                  16 → 18
   - Form fields + labels:            16 → 18
   - Utility text / captions:         14 → 16
   - Footer links:                    14 → 16
   - Footer fine print (copyright):   12 → 14

   Body prose (20px) and lead paragraph (22px) are NOT resized. Buttons,
   headings (Oswald, "Oswald Fallback"), and top-nav links (Montserrat, "Montserrat Fallback") are left alone.

   Body prose typeface swap: .content-body / .prose paragraphs + list items
   swap from Barlow Semi Condensed, "Barlow Semi Condensed Fallback" → normal-width Barlow, "Barlow Fallback". Size unchanged.
   ============================================================================= */

/* Promo/secondary text — bump Wave B round-3 bar text from 16 → 18. */
.aerial-promo-bar .aerial-promo-bar-text {
  font-size: 18px !important;
  line-height: 27px !important;
}

/* Form fields + labels (public-facing forms only; admin surfaces don't
   render inside .public-content). Excludes button-styled inputs so the
   button rules above still win. */
.public-content input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
.public-content textarea,
.public-content select,
.public-content label,
.footer-newsletter input[type="email"] {
  font-size: 18px !important;
  line-height: 27px !important;
}

/* Utility text + captions inside the public content region. Bumps
   Tailwind's text-sm (14px) → 16px. text-xs handled separately below
   so we can split "utility" (→16) from "fine print" (→14). */
.public-content .text-sm {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Footer links — 14 → 16. Covers both the nav columns and any flat link
   row. Excludes .footer-copyright links (that region drops to fine-print
   size just below). */
footer.site-footer a:not(.footer-copyright a):not(.footer-brand-family a) {
  font-size: 16px !important;
  line-height: 24px !important;
}
footer.site-footer .footer-nav-columns a,
footer.site-footer nav[aria-label="Footer"] a,
footer.site-footer nav[aria-label="Footer links"] a {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Footer fine print — copyright + brand-family list + hours. 12 → 14. */
footer.site-footer .footer-copyright,
footer.site-footer .footer-copyright *,
footer.site-footer .footer-brand-family,
footer.site-footer .footer-brand-family * {
  font-size: 14px !important;
  line-height: 21px !important;
}

/* Body prose typeface swap — Barlow Semi Condensed, "Barlow Semi Condensed Fallback" → normal-width Barlow, "Barlow Fallback".
   Scoped to paragraphs + list items inside .content-body / .prose so
   headings, buttons, and inline UI are untouched. Size intentionally
   omitted; existing 20px body / 22px lead stays put. */
.content-body p,
.content-body li,
.public-content .prose p,
.public-content .prose li {
  font-family: 'Barlow', 'Barlow Fallback', 'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif !important;
}

/* §16.1 — Top-nav size override (2026-07-24; value updated 2026-08-18)
   The §12 block already declares the same font-size !important on the same
   selector set, but the deployed bundle showed a stale size on live — an
   earlier rule (equal specificity + !important) was resolving later in some
   builds. Re-declaring the exact selector list here, at the bottom of the
   file, guarantees this rule wins the equal-specificity !important tiebreak
   by source-order. Size only; font-family, weight, letter-spacing, and
   text-transform are inherited from §12. Does NOT touch
   .nav-mega-dropdown-link (mega-panel body links) or the mobile drawer.
   EYEBROW-4 (2026-08-18): value moved 13px→17px to match §12. Deliberate
   design decision by John after reviewing a rendered preview — NOT a parity
   restoration. Keep this value and §12 in lockstep. */
header.site-header nav .nav-mega-trigger,
header.site-header nav > a,
header.site-header nav a.nav-mega-trigger,
.site-header nav .nav-mega-trigger,
.site-header nav > a {
  font-size: 17px !important;

}





/* §17 (2026-07-24) — Footer top spacing collapse (Aerial only).
   Shared SiteFooter emits .max-w-7xl.pt-12 wrapper with inner .grid.mt-8,
   stacking ~48px + ~32px = ~80px of dead space above the footer columns.
   Aerial-scoped override collapses this to a single 24px band. Does not
   touch the shared component; other tenants unaffected. */
footer.site-footer .max-w-7xl.pt-12 { padding-top: 24px !important; }
footer.site-footer .grid.mt-8 { margin-top: 0 !important; }

/* §18 — Aerial-only: hide the "Support" text link inside the desktop
   eyebrow utility bar. Support remains in utility_bar so the mobile
   hamburger drawer (which uses <li> elements, not .site-header-utility-item)
   still renders it. The desktop eyebrow surfaces Support via the "?" icon
   from SupportHelpDropdown, so hiding the text prevents duplication. */
.site-header-utility-bar .site-header-utility-item:has(a[href="/support/"]) {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   §N — Static-page reading measure — MOVED OUT (Phase 2 revision).

   The measure now lives in src/index.css as a generic, class-only rule
   (.handoff-text-measure), next to .content-body. SlugPage already emits that
   class for ANY handoff tenant, so keying it on the class alone gives Aerial,
   Stryker and every future handoff tenant the same reading measure from one
   place — no per-tenant duplication. The Aerial-scoped
   `.aerial-page > .handoff-text-measure` block that used to sit here is
   deliberately removed; do not reintroduce a tenant-scoped copy.
   ----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   PL-8.6 — button typeface standardization (2026-08-09)

   Aerial rendered three faces on button surfaces:
     1. Montserrat, "Montserrat Fallback"            — .aerial-btn (--aerial-font-button), correct
     2. Barlow Semi Condensed, "Barlow Semi Condensed Fallback" — platform-rendered buttons inheriting body font
     3. Oswald, "Oswald Fallback"                — buttons inside heading-scoped blocks picking up
                                --aerial-font-primary-display
   The design token says there is exactly one button face: --aerial-font-button.
   Applied at the button surface only (never to labels, inputs or nav triggers,
   which have their own live-measured faces) and scoped to the public site so
   the admin UI keeps the platform typeface.
   ----------------------------------------------------------------------------- */
main button,
main input[type="submit"],
main input[type="button"],
main .aerial-btn,
main .cta-banner-button,
footer.site-footer button,
.footer-newsletter button {
  font-family: var(--aerial-font-button) !important;
}

/* -----------------------------------------------------------------------------
   G-20 — header link spacing (NAV-BP-1 safe)

   Aerial nav links carry their own 14px side padding (28px between labels,
   live-measured on Fusion). The platform nav row additionally applies Tailwind
   `gap-5` (20px), producing 48px gutters — visibly wider than live and the
   single largest contributor to nav row width. Zeroing the flex gap makes the
   padding the sole spacing source, matching live and *reducing* total nav
   width, so NAV-BP-1's "overflow must stay 0 at 1280" invariant is strictly
   improved rather than put at risk.
   ----------------------------------------------------------------------------- */
header.site-header nav.site-header-main-nav,
.site-header nav.site-header-main-nav {
  gap: 0 !important;
}

/* -----------------------------------------------------------------------------
   UAT-1 item 2 — hero buffer for list/form templates that do not render inside
   `.aerial-page` (/gallery/, /blog/, /blog/category/*). Mirrors `.aerial-page`'s
   own 2rem top padding. Handoff CSS is injected per tenant, so this stays
   tenant-scoped. !important: the class sits alongside a Tailwind `pt-*`
   utility of equal specificity.
   ----------------------------------------------------------------------------- */
.handoff-page-top-gap {
  padding-top: 2rem !important;
}