/* Beacon website drafts — shared styles (inlined into each page at build).
   Brand tokens per canon: Playfair Display / Hanken Grotesk / IBM Plex Mono,
   violet #621FFF, cream #FAF7EF, warm stone neutrals, pill shapes, sunburst accent.
   Stone/violet step values are draft derivations — reconcile with beacon.css before production. */
:root{
  --violet:#621FFF; --violet700:#4A18BF; --violet400:#8A5BFF; --violet300:#B394FF; --violet100:#EFE8FF;
  --cream:#FAF7EF;
  --stone1:#F1ECDF; --stone2:#DDD6C6; --stone4:#9A9182; --stone6:#57503F; --stone7:#282318;
  --teal400:#2FA79A; --amber400:#D9A441; /* 2026-07-27 +teal400/amber400 — launch-wave dots on the dark footer */
  --green:#1E7F4F; --green100:#E3F3EA; --amber:#A9760B; --amber100:#F7EDD8; --teal:#0F766E; --teal100:#DCEFEC; --red:#B3372B; --red100:#F6E1DE; /* 2026-07-24 +teal100/red100 — Forecasting agent + root-cause tints */
  --disp:'Playfair Display',Georgia,serif; --body:'Hanken Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--stone7);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
p{max-width:62ch}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,247,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--stone2)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.wordmark{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.2px}
.wordmark .dot{color:var(--violet)}
/* ▲ 2026-07-28 dated amendment (r2) — logo lockup: the Beacon mark (from the brand logo file) + “Beacon”, no period; cream variant on the dark footer */
.wordmark .dot{display:none}
.wordmark::before{content:"";display:inline-block;width:21px;height:21px;margin-right:9px;vertical-align:-3px;background:url("data:image/png;base64,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") center/contain no-repeat}
footer .wordmark::before{background-image:url("data:image/png;base64,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")}
.nav-links{display:flex;gap:15px;margin-left:auto;font-size:13.5px;color:var(--stone6);white-space:nowrap}
.nav-links a:hover{color:var(--stone7)}
.nav-links a.active{color:var(--violet700);font-weight:600}
.pill{display:inline-block;border-radius:999px;padding:10px 22px;font-weight:600;font-size:15px;line-height:1;transition:.15s}
.pill-solid{background:var(--violet);color:#fff}
.pill-solid:hover{background:var(--violet700)}
.pill-line{border:1.5px solid var(--stone7);color:var(--stone7)}
.pill-line:hover{border-color:var(--violet);color:var(--violet700)}
.nav .pill{padding:9px 18px}

/* type */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet700);margin-bottom:14px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5.4vw,62px);line-height:1.08;letter-spacing:-.5px;max-width:17ch}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.15;max-width:24ch}
h3{font-family:var(--body);font-weight:700;font-size:19px;line-height:1.3}
.lede{font-size:19.5px;color:var(--stone6);max-width:58ch;margin-top:20px}
.small{font-size:14.5px;color:var(--stone4)}

/* sections */
section{padding:84px 0}
section.tight{padding:56px 0}
.sect-head{margin-bottom:44px}
.sect-head p{margin-top:14px;color:var(--stone6)}
.rule{border:0;border-top:1px solid var(--stone2)}

/* hero sunburst */
.hero{position:relative;padding:96px 0 88px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-320px;right:-220px;width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle,rgba(98,31,255,.14) 0%,rgba(98,31,255,.05) 42%,transparent 68%);pointer-events:none}
.hero::after{content:"";position:absolute;top:-40px;right:-60px;width:420px;height:420px;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(98,31,255,.10) 0deg 2deg,transparent 2deg 14deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 34%,#000 35%,#000 62%,transparent 63%);mask:radial-gradient(circle,transparent 34%,#000 35%,#000 62%,transparent 63%)}
.hero .wrap{position:relative;z-index:1}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* cards & grids */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--stone2);border-radius:18px;padding:26px}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--stone6)}
.card .eyebrow{margin-bottom:8px}
.card-cream{background:var(--stone1)}
.card-violet{background:var(--violet100);border-color:var(--violet300)}
.card-ink{background:var(--stone7);color:var(--cream);border-color:var(--stone7)}
.card-ink p{color:var(--stone2)}
.num{font-family:var(--mono);font-size:13px;color:var(--violet);margin-bottom:10px}

/* badges */
.badge{display:inline-block;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;vertical-align:middle}
.b-launch{background:var(--green100);color:var(--green)}
.b-soon{background:var(--amber100);color:var(--amber)}
.b-later{background:var(--stone1);color:var(--stone4);border:1px solid var(--stone2)}

/* lifecycle strip */
.lifecycle{margin-top:56px;background:#fff;border:1px solid var(--stone2);border-radius:20px;padding:30px 30px 24px}
.lc-row{display:flex;align-items:center;gap:0}
.lc-node{flex:1;text-align:center;position:relative}
.lc-node .lc-dot{width:13px;height:13px;border-radius:50%;background:var(--violet);margin:0 auto 10px;position:relative;z-index:1}
.lc-node:first-child .lc-dot{background:var(--amber)}
.lc-node:last-child .lc-dot{background:var(--teal)}
.lc-node .lc-lab{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone6)}
.lc-row::before{content:"";position:absolute}
.lc-line{height:2px;background:linear-gradient(90deg,var(--amber),var(--violet) 30%,var(--violet) 75%,var(--teal));margin:-49px 6% 40px;border-radius:2px}
.lc-cap{text-align:center;font-size:14px;color:var(--stone4);margin-top:6px}

/* quote / statement band */
.band{background:var(--stone7);color:var(--cream);border-radius:24px;padding:56px 56px}
.band h2{color:var(--cream)}
.band p{color:var(--stone2)}
.band .eyebrow{color:var(--violet300)}

