/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS — hero, trust strip, profile, journey timeline, ventures, impact,
   team, testimonials, booking form.
   ═════════════════════════════════════════════════════════════════════════ */

/* ══════════ HERO — static, one entrance only ══════════
   No more scroll-jacked narrative: the title card and the scroll-linked
   opacity/scale math are gone, and the offer (headline, trust points, stats,
   CTA) is visible immediately rather than resolving as you scroll. Her name
   still appears — as the static watermark below — and her portrait keeps
   the one motion this hero has left: a single slide-up-and-fade-in, done by
   the same on-scroll-into-view .reveal-lift every other image on the page
   uses, not a bespoke scroll-scrubbed transform. */
.hero { position: relative; }
.hero-stage {
  position: relative; height: auto; min-height: 100svh; overflow: hidden;
  border-radius: 0;   /* full-bleed, not an inset box */
  padding: calc(var(--nav-h) + 40px) 0 40px;
  display: grid; align-content: end;
}
/* Mobile-only, separate from the nav's own burger pill — the desktop hero
   carries the brand mark in the right-column .hd-logo; the stacked mobile
   layout leads with a smaller standalone mark of its own instead. Hidden
   on desktop entirely, not just visually collapsed. */
.hero-mobile-logo { display: none; }
@media (max-width: 860px) {
  .hero-mobile-logo {
    display: block; position: relative; z-index: 2;
    height: 50px; width: auto; margin: 0 auto 18px;
    filter: brightness(0) invert(1);
  }
}

/* ── The watermark — now a pain-point line, not her name ───────────────────
   Long enough to wrap onto a few lines, so this is sized for a headline-
   length sentence, not a single nowrap name — filled with the same
   gold→green gradient as the accent span in the offer headline so it still
   reads as one identity/voice, just a different piece of text. */
.hero-mark {
  position: absolute; z-index: 1; top: 13%; left: 50%;
  translate: -50% 0;
  width: min(88%, 980px); text-align: center; pointer-events: none;
  font-family: var(--f-sans); font-weight: 800;
  /* Smaller than before on purpose — the less vertical room this headline
     takes, the more room heroMarkSpacing() (app.js) can give the portrait
     below it without the two ever overlapping. */
  font-size: clamp(21px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--gold-bright) 0%, var(--accent-light) 48%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .95;
}

/* ── The portrait — the one motion left in this hero: a single slide-up,
   fade-in entrance via .reveal-lift (the same on-scroll-into-view system
   every other image on the page uses), not a bespoke scroll-scrubbed
   transform. Static positioning only lives here now.
   Height-driven, not width-driven: the watermark above wraps to a
   different number of lines depending on viewport width, so a fixed
   width (and the height that followed from it) could reach up into
   whatever line count the mark happened to wrap to. heroMarkSpacing() in
   app.js measures the mark's real rendered bottom edge and sets this
   height so the portrait's top always clears it — width then just
   follows from the image's own aspect ratio. The clamp() here is only
   the pre-JS fallback for first paint. */
.hero-portrait {
  position: absolute; z-index: 2; left: 50%; bottom: 0;
  translate: -50% 0;
  width: auto; height: clamp(300px, 58svh, 760px);
}
.hero-portrait img {
  width: auto; height: 100%;
  filter: drop-shadow(0 26px 40px rgba(7,46,43,.22));
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.hero-portrait::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; bottom: 2%; translate: -50% 0;
  width: 128%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(94,234,212,.18) 40%, transparent 68%);
  filter: blur(44px);
}

/* ── The floating founder tag — sits just above the bottom edge of the cutout,
   where the mask already fades her into transparency, so the card reads as
   anchored to her rather than stamped over her face. */
.hp-tag {
  position: absolute; z-index: 1; left: 50%; bottom: 6%;
  translate: -50% 0;
  width: max-content; max-width: 90%;
  display: grid; gap: 2px; padding: 12px 22px; border-radius: 100px;
  background: linear-gradient(180deg, rgba(3,32,30,.85), rgba(3,32,30,.96));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.6);
  text-align: center;
}
.hp-tag b { font-family: var(--f-display); font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.hp-tag span { font-size: 11px; color: var(--gold-bright); font-weight: 600; margin-top: 1px; display: block; }

/* ── The offer — always visible, no scroll gate ──────────────────────────── */
.hero-detail { position: relative; z-index: 3; }
.hd-grid {
  display: grid; align-items: end;
  grid-template-columns: 1fr clamp(280px, 36vw, 500px) 1fr;
  gap: clamp(16px, 2.4vw, 40px);
}
.hd-side { max-width: 30rem; }
.hd-right { justify-self: end; text-align: right; }
.hd-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(20px, 2.3vw, 33px); line-height: 1.16; letter-spacing: -.028em;
  color: var(--ink); margin-top: 16px;
}
/* The exact same gradient as the watermark title behind her portrait
   (.hero-mark) — not the flat teal .accent uses everywhere else, since
   this line is meant to read as the premium/name credential, matching
   the one other gold-to-teal gradient text already on this page. */
