:root{
  --night:#1b1428;
  --night-2:#251b37;
  --night-3:#31244a;
  --cream:#f7f1e6;
  --ink:#22182f;
  --mist:#d4c9e6;
  --lime:#c9f26b;
  --lilac:#c6a7ff;
  --violet:#5b2fa8;
  --radius:1.25rem;
  --wrap:min(72rem,100% - 2.5rem);
  --step--1:clamp(.875rem,.84rem + .18vw,.975rem);
  --step-0:clamp(1rem,.96rem + .22vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.45rem,1.25rem + 1vw,2rem);
  --step-3:clamp(1.8rem,1.4rem + 2vw,2.9rem);
  --step-4:clamp(2.2rem,1.6rem + 3.2vw,4.1rem);
  --space:clamp(3.5rem,2.5rem + 5vw,7rem);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
html,body{overflow-x:clip}
body{background:var(--night);color:var(--cream);font:400 var(--step-0)/1.65 var(--body);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--lime);text-underline-offset:.2em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:.3rem}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.25}
p,li{text-wrap:pretty}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--lime);color:var(--night);padding:.6rem 1rem;border-radius:.5rem;font-weight:700;z-index:10}
.skip:focus{top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.8rem 1.4rem;border-radius:999px;background:var(--lime);color:var(--night);font-weight:700;text-decoration:none;border:2px solid var(--lime);transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 .5rem 1.5rem rgb(201 242 107 / .25)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--mist)}
.btn.ghost:hover{box-shadow:none;border-color:var(--lime);color:var(--lime)}
.light .btn.ghost{color:var(--ink);border-color:var(--ink)}
.light .btn.ghost:hover{color:var(--violet);border-color:var(--violet)}
.eyebrow{font-size:var(--step--1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac)}
.light .eyebrow{color:var(--violet)}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgb(27 20 40 / .92);backdrop-filter:blur(8px);border-bottom:1px solid var(--night-3)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{white-space:nowrap;display:flex;align-items:center;gap:.6rem;color:var(--cream);text-decoration:none;font-family:var(--display);font-weight:700;font-size:var(--step-1)}
.brand svg{width:2.2rem;height:2.2rem}
.top nav ul{display:flex;gap:1.25rem;list-style:none;padding:0}
.top nav a{color:var(--cream);text-decoration:none;font-weight:600;font-size:var(--step--1)}
.top nav a:hover{color:var(--lime)}
.top .btn{white-space:nowrap;min-height:2.6rem;padding:.5rem 1.1rem;font-size:var(--step--1)}
@media (max-width:52rem){.top nav{display:none}}
@media (max-width:26rem){.brand span{font-size:1.05rem}.brand img{width:1.8rem;height:1.8rem}.top .btn{padding:.45rem .9rem}}
@media (max-width:21rem){.brand span{font-size:.95rem}.top .btn{padding:.4rem .7rem;font-size:.82rem}}

