/* ==========================================================================
   GLP NP — Marketing Site Styles
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

body {
  font-family: var(--font-sans);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.container--wide { max-width: var(--container-wide); }

section { position: relative; }

/* ---- Typography helpers ---- */
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: 400; line-height: 1.2; }
.accent-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  padding: 4px 12px;
  border-radius: 3px;
  display: inline-block;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-blue-50);
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}
.eyebrow--teal { background: var(--color-bg-teal-50); color: var(--color-accent); text-transform: none; letter-spacing: 0; font-weight: 600;}
.lead { font-size: var(--fs-lead); color: var(--color-body); font-weight: 500; line-height: 1.7; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  padding: 15px 34px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: #056aa2; box-shadow: 0 8px 20px rgba(6,123,186,.25); }
.btn-outline { background: transparent; color: var(--color-heading); border-color: var(--color-accent); }
.btn-outline:hover { background: var(--color-accent); color: #fff; }
.btn-sm { padding: 10px 24px; font-size: var(--fs-small); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  max-width: 1660px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo-link { display: flex; align-items: center; gap: 11px; }
/* Single-file lockup (assets/images/logo.svg, 119x49). Height drives the size and
   width stays auto so the artwork keeps its ratio. */
.logo-mark { display: flex; align-items: center; flex: none; }
.logo-mark img { height: 48px; width: auto; flex: none; }
.logo-tagline {
  border-left: 3px solid var(--color-border-input);
  padding-left: 11px;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  color: var(--color-muted-2);
  white-space: nowrap;
}

.main-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.main-nav-list a {
  display: block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  color: var(--color-nav-link);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav-list a:hover { background: var(--color-bg-blue-100); }
.main-nav-list a.active {
  background: var(--color-bg-blue-100);
  color: var(--color-primary);
  font-weight: 700;
}

.header-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-heading); border-radius: 2px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 40px auto 0;
  max-width: 1620px;
  min-height: 560px;
  color: #fff;
  background: linear-gradient(90deg, rgba(23,52,53,.75) 30%, rgba(23,52,53,.15) 100%), #173435;
}
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(23,35,36,.72) 20%, rgba(23,35,36,.05) 85%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 60px;
  max-width: 620px;
}
.hero-title { font-family: var(--font-serif); font-size: var(--fs-hero); line-height: 1.15; letter-spacing: -1px; margin-bottom: 24px; }
.hero-title span { display: block; }
/* The global h1 rule sets --color-heading, which overrides the white inherited
   from .hero and leaves this line dark on a blue box. Restate white here. */
.hero-title .line-1 { background: var(--color-primary); color: #fff; padding: 2px 10px; border-radius: 6px; display: inline-block; }
.hero-title .line-2 { background: #fff; color: var(--color-heading); padding: 2px 10px; border-radius: 6px; display: inline-block; margin-top: 8px; }
.hero-copy {
  background: rgba(42,42,42,.5);
  padding: 20px;
  border-radius: 4px;
  font-size: var(--fs-lead);
  font-weight: 500;
  margin-bottom: 32px;
}
.hero-page {
  min-height: 480px;
  display: flex;
  align-items: center;
}

/* Generic page hero (split image/text card, used on inner pages) */
.split-hero {
  max-width: var(--container-wide);
  margin: 40px auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  min-height: 543px;
  background: linear-gradient(to top, #fff, var(--color-bg-soft));
  box-shadow: var(--shadow-panel);
}
.split-hero-media { flex: 0 0 616px; position: relative; overflow: hidden; }
.split-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* The provider hero holds a 4:5 portrait, so its panel is narrowed to 460px
   (0.85 against the photo's 0.80) - almost no crop - and the card is given a
   definite height, since otherwise the portrait's intrinsic ratio stretches the
   card from 543px to 770px. */
.split-hero--provider { height: 543px; }
.split-hero--provider .split-hero-media { flex: 0 0 460px; }
.split-hero-body { flex: 1; display: flex; align-items: center; padding: 60px 80px; }
.split-hero-body .inner { max-width: 620px; }
/* The provider hero carries three credential pills needing 533px; the default
   80px side padding leaves 504px and breaks them onto a second row. */
.split-hero--provider .split-hero-body { padding: 60px 56px; }
.split-hero-body h1 { font-size: var(--fs-hero); margin: 16px 0; line-height: 1.15; }
.split-hero-body h1 b { font-weight: 700; }
.split-hero-body p { font-size: var(--fs-lead); font-weight: 500; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--soft { background: var(--color-bg-alt); }
.section--blue { background: var(--color-bg-blue-50); }
.section-head { text-align: center; max-width: 900px; margin: 0 auto 48px; }
.section-head h2 { font-size: var(--fs-h1); margin: 16px 0; }
.section-head p { font-size: var(--fs-body); color: var(--color-body-soft); }

/* Intro statement (Home: "You are not the problem…") */
.statement {
  text-align: center;
  max-width: 900px;
  margin: 64px auto;
  padding: 0 20px;
}
.statement h2 { font-size: var(--fs-h1); line-height: 1.2; margin-bottom: 24px; }
.statement p { font-size: var(--fs-body); color: var(--color-body-soft); }

/* ---- Card grid ---- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 33px;
  box-shadow: var(--shadow-card);
}
.card .icon-wrap {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--color-bg-blue-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 30px;
  color: var(--color-primary);
}
.icon-wrap svg { width: 55%; height: 55%; flex: none; }
.icon-wrap img { width: 55%; height: 55%; flex: none; object-fit: contain; }
.card h3 { font-size: var(--fs-h4); margin-bottom: 12px; color: #111827; }
.card p { font-size: var(--fs-body-sm); color: var(--color-body-alt); line-height: 1.5; }

/* Feature card (small, icon on left, used for how-it-works / GLP-1 help) */
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.feature-item { display: flex; gap: 20px; }
.feature-item .icon-wrap { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--color-bg-blue-50); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--color-primary); }
.feature-item h3 { font-size: var(--fs-h6); margin-bottom: 8px; }
.feature-item p { font-size: var(--fs-body-sm); color: var(--color-body-alt); }

/* ---- Booking / calendar widget ---- */
/* Landing on #booking must clear the sticky header (72px) rather than tucking
   the section title underneath it. */
#booking { scroll-margin-top: 88px; }

.booking-section { background: var(--color-bg-blue-50); border-radius: var(--radius-xl); padding: 50px 30px; max-width: 1480px; margin: 0 auto; }
.booking-widget {
  max-width: 950px;
  margin: 40px auto 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow-booking);
  overflow: hidden;
  display: flex;
  /* Height now comes from the calendar; 573px was sized for the slot grid
     that used to fill the right column. */
  min-height: 0;
}
.calendar-pane { flex: 1; padding: 32px; border-right: 1px solid rgba(193,199,211,.3); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-head h3 { color: var(--color-primary); font-size: var(--fs-h5); font-weight: 600; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 9px; background: #fff; color: var(--color-primary); }
.cal-nav button:hover { background: var(--color-bg-blue-50); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.cal-weekdays span { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--color-muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 4px; row-gap: 8px; }
.cal-day {
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--color-primary);
  position: relative;
  background: none;
  border: none;
}
.cal-day.muted { color: var(--color-border-input); cursor: default; }
.cal-day.selected { background: var(--color-primary); color: #fff; }
.cal-day:not(.muted):not(.selected):hover { background: var(--color-bg-blue-100); }

.slots-pane { flex: 1; padding: 32px; display: flex; flex-direction: column; }
.slots-pane h3 { color: var(--color-primary); font-size: var(--fs-h5); font-weight: 600; margin-bottom: 20px; }
.slot-label { font-size: 13px; font-weight: 500; letter-spacing: .2px; color: var(--color-muted); margin-bottom: 10px; }
/* Confirms the chosen date once one is picked. */
.slot-label.is-chosen { color: var(--color-primary); font-weight: 600; }

.booking-form { display: flex; flex-direction: column; gap: 13px; margin-top: 22px; }
.booking-form label { font-size: var(--fs-small); font-weight: 500; color: #414751; margin-bottom: 4px; display: block; }
.booking-form input {
  width: 100%;
  border: 1px solid rgba(193,199,211,.5);
  border-radius: 6px;
  padding: 11px 13px;
  font-size: var(--fs-body-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.booking-form .btn { width: 100%; margin-top: 4px; }
.booking-form div.error input { border-color: #dc2626; }
.booking-form .form-success { margin-bottom: 0; padding: 12px; }
.booking-form .form-error { display: none; background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: 12px; border-radius: 8px; font-size: 14px; text-align: center; }
.booking-form .form-error.show { display: block; }
.booking-form .form-notice { margin-bottom: 0; padding: 12px; }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-nav button:disabled:hover { background: #fff; }

/* ---- Two column feature-with-photos ---- */
.split-feature { display: flex; align-items: center; gap: 56px; }
.split-feature .text-col { flex: 1; min-width: 320px; }
.split-feature .media-col { flex: 0 0 480px; position: relative; height: 380px; }
.split-feature .media-col img {
  position: absolute;
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  object-fit: cover;
  aspect-ratio: 560 / 168.3;
  height: auto;
}
.split-feature .media-col img:nth-child(1) { top: 0; right: 0; }
.split-feature .media-col img:nth-child(2) { top: 128px; left: 0; }
.split-feature .media-col img:nth-child(3) { top: 256px; right: 20px; }
/* Single-image variant. The collage rules above assume three stacked, absolutely
   positioned photos sharing one letterbox crop; a lone image should instead flow
   in the column at its own aspect ratio. */
.split-feature .media-col--single { flex: 0 1 520px; height: auto; }
.split-feature .media-col--single img {
  position: static;
  max-width: 100%;
  aspect-ratio: auto;
  height: auto;
}
.check-list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-sm); color: var(--color-heading); }
.check-list li::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  background-color: var(--color-primary);
  /* url() resolves against the stylesheet, not the document, so this must step
     out of css/ rather than start from the site root. */
  -webkit-mask: url("../assets/icons/icon-check-circle.svg") center / contain no-repeat;
  mask: url("../assets/icons/icon-check-circle.svg") center / contain no-repeat;
}

/* ---- Doctor quote (Home) ---- */
.quote-block { display: flex; gap: 48px; align-items: center; background: var(--color-bg-alt); border-radius: var(--radius-lg); overflow: hidden; }
.quote-block img { flex: 0 0 45%; height: 420px; object-fit: cover; }
.quote-block .quote-body { padding: 40px; }
.quote-block .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-bg-blue-100); color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: 16px; }
.quote-block h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.quote-block p { font-size: var(--fs-body); }

/* ---- Numbered steps (Home telehealth / Plan how it works) ---- */
.steps { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.step h4 { font-size: var(--fs-body); margin-bottom: 4px; color: var(--color-heading); }
.step p { font-size: var(--fs-small); color: var(--color-body-alt); }

/* ---- CTA banner ---- */
.cta-banner { display: flex; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); background: #fff; min-height: 400px; }
/* min-width:0 is required: without it the image's intrinsic width becomes its
   automatic minimum size and the flex item refuses to shrink to its 50% basis,
   squeezing the copy column out of the card. */
.cta-banner img { flex: 0 0 50%; min-width: 0; object-fit: cover; }
.cta-banner .cta-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 60px; }

/* ---- Before / after panel ----
   Two separate photographs, one per state, laid out as equal halves. They are
   different shapes (portrait, but not the same ratio), so each is cropped to
   fill its own half rather than being scaled to a shared aspect — otherwise
   one would letterbox against the other. The dividing rule is the grid gap
   showing the panel background through, so it always lands between the two
   images whatever they are replaced with. */
.before-after {
  position: relative;
  flex: 0 0 50%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--color-border-soft);
  overflow: hidden;
}
.ba-shot { position: relative; overflow: hidden; min-width: 0; }
.before-after .ba-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit high in both frames; a centre crop would cut them on short
     panels. */
  object-position: 50% 22%;
  display: block;
}
.ba-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.ba-label--before { background: rgba(23,52,53,.68); }
.ba-label--after { background: var(--color-primary); }

@media (max-width: 560px) {
  .ba-label { top: 12px; padding: 5px 13px; font-size: 10px; letter-spacing: .5px; }
}
.cta-banner h2 { font-size: var(--fs-h2); margin-bottom: 16px; line-height: 1.2; }
.cta-banner p { font-size: var(--fs-body); margin-bottom: 24px; max-width: 460px; }

/* ---- Stat strip (Plan results) ---- */

/* ---- Patient journey tabs (Plan) ---- */
.journey { display: flex; gap: 28px; align-items: flex-start; }
.journey-list { flex: 0 0 355px; display: flex; flex-direction: column; gap: 12px; }
.journey-list button {
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 19px 22px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-heading);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.journey-list button:hover { border-color: var(--color-border-accent); }
.journey-list button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(6,123,186,.22);
}
.journey-panel { flex: 1 1 340px; min-width: 280px; }
.journey-detail { background: var(--color-bg-blue-50); border-radius: 16px; padding: 38px 34px; }
.journey-detail .icon-wrap {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 30px;
}
/* The icon set is drawn in brand blue; flatten it to white to sit on the blue tile. */
.journey-detail .icon-wrap img { filter: brightness(0) invert(1); }
.journey-step-num { display: block; font-size: 40px; font-weight: 700; color: #b9d9ee; line-height: 1; margin-bottom: 10px; }
.journey-detail h3 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.journey-detail p { font-size: var(--fs-body-sm); color: var(--color-body-alt); }
.journey-image { flex: 0 1 390px; min-width: 260px; }
.journey-image img { width: 100%; height: auto; display: block; }

/* ---- Info card row (Safety/GLP-1, Contact info cards) ---- */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.info-card { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--color-border-blue); border-radius: var(--radius-md); padding: 25px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.info-card .icon-wrap { flex: none; width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; }
/* The icon set is drawn in --color-accent, which is this tile's own background,
   so the glyphs render invisible unless flattened to white. */
.info-card .icon-wrap img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.info-card p { font-size: var(--fs-body-sm); color: var(--color-muted-3); font-weight: 500; }
.note-box { background: var(--color-bg-teal-50); border: 1px solid var(--color-border-teal); border-radius: 16px; padding: 32px; text-align: center; }
.note-box .note-label { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #0f2942; margin-bottom: 10px; }
.note-box p { font-size: var(--fs-small); font-style: italic; color: var(--color-muted-3); }

/* ---- Simple contact detail cards (Contact page) ---- */
.contact-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: -80px auto 60px; position: relative; z-index: 3; }
.contact-card { background: #fff; border: 1px solid var(--color-border-blue); border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(0,0,0,.05); padding: 32px; width: 280px; }
.contact-card .icon-wrap { width: 60px; height: 60px; border-radius: 50%; background: var(--color-bg-blue-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.contact-card h3 { font-size: var(--fs-h6); margin-bottom: 6px; }
.contact-card p { font-size: var(--fs-body); color: var(--color-body-alt); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-error { color: #dc2626; font-size: 12px; display: none; }
.form-success { display: none; background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; padding: 16px; border-radius: 8px; font-size: 14px; text-align: center; margin-bottom: 20px; }
.form-success.show { display: block; }

/* Neither a failure nor a booking — the visitor already has an account and is
   being pointed at the app. Blue so it reads as guidance, not as an error. */
.form-notice { display: none; background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; padding: 16px; border-radius: 8px; font-size: 14px; text-align: center; margin-bottom: 20px; }
.form-notice.show { display: block; }

/* ---- About: story with a portrait-led aside ----
   The aside previously held one short card beside a long article, leaving the
   whole lower-left empty. It now leads with the provider's portrait and sticks
   while the story scrolls, so the column stays occupied at any story length. */
.about-layout { display: flex; gap: 56px; align-items: flex-start; }
.about-aside { flex: 0 0 384px; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 24px; }

.philosophy-card {
  background: var(--color-bg-blue-50);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.philosophy-card h3 { font-size: var(--fs-h6); margin-bottom: 14px; color: var(--color-primary); }
/* Left-aligned: the previous centred paragraphs gave every line a ragged start. */
.philosophy-card p { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--color-body-alt); }
.philosophy-card p + p { margin-top: 12px; }

.about-story { flex: 1 1 auto; min-width: 320px; }
.about-story h2 { font-size: 38px; line-height: 1.25; margin-bottom: 24px; }
.about-story > p { font-size: var(--fs-lead); line-height: 1.7; margin-bottom: 18px; color: var(--color-body-soft); }
.about-credentials-head { font-size: var(--fs-h4); margin: 40px 0 20px; }

.credential-grid { display: grid; gap: 14px; }
.credential-grid li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.credential-grid .icon-wrap {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-bg-blue-50);
  display: flex; align-items: center; justify-content: center;
}
.credential-grid .icon-wrap img { width: 18px; height: 18px; }
.credential-grid p { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--color-body-alt); }

@media (max-width: 980px) {
  .about-layout { flex-direction: column; gap: 32px; }
  .about-aside { position: static; flex: none; width: 100%; }
    .philosophy-card { flex: 1 1 auto; }
  .about-story h2 { font-size: 30px; }
}

/* ==========================================================================
   Credentials / lists
   ========================================================================== */

.pill-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-tag { background: var(--color-bg-blue-100); border: 1px solid #cdeaf7; color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); padding: 6px 18px; border-radius: var(--radius-pill); }

/* ==========================================================================
   Six parts / Plan cards
   ========================================================================== */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ==========================================================================
   How it Works page (Figma node 119:69)
   Widths, spacing and type below are the design's own values at 1:1 px.
   Every rule is scoped to .plan-page so shared components keep their defaults.
   ========================================================================== */

/* The design lays each section out at its own content width rather than one
   global container, so the page container is widened and each section clamped. */
/* .container is border-box with 20px side padding, so each max-width carries
   +40px to leave the design's own content width inside it. */
.plan-page .container { max-width: 1560px; }
.plan-page .plan-w-hero    { max-width: 1520px; margin: 0 auto; }  /* card 1480 */
.plan-page .plan-w-steps   { max-width: 1180px; margin: 0 auto; }  /* 2 x 555 + 30 */
.plan-page .plan-w-involved{ max-width: 1390px; margin: 0 auto; }  /* 637 + 112 + 598 */
.plan-page .plan-w-parts   { max-width: 1444px; margin: 0 auto; }  /* 3 x 452 + 2 x 24 */
.plan-page .plan-w-journey { max-width: 1466px; margin: 0 auto; }  /* 418+454+490 + 2 x 32 */
.plan-page .plan-w-cta     { max-width: 1320px; margin: 0 auto; }  /* card 1280 */
.plan-page .plan-w-why     { max-width: 1444px; margin: 0 auto; }  /* 3-up card grid */

/* ---- Hero: 1480x543 card, 761 copy / 721 image ---- */
.plan-hero {
  display: flex;
  align-items: stretch;
  /* Definite height: with auto, the media image's intrinsic ratio drives the
     card past the design's 543px. */
  height: 543px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(23,52,53,.07);
  overflow: hidden;
}
.plan-hero-body {
  flex: 0 0 51.4%;
  align-self: center;
  padding: 0 32px 0 108px;
}
.plan-hero-body .eyebrow { font-size: var(--fs-body-sm); padding: 5px 16px; }
.plan-hero-body h1 { font-size: var(--fs-hero); line-height: 70px; margin: 24px 0 24px; }
.plan-hero-body p { font-size: var(--fs-lead); line-height: 33px; color: var(--color-body-soft); max-width: 622px; }
.plan-hero-media { flex: 0 0 48.6%; min-width: 0; }
.plan-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- How it Works: 2 x 555 cards, 60px round icon ---- */
.plan-page .plan-steps-head h2 { font-size: 44px; margin: 0 0 14px; }
.plan-page .plan-steps-head p { font-size: var(--fs-body-sm); color: var(--color-body-alt); }
.step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.step-card {
  display: flex;
  gap: 38px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(23,52,53,.07);
  padding: 40px 45px;
  min-height: 211px;
}
.step-card .icon-wrap {
  flex: none;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-bg-blue-50);
  display: flex; align-items: center; justify-content: center;
}
.step-card .icon-wrap img { width: 32px; height: 32px; }
.step-card h3 { font-size: var(--fs-body-lg); margin-bottom: 12px; }
.step-card p { font-size: var(--fs-body-sm); line-height: 26px; color: var(--color-body-alt); }

/* ---- We are 100% involved: 637x444 image left, 598 copy right ---- */
.plan-involved { display: flex; align-items: center; gap: 112px; }
.plan-involved-media { flex: 0 0 637px; max-width: 50%; }
.plan-involved-media img { width: 100%; height: auto; border-radius: var(--radius-md); }
.plan-involved-body { flex: 1 1 598px; }
.plan-involved-body h2 { font-size: var(--fs-h1); line-height: 1.1; margin-bottom: 26px; }
.plan-involved-body h2 strong { color: var(--color-primary); font-weight: 700; }
.plan-involved-body p { font-size: var(--fs-body); line-height: 1.75; color: var(--color-body-soft); }

/* ---- Six Parts: 3 x 452 cards, 24px gap, 33px padding ---- */
.plan-page .plan-parts-head h2 { font-size: 52px; margin: 0 0 44px; }
.plan-page .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan-page .plan-grid .card { padding: 33px; border-radius: var(--radius-md); }
.plan-page .plan-grid .card h3 { font-size: var(--fs-h5); line-height: 28px; margin-bottom: 20px; }
.plan-page .plan-grid .card p { font-size: var(--fs-body-sm); line-height: 26px; }

/* ---- Patient Journey: 418 list / 454 detail / 490 image, 32px gaps ---- */
.plan-page .plan-journey-head h2 { font-size: 42px; margin: 18px 0 0; }
.journey { display: flex; gap: 32px; align-items: flex-start; }
.journey-list { flex: 0 0 418px; display: flex; flex-direction: column; gap: 16px; }
.journey-list button {
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 25px;
  min-height: 84px;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--color-heading);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.journey-list button:hover { border-color: var(--color-border-accent); }
.journey-list button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(6,123,186,.22);
}
.journey-panel { flex: 0 1 454px; min-width: 300px; }
.journey-detail { background: var(--color-bg-blue-50); border-radius: 16px; padding: 40px 32px; }
.journey-detail .icon-wrap {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 34px;
}
/* The icon set is drawn in brand blue; flatten it to white for the blue tile. */
.journey-detail .icon-wrap img { width: 36px; height: 36px; filter: brightness(0) invert(1); }
.journey-step-num { display: block; font-size: 42px; font-weight: 700; color: #b9d9ee; line-height: 1; margin-bottom: 14px; }
.journey-detail h3 { font-size: 51.5px; line-height: 67px; margin-bottom: 18px; }
.journey-detail p { font-size: var(--fs-body); line-height: 1.6; color: var(--color-body-alt); }
.journey-image { flex: 0 1 490px; min-width: 260px; }
.journey-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

/* ---- CTA: 1280x542 card, 664 image / 616 copy ---- */
/* Definite card height: with height:auto the image's intrinsic ratio drives the
   card to 628px instead of the design's 542. */
.cta-banner--fit { min-height: 0; height: 542px; }
.cta-banner--fit img { flex: 0 0 51.9%; width: auto; height: 100%; object-fit: cover; }
.cta-banner--fit .cta-body { flex: 1 1 auto; padding: 0 60px 0 100px; }
.cta-banner--fit h2 { font-size: 42px; line-height: 53px; margin-bottom: 22px; }
.cta-banner--fit p { font-size: var(--fs-body); line-height: 1.7; max-width: 428px; margin-bottom: 34px; }
.cta-banner--fit .btn { padding: 19px 47px; font-size: var(--fs-body-sm); }

/* ---- Why It Works ----
   The design's copy-left / rows-right split. It was previously reworked into a
   3-up card grid because the left column ran out of content long before the
   right one did; that is handled here by centring the intro against the list,
   so the leftover space splits above and below it instead of piling up at the
   bottom. Matters more as rows are added — the repeater allows up to eight. */
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.35fr);
  gap: 72px;
  align-items: center;
}
.why-intro .eyebrow { font-size: 11px; padding: 4px 12px; }
.why-intro h2 { font-size: 46px; line-height: 1.14; margin: 18px 0 20px; color: var(--color-heading); }
.why-intro p { font-size: 16px; line-height: 1.75; color: var(--color-body-alt); max-width: 430px; }

.why-list { display: flex; flex-direction: column; }
.why-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: stretch;
  padding: 20px 24px;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}
/* The rule under the last row: every other row is closed off by the next one. */
.why-list .why-row:last-child { border-bottom-color: var(--color-border-light); }

.why-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-right: 30px;
}
/* Inset rather than a border-right, so the divider stops short of the
   horizontal rules instead of forming a continuous cross. */
.why-stat::after {
  content: "";
  position: absolute;
  right: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--color-border-light);
}
.why-metric {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-heading);
  white-space: nowrap;
  margin: 0;
  transition: color .18s ease;
}
.why-label { font-size: 12.5px; line-height: 1.4; color: var(--color-muted); margin: 5px 0 0; }

.why-body { display: flex; flex-direction: column; justify-content: center; padding-left: 30px; }
.why-body h3 {
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 6px;
  transition: color .18s ease;
}
.why-desc { font-size: 15px; line-height: 1.6; color: var(--color-body-alt); margin: 0; }

/* Highlighted row. The design shows one row picked out in blue; here that is
   the hover state, so no row is permanently dimmed against the others. */
.why-row:hover,
.why-row:focus-within {
  background: var(--color-bg-blue-50);
  border-top-color: var(--color-border-accent);
  border-bottom-color: var(--color-border-accent);
}
/* A row's bottom edge is the next row's top border, so colour that too or the
   highlight is left open at the bottom. */
.why-row:hover + .why-row,
.why-row:focus-within + .why-row { border-top-color: var(--color-border-accent); }
.why-row:hover .why-metric,
.why-row:hover .why-body h3,
.why-row:focus-within .why-metric,
.why-row:focus-within .why-body h3 { color: var(--color-primary); }

@media (max-width: 1100px) {
  .plan-hero { flex-direction: column; height: auto; }
  .plan-hero-body { flex: none; padding: 48px 32px; }
  .plan-hero-body h1 { font-size: 40px; line-height: 1.15; }
  .plan-hero-media { flex: none; height: 340px; }
  .step-grid { grid-template-columns: 1fr; }
  .plan-page .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-involved { flex-direction: column; gap: 40px; }
  .plan-involved-media { flex: none; max-width: 100%; }
  .journey { flex-wrap: wrap; }
  .journey-list, .journey-panel, .journey-image { flex: 1 1 100%; }
  .journey-detail h3 { font-size: 36px; line-height: 1.15; }
  /* Copy above the list rather than beside it — side by side, neither column
     has room left for the stat and its description to sit on one line. */
  .why-layout { grid-template-columns: 1fr; gap: 36px; }
  .why-intro h2 { font-size: 34px; line-height: 40px; }
  .why-intro p { max-width: none; }
  .cta-banner--fit { min-height: 0; height: auto; }
  .cta-banner--fit img { flex: none; width: 100%; height: auto; align-self: auto; }
  .cta-banner--fit .cta-body { padding: 32px; }
}

@media (max-width: 720px) {
  .plan-page .plan-grid { grid-template-columns: 1fr; }
  /* Stat above its description: 168px of stat column plus a divider leaves the
     title nowhere to go at this width. */
  .why-row { grid-template-columns: 1fr; padding: 18px 4px; }
  .why-stat { align-items: flex-start; text-align: left; padding-right: 0; margin-bottom: 10px; }
  .why-stat::after { display: none; }
  .why-body { padding-left: 0; }
  .why-metric { font-size: 26px; }
  /* Reclaim horizontal padding so calendar days are big enough to tap: the
     section, widget and pane together ate ~100px of a 360px screen. */
  .booking-section { padding: 32px 12px; }
  .calendar-pane, .slots-pane { padding: 22px 12px; }
  .cal-grid { gap: 2px; }
  /* Square cells came out 31px; a min height gives a usable target. */
  .cal-day { aspect-ratio: auto; min-height: 42px; font-size: 15px; border-radius: 8px; }
    /* Long words in highlighted headings ("transformation", "400 lb to 150 lb,")
     cannot fit on one line on a phone. */
  .accent-serif { white-space: normal; }
  .cta-banner h2 { font-size: 30px; }
  .cta-banner .cta-body { padding: 28px 20px; }
  .why-intro { padding-right: 0; }
  .plan-page .plan-parts-head h2 { font-size: 34px; }
  .plan-page .plan-steps-head h2 { font-size: 32px; }
}
/* ==========================================================================
   Newsletter / Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--color-border); background: #fff; padding: 56px 0 20px; }
.footer-grid { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand { flex: 1 1 320px; max-width: 340px; }
.footer-brand hr { border: none; border-top: 1px solid var(--color-border); margin: 18px 0 16px; }
.footer-brand .brand-name { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h6); color: var(--color-heading); margin-bottom: 8px; }
.footer-brand p { font-size: 13.5px; color: var(--color-body-alt); margin-bottom: 20px; }
.footer-col h4 { font-family: 'Manrope', var(--font-sans); font-weight: 700; font-size: var(--fs-small); color: var(--color-heading); margin-bottom: 18px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--color-body-alt); padding: 6px 0; }
.footer-col a:hover { color: var(--color-primary); }
.footer-contact .label { font-weight: 700; font-size: 12px; letter-spacing: .88px; color: #7b8787; margin-bottom: 6px; }
.footer-contact p { font-size: 13.5px; color: var(--color-body-alt); margin-bottom: 4px; }
.footer-contact a { color: var(--color-primary); font-size: 13.5px; }
.footer-bottom { border-top: 1px solid var(--color-border); padding-top: 20px; text-align: center; font-size: 12.5px; color: var(--color-body-alt); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.gap-md { gap: 24px; }
.rounded-img { border-radius: var(--radius-md); overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .split-hero { flex-direction: column; }
  .split-hero-media { flex: none; height: 320px; width: 100%; }
  .split-hero--provider { height: auto; }
  .split-hero--provider .split-hero-media { flex: none; }
  .split-hero-body { padding: 40px; }
  .booking-widget { flex-direction: column; }
  .calendar-pane { border-right: none; border-bottom: 1px solid var(--color-border); }
  .journey { flex-direction: column; }
  .journey-list { flex: none; }
  .journey-image { flex: none; height: 280px; }
  .cta-banner { flex-direction: column; }
  .cta-banner img { flex: none; height: 260px; width: 100%; }
  .cta-banner .before-after { flex: none; width: 100%; height: 260px; }
  .cta-banner .before-after img { height: 100%; }
  /* The frame is ~40% of its desktop height here, but the pill is not, so at
     full size it sits across the subject's face. Scaled down and tucked into
     the headroom instead. */
  .ba-label { top: 10px; padding: 4px 12px; font-size: 10px; }
  .split-feature { flex-direction: column; }
  .split-feature .media-col { width: 100%; }
  .quote-block { flex-direction: column; }
  .quote-block img { flex: none; width: 100%; height: 260px; }
}

