:root{
  --primary:#2f5f96;
  --primary:oklch(53% .09 248);
  --primary-foreground:#ffffff;
  --success:#2f9e5c;
  --success:oklch(62% .16 149);
  --success-foreground:#ffffff;
  --background:#ffffff;
  --foreground:#26314a;
  --foreground:oklch(22% .07 264);
  --muted:#f4f6fa;
  --muted:oklch(96.5% .006 250);
  --muted-foreground:#6b7690;
  --muted-foreground:oklch(52% .03 253);
  --border:#e4e8f0;
  --border:oklch(91% .012 250);
  --card:#ffffff;
  --radius:.625rem;
  --font-head:"Space Grotesk",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--foreground);
  background:var(--muted);
  min-height:100dvh;
}

.app{
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--background);
  display:flex;
  flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.04);
}

.topbar{
  padding:16px 20px 0;
}
.progress{
  height:6px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:6%;
  background:var(--primary);
  border-radius:999px;
  transition:width .35s ease;
}

.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 24px 40px;
}

.screen{
  animation:fadeIn .32s ease;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

.eyebrow{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary);
  margin:0 0 10px;
}

h1,h2{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
  color:var(--foreground);
}
h1{font-size:1.55rem;}
h2{font-size:1.3rem;}

.h1-hero{
  font-size:clamp(2.1rem,9vw,2.7rem);
  line-height:1.14;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:8px 0 20px;
}

p{
  font-size:1.02rem;
  line-height:1.6;
  color:var(--foreground);
  margin:0 0 16px;
}
p.lede{
  color:var(--muted-foreground);
  font-size:1.05rem;
}

.hero-img{
  width:100%;
  max-width:280px;
  display:block;
  margin:0 auto 20px;
  border-radius:var(--radius);
}

.btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 20px;
  border-radius:var(--radius);
  border:none;
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
  text-decoration:none;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary); color:var(--primary-foreground);}
.btn-success{background:var(--success); color:var(--success-foreground);}
.btn-block{margin-top:6px;}

.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:6px 0 4px;
}
.option{
  text-align:left;
  padding:15px 16px;
  border-radius:var(--radius);
  border:1.5px solid var(--border);
  background:var(--background);
  font-family:var(--font-body);
  font-size:.98rem;
  color:var(--foreground);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.option:hover{border-color:var(--primary);}
.option.selected{
  border-color:var(--primary);
  background:color-mix(in oklab, var(--primary) 8%, white);
}
.option-check{
  display:inline-block;
  width:18px;
}

.reply{
  margin-top:18px;
  padding:14px 16px;
  background:var(--muted);
  border-radius:var(--radius);
  border-left:3px solid var(--primary);
  font-size:.95rem;
  color:var(--foreground);
}

.carousel-wrap{
  margin:14px 0 6px;
}
.carousel{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:var(--radius);
}
.carousel::-webkit-scrollbar{display:none;}
.carousel .slide{
  flex:0 0 100%;
  scroll-snap-align:center;
}
.carousel img{
  width:100%;
  display:block;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.carousel-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:10px;
}
.carousel-arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--background);
  color:var(--foreground);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.carousel-arrow:disabled{opacity:.3; cursor:default;}
.carousel-dots{
  display:flex;
  align-items:center;
  gap:6px;
}
.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--border);
  border:none;
  padding:0;
  cursor:pointer;
}
.dot.active{
  background:var(--primary);
  width:18px;
  border-radius:4px;
  transition:width .2s ease;
}
.carousel-count{
  font-size:.82rem;
  color:var(--muted-foreground);
  text-align:center;
  margin-top:4px;
}

.stack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:16px 0 18px;
}
.stack-grid img{
  width:100%;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--muted);
}

.offer-card{
  background:color-mix(in oklab, var(--primary) 5%, var(--background));
  border-radius:16px;
  padding:30px 22px 26px;
  margin:14px 0 20px;
  text-align:center;
  box-shadow:0 4px 18px color-mix(in oklab, var(--foreground) 10%, transparent);
}
.offer-ribbon{
  display:inline-flex;
  align-items:center;
  background:var(--success);
  color:var(--success-foreground);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.01em;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.offer-product-name{
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:700;
  color:var(--muted-foreground);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 8px;
}
.offer-price-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
}
.offer-price{
  font-family:var(--font-head);
  font-size:clamp(2.5rem,9vw,2.9rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--foreground);
}
.offer-price-note{
  font-size:.85rem;
  color:var(--muted-foreground);
  margin-top:2px;
}
.offer-anchor{
  display:inline-block;
  font-size:.84rem;
  font-weight:700;
  color:var(--primary);
  background:color-mix(in oklab, var(--primary) 12%, white);
  border-radius:999px;
  padding:7px 16px;
  margin:14px 0 2px;
}
.offer-divider{
  height:1px;
  background:var(--border);
  border:none;
  margin:22px 0 18px;
}
.offer-bullets{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:.94rem;
}
.offer-bullets li{display:flex; gap:9px; align-items:flex-start;}
.offer-bullets li::before{content:"✓"; color:var(--success); font-weight:700;}

.offer-trust-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.offer-trust-row span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--muted-foreground);
}
.offer-trust-row svg{color:var(--primary); flex:0 0 auto;}

.guarantee-block{
  text-align:center;
  margin:30px 0 6px;
}
.guarantee-seal{
  width:168px;
  display:block;
  margin:0 auto 12px;
}
.guarantee-caption{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  color:var(--foreground);
  margin:0 0 6px;
}
.guarantee-sub{
  font-size:.9rem;
  color:var(--muted-foreground);
  max-width:320px;
  margin:0 auto;
}

.faq{margin-top:34px;}
.faq-title{
  font-family:var(--font-head);
  font-size:1.2rem;
  font-weight:700;
  text-align:center;
  margin:0 0 6px;
}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-item:first-of-type{border-top:1px solid var(--border);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:600;
  font-size:.96rem;
  color:var(--foreground);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  font-size:1.4rem;
  font-weight:400;
  line-height:1;
  color:var(--primary);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item[open] summary{color:var(--primary);}
.faq-item p{
  padding:0 2px 16px;
  margin:0;
  font-size:.92rem;
  line-height:1.6;
  color:var(--muted-foreground);
}

.faq-close{
  margin-top:26px;
  text-align:center;
}
.faq-close p{
  font-size:.9rem;
  color:var(--muted-foreground);
  margin-bottom:12px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

.back-link{
  display:inline-block;
  margin-top:14px;
  font-size:.85rem;
  color:var(--muted-foreground);
  text-decoration:underline;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font-family:var(--font-body);
}

@media (min-width:600px){
  .stage{padding:40px 40px 56px;}
  h1{font-size:1.85rem;}
  h2{font-size:1.5rem;}
  .h1-hero{font-size:clamp(2.4rem,6vw,3.1rem);}
}