/* ============================================================================
   ME3ZA PERFORMANCE — stylesheet
   Palette sampled directly from the coaching package PDF.
   ========================================================================== */

:root{
  --ink:      #15130F;
  --ink-2:    #1B1813;
  --ink-3:    #221E18;
  --line:     #302C25;
  --line-2:   #3A362E;
  --gold:     #C9A24B;
  --gold-dp:  #B8912F;
  --taupe:    #8C8474;
  --taupe-lt: #A39B8B;
  --cream:    #F8F7F4;
  --cream-2:  #DCD7CD;
  --wa:       #25D366;

  --wrap: 1180px;
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--cream-2);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3,h4{ color:var(--cream); font-weight:800; line-height:1.05; margin:0; letter-spacing:-.01em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow{ max-width:820px; }
.gold{ color:var(--gold); }

.eyebrow{
  margin:0 0 18px; color:var(--gold);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3em;
}

/* ------------------------------ buttons ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px; border:1px solid transparent; border-radius:var(--r);
  font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:all .25s var(--ease); white-space:nowrap;
}
.btn--gold{ background:var(--gold); color:#15130F; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-dp); border-color:var(--gold-dp); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--cream-2); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--send{ background:var(--wa); color:#062d15; border-color:var(--wa); font-size:15px; padding:15px 30px; }
.btn--send:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn--lg{ padding:16px 32px; font-size:15px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ------------------------------ nav ------------------------------ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(21,19,15,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.nav.is-stuck{ background:rgba(21,19,15,.95); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:28px; height:76px; }

.brand{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.brand__top{ font-size:20px; font-weight:800; letter-spacing:.22em; color:var(--cream); }
.brand__bottom{ font-size:9px; font-weight:600; letter-spacing:.42em; color:var(--gold); margin-top:5px; }

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--taupe-lt); transition:color .2s; position:relative; padding-block:6px;
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta--mobile{ display:none; }
.nav__burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; transition:.3s var(--ease); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ------------------------------ hero ------------------------------ */
.hero{ position:relative; padding-top:70px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(720px 460px at 78% 18%, rgba(201,162,75,.13), transparent 65%);
  pointer-events:none;
}
.hero__inner{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; padding-bottom:80px; position:relative; }
.hero__title{ font-size:clamp(44px,7.2vw,86px); letter-spacing:-.02em; }
.lede{ color:var(--taupe-lt); font-size:18px; max-width:52ch; margin:26px 0 0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero__stats{ display:flex; gap:44px; list-style:none; margin:52px 0 0; padding:26px 0 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero__stats strong{ display:block; font-size:36px; font-weight:800; color:var(--gold); line-height:1; }
.hero__stats span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }

.hero__media{ position:relative; z-index:1; }
.hero__frame{ position:relative; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.hero__frame::after{
  content:""; position:absolute; inset:0;
  /* just enough fade to seat the name chip — the photo is already dark at the base */
  background:linear-gradient(180deg, transparent 58%, rgba(21,19,15,.72) 100%);
}
.hero__frame img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%; filter:contrast(1.04) saturate(.92); }
.hero__media::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--gold);
  border-radius:var(--r); opacity:.35; z-index:-1;
}
.hero__chip{
  position:absolute; left:-14px; bottom:26px; z-index:2;
  background:var(--ink-2); border:1px solid var(--line-2); border-left:3px solid var(--gold);
  padding:12px 20px;
}
.hero__chip-name{ display:block; font-weight:700; color:var(--cream); letter-spacing:.08em; }
.hero__chip-role{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }

/* marquee */
.marquee{ border-block:1px solid var(--line); background:var(--ink-2); overflow:hidden; padding:14px 0; }
/* two identical sets side by side; shifting exactly one set width loops seamlessly */
/* SPEED OF THE SCROLLING BAND — raise the seconds to slow it down, lower to speed it up.
   If you change it, change the matching line in the reduced-motion block at the bottom too. */