@media (max-width: 900px) {
  .main-nav-list, .header-cta .btn { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .main-nav-list {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    gap: 8px;
  }
  .site-header.nav-open .main-nav-list a { padding: 12px 16px; }
  .site-header.nav-open .header-cta .btn { display: inline-flex; }
  .site-header.nav-open .header-cta { position: absolute; top: calc(100% + 200px); left: 16px; right: 16px; }
}

@media (max-width: 768px) {
  .hero-content { padding: 40px 24px; max-width: 100%; }
  .hero-title { font-size: 38px; }
  .section-head h2, .statement h2 { font-size: 32px; }
  .card-grid, .feature-list, .plan-grid { grid-template-columns: 1fr; }
    .footer-grid { flex-direction: column; gap: 32px; }
  .contact-cards { margin-top: 24px; flex-direction: column; align-items: center; }
  .split-hero-body h1 { font-size: 40px; }
  .cta-banner .cta-body { padding: 32px; }
  .section { padding: 48px 0; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-title { font-size: 48px; }
}

@media (max-width: 430px) {
  /* The nowrap tagline runs under the hamburger below ~414px; tablets and
     larger phones keep it. */
  .logo-tagline { display: none; }
}

/* ==========================================================================
   Booking confirmation modal
   ========================================================================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 52, 53, .55);
  backdrop-filter: blur(2px);
  animation: modal-fade .18s ease-out;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 40px 34px;
  box-shadow: 0 24px 70px rgba(23, 52, 53, .28);
  animation: modal-rise .22s cubic-bezier(.2, .7, .3, 1);
}
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px); } }

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  font-size: 26px;
  line-height: 1;
}
.modal-close:hover { background: var(--color-bg-soft); color: var(--color-heading); }

.modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
/* The icon set is drawn in brand blue; recolour it green for the success state. */
.modal-icon img {
  width: 30px; height: 30px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(64%) saturate(468%) hue-rotate(107deg) brightness(94%) contrast(88%);
}

.modal-dialog h2 { font-size: var(--fs-h4); margin-bottom: 8px; }
.modal-lead { font-size: var(--fs-body-sm); color: var(--color-body-alt); margin-bottom: 24px; }

.modal-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.modal-steps li { display: flex; gap: 14px; align-items: flex-start; }
.modal-step-num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-bg-blue-50);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.modal-steps h3 { font-size: var(--fs-body-sm); margin-bottom: 2px; color: var(--color-heading); }
.modal-steps p { font-size: var(--fs-small); line-height: 1.55; color: var(--color-body-alt); }

.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.store-badges a { display: block; border-radius: 9px; transition: transform .15s ease, opacity .15s ease; }
.store-badges a:hover { transform: translateY(-2px); opacity: .9; }
.store-badges img { display: block; height: 50px; width: auto; }

@media (max-width: 560px) {
  .modal { padding: 12px; }
  .modal-dialog { padding: 32px 22px 26px; }
  .store-badges a, .store-badges img { width: 100%; }
  .store-badges img { height: auto; }
}

/* ==========================================================================
   How Patients Can Enroll  (Figma node 239:684)
   Four-card bento grid: 12 cols on desktop, stacking on smaller screens.
   ========================================================================== */
.enroll-section { border-top: 1px solid var(--color-border); background: #fff; }
.enroll-head { text-align: center; margin-bottom: 80px; }
.enroll-head h2 {
  font-size: 52px;
  line-height: 1.01;
  color: var(--color-heading);
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.enroll-mark {
  background: var(--color-coral);
  color: #fff;
  font-weight: 700;
  font-size: 43px;
  border-radius: 3px;
  padding: 5px 14px;
  display: inline-block;
}
.enroll-head p {
  max-width: 896px;
  margin: 22px auto 0;
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: 500;
  color: var(--color-body-soft);
}

.enroll-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  max-width: 1024px;
  margin: 0 auto;
}
.enroll-card {
  background: var(--color-coral-tint);
  border: 1px solid var(--color-coral);
  border-radius: 24px;
  padding: 33px;
  min-width: 0;
}
.enroll-card--scan { grid-column: 1 / span 12; display: flex; align-items: center; justify-content: space-between; gap: 33px; min-height: 280px; }
.enroll-card--plan { grid-column: 1 / span 7; }
.enroll-card--connected { grid-column: 8 / span 5; display: flex; flex-direction: column; }
.enroll-card--app { grid-column: 1 / span 12; position: relative; overflow: hidden; min-height: 454px; display: flex; align-items: center; }

/* ---- shared card furniture ---- */
.enroll-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.enroll-meta img { width: 48px; height: 48px; flex: none; }
.enroll-badge {
  background: var(--color-coral-soft);
  color: var(--color-coral);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .35px;
  line-height: 20px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Step 2's glyph ships without its container, so the coral disc is drawn here. */
.enroll-meta .enroll-meta-disc {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--color-coral);
  display: flex; align-items: center; justify-content: center;
}
.enroll-meta-disc img { width: 30px; height: 30px; }

.enroll-card h3 { font-size: 32px; line-height: 32px; font-weight: 500; color: var(--color-slate-900); margin: 4px 0 12px; }
.enroll-card > p, .enroll-copy > p { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-slate-500); }

/* ---- card 1: QR ---- */
.enroll-copy { flex: 1 1 auto; min-width: 0; }
.enroll-qr {
  flex: none;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  text-align: center;
}
.enroll-qr img { width: 155px; height: 155px; display: block; border: 3px solid var(--color-coral); }
.enroll-qr span { display: block; margin-top: 18px; font-size: var(--fs-small); font-weight: 600; line-height: 20px; color: var(--color-coral); }

/* ---- card 2: plan preview ---- */
.enroll-shot {
  position: relative;
  background: #fff;
  border: 1px solid #f9fafb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  margin-bottom: 20px;
}
.enroll-shot > img { width: 100%; height: auto; display: block; }
.enroll-shot-note {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(2px);
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 17px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.enroll-shot-note h4 { font-size: var(--fs-small); font-weight: 700; line-height: 20px; color: var(--color-slate-900); }
.enroll-shot-note p { font-size: var(--fs-xs); line-height: 16px; color: var(--color-slate-500); }
.enroll-shot-note span {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-coral-pale);
  display: flex; align-items: center; justify-content: center;
}
.enroll-shot-note span img { width: 20px; height: 20px; }

/* ---- card 3: checklist ---- */
.enroll-list { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 32px; }
.enroll-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 17px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 20px;
  color: var(--color-slate-900);
}
.enroll-list li::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--color-coral) url("../assets/icons/icon-check-sm.svg") center / 12px 12px no-repeat;
}