/* never table */
.nevers{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.never{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border:1px solid var(--stone2);border-radius:14px}
.never .nx{font-family:var(--mono);color:var(--red);font-weight:600;font-size:14px;line-height:1.6}
.never p{font-size:15px;color:var(--stone6)}

/* footer */
footer{background:var(--stone7);color:var(--stone2);margin-top:40px;padding:64px 0 40px}
footer .wordmark{color:var(--cream)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:36px;margin-top:8px}
.foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone4);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;padding:3.5px 0;color:var(--stone2)}
.foot-col a:hover{color:#fff}
.foot-col .fb{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:1.5px 7px;margin-left:7px;vertical-align:1px}
.fb-l{background:rgba(30,127,79,.25);color:#7CD3A5}
.fb-s{background:rgba(169,118,11,.22);color:#E4B75C}
.fb-x{background:rgba(255,255,255,.08);color:var(--stone4)}
.foot-note{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;font-size:13px;color:var(--stone4);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* svg chart frame */
.chartcard{background:#fff;border:1px solid var(--stone2);border-radius:20px;padding:28px}
.chartcap{font-size:13.5px;color:var(--stone4);margin-top:12px}

/* two-col feature rows */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:38px 0}
.featrow + .featrow{border-top:1px solid var(--stone2)}
.featrow p{color:var(--stone6);margin-top:12px}
.featrow ul{margin:14px 0 0 18px;color:var(--stone6);font-size:15.5px}
.featrow li{margin-bottom:8px}

@media(max-width:900px){
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}
  .featrow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nevers{grid-template-columns:1fr}
  .nav-links{display:none}
  .band{padding:40px 28px}
}
@media(max-width:600px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}.featrow{grid-template-columns:1fr}}

/* ===== validated nav (2026-07-20) — overrides earlier nav/footer rules ===== */
.nav .wrap{gap:8px;height:66px}
.nav-desktop{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-btn{display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:14px;font-weight:500;color:var(--stone6);padding:9px 11px;border-radius:999px;line-height:1}
.nav-btn:hover{color:var(--stone7);background:var(--stone1)}
.nav-btn.active{color:var(--violet700);background:var(--violet100);font-weight:600} /* 2026-07-21: top-level nav active state (Contact wiring) */
.nav-item.open .nav-btn{color:var(--violet700);background:var(--violet100)}
.caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav-item.open .caret{transform:rotate(225deg) translateY(-1px)}
.nav-auth{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.login{font-size:14px;font-weight:600;color:var(--stone6)}
.login:hover{color:var(--violet700)}
.panel{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--stone2);border-radius:16px;box-shadow:0 18px 50px rgba(40,35,24,.13);padding:10px;min-width:290px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60}
.nav-item.open .panel{opacity:1;visibility:visible;transform:translateY(0)}
.panel a{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px}
.panel a:hover{background:var(--violet100)}
.p-t{font-size:14px;font-weight:600;color:var(--stone7);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.p-d{font-size:12.5px;color:var(--stone4);margin-top:1px;display:block}
.p-group{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--violet700);padding:8px 12px 4px}
/* 2026-07-21 Nav v2.1: simplified names-only mega (no entrance/taglines/descriptors) */
.panel.mega{min-width:1010px;display:flex;gap:10px;padding:14px}
.panel.mega.mega2{min-width:780px}
.panel.mega .col{flex:1;min-width:0}
.panel.mega .col + .col{border-left:1px solid var(--stone1);padding-left:6px}
.nav-item.align-right .panel{left:auto;right:0}
.fb{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;flex:none}
.fb-s{background:var(--amber100);color:var(--amber)}
.fb-x{background:var(--stone1);color:var(--stone4);border:1px solid var(--stone2)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--stone7);margin:5px 0;border-radius:2px}
.mobile-menu{display:none}
@media(max-width:1080px){
  .nav-desktop{display:none}
  .nav-auth{display:none}
  .burger{display:block}
  .mobile-menu{position:fixed;inset:66px 0 0 0;background:var(--cream);overflow:auto;z-index:99;padding:18px 28px 60px}
  .mobile-menu.open{display:block}
  .m-group{border-bottom:1px solid var(--stone2)}
  .m-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;font-family:var(--body);font-size:17px;font-weight:600;color:var(--stone7);padding:16px 0;cursor:pointer;text-align:left}
  .m-links{display:none;padding:0 0 12px}
  .m-group.open .m-links{display:block}
  .m-links a{display:block;padding:9px 0 9px 14px;font-size:15px;color:var(--stone6)}
  .m-auth{display:flex;gap:12px;margin-top:22px}
}
/* validated 6-col footer */
.foot-grid{grid-template-columns:1.25fr 1fr 1fr 1fr 1fr 1fr;gap:32px}
.foot-col h4 + h4{margin-top:22px}
.foot-col a{font-size:13.5px}
footer .fb{margin-left:7px;vertical-align:1px}
footer .fb-s{background:rgba(169,118,11,.22);color:#E4B75C}
footer .fb-x{background:rgba(255,255,255,.08);color:var(--stone4);border:0}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

.nav-btn{white-space:nowrap}
.wrap{max-width:1200px}


/* ===== auth pill (2026-07-24) — bundle Log in / Sign up into one segmented control ===== */
.authpill{display:inline-flex;align-items:stretch;border:1.5px solid var(--stone7);border-radius:999px;overflow:hidden;flex:none}
.authpill a{display:inline-flex;align-items:center;padding:9px 17px;font-size:14px;font-weight:600;line-height:1;transition:.15s;white-space:nowrap}
.authpill .apl{color:var(--stone7)}
.authpill .apl:hover{background:var(--stone1)}
.authpill .aps{background:var(--violet);color:#fff}
.authpill .aps:hover{background:var(--violet700)}

/* ===== centered mega dropdown (2026-07-24) — panel centers under its nav button ===== */
.nav-item.center .panel{left:50%;right:auto;transform:translate(-50%,-6px)}
.nav-item.center.open .panel{transform:translate(-50%,0)}

/* ===== 2026-07-26 · RI column Foundation/Applied sub-labels (BNCWEB-RIIA-01) =====
   Sub-group label inside a mega-panel column, between .p-group and the links. */
.p-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone4);padding:9px 12px 3px;margin-top:2px;border-top:1px solid var(--stone1)}
.p-sub.first{margin-top:0;border-top:0;padding-top:2px}
/* "New" nav badge — distinct from neutral "Later wave" (.fb-x) / "Designed" (.fb-s) */
.fb-n{background:var(--violet100);color:var(--violet700);border:1px solid var(--violet300)}

/* ===== 2026-07-27 · Engine + Systems nav architecture (BNCWEB-IA-02 / IA-03) =====
   A mega panel that stacks a header link, its columns, and an engine strip. */
.panel.mega.stack{display:block}
.panel.mega.stack .mega-cols{display:flex;gap:10px}
.panel-head{display:flex!important;align-items:baseline;gap:10px;margin:-4px -4px 8px;padding:10px 12px!important;border-bottom:1px solid var(--stone1);border-radius:12px 12px 0 0}
.panel-head .ph-t{font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--stone7);flex:none}
.panel-head .ph-s{font-size:13px;color:var(--stone4);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-07-30 dated amendment — .panel-head retired. It duplicated the destination of
   the .p-over "START HERE" row directly below it and made the panels read busier than
   they are; the panels now open straight on that row. Rules kept (unused) in case the
   header pattern returns; delete on the next CSS sweep if it hasn't. */
.panel-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px -4px -4px;padding:9px 12px;border-top:1px solid var(--stone1);border-radius:0 0 12px 12px;background:var(--cream)}
.engine-strip{display:flex!important;align-items:center;gap:8px;padding:0!important;border-radius:0}
.engine-strip:hover{background:none}
.engine-strip .es-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--stone6)}
.engine-strip .es-a{color:var(--violet700);font-size:14px}
.engine-strip:hover .es-t{color:var(--violet700)}
/* mobile menu system sub-label (Systems group carries five systems) */
.m-sub{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone4);padding:12px 0 3px 14px;border-top:1px solid var(--stone2);margin-top:6px}
.m-links > .m-sub:first-child{border-top:0;margin-top:0}
/* wide mega panel (Systems) anchors to the nav wrap, not its button, so five columns never clip */
.nav .wrap{position:relative}
.nav-item.wide{position:static}
.nav-item.wide .panel{left:28px;right:auto;transform:translateY(-6px)}
.nav-item.wide.open .panel{transform:translateY(0)}
/* footer: a group heading that follows links needs the same air as h4 + h4 */
.foot-col a + h4{margin-top:22px}