.hd-title .accent {
  background: linear-gradient(100deg, var(--gold-bright) 0%, var(--accent-light) 48%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hd-lead { font-size: clamp(13.5px, 1.1vw, 15px); color: var(--body); line-height: 1.65; margin-top: 14px; max-width: 38ch; }
.hd-stats {
  display: grid; grid-template-columns: repeat(2, auto); gap: 12px clamp(18px, 2.2vw, 32px);
  justify-content: end; padding-top: 16px; border-top: 1px solid var(--line);
}
.hd-stats div { text-align: right; }
.hd-stats div { display: grid; gap: 1px; }
.hd-stats b {
  font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 25px); font-weight: 800;
  line-height: 1.1; color: var(--ink); letter-spacing: -.03em;
}
.hd-stats span { font-size: 11px; color: var(--muted); line-height: 1.35; max-width: 15ch; margin-left: auto; }
.hd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.hd-cta .btn { padding: 14px 22px; font-size: 14.5px; }
.hd-cta .btn .ic { width: 16px; height: 16px; }

@media (max-width: 980px) {
  .hero-mark {
    top: 5%; font-size: clamp(22px, 7vw, 34px); width: min(96%, 520px);
    position: relative; left: auto; translate: none; text-align: center;
    margin: 0 auto; padding: 0 20px;
  }
  /* Normal flow, not percentage-positioned absolute: with a headline this
     long the flow content's height varies, and a fixed top:% for the
     portrait drifted underneath it on real content, overlapping the
     founder tag with the eyebrow/heading below. Stacking it in flow avoids
     the guesswork entirely. */
  .hero-stage { display: block; padding-top: calc(var(--nav-h) - 14px); }
  .hero-portrait {
    position: relative; left: auto; bottom: auto; top: auto; translate: none;
    width: min(90vw, 440px); height: auto; margin: 18px auto 20px;
  }
  .hero-portrait img { width: 100%; height: auto; }
  .hp-tag { padding: 12px 26px; }
  .hp-tag b { font-size: 13px; }
  .hp-tag span { font-size: 10.5px; }
  .hd-grid { grid-template-columns: 1fr; gap: 14px; }
  .hd-spacer { display: none; }
  .hd-side { max-width: none; }
  .hd-right { justify-self: stretch; text-align: left; }
  .hd-stats { grid-template-columns: repeat(4, 1fr); justify-content: start; gap: 10px; }
  .hd-cta { justify-content: flex-start; margin-top: 14px; }
  .hd-title { font-size: clamp(19px, 5vw, 26px); margin-top: 12px; }
  .hd-lead { display: none; }
}
@media (max-width: 420px) {
  .hero-portrait { width: min(94vw, 380px); }
  .hp-tag b { white-space: normal; }
  .hd-stats { grid-template-columns: repeat(2, 1fr); }
  .hd-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ══════════ TRUST STRIP ══════════ */
.strip { padding: 18px 0 20px; background: transparent; border-block: 1px solid var(--line-2); }
.strip-head {
  display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center;
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.strip-head .ic { width: 17px; height: 17px; color: var(--accent); }
.strip-head b { color: var(--ink); font-weight: 700; }
/* On mobile the three bullet points wrap onto several lines — align-items:
   center then centers the icon against the whole wrapped block's height,
   so it drifts down next to line two or three instead of sitting beside
   "Private" on line one. flex-start (plus a small optical nudge) keeps it
   pinned to the first line regardless of how many lines the text wraps to. */
@media (max-width: 720px) {
  .strip-head { align-items: flex-start; text-align: left; }
  .strip-head .ic { margin-top: 2px; }
}

.marquee {
  /* Sits outside .shell (it needs the full row for the scroll animation),
     but was running truly edge-to-edge with no side margin at all — every
     other section keeps the standard gutter, this one should too. */
  overflow: hidden; padding: 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; align-items: center; gap: 54px; width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row img {
  /* brightness(0) invert(1) forces every logo to solid white — a leftover
     from when this strip sat on a dark ground. The page is white now, so
     that filter made every logo invisible (white on white). Plain
     grayscale + reduced opacity reads correctly against the light page. */
  height: 38px; width: auto; object-fit: contain; flex: none;
  filter: grayscale(1); opacity: .45; transition: opacity .3s, filter .3s;
}
.marquee-row img:hover { opacity: .9; filter: grayscale(0); }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

/* ══════════ PROFILE ══════════ */
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(24px, 3.4vw, 54px); align-items: start; }
.about-media { position: relative; }
/* A quieter presence than the other frames on the page — softer shadow, no
   tilt — since this section's photo is meant to sit back and let the copy
   and quote carry it, not compete for attention. */
.about-media .frame { overflow: hidden; box-shadow: var(--shadow-md); transform: none !important; }
.frame {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.06); box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 4;
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Both parallax photos already match their frame's aspect ratio exactly —
   cover needs no crop at all to show them in full. This buys just enough
   headroom for the small scroll-linked pan without cutting into faces (the
   old 118%/-9% pairing over-cropped hard enough to push a face out of frame
   entirely). */
.frame img[data-par] { height: 104%; margin-top: -2%; }

/* ── Photo colour grade ────────────────────────────────────────────────────
   Real photographs (office, recognition, awards) each carry their own warm,
   uncontrolled lighting, which reads as "uploaded" next to the designed teal
   ground everywhere else. A light desaturate + a cool multiply wash pulls
   every photo toward the same palette without touching hue (hue-rotate on a
   portrait shifts skin/hair to visibly wrong colours — tried it, it's bad). */
.frame img, .recog-frame img, .award-card img {
  filter: saturate(.9) brightness(.98) contrast(1.04);
}
.frame::after, .recog-frame::after, .award-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(2,50,47,.16), transparent 45%, rgba(1,131,128,.10));
  mix-blend-mode: multiply;
}
.about-tag {
  /* Anchored inside the frame. A light frosted plate, not the old dark
     scrim — that version set the name in --ink (near-black) over a
     near-black background, which read as almost illegible. */
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 30px -12px rgba(0,20,19,.45);
}
.about-tag-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #4a3406;
}
.about-tag-ic .ic { width: 15px; height: 15px; display: block; }
.about-tag div { display: grid; gap: 1px; }
.about-tag b { font-family: var(--f-display); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.about-tag span { font-size: 11px; color: var(--gold-deep); font-weight: 600; display: block; }

.about-copy .h-sec { margin-top: 18px; }
.about-body { margin-top: 24px; display: grid; gap: 15px; }
.about-body p { font-size: 15.5px; color: var(--body); line-height: 1.75; max-width: 64ch; }
.about-body b { color: var(--ink); font-weight: 600; }

.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.mvv-card { padding: 4px 0 4px 20px; border-left: 2px solid var(--accent-wash); }
.mvv-card .ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: 13px; }
.mvv-card h4 { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.mvv-card p { font-size: 13.5px; color: var(--body); line-height: 1.6; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 400px; }
  .mvv { grid-template-columns: 1fr; }
}

/* ══════════ SESSION ROADMAP ══════════
   Nine steps, three per row, threaded by one continuous curved line that
   snakes L→R, R→L, L→R — a real "gamified" level path, not a plain grid.
   The curve is drawn by JS (each node's real rendered centre, joined with
   cubic beziers) so it always actually passes through the badges, at any
   width, rather than a CSS approximation that only lines up at one size.
   The middle row is laid out `direction: rtl` (children reversed inside it),
   text reset to ltr per-card, so DOM order 1→9 still reads correctly for
   screen readers and tab order while the visual path zigzags. */
/* This site's own palette, not an imported board colour — a soft green-tint
   panel (the same wash `.band.soft` uses elsewhere), a green road in the
   site's actual accent greens, gold number tokens matching every other
   numbered badge on the page (tl-num, dcs-n, step-n), and pill-shaped cards
   rather than square-cornered boxes. The road is three passes over one
   shared `d`: the surface, a dashed centre lane, and arrowheads placed
   along it by JS — a dotted line alone never read as a route. */
