/* ============================================================
   COOLMA THERAPY — CoolmaTherapy.com
   Palette derived from the Coolma brand mark + product leather
   ============================================================ */

:root{
  /* Brand */
  --blue:#2B2F8F;
  --blue-d:#1E2168;
  --blue-l:#4A4FC4;
  --pink:#EE0F7B;
  --pink-d:#C10A62;
  --pink-l:#FF4FA3;

  /* Product-derived warmth */
  --camel:#C99A6B;
  --camel-l:#E3C4A2;
  --camel-p:#F6E9DA;
  --plum:#46232E;
  --plum-d:#2C141C;
  --jade:#6F7F62;

  /* Neutrals */
  --ink:#1C1420;
  --ink-2:#4A4152;
  --ink-3:#7A7183;
  --cream:#FDFAF7;
  --sand:#F5EEE6;
  --sand-2:#EDE3D8;
  --line:rgba(28,20,32,.10);
  --line-2:rgba(28,20,32,.06);

  --wa:#25D366;
  --wa-d:#1DAE53;

  /* Type */
  --disp:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Space */
  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,9vw,128px);

  /* Radius + shadow */
  --r-s:12px;
  --r-m:20px;
  --r-l:28px;
  --r-xl:40px;
  --sh-s:0 2px 8px rgba(28,20,32,.05), 0 1px 2px rgba(28,20,32,.04);
  --sh-m:0 12px 32px -12px rgba(28,20,32,.14), 0 4px 10px -4px rgba(28,20,32,.06);
  --sh-l:0 40px 80px -32px rgba(28,20,32,.28), 0 12px 28px -12px rgba(28,20,32,.10);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(16px,1.02vw,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html{overflow-x:hidden}

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

::selection{background:var(--pink);color:#fff}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--blue-l);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:880px}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4{
  margin:0;font-family:var(--disp);font-weight:600;
  line-height:1.12;letter-spacing:-.022em;
  /* WONK 1 swaps in Fraunces' wonky descending "f", which clipped and rendered
     inconsistently between h1 and h2. Pin both axes on every heading. */
  font-variation-settings:"SOFT" 0,"WONK" 0;
  text-wrap:balance;
  padding-bottom:.04em;   /* descenders never clip against overflow:hidden */
}

h1{
  font-size:clamp(40px,6.4vw,74px);
  line-height:1.04;
  letter-spacing:-.032em;
}
.h2{font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:-.026em}
.grad{
  background:linear-gradient(100deg,var(--pink) 0%,#8B2A9E 48%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.kicker{
  margin:0 0 14px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pink);
}
.kicker--light{color:var(--camel-l)}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--ink-2);margin:22px 0 0;max-width:56ch}
.p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.sub{font-size:clamp(16px,1.2vw,18.5px);color:var(--ink-2);margin:16px auto 0;max-width:60ch;line-height:1.6}
.sub--light{color:rgba(255,255,255,.72)}

.sechead{text-align:center;max-width:760px;margin:0 auto clamp(40px,5vw,68px)}
.sechead .h2{margin:0}

.hide-sm{display:none}
@media(min-width:820px){.hide-sm{display:inline}br.hide-sm{display:inline}}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  --bg:var(--blue);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1.5px solid var(--bd);border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  box-shadow:var(--sh-s);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}
.btn .ic{width:19px;height:19px;fill:currentColor;flex:none}

.btn--wa{--bg:linear-gradient(160deg,#2BE075,#1FA855);--fg:#08331B;box-shadow:0 10px 24px -10px rgba(31,168,85,.65)}
.btn--wa:hover{box-shadow:0 16px 34px -12px rgba(31,168,85,.7)}
.btn--outline{--bg:transparent;--fg:var(--ink);--bd:var(--line);box-shadow:none}
.btn--outline:hover{--bd:var(--blue);--fg:var(--blue);background:rgba(43,47,143,.04)}
.btn--ghost{--bg:transparent;--fg:var(--ink-2);--bd:transparent;box-shadow:none;padding-inline:14px}
.btn--ghost:hover{--fg:var(--blue)}
.btn--glass{--bg:rgba(255,255,255,.10);--fg:#fff;--bd:rgba(255,255,255,.30);backdrop-filter:blur(8px)}
.btn--glass:hover{--bg:rgba(255,255,255,.18)}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--lg{padding:17px 32px;font-size:16px}
.btn--xl{padding:20px 38px;font-size:17px}
.btn--block{display:flex;width:100%}

/* ── Announcement ───────────────────────────────────────── */
.announce{
  background:linear-gradient(96deg,var(--blue-d),var(--blue) 42%,#7B2A99 72%,var(--pink));
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  overflow:hidden;position:relative;
}
.announce__track{display:flex;width:max-content;animation:marq 34s linear infinite}
.announce__seq{display:flex;flex:none}
.announce__seq span{display:inline-flex;align-items:center;gap:8px;padding:9px 26px;white-space:nowrap}
.announce .dot{width:5px;height:5px;border-radius:50%;background:var(--camel-l);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .announce__track{animation:none;width:100%;justify-content:center}
  .announce__seq[aria-hidden="true"]{display:none}
  .announce__seq{flex-wrap:wrap;justify-content:center}
}

/* ── Header ─────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(253,250,247,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line-2);box-shadow:0 6px 24px -18px rgba(28,20,32,.5);background:rgba(253,250,247,.92)}
.hdr__in{display:flex;align-items:center;gap:12px;min-height:70px}
@media(min-width:600px){.hdr__in{gap:20px}}

.brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0}
.brand__mark{width:42px;height:42px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt strong{font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:.01em;color:var(--pink)}
.brand__txt em{font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.42em;color:var(--blue);margin-top:3px}

.nav{display:none;margin-inline:auto;gap:4px}
.nav a{
  position:relative;padding:9px 11px;border-radius:100px;white-space:nowrap;
  font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav a:hover{color:var(--blue);background:rgba(43,47,143,.06)}
@media(min-width:1000px){.nav{display:flex}}

.hdr__cta{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
@media(min-width:1000px){.hdr__cta{margin-left:0}}
/* .btn sets display:inline-flex, so hiding it needs a stronger selector than .hide-sm.
   The header carries nav + language + call + WhatsApp: the Call button only
   reappears once there is genuinely room, otherwise it clips the CTA. */
.hdr__cta .btn--ghost{display:none}
@media(min-width:1180px){.hdr__cta .btn--ghost{display:inline-flex}}

.burger{
  width:42px;height:42px;display:grid;place-content:center;gap:5px;
  background:transparent;border:1px solid var(--line);border-radius:12px;cursor:pointer;
}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

.mobnav{
  position:fixed;inset:0 0 auto;top:calc(70px + 34px);z-index:88;
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:16px var(--pad) 26px;
  box-shadow:var(--sh-m);
  animation:drop .3s var(--ease);
}
.mobnav nav{display:flex;flex-direction:column;margin-bottom:16px}
.mobnav nav a{padding:14px 4px;border-bottom:1px solid var(--line-2);font-size:17px;font-weight:600;font-family:var(--disp)}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}}
@media(min-width:1000px){.mobnav{display:none!important}}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,96px);overflow:hidden}
.hero__glow{
  position:absolute;inset:-30% -20% auto -20%;height:120%;pointer-events:none;
  background:
    radial-gradient(46% 42% at 78% 18%, rgba(238,15,123,.13), transparent 68%),
    radial-gradient(52% 46% at 12% 42%, rgba(43,47,143,.11), transparent 70%),
    radial-gradient(40% 34% at 55% 96%, rgba(201,154,107,.20), transparent 72%);
  filter:blur(6px);
}
.hero__in{position:relative;display:grid;gap:clamp(36px,5vw,56px)}

