/* ============================================================
   Component classes — vanilla CSS using Open Props + theme tokens
   Shared patterns used on 2+ pages. Page-specific CSS lives in
   each page's scoped <style> block.
   ============================================================ */

/* CC overrides — font-face + base reset handled by framework + theme */
/* Brand-specific heading color */
h1, h2, .h1, .h2 { color: var(--color-secondary); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
h3, h4, .h3, .h4 { color: var(--color-secondary); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
h5, h6, .h5, .h6 { color: var(--color-secondary); font-weight: var(--weight-semibold); }

/* ---- Typography utilities ---- */
.lede { font-size: var(--text-lg); line-height: var(--line-relaxed); color: var(--color-ink-soft); margin: var(--space-m) 0; max-width: 42em; }
.lede strong { color: var(--color-secondary); }
.lede a { color: var(--color-primary); font-weight: var(--weight-bold); }
.display-stat { font-size: var(--step-5); font-weight: var(--weight-extrabold); line-height: var(--line-none); }

/* ---- Range slider ---- */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; border: 0; outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--color-accent) var(--range-pct, 50%), var(--brand-100) var(--range-pct, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(13,38,56,.18); margin-top: -7px; cursor: pointer; }
input[type="range"]::-moz-range-track { height: 8px; border-radius: var(--radius-full); background: var(--brand-100); border: 0; }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--radius-full); background: var(--color-accent); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(13,38,56,.18); cursor: pointer; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(103,184,220,.4); }
.caption { font-size: var(--step--1); color: var(--color-ink-soft); }
.caption-sm { font-size: var(--step--2); color: var(--color-ink-soft); }

/* ---- Layout ---- */
.wrap { max-width: var(--grid-max-width); margin: 0 auto; padding: 0 var(--space-m); position: relative; z-index: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
section.block { padding: var(--space-4xl) 0; }
/* ⚠️ `section.block` is ELEMENT-QUALIFIED, so a <header class="block"> gets no padding and must
   set its own. Caught on /gp/choosing-a-patient/ 2026-08-26, where the hero h1 sat flush against
   the section boundary below it. */
/* Section-head alignment modifiers. Promoted out of case-conferencing.css 2026-08-26 when a
   second page needed them — the default .section-head is centred. */
.section-head.left { text-align: left; margin-left: 0; margin-right: 0; }
.section-head.left .rule { margin-left: 0; }
.rule.centred { margin-left: auto; margin-right: auto; }
.block.tint { background: var(--color-surface); }
.block.pale { background: linear-gradient(180deg, var(--brand-50), var(--color-surface)); }

/* ---- Role / discipline definition list ----
   Promoted out of case-conferencing.css 2026-09-11 when /who-can-attend/ became the second page
   rendering it. Both read src/_data/participants.json, so the markup is identical by construction. */
.cc2-dl { display:grid; grid-template-columns:1fr; margin:0; }
.cc2-dl dt { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-secondary);
  padding-top:var(--space-xs); }
.cc2-dl dd { margin:0 0 var(--space-xs); font-size:var(--text-sm); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }
.cc2-dl dt + dd { padding-bottom:var(--space-xs); border-bottom:1px solid var(--color-border-soft); }
.cc2-dl dt:last-of-type + dd { border-bottom:none; margin-bottom:0; }
/* A closing note under a role list is prose, not fine print — --text-xs is for figure captions. */
.cc2-dl + .cc2-fine { margin-top:var(--space-s); padding-top:var(--space-s);
  border-top:1px solid var(--color-border-soft); font-size:var(--text-sm); }
/* Inside a <dd> the chips are a dense inline list, not a band — tighten them up. */
.cc2-dl .pill-row { gap:var(--space-3xs); max-width:none; margin-top:var(--space-3xs); }

/* ---- Grid utility ---- */
.grid { display: grid; gap: var(--space-m); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---- Eyebrow ---- */
.eyebrow { font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow-ink); margin: 0 0 var(--space-xs); }
/* .on-dark is now an ESCAPE HATCH, not the mechanism. The ink contexts below handle every dark
   section automatically; this stays so a one-off dark ground the list doesn't know about can still
   be fixed at the call site. It forces the dark ink regardless of context. */
.eyebrow.on-dark { color: var(--color-surface); }

/* ---- Gradient rule ---- */
.rule { width: var(--space-2xl); height: var(--space-3xs); border-radius: var(--radius-xs); background: var(--grad-line); }

/* ---- Section head ---- */
.section-head { max-width: 760px; margin: 0 auto var(--space-xl); text-align: center; }
.section-head h2 { }
.section-head p { font-size: var(--text-lg); line-height: var(--line-relaxed); color: var(--color-ink-soft); margin: var(--space-xs) 0 0; }
.section-head .rule { margin: var(--space-s) auto 0; }
.section-head .eyebrow { color: var(--eyebrow-ink); font-size: var(--text-md); }
.section-head .eyebrow.on-dark { color: var(--color-surface); }

/* ---- Buttons ---- */
/* CC button overrides — gradient fills + brand shadows */
.btn-primary { background: var(--btn-primary-bg) border-box; border-color: transparent; color: var(--btn-primary-ink); box-shadow: 0 12px 26px oklch(from var(--color-primary) l c h / 38%); }
.btn-primary:hover { background: var(--btn-primary-bg); transform: translateY(-2px); box-shadow: 0 18px 36px oklch(from var(--color-primary) l c h / 50%); }
.btn-solid { background: var(--grad-deep) border-box; border-color: transparent; color: var(--color-primary-content); box-shadow: 0 12px 26px oklch(from var(--color-secondary) l c h / 32%); }
.btn-solid:hover { background: var(--grad-deep); transform: translateY(-2px); box-shadow: 0 18px 38px oklch(from var(--color-secondary) l c h / 42%); }
.btn-ghost { background: rgb(255 255 255 / 12%); color: #fff; border: 1.5px solid rgb(255 255 255 / 55%); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgb(255 255 255 / 22%); transform: translateY(-2px); }
.btn-outline { background: var(--color-surface); color: var(--color-secondary); border: 1.5px solid var(--color-border); }
.btn-outline:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-xs); }

/* ---- Hero CTA row ---- */
.btn-row { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---- Icon chip ---- */
/* --- Pills -------------------------------------------------------------------
   A wrapping row of label chips. Promoted out of case-conferencing.css 2026-08-26 when a
   second page needed them (CLAUDE.md: anything used on 2+ pages belongs here).
   .pill-row centres by default; .left aligns to a left-aligned section head. .pill.lg is the
   standalone band variant with a shadow; plain .pill is the dense in-list variant. */
.pill-row { display:flex; flex-wrap:wrap; gap:var(--space-2xs); justify-content:center; max-width:960px; margin:0 auto; }
.pill-row.left { justify-content:flex-start; margin-left:0; margin-right:0; }

.pill { display:inline-flex; align-items:center; font-size:var(--text-sm);
  font-weight:var(--weight-bold); color:var(--brand-600); background:var(--brand-50);
  border-radius:var(--radius-full); padding:var(--space-3xs) var(--space-xs); }
.pill.lg { background:var(--color-surface); box-shadow:var(--shadow-xs);
  padding:var(--space-2xs) var(--space-s); font-size:var(--text-md); }

.chip-ic { width: 38px; height: 38px; border-radius: var(--radius-lg); flex: none; display: flex; align-items: center; justify-content: center; background: var(--grad-chip); color: #fff; margin-bottom: var(--space-xs); }
.chip-ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.chip-ic-sm { width: var(--space-xl); height: var(--space-xl); }
.chip-ic-sm svg { width: 24px; height: 24px; }
/* A numeral in place of the icon, for a chip that enumerates rather than labels (the /gp/ "two
   ways to use case conferencing" pair). The chip already centres its child and sets the colour. */
.chip-ic .chip-num { font-size: var(--text-lg); font-weight: var(--weight-extrabold); line-height: 1; }
.chip-ic.pale { background: var(--brand-100); color: var(--color-secondary); }
.chip-ic.pale svg { stroke: var(--color-secondary); }

/* ---- Card ---- */
.card {
  background: var(--brand-25); border: none;
  border-radius: var(--radius-xl); padding: var(--space-l);
  box-shadow: var(--shadow-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.card h3 { margin: 0 0 var(--space-2xs); }
.card p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-md); line-height: var(--line-relaxed); }

/* ---- Callout ---- */
.callout { border-left: 5px solid var(--color-accent); background: var(--brand-50); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; padding: var(--space-xs) var(--space-m); color: var(--brand-600); font-size: var(--text-md); }
.callout strong { color: var(--color-secondary); }

/* Callout with icon */
.callout-icon { display: flex; align-items: flex-start; gap: var(--space-xs); }
.callout-icon svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; stroke: var(--color-accent); fill: none; stroke-width: 2; }
.callout-icon img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }

/* Semantic colour variants */
.callout-info { border-left-color: var(--info-mid); background: var(--info-light); }
.callout-info svg { stroke: var(--info-mid); }
.callout-success { border-left-color: var(--success-mid); background: var(--success-light); }
.callout-success svg { stroke: var(--success-mid); }
.callout-warning { border-left-color: var(--warning-mid); background: var(--warning-light); color: var(--warning-dark); }
.callout-warning svg { stroke: var(--warning-mid); fill: var(--warning-mid); }
.callout-warning strong { color: var(--warning-dark); }
.callout-danger { border-left-color: var(--danger-mid); background: var(--danger-light); }
.callout-danger svg { stroke: var(--danger-mid); }

/* ---- Float card (overlaid stat/info card on photos) ---- */
.float-card { position: absolute; display: flex; align-items: center; gap: var(--space-xs); background: #fff; border-radius: var(--radius-xl); padding: var(--space-xs) var(--space-s); box-shadow: var(--shadow-lg); max-width: 300px; }
.float-card-ic { width: 44px; height: 44px; flex: none; border-radius: var(--radius-lg); background: var(--grad-chip); color: #fff; display: flex; align-items: center; justify-content: center; }
.float-card-ic svg { width: 23px; height: 23px; stroke: #fff; fill: none; stroke-width: 2; }
.float-card strong { display: block; color: var(--color-secondary); font-size: var(--text-sm); line-height: var(--line-snug); }
.float-card > div span { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---- Banner badge (used in CTA bands, hero sections) ---- */
.banner { display: inline-flex; align-items: center; gap: var(--space-2xs); background: rgba(103,184,220,.18); border: 1px solid rgba(103,184,220,.45); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-full); margin-bottom: var(--space-m); }
.banner svg { width: 16px; height: 16px; stroke: var(--color-accent); fill: none; stroke-width: 2.2; }

/* ---- CTA band ---- */
/* overflow: clip, NOT hidden — `hidden` makes this a scroll container, and .reveal is
   scroll-driven (animation-timeline: view()), so every reveal inside froze part-way.
   `clip` crops the deco identically without creating a scrollport. */
.cta-band { background: var(--grad-hero); color: #fff; text-align: center; padding: var(--space-2xl) 0; position: relative; overflow: clip; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 20em; margin: 0 auto var(--space-xs); }
/* Lede sizing to match .section-head p — set here rather than via .lede, whose ink-soft colour
   is unreadable on the dark gradient. */
.cta-band p { color: rgba(255,255,255,.9); font-size: var(--text-lg); line-height: var(--line-relaxed); max-width: 36em; margin: 0 auto var(--space-l); }
.cta-band .btn-row { justify-content: center; }
/* ⚠️ `.cta-band p` above is 0-1-1 and beats any single-class rule, so EVERY <p> in this band —
   eyebrow, footnote, anything added later — silently inherits the lede's size and margin unless
   the selector also names .cta-band. This has now bitten twice: the footnote rendered at lede
   size, and the eyebrow rendered at 21px with a 32px gap against its own heading on all five
   pages that set ctaEyebrow. Scope new band styles to .cta-band, or they will not apply. */
.cta-band .eyebrow { font-size: var(--text-md); margin: 0 auto var(--space-xs); }
.cta-band .cta-footnote { font-size: var(--text-sm); color: rgba(255,255,255,.72);
  max-width: 44em; margin: var(--space-xl) auto 0; padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,.14); }
.cta-band .cta-footnote a { color: #fff; }

/* ---- Testimonial card ---- */
.tcard { background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-l); box-shadow: var(--shadow-xs); position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tcard .qmark { font-family: Georgia, serif; font-size: 5rem; color: var(--brand-100); line-height: .5; height: 42px; }
.tcard blockquote { margin: 0; font-size: var(--text-md); color: var(--color-ink); line-height: var(--line-relaxed); flex: 1; position: relative; z-index: 1; }
.tcard .who { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--color-border-soft); position: relative; z-index: 1; }
.tcard .avatar { width: 50px; height: 50px; border-radius: var(--radius-full); flex: none; background: var(--grad-chip); color: #fff; font-weight: var(--weight-extrabold); font-size: var(--text-md); display: flex; align-items: center; justify-content: center; letter-spacing: .02em; overflow: hidden; }
.tcard .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard .name { font-weight: var(--weight-extrabold); color: var(--color-secondary); font-size: var(--text-md); }
.tcard .role { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* The .tcard-hero photo-header variant was removed 2026-09-11: /gp/ was its only consumer
   and it now renders the shared .tq-card pair like every other page. */

/* ---- Comparison table ---- */
.compare { max-width: 920px; margin: 0 auto; border: none; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--brand-25); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.compare-row + .compare-row { border-top: 1px solid var(--color-border); }
.compare-row span { padding: var(--space-xs) var(--space-m); font-size: var(--text-md); line-height: var(--line-normal); display: flex; align-items: flex-start; gap: var(--space-2xs); }
.compare-row.head span { font-weight: var(--weight-extrabold); font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-soft); background: var(--brand-50); }
.compare-row.head span:last-child { color: var(--color-secondary); }
.compare-row span.bad { color: var(--color-ink-soft); }
.compare-row span.good { color: var(--color-ink); font-weight: var(--weight-semibold); background: rgba(46,139,87,.05); }

/* ---- PMS chips ---- */
.pms-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); max-width: 840px; margin: 0 auto; }
.pms { display: inline-flex; align-items: center; background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-xs) var(--space-m); font-weight: var(--weight-bold); color: var(--color-secondary); box-shadow: var(--shadow-xs); font-size: var(--text-md); }

/* ---- Photo frame ---- */
.photo-frame { padding: var(--space-xs); border-radius: var(--radius-xl); box-shadow: 0 16px 40px rgba(13,38,56,.14); overflow: hidden; }
.photo-frame.white { background: var(--color-surface); }
.photo-frame img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); object-fit: cover; }

/* ---- Support team ---- */
.support-team .people { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); max-width: 620px; margin: 0 auto; }
/* The four-doctor roster (landing page) is ONE ROW (owner, 2026-09-16) — the 2-col default is
   for the four-person mixed roster, which reads as a 2x2 block. Scoped to .people.four. */