/* ---- card 4: app promo ---- */
.enroll-app-copy { position: relative; z-index: 1; width: 440px; max-width: 100%; }
.enroll-app-copy h2 { font-family: var(--font-display); font-size: 48px; line-height: 54px; color: #454545; font-weight: 400; }
.enroll-app-copy h2 em { display: block; font-style: italic; color: var(--color-coral); }
.enroll-app-copy > p { margin-top: 32px; font-size: 24px; line-height: 1.35; font-weight: 600; color: var(--color-body-soft); }
.enroll-app-copy h4 { margin: 32px 0 14px; font-family: var(--font-label); font-size: 25px; font-weight: 600; color: #191919; }
.enroll-app-media {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .enroll-card--plan, .enroll-card--connected { grid-column: 1 / span 12; }
  .enroll-card--app { display: block; min-height: 0; }
  .enroll-app-copy { width: 100%; }
  .enroll-app-media { position: static; height: auto; width: 100%; margin-top: 24px; }
}

@media (max-width: 720px) {
  .enroll-head h2 { font-size: 34px; gap: 10px; }
  .enroll-mark { font-size: 28px; }
  .enroll-head { margin-bottom: 44px; }
  .enroll-card { padding: 24px; border-radius: 18px; }
  .enroll-card--scan { flex-direction: column; align-items: flex-start; gap: 24px; min-height: 0; }
  .enroll-qr { align-self: center; }
  .enroll-card h3 { font-size: 26px; line-height: 30px; }
  .enroll-app-copy h2 { font-size: 34px; line-height: 40px; }
  .enroll-app-copy > p { font-size: 18px; margin-top: 20px; }
  .enroll-app-copy h4 { font-size: 20px; }
}

/* ==========================================================================
   Pricing page  (Figma node 249:1429)
   ========================================================================== */
.pricing-hero {
  max-width: 1480px;
  margin: 20px auto 0;
  border-radius: 30px;
  padding: 44px 30px;
  text-align: center;
  filter: drop-shadow(0 4px 30px rgba(25,49,57,.10));
  background: #fff;
}
.pricing-hero h1 {
  font-size: 52px;
  line-height: 1.01;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.pricing-hero p {
  max-width: 586px;
  margin: 11px auto 0;
  font-size: var(--fs-body-lg);
  line-height: 34px;
  font-weight: 500;
  color: var(--color-body);
}

/* ---- consultation options ---- */
.plans-panel { background: var(--color-bg-blue-50); border-radius: 20px; padding: 80px 24px; }
.plans-head { margin-bottom: 40px; }
.plans-eyebrow {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 8px;
}
.plans-head h2 { font-size: 38px; font-weight: 500; color: var(--color-slate-900); margin: 0; }

.plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 896px;
  margin: 0 auto;
  align-items: stretch;
}
.plan-card {
  position: relative;
  flex: 0 1 432px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 24px;
  padding: 41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.plan-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-sky-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.plan-icon img { width: 32px; height: 32px; }

.plan-card h3 { font-size: var(--fs-h6); font-weight: 500; line-height: 32px; color: var(--color-slate-900); margin-bottom: 8px; }
.plan-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 32px; }
.plan-price strong { font-size: 48px; line-height: 48px; font-weight: 700; color: var(--color-slate-900); }
.plan-price span { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-slate-500); }

.plan-list { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; }
.plan-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-body-sm);
  line-height: 24px;
  color: var(--color-slate-900);
}
.plan-list li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: url("../assets/icons/icon-tick.svg") center / contain no-repeat;
}
.plan-note { width: 100%; text-align: left; margin: 24px 0 32px; font-size: var(--fs-small); line-height: 20px; color: var(--color-slate-500); }
.plan-note--em { font-style: italic; font-weight: 500; }