.roadmap {
  position: relative; margin: 0 auto; border-radius: clamp(20px, 2.6vw, 30px);
  padding: clamp(46px, 5vw, 68px) clamp(20px, 3vw, 46px) clamp(38px, 4.4vw, 56px);
  /* No tinted panel and no border line behind the steps — just the page's
     own background. Each step card below carries its own plain white box
     (no border either, see .rm-card) instead of one big bordered panel. */
}
.roadmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.rp-road {
  fill: none; stroke: url(#roadmapGrad); stroke-width: 28;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(1,102,99,.26));
}
.rp-lane {
  fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.4;
  stroke-linecap: round; stroke-dasharray: 13 15;
  animation: roadmapFlow 2.4s linear infinite;
}
.rp-arrow { fill: rgba(255,255,255,.95); }
@keyframes roadmapFlow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .rp-lane { animation: none; } }

.roadmap-grid { position: relative; z-index: 2; display: grid; gap: clamp(40px, 4vw, 58px) 0; }
.rm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rm-row.rm-row-rev { direction: rtl; }
.rm-row.rm-row-rev .roadmap-item { direction: ltr; }

/* The badge cluster (node + icon) hugs the LEFT edge of every card via
   rm-head's padding-left — fine for columns 1 and 2, but the rightmost
   column then leaves a huge unused strip of card between the badges/road
   and the panel's right edge, while column 1 sits snug against the panel's
   left edge. The round-trip road, which is drawn through the real badge
   positions, inherits that lopsidedness: tight on the left, a wide gap on
   the right. Mirroring just the rightmost column's badge cluster onto the
   card's right edge gives the road equal clearance on both sides. Row 2 is
   rtl (rm-row-rev), so its rightmost-on-screen card is the FIRST child in
   DOM order, not the third. */
@media (min-width: 721px) {
  .rm-row:not(.rm-row-rev) .roadmap-item:nth-child(3) .rm-head,
  .rm-row-rev .roadmap-item:nth-child(1) .rm-head {
    justify-content: flex-end; padding-left: 0; padding-right: 20px;
  }
  /* The backdrop plate behind the badge cluster (see .rm-head::before
     above) has to follow it to the right edge too, or it's left stranded
     in the old left-side spot as an empty white pill. */
  .rm-row:not(.rm-row-rev) .roadmap-item:nth-child(3) .rm-head::before,
  .rm-row-rev .roadmap-item:nth-child(1) .rm-head::before {
    left: auto; right: 20px;
  }
}

.roadmap-item { position: relative; display: flex; flex-direction: column; }

/* Token + icon ride the card's top edge, tucked in from the left, so the
   card visibly hangs off them rather than the two floating apart. A solid
   pill sits behind the pair (::before) so the road curve — whose tangent
   swings sharply right at each row-turn node — always disappears cleanly
   behind one plate instead of occasionally poking a sliver out through the
   gap between the two circles. */
.rm-head { display: flex; align-items: center; gap: 10px; padding-left: 20px; margin-bottom: -26px; position: relative; z-index: 2; }
.rm-head::before {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 118px; height: 64px; border-radius: 32px; background: var(--page-bg); z-index: 0;
}
.rm-node {
  width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 0 5px var(--page-bg), 0 12px 24px -10px rgba(231,168,30,.6);
  transition: transform .3s var(--ease);
  position: relative; z-index: 1;
}
.rm-n { font-family: var(--f-display); font-weight: 800; font-size: 19px; color: #4a3406; }
.rm-ic-wrap {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 0 0 5px var(--page-bg), 0 8px 18px -10px rgba(1,102,99,.35), inset 0 0 0 1px var(--line);
  transition: transform .3s var(--ease);
  position: relative; z-index: 1;
}
.rm-ic { width: 20px; height: 20px; color: var(--accent-deep); }
.roadmap-item:hover .rm-node { transform: scale(1.06); }
.roadmap-item:hover .rm-ic-wrap { transform: scale(1.06) rotate(-4deg); }

/* Oval, not a box: a border-radius well past what the card's own height
   needs rounds the left/right ends into true half-circles — the stadium
   shape the reference calls for — while the top/bottom edges stay only as
   curved as the corners force them to be. */
.rm-card {
  position: relative; background: #fff; border-radius: 46px;
  padding: 38px 30px 26px; box-shadow: var(--shadow-lg);
}
.rm-card h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 7px; letter-spacing: -.01em; color: var(--ink); }
.rm-card p { font-size: 13.2px; color: var(--body); line-height: 1.62; }

@media (max-width: 720px) {
  .roadmap-svg { display: none; }
  .roadmap { padding: 26px 16px 22px; }
  .roadmap-grid { gap: 20px 0; }
  .rm-row, .rm-row.rm-row-rev { grid-template-columns: 1fr; direction: ltr; gap: 20px; }
  .rm-head { padding-left: 18px; margin-bottom: -22px; gap: 8px; }
  .rm-node { width: 46px; height: 46px; box-shadow: 0 0 0 4px var(--page-bg), 0 8px 18px -10px rgba(231,168,30,.55); }
  .rm-n { font-size: 15px; }
  .rm-ic-wrap { width: 36px; height: 36px; box-shadow: 0 0 0 4px var(--page-bg), inset 0 0 0 1px var(--line); }
  .rm-ic { width: 16px; height: 16px; }
  .rm-card { padding: 32px 24px 20px; border-radius: 34px; }
}

/* Value recap — the same ₹9,500 → ₹1,999 breakdown checkout used to show in
   its payment sidebar (moved off checkout entirely — this is the only copy
   now), surfaced here so a visitor sees the value case before they ever
   reach checkout. Built to a supplied reference: a soft cream panel (not
   white, not the dark hero-grad panel used elsewhere), with the accent
   colour pulled from the hero's own dark-green gradient rather than the
   site's default pale --accent-wash mint. */
.value-recap {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(36px, 4.4vw, 52px);
  padding: clamp(36px, 4.4vw, 56px) clamp(20px, 3vw, 40px);
  border-radius: clamp(20px, 2.6vw, 32px);
  background: #FAF6EB;
}
.value-recap-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 6% 4%, rgba(1,131,128,.10), transparent 70%),
    radial-gradient(42% 50% at 100% 100%, rgba(1,131,128,.09), transparent 72%);
}
.value-recap-head { position: relative; z-index: 1; text-align: center; margin: 0 auto 28px; }
.value-recap-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  padding: 7px 16px; border-radius: 100px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #4a3406; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 8px 18px -6px rgba(231,168,30,.55);
}
.value-recap-badge .ic { width: 13px; height: 13px; }
/* Same heading treatment as every other section (.h-sec's own size scale),
   just with the flanking rules and a gradient word added on top rather
   than a bespoke, slightly-off size of its own. */