.support-team .people.four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 940px; }
@media (max-width: 860px) { .support-team .people.four { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; } }
/* Five-up variant (the /gp/ all-GP roster). The 2-column default leaves a lone fifth card on its
   own row; five across keeps them as one group, and the wider cap stops the cards being squeezed. */
/* .three — the gp/doctor rosters since 2026-09-16 (two board members parked). .five kept for the
   day they come back. */
.support-team .people.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 700px) { .support-team .people.three { grid-template-columns: 1fr; max-width: 420px; } }
.support-team .people.five { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; }
@media (max-width: 1040px) { .support-team .people.five { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 700px)  { .support-team .people.five { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; } }
@media (max-width: 32rem) { .support-team .people { grid-template-columns: 1fr; } }
.sup-person { background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-m); text-align: center; box-shadow: var(--shadow-xs); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.sup-person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sup-person .avatar { width: var(--space-2xl); height: var(--space-2xl); border-radius: var(--radius-full); margin: 0 auto var(--space-xs); background: var(--grad-chip); color: #fff; font-weight: var(--weight-extrabold); font-size: var(--text-xl); display: flex; align-items: center; justify-content: center; letter-spacing: .02em; overflow: hidden; }
.sup-person .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-person h3 { font-size: var(--text-lg); color: var(--color-secondary); margin: 0 0 var(--space-3xs); }
.sup-person .role { font-size: var(--text-sm); color: var(--color-ink-soft); }
.sup-help { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); justify-content: center; margin-top: var(--space-l); }
.sup-help span { display: inline-flex; align-items: center; gap: var(--space-2xs); background: var(--brand-50); border-radius: var(--radius-full); padding: var(--space-2xs) var(--space-xs); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-secondary); }
.sup-help svg { width: 16px; height: 16px; color: var(--color-primary); stroke: currentColor; fill: none; stroke-width: 2.2; }
@media (max-width: 760px) { .support-team .people { grid-template-columns: 1fr; max-width: 420px; } }

/* ---- Check list (green tick marks — reusable) ---- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: var(--space-m); margin-bottom: var(--space-2xs); font-size: var(--text-md); color: var(--color-ink-soft); line-height: var(--line-normal); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-success), oklch(from var(--color-success) calc(l + 0.1) c h)); color: #fff; font-size: 10px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 1px; }

/* ---- Compliance card ---- */
.comp-split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.comp-left { background: var(--brand-25); padding: var(--space-xl); display: flex; flex-direction: column; justify-content: flex-start; }
.comp-left .eyebrow { color: var(--eyebrow-ink); font-size: var(--text-md); margin-bottom: var(--space-xs); }
.comp-left h2 { margin-bottom: var(--space-s); }
.comp-left p { color: var(--color-ink); font-size: var(--text-lg); }
.comp-right { background: var(--grad-deep); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-l); }
.comp-col { }
.comp-col-row { display: flex; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-2xs); }
.comp-col-ic { width: 38px; height: 38px; flex: none; border-radius: var(--radius-lg); background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; }
.comp-col-ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.comp-col h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); color: #fff; margin: 0 0 var(--space-2xs); }
/* Indent the list to start under the heading text, clearing the 38px icon + gap */
.comp-right .check-list { margin-left: calc(38px + var(--space-xs)); }
.comp-right .check-list li { color: rgba(255,255,255,.82); }
.comp-right .check-list li::before { background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); }
.comp-col + .comp-col { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-l); }
/* Two-column variant (`complianceNoMedicare`, /specialists/): with the Medicare column gone the dark
   panel's natural height drops to ~470px, but the LEFT column still ran to ~630px — copy plus a
   240px photo — so the panel stretched to match and ended in a long empty navy run. The owner asked
   for it shorter (2026-09-14). Drop the photo here and centre the copy: the band is then sized by
   the panel's own content. The three-column pages (/gp/, /practices/) keep the photo, where it fills
   a left column that genuinely has the height to spare. */
.comp-2col .comp-left img { display: none !important; }
.comp-2col .comp-left { justify-content: center; }
@media (max-width: 880px) { .comp-split { grid-template-columns: 1fr; } }

/* ---- Logos band ---- */
.logos-band { padding: var(--space-2xl) 0 var(--space-xl); background: var(--color-surface); }
.logos-lead { text-align: center; color: var(--color-ink-soft); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: .01em; margin: 0 0 var(--space-l); }
.logo-chip { flex: none; height: 62px; margin: 0 var(--space-xl); display: flex; align-items: center; justify-content: center; }
.logo-chip img { max-height: 42px; max-width: 185px; width: auto; height: auto; object-fit: contain; display: block; }

/* ---- Ruled list (2-col, top-bordered items) ---- */
.ruled-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-xl); }
.ruled-list li { padding: var(--space-xs) 0; border-top: 1px solid var(--color-border-soft); font-size: var(--text-md); line-height: var(--line-normal); color: var(--color-ink); }
.ruled-list li strong { color: var(--color-secondary); }
/* ---- External links ----
   Applied by attribute, so any link that opens in a new tab is marked without anyone having to
   remember a class. Two signals, because one is not enough: a softened underline (the site's
   own convention, previously only on .ahd-glass a) plus a corner arrow.
   The arrow is a masked SVG rather than a "↗" character — Onest has no glyph for it, so a text
   arrow falls back to a different face and sits off the baseline. Masking takes currentColor,
   so it follows the link in any context.
   ⚠️ Excluded where the marker would be noise rather than information: buttons already read as
   actions, and every row of the references modal is a link so marking them all says nothing. */
a[target="_blank"]:not(.btn):not(.refs-modal a):not([aria-label]) {
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 2px;
}
a[target="_blank"]:not(.btn):not([aria-label])::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .28em;
  vertical-align: baseline;
  background-color: currentColor;
  opacity: .65;
  -webkit-mask: var(--ext-icon) center / contain no-repeat;
  mask: var(--ext-icon) center / contain no-repeat;
}
.refs-modal a[target="_blank"]::after { display: none; }
a[target="_blank"]:hover::after { opacity: 1; }

/* ---- Citation markers ----
   Site-wide default for <sup><button data-ref="N">. Without it the browser paints a real
   button — grey box, border, padding — which is what appeared on the homepage once figures
   outside .ruled-list started carrying citations. currentColor rather than a brand token so
   the same marker stays legible on dark bands and on white. Container-scoped variants
   (.ruled-list, .ahd-ev-item, .evidence-list) still override this. */
sup:has(button[data-ref]) { line-height: 0; }
button[data-ref] { background: none; border: 0; padding: 0 0 0 1px; margin: 0; font: inherit; font-size: .78em; font-weight: var(--weight-bold); line-height: 0; color: currentColor; opacity: .65; cursor: pointer; }
button[data-ref]:hover, button[data-ref]:focus-visible { opacity: 1; text-decoration: underline; }

.ruled-list sup { margin-left: var(--space-3xs); }
.ruled-list sup a, .ruled-list sup button { color: var(--color-primary); font-weight: var(--weight-bold); font-size: .65em; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: .65em; font-weight: var(--weight-bold); vertical-align: super; line-height: 0; }
@media (max-width: 680px) { .ruled-list { grid-template-columns: 1fr; } }

/* ---- Modal (generic) ---- */
body:has(dialog[open]), body:has(dialog:modal) { overflow: hidden; }
/* ⚠️ max-width is not optional here. framework/base.css carries
   `:where(dialog) { max-width: min(90vw, 32rem) }` — 512px — and because :where() has zero
   specificity people assume any class beats it. It does, but only on the properties the class
   actually sets. This rule set `width` and never `max-width`, so every dialog on the site was
   silently clamped to 512px however wide it asked to be. Found 2026-08-18. */
.modal, .refs-modal { width: min(760px, 92vw); max-width: 92vw; max-height: 84vh; border: 0; border-radius: var(--radius-xl); padding: 0; box-shadow: var(--shadow-xl); color: var(--color-ink); background: var(--color-surface); overflow: hidden; }
.modal::backdrop, .refs-modal::backdrop { background: rgba(13,38,56,.45); backdrop-filter: blur(4px); }

.modal-head, .refs-modal .refs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.modal-head h3, .refs-modal .refs-head h3 { margin: 0; }

.modal-close, .refs-modal .refs-close { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-secondary); }
.modal-close:hover, .refs-modal .refs-close:hover { border-color: var(--color-accent); background: var(--brand-50); }
.modal-close svg, .refs-modal .refs-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

.modal-body, .refs-modal .refs-body { padding: var(--space-m); overflow-y: auto; max-height: calc(84vh - 76px); }
.modal-foot { padding: var(--space-s) var(--space-m); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); }

/* Sizes. Base is the medium, as with .btn — .modal-lg is for a dialog carrying a two-column
   layout rather than a column of text. Set on the <dialog> alongside .modal. */
.modal-lg { width: min(1040px, 94vw); max-width: 94vw; max-height: 88vh; }
.modal-lg .modal-body { max-height: calc(88vh - 76px); }

/* ---- References modal (extends generic) ---- */
.refs-modal ol { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--line-relaxed); padding-left: 2em; margin: 0; list-style: decimal; }
.refs-modal li { margin-bottom: var(--space-2xs); scroll-margin-top: var(--space-2xs); border-radius: var(--radius-md); padding: var(--space-3xs) var(--space-2xs); margin-left: calc(-1 * var(--space-2xs)); }
.refs-modal li em { color: var(--color-ink); }
.refs-modal a { color: var(--color-primary); word-break: break-word; }
.ref-cite { display: inline; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .62em; font-weight: var(--weight-bold); color: var(--color-primary); vertical-align: super; line-height: 0; }
.ref-cite:hover { text-decoration: underline; }
.ref-cite + .ref-cite { margin-left: 1px; }
.refs-trigger { display: inline-flex; align-items: center; gap: var(--space-2xs); margin: var(--space-m) auto 0; background: none; border: 0; cursor: pointer; font: inherit; font-weight: var(--weight-bold); font-size: var(--step--1); color: var(--color-primary); }
.refs-trigger svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.refs-trigger:hover { text-decoration: underline; }

/* ---- FAQ accordion ---- */
.faq { display: flex; flex-direction: column; gap: var(--space-2xs); max-width: 840px; margin: 0 auto; }
.faq details { background: var(--color-surface); border: none; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow .2s var(--ease); }
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-s) var(--space-m); font-weight: var(--weight-bold); font-size: var(--step-1); color: var(--color-secondary); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.faq .faq-a { padding: 0 var(--space-m) var(--space-s); }
.faq .faq-a p { margin: 0; line-height: var(--line-relaxed); color: var(--color-ink-soft); }
/* Multi-paragraph answers: every answer was a single <p> until the compliance ones landed,
   so the zero margin above collapsed them. p + p leaves single-paragraph answers untouched. */
.faq .faq-a p + p { margin-top: var(--space-s); }
.faq .faq-a p strong { color: var(--color-secondary); }

/* ---- Earnings calculator (shared) ----
   Promoted out of gp.css 2026-08-17: /gp/, /mental-health/ and the allied health redesign all
   render the same shell — slider, a 2-up figure pair, a disclaimer — driven by the one engine in
   calc-core.js. CLAUDE.md: anything on 2+ pages belongs here.
   .calc-sub / .calc-top / .calc-hrs / .calc-foot / .calc-tick came from the redesign's estimator.
   .calc-grid stays in gp.css — that is that page's two-column layout, not the calculator.
   NOT used by /practices/upside/: that panel is a single hero figure plus bars, a genuinely
   different presentation. Only its disclaimer shares .calc-note. */
.calc { background:#fff; border:none; border-radius:var(--radius-lg); padding:var(--space-l) var(--space-l) var(--space-m);
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
.calc h3 { color:var(--color-secondary); margin:0 0 var(--space-m); }
.calc-control { margin-bottom:var(--space-m); }
.calc-control label, .calc-lbl { display:block; font-weight:var(--weight-bold); color:var(--color-ink); font-size:var(--text-sm); margin-bottom:var(--space-xs); }
.calc-control label strong { color:var(--color-primary); }
.calc-scale { display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--color-ink-soft); margin-top:var(--space-2xs); }
.calc-toggle { display:inline-flex; background:var(--brand-50); border:none; border-radius:var(--radius-full); padding:var(--space-3xs); gap:var(--space-3xs); }
.calc-toggle button { appearance:none; border:0; background:none; font:inherit; font-weight:var(--weight-bold); font-size:var(--text-sm);
  color:var(--color-ink-soft); padding:var(--space-2xs) var(--space-m); border-radius:var(--radius-full); cursor:pointer; transition:color .2s, background .2s, box-shadow .2s; }
.calc-toggle button.on { background:#fff; color:var(--color-secondary); box-shadow:var(--shadow-xs); }
.calc-toggle button:hover:not(.on) { color:var(--color-secondary); }
.calc-out { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s); margin:var(--space-2xs) 0 var(--space-s); }
.calc-fig { background:var(--brand-50); border-radius:var(--radius-component-lg); padding:var(--space-m) var(--space-s); text-align:center; }
.calc-fig .v { font-size:var(--text-xl); font-weight:var(--weight-extrabold); color:var(--color-secondary); letter-spacing:-.01em; line-height:var(--line-none); }
.calc-fig .v::before { content:"$"; font-size:var(--text-lg); font-weight:var(--weight-bold); vertical-align:super; margin-right:1px; color:var(--color-primary); }
.calc-fig .k { font-size:var(--text-sm); color:var(--color-ink-soft); margin-top:var(--space-2xs); font-weight:var(--weight-semibold); }
.calc-fig.hero { background:var(--grad-deep); }
.calc-fig.hero .v { color:#fff; font-size:var(--text-xl); }
.calc-fig.hero .v::before { color:var(--color-accent); }
.calc-fig.hero .k { color:rgba(255,255,255,.85); }
.calc-note { font-size:var(--text-xs); color:var(--color-ink-soft); line-height:var(--line-normal); margin:auto 0 0; }
.calc-note-centred { text-align: center; }
.calc-sub { margin: calc(-1 * var(--space-2xs)) 0 var(--space-m); font-size: var(--text-sm); color: var(--color-ink-soft); }
.calc-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-2xs); }
.calc-top > span:first-child { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink); }
.calc-hrs { font-size: var(--text-xl); font-weight: var(--weight-extrabold); color: var(--color-secondary); line-height: 1; font-variant-numeric: tabular-nums; }
.calc-foot { display: flex; gap: var(--space-s); flex-wrap: wrap; margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--color-border-soft); }
.calc-tick { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink); }
.calc-tick svg { width: 16px; height: 16px; fill: none; color: var(--color-success); stroke-width: 2.4; }

