/* /learn-how-we-compare. Loaded after site.css and fit-quiz.css, by
   learn-how-we-compare.html only. The page answers one question (how do I
   tell which clinic is right for me), so each part has its own shape and its
   own way of arriving: a hero that assembles once, a checklist that ticks
   itself, a photo beside three rules, four cards that each draw their one
   difference to scale, a table that fills row by row, one navy promise.
   Everything holds its end state with scripts off, reduced motion and print. */

/* On the root, because scroll-padding-top (below) is read there. */
html:has(body.how-compare) {
  --hc-max: 1240px;
  --hc-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; scripts/how-we-compare.js sets the real header height */
  --hc-bar-h: 52px;
  --hc-ease: cubic-bezier(.16, 1, .3, 1);
  /* 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) + 20px);
}
body.how-compare { background: var(--white); }

/* Text fills its column; the column, not the paragraph, sets the measure.
   The two resets are colors_and_type.css's: bare <p> capped at 42rem, and a
   grey underline on every <a>. */
.how-compare main { overflow-x: clip; }
.how-compare main p { max-width: none; }
.how-compare main a:not(.btn, .hc-doc) { border-bottom: 0; }
/* (.hc-wrap and the closing band only: the quiz is a shared part with its own sheet) */
.how-compare :is(.hc-wrap, .hc-cta) :is(h1, h2, h3) { text-wrap: wrap; margin: 0; }
.how-compare :is(.hc-wrap, .hc-cta) :is(h1, h2, h3) em { color: var(--accent-blue); font-style: italic; }
/* A heading that has to wrap breaks where the styling changes. */
.how-compare .h-lead,
.how-compare .hc-wrap :is(h1, h2, h3) > em { display: inline-block; }
.how-compare :is(.hc-wrap, .hc-cta) h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.85rem); line-height: 1.1; font-weight: 300;
  margin: 0 0 clamp(28px, 3.6vw, 48px);
}

.hc-wrap { max-width: var(--hc-max); margin: 0 auto; padding: 0 var(--hc-gut); }

/* a part that receives focus after a jump is not itself a control */
.how-compare main [tabindex="-1"]:focus { outline: none; }
.how-compare main a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }

/* a link inside running text: dotted, so it reads as a reference */
.hc-list__fine a, .hc-rules a, .hc-table p a, .hc-vs__src {
  color: var(--accent-blue-hover); text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color 200ms, text-decoration-color 200ms;
}
/* an inline link keeps its line; the padding only makes it easier to hit */
.hc-list__fine a, .hc-rules a, .hc-table p a { padding-block: 6px; }
/* a link that stands on its own gets a full 44px target */
.hc-vs__src { display: inline-flex; align-items: center; min-height: 44px; }
.hc-list__fine a:hover, .hc-rules a:hover, .hc-table p a:hover, .hc-vs__src:hover { color: var(--accent-blue); text-decoration-style: solid; }

/* the arrow on a button or a link leans the way it points */
.hc-arr { display: inline-block; transition: transform 320ms var(--hc-ease); }
a:hover > .hc-arr, a:focus-visible > .hc-arr { transform: translateX(4px); }

/* ============ HERO: assembles once, in reading order ============
   Pure CSS, so it runs from the first paint and needs no script: the heading
   rises in two halves, the answer and the buttons follow, the photo slides in
   and settles, the contents rule draws itself and its four lines step in. */
.hc-hero { padding: clamp(20px, 3.4vw, 40px) 0 clamp(48px, 6vw, 80px); }
.hc-hero__h1 { font-size: clamp(2.2rem, 3.9vw, 3.5rem); line-height: 1.06; font-weight: 300; }
.hc-hero__h1 > * { animation: hc-rise 900ms var(--hc-ease) both; }
.hc-hero__h1 > em { animation-delay: 140ms; }
.hc-hero__row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  margin-top: clamp(24px, 3.4vw, 44px);
}
.hc-hero__text > * { animation: hc-rise 900ms var(--hc-ease) both; }
.hc-hero__answer {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.3rem, 1.95vw, 1.72rem); line-height: 1.36; color: var(--ink); margin: 0;
  animation-delay: 260ms;
}
.hc-hero__lede { margin: clamp(14px, 1.6vw, 20px) 0 0; font-size: clamp(1.02rem, 1.25vw, 1.14rem); line-height: 1.6; color: var(--ink-soft); animation-delay: 360ms; }
.hc-hero__lede em { font-style: italic; color: var(--accent-blue-hover); }
.hc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.8vw, 34px); animation-delay: 460ms; }
.hc-hero__actions .btn--lg { padding-inline: 24px; }
.hc-hero__photo {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--accent-wash);
  animation: hc-photo 1100ms 200ms var(--hc-ease) both;
}
/* the picture is taller than its frame by more than it ever travels (the drift, below) */
.hc-hero__photo img[width][height], .hc-case__frame img[width][height] {
  position: absolute; left: 0; top: -7%; display: block; width: 100%; height: 114%; object-fit: cover;
  transform: translate3d(0, calc(var(--hc-drift, 0) * 1px), 0); will-change: transform;
}
.hc-hero__photo img[width][height] { object-position: 50% 35%; animation: hc-settle 1800ms 200ms var(--hc-ease) both; }

