:root{
  --petrol:#0f3f3e;
  --petrol-deep:#0a2c2b;
  --petrol-mid:#134a48;
  --ink:#20393b;
  --ink-soft:#4a6062;
  --cream:#f7f4f0;
  --sand:#ece5e1;
  --turquoise:#a3dcdb;
  --turquoise-deep:#5eb6b4;
  --white:#ffffff;
  --line-color:#8fd0cf;
  --wine:#a15c53;
  --pink:rgb(234,110,129);
  --gap:30px;
  --orange:#dc5f10;
  --radius-card:20px;
  --radius-btn:30px;
  --gutter:22px;
  --content-w:349px;
}

*{box-sizing:border-box;}
/* Backdrop: beige around the frame on wide screens; on phones (where the frame fills the screen) it is the
   colour at the top of the hero, so the browser bar / overscroll area blends into the hero, not beige. */
html{-webkit-text-size-adjust:100%;background:#d9d3cc;}
body{
  margin:0;
  background:#d9d3cc;
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:430px){html,body{background:#17313d;}}
img{max-width:100%;display:block;height:auto;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
p{margin:0;}
h1,h2,h3{margin:0;font-weight:800;}

.frame{
  position:relative;
  width:100%;
  max-width:393px;
  margin:0 auto;
  background:var(--cream);
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.18);
}

section, header, footer{position:relative;z-index:2;}

.section-pad{
  padding:var(--gap) var(--gutter) 0;
}
.container{
  max-width:var(--content-w);
  margin-left:auto;margin-right:0;
}

/* ---------- headings / text ---------- */
.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--turquoise);
  margin-bottom:10px;
}
.eyebrow.on-light{color:var(--turquoise-deep);}
h2.section-title{
  font-size:26px;
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:18px;
}
.lead-text{
  position:relative;
  overflow:hidden;
  color:var(--petrol-deep);
  background:var(--turquoise);
  margin:var(--gap) calc(-1 * var(--gutter)) 0;
  padding:36px var(--gutter) 0;
  min-height:312px;
}
/* layout after the mock-up: left-aligned heading on top, accent bar and right-aligned caption on the right, bottle bottom-left */
.lt-head{position:relative;z-index:2;text-align:left;white-space:nowrap;font-size:min(28px,calc((100vw - 44px) / 12.4));line-height:1.08;font-weight:800;letter-spacing:-.015em;}
.lt-bar{position:relative;z-index:2;display:block;width:44px;height:4px;border-radius:2px;background:#f2711c;margin:24px 0 16px auto;}
.lt-sub{position:relative;z-index:2;text-align:right;font-size:min(15px,calc((100vw - 44px) / 23.2));line-height:1.36;font-weight:700;color:var(--petrol-deep);}
.lt-sub span{display:block;white-space:nowrap;}
.lt-art{position:absolute;left:-6%;bottom:-3%;width:64%;height:auto;max-width:none;z-index:1;filter:drop-shadow(0 8px 10px rgba(10,44,43,.25));}
.accent-note{
  font-family:'Manrope',sans-serif;
  font-style:italic;
  font-weight:600;
  font-size:14.5px;
  color:var(--turquoise-deep);
  line-height:1.4;
}
.accent-note.dark-bg{color:var(--turquoise);}

/* ---------- buttons ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  border-radius:var(--radius-btn);
  background:var(--turquoise);
  color:var(--petrol-deep);
  font-weight:700;
  font-size:16px;
  padding:0 24px;
  width:100%;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 24px rgba(94,182,180,.28);
}
.btn:active{transform:scale(.98);}
.btn svg{width:18px;height:18px;flex:none;}
.btn.ghost{
  background:transparent;
  color:var(--petrol);
  border:1.5px solid var(--petrol);
  box-shadow:none;
  height:52px;
}
.btn.accent{
  background:var(--orange);
  color:#fff;
  box-shadow:0 10px 24px rgba(220,95,16,.30);
}
.btn.ghost.on-dark{
  color:var(--turquoise);
  border-color:var(--turquoise);
}
.btn-caption{
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  margin-top:12px;
  line-height:1.4;
}
.btn-caption.on-dark{color:rgba(255,255,255,.6);}

.icon-badge{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--turquoise);
  color:var(--petrol-deep);
  flex:none;
}
.icon-badge svg{width:22px;height:22px;}
.icon-badge img{width:36px;height:36px;display:block;}
.icon-badge.soft{background:rgba(163,220,219,.35);color:var(--petrol-mid);}
.icon-badge.on-dark{background:rgba(163,220,219,.18);color:var(--turquoise);}

/* ========================================================= */
/* HERO */
/* ========================================================= */
.hero{
  background:var(--petrol-deep);
  color:var(--white);
  padding:52px var(--gutter) var(--gap);
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;height:100%;
  overflow:hidden;
}
/* soft fade from the page backdrop colour into the photo, so there is no hard seam under the browser bar */
.hero-bg::after{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:120px;
  background:linear-gradient(180deg, #17313d 0%, rgba(23,49,61,.82) 28%, rgba(23,49,61,.45) 58%, rgba(23,49,61,0) 100%);
  pointer-events:none;
}
.hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 20%;
  display:block;
}
.hero-lightning{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.hero-lightning img{
  position:absolute;
  opacity:0;
  mix-blend-mode:screen;   /* black/transparent edges vanish, only the glow adds light */
  max-width:none;
  will-change:opacity;
  filter:drop-shadow(0 0 5px rgba(150,190,255,.95)) drop-shadow(0 0 14px rgba(110,150,255,.55)) brightness(1.25);
  user-select:none;
}
.hero .container{position:relative;z-index:2;}
.hero-descriptor{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--turquoise);
  margin-bottom:14px;
}
.hero h1{
  font-size:44px;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--white);
  margin-bottom:18px;
  text-shadow:0 2px 18px rgba(6,28,28,.35);
}
.hero .hook{
  font-size:18px;
  line-height:1.45;
  font-weight:600;
  color:var(--turquoise);
  margin-bottom:14px;
}
.hero .lead{
  font-size:17px;
  line-height:1.25;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 3px rgba(6,28,28,.55), 0 2px 16px rgba(6,28,28,.55);
}
.hero-facts{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:22px 0 26px;
}
.hero-facts li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  color:rgba(255,255,255,.92);
  line-height:1.4;
}
.hero-facts li svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--turquoise);}
.hero-facts li b{font-weight:700;color:var(--white);}
.hero-facts li em{font-style:normal;font-weight:700;color:var(--turquoise);font-size:14px;}

