:root{
  --purple:#2A0D45; --deep:#1c0730; --cream:#F7F3EE; --card:#fff;
  --green:#7d8226; --green-br:#ADB236; --ink:#1a0830; --muted:#5f5570; --line:#e4dfea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);
 font:17px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 -webkit-text-size-adjust:100%}
img{max-width:100%}
h1,h2,h3{text-wrap:balance;letter-spacing:-.018em;margin:0}
a{color:var(--green)}
.wrap{max-width:660px;margin:0 auto;padding:0 20px}

nav{background:var(--purple);padding:calc(13px + env(safe-area-inset-top)) 20px 13px;
 display:flex;align-items:center;justify-content:space-between;gap:14px}
nav .home{display:flex;align-items:center;min-height:44px}
nav img{height:26px;width:auto;display:block}
nav a.back{color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;
 border:1.5px solid rgba(255,255,255,.34);border-radius:10px;padding:0 13px;min-height:44px;
 display:flex;align-items:center}

header{background:linear-gradient(168deg,var(--purple) 0%,var(--deep) 100%);color:#fff;
 padding:46px 20px 52px;text-align:center}
header img.logo{height:62px;width:auto;margin:0 auto 22px;display:block}
header h1{font-size:33px;line-height:1.1}
header .lede{margin:16px auto 0;max-width:28ch;font-size:18.5px;color:#ded2ee;line-height:1.5}

.doors{display:grid;gap:18px;margin:-28px 0 0}
.door{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 22px;
 box-shadow:0 10px 34px rgba(42,13,69,.13);text-decoration:none;color:inherit;display:block}
.door h2{font-size:23px;margin-bottom:9px}
.door p{margin:0 0 16px;color:#463a55;font-size:16.5px}
.door .go{display:inline-flex;align-items:center;gap:8px;color:var(--green);
 font-weight:800;font-size:16.5px;min-height:44px}

section{padding:40px 0 4px}
section h2{font-size:26px;margin-bottom:13px}
section p{font-size:17px;color:#443a52}
.lead{font-size:18.5px}

.act{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
 background:var(--green-br);color:#fff;font-weight:800;font-size:17px;padding:16px 18px;
 border-radius:13px;min-height:52px;margin:0 0 11px}
.act.dark{background:var(--purple)}
.act:active{filter:brightness(.94)}

.cupbox{background:linear-gradient(180deg,#efeae2,#e2dbd1);border-radius:20px;
 padding:28px 16px 20px;display:flex;flex-direction:column;align-items:center;margin:20px 0 0}
.cupcap{font-size:14.5px;color:#5c5468;margin-top:15px;text-align:center;max-width:34ch}
.cup{position:relative;margin:0 auto}
.rim{height:10px;border-radius:10px/7px;background:linear-gradient(180deg,#fff,#dcd5cb);
 border:1px solid #cdc5b8;position:relative;z-index:3}
.cbody{position:relative;border-left:1px solid #cdc5b8;border-right:1px solid #cdc5b8;
 transform-style:preserve-3d}
.curve{position:absolute;inset:0;z-index:5;pointer-events:none;
 background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,0) 17%,rgba(255,255,255,.30) 42%,rgba(255,255,255,.10) 58%,rgba(0,0,0,0) 83%,rgba(0,0,0,.26))}
.base{height:8px;background:linear-gradient(180deg,#d8d1c6,#bcb4a7);border-radius:0 0 8px 8px;
 border:1px solid #cdc5b8;border-top:0}
.art{position:absolute;inset:0;text-align:center}
.art .top{position:absolute;left:0;right:0;top:0;bottom:15%;display:flex;flex-direction:column;
 align-items:center;justify-content:center}
.art .strip{position:absolute;left:0;right:0;bottom:15%;white-space:nowrap;line-height:1.2}

.step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step .n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;
 font-weight:800;font-size:16px;display:grid;place-items:center}
.step .t{flex:1;font-size:17px}

details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 10px;
 overflow:hidden}
summary{cursor:pointer;font-weight:800;font-size:16.5px;padding:16px 18px;min-height:52px;
 display:flex;align-items:center;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-weight:800;color:var(--green);font-size:21px}
details[open] summary::after{content:"\2212"}
details .a{padding:0 18px 17px;color:#463a55;font-size:16.5px}

.close{background:var(--purple);color:#fff;border-radius:20px;padding:28px 22px;margin:38px 0 0;
 text-align:center}
.close h2{font-size:24px;margin-bottom:9px}
.close p{color:#ded2ee;font-size:17px;margin:0 0 18px}
footer{padding:32px 20px calc(38px + env(safe-area-inset-bottom));text-align:center;
 color:var(--muted);font-size:14.5px}
footer a{color:var(--muted);display:inline-block;min-height:44px;line-height:44px;padding:0 8px}

@media (min-width:720px){
  header{padding:64px 20px 74px}
  header h1{font-size:44px}
  header img.logo{height:78px}
  .doors{grid-template-columns:1fr 1fr}
}
@media (prefers-color-scheme:dark){
  :root{--cream:#141018;--card:#1e1a24;--ink:#f2eef7;--muted:#a79fb4;--line:#332c3d;--green:#c2c76a}
  .door{box-shadow:none}
  .door p,section p,details .a,.step .t{color:#c6bed2}
  .cupbox{background:linear-gradient(180deg,#231e2b,#1a1620)}
  .cupcap{color:#b3aabf}
}