/* How to mint — same design system as /mint */
:root{
 color-scheme:light;
 --ink:#0e1b2a;--ink-2:#33465c;--gold:#FFC53D;--gold-hi:#FFDE7A;--berry:#FF6B6B;
 --parch:#fffdf4;--parch2:#fdf4de;--cream:#FEFDEE;
 --display:"Baloo 2",system-ui,cursive;--ui:"Fredoka",system-ui,sans-serif;--body:"Nunito",system-ui,sans-serif;
 --pop:0 4px 0 var(--ink);--pop-hi:0 7px 0 var(--ink);--ease:cubic-bezier(.2,.9,.3,1.2);
 --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
img{max-width:100%;height:auto}
body{margin:0;min-height:100%;max-width:100%;color:var(--ink);font-family:var(--body);
 -webkit-font-smoothing:antialiased;
 background:
  radial-gradient(90% 60% at 50% -8%, rgba(255,222,122,.55), rgba(255,222,122,0) 60%),
  radial-gradient(70% 50% at 88% 12%, rgba(255,107,107,.24), rgba(255,107,107,0) 60%),
  radial-gradient(80% 60% at 8% 88%, rgba(255,253,238,.6), rgba(255,253,238,0) 60%),
  linear-gradient(180deg,#bfe3d6 0%,#9cc6b8 46%,#8dbcab 100%);
 background-attachment:fixed;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:820px;margin:0 auto;padding:0 22px 10px}
section{position:relative;z-index:1;scroll-margin-top:18px}

.bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;max-width:1120px;width:100%;margin:0 auto}
.brand{display:block;line-height:0}
.brand img{display:block;width:min(150px,34vw);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.bar .back{flex:none;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.2px;text-decoration:none;color:var(--ink);
 background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;padding:9px 17px;box-shadow:var(--pop);
 transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.bar .back:hover{transform:translateY(-2px);box-shadow:var(--pop-hi);background:#fff}
.bar .back:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}

.hero{text-align:center;padding-top:8px}
.crossover{display:inline-block;font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
 color:var(--ink);background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;padding:5px 15px;box-shadow:0 3px 0 var(--ink)}
.hero h1{font-family:var(--display);font-weight:800;color:var(--ink);
 font-size:clamp(28px,5.4vw,52px);line-height:1.16;margin:14px 0 0;letter-spacing:.3px;
 overflow-wrap:break-word;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.hero h1 .hl{white-space:nowrap;background:linear-gradient(180deg,transparent 44%,var(--gold) 44%,var(--gold) 80%,transparent 80%);border-radius:4px;padding:0 2px}
.lede{font-size:clamp(16px,2.1vw,19px);color:var(--ink-2);margin:16px auto 0;line-height:1.6;max-width:640px}
.lede b{color:var(--ink);font-weight:700}
.hcta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:22px 0 8px}
.submit{display:inline-block;text-align:center;text-decoration:none;font-family:var(--ui);font-weight:700;font-size:16px;letter-spacing:.3px;
 color:var(--ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:3px solid var(--ink);border-radius:999px;
 padding:14px 22px;box-shadow:0 5px 0 var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.submit:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.submit:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.subalt{display:inline-block;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.1px;text-decoration:none;color:var(--ink);
 background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:9px 17px;box-shadow:0 3px 0 var(--ink);
 transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.subalt:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);background:var(--gold-hi)}

.block{margin:40px 0 0}
.block h2{text-align:center;font-family:var(--display);font-weight:800;color:var(--ink);
 font-size:clamp(22px,3.2vw,32px);letter-spacing:.2px;margin:0 0 8px;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.flede{text-align:center;font-size:16px;color:var(--ink-2);margin:0 auto 22px;max-width:580px;line-height:1.6}
.flede b{color:var(--ink)}

.step{position:relative;background:var(--parch);border:3px solid var(--ink);border-radius:22px;padding:28px 20px 20px;box-shadow:var(--pop);margin:0 0 22px}
.snum{position:absolute;top:-15px;left:17px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
 font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold));
 border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.scopy > b{display:block;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.25;color:var(--ink)}
.scopy p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:8px 0 0}
.scopy p b{color:var(--ink);font-weight:800}
.scopy a{color:var(--ink);font-weight:800}
.hint{font-size:14.5px!important;font-style:italic}
.wlink{display:inline-block;margin-top:14px;font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.1px;text-decoration:none;color:var(--ink);
 background:var(--cream);border:2.5px solid var(--ink);border-radius:999px;padding:8px 15px;box-shadow:0 3px 0 var(--ink);
 transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.wlink:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);background:var(--gold-hi)}

.shot{margin:16px 0 2px;padding:0;max-width:100%}
.shot figcaption{font-family:var(--ui);font-weight:500;font-size:13.5px;color:var(--ink-2);text-align:center;margin-top:10px;line-height:1.45}
.shot figcaption i{font-style:italic}
.zoom{display:block;width:100%;margin:0;padding:0;border:2.5px solid var(--ink);border-radius:16px;background:#fff;overflow:hidden;
 box-shadow:0 3px 0 var(--ink);cursor:zoom-in;appearance:none;-webkit-appearance:none;font:inherit;color:inherit}
.zoom img{display:block;width:100%;height:auto}
.shot.tall,.shot.slim{width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.shot.wide .zoom{background:var(--parch2)}

.note{display:flex;align-items:flex-start;gap:14px;margin:4px 0 0;background:var(--parch2);border:3px solid var(--ink);border-radius:20px;
 padding:15px 18px;box-shadow:var(--pop)}
.note img{width:36px;height:36px;flex:none;display:block;margin-top:2px}
.note p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0}
.note b{color:var(--ink)}

.warn{margin:44px 0 12px;background:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:22px 22px 20px;box-shadow:var(--pop);color:#dfe7ef}
.warn h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,3vw,26px);color:var(--gold-hi);margin:0 0 10px;text-align:left;text-shadow:none}
.warn p,.warn li{font-size:16px;line-height:1.6;margin:0 0 10px}
.warn b{color:#fff}
.warn a{color:var(--gold-hi);font-weight:700}
.warn ul{margin:0;padding:0 0 0 18px}
.warn li{margin:0 0 8px}

footer{position:relative;z-index:1;text-align:center;padding:34px 22px calc(40px + var(--sb));
 font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.2px;color:var(--ink-2)}
.flinks{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
footer a{font-family:var(--ui);font-weight:600;font-size:12px;text-decoration:none;color:var(--ink);
 border:2px solid transparent;border-radius:999px;padding:5px 12px;transition:background .16s,border-color .16s,transform .16s var(--ease)}
footer a:hover{background:var(--cream);border-color:var(--ink);transform:translateY(-2px)}

.lb{position:fixed;inset:0;z-index:40;background:rgba(14,27,42,.88);display:flex;align-items:center;justify-content:center;padding:18px}
.lb[hidden]{display:none}
.lb img{max-width:min(960px,100%);max-height:92vh;width:auto;height:auto;border-radius:16px;border:3px solid var(--ink);background:#fff;box-shadow:0 8px 0 var(--ink)}
.lbx{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);background:var(--gold);
 font-size:26px;line-height:1;color:var(--ink);cursor:pointer;box-shadow:var(--pop)}

body.embed{background:none}
body.embed .bar,body.embed footer{display:none}
body.embed .wrap{padding-top:18px}

@media(max-width:620px){
 .bar{padding:12px 14px}
 .bar .back{font-size:11.5px;padding:8px 14px}
 .wrap{padding:0 14px 10px}
 .hero h1{font-size:27px;margin-top:12px}
 .lede,.flede,.scopy p,.warn p,.warn li{font-size:15.5px}
 .step{padding:26px 16px 16px}
 .scopy > b{font-size:18.5px}
 .shot.tall,.shot.slim{max-width:100%}
 .warn{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){
 .bar .back,.submit,.subalt,.wlink{transition:none}
}