/* ============================================================
   vetclinic.info — directory.css
   Shared styles for all /us/... directory pages.
   Extends styles.css — do not import styles.css here,
   both are loaded via <link> tags in each page.
   ============================================================ */

/* ---------- Page header ---------- */
.dir-header {
  background: var(--white);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--gray-200);
}

.dir-header__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
  display: block;
}

.dir-header h1 {
  margin-bottom: 16px;
}

.dir-header__intro {
  font-size: 18px;
  color: var(--gray-500);
  line-height: 1.7;
  max-width: 640px;
}

/* PROMOTED badge in dir-header */
.promoted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* ---------- Status bar ---------- */
.status-bar {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 500;
  margin-bottom: 32px;
}

.status-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-bar__dot--filled { background: var(--teal); }
.status-bar__dot--open   { background: var(--gray-300, #CBD5E1); }

/* ---------- Specialty grid (city pages) ---------- */
.specialty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}

.specialty-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}
.specialty-card:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(13,148,136,0.08);
}

.specialty-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.specialty-card__status {
  font-size: 13px;
  font-weight: 500;
}
.specialty-card__status--open   { color: var(--teal); }
.specialty-card__status--filled { color: var(--gray-500); }

.specialty-card__arrow {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 10px;
}

/* ---------- Clinic listing grid (v1.18.2) ----------
   Specialty listing pages render clinic cards in a two-column grid on
   ≥800px viewports. Before this, cards were full-width siblings — at
   1280px+ that left the hero image at the top of each card squashed to
   a thin strip below the card's text-heavy body. Two columns give each
   card a more square aspect ratio so the hero photo earns its space.
   On narrow viewports (<800px) the grid collapses to one column. */
.clinic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.clinic-grid > .clinic-card { margin-bottom: 0; }
@media (max-width: 800px) {
  .clinic-grid { grid-template-columns: 1fr; }
}

/* ---------- Clinic listing cards ----------
   The whole card is a single anchor (v1.7.0). All link styling is reset here
   so children render exactly as before; the hover state lifts the card and
   intensifies the shadow as the affordance for clickability. */
.clinic-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.clinic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.10);
  border-color: var(--gray-300, #cbd5e1);
}
.clinic-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Hover-tighten the arrow even though the card itself is now the link. */
.clinic-card:hover .clinic-card__link { gap: 8px; }

.clinic-card--promoted {
  border-color: var(--teal);
  box-shadow: 0 2px 12px rgba(13,148,136,0.10);
}
.clinic-card--promoted:hover {
  border-color: var(--teal);
  box-shadow: 0 10px 28px rgba(13,148,136,0.18);
}

.clinic-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Fallback for clinics with no photo — keeps the card's top block consistent
   instead of collapsing. Muted paw mark on a soft neutral field. */
.clinic-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
}
.clinic-card__image--placeholder svg {
  width: 56px;
  height: 56px;
  fill: var(--gray-300);
}

.clinic-card__body { padding: 24px; }

.clinic-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.clinic-card__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.clinic-card__subtitle {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.clinic-card__stars {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
}
.clinic-card__stars .stars svg { width: 13px; height: 13px; fill: var(--teal); }

.clinic-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: 4px;
  padding: 3px 9px;
}

.clinic-card__meta {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.clinic-card__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.clinic-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
}
.clinic-card__link:hover { gap: 8px; }

/* ---------- FOMO strip ---------- */
.fomo-strip {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 20px 0;
  text-align: center;
}

.fomo-strip p {
  font-size: 14px;
  color: var(--gray-500);
}

.fomo-strip strong { color: var(--gray-700); }

/* ---------- FOMO panel (teal-bordered, inside page) ---------- */
.fomo-panel {
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  padding: 24px 28px;
  background: var(--teal-light);
  margin: 32px 0;
}

.fomo-panel__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.fomo-panel__body {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 16px;
  line-height: 1.6;
}

.fomo-panel .btn { font-size: 14px; padding: 10px 20px; }

/* ---------- Empty state (dashed) ---------- */
.empty-spot {
  border: 2px dashed var(--gray-300, #CBD5E1);
  border-radius: 10px;
  background: var(--gray-50);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 32px;
}

.empty-spot__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.empty-spot__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.empty-spot__price {
  font-size: 28px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
}

.empty-spot__note {
  font-size: 13px;
  color: var(--gray-400);
  margin-bottom: 20px;
}

/* ---------- CTA panel (city page bottom) ---------- */
.cta-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  margin-top: 48px;
}