/* ===== 2026-07-27b · launch-wave dots replace the Designed / Later-wave text badges =====
   One hue, four densities: the further out a feature ships, the lighter its dot.
   .wd1 at launch · .wd2 wave 2 · .wd3 wave 3 · .wd4 wave 4 (outline). */
.wd{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;vertical-align:0}
.wd1{background:var(--violet)}
.wd2{background:var(--teal)}
.wd3{background:var(--amber)}
.wd4{background:var(--stone4)}
.panel a > .wd,.m-links a > .wd,.foot-col a > .wd{margin-left:auto}
.wave-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--stone4)}
.wave-key .wk-l{color:var(--stone6)}
.wave-key .wk-i{display:flex;align-items:center;gap:5px}
.wave-key .wd{margin-left:0}
/* bigger, clearer column headings across every menu (Niko, 2026-07-27) */
.p-group{font-size:12.5px;letter-spacing:.1em;padding:8px 12px 6px}
/* mobile menu: dot sits at the end of the row; one legend at the foot */
.m-links a{display:flex!important;align-items:center;gap:8px}
.m-wavekey{padding:16px 0 4px}
.m-wavekey .wave-key{margin-left:0;font-size:10px}
footer .wave-key{margin-left:0;gap:14px;color:var(--stone4)}
footer .wave-key .wk-l{color:var(--stone2)}
footer .wd1{background:var(--violet400)}
footer .wd2{background:var(--teal400)}
footer .wd3{background:var(--amber400)}
footer .wd4{background:var(--stone4)}

/* footer links become flex rows too, so a wave dot never orphans onto its own line */
.foot-col a:not(.wordmark){display:flex;align-items:center;gap:10px}

/* ===== 2026-07-28 · Systems panel two-tier grid (primary / supporting) =====
   Five system columns aligned on one horizontal rule: primary pages above,
   supporting pages below. Grid, two rows, column flow - each system contributes
   a pair of cells (.col then .col.sub). An empty .col.sub keeps the rule
   continuous for a system with no supporting pages (Capacity). */
.panel.mega.stack.tiered .mega-cols{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto auto;grid-auto-flow:column;gap:0}
.panel.mega.tiered .col{padding:0 5px 12px}
.panel.mega.tiered .col + .col{border-left:0;padding-left:5px}
.panel.mega.tiered .col:nth-child(n+3){border-left:1px solid var(--stone1)}
.panel.mega.tiered .col.sub{border-top:1px solid var(--stone1);padding-top:4px;padding-bottom:2px}
.panel.mega.tiered .col.sub .p-sub{border-top:0;margin-top:0;padding:9px 12px 4px}
/* mobile: supporting-tier label inside a system group */
.m-sub2{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone4);padding:10px 0 3px 14px}

/* ===== 2026-07-28 dated amendment — capbar + syscheck promoted from page scope =====
   Donor idioms validated on sales-forecasting, set-targets and capacity-system (3+ pages):
   .capbars/.capbar — capacity-vs-plan bars (growBars motion, JS-off safe inline widths);
   .golive/.syscheck/.chk — green-light runner (staggered resolve, REDUCE/JS-off safe).
   Behaviour stays page-scoped JS (motion system §2.3); these are the shared classes only. */
.panel-cap{font-size:13.5px;color:var(--stone4);margin-top:14px}
.cap-stat{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.cap-stat .cs{flex:1;min-width:170px;background:var(--stone1);border:1px solid var(--stone2);border-radius:13px;padding:14px 16px}
.cap-stat .cs-v{font-family:var(--disp);font-weight:700;font-size:23px;color:var(--stone7);line-height:1;display:flex;align-items:baseline;gap:8px}
.cap-stat .cs-v .hu{color:var(--violet700)}
.cap-stat .cs-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--stone4);margin-top:8px}
.capbar{display:grid;grid-template-columns:170px 1fr 190px;gap:16px;align-items:center;padding:11px 0}
.capbar + .capbar{border-top:1px solid var(--stone1)}
.cap-fn{font-size:14px;font-weight:600;color:var(--stone7)}
.cap-fn span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--stone4);margin-top:2px}
.cap-track{position:relative;height:22px;border-radius:6px;background:var(--stone1);overflow:visible}
.cap-fill{position:absolute;left:0;top:0;bottom:0;display:flex;border-radius:6px;overflow:hidden}
.cap-fill .h{background:var(--violet)}
.cap-gap{position:absolute;top:0;bottom:0;border-radius:0 6px 6px 0;background:repeating-linear-gradient(45deg,rgba(179,55,43,.16) 0 5px,rgba(179,55,43,.05) 5px 10px);border:1px dashed rgba(179,55,43,.5)}
.cap-gap.amb{background:repeating-linear-gradient(45deg,rgba(169,118,11,.16) 0 5px,rgba(169,118,11,.05) 5px 10px);border-color:rgba(169,118,11,.5)}
.cap-need{position:absolute;top:-4px;bottom:-4px;width:2.5px;background:var(--stone7);border-radius:2px;transform:translateX(-50%)}
.cap-r{text-align:right}
.cap-cov{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--stone7)}
.cap-cov.behind{color:var(--red)}
.cap-cov.at{color:var(--amber)}
.cap-note{display:block;font-family:var(--mono);font-size:10.5px;color:var(--stone6);margin-top:2px}
.cap-note.behind{color:var(--red)}
.cap-legend{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--stone6)}
.cap-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.cap-legend i::before{content:"";width:12px;height:12px;border-radius:3px;display:inline-block}
.cap-legend i.hu::before{background:var(--violet)}
.cap-legend i.gp::before{background:repeating-linear-gradient(45deg,rgba(179,55,43,.3) 0 4px,transparent 4px 8px);border:1px dashed rgba(179,55,43,.5)}
.cap-legend i.nd::before{width:3px;height:13px;border-radius:2px;background:var(--stone7)}
.capbars.arm .cap-fill{width:0 !important;transition:none}
.capbars.play .cap-fill{transition:width .85s cubic-bezier(.3,0,.2,1)}
.cap-pulse.pulse{animation:cappulse 1s ease 2}
@keyframes cappulse{0%,100%{box-shadow:0 0 0 0 rgba(179,55,43,0)}50%{box-shadow:0 0 0 5px rgba(179,55,43,.22)}}
.cap-cause{display:flex;align-items:flex-start;gap:11px;margin-top:20px;border:1px solid #f0c9c3;background:linear-gradient(160deg,#fff 55%,var(--red100));border-radius:13px;padding:14px 16px}
.cap-cause .cc-b{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--red);background:#fff;border:1px solid #f0c9c3;border-radius:999px;padding:4px 10px;flex:none}
.cap-cause p{font-size:14px;color:var(--stone7);max-width:none;margin:0}
@media(max-width:760px){
  .capbar{grid-template-columns:1fr;gap:6px}
  .cap-r{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .capbars.arm .cap-fill,.capbars.play .cap-fill{transition:none}
}
.golive{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:stretch;background:var(--stone1);border:1px solid var(--stone2);border-radius:22px;padding:32px}
@media(max-width:860px){
  .golive{grid-template-columns:1fr;gap:24px;padding:26px}
}
.gl-left{display:flex;flex-direction:column;justify-content:center}
.gl-left .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone4)}
.gl-left .plan{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--stone7);margin-top:8px;line-height:1.15}
.gl-left .arr{font-family:var(--disp);font-weight:700;font-size:52px;line-height:1;color:var(--violet700);margin-top:14px}
.gl-left .by{font-size:15px;color:var(--stone6);margin-top:6px}
.syscheck{background:#fff;border:1px solid var(--stone2);border-radius:16px;padding:20px 22px}
.sc-title{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone6);margin-bottom:6px}
.chk{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid var(--stone1)}
.chk-ic{position:relative;width:24px;height:24px;flex:none}
.chk-spin{position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--stone2);border-top-color:var(--violet);display:none}
.chk-mark{position:absolute;inset:0;border-radius:50%;background:var(--green100);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.chk.cond .chk-mark{background:var(--amber100);color:var(--amber)}
.chk.run .chk-spin{display:block;animation:spin .7s linear infinite}
.chk.run .chk-mark{display:none}
.chk.run .chk-lab em{visibility:hidden}
.chk-lab{flex:1;font-size:15px;color:var(--stone7)}
.chk-lab em{font-style:normal;display:block;font-size:12.5px;color:var(--stone6);margin-top:1px}
.chk-status{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--green);white-space:nowrap}
.chk.cond .chk-status{color:var(--amber)}
.chk.run .chk-status{color:var(--stone4);font-size:0}
.chk.run .chk-status::after{content:"Analyzing\2026";font-size:11px;letter-spacing:0}
@keyframes spin{to{transform:rotate(360deg)}}
.sc-verdict{display:flex;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--green100);border:1px solid rgba(30,127,79,.28);gap:11px;align-items:flex-start}
.sc-verdict.cond{background:var(--amber100);border-color:rgba(169,118,11,.3)}
.js .sc-verdict{opacity:0;transform:translateY(4px);transition:opacity .45s ease,transform .45s ease}
.js .sc-verdict.show{opacity:1;transform:none}
.svg-dot{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;margin-top:1px}
.sc-verdict.cond .svg-dot{background:var(--amber)}
.sc-verdict b{font-size:14.5px;color:var(--stone7);display:block}
.sc-verdict span{font-size:13.5px;color:var(--stone6)}
@media (prefers-reduced-motion:reduce){
  .chk.run .chk-spin{animation:none!important}
}

