/*
 * Page layout helpers for the public pages (/privacy, /terms, /scan),
 * styled through tokens only. Components are in components.css; type styles
 * are the classes in tokens.css (.display, .title, .lede, .body, ...).
 */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
body { background: var(--bg); color: var(--ink); }

/* Phone sizes from the usage notes in design/tokens/tokens.json. */
@media (max-width: 767.98px) {
  .section-title { font-size: 30px; }
  .hero { font-size: 40px; }
}

/* The 1200px website container with the 16px phone gutter (DESIGN.md, Layout). */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--space-md); padding-right: var(--space-md); box-sizing: border-box; }
@media (min-width: 768px) { .wrap { padding-left: var(--space-xl); padding-right: var(--space-xl); } }
.wrap--doc { max-width: 1100px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.band { background: var(--header); color: var(--on-header); }
.band .muted { color: var(--on-header-secondary); }
.band .card, .band .mon-finding { color: var(--ink); }
.band .card .muted, .band .mon-finding .muted { color: var(--ink-secondary); }
.muted { color: var(--ink-secondary); }
.lift { box-shadow: var(--shadow-card); }
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; flex: none; }

/* Privacy and terms */
.doc-section { display: grid; gap: var(--space-sm); scroll-margin-top: var(--space-lg); }
.doc-section h2 { margin: 0; }
.doc-p { margin: 0; max-width: 65ch; }
.doc-list { margin: 0; padding-left: 20px; display: grid; gap: var(--space-xs); max-width: 65ch; }
.doc-toc a { display: flex; align-items: center; min-height: 44px; }

/* Free scan */
.scan-input { flex: 1 1 280px; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--elevated); color: var(--ink); }
.scan-input[aria-invalid="true"] { border: 2px solid var(--critical); }
/* The Turnstile widget is a fixed 300px, so phones get less padding round the form. */
.scan-hero { padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px); }
.scan-form { padding: 20px; }
@media (max-width: 480px) { .scan-hero { padding: 28px 12px; } .scan-form { padding: var(--space-md); } }
.scan-findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }

/* Landing page (design/reference/landing.html) */
.lp-section { padding: var(--space-3xl) 0; background: var(--bg); }
@media (min-width: 768px) { .lp-section { padding: var(--space-4xl) 0; } }
.lp-section--alt { background: var(--elevated); }
.lp-stack { display: grid; gap: var(--space-2xl); }
.lp-intro { display: grid; gap: var(--space-md); max-width: 720px; }
.lp-cards { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-card { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.lp-label { margin: 0; text-transform: uppercase; color: var(--ink-secondary); }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); background: var(--header); color: var(--on-header); border-radius: var(--radius-panel); }
.lp-cta__copy { display: grid; gap: var(--space-sm); max-width: 620px; }
.lp-cta .lead { color: var(--on-header-secondary); }
.lp-cta :focus-visible { outline-color: var(--on-header); }

.mon > main { margin-bottom: var(--space-3xl); }