.cta-panel h3 { margin-bottom: 10px; }

.cta-panel p {
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: 20px;
}

/* ---------- Callout box (BASIC pages) ---------- */
.callout-box {
  border-left: 3px solid var(--teal);
  background: var(--teal-light);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0 32px;
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.6;
}

.callout-box a { color: var(--teal); font-weight: 600; }

/* ---------- Clinic page layout (PROMOTED — two col) ---------- */
.clinic-layout {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
}

.clinic-layout--single {
  max-width: 720px;
  padding: 56px 0;
}

/* ---------- Clinic page main content ---------- */
.clinic-cover {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 28px;
}

.clinic-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--gray-500);
  margin-bottom: 24px;
}
.clinic-rating .stars svg { width: 16px; height: 16px; fill: var(--teal); }

.clinic-section { margin-bottom: 36px; }

.clinic-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}

/* Compact team listing used inside clinic-side aside. Scoped under
   .team-list so it never collides with the big team-grid partial from
   styles.css (used by home + founding-member). Bug surfaced in v1.26.5
   when founding-member started loading directory.css. */
.team-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.team-list .team-member {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.team-list .team-member__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.team-list .team-member__cred {
  font-size: 13px;
  color: var(--teal);
  font-weight: 600;
}

.procedure-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.procedure-list li {
  background: var(--gray-100);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 500;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.photo-gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.photo-credit {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  margin-top: 8px;
  font-style: italic;
}

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

.contact-field__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 3px;
}

.contact-field__value {
  font-size: 15px;
  color: var(--gray-700);
  font-weight: 500;
}

.contact-field__value a { color: var(--teal); }

/* ---------- Sidebar ---------- */
.sidebar-panel {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--teal);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.sidebar-panel__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

.sidebar-spots { list-style: none; display: flex; flex-direction: column; }

.sidebar-spots li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
  color: var(--gray-700);
}

.sidebar-spots li:last-child { border-bottom: none; }

.sidebar-spots .open  { color: var(--teal); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; }
.sidebar-spots .soon  { color: var(--gray-400); font-size: 12px; }

.sidebar-panel .btn { width: 100%; text-align: center; margin-top: 16px; font-size: 14px; padding: 11px; }

/* ---------- Footer FOMO strip ---------- */
.footer-fomo {
  background: var(--navy);
  padding: 40px 0;
  text-align: center;
}

.footer-fomo__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.footer-fomo__body {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ---------- Google Maps embed + clinic actions (v1.3.0) ---------- */
.clinic-map           { margin: 0 0 28px; }
.clinic-map iframe    { display: block; }
.clinic-map__link     { font-size: 14px; margin-top: 10px; }
.clinic-map__link a   { color: var(--teal); font-weight: 600; text-decoration: none; }
.clinic-map__link a:hover { text-decoration: underline; }

/* v1.17.2: equal-flex CTA row. Buttons share row width, center-align text,
   share a single min-height, and stay on one line as long as the viewport
   can fit them. They wrap only when the row can't fit at all (long phone
   numbers on narrow desktops). The mobile rule below stacks them. */
.clinic-actions       {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  align-items: stretch;
}
.clinic-actions > .btn,
.clinic-actions > .btn-outline {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.btn-outline {
  display: inline-block;
  padding: 10px 18px;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-outline:hover    { background: var(--navy); color: #fff; }

/* Bottom-of-page B2B pitch — understated, single line, after all pet-owner content. */
.bottom-pitch {
  margin: 56px 0 0;
  padding: 20px 24px;
  border-top: 1px solid var(--gray-100);
  font-size: 14px;
  color: var(--gray-500);
  text-align: center;
}
.bottom-pitch a       { color: var(--teal); font-weight: 600; text-decoration: none; margin-left: 6px; }
.bottom-pitch a:hover { text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .specialty-grid { grid-template-columns: 1fr; }
  .clinic-layout  { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid   { grid-template-columns: 1fr; }
  .photo-gallery  { grid-template-columns: 1fr 1fr; }
  .clinic-cover   { height: 200px; }
  .clinic-actions { flex-direction: column; align-items: stretch; }
  .clinic-actions .btn-outline { text-align: center; }
}

/* ─────────── v1.10.0: clinic page two-col layout + side-card details ─────── */

.clinic-layout--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 48px;
  align-items: start;
  padding: 56px 0;
}

.clinic-main { min-width: 0; }

.clinic-side {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  /* v1.12.0: tighter sidebar gap (was 16px) so map → stars → reviews →
     chips read as one cohesive panel rather than four spaced cards. */
  gap: 10px;
}

.clinic-side .clinic-map { margin: 0; }

.clinic-stars-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* v1.12.0: compact padding (was 10px 14px). */
  padding: 8px 12px;
  background: var(--gray-50, #F7FAFC);
  border-radius: 8px;
}
.clinic-stars-row .stars { display: inline-flex; gap: 1px; }
.clinic-stars-row .stars svg { width: 16px; height: 16px; fill: var(--teal); }
.clinic-stars-row__label {
  font-size: 14px;
  color: var(--gray-700, #2D3748);
  font-weight: 500;
}

.clinic-keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.clinic-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  margin: 8px 0 24px;
  font-weight: 500;
}

.clinic-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  margin: 8px 0 8px;
}

.clinic-book {
  background: var(--teal);
  color: #fff;
  border: 1.5px solid var(--teal);
}
.clinic-book:hover { filter: brightness(0.95); }

/* ─────────── v1.10.0: surgical team — card layout w/ initials fallback ─── */

.team-list--cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  padding: 0;
}

.team-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
}

.team-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-100);
  background: var(--teal-light, #E6FFFA);
}