/* ===== 2026-07-29 dated amendment — BNCWEB-PROB-01 promoted from page scope =====
   The 3-card red blind-spot problem section (BNCWEB-PROB-01) was copy-pasted
   page-scoped in 20 body files and had drifted: seven different .ns-blind heights
   (66/74/78/82/86/90px + two auto), eleven .ns-knows declarations, and the 390px
   summary-strip overflow fix on only 2 of 20 pages. Promoted here at ONE value.
   Ratified by Niko 2026-07-29: .ns-blind height 90px (accommodates a two-line
   .nb-v; the panels bottom-align inside a stretched card, so shorter copy is
   unaffected). Rollout: pages carrying a local copy still override it (page-scoped
   <style> follows this sheet in document order) — delete the local block on the
   page's next touch. Detail: BNCWEB-ASSETS-01 (Section 9.3). */
.ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.ns-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stone2);border-radius:18px;padding:24px}
.ns-tool{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone4);margin-bottom:12px}
.ns-knows{font-size:15px;color:var(--stone7);line-height:1.5;min-height:48px;padding-bottom:26px}
.ns-blind{height:90px;margin-top:auto;background:rgba(179,55,43,.08);border:1px solid rgba(179,55,43,.22);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;justify-content:center}
.nb-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--red);margin-bottom:5px}
.nb-v{font-size:15px;font-weight:700;color:var(--stone7);line-height:1.35}
.ns-foot{margin-top:22px;background:var(--stone1);border:1px solid var(--stone2);border-radius:14px;padding:20px 24px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.ns-foot b{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--stone7);flex:none}
.ns-foot span{font-size:16px;color:var(--stone6);line-height:1.5;max-width:none}
@media(max-width:820px){.ns-grid{grid-template-columns:1fr}.ns-knows{min-height:0}.ns-blind{height:auto;min-height:0}}
@media(max-width:560px){.ns-foot b{flex:1 1 100%}}

/* ===== 2026-07-29 dated amendment — capacity MIX bar promoted from page scope =====
   The stacked capacity bar (people + agents against what the plan needs) was invented
   page-scoped on agents.html and extended on build-your-own.html to THREE segments,
   because an agent the customer builds counts as capacity exactly like one Beacon
   ships. Promoted here under its own namespace (.capmix) rather than extended onto the
   .capbar family above: .capbar is a 3-column grid (function / track / coverage) with a
   single-hue absolutely-positioned fill; this is a flex-stacked multi-segment fill.
   Two different components, so two namespaces — reusing .cap-track / .cap-fill /
   .cap-need silently inherited position:absolute and a translateX(-50%) tick into any
   page that redeclared only some of those properties.
   Colour semantics (BNCWEB-MOTION-01 §4, amended 2026-07-29):
     --violet  = people · --teal = Beacon agents · --teal400 = your own agents
   Two shades of one hue say "same substance, different author"; a third hue would read
   as a third kind of thing. Signal red stays the hatched shortfall; the ink tick stays
   "what the plan needs". Motion is §2.8 arm-then-play and JS-off safe: inline segment
   widths are the default, JS adds .arm to collapse them. Behaviour stays page-scoped JS.
   Vocabulary: label segments per BNCWEB-AGVOC-01 — "Beacon agents" / "Your own agents",
   never "ours" / "yours". Rollout: agents.html carries a two-segment local copy under
   the old .cap-* names; migrate on next touch. Detail: BNCWEB-ASSETS-01 (Section 9.3). */
