/* =========================================================
   CureRays® Radiation Medicine — Shared Design System
   Iteration 1 (replacement build)
   Brand: "Keep Cancer Away®" · "Screen. Treat. Survive. Repeat.™"
   ========================================================= */

:root {
  /* ---- Official CureRays brand palette (sampled directly from the logo) ---- */
  /* ONLY two brand hues: brand blue #243090 and brand orange #F05424. */
  --blue:        #243090;  /* CureRays blue (logo wordmark) */
  --navy:        #1A2468;  /* darker shade of the SAME indigo, for dark surfaces */
  --blue-light:  #ECEDF8;  /* tint of brand blue, for soft fills */
  --blue-on-dark:#C9CCEC;  /* light indigo tint for body text on navy */
  --blue-on-dark-soft:#9CA1D2; /* muted indigo for captions/breadcrumbs on navy */
  --orange:      #F05424;  /* CureRays orange (logo rays) */
  --orange-dark: #CE441A;  /* darker shade of brand orange, for hovers */
  --orange-tint: #FDEDE6;  /* tint of brand orange, for soft fills */
  /* SAME brand hue, darkened only enough to clear WCAG AA 4.5:1 as SMALL text.
     Brand orange #F05424 is 3.50:1 on white, which is fine for large display
     and for logo/rays artwork but fails AA for the small uppercase eyebrow and
     tag labels. Those two use --orange-text (5.83:1 on white, 5.12:1 on the
     orange tint). The brand hue itself is unchanged everywhere else. */
  --orange-text: #B53B16;
  --teal:        #243090;  /* legacy alias -> brand blue (no off-brand teal) */

  /* Neutrals (text / lines only — not brand hues) */
  --ink:    #1B1F33;
  --body:   #3C4356;
  /* #686E82: one step darker than the old #6E7488, which measured 4.31:1 on
     the --bg-alt panels (AA needs 4.5). Now 4.70:1 on alt, 5.07:1 on white. */
  --muted:  #686E82;
  --line:   #E4E6F0;
  --bg:     #FFFFFF;
  --bg-alt: #F5F6FC;

  /* System */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(36, 48, 144, 0.08);
  --shadow-lg: 0 18px 48px rgba(36, 48, 144, 0.14);
  --maxw: 1140px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 720px; }
.center .lead { margin-left: auto; margin-right: auto; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  font-weight: 700; color: var(--orange-text); margin-bottom: .6rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(240,84,36,.35); }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--navy); color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--outline { background: #fff; border-color: var(--line); color: var(--navy); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--blue); font-size: 1.3rem; text-decoration: none; letter-spacing: -.01em; }
.brand .logo-mark { width: 30px; height: 30px; object-fit: contain; display: block; border-radius: 0; }
.brand sup { color: var(--orange); font-size: .55em; top: -.7em; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--body); font-weight: 500; font-size: .95rem; }
.nav-links a:hover { color: var(--blue); text-decoration: none; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--navy); cursor: pointer; }

