/* carenavigator.life
   Life Navigator, Life Medical New Jersey.

   Written for two readers: someone in their seventies reading on a phone, and
   their adult child reading at eleven at night. So: large type, short lines,
   quiet pages, and the phone number never far from the thumb. The brand
   gradient earns its place three times, on the call buttons, on the closing
   panel and on a hairline under each section label. Everywhere else the page
   is ink on paper.

   Bump the ?v= query in index.html whenever this file changes. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-var.woff2) format('woff2');
}

:root {
  --ink: #333333;
  --body: #4A4A4A;
  --gray: #888888;
  --gray-text: #6E6E6E;
  --paper: #FFF4F6;
  --light: #F2F2F2;
  --tint: #FFF4F6;
  --tint-deep: #FFE7ED;
  --line-soft: #F7DCE3;
  --pink: #ED67A6;
  --red: #EC3E2C;
  --red-deep: #C7301F;
  --grad: linear-gradient(180deg, #EC3E2C 0%, #ED67A6 100%);
  --radius: 18px;
  --line: #E6E6E6;
  --wrap: 1120px;
  --read: 640px;
  --pad: 24px;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 86px;
}

img, svg { max-width: 100%; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap.narrow { max-width: var(--wrap); }
.center { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: var(--ink);
  padding: 14px 20px; z-index: 60; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

a { color: var(--red-deep); }
:focus-visible {
  outline: 3px solid var(--red-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.top { background: #fff; border-bottom: 1px solid var(--line); }
.top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 84px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.logo { display: block; flex: none; width: 96px; height: 40px; color: var(--red); }
.top-nav { display: none; gap: 26px; margin-left: auto; margin-right: 26px; }
.top-nav a {
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600;
}
.top-nav a:hover { color: var(--red-deep); }
.brand-sub {
  font-size: 14px; line-height: 1.25; color: var(--gray-text);
  padding-left: 14px; border-left: 1px solid var(--line);
}
.top-call {
  display: none; flex: none; align-items: center; gap: 10px;
  padding: 12px 20px; min-height: 52px; border-radius: 999px;
  background: var(--grad); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.top-call .call-ico { width: 20px; height: 20px; flex: none; }
.num { white-space: nowrap; }
.call-ico { width: 22px; height: 22px; }

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

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFEFF3 0%, #FFF7F9 62%, #FFFFFF 100%);
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--line);
}
/* Decorative photo behind the right side of the hero, faded into the page. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 0;
  background-image: url("/hero-care.jpg");
  background-size: cover;
  background-position: 62% 38%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 34%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 34%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-in { position: relative; z-index: 1; display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
.hero-text { max-width: 34em; }

.hero-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.hero-card p { margin: 0; }
.hero-card .card-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
}
.hero-card .card-note { font-size: 17px; color: var(--gray-text); }
.eyebrow-pill {
  display: inline-block; margin: 0 0 22px;
  background: #fff; color: var(--red-deep);
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 18px;
  border: 1px solid var(--line); border-radius: 999px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; }
.hero-fine { margin: 0 0 10px; font-size: 16px; color: var(--gray); max-width: 46ch; }
.hero-fine:last-child { margin-bottom: 0; }
.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 5.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 18ch;
  color: var(--ink);
}
.hero .lede {
  margin: 0 0 26px;
  max-width: 34ch;
  font-size: clamp(20px, 3.4vw, 23px);
  line-height: 1.5;
  color: var(--body);
}
.hero .foryou {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 20px;
  border-top: 3px solid;
  border-image: var(--grad) 1;
}
.hero-note { margin: 20px 0 0; font-size: 18px; color: var(--gray-text); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 26px; border-radius: 999px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; min-height: 62px; white-space: nowrap;
}
.btn .call-ico { width: 22px; height: 22px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 3px 12px rgba(200,40,28,0.26); }
.btn-ghost { background: #fff; color: var(--red-deep); border: 2px solid var(--red); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* the gradient card that carries the number */
.phone-card {
  display: none;
  background: var(--grad); color: #fff; border-radius: var(--radius);
  padding: 34px 30px; text-align: center;
  box-shadow: 0 10px 30px rgba(200, 40, 28, 0.18);
}
.phone-card .label {
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 14px; font-weight: 700; opacity: 0.94;
}
.phone-card .phone-number {
  display: block; color: #fff; text-decoration: none;
  font-size: clamp(32px, 4.4vw, 40px); font-weight: 700; letter-spacing: -0.02em;
}
.phone-card p { margin: 12px 0 0; font-size: 16px; color: rgba(255,255,255,0.94); }

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

