/* =====================================================================
   OtterFlow — Marketing Homepage Stylesheet (v3)
   Page-scoped. White-dominant palette with warm brown ink + flow-blue
   accent + coral CTAs. References user-supplied PNGs in static/img/otterflow/.
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  --brown:       #8B6F47;
  --brown-deep:  #6E5635;
  --brown-soft:  #B89875;

  /* White-dominant surfaces */
  --white:       #FFFFFF;
  --off-white:   #FAF8F4;   /* very subtle warm tint for alternating bands */
  --soft-warm:   #F4F1EA;   /* slightly deeper, for hover/highlight chips */
  --line-warm:   #E8E2D2;   /* warm hairline borders */

  /* Brand accents (used sparingly on white) */
  --cream:       #F5EDD8;   /* still in tokens for stat pills/highlights */
  --cream-deep:  #ECE0BF;

  --flow:        #4FA8C5;
  --flow-deep:   #3A8FA8;
  --flow-soft:   #D4E8F0;

  --coral:       #FF7A59;
  --coral-deep:  #E5613F;
  --coral-soft:  #FFD2C4;

  --navy:        #1F2937;
  --navy-soft:   #374151;
  --navy-mute:   #6B7280;

  --ink:         var(--navy);
  --paper:       var(--white);

  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.05);
  --shadow-md: 0 10px 30px -10px rgba(31, 41, 55, 0.15), 0 2px 4px rgba(31, 41, 55, 0.04);
  --shadow-lg: 0 28px 70px -20px rgba(31, 41, 55, 0.22), 0 4px 12px rgba(31, 41, 55, 0.05);
  --shadow-card: 0 14px 36px -16px rgba(110, 86, 53, 0.22), 0 2px 6px rgba(110, 86, 53, 0.06);
  --shadow-coral: 0 14px 32px -10px rgba(255, 122, 89, 0.5), 0 2px 4px rgba(229, 97, 63, 0.18);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-hand:    "Caveat", "Patrick Hand", cursive;
  --font-italic:  "Fraunces", "Sora", serif;

  --container-max: 1320px;
  --container-pad: clamp(20px, 5vw, 72px);

  --section-pad-y: clamp(80px, 11vw, 160px);
}

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

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

body.otterflow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--coral); color: var(--white); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- 3. Typography ------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.eyebrow__pin {
  width: 12px; height: 12px;
  color: var(--coral);
  margin-inline-start: -6px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  font-weight: 700;
}

.h-hero {
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-weight: 700;
  /* Evens out the line lengths instead of leaving a one-word last line.
     Browsers without it just wrap greedily, which is the old behaviour. */
  text-wrap: balance;
}
.h-hero em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: -0.02em;
}

.h-section {
  font-size: clamp(2.05rem, 4.4vw, 3.6rem);
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 22ch;
  text-wrap: balance;
}
.h-section--narrow { max-width: 16ch; }

.h-final {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--navy);
  text-wrap: balance;
  max-width: 22ch;
  margin: 0 auto;
}
.h-final em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 600;
  color: var(--coral);
}

p { margin: 0; }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  color: var(--navy-soft);
  line-height: 1.6;
  max-width: 56ch;
}

.body-warm {
  color: var(--navy-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.flo-note {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--brown);
  line-height: 1.22;
  display: inline-block;
  transform: rotate(-2deg);
}
.flo-note--blue { color: var(--flow-deep); }
.flo-note--right { transform: rotate(2deg); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.wordmark .otter { color: var(--brown); }
.wordmark .flow  { color: var(--flow); }

/* ---------- 4. Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background-color 200ms ease;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.btn--coral {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-coral);
}
.btn--coral:hover {
  transform: translateY(-2px) scale(1.015);
  background: var(--coral-deep);
}
.btn--coral:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(31, 41, 55, 0.22);
}
.btn--ghost:hover {
  border-color: var(--navy);
  background: rgba(31, 41, 55, 0.04);
  transform: translateY(-2px);
}
/* Try Flo Live: a ghost button carrying the Messenger mark. A solid brand-blue
   button here would fight the coral primary sitting right next to it, so only
   the icon is coloured — enough to be recognised, not enough to compete. */
.btn--messenger .i-messenger {
  width: 20px;
  height: 20px;
  color: #0084FF;
  flex: none;
}
.btn--messenger:hover .i-messenger { color: #0068D1; }

.btn .arrow {
  width: 14px;
  height: 14px;
  transition: transform 220ms ease;
}
.btn:hover .arrow { transform: translateX(4px); }

.btn--lg { padding: 18px 30px; font-size: 1.05rem; }
.btn--xl { padding: 22px 38px; font-size: 1.15rem; }

/* ---------- 5. Top nav ---------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--line-warm);
  background: rgba(255, 255, 255, 0.96);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
}
.nav__brand .wordmark { font-size: 1.5rem; }
.nav__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line-warm), var(--shadow-sm);
  overflow: hidden;
}
.nav__mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nav__links {
  display: none;
  gap: 32px;
  margin-inline-start: 28px;
  font-size: 0.95rem;
  color: var(--navy-soft);
}
.nav__links a {
  position: relative;
  padding-block: 6px;
  font-weight: 500;
  transition: color 160ms ease;
}
.nav__links a:hover { color: var(--brown); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--flow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.nav__login {
  font-size: 0.95rem;
  color: var(--navy-soft);
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-flex;
}
.nav__login:hover { color: var(--brown); }
.nav__logout-form { display: inline-flex; margin: 0; }

.nav__logout {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: inherit;
  color: inherit;
}

/* Book-a-call coral CTA in the nav: hidden on narrow viewports so the
   Log in / Book-a-call pair doesn't overflow. Other coral CTAs (hero,
   pricing, final CTA) are unaffected. */
.nav__cta .btn--coral { display: none; }
@media (min-width: 560px) {
  .nav__cta .btn--coral { display: inline-flex; }
}
.nav__cta .btn { padding: 11px 20px; font-size: 0.95rem; }

@media (min-width: 880px) {
  .nav__links { display: inline-flex; }
}

/* ---------- 6. Hero ------------------------------------------------- */
.hero.band {
  position: relative;
  padding-block: clamp(24px, 3vw, 56px) clamp(56px, 8vw, 110px);
  overflow: hidden;
  /* Fill the viewport below the sticky nav so the next section
     never peeks into the first screen. Nav is ~76px tall. */
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: grid;
  align-content: center;
}
.hero__halo {
  position: absolute;
  top: -180px;
  right: -120px;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(79, 168, 197, 0.18), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.hero__copy { max-width: 38rem; }
.hero__eyebrow { margin-bottom: 22px; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 32px; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--navy-mute);
  font-family: var(--font-body);
  font-weight: 500;
}
.hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--flow);
  box-shadow: 0 0 0 4px rgba(79, 168, 197, 0.22);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(79, 168, 197, 0.22); }
  50%      { box-shadow: 0 0 0 9px rgba(79, 168, 197, 0.05); }
}

