/* =============================================================================
   stryker-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.

   How to use:
   1. Load this file once globally in the FusionCMS v5 Stryker 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
      `.stryker-*` (per the pattern library in stryker-branding.md §5), 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 Stryker hex values or --stryker-* custom
      properties declared at the top of this file.

   All values in this file are sourced from the live production theme.css
   of strykerttops.com (id=466e1d7316b3352d2d04). Do not modify hex values
   without re-running the CSS audit in stryker-branding.md.

   Version: 1.4 — 2026-04-21 (Cycle 2: mobile responsive §6b — #compare card-stack,
   feature-grid collapse, CTA stack, hero/section sizing — replaces SHARED_CLAUSES Pattern B inlines)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   §1 — Design tokens as CSS custom properties
   These are the canonical values. Everything below references them.
   ----------------------------------------------------------------------------- */
:root {
  /* Colors — primary palette */
  --stryker-primary:               #db1e1e;
  --stryker-primary-hover-bg:      #b91919;
  --stryker-primary-hover-border:  #ae1818;
  --stryker-primary-active-bg:     #ae1818;
  --stryker-primary-active-border: #a31616;
  --stryker-primary-deep:          #721010;
  --stryker-link-hover:            #981515;

  /* Colors — neutrals */
  --stryker-secondary:             #000000;
  --stryker-body-text:             #000000;
  --stryker-ink-soft:              #111111;
  --stryker-muted-text:            #9b9b9d;
  --stryker-surface-alt-1:         #f6f6f6;
  --stryker-surface-alt-2:         #f8f9fa;
  --stryker-border-subtle:         #c3c3c3;
  --stryker-border-card:           #d8d7d7;
  --stryker-border-form-focus:     #ef8a8a;
  --stryker-divider:               #dadada;

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

  /* Fonts */
  --stryker-font-primary-display:   'Oswald', 'Oswald Fallback', sans-serif;
  --stryker-font-secondary-display: 'Montserrat', 'Montserrat Fallback', sans-serif;
  --stryker-font-body:              'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif;
  --stryker-font-accent-display:    'Roboto Slab', 'Roboto Slab Fallback', sans-serif;

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

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

  /* Shadows */
  --stryker-shadow-focus:       0 0 0 0.2rem rgba(219, 30, 30, 0.25);
  --stryker-shadow-page-header: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  --stryker-shadow-card:        0 15px 15px 0 rgba(0, 0, 0, 0.25);
  --stryker-shadow-modal:       0 2px 10px rgba(0, 0, 0, 0.3);
}


/* -----------------------------------------------------------------------------
   §2 — Typography
   ----------------------------------------------------------------------------- */

/* Scope to .stryker-page to avoid overriding FusionCMS native page styles. */
.stryker-page {
  font-family: var(--stryker-font-body);
  font-size: 1rem;               /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--stryker-body-text);
  background-color: #ffffff;
  /* UAT-1 item 2: buffer between the hero band and the first line of copy.
     56px is Fusion's own `.page-content-default` padding-top for Stryker —
     source-derived, NOT copied from Aerial's 32px. */
  padding-top: 3.5rem;
}

/* UAT-1 item 2: list/form templates that do not render inside `.stryker-page`
   (/gallery/, /blog/, /blog/category/*) opt into the SAME hero buffer with
   this class. Handoff CSS is injected per tenant, so the value stays
   tenant-scoped without a second registry. !important because the class sits
   alongside a Tailwind `pt-*` utility of equal specificity. */
.handoff-page-top-gap {
  padding-top: 3.5rem !important;
}


/* Primary display headings — Oswald, "Oswald Fallback", uppercase, letter-spaced */
.stryker-page h1,
.stryker-page .stryker-h1,
.stryker-page h2,
.stryker-page .stryker-h2,
.stryker-page h3,
.stryker-page .stryker-h3 {
  font-family: var(--stryker-font-primary-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stryker-body-text);
  margin-bottom: var(--stryker-heading-margin-bottom);
}

.stryker-page h1,
.stryker-page .stryker-h1 { font-size: 1.875rem; }   /* 30px */
.stryker-page h2,
.stryker-page .stryker-h2 { font-size: 1.75rem; }    /* 28px */
.stryker-page h3,
.stryker-page .stryker-h3 { font-size: 1.125rem;     /* 18px */ line-height: 1.278; }

/* Secondary display headings — Montserrat, "Montserrat Fallback", red by default for H4/H5 */
.stryker-page h4,
.stryker-page .stryker-h4,
.stryker-page h5,
.stryker-page .stryker-h5 {
  font-family: var(--stryker-font-secondary-display);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stryker-primary);           /* red by default — DO NOT override on content pages */
  margin-bottom: var(--stryker-heading-margin-bottom);
}

.stryker-page h4,
.stryker-page .stryker-h4 { font-size: 1.125rem; line-height: 1.444; }  /* 18px */
.stryker-page h5,
.stryker-page .stryker-h5 { font-size: 0.8125rem; line-height: 1.385; } /* 13px */