/* ── Hero responsive ladder ──────────────────────────────────────────
   The image is the page's main product visual, so it is sized per tier
   rather than scaled uniformly. Aspect ratios stay wide enough that the
   3:2 source is never cropped hard — the mat stays whole at every width. */

/* Tablet: stacked, but the image is capped so it never balloons */
@media(min-width:768px) and (max-width:1023px){
  .hero__media{max-width:660px;margin-inline:auto;width:100%}
}

/* Laptop: two columns, image just over half */
@media(min-width:1024px){
  .hero__in{
    grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    align-items:center;gap:clamp(36px,3.6vw,56px);
  }
}

/* Laptop only: at this width a 6.4vw headline wraps to five lines and the
   text column outgrows the image. Step the display type down so the two
   columns stay in proportion. */
@media(min-width:1024px) and (max-width:1279px){
  .hero h1{font-size:clamp(38px,4.6vw,54px);line-height:1.08}
  .hero .lede{font-size:16.5px;line-height:1.58;margin-top:18px}
  .hero__btns{margin-top:24px}
  .hero__chips b{font-size:24px}
  .hero__chips span{font-size:11.5px}
}

/* Desktop: wider container and a taller frame, so the product actually
   fills the row instead of floating in whitespace */
@media(min-width:1280px){
  .hero .wrap{max-width:1340px}
  .hero__in{grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);gap:clamp(48px,4vw,68px)}
  .hero{padding-top:clamp(40px,3.4vw,56px)}
}

/* Large desktop: a touch more again */
@media(min-width:1600px){
  .hero .wrap{max-width:1440px}
}

.eyebrow{margin:0 0 22px}
.eyebrow__pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  backdrop-filter:blur(6px);box-shadow:var(--sh-s);
}
.eyebrow__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.22)}

.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__micro{margin:16px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:500}

.hero__chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
}
.hero__chips li{display:flex;flex-direction:column;padding-right:22px;margin-right:2px;border-right:1px solid var(--line-2)}
.hero__chips li:last-child{border-right:0;padding-right:0}
.hero__chips b{font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1;color:var(--blue);letter-spacing:-.02em}
.hero__chips span{font-size:12.5px;color:var(--ink-3);margin-top:6px;font-weight:600}

.hero__media{position:relative}

/* Product shots — premium framing + graceful fallback */
.shot{
  position:relative;margin:0;overflow:hidden;
  background:
    linear-gradient(150deg,var(--camel-p),var(--sand-2) 55%,var(--camel-l));
  border-radius:var(--r-xl);
  box-shadow:var(--sh-l);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--hero{aspect-ratio:3/2}
.shot--hero img{transition:transform 1.2s var(--ease)}
.hero__media:hover .shot--hero img{transform:scale(1.035)}

.float{
  position:absolute;display:flex;flex-direction:column;gap:2px;
  padding:14px 18px;border-radius:18px;
  background:rgba(253,250,247,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--sh-m);
  animation:bob 6s ease-in-out infinite;
}
.float__k{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--blue);letter-spacing:-.01em}
.float__v{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.float--a{left:-6px;top:9%;animation-delay:-1s}
.float--b{right:-6px;bottom:9%;animation-delay:-3.4s}
/* Two overlays swallow the product photo on a phone — show one until there's room */
.float--b{display:none}
@media(min-width:560px){.float--b{display:flex}}
@media(max-width:559px){
  .float{padding:11px 14px;border-radius:15px}
  .float__k{font-size:14px}
  .float__v{font-size:10.5px}
}
@media(min-width:600px){.float--a{left:-26px}.float--b{right:-24px}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}

/* ── Trust strip ────────────────────────────────────────── */
.strip{border-block:1px solid var(--line-2);background:var(--sand)}
.strip__in{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  padding-block:0;
}
@media(min-width:760px){.strip__in{grid-template-columns:repeat(5,1fr)}}
.strip__i{
  display:flex;align-items:center;gap:12px;
  padding:22px 16px;
  font-size:13px;font-weight:600;line-height:1.35;color:var(--ink-2);
  border-right:1px solid var(--line-2);
}
.strip__i:last-child{border-right:0}
.strip__i svg{width:22px;height:22px;flex:none;stroke:var(--blue);fill:none;opacity:.9}
@media(max-width:759px){
  .strip__i:nth-child(2n){border-right:0}
  .strip__i{border-bottom:1px solid var(--line-2)}
  .strip__i:last-child{grid-column:1/-1}
}

/* ── Sections ───────────────────────────────────────────── */
.sec{padding-block:var(--sec-y)}
.sec--soft{background:linear-gradient(180deg,var(--sand) 0%,#FAF4EC 100%)}
.sec--ink{background:var(--plum-d);color:#fff;position:relative;overflow:hidden}
.sec--ink::before{
  content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(238,15,123,.16),transparent 70%);
  pointer-events:none;
}
.sec--ink .h2{color:#fff}

.grid2{display:grid;gap:clamp(36px,5vw,72px)}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;align-items:center}}
.grid2--tight{gap:clamp(32px,4vw,56px)}

/* ── Story ──────────────────────────────────────────────── */
.pullq{
  margin:30px 0 0;padding:24px 26px;border-left:3px solid var(--pink);
  background:rgba(255,255,255,.6);border-radius:0 var(--r-m) var(--r-m) 0;
  font-family:var(--disp);font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink);
}
.pullq cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;color:var(--ink-3)}

