/* ── page scale ────────────────────────────────────────────────────
   Everything is drawn 10% larger, matching the browser at 110% zoom:
   rem type scales from the root here, and the px-based container,
   gutter and spacing scale are stepped up by the same factor below. */
html {
  font-size: 110%;
  /* iOS Safari and Chrome on Android inflate text per block when they judge
     it too small for its container. It only happens on phones, it applies to
     some blocks and not others, and it overrides the stylesheet at render
     time — which is why the same element could look right on a monitor and
     oversized on a phone. This turns it off so the CSS is what renders. */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { font-family: 'DM Sans', sans-serif; background: #FBFCFB; color: #242827; overflow-x: hidden; }

a { text-decoration: none; color: inherit; }

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

:root {
  --green: #007C50;
  --green-hover: #006642;
  --green-pale: #EBF5F0;
  --green-mid: #C3DED4;
  --green-dark: #1a3a2e;
  --dark: #242827;
  --gray: #657570;
  --gray-light: #F5F6F6;
  --white: #fff;

  /* ── one spacing scale for the whole page ────────────────────────
     Every gap and padding below the hero uses these. */
  --sp-1: 9px;    --sp-2: 18px;  --sp-3: 26px;
  --sp-4: 44px;   --sp-5: 70px;  --sp-6: 114px;  --sp-7: 185px;
  --gutter: 35px;

  --max: 1408px;
  --r: 20px;

  /* ── Fable: light-surface tokens (mirror of the hero's dark glass) ── */
  --fable-ink:        #0d2b1f;                     /* headings on light */
  --fable-surface:    linear-gradient(145deg, #F8FBF9 0%, #EFF4F1 100%);
  --fable-line:       rgba(6,21,16,0.08);
  --fable-lift:       0 1px 2px rgba(6,21,16,.04), 0 14px 30px -20px rgba(6,21,16,.30);
  --fable-noise-url:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

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

.flex { display: flex; align-items: center; }

/* ── BUTTONS ── */
.rounded-btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border: 1.5px solid var(--green);
  border-radius: 10px;
  padding: 10px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.rounded-btn:hover { background: var(--green-hover); border-color: var(--green-hover); }

.rounded-btn.transparent { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }

.rounded-btn.transparent:hover { background: rgba(255,255,255,0.15); }

.rounded-btn.dark-outline { background: transparent; color: var(--dark); border-color: var(--dark); }

.rounded-btn.dark-outline:hover { background: var(--dark); color: #fff; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
#main-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  height: 68px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

#main-nav.is-scrolled {
  border-bottom-color: rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(6,21,16,0.05);
}

#main-nav .container { height: 100%; justify-content: space-between; }

.logo-text {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1;
}

.logo-text .wm { color: var(--green); margin-right: 5px; }

.logo-text em { font-style: italic; color: var(--green); }

/* ══════════════════════════════════════
   HERO — Fable: gradient, orbs, noise
══════════════════════════════════════ */
.hero-wrap {
  padding: 64px 0 88px;
  background: transparent;
}

.hero-inner {
  position: relative;
  width: 100%;
  min-height: 520px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2b1f 0%, #0a1f17 40%, #061510 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fable-orb-1 {
  position: absolute; top: -180px; left: -60px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, #007C50 0%, transparent 70%);
  opacity: .18; filter: blur(80px); pointer-events: none;
}

.fable-orb-2 {
  position: absolute; bottom: -140px; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, #34d399 0%, transparent 70%);
  opacity: .18; filter: blur(80px); pointer-events: none;
}

.hero-split {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  background: linear-gradient(160deg, rgba(107,201,107,0.085) 0%, rgba(107,201,107,0.02) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 46%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 46%);
  pointer-events: none;
}

.fable-noise {
  position: absolute; inset: 0; opacity: .25; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: center;
  gap: 76px;
  min-height: 0;
  padding: 76px 88px 80px;
}

.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(107,201,107,0.1);
  border: 1px solid rgba(107,201,107,0.25);
  color: #6BC96B;
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 30px;
  width: fit-content;
}

.hero-content h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 24px;
}

.hero-content h1 b { font-weight: 400; font-style: italic; color: #6BC96B; }

.hero-content p {
  font-size: 1.05rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.52);
  max-width: 460px;
  margin: 0 0 40px;
}

.hero-content .rounded-btn {
  background: var(--green);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 13px 30px;
  font-size: 0.95rem;
  font-weight: 600;
  width: fit-content;
  box-shadow: 0 6px 20px rgba(0,124,80,0.4);
  transition: background .2s, transform .15s, box-shadow .2s;
}

.hero-content .rounded-btn:hover {
  background: #00a368;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,124,80,0.5);
}

.hero-cta-row {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
}

.hero-actions { display: contents; }

.hero-trust {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  max-width: 460px;
}

.hero-trust span {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.34);
  white-space: nowrap;
}

.hero-trust span::before {
  content: '\2726';
  color: rgba(107,201,107,0.55);
  margin-right: 7px;
  font-size: 0.7rem;
}

.hero-link {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color .2s;
}

.hero-link:hover { color: #6BC96B; }

/* ── Preview card ── */
.proof { position: relative; z-index: 2; }

.proof::before {
  content: '';
  position: absolute;
  inset: -22% -10% -18%;
  background: radial-gradient(56% 50% at 50% 50%, rgba(52,211,153,0.20) 0%, transparent 70%);
  filter: blur(52px);
  pointer-events: none;
}

.proof-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,0.115) 0%,
      rgba(255,255,255,0.055) 42%,
      rgba(255,255,255,0.028) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  box-shadow:
    0 1px 2px rgba(6,21,16,0.35),
    0 18px 36px -10px rgba(6,21,16,0.55),
    0 44px 88px -28px rgba(6,21,16,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(6,21,16,0.25);
}

.proof-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,201,107,0.6), transparent);
  border-radius: 99px;
  z-index: 3;
}

:root {
  /* nudge until the pupils sit on the same line */
  --crop-before: center 44%;
  --crop-after:  center 42%;
}

.proof-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(1.03);
  -webkit-mask-image: radial-gradient(88% 88% at 50% 46%, #000 34%, rgba(0,0,0,0.55) 72%, transparent 100%);
  mask-image: radial-gradient(88% 88% at 50% 46%, #000 34%, rgba(0,0,0,0.55) 72%, transparent 100%);
}

.shot-before { object-position: var(--crop-before); }

.shot-after  { object-position: var(--crop-after); opacity: 0; }

.proof-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top,
    rgba(6,21,16,0.5) 0%,
    rgba(6,21,16,0.24) 40%,
    transparent 100%);
  pointer-events: none;
}

.proof-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 60px 10px rgba(6,21,16,0.18);
  pointer-events: none;
}

.proof-label {
  position: absolute;
  left: 20px; bottom: 16px;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(6,21,16,0.7);
  z-index: 2;
}

.lbl-after { opacity: 0; }

@keyframes revealIn  { 0%, 26% { opacity: 0 } 42%, 86% { opacity: 1 } 100% { opacity: 0 } }

@keyframes revealOut { 0%, 26% { opacity: 1 } 42%, 86% { opacity: 0 } 100% { opacity: 1 } }

.shot-after, .lbl-after   { animation: revealIn  9s cubic-bezier(.4,0,.2,1) 1.2s infinite; }

.shot-before, .lbl-before { animation: revealOut 9s cubic-bezier(.4,0,.2,1) 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .shot-after, .lbl-after   { animation: none; opacity: 1; }
  .shot-before, .lbl-before { animation: none; opacity: 0; }
}

.proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px 13px;
}

.proof-eyebrow {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.proof-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px 16px;
}

.proof-note {
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.32);
  margin: 0;
  flex: 1;
  min-width: 0;
}

.proof-mark {
  font-family: 'DM Serif Display', serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

.proof-mark em { font-style: italic; color: rgba(107,201,107,0.6); }

@media (max-width: 991px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 52px 40px 48px;
  }

  /* let the copy, the card and the buttons order independently */
  .hero-content { display: contents; }
  .hero-actions { display: contents; }

  .hero-content h1 { order: 1; text-align: center; margin: 0 0 30px; }
  .proof         { order: 2; max-width: 380px; width: 100%; margin: 0 auto 32px; }
  .hero-content p  { order: 3; text-align: center; margin: 0 auto 30px; }
  .hero-cta-row  { order: 4; justify-content: center; width: 100%; max-width: 400px; }
  .hero-tag      { order: 5; margin: 20px auto 0; }
  .hero-trust    { order: 6; justify-content: center; margin-left: auto; margin-right: auto; }

  .hero-split { display: none; }
}

