/* ==========================================================================
   Minha Clínica — design system
   Built for: speed, mobile-first, readability for older patients.
   ========================================================================== */

/* --- 1. Tokens (colors, spacing, typography) ---------------------------- */
:root {
  /* Brand */
  --red:        #E30613;       /* Primary brand red, WCAG-AA contrast on white */
  --red-dark:   #B00510;       /* Hover/active */
  --red-light:  #FFF1F2;       /* Soft tint backgrounds */
  --red-band:   #FCE4E6;       /* Slightly stronger tint for callouts */

  /* Soft pastel accents (drconsulta-style — used for category card variety) */
  --tint-peach:    #FFE6D2;    /* warm peach     — exames laboratoriais */
  --tint-blue:     #DCEEF8;    /* pale sky blue  — exames imagem */
  --tint-pink:     #FBDDE2;    /* soft pink      — exames coração */
  --tint-cream:    #FFF1CC;    /* warm cream     — consultas */
  --tint-mint:     #D7EFE0;    /* fresh mint     — dentista */
  --tint-lavender: #E5DAF1;    /* soft lavender  — check-up */

  /* Matching icon-foreground tones (slightly darker, for legibility) */
  --tint-peach-ink:    #B85F1F;
  --tint-blue-ink:     #1F6B91;
  --tint-pink-ink:     #C03249;
  --tint-cream-ink:    #8A6A0E;
  --tint-mint-ink:     #1F7A4D;
  --tint-lavender-ink: #5C3F95;

  /* Neutrals */
  --ink:        #1a1a1a;       /* Body text */
  --ink-soft:   #4a4a4a;       /* Secondary text */
  --ink-mute:   #6b6b6b;       /* Tertiary / captions */
  --line:       #e8e8e8;       /* Borders, dividers */
  --line-soft:  #f3f3f3;       /* Subtle separators */
  --bg:         #ffffff;
  --bg-alt:     #fafafa;       /* Alternating sections */

  /* WhatsApp green (only used on the WhatsApp button to be unmistakable) */
  --wa:         #25D366;
  --wa-dark:    #128C7E;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Layout */
  --container: 1100px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Type scale (mobile-first; bumped on desktop via @media) */
  --fs-base: 1.0625rem;        /* 17px on mobile — large for older eyes */
  --fs-sm:   0.9375rem;
  --fs-lead: 1.25rem;
  --fs-h3:   1.25rem;
  --fs-h2:   1.625rem;
  --fs-h1:   2.0rem;
  --lh:      1.6;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
  :root {
    --fs-base: 1.125rem;
    --fs-h1:   2.75rem;
    --fs-h2:   2rem;
    --fs-h3:   1.375rem;
  }
}