.call-btn {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none; background: var(--grad); color: #fff;
  padding: 16px 32px; min-height: 76px; border-radius: 18px;
  box-shadow: 0 10px 26px rgba(236, 62, 44, 0.18);
}
.call-btn .call-ico { width: 30px; height: 30px; flex: none; }
.call-btn-in { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.call-btn-top {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.9;
}
.call-btn-num { font-size: clamp(27px, 6.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.call-btn.on-color { background: #fff; color: var(--red-deep); box-shadow: 0 12px 30px rgba(120, 20, 10, 0.2); }
.call-btn.big { min-height: 86px; padding: 18px 36px; }
.call-btn:hover { filter: brightness(1.04); }
.call-btn:active { transform: translateY(1px); }

/* ---------- sections ---------- */

.sec { padding: 60px 0; border-bottom: 1px solid var(--line); }
.sec.alt { background: var(--tint); border-bottom-color: var(--line-soft); }
.sec.alt .card, .sec.alt .weeks li, .sec.alt .alarm { border-color: var(--line-soft); }
.sec.alt .problem-list li, .sec.alt .qual li, .sec.alt .steps li,
.sec.alt .triggers dt, .sec.alt .faq h3 { border-top-color: var(--line-soft); }
.sec.alt .problem-list li:last-child, .sec.alt .qual li:last-child,
.sec.alt .steps li:last-child { border-bottom-color: var(--line-soft); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-deep);
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  max-width: 26ch;
}
h3 {
  margin: 0 0 8px;
  font-size: 20px; line-height: 1.3;
  letter-spacing: -0.015em; font-weight: 700; color: var(--ink);
}
p { margin: 0 0 20px; }
.sec-lede {
  font-size: 21px; color: var(--gray-text);
  margin: 0 0 44px; max-width: var(--read); line-height: 1.55;
}
.center h2, .center .sec-lede, .center .big-body { margin-left: auto; margin-right: auto; }
.center .big-body { max-width: 46ch; }
.big-body { font-size: 20px; max-width: var(--read); }

/* ---------- the facts band ---------- */

.stats {
  position: relative; background: #fff;
  border-bottom: 1px solid var(--line); padding: 40px 0 44px;
}
.stats::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #EC3E2C 0%, #ED67A6 100%);
}
.stats-in { display: grid; gap: 0; grid-template-columns: 1fr; }
.stat { padding: 22px 0; border-top: 1px solid var(--line); }
.stat:first-child { border-top: 0; padding-top: 4px; }
.stat-k {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray);
}
.stat-v {
  display: flex; align-items: flex-end; gap: 0.14em; min-height: 46px;
  margin: 0; font-size: clamp(36px, 4.6vw, 46px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--red);
  white-space: nowrap;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .stat-v {
    background: linear-gradient(120deg, #EC3E2C 0%, #ED67A6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.stat-v.is-word { font-size: clamp(28px, 3.3vw, 36px); }
.stat-d {
  margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--gray-text);
  max-width: 30ch;
}

/* ---------- the problem list ---------- */

.problem-list { list-style: none; margin: 0 0 44px; padding: 0; }
.problem-list li {
  display: flex; gap: 22px; padding: 26px 0;
  border-top: 1px solid var(--line); font-size: 19px;
  max-width: 780px;
}
.problem-list li:last-child { border-bottom: 1px solid var(--line); }
.problem-list strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.p-num, .q-num, .s-num {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 17px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(236, 62, 44, 0.24);
}

.turn {
  margin: 0; font-size: clamp(24px, 4.6vw, 30px);
  line-height: 1.35; font-weight: 400; color: var(--gray-text);
  letter-spacing: -0.02em; max-width: 24ch;
}
.turn strong { font-weight: 700; color: var(--red); display: block; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .turn strong {
    background: linear-gradient(120deg, #EC3E2C 0%, #ED67A6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* ---------- what the navigator does ---------- */

.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px;
}
.card p { margin: 0; color: var(--body); }
.ico {
  display: grid; place-items: center; width: 54px; height: 54px;
  margin-bottom: 18px; border-radius: 16px;
  background: var(--tint-deep); color: var(--red-deep);
}
.ico svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card:hover {
  border-color: #F6C8D3; box-shadow: 0 12px 28px rgba(236, 62, 44, 0.10);
  transform: translateY(-2px);
}

/* ---------- the month ---------- */

.weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; }
.weeks { gap: 20px; }
.weeks li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.weeks li { position: relative; overflow: hidden; }
.weeks li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #EC3E2C 0%, #ED67A6 100%);
}
.weeks .wk {
  display: inline-block; margin-bottom: 12px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--tint-deep); color: var(--red-deep);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.weeks li { padding-top: 30px; }
.weeks p { margin: 0; color: var(--body); max-width: 42ch; }

/* ---------- triggers ---------- */

.triggers { margin: 0 0 34px; }
.triggers dt {
  position: relative; font-size: 21px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; padding-top: 26px; padding-left: 26px;
  border-top: 1px solid var(--line); max-width: 780px;
}
.triggers dt::before {
  content: ''; position: absolute; left: 0; top: 32px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--grad);
}
.triggers dd { padding-left: 26px; }
.triggers dd { margin: 10px 0 26px; color: var(--body); max-width: var(--read); }
.alarm {
  margin: 0; padding: 20px 22px 20px 26px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  border-left: 6px solid var(--red);
  font-size: 18px; font-weight: 600; color: var(--ink);
}

/* ---------- conditions ---------- */

.chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 12px 20px; border-radius: 999px;
  background: var(--tint-deep); border: 1px solid #F8CDD8;
  font-size: 17px; font-weight: 600; color: var(--red-deep);
}

/* ---------- qualify and steps ---------- */

.qual, .steps { list-style: none; margin: 0 0 38px; padding: 0; }
.qual li, .steps li {
  display: flex; gap: 22px; padding: 28px 0; border-top: 1px solid var(--line);
  max-width: 780px;
}
.qual li:last-child, .steps li:last-child { border-bottom: 1px solid var(--line); }
.qual p, .steps p { margin: 0; color: var(--body); max-width: 46ch; }
.inline-cta { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line); }
.cta-line { font-size: 21px; font-weight: 600; color: var(--ink); margin: 0 0 20px; }