.hero__art {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.hero__bg-blob {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(79, 168, 197, 0.16), transparent 70%);
  border-radius: 50%;
  z-index: 0;
  /* Decorative only (aria-hidden). Without this, its z-index:0 stacking
     context paints it above the unpositioned phone mockup next to it,
     which silently ate every click meant for the composer and the
     Restart demo button. */
  pointer-events: none;
}
.hero__illustration {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 28px 40px rgba(31, 41, 55, 0.16));
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__flonote {
  position: absolute;
  bottom: -8px;
  right: 4%;
  z-index: 2;
}

@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
  }
  .hero__art {
    justify-self: end;
  }
}

/* ---------- 7. Stats strip ------------------------------------------ */
.stats {
  background:
    radial-gradient(circle at 15% 50%, rgba(79, 168, 197, 0.18), transparent 45%),
    radial-gradient(circle at 85% 50%, rgba(255, 122, 89, 0.12), transparent 45%),
    var(--navy);
  color: var(--white);
  padding-block: clamp(48px, 6vw, 72px);
  position: relative;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.stats__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 720px) {
  .stats__row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: center;
  }
  .stat + .stat {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    padding-left: clamp(28px, 4vw, 56px);
  }
}

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

.stat__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  letter-spacing: -0.035em;
  color: var(--white);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.stat__value em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.36em;
  color: var(--coral);
  letter-spacing: 0;
  margin-left: 2px;
  text-transform: lowercase;
}

.stat__was {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stat__was::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(255, 122, 89, 0.55);
  display: inline-block;
}

/* ---------- 8. Section scaffolding ---------------------------------- */
section.band {
  padding-block: var(--section-pad-y);
  position: relative;
}
section.band--soft   { background: var(--off-white); }
section.band--warm   { background: var(--soft-warm); }
section.band--final  {
  background:
    radial-gradient(closest-side at 50% 0%, rgba(79, 168, 197, 0.14), transparent 60%),
    var(--white);
}

.section-head {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head .eyebrow { justify-self: start; }

/* ---------- 9. Problem cards ---------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .problem-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.problem-card {
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 36px 30px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease, border-color 280ms ease;
}
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(139, 111, 71, 0.22);
}
.problem-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 160px; height: 160px;
  background: radial-gradient(closest-side, rgba(255, 122, 89, 0.10), transparent 70%);
  pointer-events: none;
}
.problem-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--soft-warm);
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  color: var(--brown);
}
.problem-card__icon svg { width: 30px; height: 30px; }
.problem-card h3 {
  font-size: 1.5rem;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
  color: var(--navy);
}
.problem-card p { color: var(--navy-soft); font-size: 1rem; line-height: 1.65; }

.problem-card__stat {
  position: absolute;
  top: 26px; right: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--coral);
  letter-spacing: 0.06em;
  background: var(--coral-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- 10. Journey diagram ------------------------------------- */
.journey-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 960px) {
  .journey-wrap {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 80px;
  }
}

.journey-aside { position: relative; }

/* The conversation mockup is dressed as a Facebook Messenger thread. Those
   colours are Meta's, not ours, so they live on .phone-mock rather than in the
   :root token block — every consumer is inside this element. */
.phone-mock {
  --msgr-out-top: #0A7CFF;   /* outgoing gradient, top    */
  --msgr-out-bot: #0057D9;   /* outgoing gradient, bottom */
  --msgr-in:      #E4E6EB;   /* incoming bubble           */
  --msgr-ink:     #050505;   /* Messenger body text       */
  --msgr-mute:    #65676B;   /* the "Active now" grey     */
  --msgr-line:    #E4E6EB;   /* header hairline           */
  --msgr-active:  #31A24C;   /* the active dot            */

  position: relative;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  background: var(--navy);
  border-radius: 36px;
  padding: 14px 12px;
  box-shadow: var(--shadow-lg);
}
.phone-mock:hover { animation: phone-wiggle 350ms ease; }
@keyframes phone-wiggle {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-3deg); }
  60%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.phone-mock__notch {
  width: 80px;
  height: 18px;
  background: #000;
  border-radius: 0 0 14px 14px;
  margin: -14px auto 8px;
}
.phone-mock__screen {
  background: var(--white);
  border-radius: 22px;
  padding: 14px 12px 18px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phone-mock__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--msgr-line);
  margin-bottom: 8px;
}
/* No `overflow: hidden` here — the badge overhangs the circle deliberately, so
   the image carries the radius instead of the box clipping it. */