.marquee__track{ display:flex; width:max-content; animation:slide 55s linear infinite; }
.marquee__set{ display:flex; align-items:center; gap:30px; padding-right:30px; white-space:nowrap; }
.marquee__track span{ font-family:"Barlow Condensed",Barlow,sans-serif; font-size:20px; font-weight:700; letter-spacing:.24em; color:var(--taupe); text-transform:uppercase; }
.marquee__track i{ color:var(--gold); font-style:normal; font-size:11px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ------------------------------ sections ------------------------------ */
.section{ padding:110px 0; position:relative; }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.sec-head{ max-width:720px; margin-bottom:58px; }
.sec-head h2{ font-size:clamp(30px,4.2vw,48px); }
.sec-head__lede{ color:var(--taupe-lt); margin:20px 0 0; font-size:17px; }

/* how it works — numbered steps */
.step-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.step-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.step-card{ background:var(--ink); padding:38px 32px; transition:background .3s; }
.section--alt .step-card{ background:var(--ink-2); }
.step-card:hover{ background:var(--ink-3); }
.step-card__k{ font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--gold); }
.step-card h3{ font-size:21px; margin:16px 0 12px; letter-spacing:0; }
.step-card p{ margin:0; color:var(--taupe); font-size:15.5px; line-height:1.6; }

/* inside */
.inside-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.inside-card{ background:var(--ink); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; transition:.3s var(--ease); }
.inside-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.inside-card__tick{ width:26px; height:26px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:13px; margin-bottom:18px; }
.inside-card h3{ font-size:17px; margin:0 0 10px; letter-spacing:0; }
.inside-card p{ margin:0; color:var(--taupe); font-size:14.5px; line-height:1.6; }

/* ------------------------------ packages ------------------------------ */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:stretch; }
.pkg{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); padding:38px 32px 32px;
  transition:.35s var(--ease);
}
.pkg:hover{ transform:translateY(-6px); border-color:var(--taupe); }
.pkg--popular{ background:var(--ink-3); border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,162,75,.25), 0 24px 60px -30px rgba(201,162,75,.5); }
.pkg__badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#15130F; font-size:10px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; padding:6px 16px; white-space:nowrap;
}
.pkg__tag{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
/* min-heights keep the price row on the same line across all three cards */
.pkg__name{ font-size:25px; margin:12px 0 0; letter-spacing:.02em; min-height:56px; }
.pkg__summary{ color:var(--taupe); font-size:15px; margin:14px 0 0; min-height:100px; }
/* price options — one row per plan, each row is clickable and jumps to the form */
/* min-height fits two rows, so the tick lists start on the same line in every card */
.pkg__plans{ display:grid; gap:10px; align-content:start; min-height:146px;
  margin:26px 0 28px; padding-top:24px; border-top:1px solid var(--line); }
.plan{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
  padding:14px 18px; cursor:pointer; text-align:left; color:inherit;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.pkg--popular .plan{ background:var(--ink-2); }
.plan:hover{ border-color:var(--gold); background:rgba(201,162,75,.08); }
.plan:focus-visible{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.2); }
.plan__dur{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-lt); }
.plan__price{ font-size:28px; font-weight:800; color:var(--cream); line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.plan__price i{ font-size:13px; font-weight:600; font-style:normal; color:var(--taupe); margin-right:6px; letter-spacing:0; }
.plan:hover .plan__price{ color:var(--gold); }
/* two packages read better centred than stretched across the full width */
.pkg-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin-inline:auto; }
.pkg__features{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:12px; flex:1; }
.pkg__features li{ position:relative; padding-left:26px; font-size:15px; color:var(--cream-2); line-height:1.5; }
.pkg__features li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; font-size:13px; }
.pkg .btn{ width:100%; }
.pkg-note{ text-align:center; color:var(--taupe); font-size:15px; margin:38px 0 0; }

/* ------------------------------ results ------------------------------ */
.results-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.result{ background:var(--ink); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.3s var(--ease); }
.result:hover{ border-color:var(--gold); }
.result__imgs{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
/* 3:5 suits full-body progress photos better than 3:4 */
.result__slot{ position:relative; aspect-ratio:3/5; background:var(--ink-3); overflow:hidden; }
/* photos are stacked; only .is-active is visible, so a card can cross-fade
   between several before/after pairs */
.result__slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease); }
.result__slot img.is-active{ opacity:1; }

.result__dots{ position:absolute; left:0; right:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:8px; }
.result__dot{ width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(248,247,244,.55); background:rgba(21,19,15,.55);
  transition:.3s var(--ease); }
.result__dot:hover{ border-color:var(--gold); }
.result__dot.is-on{ width:22px; border-radius:5px; background:var(--gold); border-color:var(--gold); }

