/* /learn-us-clinics-landscape: its own sheet, loaded after site.css.
   One object runs the page: the syringe, and what is in it. The hero draws
   one, each product is one filled to its own mix, and the closing band sets
   two side by side.
   Three colours are a key, used the same way everywhere: slate is the
   Section 361 mainstream, blue is the Section 351 trials, red is a clinic
   operating in violation.
   Script: scripts/learn-us-clinics-landscape.js. With that script absent every
   part is visible and every link still jumps. */

html:has(body.us-clinics) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.us-clinics {
  --uc-l1: #6d7f97;            /* lane 1, the mainstream */
  --uc-l1-ink: #4a5d77;
  --uc-l2: var(--accent-blue); /* lane 2, the trials */
  --uc-l2-ink: var(--accent-blue-hover);
  --uc-l3: #c2553f;            /* lane 3, outside the system */
  --uc-l3-ink: #96341f;
  /* what a syringe can hold */
  --s-msc: #2d6eb1;
  --s-hsc: #2f8f83;
  --s-imm: #5b6b85;
  --s-oth: #9aa8bb;
  --s-mat: #d5dce6;
  --s-rbc: #c2553f;
  --s-plt: #ecc4b6;
  --uc-ease: cubic-bezier(.16, 1, .3, 1);
  --uc-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.uc-wrap { max-width: calc(1240px + 2 * var(--uc-gut)); margin-inline: auto; padding-inline: var(--uc-gut); }
/* text fills its column; the column sets the measure */
.us-clinics main p { max-width: none; margin: 0; }
.us-clinics main a:not(.btn) { border-bottom: 0; }
.us-clinics main :is(ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; list-style: none; }
.us-clinics main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.us-clinics main h3 { margin: 0; max-width: none; }
.us-clinics main em { font-style: italic; }
.us-clinics main :is(a, .btn, summary, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.us-clinics :is(.uc-count, .uc-diff) :is(a, button, summary):focus-visible { outline-color: #fff; }
/* a part that receives focus after a jump is not itself a control */
.us-clinics main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* the heading a jump came down on: a line is drawn under it once */
@keyframes uc-landed { from { background-size: 0 2px; } 45% { background-size: 100% 2px; opacity: 1; } to { background-size: 100% 2px; } }
.us-clinics main :is(h2, h3).is-landed { background: linear-gradient(var(--accent-ice), var(--accent-ice)) no-repeat left bottom / 0 2px; animation: uc-landed 1500ms var(--uc-ease) both; }

/* a term the glossary defines */
.uc-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.uc-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.uc-count .uc-term { text-decoration-color: var(--accent-ice); }
.uc-count .uc-term:hover { color: #fff; }

/* the onward link: the arrow leans the way it points */
.uc-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.uc-go span { display: inline-block; transition: transform 360ms var(--uc-ease); }
.uc-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.uc-go:hover span { transform: translateX(6px); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (uc-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way;
   the drawings keep their place and play their own entrance instead. */
.uc-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--uc-ease); }
.uc-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.uc-js [data-r="stat"]:not(.is-in) { transform: translateX(-24px); }
.uc-js :is([data-r="wall"], [data-r="chart"], [data-r="map"], [data-r="bars"], [data-r="syr"], [data-r="dots"], [data-r="pair"], [data-r="gavel"], [data-r="horn"], [data-r="room"]):not(.is-in) { opacity: 1; transform: none; }
.uc-js [data-r="cols"]:not(.is-in) { opacity: 1; transform: none; }
.uc-js .uc-stats > div:nth-child(2) { transition-delay: 90ms; }
.uc-js .uc-stats > div:nth-child(3) { transition-delay: 180ms; }
.uc-js .uc-stats > div:nth-child(4) { transition-delay: 270ms; }

/* ============ HERO ============ */
.uc-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.uc-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.uc-hero__h1 > .h-lead, .uc-hero__h1 > em { display: inline-block; }
.uc-hero__h1 > em { color: var(--accent-blue); }
.uc-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.uc-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }
.uc-toc { margin-top: clamp(24px, 3vw, 36px) !important; border-top: 1px solid var(--border-strong); }
.uc-toc a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 9px 34px 9px 0; border-bottom: 1px solid var(--border); font-size: 16px; line-height: 1.4; color: var(--ink-soft); transition: color 200ms, padding-left 360ms var(--uc-ease); }
.uc-toc a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 360ms var(--uc-ease); }
.uc-toc a:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.uc-toc a:hover::after { transform: translateY(4px) rotate(45deg); }

.uc-hero__fig { align-self: center; }
.uc-scene { display: block; width: 100%; height: auto; overflow: visible; }
.uc-scene :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc-scene .uc-draw--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.uc-scene .uc-cell { stroke: none; fill: var(--s-oth); transform-box: fill-box; transform-origin: center; }
.uc-scene .uc-cell--msc { fill: var(--s-msc); }
.uc-scene__lens circle { fill: rgba(255, 255, 255, .45); stroke: var(--accent-blue); stroke-width: 3; }
.uc-scene__lens path { stroke: var(--accent-blue); stroke-width: 7; }

/* first paint: the syringe is drawn, it fills, and the lens settles on the few */
@keyframes uc-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes uc-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes uc-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } }
@keyframes uc-tint { from { fill: var(--s-oth); } 55% { transform: scale(1.5); } to { fill: var(--s-msc); } }
@keyframes uc-lens { from { opacity: 0; transform: translate(150px, -70px) scale(.8); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.uc-js .uc-hero__h1 > * { animation: uc-up 900ms var(--uc-ease) both; }
.uc-js .uc-hero__h1 > em { animation-delay: 110ms; }
.uc-js .uc-hero__answer { animation: uc-up 900ms var(--uc-ease) 240ms both; }
.uc-js .uc-toc li { animation: uc-up 700ms var(--uc-ease) both; animation-delay: calc(380ms + var(--i, 0) * 55ms); }
.uc-js .uc-scene .uc-draw { stroke-dasharray: 1; animation: uc-draw 800ms var(--uc-ease) both; animation-delay: calc(200ms + var(--i, 0) * 90ms); }
.uc-js .uc-scene .uc-cell { animation: uc-pop 380ms var(--uc-ease) both; animation-delay: calc(1000ms + var(--i) * 16ms); }
.uc-js .uc-scene .uc-cell--msc { animation: uc-pop 380ms var(--uc-ease) calc(1000ms + var(--i) * 16ms) both, uc-tint 700ms ease 2700ms both; }
.uc-js .uc-scene__lens { transform-box: view-box; transform-origin: 330px 150px; animation: uc-lens 1100ms var(--uc-ease) 1900ms both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.us-clinics .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--uc-ease), visibility 0s 360ms;
}
.us-clinics .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--uc-ease); }
body.us-clinics.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.us-clinics .hc-bar__track {
  max-width: calc(1240px + 2 * var(--uc-gut)); margin: 0 auto; padding: 0 var(--uc-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.us-clinics .hc-bar__track::-webkit-scrollbar { display: none; }
.us-clinics .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.us-clinics .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--uc-ease);
}
.us-clinics .hc-bar__track a:hover, .us-clinics .hc-bar__track a[aria-current] { color: var(--ink); }
.us-clinics .hc-bar__track a:hover::after { transform: scaleX(.35); }
.us-clinics .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.us-clinics .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.us-clinics .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}
/* the track can run past the screen: both ends fade where there is more */
.us-clinics .hc-bar::before, .us-clinics .hc-bar::after { content: ""; position: absolute; top: 2px; bottom: 0; width: 28px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 200ms; }
.us-clinics .hc-bar::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.us-clinics .hc-bar::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.us-clinics .hc-bar.has-more-left::before, .us-clinics .hc-bar.has-more-right::after { opacity: 1; }