.stryker-page h6,
.stryker-page .stryker-h6 {
  font-family: var(--stryker-font-secondary-display);
  font-size: 0.8125rem;                    /* 13px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stryker-body-text);
  margin-bottom: var(--stryker-heading-margin-bottom);
}

/* Content-page H2 override — the main red 42px section heading */
.stryker-page .stryker-h2-content,
.stryker-page .stryker-content-section > h2:first-child,
.stryker-page .stryker-content-section > h2.is-lead {
  font-size: 2.625rem;                     /* 42px */
  color: var(--stryker-primary);
}

/* Display variants */
.stryker-page .stryker-display-lead {
  font-family: var(--stryker-font-primary-display);
  font-size: 2.8125rem;                    /* 45px — desktop bumps to 90px via media query */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: var(--stryker-heading-margin-bottom);
}
.stryker-page .stryker-display-xxl {
  font-family: var(--stryker-font-primary-display);
  font-size: 2.1875rem;                    /* 35px — desktop bumps to 55px via media query */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--stryker-heading-margin-bottom);
}

/* Eyebrow label — uppercase form-label style */
.stryker-page .stryker-eyebrow {
  font-family: var(--stryker-font-secondary-display);
  font-size: 0.75rem;                      /* 12px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stryker-muted-text);
  margin-bottom: 0.5rem;
}

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

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


/* -----------------------------------------------------------------------------
   §3 — Buttons
   ----------------------------------------------------------------------------- */

.stryker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--stryker-radius-button);
  padding: 0.563rem 2.5rem;                /* 9px 40px */
  font-family: var(--stryker-font-secondary-display);
  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;
}

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

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

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

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

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

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

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

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

/* Inverse — for use on dark hero / cta-strip backgrounds ONLY */
.stryker-btn--inverse {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}
.stryker-btn--inverse:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--stryker-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 ===== */
.stryker-hero {
  position: relative;
  padding: var(--stryker-section-padding-y) var(--stryker-outer-gutter);
  background-color: #000000;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
.stryker-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.stryker-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.stryker-hero h1,
.stryker-hero .stryker-h1 {
  color: #ffffff;
  font-size: 2.1875rem;
}
.stryker-hero p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* ===== Section CTA (dark full-bleed band) ===== */
.stryker-section-cta {
  position: relative;
  margin: var(--stryker-outer-gutter);
  padding: var(--stryker-cta-padding-y) var(--stryker-outer-gutter);
  background-color: var(--stryker-secondary);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}
.stryker-section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.stryker-section-cta__inner {
  position: relative;
  z-index: 2;
  font-size: 1.375rem;             /* 22px — matches live .section-cta__content */
}
.stryker-section-cta h2,
.stryker-section-cta .stryker-h2 {
  color: #ffffff;
}
/* Default button styling inside dark sections = inverse pattern. */
.stryker-section-cta .stryker-btn,
.stryker-hero .stryker-btn {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.stryker-section-cta .stryker-btn:hover,
.stryker-hero .stryker-btn:hover {
  background-color: #ffffff;
  color: var(--stryker-body-text);
}

/* ===== Content section (editorial prose block) ===== */
.stryker-content-section {
  max-width: 1200px;
  margin: 0 auto var(--stryker-section-margin-bottom);
  padding: 0 var(--stryker-outer-gutter);
}
.stryker-content-section > h2:first-child {
  font-size: 2.625rem;                     /* 42px */
  color: var(--stryker-primary);
  margin-bottom: 1.375rem;
}
.stryker-content-section p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ===== Feature grid (3–4 column cards) ===== */
.stryker-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--stryker-card-margin-bottom);
  max-width: 1200px;
  margin: 0 auto var(--stryker-section-margin-bottom);
  padding: 0 var(--stryker-outer-gutter);
}
.stryker-feature-grid__card {
  position: relative;
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--stryker-border-card);
  border-radius: var(--stryker-radius-small);
  box-shadow: var(--stryker-shadow-card);
  text-align: center;
}
.stryker-feature-grid__card img,
.stryker-feature-grid__card .stryker-icon {
  display: block;
  margin: 0 auto 1rem;
  max-width: 72px;
}
.stryker-feature-grid__card h3,
.stryker-feature-grid__card .stryker-h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

/* ===== Spec strip (surface-alt band with icon+label columns) ===== */
.stryker-spec-strip {
  background-color: var(--stryker-surface-alt-1);
  padding: 5rem var(--stryker-outer-gutter);
  margin-bottom: var(--stryker-section-margin-bottom);
}
.stryker-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;
}
.stryker-spec-strip__item {
  padding: 1rem;
}
.stryker-spec-strip__item h4,
.stryker-spec-strip__item .stryker-h4 {
  /* stays red — matches site convention */
  color: var(--stryker-primary);
  margin-bottom: 0.5rem;
}
.stryker-spec-strip__item p {
  margin: 0;
}

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


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

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

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

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

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


