/* ============================================================================
   MakersOS · MON-CORE — the single movement.
   v53. Loaded by EVERY page, injected automatically by build.js so no page can
   miss it and no page can drift.

   WHY THIS FILE EXISTS
   Before v53 the four tool pages (grants, makersos, cockpit, model) each carried
   their own copy of :root. They fell out of step with the rest of the site — the
   v53 contrast lift to --slate landed on 19 pages and silently missed those four.
   Tokens now live here once. Change a colour here and all 23 pages move together.

   RULE: this file holds tokens + the components shared across BOTH stylesheet
   families (mon.css pages and mon-chrome.css tool pages). Page-specific styling
   stays in page-*.css. Never re-declare :root anywhere else.
   ============================================================================ */

:root{
  --bg:#0e3061;--petrol:#163f78;--border:#2c5896;--gold:#E6C87C;--gold-2:#F4E0A0;
  --silver:#ECE7DC;
  --ivory:#ECE7DC;                     /* alias: the tool pages call --silver "--ivory" */
  --slate:#BBD0EC;                     /* v53: lifted from #AEC4E4 for AA small-text contrast on navy */
  --red:#E4132B;                       /* CONTRAST FLOOR: white-on-red = 4.74:1 (AA needs 4.5). Never lighten.
                                          Red text directly on --bg fails AA (2.74:1) — accents only. */
  --red-2:#EC2A43;
  --spark:#E6C87C;                     /* v53: the eyebrow pulse. Was red on every section (10-13x/page),
                                          which spent the site's rarest signal. Red is now reserved for the
                                          logo and the single closing band per page. Flip here to change all. */
  --navy:#0e3061;                      /* alias of --bg, used by the insights + card pages */
  --card:#13243B;                      /* insights card ground */
  /* Tool-page tokens. REGRESSION FIX: these lived in the per-page :root blocks that were
     consolidated into this file. They were missed on the first pass, which left
     var(--deep) and var(--line) undefined on cockpit — the sector <select> lost its
     background and border and read as invisible. Values restored exactly from v52. */
  --deep:#0b2650;                      /* cockpit: recessed field ground */
  --line:#2c5896;                      /* cockpit: hairline (same value as --border) */
  --sim:#B7A6E8;                       /* cockpit: SIMULATION marker */
  --grn:#34D399;                       /* cockpit: positive delta */
  --green:#34D399;                     /* grants + makersos: positive */
  --blue:#38BDF8;                      /* makersos: WHY axis */
  --amber:#F59E0B;                     /* makersos: caution / mid band */
  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
}

/* ============================================================
   PROGRESSIVE DISCLOSURE — the "+" / see-more pattern.
   Native <details>: works with zero JS. Used for FAQs, dense
   proof blocks and long asides. One idea visible; depth on tap.
   ============================================================ */
.faq-list{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:22px 4px;font-family:var(--display);font-weight:500;font-size:1.14rem;color:var(--silver);line-height:1.35;transition:color .2s}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::marker{content:"";font-size:0}
.faq-item>summary:hover{color:var(--gold)}
.faq-item>summary .pm{flex:0 0 auto;position:relative;width:15px;height:15px;margin-top:6px}
.faq-item>summary .pm::before,.faq-item>summary .pm::after{content:"";position:absolute;background:var(--gold);transition:transform .25s,opacity .25s}
.faq-item>summary .pm::before{top:7px;left:0;width:15px;height:1.5px}
.faq-item>summary .pm::after{left:7px;top:0;width:1.5px;height:15px}
.faq-item[open]>summary{color:var(--gold)}
.faq-item[open]>summary .pm::after{transform:rotate(90deg);opacity:0}
.faq-item .faq-a{padding:0 40px 24px 4px;color:var(--slate);font-size:.95rem;line-height:1.75;max-width:78ch;
  animation:faqIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* generic inline "see more" disclosure for dense asides / proof walls */
details.more{border:1px solid var(--border);background:var(--petrol);padding:20px 24px}
details.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::marker{content:"";font-size:0}
details.more>summary .pm{position:relative;width:13px;height:13px;flex:0 0 auto}
details.more>summary .pm::before,details.more>summary .pm::after{content:"";position:absolute;background:var(--gold);transition:transform .25s,opacity .25s}
details.more>summary .pm::before{top:6px;left:0;width:13px;height:1.5px}
details.more>summary .pm::after{left:6px;top:0;width:1.5px;height:13px}
details.more[open]>summary .pm::after{transform:rotate(90deg);opacity:0}
details.more .more-lead{color:var(--slate);font-size:.9rem;line-height:1.7;margin-top:12px}
details.more .more-body{color:var(--slate);font-size:.9rem;line-height:1.75;margin-top:14px;max-width:80ch;
  animation:faqIn .32s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.faq-item .faq-a,details.more .more-body{animation:none}}

/* ============================================================
   v53 · TABULAR FIGURES — the watch-dial detail.
   Cormorant and Inter set proportional numerals: a "1" is narrower than an "8".
   Every animated counter (.pg-num, #vcount, the EV and readiness figures) is
   drawn in var(--display), so the number visibly jitters and re-flows while it
   counts up, and stacked figures don't align in a column. Space Mono is already
   fixed-width; these are the display/sans-set numbers that need locking.
   ============================================================ */
.pg-num,.sp-out b,.sp-v,.vmt-read b,.acc-n,.evd-n,.stat .n,.wcell .n,.big,.eur,
#vcount,[data-to],[data-v],[data-static],.tnum,
table td,table th,.logic td,.trust li{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ============================================================
   v53 · FOCUS STATES.
   There were none: keyboard users got the browser default, and .field inputs
   explicitly set outline:none. Institutional buyers (banks, funds, fund admin)
   run accessibility checks in procurement. The ring is the brand gold.
   !important is deliberate — it must beat the existing outline:none rules.
   ============================================================ */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:3px!important;
}
/* pointer users keep the clean look — no ring on mouse click */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}