.phone-mock__avatar {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--off-white);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.phone-mock__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.phone-mock__badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--msgr-out-top);
  border: 2px solid var(--white);
  color: var(--white);
  display: grid;
  place-items: center;
}
.phone-mock__badge svg { width: 9px; height: 9px; }
.phone-mock__head strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--msgr-ink);
}
/* Messenger puts "Active now" under the name; ours says what it does instead. */
.phone-mock__head small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--msgr-mute);
  font-size: 0.72rem;
  font-weight: 500;
}
.phone-mock__active {
  width: 7px; height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--msgr-active);
}
.phone-mock__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble {
  font-size: 0.83rem;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 18px;
  margin: 4px 0;
  max-width: 78%;
  color: var(--msgr-ink);
}
.bubble--in {
  background: var(--msgr-in);
  border-bottom-left-radius: 4px;
  /* The body is a flex column, so an item with no cross-axis margin stretches
     to max-width instead of hugging its text. --out gets that from its
     margin-left:auto below; --in had nothing, which went unnoticed while this
     side only ever held the customer's two short lines. It now holds Flo's
     paragraphs, and without this every reply renders as a full-width slab. */
  align-self: flex-start;
}
/* Messenger runs one gradient down the whole thread and each bubble shows its
   slice of it. Per-bubble is close enough at this size and survives the replay
   animation, which reorders nothing but does hide and reveal bubbles. */
.bubble--out {
  background: linear-gradient(180deg, var(--msgr-out-top), var(--msgr-out-bot));
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.bubble--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.bubble--link svg { stroke: #fff; flex-shrink: 0; }

.journey-aside .flo-note {
  display: block;
  margin-top: 22px;
  text-align: center;
}

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.journey::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--flow) 0%, var(--flow-soft) 50%, var(--flow) 100%);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity 400ms ease;
}
.journey.in-view::before { opacity: 1; transform: scaleY(1); }

.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding-block: 18px;
  align-items: center;
}
.journey__step + .journey__step { margin-top: 4px; }

.journey__num {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 5vw, 5rem);
  color: var(--off-white);
  letter-spacing: -0.06em;
  pointer-events: none;
  z-index: -1;
  line-height: 1;
}
@media (min-width: 720px) {
  .journey__num {
    right: 8%;
    font-size: clamp(4rem, 6vw, 6rem);
  }
}

.journey__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--flow-deep);
  position: relative;
  z-index: 2;
  border: 1.5px solid var(--line-warm);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.journey__icon svg { width: 26px; height: 26px; }
.journey__icon--coral { color: var(--coral); background: #FFF5F1; border-color: #FFD8C9; }
.journey__icon--brown { color: var(--brown); background: var(--soft-warm); border-color: var(--line-warm); }

.journey__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.journey__text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--navy-mute);
  margin-top: 4px;
  letter-spacing: 0;
}

/* ---------- 11. Checklist ------------------------------------------- */
.checklist-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 960px) {
  .checklist-wrap {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 72px;
  }
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 600px) {
  .checklist { grid-template-columns: 1fr 1fr; gap: 6px 36px; }
}

.checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding-block: 16px;
  border-bottom: 1px dashed var(--line-warm);
  font-size: 1.02rem;
  color: var(--navy-soft);
  line-height: 1.5;
}
.checklist li:last-child { border-bottom: 0; }

.checklist__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--flow);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 0 0 4px rgba(79, 168, 197, 0.16);
}
.checklist__mark svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
}

.speech-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: start;
}
.speech-card__face {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-warm);
}
.speech-card__face img { width: 100%; height: 100%; object-fit: cover; }
.speech-card__bubble {
  position: relative;
  padding: 22px 24px 24px;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  border-top-left-radius: 6px;
}
.speech-card__bubble::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -10px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-left: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
  transform: rotate(45deg);
  border-bottom-left-radius: 4px;
}
.speech-card__bubble h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--brown);
  letter-spacing: -0.015em;
}
.speech-card__bubble p {
  font-size: 0.98rem;
  color: var(--navy-soft);
  line-height: 1.6;
}
.speech-card__bubble .flo-note {
  margin-top: 16px;
  display: block;
}

/* ---------- 12. Pricing --------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 36px;
  align-items: stretch;
}
@media (min-width: 780px) {
  .pricing-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    /* stretch, not center: the two cards hold different numbers of list items,
       and centring unequal heights reads as a mistake. The + badge opts out
       below, or it would stretch into a lozenge. */
    align-items: stretch;
  }
}

.pricing-plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--coral);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--coral-soft);
  box-shadow: 0 0 0 6px rgba(255, 122, 89, 0.10);
  justify-self: center;
  align-self: center;
  margin-block: -8px;
  line-height: 1;
}

.price-card {
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-xl);
  padding: 40px 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease;
}
.price-card:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: var(--shadow-lg);
}
.price-card--accent {
  background:
    radial-gradient(closest-side at 110% -20%, rgba(79, 168, 197, 0.35), transparent 60%),
    var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.price-card--accent:hover { transform: translateY(-4px) rotate(0.4deg); }
.price-card--accent .price-card__label { color: var(--flow-soft); }
.price-card--accent .price-card__head  { color: var(--white); }
.price-card--accent .price-card__sub   { color: rgba(255, 255, 255, 0.6); }
.price-card--accent .price-card__per   { color: var(--flow-soft); }
.price-card--accent .price-card__dash  { color: var(--coral); }
.price-card--accent .price-card__list  { color: rgba(255, 255, 255, 0.82); }
.price-card--accent .price-card__list li::before { background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 122, 89, 0.18); }
.price-card--accent .price-card__divider { background: rgba(255, 255, 255, 0.18); }

.price-card__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  background: var(--coral-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  width: max-content;
}
.price-card__step--light {
  color: var(--coral);
  background: rgba(255, 122, 89, 0.18);
  border: 1px solid rgba(255, 210, 196, 0.3);
}

.price-card__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 18px;
}
/* At 375px the uppercase label wraps, and it was breaking inside "one-time",
   leaving a dangling "TIME" on its own line. The qualifier wraps whole. */
.price-card__label-tail {
  white-space: nowrap;
}
.price-card__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
/* The free setup card. A coral edge so a zero price does not make Part 1 read
   as the weaker card, kept deliberately lighter than the navy card because the
   monthly fee is the thing actually being sold. */
.price-card--free {
  border-color: var(--coral-soft);
}
.price-card__was {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--navy-mute);
  text-decoration-thickness: 2px;
  /* On top of the head's own 4px gap. At half the size of the figure beside
     it, 4px alone reads as one run of digits. */
  margin-inline-end: 8px;
}
/* Coral is what makes the zero read as a giveaway rather than an omission. */
.price-card__free {
  color: var(--coral);
}
.price-card__note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--navy-mute);
}

