/* V3 · Visual direction & responsive reading. All copy/content unchanged. */
:root { --v3-ease:cubic-bezier(.22,.7,.2,1); --v3-slow:.64s; --v3-line:rgba(176,64,47,.22) }

/* 01 · The trigger: deliberately noticeable at the reading line, but no lag. */
.js-v3 [data-v3-reveal]{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--v3-slow) var(--v3-ease),transform var(--v3-slow) var(--v3-ease);
  transition-delay:var(--v3-delay,0ms);
}
.js-v3 [data-v3-reveal="headline"]{transform:translate3d(0,18px,0)}
.js-v3 [data-v3-reveal="bullet"]{transform:translate3d(-8px,5px,0);transition-duration:.56s}
.js-v3 [data-v3-reveal="card"]{transform:translate3d(0,14px,0) scale(.992)}
.js-v3 [data-v3-reveal].v3-in{opacity:1;transform:none}
.js-v3 .bar{transform:translateY(110%);transition:transform .36s var(--v3-ease)}
.js-v3 .bar.is-on{transform:none}
/* No 'hidden until JS' if JS blocked: all animation-only selectors require js-v3. */

/* 02 · First impression: subtle depth + editorial scroll cue. */
.v3-scroll-cue{position:absolute;bottom:46px;right:42px;z-index:2;display:flex;align-items:center;gap:14px;
  font:600 10px/1 var(--display);letter-spacing:.23em;color:rgba(255,248,244,.83);pointer-events:none}
.v3-scroll-cue::after{content:"";width:28px;height:38px;border:1px solid rgba(255,248,244,.6);
  border-radius:40px;background:radial-gradient(circle at 50% 12px,var(--accent-l) 2px,transparent 3px)}
@media(min-width:1100px) and (hover:hover){
 .hero__photo img{transform:translate3d(0,var(--v3-parallax,0px),0) scale(1.045) !important;
   transform-origin:50% 40%;transition:transform .12s linear}
}
@media(max-width:1023px){.v3-scroll-cue{display:none}}

/* 03 · Recognition: clearly separated beats rather than one undifferentiated list. */
.scene{position:relative;isolation:isolate}
.scene::before{content:"";position:absolute;left:-18px;top:15px;bottom:15px;width:3px;
  background:var(--accent-d);transform:scaleY(0);transform-origin:top;transition:transform .75s var(--v3-ease)}
.scene.v3-in::before{transform:scaleY(1)}
.scene__n{opacity:.8}
.scene .dots li{border-bottom-color:rgba(36,28,23,.095)}
.scene .dots li:last-child{border-bottom:0}
@media(min-width:760px){.scene{padding-right:clamp(24px,3.4vw,54px)}.scene::before{left:-20px}}
@media(max-width:759px){.scene::before{left:-12px;top:18px;bottom:18px;width:2px}}

/* 04 · Contrasts. One accented margin is enough, no gratuitous icons. */
.accuse__list li{position:relative;padding-left:24px}
.accuse__list li::before{content:"";position:absolute;left:0;top:27px;width:8px;height:8px;
 border:1.5px solid rgba(255,248,244,.85);border-radius:50%}
.why__item{position:relative}
.why__num{font-variant-numeric:tabular-nums}
.worse__rows p{position:relative;border-left-color:rgba(232,167,156,.75);transition:border-left-color .4s,padding-left .4s}
.worse__rows p.v3-in{border-left-color:var(--accent-l)}
.hope__list li{transition:background-color .2s}
.hope__list li.v3-in{background-color:rgba(255,253,250,.16)}
.hope__list li span{max-width:68ch;display:block}

/* 05 · Method: vertical timeline fills as the reader reaches every step. */
.steps__list{position:relative}
.steps__list>li{position:relative;isolation:isolate;padding:32px 14px 34px 0}
.steps__list>li::before{content:"";position:absolute;top:0;bottom:0;left:-17px;width:2px;
 background:rgba(176,64,47,.14)}
.steps__list>li::after{content:"";position:absolute;top:0;bottom:0;left:-17px;width:2px;
 background:var(--accent-d);transform-origin:top;transform:scaleY(0);transition:transform .85s var(--v3-ease)}
.steps__list>li.v3-step-in::after{transform:scaleY(1)}
.steps__n{transition:color .35s,transform .35s;display:inline-block}
.steps__list>li.v3-step-in .steps__n{color:var(--accent-d);transform:translateX(3px)}
.steps__list h3{font-size:clamp(20px,2.05vw,28px)}
.steps__list .lbl{letter-spacing:.15em}
@media(min-width:1000px){.steps__list>li{padding:45px 24px 46px 0}}
@media(max-width:599px){.steps__list>li{padding-right:0}.steps__list>li::before,.steps__list>li::after{left:-11px}}

