/* =====================================================================
   MANATEE SWIM SCHOOL
   Visual language: bright, sunny, playful — our own bright, sunny take's proven look (yellow + turquoise + navy, rounded type, chunky
   3D buttons) with our own manatee mark and our real video testimonials.
   ===================================================================== */

:root {

  /* Hero panel wash. Kept as raw channels so the scrim can vary alpha per
     stop. #1b81bc — a bright, saturated pool blue; white large text on it
     solid measures 4.27:1. */
  --hero-panel: 27,129,188;

  /* ---- Brand ---- */
  --sun:        #ffc73a;   /* the big happy yellow */
  --sun-deep:   #eaa617;   /* button underside / hovers */
  --sun-soft:   #fff7e4;   /* tinted panels */
  --sun-pale:   #fffaf0;

  --aqua:       #0fc6c6;   /* pool turquoise */
  --aqua-deep:  #0a8f8f;
  --aqua-light: #8fecec;
  --aqua-pale:  #e3f8fb;

  --navy:       #0a4467;   /* dark buttons + headings */
  --navy-deep:  #072a41;
  --navy-soft:  #1a6a96;   /* button underside */

  --coral:      #f45c40;   /* the "swim school way" red */
  --coral-deep: #c93f2b;   /* sticker text — 4.9:1 on white */
  --sun-ring:   #e08717;   /* button outline */
  --green:      #16a34a;
  --sale:       #c62828;   /* their discount-chip red */

  --ink:        #0a4467;
  --ink-soft:   #48697f;
  --white:      #ffffff;
  --bg:         #ffffff;
  --line:       #dbe7f2;

  --font-head: "Baloo 2", "Fredoka", system-ui, -apple-system, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (1.25 ratio off a 17px body) ---- */
  --t-xs:   0.78rem;    /* 12.5 — micro labels          */
  --t-sm:   0.875rem;   /* 14   — captions, sub-labels  */
  --t-base: 1.0625rem;  /* 17   — body                  */
  --t-md:   1.1875rem;  /* 19   — lead-ins, list items  */
  --t-lg:   1.375rem;   /* 22   — card headings         */
  --t-xl:   1.75rem;    /* 28   — block headings        */

  /* ---- Spacing scale — every gap snaps to this ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius:     22px;
  --radius-sm:  14px;
  --radius-lg:  32px;
  --shadow:     0 14px 34px rgba(11, 61, 92, .13);
  --shadow-sm:  0 6px 18px rgba(11, 61, 92, .10);
  --shadow-lg:  0 26px 60px -18px rgba(7, 42, 65, .38);

  --maxw: 1180px;
  --header-h: 76px;
  --section-y: clamp(76px, 10vw, 132px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  overflow-x: clip; margin: 0;
  font-family: var(--font-body); color: var(--ink); background: var(--bg);
  font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; color: var(--navy); font-weight: 800; letter-spacing: -.012em; }
p { text-wrap: pretty; }
a { color: var(--aqua-deep); }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 800px; }

:focus-visible { outline: 3px solid var(--aqua-deep); outline-offset: 2px; border-radius: 8px; }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; transform: translateY(-200%); transition: transform .15s var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.ic { width: 22px; height: 22px; flex: none; color: var(--aqua-deep); }
.ic-inline { width: 1em; height: 1em; vertical-align: -.15em; }
.ic-star { color: #ffc73a; }   /* the drawn star tints via currentColor, like every other icon */

/* =========================================================
   BUTTONS — chunky pills with a solid 3D underside
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; white-space: nowrap;
  text-decoration: none; border: none; cursor: pointer; border-radius: 999px;
  padding: 15px 30px; font-size: var(--t-base); text-align: center; min-height: 52px;
  position: relative; top: 0;
  transition: top .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .15s var(--ease-out), filter .15s var(--ease-out);
}
.btn-lg { padding: 18px 38px; font-size: var(--t-md); min-height: 60px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--sun); color: var(--navy); box-shadow: 0 0 0 3px var(--sun-ring), 0 6px 0 var(--sun-ring); }
.btn-navy    { background: var(--navy); color: #fff; box-shadow: 0 0 0 3px var(--navy-deep), 0 6px 0 var(--navy-deep); }
.btn-aqua    { background: var(--aqua); color: var(--navy); box-shadow: 0 0 0 3px var(--aqua-deep), 0 6px 0 var(--aqua-deep); }
.btn-white   { background: #fff; color: var(--navy); box-shadow: 0 0 0 3px #c3d8ea, 0 6px 0 #c3d8ea; }
.btn-outline { background: #fff; color: var(--navy); border: 3px solid var(--navy); box-shadow: 0 5px 0 rgba(11,61,92,.18); }
.btn-text    { background: none; color: var(--ink-soft); box-shadow: none; padding: 10px 16px; min-height: 40px; }

.btn:active { top: 5px; box-shadow: 0 1px 0 currentColor; }
.btn-primary:active { box-shadow: 0 0 0 3px var(--sun-ring), 0 1px 0 var(--sun-ring); }
.btn-navy:active    { box-shadow: 0 0 0 3px var(--navy-deep), 0 1px 0 var(--navy-deep); }
.btn-aqua:active    { box-shadow: 0 0 0 3px var(--aqua-deep), 0 1px 0 var(--aqua-deep); }
.btn-white:active   { box-shadow: 0 0 0 3px #c3d8ea, 0 1px 0 #c3d8ea; }
.btn-text:active    { top: 0; box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.04); }
  .btn-navy:hover, .btn-aqua:hover { filter: brightness(1.1); }
  .btn-white:hover { background: var(--sun-pale); }
  .btn-outline:hover { background: var(--sun-soft); }
  .btn-text:hover { color: var(--navy); }
}

/* =========================================================
   TOP BAR + HEADER
   ========================================================= */
.topbar { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--navy); color: #fff; padding: 10px 16px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-sm); text-align: center; }
.topbar-stars { display: inline-flex; gap: 2px; }
.topbar-stars .ic-star { width: 16px; height: 16px; color: var(--sun); }
@media (max-width: 560px) { .topbar { font-size: .76rem; padding: 7px 12px; gap: 7px; } .topbar-stars .ic-star { width: 13px; height: 13px; } }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 20px rgba(11,61,92,.08); }
.nav-inner {
  display: flex; align-items: center; justify-content: center; gap: 48px;
  min-height: 116px; max-width: 1440px; margin: 0 auto; padding: 0 32px;
}
/* the two side groups are equal width, which is what keeps the logo dead centre */
.nav-group { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav-group--left  { justify-content: flex-start; order: 1; }
.nav-group--right { justify-content: flex-end; order: 3; }

/* ---- centred logo ---- */
.brand { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--navy); flex: none; order: 2; }
.brand-mark {
  width: 96px; height: 96px; flex: none; display: grid; place-items: center;
  background: none; border-radius: 0; box-shadow: none;
  transition: transform .2s var(--ease-out);
}
.brand-mark img, .brand-mark svg {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.05); }
.brand-text { font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; line-height: 1; display: flex; flex-direction: column; align-items: center; color: var(--navy); text-align: center; }
.brand-text small { font-weight: 700; font-size: .58rem; color: var(--aqua-deep); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }

/* ---- nav links ---- */
.primary-nav { display: contents; }
.nav-group a { text-decoration: none; color: var(--navy); font-family: var(--font-body); font-weight: 700; font-size: var(--t-base); }
.nav-group a:not(.nav-cta):not(.nav-phone) {
  padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; position: relative;
  transition: color .15s var(--ease-out); white-space: nowrap;
}
.nav-group a:not(.nav-cta):not(.nav-phone)::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 3px; border-radius: 3px;
  background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out);
}
.nav-group a.active::after, .nav-group a:not(.nav-cta):not(.nav-phone):hover::after { transform: scaleX(1); }
.nav-group a.active { color: var(--aqua-deep); }

.nav-phone { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; margin: 0 8px; color: var(--navy) !important; font-weight: 700; font-size: var(--t-base); white-space: nowrap; }
.nav-phone .ic-inline { color: var(--aqua); width: 1.2em; height: 1.2em; }
.nav-phone:hover { color: var(--aqua-deep) !important; }

/* ---- the top-right Book Now ---- */
.nav-cta {
  background: var(--sun); color: var(--navy) !important; border-radius: 999px;
  padding: 14px 30px; min-height: 52px; font-family: var(--font-head); font-size: var(--t-base); font-weight: 800;
  box-shadow: 0 0 0 3px var(--sun-ring), 0 5px 0 var(--sun-ring); display: inline-flex; align-items: center; gap: 8px;
  position: relative; top: 0; white-space: nowrap; flex: none;
  transition: top .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .15s var(--ease-out);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { filter: brightness(1.05); }
.nav-cta:active { top: 4px; box-shadow: 0 0 0 3px var(--sun-ring), 0 1px 0 var(--sun-ring); }

@media (max-width: 1180px) {
  .nav-inner { gap: 26px; padding: 0 20px; }
  .nav-group a:not(.nav-cta):not(.nav-phone) { padding: 10px 9px; font-size: 1rem; }
  .nav-phone { font-size: .98rem; margin: 0 4px; }
  .nav-cta { padding: 13px 22px; font-size: .98rem; }
  .brand-mark { width: 76px; height: 76px; }
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 11px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { width: 25px; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .25s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(7,42,65,.4); z-index: 40; }
.nav-backdrop.show { display: block; }

/* =========================================================
   SECTION FURNITURE
   ========================================================= */
section { padding: var(--section-y) 0; }
.section-head { margin-bottom: var(--s-7); }
.section-title { font-size: clamp(2.3rem, 5.4vw, 3.875rem); font-weight: 800; line-height: 1.0; letter-spacing: -.02em; text-wrap: balance; text-align: center; margin: 0 0 14px; color: var(--navy); }
.section-title.left { text-align: left; }
.section-sub { text-align: center; color: var(--ink-soft); margin: 0 auto; max-width: 34em; font-size: var(--t-md); }
.section-sub.left { text-align: left; margin-left: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; color: var(--aqua-deep); text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-xs); margin: 0 0 var(--s-3); }
.section-head .eyebrow { justify-content: center; width: 100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  --hero-photo: url('images/hero-child.webp');
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 88vh; min-height: 88svh; display: flex; align-items: center;
  padding: clamp(34px, 5vh, 58px) 0 clamp(96px, 13vh, 150px);
}
/* The photo is drawn at 94% height rather than `cover`, which scales the child
   down ~6% and widens the crop from 78% to 83% of the frame — more water, as
   the leader's hero has. That leaves a ~43px strip at the bottom; it sits
   inside the wave band, and the first gradient layer dissolves the photo's
   bottom edge into --hero-waterline so there is no cut line. The waterline
   value is the measured average of the photo's bottom row (#4fdaf4). */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  --hero-waterline: #4fdaf4;
  background-color: var(--hero-waterline);
  background-image:
    linear-gradient(to bottom, rgba(79,218,244,0) 80%, var(--hero-waterline) 95%),
    var(--hero-photo, none),
    linear-gradient(160deg, #4fd6e6 0%, var(--aqua) 55%, var(--aqua-deep) 100%);
  background-size: 100% 100%, auto 94%, cover;
  background-position: center top, right top, center;
  background-repeat: no-repeat;
  filter: saturate(1.12) contrast(1.03);
}
/* Built the same way the market leader's is: a FULLY OPAQUE panel, then one
   linear fade to transparent. Opacity matters — at any alpha below 1 the
   rendered colour is the photo showing through, so it would not be #1b81bc.
   Solid is the only way the panel reads as the exact hex.

   --w-solid must clear the right edge of .hero-copy. Past it the wash drops
   away fast, and white text there would fail (a 50% wash over bright water is
   ~2:1), so text must not extend beyond it. .hero-copy is a fixed 560px, so
   the fraction of the hero it covers grows as the viewport narrows — hence the
   override at narrow desktop widths. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  --w-panel: .92; --w-hold: 40%; --w-end: 62%;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-panel),0.920) 0%,
      rgba(var(--hero-panel),0.920) 40%,
      rgba(var(--hero-panel),0.894) 42.2%,
      rgba(var(--hero-panel),0.824) 44.4%,
      rgba(var(--hero-panel),0.721) 46.6%,
      rgba(var(--hero-panel),0.596) 48.8%,
      rgba(var(--hero-panel),0.460) 51.0%,
      rgba(var(--hero-panel),0.324) 53.2%,
      rgba(var(--hero-panel),0.199) 55.4%,
      rgba(var(--hero-panel),0.096) 57.6%,
      rgba(var(--hero-panel),0.026) 59.8%,
      rgba(var(--hero-panel),0.000) 62.0%);
}
@media (min-width: 941px) and (max-width: 1240px) {
  .hero-scrim {
    --w-hold: 52%; --w-end: 78%;
    background:
      linear-gradient(90deg,
        rgba(var(--hero-panel),0.920) 0%,
        rgba(var(--hero-panel),0.920) 52%,
        rgba(var(--hero-panel),0.894) 54.6%,
        rgba(var(--hero-panel),0.824) 57.2%,
        rgba(var(--hero-panel),0.721) 59.8%,
        rgba(var(--hero-panel),0.596) 62.4%,
        rgba(var(--hero-panel),0.460) 65.0%,
        rgba(var(--hero-panel),0.324) 67.6%,
        rgba(var(--hero-panel),0.199) 70.2%,
        rgba(var(--hero-panel),0.096) 72.8%,
        rgba(var(--hero-panel),0.026) 75.4%,
        rgba(var(--hero-panel),0.000) 78.0%);
  }
}
.hero-waves { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px,16vh,180px); overflow: hidden; z-index: 1; pointer-events: none; }
.wave-anim { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.wave-anim--back path { fill: #d6f7fa; opacity: .30; }
.wave-anim--front path { fill: #fff; opacity: .20; }
.wave-anim--back { animation: waveX 13s linear infinite; }
.wave-anim--front { animation: waveX 9s linear infinite; }
@keyframes waveX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-copy { max-width: 470px; }
.hero .eyebrow { color: var(--navy); background: #fff; padding: 8px 16px; border-radius: 999px; letter-spacing: .07em; box-shadow: 0 4px 14px rgba(5,50,66,.18); }
.hero .eyebrow .ic-inline { color: var(--aqua-deep); }
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 800; line-height: 1.02;
  letter-spacing: -.025em; text-wrap: balance; margin: 0 0 var(--s-5);
  color: #fff; text-shadow: 0 3px 26px rgba(4,18,28,.45);
}
/* the payoff word rides in a tilted white sticker — the one focal point
   of the hero, and the only place this treatment is used on the site */
.hero h1 .hl-sticker {
  display: inline-block; background: #fff; color: var(--coral-deep);
  padding: .04em .34em .12em; border-radius: 18px;
  transform: rotate(-1.8deg); text-shadow: none;
  box-shadow: 0 8px 0 rgba(255,255,255,.2), 0 20px 44px rgba(4,18,28,.34);
}
.hero h1 .hl { color: var(--sun); position: relative; white-space: nowrap; }
.hero h1 .hl-underline { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; color: #fff; opacity: .85; overflow: visible; pointer-events: none; }
html.js .hero h1 .hl-underline path { stroke-dasharray: 320; stroke-dashoffset: 320; }
html.js body.is-loaded .hero h1 .hl-underline path { transition: stroke-dashoffset .7s var(--ease-out) .55s; stroke-dashoffset: 0; }
/* 24px flat, matching the market leader's hero lede. This is not cosmetic:
   24px is the WCAG large-text threshold, so the floor here is 3:1 instead of
   4.5:1 — which is what makes the brighter panel colour usable at all. Do not
   drop it below 1.5rem without re-checking the hero contrast. */
.lede { font-size: 1.5rem; line-height: 1.5; color: #fff; max-width: 24em; margin: 0 0 var(--s-5); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }


.trust-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 11px; padding: 0; margin: 0; }
.trust-badges li { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 999px; padding: 11px 19px 11px 14px; box-shadow: 0 8px 22px rgba(4,18,28,.2); }
.trust-badges .ic { color: var(--aqua-deep); }
.trust-badges .ic-star { color: #ffc73a; }   /* the drawn star tints via currentColor, like every other icon */
.trust-badges span { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--t-xs); color: var(--ink-soft); }
.trust-badges strong { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: var(--t-sm); }

.wave-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 2; pointer-events: none; }
.wave-divider svg { width: 100%; height: clamp(46px, 6vw, 76px); display: block; }
.wave-divider path { fill: #ffffff; }

/* =========================================================
   FRUSTRATION — on the big yellow
   ========================================================= */
.frustration { background:
    radial-gradient(58% 46% at 22% 72%, rgba(255,255,255,.55), rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, #fff8e7 0%, #fff1d2 58%, #ffe9bd 100%); }
.frustration-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.frustration-figure { position: relative; margin: 0; width: 100%; }
.frustration-photo { position: relative; display: block; aspect-ratio: 4/5; width: 100%; height: auto; border-radius: var(--radius-lg); border: 8px solid #fff; box-shadow: var(--shadow); background: var(--aqua-pale); object-fit: cover; transform: rotate(-2deg); }
.frustration-copy { max-width: 38em; }
.frustration .section-title { font-size: clamp(2.15rem,4.6vw,3.35rem); margin-bottom: var(--s-3); }
.frustration .section-sub { margin-bottom: var(--s-5); font-size: var(--t-md); color: #6b5410; }
.pain-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.pain-list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-md); color: var(--navy); font-weight: 700; background: #fff; border-radius: 999px; padding: 13px 20px; box-shadow: 0 3px 0 rgba(226,166,26,.42); }
.pain-list .ic { color: var(--coral); flex: none; }
.frustration-turn { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem,2.2vw,1.55rem); line-height: 1.35; color: var(--navy); margin: 0 0 26px; }
@media (max-width: 900px) {
  .frustration-inner { grid-template-columns: 1fr; gap: 30px; }
  .frustration-copy { order: 1; max-width: none; }
  .frustration-figure { order: 2; max-width: 340px; margin: 0 auto; }
}

/* =========================================================
   RESULTS  (our edge: real video)
   ========================================================= */
.results { background: #fff; }
.transform-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; margin-bottom: 54px; }
.transform-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 3px solid var(--aqua-pale); }
.transform-figure { margin: 0; overflow: hidden; }
.transform-video { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--aqua-pale); }
.transform-body { padding: 24px 28px 28px; }
.transform-body h3 { margin: 0 0 var(--s-3); color: var(--aqua-deep); font-size: var(--t-lg); }
.transform-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.transform-steps li { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-soft); font-size: var(--t-base); }
.transform-steps li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua-light); }
.transform-steps li.transform-now { color: var(--navy); font-weight: 800; }
.transform-steps li.transform-now::before { display: none; }
.transform-steps li.transform-now .ic { width: 21px; height: 21px; color: var(--green); flex: none; }