/* ============================================================
   v53 · ANCHOR OFFSET.
   nav is position:fixed, height:74px. With no scroll-margin every in-page jump
   parked its own destination behind the navigation — measured: capital.html#predeal
   landed at top:-16px under a 74px bar. That link appears 22x across the site,
   and #main (skip-to-content) is on all 23 pages.
   ============================================================ */
[id]{scroll-margin-top:94px}

/* ============================================================
   v53 · FURTHER READING.
   The seven insights articles each had exactly ONE internal link (the hub),
   against 21 for every indexed page — so Google left them all in
   "Discovered - not indexed". This puts each article on the pillar page whose
   subject it actually shares, giving it links from the site's strongest pages.
   ============================================================ */
.readmore{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.readmore a{display:block;background:var(--bg);padding:30px 26px;transition:background .3s}
.readmore a:hover{background:var(--petrol)}
.readmore .rm-k{font-family:var(--mono);font-size:0.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.readmore h3{font-family:var(--display);font-weight:500;font-size:1.14rem;color:var(--silver);line-height:1.3;margin:0}
.readmore a:hover h3{color:var(--gold)}
.readmore .rm-go{font-family:var(--mono);font-size:0.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:16px;display:block}
.readmore a:hover .rm-go{color:var(--gold)}
@media(max-width:820px){.readmore{grid-template-columns:1fr}}

/* v53 · ECOSYSTEM: "what it moves".
   Each partner now states the gate it installs at and which term of
   Value = Revenue x Margin x Multiple it moves — turning a vendor list into
   evidence of the operating model. Set apart by a gold rule, not a box. */
.ec-moves{margin-top:12px;padding-top:11px;border-top:1px solid rgba(230,200,124,.28);
  color:var(--slate);font-size:.82rem;line-height:1.62}
.ec-moves strong,.ec-moves b{color:var(--gold);font-weight:500}
/* the gates cue above the stage filters */
.eco-gates{font-family:var(--mono);font-size:0.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin:0 0 18px}
.eco-gates a{color:var(--gold);border-bottom:1px solid rgba(230,200,124,.4)}
.eco-gates a:hover{color:var(--gold-2)}


/* ============================================================
   v53 · BOOT SEQUENCE (the MakersOS install animation).
   BUG FIXED HERE: the boot markup was relocated to makersos.html, but these
   rules lived only in mon.css — which the tool pages do NOT load. The overlay
   rendered unstyled, so '0%' and 'click or press any key to skip' spilled down
   the top-left of the page. Living in core, it is styled wherever it is used.
   ============================================================ */
#boot{display:none;position:fixed;inset:0;z-index:400;background:var(--bg);align-items:center;justify-content:center;transition:opacity .5s ease}
.boot-inner{font-family:var(--mono);color:var(--gold);font-size:.82rem;line-height:2.1;max-width:540px;padding:24px;width:100%}
.boot-log div{white-space:nowrap;overflow:hidden}
.boot-hint{color:var(--slate);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-top:26px}
.boot-bar{height:3px;width:100%;max-width:540px;background:rgba(203,176,122,.18);margin-top:22px}
.boot-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s ease}
.boot-pct{font-family:var(--mono);font-size:0.68rem;color:var(--gold);margin-top:10px}

/* ============================================================
   v53 · THE LADDER — Install · Run · Upgrade · Extend.
   The hero's primary action. Replaces a generic button pair with the product
   itself: four real destinations on one rail. No section numbers — those are
   Room-internal and mean nothing to a visitor. Each rung is a link, hoverable,
   focusable and clickable.
   ============================================================ */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;width:100%;max-width:1000px;margin:6px 0 0}
