/* ============================================================
   SLAYY STUDIO — Offer page / funnel components
   Extends style.css. Uses the same tokens: --coral --teal --ink
   --cream --grad --shadow --r. Nothing here overrides base styles.
   ============================================================ */

/* ---------- Offer hero ---------- */
.hero--offer{padding:56px 0 72px}
.offer-hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:56px; align-items:center}

/* Display gradient: the brand gradient ends in a pale teal that drops below
   readable contrast at large sizes on white. This variant keeps the same
   coral→teal identity but lands on a deeper teal, and holds coral through
   most of the run so headline text stays legible. */
:root{ --grad-display: linear-gradient(115deg,#FF5A4E 0%,#F4604F 38%,#C77A6A 62%,#2E9BA6 100%); }

.offer-h1{font-size:clamp(1.9rem,4.2vw,3.5rem); line-height:1.06; margin-top:16px}
.offer-h1 .plus{color:var(--coral); font-weight:500; padding:0 .06em}
/* Any gradient text at display size on a light background gets the deeper ramp */
h1 .grad-text, .page-hero h1 .grad-text, .offer-h1 .grad-text{
  background:var(--grad-display); -webkit-background-clip:text; background-clip:text; color:transparent}

.price-line{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:22px}
.price-big{font-family:'Space Grotesk',sans-serif; font-size:clamp(3rem,6.5vw,4.6rem); font-weight:800; line-height:1;
  background:var(--grad-display); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em}
.price-per{font-family:'Space Grotesk',sans-serif; font-size:1.35rem; font-weight:600; color:var(--ink)}
.price-note{font-size:.9rem; color:var(--muted); padding-left:8px}

.offer-lead{margin-top:18px}

.btn-xl{padding:19px 34px; font-size:1.05rem}

.micro-trust{display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; font-size:.86rem; color:var(--muted); font-weight:500}
.micro-trust span{white-space:nowrap}

/* ---------- VSL ---------- */
.vsl-wrap{position:relative}
.vsl{position:relative; border-radius:24px; padding:12px; background:var(--grad); box-shadow:var(--shadow-lg)}
.vsl-frame{position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:var(--ink)}
.vsl-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vsl-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(135deg,#0B1220 0%,#1E293B 100%); cursor:pointer}
.vsl-placeholder::after{content:""; position:absolute; inset:auto -20% -50% auto; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,90,78,.35), transparent 62%); filter:blur(40px); pointer-events:none}
.vsl-play{position:relative; z-index:1; width:78px; height:78px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; display:grid; place-items:center; box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  transition:transform .3s ease}
.vsl-play:hover{transform:scale(1.07)}
.vsl-play svg{width:30px; height:30px; fill:var(--coral); margin-left:4px}
.vsl-text{position:relative; z-index:1; text-align:center; color:#fff}
.vsl-text strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin-bottom:4px}
.vsl-text span{font-size:.84rem; color:#94A3B8}
.vsl-cap{text-align:center; margin-top:14px; font-size:.9rem; color:var(--muted)}
.vsl-cap a{color:var(--coral); font-weight:600; border-bottom:1px solid rgba(255,90,78,.35)}

@media (max-width:1080px){
  .offer-hero-grid{grid-template-columns:1fr; gap:38px}
  .hero--offer{padding:36px 0 56px}
}

/* ---------- Section spacing helper ---------- */
.block--tight{padding-top:64px; padding-bottom:64px}

/* ---------- Three-options / enemy ---------- */
.vs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.vs-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px; display:flex; flex-direction:column; gap:12px}
.vs-card h3{margin:0}
.vs-card p{color:var(--muted); font-size:.95rem; margin:0}
.vs-tag{align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px}
.vs-tag--bad{background:#F1F5F9; color:#94A3B8}
.vs-tag--good{background:var(--grad); color:#fff}
.vs-card--good{background:var(--ink); border-color:transparent; position:relative; overflow:hidden}
.vs-card--good::before{content:""; position:absolute; inset:auto -30% -60% auto; width:340px; height:340px;
  background:radial-gradient(circle, rgba(255,90,78,.32), transparent 62%); filter:blur(38px)}
.vs-card--good > *{position:relative; z-index:1}
.vs-card--good h3{color:#fff}
.vs-card--good p{color:#CBD5E1}
.vs-card--good .btn{align-self:flex-start; margin-top:6px}
@media (max-width:900px){.vs-grid{grid-template-columns:1fr}}

/* ---------- Value stack ---------- */
.stack-list{display:flex; flex-direction:column; gap:18px; max-width:960px; margin:0 auto}
.stack-item{display:grid; grid-template-columns:64px 1fr; gap:22px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:30px 32px; transition:transform .35s ease, box-shadow .35s ease, border-color .35s}
.stack-item:hover{transform:translateY(-3px); border-color:transparent; box-shadow:var(--shadow)}
.stack-ico{width:64px; height:64px; border-radius:16px; background:var(--grad-soft); display:grid; place-items:center; position:relative; overflow:hidden}
.stack-ico::after{content:""; position:absolute; inset:auto -30% -50% auto; width:80%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,78,.28), transparent 65%); filter:blur(8px)}
.stack-ico svg{width:30px; height:30px; stroke:var(--coral); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1}
.stack-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.stack-head h3{margin:0}
.stack-val{font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--muted); background:var(--cream);
  padding:6px 12px; border-radius:999px; white-space:nowrap; text-decoration:line-through; text-decoration-color:rgba(100,116,139,.5)}
.stack-body > p{color:var(--muted); font-size:.97rem; margin:0 0 14px}
.stack-body > p strong{color:var(--ink)}
.stack-sub{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.stack-sub li{position:relative; padding-left:26px; font-size:.9rem; color:var(--ink-2)}
.stack-sub li::before{content:"✓"; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:.62rem; display:grid; place-items:center; font-weight:800}
@media (max-width:640px){
  .stack-item{grid-template-columns:1fr; gap:16px; padding:26px 22px}
  .stack-ico{width:52px; height:52px}
}

/* ---------- Stack total ---------- */
.stack-total{max-width:960px; margin:26px auto 0; background:var(--ink); color:#fff; border-radius:var(--r);
  padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden}
.stack-total::before{content:""; position:absolute; inset:-50% auto auto -10%; width:460px; height:460px;
  background:radial-gradient(circle, rgba(63,193,201,.28), transparent 62%); filter:blur(40px)}
.stack-total::after{content:""; position:absolute; inset:auto -10% -60% auto; width:460px; height:460px;
  background:radial-gradient(circle, rgba(255,90,78,.3), transparent 62%); filter:blur(40px)}
.stack-total > *{position:relative; z-index:1}
.stack-total-label{display:block; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#94A3B8; margin-bottom:6px}
.stack-total-strike{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; color:#CBD5E1; text-decoration:line-through; text-decoration-color:var(--coral); text-decoration-thickness:2px}
.stack-total-num{display:block; font-family:'Space Grotesk',sans-serif; font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em}
.stack-total-num small{font-size:1.1rem; font-weight:600; -webkit-text-fill-color:#fff; color:#fff}
.stack-total-note{display:block; font-size:.82rem; color:#94A3B8; margin-top:6px}
@media (max-width:820px){.stack-total{flex-direction:column; align-items:flex-start; text-align:left}.stack-total .btn{width:100%; justify-content:center}}

.usage-note{max-width:820px; margin:22px auto 0; text-align:center; font-size:.92rem; color:var(--muted); line-height:1.7}
.usage-note strong{color:var(--ink)}

/* ---------- Timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1000px; margin:0 auto}
.tl-step{position:relative; background:var(--cream); border-radius:var(--r); padding:32px 28px; transition:transform .4s, background .4s, box-shadow .4s}
.tl-step:hover{transform:translateY(-4px); background:#fff; box-shadow:var(--shadow)}
.tl-when{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--grad); padding:6px 14px; border-radius:999px; margin-bottom:16px}
.tl-step h3{margin-bottom:10px}
.tl-step p{color:var(--muted); font-size:.95rem; margin:0}
@media (max-width:900px){.timeline{grid-template-columns:1fr}}

.how-note{max-width:820px; margin:34px auto 0; background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:16px; padding:22px 26px; font-size:.94rem; color:var(--muted); line-height:1.7}
.how-note strong{color:var(--ink)}

/* ---------- Proof ---------- */
.proof-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:26px; margin-top:34px; align-items:stretch}
.proof-card{position:relative; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:block;
  transition:transform .45s ease, box-shadow .45s ease}
.proof-card:hover{transform:translateY(-5px); box-shadow:0 40px 100px -30px rgba(255,90,78,.4)}
.proof-card img{width:100%; height:calc(100% - 90px); min-height:320px; object-fit:cover; object-position:top center; display:block; background:#F1F5F9}
.proof-cap{padding:18px 22px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line)}
.proof-cap strong{font-family:'Space Grotesk',sans-serif; color:var(--ink); font-size:1.02rem}
.proof-cap span{font-size:.85rem; color:var(--muted)}
.proof-side{display:flex; flex-direction:column; gap:22px}

.demo-card{background:var(--ink); color:#fff; border-radius:var(--r); padding:32px; position:relative; overflow:hidden; flex:1}
.demo-card::before{content:""; position:absolute; inset:-40% -30% auto auto; width:380px; height:380px;
  background:radial-gradient(circle, rgba(63,193,201,.35), transparent 62%); filter:blur(38px)}
.demo-card > *{position:relative; z-index:1}
.demo-badge{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:var(--grad); color:#fff; padding:6px 13px; border-radius:999px; margin-bottom:16px}
.demo-card h3{color:#fff; margin-bottom:10px}
.demo-card p{color:#CBD5E1; font-size:.93rem; margin:0 0 20px}
.demo-btn{background:#fff !important; color:var(--ink) !important; width:100%; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:1.05rem}
.demo-note{display:block; text-align:center; font-size:.8rem; color:#94A3B8; margin-top:12px}

.tcard-mini{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px}
.tcard-mini p{color:var(--ink-2); font-size:.97rem; line-height:1.6; margin:12px 0 18px}
@media (max-width:900px){
  .proof-grid{grid-template-columns:1fr}
  .proof-card img{min-height:220px; height:auto}
}

/* ---------- Who it's for ---------- */
.who-box{display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.who-col{padding:38px 36px}
.who-col:first-child{border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(255,239,236,.55),transparent)}
.who-col h3{margin-bottom:20px}
.who-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.who-list li{position:relative; padding-left:32px; font-size:.94rem; color:var(--ink-2); line-height:1.55}
.who-list li::before{position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:800}
.who-yes li::before{content:"✓"; background:var(--grad); color:#fff}
.who-no li::before{content:"×"; background:#F1F5F9; color:#94A3B8; font-size:.95rem}
@media (max-width:820px){
  .who-box{grid-template-columns:1fr}
  .who-col:first-child{border-right:none; border-bottom:1px solid var(--line)}
}

/* ---------- Add-ons ---------- */
.addon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch}
.addon{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 26px;
  display:flex; flex-direction:column; transition:transform .4s, box-shadow .4s}
.addon:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.addon--feature{border-color:var(--coral); box-shadow:0 20px 50px -24px rgba(255,90,78,.4)}
.addon-tag{position:absolute; top:-11px; left:26px; background:var(--grad); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; padding:5px 13px; border-radius:999px; text-transform:uppercase}
.addon h3{font-size:1.15rem; margin-bottom:8px}
.addon-price{font-family:'Space Grotesk',sans-serif; font-size:2.1rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-bottom:12px}
.addon-price small{font-size:.9rem; color:var(--muted); font-weight:400}
.addon > p{color:var(--muted); font-size:.9rem; margin:0 0 16px}
.addon ul{list-style:none; padding:0; margin:0 0 4px; display:flex; flex-direction:column; gap:8px; margin-top:auto}
.addon ul li{position:relative; padding-left:22px; font-size:.86rem; color:var(--ink-2)}
.addon ul li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--coral); font-weight:800; font-size:.8rem}
.addon-note{text-align:center; margin-top:26px; font-size:.9rem; color:var(--muted)}
@media (max-width:1000px){.addon-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.addon-grid{grid-template-columns:1fr}}

/* ---------- Guarantee ---------- */
.guarantee{display:grid; grid-template-columns:180px 1fr; gap:44px; align-items:start; max-width:1000px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:44px 46px; box-shadow:var(--shadow)}
.guarantee-seal{width:170px; height:170px; border-radius:50%; background:var(--grad); color:#fff; display:grid;
  place-items:center; align-content:center; text-align:center; box-shadow:var(--shadow-lg); position:relative}
.guarantee-seal::after{content:""; position:absolute; inset:9px; border:2px dashed rgba(255,255,255,.45); border-radius:50%}
.g-num{font-family:'Space Grotesk',sans-serif; font-size:3.4rem; font-weight:800; line-height:1}
.g-word{font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; margin-top:2px}
.guarantee h2{font-size:clamp(1.5rem,2.8vw,2.2rem); margin-bottom:14px}
.guarantee p{color:var(--muted); margin:0 0 14px; line-height:1.75}
.guarantee-fine{font-size:.9rem; padding-top:14px; border-top:1px solid var(--line)}
.guarantee-fine strong{color:var(--ink)}
@media (max-width:760px){
  .guarantee{grid-template-columns:1fr; gap:26px; padding:34px 26px; text-align:center}
  .guarantee-seal{margin:0 auto; width:140px; height:140px}
  .guarantee-fine{text-align:left}
}

.cta-micro{margin-top:16px; font-size:.85rem; color:#94A3B8}

/* ---------- Footer disclaimer ---------- */
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.08); padding-top:26px; margin-bottom:26px;
  font-size:.78rem; line-height:1.7; color:#64748B; max-width:900px}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(14px); border-top:1px solid var(--line); box-shadow:0 -8px 30px -12px rgba(15,23,42,.2);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sticky-cta.show{transform:none}
.sticky-price strong{font-family:'Space Grotesk',sans-serif; font-size:1.4rem; color:var(--ink); font-weight:800}
.sticky-price span{font-size:.78rem; color:var(--muted); margin-left:3px}
.sticky-cta .btn{padding:13px 22px; font-size:.92rem}
@media (max-width:820px){.sticky-cta{display:flex}}

/* ---------- Exit intent ---------- */
.exit-overlay{position:fixed; inset:0; z-index:200; background:rgba(11,18,32,.72); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .3s ease}
.exit-overlay.show{opacity:1}
.exit-overlay[hidden]{display:none}
.exit-modal{position:relative; background:#fff; border-radius:26px; padding:48px 46px; max-width:560px; width:100%;
  text-align:center; box-shadow:0 50px 120px -30px rgba(0,0,0,.5); transform:translateY(18px) scale(.97);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.exit-overlay.show .exit-modal{transform:none}
.exit-modal h2{font-size:clamp(1.6rem,3.4vw,2.3rem); margin:14px 0 14px}
.exit-modal p{color:var(--muted); margin:0 auto 26px; max-width:44ch; line-height:1.7}
.exit-modal p strong{color:var(--ink)}
.exit-modal .btn{width:100%; justify-content:center}
.exit-close{position:absolute; top:14px; right:18px; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--cream); color:var(--muted); font-size:1.5rem; line-height:1; transition:background .25s, color .25s}
.exit-close:hover{background:var(--coral); color:#fff}
.exit-decline{display:block; margin:16px auto 0; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.86rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.exit-decline:hover{color:var(--ink)}
@media (max-width:520px){.exit-modal{padding:38px 24px}}

/* ---------- Checkout / form pages ---------- */
.funnel-wrap{min-height:100vh; display:flex; flex-direction:column}
.funnel-bar{padding:22px 0; border-bottom:1px solid var(--line); background:#fff}
.funnel-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.funnel-secure{display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--muted); font-weight:500}
.funnel-secure svg{width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:2}

.steps{display:flex; align-items:center; gap:10px; justify-content:center; margin:0 auto 30px}
.step-dot{display:flex; align-items:center; gap:9px; font-size:.84rem; font-weight:600; color:var(--muted)}
.step-dot i{width:26px; height:26px; border-radius:50%; background:var(--cream); color:var(--muted); display:grid;
  place-items:center; font-size:.78rem; font-style:normal; font-weight:800}
.step-dot.on{color:var(--ink)}
.step-dot.on i{background:var(--grad); color:#fff}
.step-line{width:40px; height:2px; background:var(--line)}

.checkout-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; padding:52px 0 80px}
.checkout-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:38px; box-shadow:var(--shadow)}
.checkout-card h1{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:8px}
.checkout-sub{color:var(--muted); margin:0 0 28px; font-size:.97rem}

.f-field{margin-bottom:18px}
.f-field label{display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:.03em}
.f-field label .req{color:var(--coral)}
.f-field input, .f-field select, .f-field textarea{width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem; background:#fff; color:var(--ink); transition:border-color .22s, box-shadow .22s}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,90,78,.1)}
.f-field input.err, .f-field select.err{border-color:#DC2626; box-shadow:0 0 0 4px rgba(220,38,38,.08)}
.f-err{display:none; font-size:.8rem; color:#DC2626; margin-top:6px; font-weight:500}
.f-field.showerr .f-err{display:block}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.f-hint{font-size:.8rem; color:var(--muted); margin-top:6px}
.f-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.bump{margin:24px 0; border:2px dashed var(--coral); border-radius:16px; padding:20px 22px; background:linear-gradient(135deg,#FFF7F2,#FFF)}
.bump label{display:flex; gap:14px; align-items:flex-start; cursor:pointer}
.bump input[type=checkbox]{width:22px; height:22px; margin-top:2px; accent-color:var(--coral); flex:0 0 22px; cursor:pointer}
.bump-body strong{display:block; font-family:'Space Grotesk',sans-serif; color:var(--ink); font-size:1.02rem; margin-bottom:4px}
.bump-body span{font-size:.89rem; color:var(--muted); line-height:1.6; display:block}

.consent{margin:20px 0 24px; font-size:.8rem; color:var(--muted); line-height:1.65; background:var(--cream);
  border-radius:12px; padding:16px 18px}
.consent a{color:var(--coral); text-decoration:underline; text-underline-offset:2px}

.btn-submit{width:100%; justify-content:center; font-size:1.08rem; padding:20px}
.btn-submit[disabled]{opacity:.65; cursor:not-allowed}
.submit-note{text-align:center; font-size:.82rem; color:var(--muted); margin-top:14px}

/* order summary */
.summary{position:sticky; top:100px}
.summary-card{background:var(--ink); color:#fff; border-radius:var(--r); padding:34px; position:relative; overflow:hidden}
.summary-card::before{content:""; position:absolute; inset:-40% -30% auto auto; width:380px; height:380px;
  background:radial-gradient(circle, rgba(255,90,78,.3), transparent 62%); filter:blur(38px)}
.summary-card > *{position:relative; z-index:1}
.summary-card h2{color:#fff; font-size:1.3rem; margin-bottom:20px}
.sum-list{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px}
.sum-list li{position:relative; padding-left:26px; font-size:.92rem; color:#CBD5E1}
.sum-list li::before{content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:.6rem; display:grid; place-items:center; font-weight:800}
.sum-line{display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.94rem}
.sum-line span:last-child{font-weight:600; color:#fff}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:6px; border-top:2px solid rgba(255,255,255,.2)}
.sum-total-label{font-family:'Space Grotesk',sans-serif; font-size:1.02rem; color:#fff; font-weight:600}
.sum-total-num{font-family:'Space Grotesk',sans-serif; font-size:2.3rem; font-weight:800; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.sum-total-num small{font-size:.9rem; -webkit-text-fill-color:#94A3B8; color:#94A3B8; font-weight:500}
.summary-guarantee{margin-top:20px; padding:16px 18px; background:rgba(255,255,255,.07); border-radius:14px; font-size:.85rem; color:#CBD5E1; line-height:1.6}
.summary-guarantee strong{color:#fff}
@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr; gap:30px; padding:34px 0 60px}
  .summary{position:static; order:-1}
}

/* ---------- Intake form (multi-step) ---------- */
.intake-shell{max-width:820px; margin:0 auto; padding:44px 0 90px}
.intake-progress{height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:12px}
.intake-progress i{display:block; height:100%; width:0; background:var(--grad); border-radius:99px; transition:width .45s cubic-bezier(.2,.8,.2,1)}
.intake-count{font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:26px; display:flex; justify-content:space-between}
.intake-panel{display:none; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:38px; box-shadow:var(--shadow)}
.intake-panel.on{display:block; animation:panelIn .4s ease}
@keyframes panelIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.intake-panel h2{font-size:clamp(1.35rem,2.5vw,1.9rem); margin-bottom:8px}
.intake-panel .panel-sub{color:var(--muted); margin:0 0 26px; font-size:.95rem}
.intake-nav{display:flex; justify-content:space-between; gap:14px; margin-top:30px}
.intake-nav .btn{min-width:130px; justify-content:center}
.btn-back{background:#fff; color:var(--muted); border:1px solid var(--line)}
.btn-back:hover{color:var(--ink); border-color:var(--ink)}

.choice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:640px){.choice-grid{grid-template-columns:repeat(2,1fr)}}
.choice{position:relative; cursor:pointer}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice span{display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px; padding:12px 10px;
  border:1px solid var(--line); border-radius:14px; font-size:.9rem; font-weight:600; color:var(--ink-2);
  transition:border-color .2s, background .2s, color .2s, transform .2s}
.choice:hover span{border-color:var(--coral); transform:translateY(-2px)}
.choice input:checked + span{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 12px 26px -12px rgba(255,90,78,.55)}

.swatches{display:flex; gap:12px; flex-wrap:wrap}
.swatch{cursor:pointer; position:relative}
.swatch input{position:absolute; opacity:0; pointer-events:none}
.swatch span{display:block; width:64px; height:64px; border-radius:14px; border:3px solid transparent; box-shadow:0 4px 12px rgba(15,23,42,.14); transition:transform .2s, border-color .2s}
.swatch:hover span{transform:translateY(-3px)}
.swatch input:checked + span{border-color:var(--ink); transform:translateY(-3px)}

.drop{border:2px dashed var(--line); border-radius:16px; padding:30px; text-align:center; cursor:pointer;
  transition:border-color .25s, background .25s}
.drop:hover, .drop.over{border-color:var(--coral); background:var(--cream)}
.drop svg{width:34px; height:34px; stroke:var(--coral); fill:none; stroke-width:1.6; margin-bottom:10px}
.drop strong{display:block; color:var(--ink); font-family:'Space Grotesk',sans-serif; margin-bottom:4px}
.drop span{font-size:.85rem; color:var(--muted)}
.drop input{display:none}
.filelist{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.filepill{display:inline-flex; align-items:center; gap:8px; background:var(--cream); border-radius:999px; padding:7px 14px; font-size:.82rem; color:var(--ink-2)}
.filepill b{font-weight:600}

/* ---------- Service selector (intake) ---------- */
.svc-list{display:flex; flex-direction:column; gap:14px}
.svc{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:flex-start;
  border:1px solid var(--line); border-radius:18px; padding:22px 24px; background:#fff; cursor:pointer;
  transition:border-color .25s, box-shadow .25s, background .25s}
.svc:hover{border-color:var(--coral)}
.svc.on{border-color:var(--coral); background:linear-gradient(135deg,#FFF7F2,#fff); box-shadow:0 14px 34px -22px rgba(255,90,78,.55)}
.svc-check{width:26px; height:26px; border-radius:8px; border:2px solid var(--line); display:grid; place-items:center;
  flex:0 0 26px; margin-top:2px; transition:background .2s, border-color .2s}
.svc.on .svc-check{background:var(--grad); border-color:transparent}
.svc-check svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s}
.svc.on .svc-check svg{opacity:1}
.svc input{position:absolute; opacity:0; pointer-events:none}
.svc-body strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.06rem; color:var(--ink); margin-bottom:4px}
.svc-body span{font-size:.9rem; color:var(--muted); line-height:1.6; display:block}
.svc-state{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px;
  border-radius:999px; white-space:nowrap; background:#F1F5F9; color:#94A3B8; align-self:center}
.svc.on .svc-state{background:var(--grad); color:#fff}
@media (max-width:560px){
  .svc{grid-template-columns:auto 1fr; gap:14px; padding:18px}
  .svc-state{grid-column:2; justify-self:start; margin-top:8px}
}
.svc-note{margin-top:22px; font-size:.9rem; color:var(--muted); background:var(--cream); border-radius:14px; padding:18px 20px; line-height:1.7}
.svc-note strong{color:var(--ink)}

/* ---------- Thank you / upsell ---------- */
.center-shell{max-width:760px; margin:0 auto; padding:60px 0 90px; text-align:center}
.tick{width:96px; height:96px; border-radius:50%; background:var(--grad); display:grid; place-items:center; margin:0 auto 26px;
  box-shadow:var(--shadow-lg); animation:tickPop .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tickPop{from{transform:scale(.4); opacity:0}to{transform:none; opacity:1}}
.tick svg{width:46px; height:46px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.next-list{text-align:left; max-width:560px; margin:34px auto 0; display:flex; flex-direction:column; gap:16px}
.next-item{display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px}
.next-num{flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:.9rem}
.next-item strong{display:block; color:var(--ink); font-family:'Space Grotesk',sans-serif; margin-bottom:3px}
.next-item span{font-size:.9rem; color:var(--muted); line-height:1.6}

.upsell-card{background:#fff; border:2px solid var(--coral); border-radius:var(--r); padding:44px; text-align:left;
  box-shadow:0 30px 70px -30px rgba(255,90,78,.45); max-width:640px; margin:0 auto}
.upsell-price{display:flex; align-items:baseline; gap:12px; margin:18px 0}
.upsell-was{font-size:1.1rem; color:var(--muted); text-decoration:line-through}
.upsell-now{font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:800; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.upsell-now small{font-size:.95rem; -webkit-text-fill-color:var(--muted); color:var(--muted); font-weight:500}
.upsell-decline{display:block; margin:18px auto 0; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.9rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-align:center; width:100%}
.upsell-decline:hover{color:var(--ink)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}