/* ==========================================================================
   sleepapneaimplant.org — site-wide styles (chrome build, 2026-07-07;
   Phase-1 design refresh applied per DESIGN-REFRESH-PLAN.md)

   Sources of truth:
   - DESIGN-REFRESH-PLAN.md section 1 — the design-token system in :root
     (navy/teal/warm-paper palette, Inter body + Source Serif 4 display).
   - Squarespace 7.1 generated site.css (header/nav/overlay behavior);
     its legacy theme variables survive below, repointed at the tokens.
   - custom.css v69 (snapshots/2026-07-01-post-phase2/custom.css.v69),
     ported below with Squarespace-fighting rules pruned (see comments).
   ========================================================================== */

:root {
  /* ==================================================================
     Design tokens (DESIGN-REFRESH-PLAN.md section 1) — the system every
     rule below consumes. Note: the plan names both the body size and the
     running-text color "--text-body"; the color half is exposed here as
     --body-color to avoid the collision.
     ================================================================== */

  /* --- typography roles --- */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- type scale (rem so 200% zoom works; 18px body floor) --- */
  --text-display: clamp(2rem, 1.4rem + 2vw, 2.5rem);       /* h1: 32→40px */
  --text-h2:      clamp(1.55rem, 1.2rem + 1.2vw, 1.875rem);
  --text-h3:      1.25rem;   /* Inter 600, navy, lh 1.4 */
  --text-eyebrow: 0.8125rem; /* Inter 600, UPPERCASE, ls 0.06em, teal */
  --text-body:    1.125rem;  /* 18px, lh 1.65 */
  --text-small:   0.9375rem; /* card copy */
  --text-caption: 0.875rem;  /* bylines, disclaimers — never smaller */

  /* --- ink --- */
  --ink:        #1a2744;  /* headings, primary text, dark surfaces */
  --body-color: #3a4a5c;  /* running text — 8.9:1 on white */
  --text-muted: #5b6573;  /* the ONE muted gray */

  /* --- paper --- */
  --paper:      #ffffff;
  --paper-warm: #f5f3ee;  /* THE warm tint */
  --border:     #e9e6dd;  /* the only hairline on light bg */

  /* --- teal, two named roles --- */
  --teal:         #0f766e; /* text links, CTA fills, chips — AA at all sizes */
  --teal-icon:    #0a8f96; /* decorative only: icons, arrows, gradient endpoint */
  --teal-on-dark: #7dd3d8; /* emphasis on navy */

  /* --- the one signature surface --- */
  --hero-gradient: linear-gradient(135deg, #1a2744 0%, #2a4a6b 50%, #0a8f96 100%);

  /* --- tints = ink/teal at opacity, no new hues --- */
  --ink-10: rgba(26, 39, 68, .10);
  --teal-12: rgba(15, 118, 110, .12);

  /* --- layout & spacing --- */
  --w-text: 720px;
  --w-card: 880px;
  --w-wide: 1100px;
  --pad-x: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 80px);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-btn: 8px;
  --shadow-card: 0 2px 12px rgba(26, 39, 68, .06);
  --lift: translateY(-2px);
  --ease: 0.2s ease;

  /* ==================================================================
     Squarespace-legacy variables, repointed at the token system
     (change #1: the Gen-1 green/beige/Roboto defaults die here).
     ================================================================== */
  --white-hsl: 0, 0%, 100%;
  --black-hsl: 0, 0%, 0%;
  --accent-hsl: 175.3, 77.4%, 26.1%;          /* was green; now --teal */
  --safeDarkAccent-hsl: 175.3, 77.4%, 26.1%;  /* was green; now --teal */
  --safeLightAccent-hsl: 175.3, 77.4%, 26.1%;
  --safeInverseAccent-hsl: 0, 0%, 100%;
  --lightAccent-hsl: 42.9, 25.9%, 94.7%;      /* was beige; now --paper-warm */
  --darkAccent-hsl: 221.4, 44.7%, 18.4%;      /* now --ink */

  /* --- semantic colors --- */
  --siteBackgroundColor: var(--paper);
  --paragraphColor: var(--body-color);
  --headingColor: var(--ink);
  --paragraphLinkColor: var(--teal);
  --navigationLinkColor: var(--ink);
  --headerBackgroundColor: var(--paper);
  --menuOverlayBackgroundColor: var(--paper);
  --menuOverlayNavigationLinkColor: var(--ink);

  /* --- typography (legacy names, token values) --- */
  --base-font-size: 16px;
  --body-font-family: var(--font-sans);
  --heading-font-family: var(--font-sans); /* h1/h2 take --font-display below */
  --body-letter-spacing: normal;
  --body-line-height: 1.65;

  /* --- layout --- */
  --maxPageWidth: 2000px;
  --pagePadding: 4vw;
}