@media (max-width: 400px) {
  .hero-inner { padding: 32px 18px 30px; }
  .proof { max-width: 260px; }
  .hero-trust span { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content .rounded-btn { transition: none; }
}

/* ══════════════════════════════════════
   STEPS SECTION — white bg, 3 cards
   Cards: image top (no bg), title, text
══════════════════════════════════════ */

.section-title-centered {
  text-align: center;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  color: var(--dark);
  text-wrap: balance;
  margin-bottom: 52px;
  line-height: 1.2;
}

.section-title-centered b { font-style: italic; font-weight: 400; }

/* the full heading cannot hold one line on a phone at this size, so the
   narrow variant carries the same idea in fewer words */
.ttl-narrow { display: none; }

@media (max-width: 767px) {
  .ttl-wide { display: none; }
  .ttl-narrow { display: inline; }
}

/* desktop: plain grid. grid-auto-rows keeps every card the same height even
   if one title wraps, so the row can never look ragged. */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--gutter);
}

.steps-grid > .step-card { grid-column: span 4; }

.steps-grid .step-card,
.steps-swiper-wrap .swiper-slide .step-card { height: 100%; }

/* swiper sizes slides to the tallest by default; let them stretch instead */
.steps-swiper-wrap .swiper-slide { height: auto; }

/* mobile swiper wrapper — hidden on desktop */
.steps-swiper-wrap { display: none; position: relative; }

.step-card { display: flex; flex-direction: column; }

.step-img {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  overflow: hidden;
  background: var(--fable-surface);
  border: 1px solid var(--fable-line);
  box-shadow: var(--fable-lift);
  aspect-ratio: 4 / 5;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: rgba(13,43,31,0.28);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

/* orb — the light-mode echo of .fable-orb-1 */
.step-img::before {
  content: '';
  position: absolute; z-index: -1;
  top: -35%; left: -20%;
  width: 90%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  opacity: .10; filter: blur(46px);
  pointer-events: none;
}

/* noise — same layer as the hero, dialled down for light */
.step-img::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  background-image: var(--fable-noise-url);
  background-repeat: repeat;
  opacity: .05;
  pointer-events: none;
}

/* the card itself now carries the Fable surface (image panels retired) */
.step-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fable-surface);
  border: 1px solid var(--fable-line);
  border-radius: 22px;
  /* four layers, same structure as the hero panel: contact edge, close, mid,
     wide ambient. A single blur reads flat next to it. */
  box-shadow: 0 1px 2px rgba(6,21,16,.05),
              0 6px 14px -8px rgba(6,21,16,.11),
              0 18px 34px -18px rgba(6,21,16,.17),
              0 40px 72px -34px rgba(6,21,16,.24);
  padding: 34px 30px 38px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
}

@media (hover: hover) {
  .step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(6,21,16,.05),
                0 10px 20px -8px rgba(6,21,16,.13),
                0 26px 46px -18px rgba(6,21,16,.20),
                0 54px 90px -34px rgba(6,21,16,.28);
  }
}

.step-card::before {
  content: '';
  position: absolute; z-index: -1;
  top: -46%; left: -18%;
  width: 78%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  opacity: .11; filter: blur(46px);
  pointer-events: none;
}

.step-card::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  background-image: var(--fable-noise-url);
  background-repeat: repeat;
  opacity: .05;
  pointer-events: none;
}

.step-img svg { opacity: 0.22; }

.step-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.step-num {
  position: absolute; top: 14px; left: 14px;
  min-width: 32px; height: 32px;
  padding: 0 9px;
  background: rgba(0,124,80,0.07);
  border: 1px solid rgba(0,124,80,0.16);
  color: var(--green);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
}

/* pillar label — same treatment as .proof-eyebrow in the hero */
.step-kicker {
  display: block;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.step-card h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.26rem;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--fable-ink);
  line-height: 1.24;
  margin: 10px 0 0;
  text-align: left;
  max-width: 100%;
}

.step-card p {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--gray);
  line-height: 1.72;
  text-align: left;
  margin: 12px 0 0;
  max-width: 100%;
}

/* swiper nav — arrows BELOW the slide, centered */
.steps-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.steps-nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--dark);
  font-size: 1rem;
  transition: background .2s;
  --swiper-navigation-size: 14px;
  --swiper-navigation-color: var(--dark);
}

.steps-nav-btn:hover { background: var(--green-pale); }

/* ══════════════════════════════════════
   HALF CONTENT — gray bg, img LEFT, text RIGHT
══════════════════════════════════════ */
/* one continuous ground: sections are separated by space and type,
   not by alternating full-width colour bands */
.half-section {
  background: transparent;
  padding: var(--sp-6) 0 var(--sp-6);
  /* the photo bleeds past the container on the left — clip it here so it
     never widens the page or produces a horizontal scrollbar */
  overflow: hidden;
}

.half-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
}

/* bleeds past the container on the left, mirroring the steps shot on the
   right, so the page reads as a composition rather than a stack */
.half-stage {
  grid-column: 1 / span 5;
  margin-left: calc(-1 * var(--edge-l, 0px));
  width: calc(100% + var(--edge-l, 0px));
  max-width: none;
  border-radius: 0 24px 24px 0;
}

@media (min-width: 992px) {
  .half-section { --edge-l: calc((100vw - min(var(--max), 100vw - 88px)) / 2); }
}

.half-text  { grid-column: 7 / span 6; }

/* image is on LEFT, text on RIGHT — matching original */
.half-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  width: 100%;
  background: linear-gradient(135deg, #c8e6d8 0%, #8ec4a8 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  color: rgba(0,0,0,0.2); font-size: 0.8rem;
}

.half-img svg { opacity: 0.2; }

.half-text { max-width: 100%; }

.half-text { width: 100%; }

.half-eyebrow {
  margin: 0 0 14px;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.half-text h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--dark);
  margin-bottom: 20px;
}

.half-text h2 b { font-style: italic; font-weight: 400; }

.half-text p {
  font-size: 0.92rem;
  color: var(--gray);
  line-height: 1.78;
  margin-bottom: 14px;
}

.half-text .rounded-btn { margin-top: 20px; }

/* ══════════════════════════════════════
   STORIES — white bg, swiper cards
══════════════════════════════════════ */
.stories-section {
  background: #fff;
  padding: 80px 0;
}

.stories-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 44px;
  flex-wrap: wrap; gap: 12px;
}

.stories-head h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  color: var(--dark);
  text-wrap: balance;
}

.stories-head h2 b { font-style: italic; font-weight: 400; }

.view-all {
  font-size: 0.82rem;
  color: var(--gray);
  transition: color .2s;
}

.view-all:hover { color: var(--green); }

/* story cards — tall portrait image */
.story-card {
  display: flex; flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
}

.story-img {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: rgba(255,255,255,0.4); font-size: 0.78rem;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}

.story-img svg { opacity: 0.3; }

.story-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: #012d20;
  margin: 24px 0 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card p {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--gray);
  line-height: 1.72;
  text-align: left;
  margin: 16px 0 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--green);
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  margin-top: 20px;
  transition: opacity .2s;
}

.read-link:hover { opacity: 0.7; }

/* shared swiper */
.swiper-wrap { position: relative; overflow: hidden; }

/* stories arrows — hidden on desktop, visible on mobile/tablet */
.swiper-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: none;
  align-items: center; justify-content: center;
  z-index: 10; cursor: pointer;
  --swiper-navigation-size: 14px;
  --swiper-navigation-color: var(--green);
  transition: opacity .2s;
}

.swiper-btn-next { right: 8px; }

.swiper-btn-prev { left: 8px; }

/* hide disabled arrow entirely like reference */
.swiper-btn.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* steps arrows — hide disabled too */
.steps-swiper-wrap .swiper-button-disabled { opacity: 0; pointer-events: none; }

@media (max-width: 991px) {
  .swiper-btn { display: flex; }
}

/* steps arrows — centered on image via JS */
.steps-swiper-wrap .swiper-button-prev,
.steps-swiper-wrap .swiper-button-next {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; cursor: pointer;
  --swiper-navigation-size: 14px;
  --swiper-navigation-color: var(--green);
  margin-top: 0;
}

