/* components.css - the page components that every page already agrees on.
 *
 * Generated by lib/extract/make_components_css.py.
 *
 * MEMBERSHIP: a rule is here only when at least 10 pages carry it AND
 * every one of them declares it IDENTICALLY. Nothing contested is here.
 * A key with two bodies is a decision, not a component, and it stays out
 * until it is ruled - 33 such keys are held back on that basis.
 *
 * 272 rules across 111 families. Chrome is NOT here; it lives in
 * source/chrome/chrome.css.
 *
 * This is a DEFINITION, not a loaded stylesheet - no page links it yet.
 */

/* affil-divider - 94 pages */
.affil-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
/* affil-logo - 94 pages */
.affil-logo-link {
  opacity: .75;
  transition: opacity .2s;
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.affil-logo-link:hover {
  opacity: 1;
}
/* affil-strip - promoted from 22 page <style> blocks, 22/22 byte-identical */
.affil-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.affil-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.affil-label {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}
.affil-logos {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: nowrap;
}
.affil-logo-img {
  height: 30px;
  width: auto;
  max-width: 130px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
/* anatomy-callout - 94 pages */
.anatomy-callout {
  background: var(--blue-tint);
  border: 1px solid rgba(18,91,154,.15);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.anatomy-callout-title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--charcoal);
  margin-bottom: 16px;
}
/* anatomy-diagram - 94 pages */
.anatomy-diagram {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}
/* anatomy-panel - 94 pages */
.anatomy-panel {
  background: var(--blue-tint);
  border: 1px solid rgba(18,91,154,.15);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.anatomy-panel-sub {
  font-size: 0.875rem;
  color: var(--slate);
  margin-bottom: 18px;
}
.anatomy-panel-title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--charcoal);
  margin-bottom: 6px;
}
/* badge-mild - 94 pages */
.badge-mild {
  background: #dcfce7;
  color: #15803d;
}
/* badge-moderate - 94 pages */
.badge-moderate {
  background: #fef3c7;
  color: #92400e;
}
/* badge-severe - 94 pages */
.badge-severe {
  background: #fee2e2;
  color: #b91c1c;
}
/* btn-outline - 94 pages */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1.5px solid var(--blue);
  transition: background .2s;
}
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.3);
  transition: background .2s, color .2s;
}
.btn-outline:hover {
  background: var(--blue-tint);
}
/* btn-primary - 94 pages */
.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
}
/* callout-box - 94 pages */
/* color: inherit, NOT var(--blue-deep). MEASURED 24 Aug 2026.
   .callout-box has two live treatments and this rule only worked for one:
     14 light instances  box sets color:#0d3f6e on white     strong 10.75:1
      7 dark  instances  box sets color:rgba(255,255,255,.78)
                         over rgb(29,78,124)  ->  strong was #0d3f6e at 1.24:1
   The bold lead-in was invisible while the prose one line below it measured
   5.99:1 -- a 4.8x gap inside one component, on 7 pages, 11 lead-ins.
   inherit fixes the dark instances (1.24 -> 5.99) and leaves the light ones
   BYTE-IDENTICAL, because the box already declares the same #0d3f6e this
   rule was setting. A global colour cannot work here: white would measure
   1.00:1 on the 14 light instances. */
.callout-box strong {
  color: inherit;
}
/* card-panel - 94 pages */
.card-panel {
  background: var(--blue-tint);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.card-panel p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.65;
  margin-bottom: 10px;
}
.card-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.card-panel ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: #3a3a3a;
  line-height: 1.5;
}
.card-panel-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--blue-deep);
  margin-bottom: 12px;
}
/* check - 94 pages */
.check {
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
}
/* condition-intro - 94 pages */
.condition-intro {
  background: var(--white);
  padding: 84px 0;
}
.condition-intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 20px;
}
.condition-intro h2 em {
  color: var(--blue);
}
/* contact-card - 94 pages */
.contact-card {
  background: var(--blue-tint);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}
.contact-card-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--blue-deep);
  margin-bottom: 14px;
}
/* contact-line - 94 pages */
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: #3a3a3a;
  margin-bottom: 11px;
}
.contact-line a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.contact-line svg {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 2px;
}
/* contact-note - 94 pages */
.contact-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.6;
  font-style: italic;
}
/* content-inner - 94 pages */
.content-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* content-section - 94 pages */
.content-section {
  padding: 72px 0;
}
.content-section.alt {
  background: var(--off-white);
}
.content-section.blue-tint {
  background: var(--blue-tint);
}
/* cta-banner - 94 pages */
.cta-banner {
  background: var(--white);
  padding: 72px 0;
}
.cta-banner-inner h2 em {
  color: var(--blue);
  font-style: italic;
}
/* cta-contact - 94 pages */
.cta-contact-card {
  background: var(--blue-tint);
  border: 1px solid rgba(18,91,154,.15);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.cta-contact-card-title {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 18px;
}
.cta-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  color: #3a3a3a;
  line-height: 1.5;
}
.cta-contact-line a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.cta-contact-line a:hover {
  text-decoration: underline;
}
.cta-contact-line svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--blue);
}
.cta-contact-note {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.6;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(18,91,154,.12);
}
/* cta-inner - 94 pages */
.cta-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2.375rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.15;
  margin-bottom: 14px;
}
.cta-inner h2 em {
  color: var(--blue);
  font-style: italic;
}
.cta-inner p {
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.75;
  margin-bottom: 24px;
}
/* cta-section - 94 pages */
.cta-section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}
/* dark-panel - 94 pages */
.dark-panel {
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  margin-top: 36px;
}
.dark-panel em {
  color: rgba(255,255,255,.9);
  font-style: italic;
}
.dark-panel h3 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
}
.dark-panel p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  margin-bottom: 12px;
}
.dark-panel p:last-child {
  margin-bottom: 0;
}
/* CONTRAST - a link inside a dark panel had NO rule, so it fell through to
   the browser default: #0000EE on --blue-deep is 1.14:1, and once VISITED
   #551A8B is 1.02:1 -- indistinguishable from the background. The site's own
   --blue would not help either, at 1.53:1. Found on wrist-sprain, where three
   links routing a patient to the right ligament page were invisible.

   Only distal-humerus-fracture looked right, because someone had patched it
   with an inline color. That inline fix is exactly why the missing rule went
   unnoticed for so long, and it is removed in favour of this.

   #b6dbf7 = 7.41:1 here. It is the value already ruled for light-on-blue in the
   review band, chosen there over #a8d4f5 which measured 4.48:1 on the lighter
   gradient end. #a8d4f5 would pass on THIS ground (6.86:1), but reusing a value
   the project has retired once invites re-litigating it.

   :visited is set explicitly. The default visited colour is the WORST case and
   testing an unvisited link never reveals it.

   The underline stays: colour must not be the only cue (WCAG 1.4.1). */