/* ==========================================================================
   1. Base typography (matched to live computed styles)
   ========================================================================== */

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--siteBackgroundColor);
  color: var(--paragraphColor);
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

/* Token type scale (replaces the Squarespace fluid calc() scale).
   Display roles: h1/h2 = Source Serif 4 600; h3/h4 and all UI = Inter. */
h1, h2, h3, h4 {
  font-style: normal;
  text-transform: none;
  color: var(--headingColor);
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-display); line-height: 1.15; }
h2 { font-size: var(--text-h2); line-height: 1.25; }
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}
h3 { font-size: var(--text-h3); }
h4 { font-size: 1.125rem; }

body { font-size: var(--text-body); }
p { line-height: var(--body-line-height); }
.sqsrte-large { font-size: 1.25rem; line-height: var(--body-line-height); }
.sqsrte-small { font-size: var(--text-small); line-height: var(--body-line-height); }

/* Squarespace global link behavior: inherit color, no underline */
a { cursor: pointer; color: inherit; text-decoration: none; }
p a { color: var(--paragraphLinkColor); }

b, strong { font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   2. Header (matches live: solid white header, nav right, logo left;
      not fixed — scrolls with the page)
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 10;
  background-color: var(--headerBackgroundColor);
  border-bottom: 1px solid var(--border);
  line-height: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 2vw var(--pagePadding);
}

/* Skip link (hidden until keyboard focus, primary-button spec) */
.header-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background-color: var(--teal);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  transition: var(--ease);
}
.header-skip-link:focus {
  left: var(--pagePadding);
  top: 0.5em;
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.header-title-logo {
  width: auto;
  font-size: 0;
}
.header-title-logo a {
  display: inline-block;
  max-width: 100%;
  max-height: 40px;
}
.header-title-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 40px;
}

/* --- desktop nav --- */
.header-nav {
  margin-left: auto;
  text-align: right;
  padding-left: 2vw;
}
.header-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 2vw;
  row-gap: 6px;
}
.header-nav-item {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
  font-size: 0.95rem;
}
@media (max-width: 1280px) { .header-nav-item { font-size: 0.9rem; } .header-nav-list { column-gap: 1.4vw; } }

