/* =========================================================
   Nuvantu Health landing page · Clear Day
   One family (Manrope), one type scale, one spacing scale.
   ========================================================= */

@font-face { font-family: "Archivo"; src: url('assets/fonts/archivo-variable.woff2') format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url('assets/fonts/manrope-latin-variable.woff2') format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* Color: sampled from the Nuvantu wordmark */
  --navy: #082956;
  --navy-2: #0e3670;
  --navy-3: #061f43;
  --azure: #007ed0;
  --aqua: #22c8d4;
  --turq: #3bd4d1;
  --page: #f6fafb;
  --mist: #eaf5f8;
  --white: #fff;
  --mint: #dcf5f2;
  --mint-ink: #04646b;
  /* Brand navy for decorative UI (fee strip, icons, FAQ). Never used for primary actions. */
  --navy-ui: #022850;
  /* Primary action ("Start Now"): orange with navy text. 7.35:1 / 6.35:1 / 5.63:1 contrast. */
  --action: #ff9900;
  --action-hover: #f28b00;
  --action-active: #e88000;
  --action-ink: #01224c;
  --ink-deep: #01224c;
  --ink-price: #001c42;
  --font-display: "Archivo", "Manrope", system-ui, sans-serif;
  --grad: linear-gradient(115deg, var(--azure) 0%, var(--aqua) 58%, var(--turq) 100%);
  --grad-text-light: linear-gradient(115deg, #0068b0 0%, #00808c 100%);
  --grad-text-dark: linear-gradient(115deg, #7fd8ff 0%, #6fe7e3 100%);

  /* Type scale (mobile → desktop) */
  --fs-display: clamp(2.5rem, 1.55rem + 3.6vw, 4.25rem);   /* 40 → 68 */
  --fs-h2: clamp(2rem, 1.5rem + 1.9vw, 3rem);              /* 32 → 48 */
  --fs-h3: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);      /* 22 → 30 */
  --fs-h4: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);      /* 19 → 22 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);       /* 17 → 20 */
  --fs-body: 1rem;                                          /* 16 */
  --fs-small: .875rem;                                      /* 14 */
  --fs-label: .8125rem;                                     /* 13 */
  --fs-fine: .75rem;                                        /* 12 */
  --fs-stat: clamp(3rem, 2.5rem + 2vw, 4rem);               /* 48 → 64 */

  /* Spacing scale */
  --section-y: clamp(56px, 4vw + 32px, 88px);
  --head-gap: clamp(28px, 2vw + 16px, 40px);
  --arc: clamp(24px, 3vw, 44px);
  --gap: clamp(16px, 2vw, 24px);
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 40px);

  --r-sm: 12px; --r: 17px; --r-lg: 22px; --r-btn: 10px;
  --shadow-sm: 0 1px 2px rgba(8, 41, 86, .06), 0 8px 24px -12px rgba(8, 41, 86, .18);
  --shadow: 0 2px 4px rgba(8, 41, 86, .04), 0 24px 48px -24px rgba(8, 41, 86, .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 200ms;
  --z-header: 10; --z-bar: 40; --z-skip: 60;
}

