/* ==========================================================================
   Zindoor — protocol management for infusion
   Standalone brand system.

   Semantic colour is the product:
     green  = the treatment arc advances
     red    = the treatment arc stops
   Nothing else in the palette competes with those two.
   ========================================================================== */

:root {
  --ink:        #0C1116;
  --ink-soft:   #1C2530;
  --paper:      #FBFAF8;
  --surface:    #FFFFFF;
  --line:       #E5E1D9;
  --line-soft:  #F0EDE7;
  --muted:      #59626F;
  --muted-soft: #8A929E;

  --advance:      #0F6E5C;
  --advance-soft: #E7F2EF;
  --advance-line: #B9D9D0;
  --hold:         #B03A2E;
  --hold-soft:    #FBEDE9;
  --hold-line:    #EFC9C0;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 9999px;

  --shell: 1120px;
  --gut: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); }
h3 {
  font-size: 1.2rem;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.35;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.58;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--advance);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--advance);
  flex: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--advance); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--advance); color: #fff; }

.btn__arrow { transition: transform .16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 250, 248, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-head.is-stuck { border-bottom-color: var(--line); }

.site-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__text {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: -0.024em;
}

/* ---------- hero ---------- */

.hero { padding: clamp(52px, 7.5vw, 92px) 0 clamp(40px, 5vw, 60px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--advance); font-style: italic; }

.hero__lede { max-width: 33em; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.hero__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 34em;
}

/* ---------- the artifact (hero diagram) ---------- */

.artifact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: 0 1px 2px rgba(12,17,22,.04), 0 12px 30px -14px rgba(12,17,22,.14);
}

.artifact__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.artifact__title {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.artifact__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted-soft);
  letter-spacing: 0.04em;
}

.artifact__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.695rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.artifact__key { display: inline-flex; align-items: center; gap: 7px; }
.artifact__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.artifact__dot--adv  { background: var(--advance); }
.artifact__dot--hold { background: var(--hold); }
.artifact__dot--wait { background: #fff; border: 1.5px solid var(--muted-soft); }

/* ---------- the gate (inside the artifact) ---------- */

.gate { display: flex; flex-direction: column; gap: 14px; }

.gate__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas:
    "who checks"
    "who verdict";
  gap: 4px 16px;
  padding: 16px 16px 15px;
  border: 1px solid var(--advance-line);
  border-left: 3px solid var(--advance);
  border-radius: var(--r-md);
  background: var(--advance-soft);
}
.gate__row--stop {
  border-color: var(--hold-line);
  border-left-color: var(--hold);
  background: var(--hold-soft);
}

.gate__who {
  grid-area: who;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-right: 15px;
  border-right: 1px solid var(--advance-line);
  align-self: center;
}
.gate__row--stop .gate__who { border-right-color: var(--hold-line); }

.gate__initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--advance);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate__initials--stop { background: var(--hold); }

.gate__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.gate__checks {
  grid-area: checks;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chk {
  font-family: var(--mono);
  font-size: 0.685rem;
  letter-spacing: 0.01em;
  padding: 4px 9px 4px 21px;
  border-radius: var(--r-pill);
  background: #fff;
  position: relative;
  white-space: nowrap;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chk::before {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  line-height: 1;
}
.chk--ok { border-color: var(--advance-line); }
.chk--ok::before { content: "✓"; color: var(--advance); }
.chk--stop { border-color: var(--hold-line); color: var(--hold); }
.chk--stop::before { content: "✕"; color: var(--hold); }

.gate__verdict {
  grid-area: verdict;
  margin: 0;
  font-family: var(--body);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gate__verdict--go { color: var(--advance); }
.gate__verdict--stop { color: var(--hold); }

@media (max-width: 400px) {
  .gate__row {
    grid-template-columns: 1fr;
    grid-template-areas: "who" "checks" "verdict";
    gap: 10px;
  }
  .gate__who {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    padding-right: 0;
  }
}

/* ---------- generic section ---------- */

.section { padding: clamp(56px, 7vw, 90px) 0; }
.section--tint {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2 { color: #fff; }
.section--ink .lede { color: #A9B2BE; }
.section--ink .eyebrow { color: #6FD3BC; }
.section--ink .eyebrow::before { background: #6FD3BC; }

.section__head { max-width: 44rem; margin-bottom: clamp(34px, 4.5vw, 50px); }
.section__head h2 { margin-bottom: 18px; }

/* ---------- the gap (where Zindoor starts) ---------- */

.gap-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.gap-cell { padding: 30px 30px 32px; }
.gap-cell--before { background: var(--paper); }
.gap-cell--after  { background: var(--surface); }

.gap-cell__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 14px;
  display: block;
}
.gap-cell--after .gap-cell__tag { color: var(--advance); }

.gap-cell h3 { margin-bottom: 10px; }
.gap-cell p { color: var(--muted); font-size: 0.97rem; margin-bottom: 0; }

/* A narrow column holding the vertical rule plus a marker that interrupts it.
   The marker is a glyph, not a text pill — a pill wide enough for a sentence
   overlapped the adjacent cell's copy. */
.gap-divider {
  width: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gap-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.gap-divider__label {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--advance);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--surface);
}

/* ---------- capability modules ---------- */

.mods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mod {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
}
.section--tint .mod { background: var(--paper); }

.mod__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--advance);
  margin-bottom: 20px;
}
.mod h3 { margin-bottom: 10px; }
.mod p { color: var(--muted); font-size: 0.955rem; }

.mod__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.89rem;
  color: var(--muted);
}
.mod__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
}
.mod__list li:last-child { margin-bottom: 0; }
.mod__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--advance-line);
}

.proof__row {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,0.85fr) minmax(0,1.6fr);
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  align-items: baseline;
}
.proof__row:last-child { border-bottom: 0; }

.proof__row--head {
  background: rgba(255,255,255,.05);
  padding-top: 14px;
  padding-bottom: 14px;
}
.proof__row--head span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8B95A3;
}