.plan-btn {
  margin-top: auto;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-pill);
  padding: 13px 25px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: var(--color-sky);
  background: #fff;
  transition: background .15s ease, color .15s ease;
}
.plan-btn:hover { background: var(--color-sky-50); }

/* ---- medication comparison table ---- */
.price-head { margin-bottom: 52px; }
.plans-pill {
  display: inline-block;
  background: var(--color-bg-blue-50);
  color: var(--color-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.price-head h2 {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.25;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
}
.price-head p { max-width: 672px; margin: 20px auto 0; font-size: var(--fs-body); line-height: 28px; color: var(--color-slate-500); }

.price-table-wrap {
  max-width: 1024px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.price-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.price-table thead th {
  background: var(--color-bg-blue-50);
  padding: 24px 32px;
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .8px;
  color: var(--color-slate-900);
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}
.price-table thead th:first-child { text-align: left; }
.price-table thead th:not(:first-child) { color: var(--color-sky); }

.price-group th {
  background: rgba(240,249,255,.5);
  padding: 13px 32px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-slate-500);
  text-align: left;
  border-top: 1px solid #f3f4f6;
}
.price-table tbody tr:not(.price-group) { border-bottom: 1px solid #f9fafb; }
.price-table tbody tr:last-child { border-bottom: none; }
.price-table tbody th[scope="row"] {
  padding: 32px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 20px;
  color: var(--color-slate-900);
  text-align: left;
}
.price-cell { padding: 20px 32px; text-align: center; }
.price-amount { display: block; font-size: var(--fs-body-sm); font-weight: 700; line-height: 24px; color: var(--color-slate-900); }
.price-strength { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 16px; color: var(--color-slate-500); }
.price-cell--empty { color: var(--color-slate-500); font-size: var(--fs-small); }

@media (max-width: 860px) {
  .pricing-hero h1 { font-size: 34px; gap: 10px; }
  .pricing-hero { padding: 32px 20px; border-radius: 20px; }
  .plans-panel { padding: 44px 16px; }
  .plans-head h2 { font-size: 28px; }
  .plan-grid { gap: 24px; }
  .plan-card { padding: 28px; }
}

/* ---- Blog ----------------------------------------------------------------
   Listing cards and the post page. Kept to the same rhythm as the rest of the
   site: same card radius, same body measure, same accent for links. */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }

.blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border-soft);
  border-radius: 14px; overflow: hidden;
}
.blog-card-media { display: block; aspect-ratio: 16 / 9; background: #eef4f8; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #e6f1f8, #d3e6f3);
}
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.blog-card-body h2 { font-size: 22px; line-height: 1.3; margin: 0; }
.blog-card-body h2 a { color: var(--color-slate-900); text-decoration: none; }
.blog-card-body h2 a:hover { color: var(--color-primary); }
.blog-card-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-slate-500); }