/* ---- Split layout ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.split h2 { }
.split p { color: var(--color-ink-soft); margin: var(--space-xs) 0 0; line-height: var(--line-relaxed); }
.split .callout { margin-top: var(--space-m); }

/* ---- Stat strip ---- */
.stat-strip { position: relative; z-index: 3; margin-top: -42px; }
.stat-strip .inner { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--space-2xs) 0; }
.stat-strip .stat { padding: var(--space-s) var(--space-m); text-align: center; border-right: 1px solid var(--color-border-soft); }
.stat-strip .stat:last-child { border-right: 0; }
.stat-strip .num { font-size: var(--step-4); font-weight: var(--weight-extrabold); color: var(--color-secondary); line-height: var(--line-none); }
.stat-strip .num span { color: var(--color-primary); }
.stat-strip .lbl { font-size: var(--step--2); color: var(--color-ink-soft); margin-top: var(--space-2xs); }

/* ---- Evidence list ----
   Two-column ruled list of research findings, each carrying a .ref-cite superscript wired to
   the references modal by site.js.
   ⚠️ PROMOTED FROM specialists.css 2026-09-13 when /allied-health/ adopted the same block.
   Both pages render it and only one loaded that stylesheet, so it lives here now. */
.evidence-list { list-style:none; padding:0; margin:var(--space-m) auto 0; max-width:880px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-xl); }
.evidence-list li { font-size:var(--text-md); line-height:var(--line-normal); color:var(--color-ink); padding:var(--space-xs) var(--space-3xs); border-top:1px solid var(--color-border); }
.evidence-list sup { color:var(--color-primary); font-weight:var(--weight-bold); font-size:.62em; margin-left:var(--space-3xs); }
@media (max-width:680px) { .evidence-list { grid-template-columns:1fr; } }

/* ---- Video frame ---- */
.video-frame { max-width: 920px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--color-surface-dark); position: relative; aspect-ratio: 16/9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Icon grid ---- */
.icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs) var(--space-l); max-width: 900px; margin: 0 auto; }
.icon-grid .cell { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-xs) var(--space-s); box-shadow: var(--shadow-xs); }
.icon-grid .cell .ic { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--brand-100); display: flex; align-items: center; justify-content: center; }
.icon-grid .cell .ic svg { width: 23px; height: 23px; stroke: var(--color-secondary); fill: none; stroke-width: 2; }
.icon-grid .cell p { margin: 0; color: var(--color-ink); }
.icon-grid .cell strong { color: var(--color-secondary); }

/* ---- Stat callout ---- */
.stat-callout { margin: var(--space-xl) auto 0; max-width: 880px; position: relative; z-index: 2; background: var(--grad-deep); color: #fff; border-radius: var(--radius-xl); padding: var(--space-m) var(--space-xl); display: flex; align-items: center; gap: var(--space-l); box-shadow: 0 20px 50px rgba(13,38,56,.3); }
.stat-callout .big { font-size: var(--step-5); font-weight: var(--weight-extrabold); color: var(--color-accent); line-height: var(--line-none); flex: none; }
.stat-callout p { margin: 0; color: rgba(255,255,255,.92); }
.stat-callout p strong { color: #fff; }
.circle-portrait { position: relative; flex: none; width: var(--circle-size, 100px); height: calc(var(--circle-size, 100px) + var(--circle-overflow, 20px)); z-index: 1; overflow: visible; }
.circle-portrait::before { content: ''; position: absolute; bottom: 0; left: 0; width: var(--circle-size, 100px); height: var(--circle-size, 100px); border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-100), var(--brand-50)); }
.stat-callout .circle-portrait::before { background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); }
.circle-portrait img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(var(--circle-size, 100px) * 1.3); height: auto; max-width: none; z-index: 1; }

/* ---- Money grid ---- */
.money-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: center; }
.money-grid h2 { }
.money-grid > div > p { color: var(--color-ink-soft); margin: var(--space-xs) 0 0; line-height: var(--line-relaxed); }
.money-figs { display: flex; gap: var(--space-s); flex-wrap: wrap; margin: var(--space-m) 0; }
/* Promoted out of specialists.css 2026-09-11, when /gp/ took the "Get rebated" and "Our
   platform" blocks. */
.platform-img { width:100%; height:auto; border-radius:var(--radius-lg); filter:drop-shadow(0 26px 50px rgba(13,38,56,.42)); }
.feat-pills { display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-top:var(--space-2xs); }
.feat-pill { display:inline-flex; align-items:center; gap:var(--space-2xs); background:var(--brand-50); color:var(--color-secondary);
  font-weight:var(--weight-semibold); font-size:var(--text-sm); padding:var(--space-2xs) var(--space-xs); border-radius:var(--radius-full); border:1px solid var(--color-border); white-space:nowrap; }
.feat-pill .dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--color-primary); flex:0 0 auto; }
.feat-pill.solid { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.feat-pill.solid .dot { background:#fff; }
.money-grid h2 { line-height:var(--line-tight); }
.money-grid h2 .hl { color:var(--color-primary); }
.money-lede { font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--color-ink-soft); margin:var(--space-2xs) 0 0; }
.money-lede strong { font-weight:var(--weight-extrabold); color:var(--color-secondary); }
.fig-card .tier { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-ink-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--space-3xs); }
.fig-card { background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-xs); flex: 1; min-width: 150px; }
/* --step-5 overflowed these cards once the values carried cents ($143.65 is 7 characters in a
   half-width column split into two). One step down fits with room to spare. */
.fig-card .v { font-size: var(--step-4); font-weight: var(--weight-extrabold); color: var(--color-secondary); line-height: var(--line-none); }
.fig-card .v small { font-size: var(--step-0); color: var(--color-primary); font-weight: var(--weight-bold); margin-left: .14em; }
.fig-card .k { font-size: var(--step--1); color: var(--color-ink-soft); margin-top: var(--space-2xs); }

/* ---- Bar chart ---- */
.barchart { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-l); }
.barchart h3 { line-height: var(--line-snug); margin: 0 0 var(--space-s); }
.barchart .row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 1.6fr; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-xs); }
.barchart .label { font-size: var(--step--1); font-weight: var(--weight-semibold); color: var(--color-ink); text-align: right; }
.barchart .label strong { color: var(--color-secondary); }
.barchart .track { background: var(--brand-50); border-radius: var(--radius-md); height: 26px; overflow: hidden; position: relative; }
.barchart .fill { height: 100%; width: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: flex-end; padding-right: var(--space-2xs); color: #fff; font-weight: var(--weight-bold); font-size: var(--text-sm); white-space: nowrap; background: linear-gradient(135deg, var(--color-accent), var(--brand-300)); transition: width 1.1s var(--ease); }
.barchart .row.hi .fill { background: var(--grad-deep); }
.barchart .row.hi .label { color: var(--color-secondary); font-weight: var(--weight-extrabold); }
.barchart .cap { font-size: var(--step--2); color: var(--color-ink-soft); margin: var(--space-2xs) 0 0; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
.step { position: relative; }
.step .shot { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: none; aspect-ratio: 4/3; background: var(--brand-50); margin-bottom: var(--space-xs); }
.step .shot img { width: 100%; height: 100%; object-fit: cover; }
.step .n { position: absolute; top: -14px; left: -10px; z-index: 2; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--grad-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-extrabold); font-size: var(--step-1); box-shadow: var(--shadow-md); }
.step h3 { margin: 0 0 var(--space-2xs); }
.step p { margin: 0; font-size: var(--step--1); color: var(--color-ink-soft); line-height: var(--line-normal); }

/* ---- Facts grid ---- */
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin-top: var(--space-xl); }
.fact { background: var(--color-surface); border: none; border-left: 4px solid var(--color-accent); border-radius: var(--radius-xl); padding: var(--space-s); box-shadow: var(--shadow-xs); }
.fact h4 { margin: 0 0 var(--space-3xs); color: var(--color-secondary); }
.fact p { margin: 0; font-size: var(--step--1); color: var(--color-ink-soft); line-height: var(--line-normal); }

/* ---- Eligibility pills ---- */
.elig { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; max-width: 880px; margin: 0 auto; }
.elig .pill { display: inline-flex; align-items: center; gap: var(--space-2xs); background: var(--color-surface); border: 1px solid #e0e9f1; border-radius: var(--radius-full); padding: var(--space-2xs) var(--space-s); font-weight: var(--weight-semibold); color: var(--color-secondary); box-shadow: var(--shadow-xs); transition: transform .15s var(--ease), border-color .15s; }
.elig .pill:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.elig .pill .dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-accent); }
.elig-more { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-s); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---- Type card ---- */
.type-card { background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-m); box-shadow: var(--shadow-xs); transition: transform .18s var(--ease), box-shadow .18s; }
.type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.type-card .ic { width: 38px; height: 38px; border-radius: var(--radius-lg); background: var(--grad-chip); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-xs); }
.type-card .ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.type-card h3 { margin: 0 0 var(--space-2xs); }
.type-card p { margin: 0; font-size: var(--text-md); color: var(--color-ink-soft); line-height: var(--line-normal); }
.type-card.feature { display: flex; flex-direction: column; justify-content: center; background: var(--grad-deep); border: 0; }
.type-card.feature h3 { color: #fff; }
.type-card.feature p { color: rgba(255,255,255,.9); margin-top: var(--space-2xs); }

/* ---- Quotes ---- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
.quote { background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-l); box-shadow: var(--shadow-xs); position: relative; }
.quote::before { content: "\201C"; font-family: Georgia, serif; font-size: 4rem; color: var(--brand-100); position: absolute; top: 6px; left: var(--space-xs); line-height: var(--line-none); }
.quote p { margin: var(--space-xs) 0 0; color: var(--color-ink); font-style: italic; position: relative; line-height: var(--line-relaxed); }
.quote .src { display: block; margin-top: var(--space-xs); font-style: normal; font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--color-primary); }
.quote .src a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--brand-300); }
.quote .src a:hover, .quote .src a:focus-visible { text-decoration-color: currentColor; }
/* Attribution: issuing body, then the linked document beneath it. Set as text, NOT the
   organisation's logo — none of these bodies has endorsed Conference.care, and the Health
   Department mark carries the Commonwealth Coat of Arms, whose use is restricted. Citation,
   not affiliation. */
.quote-org { font-style: normal; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--line-snug); color: var(--color-ink); margin: var(--space-s) 0 0; }
.quote-org + .src { margin-top: var(--space-3xs); }

/* ---- GP-free band ---- */
.gp-free { background: var(--grad-hero); color: #fff; position: relative; overflow: hidden; }
.gp-free-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.gp-free-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-xl); padding: var(--space-m); text-align: center; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; }
.gp-free-card h3 { color: #fff; font-size: var(--text-lg); }
.gp-free-card p { color: rgba(255,255,255,.85); }
/* Portrait layout for the band (partials/free-band.njk; moved from gp.css 2026-09-13). */
.gp-free h2 { color:#fff; }
.gp-free p { color:rgba(255,255,255,.85); }
.gp-free .section-head p { font-size:var(--text-lg); }
.gp-free-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; position:relative; z-index:1; }
.gp-free-portrait { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:460px; }
.gp-free-circle { width:400px; height:400px; position:relative; }
.gp-free-circle::before { content:''; position:absolute; inset:0; border-radius:var(--radius-full); background:linear-gradient(135deg, rgba(103,184,220,.1), rgba(103,184,220,.05)); }
.gp-free-circle img { position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:520px; width:auto; z-index:1; filter:drop-shadow(0 12px 30px rgba(0,0,0,.25)); clip-path:inset(0 0 0 0 round 0 0 200px 200px); }
.gp-free-card .chip-ic { background:rgba(255,255,255,.16); }

.gp-free-circle img.is-headshot { position:static; transform:none; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:var(--radius-full); clip-path:none; }
@media (max-width:980px) {
  .gp-free-layout { grid-template-columns:1fr; }
  .gp-free-portrait { max-width:320px; margin:0 auto; min-height:360px; }
}

/* ---- Legal pages ---- */
.legal-hero { background: var(--brand-50); padding: 160px 0 var(--space-2xl); text-align: center; }
.legal-hero h1 { color: var(--color-secondary); font-weight: var(--weight-extrabold); margin-bottom: var(--space-xs); }
.legal-page { max-width: 780px; margin: 0 auto; padding: var(--space-2xl) var(--space-m); }
.legal-page h2 { color: var(--color-secondary); font-weight: var(--weight-bold); margin: var(--space-xl) 0 var(--space-xs); }
.legal-page p, .legal-page li { color: var(--color-ink-soft); line-height: var(--line-relaxed); }
.legal-page ul, .legal-page ol { padding-left: var(--space-m); margin-bottom: var(--space-xs); }
.legal-page a { color: var(--color-primary); }

/* ---- Route cards ---- */
.routes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); }
.route-card { display: flex; flex-direction: column; background: var(--brand-25); border: none; border-radius: var(--radius-xl); padding: var(--space-m) var(--space-s) var(--space-s); box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; overflow: hidden; }
.route-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-line); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
.route-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.route-card:hover::after { transform: scaleX(1); }
.route-card h3 { margin: 0 0 var(--space-2xs); }
.route-card p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0 0 var(--space-xs); flex: 1; }
.route-link { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-bold); font-size: var(--step--1); color: var(--color-primary); margin-top: auto; }
.route-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.route-card:hover .route-link svg { transform: translateX(4px); }

/* ---- App-screenshot placeholder ---- */
.app-ph { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; border-radius: var(--radius-xl); border: 2px dashed var(--color-accent); background: var(--brand-50); background-image: repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(103,184,220,.07) 13px, rgba(103,184,220,.07) 26px); color: var(--color-ink-soft); padding: var(--space-m); overflow: hidden; }

/* ---- Responsive overrides ---- */
@media (max-width: 980px) {
  .split, .money-grid { grid-template-columns: 1fr; gap: var(--space-l); }
  .cols-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  section.block { padding: var(--space-2xl) 0; }
  .stat-strip .inner { grid-template-columns: 1fr 1fr; }
  .cols-2, .cols-3, .cols-4, .steps, .icon-grid, .facts-grid { grid-template-columns: 1fr; }
  .stat-callout { flex-direction: column; text-align: center; gap: var(--space-xs); }
  .gp-free-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) { .routes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .routes-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .compare-row span { padding: var(--space-2xs) var(--space-xs); font-size: var(--step--1); } }

/* ---- Nav ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--space-s) 0; transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease); }
/* navSolid: a permanently-filled white bar, rather than the default transparent nav that
   only fills on scroll. Pair with navLight, which supplies the dark logo/link/toggle
   treatment — this rule adds only the background. */
