/* Simple pages (spot, privacy, terms): the page base, the wordmark header, buttons, toast. Colours from tokens.css. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100svh; background:var(--cream); color:var(--ink); font-family:var(--font); font-weight:700; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-1; background:var(--page)}
img{display:block; max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--gold)}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:10px}
button, a{font-family:inherit; -webkit-tap-highlight-color:transparent}

.wrap{max-width:440px; margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom))}
.wordmark{display:block; width:78px; margin:0 auto}
.wordmark img{width:100%; height:auto}

/* buttons: paper with an ink edge, or green candy; both press down into their shadow */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 20px; border:var(--border); border-radius:var(--r-pill); background:var(--paper); color:var(--ink); box-shadow:var(--drop-card); font-size:16px; font-weight:900; text-decoration:none; cursor:pointer; transition:transform .18s var(--spring), box-shadow .18s}
.btn:active{transform:translateY(var(--press)); box-shadow:var(--drop-pressed)}
.btn.candy{background:var(--candy-green); color:var(--paper); box-shadow:var(--candy-shine), var(--drop-button)}
.btn.candy:active{box-shadow:var(--candy-shine), var(--drop-pressed)}

.toast{position:fixed; left:50%; top:calc(16px + env(safe-area-inset-top)); z-index:90; max-width:calc(100% - 32px); transform:translate(-50%, -20px); opacity:0; background:var(--ink); color:var(--paper); padding:11px 16px; border-radius:var(--r-pill); font-weight:800; font-size:14px; text-align:center; transition:opacity .25s ease, transform .3s var(--ease); pointer-events:none}
.toast.show{opacity:1; transform:translate(-50%, 0)}

@media (prefers-reduced-motion: reduce){ .btn{transition:none} }