.proof__regimen {
  font-family: var(--display);
  font-size: 1.26rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
}
.proof__shape { font-family: var(--mono); font-size: 0.84rem; color: #A9B2BE; }

.proof__holds { display: flex; flex-wrap: wrap; gap: 8px; }
.disclosure__mark { flex: none; margin-top: 3px; color: #6FD3BC; }
.control__item {
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.control__item h3 { margin-bottom: 8px; font-size: 1.03rem; }
.control__item p { font-size: 0.925rem; color: var(--muted); }

/* ---------- CTA ---------- */

.cta { text-align: center; padding: clamp(62px, 8vw, 100px) 0; }
.cta h2 { margin-bottom: 18px; }
.cta .lede { margin: 0 auto 32px; max-width: 34rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__note { margin-top: 26px; font-size: 0.875rem; color: var(--muted-soft); }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  background: var(--paper);
}
.site-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.87rem;
  color: var(--muted-soft);
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* ---------- 404 ---------- */

.oops {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0;
}
.oops__code {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--advance);
  margin-bottom: 18px;
}
.oops h1 { margin-bottom: 16px; }
.oops .lede { max-width: 30rem; margin: 0 auto 30px; }

/* ---------- reveal (progressive enhancement) ---------- */

/* Visible by default. The script opts into the animation by setting
   .js-anim on <html>, so content can never be stranded at opacity 0. */
.js-anim .reveal { opacity: 0; transform: translateY(14px); }
.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .mods, .control { grid-template-columns: 1fr; }
  .gap-rail { grid-template-columns: 1fr; }
  .gap-divider { width: auto; height: 44px; }
  .gap-divider::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .gap-divider__label { transform: rotate(90deg); }
  .proof__row { grid-template-columns: 1fr; gap: 10px; }
  .proof__row--head { display: none; }
}

@media (max-width: 620px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .site-head__row { height: 66px; }
  /* The header keeps its CTA on mobile — it is the only one above the fold —
     but swaps to the short label so it cannot wrap. */
  .site-head__row .btn { padding: 10px 16px; font-size: 0.85rem; }
  .hero { padding-top: 32px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .artifact { padding: 18px 16px 14px; }
  .gap-cell, .mod, .control__item { padding-left: 22px; padding-right: 22px; }
  .proof__row { padding: 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buyer-value sections
   Added 2026-08-25 to articulate operator value fast.
   ========================================================================== */

/* ---------- hero value strip ---------- */

.vstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  margin-top: 32px;
}
.vstrip__cell {
  padding: 17px 19px 19px;
  border-right: 1px solid var(--line-soft);
}
.vstrip__cell:last-child { border-right: 0; }
.vstrip__k {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--advance);
  display: block;
  margin-bottom: 7px;
}
.vstrip__v {
  font-size: 0.895rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 400;
  display: block;
}
.vstrip__k {
  font-size: 0.7rem;
  font-weight: 600;
}

/* ---------- the thread (journey rail) ---------- */

.thread {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}
/* Per-step connectors rather than one full-width rule, so the rail stops at
   the last node instead of trailing off into empty space. */
.thread__step::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 19px;
  right: -10px;
  height: 2px;
  background: var(--advance-line);
  border-radius: 2px;
}
.thread__step:last-child::after { display: none; }
.thread__step { position: relative; padding-top: 42px; }
.thread__step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--advance);
  box-shadow: 0 0 0 4px var(--surface);
}
.thread__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  margin-bottom: 4px;
}
.thread__sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.45;
  display: block;
}

/* ---------- 5-up capability modules ---------- */

.mods--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mods--five > .mod:nth-child(1),
.mods--five > .mod:nth-child(2),
.mods--five > .mod:nth-child(3) { grid-column: span 2; }
.mods--five > .mod:nth-child(4),
.mods--five > .mod:nth-child(5) { grid-column: span 3; }


/* ---------- the forecast console (the differentiator) ---------- */

.console {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 24px 24px 20px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(12, 17, 22, .5);
}
.console__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.console__title {
  font-family: var(--mono);
  font-size: 0.735rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.console__meta {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.05em;
  color: #7D8794;
}

.crow {
  display: grid;
  grid-template-columns: minmax(0,0.8fr) minmax(0,0.75fr) minmax(0,0.75fr) minmax(0,0.95fr) minmax(0,1.3fr);
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  align-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.crow:last-child { border-bottom: 0; }
.crow--head {
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7D8794;
  padding-top: 13px;
  padding-bottom: 10px;
}
.crow__wk { color: #fff; }
.crow__n { color: #C6CDD6; }
.crow__n b { color: #fff; font-weight: 500; }

.flag {
  font-size: 0.695rem;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  display: inline-block;
}
.flag--ok { background: rgba(15,110,92,.28); border: 1px solid rgba(111,211,188,.4); color: #8FE0CB; }
.flag--warn { background: rgba(176,58,46,.16); border: 1px solid rgba(214,111,98,.36); color: #F0B5AB; }
.flag--none { color: #5C6672; }

.console__foot {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: #6F7884;
}

/* ---------- differentiator claim cards ---------- */

.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.claim {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.claim h3 { font-size: 1.01rem; margin-bottom: 8px; }
.claim p { font-size: 0.91rem; color: var(--muted); }
.qa__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.qa__row:last-child { border-bottom: 0; }
.qa__q {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
}
.qa__a { font-size: 0.92rem; color: var(--muted); margin: 0; }
.qa__a b {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--advance);
  font-weight: 500;
  margin-right: 8px;
}
.qa__a.is-stop b { color: var(--hold); }

/* ---------- two-column excellence lists ---------- */

/* one column now — the money half moved to its own dark band */
.excel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 46rem; }
.excel__col {
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.excel__col h3 { margin-bottom: 14px; }
.excel__col ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--muted); }
.excel__col li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.excel__col li:last-child { margin-bottom: 0; }
.excel__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--advance-line);
}

/* ---------- human-decides bar ---------- */

.humanbar {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border: 1px solid var(--advance-line);
  background: var(--advance-soft);
  border-radius: var(--r-md);
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.humanbar__tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--advance);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  flex: none;
}
.humanbar strong { font-weight: 600; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .thread { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .thread__step::after { display: none; }
  .vstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstrip__cell:nth-child(2n) { border-right: 0; }
  .vstrip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 940px) {
  .mods--five { grid-template-columns: 1fr; }
  .mods--five > .mod { grid-column: auto; }
  .claims, .excel { grid-template-columns: 1fr; }
  /* Three even number cells on one line, then the flag on its own full-width
     row. A wide flag sharing a column used to squeeze "502 / 480" onto three
     lines. The header row is hidden here, so each number carries its own label. */
  .crow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    font-size: 0.715rem;
    padding: 15px 2px;
  }
  .crow--head { display: none; }
  .crow__wk { grid-column: 1 / -1; font-size: 0.8rem; }
  .crow > :nth-child(5) { grid-column: 1 / -1; }
  .crow__n[data-l]::before {
    content: attr(data-l);
    display: block;
    font-size: 0.585rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #79838F;
    margin-bottom: 3px;
  }
  .flag { white-space: normal; }
  .qa__row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 620px) {
  .thread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console { padding: 18px 16px 16px; }
  .qa__row { padding: 16px 20px; }
  .excel__col, .claim { padding-left: 22px; padding-right: 22px; }
  .humanbar { padding: 14px 18px; font-size: 0.88rem; }
}

/* ==========================================================================
   Hero rebuild — lead with the value, not the riddle.
   The first screen must answer "what do I get" before any scrolling.
   ========================================================================== */

.hero--lead {
  padding: 34px 0 clamp(38px, 4.5vw, 56px);
}

.hero--lead .eyebrow { margin-bottom: 22px; }

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin-bottom: 34px;
}

.hero--lead h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.45rem);
  margin: 0;
}
.hero--lead h1 .accent { color: var(--advance); font-style: italic; }

/* Nudged down so the lede's first line sits on the H1's first baseline. */
.hero__aside { padding-top: 10px; }
.hero__aside .lede { max-width: 36em; margin-bottom: 22px; }

.hero--lead .hero__cta { margin-top: 0; }

/* the console sits full-width in the hero as the proof image */
.hero__proof { margin-bottom: 22px; }

.hero--lead .vstrip { margin-top: 0; }