/* the rail the rungs sit on */
.ladder::before{content:"";position:absolute;left:11%;right:11%;top:11px;height:1px;
  background:linear-gradient(90deg,rgba(230,200,124,.55),rgba(230,200,124,.22));pointer-events:none}
.lad{position:relative;display:block;padding:0 18px 20px;text-align:left;isolation:isolate}
.lad:first-child{padding-left:0}.lad:last-child{padding-right:0}
.lad-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--bg);
  border:1.5px solid rgba(230,200,124,.5);position:relative;z-index:1;margin-bottom:18px;
  transition:border-color .3s,box-shadow .3s,background .3s,transform .3s}
.lad-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:transparent;transition:background .3s}
.lad-v{display:block;font-family:var(--display);font-weight:500;font-size:1.34rem;color:var(--silver);
  line-height:1.1;letter-spacing:.01em;transition:color .25s}
.lad-d{display:block;color:var(--slate);font-size:.83rem;line-height:1.55;margin-top:8px;max-width:19ch;transition:color .25s}
/* v54 · every rung shows its door. Three of the four were invisible until hover, so a
   returning visitor met a diagram where they needed a way in. All four read now; the
   first is simply the loud one. */
.lad-go{display:block;font-family:var(--mono);font-size:0.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);margin-top:12px;opacity:.8;transform:none;transition:opacity .28s,color .28s}
/* the first rung is where a stranger starts — lit by default */
.lad--live .lad-dot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(230,200,124,.14)}
.lad--live .lad-dot::after{background:var(--gold)}
.lad--live .lad-go{opacity:1;color:var(--gold)}
/* hover / keyboard */
.lad:hover .lad-dot,.lad:focus-visible .lad-dot{border-color:var(--gold);background:var(--petrol);
  box-shadow:0 0 0 6px rgba(230,200,124,.16),0 0 22px rgba(230,200,124,.35);transform:scale(1.12)}
.lad:hover .lad-dot::after,.lad:focus-visible .lad-dot::after{background:var(--gold)}
.lad:hover .lad-v,.lad:focus-visible .lad-v{color:var(--gold)}
.lad:hover .lad-d,.lad:focus-visible .lad-d{color:var(--silver)}
.lad:hover .lad-go,.lad:focus-visible .lad-go{opacity:1;color:var(--gold)}
@media(max-width:820px){
  .ladder{grid-template-columns:1fr;gap:0;max-width:none}
  .ladder::before{left:11px;right:auto;top:8px;bottom:26px;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(230,200,124,.55),rgba(230,200,124,.18))}
  .lad{padding:0 0 26px 40px}.lad:first-child{padding-left:40px}
  .lad-dot{position:absolute;left:0;top:0;margin:0}
  .lad-d{max-width:44ch}.lad-go{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.lad-dot,.lad-v,.lad-d,.lad-go{transition:none}}

/* v54: the mobile ragged-right override is gone because nothing
   justifies any more. Kept as a floor for stray inline styles. */
[style*="justify"]:not([class*="justify-"]){text-align:left!important}

/* ============================================================================
   v54 · RULE 4 · THE PERSISTENT ACTION, AND THE ANCHOR OFFSET
   ----------------------------------------------------------------------------
   The home page is roughly eleven thousand pixels tall. Most people leave in the
   first four thousand, and until now everything they could do lived in the hero
   they had already scrolled past. This bar carries the same offer, quietly, once
   the hero is gone, and it steps out of the way when the real closing section
   arrives so the page never asks twice in the same breath.

   The anchor offset this file already carries ([id]{scroll-margin-top:94px},
   above) is the right one and stays as it is: adding scroll-padding-top to <html>
   as well would have offset every jump twice.
   ============================================================================ */

.actbar{position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px 48px;
  background:rgba(10,26,47,.82);backdrop-filter:blur(14px);
  border-top:1px solid rgba(230,200,124,.28);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.16,1,.3,1);
  pointer-events:none}
.actbar.on{transform:none;pointer-events:auto}
.actbar-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actbar-t b{color:var(--silver);font-weight:400}
.actbar-a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#0b2650;background:linear-gradient(160deg,#F7E9B4,#ECD495 52%,#E3C179);
  padding:11px 20px;white-space:nowrap;flex:0 0 auto;transition:filter .25s}
.actbar-a:hover{filter:brightness(1.08)}
.actbar-x{flex:0 0 auto;background:none;border:0;cursor:pointer;padding:8px;line-height:1;
  color:var(--slate);font-family:var(--mono);font-size:.8rem;transition:color .25s}
.actbar-x:hover{color:var(--silver)}
@media(max-width:640px){
  .actbar{padding:10px 16px;gap:12px}
  .actbar-t{font-size:.62rem;letter-spacing:.08em}
  .actbar-a{padding:11px 14px;font-size:.62rem;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){.actbar{transition:none}}
@media print{.actbar{display:none!important}}