/* Contents: the page's own headings, as links. */
.hc-toc { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.hc-toc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  transform-origin: left; animation: hc-rule 1100ms 620ms var(--hc-ease) both;
}
.hc-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px);
}
.hc-toc__list li { animation: hc-rise 800ms var(--hc-ease) both; }
.hc-toc__list li:nth-child(1) { animation-delay: 760ms; }
.hc-toc__list li:nth-child(2) { animation-delay: 840ms; }
.hc-toc__list li:nth-child(3) { animation-delay: 920ms; }
.hc-toc__list li:nth-child(4) { animation-delay: 1000ms; }
.hc-toc__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 15px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.25;
  color: var(--ink);
  transition: color 220ms, padding 320ms var(--hc-ease);
}
.hc-toc__list a::after {
  content: "\2193"; flex: none; font-family: var(--font-body); font-size: 18px; color: var(--accent-blue);
  opacity: .35; transform: translateY(-4px); transition: transform 320ms var(--hc-ease), opacity 220ms;
}
.hc-toc__list a:hover, .hc-toc__list a:focus-visible { color: var(--accent-blue); padding-left: 8px; }
.hc-toc__list a:hover::after, .hc-toc__list a:focus-visible::after { opacity: 1; transform: translateY(2px); }

@keyframes hc-fade { from { opacity: 0; } }
@keyframes hc-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hc-photo { from { opacity: 0; transform: translateX(32px); } }
@keyframes hc-settle { from { scale: 1.1; } }
@keyframes hc-rule { from { transform: scaleX(0); } }

/* ============ CONTENTS BAR (follows the reader) ============ */
.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(--hc-ease), visibility 0s 360ms;
}
.hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hc-ease); }
body.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: var(--hc-max); margin: 0 auto; padding: 0 var(--hc-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;
}
.hc-bar__track::-webkit-scrollbar { display: none; }
.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;
}
.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(--hc-ease);
}
.hc-bar__track a:hover, .hc-bar__track a[aria-current] { color: var(--ink); }
.hc-bar__track a:hover::after { transform: scaleX(.3); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.how-compare .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.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 CHECKLIST: the one tinted band ============
   Five real questions, one from each section, tick themselves in turn; the
   cover beside them keeps the count and follows the reader down the list. */
.hc-list { padding: clamp(56px, 7vw, 96px) 0; background: var(--accent-wash); }
.hc-list__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  column-gap: clamp(32px, 7vw, 112px); align-items: start;
}
.how-compare .hc-list__text h2 { margin-bottom: clamp(14px, 1.8vw, 20px); }
.hc-list__lede { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ink); }