.nav.solid { background: rgb(255 255 255 / 92%); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-soft); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.nav .logo { height: 36px; width: auto; }
.nav .logo.colour { display: none; }
.nav-links { display: flex; align-items: center; gap: var(--space-l); }
.nav-links a.link { color: rgba(255,255,255,.9); font-weight: var(--weight-semibold); font-size: var(--step--1); transition: color .2s; }
.nav-links a.link:hover { color: #fff; }
/* The two nav CTAs sit closer to each other than to the menu items beside them. */
.nav-links .btn-sm { white-space: nowrap; }
.nav-links .nav-login + .btn { margin-left: calc(-1 * var(--space-l) + var(--space-2xs)); }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--radius-md); border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.nav-toggle svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }

/* ---- Mega menu ---- */
.mega-trigger { position: relative; }
.mega-btn { display: inline-flex; align-items: center; gap: var(--space-3xs); background: none; border: 0; cursor: pointer; font: inherit; padding: 0; color: rgba(255,255,255,.9); font-weight: var(--weight-semibold); }
.mega-caret { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s var(--ease); }
.mega-trigger:hover .mega-caret,
.mega-trigger.is-open .mega-caret { transform: rotate(180deg); }

/* Right-anchored, not centred on the trigger. The nav wrap is capped at --grid-max-width, so a
   trigger always sits ~180px from the right edge whatever the viewport, while half an 860px
   panel is 430px — centred, it overflows the right edge at EVERY width, not just narrow ones.
   Opening leftward is correct for all four triggers because they all sit on the right. */
.mega-panel { position: absolute; top: 100%; right: 0; padding-top: var(--space-s); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility .25s; z-index: 200;
  /* Right-anchoring fixes the right edge but creates the mirror problem: between the 860px
     nav breakpoint and ~1000px, a panel anchored to a trigger near the right edge runs off
     the LEFT one. site.js measures each panel and sets --mega-shift to push it back. */
  transform: translateX(var(--mega-shift, 0px)); }
.mega-trigger:hover .mega-panel,
.mega-trigger.is-open .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; }

.mega-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-l); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(13,38,56,.18), 0 0 0 1px rgba(13,38,56,.06); padding: var(--space-l); min-width: min(860px, calc(100vw - var(--space-xl))); max-width: calc(100vw - var(--space-xl)); }
/* Pointer back to the trigger. A rotated square rather than a border triangle so it can carry
   the panel's own hairline on its two exposed edges. .mega-panel is centred on the trigger, so
   left:50% lands on the label; it sits inside the panel's padding-top, which keeps the hover
   bridge between button and panel intact. */
.mega-inner::before { content: ""; position: absolute; right: clamp(1rem, var(--mega-arrow, 2.6rem), calc(100% - 2rem)); top: 1px; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg); background: var(--color-surface); border-radius: 3px 0 0 0; box-shadow: -1px -1px 0 0 rgba(13,38,56,.06); }
.mega-inner-sm { grid-template-columns: 1.2fr 0.8fr; min-width: min(480px, calc(100vw - var(--space-xl))); }
/* Two-column panel — a single list of links plus a feature rail. Wider than -sm because the
   Clinicians/Practices descriptions run to a full line where the Patients menu's don't. */
.mega-inner-md { grid-template-columns: 1.4fr 0.9fr; min-width: min(680px, calc(100vw - var(--space-xl))); }
/* Two even columns, wider — for a panel whose second column carries links rather than a graphic. */
.mega-inner-wide { grid-template-columns: 1fr 1fr; min-width: min(800px, calc(100vw - var(--space-xl))); }
/* The Clinicians menu (owner, 2026-09-14): three links beside a .mega-feature-shot capped at 190px,
   so an even split wastes width on the image side. 700px with a larger share to the links leaves
   that column ~367px — wider than the 352px it had at 800px — so no link description reflows to an
   extra line while the panel loses 100px. Learn stays on .mega-inner-wide: its two five-item columns
   need the room. Must stay above the 860px media block, which resets every panel to a flex column. */
.mega-inner-clin { grid-template-columns: 1.45fr 1fr; min-width: min(700px, calc(100vw - var(--space-xl))); }

.mega-heading { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-soft); margin: 0 0 var(--space-xs); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-border-soft); }

.mega-item { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-lg); transition: background .15s var(--ease); text-decoration: none; }
.mega-item:hover { background: var(--brand-25); text-decoration: none; }
.mega-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--brand-50); display: flex; align-items: center; justify-content: center; }
.mega-ic svg { width: 18px; height: 18px; stroke: var(--color-primary); fill: none; stroke-width: 2; }
.mega-item strong { display: block; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-secondary); }
.mega-item div span { display: block; font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--line-snug); margin-top: var(--space-3xs); }

.mega-feature { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--brand-50); border-radius: var(--radius-lg); padding: var(--space-m); }
.mega-feature > img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); margin-bottom: var(--space-xs); }
/* A product shot sized to its link column rather than to the panel width. The Clinicians menu lost
   its fourth item ("For Mental Health") on 2026-09-14, leaving three links (~194px) beside a
   full-width 321px shot — the image drove the panel height and left dead space under the links.
   Capped, the column comes back to ~226px. The caption is capped a little wider than the image so
   it still reads as a caption and not a second column. */
.mega-feature-shot { padding: var(--space-s); }
.mega-feature-shot > img { max-width: 190px; }
.mega-feature-shot p { max-width: 230px; }
.mega-feature p { font-size: var(--text-xs); color: var(--color-ink-soft); text-align: center; margin: 0; }
/* Feature rail carrying a call to action instead of a screenshot. Hidden below 860px like every
   .mega-feature, so whatever it links to must also exist as a .mega-item in the same panel. */
.mega-feature-cta { gap: var(--space-2xs); text-align: center; }
.mega-feature-cta .chip-ic { margin: 0 0 var(--space-2xs); }
.mega-feature-cta strong { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-secondary); }
.mega-feature-cta .btn { margin-top: var(--space-2xs); }

/* Blue rail that carries navigation instead of a graphic. Because these are real links it stays
   visible on mobile — see the override in the max-width:860px block. */
.mega-feature-links { align-items: stretch; justify-content: flex-start; gap: var(--space-3xs); padding: var(--space-s); }
.mega-feature-links .mega-item { padding: var(--space-2xs); }
.mega-feature-links .mega-item:hover { background: var(--color-surface); }
.mega-feature-links .mega-ic { width: 32px; height: 32px; background: var(--color-surface); }
/* .mega-feature centres its <p>, which would centre a .mega-heading here and leave the blue box's
   heading out of step with the plain column beside it. */
.mega-feature-links .mega-heading { text-align: left; width: 100%; }

.mega-trust { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); background: var(--brand-50); border-radius: var(--radius-lg); }
.mega-trust span { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-secondary); }
.mega-trust svg { width: 18px; height: 18px; stroke: var(--color-primary); fill: none; stroke-width: 2; }

/* Scrolled state — dark text on white bg */
.nav.scrolled .mega-btn { color: var(--color-ink); }
.nav.on-light .mega-btn { color: var(--color-ink); }

/* ---- Footer ---- */
.site-foot { background: var(--color-surface-dark); color: rgba(255,255,255,.78); padding: var(--space-2xl) 0 var(--space-l); font-size: var(--text-md); }
/* Logo/blurb column plus FOUR link columns (Platform / Learn / Company / Get started, 2026-09-16). */
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-l); align-items: start; }
.foot-grid .logo { height: 38px; margin-bottom: var(--space-xs); }
.foot-grid p { margin: 0 0 var(--space-2xs); max-width: 30em; line-height: var(--line-relaxed); }
.foot-col h4 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--space-xs); }
.foot-col a { display: block; color: rgba(255,255,255,.78); margin-bottom: var(--space-3xs); transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--space-xl); padding-top: var(--space-s); display: flex; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); color: rgba(255,255,255,.6); }
.foot-bottom a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom a:hover { color: #fff; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; right: var(--space-m); left: var(--space-m); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-s); gap: var(--space-2xs); align-items: stretch; }
  .nav-links.open a.link, .nav-links.open .mega-btn { color: var(--color-ink); }
  .nav-toggle { display: inline-flex; }
  .mega-panel { position: static; transform: none; padding-top: 0; opacity: 1; visibility: visible; pointer-events: auto; display: none; }
  .mega-trigger.is-open .mega-panel { display: block; }
  .mega-inner, .mega-inner-sm, .mega-inner-md { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding: var(--space-xs); box-shadow: none; background: var(--brand-25); border-radius: var(--radius-lg); margin-top: var(--space-2xs); }
  .mega-inner::before { display: none; }  /* panels are static blocks under the button here */
  .mega-feature { display: none; }
  .mega-feature-links { display: flex; }  /* carries nav links, so it must survive here */
  .mega-quote { display: none; }
  .mega-trust { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Radial scene (persona showcase, feature radial) ---- */
.radial-scene { position: relative; width: 100%; aspect-ratio: 4/3; max-width: 900px; margin: 0 auto; }
.radial-ring { position: absolute; border-radius: var(--radius-full); border: 1.5px solid var(--brand-200); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.radial-ring-1 { width: 320px; height: 320px; opacity: .5; }
.radial-ring-2 { width: 520px; height: 520px; opacity: .25; border-style: dashed; }
.radial-mark { position: absolute; width: 120px; bottom: 8%; right: 12%; color: var(--brand-200); opacity: .3; }
.radial-center { --rc-size: 320px; --rc-r: calc(var(--rc-size) / 2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); z-index: 1; width: var(--rc-size); height: var(--rc-size); }
.radial-center::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.radial-center img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-height: 420px; width: auto; z-index: 1; filter: drop-shadow(0 8px 20px rgba(0,0,0,.12)); -webkit-mask-image: radial-gradient(circle var(--rc-r) at 50% calc(100% - var(--rc-r)), #000 99.9%, transparent 100%), linear-gradient(#000, #000); -webkit-mask-size: 100% 100%, 100% calc(100% - var(--rc-r) * 1.5); -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-over; mask-image: radial-gradient(circle var(--rc-r) at 50% calc(100% - var(--rc-r)), #000 99.9%, transparent 100%), linear-gradient(#000, #000); mask-size: 100% 100%, 100% calc(100% - var(--rc-r) * 1.5); mask-repeat: no-repeat; mask-composite: add; }
.radial-card { position: absolute; top: 50%; left: 50%; --_x: calc(cos(var(--angle)) * var(--dist, 300px)); --_y: calc(sin(var(--angle)) * var(--dist, 300px)); transform: translate(-50%, -50%) translate(var(--_x), var(--_y)); z-index: 2; display: flex; align-items: center; gap: var(--space-xs); background: var(--color-surface); border: none; border-radius: var(--radius-xl); padding: var(--space-xs) var(--space-s); box-shadow: var(--shadow-md); cursor: default; max-width: 200px; text-align: left; font: inherit; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease), filter .3s var(--ease); }
.radial-card:hover { transform: translate(-50%, -50%) translate(var(--_x), var(--_y)) scale(1.06); box-shadow: var(--shadow-lg); }
.radial-card-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-lg); background: var(--grad-chip); color: #fff; display: flex; align-items: center; justify-content: center; }
.radial-card-ic svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.radial-card-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-secondary); white-space: nowrap; }
.radial-card-body { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--line-relaxed); white-space: normal; display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; margin-top: 0; }
.radial-card-body > span { overflow: hidden; }
.radial-scene.has-open .radial-card:not(.is-open) { opacity: .35; filter: blur(1px); }
@media (max-width: 880px) { .radial-scene { aspect-ratio: 1; } }

/* ---- Segmented toggle ---- */
.seg { display: inline-flex; background: var(--brand-50); border-radius: var(--radius-lg); padding: 3px; }
.seg button { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); border: 0; background: transparent; color: var(--color-ink-soft); padding: var(--space-2xs) var(--space-m); border-radius: var(--radius-md); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.seg button[aria-pressed="true"], .seg button.on { background: var(--color-surface); color: var(--color-secondary); box-shadow: var(--shadow-xs); }
.seg button:hover:not([aria-pressed="true"]):not(.on) { color: var(--color-secondary); }

/* Orbit wrapper for spinning the entire card group */
.persona-orbit { position: absolute; inset: 0; z-index: 2; }
.persona-cards { position: absolute; inset: 0; }

/* Persona orbit arms */
.persona-arm { z-index: 2; }
.persona-card-slot .radial-card { position: relative; top: auto; left: auto; transform: none; cursor: pointer; }

/* Radial card expanded state */
.radial-card:hover { z-index: 5; }
.radial-card.is-open {
  flex-direction: column;
  align-items: flex-start;
  width: 280px;
  max-width: 280px;
  padding: var(--space-m);
  z-index: 10;
  box-shadow: var(--shadow-xl);
}
.radial-card.is-open .radial-card-label {
  white-space: normal;
  font-size: var(--text-md);
}
.radial-card.is-open .radial-card-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
  transition: grid-template-rows .35s var(--ease), opacity .3s var(--ease) .1s;
}
.radial-card.is-open .radial-card-ic {
  width: 40px; height: 40px;
  margin-bottom: var(--space-2xs);
}
.radial-card.is-open .radial-card-ic svg {
  width: 20px; height: 20px;
}
.radial-card .radial-card-body {
  transition: grid-template-rows .35s var(--ease), opacity .15s var(--ease), margin .3s var(--ease);
}

/* ---- Testimonial quote pair (.tq-*) ----
   Two offset cards, one dark one light. Moved from specialists.css 2026-08-18 when
   /case-conferencing/ adopted it — anything on 2+ pages belongs here.
   ⚠️ Designed for exactly TWO quotes: .tq-grid is a flex row and the cards carry opposing
   translateY offsets, so a third breaks the composition. The responsive collapse still
   lives in specialists.css; it sits inside a shared @media with unrelated rules. */
.tq-grid { display:flex; gap:var(--space-l); align-items:flex-start; max-width:1100px; margin:0 auto; }
.tq-card { flex:1 1 0; position:relative; overflow:hidden; border-radius:30px; padding:var(--space-xl) var(--space-xl) var(--space-l); display:flex; flex-direction:column;
  box-shadow:0 34px 64px -34px rgba(20,45,70,.5); }
