/* Reconize — site stylesheet. The single source of truth for tokens and page chrome.
 *
 * Extracted 2026-09-12. Before this the site had THREE design languages: index.html and
 * the six persona pages were forked on the same day (2026-08-10) with near-identical but
 * non-matching tokens, and /verify ran an entirely separate vocabulary (--ink/--sub/--line/
 * --brand, its own blue, a radial-gradient body, no Outfit). That is why /verify never
 * looked like the rest of the site: it never was the rest of the site.
 *
 * Canonical set = the persona tokens, because they carry the written design philosophy
 * ("Refined dark system, one accent with a job, 8pt spacing rhythm") and the --s1..--s8
 * scale that actually prevents drift. Nav behaviour = index's fixed bar with a .solid
 * scroll state, which is the better of the two.
 *
 * NAV POSITION IS load-bearing: this is position:fixed, so it is OUT OF FLOW and a page
 * must reserve its own top space. index.html and /verify already do. The six persona pages
 * currently use position:sticky and reserve nothing, so converting them needs top padding
 * added page by page and checked visually. Do not batch that blind.
 *
 * Conversion status: /verify done. index + 15 others still inline their own <style>.
 */

:root{
  /* surfaces */
  --bg:#0B0D10; --bg2:#101318; --card:#14171C; --card-bd:#232830; --card-bd2:#2C3A4B;
  /* type colour */
  --text:#E9EDF2; --text2:#9AA5B1; --muted:#6C7683;
  /* one accent, with a job */
  --accent:#4FACFE; --accent-press:#2E7BE0;
  /* semantic verdict colours. Promoted out of /verify 2026-09-12 so a verdict looks the
     same anywhere on the site: -bg is the fill, -bd the border, -ink the body text on it. */
  --good:#34C77B; --good-bg:#0F2A1E; --good-bd:#1E6B47; --good-ink:#9FE9C4;
  --warn:#F5A623; --warn-bg:#2A2110; --warn-bd:#6B5417; --warn-ink:#F0D69A;
  --bad:#FF6B6B;  --bad-bg:#2A1313;  --bad-bd:#6B2626;  --bad-ink:#F6B1B1;
  /* families */
  --font:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* metrics */
  --maxw:1120px; --r:14px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);
     -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,172,254,0.30)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.accent{color:var(--accent)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    background:rgba(11,13,16,0.62);border-bottom:1px solid transparent;
    transition:background .3s,border-color .3s}
nav.solid{background:rgba(11,13,16,0.90);border-bottom-color:var(--card-bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;
        max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.mark{font-weight:800;font-size:21px;letter-spacing:-0.02em;color:var(--text)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--text2);font-size:15px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
     font-weight:600;font-size:15px;padding:13px 24px;border-radius:11px;cursor:pointer;
     border:none;font-family:inherit;transition:transform .2s,background .2s,box-shadow .2s}
.btn-primary{background:var(--accent);color:#06131f;box-shadow:0 8px 30px rgba(79,172,254,0.25)}
.nav-links a.btn-primary{color:#06131f}   /* beat the .nav-links a grey */
.btn-primary:hover{background:#6cbcff;transform:translateY(-2px)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,0.06);border:1px solid var(--card-bd)}
.btn-ghost:hover{background:rgba(255,255,255,0.10)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-lg{padding:16px 30px;font-size:17px}

/* footer (site-wide, unified) */
footer{padding:var(--s6) var(--s3) 36px;border-top:1px solid var(--card-bd);background:var(--bg2)}
.foot-cols{max-width:var(--maxw);margin:0 auto;display:grid;
           grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s4);text-align:left}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:460px){.foot-cols{grid-template-columns:1fr}}
.foot-brand .mk{font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--text)}
.foot-brand p{color:var(--muted);font-size:13px;margin-top:10px;max-width:28ch;line-height:1.55}
.foot-col h5{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
             color:var(--text2);font-weight:700;margin-bottom:12px}
.foot-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{max-width:var(--maxw);margin:36px auto 0;padding-top:22px;
             border-top:1px solid var(--card-bd);display:flex;justify-content:space-between;
             gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.foot-bottom a{color:var(--text2)}
.foot-bottom a:hover{color:var(--text)}