.hc-q__lead { margin: clamp(28px, 3.4vw, 44px) 0 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hc-q { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.hc-q li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-items: start;
  padding: 16px 0 17px; border-bottom: 1px solid var(--border-strong);
}
.hc-tick { display: block; width: 26px; height: 26px; margin-top: 2px; grid-row: 1 / span 2; overflow: visible; }
.hc-tick rect { fill: var(--white); stroke: var(--accent-blue); stroke-width: 1.6; transition: stroke 300ms; }
.hc-tick path { fill: none; stroke: var(--accent-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 460ms var(--hc-ease); }
.hc-q__sec { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.hc-q__sec span { margin-left: 8px; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hc-q__item { grid-column: 2; font-family: var(--font-display); font-size: clamp(1.18rem, 1.6vw, 1.42rem); line-height: 1.28; color: var(--ink); }

.hc-list__open { margin-top: clamp(24px, 3vw, 36px); }
.hc-list__fine { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.hc-doc {
  position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px);
  display: flex; flex-direction: column; margin: 6px 14px 14px 0;
  padding: clamp(24px, 2.8vw, 34px); background: var(--white); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px;
  /* the pages under the cover */
  box-shadow: 6px 6px 0 -1px var(--white), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--white), 12px 12px 0 0 var(--border);
  transform: perspective(900px) rotateX(var(--hc-rx, 0deg)) rotateY(var(--hc-ry, 0deg));
  transition: transform 420ms var(--hc-ease), box-shadow 420ms var(--hc-ease), border-color 220ms;
}
.hc-doc:hover, .hc-doc:focus-visible {
  transform: perspective(900px) rotateX(var(--hc-rx, 0deg)) rotateY(var(--hc-ry, 0deg)) translate(-3px, -3px);
  border-color: var(--accent-blue); color: var(--ink);
  box-shadow: 9px 9px 0 -1px var(--white), 9px 9px 0 0 var(--border), 18px 18px 0 -1px var(--white), 18px 18px 0 0 var(--border);
}
/* while the pointer is steering the tilt it should not lag behind it */
.hc-doc.is-steered { transition: transform 90ms linear, box-shadow 420ms var(--hc-ease), border-color 220ms; }
.hc-doc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hc-doc__mark { display: block; overflow: hidden; }
.hc-doc__mark img[width][height] { display: block; width: 96px; height: auto; }
.hc-doc__count { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hc-doc__title {
  display: block; margin: clamp(22px, 2.6vw, 32px) 0 clamp(18px, 2vw, 24px);
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.08;
}
.hc-doc__title em { font-style: italic; color: var(--accent-blue); }
/* the page inside: five lines, each with its box */
.hc-doc__rows { display: grid; gap: 13px; padding-top: 20px; border-top: 1px solid var(--ink); }
.hc-doc__row { display: flex; align-items: center; gap: 12px; }
.hc-doc__row .hc-tick { width: 18px; height: 18px; margin: 0; flex: none; }
.hc-doc__row i { display: block; height: 7px; border-radius: 4px; background: var(--accent-wash); }
.hc-doc__row:nth-child(1) i { width: 74%; }
.hc-doc__row:nth-child(2) i { width: 58%; }
.hc-doc__row:nth-child(3) i { width: 80%; }
.hc-doc__row:nth-child(4) i { width: 52%; }
.hc-doc__row:nth-child(5) i { width: 66%; }
.hc-doc__foot { display: block; margin-top: 22px; font-size: 13px; color: var(--ink-muted); }

/* ============ THE CASE: a photo, and beside it one answer and three rules ============ */
.hc-case { padding: clamp(64px, 8vw, 112px) 0; }
.hc-case__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); }
/* the photo runs the height of the text beside it */
.hc-case__photo { margin: 0; display: flex; flex-direction: column; }
.hc-case__frame { position: relative; display: block; flex: 1; min-height: 320px; border-radius: 8px; overflow: hidden; background: var(--accent-wash); }
.hc-case__frame img[width][height] { object-position: 12% 50%; }
.hc-case__photo figcaption { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.how-compare .hc-case__body h2 { margin-bottom: clamp(10px, 1.4vw, 16px); }
.hc-case__lead { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.34rem); line-height: 1.6; color: var(--ink); }
.hc-case__lead strong { font-weight: 600; }
.hc-case__lead em { font-style: italic; color: var(--accent-blue-hover); }
/* the answer to the heading, before anything else */
.hc-case__no {
  display: block; margin-bottom: clamp(10px, 1.4vw, 16px); transform-origin: left bottom;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(3.2rem, 6vw, 5.2rem); line-height: .95; color: var(--accent-blue);
}
.hc-read { margin-top: clamp(28px, 3.6vw, 44px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--ink); }
.hc-read h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.2; font-weight: 400; }
.hc-rules { list-style: none; margin: 8px 0 0; padding: 0; }
.hc-rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.hc-rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.hc-rules p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.hc-rules p strong { font-weight: 600; color: var(--ink); }
.hc-rules__ic { display: block; width: 48px; height: 48px; }
.hc-rules__ic :is(path, circle) { fill: none; stroke: var(--accent-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hc-rules__ic circle { stroke: var(--border-strong); stroke-width: 1.4; }

/* ============ FOUR CLINICS: each card draws its one difference, to scale ============ */
.hc-clinics { padding: 0 0 clamp(64px, 8vw, 112px); }
.hc-clinics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.hc-clinic {
  position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0;
  padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  transition: border-color 260ms, box-shadow 420ms var(--hc-ease), transform 420ms var(--hc-ease);
}
/* the whole card is the way to its article (the link at its foot is stretched over it) */
.hc-clinic:hover, .hc-clinic:focus-within { border-color: var(--accent-blue); box-shadow: 0 18px 40px -26px rgba(11, 29, 58, .4); transform: translateY(-3px); }
/* the clinic's own mark, as it publishes it: a wordmark sits on the card, a square icon keeps its own tile */
/* the box hugs the mark and does the clipping, so a tile's corners are the box's */
.hc-clinic__mark { display: block; justify-self: start; align-self: start; height: 56px; max-width: 100%; margin-bottom: clamp(16px, 2vw, 24px); overflow: hidden; }
.hc-clinic__mark:has(.hc-clinic__logo--sq) { border-radius: 10px; }
.hc-clinic__mark:has(.hc-clinic__logo--chip) { border-radius: 8px; }
.hc-clinic__logo[width][height] { display: block; width: auto; height: 56px; max-width: 100%; object-fit: contain; object-position: left center; }
.hc-clinic__logo--sq[width][height] { width: 56px; }
/* a mark drawn for a dark page keeps a dark ground */
.hc-clinic__logo--chip[width][height] { padding: 14px 18px; background: var(--ink); box-sizing: border-box; }
/* a wordmark is sized by its width; every mark's box is the same height, so the row of them lines up */
.hc-clinic__logo--wide[width][height] { width: 260px; }
.hc-clinic__logo--wide[src*="bioxcellerator"][width][height] { width: 224px; }
/* the name, then the one thing that differs */
.hc-clinic h3, .hc-clinic__diff { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.15vw, 2rem); line-height: 1.16; }
.hc-clinic__diff { margin: 0; font-style: italic; color: var(--accent-blue); }
.hc-clinic__text { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.hc-clinic__text strong { font-weight: 600; }
.hc-clinic__text em { font-style: italic; }
.hc-clinic__more {
  display: inline-flex; align-items: center; gap: 8px; align-self: end; justify-self: start;
  min-height: 44px; margin: 8px 0 -8px; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover);
}
.hc-clinic__more::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.hc-clinic__more:focus-visible { outline: none; }
.hc-clinic__more:focus-visible::after { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.hc-clinic__arrow { transition: transform 320ms var(--hc-ease); }
.hc-clinic:hover .hc-clinic__arrow, .hc-clinic__more:focus-visible .hc-clinic__arrow { transform: translateX(5px); }
.hc-clinic:hover .hc-clinic__more { color: var(--accent-blue); }

/* the comparison: us above them, on one scale, so the eye measures it */
.hc-vs { display: grid; grid-template-rows: subgrid; grid-row: span 3; margin: clamp(18px, 2.2vw, 26px) 0; padding: clamp(14px, 1.8vw, 20px) 0 clamp(8px, 1vw, 12px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hc-vs__row {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: clamp(12px, 2vw, 24px);
  align-items: start; align-content: start; padding: 12px 0;
}
.hc-vs__row + .hc-vs__row { border-top: 1px dashed var(--border-strong); }
.hc-vs__row > * { grid-column: 1; }
.hc-vs__who { font-size: 14px; font-weight: 600; color: var(--ink); }
.hc-vs__row--us .hc-vs__who { color: var(--accent-blue-hover); }
.hc-vs__val { margin-top: 2px; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.hc-vs__val b {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums lining-nums;
}
.hc-vs__row--us .hc-vs__val b { color: var(--accent-blue); }
/* a product named in words stands as tall as a figure, so the lines under both start level */
.hc-vs .hc-vs__val--words { display: flex; align-items: flex-end; min-height: calc(clamp(2rem, 3.4vw, 2.9rem) * 1.05); white-space: normal; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.12; color: var(--ink); }
.hc-vs__row--us .hc-vs__val--words { color: var(--accent-blue); }
.hc-nw { white-space: nowrap; }
.hc-vs__note { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* the drawing sits level with the figure it draws, at the same height in every card */
.hc-vs__row > .hc-vs__viz { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 30px; }
.hc-vs__viz { position: relative; display: flex; align-items: center; gap: 5px; min-height: 28px; color: var(--ink); }
.hc-vs__row--us .hc-vs__viz { color: var(--accent-blue); }
.hc-vs__src { position: relative; z-index: 1; justify-self: start; align-self: end; margin-top: 2px; font-size: 13px; }

/* the small drawn things: a day, a hotel night, home, a car, a plane */
.hc-day { flex: none; display: block; width: 18px; height: 18px; border-radius: 4px; background: currentColor; }
.hc-g { flex: none; display: block; width: 18px; height: 18px; overflow: visible; }
.hc-g path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hc-g--moon { width: 15px; height: 15px; color: var(--ink-soft); }
.hc-g--home { width: 22px; height: 22px; margin-left: 5px; }
.hc-g--plane { width: 24px; height: 24px; }
.hc-g--plane path { stroke-width: 1.5; }
.hc-g--car { width: 22px; height: 22px; }

/* the two distances on one scale: 140 of 3,000 miles is 4.7% of the long road */
.hc-vs--miles .hc-vs__viz { display: block; height: 28px; }
.hc-vs--miles .hc-vs__viz::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: currentColor; }
.hc-road { position: absolute; left: 4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; transform-origin: left; }
.hc-vs--miles .hc-vs__row--us .hc-road { width: max(4.7%, 9px); }
.hc-vs--miles .hc-vs__row--us .hc-g--car { position: absolute; left: calc(max(4.7%, 9px) + 10px); top: 50%; margin-top: -11px; }
.hc-vs--miles .hc-vs__row:not(.hc-vs__row--us) .hc-road { right: 28px; }
.hc-fly { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; }


/* a hospital, and a practice you reach on a screen */
.hc-ic { display: block; width: 84px; height: 63px; overflow: visible; }
.hc-ic :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hc-ic .hc-ic__cross { stroke: var(--accent-blue); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }

/* "multi-day": the clinic gives no count, so the row trails off instead of ending */
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-g--plane { margin-right: 4px; }
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(2) { opacity: .82; }
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(3) { opacity: .64; }
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(4) { opacity: .48; }
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(5) { opacity: .34; }
.hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(6) { opacity: .2; }
.hc-dot { flex: none; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-muted); }

/* ============ THE TABLE: columns on a desk, one question at a time on a phone ============ */
.hc-table { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--border); }
.how-compare .hc-table h2 { margin-bottom: clamp(18px, 2.2vw, 28px); }
.hc-table__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px); align-items: center; margin-bottom: clamp(28px, 3.6vw, 44px); }
.hc-table__head p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
/* one day out of a week, over a whole week */
.hc-week { display: block; width: 234px; height: auto; overflow: visible; }
.hc-week rect { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.hc-week .us { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.hc-week .us.on { fill: var(--accent-blue); stroke: none; }

.hc-ctable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16.5px; line-height: 1.5; }
.hc-ctable thead th { position: relative; padding: 0 20px 14px; text-align: left; vertical-align: bottom; font-size: 14px; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--ink); }
.hc-ctable thead th:first-child { width: 26%; padding-left: 0; }
.hc-ctable thead th:nth-child(2) { color: var(--accent-blue-hover); }
/* our column is marked by a rule that draws itself under its name */
.hc-ctable thead th:nth-child(2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent-blue); transform-origin: left; }
.hc-ctable tbody th, .hc-ctable tbody td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.hc-ctable tbody th { padding-left: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.hc-ctable tbody td { color: var(--ink-soft); }
.hc-ctable tbody td:nth-child(2) { color: var(--ink); font-weight: 500; }
.hc-ctable tbody td strong { font-weight: 600; }

/* ============ THE PROMISE: one navy band ============
   Go looking for the two words: the glass passes over the line once and
   finds nothing, and the words themselves are struck. */
.hc-promise { padding: clamp(64px, 8vw, 112px) 0; background: var(--navy-brand); }
.hc-promise__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.hc-promise__glass { display: block; width: clamp(64px, 8vw, 104px); height: auto; aspect-ratio: 1; margin-top: 6px; overflow: visible; }
.hc-promise__glass path { fill: none; stroke: var(--accent-ice); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.hc-promise p {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.26;
  letter-spacing: -.005em; color: var(--white);
}
.hc-promise em { position: relative; font-style: italic; color: var(--accent-ice); white-space: nowrap; }
.hc-promise em::after { content: ""; position: absolute; left: -3px; right: -3px; top: 56%; height: 1.5px; border-radius: 1px; background: var(--white); transform-origin: left; }
.hc-promise__label { display: block; margin-bottom: 18px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--accent-ice); }

/* ============ CLOSING: narrow and centred on purpose ============ */
.hc-cta { padding: clamp(72px, 9vw, 120px) var(--hc-gut); text-align: center; }
.hc-cta__inner { max-width: 720px; margin: 0 auto; }
.how-compare .hc-cta h2 { margin-bottom: 16px; }
.hc-cta p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.hc-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 20px; }
.hc-cta small { display: block; font-size: 14px; color: var(--ink-muted); }

/* ============ ARRIVALS (only once the script has said it is running) ============
   Each part comes in its own way, once. Nothing is clipped to no area: a box
   that keeps its size is a box the observer can see. */
.hc-js [data-r] { opacity: 0; transition: opacity 700ms var(--hc-ease), transform 900ms var(--hc-ease), border-color 260ms, box-shadow 420ms var(--hc-ease); }
.hc-js [data-r].is-in { opacity: 1; }

/* the checklist: the list is already there; its boxes are ticked one at a time (the script keeps count) */
.hc-js .hc-q[data-r] { opacity: 1; }
.hc-js .hc-q li > span { opacity: .5; transition: opacity 520ms var(--hc-ease); }
.hc-js .hc-q li.is-ticked > span { opacity: 1; }
.hc-js :is(.hc-q li, .hc-doc__row):not(.is-ticked) .hc-tick path { stroke-dashoffset: 1; }
.hc-js :is(.hc-q li, .hc-doc__row):not(.is-ticked) .hc-tick rect { stroke: var(--border-strong); }
.hc-js .hc-list__open[data-r] { transform: translateY(14px); }
.hc-js .hc-list__open[data-r].is-in { transform: none; }
/* the cover is set down slightly askew, then its pages fan out under it */
.hc-js .hc-doc[data-r] { transform: translateY(22px) rotate(2.2deg); box-shadow: 0 0 0 -1px var(--white), 0 0 0 0 var(--border), 0 0 0 -1px var(--white), 0 0 0 0 var(--border); }
.hc-js .hc-doc[data-r].is-in { transform: perspective(900px) rotateX(var(--hc-rx, 0deg)) rotateY(var(--hc-ry, 0deg)); box-shadow: 6px 6px 0 -1px var(--white), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--white), 12px 12px 0 0 var(--border); transition-duration: 700ms, 900ms, 260ms, 900ms; }
.hc-js .hc-doc[data-r].is-in:is(:hover, :focus-visible) { transform: perspective(900px) rotateX(var(--hc-rx, 0deg)) rotateY(var(--hc-ry, 0deg)) translate(-3px, -3px); box-shadow: 9px 9px 0 -1px var(--white), 9px 9px 0 0 var(--border), 18px 18px 0 -1px var(--white), 18px 18px 0 0 var(--border); transition-duration: 700ms, 420ms, 220ms, 420ms; }
.hc-js .hc-doc[data-r].is-in.is-steered { transition-duration: 700ms, 90ms, 220ms, 420ms; transition-timing-function: var(--hc-ease), linear, ease, var(--hc-ease); }

