/* security.css — page-specific additions for /security. Loads AFTER legal.css,
   which provides the base (vars, topbar, white reading cards, footer, dark mode).
   Only the three special treatments + h3 sub-headings live here. */

/* --- h3 sub-headings (legal.css only styles h1/h2) --- */
main h3{background:transparent;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--brand);margin:30px 0 8px;line-height:1.3;}

/* --- ol card parity (legal.css cards only ul/p/table) --- */
main ol{background:#fff;border-radius:14px;box-shadow:0 2px 30px rgba(72,80,178,0.07);
  margin:16px 0;padding:14px 22px 14px 42px;color:var(--muted);}
main ol li{margin:7px 0;}
main ol li strong{color:var(--ink);font-weight:600;}

/* --- 1 · The four STATEMENT boxes (loudest thing on the page) ---
   Mirrors the homepage .capture CTA: awaken-blue bg, white text, rounded, generous
   padding — plus faint STATIC white constellation dots (layered radial-gradients).
   ponytail: static dots, not a live per-box canvas; upgrade only if it reads flat. */
.statement{
  background:var(--brand);
  background-image:
    radial-gradient(1.6px 1.6px at 18% 28%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.4px 1.4px at 72% 22%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 40% 68%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px   at 88% 58%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 58% 88%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px   at 30% 45%, rgba(255,255,255,0.45), transparent);
  color:#fff;border-radius:22px;padding:30px 30px;margin:32px 0;
  box-shadow:0 6px 44px rgba(72,80,178,0.24);
}
.statement h3{color:#fff;margin:0 0 12px;font-size:1.32rem;line-height:1.25;}
.statement p{background:transparent;box-shadow:none;color:#fff;padding:0;margin:10px 0;}
.statement strong{color:#fff;}
.statement .attrib{font-size:0.9rem;font-weight:400;font-style:normal;opacity:0.82;margin:4px 0 10px;}

/* --- 2 · The ⚠️ password-reset WARNING (single most important paragraph) ---
   Unmissable but not alarming: warm amber left rule + faint cream tint, heading stays blue. */
.warning{background:#fdf6e9;border-left:5px solid #c77d0a;border-radius:14px;
  padding:22px 26px;margin:28px 0;box-shadow:0 2px 30px rgba(72,80,178,0.07);}
.warning h3{margin-top:0;}
.warning p{background:transparent;box-shadow:none;padding:0;margin:10px 0;}

/* --- soft analogy quotes ("Think of a fingerprint…") — quieter than .statement --- */
main blockquote{background:var(--tint);border-left:4px solid var(--brand);border-radius:10px;
  padding:14px 20px;margin:18px 0;color:var(--muted);font-style:italic;}
main blockquote strong{color:var(--ink);font-style:normal;}

/* --- 3 · "→ Go deeper" links: small, muted, italic; not a white card --- */
p.gd{background:transparent;box-shadow:none;padding:0;margin:6px 0 4px;
  font-size:0.85rem;font-style:italic;color:var(--faint);}
p.gd a{color:var(--faint);}
p.gd a:hover{color:var(--brand);}

/* --- closing "Questions?" line --- */
p.closing{background:transparent;box-shadow:none;padding:0;margin:34px 0 0;
  text-align:center;font-style:italic;color:var(--faint);font-size:0.9rem;}

/* ================= DARK MODE (parity with legal.css) ================= */
html[data-theme="dark"] main h3{color:#fff;text-shadow:0 0 26px rgba(120,130,255,0.45);}
html[data-theme="dark"] .statement{box-shadow:0 6px 44px rgba(0,0,0,0.45);}
html[data-theme="dark"] main ol{background:var(--glass-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none;color:var(--muted);position:relative;}
html[data-theme="dark"] main ol::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--darkborder);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
html[data-theme="dark"] main ol li strong{color:#fff;}
html[data-theme="dark"] main blockquote{background:var(--glass-bg);border-left-color:var(--accent);color:var(--muted);}
html[data-theme="dark"] main blockquote strong{color:#fff;}
html[data-theme="dark"] .warning{background:rgba(199,125,10,0.13);border-left-color:#e0a53a;box-shadow:none;}
html[data-theme="dark"] .warning p{color:var(--muted);}
/* legal.css gives every dark `main p` a glass bg + gradient-border ::before —
   suppress both for text inside the special boxes / muted lines. */
html[data-theme="dark"] .statement p{background:transparent;color:#fff;}
html[data-theme="dark"] .warning p,
html[data-theme="dark"] p.gd,
html[data-theme="dark"] p.closing{background:transparent;}
html[data-theme="dark"] .statement p::before,
html[data-theme="dark"] .warning p::before,
html[data-theme="dark"] p.gd::before,
html[data-theme="dark"] p.closing::before{display:none;}