/* 06 · 'Then / now': the new column is visually the destination. */
.cmp__col{position:relative;overflow:hidden}
.cmp__col--yes{box-shadow:0 13px 42px rgba(36,28,23,.045)}
.cmp__col--yes::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-d)}
.cmp__col--yes h3{font-size:clamp(20px,1.8vw,26px)}
.cmp__col--no h3{font-size:clamp(20px,1.8vw,26px)}
.cmp__col li{padding-right:8px}

/* 07 · A consistent set of line icons for the seven support modes. */
.how__item{position:relative;align-items:flex-start}
.how__n{opacity:.7}
.v3-how-icon{position:absolute;top:25px;right:5px;display:grid;place-items:center;
  width:40px;height:40px;border:1px solid rgba(36,28,23,.16);border-radius:50%;color:var(--accent-d)}
.v3-how-icon svg{width:20px;height:20px}
.how__item h3{padding-right:8px}
.how__item:hover .v3-how-icon{border-color:var(--accent-d);background:rgba(176,64,47,.06)}

/* 08 · Proofs: clickable, never automatically moving, no fabricated results. */
.v3-zoomable{cursor:zoom-in}
.v3-zoomable:focus-visible{outline:3px solid var(--accent-d);outline-offset:4px}
.case__shots{align-self:start}
.case__shot{border-radius:14px}
.case__cols .dash li{padding-left:20px}
.trust__diplomas .slot{min-width:0}

/* 09 · Three questions have their own distinct breathing space. */
.question{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.42fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding:44px 0}
.question::before{counter-increment:v3q;content:"0" counter(v3q);position:absolute;top:18px;right:0;
  font:500 13px/1 var(--num);color:rgba(244,239,230,.5);letter-spacing:.12em}
.questions__list{counter-reset:v3q}
.question__copy{max-width:710px}
.question p{font-size:clamp(21px,2.1vw,32px);line-height:1.38}
.question b{font-size:clamp(22px,2.25vw,33px)}
.question__pic{margin:0;max-width:none}
.question__pic img{aspect-ratio:4/3;width:100%}
@media(max-width:767px){
 .question{grid-template-columns:1fr;gap:22px;padding:40px 0 44px}
 .question p{font-size:clamp(20px,5.5vw,26px)}
 .question b{font-size:clamp(22px,6vw,28px)}
 .question__pic{max-width:340px}
}

/* 10 · The offer is a moment of calm and strong emphasis. */
.deal__big{letter-spacing:-.04em;text-shadow:0 2px 0 rgba(0,0,0,.025)}
.deal__big.v3-in{animation:v3-value-arrive .65s var(--v3-ease) both}
@keyframes v3-value-arrive{from{letter-spacing:-.07em}to{letter-spacing:-.04em}}
.price__result{border-top:4px solid var(--accent-d)}

/* 11 · Offer cards: restrained depth, distinct featured tariff. */
.tariff{isolation:isolate;min-width:0}
.tariff--hero{outline:1px solid rgba(241,180,165,.23);outline-offset:-8px}
.tariff__price{padding-top:20px;border-top:1px solid rgba(36,28,23,.14)}
.tariff--hero .tariff__price{border-top-color:rgba(244,239,230,.18)}
@media(hover:hover) and (pointer:fine){
 .tariff:hover{box-shadow:0 18px 52px rgba(36,28,23,.11)}
}

/* 12 · Testimonials: native swipe on touch; accessible click-to-enlarge. */
.v3-gallery-nav{display:none;align-items:center;justify-content:flex-end;gap:10px;margin:-6px 0 14px}
.v3-gallery-nav button{border:1px solid rgba(36,28,23,.2);background:var(--card);color:var(--ink);
 width:44px;height:44px;border-radius:50%;font:500 23px var(--display);cursor:pointer}
.v3-gallery-nav button:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
@media(max-width:899px){
 .v3-gallery-nav{display:flex}
 .reviews__grid{display:grid;grid-auto-flow:column;grid-template-columns:none;
   grid-auto-columns:minmax(210px,76%);overflow-x:auto;overscroll-behavior-inline:contain;
   scroll-snap-type:x mandatory;scroll-padding-inline:4px;-webkit-overflow-scrolling:touch;
   padding:4px 4px 16px;gap:16px;scrollbar-width:thin}
 .reviews__grid>*{scroll-snap-align:start;min-width:0}
}
@media(min-width:600px) and (max-width:899px){.reviews__grid{grid-auto-columns:45%}}
.v3-lightbox{padding:24px;border:1px solid rgba(244,239,230,.23);border-radius:18px;
 background:#1C1715;color:var(--paper);width:min(94vw,920px);max-height:92vh;
 box-shadow:0 25px 100px rgba(0,0,0,.5);overflow:auto}
