/* ============================================================
   Dewy Dreams — My Glow Journey
   Jewel-botanical: luminous pearl, botanical emerald,
   champagne-gold "jewel" accent, dewy blush.
   Type: Cormorant (luxe serif, big moments) + Hanken Grotesk (UI).
   Signature motif: the dewdrop.
   ============================================================ */
:root{
  --bg:#F7F4EF; --surface:#FFFFFF; --surface-2:#EFEAE1;
  --ink:#233027; --ink-soft:#6E7A70; --line:#E6DFD4; --line-2:#D7CDBE;
  --emerald:#1F5A45; --emerald-deep:#143C2C; --emerald-wash:#E7EFEA;
  --gold:#C2A05E; --gold-deep:#9E7E40; --gold-wash:#F4ECDC;
  --blush:#D08C82; --blush-wash:#F6E8E4;
  --shadow:0 1px 2px rgba(20,40,30,.05),0 10px 26px rgba(20,40,30,.07);
  --shadow-lg:0 14px 44px rgba(20,40,30,.16);
  --r:20px; --r-sm:13px; --r-pill:999px; --maxw:460px; --nav-h:74px;
  --display:"Cormorant Garamond",Georgia,serif;
  --ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
input,select{font-family:inherit;font-size:16px}
.app{max-width:var(--maxw);margin:0 auto;min-height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column}

.screen{display:none;flex:1;padding:0 20px calc(var(--nav-h) + 28px)}
.screen.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0 14px}
.topbar .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.topbar h1{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;letter-spacing:.005em;margin-top:3px}
.brand-dot{width:34px;height:34px;border-radius:11px;flex:0 0 auto;background:linear-gradient(160deg,#2d7056,var(--emerald));position:relative}
.brand-dot::after{content:"";position:absolute;left:50%;top:46%;width:13px;height:13px;background:var(--bg);border-radius:0 50% 50% 50%;transform:translate(-50%,-50%) rotate(45deg)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.card h2{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.05;margin-bottom:3px}
.card .sub{color:var(--ink-soft);font-size:14px}

/* streak hero */
.streak{background:linear-gradient(158deg,#2c7257 0%,var(--emerald-deep) 100%);color:#fff;border:none;text-align:center;padding:28px 18px 24px;position:relative;overflow:hidden}
.streak::before{content:"";position:absolute;left:50%;top:-30%;width:120px;height:120px;background:rgba(194,160,94,.16);border-radius:0 50% 50% 50%;transform:translateX(-50%) rotate(45deg)}
.streak .num{font-family:var(--display);font-weight:500;font-size:70px;line-height:1;letter-spacing:0;font-feature-settings:"tnum";position:relative}
.streak .label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:2px}
.streak .note{font-size:13.5px;opacity:.92;margin-top:11px;max-width:30ch;margin-inline:auto}

.doses{display:flex;gap:12px}
.dose{flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 12px;text-align:left;transition:.18s;background:var(--surface);display:flex;align-items:center;gap:10px}
.dose .tick{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line-2);display:grid;place-items:center;color:transparent;font-size:14px;transition:.18s}
.dose .when{font-size:13px;color:var(--ink-soft)}
.dose .what{font-weight:600;font-size:15px}
.dose.done{background:var(--emerald-wash);border-color:transparent}
.dose.done .tick{background:var(--emerald);border-color:var(--emerald);color:#fff}
.dose.done .what{color:var(--emerald-deep)}
.dose:active{transform:scale(.98)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r-pill);font-weight:600;font-size:15px;width:100%;transition:.15s}
.btn:active{transform:scale(.98)}
.btn.brand{background:var(--emerald)}
.btn.gold{background:var(--gold);color:#3a2e12}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.sm{width:auto;padding:10px 16px;font-size:14px}
.row-btns{display:flex;gap:10px}

.peek{display:flex;gap:12px;align-items:stretch}
.peek .ph{flex:1;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);position:relative}
.peek .ph img{width:100%;height:100%;object-fit:cover}
.peek .ph .tag{position:absolute;left:8px;bottom:8px;font-size:11px;background:rgba(20,40,30,.62);color:#fff;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.03em}
.peek .arrow{align-self:center;color:var(--emerald);font-size:20px}

.empty{text-align:center;color:var(--ink-soft);padding:26px 12px}
.empty .em-ic{font-size:30px;margin-bottom:6px}
.empty p{font-size:14px;margin-bottom:14px}

/* before/after (signature) */
.compare{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;border-radius:var(--r);overflow:hidden;background:var(--surface-2);touch-action:none;user-select:none;box-shadow:var(--shadow)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}
.compare .after-wrap img{width:auto;min-width:100%}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,40,30,.15);transform:translateX(-50%)}
.compare .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;box-shadow:var(--shadow-lg);display:grid;place-items:center;color:var(--emerald-deep);font-size:15px;border-radius:0 50% 50% 50%;rotate:45deg}
.compare .knob span{rotate:-45deg}
.compare .lbl{position:absolute;bottom:12px;font-size:12px;color:#fff;background:rgba(20,40,30,.6);padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.04em}
.compare .lbl.before{left:12px}
.compare .lbl.after{right:12px}
.compare-dates{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin:8px 2px 0}

.timeline{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x mandatory}
.timeline::-webkit-scrollbar{height:0}
.shot{flex:0 0 88px;scroll-snap-align:start;text-align:center}
.shot .thumb{width:88px;height:110px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line);background:var(--surface-2)}
.shot.sel .thumb{outline:2.5px solid var(--gold);outline-offset:2px}
.shot .d{font-size:11px;color:var(--ink-soft);margin-top:5px}

/* routine steps grouped AM/PM */
.routine-block{margin-top:6px}
.routine-block .rb-head{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:14px 0 4px}
.steps{counter-reset:s}
.step{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{counter-increment:s;flex:0 0 25px;height:25px;border-radius:50%;background:var(--emerald-wash);color:var(--emerald-deep);display:grid;place-items:center;font-weight:700;font-size:12.5px}
.step .n::before{content:counter(s)}
.step .tx strong{display:block;font-size:15px}
.step .tx span{font-size:13.5px;color:var(--ink-soft)}

/* product card */
.product{display:flex;gap:14px;align-items:center;padding:4px 0 2px}
.product .pinfo{flex:1}
.product .pname{font-weight:700;font-size:16px;line-height:1.2}
.product .pmeta{font-size:13px;color:var(--ink-soft);margin-top:2px}
.product .price{font-family:var(--display);font-weight:600;font-size:22px;color:var(--emerald-deep)}
.shop-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--emerald);color:#fff;font-weight:600;font-size:14px;padding:11px 16px;border-radius:var(--r-pill);width:100%;margin-top:12px}
.alt-product{font-size:13px;color:var(--ink-soft);margin-top:10px}
.alt-product a{color:var(--emerald-deep);font-weight:600;text-decoration:none}

/* milestone (gold jewel) */
.milestone{background:linear-gradient(150deg,var(--gold-wash),#fff);border:1px solid var(--gold);position:relative;overflow:hidden}
.milestone .badge{font-family:var(--display);font-weight:600;font-size:15px;color:var(--gold-deep);letter-spacing:.04em}
.milestone h2{color:var(--emerald-deep)}
.milestone .promo{background:#fff;border:1px dashed var(--gold);border-radius:var(--r-sm);padding:10px 12px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.milestone .promo b{color:var(--gold-deep)}

.setrow{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.setrow .k{font-size:15px}
.setrow .v{color:var(--ink-soft);font-size:14px;display:flex;align-items:center;gap:10px}
.setrow input[type=time]{border:1px solid var(--line-2);border-radius:10px;padding:7px 10px;color:var(--ink);background:var(--surface)}
.tg{width:46px;height:28px;border-radius:var(--r-pill);background:var(--line-2);position:relative;transition:.18s;flex:0 0 auto}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--emerald)}
.tg.on::after{left:21px}

.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);height:var(--nav-h);background:rgba(247,244,239,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-soft);font-size:11px;letter-spacing:.02em;padding-top:8px}
.nav button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav button.active{color:var(--emerald-deep)}
.nav button.active svg{stroke:var(--emerald)}

.onb{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column;max-width:var(--maxw);margin:0 auto}
.onb.show{display:flex}
.onb .head{padding:26px 24px 8px}
.onb .progress-bar{height:4px;background:var(--line);border-radius:4px;margin:0 24px;overflow:hidden}
.onb .progress-bar i{display:block;height:100%;background:var(--emerald);width:20%;transition:width .3s}
.onb .q{flex:1;padding:26px 24px;overflow-y:auto}
.onb .q .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.onb .q h2{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.08;margin:7px 0 22px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px;transition:.15s;font-size:16px}
.opt .ic{font-size:22px;width:26px;text-align:center}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--emerald);background:var(--emerald-wash)}
.onb .foot{padding:16px 24px calc(20px + env(safe-area-inset-bottom))}
.onb .welcome{text-align:center;margin:auto;padding:30px 28px}
.onb .welcome .mark{width:70px;height:70px;border-radius:20px;background:linear-gradient(160deg,#2d7056,var(--emerald));margin:0 auto 20px;position:relative}
.onb .welcome .mark::after{content:"";position:absolute;left:50%;top:46%;width:26px;height:26px;background:var(--bg);border-radius:0 50% 50% 50%;transform:translate(-50%,-50%) rotate(45deg)}
.onb .welcome h2{font-family:var(--display);font-weight:600;font-size:38px;line-height:1.04}
.onb .welcome p{color:var(--ink-soft);margin:14px 0 4px;font-size:15px}

.toast{position:fixed;bottom:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.section-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:22px 2px 10px}
.hide{display:none!important}
.center-col{display:flex;flex-direction:column}
.fine{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:6px;line-height:1.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ============================================================
   Premium pass — depth, product imagery, streak ring, motion
   ============================================================ */
/* soft dew-glow behind the app */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(194,160,94,.10), transparent 60%),
    radial-gradient(90% 50% at 100% 8%, rgba(31,90,69,.07), transparent 55%);}

/* richer shadows */
:root{--shadow:0 1px 2px rgba(20,40,30,.04),0 6px 16px rgba(20,40,30,.05),0 18px 40px rgba(20,40,30,.05);}
.card{background:linear-gradient(180deg,#fff, #FFFDFA);}

/* card entrance on active screen */
.screen.active .card{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.screen.active .card:nth-child(2){animation-delay:.04s}
.screen.active .card:nth-child(3){animation-delay:.09s}
.screen.active .card:nth-child(4){animation-delay:.14s}
.screen.active .card:nth-child(5){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* streak progress ring */
.streak .ring{position:relative;width:150px;height:150px;margin:2px auto 4px}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:6}
.ring-prog{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(194,160,94,.5));transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.streak .ring .num{position:absolute;inset:0;display:grid;place-items:center}
.streak::before{top:-44%;opacity:.5}

/* product thumbnail in cards */
.pthumb{width:64px;height:64px;flex:0 0 auto;border-radius:14px;overflow:hidden;
  background:var(--surface-2);box-shadow:0 4px 12px rgba(20,40,30,.12);border:1px solid var(--line)}
.pthumb img{width:100%;height:100%;object-fit:cover}

/* welcome hero art */
.welcome .hero-art{width:200px;height:200px;margin:0 auto 14px;
  animation:float 6s ease-in-out infinite}
.welcome .hero-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px rgba(20,40,30,.16))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* gold milestone shimmer */
.milestone::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:shimmer 4.5s ease-in-out infinite}
@keyframes shimmer{0%,72%{left:-60%}88%,100%{left:130%}}

@media (prefers-reduced-motion:reduce){
  .welcome .hero-art,.milestone::after,.screen.active .card{animation:none!important}
}

/* fix: keep streak hero emerald (generic .card gradient must not win) */
.card.streak{background:linear-gradient(158deg,#2c7257 0%,var(--emerald-deep) 100%)}
.card.milestone{background:linear-gradient(150deg,var(--gold-wash),#fff)}

/* ============================================================ Lock screen */
.lock{position:fixed;inset:0;z-index:80;background:linear-gradient(170deg,#2c7257,var(--emerald-deep));
  display:none;flex-direction:column;align-items:center;justify-content:center;
  max-width:var(--maxw);margin:0 auto;color:#fff;padding:30px}
.lock.show{display:flex;animation:fade .3s ease}
.lock-inner{width:100%;max-width:300px;text-align:center}
.lock-drop{width:54px;height:54px;margin:0 auto 18px;background:rgba(255,255,255,.16);
  border-radius:0 50% 50% 50%;transform:rotate(45deg);position:relative}
.lock-drop::after{content:"";position:absolute;inset:30% 38% 30% 18%;background:#fff;opacity:.6;border-radius:50%}
.lock h2{font-family:var(--display);font-weight:600;font-size:25px;margin-bottom:22px}
.pin-dots{display:flex;gap:16px;justify-content:center;margin-bottom:14px}
.pin-dots .pd{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);transition:.15s}
.pin-dots .pd.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(194,160,94,.6)}
.pin-msg{min-height:20px;font-size:13.5px;color:#ffd9d2;margin-bottom:18px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:260px;margin:0 auto}
.keypad .key{height:64px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:24px;font-weight:500;font-family:var(--display);transition:.12s}
.keypad .key:active{background:rgba(255,255,255,.28);transform:scale(.95)}
.keypad .key.empty{background:none}

/* circular keypad keys */
.keypad{justify-items:center}
.keypad .key{width:64px;height:64px;border-radius:50%;display:grid;place-items:center}

/* multiple product options per goal */
.alts{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.alts-h{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:6px 2px 4px}
.alt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.alt-row:last-child{border-bottom:none}
.alt-row .an{font-size:14px;font-weight:500;line-height:1.25}
.alt-row .ap{font-size:13.5px;font-weight:700;color:var(--emerald-deep);white-space:nowrap}
.alt-row:active{opacity:.6}

/* ============================================================ Streak calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-family:var(--display);font-weight:600;font-size:20px}
.cal-nav{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center}
.cal-nav:active{transform:scale(.92)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{margin-bottom:6px}
.cal-dow-c{text-align:center;font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.cal-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:13.5px;font-weight:500;
  color:var(--ink-soft);background:var(--surface-2)}
.cal-cell.blank{background:none}
.cal-cell.future{opacity:.35}
.cal-cell.half{background:var(--emerald-wash);color:var(--emerald-deep);font-weight:600}
.cal-cell.full{background:var(--emerald);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(31,90,69,.28)}
.cal-cell.today{outline:2px solid var(--gold);outline-offset:1px}
.cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.cal-legend{display:flex;align-items:center;gap:6px}
.cal-legend .lg{width:12px;height:12px;border-radius:4px;display:inline-block;margin-left:8px}
.cal-legend .lg.full{background:var(--emerald)}
.cal-legend .lg.half{background:var(--emerald-wash)}

/* quiz hint for multi-select */
.qhint{font-size:13.5px;color:var(--ink-soft);margin:-12px 2px 16px}

/* ============================================================ Buy: contrast CTA + restock */
:root{ --cta:#D2674E; --cta-deep:#B85440; }   /* warm coral that pops on emerald/cream */
/* make the reorder/buy buttons stand out from the emerald UI */
.shop-btn.cta, .milestone .shop-btn{ background:var(--cta); }
.shop-btn{ background:var(--cta); box-shadow:0 6px 16px rgba(210,103,78,.28); }
.shop-btn:active{ background:var(--cta-deep); transform:scale(.99); }

.restock{ border:1px solid var(--cta); background:linear-gradient(150deg,#FBEDE9,#fff); position:relative; }
.rk-row{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.rk-tx{ flex:1; }
.rk-h{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1.1; color:var(--ink); }
.rk-s{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.rk-done{ display:block; width:100%; text-align:center; margin-top:10px; padding:10px; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:none; }
.rk-done:active{ opacity:.6; }

/* clearer "one ritual" day — distinct sage green, not near-white */
.cal-cell.half{ background:#A9D3C2; color:var(--emerald-deep); font-weight:700; }
.cal-legend .lg.half{ background:#A9D3C2; }

/* ============================================================ Add-to-home sheet */
.sheet-backdrop{position:fixed;inset:0;z-index:70;background:rgba(20,40,30,.45);
  display:none;align-items:flex-end;justify-content:center}
.sheet-backdrop.show{display:flex;animation:fade .25s ease}
.sheet{width:100%;max-width:var(--maxw);background:var(--bg);border-radius:24px 24px 0 0;
  padding:14px 24px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(20,40,30,.25);
  animation:sheetUp .32s cubic-bezier(.2,.7,.2,1);text-align:center}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 18px}
.sheet-drop{width:52px;height:52px;margin:0 auto 12px;background:linear-gradient(160deg,#2d7056,var(--emerald));
  border-radius:0 50% 50% 50%;transform:rotate(45deg);position:relative}
.sheet-drop::after{content:"";position:absolute;inset:32% 40% 30% 20%;background:#fff;opacity:.6;border-radius:50%}
.sheet h2{font-family:var(--display);font-weight:600;font-size:26px;margin-bottom:6px}
.sheet p{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px;max-width:34ch;margin-inline:auto}
.ios-steps{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.ios-step{display:flex;align-items:center;gap:12px;font-size:14.5px;padding:7px 0;color:var(--ink)}
.ios-step .sn{flex:0 0 24px;height:24px;border-radius:50%;background:var(--emerald-wash);color:var(--emerald-deep);font-weight:700;font-size:13px;display:grid;place-items:center}
.ios-step .shareic{width:20px;height:20px;display:inline-block;vertical-align:-5px;color:var(--emerald);margin:0 1px}
.sheet-dismiss{display:block;width:100%;margin-top:10px;padding:12px;color:var(--ink-soft);font-size:14px;font-weight:600;background:none}
.sheet-dismiss:active{opacity:.6}