.tq-card.dark { background:linear-gradient(158deg,#2a5d88,#173a58); color:#fff; transform:translateY(-18px); }
.tq-card.light { background:var(--brand-25); border:none; transform:translateY(26px); }
.tq-wm { position:absolute; top:-44px; right:14px; z-index:0; font-family:Georgia,serif; font-weight:var(--weight-semibold); font-size:280px; line-height:var(--line-none); pointer-events:none; }
.tq-card.dark .tq-wm { color:rgba(255,255,255,.09); }
.tq-card.light .tq-wm { color:rgba(67,143,185,.12); }
.tq-body { position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.tq-text { font-size:var(--text-lg); line-height:var(--line-relaxed); font-weight:var(--weight-medium); letter-spacing:-.005em; }
.tq-card.dark .tq-text { color:var(--brand-100); }
.tq-card.light .tq-text { color:var(--color-ink); }
.tq-text .hl { font-weight:var(--weight-semibold); border-radius:var(--radius-xs); padding:0 var(--space-3xs); }
.tq-card.dark .tq-text .hl { color:#fff; background:linear-gradient(transparent 62%, rgba(103,184,220,.5) 62%); }
.tq-card.light .tq-text .hl { color:var(--color-secondary); background:linear-gradient(transparent 62%, rgba(103,184,220,.32) 62%); }
.tq-author { display:flex; align-items:center; gap:var(--space-s); margin-top:var(--space-l); padding-top:var(--space-m); }
.tq-card.dark .tq-author { border-top:1px solid rgba(255,255,255,.16); }
.tq-card.light .tq-author { border-top:1px solid var(--color-border-soft); }
.tq-ring { padding:var(--space-3xs); border-radius:var(--radius-full); flex:0 0 auto; background:linear-gradient(150deg,var(--color-accent),var(--color-primary)); }
.tq-avatar { width:56px; height:56px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-weight:var(--weight-bold); font-size:18px; overflow:hidden; }
.tq-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.tq-card.dark .tq-avatar { background:#173a58; color:#fff; }
.tq-card.light .tq-avatar { background:linear-gradient(150deg,var(--brand-50),var(--brand-100)); color:var(--color-primary); }
.tq-meta { display:flex; flex-direction:column; min-width:0; }
.tq-name { display:flex; align-items:center; gap:var(--space-2xs); font-size:var(--text-lg); font-weight:var(--weight-semibold); }
.tq-card.dark .tq-name { color:#fff; }
.tq-card.light .tq-name { color:var(--color-secondary); }
.tq-vrf { width:18px; height:18px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--color-primary); }
.tq-vrf svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3.4; }
.tq-role { font-size:var(--text-sm); margin-top:var(--space-3xs); }
.tq-card.dark .tq-role { color:rgba(255,255,255,.62); }
.tq-card.light .tq-role { color:var(--color-ink-soft); }
@media (max-width: 900px) {
  .tq-grid { flex-direction:column; }
  .tq-card { transform:none !important; }   /* the offsets only read as a pair side by side */
  .tq-text { font-size:var(--text-md); }
}

/* Figure disclaimer. Sits under any block carrying a rebate, an hourly figure or a modelled mix
   — project hard rule 3 requires one wherever those render. Shared by /case-conferencing/ and
   /mental-health/; promoted out of case-conferencing.css 2026-08-21 when the second page needed it. */
.cc-disclaimer { max-width: 820px; margin: var(--space-l) auto 0; text-align: center; font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--line-normal); }

/* Footnote marker pointing at the disclaimer above. Was .ahd-fn in allied-health.css; renamed on
   promotion because a page prefix on a shared class is a trap for whoever needs it third. */
.fn-mark { color: var(--color-primary); font-weight: var(--weight-semibold); text-decoration: none; }

/* Prose + callout column under a section head — a definition, then what it is for. */
.mh-solution { max-width: 800px; margin: 0 auto; }
.mh-solution p { font-size: var(--text-lg); line-height: var(--line-relaxed); color: var(--color-ink-soft); }

/* ---- Cycle-of-care before/after map (partials/cycle-of-care.njk) ----
   Lives here rather than in a page stylesheet because the partial is built for reuse across the
   site and the pitch deck. All colour comes from semantic tokens; the SVG carries no fills of its
   own, so it follows the theme. Font sizes are in user units and scale with the viewBox. */
.cyc-pair { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-l);
  max-width:920px; margin:0 auto; align-items:start; }
.cyc-fig { margin:0; }
.cyc { width:100%; height:auto; display:block; }
.cyc-fig figcaption { margin-top:var(--space-xs); text-align:center;
  font-size:var(--text-sm); color:var(--color-ink-soft); }
.cyc-fig figcaption strong { color:var(--color-secondary); }

.cyc-spokes line { stroke:var(--color-border); stroke-width:2; }
.cyc-ring { fill:none; stroke:var(--color-accent); stroke-width:3; }
.cyc-hub { fill:var(--brand-50); stroke:var(--color-primary); stroke-width:2; }
.cyc-hub-label { fill:var(--color-secondary); font-size:16px; font-weight:var(--weight-semibold);
  text-anchor:middle; }
.cyc-nodes rect { fill:var(--color-surface); stroke:var(--color-border); stroke-width:1.5; }
.cyc-nodes text { fill:var(--color-ink-soft); font-size:15px; text-anchor:middle; }

.cyc-notes { max-width:720px; margin:var(--space-l) auto 0; }
.cyc-notes p { color:var(--color-ink-soft); line-height:var(--line-relaxed);
  margin:0 0 var(--space-s); }
.cyc-notes strong { color:var(--color-secondary); }

@media (max-width: 760px) { .cyc-pair { grid-template-columns:1fr; } }

/* ---- Cycle-of-care loop (partials/care-cycle.njk) ----
   Temporal companion to .cyc above. Token-only so it follows the theme. The focus station is the case conference; every other station is
   deliberately uniform so it reads as one stop among equals rather than a hub. */
.ccy-fig { margin:0 auto; max-width:640px; }
.ccy { width:100%; height:auto; display:block; }
.ccy-fig figcaption { margin-top:var(--space-xs); text-align:center;
  font-size:var(--text-sm); color:var(--color-ink-soft); }

.ccy-ring { fill:none; stroke:var(--color-border); stroke-width:2; }
.ccy-arrows polygon { fill:var(--color-border); }
.ccy-hub { fill:var(--brand-50); stroke:var(--color-primary); stroke-width:2; }
.ccy-hub-icon { color:var(--color-primary); stroke-width:1.1; overflow:visible; }
.ccy-hub-label { fill:var(--color-secondary); font-size:14px; font-weight:var(--weight-semibold);
  text-anchor:middle; }
.ccy-nodes rect { fill:var(--color-surface); stroke:var(--color-border); stroke-width:1.5; }
.ccy-nodes text { fill:var(--color-ink-soft); font-size:14px; text-anchor:middle; }
.ccy-nodes .is-focus rect { fill:var(--color-accent); stroke:var(--color-accent); }
.ccy-nodes .is-focus text { fill:var(--color-surface); font-weight:var(--weight-semibold); }

/* Progressive reveal of the care loop — driven by the inline script in
   partials/care-cycle.njk, which tags elements and sets the stagger delays.
   Without JS (or with reduced motion) nothing is ever hidden. The draw timing
   (duration = 16 steps × .22s, delay = 1.5s) must match the script's constants.
   Dash length 1100 = the ring's circumference (2π × 175); the -90° rotation
   starts the draw at 12 o'clock. */
.ccy .ccy-seq { opacity:0; transition:opacity .34s ease; }
.ccy.ccy-run .ccy-seq { opacity:1; }
.ccy .ccy-draw { stroke-dasharray:1100; stroke-dashoffset:1100;
  transform:rotate(-90deg); transform-origin:300px 230px; }
.ccy.ccy-run .ccy-draw { stroke-dashoffset:0;
  transition:stroke-dashoffset 3.52s linear 1.5s; }
.ccy .ccy-hub-seq { opacity:0; transition:opacity .4s ease; }
.ccy.ccy-run .ccy-hub-seq { opacity:1; }
/* Snap reset: the stagger delays also apply to any fade-out, so class removal
   alone un-builds the loop over seconds — this kills transitions for a frame. */
.ccy.ccy-reset .ccy-seq, .ccy.ccy-reset .ccy-hub-seq,
.ccy.ccy-reset .ccy-draw { transition:none !important; }

.ccy-notes { max-width:720px; margin:var(--space-l) auto 0; text-align:center; }
.ccy-notes p { color:var(--color-ink-soft); line-height:var(--line-relaxed);
  margin:0 0 var(--space-s); }
.ccy-notes strong { color:var(--color-secondary); }

/* ============================================================
   Policy / "direction of travel" timeline — SHARED (/specialists/, /about/).
   Markup: partials/policy-timeline.njk · entrance: assets/js/policy-timeline.js.
   Lives here rather than in a page stylesheet because two pages use it; the JS targets
   every .tl on the page, so a third consumer needs no change to either file.
   ============================================================ */
/* ---- Policy / future timeline ---- */
.tl-cards { display:flex; gap:var(--space-m); align-items:stretch; }
.tl-qcard { flex:1 1 0; background:var(--brand-25); border:none; border-radius:20px; padding:var(--space-m);
  box-shadow:0 26px 48px -32px rgba(34,82,120,.42); display:flex; flex-direction:column; min-height:210px; }
.tl-qm { font-family:Georgia,serif; font-size:46px; line-height:.4; height:22px; color:var(--color-primary); font-weight:var(--weight-bold); }
.tl-qtext { margin-top:var(--space-s); font-size:var(--text-md); line-height:var(--line-normal); font-weight:var(--weight-medium); color:var(--color-ink); flex:1; }
/* margin-top:auto pins the source to the card floor regardless of quote length — .tl-qtext
   already has flex:1, but making it explicit means a future change to the text rule cannot
   quietly unpin it. Link colour matches the .src treatment used for the same job on
   /allied-health/; the underline and external-link arrow come from the shared a[target] rule. */
.tl-qsrc { margin-top:auto; padding-top:var(--space-s); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-secondary); }
.tl-qsrc a { color:var(--color-primary); font-weight:var(--weight-bold); }
/* ⚠️ The line's right edge and the arrow's base are derived from the same two custom properties.
   They used to be independent values — right:3.5% on the line against right:1.4% plus a 16px
   border on the arrow — which left roughly a 7px gap that also changed with container width,
   because one end was a percentage and the other mixed percentage with pixels. Keep them tied. */
.tl-axis { position:relative; height:var(--tl-axis-h); margin-top:var(--tl-gap);
  --tl-axis-h:56px; --tl-gap:var(--space-l); --tl-node-size:58px;
  --tl-arrow-w:16px; --tl-arrow-inset:1.4%; }
.tl-line { position:absolute; left:2%; right:calc(var(--tl-arrow-inset) + var(--tl-arrow-w) - 1px);
  top:50%; height:3px; transform:translateY(-50%); border-radius:var(--radius-xs);
  background:linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 55%, var(--color-accent) 100%); }
.tl-arrow { position:absolute; right:var(--tl-arrow-inset); top:50%; transform:translateY(-50%); width:0; height:0;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:var(--tl-arrow-w) solid var(--color-accent); }
.tl-nodes { position:absolute; inset:0; display:flex; gap:var(--space-m); }
.tl-ncell { position:relative; flex:1 1 0; display:flex; justify-content:center; align-items:center; }
/* Connector from the node up to the card above. transform-origin:bottom so it grows upward when
   GSAP scales it; scaleY(1) by default, so with no JS the connectors are simply drawn. */
.tl-node { position:relative; width:58px; height:58px; border-radius:var(--radius-full); background:linear-gradient(150deg,var(--brand-600),var(--color-secondary));
  color:#fff; font-weight:var(--weight-bold); font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px -10px rgba(34,82,120,.7); z-index:1; }
.tl-ncell:nth-child(4) .tl-node { background:linear-gradient(150deg,var(--color-accent),var(--color-primary)); box-shadow:0 12px 24px -10px rgba(67,143,185,.6); }
/* ⚠️ The connector is a REAL element (.tl-conn), not the .tl-node::before it once was. GSAP
   cannot target pseudo-elements, and routing it through a registered custom property did not
   interpolate reliably — the value read 1 on nodes whose tween had not started, so every
   connector drew at full height alongside its marker. A real element animates directly and
   provably. ⚠️ Do NOT reintroduce a ::before line: two lines in the same place, one static and
   one animated, is exactly the bug this replaced. It sits inside .tl-node so bottom:100%
   resolves against the marker. */
.tl-conn { position:absolute; bottom:100%; left:50%; width:3px; height:30px; margin-left:-1.5px;
  transform-origin:bottom center; pointer-events:none; border-radius:1px;
  background:var(--color-primary); }
.tl-future { position:absolute; right:-4px; bottom:-20px; font-size:13px; font-weight:var(--weight-semibold); letter-spacing:.12em; text-transform:uppercase; color:var(--color-primary); }
@media (max-width:980px) {
  .tl-cards { flex-wrap:wrap; }
  .tl-qcard { flex:1 1 44%; min-height:0; }
  .tl-axis { display:none; }
}


/* ============================================================================
   THE PARTICULARS CARDS (.cc2-*)
   Used by /case-conferencing/ (#rules, its own markup) and /medicare-compliance/ (#particulars,
   partials/team-size.njk + partials/particulars.njk), so the CLASSES live here rather than in a
   page stylesheet — anything used on 2+ pages belongs in components.css. The two pages' CONTENT is
   deliberately not shared. Page-specific variants (.cc2-note.on-dark, the deep section, the
   comparison table) stay in case-conferencing.css.
   ============================================================================ */
.cc2-note { border-left:5px solid var(--color-accent); background:var(--brand-50);
  border-radius:var(--radius-lg); padding:var(--space-s) var(--space-m); }
.cc2-note p { margin:0; color:var(--brand-600); line-height:var(--line-relaxed); }
.cc2-note strong { color:var(--color-secondary); }
.cc2-note.wide { max-width:900px; margin:var(--space-l) auto 0; }
.cc2-note.wide.left, .cc2-note.on-dark.left { max-width:none; margin-left:0; margin-right:0; }
/* Full-bleed note under a card grid: a white panel matching the cards, lifted by the accent
   rule rather than a tint, so it reads as part of the same set. */
.cc2-note.wide.left { background:var(--color-surface); border-left-width:4px;
  padding:var(--space-m) var(--space-l); box-shadow:var(--shadow-xs); }
.cc2-note.wide.left p { color:var(--color-ink); font-size:var(--text-md); }
/* When to use it, list mode (partials/when-to-use.njk with whenToUseList): heading left, the six
   situations as a two-column list right. */
/* ---- "Two ways to use it" purpose cards: the indicator list ----
   PROMOTED out of gp.css 2026-09-15: /practices/ renders the same #twoways cards and does not load
   that file, so the list was unstyled there and its 20px icons fell back to the SVG default of
   300x150. Any page carrying .cc-uses needs these.
   ⚠️ Spacing opened up 2026-09-14 (owner: "the spacing on these sucks"). The rows sat 8px apart on
   a 24px line box, so a three-item list read as one dense block under the card's roomier copy.
   Each row now carries its own padding with a hairline between, which also gives the two cards a
   consistent rhythm when one list is longer than the other. */
.cc-uses-label { margin:var(--space-m) 0 var(--space-2xs); padding-top:var(--space-s); border-top:1px solid var(--color-border-soft); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--color-ink-muted); }
.cc-uses { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cc-uses li + li { border-top:1px solid var(--color-border-soft); }
.cc-uses li { display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-xs) 0; font-size:var(--text-md); font-weight:var(--weight-semibold); line-height:var(--line-normal); color:var(--color-secondary); }
.cc-uses li svg { flex:0 0 auto; width:20px; height:20px; color:var(--color-primary); stroke:currentColor; fill:none; stroke-width:2; }

