/* Hallmark ID — the app's own face on the shared family skeleton (family.css v1.0.0).
   Stage colours = the apex site's Hallmark ID stage. Aura and sheen = the icon's gold brackets and silver cup.
   Light mode keeps every aura disc mid-tone or lighter (no dark blob on white); the deeper bronze only under dark. */
:root {
  --g1:#140d06; --g2:#4d3512; --acc:#e9bd62; --sfg:#ffffff;
  --aura1:#e9bd62; --aura2:#d9a24a; --aura3:#c3cad6;
  --sheen:linear-gradient(90deg,#9a6a1c,#c08a2a 25%,#6f7682 45%,#b07a22 65%,#9a6a1c 85%,#c08a2a);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --aura2:#9c6b22; --aura3:#8e98a8;
  --sheen:linear-gradient(90deg,#e9bd62,#f6dc9c 25%,#c9d0da 45%,#d9a64a 65%,#e9bd62 85%,#f6dc9c) } }
:root[data-theme="dark"] {
  --aura2:#9c6b22; --aura3:#8e98a8;
  --sheen:linear-gradient(90deg,#e9bd62,#f6dc9c 25%,#c9d0da 45%,#d9a64a 65%,#e9bd62 85%,#f6dc9c) }
#trust .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
@media (max-width:600px) { .facts { gap:8px 22px } .facts b { font-size:24px } }

/* hero stat row */
.facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; padding:0; list-style:none; color:var(--muted); font-size:15px; font-weight:500 }
.facts b { display:block; font:800 28px/1 var(--display); letter-spacing:-.03em; color:var(--fg) }

/* decode sample card inside a stage */
.decode { margin:22px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.decode li { padding:10px 14px; border-radius:14px; background:color-mix(in srgb, var(--sfg) 8%, transparent); border:1px solid color-mix(in srgb, var(--sfg) 12%, transparent); font-size:14px }
.decode span { display:block; font:600 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin-bottom:6px }
.decode b { font:700 18px/1.1 var(--display); color:var(--acc) }
.note { margin:18px 0 0; font-size:14px; opacity:.7; max-width:44ch }

/* closing call */
.cta { margin-top:clamp(56px,8vw,112px); padding-inline:clamp(8px,2vw,24px) }
.cta .stage { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding-block:clamp(48px,7vw,96px) }
.cta .line { margin-inline:auto }
.cta .water { right:auto; left:50%; translate:-50% 0 }
footer .disclaim { margin:0; max-width:70ch }

/* legal pages: the Hallmark ID policies use h3 sub-heads and a closing small print */
.legal-page h3 { font:600 17px/1.3 var(--body); margin:24px 0 8px }
.legal-page strong { color:var(--fg) }
.legal-page .small-print { font-size:13px; margin-top:40px }

/* --g2 is a deep bronze: right for the stages, too dark for small marks on the dark page. A readable gold
   ("--pip") takes over the chip diamonds and card icons. */
:root { --pip:#a8741f }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pip:#e9bd62 } }
:root[data-theme="dark"] { --pip:#e9bd62 }
.chip.dot::before { background:var(--pip) }
.card .ico { color:var(--pip); background:color-mix(in srgb, var(--pip) 14%, var(--surface)) }