/* the case: the photo comes in from its own side and settles; the answer lands first, then the rules, each drawing its sign */
.hc-js .hc-case__photo[data-r] { transform: translateX(-28px); }
.hc-js .hc-case__photo[data-r].is-in { transform: none; }
.hc-js .hc-case__photo[data-r] img { scale: 1.08; transition: scale 1600ms var(--hc-ease); }
.hc-js .hc-case__photo[data-r].is-in img { scale: 1; }
.hc-js .hc-case__lead[data-r] .hc-case__no { transform: scale(.7); opacity: 0; transition: transform 800ms var(--hc-ease), opacity 500ms; }
.hc-js .hc-case__lead[data-r].is-in .hc-case__no { transform: none; opacity: 1; }
.hc-js .hc-read[data-r] { transform: translateX(24px); }
.hc-js .hc-read[data-r].is-in { transform: none; }
.hc-js .hc-read[data-r] .hc-rules li { opacity: 0; transform: translateX(18px); transition: opacity 600ms var(--hc-ease), transform 800ms var(--hc-ease); }
.hc-js .hc-read[data-r].is-in .hc-rules li { opacity: 1; transform: none; }
.hc-js .hc-read[data-r].is-in .hc-rules li:nth-child(1) { transition-delay: 160ms; }
.hc-js .hc-read[data-r].is-in .hc-rules li:nth-child(2) { transition-delay: 300ms; }
.hc-js .hc-read[data-r].is-in .hc-rules li:nth-child(3) { transition-delay: 440ms; }
.hc-js .hc-read[data-r].is-in .hc-rules__ic :is(path, circle) { animation: hc-draw 1100ms var(--hc-ease) both; }
.hc-js .hc-read[data-r].is-in li:nth-child(1) .hc-rules__ic :is(path, circle) { animation-delay: 260ms; }
.hc-js .hc-read[data-r].is-in li:nth-child(2) .hc-rules__ic :is(path, circle) { animation-delay: 400ms; }
.hc-js .hc-read[data-r].is-in li:nth-child(3) .hc-rules__ic :is(path, circle) { animation-delay: 540ms; }