/* -----------------------------------------------------------------------------
   §6 — Responsive (desktop bumps for display sizes)
   The live site bumps display-lead from 45→90 and display-xxl from 35→55
   once the viewport reaches ≥ 768px. Match that here.
   ----------------------------------------------------------------------------- */

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

@media (min-width: 992px) {
  .stryker-section-cta { padding: 5rem 2rem; }
  .stryker-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 B. Now lives here so every Stryker page
   inherits responsive behavior automatically — no per-page mobile patching.
   ----------------------------------------------------------------------------- */

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

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

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

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

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

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

  /* MOBILE-COMPARE-MATRIX-OVERLAP-1 — comparison table → horizontal scroll
     with a sticky feature column.

     WHAT WAS HERE BEFORE, AND WHY IT IS GONE. The previous rules collapsed the
     table into per-model cards with `tbody { display: grid }`,
     `tr { display: contents }` and a hard-coded placement of
     `td:nth-child(2|3|4)` into `grid-row: 1|2|3`. Because `display: contents`
     dissolves every <tr>, EVERY row's cells became siblings in the SAME grid —
     so row 1's cells, row 2's cells and row 9's cells were all assigned to grid
     rows 1-3 and painted on top of each other. Nine rows of values rendered in
     three positions. The pattern cannot work with a fixed grid-row per column:
     the row index has to come from the source row, and CSS has no way to read
     it once `display: contents` has removed the row box.

     It also depended on a markup contract that live authored content does not
     honour: `<th scope="row">`, `data-feature` on every cell and `data-model`
     on the first row. Stryker's live matrix has none of them, so the feature
     labels stayed visible as stray full-width rows and the ::before/::after
     label injection resolved to empty strings.

     THE REPLACEMENT depends on NO attributes at all — only on "the first cell
     of each row is the label". It works for three models or six, keeps the
     model names in <thead> on screen (the card stack hid them), and preserves
     the table's semantics for screen readers. Sizing is in em/tokens, so a
     third tenant inherits it off its own type scale rather than off pixels
     tuned to a 390px iPhone. */

  /* The generated markup wraps the table in a div carrying inline
     `overflow: hidden` — an author-stylesheet !important is what beats an
     inline declaration, hence the !important here. :has() is the only way to
     reach an unclassed wrapper; it is baseline in every browser this CSS
     targets (Safari 15.4+, Chrome 105+). */
  .aec-table-scroll,
  #compare div:has(> table) {
    overflow-x: auto !important;
    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; /* required: collapsed borders drop
                                             out from under sticky cells */
    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; }

  /* Data columns: wide enough to read, narrow enough that a second column is
     visibly cut off — that partial column IS the scroll affordance. Both
     bounds are in em so they track the tenant's body size. */
  .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. Without this the first cell is the only unconstrained cell
     in the row (the sizing rule above deliberately excludes it) and blows out
     to ~680px on Aerial's matrix, pushing the actual comparison off-screen
     even though the table scrolls. */
  .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 feature column — ONLY for matrices that actually have a label
     column. The `:has(tbody tr > th:first-child)` guard is the whole point:
     Stryker's matrix opens each row with `<th>Best Use</th>`, so pinning
     column 1 keeps the question visible while the answers scroll. Aerial's
     matrix has no label column at all — its first column is the *Ascent
     model* — so pinning it would freeze one product and scroll the others
     past it, which reads as a bug. Those tables just scroll, all columns
     equal. Structure decides, 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; /* must be opaque: content scrolls
                                             underneath it */
    box-shadow: 1px 0 0 var(--stryker-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;
  }

  /* Row separators, restored by hand because border-collapse is now separate */
  .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(--stryker-border-card) !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 its accent when the generator marks it. Optional:
     absent the attribute the table is still correct, just unemphasised. */
  .aec-table-scroll > table tbody td[data-featured="true"],
  #compare table tbody td[data-featured="true"] {
    background-color: rgba(219, 30, 30, 0.05) !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 .stryker-btn                { display: block !important; margin: 8px auto !important; max-width: 280px; }

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


/* -----------------------------------------------------------------------------
   §7 — Rendered-app overrides (Stryker legacy design parity)

   These target the REAL class names emitted by the shared React components
   (src/pages/Index.tsx HeroSection, src/components/public/SiteHeader.tsx +
   MegaNavItem.tsx). This file is injected only when the Stryker tenant is
   active, so nothing here can reach another tenant. Specificity is kept just
   high enough to beat single-class Tailwind utilities.
   ----------------------------------------------------------------------------- */

/* 7.1 — Homepage hero headline
   Component: HeroSection <section class="is-hero relative overflow-hidden">
              > <div class="... max-w-7xl"> > <h1 class="text-4xl md:text-6xl font-bold ...">
   HERO-2: keyed off the explicit `is-hero` class (HERO-CLASS-1 pattern), not
   the presentational `bg-card` class HERO-1 removed from the hero. */
.public-content section.is-hero > div > h1:not(.font-heading) {
  font-family: var(--stryker-font-primary-display);
  font-size: clamp(2.5rem, 7vw, 90px);
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #ffffff;
}