.hero-photo-wrap{
  position:relative;
  z-index:1;
  margin:22px -22px 0;
  padding:0 12px;
}
.hero-photo-wrap img{
  width:100%;
  display:block;
  margin:0 auto;
}
.hero-photo-fade{
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:400px;
  background:linear-gradient(180deg, rgba(10,44,43,0) 0%, rgba(10,44,43,.65) 30%, var(--petrol-deep) 58%, var(--petrol-deep) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-scrawl{
  position:absolute;
  font-family:'Manrope',sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:14px;
  color:var(--turquoise);
  line-height:1.35;
  max-width:120px;
}
.hero-scrawl.s1{top:6px;right:8px;text-align:right;}
.hero-scrawl.s2{bottom:22px;left:8px;}

/* ========================================================= */
/* checklist / why block */
/* ========================================================= */
.why-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:var(--gap);
}
.why-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--white);
  border-radius:var(--radius-card);
  padding:16px 18px;
  box-shadow:0 6px 20px rgba(15,63,62,.05);
}
.why-item p{font-size:15px;line-height:1.48;color:var(--ink);}
.callout{
  position:relative;
  background:linear-gradient(165deg,var(--petrol-deep) 0%,var(--petrol) 60%,var(--petrol-mid) 100%);
  margin-left:calc(-1 * var(--gutter));
  margin-right:calc(-1 * var(--gutter));
  padding:40px var(--gutter) 38px;
  color:#fff;
  text-align:center;
}
.co-rule{display:block;width:40px;height:3px;border-radius:2px;background:var(--turquoise);margin:0 auto 22px;}
.co-lead{font-size:23px;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;}
.co-lead em{font-style:normal;color:#f2711c;}
.co-sub{font-size:16px;line-height:1.45;color:rgba(255,255,255,.86);margin-bottom:20px;}
.co-note{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.62);margin-bottom:14px;}
.co-promises{text-align:left;max-width:320px;margin:0 auto;border-top:1px solid rgba(255,255,255,.14);}
.co-promises li{display:flex;align-items:center;gap:14px;padding:14px 4px;font-size:16.5px;line-height:1.3;color:#fff;border-bottom:1px solid rgba(255,255,255,.14);}
.co-promises b{font-weight:800;color:var(--turquoise);}
.co-tick{flex:none;width:24px;height:24px;border-radius:50%;background:#f2711c;color:#fff;display:flex;align-items:center;justify-content:center;}
.co-tick svg{width:14px;height:14px;}

/* scroll reveal (see js/main.js). Hidden only when JS is running, so no-JS users still see everything. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* "Як проходить практикум": the ring pops in, then the check mark draws itself.
   Dash length 21 > path length (~20.2), so the finished state is a complete check. */
.js .process-item .tick{
  transform:scale(.55);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--reveal-delay,0ms) + .15s);
}
.js .process-item .tick svg{
  stroke-dasharray:21 30;
  stroke-dashoffset:22;
  transition:stroke-dashoffset .45s ease-out;
  transition-delay:calc(var(--reveal-delay,0ms) + .4s);
}
.js .process-item.is-in .tick{transform:none;}
.js .process-item.is-in .tick svg{stroke-dashoffset:0;}