/* the cards rise, the right-hand one a beat later; then each draws its difference */
.hc-js .hc-clinic[data-r] { transform: translateY(30px) scale(.985); }
.hc-js .hc-clinic[data-r].is-in { transform: none; }
.hc-js .hc-clinic[data-r]:nth-child(even) { transition-delay: 120ms; }
.hc-js .hc-clinic[data-r].is-in:is(:hover, :focus-within) { transform: translateY(-3px); transition-delay: 0s; }
.hc-js .hc-clinic:not(.is-in) .hc-vs__viz > * { opacity: 0; }
.hc-clinic.is-in :is(.hc-day, .hc-g, .hc-dot) { animation: hc-pop 460ms var(--hc-ease) both; animation-delay: calc(360ms + var(--i, 0) * 150ms); }
.hc-clinic.is-in .hc-g--moon { animation-name: hc-fade; }
.hc-clinic.is-in .hc-road { animation: hc-road 1500ms 420ms cubic-bezier(.45, 0, .2, 1) both; }
.hc-clinic.is-in .hc-vs__row--us .hc-road { animation-duration: 300ms; }
.hc-clinic.is-in .hc-vs__row--us .hc-g--car { animation: hc-pop 460ms 700ms var(--hc-ease) both; }
.hc-clinic.is-in .hc-fly { animation: hc-fly 1500ms 420ms cubic-bezier(.45, 0, .2, 1) both; }
.hc-clinic.is-in .hc-fly .hc-g--plane { animation: hc-lift 1500ms 420ms ease-in-out both; }
.hc-clinic.is-in .hc-ic :is(path, circle) { animation: hc-draw 1200ms 380ms var(--hc-ease) both; }
.hc-clinic.is-in .hc-vs__row:not(.hc-vs__row--us) .hc-ic :is(path, circle) { animation-delay: 620ms; }
.hc-clinic.is-in .hc-ic .hc-ic__cross { animation: hc-draw 700ms 1100ms var(--hc-ease) both, hc-beat 900ms 1800ms ease-in-out 2; }
/* the open-ended stay never quite arrives at its last day */
.hc-clinic.is-in .hc-dot { animation: hc-pop 460ms var(--hc-ease) both, hc-trail 2400ms ease-in-out infinite; animation-delay: calc(360ms + var(--i, 0) * 150ms), calc(1800ms + var(--i, 0) * 150ms); }