.dark-panel a,
.dark-panel a:visited {
  color: #b6dbf7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dark-panel a:hover,
.dark-panel a:focus-visible {
  color: #ffffff;
}
.dark-panel strong {
  color: #a8d4f5;
}
/* decision-table - 94 pages */
.decision-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.decision-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: #3a3a3a;
  line-height: 1.6;
  vertical-align: top;
}
.decision-table th {
  background: var(--blue-deep);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 18px;
  text-align: left;
}
.decision-table tr:last-child td {
  border-bottom: none;
}
.decision-table tr:nth-child(even) td {
  background: var(--off-white);
}
/* diagnosis - 94 pages */
.diagnosis {
  background: var(--white);
  padding: 84px 0;
}
.diagnosis h2 em {
  color: var(--blue);
}
/* diagnosis-inner - 94 pages */
.diagnosis-inner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 32px;
}
.diagnosis-inner.split {
  align-items: start;
  display: grid;
  gap: 72px;
  grid-template-columns: 1fr 1fr;
}
/* diff-grid - 96 pages */
.diff-grid > * {
  min-width: 0;
}
/* dvv-grid - 96 pages */
.dvv-grid > * {
  min-width: 0;
}
/* faq - 94 pages */
.faq {
  background: var(--white);
  padding: 84px 0;
}
/* faq-a - 94 pages */
.faq-a {
  display: none;
  padding: 16px 24px 20px;
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.75;
  border-top: 1px solid var(--border);
}
/* faq-header - 94 pages */
.faq-header {
  margin-bottom: 48px;
}
/* faq-inner - 94 pages */
.faq-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}
/* faq-item - 94 pages */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item.open .faq-a {
  display: block;
}
.faq-item.open .faq-q svg {
  transform: rotate(45deg);
}
/* faq-q - 94 pages */
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--charcoal);
  transition: background .15s;
}
.faq-q svg {
  flex-shrink: 0;
  color: var(--blue);
  transition: transform .25s;
}
.faq-q:hover {
  background: var(--blue-tint);
}
/* faq-section - 94 pages */
.faq-section {
  padding: 72px 0;
}
/* grid-2 - 94 pages */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
/* grid-3 - 94 pages */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
/* grid-4 - 94 pages */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
/* hero-card - 94 pages */
.hero-card-label {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b6dbf7;
  margin-bottom: 14px;
}
.hero-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: rgba(255,255,255,.8);
  line-height: 1.45;
}
.hero-card-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 0.875rem;
  color: rgba(255,255,255,.8);
  line-height: 1.55;
}
/* hero-cta - 94 pages */
.hero-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* hero-dot - 94 pages */
.hero-dot {
  flex-shrink: 0;
  margin-top: 5px;
  width: 7px;
  height: 7px;
  background: #a8d4f5;
  border-radius: 50%;
}
/* hero-symptom - 94 pages */
.hero-symptom-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  backdrop-filter: blur(4px);
}
.hero-symptom-card-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.75rem;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
}
.hero-symptom-card-title {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-bottom: 18px;
}
.hero-symptom-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-symptom-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: rgba(255,255,255,.9);
  line-height: 1.45;
}
/* info-card - 94 pages */
.info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}
.info-card h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 7px;
}
.info-card p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
}
.info-card-icon {
  font-size: 1.3125rem;
  margin-bottom: 10px;
}
/* nerve-diagram - 94 pages */
.nerve-diagram {
  margin: 20px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.nerve-diagram svg {
  max-width: 100%;
  height: auto;
}
/* nonsurgical - 94 pages */
.nonsurgical {
  background: var(--off-white);
  padding: 84px 0;
}
/* nonsurgical-header - 94 pages */
.nonsurgical-header {
  margin-bottom: 48px;
}
/* nonsurgical-inner - 94 pages */
.nonsurgical-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* ns-card - 94 pages */
.ns-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
}
.ns-card h3 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.ns-card p {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.7;
}
.ns-card-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  -webkit-text-stroke: 1.5px var(--blue);
  color: transparent;
  line-height: 1;
  margin-bottom: 16px;
}
/* orif-step - 94 pages */
.orif-step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.orif-step h3,
.orif-step h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 5px;
}
.orif-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--white);
  margin-top: 2px;
}
.orif-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* page-hero - 94 pages */
.page-hero {
  background: linear-gradient(135deg, #0a1628 0%, #0d3f6e 55%, #125b9a 100%);
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}
.page-hero h1 em {
  font-style: italic;
  color: #a8d4f5;
}
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.page-hero-sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 32px;
}
.page-hero-sub strong {
  color: rgba(255,255,255,.95);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(18,91,154,.35) 0%, transparent 70%);
  pointer-events: none;
}
/* patient-review - 94 pages */
.patient-review {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue));
  padding: 72px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.patient-review-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
