/* /account: the landing page's storybook palette. Header and footer come from site.css. */
*{box-sizing:border-box}
body{margin:0;background:#fffaf0;color:#303128;font-family:"Nunito",ui-rounded,system-ui,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:#9c4222;text-underline-offset:4px}a:hover{color:#b64b20}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:56px clamp(1.25rem,5vw,2.5rem) 72px}
.intro{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center;margin-bottom:40px}
.intro-art{width:100%;height:250px;object-fit:cover;border-radius:48% 48% 38% 42%}
.eyebrow{font-size:11px;letter-spacing:.17em;font-weight:800;color:#80563f}
h1{font-size:clamp(40px,6vw,64px);line-height:1.06;letter-spacing:-.055em;margin:16px 0 20px;font-weight:800;color:#303128}
h1 span{color:#b64b20}
h2{font-size:27px;letter-spacing:-.035em;margin:4px 0;font-weight:800}
h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
.intro p{max-width:520px;font-size:18px;color:#68685c;margin:0}
.account-card{background:#fffdf8;border:1px solid #e8e1d2;border-radius:28px;padding:32px;box-shadow:0 12px 40px #5d4b330a}
.heading{display:flex;align-items:center;gap:18px}
.moon{display:grid;place-items:center;background:#fce5d5;border-radius:20px;width:66px;height:66px;font-size:40px;color:#b64b20}
#status{color:#68685c;min-height:26px}
.fine{font-size:13px;color:#77746a;max-width:640px}
.wallet{background:#f2eedf;border-radius:22px;padding:20px 24px;display:flex;gap:16px;justify-content:space-between;align-items:center;margin-top:20px}
#points{font-size:42px;font-weight:900;line-height:1.1;color:#303128}
.wallet-label{margin-left:12px;color:#68685c;font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar button{margin:10px 0 0 8px}
button{border:0;border-radius:999px;padding:12px 20px;background:#b64b20;color:#fffdf8;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;min-height:44px;transition:background-color .15s,transform .15s}
button:hover{background:#9a3f1b}
.secondary{background:#f2eedf;color:#303128}.secondary:hover{background:#e8e1cf}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible{outline:3px solid #98642c;outline-offset:4px}
.items{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px}
.items li{background:#f7f2e6;border:1px solid #ece4d3;border-radius:18px;padding:22px 16px}
.item-icon{font-size:34px;display:block;margin-bottom:12px}
.items strong{display:block}
.items small{display:block;color:#77746a;margin-top:6px}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.apps a{padding:22px;background:#f2eedf;border-radius:22px;text-decoration:none;color:#303128;transition:transform .15s}
.apps a:hover{transform:translateY(-2px);color:#303128}
.apps span{display:block;font-size:12px;font-weight:800;color:#b64b20;margin-bottom:12px}
.apps strong{font-size:17px}
.apps p{font-size:14px;margin:6px 0;color:#68685c}
#google-button{min-height:44px;margin:22px 0}
[hidden]{display:none!important}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:20px}.intro-art{height:210px;max-width:420px}}
@media(max-width:600px){main{padding:32px 18px 56px}.account-card{padding:22px 18px}.heading{gap:12px}h2{font-size:23px}.apps{grid-template-columns:1fr;gap:12px}.wallet{padding:18px;align-items:flex-start;flex-direction:column}.items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.items li{padding:16px 12px}.wallet-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}