/* ==========================================================
   AstroManch — Personalised Numerology Report  ·  v2
   Theme: clay / terracotta / warm brown  ·  Desktop-first
   ========================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Warm neutrals */
  --cream:#FDFAF6;
  --sand:#F8F0E7;
  --linen:#F3E7DA;
  --shell:#EDDDCC;

  /* Clay — light red / terracotta (primary) */
  --clay-50:#FDF2ED;
  --clay-100:#FADFD4;
  --clay-200:#F2C4B1;
  --clay-300:#E5A184;
  --clay-400:#D67B59;
  --clay-500:#C25A3C;
  --clay-600:#A9482A;
  --clay-700:#8B3820;

  /* Brown */
  --brown-500:#8B6349;
  --brown-700:#5C3A29;
  --brown-800:#40261A;
  --brown-900:#2C1911;

  /* Ink */
  --ink:#2A1A12;
  --ink-2:#4A3527;
  --ink-3:#634C3C;
  --muted:#7E6555;
  --muted-2:#A08A78;

  --line:#ECDCCB;
  --border:1px solid var(--line);

  --sh-sm:0 1px 2px rgba(70,40,25,.05), 0 4px 12px -4px rgba(70,40,25,.07);
  --sh-md:0 2px 4px rgba(70,40,25,.04), 0 16px 36px -14px rgba(70,40,25,.16);
  --sh-lg:0 6px 14px rgba(70,40,25,.05), 0 38px 70px -30px rgba(70,40,25,.3);

  /* Highlighted-button rings */
  --ring-clay:0 0 0 4px rgba(194,90,60,.15);
  --ring-clay-hi:0 0 0 6px rgba(194,90,60,.22);
  --ring-white:0 0 0 4px rgba(255,255,255,.24);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --container:1220px;
  --gutter:32px;
  --section-y:90px;

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

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink-2);
  font-family:var(--font-sans); font-size:17px; line-height:1.72; font-weight:400;
  letter-spacing:-.003em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; color:var(--ink); font-weight:400}
p{margin:0}
::selection{background:var(--clay-100); color:var(--clay-700)}


/* ---------- 3. Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:940px}
.faq-section .container{max-width:var(--container)}
.section{padding-block:var(--section-y); position:relative}
.section--cream{background:var(--cream)}
.section--sand{background:var(--sand)}
.section--linen{background:var(--linen)}

/* ---------- 4. Type ---------- */
.display{font-family:var(--font-display); font-size:clamp(50px,5.4vw,80px); line-height:1.02; letter-spacing:-.022em; color:var(--ink)}
.h2{font-family:var(--font-display); font-size:clamp(36px,3.7vw,55px); line-height:1.08; letter-spacing:-.019em}
.h2 em{font-style:italic; color:var(--clay-600)}
.lede{font-size:19px; line-height:1.68; color:var(--ink-3)}
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--clay-600)}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--clay-300)}
.eyebrow--center::after{content:""; width:24px; height:1px; background:var(--clay-300)}
.section-head{max-width:780px}
.section-head--center{margin-inline:auto; text-align:center}
.section-head .h2{margin-top:22px}
.section-head .lede{margin-top:20px}
.section-head--center .lede{margin-inline:auto; max-width:660px}

/* ---------- 5. Buttons — all highlighted ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:13px;
  padding:18px 32px; border-radius:var(--r-full); border:1.5px solid transparent;
  font-size:15.5px; font-weight:600; letter-spacing:-.004em; line-height:1;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
             background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn::after{ /* hover sheen */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.30) 45%, transparent 70%);
  transform:translateX(-120%); transition:transform .75s var(--ease-out);
}
.btn:hover::after{transform:translateX(120%)}
.btn__price{display:inline-flex; align-items:center; gap:8px; font-size:14.5px}
.btn__price s{opacity:.62; font-weight:500}
.btn__price b{font-weight:700}
.btn__divider{width:1.5px; height:16px; background:currentColor; opacity:.28; border-radius:2px}
.btn__arrow{transition:transform .45s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn:focus-visible{outline:3px solid var(--clay-400); outline-offset:3px}

.btn--primary{background:var(--clay-500); color:#FFF8F4; box-shadow:0 12px 26px -10px rgba(169,72,42,.6), var(--ring-clay)}
.btn--primary:hover{background:var(--clay-600); transform:translateY(-3px); box-shadow:0 20px 38px -12px rgba(169,72,42,.66), var(--ring-clay-hi)}
.btn--primary:active{transform:translateY(-1px)}

.btn--secondary{background:#FFFFFF; color:var(--clay-700); border-color:var(--clay-200); box-shadow:var(--sh-sm), 0 0 0 4px rgba(194,90,60,.09)}
.btn--secondary:hover{background:var(--clay-50); border-color:var(--clay-300); transform:translateY(-3px); box-shadow:var(--sh-md), 0 0 0 6px rgba(194,90,60,.14)}

.btn--onDark{background:#FFFFFF; color:var(--clay-700); box-shadow:0 14px 30px -12px rgba(0,0,0,.45), var(--ring-white)}
.btn--onDark:hover{background:var(--clay-50); transform:translateY(-3px); box-shadow:0 22px 42px -14px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.3)}

.btn--glass{background:rgba(255,255,255,.16); color:#FFFFFF; border-color:rgba(255,255,255,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.btn--glass:hover{background:rgba(255,255,255,.28); border-color:#FFFFFF; transform:translateY(-3px); box-shadow:0 0 0 6px rgba(255,255,255,.16)}

.btn--sm{padding:13px 22px; font-size:14px; gap:10px}
.cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.cta-row--center{justify-content:center}
.cta-note{font-size:13.5px; color:var(--muted-2)}
.cta-block{margin-top:66px; display:flex; justify-content:center}

/* ---------- 6. Header — logo + button only, light ---------- */
header .container{ max-width: 1360px;}

.site-header{/*position:fixed;*/ position: absolute; inset:20px 0 auto 0; z-index:80; transition:inset .45s var(--ease)}
.site-header.is-stuck{inset:10px 0 auto 0}
.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0; border-radius:var(--r-full);
  /*background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line); box-shadow:0 10px 30px -18px rgba(70,40,25,.5);*/
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.header-bar img {
    background: #EBBC12;
    border-radius: 90px;
    padding: 10px;
    width: 70px;
}
.site-header.is-stuck .header-bar{background:rgba(255,255,255,.95); box-shadow:var(--sh-md); padding: 10px;}
.site-header.is-stuck .header-bar img {
    width: 55px;
}
.wordmark{display:inline-flex; align-items:center; gap:12px}
.wordmark__mark{width:34px; height:34px; flex:none; color:var(--clay-300)}
.wordmark img{height:42px; width:auto; display:block}
.wordmark__text{font-family:var(--font-display); font-size:24px; letter-spacing:-.012em; color:var(--ink)}
.wordmark__text span{color:var(--clay-600)}

/* ---------- 7. Hero — copy left, product right ---------- */
.hero{position:relative; overflow:hidden; background:var(--cream)}
.hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:0.8; filter:sepia(.45) saturate(1.15)}

.hero__veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(253,250,246,.42) 0%, rgba(253,250,246,.20) 36%, rgba(253,250,246,.04) 62%, rgba(253,250,246,0) 100%)}
.hero .container{position:relative; z-index:2; padding-top:172px; padding-bottom:96px; max-width: 1360px;}
.hero__grid{display:grid; grid-template-columns:0.9fr 1.10fr; gap:26px; align-items:center}

.hero__eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
.hero__eyebrow b{color:var(--clay-600); font-weight:700}
.hero__eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--clay-500)}
.hero .display{margin-top:22px; font-size:clamp(40px,3.9vw,60px); line-height:1.06; color:var(--ink)}
.hero .display em{font-style:normal; display:block; color:var(--clay-600)}
.hero__lede{margin-top:22px; max-width:520px; font-size:18px; line-height:1.66; color:var(--ink-3)}