.price-card__dash {
  display: inline-block;
  margin-inline: 6px;
  color: var(--coral);
  font-weight: 500;
}
.price-card__per {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--brown);
  margin-inline-start: 8px;
  letter-spacing: 0;
}
.price-card__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy-mute);
}
.price-card__divider {
  height: 1px;
  background: var(--line-warm);
  margin-block: 22px;
}
.price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--navy-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}
.price-card__list li {
  position: relative;
  padding-inline-start: 22px;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--flow);
  box-shadow: 0 0 0 3px rgba(79, 168, 197, 0.18);
}

.pricing-grid + .pricing-cta {
  margin-top: 40px;
}

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  padding: 32px 36px;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pricing-cta::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(closest-side, rgba(79, 168, 197, 0.18), transparent 70%);
  pointer-events: none;
}
.pricing-cta__copy { flex: 1 1 280px; position: relative; z-index: 1; }
.pricing-cta__copy h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  margin: 0 0 6px;
  color: var(--navy);
  letter-spacing: -0.018em;
}
.pricing-cta__copy p { color: var(--navy-soft); font-size: 1rem; }

/* ---------- 13. Flo + confetti reaction ----------------------------- */
.flo-react {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
}
.flo-react--lg {
  width: clamp(200px, 30vw, 260px);
  height: clamp(200px, 30vw, 260px);
}
.flo-react__face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line-warm);
  position: relative;
  z-index: 2;
  object-fit: cover;
}
.flo-react__confetti {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: 3;
}
.flo-react__confetti span {
  position: absolute;
  display: block;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-float 4.5s ease-in-out infinite;
}
.flo-react__confetti span:nth-child(1)  { top: 8%;  left: 12%; width: 9px;  height: 9px;  background: var(--coral);     animation-delay: 0.0s; }
.flo-react__confetti span:nth-child(2)  { top: 18%; left: 88%; width: 7px;  height: 7px;  background: var(--flow);      animation-delay: 0.5s; transform: rotate(45deg); }
.flo-react__confetti span:nth-child(3)  { top: 70%; left: 92%; width:10px;  height:10px;  background: var(--brown);     animation-delay: 1.0s; border-radius: 50%; }
.flo-react__confetti span:nth-child(4)  { top: 92%; left: 60%; width: 8px;  height: 8px;  background: var(--coral);     animation-delay: 1.5s; }
.flo-react__confetti span:nth-child(5)  { top: 86%; left: 18%; width: 7px;  height: 7px;  background: var(--flow);      animation-delay: 2.0s; border-radius: 50%; }
.flo-react__confetti span:nth-child(6)  { top: 45%; left: -6%; width: 9px;  height: 9px;  background: var(--coral-deep);animation-delay: 2.5s; transform: rotate(45deg); }
.flo-react__confetti span:nth-child(7)  { top: 4%;  left: 52%; width: 6px;  height: 6px;  background: var(--brown);     animation-delay: 3.0s; }
.flo-react__confetti span:nth-child(8)  { top: 30%; left: 6%;  width: 8px;  height: 8px;  background: var(--flow-deep); animation-delay: 0.3s; border-radius: 50%; }
.flo-react__confetti span:nth-child(9)  { top: 60%; left: -8%; width: 6px;  height: 6px;  background: var(--coral);     animation-delay: 1.2s; }
.flo-react__confetti span:nth-child(10) { top: 2%;  left: 30%; width: 8px;  height: 8px;  background: var(--flow);      animation-delay: 1.8s; border-radius: 50%; }
.flo-react__confetti span:nth-child(11) { top: 22%; left: -8%; width: 7px;  height: 7px;  background: var(--brown);     animation-delay: 2.6s; transform: rotate(45deg); }
.flo-react__confetti span:nth-child(12) { top: 96%; left: 38%; width:10px;  height:10px;  background: var(--coral-deep);animation-delay: 0.8s; border-radius: 50%; }

@keyframes confetti-float {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  18%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(8px, -14px) rotate(180deg) scale(1); }
  100% { opacity: 0; transform: translate(16px, -28px) rotate(360deg) scale(0.7); }
}

/* ---------- 14. Who it's for ---------------------------------------- */
.who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-block: 28px 36px;
}
@media (min-width: 720px) {
  .who-grid { grid-template-columns: repeat(3, 1fr); }
}

.who-card {
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  position: relative;
  overflow: hidden;
}
.who-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 200px; height: 200px;
  background: radial-gradient(closest-side, rgba(79, 168, 197, 0.16), transparent 70%);
  pointer-events: none;
}
.who-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 168, 197, 0.4);
  box-shadow: var(--shadow-md);
}
.who-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--soft-warm);
  display: grid;
  place-items: center;
  color: var(--brown);
  position: relative;
  z-index: 1;
}
.who-card__icon svg { width: 28px; height: 28px; }
.who-card h3 {
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: -0.018em;
  position: relative; z-index: 1;
}
.who-card p {
  font-size: 0.98rem;
  color: var(--navy-soft);
  line-height: 1.55;
  position: relative; z-index: 1;
}

.who-closer {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--navy-soft);
  max-width: 56ch;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.5;
}
.who-closer em {
  font-style: italic;
  color: var(--brown);
  font-family: var(--font-italic);
  font-weight: 600;
}