/* the testimonial block — deliberately big, this is our moat */
.video-stories { background: linear-gradient(168deg, #f2fbfb 0%, var(--aqua-pale) 60%, #dcf2f2 100%); border: 3px solid #fff; border-radius: var(--radius-lg); padding: clamp(34px,5vw,58px) clamp(20px,4vw,48px); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.video-stories::before { content:""; position:absolute; inset:0; background: radial-gradient(55% 45% at 15% 0%, rgba(22,182,182,.16), rgba(22,182,182,0) 70%), radial-gradient(50% 45% at 88% 100%, rgba(255,184,61,.20), rgba(255,184,61,0) 70%); pointer-events:none; }
.video-stories > * { position: relative; }
.vs-flag { display: inline-flex; align-items: center; gap: 8px; background: var(--sun); color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin: 0 0 14px; }
.block-head { text-align: center; color: var(--navy); font-size: clamp(1.95rem,4.4vw,3.2rem); margin: 0 0 var(--s-2); }
.vs-sub { text-align: center; color: var(--ink-soft); margin: 0 auto var(--s-6); max-width: 34em; font-size: var(--t-base); }
.vs-head { text-align: center; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; max-width: 660px; margin: 0 auto; }
.video-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.testi-video { width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; display: block; background: #0b3d5c; border: 6px solid #fff; border-radius: var(--radius); box-shadow: 0 16px 36px -8px rgba(11,61,92,.34); }
.video-card figcaption { color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: var(--t-base); text-align: center; }
.video-card figcaption span { display: block; color: var(--ink-soft); font-size: var(--t-sm); font-family: var(--font-body); font-weight: 600; }
.vs-note { text-align: center; margin: var(--s-6) 0 0; color: #0a6e6e; font-family: var(--font-head); font-weight: 700; font-size: var(--t-base); }

.reviews-block { margin-top: clamp(44px,5vw,62px); }
.testi-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: 940px; margin: 0 auto; }
.testi-card { background: var(--aqua); color: var(--navy); border-radius: var(--radius); padding: 26px 28px; margin: 0; box-shadow: 0 8px 0 var(--aqua-deep); }
.testi-card .stars { display: flex; gap: 3px; margin-bottom: 12px; }
.testi-card .stars .ic { width: 19px; height: 19px; color: var(--sun); }
.testi-card blockquote { margin: 0 0 var(--s-3); font-size: var(--t-base); line-height: 1.5; }
.testi-card figcaption { font-family: var(--font-head); font-weight: 800; font-size: var(--t-sm); color: var(--navy); }

/* =========================================================
   COMPARISON
   ========================================================= */
.compare { background: var(--aqua-pale); position: relative; overflow: hidden; }
.compare-grid { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: stretch; gap: 22px; max-width: 1000px; margin: 0 auto; }
.compare-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.compare-head { padding: 18px 18px 16px; text-align: center; }
.compare-bad .compare-head { background: var(--coral); }
.compare-bad .compare-head h3 { color: #fff; }
.compare-good .compare-head { background: var(--aqua); }
.compare-head h3 { color: var(--navy); font-size: clamp(1.02rem,1.8vw,1.28rem); margin: 0; font-weight: 800; letter-spacing: 0; }
.compare-photo { width: 100%; height: auto; aspect-ratio: 21/10; object-fit: cover; display: block; background: var(--aqua-pale); }
.compare-bad .compare-photo { filter: saturate(.75) brightness(.96); }
.compare-card ul { list-style: none; padding: 10px 24px 22px; margin: 0; flex: 1; }
.compare-card li { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-base); line-height: 1.45; color: var(--navy); font-weight: 700; padding: 16px 0; }
.compare-card li + li { border-top: 2px dashed #e3edf5; }
.cmp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.cmp-ic .ic { width: 15px; height: 15px; }
.cmp-x { background: #ffeceb; } .cmp-x .ic { color: var(--coral); }
.cmp-check { background: var(--aqua); } .cmp-check .ic { color: var(--navy); }
.compare-bad li { color: var(--ink-soft); }
.lane-rope { width: 46px; border-radius: 999px; justify-self: center;
  background: repeating-linear-gradient(180deg, #fff 0 16px, var(--aqua) 16px 32px) center / 14px 100% no-repeat,
              linear-gradient(180deg, rgba(143,230,240,.3), rgba(47,196,216,.55));
  box-shadow: inset 0 0 18px rgba(255,255,255,.4); }
.compare-cta { text-align: center; margin-top: 40px; }
@media (max-width: 880px) { .compare-grid { grid-template-columns: 1fr; gap: 26px; } .lane-rope { display: none; } .compare-cta .btn { width: 100%; } }

/* =========================================================
   PRICING — simple row table (their layout, not feature cards)
   ========================================================= */
.pricing { background: #fff; }
.price-wrap { max-width: 860px; margin: 0 auto; }
.price-lede { text-align: center; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.18rem,2.2vw,1.45rem); color: var(--navy); margin: 0 0 6px; }
.price-note { text-align: center; color: var(--ink-soft); margin: 0 0 var(--s-6); font-size: var(--t-base); }

.price-table { border: 3px solid var(--navy); border-radius: var(--radius); overflow: hidden; background: #fff; }
.price-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 22px 26px; }
.price-row + .price-row { border-top: 2px solid #eef2f7; }
.price-row--pop { background: var(--sun-pale); }
.price-row--best { background: var(--aqua-pale); }

.pr-lessons { font-family: var(--font-head); font-weight: 800; font-size: var(--t-lg); color: var(--navy); line-height: 1.1; }
.pr-lessons span { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--t-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.pr-price { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.pr-price .cur { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--navy); }
.pr-price .amt { font-family: var(--font-head); font-weight: 800; font-size: 3.1rem; color: var(--navy); line-height: 1; letter-spacing: -.03em; }
.pr-price .per { font-family: var(--font-body); font-weight: 700; font-size: var(--t-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; align-self: center; }

.pr-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pr-save { background: var(--sun); color: var(--sale); font-family: var(--font-body); font-weight: 800; font-size: var(--t-sm); padding: 4px 11px; border-radius: 7px; }
.pr-tag { font-family: var(--font-body); font-weight: 800; font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: #fff; padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.pr-tag--pop { background: var(--coral); }
.pr-tag--best { background: var(--aqua-deep); }

.price-cta { text-align: center; margin: 32px 0 0; }
.price-help { text-align: center; margin: var(--s-4) 0 0; font-family: var(--font-body); font-weight: 700; font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.price-help a { display: block; font-family: var(--font-head); font-weight: 800; font-size: var(--t-lg); color: var(--navy); text-decoration: none; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.price-help a:hover { color: var(--aqua-deep); }

.price-guar { max-width: 860px; margin: 44px auto 0; background: var(--aqua-pale); color: var(--navy); border-radius: var(--radius); padding: 26px 30px; box-shadow: 0 8px 0 #bfe6ee; display: flex; gap: 18px; align-items: flex-start; }
.price-guar .ic { width: 38px; height: 38px; flex: none; margin-top: 2px; }
.price-guar strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: var(--t-md); margin-bottom: 5px; }
.price-guar p { margin: 0 0 var(--s-2); font-size: var(--t-base); color: var(--navy); }
/* --aqua-deep is only 3.58:1 on this pale panel, and 17px bold sits under the
   18.66px large-text threshold, so it needs the full 4.5. This is the same
   teal a shade darker: 5.14:1. */
.price-guar p b { color: #0a7373; }
.price-guar small { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; display: block; }

@media (max-width: 720px) {
  .price-row { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 20px 18px; }
  .pr-right { grid-column: 1 / -1; justify-content: flex-start; }
  .pr-price .amt { font-size: 2.5rem; }
  .price-guar { flex-direction: column; gap: 12px; }
}

/* =========================================================
   METHOD
   ========================================================= */
.method { background: #fff; }
.method-track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; position: relative; }
.method-track::before { content: ""; position: absolute; left: 9%; right: 9%; top: 34px; height: 5px; background: repeating-linear-gradient(90deg, var(--aqua-light) 0 12px, transparent 12px 24px); z-index: 0; }
.method-step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.method-num { width: 68px; height: 68px; border-radius: 50%; background: var(--aqua); color: var(--navy); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.8rem; box-shadow: 0 6px 0 var(--aqua-deep), 0 0 0 8px #fff; margin-bottom: 18px; }
.method-step:nth-child(5) .method-num { background: var(--sun); color: var(--navy); box-shadow: 0 6px 0 var(--sun-deep), 0 0 0 8px #fff; }
.method-ic { display: none; }
.method-step h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.method-step p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 18em; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background:
    radial-gradient(58% 46% at 22% 72%, rgba(255,255,255,.5), rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, #fff8e7 0%, #fff1d2 58%, #ffe9bd 100%); }
.faq-list { display: grid; gap: 12px; margin-top: 32px; }
.faq-list details { background: #fff; border-radius: var(--radius-sm); padding: 2px 22px; box-shadow: 0 3px 0 rgba(226,166,26,.42); }
.faq-list summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: var(--t-md); padding: 18px 32px 18px 0; min-height: 46px; list-style: none; position: relative; color: var(--navy); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--aqua); background-image: linear-gradient(var(--navy),var(--navy)), linear-gradient(var(--navy),var(--navy)); background-size: 12px 2.5px, 2.5px 12px; background-position: center, center; background-repeat: no-repeat; transition: transform .2s var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list p { margin: 0 0 var(--s-4); color: var(--ink-soft); max-width: 62ch; }

/* =========================================================
   FINAL CTA + FOOTER
   ========================================================= */
.final-cta { background:
    radial-gradient(58% 46% at 78% 72%, rgba(255,255,255,.24), rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, #5ceff0 0%, #2ad9dd 48%, #16c4d0 100%); color: var(--navy); text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.final-cta .container { position: relative; }
.final-cta h2 { color: var(--navy); font-size: clamp(2.15rem,5vw,3.6rem); margin: 0 0 14px; }
.final-cta p { color: var(--navy); font-size: var(--t-md); margin: 0 0 var(--s-6); max-width: 32em; margin-inline: auto; margin-bottom: var(--s-6); }
.final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.site-footer { background: var(--navy); color: #b9cbe4; padding: 46px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; color: #fff; line-height: 1.15; font-size: 1.2rem; }
.footer-brand .brand-mark { box-shadow: none; width: 60px; height: 60px; }
.footer-brand small { font-weight: 700; font-size: .68rem; color: var(--aqua-light); text-transform: uppercase; letter-spacing: .1em; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: #b9cbe4; text-decoration: none; font-family: var(--font-head); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.footer-nav a:hover { color: var(--sun); }
.footer-copy { width: 100%; font-size: var(--t-sm); color: #a9c0d8; margin: 10px 0 0; }

.mobile-cta { display: none; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 45; text-align: center; padding: 17px; border-radius: 999px; background: var(--sun); color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; text-decoration: none; box-shadow: 0 6px 0 var(--sun-deep), 0 12px 30px rgba(7,42,65,.3); padding-bottom: calc(17px + env(safe-area-inset-bottom)); transform: translateY(160%); transition: transform .34s var(--ease-drawer); }
.mobile-cta.show { display: block; transform: translateY(0); }

/* =========================================================
   MOTION
   ========================================================= */
html.js .hero-copy > *, html.js .trust-badges li { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
html.js body.is-loaded .hero-copy > *, html.js body.is-loaded .trust-badges li { opacity: 1; transform: none; }
html.js body.is-loaded .hero-copy > *:nth-child(1){transition-delay:.05s}
html.js body.is-loaded .hero-copy > *:nth-child(2){transition-delay:.12s}
html.js body.is-loaded .hero-copy > *:nth-child(3){transition-delay:.19s}
html.js body.is-loaded .hero-copy > *:nth-child(4){transition-delay:.26s}
html.js body.is-loaded .trust-badges li:nth-child(1){transition-delay:.30s}
html.js body.is-loaded .trust-badges li:nth-child(2){transition-delay:.35s}
html.js body.is-loaded .trust-badges li:nth-child(3){transition-delay:.40s}

@media (prefers-reduced-motion: no-preference) {
  html.js .method-step { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i,0) * 70ms); }
  html.js .method-step.is-in { opacity: 1; transform: none; }
  html.js .transform-video { clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-out); }
  html.js .transform-card.is-in .transform-video { clip-path: inset(0 0 0 0); }
  html.js .compare-card, html.js .price-card, html.js .guarantee-banner, html.js .video-card, html.js .testi-card {
    opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  html.js .compare-card.is-in, html.js .price-card.is-in, html.js .guarantee-banner.is-in, html.js .video-card.is-in, html.js .testi-card.is-in { opacity: 1; transform: none; }
  html.js .price-card--featured.is-in { transform: translateY(-10px); }
}
.method-step:nth-child(1){--i:0}.method-step:nth-child(2){--i:1}.method-step:nth-child(3){--i:2}
.method-step:nth-child(4){--i:3}.method-step:nth-child(5){--i:4}

@media (hover: hover) and (pointer: fine) {
  .transform-card { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .transform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .hero { min-height: 76vh; padding: calc(var(--header-h) + 32px) 0 100px; }
  .transform-grid { grid-template-columns: 1fr; }
  .method-track { grid-template-columns: 1fr 1fr 1fr; gap: 30px 16px; }
  .method-track::before { display: none; }
  .testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root {
 --header-h: 66px; }
  .nav-toggle { display: flex; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 46; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 26px; box-shadow: var(--shadow); display: none; }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 15px 6px; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 14px; text-align: center; }
  .method-track { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .trust-badges { width: 100%; }
  .trust-badges li { flex: 1 1 100%; }
  .mobile-cta.show { display: block; }
  .video-grid { grid-template-columns: 1fr; max-width: 320px; }
  .final-actions .btn { width: 100%; }
}
@media (max-width: 430px) {
  .method-track { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave-anim { animation: none; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html.js .hero-copy > *, html.js .trust-badges li, html.js .method-step, html.js .compare-card,
  html.js .price-card, html.js .guarantee-banner, html.js .video-card, html.js .testi-card { opacity: 1 !important; transform: none !important; }
  html.js .transform-video { clip-path: none !important; }
  html.js .hero h1 .hl-underline path { stroke-dashoffset: 0 !important; }
}

/* ---------- mobile header: logo left, hamburger right ---------- */
@media (max-width: 900px) {
  .nav-inner { min-height: 78px; gap: 0; justify-content: space-between; padding: 0 16px; }
  .nav-toggle { display: flex; order: 3; }
  .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 46;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 26px; box-shadow: var(--shadow);
  }
  .primary-nav.open { display: flex; }
  .nav-group { flex: none; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-group--left { order: 2; } .nav-group--right { order: 3; }
  .nav-group a:not(.nav-cta):not(.nav-phone) { padding: 15px 6px; border-bottom: 1px solid var(--line); }
  .nav-group a:not(.nav-cta):not(.nav-phone)::after { display: none; }
  .nav-phone { justify-content: center; padding: 15px 6px; margin: 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 14px; justify-content: center; }
  /* logo moves inline, left of the hamburger */
  .brand { order: 1; flex-direction: row; gap: 10px; }
  .primary-nav { order: 4; }
  .brand-mark { width: 54px; height: 54px; }
  .brand-text { align-items: flex-start; text-align: left; font-size: 1.15rem; }
}

/* ---------- wavy white edge under the header, spilling onto the hero ---------- */
.site-header { overflow: visible; }
.header-wave {
  position: absolute; left: 0; right: 0; top: 100%;
  height: 54px; line-height: 0; pointer-events: none; z-index: 4;
  margin-top: -1px;
}
.header-wave svg { width: 100%; height: 100%; display: block; }
.header-wave path { fill: #fff; }
@media (max-width: 900px) { .header-wave { height: 34px; } }

/* =========================================================
   3-STEP PROCESS
   ========================================================= */
.howto { background:
    radial-gradient(58% 46% at 78% 72%, rgba(255,255,255,.24), rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, #5ceff0 0%, #2ad9dd 48%, #16c4d0 100%); color: var(--navy); }
.howto .section-title, .howto .section-sub { color: var(--navy); }
.howto .section-sub { color: var(--navy); }
.howto-grid { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.howto-step { background: #fff; border-radius: var(--radius-lg); padding: 40px 26px 30px; text-align: center; position: relative; box-shadow: 0 8px 0 var(--aqua-deep); }
.howto-num { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--navy); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; box-shadow: 0 5px 0 var(--sun-deep), 0 0 0 6px #fff; }
.howto-step h3 { font-size: var(--t-lg); margin: var(--s-2) 0 var(--s-2); }
.howto-step p { margin: 0; color: var(--ink-soft); font-size: var(--t-base); line-height: 1.55; }
.howto-cta { text-align: center; margin-top: 44px; }
@media (max-width: 900px) { .howto-grid { grid-template-columns: 1fr; max-width: 440px; gap: 46px; } }

/* =========================================================
   INSTRUCTOR TRUST STRIP
   ========================================================= */
.trust { background: var(--aqua-pale); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: 960px; margin: 0 auto; }
.trust-card { background: #fff; border-radius: var(--radius); padding: 28px 30px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 6px 0 rgba(11,61,92,.07); }
.trust-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--aqua-pale); box-shadow: inset 0 0 0 2px #cfeef4; display: grid; place-items: center; flex: none; }
.trust-ic .ic { width: 34px; height: 34px; }
.trust-card h3 { font-size: var(--t-md); margin: 0 0 var(--s-2); }
.trust-card p { margin: 0; color: var(--ink-soft); font-size: var(--t-base); line-height: 1.55; }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr; } }

/* =========================================================
   FLOATING REVIEW POP-UPS
   ========================================================= */
.revpop {
  position: fixed; left: 18px; bottom: 18px; z-index: 46;
  width: min(330px, calc(100vw - 36px));
  background: #fff; border-radius: 16px; padding: 15px 16px 14px 15px;
  box-shadow: 0 16px 40px rgba(11,61,92,.26); display: flex; gap: 12px; align-items: flex-start;
  transform: translateY(140%); opacity: 0;
  transition: transform .45s var(--ease-drawer), opacity .3s var(--ease-out);
}
.revpop.show { transform: translateY(0); opacity: 1; }
.revpop[hidden] { display: none; }
.revpop-av { width: 40px; height: 40px; border-radius: 50%; background: var(--aqua); color: var(--navy); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .88rem; flex: none; }
.revpop-body { min-width: 0; }
.revpop-body strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--navy); }
.revpop-body p { margin: 2px 0 5px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.revpop-stars { display: flex; gap: 1px; }
.revpop-stars .ic-star { width: 13px; height: 13px; color: var(--sun-deep); }
.revpop-x { position: absolute; top: 7px; right: 9px; background: none; border: none; font-size: 1.15rem; line-height: 1; color: #b9c3d0; cursor: pointer; padding: 2px 4px; }
.revpop-x:hover { color: var(--navy); }
@media (max-width: 760px) { .revpop { bottom: 84px; left: 12px; } }

/* =========================================================
   HOVER FEEDBACK — transform/opacity only, real pointers only
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .howto-step, .trust-card, .testi-card, .price-row, .faq-list details {
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .howto-step:hover  { transform: translateY(-3px); }
  .trust-card:hover  { transform: translateY(-3px); box-shadow: 0 12px 0 rgba(11,61,92,.09); }
  .testi-card:hover  { transform: translateY(-3px); box-shadow: 0 12px 0 var(--aqua-deep); }
  .price-row:hover   { background: var(--sun-pale); }
  .price-row--best:hover { background: #d9f2f2; }
  .faq-list summary:hover { color: var(--aqua-deep); }
  .compare-card { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .compare-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* =========================================================
   RHYTHM — alternating tints already separate the zones, so
   just hold the measure and keep card padding on the scale.
   ========================================================= */
.trust-card  { padding: var(--s-5) var(--s-6); }
.howto-step  { padding: var(--s-7) var(--s-5) var(--s-6); }
.transform-body { padding: var(--s-5) var(--s-6) var(--s-6); }
.testi-card  { padding: var(--s-5) var(--s-6); }
.price-row   { padding: var(--s-5) var(--s-6); }
.section-sub { text-wrap: pretty; }
.frustration-copy .section-sub, .frustration-turn { max-width: 30em; }

/* the sticker must not clip against the headline's tight leading */
.hero h1 .hl-sticker { margin-top: .06em; }
@media (max-width: 560px) { .hero h1 .hl-sticker { border-radius: 14px; padding: .04em .26em .1em; } }

/* =========================================================
   PRICING CARDS — one card per package, a row per length
   ========================================================= */
.price-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5); align-items: start; margin-top: var(--s-7);
}
.price-card {
  position: relative; border-radius: 28px;
  padding: var(--s-6) var(--s-4) var(--s-5);
  text-align: center;
}
.price-card--value { background: var(--sun-soft); }
.price-card--pop   { background: #fdeee9; }
.price-card--intro { background: var(--aqua-pale); }

.price-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.price-flag--value { background: var(--sun-ring); }
.price-flag--pop   { background: var(--sale); }
.price-flag--intro { background: var(--aqua-deep); }

.price-card-head {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: var(--s-2) 0 var(--s-4);
  color: var(--navy);
}
.price-card-body {
  background: #fff; border-radius: 14px;
  padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-4);
}
.price-line {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: center; justify-content: center; gap: var(--s-2); text-align: left;
}
.pl-amt {
  font-family: var(--font-head); font-weight: 800; font-size: 2.7rem;
  line-height: 1; color: var(--navy); letter-spacing: -.03em; white-space: nowrap;
}
.pl-amt i { font-style: normal; font-size: 1.3rem; vertical-align: .55em; margin-right: 1px; }
.pl-per {
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.25;
}
.pl-off {
  justify-self: start; background: var(--sun); color: var(--sale);
  font-family: var(--font-body); font-weight: 800; font-size: var(--t-sm);
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
}
.price-card-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: var(--s-4) 0 0; font-family: var(--font-head); font-weight: 700;
  font-size: var(--t-sm); color: var(--navy);
}
.price-card-foot .ic { width: 1.05em; height: 1.05em; color: var(--aqua-deep); }
.price-card-foot--muted { color: var(--ink-soft); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .price-card { transition: transform .18s var(--ease-out); }
  .price-card:hover { transform: translateY(-4px); }
}
@media (max-width: 900px) {
  .price-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: var(--s-7); }
}
@media (max-width: 400px) {
  .pl-amt { font-size: 2.3rem; }
  .price-line { gap: 6px; }
}

/* =========================================================
   BRIGHTNESS — photos carry a little more colour, and the
   hint styles used by the multi-swimmer booking copy.
   ========================================================= */
.frustration-photo, .compare-photo, .transform-video, .hero-bg {
  filter: saturate(1.16) brightness(1.04) contrast(1.02);
}
.compare-bad .compare-photo { filter: saturate(.8) brightness(.98); }

.price-note-sub { display: inline-block; margin-top: 6px; font-size: var(--t-sm); color: var(--ink-soft); }

.bk-hint {
  margin: var(--s-3) 0 0; font-size: var(--t-sm); line-height: 1.5;
  color: var(--ink-soft); background: var(--aqua-pale);
  border-radius: 12px; padding: 11px 14px;
}
.bk-hint b { color: var(--navy); }

/* =========================================================
   SECTION WAVES — the mask is one shape; --wave-to paints it
   the colour of whatever section comes next.
   ========================================================= */
.wave-sep { position: relative; }
.wave-sep::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: clamp(34px, 4.4vw, 58px); pointer-events: none; z-index: 3;
  background: var(--wave-to, #fff);
  -webkit-mask: var(--wave-mask) bottom center / 100% 100% no-repeat;
          mask: var(--wave-mask) bottom center / 100% 100% no-repeat;
}
:root {

  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 210 2 430 0 720 20 S 1210 54 1440 24 V54 H0 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-mask-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 260 52 470 54 720 32 S 1180 0 1440 28 V54 H0 Z' fill='%23000'/%3E%3C/svg%3E");
}
/* alternate the curve so consecutive waves don't repeat */
.wave-sep--alt::after {
  -webkit-mask: var(--wave-mask-alt) bottom center / 100% 100% no-repeat;
          mask: var(--wave-mask-alt) bottom center / 100% 100% no-repeat;
}

/* each section declares what it flows into */
.frustration { --wave-to: #ffffff; }
.results     { --wave-to: #5ceff0; }
.howto       { --wave-to: var(--aqua-pale); }
.trust       { --wave-to: #ffffff; }
.method      { --wave-to: #fff8e7; }
.faq         { --wave-to: #5ceff0; }
.final-cta   { --wave-to: var(--navy); }

/* keep section content clear of the wave */
.wave-sep > .container { position: relative; z-index: 4; }

/* =========================================================
   BUBBLES — a drifting layer on the water-coloured sections.
   Own stacking context so it never clips the wave above it.
   ========================================================= */
.bubbles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.bubbles i {
  position: absolute; bottom: -5vh; display: block;
  background: url("images/sea/bub-1.webp") center / contain no-repeat;
  opacity: 0;
}
html.js .bubbles i { animation: bubbleRise linear infinite; }
@keyframes bubbleRise {
  0%   { transform: translate3d(0,0,0) scale(.84); opacity: 0; }
  14%  { opacity: 1; }
  60%  { opacity: .82; }
  88%  { opacity: 0; }
  100% { transform: translate3d(var(--drift,14px), -52vh, 0) scale(1.06); opacity: 0; }
}
/* the artwork is a cool cyan, so it needs a touch more presence on the warm
   yellow surfaces and slightly less on the pale ones */
/* the artwork reads a touch hot on the pale surfaces */
.compare .bubbles i, .trust .bubbles i { filter: saturate(.85) brightness(.99); opacity: .85; }
/* content sits above the bubble layer */
.hero-inner, .howto .container, .final-cta .container,
.compare .container, .trust .container, .frustration .container, .faq .container { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  html.js .bubbles i { animation: none; opacity: .34; transform: translate3d(0,-40%,0); }
}
@media (max-width: 700px) {
  .bubbles i:nth-child(n+8) { display: none; }   /* lighter on phones */
}

/* =========================================================
   MO — the mascot layer.
   Every one of these is decorative: aria-hidden, non-interactive,
   positioned beside or behind content, never over text. If an image
   fails to load the section still reads correctly.
   ========================================================= */
.mo {
  position: absolute; pointer-events: none; z-index: 1;
  height: auto; filter: drop-shadow(0 10px 18px rgba(7,42,65,.16));
}

/* surfacing out of the wave between Results and How it works */
.mo--wave-rider {
  width: clamp(150px, 17vw, 240px);
  right: clamp(16px, 6vw, 90px);
  bottom: calc(clamp(34px, 4.4vw, 58px) - 14px);
  z-index: 4;                      /* above the wave, which sits at 3 */
  transform: rotate(-4deg);
}

/* the whistle sells the instructors section */
/* Anchored to the BOTTOM of the section head so they sit beside the
   heading and never reach down into the content below it. */
.mo--coach     { width: clamp(112px, 11.5vw, 156px); left: 0;   bottom: -6px; transform: rotate(-3deg); }
.mo--kickboard { width: clamp(110px, 11vw, 150px);   left: 0;   bottom: -6px; transform: rotate(-4deg); }
.mo--ring      { width: clamp(114px, 11.5vw, 158px); left: 0;   bottom: -6px; transform: rotate(-5deg); }
.mo--open      { width: clamp(106px, 11vw, 148px);   left: 0;   bottom: -10px; transform: rotate(-2deg); }

/* The headings are centred, so their glyphs run the full container width and
   would collide with a mascot in the margin. Pull the text in to leave a lane. */
.trust .section-head, .method .section-head, .pricing .section-head { padding: 0 clamp(120px, 15vw, 190px); }
.final-cta h2, .final-cta p { max-width: 30ch; margin-inline: auto; }

/* these three sit inside centred section heads, which are position:static */
.trust .section-head, .method .section-head, .pricing .section-head { position: relative; }
.final-cta .container { position: relative; }

/* in the guarantee panel he is content, not decoration — so he stays on mobile */
.price-guar { position: relative; }
.mo-inline {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: clamp(84px, 11vw, 132px);
  height: auto; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(11,61,92,.18));
}
.price-guar > div { padding-right: clamp(96px, 13vw, 150px); }

/* the celebration on the booking-complete screen */
.mo-done {
  display: block; width: clamp(150px, 34vw, 210px); height: auto;
  margin: 0 auto var(--s-4); pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .mo { transition: transform .5s var(--ease-out); }
  section:hover > .mo--wave-rider { transform: rotate(-4deg) translateY(-6px); }
}

/* Decorative mascots cost bandwidth and vertical space on a phone.
   The two that carry meaning — the guarantee and the celebration — stay. */
@media (max-width: 900px) {
  .mo { display: none; }
  .mo-inline { position: static; display: block; width: 108px; margin: var(--s-3) auto 0; transform: none; }
  .price-guar > div { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mo { transition: none; }
}

/* =========================================================
   SEA LIFE — fish and the larger bubble accents.
   Ambient by design: small, translucent, in the outer thirds,
   never beside the reading column. See SEA-LIFE-SPEC.md.
   ========================================================= */
.sea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sea img { position: absolute; display: block; height: auto; will-change: transform; }

/* Three motions on different periods, so no two fish ever sync up.
   Only transform and opacity — both composited, neither triggers layout. */
@keyframes finSwim {
  0%   { transform: translate3d(0,0,0) rotate(-2deg); }
  25%  { transform: translate3d(14px,-7px,0) rotate(1.5deg); }
  50%  { transform: translate3d(26px,3px,0) rotate(-1deg); }
  75%  { transform: translate3d(12px,9px,0) rotate(2deg); }
  100% { transform: translate3d(0,0,0) rotate(-2deg); }
}
@keyframes finSwimRev {
  0%   { transform: translate3d(0,0,0) rotate(2deg) scaleX(-1); }
  25%  { transform: translate3d(-13px,8px,0) rotate(-1.5deg) scaleX(-1); }
  50%  { transform: translate3d(-24px,-4px,0) rotate(1deg) scaleX(-1); }
  75%  { transform: translate3d(-11px,-9px,0) rotate(-2deg) scaleX(-1); }
  100% { transform: translate3d(0,0,0) rotate(2deg) scaleX(-1); }
}
.fish        { animation: finSwim  ease-in-out infinite; }

/* Margin dwellers drift less. The side margin measures 62px and full finSwim
   travels 26px horizontally — a 42px fish plus that drift crosses the content
   edge at the peak of its cycle. This keeps the same motion at 11px. */
@keyframes finSwimTight {
  0%   { transform: translate3d(0,0,0) rotate(-2deg); }
  25%  { transform: translate3d(6px,-5px,0) rotate(1.5deg); }
  50%  { transform: translate3d(11px,2px,0) rotate(-1deg); }
  75%  { transform: translate3d(5px,6px,0) rotate(2deg); }
  100% { transform: translate3d(0,0,0) rotate(-2deg); }
}
@keyframes finSwimTightRev {
  0%   { transform: translate3d(0,0,0) rotate(2deg) scaleX(-1); }
  25%  { transform: translate3d(-6px,5px,0) rotate(-1.5deg) scaleX(-1); }
  50%  { transform: translate3d(-11px,-2px,0) rotate(1deg) scaleX(-1); }
  75%  { transform: translate3d(-5px,-6px,0) rotate(-2deg) scaleX(-1); }
  100% { transform: translate3d(0,0,0) rotate(2deg) scaleX(-1); }
}
.fish--tight { animation-name: finSwimTight; }
.fish--tight.fish--flip, .fish--tight.fish--left { animation-name: finSwimTightRev; }
.fish--left,
.fish--flip  { animation-name: finSwimRev; }   /* mirrored, so it faces into the page */

/* DEPTH: size, opacity, saturation and speed move together — that combination
   is what the eye reads as distance. Changing one without the others breaks it. */
.d-far  { opacity: .22; filter: saturate(.68); }
.d-mid  { opacity: .42; filter: saturate(.86); }
.d-near { opacity: .60; }

/* the big bubble pieces drift slower than the ambient layer, so the two
   never beat against each other */
@keyframes driftUp {
  0%   { transform: translate3d(0, 6vh, 0) scale(.95); opacity: 0; }
  20%  { opacity: .42; }
  62%  { opacity: .32; }
  86%  { opacity: 0; }
  100% { transform: translate3d(var(--dx, 18px), -34vh, 0) scale(1.04); opacity: 0; }
}
.bub { animation: driftUp linear infinite; opacity: 0; mix-blend-mode: screen; }
.compare .bub, .trust .bub { mix-blend-mode: normal; }

/* content always sits above the layer */
.hero-inner, .howto .container, .compare .container,
.trust .container, .final-cta .container { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .fish, .bub { animation: none; opacity: .5; }
  .bubbles i  { animation: none; opacity: .34; }
}

/* On a phone this is bandwidth and distraction for no gain —
   the page already reads as cheerful at that width. */
/* Phones used to get none of this. Now the far layer survives — one creature
   per section, quieter still, pinned to the extreme edge so it can never sit
   under the full-width reading column. */
@media (max-width: 900px) {
  .sea img:not(.keep-m) { display: none; }
  /* At this width the content runs edge to edge, so there is no side margin to
     hide in — the only clean space is the section's top padding band (76px).
     Pin the survivors there; everything else about them stays. */
  .sea .keep-m {
    opacity: .16; width: 26px !important;
    top: 20px !important; bottom: auto !important;
  }
}

/* =========================================================
   BUBBLE VARIANTS — mostly singles, an occasional glued trio.
   Ratio and reasoning in BUBBLE-SPEC.md.
   ========================================================= */
.bubbles i.b-c { background-image: url("images/sea/bub-3.webp"); }

/* The trio is a single piece, so it must never be squashed to a circle's
   aspect — it carries its own. */
.bubbles i.b-c { border-radius: 0; }

/* =========================================================
   BUBBLE PRESENCE — the artwork is one cyan, but each surface
   takes it differently, so visibility is set per section.
   Values picked by rendering the bubble against each real
   background rather than by eye.
   ========================================================= */
.bubbles { opacity: .3; }
.howto .bubbles, .final-cta .bubbles   { opacity: .38; }  /* near the art's own hue — blends */
.compare .bubbles, .trust .bubbles     { opacity: .16; }  /* near-white shows everything */
.bub { opacity: 0; }
.compare .bub, .trust .bub { filter: opacity(.55); }


/* =========================================================
   HERO SCRIM — MOBILE
   The copy spans the full width here, so a left-weighted wash
   leaves the right edge unreadable. Vertical instead: cover the
   headline and lede, release below so the photo still reads.
   ========================================================= */
@media (max-width: 940px) {
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--hero-panel),0.920) 0%,
        rgba(var(--hero-panel),0.920) 70%,
        rgba(var(--hero-panel),0.894) 73.0%,
        rgba(var(--hero-panel),0.824) 76.0%,
        rgba(var(--hero-panel),0.721) 79.0%,
        rgba(var(--hero-panel),0.596) 82.0%,
        rgba(var(--hero-panel),0.460) 85.0%,
        rgba(var(--hero-panel),0.324) 88.0%,
        rgba(var(--hero-panel),0.199) 91.0%,
        rgba(var(--hero-panel),0.096) 94.0%,
        rgba(var(--hero-panel),0.026) 97.0%,
        rgba(var(--hero-panel),0.000) 100.0%);
  }
}

/* =========================================================
   TRUST BANNER — the first thing after the promise.
   White because the section below it is yellow; a yellow bar
   would merge into it and lose the separation.
   ========================================================= */
.trustbar {
  background: #fff;
  padding: clamp(26px, 3.4vw, 44px) 0 clamp(46px, 5vw, 68px);
  --wave-to: #fff8e7;
}
.trustbar .trust-badges {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0;
}
.trustbar .trust-badges li {
  background: none; box-shadow: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; text-align: left;
}
.trustbar .trust-badges .ic { width: 38px; height: 38px; }
.trustbar .trust-badges strong { font-size: var(--t-md); display: block; }
.trustbar .trust-badges span { font-size: var(--t-sm); }
.trustbar .trust-badges li + li { border-left: 2px solid var(--rule-2, #eaf0f2); }

@media (max-width: 760px) {
  .trustbar .trust-badges { grid-template-columns: 1fr; gap: 16px; }
  .trustbar .trust-badges li + li { border-left: none; border-top: 2px solid #eef4f7; padding-top: 16px; }
  .trustbar .trust-badges li { justify-content: flex-start; }
}