.blog-date { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-slate-500); }
.blog-more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.blog-more:hover { text-decoration: underline; }

.blog-empty { text-align: center; color: var(--color-slate-500); padding: 40px 0; }

.blog-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; font-size: 15px; }
.blog-pager a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.blog-pager span { color: var(--color-slate-500); }

/* ---- a single post ---- */
.blog-post { max-width: 760px; margin: 0 auto; }
.blog-back { margin-bottom: 18px; }
.blog-back a { color: var(--color-primary); text-decoration: none; font-size: 15px; }
.blog-post-head { margin-bottom: 28px; }
.blog-post-head h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 10px 0 0; }
.blog-lede { margin-top: 14px; font-size: 19px; line-height: 1.6; color: var(--color-slate-500); }
.blog-post-image { width: 100%; height: auto; border-radius: 14px; margin-bottom: 32px; display: block; }

/* The body is the only place editor-written markup is rendered, so the tags it
   is allowed to use all need a style. */
.blog-body { font-size: 17px; line-height: 1.75; color: var(--color-slate-900); }
.blog-body p { margin: 0 0 20px; }
.blog-body h3 { font-size: 24px; margin: 34px 0 12px; }
.blog-body h4 { font-size: 19px; margin: 28px 0 10px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px; padding-left: 22px; }
.blog-body li { margin-bottom: 8px; }
.blog-body a { color: var(--color-primary); }
.blog-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-primary);
  color: var(--color-slate-500); font-style: italic;
}
.blog-cta { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--color-border-soft); }