/* "Тобі НЕ підійде": same idea for the white X on the pink circle (each stroke ~10.8 long). */
.js .warn-list li .cross{
  transform:scale(.55);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--reveal-delay,0ms) + .15s);
}
.js .warn-list li .cross svg{
  stroke-dasharray:11 30;
  stroke-dashoffset:12;
  transition:stroke-dashoffset .4s ease-out;
  transition-delay:calc(var(--reveal-delay,0ms) + .4s);
}
.js .warn-list li.is-in .cross{transform:none;}
.js .warn-list li.is-in .cross svg{stroke-dashoffset:0;}

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
  .js .process-item .tick{transform:none;transition:none;}
  .js .process-item .tick svg{stroke-dashoffset:0;transition:none;}
  .js .warn-list li .cross{transform:none;transition:none;}
  .js .warn-list li .cross svg{stroke-dashoffset:0;transition:none;}
}

/* ========================================================= */
/* results cards */
/* ========================================================= */
.result-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}
.result-card{
  background:var(--white);
  border-radius:var(--radius-card);
  padding:20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:0 6px 20px rgba(15,63,62,.05);
}
.result-card h3{
  font-size:17px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--ink);
}
.result-card p{font-size:14.5px;line-height:1.5;color:var(--ink-soft);}

/* ========================================================= */
/* process list */
/* ========================================================= */
.process-list{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;}
.process-item{display:flex;gap:12px;align-items:flex-start;}
.process-item .tick{
  width:20px;height:20px;border-radius:50%;
  background:var(--petrol);color:var(--turquoise);
  display:flex;align-items:center;justify-content:center;flex:none;margin:1px 0 0 0;
}
.process-item .tick svg{width:12px;height:12px;}
.process-item p{font-size:15px;line-height:1.5;color:var(--ink);}
.lang-badge{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--sand);
  border-radius:16px;
  padding:16px 18px;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:22px;
}
.lang-badge svg{width:20px;height:20px;flex:none;color:var(--petrol-mid);margin-top:1px;}