.team-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.04em;
}

.team-card__body { min-width: 0; }

.team-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 2px;
}

.team-card__cred {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

.team-card__bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700, #2D3748);
  margin: 6px 0 0;
}

/* v1.17.0: collapse to single-column at ≤1023px (was 880px). iPad portrait
   and small laptops now get the stacked layout — hero photo at the top,
   body content below, map+reviews underneath — so the sticky right column
   never squeezes the body text under 280px of effective reading width. */
@media (max-width: 1023px) {
  .clinic-layout--two-col {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
  .clinic-side { position: static; }
}

/* v1.17.0: hero photo now lives at the top of the right column on desktop;
   stacks first on mobile via the rule above. Figure wraps the <img> so we
   can constrain aspect ratio without depending on width/height attrs (which
   are NULL for many source='website' rows). */
.clinic-cover-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  /* v1.17.2: no background fill. Earlier we used --gray-100 as a "loading"
     placeholder, but with `display:block` on the img + `aspect-ratio: 4/3`
     the figure sizes exactly to the image — and on landscape source photos
     a sliver of the bg leaked under the image, reading as a gray border. */
  line-height: 0;
}
.clinic-cover-figure .clinic-cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (max-width: 1023px) {
  .clinic-cover-figure .clinic-cover { max-height: 240px; }
}

/* ── v1.12.0 (Plan A) — sidebar reviews + visible FAQ ─────────────────────── */