/* ---- Illustration with a floating stat card ---------------------------------------------
   Promoted out of allied-health.css 2026-09-14 so partials/complexity.njk can render the same
   thing on /gp/ and /specialists/, which don't load that file. The .ahd- prefix is kept because
   /allied-health/ has ~10 call sites using these names; renaming them buys nothing a reader can
   see. The .bl variant, .ahd-card and .ahd-shot.is-narrow are allied-health-only and stayed.
   ⚠️ #complexity carries an ILLUSTRATION, not a photo — a patient ringed by a wait list, a
   broken Medicare card, a phone on hold, cash and a clock, i.e. the three barriers the copy
   names. Near-square (800x846) and cropped at source, so no aspect-ratio crop here: cropping
   further clips the orbiting elements, which are the whole point. Capped and centred so it
   balances three short paragraphs rather than towering over them. */
.ahd-shot { position: relative; }
.ahd-shot img { width: 100%; display: block; border-radius: 18px; box-shadow: var(--shadow-lg); }
.ahd-shot.is-illus { max-width: 440px; margin-inline: auto; }
.ahd-statcard { position: absolute; background: var(--color-surface); border-radius: 16px; padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-lg); max-width: 250px; }
.ahd-statcard.br { right: -22px; bottom: -24px; }
.ahd-statcard-n { font-size: 1.6rem; font-weight: var(--weight-extrabold); color: var(--color-secondary); line-height: 1.1; }
.ahd-statcard-l { font-size: var(--text-sm); color: var(--color-ink-soft); }
.ahd-statcard-l strong { color: var(--color-ink); }
/* Citation markers — same treatment as the evidence list. */
.ahd-statcard-l sup { line-height: 0; }
.ahd-statcard-l sup button { background: none; border: 0; padding: 0 0 0 2px; font: inherit; font-size: var(--text-xs); color: var(--color-primary); cursor: pointer; }
.ahd-statcard-l sup button:hover { text-decoration: underline; }
/* The accent is derived with oklch(from …) rather than a literal rgba, keeping the
   no-raw-colour rule. */
.ahd-mark { font-weight: var(--weight-semibold); color: var(--color-secondary);
  background: linear-gradient(transparent 62%, oklch(from var(--color-accent) l c h / 34%) 62%);
  border-radius: var(--radius-xs); padding: 0 var(--space-3xs); }
@media (max-width: 760px) {
  .ahd-statcard.br { position: static; margin-top: var(--space-s); max-width: none; }
}
/* Citation marker inside a body paragraph — the .ahd-body sup treatment, for copy rendered in the
   shared section.block system rather than /allied-health/'s .ahd-body. */
.cite-p sup { line-height: 0; }
.cite-p sup button { background: none; border: 0; padding: 0 0 0 2px; font: inherit;
  font-size: var(--text-xs); color: var(--color-primary); cursor: pointer; }
.cite-p sup button:hover { text-decoration: underline; }

/* List mode only: a compact two-column list is a short interstitial, not a full section, so the
   inherited section.block 4xl top+bottom left ~256px of dead ground at each join — most visible on
   /specialists/ between #uses and #roles, which the owner flagged (2026-09-14). 3xl keeps the band
   rhythm without the void; the card-grid branch is untouched. */
section.block.wtu-band { padding: var(--space-3xl) 0; }
.wtu-split { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-xl); align-items:start; }
.wtu-split h2 { margin:0 0 var(--space-xs); }
.wtu-lead { margin:0; color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.wtu-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-xs) var(--space-xl); }
.wtu-list li { display:flex; align-items:flex-start; gap:var(--space-xs); font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); padding:var(--space-2xs) 0; border-bottom:1px solid var(--color-border-soft); }
.wtu-list svg { flex:0 0 auto; width:22px; height:22px; margin-top:3px; color:var(--color-primary); stroke:currentColor; fill:none; stroke-width:2; }
.wtu-list strong { color:var(--color-secondary); }
@media (max-width:820px) { .wtu-split, .wtu-list { grid-template-columns:1fr; } }
.cc2-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap:var(--space-m); }
.cc2-cards.three { grid-template-columns:repeat(auto-fit, minmax(min(262px, 100%), 1fr)); }
.cc2-card { background:var(--color-surface); border:1px solid transparent;
  border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-xs);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.cc2-cards:not(.three) .cc2-card:hover { transform:translateY(-3px);
  box-shadow:var(--shadow-md); border-color:var(--color-accent); }
.cc2-card h3 { font-size:var(--text-lg); font-weight:var(--weight-bold);
  color:var(--color-secondary); margin:0 0 var(--space-2xs); }
.cc2-card > p { margin:0; color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.cc2-card-head { display:flex; align-items:center; gap:var(--space-xs); margin-bottom:var(--space-s); }
.cc2-card-head h3 { margin:0; }
.cc2-ic { width:48px; height:48px; flex:0 0 48px; border-radius:var(--radius-lg);
  background:var(--grad-chip); color:var(--color-surface); display:flex; align-items:center;
  justify-content:center; margin-bottom:var(--space-s); }
.cc2-ic.sm { width:40px; height:40px; flex:0 0 40px; margin-bottom:0; }
.cc2-ic svg { width:24px; height:24px; fill:none; stroke-width:2; }
.cc2-ic.sm svg { width:20px; height:20px; }
.cc2-kv { display:flex; flex-direction:column; gap:var(--space-2xs); margin:0 0 var(--space-s); }
/* Label and value share one row. The label is capped at half the row and wraps inside that;
   the value never wraps and never shrinks, so the two stay on the same baseline and the values
   line up down the card. The label's basis can shrink below 50% if a value is unusually wide,
   which keeps the row from overflowing rather than forcing a hard 50/50 split.
   Body tracking is dropped here — +0.02em costs ~12px across the longest label. */
/* ⚠️ wrap, not nowrap. The value still never breaks mid-phrase and still sits hard right, but a
   value too long for the space left beside its label drops to its own line instead of pushing the
   label into a hyphenated two-line mess (caught with "Specialist + 3 participants" in a third-width
   card). Rows that fit are unchanged, so the values still line up down the card. */
.cc2-kv > div { display:flex; flex-wrap:wrap; align-items:baseline;
  gap:2px var(--space-xs); padding:var(--space-2xs) var(--space-xs);
  background:var(--brand-50); border-radius:var(--radius-lg);
  letter-spacing:var(--tracking-snug); }
.cc2-kv dt { flex:0 1 50%; font-size:var(--text-md); font-weight:var(--weight-semibold);
  color:var(--brand-600); }
.cc2-kv dd { flex:0 0 auto; margin:0 0 0 auto; font-size:var(--text-md);
  font-weight:var(--weight-extrabold); color:var(--color-secondary);
  text-align:right; white-space:nowrap; }
/* A card whose job is to send the reader somewhere: the button runs the card's full width and sits
   at the bottom of it, so the three cards still line up along their base. */
.cc2-card > .cc2-cta { margin-top:auto; padding-top:var(--space-m); }
.cc2-cta .btn { width:100%; justify-content:center; }

/* In a third-width card the rows are tight: a step down in type keeps label and value on one line
   together, which is what makes the values line up down the card. The wrap above is still there as
   the fallback for anything longer. */
.cc2-cards.three .cc2-kv dt, .cc2-cards.three .cc2-kv dd { font-size:var(--text-sm); }

.cc2-fine { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
/* A card that holds a whole row rather than a third of one: the team figures beside the rules
   that qualify them. Two columns wide, one narrow — the figures need less room than the rules. */
.cc2-wide { width:100%; }
.cc2-split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--space-l); align-items:start; }
.cc2-split .cc2-kv { margin-bottom:0; }
@media (max-width:780px) { .cc2-split { grid-template-columns:1fr; gap:var(--space-m); } }
/* Two cards share a row on the wider breakpoints; the three-up minimum would strand them. */
.cc2-cards.two { grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Four link cards in one row (the /gp/ "particulars" summary). Explicit 4 rather than auto-fit:
   auto-fit at the default 310px minimum fits only three at the wrap's width, orphaning the fourth
   on its own row. Steps down to 2 then 1 rather than squeezing four narrow columns. */
.cc2-cards.four { grid-template-columns:repeat(4, minmax(0, 1fr)); }
/* Medicare summary, compact mode (partials/medicare-summary.njk with medicareSummaryCompact): the
   four platform checks beside the copy. */
.ms-checks { list-style:none; margin:0; padding:var(--space-l); background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-s); }
.ms-checks li { display:flex; align-items:flex-start; gap:var(--space-xs); font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
.ms-checks li svg { flex:0 0 auto; width:22px; height:22px; margin-top:2px; padding:4px; border-radius:var(--radius-full); background:var(--brand-50); color:var(--color-primary); stroke:currentColor; }
.ms-checks strong { color:var(--color-secondary); }
@media (max-width:820px) { .ms-checks { padding:var(--space-m); } }
@media (max-width:1040px) { .cc2-cards.four { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px)  { .cc2-cards.four { grid-template-columns:1fr; } }

/* One fact per line inside a card. A dash rather than a bullet: these are statements of a rule,
   and a disc marker reads as a feature list. The marker is absolutely placed so wrapped lines
   align under the first word, not under the dash. */
.cc2-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:var(--space-2xs); }
.cc2-points li { position:relative; padding-left:var(--space-s); font-size:var(--text-sm);
  color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.cc2-points li::before { content:"—"; position:absolute; left:0; color:var(--color-accent); }
.cc2-points strong { color:var(--color-secondary); }
.cc2-points a { color:var(--color-primary); }
.cc2-cards.three .cc2-card > .cc2-points { margin-top:auto; }

.cc2-cards.three .cc2-card, .cc2-cards.two .cc2-card, .cc2-cards.four .cc2-card { display:flex; flex-direction:column; }
.cc2-cards.three .cc2-card > .cc2-fine, .cc2-cards.two .cc2-card > .cc2-fine { margin-top:auto; }

/* ---- Light button ----
   A white pill for use on a dark or gradient band (the /about/ outreach cards, the
   /medicare-compliance/ advisory band). Shared because it is used on 2+ pages: it lived in
   about.css and every other page's copy of it rendered with no background at all. */
.btn-light { background:#fff; color:var(--color-secondary); border:none; }
.btn-light:hover { background:rgba(255,255,255,.88); color:var(--color-secondary); }

/* ---- The cc2- section system (shared) -------------------------------------
   Promoted out of case-conferencing.css 2026-09-11, when /gp/ took copies of the "how care is
   arranged today" diagram, "when to use it", the benefits/particulars card grids, the eligible-
   patients band and the "rebated by Medicare" deep section (CLAUDE.md: anything used on 2+ pages
   belongs here). What stayed behind in case-conferencing.css is what only that page renders — the
   hero, the hero mock/stat strip, and the two role cards.
   ⚠️ The diagram needs assets/js/cc-diagram.js on any page that renders it. */
/* ---- Lede copy ----------------------------------------------------------
   Promoted out of case-conferencing.css 2026-09-11, when /gp/ took the case-conferencing
   definition into its "What is a case conference?" block. */
.cc2-lede { font-size:var(--text-lg); line-height:var(--line-relaxed); color:var(--color-ink);
  margin:0 0 var(--space-s); max-width:33em; }
/* Highlighter underline — an inset shadow rather than a border so it sits behind the descenders. */
.cc2-mark { font-weight:var(--weight-extrabold); color:var(--color-secondary);
  box-shadow:inset 0 -.5em 0 var(--brand-100); }

/* ---- Diagram ------------------------------------------------------------- */
.cc2-panel-head { display:flex; align-items:center; gap:var(--space-xs); flex-wrap:wrap;
  padding:var(--space-s) var(--space-l); border-bottom:1px solid var(--color-border-soft);
  background:var(--brand-50); }
.cc2-seg { display:flex; background:var(--color-surface); border:1px solid var(--color-border-soft);
  border-radius:var(--radius-lg); padding:var(--space-3xs); gap:var(--space-3xs); }
.cc2-seg-btn { appearance:none; border:none; cursor:pointer; font-family:inherit;
  font-size:var(--text-sm); font-weight:var(--weight-bold); padding:var(--space-2xs) var(--space-s);
  border-radius:var(--radius-md); background:none; color:var(--color-ink-soft);
  transition:background .2s var(--ease), color .2s var(--ease); }
.cc2-seg-btn:hover { color:var(--color-primary); }
.cc2-seg-btn.is-on { background:var(--color-secondary); color:var(--color-surface); box-shadow:var(--shadow-xs); }
.cc2-seg-btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.cc2-panel-cap { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft); }
.cc2-diagram-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(370px, 100%), 1fr)); align-items:center; }
.cc2-diagram-fig { padding:var(--space-s) var(--space-l) var(--space-l); }
.cc2-svg { width:100%; height:auto; display:block; }
.cc2-spokes line { stroke:var(--brand-100); stroke-width:2; }
/* 2πr for r=155. Hidden until the conference state draws it in. */
.cc2-ring { fill:none; stroke:var(--color-primary); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:974; stroke-dashoffset:974; opacity:0;
  transition:stroke-dashoffset 1.1s var(--ease), opacity .4s; }
[data-cc2-diagram].is-conf .cc2-ring { stroke-dashoffset:0; opacity:1; }
.cc2-core { fill:var(--color-secondary); }
.cc2-core-l { fill:var(--color-surface); font-size:15px; font-weight:var(--weight-bold); text-anchor:middle; }
.cc2-nodes circle { fill:var(--color-surface); stroke:var(--color-border); stroke-width:2; transition:stroke .5s var(--ease); }
[data-cc2-diagram].is-conf .cc2-nodes circle { stroke:var(--color-accent); }
.cc2-nodes text { fill:var(--color-secondary); font-size:12.5px; font-weight:var(--weight-bold); text-anchor:middle; }
.cc2-diagram-copy { padding:var(--space-l) var(--space-l) var(--space-l) var(--space-2xs);
  display:flex; flex-direction:column; gap:var(--space-m); }
.cc2-diagram-copy p { margin:0; color:var(--color-ink); line-height:var(--line-relaxed); }
.cc2-diagram-copy strong { color:var(--color-secondary); }

