/* wishhh — /safety, /privacy, /terms and /delete-account views (single page, see main.js router)
   Builds on style.css tokens. */

[hidden] { display: none !important; }

/* ---------- Views: <html data-view> picks which part of <main> shows ---------- */
html:not([data-view="home"]) main > :not(.view),
html:not([data-view="safety"]) .view[data-view="safety"],
html:not([data-view="delete-account"]) .view[data-view="delete-account"],
html:not([data-view="privacy"]) .view[data-view="privacy"],
html:not([data-view="terms"]) .view[data-view="terms"] { display: none; }

/* ---------- Urgent strip ---------- */
.urgent { background: var(--wine-dark); color: #fff; }
.urgent .container { display: grid; gap: 14px; padding-top: 18px; padding-bottom: 18px; }
.urgent strong { display: block; font-size: 17px; color: #F0D9B5; }
.urgent p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 46em; }
.urgent .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.urgent .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.urgent .btn-outline:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Page hero ---------- */
.page-hero {
  color: #fff;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(201, 162, 107, .2), transparent 60%),
    linear-gradient(135deg, #2E1820 0%, #5A2232 60%, #7D2E3F 100%);
}
.page-hero .container { padding-top: 48px; padding-bottom: 52px; }
.page-hero .crumbs { font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 18px; }
.page-hero .crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.page-hero .crumbs a:hover { text-decoration: underline; }
.page-hero h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -.5px; }
.page-hero h1 em { font-style: italic; color: #F0D9B5; }
.page-hero .lede { margin-top: 16px; font-size: 18px; color: rgba(255, 255, 255, .82); max-width: 40em; }

/* ---------- Safety protocol & legal ---------- */
.view .legal { padding-top: 48px; }
.legal .summary { padding: 16px 20px; border-radius: var(--r-sm); background: var(--gold-soft); color: #4E3A1E; margin-bottom: 28px; }
.legal .toc ol { columns: 2 260px; list-style: none; padding-left: 0; }

/* ---------- Cards (also styles home cards) ---------- */
.card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--ink); }
.card p, .card li { color: var(--ink-2); font-size: 15px; }
.card p + p { margin-top: 10px; }
.card h3 + p { margin-top: 8px; }
.card a:not(.btn) { color: var(--wine); }
.card .eyebrow { margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .urgent .container { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .page-hero .container { padding-top: 64px; padding-bottom: 72px; }
}

/* Three nav links don't fit beside Download on small phones. */
@media (max-width: 420px) {
  html[data-view="home"] .nav a[href="/safety"],
  html:not([data-view="home"]) .nav a[href="/#features"] { display: none; }
}