.hero__chips{margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:520px}
.chip{display:flex; align-items:center; gap:9px; padding:12px 10px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease-out)}
.chip:hover{transform:translateY(-3px); border-color:var(--clay-200); box-shadow:var(--sh-md)}
.chip svg{flex:none; width:23px; height:23px; stroke:var(--clay-500); fill:none; stroke-width:1.4}
.chip span{font-size:12.5px; line-height:1.34; font-weight:600; color:var(--ink); letter-spacing:-.005em}

.hero__buy{margin-top:20px; display:flex; align-items:stretch; gap:16px; flex-wrap:wrap}
.pricebox{display:flex; flex-direction:column; justify-content:center; padding:8px 17px; border-radius:var(--r-md);
  background:#fff; border:1.5px solid var(--clay-200); box-shadow:var(--sh-sm); text-align:center}
.pricebox__row{display:flex; align-items:baseline; gap:9px; justify-content:center}
.pricebox s{font-size:18px; color:var(--muted-2)}
.pricebox b{font-family:var(--font-display); font-size:40px; line-height:1; color:var(--clay-600); font-weight:400}
.hero_buy_inner em{margin-top:3px; font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted); position: absolute;}



.hero__note {
    margin-top: 38px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
}
.hero__note svg {
    width: 19px;
    height: 19px;
    flex: none;
}
/* Product composition — report cover on a geometric backdrop */
.hero__product{position:relative; width:100%; display:grid; place-items:center}
.pv{position:relative; width:100%; max-width:inherit; display:grid; place-items:center}
.pv__halo{position:absolute; inset:-8% -6%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 48%, rgba(242,196,177,.6) 0%, rgba(242,196,177,.2) 44%, rgba(242,196,177,0) 70%)}
.pv__rings{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C25A3C%22%20stroke-opacity%3D%220.30%22%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22280%22%20r%3D%22120%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22280%22%20r%3D%22176%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22280%22%20r%3D%22232%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22280%22%20r%3D%22272%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C25A3C%22%20stroke-opacity%3D%220.42%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M280%2012v20M280%20528v20M12%20280h20M528%20280h20%22%2F%3E%3Cpath%20d%3D%22M92%2092l14%2014M454%20454l14%2014M468%2092l-14%2014M106%20454l-14%2014%22%2F%3E%3C%2Fg%3E%3Cg%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20fill%3D%22%23C25A3C%22%20fill-opacity%3D%220.42%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3E%3Ctext%20x%3D%22280%22%20y%3D%2242%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22443%22%20y%3D%22117%22%3E2%3C%2Ftext%3E%3Ctext%20x%3D%22518%22%20y%3D%22280%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22443%22%20y%3D%22443%22%3E4%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22518%22%3E5%3C%2Ftext%3E%3Ctext%20x%3D%22117%22%20y%3D%22443%22%3E6%3C%2Ftext%3E%3Ctext%20x%3D%2242%22%20y%3D%22280%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22117%22%20y%3D%22117%22%3E8%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:contain; opacity:.5;
  animation:pvspin 130s linear infinite}
@keyframes pvspin{to{transform:rotate(360deg)}}
.pv__blob{position:absolute; z-index:0; width:min(340px,66%); aspect-ratio:1; height:auto; border-radius:48% 52% 44% 56%/54% 46% 58% 42%;
  background:linear-gradient(150deg, rgba(214,123,89,.28), rgba(194,90,60,.12));
  filter:blur(4px); left:46%; top:48%; transform:translate(-50%,-50%)}

.pv__img{position:relative; z-index:3; width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 46px rgba(70,40,25,.28)) drop-shadow(0 6px 14px rgba(70,40,25,.14));
  transition:transform .8s var(--ease-out)}
.pv:hover .pv__img{transform:translateY(-8px)}

