/* Shared styles for the static pages (vision, terms, privacy, contact). Loaded after app.css. */
.vwrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vhero { text-align: center; padding: 40px 0 24px; }
.vhero img { width: min(420px, 82vw); height: auto; filter: drop-shadow(0 12px 40px rgba(0,0,0,0.5)); }
.vhero h1 { max-width: 720px; font-size: clamp(30px, 5.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 26px auto 14px; }
.vhero h1 em { font-style: normal; color: var(--accent-2); }
.vhero p { font-size: 18px; color: var(--ink-2); max-width: 620px; margin: 0 auto; line-height: 1.6; }
.vsec { margin-top: 28px; padding: 28px 28px 26px; }
.vsec h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.vsec h3 { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.vsec p, .vsec li { color: var(--ink-2); margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.vsec ul { margin: 0 0 12px; padding-left: 22px; }
.vsec li { margin-bottom: 6px; }
.vsec p:last-child { margin-bottom: 0; }
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 6px; }
.numbers div { background: rgba(0,0,0,0.28); border: 1px solid var(--edge); border-radius: 14px; padding: 16px 16px 14px; }
.numbers b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.numbers span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
.beliefs { display: grid; gap: 14px; margin-top: 16px; }
.belief { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.belief i { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #14213D; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; }
.belief b { display: block; font-size: 16px; margin-bottom: 3px; }
.belief span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.road { display: grid; margin-top: 12px; border-left: 2px solid var(--edge-2); padding-left: 20px; }
.road > div { position: relative; padding: 4px 0 18px; }
.road > div::before { content: ""; position: absolute; left: -27px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px var(--ground); }
.road > div.now::before { background: var(--accent); box-shadow: 0 0 0 4px var(--ground), 0 0 18px rgba(242,169,59,0.7); }
.road small { display: block; color: var(--muted); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.road b { display: block; font-size: 16px; margin-bottom: 4px; }
.road span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cta .btn { text-decoration: none; padding: 0 18px; }
.cta .btn.ghost { background: var(--glass-2); color: var(--ink); border: 1px solid var(--edge-2); }
.pagehead { padding: 28px 0 6px; }
.pagehead h1 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.pagehead p { color: var(--muted); margin: 0; font-size: 14px; }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.contacts a { display: block; background: rgba(0,0,0,0.28); border: 1px solid var(--edge); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--ink); }
.contacts a:hover { border-color: var(--edge-2); background: var(--glass-2); }
.contacts b { display: block; font-size: 15px; margin-bottom: 4px; }
.contacts span { color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) { .numbers { grid-template-columns: 1fr; } .vsec { padding: 20px 18px; } }

/* Wallet record (/wallet/<address>). The static pages are plain documents, so this page scrolls
   normally instead of inheriting the app shell's fixed-height, no-scroll body. */
/* the static pages scroll as a normal document; app.css pins the body for the universe canvas only */
body.wpage, body:has(> .vwrap) { height: auto; min-height: 100dvh; overflow-y: auto; }
.wlabel { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pagehead h1#short { font-variant-numeric: tabular-nums; word-break: break-all; }
.wacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.wcopy { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--edge); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: var(--font-display); }
.wcopy:hover { color: var(--ink); border-color: var(--edge-2); }
.pagehead p#role { color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.wscroll { overflow-x: auto; margin: 4px -6px 0; padding: 0 6px; }
.wtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.wtable th { text-align: left; padding: 8px 14px 8px 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.wtable td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--edge); vertical-align: middle; white-space: nowrap; }
.wtable tr:last-child td { border-bottom: 0; }
.wtable td.wnum { font-variant-numeric: tabular-nums; }
.wtable tr.isfrom td { background: rgba(242,169,59,0.07); }
.wtable tr.isfrom td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.wcoin { display: inline-block; text-decoration: none; color: var(--ink); }
.wcoin b { display: block; font-family: var(--font-display); font-size: 14px; }
.wcoin small { display: block; color: var(--muted); font-size: 11.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.wtag { display: block; color: var(--accent-2); font-size: 11px; margin-top: 2px; }
.wnote { color: var(--muted); font-size: 12.5px; margin: 12px 0 0 !important; }
#unknown { margin: 8px 0 0; padding-left: 20px; }
#unknown li { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.wfoot { color: var(--muted); font-size: 13px; margin: 22px 2px 8px; }
@media (max-width: 640px) { .wcoin small { max-width: 150px; } }