@media (max-width: 640px) {
  .blog-post-head h1 { font-size: 32px; }
  .blog-lede { font-size: 17px; }
}

/* ==========================================================================
   Checkout (step 2 of booking) and the confirmation page
   ========================================================================== */
.checkout-shell { max-width: 1100px; margin: 40px auto 60px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); gap: 28px; margin-top: 36px; align-items: start; }

.checkout-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-booking);
  padding: 28px 30px;
}
.checkout-panel + .checkout-panel { margin-top: 18px; }
.checkout-panel--done { background: #fbfdff; box-shadow: none; }

.checkout-panel-title { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h5); font-weight: 600; color: var(--color-primary); }
.checkout-step {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.checkout-step.is-done { background: #059669; }

/* The shared booking-form rules cover inputs; selects need the same shape. */
.checkout-form { margin-top: 20px; }
.checkout-form select {
  width: 100%;
  border: 1px solid rgba(193,199,211,.5);
  border-radius: 6px;
  padding: 11px 13px;
  font-size: var(--fs-body-sm);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.booking-form div.error select { border-color: #dc2626; }
.checkout-form input[readonly] { background: var(--color-bg-soft); color: var(--color-body-alt); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field-note { font-size: 12px; color: var(--color-muted); margin-top: 4px; }

.checkout-summary { font-size: var(--fs-body-sm); color: var(--color-body-alt); margin: 12px 0 16px; line-height: 1.6; }
.checkout-panel--done .btn { width: auto; }

.checkout-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--color-muted); margin-top: 12px; }
.checkout-secure img { opacity: .6; }

/* Order summary */
.checkout-aside {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 26px 24px;
  position: sticky;
  top: 96px;
}
.checkout-aside h3 { font-size: var(--fs-h6); color: var(--color-heading); margin-bottom: 18px; }
.checkout-lines { display: flex; flex-direction: column; gap: 14px; }
.checkout-lines div { display: flex; flex-direction: column; gap: 2px; }
.checkout-lines dt { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--color-muted); }
.checkout-lines dd { font-size: var(--fs-body-sm); color: var(--color-heading); }
.checkout-lines .muted { color: var(--color-muted); font-size: 13px; }
.checkout-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-body-sm); color: var(--color-body-alt);
}
.checkout-total strong { font-size: 26px; color: var(--color-primary); }
.checkout-note { font-size: 12px; line-height: 1.6; color: var(--color-muted); margin-top: 14px; }