/* ---- Note / callout ------------------------------------------------------ */

/* Light panel on the deep section — same treatment as the note under the particulars cards, so
   the two read as the same component rather than two different callouts. */
.cc2-note.on-dark { background:var(--color-surface); border-left-color:var(--color-accent);
  border-left-width:4px; max-width:900px; margin:var(--space-l) auto 0;
  padding:var(--space-m) var(--space-l); box-shadow:var(--shadow-md); }
.cc2-note.on-dark p { color:var(--color-ink); font-size:var(--text-md); }
.cc2-note.on-dark strong { color:var(--color-secondary); }

.cc2-fine strong { color:var(--color-secondary); }
.cc2-fine a { color:var(--color-primary); }

/* ---- Tick lists ---------------------------------------------------------- */
.cc2-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2xs); }
.cc2-list li { display:flex; gap:var(--space-2xs); color:var(--color-ink); line-height:var(--line-relaxed); }
.cc2-tick { color:var(--color-accent); font-weight:var(--weight-extrabold); flex:0 0 auto; }

/* ---- Bands --------------------------------------------------------------- */
.cc2-band { background:var(--brand-50); border-top:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft); }

/* ---- Deep (dark) section ------------------------------------------------- */
/* clip, NOT hidden. overflow:hidden makes this a scroll container, and .reveal is scroll-driven
   (animation-timeline: view()), so every .reveal inside froze part-way — the white note rendered
   at 67% opacity and looked washed out over the gradient. overflow:clip crops identically without
   creating a scrollport. */
.cc2-deep { background:var(--grad-deep); position:relative; overflow:clip; }
.cc2-deep h2, .cc2-deep .section-head p { color:var(--color-surface); }
.cc2-deep .section-head p { opacity:.9; }
/* Dark-band treatment for the copy that sits DIRECTLY on .cc2-deep (i.e. not inside a card).
   ⚠️ Every selector here is scoped so it cannot reach inside a .card: cards stay white surfaces on
   this band, so their own h3/p must keep the dark ink. That is why the heading rule is
   `.section-head h3` and not a bare `.cc2-deep h3` — /gp/#money has two card h3s that would
   turn white and vanish. Added 2026-09-14 when /gp/#what became a deep band. */
.cc2-deep .section-head h3 { color:var(--color-surface); }
.cc2-deep > .wrap > .split .cc2-lede,
.cc2-deep > .wrap > .split > div > .cc2-lede { color:rgba(255,255,255,.88); }
/* Bare body paragraphs in a deep band's split column (/specialists/#solution, which uses plain <p>
   rather than .cc2-lede). Scoped to a DIRECT child <p> so it cannot reach a panel's own copy — the
   .callout below it is a light surface and keeps its dark ink, the same way cards do.
   ⚠️ :not(.eyebrow) is load-bearing. The eyebrow is also a direct-child <p>, and this selector
   (0,3,2) outranks .eyebrow.on-dark (0,2,0) — without the exclusion the accent eyebrow turns white
   on BOTH deep bands. */
.cc2-deep > .wrap > .split > div > p:not(.eyebrow) { color:rgba(255,255,255,.88); }
.cc2-deep > .wrap > .split > div > p:not(.eyebrow) strong { color:#fff; }
/* The highlighter's ink is --color-secondary (navy) over a --brand-100 underline: invisible on a
   navy band. White text, accent underline. */
.cc2-deep .cc2-mark { color:#fff; box-shadow:inset 0 -.5em 0 oklch(from var(--color-accent) l c h / 45%); }
/* --grad-line is a light-ground gradient; on the deep band it barely reads. */
.cc2-deep .section-head .rule { background:var(--color-accent); }
.cc2-figs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(262px, 100%), 1fr)); gap:var(--space-m); }
/* White cards on the gradient, same as the note below them — the translucent-white variant read
   as a wash rather than as a card. Borderless + shadow, matching every other card on the page. */
.cc2-fig { background:var(--color-surface); border-radius:var(--radius-xl);
  padding:var(--space-l); box-shadow:var(--shadow-md); }
/* --text-xl, same as .cc-fig on the live page. --step-3 was large enough to wrap the specialist
   range ("$103.15 – $143.65") onto two lines, which threw the three cards out of alignment. */
.cc2-fig .v { font-size:var(--text-xl); font-weight:var(--weight-extrabold);
  color:var(--color-secondary); line-height:var(--line-none);
  letter-spacing:var(--tracking-tight); }
.cc2-fig .v small { font-size:var(--text-md); font-weight:var(--weight-bold); color:var(--color-primary); }
.cc2-fig h3 { font-size:var(--text-lg); font-weight:var(--weight-bold);
  color:var(--color-primary); margin:var(--space-2xs) 0 var(--space-2xs); }
.cc2-fig p { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.cc2-fig a { color:var(--color-primary); }
/* --text-sm, matching .cc-disclaimer on the live page. --text-xs is --step--2 (~9px), which is
   caption size — too small for a disclaimer anyone might actually need to read. */
.cc2-disclaimer { max-width:900px; margin:var(--space-l) auto 0; font-size:var(--text-sm);
  color:rgb(255 255 255 / .72); line-height:var(--line-relaxed); text-align:center; }
.cc2-disclaimer.left { margin-left:0; margin-right:0; text-align:left; }

@media (max-width: 760px) {
  /* The SVG scales with its column, so the labels shrink with it — nudge the viewBox type up
     so they stay legible once the diagram is only ~340px wide. */
  .cc2-nodes text { font-size:16px; }
  .cc2-core-l { font-size:19px; }
  .cc2-diagram-copy { padding:0 var(--space-l) var(--space-l); }
}

/* ---- Comparison table (partials/why-different.njk) ------------------------
   Promoted out of case-conferencing.css 2026-09-11 when /gp/ started rendering the same
   block (CLAUDE.md: anything used on 2+ pages belongs here). .cc2-panel.scrollx comes with
   it — the table is wider than its panel and scrolls inside it. */
.cc2-panel.scrollx { overflow-x:auto; }
.cc2-table { width:100%; min-width:720px; border-collapse:collapse; }
.cc2-table th, .cc2-table td { border-bottom:1px solid var(--color-border-soft); }
/* Only the row-label column gets the uppercase eyebrow treatment. The three compared columns are
   normal-case and a size up — they are read as answers, not as a legend. */
.cc2-table thead th { padding:var(--space-s) var(--space-m); font-size:var(--text-md);
  font-weight:var(--weight-bold); color:var(--color-ink-soft); text-align:center;
  border-bottom:1px solid var(--color-border-soft); }
.cc2-table thead th:first-child { text-align:left; font-size:var(--text-sm);
  letter-spacing:var(--tracking-widest); text-transform:uppercase; }
/* Keeps the header rule unbroken — it used to go transparent under the dark cell, which left a
   gap in the middle of the line. */
.cc2-table thead th.is-us { color:var(--color-surface); background:var(--grad-deep);
  font-weight:var(--weight-extrabold); }
.cc2-table tbody th { padding:var(--space-s) var(--space-m); text-align:left;
  font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-ink); }
.cc2-table tbody td { text-align:center; padding:var(--space-s);
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-ink-soft); }
.cc2-table tbody td.is-us { background:var(--brand-50); }
/* MUST be scoped to tbody. :last-child is relative to the parent, and <thead> holds a single
   <tr> — so the unscoped version matched the header row and silently removed its rule. */
.cc2-table tbody tr:last-child th, .cc2-table tbody tr:last-child td { border-bottom:none; }
.cc2-yes { font-size:var(--text-lg); font-weight:var(--weight-extrabold); color:var(--color-success); }
.cc2-no { color:var(--color-border); }

/* ---- Team tabs (partials/common-teams.njk) --------------------------------
   Promoted out of case-conferencing.css 2026-09-11 when /which-patients/ needed the same
   block (CLAUDE.md: anything used on 2+ pages belongs here). .cc2-panel is DUPLICATED
   rather than moved — case-conferencing.css still needs it for .cc2-panel-head/.scrollx
   on blocks that are not shared. Behaviour: assets/js/cc-tabs.js. */
.cc2-panel { background:var(--color-surface); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md); overflow:hidden; }
/* Embedded inside a surface that already is a card (the /gp/ Coordinate card): drop the white
   ground and the shadow, or the diagram reads as a card floating in a card. The head keeps its
   tint so the toggle still reads as a control. */
.cc2-panel-bare { background:transparent; box-shadow:none; border-radius:0; }
.cc2-panel-bare .cc2-panel-head { background:transparent; padding-left:0; padding-right:0; }
.cc2-panel-bare .cc2-diagram-fig { padding-left:0; padding-right:0; }
.cc2-panel-bare .cc2-diagram-copy { padding-left:0; padding-right:0; padding-bottom:0; }
/* Copy ABOVE the figure when embedded (owner, 2026-09-11). The panel stacks to one column inside a
   half-width card, and in that stack the sentence sets up what the diagram then shows — underneath
   it, it reads as a caption on something already understood. `order` rather than reordered markup so
   the two-column layout on /case-conferencing/ is untouched, and so the DOM order still puts the
   figure's <title>/<desc> before its description for a screen reader. */
.cc2-panel-bare .cc2-diagram-copy { order:-1; padding-top:0; padding-bottom:var(--space-s); }
/* ---- Team tabs ----------------------------------------------------------- */
.cc2-tablist { display:flex; gap:var(--space-2xs); flex-wrap:wrap; margin-bottom:var(--space-m); }
.cc2-tab { appearance:none; border:1px solid var(--color-border-soft); cursor:pointer; font-family:inherit;
  font-size:var(--text-md); font-weight:var(--weight-bold); padding:var(--space-xs) var(--space-m);
  border-radius:var(--radius-full); background:var(--color-surface); color:var(--color-secondary);
  box-shadow:var(--shadow-xs);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
             box-shadow .2s var(--ease); }
.cc2-tab:hover { border-color:var(--color-accent); }
.cc2-tab[aria-selected="true"] { background:var(--grad-chip); border-color:transparent;
  color:var(--color-surface); box-shadow:var(--shadow-accent); }
.cc2-tab:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.cc2-tabpanel { padding:var(--space-l); }
.cc2-tabpanel[hidden] { display:none; }
.cc2-team-h { display:flex; align-items:center; gap:var(--space-2xs);
  font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-secondary);
  margin:0 0 var(--space-s); }
.cc2-team-h svg { width:21px; height:21px; flex:0 0 21px; color:var(--color-primary); fill:none; stroke-width:2; }
.cc2-team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(172px, 100%), 1fr)); gap:var(--space-s); }
.cc2-member { background:var(--brand-50); border-radius:var(--radius-lg); padding:var(--space-s); }
.cc2-member .n { display:block; font-size:var(--text-md); font-weight:var(--weight-extrabold);
  color:var(--color-secondary); margin-bottom:var(--space-3xs); }
.cc2-member .r { display:block; font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* ---- Merged eligibility band (common-cases.njk, casesEligible) ----
   Sits UNDER the cohort grid, not inside it: as a full-width tile it read as a pale box swallowing
   the last row. A rule and plain ground instead, so it reads as a closing note on the section. */
.cases-eligible { margin-top: var(--space-2xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-soft); }
.cases-eligible h3 { margin: 0 0 var(--space-2xs); }
.cases-eligible > p { margin: 0 0 var(--space-m); color: var(--color-ink-soft); max-width: 46em; }
.cases-eligible .pill-row { margin-bottom: var(--space-l); }
.cases-eligible .btn-row { margin: 0; }

/* ---- CPD by college (#cpd on /specialists/, and /cpd/) — promoted out of specialists.css 2026-09-12 ----
   Three cards, one ring each: the 50-hour year as a conic ring, the category where a case conference
   can land drawn in the primary, the rest in two light steps of the same hue. --a and --b are the
   cumulative stops (segment 1 ends at --a, segment 2 at --b); the highlighted segment is the
   remainder. Identity is never colour-alone: the legend names every segment and the hero number
   sits in the centre. */
.cpd-colleges { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-m); }
/* Subgrid rows so the three cards line up with each other: header, ring, and "Where it goes" each
   sit on a shared row, sized by the tallest card, instead of drifting by however long the legend
   or the quote happened to be. Browsers without subgrid get independent cards, which still read. */
.cpd-college { background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  padding:var(--space-l); display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:var(--space-m);
  align-content:start; }
.cpd-college-abbr { font-size:var(--step-1); font-weight:var(--weight-extrabold); color:var(--color-secondary);
  letter-spacing:var(--tracking-tight); line-height:1.1; }

.cpd-ring-wrap { display:flex; align-items:flex-start; gap:var(--space-m); }  /* top-aligned so rings sit level across cards */
.cpd-ring { --a:25%; --b:35%; width:132px; height:132px; flex:0 0 132px; border-radius:50%; position:relative;
  background:conic-gradient(var(--brand-100) 0 var(--a), var(--brand-200) var(--a) var(--b), var(--color-primary) var(--b) 100%); }
.cpd-ring::before { content:""; position:absolute; inset:16px; border-radius:50%; background:var(--color-surface); }
.cpd-ring-centre { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.05; }
.cpd-ring-centre strong { font-size:var(--text-xl); font-weight:var(--weight-extrabold); color:var(--color-secondary);
  letter-spacing:var(--tracking-tight); }
.cpd-ring-centre span { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-ink-soft); margin-top:3px; }
.cpd-ring-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2xs);
  font-size:var(--text-sm); color:var(--color-ink-soft); min-width:0; }
.cpd-ring-legend li { display:flex; align-items:center; gap:var(--space-2xs); flex-wrap:wrap; }
.cpd-ring-legend li b { font-weight:var(--weight-semibold); color:var(--color-ink); margin-left:auto; white-space:nowrap; }
.cpd-ring-legend li.hi { color:var(--color-secondary); font-weight:var(--weight-semibold); }
.cpd-ring-legend i { width:10px; height:10px; border-radius:2px; flex:0 0 10px; }
.cpd-ring-legend i.seg-a { background:var(--brand-100); }
.cpd-ring-legend i.seg-b { background:var(--brand-200); }
.cpd-ring-legend i.seg-c { background:var(--color-primary); }

.cpd-where { margin:0; display:grid; gap:var(--space-2xs); font-size:var(--text-sm); line-height:var(--line-relaxed); }
.cpd-where dt { font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-ink-muted); margin-top:var(--space-2xs); }
.cpd-where dd { margin:0; color:var(--color-ink-soft); }
.cpd-where q { quotes:"\201C" "\201D"; color:var(--color-ink); }
/* The quoted framework wording is the link: colour stays ink, the underline says "this is their
   phrase, go and read it". */
.cpd-quote { color:var(--color-ink); text-decoration:underline; text-decoration-color:var(--color-accent);
  text-underline-offset:3px; text-decoration-thickness:1.5px; }
