/* Sprayd sales pages — emerald / hot pink / black / gold, big checkers, gold frames */
:root{
  --hot:#FF4FB0; --hot-deep:#E0218F; --ink:#171214; --emerald:#0A3524; --emerald-2:#0F4630;
  --white:#FFFFFF; --cream:#FFF6FA; --gold-solid:#D2AE5E; --gold-lt:#F0D79A;
  --gold:linear-gradient(90deg,#8A6A22,#C4A760 22%,#F0D79A 50%,#C8A453 78%,#8A6A22);
  --display:"DM Serif Display","Didot",Georgia,serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.in{max-width:640px;margin:0 auto;padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
.wide{max-width:1040px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1;text-wrap:balance}
p{margin:0}
.chip{display:inline-block;background:var(--ink);color:var(--white);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.55em 1em}
.chip.pink{background:var(--hot);color:var(--ink)}
.chip.gold{background:var(--hot);color:var(--ink)}
.checks{height:60px;background:conic-gradient(var(--ink) 25%, var(--white) 0 50%, var(--ink) 0 75%, var(--white) 0) 0 0/60px 60px}
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:0;border:3px solid transparent;border-image:var(--gold) 1;pointer-events:none}

/* hero */
.hero{background:var(--emerald);color:var(--white);padding-block:14px 0;overflow:hidden}
.hero-frame{padding:22px 20px 0;margin-top:6px;display:grid;gap:14px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topline img{height:30px;width:auto}
.awards{color:var(--gold-lt);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:right;line-height:1.35}
.hero h1{font-size:clamp(3rem, 14vw, 5.4rem);margin-top:8px}
.hero h1 em{font-style:normal;color:var(--hot)}
.hero .chip{justify-self:start}
.lede{font-size:1.06rem;color:#E8EFEB}
.hero-pic{margin:6px -20px 0}
.hero-pic img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* black intro */
.intro{background:var(--ink);color:var(--white);padding-block:40px}
.intro .in{display:grid;gap:16px}
.intro .big{font-family:var(--display);font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.12}
.intro .big em{font-style:normal;color:var(--hot)}
.intro p{color:#E9E2E6}

/* product cards */
.shop{background:var(--cream);padding-block:44px}
.shop .head{display:grid;gap:10px;margin-bottom:24px;text-align:center;justify-items:center}
.shop .head h2{font-size:clamp(2.2rem,9vw,3rem)}
.cards{display:grid;gap:22px}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr);align-items:start}}
.card{background:var(--white);padding:18px 18px 22px;display:grid;gap:12px;box-shadow:0 10px 30px rgba(23,18,20,.08)}
.card.best{background:var(--ink);color:var(--white)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .ttl{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card h3{font-size:1.75rem;line-height:1.05}
.card .price{font-weight:800;font-size:2rem;line-height:1}
.card .sz{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hot-deep)}
.card.best .sz{color:var(--hot)}
.card .tag{font-family:var(--display);font-size:1.25rem;line-height:1.2}
.card p{font-size:.95rem}
.card ul{margin:0;padding-left:1.1em;font-size:.92rem;display:grid;gap:3px}
.card .lbl{font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.save{background:var(--hot);color:var(--ink);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;justify-self:start}
select{appearance:none;width:100%;font:600 1rem var(--body);padding:14px 40px 14px 14px;border:2px solid var(--ink);border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23171214' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--ink)}
.card.best select{border-color:var(--hot)}
select.need{border-color:var(--hot-deep);box-shadow:0 0 0 3px rgba(255,79,176,.35)}
.btn{display:flex;justify-content:center;align-items:center;width:100%;padding:17px 18px;font:800 1rem var(--body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;text-align:center}
.buy{background:var(--hot);color:var(--ink);box-shadow:0 5px 0 var(--hot-deep)}
.buy:active{transform:translateY(3px);box-shadow:0 2px 0 var(--hot-deep)}
.buy[aria-disabled="true"]{background:#d9d3d6;color:#5a5256;box-shadow:none;cursor:not-allowed}
.btn:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold-solid);outline-offset:3px}
.hint{font-size:.78rem;text-align:center;opacity:.8}
details{border-top:1px solid rgba(23,18,20,.15);padding-top:10px}
.card.best details{border-top-color:rgba(255,255,255,.2)}
summary{cursor:pointer;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
details p{font-size:.85rem;margin-top:8px}

/* scents */
.scents{background:var(--emerald);color:var(--white);padding-block:48px}
.scents .head{display:grid;gap:12px;text-align:center;justify-items:center;margin-bottom:26px}
.scents .head h2{font-size:clamp(2.1rem,9vw,3.2rem)}
.scents .head p{color:#DCE8E2;max-width:44ch}
.sgrid{display:grid;gap:16px}
@media (min-width:760px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.sgrid{grid-template-columns:repeat(3,1fr)}}
.scent{background:var(--white);color:var(--ink);padding:20px 18px;display:grid;gap:8px;align-content:start;border-left:6px solid var(--hot)}
.scent:nth-child(even){border-left-color:var(--ink)}
.scent h3{font-size:1.7rem}
.scent .notes{font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--hot-deep)}
.scent p{font-size:.93rem}
.scent .kick{font-family:var(--display);font-size:1.15rem;line-height:1.25}
.pick{justify-self:start;background:none;border:2px solid var(--ink);font:800 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase;padding:.7em 1em;cursor:pointer;margin-top:4px}
.pick:hover{background:var(--ink);color:var(--white)}

/* faq */
.faq{background:var(--white);padding-block:44px}
.faq .in{display:grid;gap:18px}
.faq h2{font-size:clamp(2rem,8vw,2.6rem)}
.q{border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:4px}
.q b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2}

/* closer */
.closer{background:var(--hot);padding-block:46px;text-align:center}
.closer .in{display:grid;gap:16px;justify-items:center}
.closer h2{font-size:clamp(2rem,8vw,2.8rem)}
.closer .btn{max-width:420px;background:var(--ink);color:var(--white)}
.share-row{display:grid;gap:10px;justify-items:center}
.btn-share{background:transparent;color:var(--ink);border:2px solid var(--ink);max-width:420px}
.toast{font-size:.85rem;font-weight:700;min-height:1.3em}
.linkbox{font-size:.8rem;word-break:break-all;user-select:all;background:var(--white);padding:8px 10px}

footer{background:var(--ink);color:#CFC7CB;text-align:center;padding-block:34px;font-size:.82rem;display:grid;gap:6px;justify-items:center}
footer img{height:34px;width:auto;margin-bottom:6px}
.sticky{position:sticky;bottom:0;z-index:5;background:var(--ink);padding-block:10px calc(10px + env(safe-area-inset-bottom, 0px))}

/* Oh Pale No */
.price-pin{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-pin b{font:800 3rem/1 var(--body)}
.price-pin s{color:var(--hot);font-weight:700;font-size:1.1rem}
.story{background:var(--white);padding-block:44px}
.story .in{display:grid;gap:18px}
.story h2{font-size:clamp(2rem,8vw,2.6rem)}
.story h2 em{font-style:normal;color:var(--hot-deep)}
.story .pic{aspect-ratio:4/3;object-fit:cover;width:100%}
.story .punch{font-family:var(--display);font-size:1.4rem;line-height:1.2;color:var(--emerald)}
.inbox{background:var(--cream);padding:18px;display:grid;gap:8px}
.inbox ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.steps{background:var(--emerald);color:var(--white);padding-block:44px}
.steps .in{display:grid;gap:16px}
.steps h2{font-size:clamp(2rem,8vw,2.6rem)}
.steps ol{list-style:none;padding:0;margin:0;counter-reset:s;display:grid}
.steps li{display:grid;grid-template-columns:50px 1fr;gap:10px;padding:14px 0;border-top:1px solid rgba(240,215,154,.35);counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.4rem;line-height:.9;color:var(--hot)}
.steps b{display:block}
.buybox{background:var(--ink);color:var(--white);padding:26px 20px;display:grid;gap:14px}

.disco{position:absolute;pointer-events:none;z-index:2;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hero{position:relative}
.d-hero{top:-10px;right:max(10px,calc(50% - 330px));width:clamp(64px,18vw,110px)}
.d-hero2{top:-25px;right:max(84px,calc(50% - 240px));width:clamp(40px,11vw,66px)}
.closer{position:relative;overflow:hidden}
.d-close{top:0;left:max(6px,calc(50% - 330px));width:clamp(56px,15vw,96px)}
.d-close2{top:0;right:max(6px,calc(50% - 330px));width:clamp(40px,11vw,70px)}
.scents,.steps{position:relative;overflow:hidden}
.d-sec{top:0;right:max(8px,calc(50% - 520px));width:clamp(52px,13vw,90px)}
@media (prefers-reduced-motion: no-preference){.disco{transform-origin:50% 0;animation:sway 4s ease-in-out infinite alternate}@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}}
.hero h1{padding-right:clamp(40px,14vw,90px)}
.closer{padding-top:120px}
button,.pick{color:var(--ink);-webkit-text-fill-color:currentColor}
.btn-share{color:var(--ink)}
summary{color:inherit}
.d-close{top:-20px}
.closer{padding-top:150px}