:root{
  --bg:#ffffff;
  --ink:#2b2a25;
  --ink-soft:#6e695e;
  --sage:#b9c7a9;
  --sage-deep:#7f9470;
  --line:#e4dfd3;
  --cream:#f3efe6;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.wordmark{
  font-family:'Playfair Display', serif;
}
a{color:inherit;}

/* ---------- NAV ---------- */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px clamp(20px,5vw,72px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-size:22px;
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
}
.wordmark span{color:var(--sage-deep);}
.nav-tag{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.subnav{
  display:flex;
  gap:clamp(16px,3vw,28px);
  padding:14px clamp(20px,5vw,72px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.subnav a{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.subnav a:hover, .subnav a[aria-current="page"]{color:var(--ink);}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(56px,10vw,120px) clamp(20px,5vw,72px) clamp(40px,6vw,80px);
  max-width:900px;
}
@media(min-width:880px){
  .hero.hero-split{
    max-width:1200px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:start;
    gap:56px;
  }
  .hero-copy{padding-top:8px;}
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--sage);
  padding:7px 14px;
  border-radius:100px;
  margin-bottom:28px;
  font-weight:700;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);
  display:inline-block;
}
h1{
  font-size:clamp(34px,5.6vw,64px);
  line-height:1.08;
  font-weight:600;
  margin:0 0 22px;
  letter-spacing:-0.01em;
}
h1 em{
  font-style:italic;
  color:var(--sage-deep);
  text-decoration:underline;
  text-decoration-color:var(--sage);
  text-decoration-thickness:10px;
  text-underline-offset:-2px;
  font-weight:600;
}
.sub{
  font-size:clamp(16px,2vw,19px);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 0 40px;
}

.stat-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 36px;
}
.stat-row span:not(.stat-dot){
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.stat-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--sage-deep);
  flex-shrink:0;
}

/* ---------- FORM ---------- */
.form-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(22px,4vw,34px);
  max-width:480px;
}
.form-card h2{
  font-size:20px;
  font-weight:600;
  margin:0 0 4px;
}
.form-card .helper{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 20px;
}
.progress{
  display:flex;
  gap:8px;
  margin-bottom:22px;
}
.progress .progress-dot{
  width:28px;
  height:4px;
  border-radius:4px;
  background:var(--line);
  transition:background .2s ease;
}
.progress .progress-dot.active{background:var(--sage-deep);}
.progress .progress-dot.done{background:var(--ink);}

.step{display:flex;flex-direction:column;gap:12px;}
.step[hidden]{display:none;}

label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  font-weight:700;
  margin-bottom:-6px;
}
.required-star{
  color:var(--sage-deep);
  margin-left:1px;
}
input, textarea{
  font-family:'DM Sans', sans-serif;
  font-size:15px;
  padding:13px 14px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:#fff;
  outline:none;
  color:var(--ink);
  width:100%;
}
textarea{
  min-height:88px;
  resize:vertical;
}
input:focus, textarea:focus{
  border-color:var(--sage-deep);
  box-shadow:0 0 0 3px rgba(127,148,112,0.35);
}

.pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill{position:relative;}
.pill input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.pill span{
  display:inline-flex;
  align-items:center;
  font-size:13.5px;
  font-weight:600;
  padding:9px 14px;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .15s ease;
}
.pill:has(input:checked) span{
  background:var(--sage);
  border-color:var(--sage-deep);
  color:var(--ink);
}
.pill input:focus-visible + span{
  outline:3px solid var(--sage-deep);
  outline-offset:2px;
}