.result__tag{ display:block; font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.result__slot span{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(21,19,15,.82); color:var(--gold); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; padding:4px 9px;
}
.result__ph{
  position:absolute; inset:12px; border:1px dashed var(--line-2); border-radius:var(--r);
  display:grid; place-items:center; text-align:center; color:var(--taupe);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px;
}
.result__body{ padding:24px 24px 26px; }
.result__name{ font-size:19px; margin:0; letter-spacing:.04em; }
/* stacked so a long stat can't reflow one card differently from the others */
.result__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:12px 0 0; }
.result__stat{ background:rgba(201,162,75,.12); border:1px solid rgba(201,162,75,.4); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.08em; padding:4px 10px; }
.result__weeks{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); }
.result__quote{ margin:16px 0 0; color:var(--taupe-lt); font-size:15px; font-style:italic; border-left:2px solid var(--line-2); padding-left:14px; }

/* ------------------------------ faq ------------------------------ */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:26px 0; color:var(--cream); font-size:18px; font-weight:700; letter-spacing:.01em;
}
.faq__q:hover{ color:var(--gold); }
.faq__sign{ color:var(--gold); font-size:24px; font-weight:400; transition:transform .3s var(--ease); flex-shrink:0; line-height:1; }
.faq__item.is-open .faq__sign{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .38s var(--ease); }
.faq__a p{ margin:0 0 26px; color:var(--taupe); font-size:16px; padding-right:40px; }

/* ------------------------------ form ------------------------------ */
.section--apply{ background:var(--ink-2); border-top:1px solid var(--line); }
.form-card{ background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r); padding:38px; }

.progress{ margin-bottom:34px; }
.progress__bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.progress__bar span{ display:block; height:100%; width:0; background:var(--gold); transition:width .45s var(--ease); }
.progress__meta{ display:flex; justify-content:space-between; margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }

.step{ display:none; animation:fade .35s var(--ease); }
.step.is-active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.step__title{ font-size:27px; margin:0; }
.step__sub{ color:var(--taupe); margin:10px 0 32px; font-size:16px; }

.field{ margin-bottom:26px; }
[hidden]{ display:none !important; }   /* beats display rules on .btn, .field, footer links */

/* conditional explainer that appears when an answer needs one */
.field--note{
  border:1px solid rgba(201,162,75,.42); border-left:3px solid var(--gold);
  background:rgba(201,162,75,.07); border-radius:var(--r);
  padding:16px 18px; animation:fade .3s var(--ease);
}
.field--note p{ margin:0; color:var(--cream-2); font-size:15px; line-height:1.6; }
.field__label{ display:block; font-size:14px; font-weight:600; color:var(--cream); margin-bottom:10px; letter-spacing:.02em; }
.field__label i{ color:var(--gold); font-style:normal; }
.field__opt{ color:var(--taupe); font-weight:400; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

.input,.textarea,.select{
  width:100%; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--cream); padding:13px 15px; font-size:16px; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus,.textarea:focus,.select:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.15); }
.input::placeholder,.textarea::placeholder{ color:#6E6659; }
.textarea{ min-height:110px; resize:vertical; }
.select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  padding-right:44px; }
.select option{ background:var(--ink-2); color:var(--cream); }

.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt label{
  display:block; cursor:pointer; user-select:none;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--ink-2);
  padding:11px 18px; font-size:15px; color:var(--cream-2); transition:.2s var(--ease);
}
.opt label:hover{ border-color:var(--taupe); }
.opt input:checked + label{ border-color:var(--gold); background:rgba(201,162,75,.13); color:var(--gold); font-weight:600; }
.opt input:focus-visible + label{ box-shadow:0 0 0 3px rgba(201,162,75,.2); }