/* the table: our column's rule draws itself, the rows arrive in the order you read them, the week counts in */
.hc-js .hc-ctable[data-r] { opacity: 1; }
.hc-js .hc-ctable[data-r] tbody tr { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--hc-ease), transform 700ms var(--hc-ease); }
.hc-js .hc-ctable[data-r].is-in tbody tr { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms); }
.hc-js .hc-ctable[data-r] thead th:nth-child(2)::after { transform: scaleX(0); transition: transform 900ms 200ms var(--hc-ease); }
.hc-js .hc-ctable[data-r].is-in thead th:nth-child(2)::after { transform: none; }
.hc-js .hc-week[data-r] { opacity: 1; }
.hc-js .hc-week:not(.is-in) rect { opacity: 0; }
.hc-week.is-in rect { animation: hc-pop 460ms var(--hc-ease) both; animation-delay: calc(200ms + var(--i, 0) * 90ms); }

/* the promise does not move: it comes up out of the dark, then the two words are struck */
.hc-js .hc-promise em::after { transform: scaleX(0); transition: transform 700ms 900ms var(--hc-ease); }
.hc-js .hc-promise em + em::after { transition-delay: 1250ms; }
.hc-js .hc-promise .is-in em::after { transform: none; }
.hc-js .hc-promise__glass { opacity: 0; transition: opacity 600ms 300ms; }
.hc-js .hc-promise__grid:has(.is-in) .hc-promise__glass { opacity: 1; animation: hc-seek 2600ms 500ms ease-in-out both; }