/* procedure-step - 94 pages */
.procedure-step {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}
.procedure-step-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.procedure-step-content p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.65;
}
.procedure-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--white);
}
.procedure-step:last-child {
  margin-bottom: 0;
}
/* procedure-steps - 94 pages */
.procedure-steps {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-top: 0;
}
.procedure-steps h3 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--charcoal);
  margin-bottom: 28px;
}
/* prose - 94 pages */
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.375rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 18px;
}
.prose h2 em {
  color: var(--blue);
  font-style: italic;
}
.prose p {
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.75;
  margin-bottom: 16px;
}
/* prp-callout - 94 pages */
.prp-callout {
  background: var(--off-white);
  padding: 72px 0;
}
.prp-callout-body p {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.8;
  margin-bottom: 14px;
}
.prp-callout-body p:last-child {
  margin-bottom: 0;
}
.prp-callout-card {
  background: var(--white);
  border: 1px solid rgba(18,91,154,.15);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.prp-callout-icon {
  width: 52px;
  height: 52px;
  background: #dc2626;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3125rem;
  flex-shrink: 0;
}
.prp-callout-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}
.prp-callout-title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--charcoal);
  margin-bottom: 12px;
}
/* prp-card - 94 pages */
.prp-card h3 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 14px;
}
.prp-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.prp-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: #3a3a3a;
  line-height: 1.5;
}
.prp-card-label {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
/* prp-check - 94 pages */
.prp-check {
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
/* prp-inner - 94 pages */
.prp-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 20px;
}
.prp-inner h2 em {
  color: var(--blue);
  font-style: italic;
}
.prp-inner p {
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.75;
  margin-bottom: 16px;
}
/* prp-section - 94 pages */
.prp-section {
  background: var(--white);
  padding: 84px 0;
}
/* recovery - 94 pages */
.recovery {
  background: var(--white);
  padding: 84px 0;
}
/* recovery-col - 94 pages */
.recovery-col {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.recovery-col-body {
  padding: 16px;
}
/* h3 AND h4, and this pair is PERMANENT rather than transitional. The
   correct heading level for this component depends on how deeply the page
   nests it: 30 pages sit it directly under an h2, so its headings are h3;
   triquetral-avulsion-fracture and wrist-sprain nest it one level deeper
   under an h3, where h4 is right. A component should style whichever level
   is semantically correct rather than force one and reintroduce a skip. */
.recovery-col-body h3,
.recovery-col-body h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.recovery-col-body p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.6;
}
.recovery-col-hdr {
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 16px;
}
.recovery-col-header {
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 18px;
}
/* recovery-header - 94 pages */
.recovery-header {
  margin-bottom: 52px;
}
/* recovery-inner - 94 pages */
.recovery-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* recovery-note - 94 pages */
.recovery-note strong {
  color: var(--blue-deep);
}
/* related - 94 pages */
.related {
  background: var(--off-white);
  padding: 72px 0;
}
/* related-card - 94 pages */
.related-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-decoration: none;
  display: block;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.related-card-icon {
  font-size: 1.3125rem;
  margin-bottom: 12px;
}
.related-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  margin-top: 10px;
}
.related-card-sub {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.5;
}
.related-card-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--charcoal);
  margin-bottom: 6px;
  line-height: 1.25;
}
.related-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(18,91,154,.25);
}
/* related-header - 94 pages */
.related-header {
  margin-bottom: 36px;
}
/* related-inner - 94 pages */
.related-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* review-attribution - 94 pages */
.review-attribution {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.review-attribution strong {
  color: #ffffff;
  font-weight: 500;
}
/* review-highlight - 94 pages */
.review-highlight {
  color: #b6dbf7;
  font-style: normal;
}
/* review-quote - 94 pages */
.review-quote {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--white);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 20px;
}
/* review-stars - 94 pages */
.review-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
}
.review-stars svg {
  width: 20px;
  height: 20px;
  fill: #fcd34d;
}
/* section-sub - 94 pages */
.section-sub {
  font-size: 1rem;
  color: var(--slate);
  max-width: 640px;
  margin-top: 12px;
  line-height: 1.7;
}
/* severity-badge - 94 pages */
.severity-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--mono);
  letter-spacing: .05em;
}
/* severity-table - 94 pages */
.severity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.severity-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
  color: #3a3a3a;
}
.severity-table th {
  background: var(--blue);
  color: var(--white);
  padding: 12px 16px;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.severity-table tr:last-child td {
  border-bottom: none;
}
.severity-table tr:nth-child(even) td {
  background: var(--off-white);
}
/* step-num - 94 pages */
.step-num {
  width: 30px;
  height: 30px;
  background: var(--blue-tint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--blue);
  flex-shrink: 0;
}
/* step-row - 94 pages */
.step-row {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
/* h3 AND h4. wrist-sprain's step headings are h3 so the page stops
   skipping h2 -> h4. The other 11 .step-row pages still use h4 and are
   untouched, so both are styled until they are converted as well. A
   transitional pair, not a design choice -- see the heading-skip note in
   CONTENT-BACKLOG: 68 of 96 pages carry 113 skips. */
.step-row h3,
.step-row h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.step-row p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
}
.step-row:last-child {
  border-bottom: none;
}
/* steps-box - 94 pages */
.steps-box {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 28px;
}
/* steps-card - 94 pages */
.steps-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.steps-card-title {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--charcoal);
  margin-bottom: 20px;
}
/* steps-header - 94 pages */
.steps-header {
  background: var(--blue-deep);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 20px;
}
/* surgery-transition - 94 pages */
.surgery-transition {
  background: var(--white);
  border: 1px solid rgba(18,91,154,.2);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 24px 28px;
  font-size: 1rem;
  color: var(--blue-deep);
  line-height: 1.7;
}
/* surgical - 94 pages */
.surgical {
  background: var(--white);
  padding: 84px 0;
}
.surgical h2 em {
  color: var(--blue);
}
/* surgical-card - 94 pages */
.surgical-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.surgical-card-body {
  padding: 24px;
}
.surgical-card-body p {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.72;
  margin-bottom: 16px;
}
.surgical-card-body p:last-child {
  margin-bottom: 0;
}
.surgical-card-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.surgical-card-header-badge {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}
.surgical-card-header-title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.2;
}
.surgical-card-header.endo {
  background: linear-gradient(135deg, #0d3f6e, #125b9a);
}
.surgical-card-header.endo .surgical-card-header-badge {
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
}
.surgical-card-header.endo .surgical-card-header-title {
  color: var(--white);
}
.surgical-card-header.open {
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.surgical-card-header.open .surgical-card-header-badge {
  background: var(--off-white);
  color: var(--slate);
}
.surgical-card-header.open .surgical-card-header-title {
  color: var(--charcoal);
}
/* surgical-compare - 94 pages */
.surgical-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
/* surgical-detail - 94 pages */
.surgical-detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.surgical-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.5;
}
.surgical-detail-list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
/* surgical-header - 94 pages */
.surgical-header {
  margin-bottom: 52px;
}
/* surgical-inner - 94 pages */
.surgical-inner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 32px;
}
.surgical-inner.split {
  align-items: start;
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr 1fr;
}
/* surgical-steps - 94 pages */
.surgical-steps-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.surgical-steps-title {
  background: var(--blue-deep);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 24px;
}
/* symptom-card - 94 pages */
.symptom-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow .2s, transform .2s;
}
.symptom-card h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.symptom-card p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.7;
}
.symptom-card-icon {
  font-size: 1.625rem;
  margin-bottom: 12px;
}
.symptom-card.warning {
  border-color: #fca5a5;
  background: #fff5f5;
}
.symptom-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* symptom-dot - 94 pages */
.symptom-dot {
  flex-shrink: 0;
  margin-top: 5px;
  width: 7px;
  height: 7px;
  background: #a8d4f5;
  border-radius: 50%;
}
/* symptoms - 94 pages */
.symptoms {
  background: var(--off-white);
  padding: 84px 0;
}
/* symptoms-header - 94 pages */
.symptoms-header {
  margin-bottom: 52px;
}
/* symptoms-inner - 94 pages */
.symptoms-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* table-scroll - 94 pages */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-scroll-hint {
  display: none;
}
.table-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* tag - 94 pages */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
}
/* timeline-band - 2 pages (fight-bite, flexor-tenosynovitis)
   NOT a variant of .timeline. These two pages used `.timeline` for a dark
   full-bleed urgency band; the other four use it for a vertical dot-timeline.
   The child classes are DISJOINT (band: -inner/-title/-body; dot: -content/
   -dot/-item/-week), which is the tell: one name, two components. Unifying
   them dropped `background:#1a0505` from the band, leaving white text on
   white at 1.00:1, and applied `display:flex` to a section that never had it. */