/* the gate artifact when nested inside a capability module */
.mod .artifact {
  margin-top: 20px;
  box-shadow: none;
  padding: 16px 16px 12px;
  background: var(--paper);
}
.section--tint .mod .artifact { background: var(--surface); }
.mod .artifact__head { margin-bottom: 14px; padding-bottom: 11px; }
.mod .gate { gap: 10px; }
.mod .gate__row { padding: 13px 13px 12px; }
.mod .artifact__foot { margin-top: 12px; padding-top: 11px; }

@media (max-width: 940px) {
  .hero__top { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .hero__aside { padding-bottom: 0; }
}

@media (max-width: 620px) {
  .hero--lead { padding-top: 24px; }
  .hero--lead h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
}

/* ==========================================================================
   The journey hero — "Paper in. Payment accelerated."
   One dark full-bleed band. The rest of the page stays light, so this is the
   only place the eye lands first.

   The rail IS the argument: eight stations, one thread, brightening as it
   travels toward payment. No second accent colour — acceleration is shown by
   the green gaining strength, not by a rainbow.
   ========================================================================== */

.jhero {
  background: var(--ink);
  color: #fff;
  padding: clamp(40px, 5vw, 62px) 0 clamp(44px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

/* a soft green bloom behind the end of the rail */
.jhero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -190px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,143,.16) 0%, rgba(34,197,143,0) 68%);
  pointer-events: none;
}

.jhero .shell { position: relative; z-index: 1; }

.jhero__eyebrow {
  font-family: var(--mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6FD3BC;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.jhero__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #6FD3BC;
  flex: none;
}

.jhero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 24px;
  max-width: 16em;
}
.jhero h1 .accent {
  display: block;
  color: #4FC9A6;
  font-style: italic;
}

/* The lede and the buttons used to sit in two columns. The button column was
   never wide enough to hold them side by side, so they wrapped into a stack
   and bottom-aligned — reading as though they were floating beside the
   paragraph rather than following it. The hero now reads straight down. */
.jhero__row {
  display: block;
  margin-bottom: clamp(40px, 5vw, 62px);
}

