/* ============================================================
   VERIFONDEO — SHARED DESIGN SYSTEM  (v5 · loads LAST on every page)
   Single source of truth: type scale · color roles · spacing · container ·
   card/elevation. Every page imports this so nothing drifts.
   Rules:
     • Dark background, restrained palette. Color = signal only
       (severity, health, verification tiers, one accent for action).
     • MONOSPACE is reserved for DATA — numbers, prices, dates, stamps,
       tiers. Everything a person reads (headlines, body, nav, labels)
       is a clean sans with strong scale contrast.
     • Depth via layered surface + soft shadow, not flat 1px outline boxes.
     • Full-bleed section backgrounds; inner content constrained + centered.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* — type families — */
  --display:'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --body:'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  --serif:var(--display);

  /* — type scale (strong headline↔body contrast) — */
  --fs-hero:clamp(38px, 5.4vw, 64px);
  --fs-h1:clamp(30px, 3.6vw, 46px);
  --fs-h2:clamp(22px, 2.4vw, 30px);
  --fs-h3:18px;
  --fs-lede:clamp(17px, 1.5vw, 20px);
  --fs-body:16px;
  --fs-small:13.5px;
  --fs-eyebrow:11.5px;
  --fs-data:12px;

  /* — spacing / vertical rhythm — */
  --space-1:8px; --space-2:14px; --space-3:22px; --space-4:34px;
  --space-5:52px; --space-6:clamp(48px, 7vw, 84px);
  --section-y:clamp(46px, 6vw, 74px);

  /* — container — */
  --container:1360px;
  --measure:66ch;
  --gutter:clamp(24px, 5vw, 56px);
  --radius:16px; --radius-sm:11px; --radius-pill:999px;

  /* — surfaces (dark, restrained) — */
  --paper:#0B0C0F; --card:#141620; --card2:#191C27; --raise:#1E2230;
  --surface:linear-gradient(180deg, #171A26 0%, #12141C 100%);
  --surface-2:linear-gradient(180deg, #1B1F2D 0%, #15171F 100%);
  --ink:#F3F3EF; --ink2:#AEB0AC; --muted:#6E7079;
  --line:rgba(255,255,255,.065); --line2:rgba(255,255,255,.11);
  --edge:1px solid rgba(255,255,255,.06);
  --elev-1:0 10px 30px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);
  --elev-2:0 30px 72px -30px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.06);

  /* — signal color roles — */
  --accent:#E8B44C; --accent2:#F0C877; --accent-ink:#1A1406;
  --sev-major:#FF5E5E; --sev-major-bg:rgba(255,94,94,.09);
  --ok:#43C48C; --ok-bg:rgba(67,196,140,.10);
  --watch:#B4CE4E; --watch-bg:rgba(180,206,78,.10);
  --amber:#EE9838; --amber-bg:rgba(238,152,56,.10);
  --crisis:#FF5E5E; --crisis-bg:rgba(255,94,94,.09);
  --pass:#43C48C; --pass-bg:rgba(67,196,140,.10); --fail:#FF5E5E; --fail-bg:rgba(255,94,94,.09); --warn:#EE9838; --warn-bg:rgba(238,152,56,.10);
}

html,body{background:var(--paper) !important; color:var(--ink) !important}
body{font-family:var(--body) !important; font-size:var(--fs-body); -webkit-font-smoothing:antialiased; letter-spacing:-.006em; line-height:1.55}
::selection{background:rgba(232,180,76,.28)}
a{color:var(--accent)}

/* =====================================================
   CONTAINER SYSTEM  — full-bleed bands, centered content
   ===================================================== */
.band{width:100%; position:relative}
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
/* inner utility pages ship a single narrow .wrap in their own <style>;
   this widens + centers them into the shared container (v.css loads later). */
.wrap{max-width:var(--container)}

/* =====================================================
   TYPOGRAPHY  — sans for reading, mono for data only
   ===================================================== */