.value-recap-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: clamp(27px, 3.3vw, 44px); line-height: 1.14;
}
.value-recap-title .accent {
  background: linear-gradient(100deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.value-recap-title i { flex: 1 1 40px; max-width: 70px; height: 1px; background: var(--line); }
.value-recap-head .sub-sec { margin: 10px auto 0; }

/* Card rows, two per line — each its own soft plate, not a bare list row.
   Same white-card-on-tint convention as .award-card / .rm-card elsewhere:
   var(--line) border, var(--shadow-lg), no bespoke tint of its own. */
.value-recap-list {
  position: relative; z-index: 1;
  max-width: 1020px; margin: 0 auto 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
.value-recap-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.value-recap-list dt { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.value-recap-list dd {
  flex: none; font-family: var(--f-display); font-size: 14px; font-weight: 800; white-space: nowrap;
  color: var(--accent-deep); background: var(--accent-wash); padding: 7px 14px; border-radius: 100px;
}
.vrc-ic {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep);
}
.vrc-ic .ic { width: 19px; height: 19px; }

/* Total vs. today's price — one bar, two tones, a diagonal seam between
   them rather than a straight divider. Box background/position is fixed
   (.vrp-value = dark panel, leading/left; .vrp-discount = light wash,
   trailing/right) — only the TEXT moved between them, via the
   .price-* classes below, which are decoupled from which box they sit in
   so the gold/red styling always follows what the number MEANS, not which
   side it happens to be on. */
.value-recap-price {
  position: relative; z-index: 1; overflow: hidden;
  max-width: 560px; margin: 0 auto; border-radius: var(--r-lg);
  /* The wider track belongs to whichever box holds the longer text
     ("Special discount — today", left) — the value box (right) only ever
     holds "Total value" + a price, so giving it the same 1.4fr as before
     left it with a lot of dead space the short text never filled. */
  display: grid; grid-template-columns: 1.4fr 1fr;
  box-shadow: 0 20px 44px -22px rgba(1,62,60,.4);
}
/* .panel-dark (in the markup) gives this the exact same background as the
   hero and every other dark panel on the page — grid lines, grain and glow
   included — rather than just borrowing its gradient formula. */
.vrp-value {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 22px 30px 22px 24px;
  /* .panel-dark's own border-radius rounds all 4 corners, but the outer
     .value-recap-price bar already clips this box's true outer (left)
     corners via its own overflow:hidden + border-radius — this box's top-
     right and bottom-right corners are internal to the bar and must stay
     sharp so the clip-path's diagonal cut is the only non-rectangular edge. */
  border-radius: 0;
  /* A fixed 44px inset, not a percentage of this box's own width — the cut
     and .vrp-discount's -44px overlap (below) then always match exactly,
     however the two columns' fr proportions change. A %-based cut here
     paired with a %-of-a-DIFFERENT-box's-width overlap on the other side
     is exactly what let a gap of bare page background show through as a
     visible seam once the column widths stopped being a fixed ratio. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 0% 100%);
}
.vrp-discount {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 22px 28px 22px 64px; margin-left: -44px;
  background: var(--accent-wash);
}

/* Same gold → primary gradient text as the hero title's centre accent
   (.hd-title .accent) — the "special discount" label, wherever it sits. */
.price-label-gradient {
  position: relative; z-index: 1; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--gold-bright) 0%, var(--accent-light) 48%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-label-muted { position: relative; z-index: 1; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* The discounted price itself gets the same gold treatment as every other
   highlight accent on the page (badges, play buttons, step numbers) — the
   number people are meant to notice first. */
.price-gold {
  position: relative; z-index: 1; font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-strike {
  position: relative; z-index: 1; font-family: var(--f-display); font-size: 21px; font-weight: 700;
  color: var(--ink); text-decoration: line-through; text-decoration-color: #DC2626;
}
.price-note { position: relative; z-index: 1; font-size: 11px; color: var(--muted); }

@media (max-width: 700px) {
  .value-recap-list { grid-template-columns: 1fr; }
  .value-recap-title i { display: none; }
}
@media (max-width: 560px) {
  .value-recap-price { grid-template-columns: 1fr; }
  .vrp-value { clip-path: none; padding: 18px 20px; }
  .vrp-discount { margin-left: 0; padding: 18px 20px; }
}
@media (max-width: 560px) {
  .value-recap-list dt { font-size: 13px; gap: 9px; }
  .value-recap-price { flex-direction: column; gap: 10px; }
  .value-recap-price .vrp-divider { width: 60%; height: 1px; }
}

/* ══════════ RECOGNITION ══════════
   The founder's real clip, kept deliberately small (height follows the
   copy column beside it via recogHeightMatch in app.js — width then
   follows from the 9:16 aspect-ratio), paired with the award/consultation
   photo row. */
/* A bit more breathing room from the viewport edges than the default
   .shell gutter — the paired award-grid + video content reads as cramped
   against the page edges otherwise. */
#recognition .shell { padding-left: 48px; padding-right: 48px; }
@media (max-width: 720px) { #recognition .shell { padding-left: 20px; padding-right: 20px; } }
.recog-grid {
  /* Same gap as .award-strip's own internal grid gap, so the space before
     the video reads as consistent with the space between the award photos,
     not a much wider gap tacked on beside it. Column 1 is capped at
     .award-strip's own 620px max-width (not 1fr, which left a dead strip
     of empty space the video never actually filled) — a definite ceiling,
     not max-content: max-content leaves .award-card's aspect-ratio with no
     resolvable width to size against, and the whole grid collapses to ~0. */
  display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: 20px;
  align-items: center;
}
.recog-photo { position: relative; height: 300px; }
.recog-frame {
  aspect-ratio: 4 / 5; position: relative; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,20,19,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.recog-vid { width: auto; height: 100%; aspect-ratio: 9 / 16; background: var(--ink-deep); }
.recog-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-deep); }
.recog-vid-grad {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(9,26,20,.55));
}
.recog-vid-play {
  position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; z-index: 3;
  border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--accent-deep); box-shadow: 0 14px 34px rgba(0,0,0,.38);
  transition: transform .2s var(--ease), opacity .3s var(--ease), background .2s var(--ease);
}
.recog-vid-play .ic { width: 25px; height: 25px; }
.recog-vid-play:hover { transform: scale(1.08); background: #fff; }
.recog-vid.sound-on .recog-vid-play { opacity: 0; pointer-events: none; }
.recog-vid.sound-on:hover .recog-vid-play { opacity: 1; pointer-events: auto; }
.recog-vid-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: 13px; padding: 8px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.recog-vid-badge-ic {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent-deep);
}
.recog-vid-badge-ic .ic { width: 14px; height: 14px; }
.recog-vid-badge b { display: block; font-family: var(--f-display); font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.recog-vid-badge small { display: block; font-size: 10px; color: var(--muted); }
.recog-shine {
  position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.16) 52%, transparent 60%);
  transform: translateX(-120%);
  animation: recogShine 6s ease-in-out infinite;
}
@keyframes recogShine {
  0%, 30% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
.recog-orbit {
  position: absolute; z-index: -1; right: -8%; top: -8%;
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.22);
  animation: recogSpin 34s linear infinite;
}
.recog-orbit::before {
  content: ''; position: absolute; top: -3px; left: 50%; translate: -50% 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 14px 3px rgba(246,197,68,.7);
}
@keyframes recogSpin { to { transform: rotate(360deg); } }

/* A proper 2×2 grid, not one cramped row of 4 — each photo gets real
   width, and the taller resulting block gives recogHeightMatch (app.js) a
   taller copy column to match the video's height against, so the section
   reads as filled rather than a short strip beside a tall empty video. */
.award-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; max-width: 620px; }
.award-card {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-md);
  background: var(--glass);
}
.award-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.award-card:hover img { transform: scale(1.06); }
.award-tag {
  position: absolute; left: 9px; bottom: 9px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-display); font-size: 10px; font-weight: 700; color: #4a3406;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  padding: 4px 9px 4px 7px; border-radius: 100px; box-shadow: 0 6px 14px -4px rgba(231,168,30,.5);
}
.award-tag .ic { width: 10px; height: 10px; stroke-width: 3; }