.jhero__lede {
  font-size: clamp(1.02rem, 1.55vw, 1.15rem);
  line-height: 1.6;
  color: #AEB7C2;
  margin: 0 0 clamp(26px, 3vw, 34px);
  max-width: 62ch;
}
.jhero__lede strong { color: #fff; font-weight: 500; }

.jhero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.jhero .btn--light { background: #fff; color: var(--ink); }
.jhero .btn--light:hover { background: #4FC9A6; color: var(--ink); }
.jhero .btn--wire { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.jhero .btn--wire:hover { border-color: #fff; }

/* ---------- the rail ---------- */

.rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  position: relative;
}

.rail__node {
  position: relative;
  padding-top: 76px;
  text-align: left;
}

/* the connecting thread, drawn per station so it stops at the last one */
.rail__node::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 58px;
  right: -8px;
  height: 2px;
  background: currentColor;
  opacity: .45;
}
.rail__node:last-child::after { display: none; }

.rail__disc {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #121A22;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail__disc svg { width: 23px; height: 23px; }

.rail__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.006em;
  margin-bottom: 3px;
}
.rail__sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.645rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: #838D99;
}

/* The green gains strength station by station.
   nth-of-type, NOT nth-child: the pulse <span> is .rail's first child, so
   nth-child would shift the whole ramp by one and skip the muted opening. */
.rail__node:nth-of-type(1) { color: #5B6673; }
.rail__node:nth-of-type(2) { color: #4E7A73; }
.rail__node:nth-of-type(3) { color: #3F8A76; }
.rail__node:nth-of-type(4) { color: #2F9878; }
.rail__node:nth-of-type(5) { color: #21A67C; }
.rail__node:nth-of-type(6) { color: #1BB183; }
.rail__node:nth-of-type(7) { color: #1FBD8B; }
.rail__node:nth-of-type(8) { color: #2FD79C; }

/* payment is the arrival — filled, not outlined */
.rail__node--end .rail__disc {
  background: #2FD79C;
  border-color: #2FD79C;
  box-shadow: 0 0 0 7px rgba(47,215,156,.14);
}
.rail__node--end .rail__disc svg { color: #06241B; }
.rail__node--end .rail__name { color: #6FE9BE; }

/* a pulse travelling paper -> payment */
.rail__pulse {
  position: absolute;
  top: 25px;
  left: 58px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7DFFD4;
  box-shadow: 0 0 12px 3px rgba(125,255,212,.6);
  animation: railrun 4.6s cubic-bezier(.55,.1,.4,.9) infinite;
  pointer-events: none;
}
@keyframes railrun {
  0%   { left: 58px;  opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - 34px); opacity: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; }
  .rail__node:nth-of-type(4)::after { display: none; }
  .rail__pulse { display: none; }
}


@media (max-width: 700px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .rail__node::after { display: none; }
  .rail__node { padding-top: 66px; }
  .rail__disc { width: 48px; height: 48px; }
  .rail__disc svg { width: 20px; height: 20px; }
}

@media (max-width: 620px) {
  .jhero { padding-top: 30px; }
  .jhero h1 { font-size: clamp(2.1rem, 9.4vw, 2.9rem); }
  .jhero__cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__pulse { display: none; }
}

/* ==========================================================================
   Value strip band, the "one system that…" manifesto, and therapy tags
   ========================================================================== */

.section--strip {
  padding: clamp(30px, 3.4vw, 44px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.section--strip .vstrip { margin-top: 0; border: 0; background: transparent; }
.section--strip .vstrip__cell { border-right-color: var(--line); }


/* ---------- therapy tags ---------- */

.tags { margin-top: 30px; }
.tags__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: block;
  margin-bottom: 14px;
}
.tags__row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.tag {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
.tag b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.tags__note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted-soft);
}

@media (max-width: 940px) {
  .tags__row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section--strip .vstrip__cell:nth-child(-n+2) { border-bottom-color: var(--line); }
}

/* ==========================================================================
   Manifesto — the emotional centre of the page.
   Given real scale and a thread running through the list, so it reads as a
   statement rather than a feature table.
   ========================================================================== */

.manifesto {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 80px) 0;
}

/* a quiet green bloom so the block feels lit rather than flat */
.manifesto::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -200px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,110,92,.085) 0%, rgba(15,110,92,0) 68%);
  pointer-events: none;
}
.manifesto .shell { position: relative; z-index: 1; }

.manifesto__head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: end;
  max-width: none;
  margin-bottom: 0;
}

.manifesto__head h2 {
  font-size: clamp(2.25rem, 4.7vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  margin: 0;
}
.manifesto__head h2 em {
  font-style: italic;
  color: var(--advance);
}

.manifesto__head .lede {
  margin: 0;
  padding-bottom: 5px;
}

.mlist__item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .18s ease;
}
.mlist__item:hover { background: rgba(15,110,92,.035); }

.mlist__disc {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--paper);
  color: var(--advance);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mlist__disc svg { width: 21px; height: 21px; }
.mlist__item:hover .mlist__disc { border-color: var(--advance); }

/* the last one is the arrival, filled like the rail's payment station */
.mlist__item--end .mlist__disc {
  background: var(--advance);
  border-color: var(--advance);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(15,110,92,.12);
}

.mlist__text {
  font-family: var(--display);
  font-size: clamp(1.24rem, 2.2vw, 1.78rem);
  line-height: 1.28;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.manifesto__foot {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 46em;
}

/* ---------- therapy tags ---------- */

.tags { margin-top: 30px; }
.tags__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: block;
  margin-bottom: 14px;
}
.tags__row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.tag {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
.tag b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.tags__note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted-soft);
}

@media (max-width: 940px) {
  .tags__row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section--strip .vstrip__cell:nth-child(-n+2) { border-bottom-color: var(--line); }
}

/* ==========================================================================
   Mobile is the primary surface. Most visitors arrive on a phone, so the
   journey has to read as ONE THREAD there too — not a grid of loose circles.
   Below 760px the rail turns vertical and keeps its connector and its pulse.
   ========================================================================== */

/* ---------- header: transparent over the dark hero ---------- */

/* The SOLID bar is the default, because it is readable on every background.
   The transparent-over-hero treatment is opt-in and applied by script only
   when a dark hero is actually present — so if the script never runs, the
   header degrades to something legible instead of white-on-white. */
/* NOT transparent: the header is position:sticky, so it sits in normal flow
   ABOVE the hero rather than over it. Transparent would show the light body
   background behind white text. Matching the hero's ink makes the bar and
   the hero read as one continuous dark block. */
.site-head--over-hero:not(.is-stuck) {
  background: var(--ink);
  backdrop-filter: none;
  color: #fff;
  border-bottom-color: transparent;
  --wm-green: #2FD79C;
}
.site-head--over-hero:not(.is-stuck) .wordmark { color: #fff; }

.site-head--over-hero:not(.is-stuck) .btn--primary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.site-head--over-hero:not(.is-stuck) .btn--primary:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* The brand mark inverts with the bar, so its parts take their colour from
   the header rather than from hardcoded hex. */
.site-head { --wm-green: #2FD79C; }
.wm__rail { stroke: currentColor; opacity: .32; }
.wm__a    { fill: currentColor; }
.wm__gate { stroke: var(--wm-green); }
.wm__b    { fill: var(--wm-green); }

/* the default, and what the bar returns to once past the hero */
.site-head,
.site-head.is-stuck {
  background: rgba(251, 250, 248, .9);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--ink);
  border-bottom-color: var(--line);
  --wm-green: #0F6E5C;
}
.site-head .wordmark { color: var(--ink); }

.site-head .btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}
.site-head .btn--primary:hover { background: var(--advance); }

/* ---------- the vertical rail ---------- */

@media (max-width: 760px) {
  .rail {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    margin-top: 4px;
  }

  .rail__node {
    position: relative;
    padding: 0 0 26px 62px;
    text-align: left;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .rail__node:last-child { padding-bottom: 0; }

  .rail__disc {
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
  }
  .rail__disc svg { width: 19px; height: 19px; }

  /* the connector, now vertical — this is the thread */
  .rail__node::after {
    display: block;
    top: 48px;
    bottom: -2px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
    opacity: .5;
  }
  .rail__node:last-child::after { display: none; }

  .rail__name {
    font-size: 1rem;
    margin-bottom: 2px;
    padding-top: 2px;
  }
  .rail__sub { font-size: 0.7rem; }

  /* the pulse travels down the thread instead of across it */
  .rail__pulse {
    display: block;
    top: 0;
    left: 17px;
    width: 8px;
    height: 8px;
    animation: railfall 5s cubic-bezier(.5,.05,.4,.95) infinite;
  }
  @keyframes railfall {
    0%   { top: 22px; opacity: 0; }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: calc(100% - 26px); opacity: 0; }
  }
}

/* the middle band: 4-up grid keeps its horizontal connectors */
@media (min-width: 761px) and (max-width: 1080px) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; }
  .rail__node:nth-of-type(4)::after { display: none; }
  .rail__pulse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__pulse { display: none !important; }
}

.cside__tag {
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 18px;
  display: block;
}

/* the four jobs converge on the brand — the panel's whole argument */
.oneplan__seal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--advance-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.oneplan__mark { display: flex; }
.oneplan__name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1;
  color: var(--ink);
}
.oneplan__tag {
  font-family: var(--mono);
  font-size: 0.605rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--advance);
}

/* ---------- shared ---------- */

.cside__cap {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.cside__cap b { color: var(--ink); font-weight: 600; }

.compare__vs {
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: none;
}

@media (max-width: 880px) {
  .compare__vs { transform: rotate(90deg); margin: -4px 0; }
}

/* ==========================================================================
   Forward-demand chart — replaces the table.
   The point is "one of these weeks breaks, and you can see it now".
   A reader gets that from a bar crossing a line; they do not get it from
   five rows of numbers.
   ========================================================================== */

.fchart {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 24px 26px 20px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(12,17,22,.5);
}

.fchart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
}
.fchart__title {
  font-family: var(--mono);
  font-size: 0.735rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fchart__legend {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: #8B95A3;
}
.fchart__legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
  font-style: normal;
}
.k--ok { background: #2FD79C; }
.k--over { background: #E06152; }

/* ---------- plot ---------- */

.fplot {
  position: relative;
  height: 232px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 2.2vw, 26px);
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

/* the capacity line the eye measures everything against */
.fcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(30px + var(--cap));
  border-top: 2px dashed rgba(255,255,255,.42);
  pointer-events: none;
}
.fcap b {
  position: absolute;
  right: 0;
  top: -9px;
  background: var(--ink);
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #A9B2BE;
  font-weight: 400;
}

.fbar {
  position: relative;
  height: var(--h);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #2FD79C 0%, #12886C 100%);
  display: flex;
  justify-content: center;
}
.fbar--over { background: linear-gradient(180deg, #E06152 0%, #9E3427 100%); }

.fbar__v {
  position: absolute;
  top: -24px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #fff;
  white-space: nowrap;
}
/* the over-capacity bar rises through the dashed line, so its value would
   collide with it — sit the number inside the bar instead */
.fbar--over .fbar__v {
  top: 10px;
  color: #fff;
  font-weight: 500;
}

.fbar__x {
  position: absolute;
  bottom: -26px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #8B95A3;
  white-space: nowrap;
}
.fbar--over .fbar__x { color: #E7B4AB; }

/* the one callout that carries the message */
.fflag {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(224,97,82,.15);
  border: 1px solid rgba(224,97,82,.42);
  color: #F0B5AB;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.fflag b { color: #fff; font-weight: 500; }

.fchart__foot {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.635rem;
  letter-spacing: 0.05em;
  color: #6F7884;
}

@media (max-width: 620px) {
  .fchart { padding: 18px 16px 16px; }
  .fplot { height: 190px; gap: 8px; }
  .fbar__v { font-size: 0.63rem; top: -20px; }
  .fbar__x { font-size: 0.58rem; }
  .fcap b { font-size: 0.55rem; }
  .fflag { font-size: 0.66rem; padding: 8px 12px; }
}

/* ==========================================================================
   Multi-site panel — one screen instead of three phone calls.
   Shows load per location side by side so the rebalance is obvious.
   ========================================================================== */

.sites {
  margin-top: clamp(26px, 3vw, 36px);
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 24px 26px 22px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(12,17,22,.5);
}

.sites__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.sites__title {
  font-family: var(--mono);
  font-size: 0.735rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sites__meta {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.05em;
  color: #7D8794;
}

.sites__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  padding: 22px 0 4px;
}

.site {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  padding: 16px 16px 18px;
  background: rgba(255,255,255,.03);
}

.site__name {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin-bottom: 2px;
}
.site__sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: #7D8794;
  margin-bottom: 16px;
}

.site__bar {
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
  margin-bottom: 11px;
}
.site__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  max-width: 100%;
  border-radius: var(--r-pill);
  background: #2FD79C;
  display: block;
}
.site--over .site__bar i { background: #E06152; }
.site--room .site__bar i { background: #2FD79C; }

.site__stat {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: #A9B2BE;
}
.site__stat b { color: #fff; font-weight: 500; }
.site--over .site__stat b { color: #F0B5AB; }
.site--room .site__stat b { color: #8FE0CB; }

.sites__action {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #A9B2BE;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.sites__action b { color: #fff; font-weight: 550; }
.sites__action i {
  flex: none;
  font-style: normal;
  color: #2FD79C;
  font-size: 1.05rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .sites { padding: 18px 16px 18px; }
  .sites__row { grid-template-columns: 1fr; gap: 12px; padding-top: 18px; }
  .sites__action { font-size: 0.9rem; }
}

/* ==========================================================================
   Contact — the walkthrough request, wired to HubSpot.
   Custom-styled and submitted through the Forms API rather than an embedded
   HubSpot form, so the brand survives. Same approach as membercare.net.
   ========================================================================== */

.contact { padding: clamp(60px, 7.5vw, 100px) 0; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.contact__pitch h2 { margin-bottom: 18px; }
.contact__pitch .lede { margin-bottom: 26px; }

.contact__points {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.contact__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.contact__points li:last-child { margin-bottom: 0; }
.contact__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2.5px solid var(--advance);
}

.contact__alt {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}
.contact__alt a { color: var(--advance); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the form card ---------- */

.cform {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 1px 2px rgba(12,17,22,.04), 0 18px 40px -22px rgba(12,17,22,.18);
}

.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cform__field { margin-bottom: 16px; }
.cform__field--last { margin-bottom: 22px; }

.cform__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.cform__label span { color: var(--muted-soft); text-transform: none; letter-spacing: 0; }

.cform__input {
  width: 100%;
  font-family: var(--body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cform__input::placeholder { color: var(--muted-soft); }
.cform__input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--advance);
  box-shadow: 0 0 0 3px rgba(15,110,92,.13);
}
.cform__input:user-invalid {
  border-color: var(--hold);
  box-shadow: 0 0 0 3px rgba(176,58,46,.11);
}

textarea.cform__input { resize: vertical; min-height: 84px; line-height: 1.5; }

.cform__submit { width: 100%; justify-content: center; }
.cform__submit[disabled] { opacity: .6; cursor: progress; }

.cform__note {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-soft);
  text-align: center;
}

/* ---------- states ---------- */

.cform__msg {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cform__msg a { color: inherit; font-weight: 600; }
.cform__msg--error {
  background: var(--hold-soft);
  border: 1px solid var(--hold-line);
  color: var(--hold);
}

.cform__done {
  text-align: center;
  padding: 18px 4px 6px;
}
.cform__done__mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--advance);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cform__done h3 { margin-bottom: 10px; font-size: 1.2rem; }
.cform__done p { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 940px) {
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .cform__row .cform__field { margin-bottom: 16px; }
}

/* ==========================================================================
   Bottom line — the money message, given its own dark band.
   Direction glyphs, no invented percentages: the mechanism is the claim.
   ========================================================================== */

.bline {
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 6.5vw, 86px) 0;
  position: relative;
  overflow: hidden;
}
.bline::after {
  content: "";
  position: absolute;
  left: -160px;
  top: -200px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,215,156,.14) 0%, rgba(47,215,156,0) 68%);
  pointer-events: none;
}
.bline .shell { position: relative; z-index: 1; }

.bline__head {
  max-width: 40rem;
  margin-bottom: clamp(36px, 4.4vw, 52px);
}
.bline__eyebrow {
  font-family: var(--mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6FD3BC;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.bline__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #6FD3BC;
  flex: none;
}
.bline h2 {
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
}
.bline h2 em { font-style: italic; color: #4FC9A6; }

.blist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

.bitem {
  padding: 28px 26px 30px 0;
  border-right: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.bitem:last-child { border-right: 0; padding-right: 0; }
.bitem:not(:first-child) { padding-left: 26px; }

.bitem__dir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.645rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7D8794;
  margin-bottom: 18px;
}
.bitem__arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(47,215,156,.13);
  border: 1px solid rgba(47,215,156,.36);
  color: #2FD79C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: none;
}

.bitem h3 {
  font-family: var(--display);
  font-size: clamp(1.16rem, 1.85vw, 1.46rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: #fff;
  margin-bottom: 11px;
}
.bitem p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #A9B2BE;
  margin: 0;
}

.bline__foot {
  margin-top: clamp(30px, 3.4vw, 42px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 0.97rem;
  line-height: 1.6;
  color: #A9B2BE;
  max-width: 46em;
}
.bline__foot strong { color: #fff; font-weight: 550; }

@media (max-width: 940px) {
  .blist { grid-template-columns: 1fr 1fr; }
  .bitem { border-bottom: 1px solid rgba(255,255,255,.14); }
  .bitem:nth-child(2n) { border-right: 0; padding-right: 0; }
  .bitem:nth-child(2n+1) { padding-left: 0; padding-right: 26px; }
  .bitem:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .blist { grid-template-columns: 1fr; }
  .bitem,
  .bitem:nth-child(2n),
  .bitem:nth-child(2n+1) {
    padding: 24px 0 26px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .bitem:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Agents + therapy coverage.
   Both framed as operator economics: work that gets done without adding
   headcount, and service lines added without buying another system.
   ========================================================================== */

/* ---------- the stat line ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: clamp(30px, 3.6vw, 42px);
}
.stat { padding: 20px 22px 22px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--advance);
  margin-bottom: 8px;
}
.stat__l {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
  display: block;
}

/* ---------- clinical / operational split ---------- */

.acols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.acol {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 26px 26px 28px;
}
.acol__tag {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--advance);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.acol__tag::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--advance);
  flex: none;
}
.acol h3 { font-size: 1.16rem; margin-bottom: 16px; }

.acol ul { list-style: none; margin: 0; padding: 0; }
.acol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
}
.acol li:last-child { margin-bottom: 0; }
.acol li b { color: var(--ink); font-weight: 600; }
.acol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--paper);
}
.acol li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--advance);
}

/* ---------- therapy coverage grid ---------- */

.thera {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 18px 18px 20px;
  transition: border-color .18s ease, transform .18s ease;
}
.tcard:hover { border-color: var(--advance-line); transform: translateY(-2px); }

.tcard__k {
  display: block;
  font-size: 0.99rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-bottom: 6px;
}
.tcard__v {
  display: block;
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--muted);
}

.thera__foot {
  margin-top: 26px;
  padding-left: 26px;
  border-left: 2px solid var(--advance-line);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46em;
}
.thera__foot strong { color: var(--ink); font-weight: 600; }

@media (max-width: 940px) {
  .thera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .thera { grid-template-columns: 1fr; }
  .thera__foot { padding-left: 20px; }
}

.thera-wrap { margin-top: clamp(30px, 3.4vw, 40px); }

/* ==========================================================================
   AI agents band.
   This is the differentiator, so it gets a dark band and a live badge
   rather than an 11px eyebrow.
   ========================================================================== */

.aband {
  background: var(--ink);
  color: #fff;
  padding: clamp(58px, 7vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.aband::after {
  content: "";
  position: absolute;
  right: -180px;
  top: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,215,156,.13) 0%, rgba(47,215,156,0) 68%);
  pointer-events: none;
}
.aband .shell { position: relative; z-index: 1; }

/* ---------- the badge ---------- */

.aibadge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(47,215,156,.11);
  border: 1px solid rgba(47,215,156,.4);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6FE9BE;
  margin-bottom: 26px;
}
.aibadge__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2FD79C;
  flex: none;
  animation: aipulse 2.4s ease-in-out infinite;
}
@keyframes aipulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,215,156,.55); }
  70%      { box-shadow: 0 0 0 9px rgba(47,215,156,0); }
}
.aibadge__sep { color: rgba(111,233,190,.45); }