.timeline-band {
  background: #1a0505;
  padding: 64px 0;
}

/* timeline - 94 pages */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* timeline-content - 94 pages */
.timeline-content {
  flex: 1;
  padding-top: 8px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 0;
}
.timeline-content h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.timeline-content p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.7;
}
/* timeline-dot - 94 pages */
.timeline-dot {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--blue);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.timeline-dot.active {
  background: var(--blue);
  color: var(--white);
}
/* timeline-week - 94 pages */
.timeline-week {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
/* treatment - 94 pages */
.treatment {
  background: var(--white);
  padding: 84px 0;
}
/* treatment-card - 94 pages */
.treatment-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.treatment-card h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.treatment-card p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.7;
}
.treatment-card-num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--blue-tint);
  line-height: 1;
  margin-bottom: 12px;
  -webkit-text-stroke: 1.5px var(--blue);
  color: transparent;
}
/* when-to - 94 pages */
.when-to-call {
  margin-top: 40px;
  background: linear-gradient(135deg, #0d3f6e 0%, #125b9a 100%);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.when-to-call-text {
  flex: 1;
}
.when-to-call-text h3 {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--white);
  margin-bottom: 10px;
}
.when-to-call-text p {
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
}
/* why-graham - 94 pages */
.why-graham {
  background: linear-gradient(135deg, #0a1628 0%, #0d3f6e 60%, #125b9a 100%);
  padding: 84px 0;
}
.why-graham h2 em {
  color: #a8d4f5;
  font-style: italic;
}
/* why-pillar - 94 pages */
.why-pillar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.why-pillar-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
}
.why-pillar-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(18,91,154,.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}
.why-pillar-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}

