/* Privacy and Terms: the app's wall, grain and smoked glass, read like a Settings page */
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Sacramento'; src: url('/fonts/sacramento-ember.woff2') format('woff2'); font-display: block; }
:root {
  color-scheme: dark;
  --label: #fff; --label-2: #cdc6c1; --label-3: #a49c97; --card: rgba(12, 18, 20, 0.42); --separator: rgba(255, 255, 255, 0.1);
  --wall:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.7)),
    radial-gradient(90% 60% at 100% 0%, #ff7a2f 0%, #e3301c 30%, rgba(90, 18, 10, 0.6) 55%, transparent 75%),
    radial-gradient(80% 55% at 0% 100%, #ff8a3d 0%, #c92a17 28%, transparent 60%),
    radial-gradient(70% 50% at 10% 35%, rgba(19, 90, 105, 0.9), transparent 70%),
    linear-gradient(180deg, #071215, #0b2228);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0a1619; -webkit-text-size-adjust: 100%; }
body { font: 15px/1.6 'General Sans', system-ui, sans-serif; color: var(--label-2); padding: 0 20px 64px; }
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: var(--wall); }
body::after { background: url('/grain.png') 0 0 / 256px; opacity: 0.32; mix-blend-mode: soft-light; }
main { max-width: 600px; margin: 0 auto; }
a { color: #ffb057; text-underline-offset: 3px; }
svg { flex: none; }

nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 0 0; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--label); font-size: 22px; text-decoration: none; }
.back span { font: 30px/1 'Sacramento', cursive; }
.switch { display: flex; padding: 2px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.switch a { min-height: 44px; padding: 0 16px; display: flex; align-items: center; border-radius: 99px; color: var(--label-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.switch a[aria-current] { background: rgba(255, 255, 255, 0.9); color: #000; }

header { padding: 40px 0 28px; }
header img { display: block; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
h1 { margin-top: 20px; font-size: 32px; line-height: 1.15; font-weight: 400; color: var(--label); letter-spacing: -0.01em; }
.date { margin-top: 6px; font-size: 13px; color: var(--label-3); }
.lede { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--label); font-weight: 300; }

.card { background: var(--card); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-radius: 28px; padding: 22px 20px; margin-top: 12px; }
.label { margin: 32px 16px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label-2); }
.label + .card { margin-top: 8px; }
h2 { font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--label); margin-bottom: 8px; }
.card p + p, .card p + ul, .card ul + p { margin-top: 10px; }
ul { padding-left: 18px; }
li + li { margin-top: 8px; }
li::marker { color: var(--label-3); }
b { color: var(--label); font-weight: 500; }

.short { list-style: none; padding: 6px 20px; }
.short li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.short li + li { margin: 0; border-top: 0.5px solid var(--separator); }
.tile { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, rgba(255, 176, 87, 0.95), rgba(227, 48, 28, 0.95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.short span { display: block; font-size: 14px; line-height: 1.45; }
.short b { display: block; font-size: 15px; margin-bottom: 2px; }

footer { margin-top: 32px; text-align: center; font-size: 13px; color: var(--label-3); }
footer p + p { margin-top: 6px; }