.clinic-reviews {
  background: #fff;
  border: 1px solid var(--gray-200, #E2E8F0);
  border-radius: 8px;
  padding: 12px 14px;
}
.clinic-reviews__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.clinic-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clinic-review {
  padding: 8px 0;
  border-top: 1px solid var(--gray-100, #EDF2F7);
}
.clinic-review:first-child { padding-top: 0; border-top: 0; }
.clinic-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.clinic-review .stars--small svg { width: 12px; height: 12px; fill: var(--teal); }
.clinic-review__when {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
}
.clinic-review__author {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.clinic-review__author a { color: var(--navy); text-decoration: none; }
.clinic-review__author a:hover { text-decoration: underline; }
.clinic-review__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-700, #2D3748);
  margin: 4px 0 0;
  /* Cap individual review height with subtle clamp; users expand via summary. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clinic-reviews__more { margin-top: 8px; }
.clinic-reviews__more summary {
  font-size: 12px;
  color: var(--teal);
  cursor: pointer;
  font-weight: 600;
}
.clinic-reviews__more[open] summary { margin-bottom: 8px; }
.clinic-reviews__attrib {
  font-size: 11px;
  color: var(--gray-500, #6b7280);
  margin: 10px 0 0;
  font-style: italic;
}
.clinic-reviews__source {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}
.clinic-reviews__source:hover { text-decoration: underline; }

/* Visible FAQ block on clinic pages. Plain definition list — accessible,
   simple, and lets the FAQPage JSON-LD do the AEO heavy lifting. */
.clinic-faq .faq-list {
  margin: 0;
  padding: 0;
}
.clinic-faq .faq-list dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 18px 0 6px;
}
.clinic-faq .faq-list dt:first-child { margin-top: 4px; }
.clinic-faq .faq-list dd {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-700, #2D3748);
  margin: 0;
}

/* ── Plan B (v1.14.0) — Procedure content + finder sidebar ─────────────── */

.proc-page { padding: 0 0 64px; }

.proc-hero {
  padding: 28px 0 20px;
  text-align: left;
}
.proc-hero__eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 8px;
}
.proc-hero__title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--navy);
}
.proc-byline {
  color: var(--gray-500);
  font-size: 14px;
  margin: 0 0 18px;
}
.proc-byline a { color: var(--gray-700); text-decoration: underline; }
.proc-hero__figure {
  margin: 8px 0 4px;
}
.proc-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
}
/* v1.18.6: license attribution caption for hero images sourced under
   CC-BY / CC-BY-SA (Wikimedia Commons). Renders just under the hero. */
.proc-hero__attribution {
  font-size: 12px;
  color: var(--gray-500);
  margin: 6px 0 0;
  line-height: 1.5;
}
.proc-hero__attribution a {
  color: var(--gray-500);
  text-decoration: underline;
}
.proc-hero__attribution a:hover { color: var(--navy); }

/* Cost band callout */
.proc-cost-callout {
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 20px 0 28px;
}
.proc-cost-callout__title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal);
  margin: 0 0 8px;
}
.proc-cost-callout__range {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
}
.proc-cost-callout__basis {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}
.proc-cost-callout__disclaimer {
  font-size: 13px;
  color: var(--gray-700);
  margin: 10px 0 0;
  font-style: italic;
}

/* v1.23.2 — agent-first estimator CTA inside the cost-band callout. */
.proc-cost-callout__cta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.proc-cost-callout__cta-note {
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.4;
}

/* Two-column layout: article + sticky finder sidebar */
.proc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 920px) {
  .proc-layout { grid-template-columns: 1fr; }
  .proc-finder__sticky { position: static !important; }
}

/* Dual-instance visibility: sidebar on desktop, inline on mobile.
   Default to hide both; the matching breakpoint re-shows one. */
.proc-finder--inline { display: none; }
@media (max-width: 920px) {
  .proc-finder--sidebar { display: none; }
  .proc-finder--inline { display: block; margin: 8px 0 24px; }
  .proc-finder--inline .proc-finder__sticky {
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 12px;
    padding: 14px 16px;
    max-height: 460px;
    display: flex;
    flex-direction: column;
  }
  .proc-finder--inline .proc-finder__title { font-size: 17px; margin: 0 0 8px; }
  .proc-finder--inline .proc-finder__list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .proc-finder--inline .proc-finder__entry { padding: 8px 0; }
}

.proc-body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--gray-700);
}
.proc-body p { margin: 0 0 16px; }
.proc-body p strong { color: var(--navy); }
.proc-body p:first-child strong:only-child {
  display: block;
  font-size: 18px;
  background: var(--gray-50);
  border-left: 4px solid var(--teal);
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.proc-body h2 {
  font-size: 24px;
  color: var(--navy);
  margin: 32px 0 12px;
}
.proc-body h3 {
  font-size: 19px;
  color: var(--navy);
  margin: 24px 0 8px;
}
.proc-body blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--teal);
  background: var(--gray-50);
  font-style: italic;
  color: var(--gray-700);
  border-radius: 4px;
}
.proc-body ul { padding-left: 22px; margin: 12px 0 18px; }
.proc-body ul li { margin: 4px 0; }
.proc-body a { color: var(--teal); text-decoration: underline; word-break: break-word; overflow-wrap: anywhere; }
.proc-body { min-width: 0; }
.proc-body table { display: block; max-width: 100%; overflow-x: auto; }
.proc-body pre, .proc-body code { white-space: pre-wrap; word-break: break-word; }
.proc-citations a { word-break: break-word; overflow-wrap: anywhere; }
.proc-finder { min-width: 0; }
.proc-finder__link, .proc-finder__name, .proc-finder__loc { word-break: break-word; overflow-wrap: anywhere; }