.aband h2 {
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  margin: 0 0 20px;
  max-width: 20em;
}
.aband h2 em { font-style: italic; color: #4FC9A6; }

.aband__lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: #A9B2BE;
  margin: 0;
  max-width: 42em;
}

/* margin on the lede collapses through its wrapper, so the gap is owned
   by the block that follows it */
.aband .acols { margin-top: clamp(32px, 3.8vw, 44px); }

/* ---------- stats on dark ---------- */

.aband .stats {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.aband .stat { border-right-color: rgba(255,255,255,.14); }
.aband .stat__n { color: #2FD79C; }
.aband .stat__l { color: #8B95A3; }

/* ---------- columns on dark ---------- */

.aband .acol {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.aband .acol__tag { color: #6FD3BC; }
.aband .acol__tag::before { background: #6FD3BC; }
.aband .acol h3 { color: #fff; }
.aband .acol li { color: #A9B2BE; }
.aband .acol li b { color: #fff; }
.aband .acol li::before {
  border-color: rgba(47,215,156,.45);
  background: transparent;
}
.aband .acol li::after { background: #2FD79C; }

/* ---------- the rule bar on dark ---------- */

.aband .humanbar {
  background: rgba(47,215,156,.08);
  border-color: rgba(47,215,156,.32);
  color: #A9B2BE;
}
.aband .humanbar strong { color: #fff; }
.aband .humanbar__tag { background: #2FD79C; color: #06241B; }

@media (max-width: 940px) {
  .aband .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .aband .stat:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .aibadge { font-size: 0.65rem; letter-spacing: 0.12em; padding: 8px 14px 8px 12px; }
  .aibadge__sep, .aibadge__tail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aibadge__dot { animation: none; }
}

/* ==========================================================================
   Value cards.
   They lift off the page and overlap the dark hero, so the boundary between
   sections becomes a reason to keep going rather than a full stop.
   ========================================================================== */

/* extra room at the foot of the hero for the cards to sit over */
.jhero { padding-bottom: clamp(104px, 10vw, 150px); }

.section--strip {
  background: transparent;
  border-bottom: 0;
  padding: 0 0 clamp(48px, 5.5vw, 70px);
  margin-top: clamp(-88px, -7vw, -60px);
  position: relative;
  z-index: 3;
}

.vstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  margin-top: 0;
}

.vstrip__cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 26px;
  border-right: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(12, 17, 22, .05),
    0 22px 44px -26px rgba(12, 17, 22, .34);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vstrip__cell:hover {
  transform: translateY(-5px);
  border-color: var(--advance-line);
  box-shadow:
    0 1px 2px rgba(12, 17, 22, .05),
    0 30px 54px -26px rgba(15, 110, 92, .32);
}

.vstrip__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--advance-soft);
  color: var(--advance);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background .22s ease, border-color .22s ease;
}
.vstrip__icon svg { width: 20px; height: 20px; }
.vstrip__cell:hover .vstrip__icon {
  background: var(--advance);
  border-color: var(--advance);
  color: #fff;
}

.vstrip__k {
  font-family: var(--mono);
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--advance);
  display: block;
  margin-bottom: 9px;
}

.vstrip__v {
  font-size: 0.895rem;
  line-height: 1.52;
  color: var(--muted);
  font-weight: 400;
  display: block;
}

/* a quiet cue that the page continues */
.scrollcue {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.2vw, 40px);
}
.scrollcue span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  animation: cuebob 2.6s ease-in-out infinite;
}
@keyframes cuebob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (max-width: 1000px) {
  .vstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstrip__cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .vstrip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .section--strip { margin-top: -52px; }
  .vstrip { grid-template-columns: 1fr; }
  .vstrip__cell { padding: 20px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue span { animation: none; }
}

/* ==========================================================================
   Coverage — the therapies, given a section of their own.
   The buyer question is "can I grow into this?", so the cards have to look
   like a catalogue worth having, not a footnote list.
   ========================================================================== */

.coverage {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 7.5vw, 100px) 0;
}
.coverage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -260px;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(15,110,92,.075) 0%, rgba(15,110,92,0) 70%);
  pointer-events: none;
}
.coverage .shell { position: relative; z-index: 1; }

.coverage__head { max-width: 44rem; margin-bottom: clamp(34px, 4vw, 48px); }
.coverage__head h2 {
  font-size: clamp(2rem, 4.1vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: 18px;
}
.coverage__head h2 em { font-style: italic; color: var(--advance); }

.thera {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.tcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 24px 22px 26px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* a green edge that fills in on hover */
.tcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--advance);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .24s ease;
}
.tcard:hover {
  border-color: var(--advance-line);
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(12,17,22,.05), 0 24px 44px -26px rgba(15,110,92,.36);
}
.tcard:hover::before { transform: scaleY(1); }

.tcard__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--advance-soft);
  color: var(--advance);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tcard__icon svg { width: 20px; height: 20px; }
.tcard:hover .tcard__icon {
  background: var(--advance);
  border-color: var(--advance);
  color: #fff;
}

.tcard__k {
  display: block;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.tcard__v {
  display: block;
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--muted);
}

.thera__foot {
  margin-top: clamp(28px, 3.2vw, 38px);
  padding: 22px 26px;
  border: 1px solid var(--advance-line);
  background: var(--advance-soft);
  border-radius: var(--r-md);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
  border-left: 3px solid var(--advance);
}
.thera__foot strong { color: var(--ink); font-weight: 600; }

@media (max-width: 940px) {
  .thera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .thera { grid-template-columns: 1fr; }
  .thera__foot { padding: 18px 20px; font-size: 0.95rem; }
}

/* ==========================================================================
   Manifesto stat — replaces a paragraph that narrated the graphic below it.
   ========================================================================== */

/* Typographic, not diagrammatic: the comparison graphic further down this
   section already draws the fragmentation, and two pictures of one idea is
   one too many. */
.mstat {
  border: 1px solid var(--line);
  border-left: 3px solid var(--advance);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(12,17,22,.04), 0 18px 38px -26px rgba(12,17,22,.22);
}

.mstat__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 22px);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.mstat__n {
  font-family: var(--display);
  font-size: clamp(3.6rem, 7vw, 5.2rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--advance);
  flex: none;
}

.mstat__l {
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.mstat__p {
  font-size: 1rem;
  line-height: 1.58;
  color: var(--muted);
  margin: 0;
}
.mstat__p strong { color: var(--hold); font-weight: 600; }

@media (max-width: 940px) {
  .mstat__n { font-size: clamp(3rem, 13vw, 4.2rem); }
}

/* the multi-site panel carries figures like the chart does, so it is
   labelled the same way — an unlabelled screenshot reads as real data */
.sites__foot {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.635rem;
  letter-spacing: 0.05em;
  color: #6F7884;
}

/* ==========================================================================
   Capability modules — a ghost numeral, a green edge that fills on hover.
   The five jobs are the spine of the page; they should not look like a
   plain list of paragraphs.
   ========================================================================== */

.mod {
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* the number, set large and faint so it reads as texture not content */
.mod::after {
  content: attr(data-n);
  position: absolute;
  top: -26px;
  right: 4px;
  font-family: var(--display);
  font-size: 7.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--advance);
  opacity: .065;
  pointer-events: none;
}

.mod::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--advance);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .26s ease;
}

.mod:hover {
  border-color: var(--advance-line);
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(12,17,22,.05), 0 26px 48px -28px rgba(15,110,92,.34);
}
.mod:hover::before { transform: scaleY(1); }
.mod:hover::after { opacity: .1; }

.mod__verb {
  position: relative;   /* sit above the ghost numeral */
  z-index: 1;
  /* .mod is a column flex container, so a flex item stretches the full width
     no matter what display it declares — align-self is what shrinks it */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--advance-soft);
  border: 1px solid var(--advance-line);
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--advance);
  margin-bottom: 18px;
}