h1{font-family:var(--display) !important; font-weight:700 !important; font-size:var(--fs-h1) !important; line-height:1.06 !important; letter-spacing:-.033em !important; color:var(--ink) !important; margin-top:var(--space-4) !important}
h1.hero, .hero h1{font-size:var(--fs-hero) !important}
h2{font-family:var(--display) !important; font-weight:600 !important; font-size:var(--fs-h2) !important; line-height:1.18 !important; letter-spacing:-.02em !important; color:var(--ink) !important}
h3{font-family:var(--display) !important; font-weight:600 !important; font-size:var(--fs-h3) !important; letter-spacing:-.015em !important; color:var(--ink) !important}
section h2, .entry .title, .bandcard h3, .killer h2, a.card h3, .verdict{font-family:var(--display) !important; letter-spacing:-.02em}
.lede{font-family:var(--body) !important; font-size:var(--fs-lede) !important; line-height:1.5 !important; color:var(--ink2) !important; font-weight:400; max-width:56ch}

/* eyebrow / kicker labels — SANS, tracked uppercase (not mono) */
.label,.eyebrow,.kicker,.sub{font-family:var(--body) !important; font-size:14px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink2) !important; font-weight:500}

/* DATA classes — the only place monospace lives */
/* monospace = numerals only (table figures, chart labels, input values) */
.num,.price,.stat .n,.statrow .n,.mono,td.num{font-family:var(--mono) !important; font-variant-numeric:tabular-nums}
.count{font-family:var(--body) !important; letter-spacing:0 !important; text-transform:none !important; font-variant-numeric:tabular-nums}
/* metadata reads as sans, sentence case, untracked — dates keep tabular alignment */
.meta,.dt,.ev,.firm,.tblnote,.meterlab,.bandlab,.sparkmeta,.stamp,.brand span,.statrow .k,.stat .k{font-family:var(--body) !important; letter-spacing:0 !important; text-transform:none !important}
.dt,.meta{font-variant-numeric:tabular-nums}
.meta{font-size:12px !important; letter-spacing:0 !important; color:var(--muted) !important}
p,li,.detail,.summary,section p,.vcard p{font-family:var(--body) !important}
.detail,.summary,section p,.vcard p{color:var(--ink2) !important}
.detail b,.summary b{color:var(--ink) !important}

/* =====================================================
   MASTHEAD / NAV  (inner pages) — sans menu, full-width
   ===================================================== */
header.site{display:flex !important; justify-content:space-between !important; align-items:center !important; gap:14px; border-bottom:1px solid var(--line) !important; padding:16px 0 14px !important}
.homebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:999px;border:1px solid var(--line2) !important;background:var(--card2);color:var(--ink) !important;text-decoration:none;font-size:18px;line-height:1;transition:all .15s;order:-1}
.homebtn:hover{border-color:var(--accent) !important;color:var(--accent) !important;transform:translateX(-2px)}
header.site .brand{margin-right:auto}
.brand{font-family:var(--display) !important; font-weight:700 !important; font-size:20px !important; letter-spacing:-.02em !important; color:var(--ink) !important; cursor:pointer}
.brand b{color:var(--ink) !important; font-weight:700}
.brand b::after{content:"·"; color:var(--accent); margin-left:.05em}
.brand span{font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--muted); display:block; margin-top:4px; font-weight:400}
.promise{font-family:var(--body) !important; font-size:13px; letter-spacing:.01em; color:var(--ink2) !important; padding:12px 0 0; margin:0}
html[lang="en"] .p-es{display:none} html:not([lang="en"]) .p-en{display:none}
body.en .p-es{display:none} body.en .p-en{display:inline !important}