.cpd-quote:hover { color:var(--color-primary); text-decoration-color:currentColor; }

@media (max-width:1040px) { .cpd-colleges { grid-template-columns:1fr; max-width:560px; margin:0 auto; } }
@media (max-width:420px)  { .cpd-ring-wrap { flex-direction:column; align-items:flex-start; } }
/* /cpd/ shows five medical colleges, not three: let the row wrap and keep the subgrid alignment
   within each row. */
.cpd-colleges.wrap { grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr)); }

/* ============================================================================
   DOWNLOAD CARDS (.dl-list / .dl-card)
   ⚠️ Promoted out of book.css (2026-09-16) when /practices/ gained its own
   "Guides & documents" section — book.css is not loaded there, so leaving these
   behind would have rendered the cards unstyled. Same trap that broke the
   #twoways icons. Any page that renders site.bookingDownloads uses these.
   ============================================================================ */
/* --- Download cards --- */
.dl-list { display: flex; flex-direction: column; gap: var(--space-s); }
.dl-card {
  display: flex; align-items: center; gap: var(--space-m);
  padding: var(--space-m); background: var(--color-surface);
  border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl);
}
.dl-card .chip-ic { flex: none; }
.dl-card-body { flex: 1; }
.dl-card-body h3 { font-size: var(--text-md); margin: 0 0 var(--space-3xs); }
.dl-card-body p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }
.dl-card.is-soon { opacity: .65; }
.dl-card.is-soon .btn { pointer-events: none; }

/* btn-ghost is a dark-background style (white on translucent white) — on the white
   dl-cards it was literally invisible. Light-surface variant, scoped to the card. */
.dl-card .btn-ghost {
  color: var(--color-primary);
  background: var(--brand-50);
  border: 1.5px solid var(--color-primary);
  backdrop-filter: none;
}
.dl-card .btn-ghost:hover { background: var(--brand-25, var(--brand-50)); }

@media (max-width: 540px) {
  .dl-card { flex-direction: column; align-items: flex-start; }
}
/* Links inside the dark .stat-callout — the default ink-on-white link is invisible there. */
.stat-callout a { color: var(--color-accent); text-decoration-color: oklch(from var(--color-accent) l c h / 55%); }
.stat-callout a:hover { color: #fff; }
/* ============================================================================
   FREE RIBBON (.free-ribbon)
   Sits directly under a dark hero, so it has to read as a bright band against it. Used on
   /practices/, /gp/ and /specialists/, each with its own audience wording; it replaced the
   "100% free" cell those pages carried in their stat strips.
   ⚠️ Promoted here from practices.css (2026-09-16) the moment the second page wanted it —
   /gp/ and /specialists/ load gp.css and specialists.css, not practices.css. Same trap that
   broke the #twoways icons.
   ⚠️ It needs a FOCAL ELEMENT, not just centred text (owner, 2026-09-16: "the contrast sucks
   or something… or just it being plain text?"). The dark pill carries the claim and the accent
   ground carries the pill; a centred sentence on its own reads as a caption.
   ⚠️ One line only: the moment it grows a second sentence it stops being a ribbon.
   ============================================================================ */
.free-ribbon { background: var(--color-accent); color: var(--color-secondary); box-shadow: inset 0 -1px 0 oklch(from var(--color-secondary) l c h / 12%); }
.free-ribbon .wrap {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  padding-block: var(--space-m);
  text-align: center;
}
.fr-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-secondary); color: #fff;
  border-radius: var(--radius-full); padding: 7px var(--space-s);
  font-size: var(--text-md); font-weight: var(--weight-extrabold);
  letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 6px 18px oklch(from var(--color-secondary) l c h / 28%);
}
.fr-badge svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 3.2; }
.fr-text { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.fr-text strong { font-weight: var(--weight-extrabold); }
@media (max-width: 640px) {
  .free-ribbon .wrap { flex-direction: column; text-align: center; }
  .fr-text { font-size: var(--text-md); }
}

/* ============================================================================
   HERO RATE BADGE (.badge-rate)
   The "Up to $X an hour" figure floating on the hero screenshot — /gp/ and /specialists/.
   A modifier on the page's own badge (.ah-badge / .sp-badge) rather than a third component.
   ⚠️ It is deliberately LOUD (owner, 2026-09-16, twice: "way more prominent", "NOT PROMINENT
   ENOUGH AT ALL"). The base badge is a small white chip; this inverts it — deep ground, the
   figure at display size in accent, its own heavy shadow — so it reads as the loudest thing on
   the hero after the headline. If it ever drifts back toward the white chip, that's the
   regression.
   ⚠️ HARD RULE, the same one that governs billing.gp.perHour and billing.specialist.perHour:
   "Up to $X", never a flat rate and never what conference time "is rebated at". Both figures are
   ONE specific hour out of several duration tiers, which is why .up sits on its own line and
   cannot be separated from the number.
   ============================================================================ */
.badge-rate {
  flex-direction: column; align-items: flex-start; gap: 0;
  background: var(--grad-deep); color: #fff;
  padding: var(--space-s) var(--space-l);
  border-left: 7px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px oklch(from var(--color-secondary) l c h / 55%);
}
.badge-rate .up {
  font-size: var(--text-sm); font-weight: var(--weight-extrabold); letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 2px;
}
.badge-rate .big {
  font-size: var(--step-6, var(--step-5)); font-weight: var(--weight-extrabold);
  color: var(--color-accent); line-height: var(--line-none); letter-spacing: -.03em;
}
.badge-rate .lbl { font-size: var(--text-md); color: rgba(255,255,255,.88); margin-top: 4px; }
.badge-rate .lbl strong { color: #fff; }
@media (max-width: 980px) {
  .badge-rate { padding: var(--space-xs) var(--space-m); border-left-width: 5px; }
  .badge-rate .big { font-size: var(--step-4); }
  .badge-rate .up { font-size: var(--text-xs); }
  .badge-rate .lbl { font-size: var(--text-sm); }
}

/* ============================================================================
   FREE RIBBON (.free-ribbon)
   Sits directly under a dark hero, so it has to read as a bright band against it — accent
   ground, dark ink, full bleed. Used on /practices/, /gp/ and /specialists/, each with its own
   audience wording; it replaced the "100% free" cell those pages carried in their stat strips.
   ⚠️ Promoted here from practices.css (2026-09-16) the moment the second page wanted it —
   /gp/ and /specialists/ load gp.css and specialists.css, not practices.css. Same trap that
   broke the #twoways icons.
   ⚠️ It needs a FOCAL ELEMENT, not just centred text (owner: "the contrast sucks or something…
   or just it being plain text?"). The dark pill carries the claim; a centred sentence on its own
   reads as a caption.
   ⚠️ ONE LINE (owner: "IT NEEDS TO BE ONE LINE EACH ON BOTH"). The pill and the text do not wrap
   against each other above phone width, and the text after the pill is kept to a short clause —
   if a page needs a longer sentence, the sentence is wrong, not the ribbon.
   ============================================================================ */
.free-ribbon { background: var(--color-accent); color: var(--color-secondary); box-shadow: inset 0 -1px 0 oklch(from var(--color-secondary) l c h / 12%); }
.free-ribbon .wrap {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
  gap: var(--space-2xs) var(--space-s);
  padding-block: var(--space-s);
  text-align: center;
}
.fr-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--color-secondary); color: #fff;
  border-radius: var(--radius-full); padding: 7px var(--space-s);
  font-size: var(--text-md); font-weight: var(--weight-extrabold);
  letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 6px 18px oklch(from var(--color-secondary) l c h / 28%);
}
.fr-badge svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 3.2; }
.fr-text { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.fr-text strong { font-weight: var(--weight-extrabold); }
@media (max-width: 720px) {
  .free-ribbon .wrap { flex-wrap: wrap; }
  .fr-text { font-size: var(--text-md); }
}

/* ============================================================================
   BENEFIT TILES (.pr-benefits) — one white .card per audience, a ruled list inside.
   ⚠️ Promoted out of practices.css 2026-09-16 when the landing page took the same treatment;
   /practices/ does not load home.css and the home does not load practices.css, so leaving it
   behind would have rendered one of them unstyled. Same trap as the #twoways icons.
   ---- Why practices choose Conference.care: one white tile per audience (#benefits) ----
   Julian's original card treatment, restored 2026-09-15 (owner) — three tiles, one per audience,
   not the original six. A hairline three-column .pr-cols version sat here in between and is gone.
   Only the list inside each tile needs styling; the tile is the shared .card. */
.pr-benefits { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.pr-benefits li { padding: var(--space-xs) 0; border-top: 1px solid var(--color-border-soft); }
.pr-benefits li:first-child { border-top: 0; padding-top: 0; }
/* ⚠️ NOT display:block. The supporting <span> under each claim was removed 2026-09-15 and the
   citation <sup> now follows the <strong> directly — as a block it pushed every reference number
   onto its own line. */
.pr-benefits strong { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-secondary); line-height: var(--line-snug); }
.pr-benefits sup { line-height: 0; }
.pr-benefits sup button { background: none; border: 0; padding: 0 0 0 2px; font: inherit; font-size: var(--text-xs); color: var(--color-primary); cursor: pointer; }
.pr-benefits sup button:hover { text-decoration: underline; }

/* ============================================================================
   BUTTON DROPDOWN (details.menu-btn)
   A <details> styled as a button that opens a small menu. Native element on purpose: it carries
   the open/close, the keyboard and the screen-reader semantics without a line of JS. site.js adds
   only close-on-outside-click and Escape.
   ⚠️ The <summary> IS the button — it takes .btn plus a variant. Its default marker is stripped in
   both syntaxes; Safari still needs the -webkit one.
   ============================================================================ */
/* ⚠️ framework/base.css gives :where(details) a border, radius and padding — which drew a second
   box around the button. Reset all three here; the <summary> carries the whole appearance. */
details.menu-btn { position: relative; display: inline-block; border: 0; border-radius: 0; padding: 0; }
details.menu-btn > summary { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; list-style: none; }
details.menu-btn > summary::-webkit-details-marker { display: none; }
details.menu-btn > summary::marker { content: ''; }
details.menu-btn .menu-caret { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
details.menu-btn[open] .menu-caret { transform: rotate(180deg); }
details.menu-btn .menu-btn-list {
  position: absolute; z-index: 20; top: calc(100% + var(--space-2xs)); left: 0; min-width: 240px;
  display: flex; flex-direction: column; padding: var(--space-2xs);
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
details.menu-btn .menu-btn-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md);
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-secondary);
}
details.menu-btn .menu-btn-list a:hover { background: var(--brand-25); color: var(--color-primary); }
details.menu-btn .menu-btn-list a svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .55; }
@media (prefers-reduced-motion: reduce) { details.menu-btn .menu-caret { transition: none; } }


/* ============================================================================
   CONTRAST-AWARE INK CONTEXTS — WCAG AA, added 2026-09-16
   ============================================================================
   The problem this solves. The AA fix makes the eyebrow, links and the primary button
   DARKER (brand-600/700), which is correct on white and invisible on a dark band. The
   trial handled that with `.eyebrow.on-dark`, i.e. a class every author must remember on
   every dark section forever. An audit of all 36 built pages found 158 eyebrows, 32 of
   them on a dark ground — and the class is currently a NO-OP in this file, so it was never
   load-bearing and was omitted freely. Tagging ~40 call sites by hand would have shipped
   correct today and rotted on the next new page.

   So the ground declares the ink, and every descendant inherits it. A new page that reuses
   any existing dark section class is correct with no action. Only a brand-new dark ground
   needs a line here — one list, one place, and a wrong one is visible immediately rather
   than silently.

   ⚠️ WHY TOKENS AND NOT A SECOND COLOUR RULE. `.section-head .eyebrow` is specificity
   (0,2,0). A context rule like `:where(.cc2-deep) .eyebrow` is (0,1,0) and LOSES to it, so
   the dark override would silently not apply in exactly the place it is most needed — a
   section head on a dark band. Custom properties dodge specificity entirely: only the
   ground sets the value, only the element sets the colour, and they never compete.

   ⚠️ BOTH DIRECTIONS ARE REQUIRED. A light card inside a dark section would otherwise
   inherit the dark ink and vanish. That is not hypothetical: `/` has a `.callout`
   (background: var(--brand-50)) carrying a prose link, inside `.cc2-deep`. The reset below
   is what keeps it readable. Buttons are exempt by construction — they set their own
   `color`, which beats the zero-specificity `:where(a)` rule.
   ============================================================================ */

/* --- Dark grounds: white-ish inks -------------------------------------------------- */
:where(
  .on-dark, .cc2-deep, .cta-band, .cta-card, .stat-callout, .gp-free, .site-foot, .site-footer,
  .comp-right, .calc-fig.hero, .video-frame, .type-card.feature,
  .ab-stats, .ab-manifesto, .ah-hero, .ah-problem, .ahd-hero1c-copy, .ahd-disc.deep,
  .cl-hero, .cl-cta, .cp-chooser, .cp-easy-out, .cp-session, .ad-band, .ct-cta,
  .cap-answer, .cap-panel, .cc2-role.dark, .hiw, .hiw-cine-frame, .inv-hero, .inv-splash,
  .jnote, .mk-hero, .ou-hero, .ou-pledge, .fc-hero, .fp-close, .problem, .c1-cta,
  .rs-studies, .sp-hero, .yc-hero, .yc-close
) {
  /* ⚠️ WHITE, not a brand tint. --grad-deep runs down to --brand-600, and content spans the
     whole band, so brand-600 is a ground text really sits on. Against it: brand-100 is 3.82:1,
     brand-200 is 3.18:1, brand-300 is 2.72:1 — all below 4.5:1. Only white clears it, at 4.68:1.
     The trial's brand-100 would have shipped a failure. (.ou-hero already sets a white eyebrow by
     hand, so this matches existing practice rather than inventing it.) */
  --eyebrow-ink:     var(--color-surface);
  --link-ink:        var(--color-surface);
  /* The darkened pill sinks into a dark band, so invert it: white pill, brand-800 text.
     ⚠️ var(--color-surface), never a literal #fff — hard rule 6, zero raw hex outside :root. */
  --btn-primary-bg:  var(--color-surface);
  --btn-primary-ink: var(--brand-800);
}

/* --- Light surfaces: reset, so a card inside a dark band stays readable ------------- */
:where(.callout, .card, .cc2-card, .cc2-table, .stat-card, .ou-stat, .ou-step, .ou-paper, .flow-card, .tq-card.light) {
  --eyebrow-ink:     var(--brand-700);
  --link-ink:        var(--brand-700);
  --btn-primary-bg:  var(--grad-primary);
  --btn-primary-ink: var(--color-primary-content);
}