:root{
  --burgundy:#5c1030;
  --burgundy-deep:#4a0c22;
  --burgundy-darker:#3a0818;
  --burgundy-mid:#6b1231;

  --cream:#faf3ec;
  --cream-light:#fdfaf6;
  --cream-warm:#f5eae0;
  --btn-cream:#f0e2d6;

  --ink:#1a1614;
  --body:#55504d;
  --muted:#7a736f;
  --line:rgba(92,16,48,.13);
  --line-soft:#e8dace;

  --shell:1408px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream-light);
  color:var(--ink);
  font-family:Inter,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
/* One typeface across the whole page. Headings differ from body text by weight
   and tracking, not by family — at display sizes Inter needs its tracking
   pulled in, or the letters drift apart and the line loses its edge. */
h1,h2,h3{font-family:inherit;font-weight:600;letter-spacing:-.018em}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:23px;height:23px;flex:0 0 auto}

.container{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}
.container--narrow{max-width:940px}

/* ---------------- header ---------------- */
.header{
  position:sticky;
  top:0;
  z-index:60;
  color:#f6ebe2;
  background:linear-gradient(96deg,#3d0918 0%,#521029 46%,#4c0e23 100%);
}
.header__inner{
  width:100%;
  /* wider than the page shell, and the padding opens up with the viewport, so
     the logo sits near the left edge and the call to action near the right
     instead of both bunching toward the middle of a 1408px column */
  max-width:1760px;
  margin:0 auto;
  padding:0 clamp(24px,3.2vw,64px);
  height:100px;
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* keeps the nav on the page centre line */
  align-items:center;
  gap:24px;
}
.logo{display:block;width:66px;height:88px;overflow:hidden;justify-self:start}
.logo img{width:66px;height:auto}       /* letters are already cream in this asset */
/* the gap opens with the viewport so the labels spread rather than sitting in
   a tight cluster with empty space either side */
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(30px,3.4vw,68px)}
.nav a{
  font-size:14px;
  font-weight:500;
  letter-spacing:.05em;
  white-space:nowrap;
  color:#f4e8de;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s,color .2s;
}
.nav a:hover{border-bottom-color:rgba(244,232,222,.55)}
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:268px;
  height:48px;
  padding:0 26px;
  border-radius:26px;
  background:var(--btn-cream);
  color:var(--burgundy-deep);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.055em;
  white-space:nowrap;
  justify-self:end;
  transition:background .2s,transform .2s;
}
.header-cta:hover{background:#f8efe7;transform:translateY(-1px)}
/* language switch + call to action share the last grid column, so adding the
   switch did not change the header's three-column structure */
.header__right{display:flex;align-items:center;gap:18px;justify-self:end}
.lang{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(246,235,226,.28);
  border-radius:20px;
}
.lang__btn{
  min-width:38px;
  height:26px;
  padding:0 9px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:rgba(244,232,222,.72);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lang__btn:hover{color:#f4e8de}
.lang__btn.is-on{background:var(--btn-cream);color:var(--burgundy-deep)}
.menu-button{display:none;border:0;background:transparent;padding:8px;cursor:pointer}
.menu-button span{display:block;width:24px;height:1.5px;margin:5px 0;background:#f4e8de}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--cream);
}
.hero__visual{position:absolute;inset:0 0 0 42.5%;overflow:hidden}
.hero__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* The crystal is part of this photograph, so keeping it whole is a cropping
     question, and the frame is tight: the stone spans 690 of the image's 867
     rows. These two numbers sit inside the range that keeps it whole at every
     breakpoint, with room left on both sides rather than touching an edge. */
  object-position:74% 50%;
}
.hero__fade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--cream) 0%,
    rgba(250,243,236,.92) 7%,
    rgba(250,243,236,.45) 17%,
    rgba(250,243,236,0) 30%);
}
.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--shell);
  /* The floor grows on very wide screens. The visual is 57.5% of the viewport,
     and once it is wider than about 1.79x its height the stone cannot fit in
     the crop at ANY object-position — the geometry simply runs out. Tying the
     floor to the width keeps that ratio bounded. Below ~1965px this resolves to
     668px, so ordinary screens are untouched. */
  min-height:max(668px, 34vw);
  margin:0 auto;
  padding:52px 24px 40px;
}
.hero__copy{max-width:600px}

