/**
 * Univa 2026 redesign — design tokens + components.
 * Ported from the design prototype spec (New design/CLAUDE.md). Mobile-first;
 * desktop layouts kick in at >=900px. Loaded after style.css.
 */

/* ============================== TOKENS ============================== */
:root {
  /* core thread swatches */
  --yellow:#F7D021; --cream:#F4EAD6; --navy:#1F5C8B; --ice:#E6F0F9;
  --green:#2B6103; --purple:#873F9F; --gold:#F5A00B; --sky:#8ECBF4; --lime:#D7E12A;
  /* brand teals */
  --teal:#17627A; --ink:#123A47; --footer:#0F2E38;
  /* neutrals */
  --body:#3B4952; --muted:#4A5A63; --label:#6E7B84; --label-warm:#8A7F6B;
  --border:#E3DCCB; --border-2:#E7DFCC; --border-ice:#D6E4F1; --hairline:#EFE7D6;
  /* condition accents */
  --acc-eating:#873F9F; --acc-anorexia:#2B6103; --acc-arfid:#1F5C8B; --acc-referred:#F5A00B;
  /* rhythm */
  --container:1120px; --radius:18px;
}

/* ============================== BASE ============================== */
body.univa-2026 {
  /* !important overrides legacy style.css `body{font-family:"Work Sans"!important}`
     so the whole redesign inherits Nunito Sans (James's typeface). Mono classes
     keep their own font-family via their element-level rules. */
  font-family:'Nunito Sans',system-ui,sans-serif !important;
  color:var(--muted); background:#fff; -webkit-font-smoothing:antialiased;
  margin:0; line-height:1.55;
}
.univa-2026 a:not(.uh-btn) { color:var(--teal); text-decoration:none; }
.univa-2026 a:not(.uh-btn):hover { color:var(--ink); }
.univa-2026 h1,.univa-2026 h2,.univa-2026 h3 {
  font-weight:900; letter-spacing:-.02em; color:var(--teal);
  text-wrap:balance; line-height:1.08; margin:0;
}
.univa-2026 h1 { font-size:clamp(26px,5vw,46px); line-height:1.03; }
.univa-2026 h2 { font-size:clamp(21px,2.7vw,30px); letter-spacing:-.01em; }
/* Referred page: James sizes every desktop section heading at 34px (30px elsewhere) */
body.cond-referred .vp-desktop h2 { font-size:34px; }
/* per-heading desktop size overrides (James: condition empathy + closing CTA = 32px; Home midnight = 36px) */
.vp-desktop .uh-h2--32 { font-size:32px; }
.vp-desktop .uh-h2--36 { font-size:36px; }
.univa-2026 h3 { font-size:clamp(18px,2.4vw,24px); }
.univa-2026 p { margin:0; }
.univa-2026 img { max-width:100%; }
.uh-wrap { max-width:var(--container); margin:0 auto; }
.uh-section { padding:clamp(44px,7vw,88px) 0; }