@media (max-width: 1024px) {
  /* diagnosis-inner - 94 pages */
  .diagnosis-inner.split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* grid-2 - 94 pages */
  .grid-2 {
    grid-template-columns: 1fr;
  }
  /* grid-3 - 94 pages */
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  /* grid-4 - 94 pages */
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  /* hero-symptom - 94 pages */
  .hero-symptom-card {
    display: none;
  }
  /* surgical-compare - 94 pages */
  .surgical-compare {
    grid-template-columns: 1fr;
  }
  /* surgical-inner - 94 pages */
  .surgical-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .surgical-inner.split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .rev-strip {
    padding: 7px 12px;
    gap: 7px;
  }
  .rev-asof {
    width: 100%;
  }

  .hub-cross {
    padding: 20px 0;
  }
  .hub-cross-inner {
    padding: 0 16px;
    gap: 10px 12px;
  }

  /* affil-divider - 94 pages */
  .affil-divider {
    display: none;
  }
  /* affil-logo - 96 pages */
  .affil-logo-link {
    flex-shrink: 1;
    min-width: 0;
  }
  /* affil-strip - per-property merge of the two @600 blocks; they disagree on
     flex-wrap (nowrap then wrap) and source order makes wrap the winner */
  .affil-strip {
    padding: 10px 0;
  }
  .affil-inner {
    padding: 0 16px;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .affil-label {
    display: none;
    flex-shrink: 1;
  }
  .affil-logos {
    gap: 16px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .affil-logo-img {
    height: 20px;
    max-width: 100%;
    flex-shrink: 1;
  }
  /* care-team - 96 pages */
  .care-team-top > * {
    min-width: 0;
  }
  /* grid-3 - 94 pages */
  .grid-3 {
    grid-template-columns: 1fr;
  }
  /* grid-4 - 96 pages */
  .grid-4 {
    grid-template-columns: 1fr;
  }
  /* when-to - 94 pages */
  .when-to-call {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  /* prp-callout - 94 pages */
  .prp-callout-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* hero-inner - 96 pages */
  .hero-inner > * {
    min-width: 0;
  }
  /* page-hero - 96 pages */
  .page-hero-inner > * {
    min-width: 0;
  }
  /* table-scroll - 94 pages */
  .table-scroll {
    box-shadow: inset -14px 0 12px -12px rgba(26,26,46,.5);
    border-right: 1px solid var(--border);
  }
  .table-scroll-hint {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .04em;
    color: var(--slate);
    margin: 0 0 8px;
  }
  .table-scroll-hint::after {
    content: " \2192";
  }
}

/* The `.reviews` light-card-grid scoping that used to live here was removed
   21 Aug 2026 when wrist-fracture was converted to `.patient-review.multi`.
   It existed to stop the dark-band majority painting white text on a white
   card; there is no light review grid on the site any more. */

/* step-num state modifiers. These replace inline `style="background:..."` on
   carpal-tunnel-recovery. The base .step-num is `color: var(--blue)` on a pale
   blue-tint disc, which is correct on its own ground; painted onto a saturated
   green or red disc it measured 1.01:1 and 1.25:1. The page carried
   `color: var(--white)` locally until the resolution dropped it. */
.step-num.yes { background: var(--green); color: var(--white); }
.step-num.no  { background: #c62828;     color: var(--white); font-size: 0.875rem; }
/* #c62828 deliberately, NOT var(--red). --red is undefined on this page, and
   where it IS defined it is #ef4444, on which white measures 3.76:1 - below AA.
   White on #c62828 is 5.31:1. See the --red/--green accent pass, still open. */

/* .why-graham is a dark blue gradient band. The generic .section-title
   (var(--charcoal)) and .section-sub (var(--slate)) are LIGHT-page defaults;
   urgent-care is the only page that puts them inside this band, where they
   measured 1.06:1 and 3.26:1. Alpha floor .8 per the review-band ruling. */
.why-graham .section-title { color: var(--white); }
.why-graham .section-sub   { color: rgba(255,255,255,.8); }
.step-num.alert { background: #c62828; color: var(--white); font-size: 1rem; }

/* ---------------------------------------------------------- illustration
   Component rule for all 34 planned illustrations (2 live today), NOT a fix
   for carpal-tunnel. See source/DRAFT-illustration-component.md.

   THE CONSTRAINT IS ON HEIGHT, and that is the whole point. The previous rule
   was `width: 100%; height: auto` with no maximum of any kind. Height was the
   unbounded axis: illus-tinels-sign.svg is 4500x4500, so in a 1136px full-width
   container it rendered 1136x1136 - a 1219px figure that does not fit any
   laptop screen. The anatomy illustration looked fine only because it sits in a
   470px grid column. Same rule, two containers, one of them catastrophic.

   `max-height` CANNOT simply be added alongside `width: 100%`. A specified
   width plus a max-height distorts a replaced element - measured, the anatomy
   figure came out 470x480 against a true ratio of 0.947. The width declaration
   has to GO, and the bounds become max-width/max-height, which the browser
   resolves while preserving the ratio.

   480px measured to fit figure + caption above the fold at 1900x900, 1440x820,
   1440x700 and 1200x800 - the tightest case is 608px of figure in 627px of
   usable height at 1440x700, after the 73px sticky nav.

   ONE number bounds both axes and both elements. The figure carries the same
   480px max-width, so the caption is exactly as wide as the image (measured:
   both span x 713-1193) instead of overhanging it by 40px each side. A first
   version used 560px on the figure and produced visibly wider captions.
   `width: fit-content` was tried and is wrong - it resolves against the image's
   `max-width: 100%` and blows the caption back out to the full 1136px. */
.illus {
  margin: 20px auto 28px;
  max-width: 480px;
}
.illus-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  margin-inline: auto;
  border-radius: var(--radius);
}
.illus-zoom {
  display: block;
  text-decoration: none;
}
.illus-more {
  display: block;
  margin-top: 4px;
}
.illus-cap {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  /* --slate is 5.56:1 on white. Do NOT lighten: small text, no large-text
     exemption, and this is the failure the PALETTE EXCEPTION exists to stop. */
  color: var(--slate);
}

/* ------------------------------------------- patient-review, MULTI variant
   Ruled 21 Aug 2026. `.reviews` on wrist-fracture was the site's only light
   card grid against 60 pages on the dark `.patient-review` band - a different
   structure, format AND colour, on the one page carrying the most reviews.
   Rather than drop two reviews to fit the single-quote band, the band gains a
   multi-review variant. That also gives the 24 pages with more than one review
   mapped a component to grow into.

   EVERY COLOUR HERE FOLLOWS THE REVIEW COMPONENT RULING IN CLAUDE.md. In
   particular the card DARKENS - rgba(0,0,0,.15) - because a light overlay on
   this gradient silently breaks attribution (4.39:1) and highlight (4.03:1)
   together, without either text colour being wrong. Do not lighten it. */
.patient-review.multi .patient-review-inner {
  max-width: 1200px;
  text-align: left;
}
/* The header uses .section-label/.section-title, which are LIGHT-page defaults
   (--slate / --charcoal). On this band they must be scoped, exactly as they are
   inside .why-graham. Alpha floor .8 per the ruling. */
.patient-review .reviews-header {
  text-align: center;
  margin-bottom: 34px;
}
.patient-review .section-label { color: rgba(255,255,255,.8); }
.patient-review .section-title { color: var(--white); }

.review-grid {
  display: grid;
  /* 380px, not 300px. Measured at a 1136px container: 300px yields THREE
     columns of 365px, which is ~40 characters of italic serif per line - too
     narrow to read, and with three cards where one is `.wide` it also leaves a
     third of the first row empty. 380px yields two columns of 558px, ~61
     characters, which is the measure body copy is set to elsewhere. It still
     collapses to one column below ~800px. */
  /* `min(380px, 100%)`, not a bare 380px. A bare minmax floor is honoured even
     when the CONTAINER is narrower, so at a 320px viewport the column stayed
     380px and the page overflowed by 92px - measured. 320px is the ruled
     support target, so this is a fail, not a nicety. min() clamps the floor
     to the container and the grid degrades to one column cleanly. */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
}
.review-grid .review-card {
  background: rgba(0,0,0,.15);          /* recessed well - NEVER lighten */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
/* a long or complex-case review spans the row */
.review-grid .review-card.wide {
  grid-column: 1 / -1;
}
.review-grid .review-stars {
  justify-content: flex-start;
  margin-bottom: 16px;
}
/* the band's single-quote size is clamp(18px,2.5vw,24px); in a 3-up grid that
   is too large for the column, so the grid steps it down. --white is 7.03:1 on
   this ground at any size. */
.review-grid .review-quote {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  margin-bottom: 16px;
  flex: 1;
}
.review-grid .review-attribution {
  font-size: 0.75rem;
  letter-spacing: .08em;
  line-height: 1.6;
}
.patient-review .review-cta {
  margin-top: 32px;
  text-align: center;
}

/* hub-cross - the cross-reference row on every hub. 41 of 42 hub-to-hub links
   did not exist before this; the breadcrumb sends a patient to the right hub
   and this is what lets them move across when the region was not the problem.
   Radius 6px, not 100px: CLAUDE.md reserves the pill radius for eyebrow pills
   and badges, and these are buttons. */
.hub-cross {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
}
.hub-cross-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.hub-cross-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}
.hub-cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hub-cross-links a,
.hub-cross-links span {
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
}
.hub-cross-links a {
  color: var(--blue);
  background: var(--white);
  transition: background .15s;
}
.hub-cross-links a:hover,
.hub-cross-links a:focus-visible {
  background: var(--blue-tint);
}
.hub-cross-links .hub-cross-current {
  color: var(--slate);
  background: transparent;
  border-style: dashed;
}

/* cond-more - the compact cross-reference list at the foot of a hub's
   conditions. These are conditions the anatomic selector files under this
   region that did not earn a full card. Links, not cards, because a card needs
   a written description and inventing 41 of those is not a transform. */
.cond-more {
  margin-top: 34px;
}
.cond-more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.cond-more-list a {
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--blue);
  text-decoration: none;
  transition: background .15s;
}
.cond-more-list a:hover,
.cond-more-list a:focus-visible {
  background: var(--blue-tint);
}

/* rev-strip - the Google rating in the hero, above the CTAs.
   Built in the site's own language: --blue-tint ground and the same border as
   .hero-eyebrow, so it reads as a sibling of the credential pill rather than a
   badge competing with it. No gold, no bevel, no Google mark -- Google's
   guidance is that no official badge exists and businesses should not invent
   one. The stars are plain vectors in --blue.
   Figures come from source/reviews.json via lib/apply_reviews.py. */
.rev-strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  background: var(--blue-tint);
  border: 1px solid rgba(18,91,154,.15);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 22px;
  text-decoration: none;
  transition: background .15s;
}
.rev-strip:hover,
.rev-strip:focus-visible {
  background: var(--white);
}
.rev-stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}
.rev-star {
  fill: var(--blue);
}
.rev-score {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue-deep);
}
.rev-detail {
  font-size: 0.8125rem;
  color: var(--slate);
}
.rev-asof {
  font-size: 0.75rem;
  color: var(--slate);
}