/* ---------- 15. Why Cebu letter ------------------------------------- */
.letter {
  max-width: 660px;
  margin-inline: auto;
  position: relative;
  padding: clamp(48px, 6vw, 72px) clamp(36px, 5vw, 64px);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-warm);
  transform: rotate(-0.6deg);
  text-align: center;
}
.letter::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: linear-gradient(225deg, var(--soft-warm) 50%, transparent 50%);
  border-radius: 0 var(--radius-xl) 0 0;
}
.letter__stamp {
  position: absolute;
  top: -32px;
  right: -16px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--white);
  transform: rotate(8deg);
  overflow: hidden;
}
.letter__stamp img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.letter__eyebrow { margin-bottom: 14px; }
.letter h2 { margin-bottom: 28px; margin-inline: auto; }
.letter p {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  color: var(--navy-soft);
  margin-bottom: 18px;
  text-align: left;
}
.letter__close {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.4rem, 2.2vw, 1.65rem) !important;
  color: var(--navy) !important;
  letter-spacing: -0.02em !important;
  margin-top: 36px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.letter .magpa-line {
  position: relative;
  display: inline;
  background: linear-gradient(transparent 62%, rgba(255, 122, 89, 0.30) 62%);
  padding: 0 3px;
  font-style: italic;
  font-family: var(--font-italic);
  font-weight: 600;
  color: var(--brown);
}
.letter__sig {
  display: block;
  margin-top: 30px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--brown-deep);
  transform: rotate(-2deg);
  text-align: left;
}
.letter__lockup {
  display: block;
  margin: 40px auto 0;
  width: clamp(220px, 60%, 320px);
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(31, 41, 55, 0.10));
}

/* ---------- 16. Final CTA ------------------------------------------- */
.final-cta {
  text-align: center;
  display: grid;
  gap: 28px;
  justify-items: center;
}
.final-cta .lead {
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.final-cta__subline {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--brown);
  margin-top: 4px;
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* ---------- 17. Footer ---------------------------------------------- */
.footer {
  background: var(--navy);
  color: var(--white);
  padding-block: 80px 40px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  width: 800px;
  height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(79, 168, 197, 0.18), transparent 70%);
  pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  position: relative;
  z-index: 1;
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 36ch;
}
.footer__brand .wordmark { font-size: 1.9rem; }
.footer__brand .wordmark .otter { color: var(--brown-soft); }
.footer__brand .wordmark .flow  { color: var(--flow); }
.footer__brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.65;
}
.footer__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--flow);
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px solid rgba(79, 168, 197, 0.4);
  padding-bottom: 2px;
  width: max-content;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer__email:hover {
  color: var(--coral);
  border-color: var(--coral);
}
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
  font-size: 0.98rem;
  align-items: start;
}
/* Each group stacks as its own column. Previously the links and headings were
   direct children of the grid and flowed row by row, so a heading could land
   beside the other column's links and adding one link reshuffled the rest. */
.footer__nav-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}
.footer__nav h5 {
  grid-column: span 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 4px;
}
.footer__nav h5 + a { margin-bottom: 0; }
.footer__nav a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 200ms ease;
}
.footer__nav a:hover { color: var(--white); }

.footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 28px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.footer__made {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.footer__made svg {
  width: 12px; height: 12px;
  color: var(--coral);
}
.footer__legal-tag { font-style: italic; color: rgba(255, 255, 255, 0.45); }

/* ---------- 18. Hero load animation --------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise {
  opacity: 0;
  animation: rise 800ms cubic-bezier(.2,.7,.2,1) forwards;
}
.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 220ms; }
.rise-3 { animation-delay: 400ms; }
.rise-4 { animation-delay: 580ms; }
.rise-5 { animation-delay: 760ms; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; animation: none; }
  .journey::before { transform: scaleY(1); opacity: 1; transition: none; }
  .flo-react__confetti span,
  .hero__illustration,
  .hero__dot { animation: none; }
  html { scroll-behavior: auto; }
}
/* NOTE: the reduced-motion overrides for the sections added in the
   repositioning live at the BOTTOM of this file, after the rules they undo.
   Putting them here would lose on source order — equal specificity, and the
   `.reveal { opacity: 0 }` definition comes later in the file. */

/* ---------- 19. Mobile tightening ----------------------------------- */
@media (max-width: 720px) {
  .hero__art { max-width: 400px; }
  .price-card { padding: 32px 28px 28px; }
  .pricing-cta { padding: 28px 24px; }
  .letter { padding: 40px 28px; }
  .letter__stamp {
    width: 72px; height: 72px;
    top: -22px; right: -10px;
  }
  .footer__nav { grid-template-columns: 1fr; gap: 12px; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); padding-left: 0; padding-top: 32px; margin-top: 8px; }
  .nav__brand .wordmark { font-size: 1.25rem; }
}

/* ---------- 20. Util ------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.inline-link {
  color: var(--flow-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--flow-soft);
}
.inline-link:hover { border-bottom-color: var(--flow-deep); }

/* =====================================================================
   21. Repositioned marketing sections (dental-first)
   Everything below was added with the lead-to-booking rewrite. It reuses
   the tokens and the .band / .container / .section-head vocabulary above.

   The sub-numbering has gaps (21.4, 21.5, 21.7, 21.10). Those sections were
   the "Is this you?" quote list, the Before/After timeline, Flo's job list
   and the flow diagram — all merged into neighbours during the copy trim
   because each restated an argument the page already made. The numbers are
   left as-is so the remaining ones keep the identities they were reviewed
   under; the gaps are deliberate, not lost rules.
   ===================================================================== */

/* ---------- 21.1 Scroll entrance ------------------------------------- */
/* The IntersectionObserver on the marketing pages has always added
   `.in-view` to `.reveal` — the class just never had a rule. This is it. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1),
              transform 600ms cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view { opacity: 1; transform: none; }

/* Children arrive in sequence rather than as one block. */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1),
              transform 520ms cubic-bezier(.2,.7,.2,1);
}
.reveal--stagger.in-view > * { opacity: 1; transform: none; }
.reveal--stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger.in-view > *:nth-child(2) { transition-delay: 70ms; }
.reveal--stagger.in-view > *:nth-child(3) { transition-delay: 140ms; }
.reveal--stagger.in-view > *:nth-child(4) { transition-delay: 210ms; }
.reveal--stagger.in-view > *:nth-child(5) { transition-delay: 280ms; }
.reveal--stagger.in-view > *:nth-child(6) { transition-delay: 350ms; }
.reveal--stagger.in-view > *:nth-child(n+7) { transition-delay: 420ms; }