@media (max-width: 900px) {
  .recog-grid { grid-template-columns: 1fr; }
  .recog-photo { height: auto !important; max-width: 280px; margin-inline: auto; }
  .recog-vid { width: 100%; height: auto; }
  .award-strip { max-width: none; }
}
@media (max-width: 520px) { .award-strip { grid-template-columns: 1fr 1fr; } }

/* ══════════ VENTURES ══════════
   A divider between columns, not a card around each one — bold numerals and
   a heading do the work a bordered box used to. */
.vent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vent { padding: 4px clamp(20px, 3vw, 34px); border-left: 1px solid var(--line-2); transition: border-color .5s; }
.vent:first-child { border-left: 0; padding-left: 0; }
.vent.in { border-color: rgba(1,131,128,.16); }
.vent-n {
  display: block; font-family: var(--f-display); font-weight: 800; font-size: 38px;
  line-height: 1; letter-spacing: -.03em; color: transparent;
  -webkit-text-stroke: 1.4px var(--gold); margin-bottom: 14px;
}
.vent h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 9px; }
.vent h3 .ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.vent p { font-size: 14px; color: var(--body); line-height: 1.65; }
@media (max-width: 900px) { .vent { border-left: 0; padding-left: 0; } }

/* ══════════ IMPACT ══════════ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat { text-align: center; padding: 12px 14px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1; letter-spacing: -.035em;
  color: var(--accent-deep); white-space: nowrap;
}
.stat span { display: block; margin-top: 11px; font-size: 12.5px; color: var(--muted); }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px 34px; margin-top: 54px; }
.value { display: grid; gap: 4px; padding: 22px 0 0; border-top: 2px solid var(--gold-wash); }
.value i { font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .18em; color: var(--gold); }
.value b { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.value span { font-size: 13px; color: var(--muted); line-height: 1.55; }


/* ══════════ HERO — trust points on the right ══════════ */
.hd-logo { width: 100%; height: auto; display: block; margin: 0 0 22px; filter: brightness(0) invert(1); opacity: .95; }
/* .hero-mobile-logo (top of the hero) is the only logo on mobile — this one
   duplicated it once .hd-right stacks below the left column on mobile, so
   it's hidden here and stays desktop-only. Placed after the base rule
   above (same specificity either way) so this actually wins in the
   cascade — a mobile override placed EARLIER in the file at equal
   specificity loses to a later unconditional rule regardless of the media
   query being active. */
@media (max-width: 860px) {
  .hd-logo { display: none; }
}
.hd-trust { display: grid; gap: 8px; margin-bottom: 20px; }
.hd-trust li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.2px; font-weight: 700; color: #fff; justify-content: flex-end; text-align: right;
}
.hd-trust .ic { width: 15px; height: 15px; color: var(--gold-bright); flex: none; margin-top: 3px; order: 2; }
.hd-cta .btn { white-space: normal; text-align: left; }

/* ══════════ 02 · COMMON DOUBTS ══════════
   Speech bubbles, not cards: each one gets a tail, a hand-noted quote mark
   and a small rotation off true, so the wall reads as overheard remarks
   rather than a feature grid. Rotations are per-position (nth-child), and
   deliberately tiny — past ~1.5deg it stops looking hand-placed and starts
   looking broken. */
/* A true masonry column flow, not a grid — with a row-and-column grid every
   bubble's top AND bottom line up with its neighbours, which is exactly the
   "tidy feature grid" look this is supposed to avoid. Columns fill
   top-to-bottom independently, so bubbles of different lengths naturally
   land at different heights; a per-item nth-child translate jitters that
   further so no two neighbours sit on quite the same line. */