/* ---- Confirmation page ---- */
.confirm-shell {
  max-width: 620px;
  margin: 60px auto 80px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow-booking);
  padding: 46px 40px 38px;
  text-align: center;
}
.confirm-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #ecfdf5;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.confirm-icon img { width: 34px; height: 34px; }
.confirm-shell h1 { font-size: var(--fs-h3); margin-bottom: 10px; }
.confirm-lead { font-size: var(--fs-body-sm); color: var(--color-body-alt); margin-bottom: 28px; line-height: 1.6; }
.confirm-steps { text-align: left; margin-bottom: 28px; }
.confirm-note { font-size: 13px; color: var(--color-muted); margin: 18px 0 22px; line-height: 1.6; }
.confirm-shell .btn { width: fit-content; margin: 0 auto; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-aside { position: static; order: -1; }
}
@media (max-width: 560px) {
  .checkout-shell { padding: 30px 16px; }
  .checkout-panel { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }
  .confirm-shell { padding: 34px 22px 28px; margin: 34px auto 50px; }
}

/* ---- Time slots in the booking widget ---- */
.slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
  /* Long days run to a couple of dozen slots; scroll them rather than pushing
     the name and email fields off the bottom of the widget. */
  max-height: 196px;
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 2px;
}
.slot-btn {
  border: 1px solid rgba(193,199,211,.6);
  background: #fff;
  border-radius: 8px;
  padding: 9px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.slot-btn:hover { background: var(--color-bg-blue-50); border-color: var(--color-primary); }
.slot-btn.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.slot-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 560px) {
  .slot-list { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 168px; }
}

/* ==========================================================================
   Five pillars of lasting change (home)
   Reuses the coral badge from the enrolment section — same accent, same file.
   ========================================================================== */
.pillars-head { text-align: center; margin-bottom: 56px; }
.pillars-head .enroll-badge { display: inline-block; margin-bottom: 18px; }
.pillars-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--color-heading);
  /* The highlight is a filled box on its own baseline, so the line needs room
     around it — without this the coral block collides with the line above. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
}
.pillars-mark {
  font-family: var(--font-display);
  font-weight: 400;
  background: var(--color-coral);
  color: #fff;
  border-radius: 4px;
  padding: 2px 16px 6px;
  display: inline-block;
}

/* Five across at full width. They hold a short title and a few lines of copy,
   so they stay readable well below the four-column grid used elsewhere. */
.pillars-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pillar-card {
  background: #fff;
  border-radius: 14px;
  /* The coral rule along the top edge is the card's defining mark. A border
     rather than a pseudo-element so it can never drift out of the radius. */
  border-top: 3px solid var(--color-coral);
  box-shadow: var(--shadow-card);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
}
.pillar-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-coral-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex: none;
}
.pillar-icon img { width: 44px; height: 44px; display: block; }
.pillar-card h3 {
  font-size: var(--fs-h5);
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 12px;
}
.pillar-card p {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-body-alt);
  margin: 0;
}

@media (max-width: 1100px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pillars-head h2 { font-size: 30px; }
  .pillars-mark { padding: 1px 12px 4px; }
  .pillars-head { margin-bottom: 36px; }
  .pillar-card { padding: 22px 18px 26px; }
  .pillar-icon { width: 60px; height: 60px; margin-bottom: 16px; }
  .pillar-icon img { width: 36px; height: 36px; }
}
@media (max-width: 460px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ---- "The Six Parts of Your Plan" (plan page) ----
   Its own class rather than .plan-grid. The pricing page uses that name for a
   centred, 896px-wide flex row of two cards, and being defined later in this
   file it was winning here — so these six cards were laid out as that row
   instead of a grid. The .plan-page-scoped rules meant to cover this never
   applied either: nothing on the page carries a .plan-page class.
   Card sizing below is the design's own, lifted from those dormant rules. */
.parts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.parts-grid .card { padding: 33px; border-radius: var(--radius-md); }
.parts-grid .card h3 { font-size: var(--fs-h5); line-height: 28px; margin-bottom: 20px; }
.parts-grid .card p { font-size: var(--fs-body-sm); line-height: 26px; }

@media (max-width: 1100px) { .parts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .parts-grid { grid-template-columns: 1fr; gap: 16px; }
                             .parts-grid .card { padding: 26px; } }

/* ==========================================================================
   How GLP-1 Works (glp1-therapy) — three effects around a central marker
   ========================================================================== */
.glp-works-head { text-align: center; max-width: 720px; margin: 0 auto; }
.glp-works-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-heading);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 14px;
}
.glp-mark {
  font-family: var(--font-serif);
  font-weight: 700;
  background: var(--color-accent);
  color: #fff;
  border-radius: 3px;
  padding: 2px 18px 6px;
  display: inline-block;
}
.glp-works-head p { font-size: var(--fs-body); line-height: 1.65; color: var(--color-body-alt); margin-top: 18px; }

/* Top node centred over the row below it; the other two flank the core. */
.glp-orbit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 20px;
  max-width: 940px;
  margin: 60px auto 0;
  justify-items: center;
}
.glp-node--top   { grid-column: 2; grid-row: 1; }
.glp-node--left  { grid-column: 1; grid-row: 2; }
.glp-core        { grid-column: 2; grid-row: 2; }
.glp-node--right { grid-column: 3; grid-row: 2; }

/* Decorative only. An ellipse rather than a true circle: the nodes are placed
   by the grid, so their spacing follows the text rather than a fixed radius,
   and a circle would only touch them at one particular column width. */
.glp-ring {
  position: absolute;
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  width: 62%;
  height: calc(100% - 200px);
  min-height: 180px;
  border: 1px dashed var(--color-border-light);
  border-radius: 50%;
  pointer-events: none;
}

.glp-node { position: relative; max-width: 300px; text-align: center; }
.glp-icon {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 6px 22px rgba(23, 52, 53, .06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.glp-icon img { width: 48px; height: 48px; display: block; }
.glp-num {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sits on the rim, so it needs its own edge to read against the circle. */
  border: 3px solid #fff;
}
.glp-node h3 { font-size: var(--fs-h5); font-weight: 700; color: var(--color-heading); margin: 0 0 10px; }
.glp-node p { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--color-body-alt); margin: 0; }

.glp-core {
  align-self: center;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: var(--color-coral-tint);
  background: #f8fdff;
  border: 1px solid var(--color-border-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.glp-core strong { font-size: 22px; font-weight: 700; color: var(--color-accent); line-height: 1.2; }
.glp-core span { font-size: var(--fs-body-sm); color: var(--color-accent); margin-top: 4px; }

.glp-callout {
  max-width: 1060px;
  margin: 72px auto 0;
  background: var(--color-bg-blue-50);
  border: 1px solid var(--color-border-blue);
  border-left: 5px solid var(--color-accent);
  border-radius: 12px;
  padding: 30px 44px;
  text-align: center;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-accent);
}

@media (max-width: 900px) {
  /* The ring only reads as a ring when the three nodes surround it, so once
     they stack it goes rather than floating behind a single column. */
  .glp-ring { display: none; }
  .glp-orbit { grid-template-columns: 1fr; gap: 44px; max-width: 460px; }
  .glp-node--top, .glp-node--left, .glp-node--right, .glp-core {
    grid-column: 1;
    grid-row: auto;
  }
  .glp-node { max-width: none; }
  .glp-works-head h2 { font-size: 32px; }
  .glp-callout { margin-top: 48px; padding: 24px 24px; font-size: var(--fs-body); }
}

/* ---- Nobese member discount, inside the consultation card ---- */
.member-offer {
  width: 100%;
  text-align: left;
  background: var(--color-coral-tint);
  background: #fff6f3;
  border: 1px solid var(--color-coral-soft);
  border-radius: 10px;
  padding: 18px 18px 16px;
  margin-bottom: 28px;
}
.member-offer h4 {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-coral);
  margin: 0 0 8px;
}
.member-offer p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-slate-500);
  margin: 0 0 14px;
}
.member-offer strong { color: var(--color-slate-900); font-weight: 700; }
.member-brand { color: var(--color-coral); font-weight: 600; }