.field.has-error .input,.field.has-error .textarea,.field.has-error .select{ border-color:#C4553C; }
.field.has-error .opt label{ border-color:#C4553C; }
.field__err{ display:none; color:#E07A5F; font-size:13px; margin-top:8px; letter-spacing:.02em; }
.field.has-error .field__err{ display:block; }

/* package chooser inside the form */
.choose{ display:grid; gap:14px; margin-bottom:8px; }
.choose__opt input{ position:absolute; opacity:0; width:0; height:0; }
.choose__opt label{
  display:flex; justify-content:space-between; align-items:center; gap:18px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--ink-2); padding:20px 22px;
  transition:.25s var(--ease);
}
.choose__opt label:hover{ border-color:var(--taupe); }
.choose__opt input:checked + label{ border-color:var(--gold); background:rgba(201,162,75,.1); }
.choose__name{ display:block; font-weight:700; color:var(--cream); font-size:17px; letter-spacing:.04em; }
.choose__sub{ display:block; font-size:13px; color:var(--taupe); margin-top:4px; }
.choose__price{ font-size:21px; font-weight:800; color:var(--gold); white-space:nowrap; }

.review{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin:28px 0 6px; max-height:280px; overflow-y:auto; }
.review h4{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
.review dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:14.5px; }
.review dt{ color:var(--taupe); }
.review dd{ margin:0; color:var(--cream-2); }

.form-nav{ display:flex; gap:14px; align-items:center; margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.form-nav--single{ justify-content:center; }
.form-nav--single .btn--send{ margin-left:0; min-width:280px; }

/* subscribe page: two labelled blocks inside one card */
.sub-block + .sub-block{ margin-top:34px; padding-top:32px; border-top:1px solid var(--line); }

/* intake page header tag */
.nav__tag{ margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); }

.wa-warn{ margin:0 0 14px; color:#E07A5F; font-weight:600; }
.wa-warn code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.form-nav .btn--gold,.form-nav .btn--send{ margin-left:auto; }
.form-hint{ font-size:13.5px; color:var(--taupe); margin:16px 0 0; text-align:center; }
.form-hint a{ color:var(--gold); text-decoration:underline; }

.sent{ text-align:center; padding:20px 0 8px; }
.sent__tick{ width:64px; height:64px; margin:0 auto 22px; border:2px solid var(--wa); border-radius:50%; display:grid; place-items:center; color:var(--wa); font-size:30px; }
.sent h3{ font-size:26px; margin:0 0 12px; }
.sent p{ color:var(--taupe); margin:0 auto 22px; max-width:44ch; }

/* ------------------------------ footer ------------------------------ */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-top:64px; }
.footer__inner{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:42px; padding-bottom:48px; }
.footer__brand .brand__top{ font-size:22px; display:block; }
.footer__brand .brand__bottom{ font-size:9px; display:block; margin-top:5px; }
.footer__slogan{ color:var(--taupe); margin:22px 0 0; font-size:15px; max-width:34ch; }
.footer__h{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.footer__links{ display:flex; flex-direction:column; gap:11px; }
.footer__links a{ color:var(--taupe-lt); font-size:15px; transition:color .2s; }
.footer__links a:hover{ color:var(--gold); }
.footer__city{ color:var(--taupe); font-size:14px; margin-top:6px; }
.footer__legal{ border-top:1px solid var(--line); padding-block:24px; color:var(--taupe); font-size:13px; letter-spacing:.06em; }

/* floating whatsapp */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:var(--wa); color:#062d15;
  display:grid; place-items:center; box-shadow:0 12px 34px -10px rgba(37,211,102,.7);
  transition:transform .25s var(--ease);
}
.fab:hover{ transform:scale(1.08); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width:1080px){
  .inside-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:920px){
  .hero__inner{ grid-template-columns:1fr; gap:52px; padding-bottom:60px; }
  .hero__media{ max-width:420px; }
  .step-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pkg-grid,.results-grid{ grid-template-columns:minmax(0,1fr); }
  .pkg--popular{ order:-1; }
  .pkg__name,.pkg__summary,.pkg__plans{ min-height:0; }
  .footer__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer__brand{ grid-column:1/-1; }

  .nav__burger{ display:block; }
  .nav__cta{ display:none; }
  .nav__cta--mobile{ display:inline-flex; margin-top:10px; }
  .nav__links{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:22px 24px 28px; display:none;
  }
  .nav.is-open .nav__links{ display:flex; }
  .nav__links a{ width:100%; padding:12px 0; font-size:15px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding:76px 0; }
  .sec-head{ margin-bottom:40px; }
  .step-grid{ grid-template-columns:1fr; }
  .inside-grid{ grid-template-columns:1fr; }
  .hero__stats{ gap:28px; }
  .hero__stats strong{ font-size:30px; }
  .form-card{ padding:26px 20px; }
  .footer__inner{ grid-template-columns:1fr; gap:32px; }
  .form-nav{ flex-wrap:wrap; }
  .form-nav .btn{ flex:1; min-width:140px; }
  .choose__opt label{ flex-direction:column; align-items:flex-start; gap:10px; }
  .fab{ width:52px; height:52px; right:16px; bottom:16px; }
  .review dl{ grid-template-columns:1fr; gap:2px 0; }
  .review dt{ margin-top:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
}

@media (prefers-reduced-motion:reduce){
  /* iteration-count matters: without it, a looping animation restarts endlessly
     at .01ms instead of stopping — which reads as violent flickering. */
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  /* Deliberate exception: the band keeps scrolling at the same slow speed as
     everyone else, so what you see while editing is what visitors see.
     Higher specificity than the `*` rule above, so this wins. */
  .marquee__track{ animation:slide 55s linear infinite !important; }
}