.mod h3 {
  font-family: var(--display);
  font-size: clamp(1.24rem, 1.9vw, 1.52rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin-bottom: 12px;
}

@media (max-width: 620px) {
  .mod::after { font-size: 5.6rem; top: -18px; }
}

/* icon and label share a header row: one less level of vertical stacking,
   and the four labels can be scanned straight across the row */
.vstrip__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}
.vstrip__head .vstrip__icon {
  margin-bottom: 0;
  flex: none;
  width: 40px;
  height: 40px;
}
.vstrip__head .vstrip__icon svg { width: 18px; height: 18px; }
.vstrip__head .vstrip__k {
  margin-bottom: 0;
  line-height: 1.28;
}

/* ==========================================================================
   ICP badge — the first line on the page names who it is for.
   A visitor should know in one second whether this is their page, so this
   is a badge with weight, not an 11px eyebrow.
   ========================================================================== */

.icpbadge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 1px solid rgba(47, 215, 156, .38);
  border-radius: var(--r-pill);
  background: rgba(47, 215, 156, .09);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
}

.icpbadge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FD79C;
  flex: none;
  margin: 0 0 0 15px;
  animation: aipulse 2.4s ease-in-out infinite;
}

.icpbadge__pre {
  padding: 11px 13px 11px 11px;
  color: #6FE9BE;
}