/* ========================================================= */
/* route section (dark) */
/* ========================================================= */
.route-section{
  background:linear-gradient(175deg, var(--petrol-deep) 0%, var(--petrol) 55%, var(--petrol-mid) 100%);
  color:var(--white);
  padding-bottom:var(--gap);
  margin-top:var(--gap);
}
.route-section .section-title{color:var(--white);}
.route-intro{
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  margin-bottom:8px;
}
.route-scrawl{
  text-align:right;
  margin:6px 0 26px;
  padding-right:4px;
}
.timeline{
  display:flex;
  flex-direction:column;
  gap:0;
}
.tl-item{
  position:relative;
  padding:0 0 26px 30px;
}
.tl-item::before{
  content:"";
  position:absolute;
  /* 13px dot (border-box) centred on x=7.5px, the centre of the 1px line (left:7px) */
  left:1px;top:1px;
  width:13px;height:13px;
  box-sizing:border-box;
  border:2px solid var(--turquoise);
  border-radius:50%;
  background:var(--turquoise);
  box-shadow:0 0 0 4px rgba(163,220,219,.2);
}
.tl-item::after{
  content:"";
  position:absolute;
  left:7px;top:14px;bottom:0;
  width:1px;
  background:rgba(163,220,219,.35);
}
.tl-item:last-child::after{display:none;}
.tl-item .tl-day{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--turquoise);
  margin-bottom:3px;
}
.tl-item h4{
  font-size:16.5px;
  font-weight:700;
  color:var(--white);
  margin-bottom:5px;
}
.tl-item p{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
}

/* Route dots: every dot starts as an empty ring. As each stop scrolls into view its dot fills
   with turquoise and bounces, one after another. The text itself is not faded, only the dots animate. */
.js .tl-item[data-reveal]{opacity:1;transform:none;}
.js .tl-item::before{
  background:transparent;
  border:2px solid var(--turquoise);
  box-shadow:0 0 0 0 rgba(163,220,219,0);
  transform:scale(.4);
}
.js .tl-item.is-in::before{
  transition:none;
  background:var(--turquoise);
  box-shadow:0 0 0 4px rgba(163,220,219,.2);
  animation:dot-bounce .75s cubic-bezier(.3,.7,.4,1) both;
  animation-delay:var(--reveal-delay,0ms);
}
@keyframes dot-bounce{
  0%  {transform:scale(.4);background:transparent;box-shadow:0 0 0 0 rgba(163,220,219,0);}
  35% {transform:scale(1.7);background:var(--turquoise);box-shadow:0 0 0 7px rgba(163,220,219,.28);}
  55% {transform:scale(.82);}
  75% {transform:scale(1.15);}
  100%{transform:scale(1);background:var(--turquoise);box-shadow:0 0 0 4px rgba(163,220,219,.2);}
}
/* Heading and description of each stop fade in after the dot; the day label is always visible. */
.js .tl-item h4,
.js .tl-item p{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.2,1);
  transition-delay:calc(var(--reveal-delay,0ms) + .2s);
}
.js .tl-item p{transition-delay:calc(var(--reveal-delay,0ms) + .35s);}
.js .tl-item.is-in h4,
.js .tl-item.is-in p{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .js .tl-item::before
  .js .tl-item h4,.js .tl-item p{opacity:1;transform:none;transition:none;}{transform:none;transition:none;animation:none;}
  .js .tl-item::before{background:var(--turquoise);box-shadow:0 0 0 4px rgba(163,220,219,.2);}
}

/* ========================================================= */
/* safe space */
/* ========================================================= */
/* Full-bleed mountain banner. The text sits on the sky at the top; the image follows it and is pulled
   up (percentage margin = proportional to width) so the last lines just touch the peaks.
   Section colour = the image's top row, so the sky is seamless; the image bottom fades into the page cream. */
