/* Verelect — the public pages in the app's look (owner, 2026-10-12): pricing, how it works, privacy, terms, support and
   the error page. They keep their markup; body.play (play.css) maps the old tokens onto the app's palette and type, and
   this layer gives the nav, footer and each page the app's blocks: a 2px ink edge, a hard drop, cream ground. */

/* ── the bar: the app's — cream, a 2px ink rule, the owner's logo, the links as pills ── */
body.play.site .top { background: var(--p-cream); border-bottom: var(--p-border); }
body.play.site .top-in { max-width: 1200px; min-height: 72px; padding: 10px 32px; }   /* room above and below the logo's tagline */
body.play.site .top .p-brand { margin-right: auto; }
body.play.site .nav { gap: 6px; }
body.play.site .nav a:not(.btn), body.play.site .nav .menu > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  box-sizing: border-box; border: 2px solid transparent; border-radius: 999px; font: 800 15px/1 var(--p-body); color: var(--p-ink); box-shadow: none; }
body.play.site .nav a:not(.btn):hover, body.play.site .nav .menu > summary:hover { border-color: var(--p-ink); background: var(--p-surface); color: var(--p-ink); }
body.play.site .nav a.on, body.play.site .nav .menu > summary.on { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-cream); box-shadow: none; text-decoration: none; }
body.play.site .nav .btn.primary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; box-sizing: border-box; border: var(--p-border);
  border-radius: 999px; box-shadow: var(--p-drop-sm); background: var(--p-green-strong); color: var(--p-ink); font: 600 16px/1 var(--p-display); text-decoration: none; }
body.play.site .nav .btn.primary:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--p-ink); background: var(--p-green-strong); color: var(--p-ink); text-decoration: none; }
body.play.site .navbtn { border: var(--p-border); border-radius: 12px; background: var(--p-surface); box-shadow: var(--p-drop-sm); }
body.play.site .navbtn:hover, body.play.site .navbtn[aria-expanded="true"] { background: var(--p-gold); }
body.play.site .navbtn span { background: var(--p-ink); }
body.play.site .menu-panel { border: var(--p-border); border-radius: var(--p-r-sm); box-shadow: var(--p-drop-sm); background: var(--p-surface); }
@media (max-width: 760px) {
  body.play.site .top-in { min-height: 64px; padding: 8px 16px; }
  body.play.site .nav { background: var(--p-cream); border: var(--p-border); border-radius: var(--p-r); box-shadow: var(--p-drop); padding: 10px; gap: 4px; }
  body.play.site .nav a:not(.btn), body.play.site .nav .menu > summary { font-size: 17px; }
  body.play.site .nav .btn.primary { justify-content: center; margin-top: 6px; }
  body.play.site .menu-panel { border: 0; box-shadow: none; background: transparent; }
}

/* ── the footer on these pages: a 2px rule, the sentence, the links ── */
body.play.site .foot-in { border-top: var(--p-border); }
body.play.site .foot p { font-weight: 700; color: var(--p-muted); }
body.play.site .foot a { font-weight: 800; color: var(--p-blue-ink); }

/* ── headings in the display face; the eyebrow as the app's ── */
body.play.site h1, body.play.site h2, body.play.site h3, body.play.site .pp-h1 { font-family: var(--p-display); font-weight: 700; color: var(--p-ink); letter-spacing: 0; }
body.play.site .eyebrow { font-family: var(--p-display); font-weight: 600; letter-spacing: .06em; color: var(--p-muted); }

/* ── pricing: each plan an app block; the one most choose on gold ── */
body.play.site .pp-plan { border: var(--p-border); border-radius: var(--p-r); box-shadow: var(--p-drop); background: var(--p-surface); padding: 28px 24px 24px; }
body.play.site .pp-plan:hover { border-color: var(--p-ink); }
body.play.site .pp-best { background: var(--p-gold); }
body.play.site .pp-tag { border: var(--p-border); background: var(--p-surface); color: var(--p-ink); font: 800 12px/1.4 var(--p-body); }
body.play.site .pp-amt { font: 700 40px/1 var(--p-display); color: var(--p-ink); }
body.play.site .pp-amt .pp-now { color: var(--p-ink); }
body.play.site .pp-safe { border: var(--p-border); border-radius: var(--p-r); box-shadow: var(--p-drop); background: var(--p-blue); }
body.play.site .pp-state { border: var(--p-border); border-radius: var(--p-r-tile); box-shadow: var(--p-drop-sm); background: var(--p-surface); }

/* ── how it works: the mock screens as app cards ── */
body.play.site .st-card, body.play.site .hw-uf, body.play.site .st-cal { border: var(--p-border); border-radius: var(--p-r-tile); box-shadow: var(--p-drop-sm); background: var(--p-surface); }
body.play.site main.hiw > .hw-tint { background: var(--surface-2); border-top: var(--p-border); border-bottom: var(--p-border); }

/* ── legal and support: the draft note as a dashed gold block ── */
body.play.site .prose .card.edge { border: 3px dashed var(--p-gold-ink); border-radius: var(--p-r-tile); background: var(--p-gold); padding: 12px 16px; color: var(--p-ink); }
body.play.site .prose .card.edge b { color: var(--p-ink); font-weight: 800; }
body.play.site .prose dt { font-family: var(--p-display); font-weight: 600; }
body.play.site .pp-go, body.play.site .pp-close-go, body.play.site .hw-go, body.play.site .plan-go { border: var(--p-border); box-shadow: var(--p-drop-sm); }

/* ── the dark bands (pricing's close, how it works' end): ink ground, cream words ── */
body.play.site .pp-final, body.play.site main.hiw > .hw-final { background: var(--p-ink); color: var(--p-cream); border-color: var(--p-ink); }
body.play.site .pp-final-h { font-family: var(--p-display); color: var(--p-cream); letter-spacing: 0; }
body.play.site main.hiw > .hw-final h1, body.play.site main.hiw > .hw-final h2, body.play.site main.hiw > .hw-final p { color: var(--p-cream); }

/* ── how it works: the lecture-theatre screen is a dark screen; done steps carry ink numbers ── */
body.play.site .slide-screen { background: var(--p-ink); border: var(--p-border); }
body.play.site .slide-title { color: var(--p-cream); }
body.play.site .slide-n { color: var(--p-gold-strong); }
body.play.site .uf-step[data-state="done"] .uf-n, body.play.site .uf-step .uf-n { color: var(--p-ink); }

/* ── a link alone on its line is a control: 44px tall, like the app's ── */
body.play.site #hw-back, body.play.site .s-lone > a { display: inline-flex; align-items: center; min-height: 44px; }