.conditional-field{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.conditional-field[hidden]{display:none;}

button{
  margin-top:8px;
  font-family:'DM Sans', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.01em;
  background:var(--ink);
  color:#fff;
  border:none;
  padding:15px 20px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
button:hover{background:#1f1e19;}
button:active{transform:scale(0.98);}
button:focus-visible{outline:3px solid var(--sage-deep);outline-offset:2px;}

.step-actions{
  display:flex;
  gap:10px;
  margin-top:0;
}
.step-actions button{margin-top:0;flex:1;}
.step-actions .prev-btn{
  flex:0 0 auto;
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.step-actions .prev-btn:hover{background:var(--cream);}

.fine{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:14px;
}
.success{
  display:none;
  padding:6px 0 2px;
}
.success.show{display:block;}
.success-title{
  font-size:19px;
  font-weight:700;
  margin:0 0 14px;
  font-family:'Playfair Display', serif;
}
.success p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.success p:last-of-type{margin-bottom:0;}
form[hidden]{display:none;}

a.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  padding:13px 22px;
  border-radius:10px;
  transition:background .15s ease;
}
a.btn:hover{background:#1f1e19;}
.success-cta{margin-top:18px;}

/* ---------- SIGNATURE: crossed-out plans ---------- */
.signature{
  padding:clamp(50px,8vw,90px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--cream);
}
.signature-inner{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
@media(min-width:820px){
  .signature-inner{grid-template-columns:1.1fr 1fr;align-items:center;}
}
.plan-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.plan-row{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  color:var(--ink-soft);
}
.plan-row .num{
  font-family:'Playfair Display', serif;
  font-style:italic;
  color:#b0a99a;
  width:26px;
  flex-shrink:0;
}
.plan-row .label{
  text-decoration:line-through;
  text-decoration-color:#cdc4b3;
  text-decoration-thickness:1.5px;
}
.plan-row.final .num{color:var(--ink);}
.plan-row.final .label{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
}
.signature-copy h2{
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.2;
  font-weight:600;
  margin:0 0 16px;
}
.signature-copy p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}
.signature-copy .highlight{
  background:linear-gradient(to top, var(--sage) 38%, transparent 38%);
  padding:0 2px;
}

/* ---------- FIT SECTION ---------- */
.fit{
  padding:clamp(56px,9vw,100px) clamp(20px,5vw,72px);
  max-width:1000px;
  margin:0 auto;
}
.fit h2{
  font-size:clamp(24px,3.4vw,32px);
  font-weight:600;
  margin:0 0 8px;
  text-align:center;
}
.fit .sub-label{
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
  margin:0 0 44px;
}
.fit-swipe-hint{
  display:block;
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--sage-deep);
  margin:0 0 14px;
}
.fit-grid{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:0;
  border:1px solid var(--line);
  border-radius:16px;
}
.fit-grid::-webkit-scrollbar{display:none;}
.fit-col{
  flex:0 0 100%;
  scroll-snap-align:start;
  background:#fff;
  padding:clamp(24px,4vw,38px);
}
.fit-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.fit-dot{
  width:8px;
  height:8px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--line);
  cursor:pointer;
}
.fit-dot.active{background:var(--sage-deep);}
@media(min-width:560px){
  .fit-swipe-hint{display:none;}
  .fit-dots{display:none;}
  .fit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line);
    overflow:hidden;
  }
  .fit-col{
    flex:none;
    padding:clamp(18px,3.2vw,38px);
  }
  .fit-col li{font-size:14px;}
}
.fit-col h3{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:700;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.fit-col.yes h3{color:var(--ink);}
.fit-col.no h3{color:var(--ink-soft);}
.mark{
  width:20px;height:20px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;justify-content:center;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
}
.fit-col.yes .mark{background:var(--sage);color:var(--ink);}
.fit-col.no .mark{background:#ece6d9;color:var(--ink-soft);}
.fit-col ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.fit-col li{
  display:flex;
  gap:12px;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}
.fit-col.no li{color:var(--ink-soft);}
.fit-col li .mark{margin-top:1px;}

/* ---------- CLOSING CTA ---------- */
.closing{
  padding:clamp(60px,10vw,110px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
  background:var(--cream);
}
.closing-inner{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.closing h2{
  font-size:clamp(26px,3.4vw,34px);
  font-weight:600;
  margin:0 0 14px;
  line-height:1.15;
}
.closing h2 em{
  font-style:italic;
  color:var(--sage-deep);
  text-decoration:underline;
  text-decoration-color:var(--sage);
  text-decoration-thickness:6px;
  text-underline-offset:-1px;
  font-weight:600;
}
.mobile-break{display:inline;}
@media(min-width:800px){
  .mobile-break{display:none;}
  .closing h2{white-space:nowrap;}
}
.closing p{
  color:var(--ink-soft);
  font-size:15.5px;
  margin:0 0 30px;
}

footer{
  padding:26px clamp(20px,5vw,72px) 40px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:12.5px;
  color:var(--ink-soft);
  flex-wrap:wrap;
  gap:14px 24px;
}
.footer-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}
.footer-legal a{
  text-decoration:none;
  color:var(--ink-soft);
}
.footer-legal a:hover{color:var(--ink);}

/* ---------- CREDIBILITY STRIP ---------- */
.credibility{
  max-width:900px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px) clamp(40px,7vw,72px);
}
.credibility-inner{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(20px,4vw,30px);
}
.credibility-inner h3{
  font-size:14px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--ink);
}
.credibility-inner p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- TRANSFORMATIONS PAGE ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  padding:0 clamp(20px,5vw,72px) clamp(56px,9vw,100px);
  max-width:1100px;
  margin:0 auto;
}
.transformation-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.transformation-placeholder{
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#fff;
  border-bottom:1px dashed var(--line);
  color:var(--ink-soft);
  font-size:12.5px;
  text-align:center;
  padding:20px;
}
.transformation-card .caption{
  padding:14px 16px;
  font-size:13px;
  color:var(--ink-soft);
}