.steps-swiper-wrap .swiper-button-prev { left: 8px; }

.steps-swiper-wrap .swiper-button-next { right: 8px; }

/* ══════════════════════════════════════
   FAQ — FAQ LEFT, image+box RIGHT
══════════════════════════════════════ */
.faq-section {
  background: transparent;
  padding: var(--sp-6) 0 var(--sp-6);
}

.faq-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.faq-left  { grid-column: 1 / span 7; }

.faq-right { grid-column: 9 / span 4; }

/* the right column sticks while the twelve questions scroll past it */
@media (min-width: 992px) {
  .faq-right { position: sticky; top: 96px; }
}

/* LEFT: heading + list */
.faq-eyebrow {
  margin: 0 0 16px;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.faq-left h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  color: var(--dark);
  text-wrap: balance;
  margin-bottom: 16px;
  line-height: 1.15;
}

.faq-left h2 b { font-style: italic; font-weight: 400; }

.faq-intro {
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 560px;
}

.faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }

.faq-item:first-of-type { border-top: 1px solid rgba(0,0,0,0.1); }

.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0;
  cursor: pointer; gap: 16px; user-select: none;
}

.faq-q:hover .faq-q-text { color: var(--green); }

.faq-q-text {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.5;
  transition: color .2s;
  display: flex; gap: 12px;
}

.faq-q-text span { color: var(--dark); font-weight: 400; flex-shrink: 0; }

.faq-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray); font-size: 1.1rem; font-weight: 300;
  transition: transform .25s, color .2s;
  line-height: 1;
}

.faq-q.open .faq-icon { transform: rotate(45deg); color: var(--green); }

.faq-q.open .faq-q-text { color: var(--green); }

.faq-a {
  overflow: hidden; max-height: 0;
  transition: max-height .35s ease, padding .3s;
}

.faq-a.open { max-height: 500px; padding-bottom: 22px; }

.faq-a p { font-size: 0.92rem; color: var(--gray); line-height: 1.75; max-width: 62ch; }

/* RIGHT: image + still have questions */
.faq-right {
  display: flex; flex-direction: column; gap: 16px;
}

.faq-img svg { opacity: 0.4; }

.faq-img span { text-align: center; line-height: 1.7; opacity: .8; }

.still-q {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(160deg, #0d2b1f 0%, #0a1f17 40%, #061510 100%);
  padding: 32px 30px 34px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(6,21,16,.06),
              0 10px 22px -12px rgba(6,21,16,.20),
              0 30px 56px -24px rgba(6,21,16,.26);
}

.still-q::before {
  content: ''; position: absolute; z-index: -1;
  top: -50%; left: -20%; width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, #007C50 0%, transparent 70%);
  opacity: .32; filter: blur(50px); pointer-events: none;
}

.still-q h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 6px;
}

.still-q h2 b { font-style: italic; font-weight: 400; }

.still-q .rounded-btn { margin-top: 18px; }

/* ══════════════════════════════════════
   FOOTER — dark green
══════════════════════════════════════ */
footer {
  background: var(--green-dark);
  color: rgba(255,255,255,0.55);
  padding: 48px 0 0;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.footer-col ul li a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  transition: color .2s;
}

.footer-col ul li a:hover { color: rgba(255,255,255,0.9); }

.footer-socials { display: flex; gap: 8px; align-items: center; }

.footer-socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem; font-weight: 600;
  transition: background .2s, border-color .2s;
}

.footer-socials a:hover { background: var(--green); border-color: var(--green); color: #fff; }

.footer-contact-btn { }

/* Bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 0 32px;
}

.footer-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: #fff;
  flex-shrink: 0;
}

.footer-logo em { font-style: italic; }

.footer-legal {
  font-size: 0.75rem;
  line-height: 1.6;
  max-width: 460px;
  color: rgba(255,255,255,0.4);
}

.footer-certs { display: flex; gap: 12px; align-items: center; }

.cert-badge {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.2;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 991px) {
  .container { width: calc(100% - 56px); }
  #main-nav { height: 76px; }
  .hero-wrap,
.hero-wrap:has(.hero-app) { padding: 40px 0 56px; }

  /* steps: one column, scrolled. A carousel hides two of the three pillars
     behind a swipe most people never make. */
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  /* the heading has to hold one line at 320px, so size it off the viewport */
  .section-title-centered { font-size: clamp(1.45rem, 7.4vw, 2.2rem); margin-bottom: 30px; }

  .faq-layout { grid-template-columns: 1fr; }
  .faq-right { position: static; }
  .footer-main { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* tablet: 2 slides — text left-aligned */
@media (min-width: 576px) and (max-width: 991px) {
  .step-card h3 { text-align: left; margin: 24px 0 0; max-width: 100%; }
  .step-card p  { text-align: left; margin: 12px 0 0; max-width: 100%; }
}

/* mobile: single slide, tighter container, extra top spacing */
@media (max-width: 575px) {
  .container { width: calc(100% - 48px); }
  .stories-head { flex-direction: column; gap: 8px; }
}

.mob-br { display: none; }

@media (max-width: 575px) { .mob-br { display: block; } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-tag    { animation: fadeUp .5s .05s ease both; }

.hero-content h1 { animation: fadeUp .6s .1s ease both; }

.hero-content p  { animation: fadeUp .6s .2s ease both; }

.hero-cta-row { animation: fadeUp .6s .3s ease both; }

.proof { animation: fadeUp .7s .38s ease both; }

/* ══════════════════════════════════════
   HERO VARIANT — photo panel (reference-style)
   Scoped to .hero-photo; original hero rules untouched.
══════════════════════════════════════ */
.hero-inner.hero-photo {
  grid-template-columns: 1fr 46%;
  gap: 0;
  padding: 0;
  min-height: 568px;
}

.hero-photo .hero-content { padding: 78px 64px 78px 76px; }

.hero-photo .hero-content p { max-width: 440px; }

.hero-photo .hero-trust { max-width: 440px; margin-top: 92px; }

.hero-media {
  position: relative; z-index: 2;
  align-self: stretch;
  overflow: hidden;
}

.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  display: block;
}

/* melt the photo into the panel instead of butting a hard edge against it */
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    #0a1f17 0%, rgba(10,31,23,0.80) 14%, rgba(10,31,23,0.28) 32%, rgba(10,31,23,0) 52%);
}

/* the reference's organic sweep, as a soft ring over the top corner */
.hero-arc {
  position: absolute; z-index: 3; pointer-events: none;
  top: -30%; right: -14%;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  border: 78px solid rgba(107,201,107,0.13);
}

/* ── tablet 768–991: stay side-by-side like desktop, just tighter ──
   The original hero collapses to a stack at 991; the photo hero should not. */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-inner.hero-photo {
    display: grid;
    grid-template-columns: 1fr 41%;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 452px;
  }
  .hero-photo .hero-content {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 0;
    padding: 50px 40px 50px 46px;
  }
  .hero-photo .hero-actions { display: block; width: auto; }
  .hero-photo .hero-tag        { margin: 0 0 22px; }
  .hero-photo .hero-content h1 { text-align: left; margin: 0 0 18px; }
  .hero-photo .hero-content p  { text-align: left; margin: 0 0 30px; max-width: 100%; }
  .hero-photo .hero-cta-row    { justify-content: flex-start; width: auto; max-width: none; }
  .hero-photo .hero-link       { text-align: left; }
  .hero-photo .hero-trust      { justify-content: flex-start; margin: 54px 0 0; max-width: 100%; }
  .hero-media {
    order: 0; align-self: stretch;
    width: auto; height: auto;
    border-radius: 0; margin: 0;
  }
  .hero-media::after {
    background: linear-gradient(100deg,
      #0a1f17 0%, rgba(10,31,23,0.80) 13%, rgba(10,31,23,0.28) 31%, rgba(10,31,23,0) 52%);
  }
  .hero-arc { display: none; }
}

@media (max-width: 767px) {
  /* phones only: photo bleeds to the panel edges, copy left-aligned above it.
     .hero-content / .hero-actions become real flex columns here, overriding
     the display:contents stack the original hero uses. */
  .hero-inner.hero-photo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    min-height: 0;
  }
  .hero-photo .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    order: 1;
    width: 100%;
    padding: 40px 30px 46px;
  }
  .hero-photo .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    order: 4;
    width: 100%;
  }
  .hero-photo .hero-tag        { order: 1; margin: 0 0 22px; }
  .hero-photo .hero-content h1 { order: 2; text-align: left; margin: 0 0 18px; }
  .hero-photo .hero-content p  { order: 3; text-align: left; margin: 0 0 30px; max-width: 100%; }
  .hero-photo .hero-cta-row    { justify-content: flex-start; width: 100%; max-width: none; }
  .hero-photo .hero-link       { text-align: left; }
  .hero-photo .hero-trust      { justify-content: flex-start; margin: 32px 0 0; max-width: 100%; }

  .hero-media {
    order: 2;
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    height: 400px;
    border-radius: 0;
    margin: 0;
  }
  /* photo sits at the foot of the panel: fade its top edge into the dark */
  .hero-media::after {
    background: linear-gradient(0deg,
      rgba(10,31,23,0) 52%, rgba(10,31,23,0.50) 82%, #0a1f17 100%);
  }
  .hero-arc { display: none; }
}