.header-nav-item a,
.header-nav-item button {
  display: inline-flex;
  align-items: center;
  color: var(--navigationLinkColor);
  text-decoration: none;
  padding: 0.1em 0;
  transition: color var(--ease);
}
.header-nav-item a:hover,
.header-nav-item button:hover {
  color: var(--teal);
}
.header-nav-item button.header-nav-folder-title {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  min-width: 0;
  width: auto;
  height: auto;
  line-height: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

/* Folder ("Patient Resources") title keeps a hairline underline affordance */
.header-nav-folder-title-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
/* Active page: 2px teal underline, 6px offset */
.header-nav-item--active > a:not(.header-nav-folder-title) {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.header-nav-folder-item--active .header-nav-folder-item-content {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --- desktop dropdown --- */
.header-nav-item--folder { position: relative; }
.header-nav-folder-content {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: auto;
  right: -1em;
  padding: 0.75em 1em;
  text-align: right;
  min-width: 200px;
  z-index: 10;
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
}
.header-nav-item--folder:hover .header-nav-folder-content,
.header-nav-item--folder:focus-within .header-nav-folder-content,
.header-nav-folder-title[aria-expanded="true"] + .header-nav-folder-content {
  display: block;
  pointer-events: auto;
}
.header-nav-folder-item { line-height: 1.3; }
.header-nav-folder-item a {
  display: inline-flex;
  align-items: center;
  color: var(--navigationLinkColor);
  padding: 0.25em 0;
  transition: color var(--ease);
}
.header-nav-folder-item a:hover { color: var(--teal); }

/* --- burger (mobile only; double-line hamburger, 1px lines) --- */
.header-burger-btn {
  display: none;
  position: relative;
  margin-left: auto;
  flex: 0 0 50px;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}
.burger-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
}
.burger-inner { position: relative; width: 100%; height: 100%; }
.burger-inner .top-bun,
.burger-inner .patty,
.burger-inner .bottom-bun {
  position: absolute;
  display: block;
  top: 0; left: 0; bottom: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background-color: var(--navigationLinkColor);
  transition: transform 250ms cubic-bezier(0.2, 0.6, 0.3, 1), width 250ms cubic-bezier(0.2, 0.6, 0.3, 1);
  will-change: transform, width;
}
.burger-inner .top-bun { transform: translateY(-5.5px); }
.burger-inner .bottom-bun { transform: translateY(5.5px); }
.burger-inner .patty { transform: scale(0); }
.burger--active .burger-inner .top-bun { transform: translateX(3.5px) rotate(-135deg); width: 28px; }
.burger--active .burger-inner .bottom-bun { transform: translateX(3.5px) rotate(135deg); width: 28px; }
.burger--active .burger-inner .patty { transform: scale(0); }

/* --- mobile menu overlay (white, centered, folder slides in from right) --- */
.header-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--menuOverlayBackgroundColor);
  text-align: center;
  font-size: 1.2em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: visibility 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header--menu-open .header-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.header-menu-nav {
  position: relative;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header--menu-open .header-menu-nav { transform: translateY(0); }

.header-menu-nav-folder {
  position: absolute;
  display: flex;
  top: 0; left: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-menu-nav-folder[data-folder="root"] { transform: translateX(0); }
.header-menu-nav-folder--active { transform: translateX(0); will-change: transform; }
.header-menu-nav-folder--open { transform: translateX(-100%) !important; }

.header-menu-nav-folder-content {
  position: relative;
  display: flex;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
  /* keep first/last items clear of the fixed header row */
  padding: 15vw 0 6vw;
  box-sizing: border-box;
}

.header-menu-nav-item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--pagePadding);
  padding-right: var(--pagePadding);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
}
.header-menu-nav-item a {
  display: inline-block;
  color: var(--menuOverlayNavigationLinkColor);
  transition: color var(--ease);
}
.header-menu-nav-item a:hover { color: var(--teal); }
.header-menu-nav-item-content { font-size: 1.75rem; }

.header-menu-controls {
  padding-bottom: 10px;
  opacity: 0.5;
  font-size: 0.85em;
}
.header-menu-controls-control { padding: 0 10px; }
.header-menu-controls-control span { position: relative; display: inline-block; }

/* menu open: lock scroll, pin header row over the overlay, drop white bg */
body.header--menu-open { overflow: hidden; }
.header--menu-open .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: transparent;
}
.header--menu-open .burger-inner .top-bun,
.header--menu-open .burger-inner .patty,
.header--menu-open .burger-inner .bottom-bun {
  background-color: var(--menuOverlayNavigationLinkColor);
}

/* --- responsive switch (live: burger at <=799px; logo shrinks to 30px) --- */
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-inner { padding: 6vw; }
  .header-nav { display: none; }
  .header-burger-btn { display: flex; }
  .header-title-logo img { max-height: 30px; }
  .header-title-logo a { max-height: 30px; }
}

/* ==========================================================================
   3. Footer (full-width navy band: brand block + 3-column nav + meta bar;
      markup in src/components/Footer.astro. Scoped to .site-footer-* classes
      only — never a bare footer element selector; understanding-inspire has
      an in-article <footer>.)
   ========================================================================== */