.member-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-coral-soft);
  border-radius: 8px;
  padding: 10px 14px;
}
.member-code-text { display: flex; flex-direction: column; min-width: 0; }
.member-code-label { font-size: var(--fs-xs); color: var(--color-slate-500); line-height: 1.4; }
.member-code-text strong {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-slate-900);
  letter-spacing: .5px;
  /* A code is worth nothing half-shown, so let it wrap rather than truncate. */
  overflow-wrap: anywhere;
}
.member-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: var(--fs-small);
  font-family: inherit;
  color: var(--color-coral);
  cursor: pointer;
}
.member-copy:hover { text-decoration: underline; }
.member-copy img { width: 16px; height: 16px; flex: none; }
.member-copy.is-copied { color: #059669; text-decoration: none; }

@media (max-width: 460px) {
  .member-code { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- Video thumbnail in a CTA banner, and the modal it opens ---- */
.video-thumb {
  /* Takes the place of the banner's <img>, so it inherits that half of the
     split rather than sitting inside it. */
  flex: 0 0 50%;
  min-width: 0;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.video-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.video-thumb:hover > img { transform: scale(1.03); }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Kept above the 44px minimum touch target, but no bigger — it is a cue to
     press, not the subject of the picture. */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(6, 123, 186, .92);
  box-shadow: 0 6px 22px rgba(23, 52, 53, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
/* Nudged right: the triangle's visual centre sits left of its bounding box. */
/* Inline SVG, not an <img>: nothing that styles images in these blocks
   can reach it, and it takes its colour from the button. */
.video-play { color: #fff; }
.video-play svg { width: 13px; height: 14px; display: block; margin-left: 2px; }
.video-thumb:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--color-primary); }
.video-thumb:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

.modal-dialog--video {
  max-width: 960px;
  padding: 0;
  background: #000;
  overflow: visible;
  line-height: 0;
}
.modal-dialog--video video {
  width: 100%;
  max-height: calc(100vh - 120px);
  display: block;
  border-radius: var(--radius-lg);
}
.modal-close--video {
  top: -46px;
  right: 0;
  color: #fff;
  background: rgba(255, 255, 255, .14);
}
.modal-close--video:hover { background: rgba(255, 255, 255, .28); color: #fff; }

@media (max-width: 720px) {
  .video-play { width: 48px; height: 48px; }
  .video-play svg { width: 11px; height: 12px; }
  /* No room above the dialog on a phone, so the close button sits on the video. */
  .modal-close--video { top: 8px; right: 8px; background: rgba(0, 0, 0, .5); }
}

/* The story block's video thumbnail takes the place its <img> held: the
   .quote-block img rule sized that image, and the button is now the flex child. */
.quote-block .video-thumb { flex: 0 0 45%; height: 420px; }
.quote-block .video-thumb > img { height: 100%; }
@media (max-width: 720px) {
  .quote-block .video-thumb { flex: none; width: 100%; height: 300px; }
}

/* ---- Blog: coming soon ----
   Shown while $blog_coming_soon is on in blog.php, and as the empty state once
   it is off, so the page is never a bare line of text. */
.blog-soon {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 56px 44px 48px;
}
.blog-soon-badge {
  display: inline-block;
  background: var(--color-bg-blue-100);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .4px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.blog-soon h2 { font-size: var(--fs-h4); color: var(--color-heading); margin-bottom: 14px; }
.blog-soon p { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--color-body-alt); margin-bottom: 28px; }
.blog-soon .btn { width: fit-content; margin: 0 auto; }

@media (max-width: 560px) {
  .blog-soon { padding: 38px 22px 34px; }
  .blog-soon h2 { font-size: var(--fs-h5); }
}

/* ==========================================================================
   Getting Started With Nobese (home) — Figma 239:684
   Replaces the old four-step "How Patients Can Enroll" grid. Reuses the
   section shell, the coral heading chip (.enroll-mark) and the section's
   existing images; every colour below is an existing token that already
   matched the design's hex exactly.
   ========================================================================== */
.gs-grid {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  /* 586 / 413 in the design, with a 24px gutter. */
  grid-template-columns: 1.419fr 1fr;
  gap: 24px;
}
.gs-card {
  background: var(--color-coral-tint);
  border: 1px solid var(--color-coral);
  border-radius: 24px;
  padding: 33px;
}
.gs-card--wide { grid-column: 1 / -1; }
.gs-card h3 {
  font-size: 32px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-slate-900);
  margin: 0 0 12px;
}
.gs-card > p {
  font-size: var(--fs-body-sm);
  line-height: 24px;
  color: var(--color-slate-500);
  margin: 0;
}

/* ---- Find your path: app shot with a caption panel over it ---- */
.gs-shot {
  position: relative;
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid #f9fafb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.gs-shot > img { width: 100%; height: auto; display: block; }
.gs-shot-note {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(2px);
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.gs-shot-note > span { display: flex; flex-direction: column; min-width: 0; }
.gs-shot-note strong { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--color-slate-900); }
.gs-shot-note span span { font-size: 12px; line-height: 16px; color: var(--color-slate-500); }
.gs-shot-spark {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-coral-pale);
  display: flex; align-items: center; justify-content: center;
}
.gs-shot-spark img { width: 20px; height: 20px; display: block; }

/* ---- Sustainable change: checklist ---- */
.gs-card--change > p { margin-bottom: 32px; }
.gs-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gs-checks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 17px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-slate-900);
}
.gs-checks img {
  flex: none;
  width: 20px; height: 20px;
  padding: 4px;
  border-radius: 4px;
  background: var(--color-coral);
  /* The exported glyph is a 12px white tick; the coral square is the padding
     around it, so the box and the mark stay independently sized. */
  box-sizing: border-box;
}

/* ---- Ready to get started ---- */
.gs-card--qr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.gs-qr-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 69px;
  color: #454545;
  margin: 0 0 6px;
}
.gs-qr-copy h2 em { display: block; font-style: italic; color: var(--color-coral); }
.gs-qr-copy p {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-body-soft);
  max-width: 406px;
  margin: 0;
}
.gs-qr-panel {
  flex: none;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 19px;
  padding: 29px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  text-align: center;
}
.gs-qr-panel img {
  width: 196px;
  height: 196px;
  display: block;
  border: 3.5px solid var(--color-coral);
  object-fit: contain;
}
.gs-qr-panel span {
  display: block;
  margin-top: 27px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-coral);
}

@media (max-width: 1024px) {
  .gs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gs-card { padding: 24px; border-radius: 18px; }
  .gs-card h3 { font-size: 26px; line-height: 30px; }
  .gs-card--qr { flex-direction: column; align-items: flex-start; gap: 28px; }
  .gs-qr-copy h2 { font-size: 40px; line-height: 46px; }
  .gs-qr-copy p { font-size: 18px; }
  .gs-qr-panel { align-self: center; padding: 22px; }
  .gs-qr-panel img { width: 160px; height: 160px; }
  .gs-shot-note { left: 10px; right: 10px; bottom: 10px; padding: 12px; }
}

/* Landing on #story from the homepage must clear the sticky header, the same
   way #booking does, or the heading tucks underneath it. */
#story { scroll-margin-top: 88px; }

/* The "booking is coming soon" panel shown in place of the calendar while
   BOOKING_ENABLED is off. Same shape as the blog's coming-soon panel. */
.booking-soon {
  max-width: 620px;
  margin: 36px auto 0;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 48px 40px 42px;
}
.booking-soon-badge {
  display: inline-block;
  background: var(--color-bg-blue-100);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .4px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.booking-soon h3 { font-size: var(--fs-h4); color: var(--color-heading); margin-bottom: 12px; }
.booking-soon p { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--color-body-alt); margin-bottom: 26px; }
.booking-soon .btn { width: fit-content; margin: 0 auto; }

@media (max-width: 560px) {
  .booking-soon { padding: 32px 20px 28px; }
  .booking-soon h3 { font-size: var(--fs-h5); }
}