/* Little Moments of Calm · shared styles for the bonus pages (mobile first) */
:root{
  --night:#0F172A; --night-2:#16213b; --night-3:#1e2b4a; --line:#2a3a60;
  --gold:#F5A623; --gold-soft:#f8c46a; --cream:#fdf3d8; --ink:#eef1f8; --muted:#a3adc8; --err:#f3a090;
  --display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--ink)}
body{font-family:var(--body);font-size:17px;line-height:1.55;
  background:radial-gradient(800px 460px at 50% -8%,#24345e 0%,transparent 62%),var(--night);
  padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:620px;margin:0 auto;display:grid;gap:22px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;line-height:1.15}
a{color:var(--gold-soft)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:800}
.muted{color:var(--muted)}
.small{font-size:.88rem;color:var(--muted);margin:0}

/* book strip */
.book{display:flex;align-items:center;gap:14px;background:rgba(253,243,216,.06);border:1px solid var(--line);border-radius:18px;padding:10px 14px 10px 10px}
.book img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none}
.book b{display:block;font-family:var(--display);font-weight:600;color:var(--cream);font-size:1rem}
.book span{font-size:.85rem;color:var(--muted)}

/* hero */
.hero{display:grid;gap:10px;text-align:center}
.hero h1{font-size:clamp(2rem,8vw,2.8rem)}
.hero h1 span{color:var(--gold);display:block}
.hero p{margin:0;color:#d9dfef}
.lock{display:inline-flex;align-items:center;gap:8px;justify-self:center;background:rgba(245,166,35,.12);color:var(--gold-soft);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem}
.lock svg{width:16px;height:16px;fill:currentColor}

/* card */
.card{background:linear-gradient(170deg,#1b2850,#121c36);border:1px solid var(--line);border-radius:26px;padding:clamp(18px,5vw,28px);display:grid;gap:14px}
.card h2{font-size:clamp(1.4rem,5.5vw,1.8rem)}

/* form */
form{display:grid;gap:14px}
.field{display:grid;gap:6px}
label{font-weight:700;font-size:1rem;color:var(--cream)}
input[type=text],input[type=email]{font:inherit;font-size:18px;min-height:56px;padding:12px 16px;border-radius:14px;width:100%;min-width:0;
  background:#fffdf7;color:#0F172A;border:2px solid var(--gold-soft)}
input[type=text]:focus,input[type=email]:focus{border-color:var(--gold);outline:3px solid rgba(245,166,35,.45);outline-offset:1px}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:.95rem;color:#e3e8f4;cursor:pointer}
.check input{width:28px;height:28px;margin-top:1px;flex:none;accent-color:var(--gold);color-scheme:light;outline:2px solid var(--gold-soft);outline-offset:1px;border-radius:4px}
.check a{color:var(--gold-soft)}
.submit{font:inherit;font-weight:800;border:none;border-radius:999px;background:var(--gold);color:var(--night);min-height:58px;padding:14px 26px;cursor:pointer;font-size:1.1rem;width:100%}
.submit:hover{background:var(--gold-soft)}
.submit:disabled{opacity:.7;cursor:wait}
.msg{border-radius:14px;padding:12px 14px;font-weight:700;margin:0}
.msg.err{background:rgba(243,160,144,.14);color:var(--err)}
.msg.info{background:rgba(253,243,216,.08);color:var(--cream)}

/* what's inside (no links) */
.inside{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inside li{display:flex;gap:12px;align-items:flex-start;background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.inside .ic{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(245,166,35,.12);display:grid;place-items:center;font-size:1.25rem}
.inside b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem}
.inside span{color:var(--muted);font-size:.92rem}

/* downloads (thank-you page) */
.size{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.size button{font:inherit;font-weight:800;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer}
.size button[aria-pressed=true]{background:var(--gold);color:var(--night)}
.dl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dl li{display:grid;gap:10px;background:var(--night-2);border:1px solid var(--line);border-radius:18px;padding:14px}
.dl .top{display:flex;gap:12px;align-items:flex-start}
.dl b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem}
.dl span{color:var(--muted);font-size:.92rem}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;background:var(--gold);color:var(--night);font-weight:800;text-decoration:none;padding:12px 20px;text-align:center}
.btn:hover{background:var(--gold-soft)}
.btn.ghost{background:transparent;color:var(--cream);border:2px solid var(--cream)}
.btn.ghost:hover{background:rgba(253,243,216,.08)}

.two{display:grid;gap:8px}
footer{color:var(--muted);font-size:.85rem;display:flex;gap:10px 16px;flex-wrap:wrap;justify-content:center;text-align:center;border-top:1px solid var(--line);padding-top:18px}
@media (min-width:700px){ .dl li{grid-template-columns:minmax(0,1fr) 260px;align-items:center} }