/* ---------- 8. Stats band (the "15,000+" section) ---------- */
.stats{position:relative; overflow:hidden; background:var(--brown-800)}
.stats__media{position:absolute; inset:0; z-index:0}
.stats__media img{width:100%; height:100%; object-fit:cover}
.stats__scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(44,25,17,.94) 0%, rgba(64,38,26,.86) 45%, rgba(139,56,32,.76) 100%)}
.stats .container{position:relative; z-index:2; padding-block:58px}
.stats__head{text-align:center; max-width:640px; margin-inline:auto}
.stats__head .eyebrow{color:var(--clay-200)}
.stats__head .eyebrow::before,.stats__head .eyebrow--center::after{background:rgba(242,196,177,.5)}
.stats__title{margin-top:14px; font-family:var(--font-display); font-size:clamp(27px,2.5vw,36px); line-height:1.14; letter-spacing:-.018em; color:#fff}
.stats__title em{font-style:italic; color:var(--clay-300)}
.stats__grid{margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr)}
.stat{position:relative; padding:4px 26px; text-align:center}
.stat + .stat::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:linear-gradient(180deg, rgba(242,196,177,0), rgba(242,196,177,.42), rgba(242,196,177,0))}
.stat__ico{width:44px; height:44px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(242,196,177,.14); border:1px solid rgba(242,196,177,.3)}
.stat__ico svg{width:20px; height:20px; stroke:var(--clay-200); fill:none; stroke-width:1.5}
.stat__k{margin-top:14px; font-family:var(--font-display); font-size:clamp(38px,3.6vw,52px); line-height:1; letter-spacing:-.025em; color:#fff}
.stat__k span{color:var(--clay-300)}
.stat__v{margin-top:7px; font-size:14px; letter-spacing:.03em; color:rgba(250,223,212,.82)}
.stat__d{margin-top:4px; font-size:12.5px; color:rgba(250,223,212,.52)}
.stats__cta{margin-top:38px; display:flex; justify-content:center}

/* ---------- 9. "What you'll uncover" cards ---------- */
.uncover__top{display:grid; grid-template-columns:1fr 520px; gap:64px; align-items:center}
.uncover__video{
  position:relative; aspect-ratio:9/10; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); background:#000; box-shadow:var(--sh-lg);
}
.uncover__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.uncover__grid{margin-top:76px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ucard{
  position:relative; padding:38px 32px 36px; border-radius:var(--r-lg); overflow:hidden;
  background:#FFFFFF; border:1px solid var(--line);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease);
}
.ucard::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--clay-500); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out)}
.ucard:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--clay-200)}
.ucard:hover::before{transform:scaleX(1)}
.ucard__n{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--clay-50); border:1px solid var(--clay-100);
  font-family:var(--font-display); font-size:21px; color:var(--clay-600);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.ucard:hover .ucard__n{background:var(--clay-500); border-color:var(--clay-500); color:#fff}
.ucard__t{margin-top:24px; font-size:19px; font-weight:600; letter-spacing:-.014em; color:var(--ink)}
.ucard__d{margin-top:11px; font-size:15.5px; line-height:1.66; color:var(--muted)}

/* ---------- 10. Discover — outlined-numeral grid ---------- */
.disc__top{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start}
.disc__aside{padding-top:10px}
.disc__aside p{font-size:17px; line-height:1.68; color:var(--muted)}
.disc__aside .cta-row{margin-top:26px}

.disc__grid{margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.dcell{position:relative; padding:20px 40px 26px; text-align:center;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .5s var(--ease)}
.dcell:hover{background:var(--clay-50)}
.dcell__n{
 font-family: 'Cal Sans'; font-size:104px; font-weight:400; line-height:1;
  letter-spacing:.02em; color:transparent;
  
  transition:-webkit-text-stroke-color .5s var(--ease), transform .6s var(--ease-out);

      -webkit-text-stroke: 1px var(--clay-600);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
    position: relative; top: 21px;
}
/* Never let the numerals vanish where text-stroke is unsupported */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)){
  .dcell__n{color:var(--clay-100)}
}
.dcell:hover .dcell__n{-webkit-text-stroke-color:rgba(194,90,60,.52); transform:translateY(-4px)}
.dcell__t{margin-top:10px; font-size:19px; font-weight:700; letter-spacing:-.014em; color:var(--ink); line-height:1.3}
.dcell__d{margin-top:12px; font-size:15px; line-height:1.66; color:var(--muted); max-width:290px; margin-inline:auto}
.dcell--cta{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:#fff}
.dcell--cta:hover{background:#fff}
.dcell--cta .btn{white-space:nowrap}
.dcell__note{font-size:14px; line-height:1.6; color:var(--muted); max-width:250px}

/* ---------- 11. Process ---------- */
.steps{margin-top:78px; position:relative; display:grid; grid-template-columns:repeat(4,1fr)}
.steps__rail{position:absolute; top:35px; left:9%; right:9%; height:2px; background:var(--linen); border-radius:2px}
.steps__rail i{display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, var(--clay-400), var(--clay-600)); transform:scaleX(0); transform-origin:left; transition:transform 1.9s var(--ease-out)}
.steps.is-visible .steps__rail i{transform:scaleX(1)}
.step{position:relative; padding:0 28px}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0}
.step__dot{position:relative; z-index:2; width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1.5px solid var(--line); box-shadow:var(--sh-sm); transition:transform .5s var(--ease-out), border-color .5s var(--ease), box-shadow .5s var(--ease-out)}
.step:hover .step__dot{transform:translateY(-5px); border-color:var(--clay-300); box-shadow:var(--sh-md)}
.step__dot svg{width:26px; height:26px; stroke:var(--clay-600); fill:none; stroke-width:1.5}
.step__n{margin-top:26px; font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--clay-500)}
.step__t{margin-top:9px; font-size:20px; font-weight:600; letter-spacing:-.014em; color:var(--ink)}
.step__d{margin-top:11px; font-size:15.5px; line-height:1.66; color:var(--muted); max-width:255px}

/* ---------- 12. Included rows (with photography) ---------- */
.incl{margin-top:80px; display:flex; flex-direction:column; gap:26px}
.incl__row{display:grid; grid-template-columns:1.02fr .98fr; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; transition:box-shadow .55s var(--ease-out), border-color .55s var(--ease); position: sticky;top: 10px;}
.incl__row:hover{box-shadow:var(--sh-md); border-color:var(--clay-200)}
.incl__row:nth-child(even) .incl__body{order:2} 
.incl__body{padding:30px 40px;}
.incl__idx{display:flex; align-items:center; gap:14px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}
.incl__idx b{font-family:var(--font-display); font-size:21px; letter-spacing:0; color:var(--clay-600); font-weight:400}
.incl__t{margin-top:20px; font-family:var(--font-display); font-size:33px; line-height:1.14; letter-spacing:-.018em; color:var(--ink)}
.incl__d{margin-top:14px; font-size:16px; line-height:1.7; color:var(--muted); max-width:450px; display: none;}
.incl__list{margin-top:26px; display:flex; flex-direction:column; gap:14px}
.incl__list li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.incl__list li b{font-weight:600; color:var(--ink)}
.check{flex:none; width:23px; height:23px; border-radius:50%; margin-top:2px; display:grid; place-items:center; background:var(--clay-50); border:1px solid var(--clay-200); transition:background-color .35s var(--ease)}
.check svg{width:11px; height:11px; stroke:var(--clay-600); stroke-width:2.5; fill:none}
.incl__row:hover .check{background:var(--clay-100)}
.incl__art{position:relative; overflow:hidden; min-height:400px}
.incl__art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.18) saturate(1.08); transition:transform 1.1s var(--ease-out)}
.incl__row:hover .incl__art img{transform:scale(1.05)}
.incl__art::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(194,90,60,.20), rgba(44,25,17,.30))}
.incl__chip{
  position:absolute; z-index:2; left:26px; bottom:26px; display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:var(--r-full); background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; font-weight:500; color:var(--ink); box-shadow:var(--sh-sm);
}
.incl__chip i{width:7px; height:7px; border-radius:50%; background:var(--clay-500); flex:none}