/* Tones: each section sets its own text tokens */
body { --ink: var(--navy); --muted: #4a6380; --line: rgba(8, 41, 86, .1); --grad-text: var(--grad-text-light); --accent: #0068b0; --icon-accent: rgba(34, 200, 212, .3); }
.tone-dark { --icon-accent: rgba(111, 231, 227, .22); --ink: #f4f9ff; --muted: #b4c6e0; --line: rgba(255, 255, 255, .14); --grad-text: var(--grad-text-dark); --accent: #6fe7e3; background: var(--navy); color: var(--ink); }
.tone-mist { background: var(--mist); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; font-family: "Manrope", system-ui, sans-serif; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
strong, b { font-weight: 800; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: var(--z-skip); top: 10px; left: 10px; padding: 12px 18px; background: #fff; color: #000; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
.h-display, .h2, .h3, .h4 { font-weight: 800; color: var(--ink); text-wrap: balance; }
.h-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.02em; }
.h4 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.lead a { color: var(--ink); font-weight: 700; }
.fine { font-size: var(--fs-fine); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.center { text-align: center; }
.eyebrow { margin-bottom: 14px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section-head { max-width: 760px; margin-bottom: var(--head-gap); }
.section-head .lead { margin-top: 16px; max-width: 46ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.split { display: grid; gap: 16px; max-width: none; align-items: end; }
.section-head.split .lead { margin-top: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--r-btn); background: var(--action); color: var(--action-ink); font: 800 var(--fs-body)/1.2 "Manrope", sans-serif; text-align: center; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(232, 128, 0, .7); transition: background-color var(--dur), transform var(--dur) var(--ease); }
.btn:hover { background: var(--action-hover); transform: translateY(-1px); }
.btn:active { background: var(--action-active); transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--action-ink); outline-offset: 3px; box-shadow: 0 0 0 7px #fff; }
.tone-dark .btn:focus-visible, .concerns .btn:focus-visible, .mobile-bar .btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px var(--action-ink); }
.btn .icon { width: 18px; height: 18px; stroke-width: 2.4; transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); border-radius: 12px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg { min-height: 60px; padding: 0 28px; font-size: 1.0625rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- Header (reference-v4) ---------- */
.site-header .wrap, .hero .wrap { width: min(100%, 1560px); padding-inline: clamp(20px, 7vw, 108px); }
.site-header { position: relative; z-index: var(--z-header); background: #fff; border-bottom: 1px solid #e3e9ef; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: clamp(150px, 15vw, 228px); height: auto; }
.header-right { display: flex; align-items: center; gap: 22px; }
.header-status { display: none; align-items: center; gap: 12px; margin: 0; padding-right: 22px; border-right: 1px solid #d5dde6; color: #2b3b5c; font-size: clamp(14px, 1.1vw, 17px); font-weight: 600; }
.live-dot { position: relative; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #16c47f; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* ---------- 1. Hero (reference-v4) ---------- */
.hero > .wrap { position: relative; z-index: 1; padding-bottom: clamp(36px, 7vw, 116px); }
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(28px, 3.8vw, 58px); background: #fff; }
.hero-grid { display: grid; gap: 40px; }
.hero-eyebrow { color: #3b4a6b; font-size: clamp(11px, .9vw, 14px); font-weight: 700; letter-spacing: .38em; text-transform: uppercase; }
.hero-title { margin-top: clamp(14px, 1.5vw, 24px); color: var(--ink-deep); font-size: clamp(34px, 10.4vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.hero-title span { display: block; }
.hero-price { color: #00738f; }
.hero-check { display: flex; align-items: center; gap: 16px; margin-top: clamp(16px, 1.6vw, 26px); color: var(--ink-deep); font-size: clamp(22px, 1.95vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.check-dot { display: grid; place-items: center; flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: 50%; background: #c8f1ea; color: #0e7f84; --icon-accent: transparent; }
.check-dot .icon { width: .7em; height: .7em; stroke-width: 3.4; }
.hero-body { max-width: 23.5em; margin-top: clamp(10px, 1vw, 14px); color: #4a5d7a; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.45; }
.hero-care { display: none; }
.hero-action { margin-top: clamp(20px, 1.8vw, 28px); }
.btn-start { min-height: clamp(56px, 4.4vw, 68px); min-width: min(100%, 320px); padding: 0 clamp(28px, 3vw, 48px); border-radius: 10px; font-size: clamp(17px, 1.55vw, 24px); gap: 14px; }
.btn-start .icon { width: 1em; height: 1em; }
.btn-header { min-height: 44px; min-width: 0; padding: 0 18px; font-size: clamp(14px, 1.05vw, 16px); gap: 8px; }
.btn-bar { min-width: 0; min-height: 48px; padding: 0 20px; font-size: 16px; }
.hero-action .btn { width: 100%; }
.hero-fine { max-width: 38em; margin-top: 10px; color: #4a5d7a; font-size: 12px; line-height: 1.5; }

.hero-visual { position: relative; }
@media (max-width: 1023px) { .hero-visual { margin-inline: 8px; } }
.hero-card { overflow: hidden; container: hero-card / inline-size; border-radius: 22px; background: #d9eef2; box-shadow: 0 30px 60px -36px rgba(11, 31, 69, .45); }
.hero-photo-wrap { overflow: hidden; aspect-ratio: 610 / 595; }
.hero-photo-wrap picture { display: block; width: 100%; height: 100%; }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.1); transform-origin: 50% 8%; }
/* Fee strip sizes from the card's width (cqi), not the viewport: one row on wide cards (about 92% of the card
   at most), label on its own row below 560px. The note may wrap as a last resort; it never clips. */
.fee-strip { display: flex; align-items: center; gap: clamp(10px, 2cqi, 20px); min-height: clamp(64px, 13.5cqi, 82px); padding: 12px clamp(16px, 3.6cqi, 34px); background: var(--navy-ui); color: #fff; }
.fee-label { flex: 0 0 auto; padding-right: clamp(10px, 2cqi, 20px); border-right: 1px solid rgba(255, 255, 255, .35); font-size: clamp(10px, 2.1cqi, 13px); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.fee-big { flex: 0 0 auto; font-size: clamp(22px, 5.2cqi, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.fee-note { flex: 0 1 auto; min-width: 0; font-size: clamp(12px, 2.5cqi, 16px); line-height: 1.3; }
@container hero-card (max-width: 559px) {
  .fee-strip { flex-wrap: wrap; row-gap: 6px; padding-block: 14px; }
  .fee-label { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .fee-big { font-size: clamp(22px, 7.5cqi, 34px); }
  .fee-note { font-size: clamp(12px, 3.2cqi, 16px); }
}

/* White benefit bar: the quiet transition the hero ribbon passes behind, so labels never sit on the band. */
.benefits { position: relative; display: grid; margin-top: clamp(24px, 2.2vw, 34px); border: 1px solid #e3e9ef; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -30px rgba(1, 34, 76, .35); }
.benefits li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--ink-deep); font-size: clamp(17px, 1.4vw, 22px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.benefits li + li { border-top: 1px solid #e3e9ef; }
.benefits img { width: clamp(68px, 5.6vw, 88px); height: auto; flex: 0 0 auto; margin-block: -10px; }
/* Wave stays edge to edge but stops growing past ~1540px wide (no 300px+ band on ultrawide). */
.hero-wave { position: absolute; z-index: 0; left: 0; bottom: 0; display: block; width: 100%; height: min(11.04vw, 170px); object-fit: fill; pointer-events: none; }
/* Hero scene (integrated-ribbons-v13): covers the whole section (inset 0), above the wave and behind the content.
   The art is stretched to the section box on both axes, so every canvas edge sits exactly on a section edge and
   the canvas top can never show inside the page. Desktop uses the wide art (the fold rises beside the clinician
   card); single-column layouts use the portrait art, also filling the full section. */
.hero-scene { position: absolute; z-index: 0; inset: 0; height: 100%; background: url('assets/integrated-ribbons-v13/hero-wide.webp') center / 100% 100% no-repeat; pointer-events: none; }

/* ---------- Marquee band between hero and concerns ---------- */
.marquee { position: relative; z-index: 2; overflow: hidden; padding-block: clamp(12px, 1.1vw, 16px); background: #5fe0ec; color: #01224c; }
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; flex-shrink: 0; }
.marquee li { display: flex; align-items: center; white-space: nowrap; font-size: clamp(13px, 1.05vw, 16px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.marquee li::after { content: ""; width: 7px; height: 7px; margin-inline: clamp(20px, 2.2vw, 34px); border-radius: 50%; background: #01224c; }
.marquee.is-running .marquee-track { animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(calc(-1 * var(--marquee-shift, 0px)), 0, 0); } }

/* ---------- 2. Everyday concerns (reference-v4) ---------- */
.concerns { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(36px, 3.4vw, 48px) clamp(40px, 3.6vw, 52px); background: linear-gradient(180deg, #002b5d 0%, #00264e 100%); color: #fff; }
/* Unchanged up to ~2100px; past the 1440px content cap it grows into the free right margin (max 1100px). */
.concerns-ribbon { position: absolute; z-index: -1; top: 0; right: 0; width: max(min(42vw, 600px), min(100vw - 1500px, 1100px)); height: auto; opacity: .9; pointer-events: none; }
.concerns .wrap { width: min(100%, 1440px); padding-left: clamp(20px, 5.6vw, 80px); padding-right: clamp(20px, 4vw, 56px); }
.concerns-logo { width: clamp(160px, 18vw, 260px); height: auto; }
.concerns-title { margin-top: clamp(10px, 1vw, 16px); font-size: clamp(36px, 6vw, 88px); font-weight: 800; line-height: 1.0; letter-spacing: -.045em; text-wrap: balance; }
.concerns-title span { display: block; }
.concerns-title .aqua { background: linear-gradient(100deg, #6fe9f5 0%, #2cc5dc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.concerns-lead { margin-top: clamp(10px, 1vw, 16px); text-align: center; color: #e3ecf8; font-size: clamp(17px, 2vw, 29px); line-height: 1.35; }
.concerns-grid { display: grid; gap: 16px; margin-top: clamp(16px, 1.4vw, 20px); }
.concern-col { position: relative; }
.concern-connector { display: none; }
.concern-list { position: relative; display: grid; gap: 12px; }
.concern { position: relative; display: grid; grid-template-columns: clamp(104px, 13.5vw, 190px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.4vw, 20px); min-height: clamp(86px, 8.3vw, 117px); padding: 2px clamp(14px, 1.8vw, 26px) 6px clamp(6px, .8vw, 12px); border-radius: 17px; background: #fff; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .55); }
.concern-art { width: 100%; height: auto; aspect-ratio: 190 / 120; object-fit: contain; }
.concern h3 { color: var(--ink-deep); font-size: clamp(17px, 2.15vw, 31px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.concern p { margin-top: 4px; color: #3c4f70; font-size: clamp(14px, 1.6vw, 22px); line-height: 1.35; }
.member-card { display: flex; flex-direction: column; padding: clamp(28px, 3.2vw, 44px); border-radius: 20px; background: #fff; color: var(--ink-price); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.member-label { font-size: clamp(12px, 1.2vw, 17px); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.member-rule { display: block; width: 56px; height: 4px; margin: clamp(14px, 1.3vw, 20px) 0 clamp(24px, 2.6vw, 38px); border-radius: 2px; background: #2cc5dc; }
.member-price, .member-fee { display: flex; align-items: flex-end; gap: 10px; }
.member-price strong { font-size: clamp(76px, 10.3vw, 148px); font-weight: 800; line-height: .85; letter-spacing: -.055em; }
.member-price span { padding-bottom: .2em; font-size: clamp(22px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.member-card hr { margin: clamp(22px, 2.2vw, 32px) 0; border: 0; border-top: 1px solid #dfe6ee; }
.member-fee { align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.member-fee strong { font-size: clamp(66px, 8.6vw, 122px); font-weight: 800; line-height: .85; letter-spacing: -.055em; }
.member-fee span { white-space: nowrap; font-size: clamp(18px, 2.15vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.member-copy { margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 2.6vw, 36px); color: #3c5a8a; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.45; }
.member-card .btn { margin-top: auto; }
.concerns-fine { margin-top: clamp(28px, 3vw, 44px); color: #c9d6ea; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; text-align: center; text-wrap: balance; }

/* ---------- Shared: frames and dark-section arcs ---------- */
.assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-block: 16px 10px; font-size: var(--fs-small); font-weight: 700; }
.assure li { display: flex; align-items: center; gap: 6px; }
.assure .icon { width: 18px; height: 18px; color: var(--navy-ui); stroke-width: 2.8; }
.enter { animation: enter var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.arc-top { position: relative; overflow-x: clip; }
.arc-top::before { content: ""; position: absolute; left: -10%; right: -10%; top: calc(-1 * var(--arc)); height: calc(var(--arc) * 2); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--navy); pointer-events: none; }
.arc-top > .wrap { position: relative; z-index: 1; }

/* ---------- How It Works: explainer film + steps (how-merged-v15) ---------- */
.xp { position: relative; overflow: hidden; padding-block: clamp(40px, 4.4vw, 70px) clamp(28px, 2.6vw, 42px); background: #fbfdfe; }
.xp-wrap { width: min(100%, 1600px); margin-inline: auto; padding-left: clamp(16px, 5.2vw, 96px); padding-right: clamp(16px, 4vw, 72px); }
.xp-head { padding-left: clamp(0px, .9vw, 14px); }
.xp-eyebrow { color: #0b7fae; font-size: clamp(12px, 1.15vw, 18px); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.xp-title { margin-top: clamp(10px, .9vw, 14px); color: var(--ink-deep); font-size: clamp(30px, 4.4vw, 74px); line-height: 1.03; letter-spacing: -.035em; }
.xp-title span { display: block; }
.xp-teal { color: #0b7fae; }
.xp-grid { display: grid; gap: 28px; margin-top: clamp(22px, 2.5vw, 42px); }
.xp-media { position: relative; isolation: isolate; margin: 0; }
.xp-lead { margin-top: clamp(8px, .8vw, 12px); color: #3c4f70; font-size: clamp(17px, 1.5vw, 23px); }
/* Explainer scene (integrated-ribbons-v13): anchored to the player vertically but spanning the full viewport
   (24px past each edge; the section clips it), so its cut ends sit on the page edges. Desktop: the sweep enters
   left behind the video and its low trail runs under the side column to the right edge, reaching about the
   section bottom (height 125% of the figure). Phone: portrait art at natural ratio; its transparent top and
   bottom bands fall above and below the player, so the band crosses the video scene only. */
.xp-scene { position: absolute; z-index: -1; top: 0; left: calc(-1 * (max(0px, (100vw - 1600px) / 2) + clamp(16px, 5.2vw, 96px)) - 24px); width: calc(100vw + 48px); height: 125%; pointer-events: none; }
.xp-scene img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
@media (max-width: 899px) {
  .xp-scene { top: calc(-.5 * (100vw + 48px)); height: auto; }
  .xp-scene img { height: auto; }
}
/* The film plays like a GIF: muted, looping, no controls. The poster shows until it loads. */
.xp-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(12px, 1.2vw, 18px); background: #0d2349; box-shadow: 0 30px 60px -30px rgba(1, 34, 76, .45); }
.xp-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Phones get the separately composed 4:5 film (v3), so the player matches it and the type stays large. */
@media (max-width: 767px) { .xp-player { aspect-ratio: 4 / 5; } }
.xp-caption { margin-top: 12px; color: var(--ink-deep); font-size: clamp(12px, 1vw, 15px); }
.xp-side { position: relative; z-index: 1; }
/* Steps: a numbered vertical stepper. A thin aqua rail joins the three cards. */
.xp-steps { position: relative; display: grid; gap: clamp(10px, .9vw, 14px); }
.xp-steps::before { content: ""; position: absolute; z-index: -1; top: 24px; bottom: 24px; left: clamp(52px, 4.4vw, 70px); width: 2px; background: linear-gradient(#22c8d4, #0b7fae); opacity: .35; }
.xp-step { display: grid; grid-template-columns: clamp(104px, 8.8vw, 140px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.2vw, 18px); padding: clamp(10px, .8vw, 12px); border: 1px solid #e3edf3; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -30px rgba(1, 34, 76, .35); }
.xp-step-art { overflow: hidden; border-radius: 12px; background: #eef8fb; }
.xp-step-art img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 840; object-fit: cover; }
.xp-step h3 { display: flex; align-items: baseline; gap: 10px; color: var(--ink-deep); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.1; letter-spacing: -.015em; }
.xp-num { flex: 0 0 auto; color: #1aa5c8; font-family: "Manrope", sans-serif; font-size: .78em; font-weight: 800; font-variant-numeric: tabular-nums; }
.xp-step p { margin-top: 6px; color: #3c4f70; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.38; }
.xp-cta { margin-top: clamp(14px, 1.2vw, 18px); min-height: clamp(60px, 4.8vw, 76px); font-size: clamp(18px, 1.6vw, 24px); }
.xp-fine { margin-top: 10px; color: var(--ink-deep); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.5; text-shadow: 0 0 2px #fbfdfe, 0 0 6px #fbfdfe, 0 0 10px #fbfdfe; } /* legible where the ribbon passes behind */
.how-reassure { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(22px, 2vw, 32px); padding: 16px clamp(18px, 3vw, 48px); border: 1px solid #d7e8ef; border-radius: 18px; background: rgba(255, 255, 255, .92); }
.how-lock { flex: 0 0 auto; padding-right: clamp(14px, 1.8vw, 24px); border-right: 1px solid #c9dbe6; color: var(--ink-deep); }
.how-lock .icon { width: 34px; height: 34px; stroke-width: 1.8; --icon-accent: transparent; }
.how-reassure h3 { color: var(--ink-deep); font-size: clamp(19px, 1.6vw, 25px); line-height: 1.15; letter-spacing: -.015em; }
.how-reassure p { margin-top: 4px; color: #3c4f70; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; }
.xp-disclosure { position: relative; z-index: 1; margin-top: clamp(24px, 2.2vw, 36px); color: var(--ink-deep); font-size: clamp(12px, 1.05vw, 16px); line-height: 1.5; text-align: center; text-wrap: balance; }
@media (min-width: 900px) {
  .xp-grid { grid-template-columns: minmax(0, 923fr) minmax(0, 520fr); column-gap: 3.4%; align-items: start; }
}
@media (max-width: 639px) {
  .xp-step { grid-template-columns: 96px minmax(0, 1fr); }
  .xp-steps::before { left: 58px; }
  .how-reassure { align-items: flex-start; gap: 12px; padding: 18px; }
  .how-lock { padding-right: 0; border-right: 0; }
}

/* ---------- 4. Included (included-v7) ---------- */
.inc { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(32px, 3.1vw, 44px) clamp(28px, 2.6vw, 40px); background: linear-gradient(180deg, #f5fbfd 0%, #f9fcfd 100%); }
/* Unchanged up to ~1840px; then it grows into the margin right of the 1392px content (max 860px). */
.inc-ribbon { position: absolute; z-index: -1; top: 10px; right: 0; width: max(min(31vw, 440px), min(100vw - 1400px, 860px)); height: auto; pointer-events: none; }
.inc-wrap { width: min(100%, 1392px); margin-inline: auto; padding-inline: clamp(16px, 3.4vw, 47px); }
.inc-head { padding-inline: clamp(4px, 1.8vw, 25px); }
.inc-eyebrow { color: #0b5fa8; font-size: clamp(12px, 1.05vw, 15px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.inc-title { margin-top: 6px; color: var(--ink-deep); font-size: clamp(32px, 4.6vw, 64px); line-height: .95; letter-spacing: -.035em; }
.inc-title span { display: block; }
.inc-teal { color: #0b7a91; }
.inc-sub { margin-top: 6px; color: #3c4f70; font-size: clamp(17px, 1.95vw, 27px); line-height: 1.3; }
.inc-cards { display: grid; gap: 20px; margin-top: clamp(16px, 1.4vw, 20px); }
.inc-card { overflow: hidden; border: 1px solid #e1eaf0; border-radius: 21px; background: #fff; box-shadow: 0 16px 36px -28px rgba(1, 34, 76, .35); }
.inc-media { display: block; width: 100%; height: auto; aspect-ratio: 639 / 337; object-fit: cover; }
.inc-media-primary { object-position: 50% 58%; }
.inc-body { padding: clamp(20px, 2vw, 26px) clamp(20px, 3.2vw, 44px) clamp(24px, 2.4vw, 34px); }
.inc-tag { color: #0b5fa8; font-size: clamp(12px, 1vw, 14px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.inc-h3 { margin-top: 12px; color: var(--ink-deep); font-size: clamp(28px, 3.4vw, 47px); line-height: 1; letter-spacing: -.03em; }
.inc-h3 span { display: block; }
.inc-text { margin-top: 14px; color: #4a5d7a; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.35; }
.inc-checks { display: grid; gap: 10px; margin-top: 20px; color: var(--ink-deep); font-size: clamp(16px, 1.45vw, 20px); }
.inc-checks li { display: flex; align-items: center; gap: 18px; }
.inc-check { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-deep); color: #fff; --icon-accent: transparent; }
.inc-check .icon { width: 17px; height: 17px; stroke-width: 3; }
.inc-also { display: grid; gap: 12px; margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: #e5f5fa; }
.inc-also-label { color: #0b5fa8; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.inc-also ul { display: grid; gap: 10px; }
.inc-also li { display: flex; align-items: center; gap: 14px; color: var(--ink-deep); font-size: clamp(16px, 1.45vw, 20px); font-weight: 700; }
.inc-also .icon { width: 34px; height: 34px; stroke-width: 1.5; --icon-accent: rgba(34, 200, 212, .35); }
.inc-fine { margin-top: 8px; color: #4a5d7a; font-size: clamp(12px, .95vw, 13px); line-height: 1.45; text-align: center; text-wrap: balance; }
/* Urgent care orbit (urgent-orbit-v11): live 24/7 label + SVG ring; app.js moves the sun and moon. */
.orbit { position: relative; overflow: hidden; container-type: inline-size; background: #0b1d3f; }
.orbit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orbit-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-label { position: absolute; left: 50.5%; top: 48.7%; display: grid; justify-items: center; margin: 0; color: #fff; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-label strong { font-family: var(--font-display); font-size: 14.6cqw; font-weight: 900; line-height: .9; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(1, 20, 48, .45); }
.orbit-label span { margin-top: 1.6cqw; color: #8ef1f3; font-size: 2.6cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.orbit-toggle { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(1, 34, 76, .55); color: #fff; cursor: pointer; opacity: .8; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity var(--dur), background-color var(--dur); }
.orbit-toggle[hidden] { display: none; }
.orbit-toggle:hover, .orbit-toggle:focus-visible { opacity: 1; background: rgba(1, 34, 76, .85); }
.orbit-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.orbit-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.orbit-toggle .orbit-i-play, .orbit[data-paused] .orbit-toggle .orbit-i-pause { display: none; }
.orbit[data-paused] .orbit-toggle .orbit-i-play { display: block; }

@media (min-width: 768px) {
  .inc-cards { grid-template-columns: 1fr 1fr; }
  .inc-also { align-items: center; gap: 10px; min-height: 76px; padding: 14px 24px; }
  .inc-also li { white-space: nowrap; }
  .inc-also ul { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .inc-also li { justify-content: center; padding-inline: 12px; }
  .inc-also li + li { border-left: 1px solid #b8d9e4; }
}
@media (min-width: 1100px) {
  .inc-also { grid-template-columns: auto 1fr; gap: 32px; padding: 10px 32px; }
}
@media (max-width: 767px) {
  .inc-ribbon { width: 32vw; top: 0; opacity: .7; }
  .inc-title, .inc-sub, .inc-eyebrow { position: relative; }
}

/* ---------- 6. Who ---------- */
.who { overflow: hidden; padding-top: calc(var(--section-y) * .4); }
.who-rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.who-rail::-webkit-scrollbar { display: none; }
.who-rail:focus-visible { outline-offset: -4px; }
.who-list { display: flex; gap: var(--gap); width: max-content; padding-inline: var(--gutter); }
.who-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: min(80vw, 320px); min-height: 400px; padding: 24px; border-radius: var(--r-lg); color: #fff; scroll-snap-align: start; background-color: var(--navy); background-size: cover; background-position: center; transition: transform var(--dur) var(--ease); }
.who-card:hover { transform: translateY(-4px); }
.who-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 36%, rgba(4, 18, 40, .6) 58%, rgba(4, 18, 40, .94)); }
.wc-1 { background-image: url('assets/who-between-jobs-natural-v3.webp'); background-position: 40% 30%; }
.wc-2 { background-image: url('assets/who-business-owner-natural-v3.webp'); background-position: 50% 25%; }
.wc-3 { background-image: url('assets/who-gig-worker-natural-v3.webp'); background-position: 45% 30%; }
.wc-4 { background-image: url('assets/who-caregiver-natural-v3.webp'); background-position: 50% 25%; }
.who-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: auto; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.who-tag { margin-bottom: 8px; color: var(--turq); font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.who-card .h4 { color: #fff; }
.who-card p:last-child { margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: var(--fs-small); }

/* ---------- 9. Membership (membership-v9) ---------- */
.mb { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(36px, 4vw, 60px) clamp(28px, 2.6vw, 40px); background: var(--navy); color: #fff; }
/* Corner folds: unchanged up to 1600px, then they grow with the viewport (max 900px) while the 15% translation
   keeps both cropped ends on the section edges. Growth starts late so the upper-left band stays above the eyebrow. */
.mb-ribbon { position: absolute; z-index: -1; width: max(min(22vw, 330px), min(100vw - 1270px, 900px)); height: auto; pointer-events: none; }
.mb-ribbon-tl { top: 0; left: 0; transform: translateY(-15%); }
.mb-ribbon-br { right: 0; bottom: 0; transform: translateY(15%) rotate(180deg); }
.mb-wrap { width: min(100%, 1560px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 60px); }
.mb-grid { display: grid; gap: 32px; }
.mb-intro { display: flex; flex-direction: column; }
.mb-eyebrow { color: #6fe7f0; font-size: clamp(12px, 1.05vw, 16px); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.mb-title { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(36px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; word-spacing: .04em; font-stretch: 94%; }
.mb-title span { display: block; }
.mb-aqua { color: #5fe0ec; }
.mb-lead { max-width: 30em; margin-top: clamp(14px, 1.6vw, 24px); color: #e3ecf8; font-size: clamp(17px, 1.75vw, 27px); line-height: 1.4; }
.mb-art { margin: clamp(20px, 2.4vw, 36px) 0 0; text-align: center; }
.mb-art img { display: block; width: 100%; max-width: 700px; height: auto; margin-inline: auto; object-fit: contain; }
.mb-art figcaption { margin-top: 12px; color: #e3ecf8; font-size: clamp(15px, 1.3vw, 19px); }
.mb-card { position: relative; z-index: 1; padding: clamp(22px, 2.1vw, 32px) clamp(22px, 3vw, 46px); border-radius: clamp(16px, 1.6vw, 24px); background: #fff; color: var(--ink-deep); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.mb-pill { display: inline-block; padding: 7px 18px; border-radius: 999px; background: #dcf5f4; color: var(--ink-deep); font-size: clamp(12px, 1vw, 15px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mb-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding-bottom: clamp(14px, 1.6vw, 22px); border-bottom: 1px solid #dfe6ee; }
.mb-price { display: flex; align-items: flex-start; gap: 6px; }
.mb-cur { margin-top: .35em; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 52px); font-weight: 900; }
.mb-amt { font-family: var(--font-display); font-size: clamp(88px, 9.6vw, 146px); font-weight: 900; line-height: .9; letter-spacing: -.05em; }
.mb-per { display: flex; flex-direction: column; align-self: flex-end; margin-left: 8px; padding-bottom: .3em; }
.mb-per strong { font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 34px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.mb-per span { color: #4a5d7a; font-size: clamp(14px, 1.3vw, 19px); }
.mb-daily { display: grid; padding: 14px 20px; border-radius: 14px; background: #eaf7f9; color: var(--ink-deep); line-height: 1.2; }
.mb-daily span { color: #3c4f70; font-size: clamp(15px, 1.35vw, 20px); }
.mb-daily strong { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 27px); font-weight: 900; letter-spacing: -.015em; white-space: nowrap; }
.mb-calc { margin-top: 10px; color: #4a5d7a; font-size: clamp(12px, .95vw, 14px); }
.mb-list { display: grid; gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(14px, 1.6vw, 22px); }
.mb-list li { display: flex; align-items: flex-start; gap: 18px; font-size: clamp(16px, 1.55vw, 23px); font-weight: 600; line-height: 1.35; }
.mb-br { display: none; }
.mb-check { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-deep); color: #fff; --icon-accent: transparent; }
.mb-check .icon { width: 17px; height: 17px; stroke-width: 3; }
.mb-cta { margin-top: clamp(18px, 2.2vw, 32px); min-height: clamp(60px, 5vw, 76px); font-size: clamp(18px, 1.7vw, 26px); }
.mb-secure { display: flex; align-items: center; gap: 14px; margin-top: clamp(16px, 1.8vw, 26px); }
.mb-secure .secure-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #c9ebee; border-radius: 10px; background: #eaf8f9; color: var(--ink-deep); --icon-accent: transparent; }
.mb-secure .secure-icon .icon { width: 17px; height: 17px; stroke-width: 2; }
.mb-secure .secure-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mb-secure .secure-text strong { color: var(--ink-deep); font-size: clamp(14px, 1.15vw, 17px); font-weight: 700; }
.mb-secure .secure-text span { color: #4a5d7a; font-size: clamp(13px, 1.1vw, 16px); }
.mb-terms { margin-top: clamp(14px, 1.6vw, 22px); padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid #dfe6ee; color: #4a5d7a; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; }
.mb-disclosure { margin-top: clamp(20px, 2.6vw, 40px); color: #c9d6ea; font-size: clamp(12px, .95vw, 14px); text-align: center; text-wrap: balance; }
@media (min-width: 900px) {
  .mb-grid { grid-template-columns: minmax(0, 640fr) minmax(0, 700fr); column-gap: clamp(24px, 3.4vw, 52px); align-items: start; }
  .mb-intro { padding-top: clamp(28px, 3.3vw, 50px); padding-left: clamp(0px, 4.9vw, 74px); }
  .mb-title span { white-space: nowrap; }
  .mb-art { margin-top: -16px; margin-left: clamp(-90px, -5.9vw, 0px); }
  /* Art 16% larger than its column, shifted left in normal flow (not transformed). */
  .mb-art img { width: 116%; max-width: none; margin-left: -6%; }
  .mb-br { display: inline; }
  .mb-art figcaption { margin-top: -12px; }
}
@media (max-width: 899px) {
  .mb-art img { max-width: 460px; }
}
@media (min-width: 1200px) {
  .mb-daily { position: relative; }
  .mb-daily::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: -9px; width: 1px; background: #dfe6ee; }
}

/* ---------- 10. FAQ (faq-close-v6) ---------- */
.faq { position: relative; padding-block: clamp(40px, 5.6vw, 64px) clamp(20px, 2.4vw, 32px); background: #f4fbfd; }
.faq .wrap, .final .wrap { width: min(100%, 1240px); padding-inline: clamp(20px, 5.2vw, 56px); }
.faq-grid { display: grid; gap: 28px; }
.faq-eyebrow { color: #2b3b5c; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.faq-title { margin-top: 16px; color: var(--ink-deep); font-size: clamp(40px, 5.9vw, 66px); line-height: .98; letter-spacing: -.035em; }
.faq-title span { display: block; }
.faq-teal { color: #00738f; }
.faq-lead { margin-top: 18px; color: #4a5d7a; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45; }
.faq-bubbles { display: block; width: min(100%, 290px); height: auto; margin: 24px 0 20px; }
.faq-still { color: var(--ink-deep); font-size: clamp(20px, 2.1vw, 23px); letter-spacing: -.015em; }
.faq-mail { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 4px; color: var(--ink-deep); font-size: 19px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.faq-mail svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.faq-list { display: grid; gap: 10px; align-content: start; }
.faq-item { border: 1px solid #dde6ee; border-radius: 12px; background: #fdfeff; box-shadow: 0 6px 16px -12px rgba(1, 34, 76, .25); transition: background-color var(--dur), border-color var(--dur); }
.faq-item[open] { border-color: #bfe8f1; background: #e3f6fb; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 16px 12px 18px; color: var(--ink-deep); font-size: clamp(17px, 2vw, 21px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--navy-ui); outline-offset: 2px; border-radius: 12px; }
.faq-icon { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #c9d5e2; background: #fff; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--ink-deep); transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity var(--dur); }
.faq-item[open] .faq-icon { border-color: transparent; background: #2cc0dc; }
.faq-item[open] .faq-icon::before { background: #fff; }
.faq-item[open] .faq-icon::after { opacity: 0; }
.faq-a { padding: 0 18px 20px; color: #3c4f70; font-size: clamp(16px, 1.75vw, 19px); line-height: 1.5; }
.faq-item[open] .faq-a { animation: enter var(--dur) var(--ease) both; }
.faq-a a { color: var(--ink-deep); font-weight: 700; }

/* ---------- 11. Final close (faq-close-v6) ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(40px, 5vw, 80px); background: #013060; color: #fff; }
/* Foreground wave: edge to edge, height capped at 180px so it does not balloon on ultrawide screens. */
.final-wave { position: relative; z-index: 1; display: block; width: 100%; height: min(11.2vw, 180px); object-fit: fill; margin-bottom: clamp(16px, 2.4vw, 32px); }
/* Final scene (integrated-ribbons-v13): covers the whole section (inset 0), stretched to the section box on both
   axes. Desktop uses dedicated final-wide-v2 art (not the hero's) whose top quarter is fully transparent, so it
   clears the foreground wave: its fold rises on the right behind the portrait and its long low tail runs through
   the bottom padding, below the copy and disclosures. Phones use the portrait final art, also filling the full section. */
.final-scene { position: absolute; z-index: 0; inset: 0; height: 100%; pointer-events: none; }
.final-scene img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.final-grid { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
.final-title { font-size: clamp(32px, 4.9vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
.final-title span { display: block; }
.final-aqua { color: #5fe0ec; }
.final-lead { max-width: 30em; margin-top: 20px; color: #e3ecf8; font-size: clamp(17px, 1.95vw, 21px); line-height: 1.5; }
.final-cta { width: min(100%, 466px); margin-top: 26px; }
.final-checks { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 22px; font-size: clamp(16px, 1.75vw, 18px); font-weight: 700; }
.final-checks li { display: flex; align-items: center; gap: 12px; }
.final-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #5fe0ec; color: var(--ink-deep); --icon-accent: transparent; }
.final-check .icon { width: 17px; height: 17px; stroke-width: 3.2; }
.final-fine { margin-top: 14px; color: #c9d6ea; font-size: 12.5px; line-height: 1.5; }
.final-fine + .final-fine { margin-top: 8px; }
.final-card { position: relative; width: min(100%, 440px); margin: 0 auto; }
.final-photo { display: block; width: 100%; height: auto; aspect-ratio: 410 / 444; object-fit: cover; object-position: 50% 50%; border-radius: 18px 18px 0 0; background: #d9e6ee; }
.final-card figcaption { display: grid; gap: 2px; padding: 16px 24px 20px; border-radius: 0 0 18px 18px; background: #fff; color: var(--ink-deep); }
.final-card figcaption strong { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 26px); font-weight: 900; letter-spacing: -.02em; }
.final-card figcaption span { color: #3c4f70; font-size: 15px; }
/* Bottom runway for the low band, which runs through the section's bottom padding on every layout. */
@media (max-width: 767px) {
  .final { padding-bottom: max(40px, 24vw); }
  .final-scene { top: 0; height: 100%; }
}
@media (min-width: 768px) {
  .final { padding-bottom: calc(min(10.7vw, 205px) + 24px); }
}

/* FAQ/final desktop layout (after base rules so it wins) */
@media (min-width: 768px) {
  .final-title span { white-space: nowrap; }
  .faq .wrap { padding-right: clamp(20px, 4vw, 56px); }
  .faq-grid { grid-template-columns: minmax(0, 330fr) minmax(0, 564fr); column-gap: clamp(20px, 3.1vw, 40px); align-items: start; }
  .final-grid { grid-template-columns: minmax(0, 496fr) minmax(0, 410fr); column-gap: clamp(10px, 1vw, 24px); }
  .final-card { width: 100%; margin: 0; justify-self: end; }
  /* v6 fidelity: taller, roomier FAQ left stack; bigger closing headline and CTA */
  .faq { padding-bottom: 8px; }
  .faq-side { padding-top: 24px; }
  .faq-title { margin-top: 20px; font-size: clamp(48px, 6.2vw, 70px); line-height: 1.02; }
  .faq-lead { margin-top: 14px; font-size: clamp(18px, 2.1vw, 22px); }
  .faq-bubbles { margin: 37px 0 41px; }
  .final-title { font-size: clamp(40px, 5.5vw, 62px); line-height: 1.08; font-stretch: 88%; letter-spacing: -.03em; }
  .final-wave { margin-bottom: clamp(10px, 1vw, 26px); }
  .final-copy { padding-top: 30px; }
  .final-cta { min-height: clamp(60px, 6.9vw, 74px); font-size: clamp(19px, 2.35vw, 26px); }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: 48px 104px; background: var(--navy-3); font-size: var(--fs-fine); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.footer-top nav { display: flex; gap: 20px; font-size: var(--fs-small); }
.footer-top nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.site-footer p { max-width: 110ch; margin-top: 12px; color: var(--muted); line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Mobile enrollment bar ---------- */
.mobile-bar { position: fixed; z-index: var(--z-bar); left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; border: 1px solid rgba(95, 224, 236, .45); background: rgba(1, 34, 76, .94); color: #fff; box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: rise var(--dur) var(--ease) both; }
.mobile-bar[hidden] { display: none; }
.bar-mark { width: 32px; height: 32px; flex: 0 0 32px; padding: 4px; border-radius: 10px; background: #fff; }
.bar-price { margin-right: auto; }
.mobile-bar strong { display: block; font-size: 1.25rem; line-height: 1; letter-spacing: -.02em; }
.mobile-bar strong span { font-size: var(--fs-label); opacity: .7; }
.mobile-bar small { color: #b4c6e0; font-size: var(--fs-fine); }
.mobile-bar .btn { min-height: 48px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Claims review (?claims) ---------- */
[data-show-claims] [data-confirm] { outline: 2px dashed #ffb020 !important; outline-offset: 3px; }
[data-show-claims] [data-confirm]::after { content: "CONFIRM: " attr(data-confirm); display: block; margin-top: 6px; padding: 4px 8px; border-radius: 4px; background: #ffb020; color: #1a1000; -webkit-text-fill-color: #1a1000; font: 700 11px/1.35 "Manrope", sans-serif; letter-spacing: 0; text-transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
/* Mobile hero: an authored offer/doctor composition, not stacked desktop columns.
   Text remains live; picture selects one mobile asset and its matching preload.
   No viewport-height clipping: enlarged text can grow the layout naturally. */
@media (max-width: 767px) {
  .site-header .wrap, .hero .wrap { padding-inline: 20px; }
  .header-inner { min-height: 56px; gap: 12px; }
  .brand img { width: 164px; }
  .header-right { gap: 0; }
  .header-status { display: flex; gap: 6px; padding: 0; border: 0; font-size: 11px; font-weight: 800; white-space: nowrap; }
  .header-status-detail, .btn-header { display: none; }
  .header-status .live-dot { width: 7px; height: 7px; }
  .hero { padding-top: 18px; }
  .hero > .wrap { padding-bottom: 26px; }
  .hero-grid { grid-template-columns: 43% minmax(0, 1fr); gap: 0; }
  .hero-copy { display: contents; }
  .hero-eyebrow { grid-area: 1 / 1 / 2 / -1; font-size: 10px; letter-spacing: .24em; }
  .hero-title { grid-area: 2 / 1 / 3 / -1; margin-top: 10px; font-size: clamp(32px, 9.9vw, 52px); line-height: 1; }
  .hero-details { position: relative; z-index: 2; grid-area: 3 / 1 / 4 / 2; align-self: center; margin-top: -42px; padding-block: 8px; }
  .hero-check { align-items: flex-start; gap: 7px; margin-top: 0; font-size: 17px; line-height: 1.2; }
  .hero-check .check-dot { width: 21px; height: 21px; margin-top: 2px; }
  .hero-body { display: none; }
  .hero-care { display: grid; gap: 10px; margin-top: 12px; color: var(--ink-deep); font-size: 16px; font-weight: 600; line-height: 1.3; }
  .hero-care li { max-width: 9.4em; }
  .hero-visual { grid-area: 3 / 1 / 4 / -1; align-self: end; margin: 8px -20px 0; min-width: 0; }
  .hero-card { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
  .hero-photo-wrap { aspect-ratio: 8 / 5; }
  .hero-photo { object-fit: cover; object-position: center top; transform: none; }
  .fee-strip { flex-wrap: nowrap; justify-content: center; gap: 12px; min-height: 42px; padding: 9px 20px; }
  .fee-label { display: none; }
  .fee-big { font-size: 22px; }
  .fee-note { font-size: 11px; line-height: 1.2; }
  .hero-action { position: relative; z-index: 2; grid-area: 4 / 1 / 5 / -1; margin-top: 14px; }
  .hero-action .btn { width: 100%; min-width: 0; min-height: 54px; font-size: 19px; }
  .hero-fine { max-width: none; margin-top: 10px; font-size: 11px; line-height: 1.45; }
  .hero-scene { display: none; }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 0; border-radius: 0; box-shadow: none; }
  .benefits li { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 10px 5px; font-size: 11px; line-height: 1.3; text-align: center; }
  .benefits li + li { border-top: 0; border-left: 1px solid #e3e9ef; }
  .benefits li + li::before { display: none; }
  .benefits img { width: 44px; height: 44px; margin: 0; object-fit: contain; }

  /* Keep each section's illustration and decision together on a phone. */
  .member-card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 22px; }
  .member-label, .member-copy, .member-card .btn { grid-column: 1 / -1; }
  .member-rule, .member-card hr { display: none; }
  .member-price, .member-fee { flex-direction: column; align-items: flex-start; gap: 8px; }
  .member-price strong, .member-fee strong { font-size: 64px; }
  .member-price span, .member-fee span { font-size: 16px; line-height: 1.25; padding-bottom: 0; }
  .member-fee { padding-left: 16px; border-left: 1px solid #dfe6ee; }
  .member-copy { margin: 0; }
  .member-card .btn { width: 100%; min-width: 0; }

  .mb-grid { gap: 22px; }
  .mb-intro { display: grid; grid-template-columns: minmax(0, 1fr) 44%; column-gap: 8px; align-items: center; }
  .mb-eyebrow, .mb-title { grid-column: 1 / -1; }
  .mb-lead { font-size: 16px; }
  .mb-art { margin: 10px -8px 0 0; }
  .mb-art figcaption { display: none; }
  .mb-card { padding: 22px; }
  .mb-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .mb-price { gap: 4px; }
  .mb-cur { font-size: 22px; }
  .mb-amt { font-size: clamp(58px, 17vw, 72px); }
  .mb-per { margin-left: 2px; }
  .mb-per strong { font-size: 18px; }
  .mb-per span { font-size: 11px; }
  .mb-daily { padding: 8px; border-radius: 10px; }
  .mb-daily span { font-size: 13px; }
  .mb-daily strong { font-size: 15px; }
  .mb-list li { gap: 12px; }
  .mb-check { width: 28px; height: 28px; }

  .faq { padding-top: 32px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 12px; }
  .faq-side { display: contents; }
  .faq-eyebrow { grid-area: 1 / 1 / 2 / -1; }
  .faq-title { grid-area: 2 / 1 / 3 / 2; margin-top: 0; font-size: clamp(34px, 10vw, 42px); }
  .faq-bubbles { grid-area: 2 / 2 / 3 / 3; align-self: center; width: clamp(92px, 30vw, 128px); margin: 0 0 4px; }
  .faq-lead { grid-area: 3 / 1 / 4 / -1; margin-top: 0; font-size: 16px; }
  .faq-list { grid-area: 4 / 1 / 5 / -1; }
  .faq-still { grid-area: 5 / 1 / 6 / -1; margin-top: 4px; font-size: 18px; }
  .faq-mail { grid-area: 6 / 1 / 7 / -1; justify-self: start; margin-top: -10px; font-size: 17px; }

  .final-grid { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .final-copy { display: contents; }
  .final-title { grid-area: 1 / 1 / 2 / -1; }
  .final-lead { grid-area: 2 / 1 / 3 / 2; margin: 0; font-size: 16px; line-height: 1.4; }
  .final-checks { grid-area: 3 / 1 / 4 / 2; flex-direction: column; gap: 10px; margin: 0; font-size: 13px; }
  .final-checks li { align-items: flex-start; gap: 7px; }
  .final-check { flex: 0 0 22px; width: 22px; height: 22px; }
  .final-check .icon { width: 13px; height: 13px; }
  .final-card { grid-area: 2 / 2 / 4 / 3; align-self: center; min-width: 0; }
  .final-photo { aspect-ratio: 4 / 5; object-position: 52% 25%; border-radius: 12px 12px 0 0; }
  .final-card figcaption { padding: 10px 12px; border-radius: 0 0 12px 12px; }
  .final-card figcaption strong { font-size: 19px; line-height: 1.1; }
  .final-card figcaption span { font-size: 12px; line-height: 1.3; }
  .final-cta { grid-area: 4 / 1 / 5 / -1; width: 100%; margin: 0; }
  .final-fine, .final-fine + .final-fine { grid-column: 1 / -1; margin: 0; padding-right: 11vw; }
}

/* Tablet and landscape phones keep the doctor beside the offer as well. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1.04fr 1fr; gap: 28px; align-items: start; }
  .hero-title { font-size: clamp(32px, 4.45vw, 48px); }
  .hero-check { font-size: 22px; gap: 10px; }
  .hero-body { font-size: 17px; }
  .hero-visual { margin: 0; }
  .hero-scene { background-image: url('assets/integrated-ribbons-v13/hero-mobile.webp'); }
  .hero-action .btn { min-width: 0; width: 100%; }
}


@media (max-width: 360px) {
  .btn-start { min-width: 0; padding-inline: 16px; white-space: nowrap; gap: 8px; }
  .faq-title { font-size: 32px; }

  .bar-mark { display: none; }
  .mobile-bar small { display: none; }
  .mb-price-row { grid-template-columns: 1fr; }
  .mb-daily { display: flex; align-items: center; gap: 6px; width: 100%; }
}


@media (min-width: 640px) {
  .hero-action .btn { width: auto; min-width: 360px; }
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .benefits li { justify-content: center; padding: 16px 12px; }
  .benefits li + li { border-top: 0; }
  .benefits li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 52px; background: #dfe6ee; transform: translateY(-50%); }
}

@media (min-width: 768px) {
  .header-status { display: flex; }
  .section-head.split { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}

@media (min-width: 900px) {
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 630fr) minmax(0, 610fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .hero-title { font-size: clamp(50px, 5.35vw, 84px); }
  .hero-title span { white-space: nowrap; }
  .hero-visual { margin-top: -24px; }
  .concerns-grid { grid-template-columns: minmax(0, 750fr) minmax(0, 495fr); gap: 22px; }
  /* Connector art: its first and last dots sit on the first and last row centers. */
  .concern-connector { display: block; position: absolute; left: -19px; top: 7.8%; height: 84.4%; width: auto; transform: translateX(-85.5%); pointer-events: none; }


  .who-rail { overflow: visible; }
  .who-list { display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, var(--wrap)); margin-inline: auto; }
  .who-card { width: auto; min-height: 420px; }


  .mobile-bar { display: none !important; }
}

/* =========================================================
   Scroll-driven motion (progressive; transform and opacity only)
   ========================================================= */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  .who-card { animation: card-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 80%; }
  @keyframes card-in { from { opacity: .4; transform: scale(.94); } to { opacity: 1; transform: none; } }
}

/* Reveal fallback for browsers without scroll timelines (class set by app.js) */
.io-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.io-reveal.is-in { opacity: 1; transform: none; }

/* Reduced motion: static and fully visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .io-reveal { opacity: 1; transform: none; }
  .marquee-set { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-inline: var(--gutter); }
}

/* ---------- Display headlines: Archivo 900, Title Case (see AGENTS.md) ---------- */
h1, h2, h3, .h-display, .h2, .h3, .h4, .hero-title, .concerns-title, .concern h3, .member-price strong, .member-fee strong, .fee-big, .pt-total-nv strong, .stat { font-family: var(--font-display); font-weight: 900; font-stretch: 100%; }
.hero-title { letter-spacing: -.035em; }
.concerns-title { letter-spacing: -.035em; }
.h2 { letter-spacing: -.025em; }
.h3, .h4, .concern h3 { letter-spacing: -.015em; }