.doubt-wall {
  columns: 3 268px; column-gap: clamp(18px, 2.2vw, 30px);
  max-width: 1060px; margin: 0 auto;
}
.doubt {
  position: relative; display: inline-block; width: 100%; break-inside: avoid;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  padding: 22px 22px 24px 46px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 16px 34px -24px rgba(1,62,60,.4);
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.5;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
/* The opening quote mark, set as content so it needs no extra markup. */
.doubt::before {
  content: '“'; position: absolute; left: 16px; top: 10px;
  font-family: var(--f-display); font-size: 44px; font-weight: 800; line-height: 1;
  color: var(--gold); opacity: .55;
}
/* The tail — a rotated square tucked under the bottom-left corner, with its
   two visible edges borrowed from the bubble's own border. */
.doubt::after {
  content: ''; position: absolute; left: 22px; bottom: -8px;
  width: 15px; height: 15px; background: var(--card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.doubt:nth-child(6n+1) { rotate: -1.3deg; translate: 0 10px; }
.doubt:nth-child(6n+2) { rotate: .9deg; translate: -4px -6px; }
.doubt:nth-child(6n+3) { rotate: -.6deg; translate: 3px 14px; }
.doubt:nth-child(6n+4) { rotate: 1.1deg; translate: -3px -2px; }
.doubt:nth-child(6n+5) { rotate: -.9deg; translate: 4px 6px; }
.doubt:nth-child(6n)   { rotate: .6deg; translate: -2px -10px; }

/* Four different bubbles, not two — a plain white/pale-green alternation
   read as one component reused twice, not a wall of distinct remarks. The
   tail (::after) and the quote mark share each variant's own tint so the
   whole bubble, corner included, reads as one coloured piece. */
.doubt:nth-child(4n+1) { background: var(--card); }
.doubt:nth-child(4n+1)::after { background: var(--card); }
.doubt:nth-child(4n+2) { background: var(--accent-wash); border-color: rgba(1,102,99,.16); }
.doubt:nth-child(4n+2)::after { background: var(--accent-wash); border-color: rgba(1,102,99,.16); }
.doubt:nth-child(4n+2)::before { color: var(--accent-deep); }
.doubt:nth-child(4n+3) { background: var(--gold-wash); border-color: rgba(184,134,11,.24); }
.doubt:nth-child(4n+3)::after { background: var(--gold-wash); border-color: rgba(184,134,11,.24); }
.doubt:nth-child(4n)   { background: var(--glass-hi); }
.doubt:nth-child(4n)::after { background: var(--glass-hi); }
.doubt:hover {
  rotate: 0deg; transform: translateY(-4px);
  border-color: rgba(1,102,99,.26); box-shadow: 0 22px 44px -24px rgba(1,62,60,.45);
}
.doubt-close {
  margin-top: clamp(26px, 3vw, 38px); text-align: center;
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(19px, 2.2vw, 27px); color: var(--ink); line-height: 1.35;
}
@media (max-width: 560px) { .doubt { padding: 18px 18px 20px 42px; font-size: 14.2px; } }

/* ══════════ 03 · PROBLEM ══════════
   Left: the pain points, plain and neutral. Right: a rich dark-green panel
   with the reframe — the same problem→solution contrast the hero already
   establishes, so the section earns its keep instead of being two grey
   columns of text. Stretched to full row height so the panel reads as a
   deliberate accent block, never a short card floating over dead space. */
.prob-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3.4vw, 48px); align-items: stretch; }
.prob-copy p { font-size: 15.5px; color: var(--body); line-height: 1.75; margin-bottom: 14px; max-width: 58ch; }
.prob-ask { font-family: var(--f-display); font-weight: 700; color: var(--ink); margin-top: 20px !important; }
.prob-q { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.prob-q li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.5;
  padding: 14px 15px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prob-q li:hover { border-color: rgba(1,131,128,.3); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pq-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-wash); margin-top: 1px;
}
.pq-ic .ic { width: 15px; height: 15px; color: var(--accent-deep); }
@media (max-width: 560px) { .prob-q { grid-template-columns: 1fr; } }

.prob-pull {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(34px, 4vw, 48px) clamp(28px, 3.2vw, 38px);
  box-shadow: var(--shadow-xl);
}
/* A soft gold glow in the corner and a giant faint quote mark give this box
   the weight of a genuine pull-quote, not just a smaller copy of the panel
   treatment used elsewhere. */
.prob-pull::after {
  content: ''; position: absolute; z-index: 0; top: -25%; right: -18%;
  width: 65%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(246,197,68,.18), transparent 70%);
}
.pp-quote {
  position: absolute; z-index: 0; top: 20px; right: 24px;
  width: 60px; height: 60px; color: rgba(255,255,255,.07); pointer-events: none;
}
.pp-badge {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 16px; margin-bottom: 24px; position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 12px 26px -8px rgba(231,168,30,.6), 0 0 0 6px rgba(246,197,68,.14);
}
.pp-badge .ic { width: 24px; height: 24px; color: #4a3406; }
.prob-pull p { position: relative; z-index: 1; font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 26px; }
.prob-pull .pp-strong {
  font-family: var(--f-display); font-size: clamp(21px, 2.3vw, 29px); font-weight: 800;
  color: var(--ink); line-height: 1.3; margin: 12px 0 28px; letter-spacing: -.01em;
}
.prob-pull .btn { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .prob-grid { grid-template-columns: 1fr; }
}

/* ══════════ 03 · SUCCESS STORIES ══════════
   The webinar's actual "Success Stories" rail: a card per client, video on
   top, a before/after HbA1c result plate fused to the bottom (no gap — it
   reads as belonging to that clip, not floating near it). Four across on
   desktop with nothing to scroll (nav/dots hidden); a swipeable scroll-snap
   rail on mobile. Restyled to this page's light green/gold system — gold
   plate stays gold (it already fit), dark ink-deep ground replaces the
   webinar's near-black video background. */
.story-rail { position: relative; margin-top: 36px; }
/* Flex-wrap, not a fixed-column grid: the card count doesn't divide evenly
   into any row length, so whichever row lands short needs to center itself
   on its own — a CSS grid's justify-content centers the shared column-track
   structure as one block across every row, so a short last row just fills
   the leftmost tracks and reads as a missing card, not a deliberate short
   row. Flex-wrap treats each wrapped line independently, so a short row
   centers on its own. The card keeps a true fixed width (flex: 0 0 188px,
   no grow/shrink) rather than a percentage of the shell, so it can't
   stretch open into the big gaps a percentage-based card would leave when
   a row comes up short. */
.rail-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px 18px; padding-bottom: 4px;
}
.rail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-lg); }
.vid-card {
  flex: 0 0 244px; scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; text-align: left;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.vid-card, .vid-card figcaption { position: relative; }
.vid-thumb {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--ink-deep); transition: transform .45s var(--ease), filter .3s var(--ease);
  /* Phone-shot thumbnails read flat and a little washed out next to the
     rest of the page's graded photography — a small contrast/saturation
     lift, not a colour shift, brings them back to life. */
  filter: saturate(1.12) contrast(1.08) brightness(1.03);
}
.vid-card:hover .vid-thumb { filter: saturate(1.16) contrast(1.1) brightness(1.04); }
.vid-card:hover .vid-thumb { transform: scale(1.05); }
.vid-play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 2;
  width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #4a3406;
  box-shadow: 0 12px 28px -8px rgba(231,168,30,.6);
  transition: translate .25s var(--ease), scale .25s var(--ease);
}
.vid-play .ic { width: 22px; height: 22px; margin-left: 3px; }
.vid-card:hover .vid-play { scale: 1.08; }
.vid-card.playing .vid-play { display: none; }
.vid-card.playing iframe, .vid-card.playing video {
  position: relative; width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; background: var(--ink-deep);
}
.vid-meta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 12px 14px 14px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  /* Same dark teal panel background as the "You've Been Managing Diabetes"
     box AND the hero itself — not just the same gradient formula, but the
     identical layered glow + grain treatment (.panel-dark's ::after/::before,
     reused here so every "dark panel" on the page is genuinely the same
     background, not just a similar-looking flat copy of it). */
  background: var(--hero-grad);
}
.vid-meta::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(2,28,27,.20) 0%, rgba(2,28,27,.38) 100%),
    radial-gradient(60% 50% at 15% 10%, rgba(1,131,128,.42), transparent 60%),
    radial-gradient(50% 45% at 90% 20%, rgba(231,168,30,.24), transparent 60%),
    radial-gradient(55% 55% at 82% 92%, rgba(1,131,128,.26), transparent 62%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 22px 22px, 22px 22px;
}
.vm-unit {
  position: relative; z-index: 1;
  display: block; text-align: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
}
.vm-a1c { position: relative; z-index: 1; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vm-val { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.vm-val b {
  font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff;
}
.vm-val small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; }
.vm-arrow { display: flex; align-items: center; }
.vm-arrow .ic { width: 18px; height: 18px; color: #fff; opacity: .8; }

/* The second story rail (no before/after figures — those numbers only exist
   for the original, verified set; inventing them for this batch would be a
   real claim with nothing behind it) uses its own plain, single-line
   caption plate instead of the two-row HbA1c layout above. */
.vid-meta-solo {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 13px 14px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  /* Same dark teal panel background as .vid-meta — see above. */
  background: var(--hero-grad);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vid-meta-solo::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(2,28,27,.20) 0%, rgba(2,28,27,.38) 100%),
    radial-gradient(60% 50% at 15% 10%, rgba(1,131,128,.42), transparent 60%),
    radial-gradient(50% 45% at 90% 20%, rgba(231,168,30,.24), transparent 60%),
    radial-gradient(55% 55% at 82% 92%, rgba(1,131,128,.26), transparent 62%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 22px 22px, 22px 22px;
}
.vm-unit-solo {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px; text-align: center;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.vm-unit-solo .ic { width: 13px; height: 13px; flex: none; }

.rail-nav {
  position: absolute; top: calc(50% - 26px); z-index: 4; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-md);
  display: grid; place-items: center; cursor: pointer;
  transition: background .22s, transform .22s, opacity .22s;
}
.rail-nav:hover:not(:disabled) { background: var(--accent-wash); border-color: rgba(1,102,99,.22); transform: translateY(-50%) scale(1.06); }
.rail-nav:disabled { opacity: .3; cursor: default; }
.rail-nav.prev { left: -18px; }
.rail-nav.next { right: -18px; }
.rail-nav .ic { width: 19px; height: 19px; }
.rail-nav.prev .ic { transform: scaleX(-1); }

.rail-dots { margin-top: 20px; display: flex; justify-content: center; gap: 8px; }
.rail-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 100px; background: var(--line); cursor: pointer; transition: width .3s, background .3s; }
.rail-dots button.on { width: 26px; background: linear-gradient(90deg, var(--gold-bright), var(--gold)); }

/* Every card is already on screen at once above the swipe breakpoint — the
   rail controls have nothing to do there. */
@media (min-width: 901px) { .rail-nav, .rail-dots { display: none; } }

@media (max-width: 900px) {
  /* Back to a flex row here — the swipe rail needs its cards laid out
     end-to-end for scroll-snap, which a grid can't do. */
  .rail-track {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; gap: 18px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rail-track::-webkit-scrollbar { display: none; }
  .vid-card { flex: 0 0 calc((100% - 54px) / 4); max-width: 260px; }
}
@media (max-width: 760px) {
  .vid-card { flex: 0 0 calc((100% - 18px) / 2); }
  .rail-nav.prev { left: 4px; } .rail-nav.next { right: 4px; }
}
@media (max-width: 460px) { .vid-card { flex: 0 0 78%; } }

.disclaimer-line { margin-top: 24px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ══════════ 04 · SECTION CTA ══════════ */
.sec-cta { display: flex; justify-content: center; margin-top: clamp(14px, 1.6vw, 22px); }
.sec-cta .btn { white-space: normal; text-align: center; }

/* ══════════ 05 · PHILOSOPHY + PROOF ══════════ */
.philosophy {
  margin: 28px 0 0; padding: 24px 26px; border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(1,131,128,.22), rgba(231,168,30,.16));
  border: 1px solid var(--glass-line);
}
.philosophy .ic { width: 24px; height: 24px; fill: var(--accent); stroke: none; opacity: .4; margin-bottom: 10px; }
.philosophy blockquote {
  font-family: var(--f-display); font-size: clamp(16px, 1.7vw, 21px); font-weight: 700;
  color: var(--ink); line-height: 1.45; letter-spacing: -.02em;
}
.philosophy figcaption {
  margin-top: 12px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep);
}

.proof-strip {
  /* Fixed 2x2, not auto-fit: at this width auto-fit fitted three across and
     orphaned the fourth on its own row. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}
.proof-strip div { display: grid; gap: 4px; }
.proof-strip b {
  font-family: var(--f-display); font-size: clamp(19px, 1.9vw, 25px); font-weight: 800;
  color: var(--accent-deep); letter-spacing: -.03em; line-height: 1.1;
}
.proof-strip span { font-size: 12.2px; color: var(--muted); line-height: 1.45; }

/* ══════════ 06 · COMPARISON ══════════
   The generic column stays plain and grey — a deliberate contrast against the
   personalised column, which reuses the same dark panel-dark treatment as the
   hero and the Problem section's pull-quote, so "the difference" is felt in
   the visual weight, not just read in the copy. A VS badge bridges the two so
   it reads as one comparison, not two unrelated boxes side by side. */
.compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1080px; margin: 0 auto; }
.cmp-col { border-radius: var(--r-lg); padding: clamp(28px, 3.2vw, 42px); border: 1px solid var(--line); }
.cmp-generic { background: var(--glass-hi); }
.cmp-personal { border: none; box-shadow: var(--shadow-xl); }
.cmp-col h3 { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; margin-bottom: 22px; }
.cmp-generic h3 { color: var(--muted); }
.cmp-generic h3 .ic {
  width: 28px; height: 28px; flex: none; padding: 6px; border-radius: 50%;
  color: var(--muted); background: var(--line-2);
}
.cmp-personal h3 .ic { width: 18px; height: 18px; padding: 3px; border-radius: 7px; color: #4a3406; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 4px 10px -2px rgba(231,168,30,.5); }
.cmp-col ul { display: grid; gap: 14px; }
.cmp-col li { font-size: 14.5px; line-height: 1.55; padding-bottom: 13px; border-bottom: 1px solid var(--line-2); }
.cmp-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp-generic li { color: var(--muted); }
.cmp-personal li { color: var(--ink); font-weight: 500; }
.cmp-vs {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: var(--page-bg); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted);
}
.cmp-close {
  text-align: center; margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--f-display); font-size: clamp(19px, 2.2vw, 28px); font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.cmp-close::before {
  content: ''; display: block; width: 46px; height: 3px; margin: 0 auto 18px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--accent-light));
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } .cmp-vs { display: none; } }