/* ============ HOW MANY (navy) ============ */
.uc-count { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.us-clinics .uc-count h2 { color: #fff; margin-bottom: clamp(28px, 4vw, 52px); }
.uc-count__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.uc-count__lede { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.uc-count__lede em { color: #fff; }
.uc-stats { margin-top: clamp(24px, 3vw, 40px) !important; }
.uc-fold > .uc-stats { margin-top: 0 !important; }
.uc-count .uc-more summary, .uc-diff .uc-more summary { color: #c9def2; }
.uc-count .uc-more summary:hover, .uc-diff .uc-more summary:hover { color: #fff; }
.uc-stats > div { display: grid; grid-template-columns: clamp(104px, 10.5vw, 140px) minmax(0, 1fr); gap: 4px 22px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.uc-stats dt { display: contents; font-size: 16px; font-weight: 600; color: #fff; }
.uc-stats dt b { grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 3.6vw, 3.3rem); line-height: .95; color: var(--accent-ice); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.uc-stats dd { grid-column: 2; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }

.uc-wall { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px); }
/* with no script the field is a plain bed of dots; the script lays the real 2,754 over it.
   81 columns by 34 rows is 2,754 exactly, and so is the phone's 54 by 51: the script reads
   its columns from this shape, so the two must change together. */
.uc-wall__field { --cols: 81; --rows: 34; aspect-ratio: var(--cols) / var(--rows); border-radius: 6px; background: radial-gradient(circle at center, rgba(255, 255, 255, .34) 0 30%, transparent 36%) 0 0 / calc(100% / var(--cols)) calc(100% / var(--rows)); }
.uc-wall__field.has-canvas { background: none; }
.uc-wall__field canvas { display: block; width: 100%; height: 100%; }
.uc-wall__title { margin-top: 20px !important; font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; color: #fff; }
.uc-wall__key { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px !important; }
.uc-wall__key button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: rgba(255, 255, 255, .84); font: inherit; font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms; }
.uc-wall__key i { flex: none; width: 12px; height: 12px; border-radius: 50%; transition: transform 360ms var(--uc-ease), box-shadow 360ms; }
.uc-wall__key [data-lane="361"] i { background: rgba(255, 255, 255, .5); }
.uc-wall__key [data-lane="351"] i { background: #7db8f2; }
.uc-wall__key [data-lane="out"] i { background: #f28d76; }
.uc-wall__key button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.uc-wall__key button:hover i { transform: scale(1.35); }
.uc-wall__key button[aria-pressed="true"] { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); color: #fff; }
.uc-wall__key button[aria-pressed="true"] i { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
/* the key is only a control when the script is there to answer it */
html:not(.uc-js) .uc-wall__key button { pointer-events: none; padding-left: 0; }
html:not(.uc-js) .uc-wall__hint { display: none; }
.uc-wall__cap { margin-top: 12px !important; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.uc-wall__cap em { color: #fff; }

/* the same count, over five years */
.uc-src { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-ice); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.uc-src:hover { color: #fff; }
.uc-growth { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid rgba(255, 255, 255, .16); scroll-margin-top: 0; }
.uc-growth h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.15; color: #fff; }
.uc-growth__text > p { margin-top: 16px !important; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.uc-chart { padding-top: 30px; }
.uc-chart__plot { position: relative; margin-left: 52px; margin-right: 8px; height: clamp(200px, 22vw, 280px); }
.uc-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uc-chart__grid { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.uc-chart__area { fill: rgba(125, 184, 242, .16); stroke: none; }
.uc-chart__line { fill: none; stroke: #7db8f2; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.uc-chart__y { position: absolute; right: calc(100% + 10px); top: calc(var(--y) * 1%); transform: translateY(-50%); font-size: 13px; color: rgba(255, 255, 255, .62); font-variant-numeric: lining-nums tabular-nums; }
.uc-chart__ev { position: absolute; left: calc(var(--x) * 1%); top: -22px; bottom: 0; border-left: 1px dashed #f28d76; }
.uc-chart__ev span { position: absolute; left: 7px; top: -3px; font-size: 13px; line-height: 1.2; color: #f7b3a3; white-space: nowrap; }
.uc-chart__pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.uc-chart__pt::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); border: 2px solid #7db8f2; box-sizing: border-box; }
.uc-chart__pt b { position: absolute; left: 6px; bottom: 13px; font-size: 13px; font-weight: 500; color: #cfe3f7; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.uc-chart__pt--last { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.uc-chart__pt--last::before { background: #7db8f2; }
.uc-chart__pt--last b { left: auto; right: -6px; bottom: 16px; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 400; color: #fff; }
.uc-chart__x { position: relative; height: 30px; margin-left: 52px; margin-right: 8px; }
.uc-chart__x span { position: absolute; left: calc(var(--x) * 1%); top: 10px; transform: translateX(-50%); font-size: 13px; color: rgba(255, 255, 255, .62); font-variant-numeric: lining-nums tabular-nums; }
.uc-chart__x span:first-child { transform: none; margin-left: -4px; }
.uc-chart__x span:last-child { transform: translateX(-100%); margin-left: 8px; }
.uc-chart figcaption { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .7); text-align: right; }
/* the line is drawn left to right, each count landing as it is reached */
@keyframes uc-wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -2% -10% 0); } }
@keyframes uc-land { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.3); } }
.uc-js .uc-chart:not(.is-in) :is(.uc-chart__draw, .uc-chart__pt, .uc-chart__ev) { opacity: 0; }
.uc-js .uc-chart.is-in .uc-chart__draw { animation: uc-wipe 1500ms cubic-bezier(.5, 0, .3, 1) both; }
.uc-js .uc-chart.is-in .uc-chart__pt { animation: uc-land 420ms var(--uc-ease) both; animation-delay: calc(150ms + var(--x) * 13ms); }
.uc-js .uc-chart.is-in .uc-chart__ev { animation: uc-up 600ms var(--uc-ease) 1500ms both; }

/* native "Read more": opened for print, found by in-page search.
   .uc-fold is the same control for a phone only: wider than that it is always
   open and has no handle (the script closes it on a phone when the page loads). */
@media (min-width: 761px) { .us-clinics .uc-fold > summary { display: none; } }
.uc-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.uc-more summary::-webkit-details-marker { display: none; }
.uc-more summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--uc-ease); }
.uc-more summary:hover { color: var(--accent-blue); }
.uc-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.uc-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.uc-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.uc-more__shut, .uc-more[open] .uc-more__open { display: none; }
.uc-more[open] .uc-more__shut { display: inline; }
.uc-more__body p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
@keyframes uc-unfold { from { opacity: 0; transform: translateY(-8px); } }
/* only what a reader opens unfolds: never the folds a wide screen holds open */
.uc-js .uc-more:not(.uc-fold)[open] .uc-more__body, .uc-js .uc-claim[open] .uc-claim__a { animation: uc-unfold 420ms var(--uc-ease); }
@media (max-width: 760px) { .uc-js .uc-fold[open] > .uc-more__body { animation: uc-unfold 420ms var(--uc-ease); } }
.uc-growth .uc-more { margin-top: 6px; }
.uc-growth .uc-more__body p { color: rgba(255, 255, 255, .84); }

/* ============ WHERE ============ */
.uc-where { padding-block: clamp(56px, 7vw, 104px); }
.us-clinics .uc-where h2 { margin-bottom: clamp(24px, 3.4vw, 44px); }
.uc-where__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.uc-where__lede { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.uc-where__lede strong { font-weight: 600; color: var(--ink); }
.uc-top { margin-top: clamp(22px, 3vw, 36px) !important; }
.uc-top li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0 16px; }
.uc-top span { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 400; color: var(--ink); }
.uc-top b { font-size: 15px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
.uc-top li::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 3px; background: var(--border); }
.uc-top i { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--n) / 347 * 100%); border-radius: 3px; background: var(--ink-soft); transform-origin: left; }
.uc-js .uc-top i { transition: transform 1100ms var(--uc-ease); }
.uc-js .uc-top:not(.is-in) i { transform: scaleX(0); }
.uc-js .uc-top li:nth-child(2) i { transition-delay: 140ms; }
.uc-js .uc-top li:nth-child(3) i { transition-delay: 280ms; }
.uc-mapkey { display: grid; gap: 8px; margin-top: clamp(22px, 3vw, 36px) !important; padding-top: 20px !important; border-top: 1px solid var(--border); }
.uc-mapkey li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.uc-mapkey i { flex: none; width: 13px; height: 13px; border-radius: 3px; transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(11, 29, 58, .12); }
.uc-mapkey .k1, .uc-map__b1 { background: #e3ebf4; fill: #e3ebf4; }
.uc-mapkey .k2, .uc-map__b2 { background: #b3cbe3; fill: #b3cbe3; }
.uc-mapkey .k3, .uc-map__b3 { background: #5f93c6; fill: #5f93c6; }
.uc-mapkey .k4, .uc-map__b4 { background: #1c3461; fill: #1c3461; }
.uc-map svg { display: block; width: 100%; height: auto; }
.uc-map__b { stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.uc-map__pins circle { fill: #fff; stroke: var(--uc-l3); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.uc-map figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-muted); text-align: right; }
/* the country fills in from its emptiest states to its three fullest */
.uc-js .uc-map__b { transition: opacity 700ms ease; }
.uc-js .uc-map:not(.is-in) .uc-map__b { opacity: 0; }
.uc-js .uc-map__b2 { transition-delay: 220ms; }
.uc-js .uc-map__b3 { transition-delay: 440ms; }
.uc-js .uc-map__b4 { transition-delay: 660ms; }
.uc-js .uc-map:not(.is-in) .uc-map__pins circle { opacity: 0; }
.uc-js .uc-map.is-in .uc-map__pins circle { animation: uc-pop 520ms var(--uc-ease) 1150ms both; }
.uc-js .uc-map.is-in .uc-map__pins circle:nth-child(2) { animation-delay: 1300ms; }
.uc-js .uc-map.is-in .uc-map__pins circle:nth-child(3) { animation-delay: 1450ms; }

/* ============ THREE LANES ============ */
.uc-lanes { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.uc-lanes__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(28px, 5vw, 80px); margin: clamp(20px, 2.6vw, 32px) 0 clamp(32px, 4vw, 56px); }
.uc-lanes__intro p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.uc-lanes__intro .uc-lanes__pull { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.35; color: var(--ink); padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--uc-l1); }
.uc-lanehead { display: grid; grid-template-columns: 13% repeat(3, minmax(0, 1fr)); }
.uc-lane { padding: 0 22px 20px; border-bottom: 3px solid; }
.uc-lane:first-child { grid-column: 2; }
.uc-lane-ic { display: block; width: 56px; height: 56px; margin-bottom: 12px; overflow: visible; }
.uc-lane-ic path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uc-lane-ic .f { stroke: none; }
.uc-lane__k { font-size: 15px; font-weight: 600; }
.uc-lane__n { margin: 6px 0 4px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 3.4vw, 3.2rem); line-height: 1; font-variant-numeric: lining-nums; }
.uc-lane h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.uc-lane__d { margin-top: 8px !important; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.uc-l1 { border-color: var(--uc-l1); } .uc-l2 { border-color: var(--uc-l2); } .uc-l3 { border-color: var(--uc-l3); }
.uc-l1 :is(.uc-lane__k, .uc-lane__n) { color: var(--uc-l1-ink); } .uc-l1 .f { fill: var(--uc-l1); } .uc-l1 .t { stroke: var(--uc-l1); }
.uc-l2 :is(.uc-lane__k, .uc-lane__n) { color: var(--uc-l2-ink); } .uc-l2 .f { fill: var(--uc-l2); }
.uc-l3 :is(.uc-lane__k, .uc-lane__n) { color: var(--uc-l3-ink); } .uc-l3 .f { fill: var(--uc-l3); } .uc-l3 .t { stroke: var(--uc-l3); }
.uc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* the lanes are named above the table; its own column heads are for a screen reader */
.uc-table thead :is(td, th) { height: 0; padding: 0; border: 0; font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
.uc-table thead td { width: 13%; }
.uc-table tbody th { padding: 18px 16px 18px 0; text-align: left; vertical-align: top; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); border-bottom: 1px solid var(--border); }
.uc-table tbody td { padding: 18px 22px; vertical-align: top; font-size: 16px; line-height: 1.5; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
.uc-table tbody td + td { border-left: 1px solid var(--border); }
.uc-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
/* the three lanes arrive one after another, left to right */
.uc-js :is(.uc-lane, .uc-table tbody td) { transition: opacity 560ms ease, transform 760ms var(--uc-ease); }
.uc-js :is(.uc-lanehead, .uc-table):not(.is-in) :is(.uc-lane, tbody td) { opacity: 0; transform: translateX(-26px); }
.uc-js :is(.uc-lane:nth-child(2), .uc-table td:nth-child(3)) { transition-delay: 160ms; }
.uc-js :is(.uc-lane:nth-child(3), .uc-table td:nth-child(4)) { transition-delay: 320ms; }
.uc-lanes__short { margin-top: clamp(24px, 3vw, 40px) !important; padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--border-strong); font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.uc-lanes__short strong { font-weight: 600; color: var(--ink); }

/* the one tinted surface on the page: the room the cells never leave */
.uc-room { display: grid; grid-template-columns: clamp(96px, 12vw, 150px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(36px, 5vw, 64px) !important; padding: clamp(28px, 4vw, 56px) !important; background: var(--accent-wash); border-radius: 10px; }
.uc-room__ic { width: 100%; height: auto; overflow: visible; }
.uc-room__ic path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-room__ic .d { fill: #fff; transform-box: fill-box; transform-origin: left center; }
.uc-room__ic .k { fill: var(--ink); }
.uc-room__ic .c { fill: var(--uc-l1); }
.us-clinics .uc-room p, .us-clinics .uc-room a { font-family: var(--font-body); font-style: normal; }
.uc-room__lead { font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.us-clinics .uc-room .uc-room__q { margin: 10px 0 12px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: 1.18; color: var(--ink); text-wrap: balance; }
.uc-room__q em { color: var(--accent-blue-hover); }
.uc-room__by { font-size: 16px; color: var(--ink-muted); margin-bottom: 8px !important; }
/* the door swings shut on the cells inside */
@keyframes uc-door { from { transform: scaleX(1); } to { transform: scaleX(.12); } }
@keyframes uc-bob { 50% { transform: translateY(-4px); } }
.uc-js .uc-room.is-in .d { animation: uc-door 1100ms var(--uc-ease) 300ms both; }
.uc-js .uc-room.is-in .c { animation: uc-bob 2.6s ease-in-out 3; }
.uc-js .uc-room.is-in .c:nth-of-type(odd) { animation-delay: -900ms; }

/* ============ IN THE SYRINGE ============ */
.uc-menu { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.uc-menu__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(28px, 5vw, 80px); align-items: start; margin-block: clamp(20px, 2.6vw, 32px) clamp(28px, 4vw, 52px); }
.uc-menu__head p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.uc-menu__head .uc-menu__cue { font-size: 16px; font-weight: 600; color: var(--ink); }
.uc-swatch { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px !important; }
.uc-swatch li, .uc-mix li { display: inline-flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.uc-swatch i, .uc-mix i { flex: none; width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
.s-msc { background: var(--s-msc); } .s-hsc { background: var(--s-hsc); } .s-imm { background: var(--s-imm); } .s-oth { background: var(--s-oth); }
.s-mat { background: var(--s-mat); box-shadow: inset 0 0 0 1px rgba(11, 29, 58, .16); } .s-rbc { background: var(--s-rbc); } .s-plt { background: var(--s-plt); box-shadow: inset 0 0 0 1px rgba(11, 29, 58, .12); }

.uc-prod { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(24px, 3.4vw, 56px); align-items: start; padding-block: clamp(26px, 3.2vw, 40px); border-top: 1px solid var(--border); }
.uc-prod--cultured { border-top: 2px solid var(--ink); }
.uc-prod h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; color: var(--ink); }
.uc-prod header p { margin-top: 6px !important; font-size: 15.5px; color: var(--ink-muted); }
/* a syringe on its side: rod, barrel filled to the product's mix, tip and needle */
.uc-syr { display: flex; align-items: center; height: 56px; }
.uc-syr__rod { position: relative; flex: none; width: 11%; height: 6px; background: var(--ink); border-radius: 2px 0 0 2px; }
.uc-syr__rod::before { content: ""; position: absolute; left: -3px; top: -16px; width: 6px; height: 38px; border-radius: 3px; background: var(--ink); }
.uc-syr__barrel { position: relative; flex: 1; display: flex; height: 46px; border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; background: #fff; }
.uc-syr__barrel i { flex: 0 0 calc(var(--w) * 1%); min-width: 0; transform-origin: left; }
.uc-syr__barrel i[style*="--w:0.5"] { min-width: 14px; }
.uc-syr__barrel i:last-child { flex: 1 1 0; }
/* graduation marks along the top of the barrel */
.uc-syr__barrel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 9px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), rgba(11, 29, 58, .55) calc(10% - 1.5px) 10%); }
.uc-syr__tip { position: relative; flex: none; width: 13%; height: 2px; background: var(--ink); }
.uc-syr__tip::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 18px; background: #fff; border: 2px solid var(--ink); border-left: 0; border-radius: 0 4px 4px 0; box-sizing: border-box; }
.uc-prod__body { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 6fr); gap: 16px clamp(24px, 3.4vw, 56px); align-items: start; margin-top: 16px; }
.uc-mix { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.uc-mix li { color: var(--ink-soft); }
.uc-mix b { font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.uc-prod__body .uc-prod__note { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.uc-facts { display: grid; gap: 0; }
.uc-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.uc-facts > div:first-child { padding-top: 0; }
.uc-facts > div:last-child { border-bottom: 0; }
.uc-facts dt { flex: none; color: var(--ink-muted); }
.uc-facts dd { text-align: right; font-weight: 500; color: var(--ink); }
/* the plunger pushes home and the barrel fills, one kind of cell after another */
@keyframes uc-fill { from { transform: scaleX(0); } }
@keyframes uc-push { from { transform: translateX(-16px); } }
.uc-js .uc-prod:not(.is-in) .uc-syr__barrel i { transform: scaleX(0); }
.uc-js .uc-prod.is-in .uc-syr__barrel i { animation: uc-fill 620ms var(--uc-ease) both; animation-delay: calc(160ms + var(--i) * 130ms); }
.uc-js .uc-prod.is-in .uc-syr__rod { animation: uc-push 900ms var(--uc-ease) both; }
.uc-js .uc-prod header, .uc-js .uc-prod .uc-facts, .uc-js .uc-prod .uc-mix, .uc-js .uc-prod__note { transition: opacity 600ms ease 200ms; }
.uc-js .uc-prod:not(.is-in) :is(header, .uc-facts, .uc-mix, .uc-prod__note) { opacity: 0; }
.uc-menu__foot { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.uc-menu__foot .uc-more__body { padding-bottom: 6px; }

/* ============ THE CLAIMS ============ */
.uc-claims { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.uc-claims__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(24px, 3.4vw, 44px); }
.uc-claims__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.uc-claims__head p { font-size: 17px; line-height: 1.55; color: var(--ink-muted); }
.uc-horn { display: block; width: clamp(120px, 14vw, 180px); height: auto; margin-top: clamp(20px, 3vw, 36px); overflow: visible; }
.uc-horn path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc-horn .uc-horn__w { stroke: var(--accent-blue); stroke-width: 2.2; }
/* the claim goes out, one ring after another */
@keyframes uc-say { from { opacity: 0; transform: translateX(-14px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.uc-js .uc-horn:not(.is-in) .uc-horn__w { opacity: 0; }
.uc-js .uc-horn.is-in .uc-horn__w { animation: uc-say 700ms var(--uc-ease) both; animation-delay: calc(250ms + var(--i) * 220ms); }
.uc-claim { border-top: 1px solid var(--border-strong); }
.uc-claim:last-child { border-bottom: 1px solid var(--border-strong); }
.uc-claim summary { position: relative; display: block; padding: 22px 56px 22px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; color: var(--ink); transition: color 200ms, padding-left 360ms var(--uc-ease); }
.uc-claim summary::-webkit-details-marker { display: none; }
/* a plus that turns into a minus */
.uc-claim summary::before, .uc-claim summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--accent-blue); transition: transform 360ms var(--uc-ease); }
.uc-claim summary::after { transform: rotate(90deg); }
.uc-claim[open] summary::after { transform: rotate(0deg); }
.uc-claim summary:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.uc-claim summary:hover::before { transform: scaleX(1.25); }
.uc-claim__a { padding: 0 56px 26px 0; }
.uc-claim__a p { padding-left: clamp(16px, 2vw, 26px); border-left: 3px solid var(--accent-blue); font-size: 17.5px; line-height: 1.65; color: var(--ink-soft); }

/* ============ WHO RUNS THEM ============ */
.uc-who { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.uc-who__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; margin-top: clamp(20px, 2.6vw, 32px); }
.uc-who__head p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.us-clinics .uc-who__head .uc-who__unit { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 15px; color: var(--ink-muted); }
.uc-who__unit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); }
.uc-nets { margin-top: clamp(20px, 2.6vw, 32px) !important; border-top: 1px solid var(--border-strong); }
.uc-net { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px clamp(24px, 3.4vw, 56px); align-items: start; padding-block: clamp(22px, 2.8vw, 34px); border-bottom: 1px solid var(--border-strong); }
.uc-net h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--ink); }
.uc-net__n b { display: block; margin: 4px 0 12px; font-size: 15.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.uc-tally { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 9px); grid-auto-columns: 9px; gap: 3px; min-height: 57px; justify-content: start; }
.uc-tally i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); }
.uc-net--tail .uc-tally i { background: var(--uc-l1); }
.uc-net__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 14px clamp(24px, 3.4vw, 56px); align-items: start; }
.uc-net__body > p { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.uc-net dl > div { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.uc-net dl > div:first-child { padding-top: 0; }
.uc-net dl > div:last-child { border-bottom: 0; }
.uc-net dt { color: var(--ink-muted); }
.uc-net dd { font-weight: 500; color: var(--ink); }
/* each network is counted out, five locations to a dot */
@keyframes uc-dot { from { opacity: 0; transform: scale(0); } }
.uc-js .uc-net:not(.is-in) .uc-tally i { opacity: 0; }
.uc-js .uc-net.is-in .uc-tally i { animation: uc-dot 320ms var(--uc-ease) both; animation-delay: calc(var(--i) * 9ms); }
.uc-js .uc-net :is(h3, b, p, dl) { transition: opacity 600ms ease; }
.uc-js .uc-net:not(.is-in) :is(h3, b, p, dl) { opacity: 0; }

/* ============ ENFORCEMENT ============ */
.uc-law { padding-block: clamp(56px, 7vw, 104px); }
.uc-law__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; margin-top: clamp(24px, 3.4vw, 44px); }
.uc-law__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.uc-gavel { display: block; width: clamp(120px, 13vw, 170px); height: auto; margin: 0 0 clamp(14px, 2vw, 22px); overflow: visible; }
.uc-gavel path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc-gavel__arm { transform-box: view-box; transform-origin: 36px 122px; }
@keyframes uc-strike { from { transform: rotate(-26deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-3deg); } to { transform: none; } }
.uc-js .uc-gavel.is-in .uc-gavel__arm { animation: uc-strike 900ms cubic-bezier(.5, 0, .3, 1) 200ms both; }
.uc-law__head p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.uc-law__head .uc-more__body { margin-top: 14px; }
.uc-law__head .uc-law__aside { margin-top: 22px !important; padding-top: 20px; border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.35; color: var(--ink); }
.uc-law__aside strong { font-weight: 500; color: var(--uc-l3-ink); }
.uc-law__cap { font-size: 15.5px; color: var(--ink-muted); margin-bottom: 18px !important; }
/* a stop for each action, and one connector per gap: nothing runs on past the last stop */
.uc-time li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 20px; padding: 0 0 clamp(26px, 3vw, 38px) 34px; }
.uc-time li:last-child { padding-bottom: 0; }
.uc-time li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; box-sizing: border-box; border: 2px solid var(--border-strong); border-radius: 50%; background: #fff; z-index: 1; transition: border-color 320ms, background-color 320ms, transform 420ms var(--uc-ease); }
.uc-time li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 22px; bottom: -7px; width: 2px; background: linear-gradient(var(--uc-l3), var(--uc-l3)) no-repeat top / 100% 0, var(--border); transition: background-size 620ms var(--uc-ease); }
.uc-time li.is-passed::before { border-color: var(--uc-l3); background: var(--uc-l3); transform: scale(1.12); }
.uc-time li.is-passed:not(:last-child)::after { background-size: 100% 100%, auto; }
.uc-time time { grid-row: 1 / span 2; font-family: var(--font-display); font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.15; color: var(--uc-l3-ink); font-variant-numeric: lining-nums tabular-nums; }
.uc-time h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.uc-time p { margin-top: 6px !important; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }

/* ============ THE DIFFERENCE (navy) ============ */
.uc-diff { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.us-clinics .uc-diff h2 { color: #fff; margin-bottom: clamp(28px, 4vw, 56px); }
.uc-diff__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.uc-pair svg { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; overflow: visible; }
.uc-pair path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc-pair circle { transform-box: fill-box; transform-origin: center; }
.uc-pair .o { fill: rgba(255, 255, 255, .32); }
.uc-pair .m { fill: #7db8f2; }
@keyframes uc-settle { from { opacity: 0; transform: translateY(-30px); } }
.uc-js .uc-pair:not(.is-in) circle { opacity: 0; }
.uc-js .uc-pair.is-in circle { animation: uc-settle 520ms var(--uc-ease) both; animation-delay: calc(var(--i) * 22ms); }
.uc-js .uc-pair.is-in .uc-pair__b circle { animation-delay: calc(500ms + var(--i) * 22ms); }
.uc-diff__lede { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.25; color: #fff; }
.uc-diff__text p + p { margin-top: 18px !important; font-size: 17.5px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.uc-verdict { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .18); }
.uc-verdict h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.25; color: #fff; text-wrap: balance; }
.uc-verdict__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 5vw, 80px); margin-top: clamp(18px, 2.4vw, 28px); }
.uc-verdict__cols p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .84); }

/* ============ RELATED ============ */
.uc-rel { padding-block: clamp(56px, 7vw, 104px); }
.uc-rel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.uc-rel__lib svg { width: 60px; height: 52px; margin-right: 4px; overflow: visible; }
.uc-rel__lib svg path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uc-rel__lib svg .l { stroke: var(--border-strong); stroke-width: 1.4; transition: stroke 260ms; }
.uc-rel__lib:hover svg .l { stroke: var(--accent-blue); }
.uc-rel__list { border-top: 1px solid var(--border-strong); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); }
.us-clinics .uc-rel__list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 20px 0; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.25; color: var(--ink); transition: color 200ms, padding-left 360ms var(--uc-ease); }
.uc-rel__list i { flex: none; font-style: normal; font-family: var(--font-body); font-size: 20px; color: var(--accent-blue); transition: transform 360ms var(--uc-ease); }
.uc-rel__list a:hover { color: var(--accent-blue-hover); padding-left: 10px; }
.uc-rel__list a:hover i { transform: translateX(6px); }

/* ============ SELF-ASSESSMENT ============ */
.uc-end { border-top: 1px solid var(--border); padding-block: clamp(56px, 7vw, 96px); }
.uc-end .assess-band__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--uc-gut); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.us-clinics .uc-end .assess-band__title { text-wrap: balance; }
.uc-sheet { width: 72px; height: auto; transform: rotate(3deg); overflow: visible; }
.uc-sheet .s { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.uc-sheet .l { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.uc-sheet .t { fill: none; stroke: var(--accent-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uc-end .assess-band__lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.uc-end .btn { margin-top: 6px; }
.uc-end .assess-band__note { font-size: 14px; color: var(--ink-muted); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .uc-prod__body, .uc-net__body { grid-template-columns: minmax(0, 1fr); }
  .uc-prod .uc-facts { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .uc-prod .uc-facts > div:nth-child(2) { padding-top: 0; }
  .uc-prod .uc-facts > div:nth-last-child(2) { border-bottom: 0; }
  .uc-net dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .uc-net dl > div { border-bottom: 0; padding: 0; }
}
@media (max-width: 900px) {
  .uc-hero__row, .uc-count__grid, .uc-growth, .uc-where__grid, .uc-lanes__intro, .uc-menu__head, .uc-claims__grid, .uc-who__head, .uc-law__grid, .uc-diff__grid, .uc-rel__list { grid-template-columns: minmax(0, 1fr); }
  .us-clinics .uc-who__head .uc-who__unit { justify-content: flex-start; }
  .uc-wall, .uc-claims__head, .uc-law__head { position: static; }
  .uc-hero__fig { order: -1; max-width: 520px; }
  .uc-horn { width: 96px; margin-top: 14px; }
  .uc-pair svg { max-width: 240px; }
  .uc-verdict__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* the three lanes stack, and the table becomes one block per question,
     each lane named beside its answer */
  .uc-lanehead { grid-template-columns: minmax(0, 1fr); }
  .uc-lane, .uc-lane:first-child { grid-column: 1; position: relative; padding: 18px 0 18px 84px; border-bottom: 0; border-top-width: 3px; border-top-style: solid; min-height: 96px; }
  .uc-lane-ic { position: absolute; left: 4px; top: 20px; width: 60px; height: 60px; margin: 0; }
  .uc-table, .uc-table tbody, .uc-table tr, .uc-table tbody th, .uc-table td { display: block; }
  .uc-table thead { display: none; }
  .uc-table tbody tr { padding: 16px 0 6px; border-top: 1px solid var(--border-strong); }
  .uc-table tbody th { padding: 0 0 6px; border: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--ink); }
  .uc-table tbody td { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 9px 0; border: 0 !important; border-top: 1px solid var(--border) !important; font-size: 15.5px; }
  .uc-table tbody td::before { content: attr(data-lane); font-size: 14px; font-weight: 600; }
  .uc-table tbody td:nth-child(2)::before { color: var(--uc-l1-ink); }
  .uc-table tbody td:nth-child(3)::before { color: var(--uc-l2-ink); }
  .uc-table tbody td:nth-child(4)::before { color: var(--uc-l3-ink); }
  .uc-js :is(.uc-lanehead, .uc-table):not(.is-in) :is(.uc-lane, tbody td) { transform: translateY(14px); }
  .uc-fold > summary { margin-top: 4px; }
  .uc-fold[open] > summary { margin-bottom: 8px; }
  .uc-room { grid-template-columns: minmax(0, 1fr); }
  .uc-room__ic { width: 84px; }
  .uc-prod, .uc-net { grid-template-columns: minmax(0, 1fr); }
  .uc-net dl { grid-template-columns: minmax(0, 1fr); }
  .uc-net dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .uc-net dd { text-align: right; }
  .uc-net--tail .uc-tally { grid-template-rows: repeat(8, 9px); min-height: 93px; }
  .uc-stats > div { grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 4px 16px; }
  .uc-claim summary { padding-right: 44px; }
  .uc-claim__a { padding-right: 0; }
  .uc-time li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .uc-time time { grid-row: auto; }
  .uc-chart__pt b, .uc-chart__x span, .uc-chart__y, .uc-chart__ev span { font-size: 13px; }
  .uc-chart__plot, .uc-chart__x { margin-left: 46px; margin-right: 14px; }
  .uc-chart__ev span { white-space: normal; width: 104px; }
  .uc-chart { padding-top: 44px; }
  .uc-chart__ev { top: -38px; }
}
@media (max-width: 480px) {
  .uc-prod .uc-facts { grid-template-columns: minmax(0, 1fr); }
  .uc-prod .uc-facts > div:nth-child(2) { padding-top: 9px; }
  .uc-prod .uc-facts > div:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .uc-wall__key button { width: 100%; }
}
/* a narrow field goes nearly square, so a dot is still a dot */
@media (max-width: 600px) {
  .uc-wall__field { --cols: 54; --rows: 51; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .us-clinics main *, .us-clinics main *::before, .us-clinics main *::after { animation: none !important; transition: none !important; }
  .uc-js [data-r]:not(.is-in), .uc-js :is(.uc-lanehead, .uc-table):not(.is-in) :is(.uc-lane, tbody td) { opacity: 1 !important; transform: none !important; }
  .uc-js :is(.uc-chart, .uc-map, .uc-prod, .uc-net, .uc-pair, .uc-top, .uc-horn):not(.is-in) * { opacity: 1 !important; transform: none !important; }
  .uc-js .uc-scene .uc-draw { stroke-dasharray: none; }
  .uc-js .uc-scene .uc-cell--msc { fill: var(--s-msc); }
  .us-clinics .hc-bar { transition: none !important; }
}
@media print {
  .us-clinics .hc-bar { display: none !important; }
  .uc-js [data-r], .uc-js [data-r] * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .uc-count, .uc-diff { background: #fff; color: var(--ink); }
  .uc-count *, .uc-diff * { color: var(--ink) !important; }
  .uc-wall, .uc-claims__head, .uc-law__head { position: static; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}

/* On paper every fold is open, so its Show less handle has nothing to do. */
@media print {
  details.uc-more > summary { display: none !important; }
}