/* Hero identity - the headshot overlapping the review pill on condition and hub
   pages. Same mechanism as the homepage .hero-thumb/.hero-eyebrow pair: the
   circle pulls right by a negative margin and the pill's left padding clears
   it, so the circle sits on the pill's left edge at its equator.

   Unlike the homepage this shows at EVERY width. There the thumbnail hides
   above 900px because the full portrait does the same job; condition pages have
   no portrait, so hiding it would leave nothing showing whose site this is --
   which is the whole reason David asked for it. */
.page-hero-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-hero-thumb {
  width: clamp(44px, 12vw, 54px);
  height: clamp(44px, 12vw, 54px);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  margin-right: -26px;
  position: relative;
  z-index: 2;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-md);
  background: var(--blue-tint);
}
.page-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.page-hero-identity .rev-strip {
  margin-bottom: 0;
  padding-left: clamp(34px, 10vw, 40px);
  position: relative;
  z-index: 1;
}

/* MEASURED 24 Aug 2026: with flex-wrap:wrap the identity row broke onto two
   lines at every phone width -- the thumbnail stacked ABOVE the pill instead of
   overlapping it, which is the entire point of the treatment and matters most
   on a phone, where a patient arriving from search has nothing else telling
   them whose site this is. nowrap + a shrinkable pill keeps the overlap; the
   pill's own text wraps inside it instead. */
.page-hero-identity {
  flex-wrap: nowrap;
}
.page-hero-identity .rev-strip {
  flex: 0 1 auto;
  min-width: 0;
}

/* rev-strip responsive tiers. RULED by David 24 Aug 2026: "Let's lose the 'on
   Google' and 'as of date' on small screens... I would like to keep it one line
   at all times... I don't want it to take away from the valuable space we have
   on smaller screens to put additional content."

   MEASURED, which is where the two breakpoints come from:

       full text   "5.0 on Google - 260 reviews as of August 2026"
                   2 lines at 600px, 1 line from 700px
       short text  "5.0 - 260 reviews"
                   2 lines at 320px, 1 line from 360px

   So the text drops to short form below 700px, and below 360px the ORNAMENT
   shrinks rather than the words: 12px stars and a tighter gap hold one line at
   320px where 15px stars cannot. Shrinking the stars costs nothing; dropping
   another word would start costing meaning.

   SCOPED TO .page-hero-identity so the homepage hero is untouched -- David kept
   it as the one place the fuller line may stay. Nothing is lost to a screen
   reader at any width: the anchor's aria-label carries the rating, the count,
   the source and the date regardless of what is painted. */
@media (max-width: 699px) {
  .rev-asof { display: none; }
}
@media (max-width: 359px) {
  .page-hero-identity .rev-strip {
    gap: 6px;
    padding: 7px 11px 7px 29px;
  }
  .page-hero-identity .rev-star {
    width: 12px;
    height: 12px;
  }
  .page-hero-thumb {
    width: 40px;
    height: 40px;
    margin-right: -20px;
  }
}

/* Stars that TRACK THE RATING. Before 24 Aug 2026 the markup hard-coded five
   filled stars, so a drop to 4.0 would have rendered FIVE FULL STARS beside the
   number 4.0. A stale count merely understates; a stale star row makes a false
   visual claim, which is worse -- and on a medical practice site it is the kind
   of claim that should never be able to drift.

   Mechanism: five outline stars as a track, five filled stars layered over them
   and clipped to (rating / 5) of the width. Exact for any value including
   halves, with no rounding and no separate half-star glyph. The width is
   written from source/reviews.json by lib/apply_hero_review_pill.py, and
   lint check_review_figures FAILs if it stops matching the rating.

   THE SINGLE STAR on small screens is an ICON, not a scale -- David: "I don't
   know what having the 5 stars are doing when it is a small screen we just need
   one star." It is always full, and the number beside it carries the rating,
   the same way Google renders a compact rating. A partially filled lone star
   would read as a rendering bug rather than a rating. */
.rev-star-one {
  display: inline-flex;
  flex: 0 0 auto;
}
.rev-star-one svg { fill: var(--blue); }

.rev-stars {
  position: relative;
  display: none;
  flex: 0 0 auto;
  line-height: 0;
}
.rev-stars-track,
.rev-stars-fill {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}
.rev-stars-track svg { fill: rgba(18,91,154,.28); }
.rev-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
}
.rev-stars-fill svg { fill: var(--blue); }

/* TIERS, ruled by David 24 Aug 2026:
     small        one star, "5.0 - 260 reviews"
     medium       one star, "5.0 on Google - 260 reviews"
     700px and up five stars, "on Google", and the as-of date -- as it was
   Breakpoints measured, not guessed. See the commit message. */


/* The homepage keeps the full treatment at every width. */

/* HALF-STAR ROUNDING. The first version clipped the whole five-star strip at
   rating/5 -- 4.6 became a 92% clip. A star's width is not proportional to its
   visual mass, so that cuts a star at an arbitrary point and reads as a broken
   glyph rather than a partial rating. David: "clipping mid-star reads as a
   broken star rather than a partial one."

   Each star is now its own unit: an outline underneath, a filled copy on top,
   clipped to 100% / 50% / 0% of THAT star. The rating is rounded to the
   nearest 0.5 before the row is built, so only full, half and empty ever
   render.

   BUILT AND WORKING AT 5.0, when nothing partial shows. David asked for the
   sub-5.0 case to be handled before it can occur rather than discovered live,
   which is the right way round: the day the rating moves is not the day to
   find out the stars cannot express it. */