/* ---- hero entrance ----
   Plays once on load, no script involved. `backwards` rather than `both` is the
   point: the element holds the hidden state during its delay, then hands
   control back to the normal cascade once it lands. With `both` the animation's
   final transform would keep overriding the stylesheet, and the button's hover
   lift would silently stop working. */
@keyframes hero-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes hero-photo{
  from{opacity:0;transform:scale(1.04)}
  to{opacity:1;transform:none}
}
.hero__visual{animation:hero-photo 1.3s cubic-bezier(.22,.61,.36,1) backwards}
.hero .eyebrow,
.hero h1 > span,
.hero h1 > em,
.hero .subtitle,
.hero .meta,
.hero .btn-primary,
.hero .countdown{animation:hero-rise .8s cubic-bezier(.22,.61,.36,1) backwards}
.hero h1 > span,
.hero h1 > em{display:inline-block}      /* transforms need a block box */
.hero .eyebrow    {animation-delay:.14s}
.hero h1 > span   {animation-delay:.24s}
.hero h1 > em     {animation-delay:.34s}
.hero .subtitle   {animation-delay:.46s}
.hero .meta       {animation-delay:.58s}
.hero .btn-primary{animation-delay:.70s}
.hero .countdown  {animation-delay:.82s}
/* let the stone settle before the ring starts breathing around it */
.hero .btn-primary::before{animation-delay:1.6s}

@media (prefers-reduced-motion:reduce){
  .hero__visual,
  .hero .eyebrow,
  .hero h1 > span,
  .hero h1 > em,
  .hero .subtitle,
  .hero .meta,
  .hero .btn-primary,
  .hero .countdown{animation:none}
}

.eyebrow{
  margin:0 0 20px;
  color:var(--burgundy);
  font-size:13px;
  font-weight:700;
  letter-spacing:.13em;
}
.hero h1{
  margin:0;
  font-size:72px;
  line-height:1.05;
  letter-spacing:-.032em;   /* display size wants noticeably tighter than text */
  color:#171311;
  white-space:nowrap;
}
.hero h1 em{font-style:normal;color:var(--burgundy)}
.subtitle{
  margin:9px 0 28px;
  color:var(--body);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
}

.meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 34px;
  margin:0 0 32px;
  padding:0;
  list-style:none;
}
.meta li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#241f1d}
.meta .icon{color:var(--burgundy)}

/* ---- compact price inside the countdown heading ----
   The offer now reads as one unit: deadline and explanation on the left,
   current/future price on the right, then the clock below. */