.mainnav{border-bottom:1px solid var(--line); padding:12px 0 11px !important; gap:4px 26px !important}
.mainnav a{font-family:var(--body) !important; font-size:15.5px !important; letter-spacing:.005em; text-transform:none; font-weight:600; color:var(--ink2) !important; border-bottom:2px solid transparent; padding-bottom:3px; transition:color .15s}
.mainnav a:hover{color:var(--ink) !important}
.mainnav a.here{color:var(--ink) !important; border-bottom-color:var(--accent) !important; font-weight:600}

.draftband{background:var(--amber-bg) !important; border-bottom:1px solid rgba(238,152,56,.2) !important; color:var(--amber) !important; font-family:var(--body); font-size:12px !important; letter-spacing:0}

.lang{border:1px solid var(--line2) !important; background:var(--card) !important; border-radius:var(--radius-pill) !important; overflow:hidden}
.lang button, .lang a{background:transparent !important; color:var(--muted) !important; font-size:12px}
.lang button.on, .lang a.on{background:var(--ink) !important; color:var(--paper) !important}

/* =====================================================
   ELEVATION / CARDS  — layered surface, soft shadow
   ===================================================== */
.entry, .card, .vcard, .result, .bandcard, .killer, .rulenote, .humble, .pledge, .stat, .honesty, .ror, table.kv, table.days, figure, .tstrip{border-radius:var(--radius) !important}
.chip, .share button, select, input[type=number], .runbtn{border-radius:var(--radius-sm) !important}
/* CARDS = individual items only, never whole sections. Bare <section> stays background-less/full-bleed. */
.vcard, .bandcard, .rulenote, .humble, .honesty, .ror, figure, .tstrip{background:var(--surface) !important; border:var(--edge) !important; color:var(--ink) !important; box-shadow:var(--elev-1)}
.vcard,.bandcard,.result,figure,.tstrip{padding:clamp(22px,2.4vw,28px) clamp(24px,2.6vw,34px)}

/* form controls */
select,input[type=number]{background:var(--card2) !important; color:var(--ink) !important; border:1px solid var(--line2) !important; font-family:var(--mono)}
select:focus,input:focus{outline:2px solid var(--accent) !important; outline-offset:1px}
.chip{background:var(--card2) !important; border:1px solid var(--line2) !important; color:var(--ink2) !important; font-family:var(--body); font-size:13px !important; transition:all .14s}
.chip:hover{border-color:var(--ink2) !important; color:var(--ink) !important}
.chip.on{background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; font-weight:600}
.runbtn{background:var(--accent) !important; color:var(--accent-ink) !important; font-family:var(--display); font-size:15px !important; font-weight:700; transition:transform .12s, box-shadow .15s; box-shadow:0 10px 26px -10px rgba(232,180,76,.55)}
.runbtn:hover{transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(232,180,76,.65)}
.share button{background:var(--card2) !important; border:1px solid var(--line2) !important; color:var(--ink) !important; font-family:var(--body)}
.share button:hover{border-color:var(--accent) !important}

/* =====================================================
   VERIFICATION TIERS · SEVERITY · HEALTH  (signal color)
   ===================================================== */
.vbadge,.tag{font-family:var(--body) !important; font-size:10.5px !important; letter-spacing:0 !important; text-transform:lowercase !important; border-radius:var(--radius-pill) !important; padding:2px 9px 1px !important; vertical-align:1px; background:transparent !important}
.vbadge{border:1px solid var(--line2) !important; color:var(--ink) !important}
.vbadge::before{content:"● "; font-size:7px; vertical-align:1.5px; color:var(--ok)}
.tag.t-p{border:1px solid var(--line2) !important; color:var(--ink) !important} .tag.t-p::before{content:"● "; font-size:7px; color:var(--ok)}
.tag.t-s{border:1px dashed var(--line2) !important; color:var(--ink2) !important} .tag.t-s::before{content:"○ "; font-size:8px}
.tag.t-u{border:1px dashed var(--amber) !important; color:var(--amber) !important} .tag.t-u::before{content:"◌ "; font-size:8px}
.tag.t-c{border:1px solid var(--crisis) !important; color:var(--crisis) !important} .tag.t-c::before{content:"◆ "; font-size:7px}
.tag.warn{border:1px dashed var(--amber) !important; color:var(--amber) !important}