.section-head__lead {
  max-width: 62ch;
  margin-top: 12px;
}

/* ---------- 21.2 Nav: mobile drawer ---------------------------------- */
.nav__burger {
  margin-inline-start: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  flex: 0 0 auto;
}
.nav__burger svg { width: 22px; height: 22px; }
.nav__burger .nav__burger-close { display: none; }
.nav.is-open .nav__burger .nav__burger-open { display: none; }
.nav.is-open .nav__burger .nav__burger-close { display: block; }
@media (min-width: 880px) {
  .nav__burger { display: none; }
}

.nav__drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--line-warm);
  box-shadow: var(--shadow-md);
  padding: 18px var(--container-pad) 24px;
  /* Animated with transform/opacity so opening the panel never reflows the
     page underneath it. `visibility` keeps it out of the tab order closed. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1),
              visibility 0s linear 220ms;
}
.nav.is-open .nav__drawer {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1),
              visibility 0s;
}
@media (min-width: 880px) {
  .nav__drawer { display: none; }
}
.nav__drawer-links {
  display: flex;
  flex-direction: column;
}
.nav__drawer-links a {
  padding: 14px 4px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--line-warm);
}
.nav__drawer-links a:last-child { border-bottom: 0; }
.nav__drawer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.nav__drawer-cta .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
/* The drawer carries its own CTA, so the header pair can stay collapsed. */
.nav.is-open .nav__cta .btn--coral { display: none; }

body.nav-locked { overflow: hidden; }

/* ---------- 21.3 Leak cards (the problem) ---------------------------- */
.leak-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .leak-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .leak-grid { grid-template-columns: repeat(4, 1fr); } }

.leak-card {
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
.leak-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.leak-card__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: 12px;
}
.leak-card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0 0 8px;
  color: var(--navy);
}
.leak-card p { margin: 0; color: var(--navy-mute); font-size: 0.97rem; }

.leak-closer {
  margin: 40px auto 0;
  max-width: 66ch;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--navy-soft);
}

/* ---------- 21.6 The inquiry-to-booking rail ------------------------- */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
/* auto-fit rather than a fixed 7 columns: the row wraps cleanly at every
   width instead of squeezing seven cards into a phone. */
@media (min-width: 620px) {
  .rail { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px 20px; }
}
/* Wide enough for all seven at once. This is the one width where the pipeline
   reads as a single left-to-right flow, so it also gets the connecting line —
   drawn only here, because a line across a wrapped grid would be nonsense. */
@media (min-width: 1180px) {
  .rail {
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
  }
  /* One segment per step rather than a single line across the whole row: it
     lands exactly between two dots whatever the column width and gap work out
     to, and it can't overshoot the last dot. */
  .rail__step::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 42px;
    right: -16px;          /* reaches across the grid gap to the next dot */
    height: 2px;
    background: var(--coral-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms cubic-bezier(.2,.7,.2,1);
  }
  .rail__step:last-child::after { content: none; }
  .rail.in-view .rail__step::after { transform: scaleX(1); }
  .rail.in-view .rail__step:nth-child(1)::after { transition-delay: 120ms; }
  .rail.in-view .rail__step:nth-child(2)::after { transition-delay: 210ms; }
  .rail.in-view .rail__step:nth-child(3)::after { transition-delay: 300ms; }
  .rail.in-view .rail__step:nth-child(4)::after { transition-delay: 390ms; }
  .rail.in-view .rail__step:nth-child(5)::after { transition-delay: 480ms; }
  .rail.in-view .rail__step:nth-child(6)::after { transition-delay: 570ms; }
  .rail__step h3 { font-size: 0.96rem; }
  .rail__step p { font-size: 0.88rem; }
}
.rail__step {
  position: relative;
  padding-top: 6px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1),
              transform 520ms cubic-bezier(.2,.7,.2,1);
}
.rail.in-view .rail__step { opacity: 1; transform: none; }
.rail.in-view .rail__step:nth-child(1) { transition-delay: 0ms; }
.rail.in-view .rail__step:nth-child(2) { transition-delay: 90ms; }
.rail.in-view .rail__step:nth-child(3) { transition-delay: 180ms; }
.rail.in-view .rail__step:nth-child(4) { transition-delay: 270ms; }
.rail.in-view .rail__step:nth-child(5) { transition-delay: 360ms; }
.rail.in-view .rail__step:nth-child(6) { transition-delay: 450ms; }
.rail.in-view .rail__step:nth-child(7) { transition-delay: 540ms; }

.rail__dot {
  /* Sits above the connector line drawn behind the row at >=1180px. */
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
  box-shadow: var(--shadow-coral);
}
.rail__step h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0 0 6px;
  color: var(--navy);
}
.rail__step p { margin: 0; color: var(--navy-mute); font-size: 0.94rem; }

/* ---------- 21.8 Conversation demo ----------------------------------- */
/* The hero art used to be a single illustration with the handwritten note
   hanging over its bottom-right corner (position:absolute). It is now a
   conversation card, so this variant puts the note back into normal flow
   underneath it.

   The hero render is a centred grid stack, so the number of children varies
   safely: phone, then the result chips, then the handwritten note. */
.hero__art--convo {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.hero__art--convo .hero__flonote {
  position: static;
  text-align: center;
  margin-top: 2px;
}

.convo { display: grid; justify-items: center; gap: 16px; width: 100%; }
.convo .phone-mock { width: 100%; max-width: 360px; }
.convo--demo { margin-inline: auto; max-width: 420px; }

.convo [data-convo-msg],
.convo [data-convo-chip] {
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
}
.convo [data-convo-msg].is-pending,
.convo [data-convo-chip].is-pending {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.bubble--typing {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-height: 34px;
}
.bubble--typing[hidden] { display: none !important; }
.bubble--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: convo-typing 1.1s ease-in-out infinite;
}
.bubble--typing span:nth-child(2) { animation-delay: 160ms; }
.bubble--typing span:nth-child(3) { animation-delay: 320ms; }
@keyframes convo-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-3px); opacity: 0.9; }
}