/* ---------- 13. CTA band (photo background) ---------- */
.ctaband{position:relative; overflow:hidden; background-color:var(--brown-800);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F2C4B1%22%20stroke-opacity%3D%220.15%22%20stroke-width%3D%221%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2252%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2230%22%2F%3E%3Cpath%20d%3D%22M70%204v14M70%20122v14M4%2070h14M122%2070h14%22%2F%3E%3Cpath%20d%3D%22M0%20.5h140M.5%200v140%22%20stroke-opacity%3D%220.07%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F2C4B1%22%20fill-opacity%3D%220.22%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%22140%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(115deg, var(--brown-900) 0%, var(--brown-800) 48%, #6B3A22 100%);
  background-repeat:repeat, no-repeat; background-size:140px 140px, cover}
.ctaband__media{position:absolute; inset:0; z-index:0; opacity:.30}
.ctaband__media img{width:100%; height:100%; object-fit:cover}
.ctaband__scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(44,25,17,.55) 0%, rgba(44,25,17,.8) 55%, rgba(44,25,17,0.8) 100%)}
.ctaband .container{position:relative; z-index:2; padding-block:88px}
.ctaband__inner{display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap}
.ctaband__t{font-family:var(--font-display); font-size:clamp(30px,3.2vw,44px); line-height:1.12; letter-spacing:-.018em; color:#fff; max-width:610px; text-wrap:balance}
.ctaband__t em{font-style:italic; color:var(--clay-300)}
.ctaband__d{margin-top:15px; font-size:16.5px; line-height:1.66; color:rgba(250,223,212,.82); max-width:500px}
.ctaband__right{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
.ctaband__note{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(250,223,212,.78)}
.ctaband__note svg{width:15px; height:15px; stroke:var(--clay-300); fill:none; stroke-width:1.6}

/* ---------- 14. Offer panel — dark, matching the FAQ aside ---------- */
.offer{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.06fr .92fr;
  border-radius:var(--r-xl);
  background:linear-gradient(158deg, #4A2B1B 0%, var(--brown-900) 52%, #1F1009 100%);
  box-shadow:0 34px 66px -30px rgba(44,25,17,.62);
}
.offer::before,.offer::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.offer::before{width:420px; height:420px; right:-150px; top:-190px; background:radial-gradient(circle, rgba(242,196,177,.16), rgba(242,196,177,0) 70%)}
.offer::after{width:300px; height:300px; right:-70px; top:-80px; border:1px solid rgba(242,196,177,.12)}
.offer__col{position:relative; z-index:1; padding:46px 42px}
.offer__col + .offer__col{border-left:1px solid rgba(242,196,177,.18)}

.offer__tag{font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--clay-300)}
.offer__price{margin-top:22px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.offer__price s{font-family:var(--font-display); font-size:33px; color:rgba(250,223,212,.55)}
.offer__price b{font-family:var(--font-display); font-size:64px; line-height:.95; color:#fff; font-weight:400; letter-spacing:-.025em}
.offer__only{font-family:var(--font-display); font-size:25px; color:rgba(250,223,212,.78)}
.offer__badge{margin-top:24px; display:inline-grid; place-items:center; width:82px; height:82px; border-radius:50%;
  background:var(--clay-500); color:#fff; font-size:14px; font-weight:700; line-height:1.15; text-align:center;
  box-shadow:0 14px 28px -12px rgba(194,90,60,.7)}

.offer__h{font-size:15.5px; font-weight:700; color:#fff}
.offer__list{margin-top:20px; display:flex; flex-direction:column; gap:13px}
.offer__list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:rgba(250,223,212,.9)}
.offer__list svg{flex:none; width:17px; height:17px; margin-top:3px; stroke:var(--clay-400); fill:none; stroke-width:2.4}

.offer__col--cta{display:flex; flex-direction:column; justify-content:center; gap:17px; background:rgba(242,196,177,.06)}
.offer__sub{font-size:13.5px; line-height:1.6; color:rgba(250,223,212,.72)}
.offer__secure{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:rgba(250,223,212,.82)}
.offer__secure svg{width:15px; height:15px; stroke:var(--clay-400); fill:none; stroke-width:1.7}
section#stories {
    padding-top: 0;
}
/* ---------- 15. Benefit cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:72px}
.card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 34px 38px; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--clay-200)}
.card__icon{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--clay-50); border:1px solid var(--clay-100); transition:background-color .5s var(--ease), transform .5s var(--ease-out)}
.card:hover .card__icon{background:var(--clay-500); transform:scale(1.06)}
.card__icon svg{width:23px; height:23px; stroke:var(--clay-600); fill:none; stroke-width:1.5; transition:stroke .5s var(--ease)}
.card:hover .card__icon svg{stroke:#fff}
.card__t{margin-top:26px; font-size:19.5px; font-weight:600; letter-spacing:-.014em; color:var(--ink)}
.card__d{margin-top:11px; font-size:15.5px; line-height:1.68; color:var(--muted)}

/* ---------- 16. Key details ---------- */
.keys{margin-top:72px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden}
.key{background:#fff; padding:42px 36px; transition:background-color .45s var(--ease)}
.key:hover{background:var(--clay-50)}
.key__icon{width:40px; height:40px; display:grid; place-items:center}
.key__icon svg{width:25px; height:25px; stroke:var(--clay-600); fill:none; stroke-width:1.45}
.key__t{margin-top:22px; font-size:18px; font-weight:600; letter-spacing:-.012em; color:var(--ink)}
.key__d{margin-top:10px; font-size:15px; line-height:1.66; color:var(--muted)}
.key__d b{font-weight:600; color:var(--ink-2)}
.key__d s{color:var(--muted-2)}
.key--fill{background:var(--linen)}
.key--fill:hover{background:var(--linen)}
.key__cta{margin-top:22px}

/* ---------- 17. Testimonials — faded-edge marquee ---------- */
.pill{display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  font-size:13.5px; font-weight:600; color:var(--ink-2)}
.pill svg{width:16px; height:16px; stroke:var(--clay-600); fill:none; stroke-width:1.7}

/* Full-bleed rail so cards run off both edges */
.mq{position:relative; margin-top:64px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.mq__track{display:flex; width:max-content; padding-block:14px; animation:mqscroll 52s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes mqscroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.tcard{
  flex:none; width:372px; margin-right:26px; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 30px 26px;
  box-shadow:0 1px 2px rgba(70,40,25,.04);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease);
}
.tcard:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--clay-200)}
.tcard .stars{display:flex; gap:4px}
.tcard .stars svg{width:14px; height:14px; fill:var(--clay-500)}
.tcard__q{margin-top:18px; font-size:16px; line-height:1.72; color:var(--ink-2); flex:1}
.tcard__by{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:14px}
.tcard__who{flex:1; min-width:0}
.tcard__name{display:block; font-size:15.5px; font-weight:600; color:var(--ink)}
.tcard__city{display:block; font-size:13.5px; color:var(--muted-2); margin-top:2px}
.avatar{width:48px; height:48px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--linen); border:1.5px solid var(--clay-100)}
.avatar img{width:100%; height:100%; object-fit:cover; object-position:center top}

@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none}
  .mq{overflow-x:auto}
}