/* the audience itself, carried in reverse so it reads first */
.icpbadge__main {
  padding: 11px 17px;
  background: #2FD79C;
  color: #06241B;
  font-weight: 600;
  letter-spacing: 0.085em;
  align-self: stretch;
  display: flex;
  align-items: center;
}

@media (max-width: 720px) {
  .icpbadge {
    font-size: 0.63rem;
    letter-spacing: 0.09em;
    border-radius: var(--r-md);
  }
  .icpbadge__pre { padding: 9px 11px 9px 9px; }
  .icpbadge__main { padding: 9px 13px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .icpbadge__dot { animation: none; }
}

/* ==========================================================================
   Forward-demand runway — replaces a bar chart.
   Weeks run as horizontal tracks against one shared capacity line, so the
   week that breaches it is the only thing crossing the line. Reads faster
   than bars, and survives a phone, which vertical bars do not.
   ========================================================================== */

.runway {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px 28px 22px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(12, 17, 22, .5);
}

.runway__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 24px;
}
.runway__title {
  font-family: var(--mono);
  font-size: 0.735rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.runway__cap {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8B95A3;
}

.rrows {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 108px;
  align-items: center;
  gap: 15px 16px;
  position: relative;
}

/* The capacity marker lives on each track rather than as a grid item
   spanning the rows: a row-spanning item makes the auto-placement algorithm
   flow every other cell around it, which shunts the whole table sideways.
   On the track, the percentage also resolves against the exact width it
   should measure. */

.rrow__wk {
  font-family: var(--mono);
  font-size: 0.73rem;
  color: #A9B2BE;
  white-space: nowrap;
}

.rrow__track {
  position: relative;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
}
.rrow__track::after {
  content: "";
  position: absolute;
  left: var(--cap);
  top: -9px;
  bottom: -9px;
  border-left: 2px dashed rgba(255, 255, 255, .4);
  z-index: 2;
}
.rrow__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 6px;
  background: linear-gradient(90deg, #12886C 0%, #2FD79C 100%);
  display: block;
}

.rrow__val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #fff;
  white-space: nowrap;
}
.rrow__val small {
  font-size: 0.66rem;
  color: #7D8794;
}

/* The week that breaches. The modifier sits ON each cell, not on a parent —
   these rows are loose grid items with no wrapper — so these must be
   compound selectors, not descendant ones. */