.convo__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.convo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--flow-soft);
  color: var(--flow-deep);
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.convo-chip svg { width: 13px; height: 13px; flex: 0 0 13px; }

.convo__replay {
  background: none;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: 10px 20px;
  color: var(--navy-mute);
  font-size: 0.86rem;
  font-weight: 600;
}
.convo__replay:hover { color: var(--brown); border-color: var(--brown-soft); }
.convo__replay[hidden] { display: none; }
/* The hero pins a handwritten note under the phone; a replay control would
   land on top of it, and the hero is not where someone goes looking for one. */
.convo--hero .convo__replay { display: none; }

/* The hero's two columns used to finish level. Adding the composer made the
   right one ~50px taller, which pushed the chips and the handwritten note
   below the copy's last line. Rather than shrink the composer (it is the
   thing visitors are meant to click), buy the height back from the chips:
   at this size all three fit on ONE row instead of wrapping to two, which is
   both tidier and almost exactly the height the composer cost. Hero only —
   the #demo section has room and keeps the larger chips. */
.convo--hero .convo-chip { padding: 6px 11px; font-size: 0.78rem; }
.convo--hero .convo-chip svg { width: 12px; height: 12px; flex-basis: 12px; }
/* Stays wrap, deliberately. One row is what restores the balance at desktop
   width, but the slack is only ~12px — nowrap would push the chips out of the
   column the moment the viewport narrowed, and a chip row that wraps is far
   better than one that overflows. */
.convo--hero .convo__chips { gap: 6px; }
.convo--hero .convo__composer { margin-top: 8px; padding-top: 8px; }


/* ---- Live demo: the composer and the thread it feeds --------------------
   Everything here is scoped to a page that has a demo clinic configured, or
   to .is-live. With no clinic set, the markup below never renders and the
   mockup is byte-for-byte the animation it always was. */

.convo__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--msgr-line);
}
.convo__composer[hidden] { display: none; }

.convo__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--msgr-line);
  background: var(--msgr-in);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: var(--msgr-ink);
  font-family: inherit;
  /* 16px, not the 0.83rem the bubbles use: below 16px, iOS Safari zooms the
     page when the field takes focus, and this field sits inside a frame that
     is rotated and max-width capped, so the zoom lands somewhere arbitrary. */
  font-size: 16px;
  line-height: 1.3;
}
.convo__input::placeholder { color: var(--msgr-mute); }
.convo__input:focus-visible {
  outline: 2px solid var(--msgr-out-top);
  outline-offset: 1px;
}

.convo__send {
  flex: 0 0 auto;
  /* 44px is the touch-target floor, and this is the primary action of the whole
     live demo on a phone. Free here: the input beside it is 50px tall, so the
     composer's height does not move. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--msgr-out-top), var(--msgr-out-bot));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.convo__send svg { width: 15px; height: 15px; stroke: #fff; }
.convo__send:disabled { opacity: 0.45; cursor: default; }

/* Bounded only once live. The scripted animation keeps its grow-to-fit frame,
   so no existing layout moves; a live chat would otherwise stretch the phone
   down the page forever. This is also what finally makes stickToBottom() do
   something — its comment has claimed a fixed-height body since day one. */
.convo.is-live .phone-mock__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  max-height: min(420px, 46vh);
  /* dvh after vh, deliberately: vh does not shrink when the on-screen keyboard
     opens, so on a phone mid-typing the thread would run under the keyboard.
     Browsers without dvh simply keep the line above. */
  max-height: min(420px, 46dvh);
}
/* Once the hero thread is live, restart is the only way back to the animation,
   and the chips that shared that space are hidden anyway. */
.convo--hero.is-live .convo__replay { display: inline-flex; }
.convo__chips[hidden] { display: none; }

.convo__fail {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--msgr-mute);
  text-align: center;
}
.convo__fail a { color: var(--msgr-out-top); font-weight: 600; }

.convo__note {
  margin: 0;
  max-width: 40ch;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--navy-mute);
  text-align: center;
}
.convo__note[hidden] { display: none; }


.demo-wrap { display: grid; justify-items: center; gap: 18px; }
.demo-caption {
  max-width: 60ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--navy-mute);
  margin: 0;
}

/* ---------- 21.9 Category split -------------------------------------- */
.split-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .split-grid { grid-template-columns: repeat(2, 1fr); } }
.split-card {
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  background: var(--white);
}
.split-card--accent {
  background: linear-gradient(180deg, var(--white), var(--cream));
  border-color: var(--cream-deep);
  box-shadow: var(--shadow-card);
}
.split-card__head {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 4px;
  color: var(--navy);
}
.split-card__sub {
  margin: 0 0 18px;
  font-family: var(--font-italic);
  font-size: 1.02rem;
  color: var(--brown);
}
.split-card__list { list-style: none; margin: 0; padding: 0; }
.split-card__list li {
  padding: 9px 0 9px 22px;
  position: relative;
  color: var(--navy-soft);
  border-bottom: 1px dashed var(--line-warm);
  font-size: 0.97rem;
}
.split-card__list li:last-child { border-bottom: 0; }
.split-card__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brown-soft);
}
.split-card--accent .split-card__list li::before { background: var(--coral); }

.connect-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.connect-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--line-warm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy-soft);
}

/* ---------- 21.11 Follow-up ------------------------------------------ */
/* Two equal cards. They were 1.15fr/1fr and top-aligned while the right one was
   a washed-out "not built yet" list; both now carry delivered capability, so
   they get equal tracks and stretch to a matched height. */
.roadmap-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .roadmap-grid { grid-template-columns: repeat(2, 1fr); } }
.roadmap-card {
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 28px 26px;
}
.roadmap-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--soft-warm);
  color: var(--navy-mute);
  margin-bottom: 18px;
}
.roadmap-card__tag--now { background: var(--coral-soft); color: var(--coral-deep); }
.checklist--tight li { padding-block: 8px; }