.v3-lightbox::backdrop{background:rgba(18,13,10,.82);backdrop-filter:blur(5px)}
.v3-lightbox img{display:block;margin:auto;max-height:75vh;max-width:100%;height:auto;width:auto;object-fit:contain}
.v3-lightbox__caption{margin:12px 0 0;font:400 13px/1.5 var(--text);text-align:center;color:rgba(244,239,230,.75)}
.v3-lightbox__close{position:sticky;z-index:2;top:0;float:right;width:40px;height:40px;
 border-radius:50%;border:1px solid rgba(255,255,255,.4);background:#211a18;color:white;
 font-size:28px;line-height:1;cursor:pointer}

/* 13 · Recap and route to start: progress is in the supporting details. */
.recap__row{position:relative;transition:background-color .25s}
.recap__row::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
 background:var(--accent-d);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--v3-ease)}
.recap__row.v3-in::before{transform:scaleX(1)}
.start__list li{position:relative}
.start__list li::after{content:"";position:absolute;top:26px;bottom:-22px;left:16px;width:1px;
 background:var(--accent-d);opacity:0;transition:opacity .45s}
.start__list li.v3-step-in::after{opacity:.4}
.start__list li:last-child::after{display:none}
.start__n{position:relative;z-index:1;background:var(--paper-2);transition:background-color .35s,color .35s}
.start__list li.v3-step-in .start__n{background:var(--accent-d);color:#fff}

/* 14 · Three separate chapters: centered chapter heads, then full-width reading. */
.paths .eyebrow--d{
  font:500 clamp(15px,1.25vw,19px)/1.45 var(--text);
  letter-spacing:0;
  text-transform:none;
  color:rgba(244,239,230,.84);
  margin:0 0 10px;
}
.paths__grid{grid-template-columns:1fr;gap:24px}
.path{gap:22px;min-width:0}
.path__intro{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;padding:0 0 10px;align-self:stretch
}
.path__n{display:block}
.path__intro h3{font-size:clamp(26px,2.7vw,40px);line-height:1.12;max-width:22ch;margin:0 auto}
.path__story{display:flex;flex-direction:column;gap:19px;min-width:0;max-width:100%}
.path__story p{font-size:clamp(15px,1.2vw,17px);max-width:76ch}
.path__story .dash{max-width:76ch}
.path__story, .path__story .dash{margin-inline:auto}
.path--good{background:var(--paper)}
@media(min-width:1000px){
 .path{display:flex;padding:clamp(34px,4.3vw,64px)}
 .path__intro{padding:0 0 8px;margin:0 auto;max-width:min(100%,900px)}
 .path__story{gap:20px;width:min(100%,920px);margin:0 auto}
}
@media(max-width:999px){.path{padding:26px 22px 30px}.path__story{gap:15px}}
/* 15 · Ultra-wide screens: avoid content stretched to 2K/21:9 proportions. */
@media(min-width:1900px){
 :root{--max:1480px;--sect-y:clamp(95px,7vh,140px)}
 .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
 .hero__in{margin-left:auto;width:min(100%,850px);padding-left:clamp(52px,4.5vw,96px)}
 .hero h1{font-size:clamp(62px,3.5vw,90px)}
 .scene h3{font-size:clamp(23px,1.4vw,31px)}
}
@media(min-width:1024px) and (max-height:800px){
 .hero{min-height:750px}
 .hero__in{padding-top:26px;gap:12px}
 .hero__main{gap:12px;margin:20px 0}
 .hero h1{font-size:clamp(38px,3.8vw,66px)}
 .hero__regalia{padding-top:10px}
}
@media(max-width:599px){
 :root{--sect-y:64px}
 .js-v3 [data-v3-reveal]{transform:translate3d(0,10px,0);transition-duration:.42s;transition-delay:0ms}
 .js-v3 [data-v3-reveal="bullet"]{transform:translate3d(-6px,4px,0);transition-duration:.38s}
 .js-v3 [data-v3-reveal].v3-in{transform:none}
 .v3-lightbox{padding:12px}
 .scene::before{display:none}
 .how__item{padding-right:40px}
 .v3-how-icon{right:0}
}
@media(prefers-reduced-motion:reduce){
 .js-v3 [data-v3-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 .js-v3 .bar:not(.is-on){transform:none}
 .v3-scroll-cue,.readbar{display:none}
 .hero__photo img{transform:none!important}
 .steps__list>li::after,.recap__row::before{transform:none!important}
 .deal__big.v3-in{animation:none}
}
/* Critical ultrawide fix: the natural height of a portrait <img> was forcing
   a 2043px hero on 3440x1440. Take the image out of grid intrinsic sizing. */
.hero__photo{min-height:0}
.hero__photo picture{position:absolute;inset:0;display:block;height:100%;width:100%}
.hero__photo picture img{width:100%;height:100%;object-fit:cover}
@media(min-width:1900px){
 .hero h1{font-size:clamp(54px,min(3.8vw,5.25vh),73px)}
 .hero__main{max-width:660px}
}