/* the closing call steps forward */
.hc-js .hc-cta__inner[data-r] { transform: scale(.96); }
.hc-js .hc-cta__inner[data-r].is-in { transform: none; }

@keyframes hc-draw { from { stroke-dashoffset: 1; } }
@keyframes hc-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes hc-road { from { transform: scaleX(0); } }
@keyframes hc-fly { from { transform: translateX(calc(-100% + 30px)); } }
@keyframes hc-lift { 0%, 100% { translate: 0 0; rotate: 0deg; } 18% { translate: 0 -5px; rotate: -10deg; } 78% { translate: 0 -5px; rotate: 0deg; } 92% { rotate: 8deg; } }
@keyframes hc-beat { 50% { transform: scale(1.22); } }
@keyframes hc-trail { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
@keyframes hc-seek { 0% { transform: translate(-14px, 10px) rotate(-10deg); } 45% { transform: translate(16px, -6px) rotate(8deg); } 100% { transform: none; } }

@supports not (grid-template-rows: subgrid) {
  .hc-clinic, .hc-vs { display: flex; flex-direction: column; }
  .hc-clinic__text { flex: 1; }
  .hc-clinic__more { align-self: flex-start; }
}

/* ============ TABLET AND PHONE ============ */
@media (max-width: 900px) {
  .hc-hero__row { grid-template-columns: minmax(0, 1fr); }
  .hc-toc__list { grid-template-columns: minmax(0, 1fr); }
  .hc-list__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 5vw, 40px); }
  .hc-doc { position: relative; top: auto; max-width: 400px; }
  .hc-case__grid { grid-template-columns: minmax(0, 1fr); }
  .hc-case__body { order: -1; }
  .hc-case__frame { flex: none; aspect-ratio: 1292 / 940; min-height: 0; }
  .hc-clinics__grid { grid-template-columns: minmax(0, 1fr); }
  .hc-clinic, .hc-vs { grid-row: auto; display: flex; flex-direction: column; }
  .hc-vs__src { align-self: flex-start; }
  .hc-clinic__more { align-self: flex-start; }
  .hc-js .hc-clinic[data-r]:nth-child(even) { transition-delay: 0s; }
  .hc-table__head { grid-template-columns: minmax(0, 1fr); }
}