.capmix{background:#fff;border:1px solid var(--stone2);border-radius:20px;padding:24px 26px}
.cm-key{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone4);padding-bottom:18px;border-bottom:1px solid var(--stone1);margin-bottom:20px}
.cm-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px;font-style:normal}
.cm-key i.pp{background:var(--violet)}
.cm-key i.ag{background:var(--teal)}
.cm-key i.yo{background:var(--teal400)}
.cm-key .nd{margin-left:auto}
.cm-key .nd em{font-style:normal;display:inline-block;width:2px;height:11px;background:var(--stone7);margin-right:7px;vertical-align:-1px}
.cm-row + .cm-row{margin-top:18px}
.cm-lab{display:flex;align-items:baseline;gap:10px;font-size:14.5px;color:var(--stone7);font-weight:600;margin-bottom:8px}
.cm-lab span{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--stone4);font-weight:400}
.cm-track{position:relative;height:26px;background:var(--stone1);border-radius:8px}
.cm-fill{display:flex;height:100%;width:100%;border-radius:8px;overflow:hidden}
.cm-seg{height:100%}
.cm-seg.pp{background:var(--violet)}
.cm-seg.ag{background:var(--teal)}
.cm-seg.yo{background:var(--teal400)}
.cm-gap{position:absolute;top:0;bottom:0;border-radius:4px;background:repeating-linear-gradient(45deg,rgba(179,55,43,.26) 0 5px,rgba(179,55,43,.07) 5px 10px);border:1px solid rgba(179,55,43,.35)}
.cm-need{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--stone7);border-radius:2px;z-index:3}
.cm-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--stone1);font-size:14.5px;color:var(--stone6);max-width:none}
.cm-foot b{color:var(--stone7)}
@media(max-width:700px){.cm-key .nd{margin-left:0}}
@media(max-width:560px){.capmix{padding:20px 18px}}
.js .capmix.arm .cm-seg{width:0!important;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.js .capmix.arm.play .cm-seg.pp{width:var(--wp)!important}
.js .capmix.arm.play .cm-seg.ag{width:var(--wa)!important}
.js .capmix.arm.play .cm-seg.yo{width:var(--wy)!important}
.js .capmix.arm .cm-gap{opacity:0;transition:opacity .5s ease}
.js .capmix.arm.play .cm-gap{opacity:1;animation:cmgap .9s ease 2.6s 2}
@keyframes cmgap{0%,100%{box-shadow:0 0 0 0 rgba(179,55,43,0)}50%{box-shadow:0 0 0 5px rgba(179,55,43,.24)}}
@media(prefers-reduced-motion:reduce){
  .js .capmix.arm .cm-seg{transition:none!important}
  .js .capmix.arm.play .cm-gap{animation:none!important}
}

/* ===== 2026-07-29 dated amendment — the flow language promoted from /engine =====
   Validated with the /engine storyline rework (Niko, 2026-07-29). One visual language for
   every data-flow / lifecycle illustration: white .flowcard canvas, stone rails, violet
   ambient current (.fl), one-shot left→right draws (.drawline / .grow — give the path
   pathLength="100"), violet nodes, the SVG type set (.svt/.svb/.svp) and chip/ink rects,
   all consuming brand tokens. Behaviour (staged reveal, sequencing) stays page-scoped JS
   per BNCWEB-MOTION-01; these are the shared classes only. Reduced-motion: the current
   goes static, draws render complete. Detail: BNCWEB-MOTION-01 amendment 2026-07-29
   (Engine flow language). Rollout: engine.body.html consumes these from this sheet. */
.flowcard{background:#fff;border:1px solid var(--stone2);border-radius:22px;padding:22px 26px}
.flowcard svg{display:block;width:100%;height:auto}
.fc-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--stone6);margin-bottom:10px}
.fc-title.lg{font-size:14px;color:var(--stone7)}
.rail{stroke:var(--stone2);stroke-width:2;fill:none}
.fl{stroke:var(--violet400);stroke-width:2;fill:none;stroke-dasharray:5 9;animation:flowdash 1.15s linear infinite}
.fl.slow{animation-duration:1.6s}
@keyframes flowdash{to{stroke-dashoffset:-14}}
.drawline{stroke:var(--violet400);stroke-width:2.5;fill:none;stroke-dasharray:100;stroke-dashoffset:100}
.drawline.show{animation:drw 3.5s ease forwards}
.grow{stroke-dasharray:100;stroke-dashoffset:100}
.grow.show{animation:drw 1s ease forwards}
@keyframes drw{to{stroke-dashoffset:0}}
.svt{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;fill:var(--stone6)}
.svt.dim{fill:var(--stone4)}
.svt.vio{fill:var(--violet700)}
.svb{font-family:var(--disp);font-weight:700;fill:var(--stone7)}
.svb.onink{fill:#fff}
.svp{font-family:var(--body);font-size:12.5px;fill:var(--stone7)}
.chiprect{fill:var(--cream);stroke:var(--stone2);stroke-width:1}
.chiprect.req,.chiprect.out{fill:var(--violet100);stroke:var(--violet300)}
.inkrect{fill:var(--stone7)}
.node{fill:var(--violet)}
.flowcap{font-size:13.5px;color:var(--stone4);margin-top:12px}
@media (prefers-reduced-motion:reduce){
  .fl{animation:none;stroke-dasharray:none;opacity:.55}
  .drawline,.grow{stroke-dashoffset:0;animation:none}
}

/* ===== 2026-07-30 dated amendment — /integrations validated: four families promoted =====
   Collision-checked across every body file before promotion. Promoted here:
   .rv            — the staged-reveal base, previously copied into 23 body files
   .acc*          — expandable rows (source catalogue + FAQ), no prior declaration
   .sparktile/.sk-* — stat tile with a single-series sparkline (named to clear the
                    existing .kpi card in enrichment / saas-metrics)
   .tf-*          — tool frames, donor intelligence-everywhere.body.html (2026-07-29),
                    now on a second page; .lg title modifier and .tf-appr approval row
                    are new here.
   NOT promoted, deliberately: .chip (three incompatible declarations across five body
   files — needs a rename first) and .src (two incompatible declarations across five).
   Behaviour stays page-scoped JS per BNCWEB-MOTION-01 §2.3; these are the classes only.
   Pages that declare their own copy keep overriding it — page CSS loads after this
   sheet — so nothing already validated changes until that page is next touched. */

/* staged reveal — the base every animated surface builds on */
.rv{opacity:0;transform:translateY(9px)}
.rv.show{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* expandable rows — a long reference list, or an FAQ. JS-off leaves every row open:
   the collapse only applies under html.js (set by the page's own script). */
.acc{border:1px solid var(--stone2);border-radius:18px;background:#fff;overflow:hidden}
.acc-row + .acc-row{border-top:1px solid var(--stone1)}
.acc-t{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;padding:18px 24px;cursor:pointer;text-align:left;font-family:var(--body)}
.acc-t:hover{background:var(--cream)}
.acc-n{font-size:17px;font-weight:700;color:var(--stone7)}
.acc-t .fb{margin-left:2px}
.acc-x{margin-left:auto;width:11px;height:11px;border-right:2px solid var(--stone4);border-bottom:2px solid var(--stone4);transform:rotate(45deg) translate(-3px,-3px);flex:none;transition:transform .2s ease}
.acc-row.open .acc-x{transform:rotate(225deg) translate(-2px,-2px);border-color:var(--violet)}
.acc-p{padding:0 24px 22px}
.acc-p p{font-size:15.5px;color:var(--stone6);max-width:70ch;margin:0}
.js .acc-p{display:none}
.js .acc-row.open .acc-p{display:block}
@media(max-width:560px){.acc-t{padding:16px}.acc-p{padding:0 16px 18px}}

/* stat tile + sparkline — one series, one hue, so no legend and no categorical palette;
   the value wears the hero-number token (.gl-left .arr precedent), labels wear text
   tokens. The sparkline path itself is built in page-scoped JS. */
.sparktile{background:var(--stone1);border:1px solid var(--stone2);border-radius:18px;padding:24px 26px}
.sk-k{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone4)}
.sk-v{font-family:var(--disp);font-weight:700;font-size:48px;line-height:1;color:var(--violet700);margin-top:10px;font-variant-numeric:tabular-nums}
.sk-s{margin-top:18px}
.sk-s svg{display:block;width:100%;height:auto}
.sk-c{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--stone4);margin-top:10px}

/* tool frames — "here is what it looks like where it lands": a titled chrome bar over a
   mock of the tool. .tf-top is the compact mono bar (donor); .tf-top.lg is the readable
   title used when the tool itself is the point. */
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:stretch}
.tf-cell{display:flex;flex-direction:column}
.tf-frame{background:#fff;border:1px solid var(--stone2);border-radius:14px;overflow:hidden;flex:1;display:flex;flex-direction:column}
.tf-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--stone1);border-bottom:1px solid var(--stone2);font-family:var(--mono);font-size:11px;color:var(--stone6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-top i{width:8px;height:8px;border-radius:50%;flex:none;font-style:normal}
.tf-top i.sl{background:var(--amber400)}
.tf-top i.cb{background:var(--teal)}
.tf-top i.pb{background:var(--violet)}
.tf-top i.cr{background:var(--green)}
.tf-top.lg{padding:14px 17px;font-family:var(--body);font-size:15px;color:var(--stone7);gap:10px}
.tf-top.lg i{width:10px;height:10px}
.tf-top.lg b{font-weight:700}
.tf-top.lg span{font-family:var(--mono);font-size:11px;color:var(--stone4);overflow:hidden;text-overflow:ellipsis}
.tf-body{padding:14px 15px 16px;flex:1;display:flex;flex-direction:column;justify-content:center}
.tf-msg{display:flex;gap:10px;align-items:flex-start}
.tf-av{width:26px;height:26px;border-radius:7px;background:var(--violet);color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.tf-nm{font-size:12.5px;font-weight:700;color:var(--stone7)}
.tf-nm span{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--stone4);margin-left:6px}
.tf-tx{font-size:13px;color:var(--stone6);line-height:1.5;margin-top:3px}
.tf-tx b{color:var(--stone7)}
.tf-aud{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--stone2);border-radius:10px}
.tf-aud + .tf-aud{margin-top:9px}
.tf-aud.on{border-color:var(--violet300);box-shadow:0 0 0 1.5px var(--violet300)}
.tf-rad{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--stone2);flex:none}
.tf-aud.on .tf-rad{border-color:var(--violet);background:radial-gradient(circle,var(--violet) 0 4px,#fff 4.5px)}
.tf-aud .an{font-size:13px;font-weight:600;color:var(--stone7)}
.tf-aud .ae{display:block;font-family:var(--mono);font-size:10.5px;color:var(--stone6);margin-top:2px}
.tf-aud.dim .an,.tf-aud.dim .ae{color:var(--stone4)}
.tf-bcard{border:1px solid var(--stone2);border-left:4px solid var(--violet);border-radius:10px;padding:12px 13px;background:var(--cream)}
.tf-bk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone4)}
.tf-bt{font-size:14px;font-weight:700;color:var(--stone7);margin-top:4px}
.tf-bx{font-size:12.5px;color:var(--stone6);margin-top:5px;line-height:1.5}
.tf-cap{margin-top:12px;font-size:14.5px;font-weight:700;color:var(--stone7);line-height:1.4;min-height:41px}
/* the approval row — the human-yes rule shown inside the frame instead of stated in prose */
.tf-appr{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--stone2)}
.tf-appr .lb{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--stone4);margin-right:auto}
.tf-appr .yes{font-size:12px;font-weight:700;color:#fff;background:var(--violet);border-radius:999px;padding:5px 14px}
.tf-appr .no{font-size:12px;color:var(--stone4);border:1px solid var(--stone2);border-radius:999px;padding:5px 12px}
@media(max-width:900px){.tf-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}


/* ===== 2026-07-30 dated amendment — highlighted overview row in the nav panels =====
   The plain "The Engine — overview" row read as one more link in the list, and the
   .panel-head above it doesn't read as a link at all (discoverability finding,
   2026-07-29) — so the two hub pages the whole site is built to introduce were the
   hardest things in the menu to find. .p-over promotes that row: violet field, a solid
   START HERE tag, and an arrow that nudges on hover. Carried by the three panels that
   have an overview page (The Engine · Systems · AI system); .m-over is the mobile-menu
   equivalent. Shared because .panel / .m-links are shared nav components. */
.p-over{display:flex!important;align-items:center;gap:10px;margin:2px 0 8px;padding:12px 13px!important;
  background:var(--violet100);border:1px solid var(--violet300);border-radius:12px}
.p-over:hover{background:#E4D9FF;border-color:var(--violet400)}
.p-over .p-t{color:var(--violet700);font-size:14.5px}
.p-over .p-tag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--violet);color:#fff;border-radius:999px;padding:3px 9px;flex:none}
.p-over .p-a{margin-left:auto;color:var(--violet700);font-size:16px;flex:none;transition:transform .15s}
.p-over:hover .p-a{transform:translateX(3px)}
.m-links a.m-over{background:var(--violet100);border:1px solid var(--violet300);border-radius:12px;
  padding:12px 14px!important;margin:2px 0 8px;color:var(--violet700);font-weight:600}
.m-links a.m-over .m-tag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--violet);color:#fff;border-radius:999px;padding:3px 9px;flex:none}
.m-links a.m-over .m-a{margin-left:auto;color:var(--violet700)}
@media (prefers-reduced-motion:reduce){.p-over .p-a,.p-over:hover .p-a{transition:none;transform:none}}