/* ---------- STORY PAGE ---------- */
.story-body{
  max-width:640px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px) clamp(60px,9vw,100px);
}
.story-body p{
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 22px;
}
.story-body p:last-child{margin-bottom:0;}
.story-body h2{
  font-size:19px;
  font-weight:600;
  margin:36px 0 12px;
}
.story-body h2:first-child{margin-top:0;}
.story-body .updated{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 30px;
}

/* ---------- WHAT'S INCLUDED PAGE ---------- */
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:0 clamp(20px,5vw,72px) clamp(56px,9vw,100px);
  max-width:1000px;
  margin:0 auto;
}
@media(min-width:700px){
  .features-grid{grid-template-columns:1fr 1fr;}
}
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(24px,4vw,30px);
}
.feature-card .mark{
  margin-bottom:16px;
  background:#fff;
  border:1.5px solid var(--sage-deep);
  color:var(--sage-deep);
}
.feature-card h3{
  font-size:18px;
  font-weight:600;
  font-family:'Playfair Display', serif;
  margin:0 0 8px;
}
.feature-card p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- HOW IT WORKS PAGE ---------- */
.steps-list{
  max-width:640px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px) clamp(60px,9vw,100px);
  display:flex;
  flex-direction:column;
  gap:30px;
}
.step-item{
  display:flex;
  gap:18px;
}
.step-item .step-num{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:28px;
  color:var(--sage-deep);
  flex-shrink:0;
  width:36px;
}
.step-item h3{
  font-size:16px;
  font-weight:700;
  margin:0 0 6px;
}
.step-item p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}
a.step-item{
  text-decoration:none;
  color:inherit;
  border-radius:14px;
  margin:-14px;
  padding:14px;
  transition:background .15s ease;
}
a.step-item:hover{background:var(--cream);}
.step-link-cta{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--sage-deep);
}

/* ---------- FAQ PAGE ---------- */
.faq-body{
  max-width:640px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px) clamp(60px,9vw,100px);
  display:flex;
  flex-direction:column;
  gap:24px;
}
.faq-item h3{
  font-size:16px;
  font-weight:700;
  margin:0 0 8px;
}
.faq-item p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}
.faq-note{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  font-size:14px;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}