/* Emergency callout */
.proc-emergency {
  background: #FEF2F2;
  border: 2px solid #DC2626;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 28px 0;
}
.proc-emergency h2 {
  color: #DC2626;
  font-size: 18px;
  margin: 0 0 10px;
}
.proc-emergency__list { margin: 0; padding-left: 18px; }
.proc-emergency__list li { margin: 6px 0; color: var(--gray-800); }
.proc-emergency__tag {
  display: inline-block;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.proc-emergency__tag[data-urgency="urgent"] { background: #B45309; }
.proc-emergency__tag[data-urgency="within-24h"] { background: #B45309; }

/* Contraindications */
.proc-contraindications {
  background: var(--gray-50);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 28px 0;
}
.proc-contraindications h2 {
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 10px;
}
.proc-contra__list { margin: 0; padding-left: 18px; }
.proc-contra__list li { margin: 6px 0; }
.proc-contra__kind { font-weight: 600; color: var(--navy); }

/* FAQ */
.proc-faq { margin: 32px 0; }
.proc-faq h2 { font-size: 22px; color: var(--navy); margin: 0 0 14px; }
.proc-faq__item {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.proc-faq__q {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--navy);
  background: var(--gray-50);
}
.proc-faq__a { padding: 12px 18px 16px; }
.proc-faq__a p { margin: 0; color: var(--gray-700); }
.proc-faq__source {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--teal);
}

/* Citations */
.proc-citations {
  border-top: 1px solid var(--gray-200);
  padding-top: 24px;
  margin-top: 32px;
}
.proc-citations h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin: 0 0 12px;
}
.proc-citations__list { list-style: none; padding: 0; margin: 0; }
.proc-citation { margin: 8px 0; font-size: 14px; color: var(--gray-700); }
.proc-citation__source { margin-left: 10px; color: var(--teal); }

.proc-crosslink {
  margin: 24px 0 0;
  padding: 14px 18px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 15px;
  color: var(--gray-700);
}

/* ── Finder sidebar ────────────────────────────────────────────────────── */
.proc-finder { font-size: 14.5px; }
.proc-finder__sticky {
  position: sticky;
  top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 18px 18px 20px;
  background: #fff;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.proc-finder__title {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--navy);
}
.proc-finder__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.proc-finder__pill {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.proc-finder__pill--source { background: var(--teal-light); color: var(--teal); }
.proc-finder__geo-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
}
.proc-finder__geo-btn:hover { background: #0B7C71; }
.proc-finder__geo-status {
  font-size: 12px;
  color: var(--gray-500);
  margin: 4px 0 8px;
}
.proc-finder__geo-status[data-kind="ok"] { color: var(--teal); }
.proc-finder__geo-status[data-kind="error"], .proc-finder__geo-status[data-kind="denied"] { color: #B45309; }
.proc-finder__list { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: finder-rank; }
.proc-finder__entry {
  border-top: 1px solid var(--gray-100);
  padding: 10px 0;
}
.proc-finder__entry:first-child { border-top: 0; }
.proc-finder__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.proc-finder__link:hover .proc-finder__name { color: var(--teal); }
.proc-finder__badge {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.proc-finder__name {
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
}
.proc-finder__loc {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}
.proc-finder__distance {
  font-size: 12px;
  color: var(--gray-400);
  margin-left: 4px;
}
.proc-finder__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.proc-finder__rating svg { width: 12px; height: 12px; }
.proc-finder__rating-num {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: 4px;
}
.proc-finder__empty {
  font-size: 14px;
  color: var(--gray-500);
  margin: 12px 0 0;
}
.proc-finder__empty a { color: var(--teal); }

/* ── /procedures/ index ─────────────────────────────────────────────────── */
.proc-index-section { padding: 24px 0 48px; }
.proc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.proc-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 150ms, transform 150ms;
}
.proc-card:hover {
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12);
  transform: translateY(-2px);
}
.proc-card__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.proc-card__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--teal);
  background: var(--teal-light);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.proc-card__teaser {
  font-size: 14px;
  color: var(--gray-700);
  margin: 6px 0 12px;
  line-height: 1.5;
}
.proc-card__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
}
.proc-index__empty {
  text-align: center;
  color: var(--gray-500);
  font-size: 16px;
  padding: 40px 0;
}