.rev-s {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.rev-s-bg { fill: var(--rev-star-empty, rgba(18,91,154,.28)); }
.rev-s-fg {
  position: absolute;
  top: 0;
  left: 0;
  fill: var(--rev-star, var(--blue));
}
.rev-s.is-full  .rev-s-fg { clip-path: inset(0 0 0 0); }
.rev-s.is-half  .rev-s-fg { clip-path: inset(0 50% 0 0); }
.rev-s.is-empty .rev-s-fg { display: none; }
.rev-star-one .rev-s-fg { position: static; fill: var(--rev-star, var(--blue)); }
.rev-stars-track, .rev-stars-fill { display: none; }

/* ---- REVIEW PILL, FINAL TREATMENT. Ruled by David 24 Aug 2026. ---- */

/* SEPARATOR. The date is now a child of .rev-detail, not a sibling flex item,
   so the 9px column-gap plays no part in it -- exactly like the working
   "on Google &middot; " separator, whose dot is plain text inside .rev-src.
   The earlier attempt put the mark on the far side of the gap, which left the
   dot tight against "as of" and floating 9px from "reviews". .rev-sep carries
   .rev-detail's font-size so its two word spaces measure the same as the first
   separator's, rather than the smaller ones of .rev-asof. */
.rev-sep { font-size: 0.8125rem; }

/* STAR COLOUR: standard rating gold. RULED, AND THE REASONING IS RECORDED IN
   CLAUDE.md -- do not "fix" this in a later contrast audit.

   #FBBC04 measures 1.51:1 on the pill and 1.71:1 on white. It does not meet
   WCAG 1.4.11's 3:1, and NO rating gold can on a light ground -- Google's own
   stars do not pass either. The exemption that makes this legitimate is that
   1.4.11 covers non-text content REQUIRED to understand the content, and these
   stars are not required: the numeric rating sits in text immediately beside
   them, the SVGs are aria-hidden, and the link's accessible name states the
   rating in words. The stars reinforce information already available in text.

   That exemption only holds while all three of those remain true. The number
   must never be dropped to save space at a narrow width -- if something has to
   go at 320px, it is not the number. */
:root { --rev-star: #FBBC04; --rev-star-empty: #b6c0cc; }

/* EMPTY STARS. The old rgba(18,91,154,.28) composited to a faint BLUE star at
   1.35:1 against the pill -- at 4.0 the fifth star nearly vanished and the row
   read as "four stars" rather than "four out of five".

   Gold cannot be separated from grey by luminance: #FBBC04 has L=0.565, which
   sits in the middle of the grey range, so every candidate lands between
   1.05:1 and 1.25:1 against it. The filled/empty distinction is carried by
   CHROMA -- saturated gold against neutral grey -- which is how every rating UI
   does it. #b6c0cc is chosen for its 1.63:1 against the PILL, so the empty star
   is clearly present rather than nearly invisible. */

/* TIERS now apply to the homepage too. David, 24 Aug 2026: "I also would like
   to keep the review line on one line on the index page as well. Use the same
   shortcuts we discussed above as the viewport contracts." So the selectors
   drop their .page-hero-identity scope and the homepage override is gone. */
.rev-src { display: none; }
@media (min-width: 480px) {
  .rev-src { display: inline; }
}
.rev-star-one { display: inline-flex; }
.rev-stars { display: none; }
@media (min-width: 700px) {
  .rev-star-one { display: none; }
  .rev-stars { display: inline-flex; }
}

/* MEASURED 24 Aug 2026, after David reported the index review box on two lines.
   It is not a phone-width problem -- at 320-899px the homepage hero is a single
   column and the line fits. At 920px the hero splits into two columns and
   .hero-left drops to 368px, while the full line needs 416px. It recovers at
   1040px, where the column reaches 449px.

       900px   parent 837   strip 416   1 line
       920px   parent 368   strip 368   2 lines   <- splits here
      1020px   parent 413   strip 413   2 lines
      1040px   parent 449   strip 416   1 line

   A phone in landscape lands inside that band -- an iPhone Pro Max is 932px --
   which is why it read as a mobile problem. The date is dropped for exactly
   those widths, the same shortcut already used below 700px. Condition pages are
   unaffected: their hero stays single-column and the line fits at every width. */
@media (min-width: 920px) and (max-width: 1043px) {
  .hero-left .rev-asof { display: none; }
}

/* FIVE STARS ON THE HOMEPAGE AT EVERY WIDTH. David, 24 Aug 2026: "the review
   section on the index hero is small... it doesn't look like an afterthought
   but it gets the attention it deserves. The easiest way to do that is to add
   in the 5 stars."

   He is right about the cause. On a condition page the pill sits beside the
   headshot, and the two together carry the weight; on the homepage the pill
   stands alone under the credential row, where a single 15px star reads as a
   bullet rather than a rating.

   MEASURED before applying -- five stars cost 64px and the column has room:

       320-479px   column 273   five-star line 226   47px spare
       480-699px   column 433   five-star line 300  133px spare

   Condition pages are deliberately NOT changed: at 320 the same swap wraps to
   two lines, because the headshot's overlap takes ~30px out of the column
   there. They keep one star below 700px, and the headshot does the work the
   stars are doing here. */
.hero-left .rev-star-one { display: none; }
.hero-left .rev-stars { display: inline-flex; }

/* ── affiliation panel: two named relationships, made of the hero ──────────
   Ruled by David 25 Aug 2026, after seeing a light card in the dark hero and
   calling it stark. He was right and the cause was physical, not stylistic:
   BOTH logo files are blue ink. MEASURED against the hero gradient --

       JOI      rgb(18, 96, 155)   1.62:1 on #0d3f6e   1.06:1 on #125b9a
       Baptist  rgb(114,131,156)   2.79:1 on #0d3f6e   1.82:1 on #125b9a

   -- so neither mark can sit on the hero at all, and the old white card
   existed to give them somewhere to live. Making the Baptist file transparent
   would not have helped: the problem is the ink, not the background.

   THE FIX IS DAVID'S IDEA, with the asymmetry removed. Each logo gets its own
   small white plate; the panel itself is made from the hero (a 7% white wash)
   rather than laid over it. The white is reduced from one large card to exactly
   as much as the two marks need, and NEITHER LOGO IS RECOLOURED -- which the
   knocked-out variant would have required, and which brand guidelines for a
   hospital generally forbid.

   A reversed (white) logo from either brand would let the plates go away
   entirely. Worth asking for; not worth waiting for. */
.affil {
  margin-top: 20px;
  padding: 13px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
}
.affil-row {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
}
.affil-row + .affil-row {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.affil-plate {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 5px;
  padding: 5px 7px;
}
.affil-row img { display: block; }
.affil-joi img { height: 24px; }
.affil-bap img { height: 18px; }
.affil-joi span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}
.affil-bap span {
  font-size: 0.8125rem;
  /* .9, not .84: the .84 value measured 4.76:1 against the gradient's
     LIGHT end -- over AA, but this project has been caught three times
     by numbers that only just cleared 4.5. */
  color: rgba(255,255,255,.9);
  line-height: 1.35;
}
/* The old markup had NO focus rule and its focused outline computed to `none`
   -- focusable, invisible, on 92 pages. */
.affil-row:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.affil-row:hover .affil-plate { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
@media (max-width: 380px) {
  .affil { padding: 11px 12px; }
  .affil-plate { padding: 4px 6px; }
  .affil-joi img { height: 22px; }
}
}

/* The hero phone button, hidden on phones only. Ruled by David 25 Aug 2026:
   the number already appears four times on one mobile screen -- topbar, this
   button, the sticky bar and the hamburger -- and the sticky bar is on screen
   at the same moment carrying both call and appointment. A reader who has just
   landed on a condition page wants to know what the condition is, not to dial.

   display:none, not opacity or off-screen positioning: it must leave the tab
   order and the accessibility tree, or it becomes a button that is invisible
   and still focusable, which is worse than leaving it visible.

   600px is the site's existing mobile tier. No new breakpoint. */
@media (max-width: 600px) {
/* a.hero-call-btn, NOT .hero-call-btn. MEASURED 25 Aug 2026: the bare class
     rule had NO effect. Every condition page's own inline <style> carries
     `.btn-primary { display: inline-flex }`, the inline block comes AFTER the
     linked stylesheet, and the two selectors have identical specificity -- so
     the page won and the button stayed visible on phones. Adding the element
     to the selector lifts it above the page rule without !important. */
  a.hero-call-btn { display: none; }
}


/* THE HOMEPAGE HERO IS WHITE. The condition pages use .page-hero, a dark
   gradient; index uses .hero, which computes to rgb(255,255,255). The dark
   panel above therefore put WHITE TEXT ON WHITE -- measured 1.0:1 -- and it was
   caught by resolving the real composited ground rather than assuming the
   gradient applied to both. CLAUDE.md's rule, earned again: a component that
   passes on one page is not thereby cleared on another.

   On a light ground the logos need no plates -- they are blue ink on white,
   which is what they were drawn for.

   THE SAME FAULT, TWO MORE PAGES, FOUND 22 Sep 2026. The rollout in 888ac00
   placed .affil outside the dark hero on exactly two pages, and both had been
   live with unreadable text ever since:

     request-appointment     .info-strip     #ffffff on #ffffff   1.00:1
     carpal-tunnel-recovery  .instr-section  #ffffff on #f8fafb   1.04:1

   Checked all 97 pages: those two are the entire blast radius -- every other
   page puts .affil inside .page-hero, where white is correct. carpal-tunnel
   was measured as a control and passes. Their markup is byte-identical to
   canonical's, no filters, so this treatment transfers unchanged.

   WHY NOBODY SAW IT. contrast_regression.py has been reporting it since 26 Aug;
   it is not wired into lint.py, and lint.py is what gets run. lint has said
   0 FAIL throughout, because it does not measure this.

   THE SELECTOR IS KEYED TO ANCESTORS, WHICH IS THE WEAK PART. A third light
   placement will break again in exactly this way and nothing will say so. The
   durable fix is a guard that fails when .affil renders on a light ground --
   lib/contrast_rendered/ already detects it -- rather than a longer selector
   list. Raised with David 22 Sep; not built without his call. */
.hero .affil,
.info-strip .affil,
.instr-section .affil {
  background: var(--off-white);
  border-color: var(--border);
}
.hero .affil-row + .affil-row,
.info-strip .affil-row + .affil-row,
.instr-section .affil-row + .affil-row { border-top-color: var(--border); }
.hero .affil-joi span,
.info-strip .affil-joi span,
.instr-section .affil-joi span { color: var(--charcoal); }
.hero .affil-bap span,
.info-strip .affil-bap span,
.instr-section .affil-bap span { color: var(--slate); }
.hero .affil-plate,
.info-strip .affil-plate,
.instr-section .affil-plate { background: none; padding: 0; border-radius: 0; }
.hero .affil-row:focus-visible,
.info-strip .affil-row:focus-visible,
.instr-section .affil-row:focus-visible { outline-color: var(--blue); }
.hero .affil-row:hover .affil-plate,
.info-strip .affil-row:hover .affil-plate,
.instr-section .affil-row:hover .affil-plate { box-shadow: none; }
.hero .affil-row:hover span,
.info-strip .affil-row:hover span,
.instr-section .affil-row:hover span { color: var(--blue-deep); }

/* .hero-tagline - the old h1, demoted. Ruled by David 26 Aug 2026: the
   headline said "Shoulder-to-Fingertip Surgical Precision You Can Trust",
   which contains none of the words anyone searches, on a domain called
   jacksonvillehandsurgery.com. The line is good writing and is kept -- it just
   is not the h1.

   The title tag moved for the same reason and a measured one: the old title
   rendered 803px at Google's ~20px Arial, 223px past the ~580px cut, so
   "Jacksonville" was never in the visible result. The new one measures 484px.

   SPACING AND COLOUR RULED 22 Sep 2026, after measuring the rendered hero in
   Chrome. The demotion left this rule at `margin: 10px 0 0` -- a top margin and
   NO BOTTOM ONE. The site-wide `*{margin:0}` reset means .hero-body contributes
   no top margin either, so the measured gap under this line was 0px at EVERY
   width from 1440 down to 160. Optically the line sat 4.5px off the paragraph
   and 0.34px off the h1 at desktop: the three blocks read as one, then a 40px
   chasm to the pin row.

     was  10 / 0  / 36        now  12 / 20 / 36

   NEITHER NEW NUMBER IS INVENTED. 12px is .section-sub's margin-top, the
   heading-to-sub gap on 94 pages; 20px is .page-hero h1's margin-bottom, the
   heading-to-body gap on every condition page. Tightest inside the heading
   group, loosening outward. The 36px below the paragraph was always correct and
   is untouched -- it only looked excessive because the two gaps above it had
   collapsed.

   THE SIZE WAS OFF THE RULED SCALE. The clamp endpoints were 1.0625rem (17px)
   and 1.375rem (22px); the scale ruled 20 Aug is 12 14 16 18 21 26 32 40 48 and
   map_scale.py's own table sends 17 -> 18 and 22 -> 21. It went unnoticed
   because map_scale.py only reads px declarations and cannot see rem inside a
   clamp(). 18px and 21px keep this line exactly one step above .hero-body at
   both ends (21 over 18 desktop, 18 over 16 mobile).

   COLOUR: --blue-deep -> --slate. The h1's second line is `em { color: var(--blue) }`
   italic serif and this line was --blue-deep serif -- same family, adjacent hue,
   0.34px apart. The hue change is what separates them; the serif is what keeps
   this line inside the heading group rather than reading as a lead paragraph.
   Measured on the real composited ground, which is NOT white on a phone:
   .hero::before goes `width:100%; clip-path:none` at <=900px, so this line sits
   on the hero gradient there.

     --slate on white            5.56:1   PASS
     --slate on the gradient     4.61:1   PASS -- by 0.11, flagged to David

   Sampled from rendered pixels, not computed from declarations. The thin margin
   was put to David 22 Sep and --slate chosen over a darker #4a4a4a: it is the
   site's secondary-text token, and .hero-service-area immediately below is
   already --slate on this same gradient at 4.56-4.62:1. #4a4a4a would have
   matched the body paragraph's own ink and separated by size alone.

   Sans was measured and rejected: Inter is wider than the serif at the same
   size, so the line wrapped and orphaned "Trust", costing +55px at desktop
   against this version's +21px. */
.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  line-height: 1.25;
  color: var(--slate);
  margin: 12px 0 20px;
}