/* --- 2. Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-4); color: var(--ink); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--s-4); }

.lead { font-size: var(--fs-lead); color: var(--ink-soft); }

/* Skip link for accessibility */
.skip {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.skip:focus {
  position: static; width: auto; height: auto; padding: var(--s-3);
  background: var(--red); color: #fff;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

/* --- 3. Top bar (sticky on all screens) --------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  max-width: var(--container); margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand img { height: 38px; width: auto; flex-shrink: 0; }
.brand__name { display: none; font-weight: 700; color: var(--red); font-size: 1.1rem; }
@media (min-width: 480px) { .brand__name { display: inline; } }

.topbar__spacer { flex: 1; }

/* Top-bar nav (desktop) */
.nav-desktop {
  display: none;
}
@media (min-width: 992px) {
  .nav-desktop { display: flex; gap: var(--s-5); align-items: center; }
  .nav-desktop > a {
    color: var(--ink); font-weight: 500;
  }
  .nav-desktop > a:hover { color: var(--red); text-decoration: none; }
  .nav-desktop > a.active { color: var(--red); }
}

/* Desktop dropdown menu (used for "Exames" — links to the 3 exam subpages).
   Pure CSS via :hover and :focus-within — no JS needed. Keyboard users tabbing
   through the trigger keep the menu open while any descendant is focused. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--ink); font-weight: 500; cursor: pointer;
}
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger.active { color: var(--red); text-decoration: none; }
.nav-dropdown__trigger .caret { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-dropdown:hover .nav-dropdown__trigger .caret,
.nav-dropdown:focus-within .nav-dropdown__trigger .caret { transform: rotate(180deg); }

.nav-dropdown__menu {
  position: absolute; top: 100%; left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: var(--s-2) 0;
  min-width: 240px;
  z-index: 100;
  /* Hidden by default; shown on hover / keyboard focus. Use opacity+visibility
     instead of display:none so the transition is smooth and focus moves cleanly. */
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}
.nav-dropdown__menu li { margin: 0; }
.nav-dropdown__menu a {
  display: block;
  padding: var(--s-3) var(--s-4);
  color: var(--ink); text-decoration: none; font-weight: 500;
  font-size: 1rem;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus { background: var(--bg-alt); color: var(--red); text-decoration: none; }

/* "Área do paciente" top-bar button — uses .btn.btn--primary base, but has an
   icon-only mode below 600px so it shares the topbar with the logo + hamburger
   without squeezing on small phones. */
.btn--areapac { padding: var(--s-2) var(--s-4); font-size: 0.95rem; min-height: 44px; }
@media (max-width: 599px) {
  .btn--areapac { padding: var(--s-2); min-width: 44px; }
  .btn--areapac .label { display: none; }
}

/* Top-bar CTAs */
.topbar__ctas { display: flex; gap: var(--s-2); align-items: center; }
.topbar__ctas .btn { padding: var(--s-2) var(--s-4); font-size: 0.95rem; }
.topbar__ctas .icon-btn { display: inline-flex; }

/* Mobile menu toggle */
.menu-toggle {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
}
@media (min-width: 992px) { .menu-toggle { display: none; } }

.menu-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.nav-mobile {
  display: none; flex-direction: column;
  background: #fff; border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-5) var(--s-5);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-weight: 500; font-size: 1.1rem;
}
.nav-mobile a:hover, .nav-mobile a.active { color: var(--red); text-decoration: none; }
@media (min-width: 992px) { .nav-mobile { display: none !important; } }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font: inherit; font-weight: 600; font-size: 1rem;
  line-height: 1.2;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  min-height: 48px;                 /* big tap target */
  transition: transform 0.05s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #6da7ff; outline-offset: 2px; }

.btn--primary {
  background: var(--red); color: #fff; border-color: var(--red);
}
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.btn--ghost {
  background: #fff; color: var(--red); border-color: var(--red);
}
.btn--ghost:hover { background: var(--red-light); }

.btn--whatsapp {
  background: var(--wa); color: #fff; border-color: var(--wa);
}
.btn--whatsapp:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }

.btn--sm { padding: 0.5rem 1rem; font-size: 0.95rem; min-height: 40px; }
.btn--lg { padding: 1rem 2rem; font-size: 1.125rem; min-height: 56px; }

.btn .ic { width: 18px; height: 18px; flex-shrink: 0; }
.btn--lg .ic { width: 22px; height: 22px; }

/* Phone "tag-style" pill in topbar */
.phone-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--red-light); color: var(--red);
  border-radius: 999px;
  font-weight: 700;
  min-height: 44px;
  border: 1px solid transparent;
}
.phone-pill:hover { background: var(--red); color: #fff; text-decoration: none; }
.phone-pill .ic { width: 18px; height: 18px; }

/* On small screens, hide the "3202-5050" text and show only the phone icon */
.phone-pill .label { display: none; }
@media (min-width: 600px) { .phone-pill .label { display: inline; } }

/* Same trick for WhatsApp icon-only on tiny screens */
.icon-only-mobile .label { display: none; }
@media (min-width: 600px) { .icon-only-mobile .label { display: inline; } }

/* --- 5. Hero ------------------------------------------------------------- */
.hero {
  padding: var(--s-7) 0 var(--s-7);
  background:
    radial-gradient(circle at 90% -10%, var(--tint-peach) 0%, transparent 50%),
    radial-gradient(circle at -10% 110%, var(--tint-blue) 0%, transparent 45%),
    linear-gradient(180deg, var(--red-light) 0%, #fff 100%);
}
.hero h1 { margin-bottom: var(--s-4); }
.hero h1 .accent { color: var(--red); }
.hero__lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: var(--s-6); max-width: 38rem; }
.hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__chips { margin-top: var(--s-7); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.chip {
  background: #fff; border: 1px solid var(--line);
  padding: var(--s-2) var(--s-4); border-radius: 999px;
  font-size: 0.95rem; color: var(--ink-soft);
}

/* --- 6. Sections / page intro ------------------------------------------- */
.section { padding: var(--s-7) 0; }
/* Warm pastel band — used to alternate against plain white sections so the
   page reads in clear visual chapters instead of a flat scroll. */
.section--alt {
  background: linear-gradient(180deg, var(--tint-peach) 0%, var(--tint-cream) 100%);
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Inner-page hero. Same multi-layer pastel gradient as the home page .hero,
   so the visual entry to every page feels consistent. */
.page-intro {
  padding: var(--s-7) 0 var(--s-5);
  background:
    radial-gradient(circle at 90% -10%, var(--tint-peach) 0%, transparent 50%),
    radial-gradient(circle at -10% 110%, var(--tint-blue) 0%, transparent 45%),
    linear-gradient(180deg, var(--red-light) 0%, #fff 100%);
  text-align: center;
}
.page-intro h1 { margin-bottom: var(--s-3); }
.page-intro p { color: var(--ink-soft); max-width: 40rem; margin: 0 auto var(--s-5); }
.page-intro .btn { margin-bottom: var(--s-3); }

/* --- 7. Service category cards (home grid) ------------------------------ */
.cat-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card {
  display: block;
  background: #fff;
  border: 1px solid transparent;        /* tinted bg replaces visible border */
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  text-decoration: none; color: var(--ink);
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.cat-card:hover, .cat-card:focus {
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-3px);
}
.cat-card__icon {
  width: 64px; height: 64px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--red);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.cat-card__icon svg { width: 34px; height: 34px; }
.cat-card__icon img { width: 56px; height: 56px; object-fit: contain; }
.cat-card h3 { margin: 0 0 var(--s-2); }
.cat-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.cat-card__more {
  margin-top: var(--s-4); color: var(--red); font-weight: 600; font-size: 0.95rem;
}
.cat-card__more::after { content: " \2192"; }

/* Per-card pastel tints — assigned via :nth-child so HTML stays untouched.
   Order on the home grid: laboratoriais, imagem, coração, consultas, dentista, check-ups */
.cat-grid > .cat-card:nth-child(6n+1) { background: var(--tint-peach); }
.cat-grid > .cat-card:nth-child(6n+1) .cat-card__icon { color: var(--tint-peach-ink); }
.cat-grid > .cat-card:nth-child(6n+2) { background: var(--tint-blue); }
.cat-grid > .cat-card:nth-child(6n+2) .cat-card__icon { color: var(--tint-blue-ink); }
.cat-grid > .cat-card:nth-child(6n+3) { background: var(--tint-pink); }
.cat-grid > .cat-card:nth-child(6n+3) .cat-card__icon { color: var(--tint-pink-ink); }
.cat-grid > .cat-card:nth-child(6n+4) { background: var(--tint-cream); }
.cat-grid > .cat-card:nth-child(6n+4) .cat-card__icon { color: var(--tint-cream-ink); }
.cat-grid > .cat-card:nth-child(6n+5) { background: var(--tint-mint); }
.cat-grid > .cat-card:nth-child(6n+5) .cat-card__icon { color: var(--tint-mint-ink); }
.cat-grid > .cat-card:nth-child(6n+6) { background: var(--tint-lavender); }
.cat-grid > .cat-card:nth-child(6n+6) .cat-card__icon { color: var(--tint-lavender-ink); }

/* On hover, slight color saturation bump via a subtle inner shadow */
.cat-card:hover { box-shadow: var(--shadow-md), inset 0 0 0 2px rgba(0,0,0,0.04); }

/* --- 8. Value props (home: "preços que cabem no seu bolso") ------------- */
.values {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 600px) { .values { grid-template-columns: repeat(3, 1fr); } }

.value {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  text-align: center;
}
/* Value-prop illustrations sit naturally on the gray card — no inner frame, no
   circle. The illustrations are wider than tall, so we set the height and let
   width be determined by aspect, capped to the card width on small screens. */
.value__icon {
  display: flex; align-items: center; justify-content: center;
  height: 96px;
  margin: 0 auto var(--s-3);
  color: var(--red); /* in case any legacy SVG remains */
}
.value__icon svg { width: 36px; height: 36px; }
.value__icon img {
  height: 96px; width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.value h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.value p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* --- 9. Service price list (consultas, exames, dentista, check-up) ------ */
.list {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 768px) { .list { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }

.svc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
}
.svc__body { flex: 1 1 200px; min-width: 0; }
.svc__title { font-weight: 700; font-size: 1.0625rem; margin-bottom: var(--s-1); color: var(--ink); }
.svc__desc { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.svc__pkg { font-size: 0.875rem; color: var(--red-dark); margin-top: var(--s-1); display:block; }
.svc__price {
  font-weight: 700; font-size: 1.125rem; color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-end;
  margin-left: auto;
}
.svc__price .amount { color: var(--red); }
.svc__price .soon  { color: var(--ink-mute); font-size: 0.875rem; font-weight: 500; }
.svc__cta { margin-left: var(--s-3); }
@media (max-width: 480px) {
  .svc { padding: var(--s-4); }
  .svc__cta { width: 100%; margin-left: 0; margin-top: var(--s-3); }
  .svc__cta .btn { width: 100%; }
  .svc__price { align-items: flex-start; margin-left: 0; }
}

.list__heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7);
}
.list__heading h2 { margin: 0; }
.list__heading p { color: var(--ink-soft); margin: 0; }

/* --- 10. Locations (unidades) ------------------------------------------- */
.units {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 768px) { .units { grid-template-columns: repeat(3, 1fr); } }

.unit {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.unit h3 { color: var(--red); margin-bottom: var(--s-3); }
.unit address { font-style: normal; color: var(--ink-soft); margin-bottom: var(--s-4); }
.unit__hint { font-size: 0.95rem; color: var(--ink-mute); margin-bottom: var(--s-4); }
.unit__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --- 11. CTA band ------------------------------------------------------- */
/* Plain white "rest stop" between the warm pastel section above and the
   pastel-gray footer below. Keeps the alternating rhythm. Buttons use
   their default colors (red filled, green WhatsApp, red-outline ghost). */
.cta-band {
  background: #fff;
  color: var(--ink);
  padding: var(--s-7) 0;
  text-align: center;
}
.cta-band h2 { color: var(--ink); margin-bottom: var(--s-3); }
.cta-band p  { color: var(--ink-soft); max-width: 36rem; margin: 0 auto var(--s-5); }

/* --- 12. WhatsApp / how-it-works steps ---------------------------------- */
.steps {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700;
  margin-bottom: var(--s-3);
}
.step h3 { margin-bottom: var(--s-2); font-size: 1.0625rem; }
.step p  { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* --- 13. Footer --------------------------------------------------------- */
/* Pastel-gray footer — neutral counterpart to the warm pastel section above
   (Values / "Preços que cabem"), with a plain white CTA band sandwiched
   between, so the eye gets pastel → white → pastel-gray rhythm. */
.footer {
  background: linear-gradient(180deg, #ECEAE5 0%, #DDD9D0 100%);
  color: var(--ink-soft);
  padding: var(--s-7) 0 var(--s-5);
  margin-top: 0;
}
.footer a { color: var(--red); }
.footer a:hover { color: var(--red-dark); }
.footer__cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer__cols { grid-template-columns: 1.2fr 1fr 1fr; } }

.footer h4 { color: var(--ink); margin: 0 0 var(--s-3); font-size: 1.05rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer__brand img { height: 36px; margin-bottom: var(--s-3); }
.footer__sub { color: var(--ink-mute); font-size: 0.875rem; margin-top: var(--s-5); border-top: 1px solid rgba(0,0,0,0.08); padding-top: var(--s-4); text-align: center; }

/* --- 14. Sticky CTA bar -------------------------------------------------- */
/* Mobile: full-width strip pinned to the bottom of the viewport.
   Desktop: vertical column floating against the right edge, vertically centered.
   Same three buttons (Ligar, WhatsApp, Agendar) on both, just laid out differently. */
.sticky-cta {
  position: fixed;
  background: #fff;
  display: flex;
  z-index: 40;
}

/* Mobile (default): bottom-edge horizontal strip */
.sticky-cta {
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
  gap: var(--s-2);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
}
.sticky-cta .btn { flex: 1; padding: var(--s-3); font-size: 0.95rem; min-height: 48px; }
.sticky-cta .btn .ic { width: 18px; height: 18px; }

/* Mobile: add bottom padding to body so the sticky bar doesn't cover content */
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
}

/* Desktop: float on the right edge, vertically centered */
@media (min-width: 768px) {
  .sticky-cta {
    left: auto; right: var(--s-4); bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
    gap: var(--s-3);
    border-top: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    box-shadow: var(--shadow-md);
  }
  .sticky-cta .btn { flex: 0 0 auto; min-width: 168px; min-height: 44px; padding: var(--s-2) var(--s-4); }
  /* Show full text labels on desktop even where mobile would hide them */
  .sticky-cta .icon-only-mobile .label { display: inline; }
}

/* --- 15. Utility -------------------------------------------------------- */
.muted { color: var(--ink-mute); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.no-wrap { white-space: nowrap; }

.divider {
  border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0;
}