/* Coming-soon stub note on placeholder procedure pages (item 18, v1.29.0) */
.proc-placeholder-note {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--gray-50);
  border-radius: 12px;
  color: var(--gray-700);
  font-size: 16px;
  line-height: 1.5;
}


/* ============================================================
   PAGES — Long-form & marketing (v1.26.5)
   Extracted from inline <style> blocks in public/**/*.html so
   the v1.0.0 design system is the single source of truth. See
   docs/DESIGN_SYSTEM.md and scripts/audit-design-system.js.
   ============================================================ */

/* ---------- 404 not-found ---------- */
.nf { max-width: 720px; width: 100%; text-align: center; }
.nf__art {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
.nf__code {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 6px;
}
.nf__title {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
  margin: 0 0 10px;
  font-weight: 700;
}
.nf__lede {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-700);
  margin: 0 auto 22px;
  max-width: 520px;
}
.nf__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.nf__actions .btn { min-width: 180px; }
@media (max-height: 640px) {
  .nf__art { max-width: 320px; margin-bottom: 8px; }
  .nf__title { margin-bottom: 6px; }
  .nf__lede { margin-bottom: 14px; }
}
@media (max-height: 520px) {
  .nf__art { max-width: 220px; }
}
/* Page-level scaffolding for 404 — opt-in via <body class="page-404">.
   Centres .nf in the viewport and prevents the body from scrolling so the
   page reads as a single fixed-height composition. */
html.page-404, html.page-404 body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
html.page-404 body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* ---------- Long-form (legal + about/business / editorial / verification) ---------- */
.legal-hero {
  padding: 64px 0 32px;
  background: var(--white);
}
.legal-hero h1 {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 8px;
}
.legal-hero__meta {
  font-size: 14px;
  color: var(--gray-500);
}
.legal-body {
  padding: 16px 0 64px;
  background: var(--white);
}
.legal-body__inner { max-width: 760px; }
.legal-section { margin-bottom: 36px; }
.legal-section h2 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--navy);
}
.legal-section h3 {
  font-size: 17px;
  margin: 18px 0 8px;
  color: var(--navy);
}
.legal-section p,
.legal-section li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
}
.legal-section p  { margin-bottom: 12px; }
.legal-section ul { padding-left: 22px; margin-bottom: 12px; }
.legal-section li { margin-bottom: 6px; }
.legal-section a  { color: var(--teal); }
.legal-tldr {
  background: var(--gray-50);
  border-left: 4px solid var(--teal);
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 32px;
}
.legal-tldr strong { color: var(--navy); }
@media (max-width: 768px) {
  .legal-hero h1 { font-size: 30px; }
}

/* ---------- Author profile (/about/adelinda-manna/) ---------- */
.author-hero {
  padding: 80px 0 56px;
  background: var(--white);
}
.author-hero__inner {
  max-width: 760px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: center;
}
.author-hero__photo {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(15,23,42,0.08);
}
.author-hero h1 {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 10px;
}
.author-hero__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 14px;
}
.author-hero__tagline {
  font-size: 17px;
  color: var(--gray-500);
  line-height: 1.6;
  max-width: 540px;
}
.author-hero__links {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}
.author-hero__links a {
  color: var(--teal);
  font-weight: 600;
  border-bottom: 1px solid rgba(13,148,136,0.25);
  padding-bottom: 1px;
}
.author-hero__links a:hover { border-bottom-color: var(--teal); }
.author-body {
  padding: 24px 0 80px;
  background: var(--white);
}
.author-body__inner {
  max-width: 720px;
  display: grid;
  gap: 40px;
}
.author-section h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.author-section p {
  font-size: 16px;
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 14px;
}
.author-section p:last-child { margin-bottom: 0; }
.author-aside {
  background: var(--gray-50);
  border-left: 3px solid var(--teal);
  padding: 22px 26px;
  border-radius: 0 8px 8px 0;
}
.author-aside p {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 0;
}
.author-recent-procedures {
  margin-top: 32px;
  padding: 24px;
  background: var(--gray-50);
  border-radius: 12px;
}
.author-recent-procedures h2 {
  font-size: 20px;
  margin: 0 0 14px;
  color: var(--navy);
}
.author-recent-procedures ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.author-recent-procedures li { margin: 0; }
.author-recent-procedures a {
  display: block;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 500;
  font-size: 14.5px;
}
.author-recent-procedures a:hover { border-color: var(--teal); color: var(--teal); }
.author-recent-procedures__teaser {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}
.author-bottom-cta {
  padding: 64px 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  text-align: center;
}
.author-bottom-cta h2 {
  font-size: 28px;
  margin-bottom: 12px;
}
.author-bottom-cta p {
  font-size: 16px;
  color: var(--gray-500);
  max-width: 520px;
  margin: 0 auto 24px;
}
@media (max-width: 768px) {
  .author-hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 22px;
  }
  .author-hero__photo { width: 120px; height: 120px; }
  .author-hero h1 { font-size: 32px; }
}