/* ══════════ 07 · FIT LIST ══════════
   Bold statements, not another grid of bordered cards — this is the third
   section in a row that would otherwise repeat the same boxed pattern. A
   thin divider between rows and a gold check badge carry it instead. */
.fit-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px;
  max-width: 980px; margin: 0 auto;
}
.fit-list li {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display); font-size: clamp(16px, 1.7vw, 19px); font-weight: 700;
  color: var(--ink); line-height: 1.4; letter-spacing: -.01em;
  padding: 20px 0; border-bottom: 1px solid var(--line-2);
}
.fit-check {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 6px 14px -4px rgba(231,168,30,.5);
}
.fit-check .ic { width: 15px; height: 15px; color: #4a3406; stroke-width: 2.4; }
@media (max-width: 720px) { .fit-list { grid-template-columns: 1fr; } }

/* ══════════ 09 · STEPS ══════════ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.step {
  position: relative; display: grid; gap: 6px; padding: 26px 22px 24px;
  border-radius: var(--r-lg); background: var(--glass); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.step:hover {
  transform: var(--tilt) translateY(-5px);
  box-shadow: 0 26px 54px -20px rgba(0,20,19,.5);
  border-color: rgba(246,197,68,.32);
}
.step-n {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: #4a3406; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  padding: 5px 12px; border-radius: 100px; justify-self: start; margin-bottom: 6px;
  box-shadow: 0 6px 14px -4px rgba(231,168,30,.5);
}
.step b { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.step span:last-child { font-size: 13.4px; color: var(--muted); line-height: 1.55; }
/* The connector between steps — hidden on the last, and on one column. */
.step::after {
  content: ''; position: absolute; right: -11px; top: 50%; width: 10px; height: 1px;
  background: var(--line); translate: 0 -50%; transition: background .5s, box-shadow .5s;
}
.step.in::after { background: linear-gradient(90deg, var(--gold-bright), transparent); box-shadow: 0 0 6px rgba(246,197,68,.5); }
.step:last-child::after { display: none; }
@media (max-width: 900px) { .step::after { display: none; } }

/* ══════════ 10 · FAQ ══════════ */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }
.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq[open] { border-color: rgba(94,234,212,.34); box-shadow: var(--shadow-md); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: 15.2px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic {
  width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 8px;
  color: #4a3406; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 6px 14px -4px rgba(231,168,30,.4);
  transition: transform .3s var(--ease);
}
.faq[open] summary .ic { transform: rotate(45deg); }
.faq-a { padding: 0 22px 20px; }
.faq-a p { font-size: 14.4px; color: var(--body); line-height: 1.7; }
.faq-a p + p { margin-top: 10px; }
.faq-ul { margin-top: 10px; display: grid; gap: 8px; }
.faq-ul li {
  position: relative; padding-left: 20px;
  font-size: 14.4px; color: var(--body); line-height: 1.6;
}
.faq-ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.faq-ol { counter-reset: faqStep; }
.faq-ol li { padding-left: 26px; }
.faq-ol li::before {
  counter-increment: faqStep; content: counter(faqStep);
  width: 17px; height: 17px; top: 1px; border-radius: 50%; background: var(--gold);
  color: #4a3406; font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.faq-warn {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px !important;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.2);
  color: #B91C1C !important; font-size: 13.5px !important; font-weight: 600;
}
.faq-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ══════════ STICKY MOBILE CTA ══════════ */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 700;
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: 100px;
  font-family: var(--f-display); font-size: 15px; font-weight: 700; color: #3B2A04;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 4px 12px rgba(184,134,11,.3), 0 14px 34px -10px rgba(42,21,36,.35);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.sticky-cta b { font-weight: 800; }
.sticky-cta .ic { width: 16px; height: 16px; }
.sticky-cta.show { transform: none; }
@media (max-width: 900px) { .sticky-cta { display: flex; } body { padding-bottom: 0; } }

/* The hero eyebrow carries a long phrase — tighten it so it holds one line. */
.hd-left .eyebrow { letter-spacing: .12em; font-size: 10px; white-space: nowrap; }
@media (max-width: 520px) { .hd-left .eyebrow { white-space: normal; } }

/* Clear the sticky bar so the last of the page is never permanently covered. */
@media (max-width: 900px) { .foot { padding-bottom: 104px; } }

/* In one column the right-aligned trust list reads as a mistake — flip it back
   to a normal left-aligned list with the tick leading. */
@media (max-width: 980px) {
  .hd-trust li { justify-content: flex-start; text-align: left; }
  .hd-trust .ic { order: 0; }
  .hd-stats { justify-content: start; }
  .hd-stats div { text-align: left; }
  .hd-stats span { margin-left: 0; }
}

/* ── 3D tilt-on-hover ─────────────────────────────────────────────────────
   `Motion.tilt` writes --tx/--ty (−1..1) per element as the pointer moves
   over it; this is just the transform that consumes them. Mouse-only by
   virtue of the JS never firing on touch, but the base state must still be
   harmless if the custom properties are never set. */
.tilt-card {
  transform: var(--tilt);
  transition: transform .5s var(--ease-out);
  will-change: transform;
}

/* ══════════ CINEMATIC ENTRANCES ══════════
   The hero and Recognition were the only sections with any per-element
   flourish; every band between them just faded up flat. These give each
   section's own icon/badge a small one-shot "arrival" the moment its parent
   .reveal-lift gets `.in`, and let the comparison section's winning column
   catch a single sweep of light — same shine technique as Recognition, but
   one-shot rather than looping, so it reads as an entrance, not a decoration
   you have to keep ignoring. */
@keyframes iconPop {
  0%   { transform: scale(.4) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.14) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.vent.in .vent-n,
.vent.in h3 .ic,
.step.in .step-n,
.compare.in .cmp-personal h3 .ic {
  animation: iconPop .55s var(--ease-out) both;
}

.cmp-personal { position: relative; overflow: hidden; }
.cmp-personal::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.16) 52%, transparent 60%);
  transform: translateX(-140%); opacity: 0;
}
.compare.in .cmp-personal::after { animation: cmpShine 1.1s ease-out .45s 1 both; }
@keyframes cmpShine {
  0%   { transform: translateX(-140%); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(140%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vent.in .vent-n, .vent.in h3 .ic, .step.in .step-n, .compare.in .cmp-personal h3 .ic,
  .compare.in .cmp-personal::after { animation: none; }
}