:root { --brown:#573718; --deep-brown:#322010; --gold:#d7ad3b; --cream:#f8f3e7; --ink:#21170d; --muted:#776b5d; --line:#e5dccb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--cream); }
body { margin:0; color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--cream); }
a { color:inherit; text-decoration:none; }
.app-shell { max-width:660px; min-height:100vh; margin:auto; padding:0 18px 106px; }
.hero { margin:0 -18px; padding:32px 24px 28px; display:flex; gap:14px; align-items:center; color:#fff; background:linear-gradient(135deg,var(--deep-brown),var(--brown)); }
.brand-mark { width:72px; height:62px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#f8f3e7; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
h1,h2,p { margin:0; } h1 { font-family:Georgia,serif; font-size:28px; line-height:1.03; letter-spacing:-.5px; } h2 { font-size:20px; letter-spacing:-.35px; }
.eyebrow { color:var(--gold); font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:1.1px; margin-bottom:5px; }
.icon-button { margin-left:auto; width:38px; height:38px; border:1px solid #937b55; border-radius:10px; color:#fff; background:transparent; font-size:22px; }
.notice { margin:20px 0 26px; border:1px solid #ead6a1; border-radius:14px; padding:13px 14px; display:flex; gap:10px; align-items:center; background:#fff7dd; font-size:13px; line-height:1.35; }
.notice-dot { width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px #f9e9ba; }
.section { margin:0 0 28px; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }.section-heading a,.section-heading span { color:var(--brown); font-size:12px; font-weight:800; }.section-heading span { color:var(--gold); letter-spacing:1px; }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }.quick-card { min-height:128px; padding:15px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 3px 10px #25140009; }.quick-card span { font-size:23px; margin-bottom:auto; color:var(--brown); }.quick-card b { font-size:15px; }.quick-card small { margin-top:2px; color:var(--muted); font-size:11px; }.quick-card.gold { border-color:var(--gold); color:var(--deep-brown); background:var(--gold); }.quick-card.gold span,.quick-card.gold small { color:var(--deep-brown); }
.list-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }.list-card a { min-height:76px; padding:12px 14px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }.list-card a:last-child { border:0; }.list-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--brown); background:#f5ede0; font-size:19px; }.list-card a > span:nth-child(2) { display:grid; gap:2px; }.list-card b { font-size:14px; }.list-card small { color:var(--muted); font-size:11px; }.list-card i { margin-left:auto; color:var(--gold); font-size:28px; font-style:normal; }
.feature-card { padding:22px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#6a4520,#42280f); }.feature-card h2 { font-family:Georgia,serif; font-size:26px; }.feature-card > p:not(.eyebrow) { margin:8px 0 17px; color:#eadfcf; font-size:14px; }.primary-button { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-radius:10px; color:var(--deep-brown); background:var(--gold); font-size:14px; font-weight:800; }.primary-button span,.contact-card a span { font-size:20px; }.setup-note { display:block; margin-top:12px; color:#d8c5a7; line-height:1.35; font-size:10px; }
.contact-card { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:20px; border-radius:16px; background:#ece2ce; }.contact-card .eyebrow { color:var(--brown); }.contact-card h2 { font-family:Georgia,serif; font-size:21px; }.contact-card a { display:flex; align-items:center; gap:7px; color:var(--brown); font-size:13px; font-weight:800; white-space:nowrap; }
.bottom-nav { position:fixed; z-index:3; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,660px); display:flex; justify-content:space-around; padding:10px 10px max(12px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fffdf9ed; backdrop-filter:blur(12px); }.bottom-nav a { min-width:64px; display:grid; gap:3px; place-items:center; color:#958979; font-size:10px; font-weight:700; }.bottom-nav span { font-size:19px; line-height:18px; }.bottom-nav .active { color:var(--brown); }
@media (min-width:680px) { body { background:#e9dfcf; }.app-shell { background:var(--cream); box-shadow:0 0 40px #3a260c15; } }