/* ---------- 18. FAQ — dark aside + numbered accordion ---------- */
.faqx{display:grid; grid-template-columns:370px 1fr; gap:34px; align-items:start}

/* Left panel */
.faqx__aside{
  position:sticky; top:104px; overflow:hidden;
  padding:40px 36px 36px; border-radius:26px;
  background:linear-gradient(158deg, #4A2B1B 0%, var(--brown-900) 52%, #1F1009 100%);
  box-shadow:0 34px 66px -30px rgba(44,25,17,.62);
}
.faqx__aside::before,.faqx__aside::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.faqx__aside::before{width:340px; height:340px; right:-130px; top:-140px; background:radial-gradient(circle, rgba(242,196,177,.16), rgba(242,196,177,0) 70%)}
.faqx__aside::after{width:260px; height:260px; right:-60px; top:-40px; border:1px solid rgba(242,196,177,.12)}
.faqx__inner{position:relative; z-index:1}
.faqx__badge{width:66px; height:66px; border-radius:20px; display:grid; place-items:center;
  background:rgba(242,196,177,.13); border:1px solid rgba(242,196,177,.22)}
.faqx__badge svg{width:28px; height:28px; stroke:var(--clay-300); fill:none; stroke-width:1.5}
.faqx__title{margin-top:28px; font-family:var(--font-display); font-size:44px; line-height:1.06; letter-spacing:-.018em; color:#fff}
.faqx__sub{margin-top:16px; font-size:16px; line-height:1.62; color:rgba(250,223,212,.76)}
.faqx__rule{margin-top:22px; width:74px; height:3px; border-radius:3px; background:var(--clay-500)}
.faqx__div{margin-top:32px; height:1px; background:rgba(242,196,177,.18)}
.faqx__list{margin-top:28px; display:flex; flex-direction:column; gap:16px}
.faqx__list li{display:flex; align-items:center; gap:13px; font-size:15px; color:rgba(250,223,212,.9)}
.faqx__list svg{flex:none; width:20px; height:20px; stroke:var(--clay-400); fill:none; stroke-width:1.7}
.faqx__cta{margin-top:34px}
.faqx__cta .btn{width:100%; justify-content:center; padding-inline:18px; gap:11px; white-space:nowrap}

/* Right accordion */
.acc{display:flex; flex-direction:column; gap:14px}
.acc__item{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(70,40,25,.04);
  transition:box-shadow .45s var(--ease-out), border-color .45s var(--ease);
}
.acc__item:hover{border-color:var(--clay-200)}
.acc__item.is-open{border-color:var(--clay-300); box-shadow:0 18px 40px -22px rgba(70,40,25,.34)}
.acc__head{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:20px; padding:22px 26px;
}
.acc__n{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--sand); color:var(--muted); font-size:14.5px; font-weight:700;
  transition:background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}
.acc__item.is-open .acc__n{background:var(--clay-500); color:#fff; transform:scale(1.06)}
.acc__q{flex:1; font-size:18px; font-weight:600; letter-spacing:-.014em; color:var(--ink); line-height:1.4}
.acc__item.is-open .acc__q{color:var(--clay-700)}
.acc__chev{flex:none; width:20px; height:20px; stroke:var(--muted-2); fill:none; stroke-width:2;
  transition:transform .45s var(--ease-out), stroke .4s var(--ease)}
.acc__item.is-open .acc__chev{transform:rotate(180deg); stroke:var(--clay-600)}
.acc__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out)}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body > div{overflow:hidden}
.acc__body p{padding:0 26px 24px 78px; font-size:16px; line-height:1.72; color:var(--muted)}
.acc__body p b{font-weight:600; color:var(--ink-2)}

/* ---------- 19. Final CTA ---------- */
.final{position:relative; overflow:hidden; background-color:var(--brown-900);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22900%22%20viewBox%3D%220%200%20900%20900%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E5A184%22%20stroke-opacity%3D%220.20%22%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22450%22%20r%3D%22110%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22450%22%20r%3D%22185%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22450%22%20r%3D%22260%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22450%22%20r%3D%22335%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22450%22%20r%3D%22410%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23E5A184%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M450%2022v26M450%20852v26M22%20450h26M852%20450h26%22%2F%3E%3Cpath%20d%3D%22M147%20147l18%2018M735%20735l18%2018M753%20147l-18%2018M165%20735l-18%2018%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23E5A184%22%20fill-opacity%3D%220.30%22%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%2240%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22860%22%20cy%3D%22450%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22860%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22450%22%20r%3D%223.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.15%22%20fill%3D%22%23F2C4B1%22%20fill-opacity%3D%220.14%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at 50% 44%, #4A2B1B 0%, var(--brown-900) 58%, #241209 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-position:center 44%, 0 0, center;
  background-size:900px 900px, 30px 30px, cover}
.final__media{position:absolute; inset:0; z-index:0; opacity:.42}
.final__media img{width:100%; height:100%; object-fit:cover}
.final__scrim{position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 50% 45%, rgba(44,25,17,0) 30%, rgba(44,25,17,.55) 78%, rgba(30,16,10,.8) 100%)}
.final .container{position:relative; z-index:2; padding-block:var(--section-y)}
.final__inner{text-align:center; max-width:790px; margin-inline:auto}
.final .eyebrow{color:var(--clay-300)}
.final .eyebrow::before,.final .eyebrow--center::after{background:rgba(229,161,132,.55)}
.final .h2{margin-top:24px; color:#fff}
.final .h2 em{color:var(--clay-300)}
.final__lede{margin-top:22px; font-size:19px; line-height:1.66; color:rgba(250,223,212,.85)}
.final__price{margin-top:40px; display:inline-flex; align-items:baseline; gap:15px}
.final__price s{font-family:var(--font-display); font-size:30px; color:rgba(242,196,177,.6)}
.final__price b{font-family:var(--font-display); font-size:60px; line-height:1; color:#fff; font-weight:400; letter-spacing:-.022em}
.final__save{align-self:center; padding:6px 14px; border-radius:var(--r-full); background:var(--clay-500); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.final__cta{margin-top:36px}
.final__marks{margin-top:48px; padding-top:32px; border-top:1px solid rgba(242,196,177,.24); display:flex; justify-content:center; gap:32px; flex-wrap:wrap}
.mark{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:rgba(250,223,212,.88)}
.mark svg{width:16px; height:16px; stroke:var(--clay-300); fill:none; stroke-width:1.6}

/* ---------- 20. Footer ---------- */
.footer-top img {
    background: #ebbc12;
    width: 200px;
    border-radius: 7px;
    padding: 7px;
}
.site-footer{background:#f8f0e7; border-top:1px solid var(--line); padding-block:70px 0}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr; gap:60px; padding-bottom:54px}
.footer-about{max-width:430px; margin-top:20px; font-size:15px; line-height:1.7; color:var(--muted)}
.site-footer .wordmark__text{color:var(--ink)}
.site-footer .wordmark__text span{color:var(--clay-600)}
.footer-links{display:flex; gap:72px; justify-content:flex-end}
.footer-col h5{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2)}
.footer-col ul{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.footer-col a{font-size:15px; color:var(--ink-3); transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--clay-600)}
.footer-bottom{border-top:1px solid var(--line); padding-block:26px; display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted-2)}

/* ---------- 21. Sticky offer bar ---------- */
.offerbar{position:fixed; left:0; right:0; bottom:0; z-index:70; transform:translateY(105%); transition:transform .6s var(--ease-out); background:rgba(253,250,246,.92); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); border-top:1.5px solid var(--clay-100); box-shadow:0 -16px 44px -24px rgba(70,40,25,.4)}
.offerbar.is-shown{transform:translateY(0)}
.offerbar__inner{display:flex; align-items:center; justify-content:space-between; gap:26px; padding-block:15px}
.offerbar__left{display:flex; align-items:center; gap:16px}
.offerbar__pulse{width:8px; height:8px; border-radius:50%; background:var(--clay-500); flex:none; box-shadow:0 0 0 0 rgba(194,90,60,.6); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(194,90,60,0)}100%{box-shadow:0 0 0 0 rgba(194,90,60,0)}}
.offerbar__txt{display:block; font-size:15.5px; font-weight:600; color:var(--ink)}
.offerbar__sub{display:block; font-size:13px; color:var(--muted-2)}