@media (max-width: 600px) {
  .hero-photo .hero-content { padding: 34px 24px 42px; }
  .hero-media { height: 372px; }
}

@media (max-width: 767px) {
  /* phone hero carries one action only — pricing link and trust row move
     further down the page where there is room for them */
  .hero-photo .hero-link  { display: none; }
  .hero-photo .hero-trust { display: none; }
}

@media (max-width: 400px) {
  .hero-photo .hero-content { padding: 30px 20px 38px; }
  .hero-media { height: 330px; }
}

/* ── half-section now carries the dark Fable panel + the preview card ── */
.half-stage {
  position: relative;
  isolation: isolate;
  /* the original card was 494x496 — hold that ratio at every width instead of
     a fixed height, which stretched once the grid went single-column */
  aspect-ratio: 494 / 496;
  /* bleeds left past the container; declared here because this rule comes
     after the grid rule and would otherwise reset both */
  grid-column: 1 / span 5;
  /* bleed to the true left edge of the window: half the difference between the
     viewport and the container, plus the page gutter. Fixed pixel bleeds left
     a visible gap on wide screens. */
  margin-left: calc(-1 * var(--edge-l, 0px));
  width: calc(100% + var(--edge-l, 0px));
  max-width: none;
  border-radius: 0 24px 24px 0;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2b1f 0%, #0a1f17 40%, #061510 100%);
  padding: 0;
  display: block;
  box-shadow: 0 1px 2px rgba(6,21,16,.06),
              0 10px 22px -12px rgba(6,21,16,.20),
              0 30px 56px -24px rgba(6,21,16,.26),
              0 60px 110px -40px rgba(6,21,16,.34);
}

.half-shot {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
}

/* ══════════════════════════════════════
   HERO — app-on-white (inspace pattern)
   Scoped to .hero-app. The .hero-photo rules above are left intact,
   so reverting is a single class swap in the markup.
══════════════════════════════════════ */
.hero-wrap:has(.hero-app) { overflow-x: clip; padding: 68px 0 92px; }

.hero-inner.hero-app {
  background: none;
  border-radius: 0;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr) 45%;
  align-items: center;
  gap: 54px;
  padding: 44px 0 56px;
  min-height: 0;
}

/* the dark panel's furniture has no job on a white hero */

.hero-app .hero-content { padding: 0; }

.hero-app .hero-tag {
  background: rgba(0,124,80,0.07);
  border: 1px solid rgba(0,124,80,0.18);
  color: var(--green);
}

.hero-app .hero-content h1 {
  color: var(--fable-ink);
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
}

.hero-app .hero-content h1 b { color: var(--green); }

.hero-app .hero-content p {
  color: #5b6b64;
  max-width: 473px;   /* 430 x 1.1, so the measure scales with the type */
}