.site-footer { margin: 0; background: var(--ink); font-family: var(--font-sans); color: rgba(255,255,255,.85); }
.site-footer-inner { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 48px; box-sizing: border-box; max-width: var(--w-wide); margin: 0 auto; padding: var(--section-y) var(--pad-x) 48px; }
.site-footer-wordmark { display: inline-block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; color: #fff; text-decoration: none; margin: 0 0 12px; transition: var(--ease); }
.site-footer-wordmark:hover { color: var(--teal-on-dark); }
.site-footer-credential { font-size: var(--text-small); font-weight: 500; color: var(--teal-on-dark); line-height: 1.5; margin: 0 0 16px; }
.site-footer-disclaimer { font-size: var(--text-caption); color: rgba(255,255,255,.65); line-height: 1.6; max-width: 40ch; margin: 0; }
.site-footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.site-footer-col-title { font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.65); margin: 0 0 14px; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer-col li { margin: 0 0 10px; }
.site-footer-col a { color: rgba(255,255,255,.85); font-size: var(--text-small); line-height: 1.5; text-decoration: none; transition: var(--ease); }
.site-footer-col a:hover { color: var(--teal-on-dark); }
.site-footer a:focus-visible { outline: 2px solid var(--teal-on-dark); outline-offset: 3px; border-radius: 2px; }
.site-footer-meta { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer-meta p { box-sizing: border-box; max-width: var(--w-wide); margin: 0 auto; padding: 20px var(--pad-x); font-size: var(--text-caption); color: rgba(255,255,255,.55); line-height: 1.5; }
@media (max-width: 768px) { .site-footer-inner { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; } .site-footer-nav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .site-footer-nav { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   4. Ported custom CSS (from live custom.css v69, pruned)

   DROPPED (Squarespace-fighting rules with no target in the new DOM):
   - .fluid-engine / .fe-block / .sqs-block-code grid + overflow hacks
   - #collection-* .fe-* { grid-template-rows } hacks
   - [data-section-id] / .collection-* { min-height:0 } section collapses
   - grid-row-start/end, grid-auto-rows, row-gap forcing on .fe-blocks
   - [data-section-id="69e13315..."] { padding-top:100px } nav-clearance
     (header no longer overlays the page) and its grid-row hack
   - [data-section-id="69cc10f3..."] { padding-top:0 } collapse
   - .collection-68ad189086b4782ed44c1cad (about page) content-wrapper
     padding/grid overrides — Squarespace section plumbing

   KEPT: every .sai-* component class, byline strip, references/related/
   FAQ cards, when-not-right card, HCP typography blocks, and the
   [data-section-id] background/padding rules that produce real visuals
   (they match verbatim page bodies that retain section wrappers; they are
   inert otherwise).
   ========================================================================== */

/* --- OSA section (homepage / understanding-inspire) --- */
/* Single source of truth for the risk grid (the duplicate block in
   index.body.html was removed — change #8; the two non-conflicting
   declarations it contributed are folded in here). */  
.sai-osa-takeaway, .sai-osa-takeaway * { color: #fff !important; opacity: 1 !important; }
.sai-osa-takeaway { background: linear-gradient(135deg, #1a2744 0%, #2a4a6b 100%) !important; padding: 28px 36px !important; border-radius: 12px !important; margin-top: 32px !important; font-size: 1.05rem !important; line-height: 1.65 !important; font-weight: 500 !important; letter-spacing: .01em !important; box-shadow: 0 4px 16px rgba(26, 39, 68, .15); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.sai-osa-takeaway strong, .sai-osa-takeaway b { color: #7dd3d8 !important; font-weight: 700 !important; }

/* --- byline (base + centered check-strip variant) --- */
.sai-byline { font-size: var(--text-caption); color: var(--text-muted); margin: 0 0 24px; line-height: 1.6; }
.sai-byline a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-12); }
.sai-byline a:hover { border-bottom-color: var(--teal); }
.sai-byline--strip { margin: 0; text-align: center; font-family: var(--font-sans); letter-spacing: .01em; }
.sai-byline--strip::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(10,143,150,.12); color: var(--teal-icon); font-size: 11px; font-weight: 700; margin-right: 9px; vertical-align: middle; }
@media (max-width: 640px) { .sai-byline--strip { padding: 0 10px; } } /* size stays at the --text-caption floor */

/* --- disclaimers --- */
.sai-vcu-disclaimer { font-size: 14px; color: #4b5563; background: #f9fafb; border-left: 3px solid #0f766e; padding: 14px 18px; margin: 24px 0 32px; line-height: 1.6; border-radius: 4px; }
.sai-vcu-disclaimer strong { color: #0f766e; }

/* --- byline strip section wrapper (article pages that retain it) --- */
[data-section-id="6a0e366efa29051321ddcf51"] .content-wrapper { padding-top: 18px !important; padding-bottom: 18px !important; }

/* --- "On this page" TOC --- */
.sai-toc { font-family: var(--font-sans); font-size: var(--text-small); }
.sai-toc summary { cursor: pointer; font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.sai-toc ol { list-style: none; margin: 10px 0 0; padding: 0; }
.sai-toc li { margin: 0; }
.sai-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--border); color: var(--text-muted); text-decoration: none; line-height: 1.45; transition: var(--ease); }
.sai-toc a:hover { color: var(--teal); }
.sai-toc a.is-active { color: var(--teal); border-left-color: var(--teal); font-weight: 600; }
.sai-toc--inline { max-width: var(--w-text); margin: 14px auto 0; text-align: left; }
h2[id] { scroll-margin-top: 24px; }
@media (min-width: 1024px) {
  .medi-article { max-width: 1040px; display: grid; grid-template-columns: minmax(0, var(--w-text)) 220px; column-gap: 48px; justify-content: center; }
  .medi-article > .medi-hero, .medi-article > .sai-byline { grid-column: 1 / -1; }
  .medi-article > .sai-toc { grid-column: 2; grid-row: 3; align-self: start; position: sticky; top: 32px; }
  .medi-article > .medi-body { grid-column: 1; grid-row: 3; }
  /* only an OPEN rail is non-collapsible by mouse; a closed summary stays
     clickable so the rail is recoverable after keyboard-collapse / no-JS /
     breakpoint crossing */
  .medi-article > .sai-toc[open] summary { pointer-events: none; }
  .medi-article > .sai-toc summary::-webkit-details-marker { display: none; }
  .medi-article > .sai-toc summary::marker { content: ""; }
}

/* --- references / related-reading / FAQ section headings --- */
.sai-references h2, .sai-related h2, .sai-faq h2 { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 600 !important; color: #1a2744 !important; letter-spacing: -.01em !important; line-height: 1.25 !important; text-align: center !important; text-transform: none !important; margin: 0 0 14px !important; }

/* --- references card --- */
[data-section-id="6a203e660122c464f5b13fbc"] .content-wrapper { padding-top: 72px !important; padding-bottom: 80px !important; }
.sai-references { max-width: 880px; margin: 0 auto; box-sizing: border-box; background: #fff; border: 1px solid #e9e6dd; border-radius: 16px; padding: 44px 52px 36px; box-shadow: 0 2px 12px rgba(26, 39, 68, .05); counter-reset: sai-ref; }
.sai-references p { font-size: .97rem; color: #3a4a5c; line-height: 1.7; text-align: left; margin: 0 0 10px; }
.sai-references > p:first-of-type { text-align: center; color: #5b6573; max-width: 660px; margin: 0 auto 6px; }
.sai-references h3 { counter-increment: sai-ref; position: relative; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 1.04rem !important; font-weight: 600 !important; color: #1a2744 !important; line-height: 1.45 !important; text-align: left !important; text-transform: none !important; margin: 28px 0 8px !important; padding: 26px 0 0 44px; border-top: 1px solid #e9e6dd; }
.sai-references h3::before { content: counter(sai-ref); position: absolute; left: 0; top: 23px; width: 28px; height: 28px; border-radius: 50%; background: #0f766e; color: #fff; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sai-references h3:first-of-type { border-top: none; padding-top: 2px; margin-top: 30px !important; }
.sai-references h3:first-of-type::before { top: -1px; }
.sai-references h3 ~ p { padding-left: 44px; }
.sai-references p em { color: var(--text-muted); font-size: .9rem; }
.sai-references a { color: #0f766e; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(15, 118, 110, .3); }
.sai-references a:hover { border-bottom-color: #0f766e; }

/* --- related-reading cards --- */
[data-section-id="6a20409980fe7849405415d7"] .content-wrapper { padding-top: 72px !important; padding-bottom: 80px !important; }
.sai-related { max-width: 1040px; margin: 0 auto; }
.sai-related ul { list-style: none !important; margin: 30px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.sai-related li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sai-related li { margin: 0 !important; padding: 0 !important; }
.sai-related li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; box-sizing: border-box; background: #f5f3ee; border: 1px solid #e9e6dd; border-radius: 12px; padding: 20px 22px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.45; color: #1a2744 !important; text-decoration: none !important; background-image: none !important; transition: var(--ease); }
.sai-related li a::after { content: "\2192"; flex: 0 0 auto; color: #0a8f96; font-size: 1.1rem; transition: transform var(--ease); }
.sai-related li a:hover { border-color: #0a8f96; background-color: #fff; box-shadow: 0 4px 14px rgba(10, 143, 150, .12); transform: var(--lift); }
.sai-related li a:hover::after { transform: translateX(3px); }

/* --- FAQ --- */
[data-section-id="6a2046c549056c381e4f4837"] .content-wrapper { padding-top: 72px !important; padding-bottom: 88px !important; }
.sai-faq { max-width: 840px; margin: 0 auto; }
.sai-faq h2 { margin-bottom: 34px !important; }
.sai-faq h3 { position: relative; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 1.06rem !important; font-weight: 600 !important; color: #1a2744 !important; line-height: 1.45 !important; text-align: left !important; text-transform: none !important; margin: 30px 0 10px !important; padding: 28px 0 0 44px; border-top: 1px solid #e9e6dd; }
.sai-faq h3::before { content: "Q"; position: absolute; left: 0; top: 25px; width: 28px; height: 28px; border-radius: 8px; background: rgba(10, 143, 150, .12); color: #0f766e; font-size: .9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sai-faq h3:first-of-type { border-top: none; padding-top: 2px; margin-top: 0 !important; }
.sai-faq h3:first-of-type::before { top: -1px; }
.sai-faq p { font-size: .97rem; color: #3a4a5c; line-height: 1.7; text-align: left; margin: 0 0 6px; padding-left: 44px; }

@media (max-width: 640px) {
  [data-section-id="6a203e660122c464f5b13fbc"] .content-wrapper, [data-section-id="6a20409980fe7849405415d7"] .content-wrapper, [data-section-id="6a2046c549056c381e4f4837"] .content-wrapper { padding-top: 48px !important; padding-bottom: 56px !important; }
  .sai-references { padding: 28px 20px 24px; }
  .sai-references h3 { padding-left: 38px; }
  .sai-references h3 ~ p { padding-left: 0; }
  .sai-faq p { padding-left: 0; }
  .sai-references h2, .sai-related h2, .sai-faq h2 { font-size: 1.6rem !important; }
}

/* --- HCP page typography (collection prefix removed: block ids are unique) --- */
#block-adb42a912cda96039c6c p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #3a4a5c; font-size: 1.02rem; line-height: 1.65; }

/* --- genio-procedure-video page hero (kept verbatim; scoped to a
       Squarespace body id — the page build may inline or re-scope it) --- */

/* (Dead [data-section-id] .section-background / .content-wrapper rules for
   sections that no longer exist in any body file were removed here —
   change #8. Section backgrounds are inline on each <section>.) */

/* --- when-not-right card --- */
.sai-when-not-right { max-width: 880px; margin: 0 auto; box-sizing: border-box; background: #fff; border: 1px solid #e9e6dd; border-radius: 16px; padding: 44px 52px 40px; box-shadow: 0 2px 12px rgba(26, 39, 68, .05); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.sai-when-not-right h2 { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 600 !important; color: #1a2744 !important; letter-spacing: -.01em !important; line-height: 1.25 !important; text-align: center !important; text-transform: none !important; margin: 0 0 14px !important; }
.sai-when-not-right > p:first-of-type { text-align: center; color: #5b6573; max-width: 660px; margin: 0 auto 10px; }
.sai-when-not-right p { font-size: 1rem; color: #3a4a5c; line-height: 1.7; text-align: left; margin: 0 0 10px; }
.sai-when-not-right h3 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 1.08rem !important; font-weight: 650 !important; color: #0f766e !important; line-height: 1.45 !important; text-align: left !important; text-transform: none !important; margin: 28px 0 8px !important; padding-top: 22px; border-top: 1px solid #e9e6dd; }
.sai-when-not-right h3:first-of-type { border-top: none; padding-top: 8px; }
.sai-when-not-right a { color: #0f766e; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(15, 118, 110, .3); }
.sai-when-not-right a:hover { border-bottom-color: #0f766e; }
@media (max-width: 640px) {
  .sai-when-not-right { padding: 28px 20px 24px; }
  .sai-when-not-right h2 { font-size: 1.6rem !important; }
}

/* ==========================================================================
   5. Motion guard (change #8): honor prefers-reduced-motion globally.
   ========================================================================== */


/* Restored 2026-07-08: these rules shared selector lists with the deleted
   .sai-osa-risk-* grid and were purged by accident (takeaway box lost its
   white text). Verbatim from the pre-purge file. */
.sai-osa-section h2, .sai-osa-section .sqs-block-html h2, .sai-osa-section .sqs-html-content h2, .sai-osa-content h2, .sai-osa-risks h2 { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 600 !important; color: #1a2744 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; text-align: center !important; max-width: 820px; margin: 48px auto 20px !important; text-transform: none !important; }
.sai-osa-section h3, .sai-osa-risks h3, .sai-osa-content h3 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 2rem !important; font-weight: 700 !important; color: #1a2744 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; text-align: center !important; max-width: 820px; margin: 48px auto 20px !important; text-transform: none !important; }
p.sai-osa-takeaway, .sai-osa-section p.sai-osa-takeaway, .sai-osa-risks p.sai-osa-takeaway, p.sai-osa-takeaway { color: #fff !important; opacity: 1 !important; }
p.sai-osa-takeaway strong, .sai-osa-content p.sai-osa-takeaway b, .sai-osa-risks p.sai-osa-takeaway strong, .sai-osa-risks p.sai-osa-takeaway b { color: #7dd3d8 !important; font-weight: 700 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}