/* ---------- 22. Modal + form ---------- */
.nm-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:28px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s}
.nm-modal.is-open{opacity:1; visibility:visible}
.nm-modal__backdrop{position:absolute; inset:0; background:rgba(44,25,17,.52); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.nm-modal__dialog{position:relative; width:100%; max-width:570px; max-height:calc(100vh - 56px); display:flex; flex-direction:column; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-lg); overflow:hidden; transform:translateY(16px) scale(.985); opacity:0; transition:transform .5s var(--ease-out), opacity .5s var(--ease-out)}
.nm-modal.is-open .nm-modal__dialog{transform:none; opacity:1}
.nm-modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:32px 36px 24px; border-bottom:1px solid var(--line)}
.nm-modal__title{font-family:var(--font-display); font-size:27px; line-height:1.2; letter-spacing:-.016em; color:var(--ink)}
.nm-modal__sub{margin-top:6px; font-size:13.5px; color:var(--muted)}
.nm-modal__close{flex:none; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:#fff; display:grid; place-items:center; padding:0; transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease-out)}
.nm-modal__close:hover{background:var(--clay-50); border-color:var(--clay-200); transform:rotate(90deg)}
.nm-modal__close svg{width:15px; height:15px; stroke:var(--ink-2); stroke-width:2; fill:none}
.nm-modal__body{padding:28px 36px 34px; overflow-y:auto}
.form-label{display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin-bottom:8px}
.form-control,.form-select{width:100%; padding:14px 16px; font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-sm); transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); appearance:none; -webkit-appearance:none}
.form-control::placeholder{color:var(--muted-2)}
.form-control:focus,.form-select:focus{outline:0; background:#fff; border-color:var(--clay-400); box-shadow:0 0 0 4px rgba(194,90,60,.14)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237E6555' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:11px; padding-right:38px}
.row{display:flex; flex-wrap:wrap; margin-inline:-8px}
.row > [class*="col-"]{padding-inline:8px}
.col-md-6{flex:0 0 50%; max-width:50%}
.mb-3{margin-bottom:18px} .mb-4{margin-bottom:24px} .mt-2{margin-top:10px} .mb-0{margin-bottom:0}
.d-flex{display:flex} .gap-2{gap:8px} .gap-3{gap:12px}
.justify-content-between{justify-content:space-between} .justify-content-end{justify-content:flex-end}
.align-items-center{align-items:center} .text-start{text-align:left}
.position-absolute{position:absolute} .position-relative{position:relative} .w-100{width:100%}
.text-danger{display:block; margin-top:6px; font-size:12.5px; color:#C0342B}
.form-check{display:flex; align-items:center; gap:9px}
.form-check-input{width:18px; height:18px; margin:0; flex:none; appearance:none; -webkit-appearance:none; border:1.5px solid var(--shell); border-radius:5px; background:#fff; transition:background-color .25s var(--ease), border-color .25s var(--ease)}
.form-check-input:checked{background:var(--clay-500); border-color:var(--clay-500); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 4.8 8.6 9.5 3.6'/%3E%3C/svg%3E"); background-size:11px; background-repeat:no-repeat; background-position:center}
.form-check-label{font-size:13.5px; color:var(--muted); cursor:pointer}
.input-group{display:flex}
.input-group .form-control{border-top-right-radius:0; border-bottom-right-radius:0}
.btn-outline-secondary{flex:none; padding:0 15px; background:var(--cream); border:1.5px solid var(--line); border-left:0; border-radius:0 var(--r-sm) var(--r-sm) 0; display:grid; place-items:center; transition:background-color .3s var(--ease)}
.btn-outline-secondary:hover{background:var(--clay-50)}
.btn-outline-secondary svg{width:18px; height:18px; stroke:var(--ink-3); fill:none; stroke-width:1.7}
.list-group{margin-top:6px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-md); max-height:210px; overflow-y:auto; padding:6px}
.list-group li{padding:10px 12px; font-size:14.5px; color:var(--ink-2); border-radius:8px; cursor:pointer}
.list-group li:hover{background:var(--clay-50)}
.img-src-wrp-logo{padding-top:20px; border-top:1px solid var(--line)}
.razorpay-logo{height:23px; width:auto; opacity:.8}
.price-box{display:flex; align-items:baseline; gap:11px; padding:17px 19px; border-radius:var(--r-sm); background:var(--clay-50); border:1.5px solid var(--clay-100); font-family:var(--font-display); font-size:27px; color:var(--clay-700)}
.price-box s{font-size:18px; color:var(--muted-2)}
.price-box em{margin-left:auto; font-style:normal; font-family:var(--font-sans); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--clay-600)}
.btn-submit{padding:15px 32px; border:1.5px solid transparent; border-radius:var(--r-full); background:var(--clay-500); color:#fff; font-size:15.5px; font-weight:600; box-shadow:0 12px 26px -10px rgba(169,72,42,.6), var(--ring-clay); transition:background-color .3s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease-out)}
.btn-submit:hover{background:var(--clay-600); transform:translateY(-3px); box-shadow:0 20px 38px -12px rgba(169,72,42,.66), var(--ring-clay-hi)}
.btn.PopupBtnClose{padding:15px 26px; border:1.5px solid var(--line); border-radius:var(--r-full); background:#fff; color:var(--ink-3); font-size:15px; font-weight:500; box-shadow:var(--sh-sm)}
.btn.PopupBtnClose:hover{background:var(--cream); border-color:var(--shell)}
.modal-note{margin-top:20px; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted-2)}
.modal-note svg{width:15px; height:15px; stroke:var(--clay-600); fill:none; stroke-width:1.6; flex:none}
body.nm-lock{overflow:hidden}

/* ---------- 23. Reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d,0ms)}
[data-reveal].is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
}

/* ==========================================================
   24. Responsive — laptop → tablet → mobile
   ========================================================== */

/* ---- Laptop (≤1340px) ---- */
@media (max-width:1340px){
  .container{--gutter:22px}
}

/* ---- Small laptop (≤1180px) ---- */
@media (max-width:1180px){
  :root{--section-y:104px; --gutter:24px}
  .display{font-size:clamp(38px,4.6vw,52px)}
  .hero__grid{gap:36px}
  .hero__product{max-width:520px; margin-inline:auto}   /* image follows the copy */
  .hero .container{padding-top:150px; padding-bottom:76px}
  .hero__lede{max-width:none}
  .uncover__top{grid-template-columns:1fr 320px; gap:40px}
  .uncover__grid,.grid-3,.keys,.disc__grid{grid-template-columns:repeat(2,1fr)}
  .faqx{grid-template-columns:1fr; gap:28px}
  /* relative, NOT static: the aside must remain the containing block for its
     own ::before/::after. As static, right:-130px resolves against the
     viewport, escaping overflow:hidden and widening the page by 130px. */
  .faqx__aside{position:relative; top:auto}
  .disc__top{grid-template-columns:1fr; gap:28px}
  .incl__row,.incl__row:nth-child(even) .incl__body{grid-template-columns:1fr; order:0}
  .incl__art{min-height:300px}
  .steps{grid-template-columns:repeat(2,1fr); gap:48px 0}
  .steps__rail{display:none}
  .stats__grid{grid-template-columns:repeat(2,1fr); row-gap:34px}
  .offer{grid-template-columns:1fr 1fr}
  .offer__col--cta{grid-column:span 2; border-left:0; border-top:1px solid rgba(242,196,177,.18)}
  .preview__grid{grid-template-columns:1fr; gap:48px}
  .footer-top{grid-template-columns:1fr; gap:44px}
  .footer-links{justify-content:flex-start; gap:56px}
}

/* ---- Tablet (≤900px) ---- */
/* ---- Slick sliders on iPad + phones (>1024px keeps every desktop layout) ----
   Only "What's Included" and "Key Details" slide. Process and Benefits are
   plain 2-up grids. slick supplies the track mechanics; dots are styled here
   rather than loading slick-theme.css (which drags in an icon font). */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr; gap:20px}
  /* Process: a plain 2-up grid, not a slider */
  .steps{display:grid !important; grid-template-columns:repeat(2,1fr); gap:30px 18px;
    overflow:visible; margin-inline:0; padding:0}
  .steps__rail{display:none}
  .steps > .step{padding:0}
  .step__dot{width:54px; height:54px}
  .step__dot svg{width:21px; height:21px}
  .step__n{margin-top:16px; font-size:10px}
  .step__t{margin-top:6px; font-size:16.5px; line-height:1.3}
  .step__d{margin-top:8px; font-size:14px; line-height:1.55; max-width:none}

  /* Benefits: a plain 2-up grid, not a slider */
  .grid-3{display:grid !important; grid-template-columns:repeat(2,1fr); gap:16px;
    overflow:visible; margin-inline:0; padding:0}

  /* ---- slick containers ---- */
  .incl,.keys{display:block; margin-top:52px}
  .keys{background:none; border:0; border-radius:0; overflow:visible; gap:0}
  /* bleed the rail to the screen edges so a card edge hints at the next slide */
  .incl .slick-list,.keys .slick-list{
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); overflow:hidden}
  .incl .slick-track,.keys .slick-track{display:flex; align-items:stretch}
  .incl .slick-slide,.keys .slick-slide{height:auto !important; margin-inline:8px}
  /* slick turns each CARD into the slide, so `> *` here would target the
     card's own children — stretching icons to full height. Equal heights
     come from the flex track instead. */
  /* slick sets its own widths, so slides must not also be flex items */
  .incl__row,.keys > .key{scroll-snap-align:none}
  .incl__row{position:static; top:auto}   /* cancel the desktop sticky stack */
  .incl__row:hover,.keys .key:hover{box-shadow:var(--sh-sm); transform:none}

  /* key-details cells become real cards once out of the hairline grid */
  .keys .key{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:30px 26px; box-shadow:var(--sh-sm)}
  .keys .key--fill{background:var(--linen)}

  /* keep a whole card within the screen */
  .incl__body{padding:26px 24px}
  .incl__art{min-height:165px}
  .incl__t{font-size:23px; margin-top:14px}
  .incl__list{margin-top:18px; gap:10px}
  .incl__list li{font-size:14.5px; line-height:1.55}

  /* ---- dots ---- */
  .slick-dots{display:flex !important; justify-content:center; align-items:center;
    gap:8px; list-style:none; margin:18px 0 0; padding:0}
  .slick-dots li{width:auto; height:auto; margin:0}
  .slick-dots li button{
    width:8px; height:8px; padding:0; border:0; border-radius:99px;
    background:var(--shell); color:transparent; font-size:0; line-height:0; cursor:pointer;
    transition:width .35s var(--ease-out), background-color .35s var(--ease)}
  .slick-dots li button::before{display:none}
  .slick-dots li.slick-active button{width:22px; background:var(--clay-500)}
}

