/* Roll This: the "What's in Roll This+" page. The app's own fonts and dark colors, nothing else. */
@font-face{font-family:"Young Serif";src:url(../fonts/young-serif.woff) format("woff");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-regular.woff) format("woff");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-bold.woff) format("woff");font-weight:600 900;font-style:normal;font-display:swap}
:root{
  --bg:#151013;--surface:#1E171B;--ink:#F2EAED;--muted:#AA9BA1;--line:#352A30;
  --glyph:#DDB7C1;--accent:#E2546F;--accent-ink:#22060C;
  --font-display:"Young Serif",Georgia,"Times New Roman",serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
main{max-width:46rem;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 28px) 16px calc(env(safe-area-inset-bottom,0px) + 48px)}
.brand{margin:0}
.brand a{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);color:var(--glyph);text-decoration:none;font-size:1.05rem}
.brand .logo{display:block;width:36px;height:36px}
h1{font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1.15;margin:.35em 0 .4em;text-wrap:balance}
.lede{font-size:1.08rem;margin:0 0 1.5rem}
h2{font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.25;margin:0 0 .5rem}
section{padding:1.5rem 0;border-top:1px solid var(--line)}
section.short{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.1rem .4rem;margin-bottom:.5rem}
section.short + section{border-top:0}
p{margin:0 0 .8rem}
ul{margin:0 0 .8rem;padding-left:1.15rem}
li{margin:0 0 .55rem}
li::marker{color:var(--accent)}
p,li{color:#DCD1D6;overflow-wrap:anywhere}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Each feature: its words, then a phone screenshot; side by side on a wider screen. */
.feature{display:grid;gap:1rem}
figure{margin:0;justify-self:center;width:min(100%,280px)}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
@media (min-width:640px){
  .feature{grid-template-columns:1fr 260px;gap:2rem;align-items:center}
  .feature figure{width:260px}
}
footer{padding-top:1.5rem;border-top:1px solid var(--line)}
.btn{display:inline-block;min-height:48px;padding:12px 22px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;margin-bottom:1.25rem}
.fine{font-size:.8rem;line-height:1.5;color:var(--muted)}
.fine a{color:var(--accent)}