/* the bar's edges fade wherever its track can be wider than the window */
@media (max-width: 860px) {
  .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 720px) {
  /* the table becomes one question at a time, each answer named by its column */
  .hc-ctable, .hc-ctable tbody, .hc-ctable tr, .hc-ctable th, .hc-ctable td { display: block; }
  .hc-ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hc-ctable tbody { border-top: 1px solid var(--ink); }
  .hc-ctable tbody tr { padding: 18px 0; border-bottom: 1px solid var(--border); }
  .hc-ctable tbody th, .hc-ctable tbody td { padding: 0; border: 0; }
  .hc-ctable tbody th { font-size: 1.35rem; margin-bottom: 12px; }
  .hc-ctable tbody td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 14px; padding: 7px 0; font-size: 16px; }
  .hc-ctable tbody td > span { min-width: 0; }
  .hc-ctable tbody td::before { content: attr(data-label); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-muted); padding-top: 2px; }
  .hc-ctable tbody td:nth-child(2)::before { color: var(--accent-blue-hover); }
}

@media (max-width: 600px) {
  html:has(body.how-compare) { --hc-bar-h: 48px; }
  .hc-bar__track { gap: 22px; }
  .hc-hero__actions .btn, .hc-cta__actions .btn, .hc-list__open .btn { width: 100%; }
  .hc-doc { margin-right: 14px; }
  .hc-doc__rows { display: none; }
  .hc-doc__title { margin-bottom: 0; }
  .hc-ctable tbody tr { padding: 14px 0; }
  .hc-ctable tbody th { margin-bottom: 8px; }
  .hc-ctable tbody td { padding: 5px 0; }
  .hc-rules li { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .hc-rules__ic { width: 40px; height: 40px; }
  .hc-vs__row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .hc-day { width: 15px; height: 15px; border-radius: 3px; }
  .hc-vs__viz { gap: 4px; }
  .hc-g--moon { width: 11px; height: 11px; }
  .hc-vs__note, .hc-vs__val { font-size: 13.5px; }
  .hc-vs__val { white-space: normal; }
  .hc-ic { width: 72px; height: 54px; }
  .hc-week { width: 200px; }
  .hc-promise__grid { grid-template-columns: minmax(0, 1fr); }
  .hc-promise__glass { width: 56px; }
}

/* ============ REDUCED MOTION: hold every end state ============ */
@media (prefers-reduced-motion: reduce) {
  .how-compare main *, .how-compare main *::before, .how-compare main *::after { animation: none !important; transition: none !important; }
  .hc-js [data-r], .hc-js [data-r] * { opacity: 1 !important; transform: none !important; scale: none !important; }
  .hc-hero__photo img[width][height], .hc-case__frame img[width][height] { transform: none !important; }
  .hc-vs--open .hc-vs__row:not(.hc-vs__row--us) .hc-day:nth-of-type(6) { opacity: .2 !important; }
  html { scroll-behavior: auto; }
}

/* ============ PRINT: no scrolling, so nothing waits to be revealed ============ */
@media print {
  .how-compare main *, .how-compare main *::before, .how-compare main *::after { animation: none !important; transition: none !important; }
  .hc-js [data-r], .hc-js [data-r] *, .hc-js .hc-promise__glass { opacity: 1 !important; transform: none !important; }
  .hc-js .hc-tick path { stroke-dashoffset: 0 !important; }
  .hc-bar { display: none !important; }
  .hc-doc { position: static; }
  /* the navy ground is dropped on paper, so its white words go dark */
  .hc-promise { background: #fff; }
  .hc-promise p, .hc-promise em, .hc-promise__label { color: var(--ink) !important; }
}