@media (max-width:900px){
  :root{--section-y:84px; --gutter:22px}
  body{font-size:16px}
  .h2{font-size:clamp(29px,4.6vw,38px)}
  .lede{font-size:17px}

  /* Header: keep the price out of the button so it never wraps */
  .site-header{inset:12px 0 auto 0}
  .header-bar{padding:0}
  .wordmark__mark{width:28px; height:28px}
  .wordmark__text{font-size:20px}
  .header-bar .btn__divider,.header-bar .btn__price{display:none}

  /* Hero */
  .hero .container{padding-top:120px; padding-bottom:60px}
  .hero__product{max-width:440px}
  .display{font-size:clamp(34px,6vw,44px)}
  .hero__chips{grid-template-columns:repeat(3,1fr); gap:8px; max-width:none}
  .chip{flex-direction:column; align-items:flex-start; gap:8px; padding:12px 11px}
  .hero__buy{gap:12px}
  .pricebox{padding:11px 18px}
  .pricebox b{font-size:29px}

  .uncover__top{grid-template-columns:1fr; gap:34px}
  .uncover__video{max-width:330px; margin-inline:auto}
  .uncover__grid{gap:16px; margin-top:48px}
  .disc__grid{grid-template-columns:repeat(2,1fr)}
  .dcell{padding:36px 26px}
  .dcell__n{font-size:78px}
  .steps{grid-template-columns:repeat(2,1fr); gap:40px 24px}
  .step{padding:0}
  .ctaband__inner{flex-direction:column; align-items:flex-start; gap:26px}
  .ctaband .container{padding-block:64px}
  .stats .container{padding-block:48px}
  .stats__grid{grid-template-columns:repeat(2,1fr); row-gap:30px}
  .stat{padding:4px 12px}
  .stat__k{font-size:clamp(28px,5vw,38px)}
  .stat + .stat::before{display:none}
  .incl__body{padding:34px 30px}
  .incl__t{font-size:27px}
  .incl__art{min-height:250px}
  .offer{grid-template-columns:1fr}
  .offer__col{padding:32px 28px}
  .offer__col + .offer__col{border-left:0; border-top:1px solid rgba(242,196,177,.18)}
  .offer__col--cta{grid-column:auto}
  .tst{grid-template-columns:1fr}
  .keys{grid-template-columns:repeat(2,1fr)}
  .faqx__aside{padding:32px 28px}
  .faqx__title{font-size:36px}
  .acc__head{padding:18px 20px; gap:15px}
  .acc__q{font-size:16.5px}
  .acc__body p{padding:0 20px 20px 68px; font-size:15px}
  .final .container{padding-block:var(--section-y)}
  .final__price b{font-size:48px}
  .footer-links{gap:40px}
  .tcard{width:320px; margin-right:18px}
}