/* 7.2 — Hero body / subtitle copy (rendered as .prose inside the hero) */
.public-content section.is-hero > div > .prose,
.public-content section.is-hero > div > .prose p,
.public-content section.is-hero > div > .prose li,
.public-content section.is-hero > div > .prose strong,
.public-content section.is-hero > div > .prose a {
  color: #ffffff;
}

/* 7.3 — Primary CTA buttons (red bg-primary buttons/links in page content) */
.public-content a.bg-primary,
.public-content button.bg-primary,
.public-content a.bg-primary:hover,
.public-content button.bg-primary:hover {
  font-family: var(--stryker-font-secondary-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

/* 7.4 — Main header navigation links (NOT the utility bar above it)

   NAV-TRIGGER-ROLE-1: every declaration is now var(<record token>, <today's
   literal>), so a tenant record carrying the `nav_trigger` role moves both
   this sheet and the BigCommerce chrome, and a record without it renders
   byte-identically.

   SPECIFICITY, written out because the :hover colour depends on it:
     type rule  `.site-header .site-header-main-nav a.nav-mega-trigger` = (0,2,1)
     hover rule `.site-header .site-header-main-nav a.nav-mega-trigger:hover`
                = (0,3,1) — a pseudo-class counts as a class, so the hover rule
                wins outright, and it is also LATER in the file.
   `:hover` is deliberately REMOVED from the type rule's selector list: while it
   was listed there, the resting `color` applied on hover too and pinned it, so
   the record's hover colour could never take effect. */
.site-header .site-header-main-nav a.nav-mega-trigger {
  font-family: var(--type-nav-trigger-font-family, var(--stryker-font-primary-display));
  /* EYEBROW-4 (2026-08-18): nav trigger size 18px→20px. Deliberate design
     decision by John after reviewing a rendered preview — NOT a parity
     restoration. Family, weight and letter-spacing below stay source-derived. */
  font-size: var(--type-nav-trigger-size-desktop, 20px);
  font-weight: var(--type-nav-trigger-weight, 400);
  letter-spacing: var(--type-nav-trigger-letter-spacing, 0.02em);
  /* The trigger's line box is Tailwind text-xs (16px) today on both surfaces. */
  line-height: var(--type-nav-trigger-line-height, 16px);
  text-transform: var(--type-nav-trigger-text-transform, uppercase);
  color: var(--type-nav-trigger-color, #000);
  padding: var(--nav-trigger-link-padding, 0);
}

/* NAV-TRIGGER-ROLE-1 — hover colour, (0,3,1), after the type rule.
   Fallback hsl(var(--primary)) is today's Tailwind `hover:text-primary`. */
.site-header .site-header-main-nav a.nav-mega-trigger:hover {
  color: var(--nav-trigger-hover-color, hsl(var(--primary)));
}

/* NAV-TRIGGER-ROLE-1 — header action icons take the SAME hover colour. Their
   resting colour is left to Tailwind's text-foreground/70, which already reads
   the record's body_text token.
   Specificity (0,3,0) / (0,2,1) beats Tailwind's `.hover\:text-primary:hover`
   at (0,2,0), so these win regardless of stylesheet order. */
.site-header .site-header-search button:hover,
.site-header .site-header-wishlist-icon:hover,
.site-header .site-header-cart-icon:hover,
.site-header button[aria-label="Open menu"]:hover {
  color: var(--nav-trigger-hover-color, hsl(var(--primary)));
}



/* 7.5 — Interior page-header headings (About, Gallery, Model Comparison,
   Blog, Installation Guides, Locations, Contact).
   Component: PageBanner <h1 class="font-heading font-bold ...">.
   Fusion renders these at regular weight (400); keep font-family (Oswald, "Oswald Fallback"),
   uppercase, size, tracking, and color as-is. */
.public-content h1.font-heading {
  font-weight: 400;
}


/* 7.6 — Footer newsletter band (site-wide, sits directly above the footer)
   Component: SiteFooter.tsx > NewsletterSection (.footer-newsletter region
   class contract). Mirrors the Aerial treatment — full-bleed brand band,
   centred uppercase white heading, white input, solid white submit button
   with brand-colour label — but driven by --stryker-primary so the colour is
   this tenant's own red. Copy wording is untouched. */
.footer-newsletter {
  background-color: var(--stryker-primary);
  color: #ffffff;
  padding: 1.5rem 1rem;
  text-align: center;
}
.footer-newsletter h2,
.footer-newsletter h3 {
  font-family: var(--stryker-font-primary-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 0.75rem;
}
.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(--stryker-body-text);
  background-color: #ffffff;
  border: 0;
  border-radius: 2px;
  font-family: var(--stryker-font-body);
  font-size: 16px;
}
.footer-newsletter button[type="submit"] {
  background-color: #ffffff;
  color: var(--stryker-primary);
  font-family: var(--stryker-font-secondary-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.footer-newsletter button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: default;
}

/* 7.7 — Footer shading (site-wide)
   The shared footer renders on `bg-card` (white). Aerial reads as a light
   neutral gray because its handoff CSS makes the footer transparent over the
   page background (#f9fafb); match that exact value here, and give the
   bottom copyright line its own darker full-bleed band (Stryker renders the
   sub-footer-band markup on both its BigCommerce pages and its homepage, so
   the band element itself carries the darker treatment; the `> div >`
   variant below covers the legacy no-band layout). */
footer.site-footer {
  background-color: #f9fafb;
}
/* Bottom copyright band. Stryker renders the sub-footer-band markup, so the
   band element itself carries the darker treatment (same structure Aerial
   uses). The `> div >` variant covers the legacy no-band layout. */
footer.site-footer .footer-sub-footer-band {
  background-color: var(--stryker-secondary);
  color: #ffffff;
  padding: 12px 0;
  margin-top: 2rem;
  font-family: var(--stryker-font-body);
  font-size: 14px;
}
footer.site-footer .footer-sub-footer-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
footer.site-footer .footer-sub-footer-band .footer-social {
  margin-left: auto; /* push social icons to the right edge of the flex row */
}
@media (max-width: 640px) {
  footer.site-footer .footer-sub-footer-band-inner {
    justify-content: flex-start;
    text-align: left;
  }
  footer.site-footer .footer-sub-footer-band .footer-copyright {
    text-align: left;
    width: 100%;
  }
  footer.site-footer .footer-sub-footer-band .footer-social {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  footer.site-footer .footer-sub-footer-band .footer-brand-family {
    display: block;
    width: 100%;
    text-align: left;
  }
  footer.site-footer .footer-sub-footer-band .footer-brand-family-list {
    display: block;
    text-align: left;
  }
  footer.site-footer .footer-sub-footer-band .footer-brand-family-list li {
    display: block;
    text-align: left;
  }
  footer.site-footer .footer-sub-footer-band .footer-brand-family-list li:not(:last-child)::after {
    content: none;
  }
}
footer.site-footer .footer-sub-footer-band a,
footer.site-footer .footer-sub-footer-band .footer-copyright,
footer.site-footer .footer-sub-footer-band .footer-brand-family,
footer.site-footer .footer-sub-footer-band .footer-social a {
  color: #ffffff;
}
/* Brand-family block inside the band. Structural mirror of aerial-handoff.css
   §9.3, rewritten with this sheet's `footer.site-footer` selector prefix.
   Layout only: no colour, no typeface. Colour already arrives from the rule
   above and the family from the band's font-family. */
footer.site-footer .footer-sub-footer-band .footer-brand-family {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}
footer.site-footer .footer-sub-footer-band .footer-brand-family-label {
  font-weight: 600;
  text-transform: uppercase;
}
footer.site-footer .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.site-footer .footer-sub-footer-band .footer-brand-family-list li:not(:last-child)::after {
  content: "|";
  margin-left: 0.75rem;
  opacity: 0.5;
}
footer.site-footer > div > .footer-copyright {
  background-color: var(--stryker-secondary);
  color: #ffffff;
  /* full-bleed out of the max-w-7xl container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 12px 24px;
  margin-top: 2rem;
  font-family: var(--stryker-font-body);
  font-size: 14px;
}
footer.site-footer > div > .footer-copyright a {
  color: #ffffff;
  text-decoration: underline;
}


/* 7.8 — Mega-menu flyout panels (NAV-STYLE-1, 2026-08-18)
   Stryker's dropdown variants (Boat T-tops, Accessories, Support) render
   with no panel styling unless authored here: the shared index.css only
   carries the .nav-mega-bridge and is-open rules, and MegaNavItem.tsx
   provides positioning (absolute left-0 top-full z-50) and .nav-mega-root
   (relative) via Tailwind. Geometry is copied VERBATIM from Aerial's UX-7
   block (aerial-handoff.css); brand-carrying values are mapped to Stryker's
   own tokens, per the per-tenant convention used everywhere else in this
   sheet. Do NOT copy Aerial's var(--aerial-body-text, #1c1c1c) or
   var(--aerial-accent, #c8102e) — those custom properties do not exist
   under Stryker and would silently fall through to Aerial-authored fallback
   hex values that belong to neither brand.

   Intentionally omitted (see task NAV-STYLE-1):
   - .site-header { position: relative } and .nav-mega-root:has(.nav-mega-
     columns) { position: static } — Stryker has no columns variant and no
     media_files rows; importing these would change the containing block for
     no benefit.
   - The trigger hover rule hardcoding #00a1d6 — Stryker's §7.4 sets no
     colour and no !important, so Tailwind hover:text-primary already
     resolves to --stryker-primary. An override would be redundant and would
     hardcode a colour.
   - Any positioning declaration other than margin-top: 4px — position, top,
     left and z-index all arrive from the component's Tailwind classes. */
/* DROPDOWN-ROLES-STRYKER-1: every value below now comes from this tenant's
   brand record (Globals > Branding > Navigation dropdown + the nav_dropdown
   type-scale entry) via the variables emitted by emitBrandingCss.ts. The
   literal kept as each var() fallback is exactly what shipped before, so a
   record without those roles renders identically. */
.nav-mega-panel {
  background: #ffffff;
  border: var(--nav-dropdown-panel-border, 1px solid var(--stryker-divider));
  /* DROPDOWN-ACCENT-ONLY-1: colored top edge on the dropdown nav. hsl() is
     required: on AEC pages --primary holds a bare Tailwind Hsl triplet
     (e.g. 195 100% 42%), so using it raw yields an invalid declaration the
     browser silently drops. Overrides only the top edge of the all-round border. */
  border-top: var(--nav-dropdown-panel-border-top, 3px solid hsl(var(--primary)));
  box-shadow: var(--nav-dropdown-panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.12));
  padding: var(--nav-dropdown-panel-padding, 16px 18px);
  min-width: var(--nav-dropdown-panel-min-width, 220px);
  margin-top: 4px;
  border-radius: var(--nav-dropdown-panel-radius, var(--stryker-radius-default));
}

/* Dropdown variant — list/item/link geometry copied verbatim from Aerial. */
.nav-mega-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nav-dropdown-item-gap, 2px);
}
.nav-mega-dropdown-item {
  margin: 0;
}
.nav-mega-dropdown-link {
  display: block;
  padding: var(--nav-dropdown-link-padding, 8px 10px);
  font-family: var(--type-nav-dropdown-font-family, var(--stryker-font-body));
  font-size: var(--type-nav-dropdown-size-desktop, 13px);
  font-weight: var(--type-nav-dropdown-weight, 600);
  line-height: var(--type-nav-dropdown-line-height, 1.5);
  letter-spacing: var(--type-nav-dropdown-letter-spacing, 0.02em);
  /* Proper-case for submenu items. Every Stryker display token is uppercase
     and these submenu items must stay proper-case, exactly as Aerial's do.
     Load-bearing — Aerial carries the same !important for the same reason. */
  /* PARITY-GATE-1: value from the nav_dropdown record entry; the literal fallback is what shipped before. */
  text-transform: var(--type-nav-dropdown-text-transform, none) !important;
  color: var(--type-nav-dropdown-color, var(--stryker-body-text));
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.nav-mega-dropdown-link:hover {
  background: var(--nav-dropdown-hover-bg, rgba(0, 0, 0, 0.04));
  color: var(--nav-dropdown-hover-color, var(--stryker-primary));
}


/* Open-state pin. Stryker has the same markup and the same exposure as
   Aerial: Tailwind's group-hover:block does not compile reliably for the
   dropdown root, so pin the open state explicitly so the panel stays open
   across the 4px margin-top gap when the pointer travels trigger→panel. */
.nav-mega-root:hover > .nav-mega-panel,
.nav-mega-root:focus-within > .nav-mega-panel {
  display: block !important;
}


/* 7.9 — Header utility bar typography (EYEBROW-4, 2026-08-18;
   supersedes the EYEBROW-2 values that shipped in 4dc8606c)
   DELIBERATE DIVERGENCE FROM THE FUSION SOURCE — NOT A PARITY RESTORATION.
   Stryker's Fusion original renders this bar at 11px / rgb(155,155,157);
   Aerial's renders at 13px / rgb(106,113,129). John chose these absolute
   sizes on 2026-08-18 after reviewing a rendered preview of the Stryker
   header: Stryker 14px, Aerial 13px, each taking its own --foreground
   token for colour. The two bars therefore stay one pixel apart by design
   — the tenants are NOT collapsed onto a shared size or a shared default.
   Size and colour here are chosen, not source-derived.
   This block is NOT a mirror of aerial-handoff.css — Aerial's utility-bar
   selector list also carries font-family, font-weight, letter-spacing and
   text-transform (source-derived), whereas Stryker's carries only font-size
   and colour here. The divergence is recorded so a future diff against the
   Fusion source can see it was intentional.
   font-weight is NOT set here: it stays source-derived (600 on Stryker,
   700 on Aerial). Text-transform and letter-spacing likewise stay
   source-derived. Background, height, padding, borders and the help icon
   are untouched — this is a type treatment only.
   Specificity/!important mirror the Aerial block: SiteHeader.tsx sets
   text-[11px] on .site-header-utility-bar-inner via a Tailwind arbitrary
   value, which otherwise wins at equal specificity on some build orders. */
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 {
  /* UTILITY-BAR-ROLE-1 (2026-09-05): every value below is now a brand-record
     variable with today's measured literal as the fallback, so this renders
     byte-identically until the record carries the `utility_bar` roles. */
  font-family: var(--type-utility-bar-font-family, var(--font-body)) !important;
  font-size: var(--type-utility-bar-size-desktop, 14px) !important;
  /* EYEBROW-5 (2026-08-18, John's decision): eyebrow copy unbolded — weight
     400 on every utility-bar element. This block previously set only font-size
     and colour, so the component's own Tailwind classes (font-semibold on
     links, font-bold on the phone item via its bold flag) ruled at 600/700.
     font-weight: 400 !important here beats both. The utility_bar data's bold
     flags are NOT changed — the data still records which item is the phone. */
  font-weight: var(--type-utility-bar-weight, 400) !important;
  line-height: var(--type-utility-bar-line-height, 1.5) !important;
  letter-spacing: var(--type-utility-bar-letter-spacing, 0.025em) !important;
  text-transform: var(--type-utility-bar-text-transform, none) !important;

  color: var(--type-utility-bar-color, hsl(var(--foreground))) !important;
}

/* UTILITY-BAR-ROLE-1 — bar chrome. The fallbacks are exactly what SiteHeader.tsx
   renders today (bg-muted/60, px-6 py-1, min-h-8, justify-end, mx-2 separator
   in text-muted-foreground/50, hover:text-foreground). */
.site-header .site-header-utility-bar {
  background-color: var(--utility-bar-background, hsl(var(--muted) / 0.6));
}
.site-header .site-header-utility-bar-inner {
  padding: var(--utility-bar-padding, 4px 24px);
  min-height: var(--utility-bar-min-height, 32px);
  justify-content: var(--utility-bar-justify, flex-end);
}
/* UTILITY-BAR-ROLE-1d — hover and separator colours must beat the type rule.
   Specificity: the type rule above is (0,2,0) with color ... !important; the
   hover rule is (0,2,1) and the separator rule is (0,2,0) — all three carry
   !important, so the later source order here wins. Without !important these
   two rules could never take effect, breaking parity with the worker, which
   applies hover_color and separator_color directly.
   Separator fallback corrected to hsl(var(--foreground)): today the separator
   span is caught by the !important type rule and renders in the TEXT colour,
   not muted-foreground/50, so that is the value that keeps the render
   byte-identical until a record supplies separator_color. */
.site-header .site-header-utility-item a:hover {
  color: var(--utility-bar-hover-color, hsl(var(--foreground))) !important;
}
.site-header .site-header-utility-item > span:last-child {
  margin-left: var(--utility-bar-item-gap, 8px);
  margin-right: var(--utility-bar-item-gap, 8px);
  color: var(--utility-bar-separator-color, hsl(var(--foreground))) !important;
}

@media (max-width: 767.98px) {
  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-size: var(--type-utility-bar-size-mobile, 14px) !important;
  }
}

/* Nav layout (EYEBROW-5 / NAV-CENTER-1, 2026-08-18, John's decision): center
   the main nav row between the logo (far-left) and the utility icons
   (far-right), mirroring aerial-handoff.css. Stryker's nav items carry no
   horizontal padding (§7.4 sets none), so the existing gap is preserved —
   do NOT copy Aerial's gap:0 companion rule, or the labels fuse. */
.site-header nav.site-header-main-nav {
  /* NAV-TRIGGER-ROLE-1: both values now come from the record when it carries
     the `nav_trigger` block; the fallbacks are today's render (Tailwind gap-5
     = 20px, centered by the rule below since EYEBROW-5). */
  justify-content: var(--nav-trigger-justify, center) !important;
  gap: var(--nav-trigger-item-gap, 20px);
}

/* 7.10 — Content body inside PageContentSection
   (CONTENT-CSS-1 Part 2, 2026-08-18. Structural mirror of
   aerial-handoff.css §8.5 — SPACING copied exactly, per John's request that
   Stryker's rhythm match Aerial's. Typeface/weight/tracking are NOT copied:
   they stay Stryker's own §2 values.)

   Why this scope: the homepage renders body copy through PageContentSection
   in src/pages/Index.tsx, which emits `.content-body` and never applies
   `.stryker-page`. All Stryker typography above is `.stryker-page`-scoped and
   is therefore inert on the homepage. Keying on
   `body main.public-content .content-body` matches on BOTH the homepage and
   slug pages, exactly as Aerial's §8.5 does.

   NOTE (reported, not fixed here): Aerial's §8.5 sets no paragraph margin
   either, so Aerial's homepage renders consecutive paragraphs flush. The `p`
   rule below fixes Stryker only; aerial-handoff.css is deliberately untouched
   this turn. */
body main.public-content .content-body h2 {
  font-family: var(--stryker-font-primary-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stryker-body-text);
  font-size: 1.75rem;
  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(--stryker-font-primary-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stryker-body-text);
  font-size: 1.125rem;
  text-align: left;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}
body main.public-content .content-body h4 {
  font-family: var(--stryker-font-secondary-display);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stryker-primary);
  font-size: 1.125rem;
  text-align: left;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
body main.public-content .content-body p {
  text-align: left;
  margin: 0 0 1rem;
}
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 — End
   ----------------------------------------------------------------------------- */




/* -----------------------------------------------------------------------------
   MOBILE-NAV-ROLE-1 — the phone drawer behind the hamburger.

   The drawer is a Radix Sheet PORTALED TO <body>, so `.site-header` is NOT an
   ancestor: every selector here is scoped to the `.site-header-mobile-drawer`
   class hook on SheetContent (see the REGION CLASS CONTRACT in SiteHeader.tsx).

   Every fallback below is today's rendered value, measured 2026-09-06 at 390px,
   so with no `mobile_nav` role in the record the drawer renders byte-identically
   to before this ticket. Panel width, padding, overlay, shadow, title margin,
   list gaps, the close control and the Support panel geometry stay in code.

   SPECIFICITY / !important. Every selector here is (0,1,0) or (0,2,0) and the
   tenant handoff sheet is linked AFTER the bundle stylesheet, so it already
   beats Tailwind at equal specificity. `!important` is added only where the
   value must beat a Tailwind utility that is a class ON THE SAME ELEMENT:
     - the title            (font-heading, uppercase, tracking-wide, text-sm)
     - the nav links        (text-sm, font-heading, font-semibold, uppercase,
                             tracking-wide, py-3, border-border/60)
     - the utility a/span   (text-xs) — font-size ONLY. `color` is deliberately
                             NOT !important: a utility_bar item may carry an
                             inline `style="color:…"` from tenant config, and
                             !important would beat that inline colour and change
                             today's render.
     - the Support panel links (text-xs, font-body)
   The panel background and the utility group's border-bottom-colour carry no
   !important (`bg-background`, `border-border`): equal specificity plus later
   source order already wins, and that is what the utility-bar role does too.
   ----------------------------------------------------------------------------- */
.site-header-mobile-drawer {
  background-color: var(--mobile-nav-panel-background, hsl(var(--background)));
}
.site-header-mobile-drawer-title,
.site-header-mobile-drawer-nav a {
  font-family: var(--type-mobile-nav-font-family, var(--font-heading)) !important;
  font-size: var(--type-mobile-nav-size-desktop, 14px) !important;
  font-weight: var(--type-mobile-nav-weight, 600) !important;
  line-height: var(--type-mobile-nav-line-height, 20px) !important;
  letter-spacing: var(--type-mobile-nav-letter-spacing, 0.025em) !important;
  text-transform: var(--type-mobile-nav-text-transform, uppercase) !important;
  color: var(--type-mobile-nav-color, hsl(var(--foreground))) !important;
}
.site-header-mobile-drawer-nav a {
  padding: var(--mobile-nav-link-padding, 12px 0) !important;
  border-bottom-color: color-mix(
    in srgb,
    var(--mobile-nav-divider-color, hsl(var(--border))) 60%,
    transparent
  ) !important;
}
.site-header-mobile-drawer-nav a:hover {
  color: var(--mobile-nav-hover-color, hsl(var(--primary))) !important;
}
.site-header-mobile-drawer-utility {
  border-bottom-color: var(--mobile-nav-divider-color, hsl(var(--border)));
}
.site-header-mobile-drawer-utility li {
  /* MOBILE-NAV-ROLE-1b: explicit row box, 4 + 16 + 4 = the 24px row the inline
     link rendered inside the li's 24px line box before this ticket. */
  padding: var(--mobile-nav-utility-row-padding, 4px 0);
}
/* Scoped to the utility ROWS: the Support PANEL links keep the component's
   px-4 py-2 geometry (see the panel rule below). */
.site-header-mobile-drawer-utility > li > a,
.site-header-mobile-drawer-utility > li > span {
  display: block;
  line-height: 16px;
  font-size: var(--mobile-nav-utility-size, 12px) !important;
  color: var(--mobile-nav-utility-color, hsl(var(--muted-foreground)));
}
.site-header-mobile-drawer-utility .site-header-utility-support-trigger {
  /* flex, not inline-flex, so the li carries no inline line box of its own. */
  display: flex;
  line-height: 16px;
  font-size: var(--mobile-nav-utility-size, 12px) !important;
  color: var(--mobile-nav-utility-color, hsl(var(--muted-foreground)));
}
.site-header-mobile-drawer-utility > li > a:hover,
.site-header-mobile-drawer-utility .site-header-utility-support-trigger:hover {
  color: var(--mobile-nav-utility-hover-color, hsl(var(--foreground)));
}
.site-header-mobile-drawer .site-header-utility-support-panel {
  border-color: var(--mobile-nav-divider-color, hsl(var(--border)));
}
.site-header-mobile-drawer .site-header-utility-support-panel a {
  font-size: var(--mobile-nav-utility-size, 12px) !important;
  color: var(--type-mobile-nav-color, hsl(var(--foreground))) !important;
}
.site-header-mobile-drawer .site-header-utility-support-panel a:hover {
  background: var(--mobile-nav-utility-menu-hover-background, hsl(var(--muted))) !important;
  color: var(--mobile-nav-hover-color, hsl(var(--primary))) !important;
}
/* Phone widths: the type-scale entry's mobile size. Same 14px fallback, so the
   render does not move without a record. Breakpoint matches the emitter's own
   mobile block in buildTypeScaleCss. */
@media (max-width: 767.98px) {
  .site-header-mobile-drawer-title,
  .site-header-mobile-drawer-nav a {
    font-size: var(--type-mobile-nav-size-mobile, 14px) !important;
  }
}