.hero-app .hero-link { color: #5b6b64; }

.hero-app .hero-link:hover { color: var(--green); }

.hero-app .hero-trust {
  max-width: 517px;   /* 470 x 1.1 */
  margin-top: 50px;
  border-top: 1px solid rgba(6,21,16,0.09);
}

.hero-app .hero-trust span { color: #7d8a84; }

.hero-app .hero-trust span::before { color: rgba(0,124,80,0.5); }

/* the product shot: floats, lifts, and runs off toward the page edge */
.hero-app .hero-media {
  position: relative;
  overflow: visible;
  align-self: center;
  margin-right: 0;                     /* bleed is added back only when the
                                          viewport is wide enough to hold it */
}

@media (min-width: 1200px) { .hero-app .hero-media { margin-right: -28px; } }

@media (min-width: 1416px) { .hero-app .hero-media { margin-right: -68px; } }

.hero-app .hero-media::after { display: none; }

.hero-app .hero-media img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(6,21,16,.06),
              0 34px 76px -28px rgba(6,21,16,.42);
}

/* entrance sequence + pointer parallax, as on the reference hero.
   Animations sit on the wrappers; the parallax transform sits on the <img>,
   so the two never fight over the same property. */
@media (prefers-reduced-motion: no-preference) {
  .hero-app .hero-tag,
  .hero-app .hero-content h1,
  .hero-app .hero-content p,
  .hero-app .hero-cta-row,
  .hero-app .hero-trust { animation: heroRise .72s cubic-bezier(.22,.7,.24,1) both; }
  .hero-app .hero-tag        { animation-delay: .05s; }
  .hero-app .hero-content h1 { animation-delay: .17s; }
  .hero-app .hero-content p  { animation-delay: .40s; }
  .hero-app .hero-cta-row    { animation-delay: .55s; }
  .hero-app .hero-trust      { animation-delay: .70s; }
  .hero-app .hero-media      { animation: heroPanelIn .95s cubic-bezier(.22,.7,.24,1) .32s both; }
  .hero-app .hero-media img  { transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroPanelIn {
  from { opacity: 0; transform: translateY(34px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* On a phone the panel is full width, so scale(.97) pulls it visibly inset and
   it reads as a layout glitch rather than an entrance. Fade and a short rise
   only — no scale, nothing that changes its width. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .hero-app .hero-media { animation: heroPanelInSm .5s cubic-bezier(.22,.7,.24,1) .12s both; }
}

@keyframes heroPanelInSm {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* The original hero collapses to a flex column at 991 and puts
     display:contents on .hero-content. Setting grid-template-columns alone did
     nothing — the display has to be re-declared, and the content block has to
     become a real flex column again or its children stay loose in the panel. */
  .hero-inner.hero-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48%;
    align-items: center;
    gap: 34px;
    padding: 44px 0 52px;
    min-height: 0;
  }
  .hero-app .hero-content {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 0; width: 100%; padding: 0;
  }
  .hero-app .hero-actions {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 4; width: 100%;
  }
  .hero-app .hero-tag        { order: 1; margin: 0 0 18px; }
  .hero-app .hero-content h1 { order: 2; text-align: left; margin: 0 0 16px; }
  .hero-app .hero-content p  { order: 3; text-align: left; margin: 0 0 26px; max-width: 100%; }
  .hero-app .hero-cta-row    { justify-content: flex-start; width: auto; max-width: none; }
  .hero-app .hero-trust      { justify-content: flex-start; margin: 38px 0 0; max-width: 100%; }
  .hero-app .hero-media {
    order: 0; align-self: center;
    width: auto; height: auto;
    margin: 0;                        /* no bleed at this size — it overflowed */
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  /* .container keeps a 40px desktop gutter at every size — a fifth of a phone
     screen. Pull it in for the hero so the copy and the panel gain the width
     together and stay on one left edge. */
  .container { width: calc(100% - 44px); }

  /* .hero-content / .hero-actions become real flex columns here, overriding
     the display:contents stack the original hero uses, so the order is
     explicit: pill, headline, subtext, button, meta strip, then the app. */
  .hero-inner.hero-app {
    display: flex; flex-direction: column;
    align-items: stretch;
    padding: 30px 0 40px;
    gap: 0;
  }
  .hero-app .hero-content {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 1; width: 100%; padding: 0;
  }
  .hero-app .hero-actions {
    display: flex; flex-direction: column; align-items: flex-start;
    order: 4; width: 100%;
  }
  .hero-app .hero-tag        { order: 1; margin: 0 0 18px; }
  .hero-app .hero-content h1 { order: 2; text-align: left; margin: 0 0 16px; }
  .hero-app .hero-content p  { order: 3; text-align: left; margin: 0 0 26px; max-width: 100%; }
  .hero-app .hero-cta-row    { justify-content: flex-start; width: 100%; max-width: none; }
  .hero-app .hero-trust      { justify-content: flex-start; margin: 26px 0 0; max-width: 100%; }
  .hero-app .hero-media {
    order: 2;
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 44px auto 0;
    align-self: center;
    max-width: 100%;
    border-radius: 0;
  }
  .hero-app .hero-media img { border-radius: 16px; }
  .hero-app .fable-orb-1, }

/* ══════════════════════════════════════
   HERO — live dashboard panel (replaces the screenshot)
   Mirrors the in-app dashboard: consultations this month, cumulative
   treatments started, open pipeline, and a conversion rate that stays
   "Building data…" until the minimum sample is reached.
══════════════════════════════════════ */
.ssd {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 100%;
  container-type: inline-size;
  border-radius: 20px;
  padding: 30px 28px 20px;
  background: linear-gradient(157deg, #123524 0%, #0c2419 46%, #07180f 100%);
  box-shadow: 0 1px 2px rgba(6,21,16,.10),
              0 10px 22px -12px rgba(6,21,16,.30),
              0 30px 56px -24px rgba(6,21,16,.38),
              0 60px 110px -40px rgba(6,21,16,.50);
  font-variant-numeric: tabular-nums;
}

.ssd-orb {
  position: absolute; z-index: -1;
  top: -34%; left: -14%;
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle, #007C50 0%, transparent 70%);
  opacity: .34; filter: blur(58px);
}

.ssd-noise {
  position: absolute; z-index: -1; inset: 0;
  background-image: var(--fable-noise-url);
  background-repeat: repeat;
  opacity: .16;
}

.ssd-top { text-align: center; margin-bottom: 22px; }

.ssd-top b {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 1.72rem;
  font-size: clamp(1.22rem, 4.6cqw, 1.72rem);
  letter-spacing: -0.02em;
  color: #fff;
}

.ssd-top span {
  display: block; margin-top: 6px;
  font-size: .78rem;
  font-size: clamp(.6rem, 1.94cqw, .78rem);
  color: rgba(255,255,255,.42);
}

.ssd-grid {
  display: grid;
  /* minmax(0,1fr), not 1fr: plain 1fr resolves to minmax(auto,1fr), which lets a
     wide child widen the column — that made the panel resize the moment
     "Building data…" was replaced by the rate, and overflow the viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.ssd-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  min-height: 150px;
  padding: 15px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  display: flex; flex-direction: column;
}

.ssd-lab {
  display: flex; align-items: center; gap: 7px;
  font-size: .58rem;
  font-size: clamp(.5rem, 1.5cqw, .58rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
}

.ssd-lab em { font-style: normal; }

.ssd-lab s {
  text-decoration: none;
  color: var(--green-light, #6BC96B);
  letter-spacing: .04em;
  font-weight: 600;
}

.ssd-ic {
  margin-left: auto;
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,124,80,.22);
  border: 1px solid rgba(107,201,107,.22);
  color: #6BC96B;
}

.ssd-ic svg { width: 13px; height: 13px; }

.ssd-val { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }

/* The display face has proportional figures — "1" is narrower than "8" — so a
   naturally-sized number nudges its label on every tick. Each value therefore
   sits in a field sized by DIGIT COUNT (set in JS): 1ch while 1-9, 2ch while
   10-99, 3ch from 100. The label then moves exactly twice in the whole run,
   at 9->10 and at 99->100, and the gap is a constant 8px throughout. */
/* DM Serif Display has proportional figures, so "1" is far narrower than "8"
   and a number redraws at a different width on every tick. Each digit is
   therefore rendered in its own cell, one widest-digit wide (measured in JS).
   The number is then exactly digits x cell, always — it cannot jitter, and the
   label steps only when a digit is added. */
.ssd-val b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.ssd-val b i, .ssd-note s i {
  display: inline-block; text-align: center; font-style: normal;
}

.ssd-val b {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 4.1rem;
  font-size: clamp(2.3rem, 10.2cqw, 4.1rem);
  line-height: .84;
  letter-spacing: -0.02em;
  color: #fff;
}

.ssd-val b.grn { color: #6BC96B; }

.ssd-val u {
  text-decoration: none;
  font-size: .84rem;
  font-size: clamp(.56rem, 2.08cqw, .84rem);
  color: rgba(255,255,255,.62);
}

.ssd-conv { justify-content: flex-start; }

.ssd-chart {
  position: relative; margin-top: 10px; flex: 1; min-width: 0;
  padding-right: 30px;                 /* gutter for the % labels */
  padding-right: clamp(25px, 5.4cqw, 32px);
}

/* the plot is the dot's containing block, so the label gutter on .ssd-chart
   cannot skew its percentage positions */
.ssd-plot { position: relative; display: block; }

.ssd-svg { display: block; width: 100%; aspect-ratio: 320 / 100; height: auto; }

.ssd-g0    { stroke: rgba(255,255,255,.10); stroke-width: 1; }

.ssd-gl    { stroke: rgba(255,255,255,.07); stroke-width: 1; }

.ssd-floor { stroke: rgba(255,255,255,.25); stroke-width: 1; }

/* chart strokes match the in-app card */
.ssd-bench  { stroke: rgba(255,255,255,.32); stroke-width: 1.2; stroke-linecap: round; }

.ssd-clinic { stroke: #6BC96B; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 10,4; }

/* the dot sits outside the SVG so preserveAspectRatio:none can't distort it */
.ssd-dot {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #6BC96B;
  box-shadow: 0 0 0 3px rgba(107,201,107,.18);
  opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ssd-dot { transition: opacity .3s ease; }
}

.ssd-ax { position: absolute; inset: 0; pointer-events: none; }

.ssd-ax i {
  position: absolute; right: 0; transform: translateY(-50%);
  font-style: normal; line-height: 1;
  font-size: .5rem;
  font-size: clamp(.4rem, 1.24cqw, .5rem);
  color: rgba(255,255,255,.34);
}

.ssd-leg {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  margin-top: 8px;
  font-size: .52rem;
  font-size: clamp(.42rem, 1.29cqw, .52rem);
  color: rgba(255,255,255,.42);
}

.ssd-leg i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.ssd-leg i::before { content: ''; width: 13px; height: 2px; border-radius: 2px; }

.ssd-leg .you::before { background: #6BC96B; }

.ssd-leg .ind::before { background: rgba(255,255,255,.34); }

/* the pair sits in its own inline flex so the legend gap does not apply
   between them — 6px apart, each holding its own column */
.ssd-note {
  margin-left: auto;
  display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px;
}

.ssd-note b {
  min-width: 4ch;               /* "81%" pinned */
  text-align: right;
  font-weight: 500;
  font-size: .68rem;
  font-size: clamp(.52rem, 1.69cqw, .68rem);
  color: rgba(255,255,255,.52);
  white-space: nowrap;
}

.ssd-note s {
  min-width: 0;                 /* digit cells hold the width now */
  text-align: right;
  text-decoration: none;
  font-size: .68rem;
  font-size: clamp(.52rem, 1.69cqw, .68rem);
  color: rgba(255,255,255,.38);
  white-space: nowrap;
}

.ssd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px;
  font-size: .55rem;
  font-size: clamp(.44rem, 1.37cqw, .55rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
}

.ssd-foot em { font-style: normal; }

.ssd-foot b { display: inline-block; min-width: 4ch; font-size: clamp(.52rem, 1.69cqw, .68rem); color: #6BC96B; font-weight: 600; letter-spacing: .04em; }

@media (prefers-reduced-motion: no-preference) {
  .ssd { transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; }
  .ssd-val b, .ssd-lab s { transition: color .4s ease; }
}

/* Panel-width rules — these depend on how wide the card actually is, not on
   the viewport, so they hold on tablet as well as on phones. */
@container (max-width: 430px) {
  /* Thin the axis, but drop alternate levels so what is left stays evenly
     spaced AND still sits at its true value: 100 / 60 / 20. */
  .ssd-g40, .ssd-g80 { display: none; }
}

@container (max-width: 520px) {
  .ssd-leg .ind { display: none; }     /* benchmark line stays, its legend does not */
  .ssd-leg { gap: 8px; }
}

@media (max-width: 991px) {
  .ssd { padding: 26px 22px 18px; }
  .ssd-foot .ssd-fw { display: none; }   /* "Conversion rate:" and " example" drop first */
  .ssd-card { min-height: 136px; }
}

@media (max-width: 767px) {
  .ssd { border-radius: 16px; padding: 20px 14px 13px; }
  .ssd-top { margin-bottom: 16px; }
  .ssd-grid { gap: 9px; }
  .ssd-card { min-height: 116px; padding: 11px 11px 11px; border-radius: 12px; }
  .ssd-ic { width: 21px; height: 21px; }
  .ssd-ic svg { width: 11px; height: 11px; }
  .ssd-val { gap: 6px; }
  .ssd-chart { margin-top: 7px; }
  /* legend and readout will not share a line at this width — stack them */
  .ssd-leg i::before { width: 10px; }
  .ssd-note { margin-left: auto; justify-content: flex-end; gap: 5px; }
  .ssd-note b { min-width: 3.4ch; }
  .ssd-note s { min-width: 0; }
}

@media (max-width: 400px) {
  .ssd { padding: 17px 11px 11px; }
  .ssd-grid { gap: 7px; }
  .ssd-card { min-height: 100px; padding: 9px 9px 10px; }
  .ssd-ic { width: 18px; height: 18px; }
  .ssd-ic svg { width: 10px; height: 10px; }
  /* the caption keeps its first word; " example" is already dropped above */
}

/* ══════════════════════════════════════
   DEMO SHEET — slides up from the bottom
══════════════════════════════════════ */
.dsheet-veil {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(6,21,16,.46);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.dsheet-veil.is-open { display: flex; }

.dsheet {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 10px 28px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 70px rgba(6,21,16,.34);
}

@media (min-width: 640px) {
  .dsheet-veil { align-items: center; }
  .dsheet { border-radius: 22px; max-height: calc(100dvh - 64px); }
}

@media (prefers-reduced-motion: no-preference) {
  .dsheet-veil.is-open .dsheet { animation: dsheetUp .34s cubic-bezier(.16,1,.3,1); }
}

@keyframes dsheetUp { from { transform: translateY(100%); } to { transform: none; } }

.dsheet-grab {
  display: block; width: 100%; padding: 6px 0 14px;
  background: none; border: 0; cursor: grab;
}

.dsheet-grab::before {
  content: ''; display: block; width: 44px; height: 5px; margin: 0 auto;
  border-radius: 999px; background: rgba(6,21,16,.16);
}

.dsheet-x {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(6,21,16,.10); border-radius: 999px;
  background: #fff; color: var(--fable-ink); cursor: pointer;
  transition: transform .18s ease;
}

.dsheet-x:hover { transform: rotate(90deg); }

.dsheet-x svg { width: 15px; height: 15px; }

.dsheet-eyebrow {
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.dsheet h2 {
  margin: 10px 0 0;
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 1.95rem); letter-spacing: -0.02em;
  color: var(--fable-ink);
}

.dsheet-sub { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: #5b6b64; }

.dsheet-form { margin-top: 22px; display: grid; gap: 11px; }

.dsheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

@media (max-width: 480px) { .dsheet-row { grid-template-columns: 1fr; } }

input[type=text].dsheet-in,
input[type=email].dsheet-in,
input[type=tel].dsheet-in {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid rgba(6,21,16,.12); border-radius: 10px;
  background: #F5F7F6; font: inherit; font-size: .95rem; color: var(--fable-ink);
  outline: none; transition: border-color .2s, background .2s;
}

input[type=text].dsheet-in:focus,
input[type=email].dsheet-in:focus,
input[type=tel].dsheet-in:focus { border-color: var(--green); background: #fff; }

.dsheet-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dsheet-consent {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border: 1px solid rgba(6,21,16,.12); border-radius: 10px;
  font-size: .8rem; line-height: 1.45; color: #5b6b64; cursor: pointer;
}

.dsheet-consent input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--green); flex: none; }

.dsheet-btn {
  height: 54px; border: 0; border-radius: 10px;
  background: var(--green); color: #fff;
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .2s, transform .2s;
}

.dsheet-btn:hover { background: var(--green-hover, #00a368); transform: translateY(-1px); }

.dsheet-btn[disabled] { opacity: .6; cursor: default; transform: none; }

.dsheet-btn svg { width: 16px; height: 16px; }

.dsheet-status { margin: 0; font-size: .85rem; font-weight: 500; display: none; }

.dsheet-status.err { display: block; color: #B1473F; }

.dsheet-ok { display: none; text-align: center; padding: 30px 6px 14px; }

.dsheet-ok.is-on { display: block; }

.dsheet-ok .tick {
  width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center;
  border-radius: 999px; background: rgba(0,124,80,.10); color: var(--green);
}

.dsheet-ok h3 {
  margin: 15px 0 0; font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: 1.5rem; color: var(--fable-ink);
}

.dsheet-ok p { margin: 9px 0 0; font-size: .95rem; color: #5b6b64; }

.dsheet-note { margin: 14px 0 0; font-size: .72rem; color: #7d8a84; text-align: center; }

html.dsheet-lock, body.dsheet-lock { overflow: hidden; }

/* ── steps section: intro / icon cards / outro, with a watermark behind ── */
.steps-section {
  position: relative; overflow: hidden;
  background: transparent;
  padding: var(--sp-6) 0 var(--sp-6);
}

.steps-section .container { position: relative; z-index: 1; }

.steps-eyebrow {
  margin: 0 0 16px; text-align: center;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.steps-sub {
  margin: 18px auto 0; max-width: 56ch; text-align: center;
  font-size: 1.05rem; line-height: 1.68; color: var(--gray);
  text-wrap: balance;
}

.steps-section .section-title-centered { margin-bottom: 0; }

.steps-grid { margin-top: var(--sp-4); }

.steps-outro {
  margin: var(--sp-4) auto 0; text-align: center;
  font-size: .62rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(13,43,31,.6);
  /* if it has to wrap, split it evenly rather than orphaning the last word */
  text-wrap: balance;
}

/* icon sits on the kicker's line, not above it */
.step-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }

.step-head .step-kicker { margin: 0; }

.step-ic {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,124,80,.07);
  border: 1px solid rgba(0,124,80,.16);
  color: var(--green);
}

.step-ic svg { width: 19px; height: 19px; }

@media (max-width: 767px) {
  .steps-eyebrow { font-size: .56rem; letter-spacing: .16em; margin-bottom: 12px; }
  .steps-sub { margin-top: 14px; font-size: .95rem; max-width: none; text-wrap: pretty; }
  .steps-grid { margin-top: 30px; }
  .steps-outro { margin-top: 22px; font-size: .52rem; letter-spacing: .07em; line-height: 1.7; }
  .step-card { padding: 26px 20px 28px; border-radius: 18px; }
  .step-head { gap: 10px; margin-bottom: 12px; }
  .step-ic { width: 32px; height: 32px; }
  .step-ic svg { width: 16px; height: 16px; }
}

/* ── getting started: no card, type carries the hierarchy ── */
/* the section takes the step cards' surface, so it reads as one banded block
   between two white sections rather than more white */
.start-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-6) 0 var(--sp-6);
  background: transparent;
}

.start-section .container { position: relative; z-index: 1; }

.start-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  padding-bottom: var(--sp-5);
}

.start-copy { grid-column: 1 / span 7; }

.start-act  { grid-column: 9 / span 4; }

/* no band behind this section, so a single rule marks where it begins */
.start-section .container { border-top: 1px solid rgba(6,21,16,.10); padding-top: var(--sp-5); }

.start-eyebrow {
  margin: 0 0 16px;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.start-copy h2 {
  margin: 0;
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -0.03em;
  line-height: 1.1; color: var(--fable-ink);
}

.start-copy h2 b { font-weight: 400; font-style: italic; color: var(--green); }

.start-sub {
  margin: 20px 0 0; max-width: 54ch;
  font-size: 1.05rem; line-height: 1.68; color: var(--gray);
}

.start-act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 30px 32px 32px;
  border-radius: 18px;
  background: var(--fable-surface);
  border: 1px solid var(--fable-line);
  box-shadow: 0 1px 2px rgba(6,21,16,.04), 0 14px 30px -20px rgba(6,21,16,.22);
}

.start-act .rounded-btn { width: 100%; text-align: center; }

.start-act-lead {
  margin: 0 0 4px; font-size: .9rem; line-height: 1.6; color: var(--gray);
}

.start-alt {
  align-self: center;
  font-size: .82rem; color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(0,124,80,.28);
  padding-bottom: 1px; transition: border-color .2s;
}

.start-alt:hover { border-color: var(--green); }

.start-note { align-self: center; font-size: .76rem; color: rgba(13,43,31,.46); }

.start-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--gutter);
  border-top: 1px solid rgba(6,21,16,.13);
}

.start-points li { grid-column: span 3; }

.start-points li {
  padding: 26px 30px 4px 0;
  border-right: 1px solid rgba(6,21,16,.13);
}

.start-points li:last-child { border-right: 0; padding-right: 0; }

.start-points li:not(:first-child) { padding-left: 30px; }

.start-points b {
  display: block; margin-bottom: 8px;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fable-ink);
}

.start-points span {
  display: block; font-size: .86rem; line-height: 1.6; color: var(--gray);
}

@media (max-width: 991px) {
  .start-top { grid-template-columns: 1fr; gap: 30px; align-items: start; padding-bottom: 34px; }
}

@media (max-width: 767px) {
  .start-sub { margin-top: 14px; font-size: .95rem; }
  .start-section .container { padding-top: 44px; }
  .start-act { width: 100%; }
  .start-act .rounded-btn { width: 100%; text-align: center; }
  .start-alt {
  align-self: center;
  font-size: .82rem; color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(0,124,80,.28);
  padding-bottom: 1px; transition: border-color .2s;
}
.start-alt:hover { border-color: var(--green); }
.start-note { align-self: center; }
  .start-points li,
.start-points li:not(:first-child),
.start-points li:last-child { padding: 16px 0; border-right: 0; border-top: 1px solid rgba(6,21,16,.10); }
  .start-points li:first-child { border-top: 0; }
  .start-points li:nth-child(n+3) { padding-left: 0; }
  .start-points b { margin-bottom: 5px; }
}

/* ── one grid, three widths ────────────────────────────────────────
   12 columns on desktop, 6 on tablet, 1 on phone. Sections keep their
   relative proportions instead of each collapsing on its own terms. */
@media (max-width: 991px) {
  .steps-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps-grid > .step-card { grid-column: span 6; }
  .half-grid  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .half-stage { grid-column: 1 / span 6; }
  .half-text  { grid-column: 1 / span 6; }
  .start-top  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .start-copy { grid-column: 1 / span 6; }
  .start-act  { grid-column: 1 / span 6; }
  .start-points { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .start-points li,
  .start-points li:not(:first-child) { grid-column: span 3; padding: 22px 24px 18px 0; }
  .start-points li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .start-points li:nth-child(n+3) { border-top: 1px solid rgba(6,21,16,.10); }
  .faq-layout { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .faq-left   { grid-column: 1 / span 6; }
  .faq-right  { grid-column: 1 / span 6; }
}

@media (max-width: 767px) {
  .start-points { grid-template-columns: 1fr; }
  .start-points li,
  .start-points li:nth-child(n),
  .start-points li:not(:first-child) {
    grid-column: 1 / -1;
    padding: 16px 0;
    border-right: 0;
    border-top: 1px solid rgba(6,21,16,.10);
  }
  .start-points li:first-child { border-top: 0; padding-top: 4px; }
  .start-points b { margin-bottom: 4px; }
}

/* section rhythm: one value per breakpoint, applied to every section */
@media (max-width: 991px) {
  .steps-section, .half-section, .start-section, .faq-section { padding: var(--sp-5) 0; }
}

@media (max-width: 767px) {
  .steps-section, .half-section, .start-section, .faq-section { padding: var(--sp-4) 0; }
}

/* ── page ground: a few very soft fields instead of hard colour bands ──
   Fixed to the page, not to a section, so nothing announces an edge. They
   sit under everything at z-index 0 and never intercept a click. */
.page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.page-bg span { position: absolute; display: block; border-radius: 50%; }

.pg-1 {
  top: 34%; left: -18%; width: 62vw; max-width: 900px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,124,80,.10) 0%, transparent 68%);
  filter: blur(60px);
}

.pg-2 {
  top: 8%; right: -16%; width: 54vw; max-width: 780px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(107,201,107,.10) 0%, transparent 68%);
  filter: blur(60px);
}

.pg-3 {
  bottom: -12%; left: 26%; width: 48vw; max-width: 700px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,124,80,.07) 0%, transparent 68%);
  filter: blur(70px);
}

/* a whisper of grain over the whole page — stops the flat areas reading dead */
.page-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--fable-noise-url); background-repeat: repeat;
  opacity: .025;
}

main, nav, footer, section { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .pg-3 { display: none; }
  .pg-1, .pg-2 { filter: blur(46px); }
}

/* ── page ground: two very soft green washes fixed behind everything,
   so the scroll has depth without any section owning a colour band.
   Both are pinned to the viewport, not the section, so nothing looks
   like a stripe. ── */
body { position: relative; }

body::before,
body::after {
  content: '';
  position: fixed; z-index: -2;
  pointer-events: none;
  border-radius: 50%;
}

body::before {
  top: -18vh; right: -14vw;
  width: 58vw; aspect-ratio: 1;
  background: radial-gradient(circle, #007C50 0%, transparent 68%);
  opacity: .055; filter: blur(90px);
}

body::after {
  bottom: -22vh; left: -18vw;
  width: 62vw; aspect-ratio: 1;
  background: radial-gradient(circle, #6BC96B 0%, transparent 68%);
  opacity: .05; filter: blur(100px);
}

/* a hairline where the CTA begins, and a faint tint carried by the
   section itself rather than a full-width block */
.start-section {
  background: linear-gradient(180deg,
              rgba(0,124,80,.028) 0%,
              rgba(0,124,80,.012) 46%,
              transparent 100%);
}

@media (max-width: 767px) {
  body::before { width: 90vw; top: -10vh; right: -30vw; }
  body::after  { width: 96vw; bottom: -12vh; left: -34vw; }
}

/* scroll parallax: the washes move against the content, so the page has
   depth rather than sliding as one flat plane. Driven by a scroll-linked
   custom property, not a timer. */
body::before { transform: translate3d(0, calc(var(--scrollY, 0) * -0.16px), 0); }

body::after  { transform: translate3d(0, calc(var(--scrollY, 0) * 0.11px), 0); }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { transform: none; }
}

/* ── scroll reveal ────────────────────────────────────────────────
   Restrained on purpose: a short fade and a 16px lift, nothing sliding
   in from the sides. The .reveal-on class is added by JS only when the
   browser supports it and motion is not reduced, so without JS every
   element renders normally. */
html.has-reveal .reveal-el {
  opacity: 0;
  transform: translateY(30px);
  /* power3.out equivalent, and the same .8s they use */
  transition: opacity .8s cubic-bezier(.215,.61,.355,1),
              transform .8s cubic-bezier(.215,.61,.355,1);
}

html.has-reveal .reveal-el.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .reveal-el { opacity: 1; transform: none; transition: none; }
}

.steps-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the bleed only exists where the viewport has room for it */
@media (min-width: 992px) {
  .steps-section { --edge-r: calc((100vw - min(var(--max), 100vw - 88px)) / 2); }
}

@media (max-width: 767px) {

  .steps-shot span { font-size: .72rem; }
}

/* ── founder note: quieter than the sections around it, because a personal
   voice reads as more honest when it is not shouted ── */
.founder-section { padding: var(--sp-6) 0; }

.founder-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.founder-body p { max-width: none; }

.founder-mark { grid-column: 1 / span 3; position: relative; }

.founder-body { grid-column: 4 / span 9; }

.founder-quote {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(6rem, 12vw, 11rem); line-height: .55;
  color: var(--green); opacity: .13;
}

.founder-eyebrow {
  margin: 0 0 16px;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--green);
}

.founder-body h2 {
  margin: 0 0 var(--sp-3);
  font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -0.03em;
  line-height: 1.16; color: var(--fable-ink);
}

.founder-body h2 b { font-weight: 400; font-style: italic; color: var(--green); }

.founder-body p {
  margin: 0 0 16px; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.75; color: var(--gray);
}

.founder-sign {
  margin-top: var(--sp-3) !important;
  font-size: .8rem !important; letter-spacing: .04em;
  color: var(--fable-ink) !important; font-weight: 500;
}

@media (max-width: 991px) {
  .founder-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .founder-mark { grid-column: 1 / span 6; }
  .founder-body { grid-column: 1 / span 6; }
  .founder-quote { font-size: 5rem; margin-bottom: -10px; }
}

@media (max-width: 767px) {
  .founder-body p { font-size: .95rem; }
  .founder-quote { font-size: 4rem; }
}

/* ── nav on small screens ──────────────────────────────────────────
   "Schedule a free demo" is long; at desktop size it collides with the
   wordmark. Shrink the button and the mark, and let the label shorten. */
@media (max-width: 767px) {
  #main-nav .container { gap: 12px; }
  .logo-text { font-size: 1.34rem; }
  /* the meta strip is the last thing before the panel — give it room */
  .hero-app .hero-trust { margin: 30px 0 0; padding-top: 22px; }
}

@media (max-width: 400px) {
  .logo-text { font-size: 1.24rem; }
  #main-nav .nav-cta-long { display: none; }
}

/* ── nav menu ─────────────────────────────────────────────────── */

/* ── floating CTA, phones only ────────────────────────────────── */
@media (max-width: 767px) {

  body { padding-bottom: 0; }
}

/* ── nav: menu centred on desktop and tablet ──────────────────── */

/* ── the demo button: light, so it does not fight the page CTAs ── */

/* ── hamburger, phones ────────────────────────────────────────── */


/* ══ mobile menu — a sheet, not a 2005 dropdown ═══════════════════ */
@media (max-width: 767px) {


  /* the demo action lives in the sheet now that the floater is gone */

}

/* ══ mobile menu: full-screen panel on the page ground ══════════ */
@media (max-width: 767px) {

  /* the same soft green wash the homepage carries top-left */


  /* the demo action pinned to the foot, full width */

}

@media (min-width: 768px) { .nav-menu li.nav-cta-item { display: none; } }

/* ══ NAV ══════════════════════════════════════════════════════════ */


/* the demo button sits back from the page's own CTAs */

/* hamburger */


@media (max-width: 400px) { .nav-menu a { font-size: 1.4rem; } }

/* the menu sits outside <nav> because #main-nav uses backdrop-filter,
   which would otherwise make position:fixed resolve against the 68px bar */

/* ── the panel carries its own header, so it reads as one surface ── */

@media (max-width: 767px) {

  /* the sheet button matches the one in the bar */
}

/* ══ NAV ══════════════════════════════════════════════════════════
   The centred menu is fixed to the viewport, so it cannot shrink out of
   the button's way. Below 1000px it becomes the panel instead — which
   also leaves room for a fourth item (Contact) without a collision. */
#main-nav .container.flex { position: relative; align-items: center; justify-content: space-between; }

.nav-menu {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  height: 68px; z-index: 201;
  display: flex; align-items: center; gap: 34px;
  list-style: none; margin: 0; padding: 0;
}

.nav-menu a {
  font-size: .92rem; color: var(--fable-ink); text-decoration: none;
  opacity: .78; transition: opacity .2s, color .2s; white-space: nowrap;
}

.nav-menu a:hover { opacity: 1; color: var(--green); }

.nav-menu li.nav-cta-item, .nav-head, .nav-close { display: none; }

@media (min-width: 981px) and (max-width: 1180px) { .nav-menu { gap: 26px; } }

#main-nav .rounded-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #D6F2E2; color: #08432F; border: 1px solid #BCE6D1;
  box-shadow: none; font-weight: 600;
}

#main-nav .rounded-btn:hover { background: #C6EBD6; border-color: #A6DCC0; color: #063324; }

.cta-ico { width: 17px; height: 17px; flex: none; }

.nav-burger {
  display: none; position: relative; flex: none;
  width: 42px; height: 42px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}

.nav-burger span {
  position: absolute; left: 11px; right: 11px; height: 1.9px; border-radius: 2px;
  background: var(--fable-ink);
  transition: transform .3s cubic-bezier(.22,.7,.24,1), opacity .2s;
}

.nav-burger span:nth-child(1) { top: 15px; }

.nav-burger span:nth-child(2) { top: 20.5px; }

.nav-burger span:nth-child(3) { top: 26px; }

.nav-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }

.nav-burger.is-open span:nth-child(2) { opacity: 0; }

.nav-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-veil { display: none; }

@media (max-width: 980px) {
  .nav-burger { display: block; }
  #main-nav .rounded-btn { display: none; }

  .nav-menu {
    position: fixed; z-index: 260;
    left: 0; right: 0; top: 0; bottom: 0; height: auto;
    transform: translateY(-8px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 0 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background: #FBFCFB; overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .26s cubic-bezier(.22,.7,.24,1),
                transform .3s cubic-bezier(.22,.7,.24,1),
                visibility 0s linear .3s;
  }
  .nav-menu::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(120% 70% at 6% 0%, rgba(0,124,80,.13) 0%, rgba(0,124,80,0) 62%),
      radial-gradient(90% 60% at 100% 100%, rgba(0,124,80,.07) 0%, rgba(0,124,80,0) 60%);
  }
  .nav-menu.is-open {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-menu li.nav-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px; margin: 0 0 6px; border: 0;
  }
  .nav-menu li.nav-head .logo-text {
    display: inline-flex; align-items: baseline; padding: 0; border: 0;
    font-family: 'DM Serif Display', serif; font-size: 1.34rem;
    color: var(--dark); letter-spacing: -0.03em;
  }
  .nav-close {
    display: grid; place-items: center;
    width: 42px; height: 42px; margin-right: -9px;
    border: 0; background: transparent; cursor: pointer; color: var(--fable-ink);
  }
  .nav-close svg { width: 22px; height: 22px; }

  .nav-menu a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 4px; border-bottom: 1px solid rgba(6,21,16,.10);
    font-family: 'DM Serif Display', serif; font-weight: 400;
    font-size: 1.55rem; letter-spacing: -0.02em; color: var(--fable-ink); opacity: 1;
  }
  .nav-menu a::after { content: '\203A'; font-size: 1.4rem; color: var(--green); opacity: .45; }
  .nav-menu a:active { color: var(--green); }
  .nav-menu li.nav-head .logo-text::after { content: none; }

  .nav-menu li.nav-cta-item { display: block; margin-top: auto; padding: 22px 0 0; }
  .nav-menu li.nav-cta-item a {
    justify-content: center; gap: 10px;
    padding: 17px 22px; border-radius: 12px; border-bottom: 0;
    background: #D6F2E2; color: #08432F; border: 1px solid #BCE6D1;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0;
  }
  .nav-menu li.nav-cta-item a::after { content: none; }
  .nav-menu li.nav-cta-item a:active { background: #C6EBD6; color: #063324; }

  body.nav-locked { overflow: hidden; }
}

@media (max-width: 400px) { .nav-menu a { font-size: 1.4rem; } }


/* ══════════════════════════════════════════════════════════════════════
   MOBILE CORRECTIONS
   Each rule below exists because an earlier, higher-specificity selector
   was surviving into the small breakpoints and undoing the mobile layout.
   They are grouped here, last in the file, so they win on both
   specificity and source order. Do not reorder this block.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* .hero-wrap:has(.hero-app) is 0-3-0 and appears later than the mobile
     rule, so the homepage hero kept its desktop vertical padding. */
  .hero-wrap:has(.hero-app) { padding: 40px 0 56px; }

  /* Horizontal padding from the multi-column layout, still applied once
     these lists collapse to one or two columns. */
  .start-points li:not(:first-child),
  .start-points li:last-child,
  .start-points li:nth-child(n) { padding-left: 0; }

  .gd-table th:first-child,
  .gd-table td:first-child,
  .gd-table th:last-child,
  .gd-table td:last-child { padding-left: 0; padding-right: 0; }
}

@media (max-width: 767px) {
  .hero-wrap:has(.hero-app) { padding: 32px 0 44px; }

  .start-points li:not(:first-child),
  .start-points li:last-child,
  .start-points li:nth-child(n) { padding-left: 0; padding-right: 0; }

  .hiw-facts li:last-child,
  .hiw-facts li:not(:first-child),
  .hiw-facts li:nth-child(n) { padding-left: 0; padding-right: 0; }

  .prc-points li:last-child,
  .prc-steps li:not(:first-child),
  .prc-steps li:last-child { padding-left: 0; }
}