/* section backgrounds */
.bg-white{background:#fff;} .bg-cream{background:var(--cream);} .bg-ice{background:var(--ice);}
.bg-navy{background:var(--navy);} .bg-green{background:var(--green);} .bg-ink{background:var(--ink);}
.bg-cream-grad{background:linear-gradient(180deg,#FDF4E8,#F6E8D5);}

/* ============================== TYPE HELPERS ============================== */
.uh-eyebrow { font-weight:800; font-size:11px; letter-spacing:.04em; color:var(--teal);
  background:var(--ice); padding:6px 11px; border-radius:999px; display:inline-block; }
/* bare uppercase micro-label / section kicker — no pill background, unlike .uh-eyebrow.
   Used both as plain <p> labels and as reset .uh-acc__head labels (the background:none;
   padding:0 reset is a no-op on a plain element, so it's safe to bake into the base rule). */
.uh-kicker { font-weight:900; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--_acc,var(--teal)); background:none; padding:0; }
.uh-kicker--sm { font-size:11px; }
.uh-lead { font-size:clamp(13.5px,1.5vw,15px); color:var(--muted); }
.uh-muted { color:var(--label); }
.uh-center { text-align:center; }
/* lime key-sentence highlighter (§8) */
.uh-mark { background:linear-gradient(180deg,transparent 64%,rgba(215,225,42,.5) 64%);
  font-weight:800; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ============================== BUTTONS (§8) ============================== */
.uh-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px;
  font-weight:800; font-size:15px; padding:14px 24px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .12s ease, background .12s ease; line-height:1; text-align:center; text-decoration:none; }
.uh-btn:hover { transform:translateY(-1px); }
.uh-btn--primary { background:var(--ink); color:var(--cream); }
.uh-btn--primary:hover { color:var(--cream); background:#0e2f3a; }
.uh-btn--secondary { border-color:var(--ink); color:var(--ink); background:transparent; }
.uh-btn--secondary:hover { color:var(--ink); background:rgba(18,58,71,.06); }
.uh-btn--ghost { border-color:#D8D2C6; color:var(--label-warm); background:transparent; }
.uh-btn--ghost:hover { color:var(--ink); border-color:var(--ink); }
/* UW-273: withdrawn-programme CTA placeholder — same box as a real button, inert treatment.
   Not interactive: no :hover rule, no cursor:pointer (inherits default). */
.uh-btn--soon { border-color:var(--border); color:var(--muted); background:#F3EFE4; cursor:default; }

/* UW-285 — "Load more posts" loading state. The button is an <a>, which has no native
   disabled state, so pointer-events:none does that job while it's mid-fetch. */
.uh-load-more__spinner { display:none; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:uh-spin .6s linear infinite; }
#uh-load-more.is-loading { pointer-events:none; opacity:.7; }
#uh-load-more.is-loading .uh-load-more__spinner { display:inline-block; }
@keyframes uh-spin { to { transform:rotate(360deg); } }
/* UW-273 — the 2-up programme grid computes align-items: start, so a card that is
   shorter than its row (the withdrawn one, which emits no CTA anchors) would sit
   15px proud of its siblings. Stretching only the programme cards keeps the four
   card bottoms aligned without touching any other .uh-grid--2 on the site. */
.uh-grid--2 > .uh-prog { align-self: stretch; }
/* on dark CTA sections (#1F5C8B) */
.bg-navy .uh-btn--primary,.bg-green .uh-btn--primary { background:var(--gold); color:var(--ink); }
.bg-navy .uh-btn--secondary,.bg-green .uh-btn--secondary { border-color:rgba(244,234,214,.6); color:var(--cream); }
.bg-navy .uh-btn--secondary:hover,.bg-green .uh-btn--secondary:hover { background:rgba(244,234,214,.1); color:var(--cream); }

/* inline "learn more" link */
.univa-2026 a.uh-link, .univa-2026 button.uh-link { font-weight:800; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; color:var(--teal); }

/* ============================== CARDS (§7) ============================== */
.uh-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; border-top:4px solid var(--_acc,var(--teal)); }
.univa-2026 .uh-card h3 { color:rgb(23,98,122); font-weight:800; font-size:17px; letter-spacing:-.01em; margin:14px 0 8px; white-space:nowrap; }
/* multi-word feature titles must wrap (James wraps them) — otherwise nowrap forces that card's
   grid track wider than its siblings, breaking equal box widths. Uppercase .uh-cat labels keep nowrap. */
.univa-2026 .uh-card h3:not(.uh-cat) { white-space:normal; }
/* eating-difficulties only: a touch more breathing room above/below the feature-card titles */
body.cond-eating .uh-card h3:not(.uh-cat) { margin:20px 0 12px; }
.uh-card p { color:var(--muted); font-size:13px; line-height:1.5; margin-top:8px; }
.uh-card p.uh-link-wrap { font-size:12.5px; }
.uh-card--b3 p { margin-top:0; }
@media (min-width:900px){
  .uh-card--b3 p { font-size:13.5px; }
  .uh-card--b5 p { font-size:14px; margin-top:12px; }
  .uh-card p.uh-link-wrap { font-size:13.5px; }
  .univa-2026 .uh-card--b5 h3.uh-cat { font-size:12px; }
}
.uh-chip { width:42px; height:42px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font-weight:900; font-size:18px; margin-bottom:14px;
  color:var(--_acc,var(--teal)); background:color-mix(in srgb, var(--_acc,var(--teal)) 14%, #fff); }
/* 2026-07-31: the tile now holds a bespoke line icon instead of the ◇ glyph */
.uh-chip svg { display:block; }
/* condition accents applied via modifier */
.acc-eating{--_acc:var(--acc-eating);} .acc-anorexia{--_acc:var(--acc-anorexia);}
.acc-arfid{--_acc:var(--acc-arfid);} .acc-referred{--_acc:var(--acc-referred);}
.acc-teal{--_acc:var(--teal);} .acc-sky{--_acc:var(--sky);} .acc-gold{--_acc:var(--gold);}

/* round avatar with the ice/cream radial wash (Our story — advisors/contributors).
   Base is the common 60px size; explicit size modifiers cover the 4 sizes James actually
   uses (54/60/64/76px) so each stays pixel-identical to its original inline style. */
.uh-avatar { width:60px; height:60px; border-radius:50%; margin:0 auto; overflow:hidden;
  background:radial-gradient(60% 60% at 40% 35%,rgba(142,203,244,.4),transparent 70%),linear-gradient(155deg,#EAF3FB,#F4EAD6);
  border:1px solid var(--border-ice); }
.uh-avatar--54 { width:54px; height:54px; }
.uh-avatar--64 { width:64px; height:64px; margin:2px auto 0; }
.uh-avatar--76 { width:76px; height:76px; margin:0; }

/* advisor / contributor card — #fff, ice border, accent top rule (Our story).
   .uh-card--person is the compact "contributor" card (3px top rule, centred text);
   .uh-card--person-lg is the larger "advisor" card (4px top rule, avatar+text row). */
.uh-card--person { background:#fff; border:1px solid var(--border-ice);
  border-top:3px solid var(--_acc,var(--teal)); border-radius:16px; padding:16px; text-align:center; }
.uh-card--person-lg { border-radius:20px; padding:24px; border-top-width:4px;
  text-align:left; display:flex; gap:16px; align-items:center; }

/* programme / pricing card (Programmes page — §16.2; James spec §7) */
.uh-prog { display:flex; flex-direction:column; height:100%; }
.univa-2026 .uh-prog > h3 { white-space:normal; margin:4px 0 0; font-size:18px; color:var(--_acc,var(--teal)); }
.uh-prog__label { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--label-warm,#8A7F6B); margin:14px 0 2px; }
.uh-prog__val { font-size:13px; color:var(--body); line-height:1.5; margin:0; }
/* WHAT'S INSIDE — divider + navy label + accent-tinted circular toggle */
.uh-prog .uh-prog__inside { border:0; border-top:1px solid var(--border); border-radius:0; background:none; padding:16px 0 0; margin-top:16px; }
.uh-prog__inside .uh-acc__head { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.uh-prog__inside .uh-acc__toggle { width:34px; height:34px; font-size:20px;
  background:color-mix(in srgb, var(--_acc,var(--teal)) 16%, #fff); color:var(--_acc,var(--teal)); }
.uh-prog__inside .uh-acc.is-open .uh-acc__body,
.uh-prog__inside.uh-acc.is-open .uh-acc__body { max-height:1400px; }
.uh-prog__inside ul { margin:0; padding-left:18px; }
.uh-prog__inside li { font-size:12.5px; color:var(--body); line-height:1.5; margin-bottom:8px; }
/* rationale note (desktop-only, always visible) + price + sub-line */
.uh-prog__note { background:#F3ECDE; color:#6B5A2E; border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.45; margin-top:16px; min-height:90px; }
.uh-prog__price { margin-top:16px; font-size:24px; font-weight:900; color:var(--teal); line-height:1; }
.uh-prog__price span { font-size:12.5px; font-weight:600; color:var(--muted); }
.uh-prog__sub { color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:6px; }
/* desktop price/sub sizing (James spec: [£X] 26px, span 15px/700, sub 13px) */
.vp-desktop .uh-prog__price { font-size:26px; }
.vp-desktop .uh-prog__price span { font-size:15px; font-weight:700; color:var(--label-warm,#8A7F6B); }
.vp-desktop .uh-prog__sub { font-size:13px; margin-top:4px; color:var(--label-warm,#8A7F6B); }
.uh-prog__cta { margin-top:14px; display:flex; gap:10px; }
.vp-mobile .uh-prog__cta { flex-direction:column; align-items:stretch; }
.vp-mobile .uh-prog__cta .uh-btn { width:100%; text-align:center; }
/* desktop: push the WHAT'S INSIDE group to the bottom so dividers align across cards */
.vp-desktop .uh-prog__inside { margin-top:auto; }
/* equal-size the 4 programme cards (min-height) but DON'T stretch them to each other,
   so expanding one card's accordion grows only that card, not its neighbours */
#programmes-d .uh-grid--2 { align-items:start; }
#programmes-d .uh-prog { min-height:600px; height:auto; }
/* breathing room below FORMAT before the WHAT'S INSIDE divider (taller boxes) */
.vp-desktop .uh-prog__val:has(+ .uh-prog__inside) { margin-bottom:40px; }

/* chooser (self-select) card — flat, no accent top-border (§7) */
.uh-choose { background:#F7FAFD; border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; }
.uh-choose p { color:var(--body); font-size:13.5px; line-height:1.5; margin:0 0 10px; }
.uh-choose .uh-link { margin-top:auto; }
.vp-desktop .uh-choose { min-height:120px; }

/* ============================== OPTION CARDS ============================== */
/* accent option card — ice fill, accent left rule (condition/HCP "choose your path" cards,
   and the registration modal's selectable programme-choice cards). Base = the registration
   modal's compact white card; .uh-option--fill is the larger ice-tinted card used elsewhere. */
.uh-option { display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--border); border-left:4px solid var(--_acc,var(--teal));
  border-radius:13px; padding:12px 13px; }
.uh-option.is-on { box-shadow:0 0 0 2px var(--ink) inset; }
.uh-option--fill { display:block; background:#F7FAFD; border-left-width:5px;
  border-radius:16px; padding:24px; }

/* light numbered steps (How subscribing works) */
.uh-nstep { display:flex; gap:14px; align-items:flex-start; }
.uh-nstep + .uh-nstep { margin-top:16px; }
.uh-nstep__n { flex:none; width:30px; height:30px; border-radius:50%; background:var(--ice); color:var(--teal); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:15px; }
.univa-2026 .uh-nstep h3 { margin:2px 0 4px; font-size:15px; color:var(--teal); font-weight:800; white-space:normal; }
.uh-nstep p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

/* urgent-care callout (§8) */
.uh-callout { background:#FBF3E0; border:1px solid #F0DFB4; border-left:4px solid var(--gold);
  border-radius:12px; padding:16px 18px; color:#6B5A2E; font-size:14px; line-height:1.55; }
.uh-callout strong { color:#8A5A00; }

/* checklist row (§7) */
.uh-check { display:flex; gap:12px; align-items:flex-start; }
.uh-check::before { content:"✓"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--ice); color:var(--teal); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:14px; }
/* smaller tick-circle sizes used by the registration/confirmation summary checklists
   (mobile 22px vs desktop 24px, vs the 26px default used elsewhere) */
.uh-check--sm { gap:9px; }
.uh-check--sm::before { width:22px; height:22px; font-size:12px; }
.uh-check--md { gap:11px; }
.uh-check--md::before { width:24px; height:24px; font-size:12px; }

/* quote / testimonial (§7) */
.uh-quote { background:#fff; border-radius:var(--radius); padding:26px 24px; }
.uh-quote .uh-quote__mark { font-size:34px; line-height:.5; color:var(--gold); font-weight:900; }
.uh-quote p { color:var(--teal); font-weight:800; font-size:15px; line-height:1.45; margin:8px 0 0; }
@media (min-width:900px){
  .uh-quote .uh-quote__mark { font-size:44px; line-height:.6; }
  .uh-quote p { font-size:17px; }
}

/* ============================== GRIDS ============================== */
.uh-grid { display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){
  .uh-grid--2 { grid-template-columns:repeat(2,1fr); }
  .uh-grid--3 { grid-template-columns:repeat(3,1fr); }
  .uh-grid--4 { grid-template-columns:repeat(4,1fr); }
}

/* ============================== CAROUSEL (§14) ============================== */
.uh-hscroll { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding:2px; }
.uh-hscroll::-webkit-scrollbar { display:none; }
.uh-hscroll > * { flex:none; width:80%; scroll-snap-align:center; }
.uh-dots { display:flex; gap:7px; justify-content:center; margin-top:16px; }
.uh-dot { width:8px; height:8px; border-radius:999px; background:#D8C7A8; border:0; padding:0;
  transition:width .2s ease,background .2s ease; cursor:pointer; }
.uh-dot.is-active { width:18px; background:var(--teal); }
@media (min-width:900px){
  /* on desktop, carousels become static grids */
  .uh-hscroll.md-grid { display:grid; overflow:visible; grid-template-columns:repeat(var(--cols,4),1fr); }
  .uh-hscroll.md-grid > * { width:auto; }
  .md-hide-dots { display:none; }
}

/* ============================== ACCORDION (§7/§14) ============================== */
.uh-acc { border:1px solid var(--border); border-radius:14px; padding:16px 18px; background:#fff; }
.uh-acc + .uh-acc { margin-top:12px; }
/* nested inside a panel or card, the accordion must not draw a second box
   (registration's "Change programme" toggle sits inside the plan-summary panel) */
.uh-acc--bare { border:0; border-radius:0; padding:0; background:none; }
.uh-acc__head { display:flex; gap:12px; align-items:center; justify-content:space-between;
  width:100%; background:none; border:0; padding:0; cursor:pointer; font:inherit; text-align:left;
  color:var(--teal); font-weight:800; font-size:13.5px; }
.uh-acc__toggle { flex:none; width:22px; height:22px; border-radius:50%; background:var(--ice);
  color:var(--teal); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:15px; }
.uh-acc__body { color:var(--muted); font-size:12.5px; line-height:1.5; overflow:hidden; max-height:0;
  transition:max-height .28s ease, margin .28s ease; }
.uh-acc.is-open .uh-acc__body { max-height:600px; margin-top:9px; }
@media (min-width:900px){
  /* evidence/FAQ often render open in a 2-col grid on desktop */
  .uh-acc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; grid-auto-rows:1fr; }
  /* the stacked-list `.uh-acc + .uh-acc` top margin must not apply inside the grid — it made the
     2nd/4th boxes render 12px shorter than their row-mates, breaking equal box sizing. */
  .uh-acc-grid .uh-acc + .uh-acc { margin-top:0; }
  /* James: FAQ question 16px, evidence card title 17px, shared answer copy 14.5px/1.55 */
  .uh-acc__head { font-size:16px; }
  .uh-acc--evidence .uh-acc__head { font-size:17px; cursor:default; }
  .uh-acc__body { font-size:14.5px; line-height:1.55; }
  .uh-acc.is-open .uh-acc__body { margin-top:8px; }
  /* align question baselines across a grid row regardless of 1- vs 2-line questions */
  /* no min-height — James's cards keep the answer tight under the question even when
     a sibling card's question wraps to two lines */
  .uh-acc-grid .uh-acc__head { align-items:flex-start; line-height:1.3; }
}

/* ============================== HEADER / NAV (§4) ============================== */
.uh-header { border-bottom:1px solid var(--hairline); background:#fff; }
.uh-header .uh-wrap { max-width:none; padding:0 36px; }
.uh-header__bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; }
.uh-nav { display:none; gap:18px; align-items:center; }
/* repeat the class so this outguns the base `.univa-2026 a:not(.uh-btn)` teal (0-1-2) —
   James's nav links are charcoal, not link-teal */
.uh-nav.uh-nav a { color:var(--body); font-weight:700; font-size:14px; }
.uh-nav.uh-nav a.is-active { color:var(--green); font-weight:800; border-bottom:2px solid var(--green); padding-bottom:2px; }
.uh-header__right { display:none; align-items:center; gap:16px; font-weight:700; }
.uh-header__right.uh-header__right > a:not(.uh-pill-link):not(.uh-account) { color:var(--body); font-size:13.5px; }
.uh-pill-link.uh-pill-link { border:1px solid #D8D2C6; color:var(--label-warm); border-radius:999px; padding:7px 13px; font-weight:700; font-size:12.5px; }
/* active state for the secondary-nav pill (Healthcare professionals on its own page) */
.univa-2026 .uh-pill-link.is-active { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.univa-2026 .uh-pill-link.is-active:hover { color:var(--cream); }
/* active state for the plain secondary-nav link (Our story on its own page). James uses the
   same green underline as the primary nav; the drawer wraps the text so the rule can hug it. */
.univa-2026 .uh-header__right a.is-active { color:var(--green); font-weight:800;
  border-bottom:2px solid var(--green); padding-bottom:2px; }
.uh-drawer__secondary a.is-active > span { color:var(--green); font-weight:800;
  border-bottom:2px solid var(--green); padding-bottom:3px; }
.uh-account { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink); font-weight:800; }
.uh-account:hover { color:var(--ink); }
.uh-account span { font-size:10px; letter-spacing:.02em; }
.uh-burger { display:flex; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:6px; }
.uh-burger span { width:22px; height:2.5px; background:var(--ink); border-radius:2px; display:block; }
.uh-burger .uh-burger__x { display:none; }
.uh-burger.is-open span { display:none; }
.uh-burger.is-open .uh-burger__x { display:block; }

/* mobile nav drawer (2026-07-31: replaces the inline stacked list) */
.uh-drawer { display:none; position:fixed; inset:0; z-index:80; background:#fff; flex-direction:column; }
.uh-drawer.is-open { display:flex; }
.uh-drawer__head { flex:none; height:76px; }
.uh-drawer__body { flex:1; overflow-y:auto; padding:4px 18px 20px; }
.uh-drawer__primary { display:flex; flex-direction:column; }
.uh-drawer__primary a { display:flex; align-items:center; min-height:48px; font-weight:700; font-size:14px; color:var(--body); }
.uh-drawer__primary a.is-active > span { color:var(--green); border-bottom:2px solid var(--green); padding-bottom:2px; font-weight:800; }
body.cond-arfid .uh-drawer__primary a.is-active > span { color:var(--navy); border-bottom-color:var(--navy); }
.uh-drawer__secondary { margin-top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.uh-drawer__secondary a { display:flex; align-items:center; min-height:44px; font-weight:700; font-size:15px; color:var(--body); }
.uh-drawer__secondary a.uh-pill-link { min-height:0; font-size:13.5px; padding:11px 15px; }
.uh-drawer__foot { flex:none; background:var(--ink); padding:13px 18px; text-align:center;
  font-weight:700; font-size:12px; line-height:1.45; color:var(--sky); }
.uh-drawer__foot span { color:var(--cream); font-weight:800; }
@media (min-width:992px){
  .uh-nav,.uh-header__right { display:flex; }
  .uh-burger,.uh-drawer { display:none !important; }
}

/* account panel — "My Univa" / drawer subscriber card (§4) */
.uh-acct { position:relative; }
.uh-acct__menu { display:none; position:absolute; top:calc(100% + 14px); right:0; width:272px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 28px 54px -24px rgba(18,58,71,.45); padding:18px; z-index:40; text-align:left; }
.uh-acct__menu.is-open { display:block; }
.uh-acct-card { margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; }
.uh-acct-label { font-weight:900; font-size:10.5px; letter-spacing:.06em; color:var(--label-warm); }
.uh-acct-label + .uh-acct-label,
.uh-acct__link + .uh-acct-label,
/* UW-255: "Manage my plan" is a form, so the divider rule has to see the form too. */
.uh-acct__form + .uh-acct-label { margin-top:15px; padding-top:15px; border-top:1px solid var(--hairline); }
.uh-acct__link { display:inline-block; margin-top:6px; font-weight:800; font-size:14.5px; color:var(--teal);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
/* The submit button must be visually indistinguishable from its sibling links. */
.uh-acct__link--button { appearance:none; -webkit-appearance:none; background:none; border:0;
  padding:0; font-family:inherit; line-height:inherit; text-align:left; cursor:pointer; }

/* ============================== TRUST BAR (§5) ============================== */
.uh-trust { background:var(--ink); color:var(--sky); font-weight:700; font-size:12.5px; }
/* 2026-07-31: James dropped the ◇ prefix in favour of a dimmed "•" between items */
.uh-trust__row { display:none; gap:14px; justify-content:center; padding:16px 36px; flex-wrap:wrap; font-size:13.5px; }
.uh-trust__sep { opacity:.45; }
.uh-trust__car { padding:13px 0; }
.uh-trust__car .uh-hscroll > * { width:100%; text-align:center; padding:0 18px; }
@media (min-width:900px){ .uh-trust__row{display:flex;} .uh-trust__car{display:none;} }

/* Programmes "guided" chooser — James's alternate (non-default) state for the
   "Which programme is right for you?" section: two questions, then a recommended
   programme card. Rendered inline but `hidden`, same convention as the membership
   registration branches, so the WP port inherits the copy. Inert until wired. */
.uh-wizard { margin-top:20px; }
.uh-wizard__q + .uh-wizard__q { margin-top:18px; }
.uh-wizard__prompt { font-weight:800; font-size:13px; color:var(--ink); margin-bottom:9px; }
@media (min-width:900px){ .uh-wizard__prompt { font-size:16px; margin-bottom:16px; } }
.uh-wizard__opts { display:flex; flex-direction:column; gap:9px; }
.uh-choose--opt { display:block; width:100%; text-align:left; font:inherit; cursor:pointer; }
.uh-choose--opt:hover { border-color:var(--teal); background:#EFF5FA; }
.uh-wizard__reset { margin-top:12px; text-align:center; font-size:12px; font-weight:800;
  color:var(--label-warm); cursor:pointer; }

/* ARFID-only resources band — sits between the FAQs and the safety strip.
   Same ink/sky palette as the safety strip, but its own copy per viewport. */
.uh-resources { background:var(--ink); color:var(--sky); text-align:center;
  font-size:11.5px; line-height:1.5; padding:14px 18px; }
.uh-resources strong { color:var(--cream); }
@media (min-width:900px){ .uh-resources { font-size:13.5px; padding:18px 36px; } }

/* ============================== SEAM (§9) ============================== */
.uh-seam { width:100%; height:44px; overflow:hidden; }
@media (min-width:900px){ .uh-seam{ height:76px; } }
.uh-seam .uh-threads { display:block; width:100%; height:100%; }

/* ============================== SAFETY STRIP (§13) ============================== */
.uh-safety { background:var(--ink); color:var(--sky); text-align:center; padding:14px 0; font-size:11.5px; line-height:1.5; }
.uh-safety strong { color:var(--cream); }
@media (min-width:900px){ .uh-safety { padding:16px 0; font-size:13.5px; } }

/* ============================== FOOTER (§13) ============================== */
.uh-footer { background:var(--cream); color:#4A5A63; padding:44px 0; text-align:left; }
.uh-footer .uh-wrap { max-width:none; padding:0 36px; }
/* doubled class beats both `.univa-2026 a:not(.uh-btn)` (teal) and legacy `footer ul li a` */
.uh-footer.uh-footer a { color:#4A5A63; font-size:inherit; font-weight:400; text-transform:none; }
.uh-footer.uh-footer a:hover { color:var(--teal); }
/* current-page link gets James's bold ink emphasis */
.uh-footer.uh-footer a.is-current { color:var(--ink); font-weight:800; }
.uh-footer__tag { color:var(--ink); font-weight:800; font-size:13px; margin:8px 0 0; }
.uh-footer__grid { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.uh-footer__brand { max-width:280px; }
/* logo slot is 41.7x22 mobile / 49.2x26 desktop in the raw project, scaled 1.6x per request
   (matches the header logo's 26->42 change) — override the inline width/height attributes
   the SVG ships with */
.uh-footer__brand svg { width:auto !important; height:35px !important; }
.uh-footer__cols { display:flex; gap:44px; flex-wrap:wrap; font-size:12px; }
.uh-footer h4 { color:var(--teal); font-weight:800; font-size:1em; margin:0 0 7px; }
.uh-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:1em; }
.uh-footer ul li { text-align:left; padding:0; } /* kill legacy style.css `footer ul li{padding:8px 0}` */
@media (min-width:900px){
  .uh-footer__tag { font-size:15px; margin-top:12px; }
  .uh-footer__cols { font-size:13px; gap:44px; }
  .uh-footer h4 { margin-bottom:10px; }
  .uh-footer ul { gap:7px; }
  .uh-footer__brand svg { height:42px !important; }
}
/* James mobile footer: For families (left, spans) + About/Professionals stacked right.
   Breakpoint matches the page's mobile/desktop main-content cutover (900px) — at 640px this
   left a 641-899px gap where main content still rendered mobile but the footer had already
   flipped to the flex-wrap desktop layout, orphaning "For professionals" with a huge gap. */
@media (max-width:899px){
  .uh-footer { padding:22px 0; } /* raw project mobile footer: 22px 18px */
  .uh-footer .uh-wrap { padding:0 18px; }
  .uh-footer__cols { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
  .uh-footer__cols > :first-child { grid-row:span 2; }
}
/* James mobile header: tighter side padding */
@media (max-width:640px){ .uh-header .uh-wrap { padding:0 18px; } }
/* legacy style.css compensates for the OLD fixed navbar with `main{padding-top:42px}` at <=991px;
   our redesign header isn't fixed, so that offset just leaves a stray white gap above the hero. */
@media (max-width:991px){ body.univa-2026 main { padding-top:0; } }
/* James mobile Home: side padding for section content (image/carousel bleeds stay full-width).
   Scoped to .univa-home so other mobile pages/desktop are untouched. */
@media (max-width:640px){
  .univa-home.vp-mobile .uh-section .uh-wrap { padding:0 18px; }
  .univa-home.vp-mobile .uh-hero-section .uh-wrap { padding:0 18px; }
  .univa-home.vp-mobile .uh-hero__bleed--m { margin-left:-18px; margin-right:-18px; width:calc(100% + 36px); max-width:none; }
}
/* James mobile: safety strip needs the same inset (all pages, mobile only — never affects desktop) */
@media (max-width:640px){ .vp-mobile .uh-safety .uh-wrap { padding:0 18px; } }
/* James mobile condition pages (eating-difficulties/anorexia/arfid/referred): same treatment as Home —
   18px side gutter on section content + James's tight 24px vertical section rhythm (vs the 44-88px
   desktop clamp). Scoped to .univa-condition.vp-mobile so desktop and other pages are untouched. */
@media (max-width:640px){
  .univa-condition.vp-mobile .uh-section,
  .univa-referred.vp-mobile .uh-section { padding:24px 0; }
  .univa-condition.vp-mobile .uh-section .uh-wrap,
  .univa-referred.vp-mobile .uh-section .uh-wrap { padding:0 18px; }
  .univa-condition.vp-mobile .uh-hero-section .uh-wrap,
  .univa-referred.vp-mobile .uh-hero-section .uh-wrap { padding:0 18px; }
  /* James mobile condition hero: image is a full-bleed band under the navbar (no inset card/radius) */
  .univa-condition.vp-mobile .uh-hero-section .uh-ph,
  .univa-referred.vp-mobile .uh-hero-section .uh-ph {
    margin:0 -18px; width:calc(100% + 36px); min-height:210px;
    border-radius:0; box-shadow:none; }
}

/* ============================== HERO wash (§10) ============================== */
.uh-wash { position:relative; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(135,63,159,.16), transparent 60%),
    radial-gradient(120% 90% at 80% 20%, rgba(245,160,11,.14), transparent 60%),
    radial-gradient(120% 120% at 60% 90%, rgba(142,203,244,.18), transparent 60%),
    linear-gradient(155deg,#EAF3FB,#F7FBFE); }
.uh-wash .uh-threads { position:absolute; inset:0; }
.uh-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--label); }

/* uppercase category label used on condition cards (§7) */
.uh-card h3.uh-cat { text-transform:uppercase; letter-spacing:.05em; font-weight:900;
  font-size:11px; color:var(--_acc,var(--teal)); margin-bottom:8px; }

/* numbered thread-strand steps (§16) — no card borders */
.uh-steps { position:relative; display:grid; gap:22px; grid-template-columns:1fr; margin-top:30px; }
@media (min-width:900px){ .uh-steps{ grid-template-columns:repeat(3,1fr); gap:28px; } }
.uh-steps__thread { display:none; }
@media (min-width:900px){ .uh-steps__thread{ display:block; position:absolute; top:22px; left:8%; right:8%; height:60px; opacity:.6; } }
.uh-step { position:relative; text-align:center; }
.uh-step__n { width:32px; height:32px; border-radius:50%; background:var(--teal); color:#fff;
  font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; position:relative; z-index:1; }
.uh-step__n--lg { width:38px; height:38px; }
/* ink-filled step chip (Healthcare professionals "How it works") — replaces the class default teal */
.uh-step__n--ink { background:var(--ink); color:var(--cream); }
.uh-step p { color:var(--muted); font-size:12.5px; line-height:1.45; max-width:320px; margin:0 auto; }

/* referred note under the condition grid (§3) */
.uh-note { text-align:center; margin-top:24px; color:var(--muted); font-size:15px; }

/* hero layout — text fixed 540px left, illustration bleeds off the right edge (per James) */
.uh-hero-section { overflow:hidden; padding:56px 0 40px; }
.uh-hero { max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,40px); display:grid; gap:26px; grid-template-columns:1fr; align-items:center; }
.uh-hero__art img { display:block; width:100%; height:auto; }
@media (min-width:900px){
  .uh-hero { grid-template-columns:540px 1fr; column-gap:40px; padding-right:0; }
  .uh-hero__art { min-width:0; }
  .uh-hero__art img { width:754px; max-width:none; }
}
.uh-cta-row { display:flex; gap:11px; flex-wrap:wrap; margin-top:26px; }
.univa-2026 .uh-nhs { display:flex; align-items:center; gap:8px; margin-top:26px; font-size:13px; color:var(--label-warm); font-weight:700; }
.uh-nhs img { height:24px; width:auto; }

/* hero with a full-bleed masked photo behind the text — image edges dissolve into
   the cream (matches James: no visible image box). */
.uh-hero-photo { position:relative; overflow:hidden; }
.uh-hero-photo .uh-hero { position:relative; z-index:1; }
.uh-hero__bleed { display:block; object-fit:cover; pointer-events:none; }
/* mobile: full-width band, edges feathered via radial vignette */
.uh-hero__bleed--m { width:100%; height:280px; object-position:center; margin-bottom:20px;
  -webkit-mask-image:radial-gradient(140% 150% at 50% 45%,#000 68%,transparent 100%);
          mask-image:radial-gradient(140% 150% at 50% 45%,#000 68%,transparent 100%); }
/* desktop: right-bleeding 64%, left edge fades behind the text */
.uh-hero__bleed--d { position:absolute; top:0; bottom:0; right:-24px; height:100%; width:62%;
  object-fit:contain; object-position:bottom right; /* full illustration (feet incl.), bottom-anchored */
  -webkit-mask-image:linear-gradient(to right,transparent 2%,#000 42%);
          mask-image:linear-gradient(to right,transparent 2%,#000 42%); }

/* ============================== CONDITION-PAGE ADDITIONS (P2) ============================== */
/* NOTE: cards keep their coloured accent top-border per James's prototype.
   .uh-card--flat is retained as a no-op so existing markup stays valid. */
.uh-card--flat { }
/* per-group accent top-border thickness (James: feature 3px, condition-desktop 5px) */
.uh-card--b3 { border-top-width:3px; }
.uh-card--b5 { border-top-width:5px; }
.uh-card--linkbottom { display:flex; flex-direction:column; }
.uh-card--linkbottom > p.uh-link-wrap { margin-top:auto; padding-top:12px; }
/* semi-transparent so the thread art behind a card row shows through */
.uh-card--glass { background:rgba(255,255,255,.72); backdrop-filter:blur(2px); }

/* dual-block viewport toggles — James authors separate mobile + desktop blocks */
.vp-desktop { display:none; }
@media (min-width:900px){
  .vp-mobile { display:none !important; }
  .vp-desktop { display:block; }
}

/* accent-tinted eyebrow pills — one per condition accent (CLAUDE.md §1).
   On a cover hero the desktop pill's fill is swapped for the solid tint. */
.uh-eyebrow--eating { background:rgba(135,63,159,.10); color:var(--purple); }
.uh-eyebrow--anorexia { background:rgba(43,97,3,.10); color:var(--green); }
.uh-eyebrow--arfid { background:rgba(31,92,139,.10); color:var(--navy); }

/* image placeholder panels — real photography drops in later (D4) */
.uh-ph { position:relative; border-radius:20px; overflow:hidden; min-height:clamp(220px,32vw,360px);
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(135,63,159,.14), transparent 60%),
    radial-gradient(120% 90% at 80% 25%, rgba(245,160,11,.12), transparent 60%),
    linear-gradient(155deg,#EAF3FB,#F7FBFE);
  display:flex; align-items:flex-end; padding:16px; }
.uh-ph__cap { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.4;
  color:#2C6AA8; background:rgba(142,203,244,.28); border:1px solid rgba(142,203,244,.55);
  border-radius:9px; padding:7px 10px; max-width:82%; }
.uh-ph__quote { position:absolute; top:16px; left:16px; right:16px; color:var(--ink);
  font-weight:900; font-size:clamp(16px,2vw,20px); letter-spacing:-.01em; }
/* condition-page hero image = James's contained rounded card (real photo drops in later).
   Home is exempt (its hero uses .uh-hero__bleed, not .uh-ph). */
.uh-hero-section .uh-ph { border-radius:26px; box-shadow:0 34px 60px -34px rgba(18,58,71,.42); }
body.cond-referred .uh-hero-section .uh-ph { border-radius:16px; box-shadow:none; border:1px solid var(--border-ice); }

/* text + media split (reassurance / when-to-act sections) */
.uh-split { display:grid; gap:24px; grid-template-columns:1fr; align-items:center; }
.uh-split > .uh-lead + .uh-lead { margin-top:14px; }
@media (min-width:900px){
  .uh-split { grid-template-columns:1fr 1fr; gap:44px; }
  .uh-split--rev > :first-child { order:2; }
}
.uh-quote p.uh-quote__by { color:var(--_acc,var(--teal)); font-weight:800; font-size:12px; line-height:1.4; margin-top:12px; }
@media (min-width:900px){ .uh-quote p.uh-quote__by { font-size:13px; margin-top:16px; } }

/* big-number stat callout (e.g. ARFID care-gap) — ice fill, accent number */
.uh-stat { background:var(--ice); border:1px solid var(--border-ice); border-radius:var(--radius); padding:26px 24px; }
.uh-stat__n { font-weight:900; font-size:clamp(30px,4.5vw,52px); line-height:1.02; letter-spacing:-.02em; color:var(--_acc,var(--navy)); }
.uh-stat p { color:var(--muted); font-size:15px; margin-top:12px; }

/* per-page nav-active accent (base .is-active is green — matches Anorexia; others override).
   2026-08-04 raw project: ED purple, ARFID+Programmes navy, Referred #B26F08 amber, Our story purple */
body.cond-arfid .uh-nav.uh-nav a.is-active { color:var(--navy); border-bottom-color:var(--navy); }
body.cond-eating .uh-nav.uh-nav a.is-active { color:var(--purple); border-bottom-color:var(--purple); }
body.pg-programmes .uh-nav.uh-nav a.is-active { color:var(--navy); border-bottom-color:var(--navy); }
body.cond-referred .uh-nav.uh-nav a.is-active { color:#B26F08; border-bottom-color:#B26F08; }
body.pg-story .uh-header__right a.is-active { color:var(--purple); border-bottom-color:var(--purple); }
/* mobile drawer mirrors the same accents */
body.cond-eating .uh-drawer__primary a.is-active > span { color:var(--purple); border-bottom-color:var(--purple); }
body.pg-programmes .uh-drawer__primary a.is-active > span { color:var(--navy); border-bottom-color:var(--navy); }
body.cond-referred .uh-drawer__primary a.is-active > span { color:#B26F08; border-bottom-color:#B26F08; }
body.pg-story .uh-drawer__secondary a.is-active > span { color:var(--purple); border-bottom-color:var(--purple); }

/* dark referral card with numbered yellow-chip steps (Referred "what happens next") */
.uh-refcard { background:var(--ink); border-radius:var(--radius); padding:clamp(22px,3vw,34px); }
.uh-refstep { display:flex; gap:16px; align-items:flex-start; }
.uh-refstep + .uh-refstep { margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); }
.uh-refstep__n { flex:none; width:34px; height:34px; border-radius:50%; background:var(--yellow);
  color:var(--ink); font-weight:900; font-size:16px; display:flex; align-items:center; justify-content:center; }
.uh-refstep h3 { color:#fff; font-size:18px; font-weight:800; margin-bottom:6px; }
.uh-refstep p { color:#D9E6EC; font-size:15px; }
@media (max-width:640px){
  .uh-refstep__n { width:26px; height:26px; font-size:14px; }
  .uh-refstep h3 { font-size:14px; }
  .uh-refstep p { font-size:12.5px; }
  .uh-refstep + .uh-refstep { border-top:none; padding-top:0; margin-top:16px; }
}

/* ============================== MODALS: CALL / DEMO SHEETS (2026-07-31) ==============================
   James's prototype renders two layouts for the same dialog: a full-bleed sheet on
   mobile and a centred dialog over a scrim on desktop. One markup block serves both —
   the breakpoint swaps the presentation. Opened by any [data-open-modal] trigger. */
.uh-modal { display:none; position:fixed; inset:0; z-index:90; }
.uh-modal.is-open { display:flex; }
.uh-modal__scrim { display:none; }
.uh-modal__panel { flex:1; background:#fff; display:flex; flex-direction:column; min-width:0; }
.uh-modal__head { flex:none; display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:34px 18px 12px; border-bottom:1px solid var(--hairline); }
.uh-modal__title { font-weight:900; font-size:16px; color:var(--ink); letter-spacing:-.01em; }
.uh-modal__sub { display:none; }
.uh-modal__close { flex:none; width:32px; height:32px; margin-right:-6px; border:0; padding:0;
  border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.uh-modal__body { flex:1; overflow-y:auto; padding:16px 18px 22px; }
.uh-modal__body > p { font-size:12.5px; line-height:1.5; color:var(--muted); }
.uh-modal__cancel { display:none; }

@media (min-width:900px){
  .uh-modal { align-items:center; justify-content:center; padding:32px; background:rgba(18,58,71,.55); }
  .uh-modal__panel { flex:none; width:100%; max-width:720px; max-height:100%; overflow-y:auto;
    border-radius:22px; box-shadow:0 40px 80px -30px rgba(18,58,71,.6); }
  .uh-modal__head { align-items:flex-start; gap:18px; padding:28px 30px 20px; }
  .uh-modal__title { font-size:24px; letter-spacing:-.02em; }
  .uh-modal__sub { display:block; margin-top:8px; max-width:520px; font-size:14.5px; line-height:1.55; color:var(--muted); }
  .uh-modal__close { width:36px; height:36px; margin-right:0; }
  .uh-modal__body { overflow:visible; padding:24px 30px 30px; }
  .uh-modal__body > p { display:none; }   /* desktop shows the sub-copy in the head instead */
  .uh-modal__cancel { display:inline-flex; }
}

/* form controls inside a modal */
.uh-form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.uh-form__pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.uh-field { display:flex; flex-direction:column; gap:5px; }
.uh-field > span { font-weight:900; font-size:10px; letter-spacing:.06em; color:var(--label-warm); }
.uh-field > span .uh-field__opt { font-weight:700; letter-spacing:0; text-transform:none; }
.uh-field input,.uh-field textarea {
  font-family:'Nunito Sans',system-ui,sans-serif; font-size:13.5px; color:var(--body);
  padding:11px 12px; border:1px solid #D8D2C6; border-radius:12px; background:#fff; outline:none; width:100%; }
.uh-field textarea { resize:none; }
.uh-field input:focus,.uh-field textarea:focus { border-color:var(--teal); }
@media (min-width:900px){
  .uh-form { gap:14px; margin-top:0; }
  .uh-form__pair { grid-template-columns:1fr 1fr; gap:14px; }
  .uh-field input,.uh-field textarea { font-size:14.5px; padding:12px 14px; }
}

/* selectable pills ("who are you worried about?" / "when suits you?")
   NB named .uh-pick, not .uh-chip — .uh-chip is already the 42px card icon tile. */
.uh-picks { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.uh-pick { padding:9px 14px; border-radius:999px; border:1.5px solid #D8D2C6; background:#fff;
  color:var(--body); font-weight:800; font-size:12.5px; cursor:pointer; font-family:inherit; }
.uh-pick.is-on { background:var(--ink); color:var(--cream); border-color:var(--ink); }
@media (min-width:900px){ .uh-pick { font-size:13.5px; padding:10px 16px; } }

/* radio control (ring + inner dot) — registration modal's programme-choice cards */
.uh-radio { flex:none; margin-top:1px; width:19px; height:19px; border-radius:50%;
  border:2px solid #C4CDD3; display:flex; align-items:center; justify-content:center; }
.uh-radio__dot { width:9px; height:9px; border-radius:50%; background:var(--ink); }
.uh-radio--17 { width:17px; height:17px; }
.uh-radio--m2 { margin-top:2px; }

/* "OR PAY BY CARD" hairline rule with centred label (registration modal, payment step) */
.uh-or { display:flex; align-items:center; gap:10px; }
.uh-or--lg { gap:12px; }
.uh-or__line { flex:1; height:1px; background:var(--border); }
.uh-or__label { font-size:11px; font-weight:800; color:var(--label-warm); letter-spacing:.04em; }
.uh-or--lg .uh-or__label { font-size:12px; }

/* The frame the Cloudflare Turnstile widget sits in. It was a drawn "I'm not a robot"
   checkbox in the prototype; UW-254 put a real widget inside it and UW-267 removed the
   drawn parts (__box, __label, __mark and the .is-on tick), whose markup went with them.
   Only the frame and its error state remain, and neither is decorative. */
.uh-robot { display:flex; align-items:center; gap:11px; background:#F7FAFD; border:1px solid var(--border-ice);
  border-radius:12px; padding:13px 14px; }

.uh-modal__actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.uh-modal__note { font-size:11px; line-height:1.45; color:var(--label-warm); }

/* success state — designed by James, currently not reachable.
   UW-254 removed the prototype's fake submit handler, which was the only thing that ever
   added .is-sent, so the four .is-sent rules that revealed this panel are gone. The panel's
   own markup and styling are kept: the real success state is now server-rendered as
   .uh-alert--ok above the form, and whether this designed panel gets a server-rendered use
   instead is James's call, not something to settle by deleting his work. */
.uh-modal__sent { display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 26px; }
.uh-tick { display:inline-flex; width:52px; height:52px; border-radius:50%; background:var(--green);
  color:var(--cream); align-items:center; justify-content:center; font-weight:900; font-size:24px; line-height:1; }
.uh-modal__sent h3 { font-size:19px; color:var(--teal); margin-top:14px; letter-spacing:-.01em; }
.uh-modal__sent p { margin-top:9px; font-size:13px; line-height:1.55; color:var(--muted); }
.uh-modal__sent p.uh-modal__sent-urgent { margin-top:12px; font-size:12px; color:var(--label-warm); }
.uh-modal__sent p.uh-modal__sent-urgent strong { color:var(--ink); }
@media (min-width:900px){
  .uh-modal__sent { padding:0; }
  .uh-tick { width:58px; height:58px; font-size:27px; }
  .uh-modal__sent h3 { font-size:26px; margin-top:18px; letter-spacing:-.02em; }
  .uh-modal__sent p { margin:12px auto 0; max-width:440px; font-size:15px; }
}

/* ============================== FEATURE ICONS (2026-07-31) ==============================
   James replaced every ◇ glyph with a bespoke line icon. Cards keep their existing
   classes; only the glyph span becomes .uh-ico wrapping an inline <svg>. */
.uh-ico { display:inline-flex; align-items:center; justify-content:center;
  color:var(--_acc,var(--teal)); flex:none; }
.uh-ico svg { display:block; }

/* ============================== 2026-08-04 DROP ==============================
   James's third drop reshapes the hero on 8 of the 10 pages: the photo goes
   full-bleed with the copy sitting *over* it, and the intro paragraph + NHS
   partner line move out of the hero into their own cream band underneath.
   The eyebrow pill also flips from teal-on-ice to gold-on-amber. */

/* Per-page hero TINT + intro-band step, per the design project's CLAUDE.md §1/§16a.
   These are decided colours — never re-pick them. TINT = the headline panel over the
   photo (and the desktop eyebrow pill + filled secondary CTA); BAND = the darker step
   used by the full-width intro band under the hero; CTAINK = the primary CTA's label. */
.univa-2026            { --_tint:rgba(244,234,214,.94); --_band:#F6E8D5; --_ctaink:var(--cream); }
body.cond-eating       { --_tint:#F5EEF9; --_band:#F3ECF7; --_ctaink:#F5EEF9; }
body.cond-anorexia     { --_tint:#EDF4E7; --_band:#E8F0E1; --_ctaink:#EDF4E7; }
body.cond-arfid        { --_tint:#E6F0F9; --_band:#DFE8F2; --_ctaink:#E6F0F9; }
body.pg-programmes     { --_tint:#E6F0F9; --_band:#DFE8F2; }
body.pg-story          { --_tint:#F5EEF9; --_band:#F3ECF7; }
body.hcp               { --_band:#F4EAD6; }

/* --- cover hero (replaces the split text/art .uh-hero on redesigned pages) --- */
.uh-hero--cover { position:relative; overflow:hidden; padding:0; }
.uh-hero--cover .uh-hero__photo { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.uh-hero--cover .uh-hero__over { position:relative; z-index:1; max-width:600px;
  padding:36px clamp(20px,5vw,40px) 0; }
@media (min-width:900px){
  .uh-hero--cover { min-height:560px; display:flex; align-items:flex-end; }
  .uh-hero--cover .uh-hero__over { margin-right:auto; }
}
/* H1 sits on a near-opaque TINT plate so it stays readable over the photograph */
.univa-2026 .uh-hero__plate { background:var(--_tint); border-radius:12px;
  display:inline-block; padding:10px 16px; line-height:1.06; }
/* Referred is the exception — its headline takes the padding but no panel fill */
.univa-2026 .uh-hero__plate--bare { background:none; padding-left:0; }
/* the desktop eyebrow pill sits on the solid tint (Home/Referred keep their gold pill) */
@media (min-width:900px){
  .uh-hero--cover .uh-eyebrow:not(.uh-eyebrow--gold) { background:var(--_tint); }
}
/* CTAs over the photo: primary label in the tint, outline CTA filled with it */
.uh-hero--cover .uh-btn--primary { color:var(--_ctaink); border-color:rgba(244,234,214,.6); }
.uh-hero--cover .uh-btn--secondary { background:var(--_tint); }

/* mobile variant: eyebrow + H1 band, then the photo, then copy — not overlaid.
   §16a spacing: the copy/CTA/link/trust blocks each take horizontal padding only
   and margin-top:14px; the bottom padding belongs to the last block alone. */
.uh-hero--stack .uh-hero__photo { position:relative; width:100%; height:200px;
  object-fit:cover; display:block; }
.uh-hero--stack .uh-hero__copy { padding:14px 18px 0; color:var(--ink);
  font-size:14px; line-height:1.5; }
.uh-hero--stack .uh-hero__foot { padding:0 18px 20px; }
.uh-hero--stack .uh-hero__foot > * { margin-top:14px; }

/* gold eyebrow — Home and Referred only (every other page keeps its accent pill) */
.uh-eyebrow--gold { background:rgba(245,160,11,.16); color:#B26F08; }
@media (min-width:900px){ .uh-eyebrow--gold { background:#FCEFD9; } }

/* --- full-width bands below the hero (intro takes the page's band step) --- */
.uh-band { background:#F6E8D5; text-align:center; }
.uh-band__inner { max-width:1040px; margin:0 auto; padding:18px clamp(20px,5vw,40px); }
.uh-band--intro { background:var(--_band); }
.uh-band--intro .uh-band__inner { padding-top:26px; padding-bottom:26px; }
.uh-band p { color:var(--ink); font-size:clamp(14px,1.6vw,16.5px); line-height:1.55; }
.uh-band .uh-nhs { justify-content:center; margin:16px auto 0; width:fit-content;
  color:var(--ink); gap:7px; }
/* "Healthcare professional? …" link band — replaces the old hero ghost pill */
.uh-band--hcp .uh-band__inner { padding-top:14px; padding-bottom:14px; }
.univa-2026 .uh-band--hcp a { color:var(--teal); font-weight:800; font-size:13px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
@media (min-width:900px){ .univa-2026 .uh-band--hcp a { font-size:14.5px; } }

/* --- app showcase, "What you'll have in your pocket" (condition pages) ---
   James supplied the card copy but no app screenshots: each frame carries an
   empty slot the real screenshot drops into (D4). */
.uh-showcase { margin-top:22px; }
.uh-shot { display:flex; flex-direction:column; }
.uh-shot__frame { border-radius:26px; border:8px solid var(--ink); background:#fff;
  overflow:hidden; aspect-ratio:9/17.5; position:relative; }
.uh-shot__notch { position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; border-radius:999px; background:var(--ink); z-index:1; }
/* empty-slot fallback, kept for any frame whose screenshot hasn't landed yet */
.uh-shot__slot { position:absolute; inset:0; background:
  radial-gradient(120% 90% at 25% 15%, color-mix(in srgb, var(--_acc,#17627A) 14%, transparent), transparent 60%),
  linear-gradient(155deg,#EAF3FB,#F7FBFE); }
/* the real screenshot, with James's editor crop applied inline where he set one */
.uh-shot__img { position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center; }
.uh-shot__title { color:var(--teal); font-weight:800; font-size:15px; letter-spacing:-.01em;
  margin-top:14px; }
.uh-shot__body { color:var(--muted); font-size:13px; line-height:1.5; margin-top:6px; }
@media (min-width:900px){
  .uh-shot__title { font-size:16px; }
  .uh-shot__body { font-size:13.5px; }
}

/* ============================== LONG-FORM DOCUMENT (pg-doc) ============================== */
/* UW-258. Privacy Policy, Terms and Conditions, Carbon Plan. James's set has no legal or policy
   page, so this is new design work aligned to the existing system rather than a port.
   SINGLE BLOCK, unlike the marketing pages: a legal document is one column of prose at every
   breakpoint, and a vp-mobile / vp-desktop pair would be two copies of a 40,000-character
   document to keep in sync. Sized against the real content — T&Cs ~40,800 chars. */

.uh-eyebrow--legal { background:rgba(23,98,122,.10); color:var(--teal); }

/* --- document header --- */
.pg-doc .uh-doc__head { background:linear-gradient(180deg,#F7FAFD,#fff); padding:26px 18px 22px; }
.pg-doc .uh-doc__title { font-size:28px; line-height:1.1; letter-spacing:-.02em; font-weight:900;
  color:var(--ink); margin:12px 0 0; }
.pg-doc .uh-doc__meta { font-size:12.5px; font-weight:700; color:var(--label-warm); margin:8px 0 0; }
@media (min-width:900px){
  .pg-doc .uh-doc__head { padding:44px 24px 34px; }
  .pg-doc .uh-doc__title { font-size:42px; }
  .pg-doc .uh-doc__meta { font-size:13.5px; }
}

/* --- body --- */
.pg-doc .uh-doc__body { padding:22px 18px 34px; background:#fff; }
@media (min-width:900px){ .pg-doc .uh-doc__body { padding:34px 24px 56px; } }

/* Full width inside .uh-doc__body — no measure cap. */
.pg-doc .uh-doc__prose { max-width:none; }
.pg-doc .uh-doc__prose > *:first-child { margin-top:0; }

.pg-doc .uh-doc__lede { font-size:15.5px; line-height:1.65; font-weight:600; color:var(--body);
  margin:0 0 22px; }
@media (min-width:900px){ .pg-doc .uh-doc__lede { font-size:17px; } }

/* Vertical rhythm: space above a heading is what signals a new section, so the top margin is
   large and the bottom margin small. Headings must not float between two equal gaps. */
.pg-doc .uh-doc__prose h2 { font-size:19px; line-height:1.25; letter-spacing:-.015em;
  font-weight:900; color:var(--ink); margin:34px 0 10px; padding-top:18px;
  border-top:1px solid var(--hairline); }
.pg-doc .uh-doc__prose h3 { font-size:15.5px; line-height:1.35; letter-spacing:-.01em;
  font-weight:800; color:var(--teal); margin:24px 0 8px; }
.pg-doc .uh-doc__prose h4 { font-size:14px; font-weight:800; color:var(--body); margin:18px 0 6px; }
.pg-doc .uh-doc__prose h2:first-child { border-top:0; padding-top:0; margin-top:0; }
@media (min-width:900px){
  .pg-doc .uh-doc__prose h2 { font-size:23px; margin-top:44px; padding-top:22px; }
  .pg-doc .uh-doc__prose h3 { font-size:17px; margin-top:28px; }
}

.pg-doc .uh-doc__prose p { font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 14px; }
@media (min-width:900px){ .pg-doc .uh-doc__prose p { font-size:15px; line-height:1.75; } }

.pg-doc .uh-doc__prose a { color:var(--teal); font-weight:700; text-decoration:underline;
  text-underline-offset:2px; }
.pg-doc .uh-doc__prose strong { color:var(--body); font-weight:800; }

/* Lists: legal text nests them, so restore the markers style.css strips and indent per level. */
.pg-doc .uh-doc__prose ul,
.pg-doc .uh-doc__prose ol { margin:0 0 16px; padding-left:22px; }
.pg-doc .uh-doc__prose ul { list-style:disc; }
.pg-doc .uh-doc__prose ol { list-style:decimal; }
.pg-doc .uh-doc__prose ul ul { list-style:circle; }
.pg-doc .uh-doc__prose ol ol { list-style:lower-alpha; }
.pg-doc .uh-doc__prose li { font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 7px; }
.pg-doc .uh-doc__prose li > ul,
.pg-doc .uh-doc__prose li > ol { margin:7px 0 0; }
@media (min-width:900px){ .pg-doc .uh-doc__prose li { font-size:15px; } }

/* Tables: the Privacy Policy has six. They must scroll inside themselves — the page body
   never scrolls sideways. */
.pg-doc .uh-doc__prose table { display:block; width:100%; overflow-x:auto; border-collapse:collapse;
  margin:0 0 18px; font-size:13px; -webkit-overflow-scrolling:touch; }
.pg-doc .uh-doc__prose th { text-align:left; font-weight:800; color:var(--ink); background:#F7FAFD;
  border:1px solid var(--border-ice); padding:9px 11px; white-space:nowrap; }
.pg-doc .uh-doc__prose td { border:1px solid var(--border-ice); padding:9px 11px; color:var(--muted);
  line-height:1.6; vertical-align:top; min-width:150px; }
@media (min-width:900px){ .pg-doc .uh-doc__prose table { font-size:13.5px; } }

.pg-doc .uh-doc__prose blockquote { margin:0 0 18px; padding:12px 16px; background:#F7FAFD;
  border-left:3px solid var(--teal); border-radius:0 10px 10px 0; }
.pg-doc .uh-doc__prose blockquote p { margin:0; font-size:13.5px; color:var(--body); }

.pg-doc .uh-doc__prose hr { border:0; border-top:1px solid var(--hairline); margin:26px 0; }
.pg-doc .uh-doc__prose img { max-width:100%; height:auto; border-radius:12px; }

/* Print: people do print policies, and the site chrome is noise on paper. */
@media print {
  .pg-doc .uh-header, .pg-doc .uh-safety, .pg-doc .uh-footer, .pg-doc .uh-seam { display:none; }
  .pg-doc .uh-doc__prose { max-width:none; }
  .pg-doc .uh-doc__prose p, .pg-doc .uh-doc__prose li { font-size:11pt; color:#000; }
}

/* ============================== FORM ERROR STATES ============================== */
/* UW-257. The 2026 design set ships no error states — no required-field message, no
   invalid-value message, no failed-payment return. Rather than design one treatment per
   field, this is ONE pattern reused everywhere: a form-level alert, a field-level message,
   and an invalid input treatment. Tokens follow the existing palette; the red is the only
   new colour and is used solely to signal failure. */
:root {
  --error:#A32015;            /* 5.9:1 on #fff — readable at 12px, unlike a brighter red */
  --error-bg:#FCF3F2;
  --error-border:#EBC9C5;
}

/* --- 1. Form-level alert. Appears above the first field when a submit is rejected.
       Also used for the failed-payment return. Geometry matches .uh-robot so the form
       keeps its rhythm. --- */
.uh-alert { display:flex; gap:11px; background:var(--error-bg); border:1px solid var(--error-border);
  border-radius:12px; padding:13px 14px; margin-bottom:14px; }
.uh-alert__icon { flex:none; width:22px; height:22px; border-radius:50%; background:var(--error);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; line-height:1; }
.uh-alert__icon::after { content:"!"; }
.uh-alert__body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.uh-alert__title { font-weight:800; font-size:13px; color:var(--error); letter-spacing:-.01em; }
.uh-alert__text { font-size:12.5px; line-height:1.5; color:var(--body); }
.uh-alert__list { margin:0; padding-left:16px; font-size:12.5px; line-height:1.6; color:var(--body); }
.uh-alert__list a { color:var(--error); font-weight:700; text-decoration:underline; }
/* success / neutral variants reuse the same box */
.uh-alert--ok { background:#F2F8EF; border-color:#CFE3C4; }
.uh-alert--ok .uh-alert__icon { background:var(--green); }
.uh-alert--ok .uh-alert__icon::after { content:"✓"; }
.uh-alert--ok .uh-alert__title { color:var(--green); }
.uh-alert--info { background:#F7FAFD; border-color:var(--border-ice); }
.uh-alert--info .uh-alert__icon { background:var(--teal); }
.uh-alert--info .uh-alert__icon::after { content:"i"; font-style:italic; }
.uh-alert--info .uh-alert__title { color:var(--teal); }
@media (min-width:900px){
  .uh-alert__title { font-size:13.5px; }
  .uh-alert__text,.uh-alert__list { font-size:13px; }
}

/* --- 2. Invalid input treatment. Border + a tinted fill so it reads without relying on
       colour alone at a glance; the message below carries the meaning. --- */
.uh-field.is-invalid input,
.uh-field.is-invalid textarea,
.uh-field input[aria-invalid="true"],
.uh-field textarea[aria-invalid="true"] {
  border-color:var(--error); background:var(--error-bg);
}
.uh-field.is-invalid input:focus,
.uh-field.is-invalid textarea:focus { border-color:var(--error); }
.uh-field.is-invalid > span { color:var(--error); }

/* --- 3. Field-level message. Always below the input, never a tooltip — tooltips are
       unreachable on touch and invisible to screen readers. --- */
.uh-field__err { display:flex; align-items:flex-start; gap:5px; font-weight:700; font-size:11.5px;
  line-height:1.45; color:var(--error); }
.uh-field__err::before { content:"⚠"; font-size:11px; line-height:1.35; flex:none; }
.uh-field:not(.is-invalid) .uh-field__err { display:none; }
@media (min-width:900px){ .uh-field__err { font-size:12px; } }

/* --- 4. Choice groups (chips, Yes/No) can't put the border on an input, so each option
       pill gets the treatment instead — painting the group container produced a visible
       tinted rectangle behind the pills rather than on them. The robot check has no pills
       to target, so it keeps the group-level treatment. --- */
.uh-choice.is-invalid .uh-pill,
.uh-choice.is-invalid .uh-pick { border-color:var(--error); background:var(--error-bg); }
.uh-robot.is-invalid { border-color:var(--error); background:var(--error-bg); }

/* Choice groups render their message as a sibling of the group, not inside a .uh-field,
   so the ".uh-field:not(.is-invalid) .uh-field__err" hide rule above never reaches it —
   .uh-choice__err carries its own hide rule instead, keyed off the same is-invalid class
   the PHP template already applies to the group itself. */
.uh-choice__err { display:none; }
.uh-choice__err.is-invalid { display:flex; }

/* --- 5. Consent row (UW-254). Not an error state, but it is the field most likely to be
       missed, and it needs a link target inside a label. --- */
.uh-consent { display:flex; align-items:flex-start; gap:10px; }
.uh-consent input[type="checkbox"] { flex:none; width:18px; height:18px; margin-top:2px;
  accent-color:var(--teal); }
.uh-consent__text { font-size:12px; line-height:1.5; color:var(--body); }
.uh-consent__text a { color:var(--teal); font-weight:700; text-decoration:underline; }
.uh-consent.is-invalid { border-radius:10px; padding:8px 10px; margin:-8px -10px;
  background:var(--error-bg); box-shadow:inset 0 0 0 1px var(--error-border); }
@media (min-width:900px){ .uh-consent__text { font-size:12.5px; } }


/* ============================== PILL RADIOS (UW-257) ============================== */
/* The 2026 design draws the Yes/No and diagnosis pills as <button aria-pressed>, which
   submits nothing. They are real radios now so the form works with JavaScript disabled.
   The unchecked appearance is unchanged — the inline styles moved from the button onto
   the label. These rules add only the checked state and the focus ring, which the
   design drew as a filled dot and never drew as a focus state. */
.uh-pill { position:relative; }
.uh-pill__in { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.uh-pill:has(.uh-pill__in:checked) { border-color:var(--teal); background:#EAF3F7; }
.uh-pill:has(.uh-pill__in:checked) .uh-pill__dot { border-color:var(--teal); }
.uh-pill:has(.uh-pill__in:checked) .uh-pill__dot::after {
  content:""; width:9px; height:9px; border-radius:50%; background:var(--teal);
}
.uh-pill:has(.uh-pill__in:focus-visible) { outline:2px solid var(--teal); outline-offset:2px; }

/* .uh-pick chips carry no inline style — all appearance comes from the class, so the
   radio is hidden inside the label and the checked state reuses the class's own
   pressed treatment. The chips were <button>s and a <label> is inline where a button is
   inline-block, but .uh-picks is a flex container so both are blockified into identical
   flex items — verified by the pixel diff, so no display override is needed here. */
.uh-pick { position:relative; }
.uh-pick__in { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
/* Mirrors .uh-pick.is-on exactly — the design's pressed treatment, not a new one. */
.uh-pick:has(.uh-pick__in:checked) { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.uh-pick:has(.uh-pick__in:focus-visible) { outline:2px solid var(--teal); outline-offset:2px; }

/* The "which is closer" cards were <div class="uh-option"> with a decorative .uh-radio
   ring. The ring stays as the visual dot; a real radio goes inside the card, which is
   now a <label>. Scoped with :has(> .uh-opt__in) so the unconverted .uh-option cards
   elsewhere on the site are untouched. */
.uh-option:has(> .uh-opt__in) { position:relative; }
.uh-opt__in { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
/* Mirrors .uh-option.is-on and .uh-radio__dot exactly. */
.uh-option:has(> .uh-opt__in:checked) { box-shadow:0 0 0 2px var(--ink) inset; }
.uh-option:has(> .uh-opt__in:checked) .uh-radio::after {
  content:""; width:9px; height:9px; border-radius:50%; background:var(--ink);
}
.uh-option:has(> .uh-opt__in:focus-visible) { outline:2px solid var(--teal); outline-offset:2px; }

/* ============================== ENQUIRY DIALOG (UW-254) ==============================
   #uh-call is now a native <dialog>, which brings focus trapping, Esc and the top layer
   for free — all of which the hand-rolled modal either faked or lacked.

   Two things have to be restated, and nothing else changes:
   1. .uh-modal sets display:none with .is-open supplying display:flex. A UA rule
      (dialog[open]) cannot beat an author rule, so the open state is declared here
      against [open] instead. The value is the same display:flex .is-open already used.
   2. The UA dresses <dialog> with a border, padding, a margin and max-width/max-height.
      Those are cleared so the panel geometry stays exactly what .uh-modal specified.
   The scrim is deliberately left to .uh-modal's own desktop background rule rather than
   moved to ::backdrop, so the appearance is unchanged; the UA backdrop is cleared so it
   does not dim on top of it.

   The reset necessarily out-specifies .uh-modal (0,1,1 vs 0,1,0), so the desktop padding
   .uh-modal already declares is restated below rather than being clobbered by padding:0.
   width/height:auto defeat the UA's fit-content sizing so inset:0 sizes the overlay. */
dialog.uh-modal { border:0; padding:0; margin:0; max-width:none; max-height:none;
  width:auto; height:auto; color:inherit; }
dialog.uh-modal[open] { display:flex; }
dialog.uh-modal::backdrop { background:transparent; }
/* ============================== NEWS / BLOG (pg-news, pg-news-post — UW-283) ============================== */
/* Listing (news.html) and single post (news-post.html). New design work — James's set had no
   news/blog page — built from the doc pattern (§ LONG-FORM DOCUMENT above) plus new post-card
   and article components. content model is unchanged: WP category "news" (children = topics
   like "press-release") and "blog" are plain native categories, no ACF, no custom taxonomy. */

/* category → accent, matches the design's condition-swatch map (core Thread swatches, not the
   .acc-eating/anorexia/arfid/referred condition aliases, which mean something else on this page) */
.acc-family{--_acc:var(--purple);} .acc-clinical{--_acc:var(--navy);}
.acc-product{--_acc:var(--gold);} .acc-company{--_acc:var(--green);}

/* narrow hero band, shared with pg-doc; news/post add a dek line under the title */
.pg-news .uh-doc__head,.pg-news-post .uh-doc__head { background:var(--cream); padding:26px 18px 24px; text-align:center; }
/* explicit color, not just font-size: category.php archives also carry .pg-doc (for the
   long-form prose pattern), and .pg-doc .uh-doc__title sets color:var(--ink) — without this
   override a topic archive's title rendered visibly darker than /news/ or /blog/ itself,
   which carries only .pg-news, never .pg-doc (caught in UW-284 QA). */
.pg-news .uh-doc__title,.pg-news-post .uh-doc__title { font-size:26px; color:var(--teal); }
.pg-news .uh-doc__dek,.pg-news-post .uh-doc__dek { font-size:14px; line-height:1.55; color:var(--muted);
  margin:10px auto 0; max-width:64ch; }
@media (min-width:900px){
  .pg-news .uh-doc__head,.pg-news-post .uh-doc__head { padding:44px 24px 34px; }
  .pg-news .uh-doc__title,.pg-news-post .uh-doc__title { font-size:40px; }
  .pg-news .uh-doc__dek,.pg-news-post .uh-doc__dek { font-size:16px; }
}
.pg-news-post .uh-doc__head { text-align:left; }
.pg-news-post .uh-doc__head .uh-wrap { max-width:740px; }
.pg-news-post .uh-back { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px; color:var(--teal); margin-bottom:14px; }

/* category filter row (links to /category/news/<slug>/ — no client-side filtering, WP renders per URL) */
.uh-fltr { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none; }
.uh-fltr::-webkit-scrollbar { display:none; }
.uh-fltr__item { flex:none; padding:9px 15px; border-radius:999px; border:1.5px solid var(--border);
  background:#fff; color:var(--ink); font-weight:800; font-size:12.5px; white-space:nowrap; }
/* ancestor-qualified, not just two classes: the global `.univa-2026 a:not(.uh-btn){color:teal}`
   rule is (0,2,1) specificity — the :not() argument counts as a class — which beat a plain
   `.uh-fltr__item.is-active` at (0,2,0), so the "selected" chip rendered with blue text
   instead of cream/white (caught in UW-284 QA). */
.uh-fltr .uh-fltr__item.is-active { background:var(--ink); color:var(--cream); border-color:var(--ink); }
@media (min-width:900px){ .uh-fltr { justify-content:center; flex-wrap:wrap; overflow:visible; } .uh-fltr__item { font-size:13.5px; padding:10px 16px; } }

/* post card — listing grid + related-posts carousel. Flat fill + colored top border, NO
   thumbnail image (design-briefs "[11] News.dc.html" / "[12] News post.dc.html" post-list
   cards carry no image element at all — only the single featured post below does). */
.uh-post { background:#F7FAFD; border:1px solid var(--border); border-top:3px solid var(--_acc,var(--teal));
  border-radius:14px; padding:15px; display:flex; flex-direction:column; }
.uh-post__body { display:flex; flex-direction:column; flex:1; }
.uh-post__cat { font-weight:900; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--_acc,var(--teal)); }
.uh-post h3.uh-post__title { font-weight:800; font-size:14.5px; line-height:1.3; color:var(--teal); margin:7px 0 0; white-space:normal; }
.uh-post p { color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:6px; }
.uh-post__meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:11px; }
.uh-post__meta span { font-size:10.5px; color:var(--label-warm); font-weight:700; }
@media (min-width:900px){
  .uh-post { border-top-width:4px; padding:20px; }
  .uh-post h3.uh-post__title { font-size:16.5px; }
  .uh-post p { font-size:13.5px; }
}

/* "Latest posts" listing grid — a plain vertical stack on mobile (full-width cards, one per
   row), NOT a swipe carousel; only the news-post.html "Related posts" row is a carousel in
   the source design. Becomes a 3-col grid at desktop. */
.uh-post-grid { display:flex; flex-direction:column; gap:12px; }
@media (min-width:900px){ .uh-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } }

/* featured post — the one card that carries an image. White bg, NEUTRAL border (the pill
   below is what conveys category, not a colored card border), image+content side by side
   on desktop. */
.uh-post--feat { background:#fff; border:1px solid var(--border); border-top:1px solid var(--border);
  border-radius:16px; overflow:hidden; padding:0; }
.uh-post--feat .uh-post__thumb { position:relative; height:150px; background:linear-gradient(155deg,#EAF3FB,#F7FBFE); }
.uh-post--feat .uh-post__body { padding:16px; }
.uh-post--feat .uh-post__cat { display:inline-block; font-size:10.5px; color:var(--_acc,var(--green));
  background:color-mix(in srgb, var(--_acc,var(--green)) 12%, #fff); padding:5px 10px; border-radius:999px; }
.uh-post--feat h3.uh-post__title,.uh-post--feat .uh-post__title { font-size:17px; margin-top:10px; }
.uh-post--feat p { font-size:13px; }
@media (min-width:900px){
  .uh-post--feat { display:flex; flex-direction:row; }
  .uh-post--feat .uh-post__thumb { width:44%; height:auto; flex:none; }
  .uh-post--feat .uh-post__body { padding:32px; display:flex; flex-direction:column; justify-content:center; }
  .uh-post--feat h3.uh-post__title,.uh-post--feat .uh-post__title { font-size:26px; margin-top:14px; }
  .uh-post--feat p { font-size:15px; }
}

/* article header author row + author bio card (news-post.html) */
.uh-byline { display:flex; align-items:center; gap:10px; margin-top:18px; }
/* text-initial badge, distinct from .uh-avatar's photo-avatar defaults (radial-gradient bg,
   margin:0 auto for block centering) — applies wherever a "PS"-style badge is used, not just
   in the byline, so it doesn't collapse into an oval when it's a flex child elsewhere (e.g.
   .uh-authorbio, which is also a flex row). */
.uh-byline .uh-avatar,.uh-authorbio .uh-avatar { background:var(--ice); color:var(--teal); display:flex;
  align-items:center; justify-content:center; font-weight:900; font-size:14px; margin:0; flex:none; }
.uh-byline__name { font-weight:800; font-size:13px; color:var(--ink); }
.uh-byline__role { font-size:11.5px; color:var(--label-warm); font-weight:700; }
.uh-authorbio { background:#F7FAFD; border:1px solid var(--border); border-radius:16px; padding:18px;
  display:flex; gap:14px; align-items:flex-start; margin-top:22px; }
.uh-authorbio p { font-size:12.5px; color:var(--muted); margin-top:8px; }
.uh-share { display:flex; align-items:center; gap:16px; margin-top:24px; padding-top:18px; border-top:1px solid var(--hairline); }
.uh-share span:first-child { font-weight:800; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--label-warm); }
.uh-share a { font-weight:700; font-size:13px; }

/* pull-quote card + checkmark list — styles the GENERIC blockquote/ul the block editor emits
   inside the_content(), rather than one-off component classes, so a real editor's core/quote
   and core/list blocks automatically match James's design without special markup. Overrides
   .pg-doc's plain legal-document treatment of the same tags (§ LONG-FORM DOCUMENT), scoped to
   this page only. */
.pg-news-post .uh-doc__prose blockquote { background:#fff; border:1px solid var(--border); border-left:0;
  border-radius:var(--radius); padding:22px 20px 20px; margin:22px 0; }
.pg-news-post .uh-doc__prose blockquote::before { content:"\201C"; display:block; font-size:34px;
  line-height:.5; color:var(--gold); font-weight:900; margin-bottom:10px; }
.pg-news-post .uh-doc__prose blockquote p { color:var(--teal); font-weight:800; font-size:15px; line-height:1.45; margin:0 0 10px; }
.pg-news-post .uh-doc__prose blockquote p:last-child { color:var(--green); font-size:12.5px; margin-bottom:0; }
@media (min-width:900px){
  .pg-news-post .uh-doc__prose blockquote { padding:28px 32px; }
  .pg-news-post .uh-doc__prose blockquote::before { font-size:44px; }
  .pg-news-post .uh-doc__prose blockquote p { font-size:17px; }
}

.pg-news-post .uh-doc__prose ul { list-style:none; padding-left:0; display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.pg-news-post .uh-doc__prose ul li { display:flex; align-items:flex-start; gap:12px; margin:0; padding-left:0; }
.pg-news-post .uh-doc__prose ul li::before { content:"\2713"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--ice); color:var(--teal); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:1px; }

@media (min-width:900px){ dialog.uh-modal { padding:32px; } }

/* UW-273 — a programme that is listed but cannot yet be bought.
   No blur and no opacity on the card itself: body text under the scrim stays near 6.8:1,
   which matters on pages where parents are reading symptom descriptions. */
.uh-prog--soon { position: relative; }

.uh-prog__scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.62);
  border-radius: inherit;
}

.uh-prog__soonlabel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%) rotate(-3deg);
  white-space: nowrap;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--acc-eating, #873F9F);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 8px 22px rgba(135, 63, 159, 0.32);
}

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

/* UW-273 — a listed-but-unbuyable option inside the programme picker. Kept visible rather
   than dropped: anyone on a stale link now lands silently on the default programme, and this
   row is what explains where their choice went. */
.uh-option--soon { opacity: 1; cursor: default; }
.uh-option--soon .uh-radio { visibility: hidden; }
.uh-option--soon .uh-option__name { color: #8A979E; }

.uh-option__soonpill {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--acc-eating, #873F9F);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}