/* ▲ 2026-07-30 dated amendment — BNCDS-03 marketing foundations enter the website assets.
   Source: Marketing Visual Library v1.1 (BNCDS-03, ratified 2026-07-28) —
   https://beacon-marketing-assets.vercel.app/ . Product surfaces stay violet-disciplined;
   marketing surfaces (home, campaign and launch pages) rotate the bright foundations.
   Tokens only + the four recurring marketing devices. No catalogued class is re-declared.
   Legibility rule carried over: display-size type on a light panel is ink first — colour
   enters as an accent (one word, one digit), never as the body of a headline or a number.
   On dark surfaces display type is cream. */
:root{
  --lavender:#CBBFFF; --mint:#8FECAC; --mint100:#EAFAF0; --spark:#3EF06B;
  --sun1:#FFB23E; --sun2:#FA8A2B; --sun3:#F9762D; --sun4:#FF621F;
  --sunburst:linear-gradient(135deg,#FFB23E,#FA8A2B,#F9762D,#FF621F);
}

/* device 1 — green highlight word. One per surface. Cream-on-dark contexts only. */
.hl{color:var(--spark)}
/* device 1b — the same emphasis on a light panel: ink type, violet accent. */
.hl-l{color:var(--violet)}

/* device 2 — differing-digit accent. The digits that differ go red-orange against ink. */
.dig{color:var(--sun4)}

/* device 3 — violet dot-grid statement surface (S2). */
.gridviolet{background:var(--violet);color:var(--cream);
  background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.5px);background-size:48px 48px}
.gridviolet.deep{background:var(--violet700)}
.gridviolet h1,.gridviolet h2,.gridviolet h3{color:var(--cream)}
.gridviolet .eyebrow{color:var(--lavender)}
.gridviolet p{color:var(--lavender)}

/* device 3b — lavender / mint framed panels (S3). */
.framelav{background:var(--violet100);border:1.5px solid var(--lavender);border-radius:18px}
.framemint{background:var(--mint100);border:1.5px solid var(--mint);border-radius:18px}