/* ---- Mobile (≤680px) ---- */
@media (max-width:680px){
  .faqx__title br {
    display: none;
}
  .header-bar img{    width: 44px;}
  .hero_buy_inner em{display: none;}
  :root{--section-y:68px; --gutter:18px}
  .h2{font-size:clamp(26px,7vw,32px)}
  .section-head .lede{font-size:16px}

  /* Hero */
  .hero .container{padding-top:104px; padding-bottom:44px}
  .hero__product{max-width:360px}
  .display{font-size:clamp(30px,8.4vw,38px)}
  .hero__eyebrow{font-size:11px; letter-spacing:.12em}
  .hero__lede{font-size:16px}
  .hero__chips{display:none}
  .hero__buy{flex-direction:row; align-items:stretch; gap:12px; flex-wrap: nowrap;}
  .pricebox{flex-direction:row; align-items:center; justify-content:center; gap:12px; padding:12px 18px}
  .pricebox em{margin-top:0}
  .hero__buy .btn{justify-content:center}
  .pricebox__row{align-items: center;}
  .hero__note{margin-top: 20px; font-size: 12px;}

  /* Buttons: stack the price under the label instead of letting it overflow */
  .btn{padding:15px 17px; font-size:14.5px; gap:10px}
  .btn--sm{padding:11px 17px; font-size:13px}
  .cta-block{margin-top:44px}
  .pricebox s {font-size: 14px;}
  .pricebox b {font-size: 24px;}

  .uncover__video{max-width:none}
  .disc__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr); gap:12px; 
        margin: 50px 0 0 0;}
  .card{padding:22px 18px 20px}
  .card__icon{width:44px; height:44px; border-radius:13px}
  .card__icon svg{width:19px; height:19px}
  .card__t{margin-top:18px; font-size:15.5px; line-height:1.28}
  .card__d{margin-top:8px; font-size:13px; line-height:1.5}
  /* 2 per row on phones, with type scaled to suit */
  .uncover__grid{grid-template-columns:repeat(2,1fr); gap:12px; margin:0;}
  .ucard{padding:22px 16px 20px}
  .ucard__n{width:38px; height:38px; border-radius:11px; font-size:17px}
  .ucard__t{margin-top:16px; font-size:15.5px; line-height:1.28}
  .ucard__d{margin-top:7px; font-size:13px; line-height:1.5}
  .disc__grid{border-left:0; border-top:0}
  .dcell{border-left:1px solid var(--line); padding:32px 22px}
  .dcell__n{font-size:66px}
  .steps{grid-template-columns:repeat(2,1fr); gap:26px 14px;         margin: 60px 0 0 0;}
  .step__dot{width:46px; height:46px}
  .step__dot svg{width:19px; height:19px}
  .step__t{font-size:15px}
  .step__d{font-size:13px; line-height:1.5}
  .step__d{max-width:none}
  .stats__grid {
    row-gap: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  .stats__title{font-size:26px}
  .incl__body{padding:28px 22px}
  .incl__t{font-size:24px}
  .incl__d,.incl__list li{font-size:15px}
  .incl__art{min-height:210px}
  .offer__price b{font-size:52px}
  .offer__col{padding:28px 22px}
  .tcard{width:280px; margin-right:14px; padding:24px 22px}
  .tcard__q{font-size:15px}
  .mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .faqx__aside{padding:28px 22px; border-radius:20px}
  .faqx__title{font-size:31px}
  .faqx__cta .btn{padding-inline:14px; font-size:14px}
  .acc__head{padding:16px; gap:12px}
  .acc__n{width:32px; height:32px; font-size:13px}
  .acc__q{font-size:15.5px}
  .acc__body p{padding:0 16px 18px 60px; font-size:14.5px}
  .final__price b{font-size:40px}
  .final__marks{gap:14px 20px}
  .mark{font-size:12.5px}
  .footer-top{gap:32px}
  .footer-links{flex-direction:row; gap:28px}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px}

  /* Sticky bar: button only, so it never crowds the text */
  .incl__art{display:none}          /* image reads poorly at this size */
  .incl__body{padding:26px 22px}

  .offerbar__inner{padding-block:11px; gap:12px}
  .offerbar__sub{display:none}
  .offerbar__txt{font-size:12px}
  .offerbar .btn__divider,.offerbar .btn__price{display:none}

  /* Modal fills the screen on phones */
  .nm-modal{padding:0}
  .nm-modal__dialog{max-width:none; width:100%; height:100%; max-height:100%; border-radius:0}
  .nm-modal__head{padding:22px 20px 18px}
  .nm-modal__title{font-size:22px}
  .nm-modal__body{padding:20px 20px 28px}
  .col-md-6{flex:0 0 100%; max-width:100%}

  .offerbar a.btn span {
    font-size: 12px;
}
}

/* ---- Small phones (≤400px) ---- */
@media (max-width:400px){
  
  :root{--gutter:15px}
  .display{font-size:29px}
  .hero__product{max-width:300px}
  .dcell__n{font-size:58px}
  .tcard{width:255px}
}


@media (max-width:360px){  
.hero__buy{flex-direction: column;}
}