/* ---------- 21.12 Who it's for --------------------------------------- */
.who-primary { margin-bottom: 20px; }
.who-hero {
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  background: linear-gradient(135deg, var(--white), var(--cream));
  border: 1px solid var(--cream-deep);
  box-shadow: var(--shadow-card);
}
.who-hero__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral-deep);
  margin-bottom: 10px;
}
.who-hero h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin: 0 0 12px;
  color: var(--navy);
}
.who-hero p {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--navy-soft);
}
.who-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--coral-deep);
}
.who-hero__link svg { width: 15px; height: 15px; }
.who-hero__link:hover { color: var(--brown-deep); }

.who-grid--secondary { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .who-grid--secondary { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 21.13 Trust / safety ------------------------------------- */
.trust-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-col {
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  border: 1px solid var(--line-warm);
  background: var(--white);
}
.trust-col h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  margin: 0 0 18px;
  color: var(--navy);
}
.trust-col ul { list-style: none; margin: 0; padding: 0; }
.trust-col li {
  position: relative;
  padding: 9px 0 9px 30px;
  color: var(--navy-soft);
  font-size: 0.97rem;
}
.trust-col--do li::before,
.trust-col--dont li::before {
  position: absolute;
  left: 4px;
  top: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
}
.trust-col--do li::before {
  content: "✓";
  background: var(--flow-soft);
  color: var(--flow-deep);
}
.trust-col--dont { background: var(--off-white); }
.trust-col--dont li::before {
  content: "✕";
  background: var(--coral-soft);
  color: var(--coral-deep);
}

/* ---------- 21.14 Opportunity calculator ----------------------------- */
.calc {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .calc { grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 36px 34px; }
}
.calc__inputs {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-content: start;
  /* Grid items default to min-width:auto, so a long unbreakable result (a
     ₱1,000,000,000,000 pool at the inputs' own maximums) propagated its
     min-content width up into the shared column and gave the whole page
     horizontal scroll on a phone. Both children have to be allowed to shrink. */
  min-width: 0;
}
@media (min-width: 560px) { .calc__inputs { grid-template-columns: repeat(2, 1fr); } }
.calc__field { display: grid; gap: 6px; }
.calc__field--wide { grid-column: 1 / -1; }
.calc__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy-soft);
}
.calc__field input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-sm);
}
.calc__field input[type="number"]:focus-visible {
  outline: 2px solid var(--flow);
  outline-offset: 1px;
  background: var(--white);
}
.calc__field input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--coral);
}
.calc__hint { font-size: 0.82rem; color: var(--navy-mute); }

.calc__results {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  align-content: start;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-warm);
  /* An oversized figure drops onto its own line rather than widening the row. */
  flex-wrap: wrap;
}
.calc__row-label { font-size: 0.92rem; color: var(--navy-mute); min-width: 0; }
.calc__row-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  /* Deliberately NOT white-space: nowrap — that is what let a long peso string
     force the page wider than the viewport. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.calc__row--total {
  border-bottom: 0;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--line-warm);
}
.calc__row--total .calc__row-label { color: var(--navy); font-weight: 600; }
.calc__row--total .calc__row-value {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  color: var(--coral-deep);
}
.calc__disclaimer {
  margin: 14px 0 18px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--navy-mute);
}
.calc__results .btn { justify-content: center; }

/* ---------- 21.15 FAQ ------------------------------------------------ */
.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin-inline: auto;
}
.faq__item {
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--brown-soft);
  border-bottom: 2px solid var(--brown-soft);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item summary:focus-visible { outline: 2px solid var(--flow); outline-offset: -2px; }
.faq__item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--navy-soft);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* ---------- 21.16 Final CTA actions ---------------------------------- */
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

/* Shown only when Try Flo Live has taken the ghost slot. That button replaced
   the one link to #demo on the entire site, so the example conversation needs a
   way back in — as a text link, so it does not become a third button competing
   with the two above it. */
.final-cta__aside {
  margin: 14px 0 0;
  font-size: 0.95rem;
}
.final-cta__aside a {
  color: var(--navy);
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.final-cta__aside a:hover { opacity: 1; }

/* ---------- 21.17 Reduced motion (must come last) -------------------- */
/* These undo the entrances defined above. Source order matters: at equal
   specificity the later rule wins, so this block has to sit after them. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view,
  .reveal--stagger > *,
  .reveal--stagger.in-view > *,
  .rail__step,
  .rail.in-view .rail__step {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  /* The connector is simply drawn, not animated into place. */
  .rail__step::after,
  .rail.in-view .rail__step::after {
    transform: scaleX(1);
    transition: none;
    transition-delay: 0s;
  }

  /* The wiggle is a flourish, not information. */
  .phone-mock:hover { animation: none; }

  /* The demo shows its whole transcript at once. conversation-demo.js bails
     out before hiding anything, but this covers the frame between parse and
     script running, and any bubble left mid-state. */
  .convo [data-convo-msg],
  .convo [data-convo-chip],
  .convo [data-convo-msg].is-pending,
  .convo [data-convo-chip].is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Scoped to the scripted animation. In LIVE mode this bubble is the only
     thing telling the visitor their message is being answered, and Flo's turn
     is a model call that takes seconds — killing it outright left reduced-motion
     visitors staring at a phone that looked broken, with a dimmed send button
     as the sole clue. The dots below are still frozen, so nothing animates. */
  .convo:not(.is-live) .bubble--typing { display: none !important; }
  .bubble--typing span { animation: none; }

  .nav__drawer { transition: none; }
  .leak-card:hover { transform: none; }
}

/* ---------- 21.18 Mobile tightening (new sections) ------------------- */
@media (max-width: 560px) {
  /* Thirteen sections at the desktop rhythm still makes for a long phone
     scroll, so the band padding tightens on top of the sections that were
     merged away. */
  :root { --section-pad-y: 62px; }
  .split-card, .trust-col, .roadmap-card { padding: 24px 20px; }
  .who-hero { padding: 28px 22px; }
  .calc { padding: 22px 18px; }
  .calc__results { padding: 18px 16px; }
  .leak-closer { font-size: 1rem; }
  .convo-chip { font-size: 0.79rem; padding: 6px 11px; }
}