.oldnew{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:520px){.oldnew{grid-template-columns:1fr 1fr}}
.oldnew__col{padding:26px 22px;border-radius:var(--r-l);border:1px solid var(--line)}
.oldnew__col h3{font-size:19px;margin-bottom:16px}
.oldnew__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.oldnew__col li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.oldnew__col li::before{position:absolute;left:0;top:-1px;font-size:15px}
.oldnew__col--old{background:rgba(255,255,255,.45)}
.oldnew__col--old h3{color:var(--ink-3)}
.oldnew__col--old li::before{content:"✕";color:#B4757F;font-weight:700}
.oldnew__col--new{background:linear-gradient(165deg,#fff,var(--camel-p));border-color:rgba(201,154,107,.5);box-shadow:var(--sh-m)}
.oldnew__col--new h3{color:var(--blue)}
.oldnew__col--new li::before{content:"✓";color:var(--wa-d);font-weight:800}

/* ── Product ────────────────────────────────────────────── */
.prod{display:grid;gap:clamp(36px,4.5vw,64px)}
@media(min-width:960px){.prod{grid-template-columns:.92fr 1.08fr;align-items:start}}

.shot--prod{aspect-ratio:2/3;border-radius:var(--r-xl)}
@media(min-width:960px){.shot--prod{position:sticky;top:100px}}
.prod__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(min-width:960px){.prod__thumbs{position:sticky;top:calc(100px + 0px)}}
.shot--thumb{aspect-ratio:3/2;border-radius:var(--r-m);box-shadow:var(--sh-m)}

.feat{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:2px}
.feat li{position:relative;padding:24px 0 24px 60px;border-bottom:1px solid var(--line-2)}
.feat li:last-child{border-bottom:0}
.feat__n{
  position:absolute;left:0;top:24px;
  width:40px;height:40px;display:grid;place-content:center;border-radius:50%;
  background:linear-gradient(150deg,var(--blue),#6A2E9E);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.02em;
}
.feat h3{font-size:20px;margin-bottom:8px}
.feat p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}

.specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;margin-bottom:22px;
}
@media(min-width:620px){.specs{grid-template-columns:repeat(3,1fr)}}
.specs div{background:var(--cream);padding:16px 18px}
.specs dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.specs dd{margin:0;font-family:var(--disp);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}

/* ── Steps ──────────────────────────────────────────────── */
.steps{
  list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:grid;gap:18px;counter-reset:s;
}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.steps{grid-template-columns:repeat(4,1fr);gap:20px}}
.steps li{
  padding:30px 26px 32px;border-radius:var(--r-l);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),background .3s,border-color .3s;
}
.steps li:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(238,15,123,.4)}
.steps__n{
  display:grid;place-content:center;width:38px;height:38px;margin-bottom:18px;
  border-radius:12px;background:linear-gradient(150deg,var(--pink),#8B2A9E);
  font-family:var(--disp);font-size:17px;font-weight:700;color:#fff;
}
.steps h3{font-size:19px;color:#fff;margin-bottom:9px}
.steps p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.68)}

.howcta{
  position:relative;z-index:1;
  margin-top:clamp(36px,4vw,56px);padding:clamp(26px,3.4vw,38px);
  border-radius:var(--r-l);
  background:linear-gradient(140deg,rgba(201,154,107,.20),rgba(238,15,123,.12));
  border:1px solid rgba(255,255,255,.14);
  display:grid;gap:20px;align-items:center;
}
@media(min-width:820px){.howcta{grid-template-columns:1fr auto}}
.howcta h3{font-size:clamp(20px,2.2vw,26px);color:#fff;margin-bottom:7px}
.howcta p{margin:0;font-size:15px;color:rgba(255,255,255,.7)}

/* ── Cards ──────────────────────────────────────────────── */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  padding:30px 26px 32px;border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--sh-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:rgba(201,154,107,.55)}
.card__ic{
  width:52px;height:52px;display:grid;place-content:center;margin-bottom:20px;
  border-radius:15px;background:linear-gradient(150deg,var(--camel-p),var(--sand-2));
  border:1px solid rgba(201,154,107,.28);
  color:var(--blue);
}
.card__ic svg{width:25px;height:25px}
.card h3{font-size:19px;margin-bottom:9px}
.card p{margin:0;font-size:14.8px;line-height:1.62;color:var(--ink-2)}

.disclaim{
  margin:clamp(32px,4vw,48px) auto 0;max-width:820px;
  padding:18px 22px;border-radius:var(--r-m);
  background:rgba(43,47,143,.045);border:1px solid rgba(43,47,143,.12);
  font-size:13.5px;line-height:1.6;color:var(--ink-2);text-align:center;
}
.disclaim b{color:var(--blue)}