/* device 4 — the grainy sunburst (transformation motif terminal). */
.sunburst{border-radius:50%;background:radial-gradient(circle at 30% 26%,var(--sun1),var(--sun2) 46%,var(--sun4))}

/* dark-surface filled pill — the primary CTA on any violet or ink hero. */
.pill-invert{background:var(--cream);color:var(--violet700)}
.pill-invert:hover{background:#fff;color:var(--violet)}

/* dark-surface outline pill — the secondary CTA on any violet or ink hero. */
.pill-cream{border:1.5px solid rgba(250,247,239,.55);color:var(--cream)}
.pill-cream:hover{border-color:var(--spark);color:var(--spark)}

/* ▲ 2026-07-31 dated amendment — two equal-weight rows at the head of a mega panel.
   The overview and the autonomy page sit side by side, same weight, each with its own tag.
   Consumes .p-over / .m-over unchanged; this only lays them out 2-up. */
.p-over-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 8px}
.p-over-row .p-over{margin:0}
.p-over .p-tag.alt{background:var(--green);color:#fff}
.m-links a.m-over .m-tag.alt{background:var(--green);color:#fff}
@media(max-width:1200px){.p-over-row{grid-template-columns:1fr}}

/* ─── ASSETS-01 promotion 2026-08-06 ────────────────────────────────────────
   The lifecycle ring-chain (.lp-*) and the CEO KPI-storyline card (.get*)
   were page-scoped in lifecycles.body.html. Second consumer: capital.body.html
   (/capital r5, §1 "what the plan costs"). Promoted verbatim — no rule changed.
   FOLLOW-UP: delete the now-redundant local copies from lifecycles.body.html's
   page <style> in its next touch. Until then the page-scoped copy simply wins
   the cascade with identical declarations, so nothing renders differently.  */
.lp-rail{position:relative;display:flex;align-items:flex-start;margin-top:6px;background:#fff;border:1px solid var(--stone2);border-radius:16px;padding:30px 30px 26px}
.lp-line{position:absolute;top:40px;left:calc(30px + (100% - 60px)/var(--n)/2);right:calc(30px + (100% - 60px)/var(--n)/2);height:6px;background:var(--violet);border-radius:3px;z-index:0}
.lp-node{flex:1;text-align:center;position:relative;z-index:1;padding:0 4px}
.lp-ring{display:block;width:26px;height:26px;border-radius:50%;border:5px solid var(--violet);background:#fff;margin:0 auto 14px}
.lp-node:last-child .lp-ring{background:#E8913C;border-color:#E8913C}
.lp-s{font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:0;color:var(--stone7);line-height:1.3;display:block}
.get{background:var(--stone1);border:1px solid var(--stone2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column}
.get-t{font-size:14px;font-weight:700;color:var(--stone7)}
.get-kpi{font-family:var(--disp);font-weight:700;font-size:27px;color:var(--violet700);line-height:1.05;margin:9px 0 7px}
.get-kpi span{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--stone4);margin-left:5px}
.get-s{font-size:13px;color:var(--stone6);line-height:1.4;margin-top:auto}
/* ▲ 2026-08-06 — the ring chain's narrow-width treatment, promoted with the
   component. This is lifecycles.body.html's own rule, which had been page-scoped
   since the component was written: below 680px the rail WRAPS onto rows of three
   and the connector line is hidden, because five nodes plus labels cannot hold a
   single row. Without it a consumer overflows at 390px (found on /capital). */
@media(max-width:680px){
  .lp-rail{flex-wrap:wrap;gap:18px 0;padding:22px}
  .lp-node{flex:0 0 33.33%}
  .lp-line{display:none}
  .lp-ring{margin-bottom:8px}
}
/* ▲ 2026-08-08 — a stray top-level close brace was removed here. It predates
   this round (found 2026-08-08; brace count ran 487 open to 488 close). A stray
   close brace makes the CSS parser discard the rule that follows it, which had
   silently swallowed the first landing-dot rule below. */


/* ▲ 2026-08-08 — landing dots, promoted on second adoption (BNCWEB-CAP-02 r2).
   Where an agent's work lands: Briefed · Drafted · Done. Written page-scoped as
   .cfs-dot / .cfs-key on /capacity-for-every-system (2026-08-06 MOTION-01 amendment);
   /capacity-system is the second consumer, so the device moves here and both pages
   consume it unchanged. Keyed to /autonomy's Watch · Prepare · Autopilot. */
.ld-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.ld-dot.b{background:var(--violet)}
.ld-dot.d{background:var(--amber)}
.ld-dot.a{background:var(--green)}
.ld-key{margin-top:18px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
.ld-key span{font-size:13.5px;color:var(--stone6);display:inline-flex;gap:8px;align-items:center}
.ld-key em{font-style:normal;font-size:14px;color:var(--stone6);flex:1 1 100%;line-height:1.5}
.ld-key em a{color:var(--violet700);font-weight:600}

/* ▲ 2026-08-09 dated amendment — THE FIGURE SYSTEM, promoted from page scope.
   Donors: /connect-your-tools r3 (.ct-*) and /your-human-staff-fully-informed r2
   (.hs-*) — two near-identical copies of the same system, written one-off on
   2026-08-08. Promoted verbatim on Niko's ruling 2026-08-09 (consume-don't-fork,
   §6): one copy for the whole site, both donors re-pointed at it in the same
   round, third consumer /definitions r4 (the Engine column-1 sweep tracer).

   What this is: the shell a drawn figure sits in, the four motion channels that
   bring it in, and the type scale used INSIDE the drawing. Behaviour lives in
   src/_fig-engine.html (the shared reveal engine) — include it once per page.

   Scale: the DEFAULT is the generous scale (the /your-human-staff values), which
   is the corrected one — Niko 2026-08-08: "illustrations are too small, the text
   is hard to read." `.fig.compact` restores the tighter /connect-your-tools scale
   for drawings authored against it. `.sm` does the same for the caption + exit
   link, which are siblings of .fig, not children.

   Supersedes nothing: .flowcard (2026-07-29) stays for pages not yet swept. The
   visible difference is the shadow — .fig lifts off the cream, .flowcard sits flat
   on it. A page consumes one or the other, never both.                          */

/* ---- the shell -------------------------------------------------------------- */
.fig{position:relative;background:#fff;border:1px solid var(--stone2);border-radius:22px;
     padding:34px 36px;box-shadow:0 30px 66px -50px rgba(28,26,24,.55)}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig svg.fg-narrow{display:none}
.fg-note{margin-top:18px;font-size:15.5px;color:var(--stone6);max-width:74ch}
.fg-note.sm{font-size:14.5px}
.fg-go{display:inline-block;margin-top:14px;font-weight:600;font-size:15.5px;color:var(--violet700)}
.fg-go.sm{margin-top:16px;font-size:15px}
.fg-go:hover{text-decoration:underline;text-underline-offset:3px}
.fg-ill{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
        text-transform:uppercase;color:var(--stone4)}

/* ---- motion channels — JS-OFF SAFE BY GATING (MOTION-01 §5.4): the hidden
   states exist only once the engine has set html.js, so with JS off every
   surface ships at rest, complete. ------------------------------------------- */
.js .fg-el{opacity:0;transform:translateY(9px)}
.js .fg-el.fg-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .fg-dl{opacity:0}
.js .fg-dl.fg-in{opacity:1;transition:opacity .55s ease}
.js .fg-draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.js .fg-draw.fg-in{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.35,0,.2,1)}
/* the wipe family — a mass in motion, never an element appearing (STYLE-01 §8:
   a drawn series must not sit visible at rest). Four speeds, one direction each. */
.js .fg-wipe{clip-path:inset(-10px 100% -10px -10px)}
.js .fg-wipe.fg-in{clip-path:inset(-10px -10px -10px -10px);transition:clip-path 1.3s cubic-bezier(.35,0,.2,1)}
.js .fg-back{clip-path:inset(-10px -10px -10px 100%)}
.js .fg-back.fg-in{clip-path:inset(-10px -10px -10px -10px);transition:clip-path 1.6s cubic-bezier(.35,0,.2,1)}
.js .fg-slow{clip-path:inset(-12px 100% -12px -12px)}
.js .fg-slow.fg-in{clip-path:inset(-12px);transition:clip-path 1.9s cubic-bezier(.4,0,.25,1)}
.js .fg-snap{clip-path:inset(-12px 100% -12px -12px)}
.js .fg-snap.fg-in{clip-path:inset(-12px);transition:clip-path .4s cubic-bezier(.2,0,.2,1)}
html.rm.js .fg-el,html.rm.js .fg-dl,html.rm.js .fg-el.fg-in,html.rm.js .fg-dl.fg-in{opacity:1;transform:none;transition:none}
html.rm.js .fg-draw,html.rm.js .fg-draw.fg-in{stroke-dashoffset:0}
/* reduced motion = the FINISHED state instantly, never an unclipped one: the
   wipe channels resolve to their final inset, not to clip-path:none, so a stroke
   that overflows the box is masked identically for every reader. */
html.rm.js .fg-wipe,html.rm.js .fg-back,
html.rm.js .fg-wipe.fg-in,html.rm.js .fg-back.fg-in{clip-path:inset(-10px -10px -10px -10px);transition:none}
html.rm.js .fg-slow,html.rm.js .fg-snap,
html.rm.js .fg-slow.fg-in,html.rm.js .fg-snap.fg-in{clip-path:inset(-12px);transition:none}

/* ---- in-drawing type, default (generous) scale ----------------------------- */
.fg-m{font-family:var(--mono);font-size:13px;letter-spacing:.07em;text-transform:uppercase;fill:var(--stone4)}
.fg-s{font-family:var(--mono);font-size:12px;letter-spacing:.05em;fill:var(--stone4)}
.fg-t{font-size:18px;font-weight:700;fill:var(--stone7)}
.fg-b{font-family:var(--disp);font-size:46px;font-weight:700;fill:var(--stone7)}
.fg-bm{font-family:var(--disp);font-size:22px;font-weight:700}
.fg-w{font-size:15px;font-weight:700;fill:#fff;letter-spacing:.02em}
.fg-wm{font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;fill:#fff}
/* the narrow-viewport drawing carries its own scale, in user units sized so the
   rendered result lands at 11-13px rather than being shrunk to five. */
.fg-m2{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.fg-s2{font-family:var(--mono);font-size:11px;letter-spacing:.03em;fill:var(--stone4)}
.fg-t2{font-size:14px;font-weight:700;fill:var(--stone7)}
.fg-b2{font-family:var(--disp);font-size:38px;font-weight:700}
.fg-wm2{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:#fff}

/* ---- compact scale — for drawings laid out against the tighter donor values -- */
.fig.compact .fg-m{font-size:11px}
.fig.compact .fg-t{font-size:15.5px}
.fig.compact .fg-b{font-size:44px}
.fig.compact .fg-w{font-size:14px;letter-spacing:normal}

@media(max-width:720px){
  .fig{padding:22px 18px;border-radius:18px}
  .fig svg.fg-wide{display:none}
  .fig svg.fg-narrow{display:block}
  .fg-m,.fg-s{font-size:15px}.fg-t{font-size:21px}.fg-w{font-size:18px}.fg-wm{font-size:15px}
  .fig.compact .fg-m{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .js .fg-el,.js .fg-dl,.js .fg-el.fg-in,.js .fg-dl.fg-in{opacity:1;transform:none;transition:none}
  .js .fg-draw,.js .fg-draw.fg-in{stroke-dashoffset:0;transition:none}
  .js .fg-wipe,.js .fg-back,
  .js .fg-wipe.fg-in,.js .fg-back.fg-in{clip-path:inset(-10px -10px -10px -10px);transition:none}
  .js .fg-slow,.js .fg-snap,
  .js .fg-slow.fg-in,.js .fg-snap.fg-in{clip-path:inset(-12px);transition:none}
}


/* ▲ 2026-08-09 dated amendment (2) — THE INTERACTIVE FIGURE, `.fig.ix`
   Niko's ruling 2026-08-09: option C — the stateful surfaces get a DECLARED
   variant in the shared system rather than a per-page implementation, built
   static-first (option A's technique) so the round's hard gate still passes:
   JS off, every figure ships a finished drawing — never a fallback table.

   Scoped strictly under .fig / .fg-* . Nothing here matches a page that does
   not opt in, which is what keeps the sealed pages (/your-day and
   /your-human-staff-fully-informed) provably untouched by this amendment.

   Behaviour: src/_fig-engine.html, script 2. Contract lives there.            */

/* ---- controls: hidden until the engine arms them, so JS off never shows a
   dead button. The figure's .fg-note must name the default cut, so a JS-off
   reader knows which state they are looking at. -------------------------------*/
.fg-ctl{display:none}
.js .fg-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.fg-chip{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:9px 15px;
  border-radius:999px;border:1px solid var(--stone2);background:#fff;color:var(--stone6);
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.fg-chip:hover{border-color:var(--violet300);color:var(--violet700)}
.fg-chip[aria-checked="true"]{background:var(--violet700);border-color:var(--violet700);color:#fff}
.fg-chip:focus-visible{outline:2px solid var(--violet700);outline-offset:2px}
/* the state change is announced, not just drawn */
.fg-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the state morph. Geometry attributes only. The engine never touches a
   .fg-* motion class, so the entry reveal and the state machine cannot fight.
   Where a browser will not interpolate `d`, the shape snaps — acceptable. -----*/
.js .fig.ix [data-fig-el]{transition:d .45s cubic-bezier(.35,0,.2,1),
  x .45s cubic-bezier(.35,0,.2,1),y .45s cubic-bezier(.35,0,.2,1),
  width .45s cubic-bezier(.35,0,.2,1),height .45s cubic-bezier(.35,0,.2,1),
  transform .45s cubic-bezier(.35,0,.2,1),opacity .3s ease,fill .3s ease}
html.rm.js .fig.ix [data-fig-el]{transition:none}

@media(max-width:720px){
  .js .fg-ctl{gap:6px;margin-bottom:18px}
  .fg-chip{font-size:11px;padding:8px 12px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .js .fig.ix [data-fig-el]{transition:none}
}