:root{--navy:#0f2942;--ink:#0f172a;--slate:#55627a;--amber:#b45309;--teal:#0f766e;--cream:#fff8ec;--sand:#fde8c4;--line:#eadfca;--bg:#fffdf8;--card:#fff;--shadow:0 1px 2px rgba(15,41,66,.06),0 10px 30px -12px rgba(15,41,66,.22)}
@media (prefers-color-scheme:dark){:root{--navy:#e8eef6;--ink:#e8eef6;--slate:#a7b3c6;--amber:#f0a45a;--teal:#4fc3b5;--cream:#1a2130;--sand:#2a2418;--line:#2b3447;--bg:#0f1520;--card:#171f2e;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Iowan Old Style",Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.sans{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif}
h1,h2,h3{color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.1rem,6.4vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,4vw,2.2rem)}
.kicker{font:700 .72rem/1 "Avenir Next",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
/* top bar */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font:700 1.08rem "Avenir Next",Arial,sans-serif;color:var(--navy);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--amber)}
.cartbtn{display:flex;gap:8px;align-items:center;background:var(--navy);color:var(--bg);border:0;border-radius:999px;padding:9px 16px;font:700 .9rem "Avenir Next",Arial,sans-serif;cursor:pointer}
.cartbtn b{background:var(--amber);color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:.78rem;padding:0 6px}
/* hero */
.hero{background:var(--cream);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{display:grid;gap:26px;padding-top:44px;padding-bottom:50px;align-items:center}
@media(min-width:820px){.hero .wrap{grid-template-columns:1.05fr 1fr;padding-top:64px;padding-bottom:68px}}
.hero p.lead{font-size:1.18rem;color:var(--ink);max-width:34em;margin:.2em 0 1.2em}
.perks{display:flex;flex-wrap:wrap;gap:8px 16px;margin:20px 0 0;padding:0;list-style:none;font:600 .86rem "Avenir Next",Arial,sans-serif;color:var(--slate)}
.perks li::before{content:"✓";color:var(--teal);font-weight:800;margin-right:6px}
.fan{position:relative;height:300px;margin:6px auto 0;width:100%;max-width:440px}
@media(min-width:820px){.fan{height:390px}}
.fan img{position:absolute;bottom:0;width:38%;border-radius:6px;box-shadow:var(--shadow);transition:transform .35s ease}
.fan img:nth-child(1){left:2%;transform:rotate(-9deg) translateY(10px)}
.fan img:nth-child(2){left:20%;transform:rotate(-4deg)}
.fan img:nth-child(3){left:31%;z-index:3;width:42%}
.fan img:nth-child(4){right:20%;transform:rotate(4deg)}
.fan img:nth-child(5){right:2%;transform:rotate(9deg) translateY(10px)}
.fan:hover img:nth-child(1){transform:rotate(-12deg) translateX(-8px)}.fan:hover img:nth-child(5){transform:rotate(12deg) translateX(8px)}
.btn{display:inline-block;background:var(--amber);color:#fff;border:0;border-radius:10px;padding:13px 24px;font:700 1rem "Avenir Next",Arial,sans-serif;text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.sm{padding:9px 14px;font-size:.88rem;border-radius:8px}
.btn[disabled]{opacity:.6;cursor:wait}
/* shelf */
section{padding:54px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 26px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 16px;font:600 .88rem "Avenir Next",Arial,sans-serif;cursor:pointer}
.chip[aria-pressed=true]{background:var(--navy);color:var(--bg);border-color:var(--navy)}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.cover{background:color-mix(in srgb,var(--a) 10%,var(--cream));padding:24px 22px 0;display:flex;justify-content:center;align-items:flex-end;height:340px;overflow:hidden}
.cover img{height:316px;width:auto;border-radius:5px 5px 0 0;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
.body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{align-self:flex-start;background:var(--a);color:#fff;font:700 .68rem "Avenir Next",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;border-radius:5px;padding:4px 8px}
.card h3{font-size:1.32rem;margin:2px 0 0}
.card p{margin:0;color:var(--slate);font-size:.96rem;line-height:1.55}
.stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.stats span{font:600 .74rem "Avenir Next",Arial,sans-serif;color:var(--slate);background:color-mix(in srgb,var(--slate) 10%,transparent);border-radius:6px;padding:3px 8px}
.buy{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font:800 1.35rem "Avenir Next",Arial,sans-serif;color:var(--navy)}
.price small{font-weight:500;font-size:.72rem;color:var(--slate);display:block;margin-top:-3px}
.row{display:flex;gap:8px}
.added{background:var(--teal)!important}
.note{margin-top:22px;text-align:center;color:var(--slate);font:600 .95rem "Avenir Next",Arial,sans-serif}
/* steps / faq */
.alt{background:var(--cream);border-block:1px solid var(--line)}
.steps{display:grid;gap:16px;margin-top:20px}@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.step b.n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--amber);color:#fff;font:800 .95rem "Avenir Next",Arial,sans-serif;margin-bottom:8px}
.step h3{font-size:1.1rem;margin:0 0 4px}.step p{margin:0;color:var(--slate);font-size:.95rem}
details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:700;color:var(--navy)}
details p{margin:.6em 0 0;color:var(--slate)}
footer{padding:30px 0 44px;color:var(--slate);font:.88rem/1.6 "Avenir Next",Arial,sans-serif;text-align:center;border-top:1px solid var(--line)}
/* drawer */
.scrim{position:fixed;inset:0;background:rgba(8,15,28,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);z-index:50;transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.25)}
.drawer.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.dh h2{font-size:1.25rem;margin:0}.x{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--slate);cursor:pointer}
.items{flex:1;overflow:auto;padding:6px 18px}
.it{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.it img{width:46px;border-radius:3px;box-shadow:var(--shadow)}.it b{font-size:.98rem;color:var(--navy);line-height:1.25;display:block}
.it span{font:600 .85rem "Avenir Next",Arial,sans-serif;color:var(--slate)}
.rm{background:none;border:0;color:var(--slate);cursor:pointer;font:600 .8rem "Avenir Next",Arial,sans-serif;text-decoration:underline}
.empty{color:var(--slate);text-align:center;padding:40px 10px}
.df{border-top:1px solid var(--line);padding:16px 18px 20px;background:var(--card)}
.tot{display:flex;justify-content:space-between;font:800 1.15rem "Avenir Next",Arial,sans-serif;color:var(--navy);margin-bottom:6px}
label{display:block;font:600 .82rem "Avenir Next",Arial,sans-serif;margin:10px 0 4px;color:var(--navy)}
input{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:9px;font:1rem "Avenir Next",Arial,sans-serif;background:var(--bg);color:var(--ink)}
input:focus{outline:2px solid var(--amber);border-color:var(--amber)}
.hint{font:.8rem/1.5 "Avenir Next",Arial,sans-serif;color:var(--slate);margin-top:4px}
.err{color:#be123c;font:.88rem "Avenir Next",Arial,sans-serif;min-height:1.2em;margin:8px 0 0}
.center{text-align:center}.box{max-width:520px;margin:14vh auto;text-align:center}
.spin{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--amber);border-radius:50%;animation:s 1s linear infinite;margin:18px auto}@keyframes s{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}