.entry{border:0 !important; border-top:1px solid var(--line) !important; background:transparent !important; padding:18px 4px 16px 16px !important; margin-top:0 !important; box-shadow:none !important; border-radius:0 !important}
.entry[data-sev="MAJOR"]{border-left:3px solid var(--sev-major) !important; background:var(--sev-major-bg) !important; padding:20px 18px 17px 20px !important; margin:12px 0 !important; border-top:1px solid var(--line) !important; border-radius:12px !important}
.entry[data-sev="MAJOR"] .title{font-size:20px !important; line-height:1.22; font-weight:600; color:var(--ink) !important}
.entry[data-sev="MAJOR"] .detail{font-size:14.5px !important; color:var(--ink2) !important}
.entry[data-sev="MINOR"]{border-left:3px solid transparent !important}
.entry[data-sev="MINOR"] .title{font-size:15.5px !important; color:var(--ink) !important; font-weight:500}
.entry[data-sev="MINOR"] .detail{font-size:13px !important; color:var(--muted) !important}
.sev{font-family:var(--body) !important; font-size:10.5px !important; letter-spacing:0 !important; text-transform:lowercase !important; border-radius:var(--radius-pill) !important; padding:2px 9px 1px !important; font-weight:700}
.sev.MAJOR{background:var(--sev-major) !important; color:#160A0B !important}
.sev.MINOR{background:transparent !important; border:1px solid var(--line2) !important; color:var(--muted) !important}
.firm{font-family:var(--body) !important; font-size:13px !important; letter-spacing:0; text-transform:none; color:var(--ink) !important; font-weight:600}
.dt{color:var(--muted) !important}

.badge{font-size:11px !important; letter-spacing:.08em; border-radius:var(--radius-pill) !important}
.b-crisis{background:var(--crisis) !important; color:#160A0B !important}
.b-amber{background:transparent !important; border:1.5px solid var(--amber) !important; color:var(--amber) !important}
.b-watch{background:transparent !important; border:1px solid var(--watch) !important; color:var(--watch) !important}
.b-ok{background:transparent !important; border:1px solid var(--ok) !important; color:var(--ok) !important}

.pledge{background:var(--surface) !important; border:var(--edge) !important; border-left:3px solid var(--accent) !important; color:var(--ink2) !important; box-shadow:var(--elev-1)}
.humble{border-left:3px solid var(--accent) !important}

/* =====================================================
   DATA VIZ · TABLES · RESULTS
   ===================================================== */
.tstrip .tl{font-family:var(--body); font-size:12px; color:var(--muted); letter-spacing:0; text-transform:none; margin-bottom:8px; display:flex; justify-content:space-between; font-variant-numeric:tabular-nums}
.tstrip .leg{display:flex; gap:14px; font-family:var(--body); font-size:11.5px; text-transform:lowercase; color:var(--ink2); margin-top:6px}
.tstrip .leg i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
.spark rect{fill:#8A8A82} .spark rect.mj{fill:var(--sev-major)}
.sparkmeta{color:var(--muted); font-size:10.5px; margin-top:3px}
svg text, .tstrip svg text{fill:var(--muted) !important}

table.kv,table.days{background:var(--surface) !important; border:var(--edge) !important; overflow:hidden; box-shadow:var(--elev-1)}
table.kv td,table.days td,table.days th,th,td{border-color:var(--line) !important; color:var(--ink) !important}
table.kv td:first-child{color:var(--ink2) !important}
th{background:var(--card2) !important; color:var(--muted) !important; font-family:var(--body) !important; text-transform:none !important; letter-spacing:0 !important; font-weight:600}
.tblnote{color:var(--muted) !important}

.result.pass{background:var(--pass-bg) !important; border-color:rgba(67,196,140,.3) !important}
.result.fail{background:var(--fail-bg) !important; border-color:rgba(255,94,94,.3) !important}
.result.warn{background:var(--warn-bg) !important; border-color:rgba(238,152,56,.3) !important}
.result.pass .verdict{color:var(--pass) !important} .result.fail .verdict{color:var(--fail) !important} .result.warn .verdict{color:var(--warn) !important}
.explain{color:var(--ink) !important}
.killer, .killer.dead{background:var(--sev-major-bg) !important; border-color:rgba(255,94,94,.3) !important}
.killer h2{color:var(--sev-major) !important}
.meter,.bandline,.cause .bar{background:rgba(255,255,255,.08) !important}
.market{background:var(--card2) !important; border:1px solid var(--line2) !important; color:var(--ink2) !important; border-radius:var(--radius-pill) !important; font-family:var(--body) !important; text-transform:none !important; letter-spacing:0 !important}
.rulenote{background:var(--card2) !important; color:var(--ink2) !important; box-shadow:none !important}

footer.site{border-top:1px solid var(--line) !important; color:var(--muted) !important; font-size:12.5px !important}
footer.site a,.ev a,.evidence a,.rss{color:var(--accent) !important}
.evidence{color:var(--muted) !important; border-top-color:var(--line) !important}
.toolrow a{background:var(--surface) !important; border:var(--edge) !important; color:var(--ink) !important; font-family:var(--body); font-size:13.5px; border-radius:var(--radius-sm); box-shadow:var(--elev-1); transition:all .14s}
.toolrow a:hover{border-color:var(--accent) !important; transform:translateY(-2px)}

/* legacy data cards (inner index pages) — de-boxed list rows */
a.card{border:0 !important; border-top:1px solid var(--line) !important; background:transparent !important; padding:18px 4px 20px !important; color:var(--ink) !important; text-decoration:none !important; display:block; box-shadow:none !important; border-radius:0 !important; transition:background .15s}
a.card:hover{background:var(--card2) !important; border-top-color:var(--accent) !important}
a.card h3{font-family:var(--display) !important; font-weight:600; font-size:18px !important; letter-spacing:-.02em; color:var(--ink) !important; margin-bottom:5px}
a.card p{font-family:var(--body) !important; color:var(--ink2) !important; font-size:14px; line-height:1.5}
a.card .k{font-family:var(--mono); font-size:10.5px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) !important; margin-top:11px; display:inline-block}

/* section rhythm on inner utility pages */
section{margin-bottom:var(--section-y); padding-top:6px; scroll-margin-top:16px}

/* =====================================================
   MOTION  (reduced-motion safe)
   ===================================================== */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.07s} .reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.21s} .reveal.d4{transition-delay:.28s}

.ticker{position:relative; overflow:hidden}
.ticker-inner{display:flex; width:max-content; animation:tick 52s linear infinite}
.ticker:hover .ticker-inner{animation-play-state:paused}
a.ti,.ti{display:inline-flex; align-items:center; gap:10px; padding:12px 26px; white-space:nowrap; font-family:var(--body); font-size:14.5px; color:var(--ink2); text-decoration:none; transition:background .15s}
a.ti:hover{background:rgba(255,255,255,.04); color:var(--ink)}
.ti+.ti{border-left:1px solid var(--line)}
.ti .tdate{color:var(--muted); font-variant-numeric:tabular-nums} .ti .tfirm{color:var(--ink); letter-spacing:0; text-transform:none; font-size:14px; font-weight:700}
.ti .tdot{width:7px;height:7px;border-radius:999px;flex:none}
.ti.mj .tdot{background:var(--sev-major)} .ti.mn .tdot{background:#5A5A54}
@keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .ticker-inner{animation:none !important}
}