/* hero */
.hero{padding-block:clamp(2.5rem,2rem + 4vw,5.5rem) var(--space);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60rem 30rem at 85% 10%,rgb(198 167 255 / .18),transparent 60%),radial-gradient(40rem 25rem at 0% 90%,rgb(201 242 107 / .08),transparent 60%)}
.hero .wrap{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56rem){.hero .wrap{grid-template-columns:1.25fr .75fr}}
.hero h1 em{font-style:italic;color:var(--lime)}
.hero .lede{font-size:var(--step-1);color:var(--mist);margin-top:1.25rem;max-width:36rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero .fine{margin-top:1rem;font-size:var(--step--1);color:var(--mist)}
.mascot{width:min(26rem,85%);margin-inline:auto}
@media (prefers-reduced-motion:no-preference){.mascot{animation:float 6s ease-in-out infinite}}
@keyframes float{50%{transform:translateY(-10px)}}

/* sections */
section{padding-block:var(--space)}
.light{background:var(--cream);color:var(--ink)}
.light a{color:var(--violet)}
.light .btn{color:var(--night)}
.head{max-width:44rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.head p{margin-top:1rem;color:inherit;opacity:.9}

.steps{display:grid;gap:1.25rem;list-style:none;padding:0;counter-reset:step}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step;background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:.4rem .4rem 0 var(--ink)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--violet);color:#fff;font-family:var(--display);font-weight:700;font-size:1.2rem;margin-bottom:1rem}
.steps p{margin-top:.5rem}

/* slider */
.compare{max-width:56rem;margin-inline:auto}
.frame{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--night-3);aspect-ratio:390/720;background:var(--night-2);max-width:26rem;margin-inline:auto}
@media (min-width:40.01rem){.frame{aspect-ratio:16/10;max-width:none}}
.pane{position:absolute;inset:0}
.pane picture,.pane img{display:block;width:100%;height:100%}
.pane img{object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.pane.after{clip-path:inset(0 0 0 var(--split,50%))}
.tag{position:absolute;bottom:.75rem;box-shadow:0 2px 8px rgb(0 0 0/.3);padding:.25rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700;z-index:2}
.before .tag{left:.75rem;background:#e9e3d6;color:var(--ink)}
.after .tag{right:.75rem;background:var(--lime);color:var(--night)}
.frame{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:22px;transform:translateX(-50%);z-index:3;outline:none;filter:drop-shadow(0 0 10px rgb(201 242 107 / .55))}
.handle .branch{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.handle:focus-visible .grip{outline:3px solid var(--lime);outline-offset:3px}
.handle .wand-tip svg{max-width:none;width:44px;height:auto}
.handle .wand-tip{z-index:2;position:absolute;top:6px;left:50%;transform:translateX(-26%);filter:drop-shadow(0 0 10px rgb(201 242 107 / .9));pointer-events:none}
.handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;height:3rem;border-radius:50%;background:var(--lime);color:var(--night);border:3px solid var(--night);display:grid;place-items:center;font-size:1.3rem;box-shadow:0 .4rem 1.2rem rgb(0 0 0 / .4);transition:transform .15s ease}
.frame:hover .grip,.frame.dragging .grip{transform:translate(-50%,-50%) scale(1.12)}
@media (prefers-reduced-motion:no-preference){.handle .wand-tip svg{animation:tipglow 2.4s ease-in-out infinite}}
@keyframes tipglow{50%{transform:rotate(-8deg) scale(1.06)}}
.compare .note{font-size:var(--step--1);color:var(--mist);text-align:center;margin-top:.9rem}
/* before pane: sad listing */
.listing{background:#fff;color:#3b3b3b;border-radius:.9rem;width:min(34rem,92%);padding:clamp(.9rem,.6rem + 1.5vw,1.6rem);font-size:clamp(.82rem,.7rem + .6vw,1.1rem);line-height:1.4;box-shadow:0 1rem 2rem rgb(0 0 0 / .25)}
.listing b{display:block;font-size:1.25em;color:#1a1a1a}
.listing .stars{color:#9a6a00;font-weight:700}
.listing .row{border-top:1px solid #eee;padding-top:.5em;margin-top:.5em}
.listing .none{color:#b00020;font-weight:700}
/* after pane: mini site */
.mini{background:#fff;color:#14303b;border-radius:.9rem;width:min(34rem,92%);overflow:hidden;box-shadow:0 1rem 2rem rgb(0 0 0 / .3);font-size:clamp(.78rem,.66rem + .6vw,1.05rem);line-height:1.35}
.mini .bar{display:flex;justify-content:space-between;align-items:center;padding:.55rem .8rem;background:#0f5c6e;color:#fff;font-weight:700}
.mini .bar span{background:#ffd23f;color:#14303b;border-radius:999px;padding:.15rem .6rem;font-size:.85em}
.mini .body{padding:.9rem .9rem 1rem}
.mini h4{font-family:var(--display);font-size:1.45em;line-height:1.15;color:#0b3a46}
.mini .rate{margin:.35rem 0 .6rem;font-weight:700;color:#7a5600}
.mini .chips{display:flex;flex-wrap:wrap;gap:.35rem}
.mini .chips i{font-style:normal;background:#e6f3f5;border-radius:.4rem;padding:.2rem .45rem}
.mini .call{display:block;margin-top:.75rem;background:#0f5c6e;color:#fff;text-align:center;border-radius:.5rem;padding:.5rem;font-weight:700}

/* features */
.cards{display:grid;gap:1.25rem}
@media (min-width:44rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--night-2);border:1px solid var(--night-3);border-radius:var(--radius);padding:1.5rem}
.card p{color:var(--mist);margin-top:.5rem}
.card .ico{font-size:1.6rem;line-height:1;margin-bottom:.75rem}

/* pricing */
.price{display:grid;gap:1.5rem;align-items:start}
@media (min-width:56rem){.price{grid-template-columns:1.2fr .8fr}}
.plan{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(1.5rem,1rem + 2vw,2.5rem);box-shadow:.5rem .5rem 0 var(--violet)}
.plan .amt{font-family:var(--display);font-size:var(--step-4);font-weight:700;line-height:1;margin:.5rem 0}
.plan .amt small{font-size:var(--step-0);font-family:var(--body);font-weight:600;opacity:.8}
.plan ul{padding-left:1.2rem;margin:1.25rem 0;display:grid;gap:.4rem}
.plan .btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.plan.care{box-shadow:.5rem .5rem 0 var(--ink)}
.plan .fine{font-size:var(--step--1);margin-top:1rem;opacity:.85}
.guarantee{margin-top:1.5rem;padding:1.25rem 1.5rem;border-radius:var(--radius);background:#efe6ff;border:2px dashed var(--violet)}

/* faq */
.faq{max-width:48rem;display:grid;gap:.75rem}
.faq details{background:var(--night-2);border:1px solid var(--night-3);border-radius:1rem;padding:0 1.25rem}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-weight:700;font-size:var(--step-1);font-family:var(--display);position:relative;min-height:2.75rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--lime)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:1.2rem;color:var(--mist)}

/* contact */
.contact{text-align:center}
.contact .wrap{max-width:44rem}
.contact p{margin-top:1rem;color:var(--mist)}
.contact.light p{color:var(--ink)}
.contact > .wrap > .btn{margin-top:2rem}
.contact .mail{display:block;margin-top:1rem;font-weight:700;word-break:break-word}

/* footer */
footer{border-top:1px solid var(--night-3);padding-block:2.5rem;font-size:var(--step--1);color:var(--mist)}
footer .wrap{display:grid;gap:1.25rem}
@media (min-width:48rem){footer .wrap{grid-template-columns:1fr auto;align-items:end}}
footer ul{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0}
footer .sign{font-family:var(--display);font-style:italic;color:var(--cream);font-size:var(--step-0)}

/* legal pages */
.legal{padding-block:clamp(2.5rem,2rem + 3vw,5rem)}
.legal .wrap{max-width:46rem}
.legal h1{font-size:var(--step-3)}
.legal h2{font-size:var(--step-2);margin-top:2.25rem}
.legal p,.legal ul{margin-top:1rem;color:var(--mist)}
.legal ul{padding-left:1.25rem}

/* ===== fun pass ===== */
/* twinkling stars */
.stars{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:var(--c,#f7f1e6);opacity:.5;box-shadow:0 0 6px var(--c,#f7f1e6)}
.stars i.spark{width:auto;height:auto;background:none;box-shadow:none;color:var(--lime);font-size:var(--s,14px);line-height:1;opacity:.75}
@media (prefers-reduced-motion:no-preference){.stars i{animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}}
@keyframes twinkle{50%{opacity:.08;transform:scale(.6)}}

/* squiggle under the hero highlight */
.hero h1 em{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c10-6 18 4 28-1s18-6 28 0 18 5 28-1 18-5 30 1' fill='none' stroke='%23c6a7ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom left/100% .32em no-repeat;padding-bottom:.18em}

/* stickers */
.art{position:relative;width:min(26rem,85%);margin-inline:auto}
.art .mascot{width:100%}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;width:clamp(6.5rem,5.5rem + 3vw,7.75rem);aspect-ratio:1;border-radius:50%;font-family:var(--display);font-weight:700;font-size:clamp(.78rem,.7rem + .3vw,.92rem);line-height:1.1;padding:.6rem;border:3px dashed currentColor;box-shadow:0 .5rem 1.25rem rgb(0 0 0 / .35);transition:transform .25s ease;z-index:2}
.sticker:hover{transform:rotate(0deg) scale(1.08)}
.sticker.s1{background:var(--lime);color:var(--night);top:4%;left:-6%;rotate:-14deg}
.sticker.s2{background:var(--lilac);color:var(--night);bottom:6%;right:-6%;rotate:12deg}
@media (max-width:30rem){.sticker.s1{left:-2%}.sticker.s2{right:-2%}}

/* marquee of curses */
.ticker-wrap{overflow:hidden;position:relative;z-index:2;margin-block:-1.25rem;padding-block:1.25rem}
.ticker{background:var(--lime);color:var(--night);overflow:hidden;border-block:3px solid var(--night);padding-block:.85rem;rotate:-1.2deg;width:104%;margin-left:-2%}
.ticker ul{display:flex;gap:2.5rem;width:max-content;list-style:none;padding:0;font-family:var(--display);font-weight:700;font-size:var(--step-1);white-space:nowrap}
.ticker li::after{content:"✦";margin-left:2.5rem}
@media (prefers-reduced-motion:no-preference){.ticker ul{animation:marquee 45s linear infinite}.ticker:hover ul{animation-play-state:paused}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* wavy dividers */
.wave{display:block;margin-bottom:-1px;width:100%;height:clamp(2rem,1.5rem + 3vw,4.5rem)}
.wave.to-light{background:var(--night);color:var(--cream)}
.wave.to-dark{background:var(--cream);color:var(--night)}
.light+.wave,.wave+section{margin-top:0}
section.light,section.after-wave{padding-top:clamp(2.5rem,2rem + 3vw,5rem)}

/* spell cards */
.steps li:nth-child(1){rotate:-1.5deg}
.steps li:nth-child(2){rotate:1deg}
.steps li:nth-child(3){rotate:-.75deg}
.steps li{transition:rotate .25s ease,transform .25s ease}
.steps li:hover{rotate:0deg;transform:translateY(-4px)}
.card{transition:transform .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--lilac)}
@media (prefers-reduced-motion:no-preference){.card:hover .ico{animation:wiggle .5s ease}}
@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

/* price sticker */
.plan{position:relative}
.plan .flag{position:absolute;top:-1rem;right:1rem;background:var(--lime);color:var(--night);border:2px solid var(--ink);border-radius:999px;padding:.3rem .9rem;font-weight:700;font-size:var(--step--1);rotate:4deg}

/* faq star */
.faq summary::after{content:"✦";transition:transform .3s ease}
.faq details[open] summary::after{content:"✦";transform:translateY(-50%) rotate(135deg) scale(1.2)}

/* click sparkles */
.zap{position:fixed;pointer-events:none;color:var(--lime);font-size:1rem;z-index:50;animation:zap .7s ease-out forwards}
@keyframes zap{to{transform:translate(var(--x),var(--y)) scale(.3) rotate(160deg);opacity:0}}

/* contact form */
.ask{display:grid;gap:1rem;margin-top:2rem;text-align:left}
.ask .row2{display:grid;gap:1rem}
@media (min-width:36rem){.ask .row2{grid-template-columns:1fr 1fr}}
.ask label{display:grid;gap:.35rem;font-weight:700;font-size:var(--step--1)}
.ask .opt{font-weight:400;opacity:.8}
.ask input{font:inherit;font-weight:400;font-size:1rem;min-height:3rem;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:.8rem;background:#fff;color:var(--ink);width:100%}
.ask input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.ask .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ask .btn{justify-self:start;margin-top:.25rem}
.ask .btn:disabled{opacity:.7;cursor:wait}
.ask .status{min-height:1.5em;font-weight:700;margin:0}
.contact .alt{margin-top:1.5rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}