.countdown__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding-bottom:15px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.countdown__copy{min-width:0}
.price{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  white-space:nowrap;
}
.price__now{
  color:var(--burgundy);
  font-size:36px;
  font-weight:650;
  letter-spacing:-.035em;
  line-height:.95;
}
.price__change{
  color:#b18d7e;
  font-size:17px;
  line-height:1;
}
.price__future{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.price__then{
  position:relative;
  display:inline-block;
  color:#665b56;
  font-size:17px;
  font-weight:600;
  line-height:1;
  opacity:.82;
}
.price__then::after{
  content:"";
  position:absolute;
  left:-3px;
  right:-3px;
  top:50%;
  height:1.5px;
  border-radius:999px;
  background:var(--burgundy);
  transform:translateY(-50%) rotate(-7deg);
  transform-origin:center;
  opacity:.82;
  pointer-events:none;
}
.price__until{
  color:var(--muted);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.055em;
  line-height:1.15;
  text-transform:uppercase;
}

/* ---- the offer that follows the reader ----
   Hidden until the hero's own price block has gone, so the same offer is never
   shown twice at once. It sits above the survey card, which is why the survey's
   own offset is measured from --offer-h rather than hard-coded. */
.offer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  padding:12px 0;
  background:linear-gradient(96deg,#3d0918 0%,#521029 46%,#4c0e23 100%);
  color:#f6ebe2;
  box-shadow:0 -12px 34px rgba(35,12,20,.20);
  transform:translateY(105%);
  visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility .42s;
}
.offer.is-up{transform:none;visibility:visible}
.offer__inner{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.offer__price{display:flex;align-items:baseline;gap:10px;margin:0}
.offer__now{font-size:26px;font-weight:600;letter-spacing:-.02em}
.offer__then{font-size:15px;color:rgba(246,235,226,.6);text-decoration:line-through}
.offer__clock{display:flex;align-items:baseline;gap:9px;margin:0 auto 0 0}
.offer__label{font-size:12px;letter-spacing:.06em;color:rgba(246,235,226,.72)}
.offer__time{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.offer__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 26px;
  border-radius:23px;
  background:var(--btn-cream);
  color:var(--burgundy-deep);
  font-size:12px;
  font-weight:600;
  letter-spacing:.055em;
  white-space:nowrap;
  transition:background .2s,transform .2s;
}
.offer__cta:hover{background:#f8efe7;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .offer{transition:none}
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:374px;
  max-width:100%;
  height:61px;
  border-radius:31px;
  background:linear-gradient(100deg,#43091f 0%,#5c1030 55%,#4d0d25 100%);
  color:#fdf6f0;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.075em;
  box-shadow:0 12px 28px rgba(74,12,34,.22);
  transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(74,12,34,.28)}
/* A ring breathing outward from the button, drawn on a pseudo-element so the
   button's own shadow and hover lift stay untouched. It sits behind and is
   inert to the pointer, so it cannot swallow a click. */
.btn-primary{position:relative;isolation:isolate}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(92,16,48,.42);
  animation:cta-pulse 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
.btn-primary:hover::before{animation-play-state:paused}
@keyframes cta-pulse{
  0%   {box-shadow:0 0 0 0 rgba(92,16,48,.42)}
  70%  {box-shadow:0 0 0 18px rgba(92,16,48,0)}
  100% {box-shadow:0 0 0 0 rgba(92,16,48,0)}
}
@media (prefers-reduced-motion:reduce){
  .btn-primary::before{animation:none}
}

.countdown{
  width:458px;
  max-width:100%;
  margin-top:32px;
  padding:17px 26px 18px;
  border:1px solid var(--line-soft);
  border-radius:11px;
  background:rgba(255,253,250,.66);
}
.countdown__title{
  margin:0;
  color:var(--burgundy);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.35;
}
.countdown__note{
  max-width:255px;
  margin:6px 0 0;
  font-size:11.5px;
  line-height:1.42;
  color:var(--muted);
  text-wrap:balance;
}
.countdown__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.countdown__grid div{text-align:center}
.countdown__grid strong{
  display:block;
  color:var(--burgundy);
  font-size:40px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.12;
}
.countdown__grid span{
  display:block;
  margin-top:2px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.13em;
  color:#4a4340;
}

/* ---------------- generic sections ---------------- */
.section{padding:62px 0}
.section--light{background:var(--cream-light)}
.section--cream{background:linear-gradient(180deg,#faf3ec 0%,#f4e8dd 100%)}
.section-title{
  margin:0 0 36px;
  text-align:center;
  font-size:22px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#191412;
}

/* who is it for */
.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  max-width:1150px;
  margin:0 auto;
}
.audience-item{display:flex;align-items:center;gap:24px}
.audience-item p{margin:0;font-size:13.5px;line-height:1.68;color:#3a3432}
.icon-circle{
  width:72px;
  height:72px;
  flex:0 0 72px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-soft);
  border-radius:50%;
  background:#fdf6f0;
  color:var(--burgundy);
}
.icon-circle .icon{width:26px;height:26px}

/* scroll reveal — used by the "what you will get" block.
   The whole tile travels: it lifts, fades and settles out of a slight
   shrink, one after the next from left to right. */
.reveal-item{
  opacity:0;
  transform:translateY(42px) scale(.965);
  transition:
    opacity .74s cubic-bezier(.22,.61,.36,1),
    transform .74s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 120ms);
  will-change:opacity,transform;
}
.reveal-item.is-in{opacity:1;transform:none;will-change:auto}
/* the numeral trails its tile in, so each one lands with its own accent */
.reveal-item .num{
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 120ms + 260ms);
}
.reveal-item.is-in .num{opacity:1;transform:none}
/* re-arming the block must not animate backwards on screen */
.reveal-instant .reveal-item,
.reveal-instant .reveal-item .num{transition:none}

/* what you will get */
.benefits-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.benefits-grid article{
  padding:26px 22px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  transition:box-shadow .35s ease,border-color .35s ease;
}
.benefits-grid article:hover{
  border-color:rgba(92,16,48,.22);
  box-shadow:0 14px 30px rgba(74,12,34,.07);
}
/* The hover transition above outranks .reveal-item (0,1,1 beats 0,1,0) and was
   wiping the card's own opacity/transform transition, so the tile snapped into
   place while only its numeral travelled. Restated here at higher specificity,
   with the stagger applied per property so hover never inherits the delay. */
.benefits-grid .reveal-item{
  transition:
    opacity .74s cubic-bezier(.22,.61,.36,1),
    transform .74s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease,
    border-color .35s ease;
  transition-delay:calc(var(--i,0) * 120ms), calc(var(--i,0) * 120ms), 0s, 0s;
}
.reveal-instant .benefits-grid .reveal-item{transition:none}
.benefits-grid .num{
  display:block;
  color:var(--burgundy);
  font-size:30px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
}
.benefits-grid h3{margin:14px 0 8px;font-size:16px;letter-spacing:.01em}
.benefits-grid p{margin:0;font-size:13px;line-height:1.6;color:var(--body)}

/* program */
.program-grid,.experts-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.program-card,.expert-card{
  padding:36px 38px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 38px rgba(74,12,34,.05);
}
.tag{
  display:inline-block;
  padding:7px 13px;
  border-radius:7px;
  background:var(--burgundy);
  color:#fbf1ea;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
}
.program-card h3{margin:20px 0 18px;font-size:29px;line-height:1.2}
.program-card ul{margin:0;padding-left:20px}
.program-card li{margin:12px 0;font-size:14.5px;line-height:1.6;color:#332d2b}

/* experts */
.expert-card{display:grid;grid-template-columns:136px 1fr;gap:28px;align-items:center}
.expert-photo{
  width:132px;
  height:132px;
  aspect-ratio:1;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  justify-self:center;
  align-self:center;
  background:linear-gradient(150deg,#e0bcaa 0%,#b06a63 48%,#5c1030 100%);
  box-shadow:0 8px 18px rgba(74,12,34,.08);
}
.expert-body h3{margin:0;font-size:29px}
.expert-role{margin:4px 0 14px;color:var(--burgundy);font-size:13px;font-weight:600;letter-spacing:.05em}
.expert-body p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#3a3432}
.expert-body p:last-child{margin-bottom:0}

/* trust strip */
.trust{
  padding:52px 0;
  background:linear-gradient(96deg,#3d0918 0%,#521029 46%,#4c0e23 100%);
  color:#f6ebe2;
}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.trust-grid div{padding:12px 18px;border-right:1px solid rgba(246,235,226,.18)}
.trust-grid div:last-child{border-right:0}
.trust-grid strong{display:block;font-size:40px;font-weight:600;letter-spacing:-.02em}
.trust-grid span{font-size:13px;opacity:.82}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:20px 0;
  font-size:15.5px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  color:var(--burgundy);
  font-size:20px;
  font-weight:400;
  line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--body)}

/* final cta */
.final-cta-wrap{padding:0 24px 64px;background:var(--cream-light)}
.final-cta{
  max-width:var(--shell);
  margin:0 auto;
  padding:48px 54px;
  border-radius:18px;
  background:linear-gradient(96deg,#3d0918 0%,#521029 46%,#4c0e23 100%);
  color:#f8efe8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.eyebrow--light{color:#e5bdad;margin-bottom:10px}
.final-cta h2{margin:0;font-size:31px;font-weight:500;line-height:1.3;max-width:640px}
.final-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:262px;
  height:52px;
  padding:0 26px;
  border-radius:26px;
  background:var(--btn-cream);
  color:var(--burgundy-deep);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.055em;
  white-space:nowrap;
  transition:background .2s,transform .2s;
}
.final-cta a:hover{background:#fbf3ec;transform:translateY(-1px)}

/* footer */
.footer{padding:26px 0 22px;background:#1d1315;color:#f2e8e2}
.footer__inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer__logo{width:60px;height:auto}
.footer p{margin:0 auto 0 0;font-size:13px;color:rgba(242,232,226,.62);letter-spacing:.02em}
.footer a{font-size:13px;color:rgba(242,232,226,.9)}
.footer a:hover{color:#fff}
.footer__social{display:inline-flex;align-items:center;gap:9px}
.footer__social .icon{width:19px;height:19px}
.footer__legal{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(242,232,226,.12);
}
.footer__legal a{font-size:12.5px;color:rgba(242,232,226,.62)}
.footer__legal a:hover{color:rgba(242,232,226,.95)}
.footer__copy{margin-left:auto;font-size:12.5px;color:rgba(242,232,226,.4)}

/* ---------------- survey ---------------- */
.survey{
  position:fixed;
  right:28px;
  bottom:calc(26px + var(--offer-h, 0px));
  z-index:100;
  width:404px;                    /* text only now — 600px was for the image column */
  max-width:calc(100vw - 32px);
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 74px rgba(35,12,20,.20),0 3px 12px rgba(35,12,20,.07);
  opacity:0;
  transform:translateY(24px) scale(.98);
  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1);
}
/* hairline in the brand red so the card reads as part of the identity */
.survey::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:2px;
  border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,var(--burgundy),transparent);
  opacity:.5;
}
.survey[hidden]{display:none}
.survey.is-open{opacity:1;transform:none}
.survey__body{padding:24px 28px 22px}
.survey__close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#2a2320;
  cursor:pointer;
  transition:background .2s;
}
.survey__close:hover{background:#f2ece7}
.survey__close svg{width:17px;height:17px}
.survey__note{margin:0 0 5px;font-size:12px;color:#5a5450}
.survey h2{margin:0 0 7px;font-size:19.5px;line-height:1.3;padding-right:18px;color:#171311}
.survey__sub{margin:0 0 16px;font-size:11.5px;color:var(--muted)}
.survey__options{display:grid;gap:11px}
.survey__options label{
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px 6px 2px 4px;
  margin-left:-4px;
  border-radius:6px;
  font-size:13px;
  color:#2a2523;
  cursor:pointer;
  transition:background .2s ease;
}
.survey__options label:hover{background:#faf4ef}
.survey__options input{
  width:14px;
  height:14px;
  flex:0 0 14px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #b9afa8;
  border-radius:2px;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.survey__options input:checked{background:var(--burgundy);border-color:var(--burgundy)}
.survey__options input:checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg);
}
.survey__next{
  display:flex;                   /* it is an <a> now, so centre the label here */
  align-items:center;
  justify-content:center;
  width:196px;
  height:38px;
  margin:20px auto 0;
  border:0;
  border-radius:19px;
  background:linear-gradient(100deg,#43091f 0%,#5c1030 55%,#4d0d25 100%);
  color:#fdf6f0;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.09em;
  cursor:pointer;
  transition:transform .2s;
}
.survey__next:hover{transform:translateY(-1px)}
.survey__skip{
  display:block;
  margin:11px auto 0;
  border:0;
  background:transparent;
  font-size:12px;
  color:#2a2523;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

/* ---------------- responsive ---------------- */
@media (max-width:1280px){
  .hero__visual{inset:0 0 0 40%}   /* keep the crystal clear of the crop */
  .hero h1{font-size:62px}
  .hero__inner{min-height:600px}
  .nav{gap:34px}
  .nav a{font-size:12px}
  .header-cta{min-width:220px;font-size:11.5px;padding:0 18px}
  .benefits-grid{grid-template-columns:repeat(3,1fr)}
  .audience-grid{gap:28px}
}

@media (max-width:1024px){
  .hero__visual{inset:0 0 0 38%}
  .hero h1{font-size:52px;white-space:normal}
  .hero__copy{max-width:460px}
  .subtitle{font-size:16px}
  .btn-primary{width:330px;height:56px}
  .countdown{width:420px}
  .countdown__grid strong{font-size:34px}
  .audience-grid{grid-template-columns:1fr;gap:22px;max-width:640px;margin:0 auto}
  .program-grid,.experts-grid{grid-template-columns:1fr}
}

@media (max-width:860px){
  .header{position:relative}
  .header__inner{
    height:76px;
    grid-template-columns:auto 1fr auto;
    gap:12px;
  }
  .logo{width:54px;height:70px}
  .logo img{width:54px}
  .menu-button{display:block;order:3}
  /* the wrapper is the grid item now, so it carries the order */
  .header__right{order:2;gap:10px;min-width:0}
  .header-cta{min-width:0;height:40px;padding:0 14px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .lang{padding:2px;flex:0 0 auto}
  .lang__btn{min-width:30px;height:24px;padding:0 6px;font-size:10.5px;letter-spacing:.04em}
  .nav{
    order:4;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 18px;
    background:#4c0e23;
    box-shadow:0 18px 34px rgba(30,6,15,.28);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(246,235,226,.12)}

  .hero{display:flex;flex-direction:column-reverse}
  /* Same reason as the desktop floor: a 340px band on a 860px-wide phone is
     2.5x as wide as it is tall, and the stone cannot fit that crop. */
  .hero__visual{position:relative;inset:auto;width:100%;height:max(340px, 58vw)}
  .hero__fade{background:linear-gradient(180deg,rgba(250,243,236,0) 55%,var(--cream) 100%)}
  .hero__inner{min-height:0;padding:34px 24px 46px}
  .hero__copy{max-width:none}
  .hero h1{font-size:46px}
  .section{padding:58px 0}
  .section-title{font-size:23px;margin-bottom:34px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .final-cta{flex-direction:column;align-items:flex-start;padding:34px 30px}
  .final-cta h2{font-size:25px}
  .trust-grid{grid-template-columns:1fr}
  .trust-grid div{border-right:0;border-bottom:1px solid rgba(246,235,226,.18);padding:18px}
  .trust-grid div:last-child{border-bottom:0}

  .survey{
    right:10px;
    left:10px;
    bottom:calc(10px + var(--offer-h, 0px));
    width:auto;
    max-height:min(78vh,600px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .survey__body{padding:16px 20px 18px}
  .survey h2{font-size:18px;padding-right:24px}
  .survey__options{gap:9px}
}

@media (max-width:560px){
  .hero h1{font-size:37px}
  .countdown__head{grid-template-columns:1fr;gap:12px}
  .countdown__copy{text-align:center}
  .countdown__note{max-width:none}
  .price{justify-content:center}
  .subtitle{font-size:15px}
  .meta{gap:12px}
  .btn-primary,.countdown{width:100%}
  .countdown__grid strong{font-size:30px}
  .benefits-grid{grid-template-columns:1fr}
  .expert-card{grid-template-columns:1fr;padding:26px 22px}
  .expert-photo{width:132px;height:132px;border-radius:50%;object-position:50% 20%;margin:0 auto 4px}
  .program-card{padding:26px 22px}
  .program-card h3{font-size:24px}
  .footer__inner{gap:14px}
  .footer p{margin-right:0;flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition-duration:.01ms !important}
}