/* ── Why ────────────────────────────────────────────────── */
.why{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
@media(min-width:700px){.why{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.why{grid-template-columns:repeat(3,1fr)}}
.why__i{background:#FDFAF7;padding:32px 28px 34px;transition:background .3s}
.why__i:hover{background:#fff}
.why__i h3{display:flex;gap:12px;font-size:19px;margin-bottom:11px;line-height:1.28}
.why__i h3 span{
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;
  color:var(--pink);padding-top:5px;flex:none;
}
.why__i p{margin:0;font-size:14.8px;line-height:1.62;color:var(--ink-2)}

/* ── Proof ──────────────────────────────────────────────── */
.proof{position:relative;background:var(--blue-d);color:#fff;overflow:hidden}
.proof__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(44% 52% at 82% 8%, rgba(238,15,123,.34), transparent 66%),
    radial-gradient(50% 50% at 10% 92%, rgba(201,154,107,.24), transparent 68%),
    linear-gradient(160deg,#1E2168,#2B2F8F 55%,#3A2270);
}
.proof>.wrap{position:relative}
.proof .h2{color:#fff}

.counts{display:grid;gap:2px;grid-template-columns:1fr;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);overflow:hidden;background:rgba(255,255,255,.1)}
@media(min-width:900px){.counts{grid-template-columns:repeat(3,1fr)}}
.counts__i{
  background:rgba(255,255,255,.04);backdrop-filter:blur(4px);
  padding:32px 20px 30px;text-align:center;
}
.counts__i b{
  display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,50px);line-height:1;
  background:linear-gradient(120deg,#fff,var(--camel-l));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.counts__i span{display:block;margin-top:12px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62);line-height:1.45}

/* ── Reviews ────────────────────────────────────────────── */
.revs{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:720px){.revs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{
  margin:0;padding:30px 28px 26px;border-radius:var(--r-l);
  background:linear-gradient(170deg,#fff,#FDF8F2);
  border:1px solid var(--line-2);box-shadow:var(--sh-s);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.rev:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.rev__stars{color:#E8A33D;font-size:15px;letter-spacing:2px;margin-bottom:16px}
.rev blockquote{
  margin:0 0 22px;font-family:var(--disp);font-size:17.5px;line-height:1.52;
  color:var(--ink);letter-spacing:-.012em;flex:1;
}
.rev figcaption{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}
.rev__av{
  width:40px;height:40px;flex:none;display:grid;place-content:center;border-radius:50%;
  background:linear-gradient(150deg,var(--blue),var(--pink));color:#fff;
  font-weight:800;font-size:15px;
}
.rev figcaption b{display:block;font-size:14.5px}
.rev figcaption small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}

.revs__cta{
  margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:center;text-align:center;
}
.revs__cta p{margin:0;font-size:14px;color:var(--ink-3);max-width:44ch}

/* ── AI disclosure + videos ─────────────────────────────── */
.aidisc{
  display:flex;gap:16px;align-items:flex-start;
  max-width:900px;margin:0 auto clamp(32px,4vw,48px);
  padding:22px 26px;border-radius:var(--r-l);
  background:linear-gradient(150deg,rgba(43,47,143,.07),rgba(238,15,123,.06));
  border:1.5px solid rgba(43,47,143,.22);
}
.aidisc svg{width:24px;height:24px;flex:none;fill:var(--blue);margin-top:2px}
/* Heading only — must not catch the inline <b> emphasis inside the paragraph */
.aidisc>div>b{display:block;font-size:14.5px;color:var(--blue);margin-bottom:7px;letter-spacing:.01em}
.aidisc p b{color:var(--ink);font-weight:700}
.aidisc p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2)}

/* Vertical UGC reels: capped so three 9:16 cards stay a comfortable height
   on a wide screen instead of turning into three very tall columns. */
.vids{display:grid;gap:20px;grid-template-columns:1fr;justify-content:center}
@media(min-width:560px){.vids{grid-template-columns:minmax(0,340px);justify-content:center}}
@media(min-width:760px){.vids{grid-template-columns:repeat(2,minmax(0,320px))}}
@media(min-width:1080px){.vids{grid-template-columns:repeat(3,minmax(0,330px));gap:24px}}
.vid{
  border-radius:var(--r-l);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--sh-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.vid:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
/* 9:16 matches the source videos and their posters exactly, so the frame
   never crops the speaker. */
.vid__frame{position:relative;aspect-ratio:9/16;background:#1C1420;overflow:hidden}
/* contain, not cover: the card is already 9:16 so it looks identical here,
   but it is what keeps fullscreen from cropping the portrait source. */
.vid__frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vid__tag{
  position:absolute;left:12px;top:12px;z-index:2;
  padding:5px 11px;border-radius:100px;
  background:rgba(28,20,32,.72);backdrop-filter:blur(6px);
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  pointer-events:none;
}
.vid__body{padding:22px 22px 24px}
.vid__quote{margin:0 0 12px;font-family:var(--disp);font-size:16px;line-height:1.5;color:var(--ink)}
.vid__src{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3);font-weight:600}

/* ── Plans ──────────────────────────────────────────────── */
.plans{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:940px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:34px 28px 30px;border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-m)}
.plan--hero{
  background:linear-gradient(165deg,#fff,var(--camel-p));
  border:1.5px solid var(--blue);box-shadow:var(--sh-m);
}
@media(min-width:940px){.plan--hero{transform:scale(1.035)}.plan--hero:hover{transform:scale(1.035) translateY(-6px)}}
.plan__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:6px 16px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(100deg,var(--blue),var(--pink));color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:var(--sh-s);
}
.plan h3{font-size:22px;margin-bottom:4px}
.plan__len{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.plan__price{
  margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line-2);
  font-family:var(--disp);font-size:clamp(32px,3.6vw,42px);font-weight:600;line-height:1;color:var(--blue);letter-spacing:-.03em;
}
.plan__price span{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.plan__price small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0}
/* Used until the real per-cycle anchor prices are filled in — reads as a
   deliberate "ask us" rather than a missing value. */
.plan__price--ask{font-size:clamp(26px,2.8vw,32px);color:var(--blue)}
.plan__price--ask small{display:block;margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ink-3)}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;flex:1}
.plan li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.plan li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--wa-d);font-weight:800}

.buyrow{
  margin-top:clamp(28px,3.4vw,42px);padding:clamp(26px,3.2vw,36px);
  border-radius:var(--r-l);
  background:linear-gradient(140deg,var(--plum),#6B3542);color:#fff;
  display:grid;gap:20px;align-items:center;box-shadow:var(--sh-m);
}
@media(min-width:820px){.buyrow{grid-template-columns:1fr auto}}
.buyrow h3{font-size:clamp(21px,2.2vw,26px);color:#fff;margin-bottom:8px}
.buyrow p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.76);max-width:60ch}
.buyrow b{color:var(--camel-l)}
.buyrow .btn--outline{--fg:#fff;--bd:rgba(255,255,255,.36)}
.buyrow .btn--outline:hover{--bd:#fff;--fg:#fff;background:rgba(255,255,255,.12)}

/* ── Areas ──────────────────────────────────────────────── */
.areas{
  padding:clamp(26px,3.2vw,36px);border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-m);
  display:grid;gap:24px;
}
@media(min-width:560px){.areas{grid-template-columns:1fr 1fr}}
.areas__g h3{font-size:12px;font-family:var(--sans);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.areas__g ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.areas__g li{
  font-family:var(--disp);font-size:19px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:10px;letter-spacing:-.01em;
}
.areas__g li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none;box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.areas__g:nth-child(2) li::before{background:var(--camel);box-shadow:0 0 0 3px rgba(201,154,107,.24)}
.areas__note{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--line-2)}
.areas__note b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.areas__note address{font-style:normal;font-size:14.5px;line-height:1.62;color:var(--ink-2)}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{display:grid;gap:10px}
.faq details{
  border:1px solid var(--line-2);border-radius:var(--r-m);background:#fff;
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.faq details[open]{border-color:rgba(43,47,143,.3);box-shadow:var(--sh-s)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 54px 20px 24px;position:relative;
  font-family:var(--disp);font-size:clamp(16.5px,1.5vw,19px);font-weight:600;
  letter-spacing:-.014em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--blue)}
.faq details>div{padding:0 24px 22px}
.faq details>div p{margin:0;font-size:15px;line-height:1.68;color:var(--ink-2)}
.faq details[open]>div{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}

.faq__cta{margin-top:clamp(30px,3.6vw,44px);text-align:center}
.faq__cta p{margin:0 0 16px;font-size:15px;color:var(--ink-2)}

/* ── Final CTA ──────────────────────────────────────────── */
.final{position:relative;padding-block:clamp(70px,9vw,124px);overflow:hidden;color:#fff;text-align:center}
.final__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(46% 60% at 20% 12%, rgba(238,15,123,.36), transparent 66%),
    radial-gradient(46% 60% at 84% 84%, rgba(201,154,107,.30), transparent 66%),
    linear-gradient(150deg,#241246,#2B2F8F 48%,#5A1A63);
}
.final__in{position:relative;max-width:820px}
.final h2{font-size:clamp(32px,5.2vw,60px);line-height:1.06;letter-spacing:-.03em;color:#fff}
.final__sub{margin:22px auto 0;max-width:56ch;font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;color:rgba(255,255,255,.76)}
.final__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.final__micro{margin:22px 0 0;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.03em}

/* ── Footer ─────────────────────────────────────────────── */
.ftr{background:var(--plum-d);color:rgba(255,255,255,.7);padding-top:clamp(52px,6vw,80px)}
.ftr__in{display:grid;gap:36px}
@media(min-width:720px){.ftr__in{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1020px){.ftr__in{grid-template-columns:1.7fr 1fr 1fr 1.2fr}}
.brand--ftr{margin-bottom:18px}
.brand--ftr .brand__mark{width:46px;height:46px}
.brand--ftr .brand__txt strong{font-size:18px;color:#fff}
.brand--ftr .brand__txt em{color:var(--camel-l)}
.ftr__brand p{margin:0 0 16px;font-size:14.5px;line-height:1.66;max-width:40ch}
.ig{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px;
  border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600;color:#fff;
  transition:border-color .25s,background .25s;
}
.ig:hover{border-color:var(--pink);background:rgba(238,15,123,.14)}
.ftr__col{display:flex;flex-direction:column;gap:11px}
.ftr__col h3{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--camel-l);margin-bottom:5px}
.ftr__col a,.ftr__col span{font-size:14.5px;color:rgba(255,255,255,.68);transition:color .2s}
.ftr__col a:hover{color:#fff}
.ftr__col address{font-style:normal;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.68)}

.ftr__legal{
  margin-top:clamp(40px,5vw,64px);padding-block:26px 100px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:14px;
}
@media(min-width:900px){.ftr__legal{padding-bottom:32px}}
.ftr__legal p{margin:0;font-size:12.5px;color:rgba(255,255,255,.45)}
.ftr__disc{line-height:1.6;max-width:110ch}

/* ── Sticky mobile bar ──────────────────────────────────── */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;gap:8px;align-items:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(253,250,247,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.stickybar.is-on{transform:translateY(0)}
@media(min-width:900px){.stickybar{display:none}}
.stickybar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:100px;font-size:14.5px;font-weight:700;
  letter-spacing:-.01em;
}
.stickybar svg{width:18px;height:18px;fill:currentColor;flex:none}
/* Call is icon-only: the number itself belongs in the footer, not here. */
.stickybar__call{flex:0 0 46px;width:46px;border:1.5px solid var(--line);color:var(--ink)}
.stickybar__wa{
  flex:1;background:linear-gradient(160deg,#2BE075,#1FA855);color:#08331B;
  box-shadow:0 6px 16px -8px rgba(31,168,85,.7);
}

/* ── Reveal animation ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Graceful states when media hasn't been dropped in yet ── */
.shot[data-placeholder]::before{
  content:attr(data-ph);
  position:absolute;inset:0;z-index:1;
  display:grid;place-content:center;text-align:center;
  font-family:var(--disp);font-size:clamp(15px,2vw,22px);font-weight:600;
  letter-spacing:.02em;color:rgba(70,35,46,.34);
}
.shot[data-placeholder]{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 2px,transparent 2px 12px),
    linear-gradient(150deg,var(--camel-p),var(--sand-2) 55%,var(--camel-l));
}
.vid[data-media="missing"] .vid__frame::after{
  content:"Video coming soon";
  position:absolute;inset:0;display:grid;place-content:center;
  font-family:var(--disp);font-size:15px;color:rgba(70,35,46,.42);
}

/* ============================================================
   COMPARISON — "The first forty days"
   ============================================================ */
.compare{display:grid;gap:20px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:860px){.compare{grid-template-columns:1fr 1fr;gap:26px}}

.cmp{
  display:flex;flex-direction:column;
  border-radius:var(--r-l);overflow:hidden;
  background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--sh-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cmp:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.cmp--new{
  background:linear-gradient(170deg,#fff,var(--camel-p));
  border-color:rgba(201,154,107,.5);
  box-shadow:var(--sh-m);
}

.shot--cmp{
  aspect-ratio:4/3;border-radius:0;box-shadow:none;margin:0;
  border-bottom:1px solid var(--line-2);
}
.shot--cmp::after{border-radius:0;border:0;box-shadow:none}
/* Grey ground shows only while the photo is absent; the real photograph is
   never colour-graded — the smoke and her expression carry the contrast. */
.cmp--old .shot--cmp{background:linear-gradient(150deg,#E4DAD2,#C9BAB0 60%,#A99A93)}

.cmp__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.cmp__tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;margin-bottom:16px;border-radius:100px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.cmp__tag::before{content:"";width:6px;height:6px;border-radius:50%}
.cmp__tag--old{background:rgba(28,20,32,.06);color:var(--ink-3)}
.cmp__tag--old::before{background:#B4757F}
.cmp__tag--new{background:rgba(43,47,143,.09);color:var(--blue)}
.cmp__tag--new::before{background:var(--wa)}

.cmp__body h3{font-size:clamp(19px,2vw,23px);margin-bottom:18px;line-height:1.24}
.cmp--old .cmp__body h3{color:var(--ink-2)}
.cmp--new .cmp__body h3{color:var(--blue)}
.cmp__body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cmp__body li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cmp__body li::before{position:absolute;left:0;top:-1px;font-size:15px;font-weight:800}
.cmp--old li::before{content:"✕";color:#B4757F}
.cmp--new li::before{content:"✓";color:var(--wa-d)}

.pullq--wide{
  max-width:820px;margin:clamp(36px,4.5vw,56px) auto 0;
  border-left:0;border-top:3px solid var(--pink);
  border-radius:0 0 var(--r-m) var(--r-m);
  text-align:center;padding:30px 32px;
}

/* 2-day trial */
.trial{
  margin-top:clamp(30px,3.6vw,44px);padding:clamp(26px,3.2vw,38px);
  border-radius:var(--r-l);color:#fff;
  background:linear-gradient(140deg,#241246,var(--blue) 55%,#5A1A63);
  box-shadow:var(--sh-m);
  display:grid;gap:22px;align-items:center;
}
@media(min-width:860px){.trial{grid-template-columns:1fr auto}}
.trial__badge{
  display:inline-block;margin-bottom:14px;padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.trial h3{font-size:clamp(21px,2.4vw,28px);color:#fff;margin-bottom:9px}
.trial p{margin:0;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.78);max-width:62ch}
.trial__note{margin-top:12px!important;font-size:13px!important;line-height:1.55!important;color:rgba(255,255,255,.72)!important}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.areas__state{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px;border-radius:var(--r-m);
  background:linear-gradient(150deg,var(--camel-p),#fff);
  border:1px solid rgba(201,154,107,.36);
}
.areas__state svg{width:24px;height:24px;flex:none;color:var(--blue)}
.areas__state b{font-family:var(--disp);font-size:clamp(20px,2.2vw,25px);font-weight:600;letter-spacing:-.02em}
.areas__help{
  grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;
  padding-top:22px;border-top:1px solid var(--line-2);
}
.areas__help svg{width:22px;height:22px;flex:none;color:var(--wa-d);margin-top:2px}
.areas__help b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.areas__help span{font-size:14px;color:var(--ink-2);line-height:1.55}
.areas__note-txt{font-size:14.5px;color:var(--ink-3)}

.ftr__hours{color:var(--camel-l)!important;font-weight:600}

/* Header CTA label breakpoint lives with the mobile header block below. */

/* ============================================================
   INDIC TYPOGRAPHY
   Fraunces has no Indic coverage, so each script gets its own pairing
   chosen to mirror the English system rather than fall back to a
   generic UI face:

     Gujarati  Rasa (Ek Type)            display  — editorial serif, the
               Anek Gujarati (Ek Type)   body       counterpart to Fraunces
     Hindi     Noto Serif Devanagari     display  — high-contrast serif
               Anek Devanagari (Ek Type) body       modern humanist sans

   Both families are loaded from Google Fonts by main.js only when that
   language is selected, so English visitors download neither. Fallbacks
   name the Noto Sans faces so text stays readable if a fetch fails.
   ============================================================ */
:root[data-lang="gu"]{
  --disp:"Rasa","Noto Serif Gujarati","Noto Sans Gujarati",Georgia,serif;
  --sans:"Anek Gujarati","Noto Sans Gujarati","Plus Jakarta Sans",sans-serif;
}
:root[data-lang="hi"]{
  --disp:"Noto Serif Devanagari","Tiro Devanagari Hindi",Georgia,serif;
  --sans:"Anek Devanagari","Noto Sans Devanagari","Plus Jakarta Sans",sans-serif;
}

/* Devanagari and Gujarati carry tall ascenders, deep descenders and a
   headline stroke, so they need more leading and less negative tracking
   than the Latin scale. */
:root[data-lang="gu"] h1,:root[data-lang="hi"] h1{
  font-weight:600;letter-spacing:-.005em;line-height:1.28;
  font-size:clamp(34px,5.2vw,60px);
}
:root[data-lang="gu"] .h2,:root[data-lang="hi"] .h2{
  font-weight:600;letter-spacing:-.004em;line-height:1.3;
  font-size:clamp(27px,3.6vw,45px);
}
:root[data-lang="gu"] h3,:root[data-lang="hi"] h3,
:root[data-lang="gu"] h4,:root[data-lang="hi"] h4{
  font-weight:600;letter-spacing:0;line-height:1.34;
}
:root[data-lang="gu"] body,:root[data-lang="hi"] body{line-height:1.78}
:root[data-lang="gu"] .lede,:root[data-lang="hi"] .lede,
:root[data-lang="gu"] .sub,:root[data-lang="hi"] .sub,
:root[data-lang="gu"] .p,:root[data-lang="hi"] .p{line-height:1.72}
/* Indic scripts have no case, so all-caps tracking reads as broken spacing. */
:root[data-lang="gu"] .kicker,:root[data-lang="hi"] .kicker,
:root[data-lang="gu"] .plan__dur span,:root[data-lang="hi"] .plan__dur span,
:root[data-lang="gu"] .specs dt,:root[data-lang="hi"] .specs dt,
:root[data-lang="gu"] .ftr__col h3,:root[data-lang="hi"] .ftr__col h3,
:root[data-lang="gu"] .areas__g h3,:root[data-lang="hi"] .areas__g h3{
  text-transform:none;letter-spacing:.02em;
}
:root[data-lang="gu"] .trial__badge,:root[data-lang="hi"] .trial__badge,
:root[data-lang="gu"] .plan__badge,:root[data-lang="hi"] .plan__badge,
:root[data-lang="gu"] .cmp__tag,:root[data-lang="hi"] .cmp__tag,
:root[data-lang="gu"] .plan__off,:root[data-lang="hi"] .plan__off{
  text-transform:none;letter-spacing:.02em;
}
/* Longer words need room to wrap rather than a shrunken size. */
:root[data-lang="gu"] .btn,:root[data-lang="hi"] .btn{
  white-space:normal;text-align:center;line-height:1.35;
}
:root[data-lang="gu"] .plan__tag,:root[data-lang="hi"] .plan__tag{min-height:3.4em}
:root[data-lang="gu"] .brand__txt em,:root[data-lang="hi"] .brand__txt em{letter-spacing:.3em}
:root[data-lang="gu"] .lede,:root[data-lang="hi"] .lede{max-width:60ch}
@media(max-width:599px){
  :root[data-lang="gu"] h1,:root[data-lang="hi"] h1{font-size:clamp(28px,7.6vw,34px)}
  :root[data-lang="gu"] .h2,:root[data-lang="hi"] .h2{font-size:clamp(23px,6.2vw,28px)}
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border-radius:100px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink-2);
  transition:border-color .2s,color .2s,background .2s;
}
.lang__btn:hover{border-color:var(--blue);color:var(--blue);background:rgba(43,47,143,.04)}
.lang__btn svg{width:16px;height:16px;flex:none}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  min-width:170px;margin:0;padding:6px;list-style:none;
  background:var(--cream);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-m);
}
.lang__menu li{margin:0}
.lang__menu button{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:10px 12px;border:0;border-radius:9px;background:transparent;
  font-size:14.5px;font-weight:600;color:var(--ink);
}
.lang__menu button:hover{background:rgba(43,47,143,.07);color:var(--blue)}
.lang__menu button[aria-selected="true"]{background:rgba(43,47,143,.10);color:var(--blue)}
.lang__menu button[aria-selected="true"]::after{content:"✓";float:right;font-weight:800}
@media(max-width:429px){.lang__btn{padding:9px 10px}.lang__btn span{display:none}}

/* ============================================================
   GOOGLE RATING BADGE
   ============================================================ */
.hero__trust{margin-top:22px}
.grating{
  display:inline-flex;align-items:center;gap:13px;
  padding:12px 20px 12px 16px;border-radius:100px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  backdrop-filter:blur(8px);box-shadow:var(--sh-s);
}
.grating__stars{color:#E8A33D;font-size:16px;letter-spacing:1.5px;line-height:1}
.grating__half{opacity:.45}
.grating__txt{display:flex;flex-direction:column;line-height:1.25}
.grating__txt b{font-size:14.5px;font-weight:700;color:var(--ink)}
.grating__txt small{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ============================================================
   HOW TO USE — YouTube
   ============================================================ */
.usewrap{display:grid;gap:clamp(26px,3.4vw,44px);align-items:start}
@media(min-width:960px){.usewrap{grid-template-columns:1.35fr .65fr}}
.ytbox{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-xl);background:var(--plum-d);
  box-shadow:var(--sh-l);border:1px solid var(--line-2);
}
.ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.usesteps{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:u}
.usesteps li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.usesteps li:last-child{border-bottom:0}
.usesteps__n{
  flex:none;width:34px;height:34px;display:grid;place-content:center;border-radius:50%;
  background:linear-gradient(150deg,var(--blue),#6A2E9E);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:800;
}
.usesteps h3{font-size:18px;margin-bottom:6px}
.usesteps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.usesteps__cta{display:block!important;padding-top:22px!important}

/* ============================================================
   PLANS — 30 / 60 / 90
   ============================================================ */
.plan__dur{margin:0 0 6px;display:flex;flex-direction:column;gap:3px}
.plan__dur b{font-family:var(--disp);font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1}
.plan__dur span{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan__tag{margin:0 0 20px;font-size:14.5px;line-height:1.45;color:var(--ink-2);min-height:2.9em}
/* `.plan__price span` (0,1,1) from the earlier design outranks a bare class,
   so these are scoped to beat it rather than silently losing the cascade. */
.plan__price .plan__rate{
  display:block;font-family:var(--disp);font-size:clamp(25px,2.7vw,31px);
  font-weight:600;color:var(--blue);letter-spacing:-.02em;line-height:1;
  text-transform:none;margin-bottom:0;
}
.plan__price .plan__off{
  display:inline-block;width:auto;margin:12px 0 0;padding:6px 14px;border-radius:100px;
  background:linear-gradient(100deg,var(--pink),#8B2A9E);color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.2;
}
.plan__price small{
  display:block;margin-top:12px;font-family:var(--sans);font-size:12.5px;
  font-weight:600;line-height:1.45;color:var(--ink-3);letter-spacing:0;
}
.plan--value{border-color:rgba(238,15,123,.42)}
.plan__badge--value{background:linear-gradient(100deg,#8B2A9E,var(--pink))}
.plan__foot{
  max-width:860px;margin:22px auto 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
@media(min-width:860px){}

/* renewal + purchase */
.extras{display:grid;gap:18px;margin-top:clamp(26px,3.2vw,38px)}
@media(min-width:820px){.extras{grid-template-columns:1fr 1fr}}
.extra{
  padding:30px 28px 32px;border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-s);
  display:flex;flex-direction:column;align-items:flex-start;
}
.extra h3{font-size:21px;margin-bottom:10px}
.extra p{margin:0 0 20px;font-size:14.8px;line-height:1.62;color:var(--ink-2)}
.extra__price{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--blue);letter-spacing:-.01em}
.extra--buy{background:linear-gradient(165deg,#fff,var(--camel-p));border-color:rgba(201,154,107,.45)}

/* ============================================================
   ENQUIRY FORM
   ============================================================ */
.eform{
  padding:clamp(26px,3.4vw,40px);border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-m);
  display:grid;gap:18px;
}
.eform__row{display:grid;gap:18px}
@media(min-width:620px){.eform__row{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field__l{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.field input{
  width:100%;padding:14px 16px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--cream);
  font-family:var(--sans);font-size:16px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 4px rgba(43,47,143,.12);
}
.field input.is-bad{border-color:#C4405B;background:#FFF7F8}
.field input.is-bad:focus{box-shadow:0 0 0 4px rgba(196,64,91,.14)}
.field__e{font-size:12.5px;font-weight:600;color:#C4405B;min-height:1em}
.field__phone{display:flex;align-items:stretch}
.field__cc{
  display:grid;place-content:center;padding:0 14px;
  border:1.5px solid var(--line);border-right:0;border-radius:13px 0 0 13px;
  background:var(--sand);font-size:15px;font-weight:700;color:var(--ink-2);
}
.field__phone input{border-radius:0 13px 13px 0}
.eform__priv{margin:0;font-size:12.5px;color:var(--ink-3);text-align:center}
.eform__msg{margin:0;padding:15px 18px;border-radius:14px;font-size:14.5px;line-height:1.6;font-weight:600}
.eform__msg.is-ok{background:rgba(37,211,102,.12);border:1px solid rgba(31,168,85,.38);color:#0E6B36}
.eform__msg.is-err{background:rgba(196,64,91,.09);border:1px solid rgba(196,64,91,.32);color:#9B2B43}
.eform__msglink{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.eform__alt{margin:0;text-align:center;font-size:14px}
.eform__alt a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.spinner{
  display:none;width:17px;height:17px;flex:none;border-radius:50%;
  border:2px solid rgba(8,51,27,.28);border-top-color:#08331B;
  animation:spin .7s linear infinite;
}
.is-sending .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}}

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.social{display:flex;gap:10px;margin-top:18px}
.social a{
  width:42px;height:42px;display:grid;place-content:center;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);
  transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease);
}
.social a:hover{color:#fff;border-color:var(--pink);background:rgba(238,15,123,.16);transform:translateY(-2px)}
.social svg{width:20px;height:20px}
.ftr__col a[href^="mailto:"]{word-break:break-word}

/* Header breathing room between the nav breakpoint and full desktop */
@media(min-width:1000px) and (max-width:1179px){
  .nav{gap:0}
  .nav a{padding:9px 9px;font-size:14px}
  .hdr__in{gap:14px}
}

/* YouTube: the real player sits on top; the fallback behind it is only
   raised if the frame is actually blocked (preview sandboxes, strict CSP). */
.ytframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:transparent}
.ytbox.is-blocked .ytframe{display:none}

.ytfallback{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;text-align:center;color:#fff;text-decoration:none;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(238,15,123,.30), transparent 70%),
    linear-gradient(150deg,#241246,var(--blue) 55%,#5A1A63);
  transition:filter .3s var(--ease);
}
.ytbox.is-live .ytfallback{display:none}
.ytbox.is-blocked .ytfallback{z-index:3}
.ytfallback:hover{filter:brightness(1.08)}
.ytfallback__play{
  width:76px;height:76px;display:grid;place-content:center;border-radius:50%;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),background .3s;
}
.ytfallback:hover .ytfallback__play{transform:scale(1.07);background:rgba(255,255,255,.24)}
.ytfallback__play svg{width:30px;height:30px;margin-left:4px}
.ytfallback__txt{display:flex;flex-direction:column;gap:5px}
.ytfallback__txt b{font-family:var(--disp);font-size:clamp(18px,2vw,23px);font-weight:600;letter-spacing:-.015em}
.ytfallback__txt small{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.ytalt{margin:14px 0 0;text-align:center;font-size:13.5px}
.ytalt a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ytalt a:hover{color:var(--pink)}

/* ── Hero image sizing ───────────────────────────────────────────────
   Declared last on purpose: the base `.shot--hero{aspect-ratio:3/2}` sits
   further up the file at the same specificity and would otherwise win.
   The frame gets taller as its column gets wider, so the product fills the
   row instead of floating in whitespace — while staying wide enough that
   the 3:2 photograph is never cropped hard. */
@media(min-width:768px) and (max-width:1023px){ .shot--hero{aspect-ratio:3/2} }
@media(min-width:1024px) and (max-width:1279px){ .shot--hero{aspect-ratio:5/4} }
@media(min-width:1280px){ .shot--hero{aspect-ratio:4/3} }
@media(min-width:1600px){ .shot--hero{aspect-ratio:5/4} }

/* Review video play affordance — the control bar only appears once playing,
   so the poster reads as a clean cover at rest. */
.vid__play{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  display:grid;place-content:center;cursor:pointer;
  border:0;padding:0;background:linear-gradient(180deg,rgba(28,20,32,.10),rgba(28,20,32,.34));
  transition:background .3s var(--ease);
}
.vid__play span{
  display:grid;place-content:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.20);border:1.5px solid rgba(255,255,255,.66);
  backdrop-filter:blur(8px);color:#fff;
  transition:transform .3s var(--ease),background .3s;
}
.vid__play svg{width:24px;height:24px;margin-left:4px}
.vid__play:hover{background:linear-gradient(180deg,rgba(28,20,32,.04),rgba(28,20,32,.28))}
.vid__play:hover span{transform:scale(1.08);background:rgba(255,255,255,.32)}
.vid__frame.is-playing .vid__play{display:none}
.vid__frame.is-playing .vid__tag{opacity:0;pointer-events:none;transition:opacity .3s}

/* Plan hierarchy: 30 plain, 60 a light lift, 90 the strongest card. */
.plan--better{border-color:rgba(43,47,143,.34)}
.plan__badge--better{background:linear-gradient(100deg,var(--blue),#5A4BC4)}
.plan--value{border-color:rgba(238,15,123,.5)}
.plan__price .plan__off--max{background:linear-gradient(100deg,var(--pink),#8B2A9E);font-size:12.5px;padding:7px 15px}
.plan__renew{
  max-width:820px;margin:22px auto 0;text-align:center;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.plan__foot{margin-top:10px}
/* Only the purchase card remains beside the plans, so it spans the row. */
@media(min-width:820px){.extras{grid-template-columns:1fr}}
.extra--buy{align-items:flex-start}

/* ── Review video fullscreen ──────────────────────────────────────────
   Native fullscreen hands the element a landscape box on most phones.
   Letterbox the 9:16 source inside it on black rather than cropping or
   stretching it, and centre it. Prefixed selectors are listed separately
   because one unknown pseudo-class invalidates a whole selector list. */
.vid__frame video:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}
.vid__frame video:-webkit-full-screen{width:100%;height:100%;object-fit:contain;background:#000}
.vid__frame video:-moz-full-screen{width:100%;height:100%;object-fit:contain;background:#000}
.vid__frame video:-ms-fullscreen{width:100%;height:100%;object-fit:contain;background:#000}
/* Chrome/Android paint the backdrop behind the fullscreen element. */
.vid__frame video::backdrop{background:#000}
.vid__frame video::-webkit-backdrop{background:#000}

/* ── Mobile header: keep it to logo + language + WhatsApp + menu ──────
   The CTA label only returns once there is real room, so small screens
   get a compact icon button instead of a wide "Check availability". */
@media(max-width:599px){
  .hdr__wa .btn__lbl{display:none}
  .hdr__wa{padding:11px 13px}
  .hdr__in{gap:10px}
  .hdr__cta{gap:6px}
  .brand__mark{width:38px;height:38px}
  .brand__txt strong{font-size:15.5px}
  .brand__txt em{font-size:8.5px;letter-spacing:.36em}
}
@media(min-width:600px){.hdr__wa .btn__lbl{display:inline}}

/* ── Closing CTA on mobile: one primary action, compact phone buttons ── */
.final__tel{font-variant-numeric:tabular-nums}
@media(max-width:639px){
  .final__btns{gap:10px}
  .final__tel{padding:12px 20px;font-size:14.5px}
  /* The alternate number stays available in the footer contact block. */
  .final__tel--alt{display:none}
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Service-area rows: three tiers of reach, visually distinct without cards. */
.areas__state span{display:flex;flex-direction:column;gap:3px;min-width:0}
.areas__state b{font-family:var(--disp);font-size:clamp(15px,1.5vw,17px);font-weight:600;letter-spacing:-.01em;line-height:1.34}
.areas__state small{font-size:12.5px;color:var(--ink-3);font-weight:600}
.areas__state--alt{background:linear-gradient(150deg,var(--sand),#fff);border-color:var(--line)}
.areas__state--buy{background:linear-gradient(150deg,rgba(43,47,143,.07),#fff);border-color:rgba(43,47,143,.22)}
@media(min-width:560px){.areas__state{grid-column:1/-1}}