.rrow__wk.rrow--over { color: #F0B5AB; font-weight: 500; }
.rrow__track.rrow--over i {
  background: linear-gradient(90deg, #9E3427 0%, #E06152 100%);
  box-shadow: 0 0 22px 2px rgba(224, 97, 82, .5);
}
.rrow__val.rrow--over { color: #F5A99D; }
.rrow__val.rrow--over small { color: #C9776B; }

.runway__flag {
  margin: 26px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(224, 97, 82, .14);
  border: 1px solid rgba(224, 97, 82, .4);
  color: #F0B5AB;
  font-size: 0.9rem;
  line-height: 1.4;
}
.runway__flag b { color: #fff; font-weight: 600; }

.runway__foot {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.635rem;
  letter-spacing: 0.05em;
  color: #6F7884;
}

@media (max-width: 620px) {
  .runway { padding: 18px 16px 16px; }
  .rrows { grid-template-columns: 52px minmax(0, 1fr) 74px; gap: 11px 10px; }
  .rrow__wk { font-size: 0.63rem; }
  .rrow__track { height: 24px; }
  .rrow__val { font-size: 0.68rem; gap: 5px; }
  .rrow__val small { display: none; }
  .runway__flag { font-size: 0.82rem; padding: 9px 13px; }
}

/* claim cards: an icon and a single sentence, so the three read as a set */
.claim {
  padding: 26px 24px 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.claim:hover {
  border-color: var(--advance-line);
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(12,17,22,.05), 0 24px 44px -26px rgba(15,110,92,.34);
}
.claim__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--advance-soft);
  color: var(--advance);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.claim__icon svg { width: 20px; height: 20px; }
.claim:hover .claim__icon {
  background: var(--advance);
  border-color: var(--advance);
  color: #fff;
}
.claim h3 {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.claim p { font-size: 0.95rem; line-height: 1.55; }

/* site cards: lead with the number an operator is looking for */
.site { padding: 20px 20px 22px; }
.site__name { font-size: 1.1rem; margin-bottom: 3px; }
.site__pct {
  display: block;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.028em;
  color: #2FD79C;
  margin: 16px 0 6px;
}
.site--over .site__pct { color: #E06152; }
.site__stat { display: block; }

/* ==========================================================================
   Week list — no chart literacy required.
   "502 of 480" is understood instantly by anyone; a bar against a capacity
   line has to be decoded first. Two rounds of "confusing" said the format
   was the problem, not the styling.
   ========================================================================== */

.wks { display: flex; flex-direction: column; }

.wk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 17px 18px;
  border-left: 3px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wk:last-child { border-bottom: 0; }

.wk__when {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #A9B2BE;
}

.wk__num {
  font-family: var(--display);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.wk__num small {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #7D8794;
}

.wk__chip {
  font-family: var(--mono);
  font-size: 0.685rem;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(47, 215, 156, .13);
  border: 1px solid rgba(47, 215, 156, .3);
  color: #8FE0CB;
  white-space: nowrap;
  min-width: 116px;
  text-align: center;
}

/* the week that is already over */
.wk--over {
  border-left-color: #E06152;
  background: rgba(224, 97, 82, .09);
}
.wk--over .wk__when { color: #F0B5AB; }
.wk--over .wk__num { color: #F5A99D; }
.wk--over .wk__num small { color: #C9776B; }
.wk__chip--over {
  background: rgba(224, 97, 82, .18);
  border-color: rgba(224, 97, 82, .45);
  color: #F5A99D;
  font-weight: 500;
}

@media (max-width: 560px) {
  .wk {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 14px;
  }
  .wk__chip { grid-column: 1 / -1; justify-self: start; min-width: 0; }
  .wk__num { font-size: 1.32rem; }
}

/* the footer descriptor: says plainly what this is, for readers and crawlers */
.site-foot__what { max-width: 62ch; line-height: 1.55; }


/* The header CTA carries a full and a short label; the short one takes over
   before the full one can wrap. */
.btn__short { display: none; }
@media (max-width: 720px) {
  .btn__full { display: none; }
  .btn__short { display: inline; }
}

/* A quiet link beside the primary CTA. Two solid pills side by side compete;
   a text link keeps "Request a walkthrough" the obvious action. */
.site-head__nav { margin-left: auto; margin-right: 26px; }
.site-head__link {
  font-size: 0.93rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  text-decoration: none;
  color: inherit;
  opacity: .78;
  transition: opacity .16s ease;
}
.site-head__link:hover { opacity: 1; }

/* below the breakpoint the header keeps only the CTA — the hero rail sits
   right beneath it and does the same job */
@media (max-width: 720px) {
  .site-head__nav { display: none; }
}

/* inline field error, shown on blur rather than after a failed submit */
.cform__fielderr {
  margin: 8px 0 0;
  font-size: 0.845rem;
  line-height: 1.45;
  color: var(--hold);
}
.cform__fielderr a { color: inherit; font-weight: 600; }
.cform__input[aria-invalid="true"] {
  border-color: var(--hold);
  box-shadow: 0 0 0 3px rgba(176, 58, 46, .11);
}

/* ==========================================================================
   Patients — the other half of a full chair.
   The visual is an SMS thread ON PURPOSE: engagement is text and email the
   patient already has, not an app they must install.
   ========================================================================== */

.pts { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.pts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.pts__points { list-style: none; margin: 26px 0 0; padding: 0; }
.pts__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted);
}
.pts__points li b { color: var(--ink); font-weight: 600; }
.pts__points li::before {
  content: "";
  position: absolute; left: 0; top: 0.46em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--advance-line); background: var(--paper);
}
.pts__points li::after {
  content: "";
  position: absolute; left: 4.5px; top: 0.75em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--advance);
}

.pts__bottom {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--advance);
  background: var(--advance-soft);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--ink-soft);
}
.pts__bottom strong { color: var(--ink); font-weight: 600; }

/* ---- the phone thread ---- */

.phone {
  background: var(--ink);
  border-radius: 22px;
  padding: 20px 18px 16px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(12, 17, 22, .5);
  max-width: 420px;
  justify-self: center;
  width: 100%;
}
.phone__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.phone__who {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.phone__meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: #7D8794;
}

.msg {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.msg--out {
  background: rgba(47, 215, 156, .14);
  border: 1px solid rgba(47, 215, 156, .3);
  color: #D9F5EB;
  border-bottom-left-radius: 5px;
}
.msg--in {
  background: rgba(255, 255, 255, .1);
  color: #E6EAEF;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.phone__route {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: rgba(224, 97, 82, .12);
  border: 1px solid rgba(224, 97, 82, .35);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #F0B5AB;
}
.phone__route i {
  font-style: normal;
  width: 8px; height: 8px; border-radius: 50%;
  background: #E06152; flex: none;
}

.phone__foot {
  margin-top: 12px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 0.615rem;
  letter-spacing: 0.05em;
  color: #6F7884;
}

@media (max-width: 940px) {
  .pts__grid { grid-template-columns: 1fr; }
  .phone { justify-self: start; }
}

/* ==========================================================================
   Flyer download — champion enablement, kept at the bottom on purpose:
   the impulse to share arrives after conviction, and an ungated PDF at the
   top would be an exit ramp beside the primary CTA.
   ========================================================================== */

.dlcard {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dlcard:hover {
  border-color: var(--advance-line);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(12,17,22,.05), 0 18px 36px -24px rgba(15,110,92,.3);
}
.dlcard__icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--advance-line);
  background: var(--advance-soft);
  color: var(--advance);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dlcard__icon svg { width: 18px; height: 18px; }
.dlcard:hover .dlcard__icon { background: var(--advance); border-color: var(--advance); color: #fff; }
.dlcard__body { min-width: 0; }
.dlcard__body b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.dlcard__body span { display: block; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.dlcard__arrow { margin-left: auto; flex: none; color: var(--advance); transition: transform .18s ease; }
.dlcard:hover .dlcard__arrow { transform: translateX(3px); }

.contact__alt { margin-top: 18px; padding-top: 0; border-top: 0; }

.cform__done__dl { margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.cform__done__dl a { color: var(--advance); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }