:root{--stage-width:480px;--sticky-height:82px;--ink:#241440;--purple:#32185d;--accent:#6843a6;--muted:#625a70;--lilac:#ece4ff;--paper:#fcfaf6;--lime:#e8fa9b;--line:#e4dce9;--safe:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{background:#e9e2ee;scroll-behavior:smooth;scroll-padding:1rem 0 calc(var(--sticky-height) + var(--safe) + 1rem)}
body{width:100%;max-width:var(--stage-width);min-height:100vh;margin:0 auto;background:var(--paper);box-shadow:0 0 28px #26173e19;color:var(--ink);font:1rem/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.home{padding-bottom:calc(var(--sticky-height) + var(--safe))}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.2em}
button,input,textarea{font:inherit}
button,summary{cursor:pointer}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
p+p{margin-top:.8rem}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.055em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.5rem,11.5vw,3.6rem)}
h2{font-size:clamp(2.1rem,8.3vw,2.9rem)}
h3{font-size:1.07rem;line-height:1.2}
h1 em{color:var(--accent);font-weight:inherit}
:focus-visible{outline:3px solid #7948cb;outline-offset:3px}
.shell{width:calc(100% - 32px);margin-inline:auto}
.skip,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{clip-path:none;width:auto;height:auto;top:5px;left:5px;z-index:10;background:white;padding:10px}
.promo{background:var(--purple);color:white;text-align:center;padding:8px 10px;font-size:.65rem;letter-spacing:.14em;font-weight:800}
.promo span{color:var(--lime);padding-inline:.25rem}
.header{border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-height:62px}
.brand{font-weight:850;font-size:clamp(.77rem,3.5vw,1.03rem);display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;overflow-wrap:anywhere}
.brand-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;background:var(--purple);color:var(--lime);flex:none;font-size:1.08rem}
.hero{display:grid;gap:1.15rem;padding-block:1.55rem 1.3rem}
.eyebrow{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:850;letter-spacing:.17em;margin-bottom:.8rem}
.eyebrow>span{width:.6rem;height:.6rem;border-radius:100%;background:#a46ae1}
.lead{color:var(--muted);max-width:44ch;margin-top:1rem}
.hero-commerce{padding:1rem;background:white;border:1px solid var(--line);border-radius:14px}
.hero-actions{display:grid;justify-items:center;gap:.6rem;margin-top:.85rem}
.hero-actions .button{width:100%}
.hero-actions .text-link{display:grid;place-items:center;min-height:44px}
.button{min-height:48px;border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.65rem 1.1rem;font-weight:850;text-decoration:none;line-height:1.2}
.primary{background:var(--lime);color:#202810;box-shadow:inset 0 0 0 1px #c7db73}
.primary:hover{background:#ddef84}
.text-link{font-size:.85rem;font-weight:800}
.hero-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.8rem}
.hero-price>b{font-size:1.25rem}
.hero-price>span,.save{background:#eee5fc;color:var(--purple);border-radius:5px;padding:2px 6px;font-weight:700}
.hero-price small{width:100%;color:var(--muted);font-size:.73rem;margin-top:-.4rem}
.hero-art{position:relative;display:grid;place-items:center;isolation:isolate;overflow:hidden;aspect-ratio:1.16;border-radius:18px;background:radial-gradient(ellipse at 52% 78%,#e9daff 4%,#b78fec 42%,#513078 91%);color:white}
.hero-art::after{content:"";position:absolute;z-index:-1;left:10%;right:10%;bottom:12%;height:19%;border-radius:100%;background:#f1e5fc60;filter:blur(9px)}
.hero-art img{width:66%;max-height:78%;object-fit:contain;filter:drop-shadow(0 14px 13px #2d0d5870)}
.hero-art figcaption{position:absolute;inset:12px 14px auto;display:flex;justify-content:space-between;gap:8px;font-size:.59rem;font-weight:800;letter-spacing:.1em}
.hero-stamp{position:absolute;right:7%;bottom:8%;background:var(--lime);color:var(--purple);font-size:.62rem;line-height:1.05;font-weight:900;letter-spacing:.07em;padding:10px;border-radius:8px;transform:rotate(-7deg)}
.bubble{position:absolute;border:1px solid #fff7;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff5,transparent 45%);z-index:-1}
.b1{width:75px;height:75px;left:9%;top:26%}.b2{width:110px;height:110px;right:7%;top:21%}.b3{width:43px;height:43px;left:18%;bottom:18%}
.facts{background:var(--purple);color:white;padding-block:12px}
.facts .shell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.facts span{font-size:.66rem;color:var(--lime);display:flex;flex-direction:column;gap:.2rem}
.facts b{font-size:.76rem;color:white;line-height:1.2}
.section{padding-block:clamp(2.35rem,8vw,3.25rem)}
.section h2+p,.bundle-section h2+p,.order-section h2+p{margin-top:.8rem;color:var(--muted);max-width:48ch}
.bundle-section,.order-grid{display:grid;gap:1.4rem;align-items:start}
.pack-list{display:grid;gap:.55rem}
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
fieldset legend{font-size:.8rem;font-weight:800;margin-bottom:.5rem}
.pack{display:grid;position:relative;align-items:center;grid-template-columns:18px 36px minmax(0,1fr) auto;gap:.5rem;min-height:84px;background:white;border:1px solid var(--line);border-radius:11px;padding:.55rem .65rem;text-decoration:none;cursor:pointer}
.pack:hover,.pack:has(input:checked),.pack[aria-current=true]{border-color:var(--accent);background:#f2ebff}
.pack:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.pack input{position:absolute;width:1px;height:1px;opacity:0}
.radio-dot{width:17px;height:17px;border:1px solid #80728a;border-radius:50%;background:white}
.pack:has(input:checked) .radio-dot,.pack[aria-current=true] .radio-dot{background:var(--accent);box-shadow:inset 0 0 0 3px white;border-color:var(--accent)}
.pack img{height:52px;width:36px;object-fit:contain}
.pack-name,.pack-price{display:grid;justify-items:start;gap:.18rem;line-height:1.18}
.pack-name strong{font-size:.88rem}
.pack-price{justify-items:end;white-space:nowrap}
.pack-price del{font-size:.69rem;color:var(--muted)}
.pack-price b{font-size:1.01rem}
.pack-price small{font-size:.64rem}
.pack-price em{font-style:normal;color:#982553;font-weight:850;font-size:.7rem;text-transform:uppercase}
.badge{padding:.16rem .37rem;background:#f6e8a1;font-size:.57rem;text-transform:uppercase;font-weight:900;border-radius:4px}
.badge.best{background:var(--purple);color:#fff}
.routine{background:#e9dfff}
.step-grid{display:grid;gap:.9rem;margin-top:1.4rem}
.step{overflow:hidden;border-radius:14px;background:#fcfaff}
.step img{width:100%;height:auto;aspect-ratio:1.4;object-fit:cover}
.step div{padding:1rem}
.step-num{font-size:.7rem;font-weight:900;letter-spacing:.12em;color:var(--accent)}
.step h3{margin:.35rem 0}
.step p{color:var(--muted);font-size:.9rem}
.benefits{display:grid;gap:.65rem;list-style:none;margin:1.25rem 0 0;padding:0}
.benefit{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.85rem;align-items:start;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.benefit-number{display:grid;place-items:center;min-height:2.4rem;border-radius:10px;background:var(--lilac);color:var(--purple);font-size:.72rem;font-weight:850;font-variant-numeric:tabular-nums}
.benefit:nth-child(even) .benefit-number{background:var(--lime)}
.benefit h3{margin:.05rem 0 .28rem}
.benefit p{color:var(--muted);font-size:.88rem;line-height:1.45}
.comparison{background:#f0edf1}
table{width:100%;border-collapse:collapse;margin-top:1.35rem;background:#fff;font-size:.82rem;text-align:left}
th,td{padding:.6rem;border:1px solid var(--line)}
thead th{background:var(--purple);color:white}
.review,.review-compose,.faq{margin-top:1rem}
.review{border:1px solid var(--line);padding:1rem;border-radius:14px;background:white;overflow-wrap:anywhere}
.review h3,.review p{margin:.35rem 0}
.review small{font-size:.8rem;color:var(--muted)}
.rating{color:#6940a6;letter-spacing:.15em}
details{border-bottom:1px solid var(--line)}
summary{padding:.85rem .3rem;font-weight:800;min-height:48px}
details>p{padding:0 .3rem .8rem;color:var(--muted)}
.review-compose{border:1px solid var(--line);border-radius:12px;background:#fff}
.review-compose summary{padding-inline:1rem}
#review-form{display:grid;gap:.45rem;padding:0 1rem 1rem;max-width:550px}
#review-form>label{font-size:.85rem;font-weight:800}
#review-form>input,#review-form textarea{width:100%;border:1px solid #ad9fba;border-radius:8px;padding:.65rem;color:var(--ink);background:white}
#review-form .button{justify-self:start;margin-top:.35rem}
.stars{display:flex;flex-wrap:wrap;gap:.25rem}
.stars label{position:relative;width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:#766586;font-size:1.25rem}
.stars input{position:absolute;opacity:0}
.stars label:has(input:checked),.stars label:has(~label input:checked){background:#eadbff;color:var(--purple)}
.stars label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.order-section{background:var(--purple);color:white}
.order-section h2+p{color:#e9dcfa}
.order-card{border-radius:16px;background:white;color:var(--ink);padding:clamp(.65rem,3vw,1.25rem)}
.order-total{padding-bottom:1rem;line-height:1.2}
.order-total>small{display:block;color:var(--muted);margin-bottom:.25rem}
.order-total>strong{font-size:2rem;letter-spacing:-.05em}
.order-total del{font-size:.84rem;margin-left:.25rem}
.order-total .save{font-size:.75rem;white-space:nowrap}
.order-button{width:100%;margin:.9rem 0 .5rem}
.order-art{display:grid;place-items:center;margin-top:1rem;padding:.65rem;border-radius:14px;background:radial-gradient(#b899e5,#512f7d)}
.order-art img{width:136px;height:138px;object-fit:contain}
.footer{background:#211137;color:#f3eafa;padding-block:2rem}
.footer .brand-icon{background:#f0defe;color:var(--purple)}
.footer p{font-size:.85rem;margin-top:.5rem;overflow-wrap:anywhere}
.footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:1rem 0}
.footer nav a{font-size:.82rem;min-height:44px;display:flex;align-items:center}
.footer small{color:#d5c2e7}
.sticky{position:fixed;z-index:4;inset:auto 0 0;width:min(100%,var(--stage-width));margin-inline:auto;background:#281548;color:white;padding-bottom:var(--safe);box-shadow:0 -3px 14px #21113720}
.sticky-inner{min-height:var(--sticky-height);display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sticky-price small{display:block;color:#e6d9f2;font-size:.68rem;line-height:1.2}
.sticky-price strong{font-size:1.25rem;white-space:nowrap}
.sticky-price del{font-size:.73rem;color:#e6d9f2;margin-left:.2rem;white-space:nowrap}
.sticky .button{flex:1;min-width:0;min-height:52px;max-width:255px;padding-inline:.7rem;white-space:nowrap}
.storage{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(12px + var(--safe));width:min(calc(100% - 24px),360px);background:#fff;border:1px solid var(--line);box-shadow:0 8px 40px #200d4530;border-radius:14px;padding:.8rem;font-size:.8rem}
.home .storage{bottom:calc(var(--sticky-height) + 10px + var(--safe))}
.storage p{margin:.25rem 0 .5rem}
.storage>div{display:flex;gap:.4rem}
.storage button{min-height:44px;border:1px solid var(--line);background:#f3ecfb;color:var(--ink);border-radius:7px;padding:.35rem .65rem;font-weight:800}
.legal{padding-block:2.4rem 4rem}
.legal .eyebrow{margin-top:2rem}
.legal h1{font-size:clamp(2.4rem,10vw,3.5rem);text-wrap:wrap}
.legal .lead{max-width:58ch}
.legal section{margin:1.7rem 0;overflow-wrap:anywhere}
.legal section h2{font:800 1.15rem/1.25 system-ui,sans-serif;letter-spacing:normal;margin-bottom:.5rem}
@media(max-width:359px){
.shell{width:calc(100% - 24px)}
.sticky-price strong{font-size:1.12rem}
.sticky .button{font-size:.88rem}
.pack{grid-template-columns:15px 28px minmax(0,1fr) auto;gap:.36rem;padding-inline:.45rem}
.pack img{width:28px}
.radio-dot{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sticky-saving{font-size:.68rem;font-weight:850;color:var(--lime);white-space:nowrap}

:root{
  --backdrop:#e9f1fb;--paper:#fcfdff;
  --ink:#1d3050;--purple:#193f79;--accent:#25569c;--muted:#4b607a;
  --band:#e3edfa;--lilac:#edf4ff;--lime:#dceafd;--line:#cbdcf0;
  --art:repeating-linear-gradient(135deg,#eff6ff 0 28px,#e3eefc 28px 56px);
  --body-font:Tahoma,Verdana,sans-serif;--heading-font:Arial,Helvetica,sans-serif;
  --em-style:normal;
  --card-radius:10px;--control-radius:8px;--label-radius:4px;--art-radius:12px;
}

/* Theme overrides for the original 480px storefront. */
html{background:var(--backdrop)}
body{font-family:var(--body-font);box-shadow:0 0 28px #20202716}
h1,h2,.legal section h2{font-family:var(--heading-font)}
h1 em{font-style:var(--em-style)}
:focus-visible{outline-color:var(--accent)}
.promo,.facts{background:var(--band);color:var(--ink)}
.promo span,.facts span,.sticky-saving{color:var(--accent)}
.facts b{color:var(--ink)}
.brand-icon,.footer .brand-icon{background:var(--accent);color:white;border-radius:var(--control-radius)}
.eyebrow{color:var(--accent)}
.eyebrow>span{background:var(--accent)}
.hero-commerce,.order-card,.storage{border-radius:var(--card-radius)}
.button,.storage button,.stars label{border-radius:var(--control-radius)}
#review-form>input,#review-form textarea{border-radius:var(--label-radius)}
.primary{background:var(--accent);color:white;box-shadow:none}
.primary:hover{background:var(--purple)}
.hero-price>span,.save,.badge{background:var(--lilac);color:var(--ink);border-radius:var(--label-radius)}
.badge.best{background:var(--accent);color:white}
.hero-art{background:var(--art);color:var(--ink);border-radius:var(--art-radius)}
.hero-art::after{background:#ffffff7d}
.hero-art img{filter:drop-shadow(0 12px 12px #28213838)}
.hero-stamp{background:var(--paper);color:var(--accent);border-radius:var(--label-radius)}
.pack,.step,.benefit,.review,.review-compose{border-radius:var(--card-radius)}
.pack:hover,.pack:has(input:checked),.pack[aria-current=true],.stars label:has(input:checked),.stars label:has(~label input:checked){background:var(--lilac)}
.radio-dot,#review-form>input,#review-form textarea{border-color:var(--muted)}
.pack-price em,.rating,.stars label{color:var(--accent)}
.routine,.order-section{background:var(--band);color:var(--ink)}
.step{background:white;box-shadow:inset 0 0 0 1px var(--line)}
.benefit-number{border-radius:var(--control-radius)}
.comparison{background:var(--lilac)}
thead th{background:var(--band);color:var(--ink)}
.order-section h2+p,.sticky-price small,.sticky-price del,.footer small{color:var(--muted)}
.order-art{background:var(--art);border-radius:var(--art-radius)}
.footer{background:var(--backdrop);color:var(--ink);box-shadow:inset 0 1px var(--line)}
.sticky{background:var(--paper);color:var(--ink);box-shadow:0 -3px 14px #20202720,inset 0 1px var(--line)}
.storage{box-shadow:0 8px 30px #20202724}
.storage button{background:var(--lilac)}

/* Blue and white storefront accents. */
:root{
  --band:#e3eefc;
  --accent:#174986;
  --lilac:#eaf3ff;
  --line:#b8cbe2;
  --card-radius:3px;
  --control-radius:3px;
  --label-radius:2px;
  --art-radius:4px;
  --art:
    radial-gradient(circle at 50% 52%,#f7fbff 0 32%,transparent 32.3%),
    repeating-linear-gradient(0deg,#345b851c 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,#345b851c 0 1px,transparent 1px 22px),
    linear-gradient(145deg,#f1f7ff,#ccdef2);
}
.hero h1{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(1.65rem,6.4vw,2.15rem);line-height:1.08}
.hero h1 em{color:#25569c}
.eyebrow,.hero-art figcaption,.step-num,.benefit-number{
  font-family:"Courier New",Courier,monospace;
}
.promo,.facts{
  background:repeating-linear-gradient(135deg,#eaf2fc 0 8px,#e3eefc 8px 16px);
}
.hero-art,.order-art{
  box-shadow:inset 0 0 0 1px #abc1dc,inset 0 0 0 6px #f8fbff92;
}
.hero-art::after{background:#7292b334}
.hero-stamp{
  background:#f7fbff;
  box-shadow:inset 0 0 0 1px #abc1dc;
  transform:none;
}
.bubble{background:#f6fbff35;border-color:#9bb6d5}
.hero-commerce,.order-card{box-shadow:inset 0 3px var(--accent)}
.pack:has(input:checked),.pack[aria-current=true]{
  box-shadow:inset 3px 0 var(--accent);
}
.benefit,.review{box-shadow:inset 2px 0 #92b0d0}
.benefit-number,.benefit:nth-child(even) .benefit-number{
  background:#dceafb;
  box-shadow:inset 0 0 0 1px var(--line);
}
.step{box-shadow:inset 0 -3px #89a8ce}
.step:nth-child(even){box-shadow:inset 0 -3px #5883b5}
.comparison{background:#f0f5fc}
thead th{background:#dceafb}

/* Compact cards for the home page's quick bundles, benefits and steps. */
#benefits .benefits{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
}
#benefits .benefit{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr;
  gap:.55rem;
  padding:.75rem .65rem;
  background:linear-gradient(155deg,#f0f6ff,#fff 68%);
  box-shadow:inset 0 2px #89a8ce;
  overflow-wrap:anywhere;
}
#benefits .benefit:nth-child(even){
  background:#fff;
  box-shadow:inset 0 2px #517fb4;
}
#benefits .benefit-number{
  justify-self:start;
  min-width:2.15rem;
  min-height:1.65rem;
}
#benefits .benefit h3{
  font-size:1rem;
  line-height:1.22;
}
#how-it-works .step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);
  align-items:center;
  background:#fff;
}
#how-it-works .step img{
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  align-self:stretch;
  object-fit:cover;
}
#how-it-works .step div{padding:.85rem .8rem}

@media(min-width:360px){
  #bundles .pack-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
  }
  #bundles .quick-pack{
    grid-template-columns:17px 28px minmax(0,1fr);
    grid-template-areas:"choice name name" "product product price";
    gap:.55rem .32rem;
    padding:.65rem .55rem;
    min-height:104px;
  }
  #bundles .quick-pack .radio-dot{grid-area:choice;align-self:start}
  #bundles .quick-pack img{
    grid-area:product;
    justify-self:center;
    width:32px;
    height:46px;
  }
  #bundles .quick-pack .pack-name{grid-area:name}
  #bundles .quick-pack .pack-price{grid-area:price}
}