.safe-section{background:var(--petrol-deep);padding:44px var(--gutter) 0;overflow:hidden;color:#fff;}
.safe-section .container{position:relative;z-index:2;}
.safe-box{display:flex;flex-direction:column;align-items:center;text-align:center;}
.safe-lock{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--turquoise);color:var(--petrol-deep);
  box-shadow:0 0 0 8px rgba(163,220,219,.16),0 0 0 17px rgba(163,220,219,.07);
  margin-bottom:26px;
}
.safe-lock svg{width:26px;height:26px;}
.safe-box h3{font-size:26px;line-height:1.15;font-weight:800;color:#fff;letter-spacing:-.01em;}
.safe-rule{display:block;width:44px;height:3px;border-radius:2px;background:#f2711c;margin:14px 0 16px;}
.safe-box p{font-size:15px;line-height:1.45;color:#d3e9e8;max-width:330px;}
.safe-box p b{color:var(--turquoise);font-weight:700;}
.safe-box p b.hot{color:#f2711c;}
/* mountains rise out of the dark: top of the photo dissolves into the petrol */
.safe-art-wrap{position:relative;margin:-6% calc(-1 * var(--gutter)) 0;}
.safe-art-wrap::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0a2c2b 0%,rgba(10,44,43,.88) 20%,rgba(10,44,43,.4) 50%,rgba(10,44,43,0) 78%);
}
.safe-art{
  display:block;position:relative;
  width:100%;max-width:none;height:auto;
  aspect-ratio:1180/585;object-fit:cover;object-position:50% 0;
}

/* ========================================================= */
/* mentor */
/* ========================================================= */
.mentor-photo{
  border-radius:24px;
  overflow:hidden;
  margin-bottom:18px;
  background:var(--sand);
}
.mentor-photo img{width:100%;}
.mentor-card{
  background:var(--white);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(15,63,62,.05);
}
.mentor-card summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:14px;
  padding:14px 52px 14px 14px;
}
.mentor-card summary::-webkit-details-marker{display:none;}
.mentor-card summary::after{
  content:"+";position:absolute;right:18px;top:50%;
  transform:translateY(-50%);font-size:26px;font-weight:400;
  color:var(--petrol-mid);transition:transform .2s ease;
}
.mentor-card[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.mentor-avatar{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--sand);}
.mentor-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;}
.mentor-head{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mentor-head b{font-size:18px;font-weight:800;color:var(--ink);line-height:1.25;}
.mentor-head small{font-size:13.5px;color:var(--ink-soft);line-height:1.35;}
.mentor-body{padding:2px 16px 20px;}
.mentor-body .mentor-photo{margin-bottom:16px;}
.mentor-bio p{font-size:15px;line-height:1.58;color:var(--ink-soft);margin-bottom:12px;}
.mentor-scrawl{margin-top:16px;}

/* ========================================================= */
/* reviews */
/* ========================================================= */
.reviews-intro{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin-bottom:20px;}
/* horizontal carousel: first card aligned with the text column, next card peeks in from the right edge */
.review-list{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* bleed to both screen edges; padding puts the first card back on the text column */
  margin:-8px calc(-1 * var(--gutter)) -20px calc(-1 * var(--gutter));
  /* room so card shadows are not clipped by the scroller */
  padding:8px var(--gutter) 28px var(--gutter);
}
.review-list::-webkit-scrollbar{display:none;}
.review-list:focus-visible{outline:2px solid var(--turquoise-deep);outline-offset:-2px;border-radius:12px;}
.review-card{
  flex:0 0 84%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 6px 18px rgba(15,63,62,.05);
}
.review-card .stars{color:var(--turquoise-deep);margin-bottom:8px;display:flex;gap:2px;}
.review-card .stars svg{width:13px;height:13px;}
.review-card p{font-size:14.5px;line-height:1.52;color:var(--ink);font-style:italic;}
.review-card .name{
  display:block;
  margin-top:auto;
  padding-top:10px;
  font-size:13.5px;
  font-weight:700;
  font-style:normal;
  color:var(--petrol-mid);
}

/* ========================================================= */
/* bonus */
/* ========================================================= */
.bonus-box{
  background:linear-gradient(155deg,#fff4e8 0%,#ffe6d0 100%);
  border:2px dashed var(--orange);
  color:var(--ink);
  border-radius:var(--radius-card);
  padding:24px 22px;
}
.bonus-box .icon-badge{margin-bottom:14px;background:var(--orange);color:#fff;box-shadow:none;}
.bonus-box .big{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.bonus-box .offer{font-size:22px;font-weight:800;line-height:1.3;color:var(--petrol);margin-bottom:10px;}
.bonus-box p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);}

/* ========================================================= */
/* not for you */
/* ========================================================= */
.warn-section{padding-bottom:var(--gap);}
.faq-section{padding-top:0;padding-bottom:var(--gap);}
.warn-box{
  background:#fdeef0;
  border:2px solid var(--pink);
  border-radius:var(--radius-card);
  padding:24px 22px;
  box-shadow:0 10px 28px rgba(234,110,129,.20);
}
.warn-box .warn-title{
  display:flex;align-items:flex-start;gap:10px;
  font-size:17.5px;font-weight:800;color:var(--pink);
  line-height:1.35;
  margin-bottom:16px;
}
.warn-box .warn-title svg{width:20px;height:20px;flex:none;margin-top:2px;}
.warn-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.warn-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.48;color:var(--ink);}
.warn-list li{gap:12px;}
.warn-list li .cross{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:rgb(234,110,129);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.warn-list li .cross svg{width:12px;height:12px;}
.warn-foot{font-size:13.5px;line-height:1.5;color:var(--ink-soft);border-top:1px solid rgba(234,110,129,.35);padding-top:14px;}

/* ========================================================= */
/* price */
/* ========================================================= */
.price-card{
  background:var(--petrol);
  color:var(--white);
  border-radius:0;
  margin:0 calc(-1 * var(--gutter));
  padding:36px var(--gutter);
  text-align:center;
}
.price-section{padding-top:var(--gap);}
.price-card .label{font-size:21px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:8px;}
.price-card .amount{font-size:44px;font-weight:800;color:var(--turquoise);margin-bottom:6px;letter-spacing:-.01em;}
.price-card .early{text-wrap:balance;font-size:15px;font-weight:700;color:#fff;margin-bottom:14px;}
.price-card .detail{font-size:14px;line-height:1.5;color:rgba(255,255,255,.78);margin-bottom:22px;}

/* ========================================================= */
/* faq */
/* ========================================================= */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{
  background:var(--white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(15,63,62,.04);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:17px 46px 17px 18px;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  position:relative;
  line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:16px;top:50%;
  transform:translateY(-50%);
  font-size:22px;
  font-weight:400;
  color:var(--petrol-mid);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-item .faq-a{
  padding:0 18px 18px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ========================================================= */
/* final cta */
/* ========================================================= */
.final-cta{
  background:var(--cream);
  padding-top:var(--gap);
  padding-bottom:0;
}
.final-photo-wrap{
  position:relative;
  margin:0;
}
.final-photo-wrap img{width:100%;display:block;}
.final-photo-title{
  position:absolute;top:5.5%;left:var(--gutter);right:var(--gutter);z-index:1;
  text-align:center;text-wrap:balance;
  font-size:min(25px,6.4vw);line-height:1.22;font-weight:800;letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 1px 2px rgba(7,40,60,.45),0 3px 16px rgba(7,40,60,.4);
}
.final-inner{padding:30px var(--gutter);background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-mid) 100%);}
.final-inner h2{font-size:26px;line-height:1.3;margin-bottom:14px;color:#fff;}
.final-inner em{font-style:normal;color:#f2711c;}
.final-inner .body-txt em{font-weight:700;}
.final-inner .sub{font-size:16px;font-weight:600;color:var(--turquoise);margin-bottom:14px;line-height:1.45;}
.final-inner .body-txt{font-size:15px;line-height:1.58;color:rgba(255,255,255,.82);margin-bottom:22px;}
.final-facts{
  font-size:13.5px;
  font-weight:600;
  color:var(--turquoise);
  margin-bottom:22px;
  line-height:1.6;
}