/* ---------- Founding-member landing ---------- */
.fm-hero {
  padding: 80px 0 72px;
  background: var(--white);
}
.fm-hero__inner { max-width: 760px; }
.fm-hero h1 {
  font-size: 52px;
  margin-bottom: 24px;
  line-height: 1.1;
}
.fm-hero__sub {
  font-size: 18px;
  color: var(--gray-500);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 40px;
}
.fm-hero__cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.fm-hero__trust {
  font-size: 13px;
  color: var(--gray-400);
}
.fm-problem {
  padding: 80px 0;
  background: var(--gray-50);
}
.fm-problem__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.fm-problem h2 {
  font-size: 32px;
  margin-bottom: 24px;
}
.fm-problem__body p {
  font-size: 16px;
  color: var(--gray-500);
  line-height: 1.8;
  margin-bottom: 16px;
}
.fm-problem__body p:last-child { margin-bottom: 0; }
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 8px;
}
.flow-step {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.flow-step--result {
  border-color: var(--teal);
  background: var(--teal-light);
}
.flow-step__num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.flow-step--result .flow-step__num { background: var(--teal); }
.flow-step__text {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
}
.flow-step--result .flow-step__text {
  color: var(--teal);
  font-weight: 600;
}
.flow-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--gray-300);
  line-height: 1;
  padding: 6px 0;
}
.fm-proof {
  padding: 80px 0;
  background: var(--white);
}
.fm-proof__inner {
  max-width: 800px;
  margin: 0 auto;
}
.fm-proof h2 {
  font-size: 32px;
  margin-bottom: 20px;
}
.fm-proof__body {
  font-size: 16px;
  color: var(--gray-500);
  line-height: 1.8;
  margin-bottom: 40px;
}
.chart-wrap {
  position: relative;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 32px 24px 16px;
}
.chart-caption {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 12px;
}
.fm-offer {
  padding: 80px 0;
  background: var(--gray-50);
}
.fm-offer h2 {
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
}
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.offer-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.offer-card__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--teal-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer-card__icon svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}
.offer-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.offer-card__desc {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}
.fm-faq {
  padding: 80px 0;
  background: var(--gray-50);
}
.fm-faq h2 {
  font-size: 32px;
  margin-bottom: 40px;
}
.fm-faq__list { max-width: 720px; }
.fm-faq__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-200);
}
.fm-faq__item:last-child { border-bottom: none; }
.fm-faq__q {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.fm-faq__a {
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.75;
}
.fm-subscribe {
  padding: 80px 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  text-align: center;
}
.fm-subscribe__inner {
  max-width: 520px;
  margin: 0 auto;
}
.fm-subscribe h2 {
  font-size: 32px;
  margin-bottom: 12px;
}
.fm-subscribe__sub {
  font-size: 17px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 20px;
}
.fm-subscribe__body {
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 32px;
}
.fm-subscribe__trust {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-400);
}
.fm-subscribe__success {
  display: none;
  background: var(--teal-light);
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  padding: 28px 32px;
  text-align: left;
}
.fm-subscribe__success h3 {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
}
.fm-subscribe__success p {
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .fm-hero h1 { font-size: 36px; }
  .fm-problem__inner { grid-template-columns: 1fr; gap: 40px; }
  .offer-grid { grid-template-columns: 1fr; }
}