/* ---------- doctors ---------- */

.doctors { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }

/* ---------- faq ---------- */

.faq h3 { margin: 0 0 10px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 21px; max-width: 780px; }
.faq p { margin: 0 0 26px; color: var(--body); max-width: var(--read); }
.faq p:last-child { margin-bottom: 0; padding-bottom: 4px; }

/* ---------- cost ---------- */

.sec.cost {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF1F5 100%);
  border-bottom-color: var(--line-soft);
}
.cost .zero {
  margin: 10px 0 0;
  font-size: clamp(110px, 30vw, 200px);
  line-height: 0.9; font-weight: 700; letter-spacing: -0.055em;
  color: var(--red);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .cost .zero {
    background: linear-gradient(150deg, #EC3E2C 0%, #ED67A6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.zero-cap {
  margin: 12px auto 30px; padding-top: 16px;
  font-size: 19px; font-weight: 600; color: var(--gray-text);
  border-top: 3px solid; border-image: var(--grad) 1;
  display: inline-block;
}

/* ---------- close ---------- */

.close { position: relative; overflow: hidden; background: var(--grad); color: #fff; padding: 72px 0 78px; border-bottom: 0; }
/* Decorative photo blended into the closing gradient band. */
.close::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 0;
  background-image: url("/close-call.jpg");
  background-size: cover;
  background-position: 55% 34%;
  opacity: 0.24;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 45%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 45%, #000 100%);
}
.close > .wrap { position: relative; z-index: 1; }
.close h2 { color: #fff; margin: 0 auto 18px; max-width: 18ch; }
.close-lede { font-size: 21px; max-width: 34ch; margin: 0 auto 34px; color: rgba(255,255,255,0.94); }
.close-note { margin: 22px 0 0; font-size: 18px; color: rgba(255,255,255,0.92); }

/* ---------- how to start photo ---------- */

#how-to-start { position: relative; overflow: hidden; }
/* Decorative photo anchored left, fading out to the right. */
#how-to-start::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background-image: url("/start-care.jpg");
  background-size: cover;
  background-position: 42% 42%;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, rgba(0,0,0,0.35) 34%, rgba(0,0,0,0.9) 78%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(to left, transparent 0%, rgba(0,0,0,0.35) 34%, rgba(0,0,0,0.9) 78%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#how-to-start > .wrap { position: relative; z-index: 1; }

/* ---------- care team header photo ---------- */

.team-head { position: relative; overflow: hidden; }
.team-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/team-care.jpg");
  background-size: cover;
  background-position: 50% 34%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
}
.team-head > .wrap { position: relative; z-index: 1; }


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

.foot { padding: 52px 0 44px; background: #fff; }
.foot-logo { height: 42px; margin-bottom: 18px; }
.foot-brand { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.foot-brand strong { font-weight: 600; }
.foot-call { margin: 0 0 26px; }
.foot-call a {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  text-decoration: none; color: var(--red-deep);
}
.fine { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--gray-text); max-width: var(--read); }
.fine:last-child { margin-bottom: 0; }

/* ---------- sticky call bar ---------- */

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.sticky-bar a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; border-radius: 16px; background: var(--grad); color: #fff;
  text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
}
.sticky-bar .call-ico { width: 26px; height: 26px; }

/* ---------- wider screens ---------- */

@media (min-width: 620px) {
  body { padding-bottom: 0; }
  .sticky-bar { display: none; }
  .top-call { display: inline-flex; }
  .logo { height: 48px; width: 115px; }
  .sec { padding: 76px 0; }
  .hero { padding: 84px 0 72px; }
  .hero::after { width: 58%; }
  .close::before { width: 52%; }
  #how-to-start::before { width: 34%; }
  .team-head::before { opacity: 0.26; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .hero-in { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
  .phone-card { display: block; }
  .stats-in { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .stat { padding: 6px 30px; border-top: 0; border-left: 1px solid var(--line); }
  .stat:first-child { padding: 6px 30px 6px 0; border-left: 0; }
  .stat:last-child { padding-right: 0; }
}

@media (min-width: 960px) {
  :root { --pad: 40px; }
  .sec { padding: 88px 0; }
  .hero { padding: 96px 0 84px; }
  .hero::after { width: 55%; }
  .close::before { width: 48%; }
  #how-to-start::before { width: 40%; }
  .team-head::before { opacity: 0.3; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .weeks { grid-template-columns: repeat(4, 1fr); }
  .top-nav { display: flex; }
  .doctors { grid-template-columns: 1fr; }
  .close { padding: 92px 0 98px; }
}

/* the closing panel's label, on the gradient */
.eyebrow.on-color {
  color: rgba(255,255,255,0.86);
  border-image: none;
  border-top: 3px solid rgba(255,255,255,0.5);
}

/* ---------- Articles ---------- */
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.article-card {
  background: #fff;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05);
}
.article-card h2, .article-card h3 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; }
.article-card h2 a, .article-card h3 a { color: inherit; text-decoration: none; }
.article-card h2 a:hover, .article-card h3 a:hover { text-decoration: underline; }
.article-featured { border-left: 4px solid #EC3E2C; margin-bottom: 30px; }
.article-featured h3 { font-size: 1.6rem; }
.article-section-head { margin: 34px 0 16px; font-size: 1.25rem; }
.article-jump { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.article-jump a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.article-jump a:hover { border-color: #EC3E2C; color: #EC3E2C; }
.article-card .big-body { margin: 0 0 14px; }
.article-meta { margin: 0 0 12px; font-size: 0.9rem; color: #6b6b6b; }
.article-more {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, #ED67A6, #EC3E2C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.article-more:hover { text-decoration: underline; -webkit-text-decoration-color: #EC3E2C; text-decoration-color: #EC3E2C; }
.article-back { margin-top: 36px; }

.prose { max-width: 68ch; }
.prose h2 { margin: 40px 0 12px; font-size: 1.5rem; line-height: 1.25; }
.prose h3 { margin: 30px 0 10px; font-size: 1.2rem; }
.prose p { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.7; color: #333; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 10px; font-size: 1.08rem; line-height: 1.65; color: #333; }
.prose a { color: #EC3E2C; }
.prose strong { font-weight: 650; }

.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 18px 0 22px; }
.foot-nav a { color: inherit; opacity: 0.85; text-decoration: none; font-size: 0.95rem; }
.foot-nav a:hover { opacity: 1; text-decoration: underline; }

/* Headings on the split pages and the article pages */
.sec h1, article.sec h1 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.top-nav a { white-space: nowrap; }
@media (min-width: 960px) { .top-nav { gap: 22px; } }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: #EC3E2C; }

/* Footer legal + staff links: wrap evenly on every breakpoint. */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  max-width: none;
  margin: 0 0 12px;
  font-size: 0.95rem;
}
.foot-links a { color: inherit; opacity: 0.85; text-decoration: underline; }
.foot-links a:hover { opacity: 1; }
.foot-links span { opacity: 0.45; }
@media (max-width: 520px) {
  .foot-links span { display: none; }
  .foot-links { gap: 10px 16px; }
}

/* Location pages */
.crumbs { margin: 0 0 14px; font-size: .9rem; color: #6b6b6b; }
.crumbs a { color: #6b6b6b; text-decoration: none; }
.crumbs a:hover { color: #EC3E2C; text-decoration: underline; }
.loc-figure { margin: 24px 0 30px; }
.loc-figure img { width: 100%; height: auto; border-radius: 14px; display: block; object-fit: cover; }
.loc-figure figcaption { margin-top: 8px; }
.loc-map { margin: 26px 0 30px; }
.loc-map iframe { width: 100%; height: 340px; border: 0; border-radius: 14px; display: block; background: #f2f2f2; }
.loc-map figcaption { margin-top: 8px; }
.loc-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.loc-list li { margin: 0; }
.loc-list a { display: block; padding: 12px 14px; border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; color: #333; text-decoration: none; font-size: 1rem; }
.loc-list a:hover { border-color: #ED67A6; color: #EC3E2C; }
.loc-block { margin: 0 0 32px; }
.loc-faq { margin: 0 0 30px; }
.loc-faq dt { font-weight: 650; margin-top: 18px; }
.loc-faq dd { margin: 6px 0 0; color: #333; line-height: 1.65; }

/* Local services directory on location pages */
.loc-directory { margin: 34px 0 10px; padding: 24px; border: 1px solid #e6e6e6; border-radius: 14px; background: #F2F2F2; }
.loc-directory h2 { margin-top: 0; }
.loc-directory-group { margin-top: 18px; }
.loc-directory-group h3 { margin: 0 0 10px; font-size: 1.05rem; }
.loc-directory .loc-list { margin-bottom: 0; }
.loc-directory .loc-list li { padding: 12px 14px; border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; }
.loc-directory .loc-list li a { display: inline; padding: 0; border: 0; background: none; color: #EC3E2C; }
.loc-directory .fine { display: block; color: #6b6b6b; font-size: 0.85rem; }

.article-crumbs { padding: 18px 0 0; font-size: .95rem; color: #666; }
.article-crumbs a { color: inherit; }