/* ---- Hero ---- */
.hero {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(36,48,144,.16), transparent 60%),
              linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
  padding: 84px 0 64px;
}
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.hero h1 .accent { color: var(--orange); }
.hero .tagline { font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px; border: 1px solid var(--line);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill {
  background: var(--blue-light); color: var(--navy); font-weight: 600; font-size: .82rem;
  padding: 6px 14px; border-radius: 999px;
}

/* ---- Stat band ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-size: 2.4rem; font-weight: 800; color: var(--blue); line-height: 1; }
.stat .lbl { font-size: .9rem; color: var(--muted); margin-top: 6px; }

/* ---- Cards / grids ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { margin-top: 6px; }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-light); color: var(--blue); font-size: 1.4rem; margin-bottom: 14px;
}
.card .icon svg { width: 26px; height: 26px; display: block; }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { text-decoration: none; }
.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--orange-text); background: var(--orange-tint); padding: 4px 10px; border-radius: 6px;
}

/* ---- Education hub ---- */
.topic-card { display: flex; flex-direction: column; }
.topic-card .icon { background: linear-gradient(135deg, var(--blue), var(--orange)); color: #fff; }
.topic-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: .92rem; }
.topic-card li { margin-bottom: 4px; }
.topic-card .meta { margin-top: auto; padding-top: 16px; font-size: .82rem; color: var(--muted); }
.status-dot { display:inline-block; width:8px;height:8px;border-radius:50%; margin-right:6px; }
.status-live { background: var(--blue); }
.status-soon { background: var(--orange); }
.status-planned { background: #B9BED4; }

/* ---- Article / education page ---- */
.article-hero { background: var(--navy); color: #fff; padding: 64px 0; }
.article-hero h1 { color: #fff; }
.article-hero .lead { color: var(--blue-on-dark); }
.breadcrumb { font-size: .85rem; color: var(--blue-on-dark-soft); margin-bottom: 16px; }
.breadcrumb a { color: var(--blue-on-dark); }
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.toc { position: sticky; top: 92px; font-size: .9rem; }
/* The "On this page" label is an h2 (not an h4) so every guide/article page
   keeps a sequentially-descending heading order h1 -> h2 -> h3 (WCAG 1.3.1 /
   Lighthouse "heading-order"). It is styled down to eyebrow size, so the
   visual result is unchanged from the previous h4. */
.toc h2 { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  color: var(--muted); font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.toc a { display: block; padding: 6px 0; color: var(--body); border-left: 2px solid var(--line); padding-left: 12px; }
.toc a:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.prose h2 { margin-top: 48px; padding-top: 8px; }
.prose h2:first-child { margin-top: 0; }
.callout {
  background: var(--blue-light); border-left: 4px solid var(--blue); border-radius: var(--radius-sm);
  padding: 18px 22px; margin: 22px 0;
}
.callout--plain { background: var(--orange-tint); border-left-color: var(--orange); }
.callout strong { color: var(--navy); }
.stage-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.stage-table th, .stage-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stage-table th { background: var(--bg-alt); color: var(--navy); font-weight: 700; }
.stage-table .stage { font-weight: 700; color: var(--blue); white-space: nowrap; }
.modality { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.modality h3 { color: var(--blue); margin-bottom: 6px; }
.study { border-left: 3px solid var(--orange); padding: 4px 0 4px 16px; margin-bottom: 18px; }
.study .jrnl { font-size: .82rem; color: var(--muted); font-style: italic; }
.disclaimer { font-size: .85rem; color: var(--muted); background: var(--bg-alt); border-radius: var(--radius-sm); padding: 16px 20px; margin-top: 32px; }

/* ---- Footer ---- */
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---- Accessibility: visible keyboard focus (WCAG 2.4.7 AA) ----
   Every interactive element gets a high-contrast focus ring when reached by
   keyboard. :focus-visible keeps mouse clicks ring-free. The double ring
   (brand indigo inside a white halo) stays visible on both light sections and
   the navy/blue dark bands, so contrast never drops below 3:1. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.95);
}
/* On dark (navy/blue) surfaces invert: white ring with an indigo halo. */
.site-footer a:focus-visible,
.prefooter-cta a:focus-visible,
.hero a:focus-visible,
.band--navy a:focus-visible,
.btn--outline-light:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(36,48,144,.85);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Accessibility: skip link (WCAG 2.4.1 "Bypass Blocks", Level A) ----
   First focusable element in the document; lets keyboard and screen-reader
   users jump past the 6-menu global nav straight to page content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* ---- Pre-footer CTA band ---- */
.prefooter-cta { background: var(--blue); color: #fff; padding: 40px 0; }
.prefooter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.prefooter-cta h2 { color: #fff; margin: 0 0 6px; }
.prefooter-cta p { color: #EDEFFA; margin: 0; }
.prefooter-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.site-footer { background: var(--navy); color: var(--blue-on-dark); padding: 56px 0 28px; font-size: .92rem; }
.site-footer a { color: #DDE0F5; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 32px; }
/* Footer column headings are h2 (styled down) so the document heading
   order never skips a level after page content (WCAG 1.3.1 /
   Lighthouse "heading-order"). Visual size is unchanged. */
.site-footer h2 { color: #fff; font-size: .95rem; font-weight: 700;
  margin: 0 0 14px; line-height: 1.35; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand .logo-mark { width: 40px; height: 40px; font-size: 1.1rem; }
.footer-subscribe p { color: var(--blue-on-dark); margin: 0 0 12px; }
.footer-sub-form { display: flex; flex-direction: column; gap: 10px; }
.footer-sub-form input { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; }
.footer-sub-form input::placeholder { color: rgba(255,255,255,.55); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--blue-on-dark-soft); }

/* ---- Utilities ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.section-head { max-width: 740px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .prefooter-inner { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hero-grid, .article-layout { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .toc { position: static; display: none; }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff;
    flex-direction: column; padding: 16px 24px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .stats { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
}


/* ---- Dr. Hess navigator: bottom-corner audio guide -------------------
   Ships with [hidden] on the element; NAVIGATOR_JS clears it only after the
   browser reads metadata off the MP3, so a page whose audio has not been
   recorded yet renders nothing at all rather than a dead control.
   position:fixed keeps it out of the document flow, so it cannot shift the
   page (CLS) and cannot collide with the footer. Reduced-motion respected;
   below 640px it becomes a full-width bar so it never covers body copy. */
.navigator[hidden] { display: none !important; }
.navigator {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; gap: 12px; align-items: flex-start;
  width: min(340px, calc(100vw - 36px));
  padding: 14px 34px 14px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  animation: navigator-in .28s ease-out both;
}
@keyframes navigator-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .navigator { animation: none; } }
.navigator__face {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex: 0 0 56px; border: 2px solid var(--line);
}
.navigator__body { min-width: 0; }
.navigator__invite {
  margin: 0 0 8px; font-size: .95rem; font-weight: 600; line-height: 1.3;
}
.navigator__audio { width: 100%; height: 34px; }
.navigator__note { margin: 8px 0 0; font-size: .76rem; color: var(--muted); }
.navigator__close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--muted); padding: 4px 6px;
  border-radius: 6px;
}
.navigator__close:hover { color: var(--orange-text); }
.navigator__close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .navigator { right: 0; left: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; }
}
@media print { .navigator { display: none !important; } }

/* ---- study citations + reference footnotes on education guides ---- */
.study { margin: 0 0 18px; }
.study .jrnl { margin-top: 4px; font-size: .9rem; color: var(--muted); }
.cite-link, .ref-list a { color: var(--blue); text-decoration: underline; }
.cite-link:hover, .ref-list a:hover { color: var(--orange-text); }
sup.fn-ref { line-height: 0; font-size: .72em; margin-left: 2px; }
/* the number itself is not descriptive, so keep the hit area generous */
sup.fn-ref a { color: var(--blue); text-decoration: none; padding: 0 2px; font-weight: 700; }
sup.fn-ref a:hover { text-decoration: underline; color: var(--orange-text); }
.references { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line); }
.references h2 { margin-top: 0; }
.references .ref-note { font-size: .92rem; color: var(--muted); margin-bottom: 14px; }
.ref-list { padding-left: 22px; }
.ref-list li { margin-bottom: 10px; font-size: .92rem; line-height: 1.55; color: var(--body); }
/* :target highlight so a footnote jump is visible, not just a scroll */
.ref-list li:target { background: var(--orange-tint); border-radius: var(--radius-sm);
                      box-shadow: 0 0 0 6px var(--orange-tint); }
.ref-list .pmid { color: var(--muted); white-space: nowrap; }
.ref-list .unlinked { color: var(--muted); font-style: italic; }
.fn-back { text-decoration: none; margin-left: 4px; }
@media print { .references { break-inside: avoid; } sup.fn-ref a { text-decoration: none; } }

/* ---- single-file site: page routing + logo ---- */
.page { display: none; }
.page.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* logo: never clip it, and show it at a confident size */
/* give the bar more room than the 1140px content column so the 6 menus +
   2 buttons sit on ONE line instead of wrapping (which read as crowded) */
.site-header .nav { overflow: visible; height: 84px; align-items: center; max-width: 1320px; gap: 16px; }
.brand { flex-shrink: 0; white-space: nowrap; overflow: visible; min-width: 0; align-items: center; gap: 10px; font-size: 1.34rem; }
.brand .logo-mark { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; }
/* keep the (R) tucked tight to the wordmark: it lives inside .wordmark so the
   flex gap never pushes it away from "CureRays" */
/* Brand lockup: the real two-line logo image, replacing the old
   mark + HTML-text pairing that rendered the wordmark in the body font. */
.brand-lockup { display: block; height: 40px; width: auto; }
.brand--footer .brand-lockup { height: 44px; filter: brightness(0) invert(1); }
@media (max-width: 780px) { .brand-lockup { height: 32px; } }
.brand .wordmark { display: inline-block; line-height: 1; }
.brand .wordmark sup { font-size: .5em; vertical-align: super; top: 0; margin-left: 1px; color: var(--orange); }
.lockup { display: block; width: 100%; max-width: min(620px, 100%); height: auto; object-fit: contain; margin: 0 0 18px; }
@media (max-width: 560px) { .lockup { max-width: 340px; } .site-header .nav { height: 74px; } .brand { font-size: 1.28rem; } .brand .logo-mark { width: 44px; height: 44px; } }

/* ---- live curerays.com photography (Wix images) ---- */
.wix-photo { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 14px 38px rgba(36,48,144,.14); }
figure.media { margin: 0; }
figure.media figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); text-align: center; }
figure.cat-thumb { margin: 0 0 4px; }
.cat-thumb-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 22px rgba(36,48,144,.12); }
.hero-card .wix-photo { border-radius: 14px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(36,48,144,.12); }
/* Crop the live "doctors" shield graphic so the placeholder "870+ Doctors"
   stat text (baked into the lower part of the image) is removed -- we show only
   the top band with the provider headshots. */
/* User-edited transparent shield graphic (2026-08-09): background removed and
   in-image title stripped (the card's HTML eyebrow below carries the label), so
   no crop-box, no shadow rectangle -- render the full shield naturally. */
/* The shield graphic has its baked-in title removed, so the label is real text
   laid INSIDE the shield's lower field. The wrapper is sized to the artwork
   (width-limited, intrinsic aspect) and the label is absolutely positioned in
   the shield's empty cream area, clamped so it can never overflow the sides. */
/* Clinical Outcomes: the live before/after gallery is a tall photo column --
   cap its height and let it scroll rather than pushing the page down 1400px. */
.outcomes-gallery { max-width: 470px; margin-left: auto; margin-right: auto; }
.outcomes-gallery img { display: block; width: 100%; height: auto; border-radius: 12px; }
.doctors-shield { position: relative; width: 62%; max-width: 210px; margin: 0 auto 10px;
  container-type: inline-size; }
.hero-card .doctors-shield .doctors-img { display: block; width: 100%; margin: 0; border-radius: 0; box-shadow: none; object-fit: contain; }
.doctors-shield__label {
  position: absolute; left: 12%; right: 12%; top: 58%;
  margin: 0; text-align: center; line-height: 1.14; pointer-events: none;
}
.doctors-shield__label span,
.doctors-shield__label strong {
  display: block; color: var(--blue); letter-spacing: -.015em; white-space: nowrap;
}
/* px fallback first, then container-relative so the label always scales with
   the shield artwork no matter what width the card gives it. */
.doctors-shield__label span    { font-weight: 600; font-size: 13px;   margin-bottom: .1em; }
.doctors-shield__label strong  { font-weight: 800; font-size: 16px; }
.doctors-shield__label span    { font-size: 6.6cqw; }
.doctors-shield__label strong  { font-size: 8.2cqw; }
@media (max-width: 900px) { .doctors-shield { max-width: 180px; } }
/* Conditions category thumbnail (mirrors live curerays.com square photo above each section) */
figure.cond-thumb { margin: 0 0 14px; }
.cond-thumb-img { display: block; width: 132px; height: 132px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 26px rgba(36,48,144,.14); }
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
/* An odd number of tiles would leave a hole in the last row. Let a lone final
   tile span the full width instead -- the SRT-100 outcomes chart is landscape
   and reads better wide anyway. Keeps working if a tile is added or removed. */
.outcome-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 620px; }
@media (max-width: 760px) { .outcome-grid { grid-template-columns: 1fr; }
  .outcome-grid > :last-child:nth-child(odd) { max-width: none; } }
/* Newsletter signup ----------------------------------------------------------
   Sits on the indigo band, so labels and fine print are white and the fine
   print is held at .88 rather than a lighter grey -- on a saturated background
   a muted grey drops under the 4.5:1 floor. */
.signup-form { margin-top: 18px; }
.signup-form label { display: block; font-weight: 600; color: #fff; margin-bottom: 6px; }
.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-row input[type="email"] { flex: 1 1 260px; min-width: 0; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff; }
.signup-row input[type="email"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.signup-row .btn { flex: 0 0 auto; }
.signup-fine { margin: 12px 0 0; font-size: .86rem; color: #fff; opacity: .88; max-width: 56ch; }
.signup-fine a { color: #fff; text-decoration: underline; }
.signup-form .field-err, .signup-form .form-errsum { color: #fff; font-weight: 600; }
/* Honeypot: hidden from people and assistive tech, visible to naive bots.
   display:none would let some bots skip it, so move it out of view instead. */
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-sub-fine { margin-top: 10px; font-size: .82rem; opacity: .85; }
.footer-sub-fine a { color: inherit; text-decoration: underline; }

.subscribe-band { background: var(--blue); color: #fff; border-radius: 20px; padding: 36px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.subscribe-band h2, .subscribe-band p { color: #fff; }
.subscribe-band .wix-photo { box-shadow: none; }
@media (max-width: 760px) { .subscribe-band { grid-template-columns: 1fr; padding: 26px; } }
.social-icons { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.social-icons a { display: inline-flex; color: var(--blue); }
.social-icons img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #fff; padding: 3px; }
.social-icons .social-ico { width: 30px; height: 30px; border-radius: 7px; background: #fff; padding: 4px; box-sizing: border-box; }
.stars-rating { display: inline-flex; gap: 1px; color: #f5a623; vertical-align: middle; line-height: 0; }
.stars-rating svg { width: 22px; height: 22px; }
.quote-mark { width: 38px; height: auto; opacity: .55; margin-bottom: 6px; color: var(--blue); }
.partner-logo { height: 54px; width: auto; object-fit: contain; }

/* ---- Keep Cancer Away mega-menu -----------------------------------------
   28 cancers will not fit a single vertical list, so the dropdown becomes a
   multi-column panel grouped by body system. Visitors know a body part, not an
   oncology term, so the group headings do the navigating. */
.nav-links .submenu--mega {
  display: none; grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 4px 22px; padding: 20px 24px; min-width: 720px;
  left: 50%; transform: translateX(-50%);
}
.nav-links li.has-sub:hover > .submenu--mega,
.nav-links li.has-sub:focus-within > .submenu--mega { display: grid; }
.submenu__group { display: flex; flex-direction: column; break-inside: avoid; margin-bottom: 10px; }
.submenu__head {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--orange-text); margin: 6px 0 5px; white-space: nowrap;
}
.submenu--mega a {
  display: block; padding: 4px 0; font-size: .86rem; color: var(--ink, #222);
  text-decoration: none; white-space: nowrap; border-radius: 5px;
}
.submenu--mega a:hover, .submenu--mega a:focus {
  color: var(--blue); text-decoration: underline; text-underline-offset: 2px;
}
.submenu__group--all { border-top: 1px solid rgba(36,48,144,.12); padding-top: 8px; grid-column: 1 / -1;
  flex-direction: row; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1100px) { .nav-links .submenu--mega { grid-template-columns: repeat(3, minmax(140px,1fr)); min-width: 560px; } }
@media (max-width: 900px) {
  .nav-links .submenu--mega { position: static; transform: none; display: grid;
    grid-template-columns: 1fr 1fr; min-width: 0; padding: 10px 12px; box-shadow: none; }
  .submenu__group--all { flex-direction: column; gap: 2px; }
}

/* ---- headline benefits: icon chips in the hero + a full-width band ------- */
.benefit-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.benefit-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue); border: 1px solid rgba(36,48,144,.16);
  border-radius: 999px; padding: 9px 16px 9px 12px;
  font-weight: 700; font-size: .93rem; letter-spacing: -.01em;
  box-shadow: 0 2px 10px rgba(36,48,144,.08);
}
.benefit-chips__ico { display: inline-block; width: 19px; height: 19px; color: var(--orange); flex: 0 0 19px; }

.benefit-band { background: var(--bg-alt, #F7F5F0); padding: 46px 0; border-top: 1px solid rgba(36,48,144,.08); border-bottom: 1px solid rgba(36,48,144,.08); }
.benefit-band__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.benefit-band__grid li { text-align: center; }
.benefit-band__ico {
  display: inline-grid; place-items: center; width: 64px; height: 64px; padding: 16px;
  border-radius: 50%; background: #fff; color: var(--orange);
  box-shadow: 0 6px 18px rgba(36,48,144,.10); margin-bottom: 14px;
}
.benefit-band__grid h3 { margin: 0 0 6px; font-size: 1.16rem; color: var(--blue); }
.benefit-band__grid p { margin: 0; font-size: .92rem; line-height: 1.5; color: #4a4a55; }
@media (max-width: 900px) { .benefit-band__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 520px) { .benefit-band__grid { grid-template-columns: 1fr; } }
/* homepage hero with live background photo + readable brand scrim */
.hero.hero--photo {
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.45) 60%, rgba(255,255,255,.12) 82%, rgba(255,255,255,0) 100%),
    var(--hero-bg) 62% center/cover no-repeat,
    linear-gradient(180deg, #fff, var(--bg-alt));
}
/* Hero card placement (owner note, 2026-08-24: "move the box right so the image
   is more centered or slightly right of center").
   Two dials, both here:
     1. justify-self:end + a narrower max-width pushes the card to the right
        edge of .wrap instead of letting it stretch across its whole column;
     2. the photo focal point moves from `center` to 62%, which slides the
        subject right of centre so it is not sitting behind the card.
   Adjust the 62% and the 400px together -- they trade against each other. */
.hero.hero--photo .hero-grid { grid-template-columns: 1.28fr .72fr; }
.hero.hero--photo .hero-card { justify-self: end; width: 100%; max-width: 400px; }
.hero.hero--photo .hero-card { backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.65); }
@media (max-width: 900px) {
  .hero.hero--photo {
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 100%),
      var(--hero-bg) center/cover no-repeat,
      linear-gradient(180deg, #fff, var(--bg-alt));
  }
}

/* dropdown nav */
/* keep the bar uncrowded: tighter spacing + labels never wrap to a 2nd line */
.site-header .nav-links { gap: 15px; }
.site-header .nav-links > li > a { white-space: nowrap; font-size: .87rem; }
.site-header .nav-cta { gap: 9px; }
.site-header .nav-cta .btn { padding: 9px 16px; font-size: .87rem; white-space: nowrap; }
.nav-links .has-sub { position: relative; }
.nav-links .caret { font-size: .7em; margin-left: 4px; opacity: .7; }
.nav-links .submenu {
  position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 8px; margin: 0; list-style: none; display: none; z-index: 200;
}
.nav-links .submenu li { margin: 0; }
.nav-links .submenu a { display: block; padding: 8px 12px; border-radius: 6px; font-size: .92rem; color: var(--body); }
.nav-links .submenu a:hover { background: var(--blue-light); color: var(--blue); text-decoration: none; }
.nav-links .has-sub:hover .submenu { display: block; }
.nav-links a.active { color: var(--blue); }

/* hero bullets */
.hero-bullets { list-style: none; padding: 0; margin: 8px 0 18px; }
.hero-bullets li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--body); }
.hero-bullets li::before { content: "\2600"; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }
.hero-card a { color: var(--blue); }

/* service lists */
.svc-list { margin: 10px 0 0; padding-left: 0; list-style: none; }
.svc-list li { position: relative; padding: 7px 0 7px 26px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.svc-list li:last-child { border-bottom: 0; }
.svc-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* Quiet Radiance page hero banner (full-width, title baked into the art) */
/* Page banner: a slim masthead band, NOT a hero. At 1500/620 it ate ~500px of
   the first screen on desktop and pushed the actual content below the fold --
   the banner should orient the reader, then get out of the way. */
/* Page banner: a slim masthead band, NOT a hero. The max-height that used to sit
   here reshaped the box (a 2000px-wide viewport made it 9:1) while object-fit:cover
   still cropped to fill -- which sliced the wordmark clean through. The box now
   matches the artwork's own ratio exactly, so nothing is ever cropped.

   1600x152 since iter 92 (owner: "smaller and shorter ... less pixelated and
   less dominant"). It MUST stay in step with W/H in scripts/generate_kca_banners.py,
   which both banner generators import -- that is the single source of truth.

   Before iter 92 this box was 1600/240 while 257 of the 300 banners were drawn
   at 1500x620. object-fit:cover was silently cropping those to 37% of their own
   height, off-centre: the "pixelated"/"doesn't fit" complaint. Both generators
   now render this exact band, so cover has nothing left to crop. If a future
   banner is authored at some other size, fix the ART, not this ratio.

   THE MOBILE OVERRIDE IS A CROP. Giving the box a taller ratio than the art
   makes `cover` discard a slice off the RIGHT (object-position is left center).
   At the old 1600/250 that slice was 33% of the width -- which took the logo
   watermark with it on every phone and narrow window, reported 2026-08-25.
   1600/190 costs 20%, and the mark now centres at 70% (LOGO_CX), so it stays on
   screen. Raise this number and you start cutting the mark off again. */
.page-banner { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 152;
  object-fit: cover; object-position: left center; border-radius: var(--radius); }
@media (max-width: 780px) {
  .page-banner { aspect-ratio: 1600 / 190; }
}

/* On the dark navy/indigo banner themes a multiplied blue mark disappears, so
   there the watermark lightens instead. */
@media (max-width: 780px) {
}
.article-hero--under-banner { padding-top: 22px; padding-bottom: 20px; }

/* CureRays Institute secondary nav atop "Treat Me (Conditions)" category pages */
.institute-subnav { border-top: 1px solid var(--blue-light);
  border-bottom: 1px solid var(--blue-light); background: var(--bg-alt); }
.institute-subnav .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px;
  justify-content: center; padding: 12px 20px; }
.institute-subnav a { color: var(--navy); font-weight: 600; font-size: .96rem;
  text-decoration: none; letter-spacing: .01em; padding: 4px 2px;
  border-bottom: 2px solid transparent; }
.institute-subnav a:hover, .institute-subnav a:focus {
  color: var(--blue); border-bottom-color: var(--blue); }

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

/* circular headshot/avatar at the top of a card (e.g. Team providers) */
.card-avatar { display: block; width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; object-position: center top; margin: 0 0 14px;
  border: 3px solid var(--blue-light); box-shadow: 0 2px 10px rgba(36,48,144,.12); }
/* Photo-led cards (Clinical Outcomes treatment imagery): full-bleed 16:10
   thumbnail instead of the circular provider avatar. */
.cards--photo .card-avatar { width: 100%; height: 170px; border-radius: 12px;
  object-fit: cover; margin: 0 0 12px; }


/* card subtitle + subtype list (e.g. directory-style Conditions, Team) */
.card-sub { margin: 2px 0 10px; font-size: .9rem; font-weight: 600; color: var(--orange-text); }
.card-list { margin: 10px 0 0; padding-left: 0; list-style: none;
  columns: 2; column-gap: 18px; }
.card-list li { position: relative; padding: 4px 0 4px 16px; font-size: .9rem;
  color: var(--muted); break-inside: avoid; }
.card-list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--orange); }
.card-list li a { color: var(--blue); font-weight: 600; text-decoration: none; }
.card-list li a:hover { text-decoration: underline; }
/* Call-to-action text inside a card that is itself a link. Rendered as a span,
   never a nested anchor (invalid HTML + duplicate-link a11y failure); the
   parent .card--link anchor owns the navigation and the focus ring. */
.card-cta { color: var(--blue); font-weight: 600; white-space: nowrap; }
.card--link:hover .card-cta, .card--link:focus .card-cta { text-decoration: underline; }
.card--wide-list .card-list { columns: 1; }

/* conditions chips */
.cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cond-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); text-align: center; }

/* testimonials */
.quote { margin: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.quote p { font-style: italic; color: var(--body); }
.quote figcaption { font-weight: 700; color: var(--blue); margin-top: 10px; }

/* Q&A blocks on content pages */
.qa { border-bottom: 1px solid var(--line); padding: 14px 0; }
.qa .q { font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.qa .a { margin: 0; color: var(--body); }

/* faqs */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-row { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 10px; color: var(--ink); font-weight: 600; }
.faq-row:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.faq-row span { color: var(--orange); }

/* Award card titles are h3 (they sit under the "Awards & honors" h2) but keep the
   visual weight of the h4 they replaced, so the heading fix is invisible. */
.award-title { color: var(--blue); margin-bottom: 6px; font-size: 1.02rem; line-height: 1.35; }
/* The hero card's "How can we help you?" is an h2 (it follows the page h1) but is
   sized like the h3 it replaced. */
.hero-card__h { font-size: 1.15rem; line-height: 1.3; }

/* --- accessible form messaging (WCAG 3.3.1 / 3.3.3 / 4.1.3) --- */
.form-req-note { font-size: .82rem; color: var(--muted); margin: 0 0 12px; }
.req { color: #b3261e; font-weight: 700; }
.field-err, .form-errsum { font-size: .82rem; font-weight: 600; color: #b3261e; margin: 6px 0 14px; }
.form-errsum { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: #fdecea; border: 1px solid #f3c1bc; }
.field-err[hidden], .form-errsum[hidden] { display: none; }
[aria-invalid="true"] { border-color: #b3261e !important; }
[aria-invalid="true"]:focus { outline: 2px solid #b3261e !important; }
.form-thanks:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* appointment form */
.appt-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.appt-form input, .appt-form select, .appt-form textarea {
  display: block; width: 100%; margin: 0 0 14px; padding: 10px 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--body); }
.appt-form .field-err { margin-top: -10px; }
.appt-form input:focus, .appt-form select:focus, .appt-form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.contact-form { max-width: 560px; margin: 8px 0 0; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .form-row { grid-template-columns: 1fr; } }
.contact-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #cdd3e6; border-radius: 10px; font: inherit; box-sizing: border-box; }
.contact-form .field-err { margin-top: -10px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.form-thanks { margin: 8px 0 0; padding: 14px 18px; border-radius: 10px; background: #e9f7ee; border: 1px solid #b6e2c6; color: #1d7a3e; font-weight: 600; }
/* --- CureRays.org Institute / CRMSSS journal --- */
.org-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--blue); background: rgba(36,48,144,.07); border: 1px solid rgba(36,48,144,.16); padding: 5px 12px; border-radius: 999px; margin: 0 0 12px; }
.org-badge .org-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange,#F05424); }
.org-badge a { color: var(--blue); font-weight: 700; }
.pipeline { display: grid; gap: 18px; margin-top: 8px; }
.stage { border: 1px solid #e2e6f2; border-left: 4px solid #c7cee6; border-radius: 12px; padding: 18px 20px; background: #fafbff; }
.stage--submitted { border-left-color: #8a93b8; }
.stage--review { border-left-color: #f0a02a; }
.stage--reviews { border-left-color: #3a7bd5; }
.stage--published { border-left-color: #1d9a54; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage-head h3 { margin: 0; font-size: 1.1rem; }
.stage-count { font-size: .8rem; font-weight: 700; color: var(--muted); background: #eef1fa; border-radius: 999px; padding: 2px 10px; }
.stage-note { margin: 6px 0 10px; color: var(--muted); font-size: .9rem; }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stage-list li { padding: 10px 12px; background: #fff; border: 1px solid #e6e9f4; border-radius: 9px; }
.stage-list li a { display: block; color: inherit; text-decoration: none; }
.stage-list li a:hover .ms-title { color: var(--blue); text-decoration: underline; }
.ms-title { font-weight: 600; display: block; }
.ms-meta { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.ms-price { display: inline-block; font-size: .8rem; font-weight: 700; color: #1d9a54; margin-top: 4px; }
.ms-status { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; margin: 0 0 10px; }
.ms-status--published { background: #e9f7ee; color: #1d7a3e; }
.ms-status--review { background: #fff3e0; color: #b5670a; }
.ms-status--draft { background: #eef1fa; color: #47507e; }
.ms-preview { margin: 6px 0 0; }
.ms-preview-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.paywall { margin: 22px 0 0; padding: 26px; border: 1px solid #dfe3f1; border-radius: 16px; background: linear-gradient(180deg,#fff, #f4f6fd); text-align: center; }
.paywall-lock { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(36,48,144,.09); color: var(--blue); margin-bottom: 10px; }
.paywall-title { margin: 0 0 6px; font-size: 1.28rem; line-height: 1.3; }
.paywall-copy { margin: 0; color: var(--muted); }
.paywall-price { display: inline-block; font-weight: 800; color: var(--blue); }
.paywall-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.appt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 900px) { .cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .cond-grid { grid-template-columns: 1fr; }
  .appt-row { grid-template-columns: 1fr; }
}
/* Collapse the full horizontal menu to a hamburger BELOW 1080px so the desktop
   bar only renders where all 6 menus + 2 buttons comfortably fit on one line.
   Overrides the base 900px/72px rule and fixes the panel offset for the 84px header. */
@media (max-width: 1080px) {
  .site-header .nav-toggle { display: block; }
  .site-header .nav-links {
    display: none; position: absolute; top: 84px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 24px 18px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); z-index: 300;
  }
  .site-header .nav-links.open { display: flex; }
  .site-header .nav-links > li > a { white-space: normal; font-size: .98rem; padding: 6px 0; }
  .site-header .nav-links .submenu {
    position: static; display: block; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0;
  }
  .site-header .nav-links .caret { display: none; }
}
@media (max-width: 560px) {
  .site-header .nav-links { top: 74px; }
}
/* ---- educational video embeds ---- */
.video-embed { margin: 0 0 22px; }
.video-embed .video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: 0 6px 22px rgba(36,48,144,.18); }
.video-embed .video-frame iframe, .video-embed .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--navy); }
.video-embed figcaption { margin-top: 8px; font-weight: 600; color: var(--blue); }
.video-embed figcaption .vid-src { margin: 2px 0 0; font-weight: 400; font-size: .85rem; color: var(--ink-soft, #555); }
.video-cta { box-shadow: 0 6px 22px rgba(36,48,144,.18); transition: transform .18s ease, box-shadow .18s ease; }
.video-cta:hover, .video-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(36,48,144,.28); }
.video-cta:hover span > span:first-child { background: var(--orange, #F05424) !important; }

/* ==========================================================================
   MOBILE LAYER  (iter 93)
   ==========================================================================
   Everything below exists because scripts/check_mobile.py measured it, not
   because a checklist asked for it. Keep that script green.

   Breakpoint system -- use ONLY these three. The stylesheet above still holds
   some legacy 520/560/640/760/780/900/1080/1100 queries; migrate them here as
   they are touched rather than in one risky sweep.
     560px  phone
     780px  tablet / nav collapse
     1100px desktop shelf
   -------------------------------------------------------------------------- */

/* M5 -- WORD WRAP. There was not one overflow-wrap, word-break or hyphens
   declaration in 47 KB of CSS. This is a cancer-education site: the prose is
   full of tokens no browser can break on its own -- "cholangiocarcinoma",
   "NCT04889066", bare trial URLs. One of them in a narrow column widens the
   whole document and the reader gets horizontal scroll on every page. */
body, p, li, td, th, dd, dt, blockquote, figcaption,
h1, h2, h3, h4, h5, h6, .lead, .card, .prose {
  overflow-wrap: anywhere;
  word-break: break-word;      /* older WebKit */
}
/* ...but never break a phone number, a dose or a date the reader must read as
   one unit. */
.tel, .nowrap, time, .dose { overflow-wrap: normal; word-break: normal; }

/* M1 -- TABLES. 446 <table> across 224 pages, several 3-5 columns wide, with
   `white-space: nowrap` on the stage cell and no escape hatch. On a 360px
   screen that is a horizontally-scrolling document, not a scrolling table.
   Confine the scroll to the table itself. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 18px 0;
  /* a fade on the right edge is the only affordance that the content
     continues -- iOS paints no persistent scrollbar */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%;
  background-attachment: local, local;
}
.table-scroll .stage-table { margin: 0; min-width: 34rem; }
@media (max-width: 560px) {
  /* nowrap on the stage cell is right on a desktop column and wrong here */
  .stage-table .stage { white-space: normal; }
  .stage-table th, .stage-table td { padding: 10px 12px; }
}

@media (max-width: 780px) {
  /* M2 -- iOS ZOOM. Safari zooms the page when a control under 16px takes
     focus, and it does not zoom back; the reader is left at 1.3x with the
     layout off-screen and no obvious way out. 16px is the threshold, so this
     is a hard floor, not a design preference. Applies to the appointment
     form, the footer subscribe field and anything added later. */
  input, select, textarea,
  .footer-sub-form input,
  .appt-form input, .appt-form select, .appt-form textarea {
    font-size: 16px;
  }

  /* M3 -- TAP TARGETS. WCAG 2.5.5 asks for 44x44 CSS px. These six were
     between 22 and 35px. Grow the hit area without changing the type size, so
     nothing about the visual design shifts. */
  .pill, .tag {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
  .toc a, .institute-subnav a {
    min-height: 44px; display: flex; align-items: center;
  }
  .site-header .nav-cta .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  sup.fn-ref a {
    display: inline-block; min-width: 44px; min-height: 44px;
    /* the footnote marker must stay visually tiny and inline, so the hit area
       is grown with a negative margin instead of real box size */
    margin: -20px -18px; padding: 20px 18px; position: relative;
  }
  .footer-links a, .nav-links a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 560px) {
  /* M4 -- TYPE FLOOR. Eight declarations landed between 11.5 and 12.8px. That
     is readable on a 27" monitor at arm's length and not on a phone. Desktop
     sizes are untouched; this only raises the floor where it matters. */
  .eyebrow, .tag, .toc h2, .navigator__note,
  .stage-count, .ms-price, .ms-status, .ms-preview-label,
  .submenu__head { font-size: 13px; }

  /* M6 -- NAVIGATOR. A 324px-wide card fixed to the bottom-right of a 360px
     screen covers the content and, worse, sits on top of whatever call to
     action is at the foot of the page. Dock it as a slim full-width bar. */
  .navigator {
    right: 8px; left: 8px; bottom: 8px;
    width: auto; padding: 10px 44px 10px 10px; gap: 10px; border-radius: 12px;
  }
  .navigator__face { width: 40px; height: 40px; }
  .navigator__close { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   PHONE LAYER  (iter 94) -- composition, not hygiene
   ==========================================================================
   The previous pass made the site mechanically correct on a phone: nothing
   overflows, nothing zooms, everything is tappable. It did not make the HOME
   PAGE good on a phone, which is a different problem. Home carries 8,473
   characters across 15 sections; at 390px that is ~11 screenfuls, and the
   thing a patient actually came for -- how do I get seen -- was at the bottom
   of all of it. Everything below either shortens the page or shortens the
   path to contact.
   -------------------------------------------------------------------------- */

/* The bar itself is hidden by default so it can never appear on a desktop. */
.callbar { display: none; }

@media (max-width: 560px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(27,31,51,.10);
  }
  .callbar__btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 999px;
    font-weight: 700; font-size: 15px; text-align: center;
    padding: 0 10px;
  }
  .callbar__btn--call  { background: var(--orange); color: #fff; }
  .callbar__btn--book  { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
  .callbar__btn:hover, .callbar__btn:focus-visible { text-decoration: none; }

  /* Do not let the fixed bar bury the end of the document. */
  body { padding-bottom: 76px; }
  /* ...and lift the navigator above the bar instead of on top of it. */
  .navigator { bottom: calc(76px + 8px); }

  /* ---- vertical rhythm -------------------------------------------------
     .section was 72px top+bottom, already relaxed to 52px at this width.
     Across 15 sections that is still 1,560px of pure padding -- nearly two
     screenfuls of nothing. 34px keeps the sections visually separate (the
     alternating --bg-alt band does most of that work anyway) and gives back
     roughly a screen and a half. */
  .section { padding: 34px 0; }
  .hero { padding: 28px 0 24px; }
  .benefit-band { padding: 26px 0; }
  .grid { gap: 16px; }
  .section-head { margin-bottom: 18px; }
  h2 { margin-bottom: .4em; }

  /* ---- portrait is ONE column (owner directive, 2026-08-25) --------------
     This block used to read "density over stacking" and deliberately put
     .stats, .benefit-band__grid and .cond-grid back to two columns at 560px
     to halve the scroll. The owner overruled it on a real device: content
     must not divide a narrow portrait screen into two narrower subdivisions.
     Splitting a 360-390px viewport in two leaves ~160px of usable width per
     cell -- once card padding is taken out, headings wrap mid-word and the
     text column falls under a comfortable measure. Scroll length is the
     cheaper cost. Do NOT reintroduce a 2-up grid here; check_mobile.py M7
     now fails the build if any content grid survives at portrait width. */
  .stats { grid-template-columns: 1fr; gap: 14px; }
  .benefit-band__grid { grid-template-columns: 1fr; gap: 16px; }
  .cond-grid { grid-template-columns: 1fr; gap: 10px; }
  /* .card-list is CSS multi-column, not grid, so the grid collapses above
     never touched it -- it was rendering as two newspaper columns on every
     phone, which is the most visible instance of the same defect. */
  .card-list { columns: 1; }

  /* ---- hero fold discipline --------------------------------------------
     The first screen has to carry the headline, the promise and a way to act.
     The decorative card image is pushed below the CTA so it cannot displace
     them above the fold. */
  .hero-card { order: 3; margin-top: 18px; }
  .hero .btn-row, .hero-actions { order: 2; }
  .hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .hero .lead { font-size: 1rem; }

  /* ---- chrome tax ------------------------------------------------------
     26px of card padding is right on a 1140px shelf and expensive on a 354px
     column: 12 cards on the home page alone, each spending 52px of vertical
     space on whitespace it does not need at this width. The card still reads
     as a card at 18px -- the border, radius and shadow do that work. */
  .card { padding: 18px; }
  .section-head { max-width: none; margin-bottom: 18px; }
  .lead { font-size: 1.05rem; }
  .svc-list li { padding: 6px 0 6px 22px; }
  .stat .num { font-size: 1.9rem; }

  /* The hero card's decorative photo is the single tallest non-essential
     element above the fold; cap it so it cannot own the first screen. */
  .hero-card .wix-photo, .hero-card img { max-height: 190px; object-fit: cover; }

  /* ---- table of contents ------------------------------------------------
     .article-layout is a 240px sidebar + article on desktop and collapses to
     one column at 900px, which puts the ENTIRE contents list above the
     article. With 44px tap targets that is ~400px -- half a phone screen of
     links before the first word -- on ~224 guide pages, which are the most
     read pages on the site. Collapsed here to a single 44px row the reader
     can open. */
  details.toc { border: 1px solid var(--line); border-radius: var(--radius-sm);
                background: var(--bg-alt); padding: 0 12px; margin-bottom: 18px; }
  details.toc > summary { min-height: 44px; display: flex; align-items: center;
                          cursor: pointer; list-style: revert; }
  details.toc > summary h2 { margin: 0; }
  details.toc[open] > .toc__body { padding-bottom: 8px; }
}

/* The disclosure exists only for phones. Everywhere else it must look and
   behave exactly like the sidebar it replaced -- no marker, no box, no extra
   affordance -- so the desktop page is byte-for-byte the experience it was. */
@media (min-width: 561px) {
  details.toc > summary { display: block; list-style: none; }
  details.toc > summary::-webkit-details-marker,
  details.toc > summary::marker { display: none; content: ""; }
  details.toc > summary { cursor: default; }
}

/* ==========================================================================
   THE HERO NEVER COLLAPSED  (iter 96) -- root cause of the phone screenshot
   ==========================================================================
   Reported 2026-08-25 with a photo of curerays.com on an iPhone: the headline
   breaking to two and three words a line, body copy in a ragged ribbon, and
   the "How can we help you?" card crushed into a side gutter.

   It is not a layout-design problem. It is a CSS SPECIFICITY BUG, and it has
   been shipping the whole time:

     line 301, inside @media (max-width: 900px):
       .hero-grid, .article-layout { grid-template-columns: 1fr; }   (0,1,0)
     line 557, NO media query at all:
       .hero.hero--photo .hero-grid { grid-template-columns: 1.28fr .72fr; }
                                                                     (0,3,0)

   A media query adds NOTHING to specificity -- it only gates whether the rule
   applies. So the unconditional two-column rule outranks the mobile
   single-column rule at every width, and also happens to come later in source
   order, so it wins twice over. The home page hero has been two columns on
   every phone since the photo hero was introduced.

   Worth naming plainly: my earlier "hero fold discipline" pass set `order` on
   .hero-card to push it below the CTA. In a grid that never collapsed, that
   reordering did nothing. I reported an improvement that could not have
   happened. check_mobile.py now has an M6 check for exactly this class of bug
   so a mobile override losing to a base rule is caught, not eyeballed.

   The overrides below deliberately RESTATE the full-specificity selector so
   they match (0,3,0) and, sitting at the end of the stylesheet, win on order.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero.hero--photo .hero-grid,
  .hero .hero-grid,
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero.hero--photo .hero-card,
  .hero-card { justify-self: stretch; width: 100%; max-width: none; }
}

/* ==========================================================================
   MOBILE NAVIGATION  (iter 95)
   ==========================================================================
   The menu was the worst thing on the site on a phone and nothing measured it.

   The panel renders EVERY link at once: 6 top-level items and 59 nested ones,
   65 in total. Once the previous pass gave each of them a 44px tap target that
   is a ~2,900px panel -- three and a half screens -- hanging off an
   absolutely-positioned box with no max-height and no scroll container of its
   own. Opening the menu on a phone effectively replaced the site with a wall
   of links you could not reliably reach the bottom of.

   Three things fix it: give the panel its own scroll, collapse the six groups
   so the reader sees six choices instead of sixty-five, and make the button
   that opens it big enough to hit.
   -------------------------------------------------------------------------- */

/* Header height in ONE place. Two different mobile-nav blocks (900px and
   1080px) each hard-coded their own `top` for the dropdown -- 72px and 84px --
   while the header is actually 84px, and a third rule patched it to 74px at
   560px. Any of those drifting leaves a gap or an overlap between the header
   and the panel hanging under it. */
:root { --header-h: 84px; }
@media (max-width: 560px) { :root { --header-h: 74px; } }

@media (max-width: 1080px) {
  .site-header .nav-links {
    top: var(--header-h);
    /* The panel scrolls, not the document behind it. dvh (not vh) so the iOS
       address bar collapsing does not leave the last item unreachable. */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }
  /* A 44px target that opens the whole site's navigation should not be a 26px
     glyph. It had no padding at all, which is also why check_mobile's tap
     heuristic could not see it -- that gap is closed below. */
  .site-header .nav-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Collapsed by default; NAVIGATOR_JS opens one group at a time. Without JS
     every group stays open, which is exactly today's behaviour -- degraded,
     not broken. */
  /* Visibility is driven by the CLASS, never by :hover.
     `.nav-links li.has-sub:hover > .submenu--mega { display: grid }` is
     unconditional and specificity (0,3,1), so it outranked the phone rule that
     was meant to tame it -- and on iOS a tap leaves :hover latched on the
     element, so the mega menu would spring open and stay open, fighting the
     accordion. Neutralise both pseudo-classes at panel widths and let
     .is-collapsed be the single source of truth. */
  .site-header .nav-links li.has-sub > .submenu,
  .site-header .nav-links li.has-sub:hover > .submenu--mega,
  .site-header .nav-links li.has-sub:focus-within > .submenu--mega { display: none; }
  .site-header .nav-links li.has-sub:not(.is-collapsed) > .submenu { display: grid; }
  .site-header .nav-links li.has-sub > a { justify-content: space-between; }

  /* The navigation's own links were the last sub-44px targets on the site:
     the six group headings painted ~31px and the 59 destination links ~34px.
     They are the most-tapped controls on a phone and were the smallest. */
  .site-header .nav-links > li > a {
    min-height: 44px; display: flex; align-items: center;
  }
  .site-header .nav-links .submenu a,
  .nav-links .submenu a {
    min-height: 44px; display: flex; align-items: center;
  }
}

@media (max-width: 560px) {
  /* `white-space: nowrap` is right for a desktop mega-menu column and wrong in
     a ~170px phone column: "Lymphomas, myeloma & other blood cancer" simply
     runs off the side. */
  .submenu--mega a, .site-header .nav-links a { white-space: normal; }
  .nav-links .submenu--mega { grid-template-columns: 1fr; }
  .site-header .nav-links { gap: 0; }

  /* ---- header: one action, not three ------------------------------------
     The bar was carrying the logo, the wordmark, the hamburger, and THREE
     buttons -- Sign Up, Donate, Schedule. Six controls on a 390px row, so the
     orange Schedule button was clipped off the right edge in the reported
     screenshot: the site's single most important action, half visible.

     Owner's instruction was to move the right-hand cluster out of the way.
     Sign Up and Donate come off the bar; neither is lost -- Donate is a button
     in the footer, Sign Up is the footer subscribe field and the #signup
     section, and the bottom bar already carries Call and Request a visit.
     Schedule stays as the one thing a patient might need from the header.
     Result: logo, menu, one action. */
  .site-header .nav-cta .btn--outline { display: none; }
  .site-header .nav-cta .btn--primary { display: inline-flex; }
  .site-header .nav-cta { gap: 0; flex: 0 0 auto; }
  .site-header .nav { gap: 10px; }
  .brand { min-width: 0; overflow: hidden; }

  /* The header already says CureRays. The lockup graphic immediately under it
     said it again at 340px wide, so the first ~500px of the page was the brand
     twice over and the actual headline started below the fold. Kept -- it
     carries the "Radiation Medicine / Cancer Screening & Survivorship" line,
     which is information, not decoration -- but sized so it introduces the
     page instead of owning it. */
  .lockup { max-width: 250px; margin-bottom: 12px; }

  /* Emoji-led bullets ride high against the text baseline in a narrow column;
     give them room to sit level and stop the lines colliding. */
  .hero-bullets li { line-height: 1.5; margin-bottom: 10px; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .benefit-chips { gap: 8px; }
}