.indwf{margin-top:40px;}.indwf__bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:4px;}.indwf__seg{appearance:none;cursor:pointer;white-space:nowrap;font-family:var(--fs);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);padding:9px 17px;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-pill);transition:var(--transition-control);}.indwf__seg:hover{color:var(--ink);border-color:var(--rule-strong);}.indwf__seg[aria-selected="true"]{color:#fff;background:var(--teal);border-color:var(--teal);}.indwf__seg:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}.indpanel{padding-top:30px;}.indpanel+.indpanel{border-top:1px solid var(--rule-soft);margin-top:8px;}.indpanel__head{display:grid;grid-template-columns:1fr;gap:4px;}.indpanel__sector{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);}.indpanel__wf{font-family:var(--fr);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.14;color:var(--ink);margin-top:10px;}.indpanel__desc{margin-top:16px;font-size: var(--size-body);line-height:1.62;color:var(--ink-soft);max-width:68ch;}.indpanel__pt{margin-top:28px;font-size:13px;line-height:1.55;color:var(--ink-mute);max-width:68ch;}.indpanel__pt b{color:var(--ink-soft);font-weight:600;}.indpanel .posture{margin-top:30px;}.indpanel__basis{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-top:16px;border-top:1px solid var(--rule-soft);}.indpanel__basis .ib-basis{font-size:13px;line-height:1.55;color:var(--ink-soft);max-width:62ch;}.indpanel__basis .ib-basis b{font-family:var(--fs);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-soft);font-weight:700;display:block;margin-bottom:3px;}.indpanel__basis .ib-srclink{font-size:13px;font-weight:600;white-space:nowrap;}@media (max-width:680px){.indpanel__basis{flex-direction:column;}}.srcref{border:1px solid var(--rule);background:#fff;border-radius:var(--radius-md);padding:clamp(20px,2.4vw,28px);margin-top:18px;}.srcref .sr-type{font-family:var(--fs);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;}.srcref h4{font-family:var(--fr);font-weight:500;font-size:19px;line-height:1.25;margin-top:8px;color:var(--ink);}.srcref .sr-meta{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 24px;}.srcref .sr-meta div{font-size:12.5px;line-height:1.4;color:var(--ink-soft);}.srcref .sr-meta b{display:block;font-family:var(--fs);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color: var(--ink-soft);font-weight:700;margin-bottom:2px;}.srcref .sr-link{margin-top:14px;font-size:13px;font-weight:600;word-break:break-word;}.srcref .sr-status{display:inline-block;white-space:nowrap;margin-left:8px;padding:2px 9px;font-family:var(--fs);font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-pill);vertical-align:2px;}.srcref .sr-status--final{color:var(--teal-deep);background:var(--teal-tint);}.srcref .sr-status--enforceable{color:var(--teal-deep);background:var(--teal-tint);}.srcsec__note{margin-top:22px;display:grid;gap:16px;grid-template-columns:1fr 1fr;}.srcsec__note .sn{border-left:3px solid var(--rule-strong);padding-left:16px;}.srcsec__note .sn .sn-k{font-family:var(--fs);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-soft);font-weight:700;}.srcsec__note .sn p{margin-top:6px;font-size:13.5px;line-height:1.58;color:var(--ink-soft);}.srcsec__acpoint{margin-top:20px;padding:16px 20px;background:var(--teal-tint);border-radius:var(--radius-md);}.srcsec__acpoint .sn-k{font-family:var(--fs);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;}.srcsec__acpoint p{margin-top:6px;font-size: var(--size-body-dense);line-height:1.55;color:var(--ink);}.srcsec__bounded{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-mute);font-style:italic;max-width:78ch;}@media (max-width:680px){.srcsec__note{grid-template-columns:1fr;}}html:not(.js) .indwf__bar{display:none;}html.js .indpanel{display:none;}html.js .indpanel.indpanel--active{display:block;}.indwf__exc{margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink-soft);max-width:70ch;}.indwf__exc b{color:var(--ink-soft);font-weight:600;}.srcsec__why,.srcsec__flow{margin-top:12px;font-size: var(--size-body-dense);line-height:1.6;color:var(--ink-soft);max-width:74ch;}.srcsec__why b,.srcsec__flow b{font-family:var(--fs);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-soft);font-weight:700;display:block;margin-bottom:3px;}{font-size:clamp(48px,6vw,72px);line-height:.99;}{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--fr);font-weight:500;font-size:clamp(19px,2vw,24px);line-height:1.3;color:var(--ink);text-align:center;}{padding:10px 0 6px;}@media (max-width:1080px){{margin-top:0;}}{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;}@media (max-width:560px){{padding-top:28px;padding-bottom:32px;}}.markcap{margin:10px 0 0;font-size:var(--size-body-sm);color:var(--ink-mute);letter-spacing:var(--tracking-wide);}@media (max-width:620px){{grid-template-columns:minmax(0,1fr);}.home-hero-copy,.home-mark{min-width:0;}{font-size: var(--size-body);margin-top:12px;}.home-mark{display:flex;flex-direction:column;}.home-mark .markstage svg.gate{max-height:180px;}}.band--warm .partner{grid-template-columns:minmax(0,1fr);}.band--warm .partner__copy{max-width:68ch;}.traildef{margin-top:26px;padding:18px 22px;border-left:1.6px solid var(--teal);background:var(--surface-accent);border-radius:0 10px 10px 0;max-width:84ch;}.traildef .td-k{display:block;font-size:var(--size-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--teal);margin-bottom:7px;}.traildef p{margin:0;font-size:var(--size-body-sm);line-height:var(--leading-normal);color:var(--ink);}.page--hybrid .home-hero-grid{align-items:center;}.page--hybrid .home-hero h1{font-size:clamp(34px,3.5vw,50px);line-height:1.1;max-width:22ch;}.page--hybrid .home-hero .support{max-width:58ch;}.page--hybrid .home-actions{align-items:center;gap:22px;}.triad3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid var(--rule);padding-top:26px;}.triad3 .t3{padding:0 28px 0 0;border-right:1px solid var(--rule-soft);}.triad3 .t3:last-child{border-right:0;padding-right:0;}.triad3 .t3+.t3{padding-left:28px;}.t3-k{display:block;font-family:var(--fs);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color: var(--ink-soft);margin-bottom:9px;}.t3--auth .t3-k{color:var(--teal);}.triad3 p{margin:0;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.6;font-weight:300;color:var(--ink-soft);}.t3--auth p{color:var(--ink);font-weight:400;}.dg-note{font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.68;font-weight:300;color:var(--ink-soft);max-width:76ch;margin:0 0 14px;}.evidence--line{padding-top:54px;padding-bottom:54px;}.evline{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-top:1px solid var(--rule);padding-top:26px;}.evline .ev-k{display:block;font-family:var(--fr);font-size: var(--size-h3);color:var(--ink);margin-bottom:8px;}.evline p{margin:0;max-width:68ch;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.65;font-weight:300;color:var(--ink-soft);}.evline__links{display:flex;flex-direction:column;gap:8px;white-space:nowrap;}.page--hybrid .closing-line{max-width:74ch;}.partner__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}@media (max-width:980px){.evline{flex-direction:column;align-items:flex-start;gap:20px;}}@media (max-width:760px){.triad3{grid-template-columns:1fr;gap:0;}.triad3 .t3,.triad3 .t3+.t3{padding:16px 0;border-right:0;border-bottom:1px solid var(--rule-soft);}.triad3 .t3:last-child{border-bottom:0;padding-bottom:0;}.evline .ev-k{font-size:19px;}}.sgread .textlink{white-space:nowrap;display:inline;margin-top:0;}.reccard{border:1px solid var(--rule);border-radius:14px;background:var(--limestone);padding:22px 26px;box-shadow:var(--shadow-sm,0 2px 8px rgba(43,42,39,0.06));}.rec-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:14px;}.rec-k{font-family:var(--fs);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color: var(--ink-soft);}.rec-status{font-family:var(--fs);font-size:11.5px;font-weight:500;color:var(--teal);}.rec-row{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--rule-soft);font-family:var(--fs);font-size:12.5px;line-height:1.55;}.rec-row span:first-child{font-weight:300;color:var(--ink-mute);}.rec-row span:last-child{font-weight:400;color:var(--ink);}.footer-breadth a:hover{color:#9fb6c4;}@media (max-width:760px){.rec-row{grid-template-columns:1fr;gap:2px;}}.page--clean .home-hero h1{font-size:clamp(34px,3.4vw,48px);line-height:1.12;max-width:21ch;}.page--clean .home-hero .support{max-width:56ch;}.page--clean .home-hero-grid{align-items:center;}.page--clean .sgread{font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.68;font-weight:300;color:var(--ink-soft);}.page--clean .sgread b{color:var(--ink);font-weight:500;}.page--clean .indwf__qual a{font-weight:500;}@media (max-width:1000px){}.page--clarity .markcap{margin-top:10px;font-family:var(--fs);font-size:12.5px;font-weight:400;letter-spacing:0.04em;color:var(--ink-soft);text-transform:none;}.bindline{margin:34px 0 0;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.65;font-weight:300;color:var(--ink-soft);max-width:62ch;border-top:1px solid var(--rule);padding-top:20px;}.bindline b{font-weight:500;color:var(--ink);}.wq__r:last-child{border-bottom:0;}.page--clarity .indwf__qual{margin-top:14px;}@media (max-width:1000px){}@media (max-width:700px){}.wex-unmapped .k{display:block;font-family:var(--fs);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}.featcap{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:38px 0 0;align-items:stretch;}.fcp{display:flex;flex-direction:column;border:1px solid var(--rule-soft);border-top:1.6px solid var(--teal);border-radius:12px;background:var(--limestone);padding:30px 32px 28px;box-shadow:var(--shadow-sm);transition:transform 200ms cubic-bezier(0.4,0,0.2,1),box-shadow 200ms cubic-bezier(0.4,0,0.2,1);}.fcp:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}.fcp__k{display:block;font-family:var(--fs);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;}.fcp h3{margin:0 0 12px;font-family:var(--fr);font-size: var(--size-h3);font-weight:500;line-height:1.2;color:var(--ink);}.fcp__lead{margin:0 0 12px;font-family:var(--fs);font-size:16.5px;line-height:1.5;font-weight:400;color:var(--ink);}.fcp p.fcp__body{margin:0;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.65;font-weight:300;color:var(--ink-soft);}.fcp .textlink{margin-top:auto;padding-top:20px;}@media (max-width:860px){.featcap{grid-template-columns:1fr;gap:18px;}.fcp{padding:26px 24px 24px;}}.acfig{max-width:1000px;margin:42px auto 0;}.acfig svg{display:block;width:100%;height:auto;}.acfig__hint{display:none;}.acfig-m{display:none;flex-direction:column;align-items:center;gap:8px;margin-top:26px;}.acfig-m__k{font-family:var(--fs);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color: var(--ink-soft);margin-bottom:4px;}@media (max-width:780px){.acfig__scroll,.acfig__hint{display:none;}.acfig-m{display:flex;}.acfig__scroll svg{min-width:720px;}}@supports (grid-template-rows:subgrid){}@media (max-width:1080px){.ground,.ground__close{max-width:680px;}@supports (grid-template-rows:subgrid){}}.figsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1000px;margin:30px auto 0;padding-top:26px;border-top:1px solid var(--rule);}.figstep h3{margin:0 0 8px;font-family:var(--fr);font-size:19px;font-weight:500;line-height:1.25;color:var(--ink);}.figstep p{margin:0;font-family:var(--fs);font-size:13.5px;line-height:1.65;font-weight:300;color:var(--ink-soft);}.det2__reads .sgread .textlink{display:inline;margin:0;font-size:13.5px;}@media (max-width:900px){}.spine{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:26px 0 10px;}.spine .sp{flex:1 1 120px;min-width:118px;border:1px solid var(--rule,#d8d3c8);border-radius:10px;padding:12px 14px;background:var(--limestone,#fcfbf8);}.spine .sp b{display:block;font-family:'Libre Franklin',sans-serif;font-size:13px;font-weight:600;color:var(--ink,#2b2a27);margin-bottom:4px;}.spine .sp span{font-size:11.5px;line-height:1.5;color:var(--ink-soft,#55534d);}.spine .sp-arrow{align-self:center;color:var(--teal,#3d6b6b);font-size: var(--size-body);flex:0 0 auto;}.spine .sp--det{border-color:var(--teal,#3d6b6b);}.spine-note{font-size:13.5px;color:var(--ink-soft,#55534d);margin-top:16px;max-width:68ch;}.pmap{width:100%;border-collapse:collapse;margin-top:24px;font-size:13.5px;}.pmap th{font-family:'Libre Franklin',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute,#9a958a);text-align:left;font-weight:600;padding:8px 14px 8px 0;border-bottom:1px solid var(--rule,#d8d3c8);}.pmap td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-soft,#e6e2d8);vertical-align:top;line-height:1.55;color:var(--ink-soft,#55534d);}.pmap td:first-child{font-family:'Libre Franklin',sans-serif;font-weight:600;color:var(--ink,#2b2a27);white-space:nowrap;}.arcpair{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}.arcpair a{font-size:13px;border:1px solid var(--rule,#d8d3c8);border-radius:999px;padding:7px 16px;text-decoration:none;color:var(--ink-soft,#55534d);transition:border-color .18s,color .18s;}.arcpair a:hover{border-color:var(--teal,#3d6b6b);color:var(--teal,#3d6b6b);}.rec-caption{font-size:13px;color:var(--ink-mute,#9a958a);margin-top:12px;max-width:64ch;}@media (max-width:760px){.spine{flex-direction:column;}.spine .sp-arrow{transform:rotate(90deg);align-self:flex-start;margin-left:18px;}.pmap{font-size:12.5px;}.pmap td:first-child{white-space:normal;}}@media (max-width:1020px){.navlinks{display:none;}.menu{display:block;}}.verdict{background:var(--panel);border:1px solid var(--rule);padding:7px 9px 7px 15px;gap:10px;box-shadow:var(--shadow-xs);}.verdict .vlabel{font-family:var(--fs);font-size:13.5px;letter-spacing:0.01em;color:var(--ink-soft);}.verdict .vpill{font-size:12px;padding:3px 11px;}.home-mark{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none;}@media (max-width:620px){.home-outcome{order:0;margin-top:16px;}.home-mark .markstage{order:0;margin-top:6px;}.markcap{order:0;}}.acfig__cap{margin:20px auto 0;max-width:74ch;text-align:center;font-family:var(--fs);font-size:13px;line-height:1.65;font-weight:300;color:var(--ink-soft);}.acfig__cap b{font-weight:500;color:var(--ink);}.det2__reads .dg-note{margin-top:auto;margin:0;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--fs);font-size:13px;line-height:1.65;font-weight:300;color:var(--ink-soft);}.indwf__qual{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;line-height:1.62;color:var(--ink-soft);max-width:82ch;}.ground__close{max-width:1160px;margin:22px auto 0;text-align:center;font-family:var(--fs);font-size:13.5px;line-height:1.6;font-weight:300;color:var(--ink-soft);}.waycue a:hover,.waycue a:focus-visible{color:var(--teal);border-bottom-color:currentColor;}section[id]{scroll-margin-top:84px;}.sec,.home-hero h1,.page-hero h1{text-wrap:balance;}.arc-pane h3{font-size:clamp(22px,2.3vw,28px);line-height:1.22;max-width:26ch;text-wrap:balance;}.pagenav{border-bottom:1px solid var(--rule-soft);background:color-mix(in srgb,var(--ink) 2%,var(--limestone));}.pagenav .wrap{display:flex;flex-wrap:wrap;gap:2px 24px;padding-top:11px;padding-bottom:11px;}.pagenav a{font-family:var(--fs);font-size:12.5px;letter-spacing:0.02em;color:var(--ink-soft);text-decoration:none;padding:5px 0;}.pagenav a:hover,.pagenav a:focus-visible{color:var(--teal);}@media (max-width:780px){.band{padding-top:52px;padding-bottom:52px;}.figsteps{grid-template-columns:1fr;gap:22px;margin-top:26px;}}.gcase__dt{margin:0;}.gcase__dt>summary{display:none;}@media (max-width:780px){.gcase__dt>summary{display:flex;align-items:baseline;gap:7px;list-style:none;cursor:pointer;font-family:var(--fs);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);padding:1px 0 9px;}.gcase__dt>summary::-webkit-details-marker{display:none;}.gcase__dt>summary::after{content:"+";font-size:13px;}.gcase__dt[open]>summary::after{content:"\2212";}}.footer-links--grouped{display:grid;grid-template-columns:repeat(4,auto);gap:6px 46px;justify-content:end;}.footer-links--grouped .fcol{display:flex;flex-direction:column;gap:9px;}.footer-links--grouped .fcol__k{font-family:var(--fs);font-size:10.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#c8c4ba;margin-bottom:3px;}@media (max-width:900px){.footer-links--grouped{grid-template-columns:repeat(2,auto);justify-content:start;gap:24px 44px;}}.footer-brand .pipe{color:#6f6b60;}.footer-brand .arc{color:#9fb6c4;}.page--home #bridge{padding:52px 0 60px;background:color-mix(in srgb,#2b2a27 2.5%,#fcfbf8);border-top:0;}.page--home #binds{background:color-mix(in srgb,var(--security) 3.5%,#fcfbf8);}.page--home #readings{background:color-mix(in srgb,#3d6b6b 3%,#fcfbf8);}.bridge-line{margin:0 auto;max-width:56ch;text-align:center;font-family:var(--fr);font-size:clamp(21px,2.6vw,27px);line-height:1.45;color:var(--ink);}#question .closing-line{margin-top:34px;}.menu-panel a.sub{padding-left:22px;}.menu-panel a.menu-cta{color:var(--teal);font-weight:600;}.page--industries .page-hero{padding-bottom:26px;}.page--industries #workflow{padding-top:44px;}.page--industries #workflow .seclede{margin-top:16px;}.lede--principle{margin-top:34px;font-family:var(--fr);font-style:italic;font-size: var(--size-h3);color:var(--limestone);max-width:52ch;}.prose--follow{margin-top:22px;color:var(--ink-soft);}

/* Canonical hero mark: actor lanes and the live readout render INSIDE the mark.
   Ink type with a limestone knockout halo, so flow lines pass behind the text. */
.gate .lanelabels text, .gate .anim text {
  font-family: var(--fs); font-weight: 400; stroke: var(--limestone); stroke-width: 4;
  stroke-linejoin: round; paint-order: stroke;
}
.gate .lanelabels text { font-size: 13px; letter-spacing: 0.06em; fill: var(--ink-soft); }
.gate .anim .aact { font-size: 13px; letter-spacing: 0.01em; fill: var(--ink-soft); }
.gate .anim .averdict { font-size: var(--size-body); font-weight: 500; letter-spacing: 0.02em; }
.home-outcome .d-permit { color: var(--decision-permit); }
.home-outcome .d-defer { color: var(--decision-defer-text); }
.home-outcome .d-block { color: var(--decision-block); }

#bridge .eyebrow { margin-bottom: 18px; }
#bridge .bridge-sub {
  font-family: var(--fs); font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  margin: 12px 0 0; max-width: 60ch;
}

/* Mobile 2c type feel, applied site-wide: prose is Libre Franklin 400 at 15px+
   with open leading, instead of 300 at 13–14.5px. Labels, eyebrows, and the
   reference tables keep their own scale. */
.bindline,
.gcase p,
.fcp p.fcp__body,
.sgread,
.det2__reads .sgread,
.dg-note,
.det2__reads .dg-note,
.acfig__cap,
.ground__close,
.triad3 p,
.evline p,
.wq dd,
.wex-next,
.wex-unmapped p,
.indwf__qual,
.indwf__exc,
.indpanel__pt,
.spine-note,
.applied {
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.6;
}
.acfig__cap, .ground__close { line-height: 1.65; }

/* Proof banner: the two labels were adjacent inline spans with no separator, so
   they ran together above the fold on every page. */
.proofbar .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Mobile 2c proportions: the headline scale was set for a proof document (h1 up
   to 72px, section heads to 46px) against 15px prose. Mobile holds ~37/26 against
   16px, so the steps come down and the leading opens slightly. */
h2.sec, .sec { font-size: clamp(28px, 2.9vw, 38px); line-height: 1.16; max-width: 30ch; }
h3 { line-height: 1.24; }
.acfig h3, .fcp h3 { font-size: clamp(21px, 2vw, 25px); }

/* Two families only. Serif carries statements, sans carries body and labels, and
   the Courier fallback (--fm) is retired from the two selectors that still used it,
   so no surface shows a third face. */
.closing-line, .secclose {
  font-family: var(--fr); font-weight: 500; font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.4; color: var(--ink); text-wrap: pretty;
}
.closing-line .lit, .secclose .lit { color: var(--teal); }
.rec-k, .srcref .sr-status { font-family: var(--fs); }

/* The evaluation figure was capped at 1000px inside an 1184px measure; it is the
   section's payload, so it runs the full width. */
.acfig { max-width: none; }

/* 02b · one panel: the figure, its caption, and the three readings sit inside a
   single bordered surface, so the diagram and its interpretation read as one
   object. Hairline dividers, no card language. */
#binds .bindline {
  border-top: 0; padding-top: 0; margin: 26px 0 0;
  font-size: 16px; font-weight: 400; line-height: 1.6; max-width: 68ch;
}
#binds .bindline b { font-weight: 500; color: var(--ink); }
.acpanel {
  margin-top: 34px; padding: 36px 36px 0;
  background: color-mix(in srgb, var(--limestone) 82%, #fff);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-xs);
}
.acpanel .acfig { margin-top: 0; }
.acpanel .acfig__cap { margin: 20px 0 0; text-align: left; max-width: 82ch; }
#binds .figsteps {
  max-width: none; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 32px 0 0; padding-top: 0; border-top: 1px solid var(--rule);
}
#binds .figstep {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 26px 24px 28px;
}
#binds .figstep + .figstep { border-left: 1px solid var(--rule); }
#binds .figstep:first-child { padding-left: 0; }
#binds .figstep:last-child { padding-right: 0; }
#binds .figstep__n {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--teal); margin-bottom: 10px;
}
#binds .figstep h3 { font-size: 21px; margin-bottom: 7px; }
#binds .figstep p { font-size: var(--size-body); font-weight: 400; line-height: 1.6; }
@media (max-width: 860px) {
  .acpanel { padding: 24px 20px 0; border-radius: 12px; }
  #binds .figsteps { grid-template-columns: 1fr; }
  #binds .figstep { padding: 22px 0; }
  #binds .figstep + .figstep { border-left: 0; border-top: 1px solid var(--rule); }
}

/* 01a What changed — the mobile 2c treatment: serif statement pair, closing line
   in teal. (These were removed by an earlier cleanup; restored.) */
#what-changed .wc-line {
  font-family: var(--fr); font-weight: 500; font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.34; color: var(--ink); margin: 20px 0 0; text-wrap: pretty;
}
#what-changed .wc-close { color: var(--teal); }

/* 03 · one determination, two readings (option 2b): three even columns for the
   proposed result, one full-width determination row, then the two readings side
   by side. One label style throughout, hairline dividers, one closing line. */
.det2b .d2c:first-child { padding-left: 0; }
.det2b .d2c:last-child { padding-right: 0; }
#readings .closing-line { margin-top: 34px; }
@media (max-width: 900px) {
}

/* Decision pill: .det/.det--* was used in markup across the tree but never
   defined in the loaded sheets. Grounded in the decision tokens. */
.det {
  display: inline-flex; align-items: center; padding: 4px 16px;
  border: 1px solid; border-radius: var(--radius-pill);
  font-family: var(--fs); font-size: 13px; font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.det--permit { color: var(--decision-permit); border-color: var(--decision-permit); }
.det--defer  { color: var(--decision-defer-text);  border-color: var(--decision-defer); }
.det--block  { color: var(--decision-block);  border-color: var(--decision-block); }

/* 01b · documented examples (option 4a): the opener leads, the shared question is
   stated once, then three evidence columns each closing on their own authority
   question. Question blocks share a baseline so the hairlines align. */
#bridge .bridge-q {
  margin: 8px 0 0; font-family: var(--fr); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.36; color: var(--teal); max-width: 44ch;
}
.ground4 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 34px; border-top: 1px solid var(--rule);
}
.ground4 .g4 { display: flex; flex-direction: column; padding: 26px 30px; }
.ground4 .g4:first-child { padding-left: 0; }
.ground4 .g4:last-child { padding-right: 0; }
.ground4 .g4 + .g4 { border-left: 1px solid var(--rule); }
.ground4 .g4__k {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
}
.ground4 .g4__nm {
  margin: 0 0 10px; font-family: var(--fr); font-weight: 500; font-size: 20px;
  line-height: 1.3; color: var(--ink);
}
.ground4 .g4__nm span { font-family: var(--fs); font-size: 13px; font-weight: 400; color: var(--ink-mute); }
.ground4 .g4__acct {
  margin: 0 0 22px; font-family: var(--fs); font-size: var(--size-body); font-weight: 400;
  line-height: 1.6; color: var(--ink-soft);
}
.ground4 .g4__q {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--fr); font-weight: 500; font-size: 19px; line-height: 1.34; color: var(--ink);
}
#bridge .ground__close,
#the-pattern .ground__close,
#applications .ground__close {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--rule);
  text-align: left; max-width: 96ch;
}
@media (max-width: 900px) {
  .ground4 { grid-template-columns: 1fr; }
  .ground4 .g4 { padding: 22px 0; }
  .ground4 .g4 + .g4 { border-left: 0; border-top: 1px solid var(--rule); }
}

/* 03 closing statement: one line, with a hairline separating it from the two
   readings above. */
#readings .closing-line {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule);
  max-width: none; font-size: clamp(17px, 1.7vw, 23px);
}
@media (min-width: 900px) {
  #readings .closing-line { white-space: nowrap; }
}

/* The two readings are the section's claim, so they read as a pair of surfaces
   with the Arc colours marking which reading is which: security red,
   governance teal. Hairline top rules, no card fills. */
.det2b__reads .sgread::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px;
  background: var(--steel, var(--security));
}
.det2b__reads .sgread + .sgread::before { left: 34px; background: var(--governance, #3d6b6b); }
.det2b__reads .sgread .textlink { display: inline-block; margin-top: 4px; font-size: var(--size-body); }
@media (max-width: 900px) {
  .det2b__reads .sgread + .sgread::before { left: 0; }
}

/* 02 · the missing architectural question (option 5b): the page's single ink band.
   Faint limestone panels over ink, and the Authority panel carries the teal edge. */
#question.band--ink { background: var(--ink); border-bottom: none; }
#question .eyebrow { color: #8fb0b0; }
#question .eyebrow::before { background: #8fb0b0; }
#question h2.sec { color: var(--limestone); max-width: 52ch; font-size: clamp(25px, 2.3vw, 31px); }
#question .triad3 {
  grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 40px; padding-top: 0; border-top: 0;
}
#question .triad3 .t3,
#question .triad3 .t3 + .t3 {
  padding: 26px 24px 28px; border: 1px solid rgba(252, 251, 248, .16);
  border-radius: var(--radius-md); background: rgba(252, 251, 248, .05);
}
#question .triad3 .t3:last-child { padding-right: 24px; }
#question .triad3 .t3-k { color: var(--ink-mute); }
#question .triad3 p { font-size: 16px; font-weight: 400; color: rgba(252, 251, 248, .78); }
#question .triad3 .t3--auth {
  border: 1px solid rgba(61, 107, 107, .75); border-top: 2px solid #6f9c9c;
  background: rgba(61, 107, 107, .18);
}
#question .triad3 .t3--auth .t3-k { color: #8fb0b0; }
#question .triad3 .t3--auth p { color: var(--limestone); }
#question .closing-line { color: var(--limestone); }
#question .closing-line .lit { color: #8fb0b0; }
#question .waycue a { color: #8fb0b0; }
#question .waycue a:hover, #question .waycue a:focus-visible { color: var(--limestone); }
@media (max-width: 760px) {
  #question .triad3 { grid-template-columns: 1fr; gap: 14px; }
  #question .triad3 .t3, #question .triad3 .t3 + .t3 { padding: 22px 20px 24px; border-bottom: 1px solid rgba(252, 251, 248, .16); }
}

#partner .partner__actions { margin-top: 34px; }

/* Footer: the four link columns were auto-width and pushed to the right edge,
   leaving slack in the middle. Equal columns fill the cell instead. */
.footer-links--grouped {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch; gap: 6px 32px; width: 100%;
}
@media (min-width: 901px) {
  .footer-grid { grid-template-columns: minmax(240px, 0.8fr) minmax(520px, 1.35fr); gap: 32px 72px; }
}

/* "One authority model across" was a trailing sentence here and a footer line.
   It is the scope claim, so it gets its own labelled row of five surfaces. */
.surfaces { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--rule); }
.surfaces__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.surfaces__grid a {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 22px;
  border: 1px solid var(--rule-soft); border-top: 1.6px solid var(--teal);
  border-radius: var(--radius-md); background: var(--limestone);
  text-decoration: none; transition: var(--transition-control);
}
.surfaces__grid a:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.surfaces__n { font-family: var(--fr); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--ink); }
.surfaces__q { font-family: var(--fs); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 1040px) { .surfaces__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .surfaces__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The footer nav was landing in the narrow brand column: .footer-grid has four
   children and two columns, so row-major flow put the nav under the brand (240px)
   rather than beside it. Place it explicitly across the full width. */
@media (min-width: 901px) {
  .footer-grid .footer-brand { grid-column: 1; grid-row: 1; }
  .footer-grid .footer-links--grouped { grid-column: 2; grid-row: 1; align-self: start; }
  .footer-grid .footer-note { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .footer-links--grouped { gap: 6px 40px; }
}

/* Hero actions stack: the secondary link sits below the primary button. */
.home-hero .home-actions { flex-direction: column; align-items: flex-start; gap: 16px; }

/* ============================================================
   SITE SWEEP · patterns whose markup ships across the tree but whose rules were
   missing from every loaded stylesheet, so they rendered as undifferentiated
   prose. Built from the same vocabulary as the homepage: hairline rules, one
   teal accent, limestone panels, serif for statements and sans for body.
   ============================================================ */

/* Term and description pairs (.findable > .fd) — 8 pages */
.findable {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin-top: 34px; border-top: 1px solid var(--rule);
}
.findable .fd { padding: 24px 32px 26px 0; border-bottom: 1px solid var(--rule); }
.findable .fd:nth-child(even) { padding: 24px 0 26px 32px; border-left: 1px solid var(--rule); }
/* a lone final item spans the row, so the closing rule does not stop mid-page */
.findable .fd:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.findable .fd h3 {
  margin: 0 0 8px; font-family: var(--fr); font-weight: 500; font-size: 21px;
  line-height: 1.26; color: var(--ink);
}
.findable .fd p {
  margin: 0; font-family: var(--fs); font-size: var(--size-body); font-weight: 400;
  line-height: 1.6; color: var(--ink-soft);
}
@media (max-width: 800px) {
  .findable { grid-template-columns: 1fr; }
  .findable .fd, .findable .fd:nth-child(even) { padding: 20px 0 22px; border-left: 0; }
}
/* Sequence variant: only for a .findable whose items happen in order. A 2x2
   grid gives no reading order, so the step number supplies one. Do not apply
   to grids of parallel options — numbering those asserts a sequence that is
   not there. */
.findable--seq .fd { counter-increment: fdseq; position: relative; padding-top: 26px; }
.findable--seq .fd::before {
  content: "0" counter(fdseq);
  display: block; margin-bottom: 10px;
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.14em;
  color: var(--teal-deep);
}
.findable--seq { counter-reset: fdseq; }

/* Two-column comparisons (.cols2 > .col, .col--auth marks the AC column) */
.cols2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: 34px;
}
.cols2 .col {
  padding: 26px 26px 28px; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md); background: var(--limestone);
}
.cols2 .col--auth { border-top: 1.6px solid var(--teal); background: color-mix(in srgb, var(--teal) 4%, var(--limestone)); }
.col-k {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 16px;
}
.col--auth .col-k { color: var(--teal); }
ul.acts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
ul.acts li {
  position: relative; padding-left: 18px;
  font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft);
}
ul.acts li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border: 1.4px solid var(--teal); border-radius: 50%;
}
@media (max-width: 800px) { .cols2 { grid-template-columns: 1fr; } }

/* Numbered dimension lists (.dims > .dim > .dn) */
.dims {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin-top: 30px; border-top: 1px solid var(--rule);
}
.dims .dim {
  display: flex; gap: 16px; align-items: baseline;
  padding: 18px 30px 20px 0; border-bottom: 1px solid var(--rule);
}
.dims .dim:nth-child(even) { padding: 18px 0 20px 30px; border-left: 1px solid var(--rule); }
.dims .dn {
  flex: none; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--teal);
}
.dims .dim p {
  margin: 0; font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft);
}
.dims .dim p b { font-weight: 500; color: var(--ink); }
@media (max-width: 800px) {
  .dims { grid-template-columns: 1fr; }
  .dims .dim, .dims .dim:nth-child(even) { padding: 16px 0 18px; border-left: 0; }
}

/* Assurance panels (.scopeblock) */
.scopeblock {
  margin-top: 34px; padding: 30px 32px 32px;
  border: 1px solid var(--rule); border-top: 1.6px solid var(--teal);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--limestone) 82%, #fff);
  box-shadow: var(--shadow-xs);
}
.sb-k {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.scopeblock h3 {
  margin: 0 0 18px; font-family: var(--fr); font-weight: 500;
  font-size: clamp(21px, 2vw, 25px); line-height: 1.26; color: var(--ink); max-width: 40ch;
}
.scopeblock ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.scopeblock ul li {
  position: relative; padding-left: 18px;
  font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft);
}
.scopeblock ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border: 1.4px solid var(--teal); border-radius: 50%;
}
.sb-link { display: inline-block; margin-top: 18px; font-family: var(--fs); font-size: var(--size-body); font-weight: 500; }
@media (min-width: 901px) { .scopeblock ul { grid-template-columns: 1fr 1fr; gap: 12px 32px; } }

/* Engagement aside (.partner__aside) */
.partner__aside {
  padding: 26px 26px 28px; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md); background: var(--limestone); box-shadow: var(--shadow-xs);
}
.pa-k {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.partner__aside ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.partner__aside ul li {
  position: relative; padding-left: 18px;
  font-family: var(--fs); font-size: var(--size-body); line-height: 1.55; color: var(--ink-soft);
}
.partner__aside ul li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  border: 1.4px solid var(--teal); border-radius: 50%;
}

/* SWEEP BATCH 2 · the posture selector and determination table, shared by
   connected-vendors and industries. Neither page carries inline CSS, so these
   shipped as bare buttons and stacked text. */

/* Posture selector */
.posture { margin-top: 34px; }
.posture__bar { display: flex; flex-wrap: wrap; gap: 10px; }
.posture__seg {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--fs); font-size: 13.5px; font-weight: var(--weight-semibold);
  letter-spacing: 0.01em; color: var(--ink-soft);
  padding: 10px 20px; background: var(--limestone);
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  transition: var(--transition-control);
}
.posture__seg:hover { color: var(--teal); border-color: var(--teal); }
.posture__seg[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: var(--limestone); }
.posture__body {
  margin-top: 24px; padding: 28px 30px 30px;
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--limestone) 82%, #fff); box-shadow: var(--shadow-xs);
}
.posture__caption { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.pc-name {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
}
.pc-note { font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft); }
.posture__rows { display: flex; flex-direction: column; }
.posture__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.posture__row:last-child { border-bottom: 0; }
.pr-action { font-family: var(--fs); font-size: var(--size-body); line-height: 1.5; color: var(--ink); }
.posture__line {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--fr); font-weight: 500; font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.4; color: var(--ink);
}
.posture__line .lit { color: var(--teal); }

/* Determination table (industries) */
.ptable { margin-top: 24px; border-top: 1px solid var(--rule); }
/* v18.js reveals posture columns cumulatively, so one, two, or three of them
   render at a time. Explicit tracks would stay allocated for the hidden ones
   and leave up to 45% of every row empty, so the posture columns are auto
   tracks: only rendered cells get width. */
.ptable__head, .ptable__row {
  display: grid; grid-template-columns: minmax(0, 1.4fr);
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0; align-items: start;
}
.ptable__head > div {
  padding: 12px 18px 12px 0; font-family: var(--fs); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.ptable__head .pth-col { padding-left: 18px; border-left: 1px solid var(--rule); }
.ptable__row { border-top: 1px solid var(--rule); }
.ptr-action { padding: 18px 18px 20px 0; }
.ptr-cell {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 18px 18px 20px; border-left: 1px solid var(--rule);
}
.ptr-sub { font-family: var(--fs); font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
@media (max-width: 900px) {
  .ptable__head { display: none; }
  .ptable__row { grid-template-columns: 1fr; grid-auto-flow: row; }
  .ptr-action { padding: 18px 0 12px; }
  .ptr-cell { padding: 10px 0; border-left: 0; }
  .ptr-cell::before {
    content: attr(data-label); font-family: var(--fs); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  }
}

/* Vendor authority chain, and the statement rule above the dimension list */
.vchain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.vc-node {
  font-family: var(--fs); font-size: 13.5px; color: var(--ink);
  padding: 7px 15px; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--limestone);
}
.vc-arrow { font-family: var(--fs); font-size: var(--size-body-dense); color: var(--ink-mute); }
.triad__rule {
  margin: 26px 0 0; font-family: var(--fr); font-weight: 500;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.36; color: var(--ink); max-width: 44ch;
}
.triad__rule .lit { color: var(--teal); }

/* SWEEP BATCH 3 · the last unstyled components. */

/* Case illustration with a documented fact beside a bounded counterfactual */
.evcases { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.evcase {
  padding: 28px 30px 26px; border: 1px solid var(--rule);
  border-radius: var(--radius-md); background: var(--limestone); box-shadow: var(--shadow-xs);
}
.ec-name { font-family: var(--fr); font-weight: 500; font-size: var(--size-h3); line-height: 1.2; color: var(--ink); }
.ec-meta {
  margin-top: 5px; font-family: var(--fs); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.ec-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.ec-block { padding: 0 30px 0 0; }
.ec-block--ac { padding: 0 0 0 30px; border-left: 1.6px solid var(--teal); }
.ec-k {
  display: block; font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.ec-block--ac .ec-k { color: var(--teal); }
.ec-block p { margin: 0; font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft); }
.ec-status { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ec-link { display: inline-block; margin-top: 14px; font-family: var(--fs); font-size: var(--size-body); font-weight: 500; }
@media (max-width: 860px) {
  .ec-split { grid-template-columns: 1fr; gap: 22px; }
  .ec-block { padding: 0; }
  .ec-block--ac { padding: 20px 0 0; border-left: 0; border-top: 1.6px solid var(--teal); }
}

/* Determination pill in its live (selected posture) state */
.det.is-det { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }

/* Table row label used as the action column head */
.pth-action { font-family: var(--fs); }

/* Trailing notes that shipped without rules */
.zt-aca-access-note, .ib-extend {
  margin-top: 16px; font-family: var(--fs); font-size: var(--size-body-dense); line-height: 1.6; color: var(--ink-mute);
}

/* Hero mark, live-site treatment: the mark sits in a raised card, the readout is
   a capsule floating at its foot, and the caption pair sits below a hairline. */
.home-mark .markcard {
  padding: 34px 34px 26px; border: 1px solid var(--rule-soft);
  border-radius: 18px; background: var(--panel);
  box-shadow: 0 1px 0 rgba(43, 42, 39, .03), 0 24px 50px -34px rgba(43, 42, 39, .4);
}
.home-mark .markstage { position: relative; }
.home-mark .verdict {
  /* floats over the mark as before; held to the ordered-channel side so it never
     covers the lane labels at lower left */
  position: absolute; left: auto; right: 4%; bottom: 6%; transform: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 9px 7px 15px; border: 1px solid var(--rule);
  border-radius: var(--radius-pill); background: var(--panel);
  box-shadow: var(--shadow-sm); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
  width: max-content; max-width: 100%;
}
.home-mark .markfoot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); text-align: center;
}
.home-mark .markfoot .home-outcome {
  margin: 0; padding: 0; border-top: 0;
  font-family: var(--fs); font-size: 12.5px; font-weight: var(--weight-semibold);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.home-mark .markfoot .markcap {
  margin: 12px 0 0; font-family: var(--fr); font-style: italic; font-weight: 400;
  font-size: 19px; letter-spacing: 0; color: var(--ink); text-transform: none;
}

/* Hero copy: the column has room below, so the support paragraph carries more
   size and air rather than sitting tight under the headline. */
.home-hero .home-hero-copy .support {
  margin: 28px 0 0; font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.62;
  max-width: 46ch; color: var(--ink-soft);
}
.page--clarity .home-hero .home-hero-copy .home-actions,
.home-hero .home-hero-copy .home-actions { margin-top: 40px; }

/* Production walkthrough (software-infrastructure, ac-zero-trust): numbered
   steps in .lsteps. The markup shipped without rules, so it read as run-on prose. */
ol.lsteps { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
ol.lsteps > li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--rule-soft);
}
ol.lsteps > li > .n {
  font-family: var(--fs); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-soft); padding-top: 4px;
}
ol.lsteps .st {
  font-family: var(--fr); font-weight: 500; font-size: 21px; line-height: 1.26;
  color: var(--ink); margin-bottom: 6px;
}
ol.lsteps .sx {
  font-family: var(--fs); font-size: var(--size-body); line-height: 1.6; color: var(--ink-soft); max-width: 72ch;
}
ol.lsteps > li.bnd { background: color-mix(in srgb, var(--teal) 4%, transparent); }
ol.lsteps > li.bnd > .n { color: var(--teal); }
ol.lsteps .bndlab {
  display: block; font-family: var(--fs); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
}
ol.lsteps > li.bnd .st { color: var(--ink); }
.verdictrow {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.verdictrow p,
.lens .verdictrow p {
  margin: 0; font-family: var(--fr); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.4; color: var(--ink);
}
@media (max-width: 700px) {
  ol.lsteps > li { grid-template-columns: 1fr; gap: 6px; }
  ol.lsteps > li > .n { padding-top: 0; }
}

/* Zero Trust / Authority Control diagram: the paths were authored to move
   ("Animated spaghetti…") but shipped with no animation. Restored to the
   original site vocabulary — dashed travel, as in bca-flow / conv-strand-flow. */
@keyframes zt-flow { to { stroke-dashoffset: -28; } }
@keyframes zt-flow-r { to { stroke-dashoffset: 28; } }
.zt-sp { stroke-dasharray: 8 6; animation: zt-flow var(--d, 3s) linear infinite; }
.zt-sp-r { animation-name: zt-flow-r; }
/* Original .zt-pulse rule, on the commitment-boundary arrow it was written for. */
@keyframes zt-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.6; } }
.zt-pulse-arrow { animation: zt-pulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .zt-sp { animation: none; stroke-dasharray: none; }
  .zt-pulse-arrow { animation: none; }
}

/* ── ZT diagram tooltips (ported from the original site) ─────────────── */
.acv-view { position: relative; }
.zt-pillar, [data-zt-gate], .zt-aca-access-note { cursor: help; }
.zt-pillar rect, [data-zt-gate] rect, .zt-aca-access-note rect { pointer-events: all; }
.zt-pillar rect, .zt-aca-access-note rect { transition: opacity .2s ease; }
.zt-pillar:hover rect, .zt-aca-access-note:hover rect, [data-zt-gate]:hover ~ rect { opacity: 1; }
.zt-pillar:hover text, [data-zt-gate]:hover text, .zt-aca-access-note:hover text { fill: var(--teal); }
.zt-pillar-tip {
  position: absolute; z-index: 30; max-width: 260px;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  padding: 10px 13px;
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  pointer-events: none; opacity: 0; transition: opacity .22s ease;
}
.zt-pillar-tip.is-on { opacity: 1; }
.zt-pillar-tip strong {
  display: block; margin-bottom: 3px;
  font-size: 10px; font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 768px) {
  .zt-pillar-tip { left: 8px !important; right: 8px; top: 8px !important; max-width: none !important; }
}

/* ============================================================
   Existing controls (existing-controls.html) — the composition list
   ============================================================ */
@media (max-width: 860px) {
}

/* ============================================================
   Mobile sweep (2026-08-02)
   ============================================================ */

/* components.css raises tap targets at <=780px with a rule that also sets
   display:inline-flex on .navcta, which came after the <=600/<=680 rules that
   hide it. The header CTA was therefore visible on every phone and the row
   overflowed the viewport by ~84px on all 29 pages. */
@media (max-width: 680px) {
  .navcta { display: none; }
}

/* Footer and breadth links sat at 22px. Give every footer link a real target. */
@media (max-width: 780px) {
  .footer-links a, .footer-breadth a, .fcol a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .wordmark { min-height: 44px; }
}

/* .actions was flex nowrap: primary + secondary + email overflowed at 390px
   (finance-procurement, ac-zero-trust). Stack them full width on phones. */
@media (max-width: 780px) {
  /* .contact is a two-column grid with no mobile collapse, so the actions
     column kept a desktop width and pushed past the gutter. */
  .wrap.contact { grid-template-columns: 1fr; gap: 20px; }
  .actions { flex-wrap: wrap; gap: 12px; }
  .actions .btn { width: 100%; justify-content: center; }
  .actions .email { width: 100%; }
}

/* .aom-compare (post-breach) ran 15px past the viewport. */
@media (max-width: 780px) {
  .aom-compare { width: 100%; table-layout: fixed; }
  .aom-compare th, .aom-compare td {
    padding-left: 10px; padding-right: 10px; font-size: 13px;
    overflow-wrap: anywhere;
  }
  .aom-compare th:first-child, .aom-compare td:first-child { padding-left: 0; }
  .aom-compare th:last-child, .aom-compare td:last-child { padding-right: 0; }
}

/* Tap targets below the 44px floor. */
@media (max-width: 780px) {
  .indwf__seg, .lensbtn, .chip {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .ec-link, .arc-pane > a, .sb-link, .pa-k + a,
  .exlinks > a, .storyfoot > a, .ib-srclink, .arcpair a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* Micro labels sat at 9-10.5px, below the 11px eyebrow floor the system sets.
   Raised on phones only; desktop sizing is unchanged. SVG diagram text and
   footnote markers are left alone. */
@media (max-width: 780px) {
  .fcol__k, .sn-k, .casetag, .sr-type, .sr-status, .sc-label, .cn-head,
  .q-label, .dt-index, .oplab, .bndlab, .zt-step-number, .pth-action,
  .pth-col, .src, .ql, .sl, .bar-value, .result, .payment-label, .lh-col,
  .layer, .indwf__seg, .ec-k, .sb-k, .pa-k, .dn, .col-k,
  .illustrative-note, .sr-status, .pth-col {
    font-size: 11px !important;
  }
}

/* Remaining sub-11px runs: uppercase micro-labels nested inside diagram cells
   and inline emphasis inside already-small notes. */
@media (max-width: 780px) {
  .ib-basis b, .srcsec__why b, .srcsec__flow b,
  .det-cell span, .duo-card > div, .aom-function span,
  .scope-id span, .scope-before span, .scope-after span, .ac > span,
  .threshold span, .zt-question span, .zt-cycle-step span,
  .det-cell-lab, .duo-label, .start-label,
  .incident-scope span, .identity-chain span, .identity-steps span,
  .agent-boundary-grid span, .sr-meta b {
    font-size: 11px !important;
  }
}

/* The menu panel is 21 links tall on phones (1077px against an 844px viewport),
   and it is absolutely positioned, so the tail was unreachable. Cap and scroll. */
@media (max-width: 780px) {
  .menu-panel {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* The homepage hero grid never collapsed: clarity.css defines
   .page--clarity .home-hero-grid with two columns AFTER its own
   @media (max-width:1000px) single-column rule, so the base rule won at every
   width. At 390px the grid computed to 0px + 380px and the hero headline broke
   one word per line. */
@media (max-width: 1000px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The what-changed statements carry desktop line breaks; at 390px they leave
   orphan lines. Let the copy wrap naturally on phones. */
@media (max-width: 780px) {
  #what-changed br { display: none; }
}

/* Headlines carry desktop line breaks; at 390px they produce ragged stacks. */
@media (max-width: 780px) {
  h1 br, h2 br, h3 br, .sec br, .lede br, .seclede br { display: none; }
}

/* The stacked determination table draws its condition label from
   content: attr(data-label); that pseudo-element sat at 10.5px. */
@media (max-width: 780px) {
  .ptr-cell::before { font-size: 11px; }
}

/* Wide SVG figures scale to ~208px at 390 and their labels stop being legible.
   Hold them at a readable width and let the figure scroll inside its band. */
@media (max-width: 780px) {
  .acv-view .figure, .figure--wide, .zt-figure {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .acv-view .figure > svg, .figure--wide > svg, .zt-figure > svg {
    min-width: 560px;
  }
  /* a figure that ships a vertical mobile drawing needs neither */
  .acv-view .figure:has(> .dgm-mob), .figure--wide:has(> .dgm-mob), .zt-figure:has(> .dgm-mob) { overflow-x: visible; }
  .acv-view .figure > svg.dgm-mob, .figure--wide > svg.dgm-mob, .zt-figure > svg.dgm-mob, .figure > svg.dgm-mob { min-width: 0; }
}

/* Hero mark on phones: the readout capsule floats over the mark, and at 390 the
   mark is only ~180px tall, so the capsule landed on the Connected vendor and
   AI agent lanes. Below 680 it sits under the mark instead, and the card gives
   its padding back to the drawing. */
@media (max-width: 680px) {
  .home-mark .markcard { padding: 22px 18px 20px; }
  .home-mark .markstage { display: flex; flex-direction: column; align-items: center; }
  .home-mark .markstage > svg { width: 100%; height: auto; }
  .home-mark .verdict {
    position: static; right: auto; bottom: auto;
    margin-top: 16px; max-width: 100%;
  }
  .home-mark .markfoot { margin-top: 18px; padding-top: 16px; }
  .home-mark .markfoot .markcap { font-size: 17.5px; }
  /* Lane labels take the mobile 2c treatment: larger, darker, medium weight,
     no tracking, and a wider knockout so the strands pass cleanly behind. */
  .home-mark .gate .lanelabels text {
    font-size: var(--size-body-dense); font-weight: 500; letter-spacing: 0;
    fill: var(--ink); stroke-width: 5;
  }
  .home-mark .gate .anim .aact { font-size: 13.5px; stroke-width: 5; }
  .home-mark .gate .anim .averdict { font-size: var(--size-body); stroke-width: 5; }
}

/* Footer on phones: the four link columns stayed at repeat(4) below 820, so at 390
   each column was 23px wide and the headings ran into each other. */
@media (max-width: 680px) {
  .footer-links--grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (max-width: 380px) {
  .footer-links--grouped { grid-template-columns: 1fr; gap: 22px; }
}

/* Hero on phones: the actions sit below the mark, so the graphic follows the
   support paragraph and the two calls to action close the section. .home-hero-copy
   goes display:contents so its children order against the mark in one column. */
@media (max-width: 680px) {
  .home-hero .home-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .home-hero .home-hero-copy { display: contents; }
  .home-hero .home-hero-copy > * { order: 1; }
  .home-hero .home-mark { order: 2; margin-top: 34px; }
  .home-hero .home-hero-copy .home-actions { order: 3; margin-top: 30px; }
  /* The phone h1 size (36px, set earlier in this sheet) lost to a later base
     clamp() of equal specificity, so the headline set at 42px and no line could
     hold two words. Re-assert it here, and fill greedily rather than balance. */
  .home-hero h1 { font-size: 36px; line-height: 1.08; }
  /* The hero keeps its authored break on phones: "before it binds." holding one
     line reads better than "binds." orphaned. Other headlines stay suppressed. */
  .home-hero h1 br { display: inline; }
  /* Four-part support sentence runs a line longer than the copy it replaced;
     the section takes the extra height rather than tightening the mark. */
  .home-hero { padding-bottom: 22px; }
  .home-hero .home-hero-copy .support { margin-top: 16px; }
  .home-hero .home-mark { margin-top: 30px; }
}

/* The bridge statement is centered on desktop, where it sits as a wide single
   line. In a 334px column the ragged centering reads as misalignment against the
   eyebrow, body, and question, which all sit on the left rail. */
@media (max-width: 680px) {
  .bridge-line { text-align: left; }
}

/* ============================================================
   Mobile-native diagram variants. Wide desktop drawings are
   replaced below 680px by a vertical version of the same figure.
   ============================================================ */
.dgm-mob { display: none !important; width: 100%; height: auto; }
@media (max-width: 680px) {
  .dgm-desk { display: none !important; }
  .dgm-mob { display: block !important; }
}

/* The UA default figure margin (40px each side) cost every figure 80px of a
   390px viewport, so diagrams drew at ~208px. Reclaim it on phones. */
@media (max-width: 680px) {
  .figure { margin-left: 0; margin-right: 0; padding: 14px; }
}

/* ============================================================
   Sequence numbering (how-it-works): Define / Decide / Preserve
   are the only ordered items; the other anchors are destinations.
   ============================================================ */
.pagenav a .pn-n {
  margin-right: 7px; font-variant-numeric: tabular-nums;
  color: var(--teal); opacity: 0.75;
}
.pagenav a:hover .pn-n, .pagenav a[aria-current] .pn-n { opacity: 1; }
.eyebrow--step { display: inline-flex; align-items: baseline; gap: 10px; }
.eyebrow--step .eb-n {
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  color: var(--teal); opacity: 0.6;
}
@media (max-width: 680px) { .eyebrow--step { gap: 8px; } }

@media (max-width: 680px) { .reccard + .dg-note, .rec-caption + .dg-note { margin-top: 20px; } }

/* Decision words in prose carry the Permit/Defer/Block scheme wherever they appear. */
.d-permit { color: var(--decision-permit); }
.d-defer { color: var(--decision-defer-text); }
.d-block { color: var(--decision-block); }

/* Decision vocabulary: the older ad-hoc classes now point at the same tokens as .d-*. */

/* Decision words carry meaning, so their color must survive any container prose
   rule (e.g. .spine .sp span, which outranks a bare class). */
.d-permit { color: var(--decision-permit) !important; }
.d-defer  { color: var(--decision-defer-text)  !important; }
.d-block  { color: var(--decision-block)  !important; }

/* Key terms are marked inside the sentence rather than previewed as a keyword
   list above it: teal, medium weight, upright. */
.spine-note .term { font-style: normal; font-weight: var(--weight-medium, 500); color: var(--teal, #3d6b6b); }

/* ---- Posture table: make the change legible ------------------------------
   Most rows keep their determination while conditions narrow. Without a
   marker that reads as a dead control, so a changed row states what it moved
   from and a held row is labelled as held. */
.ptable__delta { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; }
.ptable__delta b { color: var(--ink); font-weight: 600; }
/* Redundant on desktop, where the Normal column sits beside the active one. */
.ptr-from { display: none; }
.ptr-cell .ptr-from + .det { position: relative; }
.ptable__row.row-changed { background: color-mix(in srgb, var(--teal) 4%, transparent); }

@media (max-width: 680px) {
  /* One state at a time. The cumulative reveal stacks every revealed column
     into a vertical run of near-identical pills, which is unreadable on a
     phone and looks like all three states are active at once. */
  .ptable__row .ptr-cell:not(.is-active) { display: none; }
  .ptr-from {
    display: inline-block;
    opacity: .42;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .ptable__row .ptr-cell.is-active::before { display: none; }
  .ptable__row { grid-template-columns: 1fr; grid-auto-flow: row; gap: 6px; padding-block: 14px; }
  .ptable__head { display: none; }
  .ptr-cell.is-active { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
  .ptr-sub { flex: 1 1 100%; }
  .ptable__row.row-steady .ptr-cell.is-active .det::after,
  .ptable__row.row-restored .ptr-cell.is-active .det::after {
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .ptable__row.row-steady .ptr-cell.is-active .det::after { content: "unchanged"; }
  .ptable__row.row-restored .ptr-cell.is-active .det::after { content: "restored"; color: var(--teal); }
  .ptable__row.row-changed {
    background: none;
    box-shadow: inset 2px 0 0 var(--teal);
    padding-left: 12px;
  }
  .ptable__delta { font-size: 13px; }
}

/* Mobile "paths and actors": the stacked-box flowchart is replaced by the lane
   drawing. Actor names ride their own lane with a limestone knockout, matching
   the hero mark. Authored at 292 units, the real content width inside the page
   gutter and .acpanel padding, so the viewBox renders 1:1 and the declared font
   sizes are the shipped sizes. */
.acfig-m { align-items: stretch; gap: 0; }
.acfig-m__k { margin-bottom: 14px; }
.acfig-m__svg { display: block; width: 100%; height: auto; }
.acfig-m__lane text {
  fill: var(--ink);
  stroke: var(--limestone);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Two readings: Arc I and Arc II are the one place the taxonomy colours carry
   meaning, but they appeared only as a 56px tick while both eyebrows sat in
   mute grey, so the columns read as one undifferentiated pair. Desktop only —
   the phone stacks these and the divider logic differs. */
@media (min-width: 781px) {
  /* Each reading becomes a panel carrying its arc colour on the top edge.
     The shared container rule and the divider between the columns come off,
     since the two cards now separate themselves. */
  /* Derived from .fcp, the card used further down this page: same limestone
     surface, soft-rule sides, 12px radius, padding and lift. It differs only
     where the difference carries meaning — the top edge is a touch heavier and
     takes the arc colour instead of teal. */
  .det2b__reads .sgread:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  /* Pins the link to the foot so the shorter reading does not leave a hollow
     lower corner, matching .fcp. */
  .det2b__reads .sgread .textlink { margin-top: auto; padding-top: 20px; }
  /* The 56px tick is replaced by the card's own top edge. */
  .det2b__reads .sgread::before,
  .det2b__reads .sgread + .sgread::before { content: none; }

  /* The arc name is already carried by the link that closes each column, so
     the eyebrow states it once: colour and rule do the differentiating. Amber
     is darkened toward ink for this label only — at 11px uppercase the raw
     token reads 3.75:1 on limestone. */
}

/* Documented examples (2a): the figure is the reason each case persuades, so it
   is lifted out of the account and set as the anchor. The per-case question
   drops to a fragment, and the closing restatement of the shared question is
   gone — it was the fifth asking. */
.ground4 .g4__fig {
  margin: 14px 0 0; font-family: var(--fr); font-weight: 500;
  font-size: 30px; line-height: 1; color: var(--decision-block);
}
.ground4 .g4__figk {
  margin: 5px 0 0; font-family: var(--fs); font-size: 12.5px;
  line-height: 1.4; color: var(--ink-mute);
}
.ground4 .g4__acct { margin: 16px 0 0; }
.ground4 .g4__q {
  margin: auto 0 0; padding-top: 18px; border-top: 0;
  font-size: 18px; font-weight: 600; color: var(--ink);
}
#bridge .ground__close, #the-pattern .ground__close, #applications .ground__close { margin: 30px 0 0; padding-top: 20px; }

/* One face per passage, River-style: the closing question was Libre Franklin
   against a Cormorant lead, which read as two voices. Same face and size now,
   with teal carrying the shift from statement to question. */
#the-pattern .bridge-q {
  font-family: var(--fr); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.36; color: var(--teal);
}

/* The lede is centred, so the question that answers to it should be too.
   Desktop only — the phone left-aligns .bridge-line. */
@media (min-width: 781px) {
  #bridge .bridge-q { margin-left: auto; margin-right: auto; text-align: center; }
  #the-pattern .bridge-line, #the-pattern .bridge-q { margin-left: auto; margin-right: auto; text-align: center; }
  #the-pattern .bridge-q { margin-top: 22px; }
}

/* Authority record card: 22/26 padding around seven 12.5px rows read cramped
   against the border on a full-width desktop card. Desktop only. */
@media (min-width: 781px) {
  .reccard { padding: 30px 34px 24px; margin-top: 32px; }
  .rec-head { margin-bottom: 18px; }
  .rec-row {
    grid-template-columns: 190px 1fr;
    gap: 24px;
    padding: 12px 0;
    font-size: 13.5px;
  }
  .rec-row:last-child { padding-bottom: 4px; }
  .reccard + .dg-note, .rec-caption + .dg-note { margin-top: 28px; }
}

/* Start in observation: Authority Observation Mode is the risk-free entry
   path and had no homepage presence. Kept light — the page already spends its
   one ink band on the missing-question section. */
.obs .seclede + .seclede { margin-top: 16px; }

@media (max-width: 780px) {
  
}

/* The environment list drops "source material" on phones, where the longer
   run does not hold a 390px measure. */
@media (max-width: 680px) {
}

/* Start here: dark panel beside the observation path, matching the live
   layout. Supporting copy and the CTA sit below both panels so the panel
   itself stays to a headline, two lines, and the closing statement. */
.startpanel .d-permit { color: color-mix(in srgb, var(--decision-permit) 45%, var(--limestone)) !important; }
.startpanel .d-defer  { color: color-mix(in srgb, var(--decision-defer) 62%, var(--limestone)) !important; }
.startpanel .d-block  { color: #d4b2ab !important; color: color-mix(in srgb, var(--decision-block) 35%, var(--limestone)) !important; }

@media (max-width: 780px) {
}

/* Standards anchor on the existing-controls rows: names the reference each row
   is stated against, so the comparison is checkable. */

/* Composition matrix: one aligned two-column grid, not eight cards. Row
   heights are content-driven; the right column carries a faint tonal shift and
   a single vertical rule rather than a boxed comparison table. */
.cmx__lede { max-width: 78ch; }
.cmx__lede b { font-weight: 600; color: var(--ink); }
.cmx__note { margin: 10px 0 0; font-family: var(--fs); font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); max-width: 78ch; }
.cmx { margin-top: 30px; border-top: 1px solid var(--rule-strong); }
.cmx__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 0 12px; border-bottom: 1px solid var(--rule);
}
.cmx__head div:last-child { padding-left: 34px; border-left: 1px solid var(--rule); color: var(--teal); }
.cmx__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--rule-soft); }
.cmx__row:last-child { border-bottom: 0; }
.cmx__a { padding: 20px 34px 22px 0; }
.cmx__b {
  padding: 20px 0 22px 34px; border-left: 1px solid var(--rule);
  background: color-mix(in srgb, var(--teal-tint) 55%, transparent);
}
.cmx__a h3 {
  margin: 0; font-family: var(--fr); font-weight: 500; font-size: 20px;
  line-height: 1.25; color: var(--ink);
}
.cmx__k {
  display: block; margin: 5px 0 8px; font-family: var(--fs); font-size: 11px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
}
.cmx__a p, .cmx__b p {
  margin: 0; font-family: var(--fs); font-size: var(--size-body-dense); line-height: 1.6; color: var(--ink-soft);
}
.cmx__b p { color: var(--ink); }
.cmx__lab { display: none; }
.cmx__go { display: inline-block; margin-top: 10px; font-size: 13.5px; }

@media (max-width: 780px) {
  .cmx { border-top: 0; }
  .cmx__head { display: none; }
  .cmx__row { grid-template-columns: 1fr; padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .cmx__a { padding: 0; }
  .cmx__b { padding: 14px 0 0; margin-top: 14px; border-left: 0; border-top: 1px solid var(--rule-soft); background: none; }
  .cmx__lab {
    display: block; margin-bottom: 6px; font-family: var(--fs); font-size: 11px;
    font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal);
  }
  .cmx__go { margin-top: 12px; padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center; }
}

/* The taxonomy note carries the pillar / capability / architecture
   distinction, so it takes body colour rather than the mute micro-label
   colour (2.88:1 on limestone). */
.cmx__note { color: var(--ink-soft); }
/* Defer at 20px regular in the closing statement needs 4.5:1; the raw token
   reads 3.75:1 on limestone. Same darkening used on the governance eyebrow. */
.secclose .d-defer { color: #816b42 !important; color: color-mix(in srgb, var(--decision-defer) 76%, var(--ink)) !important; }

/* ── Desktop nav, second level (>1020px; .navlinks is hidden below) ───────── */
.navlinks .navsub{position:relative;display:flex;align-items:center;}
.navlinks .navsub>a{position:relative;}
.navlinks .navsub__panel{
  position:absolute;left:-13px;top:100%;
  min-width:232px;padding:8px;
  background:var(--panel);
  border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow-lg);
  display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity 140ms cubic-bezier(.4,0,.2,1),transform 140ms cubic-bezier(.4,0,.2,1),visibility 140ms;
  transition-delay:70ms;
  z-index:80;
}
.navlinks .navsub__panel--right{left:auto;right:-13px;}
.navlinks .navsub:hover>.navsub__panel,
.navlinks .navsub:focus-within>.navsub__panel{
  opacity:1;visibility:visible;transform:none;transition-delay:130ms;
}
.navlinks .navsub__panel a{
  padding:9px 11px;border-radius:8px;
  font-family:var(--fs);font-size: var(--size-body-dense);font-weight:var(--weight-medium);
  color:var(--ink);letter-spacing:0.01em;text-decoration:none;
  white-space:nowrap;
}
.navlinks .navsub__panel a::after{display:none;}
.navlinks .navsub__panel a:hover,
.navlinks .navsub__panel a:focus-visible{background:var(--ink-tint);color:var(--ink);}
.navlinks .navsub__panel a[aria-current="page"]{background:var(--ink-tint);}
.navlinks .navsub__panel a.navsub__self{
  font-weight:var(--weight-semibold);color:var(--ink);
}
.navlinks .navsub__rule{
  grid-column:1/-1;height:1px;background:var(--rule);margin:5px 7px;
}
.navlinks .navsub:hover>a,
.navlinks .navsub:focus-within>a{color:var(--ink);}
.navlinks .navsub:hover>a::after,
.navlinks .navsub:focus-within>a::after{background:var(--teal);}
@media (prefers-reduced-motion:reduce){
  .navlinks .navsub__panel{transition:none;transform:none;}
}

/* Hero support copy is two paragraphs: the evaluation, then the record. The
   record is a supporting detail, so it sits below the thesis line in weight
   rather than matching the opening claim. */
.home-hero .support + .support { margin-top: 14px; }

/* The two arc panes are a matched pair under one shared rule, so their CTAs
   bottom-align regardless of how much copy each carries. */
.arc-pane { display: flex; flex-direction: column; }
.arc-pane > a { margin-top: auto; padding-top: 24px; }

/* Two effects table (how-it-works): one question, the security reading and the
   governance reading side by side, in the two arc colours. */
.dual { margin-top: 38px; border-top: 1px solid var(--rule); }
.dual__head, .dual__row {
  display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 0 34px;
  border-bottom: 1px solid var(--rule);
}
.dual__head { padding: 14px 0 13px; }
.dual__hk {
  font-family: var(--fs); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.dual__hk--adv { color: var(--security); }
.dual__hk--org { color: var(--governance); }
.dual__row { padding: 22px 0 24px; align-items: start; }
.dual__q {
  margin: 0; font-family: var(--fr); font-size: 21px; line-height: 1.28;
  color: var(--ink); max-width: 15ch;
}
.dual__c p {
  margin: 0; font-family: var(--fs); font-size: var(--size-body); line-height: 1.62;
  color: var(--ink-soft);
}
.dual__k { display: none; }

@media (max-width: 780px) {
  .dual__head { display: none; }
  .dual__row { grid-template-columns: 1fr; gap: 0; padding: 20px 0 22px; }
  .dual__q { max-width: none; font-size: 20px; margin-bottom: 14px; }
  .dual__c + .dual__c { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
  .dual__k {
    display: block; margin-bottom: 5px; font-family: var(--fs); font-size: 11px;
    font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .dual__c--adv .dual__k { color: var(--security); }
  .dual__c--org .dual__k { color: var(--governance); }
}

/* Type-scale collisions, found by measuring the frontier page (2026-08-04).
   components.css ends with `.seclede,.lede{font-size:clamp(16.5px,1.5vw,18px)}`,
   which collapsed the hero lede and every section lede to one size, so each
   section opened at hero volume. Re-separated: the hero keeps 18px at desktop,
   section ledes sit at 16.5px. And .sn-k was the only micro-label outside the
   11px/600 tier (it was 10px/700, both smaller and heavier than .eyebrow). */
.seclede { font-size: 16.5px; }
.lede:not(.lede--principle) { font-size: clamp(19px, 1.6vw, 20px); }
/* 1.5vw floored at 17px below ~1133px, leaving the hero lede 0.5px from the
   section ledes at every laptop width. The floor is what has to move. Phones
   keep 16.5px so the mobile pass is unchanged. */
@media (max-width: 680px) { .lede:not(.lede--principle) { font-size: 16.5px; } }
.srcsec__note .sn .sn-k,
.srcsec__acpoint .sn-k { font-size: 11px; font-weight: 600; }

/* The frontier hero headline is a two-sentence statement (105 chars) where the
   sitewide .page-hero h1 measure (17ch, tuned for short label headlines) breaks
   it into a 7-line ragged stack. Widened for this page only; other pages'
   headlines still depend on 17ch. text-wrap computes to balance here, so the
   measure has to do the work. */
/* 30ch fixed the ragged stack but cost the hero its internal proportion: the h1
   measured 945px against a 953px lede, so a 66px three-line serif wall sat
   directly on a three-line prose wall of the same width. Every other page holds
   a tight display column (17ch, ~535px) against the 68ch lede. This headline is
   105 chars where the others are ~47, so it takes a smaller size rather than a
   wider measure: ~570px and four lines, a block comparable to the 66px/3-line
   heroes elsewhere, with the display/prose measure contrast restored. */
@media (min-width: 781px) {
  body.page-frontier .page-hero h1 { max-width: 26ch; font-size: clamp(40px, 3.6vw, 48px); }
}

/* .pagenav a computed 12.5px against .crumb at 12px — the same half-pixel
   near-duplicate in the small-label tier. */
.pagenav .wrap a, .pagenav a { font-size: 12px; }

/* Hero to first section on the frontier page read as a hard break: 84px of hero
   padding, a hairline, a 53px tinted pagenav strip with a second hairline, then
   96px of band padding — 233px of interval carrying two rules and a tonal block
   between two serif statements. The pagenav now sits on limestone under the
   hero's own rule, so there is one boundary instead of three, and the interval
   closes to 162px. Desktop only; the phone stack is unchanged. Applies to all four
   pagenav pages: frontier, evidence, how-it-works, post-breach. The hero rule is
   only tightened where a pagenav follows it, so heroes elsewhere keep 84px. */
@media (min-width: 781px) {
  .page-hero:has(+ .pagenav) { padding-bottom: 52px; }
  .pagenav { background: transparent; border-bottom: 0; }
  .pagenav + .band, .pagenav + section { padding-top: 56px; }
}

/* ============================================================
   Pressure figure (frontier). The page had two numbered prose lists doing the
   same work: three pressures, then five responses to them. They are now one
   ruled .cmx mapping, and this figure carries the claim the headline makes.
   Each row draws the SAME number of hairlines and differs only in pattern: the
   three pressures are unlike things, so ranking them by density would assert a
   magnitude ordering the copy does not claim. Parallel lines are separate routes,
   the lattice is coordination across them, the dashes are activity resuming over
   time. The teal rule and the determination stack beyond it are identical on
   every row. Drawn in CSS rather than SVG so labels stay real text at real sizes
   on a phone.
   ============================================================ */
.presfig { margin: 36px 0 0; }
.presfig__grid { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.6fr) minmax(160px, 0.75fr); align-items: stretch; }
.presfig__k { grid-column: 1; display: flex; align-items: center; padding: 20px 24px 20px 0; border-top: 1px solid var(--rule); font-family: var(--fs); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.presfig__strands { grid-column: 2; position: relative; border-top: 1px solid var(--rule); }
/* Every hairline is its own 1px element. Repeating gradients with 1px hard stops
   resampled into solid slabs in about half of all screenshot captures, which is
   the path this project reviews mobile and exports print through. */
.presfig__strands span { position: absolute; background: var(--ink-soft); }
.presfig__strands .pf-h { left: 0; right: 0; height: 1px; }
.presfig__strands .pf-v { top: 22%; bottom: 22%; width: 1px; }
.presfig__strands .pf-t { top: calc(50% - 7px); height: 15px; width: 1px; }
/* .cmx__k carries the Zero Trust pillar in security rose on existing-controls.
   Here the sub-label is only a category name, so it takes the neutral tier.
   --ink-soft, not --ink-mute: mute measures 2.94:1 at 11px and the intent was only to
   avoid security rose asserting a meaning the label does not have. */
body.page-frontier .cmx__k { color: var(--ink-soft); }
.presfig__gate { grid-column: 3; grid-row: 1 / span 3; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-left: 26px; border-left: 1.6px solid var(--teal); }
.presfig__gk { font-family: var(--fs); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.presfig__gate .d-permit, .presfig__gate .d-defer, .presfig__gate .d-block { font-family: var(--fs); font-size: var(--size-body); font-weight: 500; }
.presfig figcaption { margin-top: 18px; font-family: var(--fs); font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); max-width: 68ch; }

@media (max-width: 680px) {
  .presfig__grid { grid-template-columns: 1fr; }
  .presfig__k { grid-column: 1; padding: 16px 0 8px; }
  .presfig__strands { grid-column: 1; height: 36px; border-top: 0; }
  .presfig__gate { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1.6px solid var(--teal); padding: 18px 0 0; margin-top: 14px; }
}

/* The triad's columns end on text with no bottom rule, so the statement under it
   needs its own air (the homepage instance sits on the ink band and gets it from
   the panel padding). */
body.page-frontier .triad3 + .closing-line { margin-top: 32px; }

/* Post-breach closing statements are two beats: the infrastructure premise in
   ink, the Authority Control resolution in teal. The teal beat takes its own
   line so the two are read separately rather than as one long sentence. */
#controls .closing-line .lit { display: block; margin-top: 10px; }

/* ============================================================
   Strategic view (frontier). Ported from
   uploads/frontier-agentic-authority-proof-v6.html: a fixed commitment boundary
   and a fixed coverage boundary under changing adversarial pressure,
  with a
   Pressure toggle and four objective toggles. The proof shipped its own portrait
   version (.fa-mobile,
  a vertical spine),
  so no second SVG drawing was needed.
   The swap happens at 900px rather than the usual 680px: the drawing is 1000
   units wide,
  so below ~900px its 10px labels fall under the legibility floor.
   --adv / --outside are local to this component,
  as in the proof.
   ============================================================ */
.fa-scope { --adv: #8a4a33; --adv-tint: #f3e9e4; --adv-line: #a8583d; --outside: #8f8a80; --dur-slow: 320ms; }/* Interaction */
  .fa-proof { border: 1px solid var(--rule); background: var(--panel); border-radius: var(--radius-md); overflow: hidden; margin-top: 30px; }.fa-controls { display: grid; grid-template-columns: 1fr; }.fa-ctl { padding: 16px clamp(18px, 2.4vw, 26px); border-bottom: 1px solid var(--rule); background: #faf8f3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }.fa-ctl .c-label { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); min-width: 74px; }.fa-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }.fa-seg button { white-space: nowrap; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard); }.fa-seg button:hover { border-color: var(--rule-strong); color: var(--ink); }.fa-seg button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal-deep); background: var(--teal-tint); }.fa-ctl.pressure .fa-seg button[aria-pressed="true"][data-val="advanced"] { border-color: var(--adv); color: var(--adv); background: var(--adv-tint); }.fa-ctl.objective .fa-seg button[aria-pressed="true"] { border-color: var(--adv); color: var(--adv); background: var(--adv-tint); }.fa-seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }/* Flat limestone: the system takes no gradients on canonical surfaces. */.fa-svg .det-pill.permit { fill: var(--teal-tint); stroke: var(--teal); }.fa-svg .det-pill.defer { fill: var(--amber-tint); stroke: var(--amber); }.fa-svg .det-pill.block { fill: #f4e7e3; stroke: #8a2b1d; }.fa-svg .det-txt.permit { fill: var(--teal-deep); }.fa-svg .det-txt.defer { fill: #8a6d2f; }.fa-svg .det-txt.block { fill: #8a2b1d; }/* Adversarial + structural outside route */

  /* Distributed orchestration grammar */
  @keyframes fa-dashflow { to { stroke-dashoffset: -96; } }/* Advanced pressure: extra probes appear (never suppressed by objective) */
  .fa-scope[data-pressure="advanced"] .adv-extra { opacity: .9; }.fa-scope[data-pressure="advanced"] .adv-coord { opacity: .55; }.fa-scope[data-pressure="advanced"] .actor-attack.adv-only { opacity: .85; }.fa-scope[data-pressure="advanced"] .infl { opacity: .55; }.fa-scope[data-pressure="advanced"] .orch-node,
  .fa-scope[data-pressure="advanced"] .comp-callout,
  .fa-scope[data-pressure="advanced"] .actor-mark.adv-only { opacity: 1; }.fa-scope[data-pressure="advanced"] .adv-edge,
  .fa-scope[data-pressure="advanced"] .adv-extra,
  .fa-scope[data-pressure="advanced"] .actor-attack { animation-duration: 2.6s; }/* Objective focus: mute non-selected (stay visible),
  strengthen selected */
  .fa-scope[data-obj="enlarge"]  .adv-edge:not([data-obj="enlarge"]),
  .fa-scope[data-obj="evidence"] .adv-edge:not([data-obj="evidence"]),
  .fa-scope[data-obj="misrep"]   .adv-edge:not([data-obj="misrep"]),
  .fa-scope[data-obj="bypass"]   .adv-edge:not([data-obj="bypass"]) { opacity: .26; }.fa-scope[data-obj="enlarge"]  .adv-edge[data-obj="enlarge"],
  .fa-scope[data-obj="evidence"] .adv-edge[data-obj="evidence"],
  .fa-scope[data-obj="misrep"]   .adv-edge[data-obj="misrep"],
  .fa-scope[data-obj="bypass"]   .adv-edge[data-obj="bypass"] { opacity: 1; stroke-width: 2.6; }.fa-scope[data-pressure="advanced"][data-obj="enlarge"]  .adv-extra:not([data-obj="enlarge"]),
  .fa-scope[data-pressure="advanced"][data-obj="evidence"] .adv-extra:not([data-obj="evidence"]),
  .fa-scope[data-pressure="advanced"][data-obj="misrep"]   .adv-extra:not([data-obj="misrep"]),
  .fa-scope[data-pressure="advanced"][data-obj="bypass"]   .adv-extra:not([data-obj="bypass"]) { opacity: .28; }/* Caption */
  .fa-caption { border-top: 1px solid var(--rule); background: #faf8f3; }.fa-cap-fields { display: grid; grid-template-columns: repeat(4, 1fr); }.fa-cap-field { padding: 18px clamp(16px, 2vw, 22px); }.fa-cap-field + .fa-cap-field { border-left: 1px solid var(--rule); }.fa-cap-field .f-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }.fa-cap-field.changed .f-k { color: var(--adv); }.fa-cap-field.fixed .f-k { color: var(--teal-deep); }.fa-cap-field.governs .f-k { color: var(--teal-deep); }.fa-cap-field.close .f-k { color: var(--outside); }.fa-cap-field p { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }.fa-cap-obj { border-top: 1px solid var(--rule); padding: 20px clamp(18px, 2.4vw, 26px); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }.fa-cap-obj .o-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--adv); border: 1px solid color-mix(in srgb, var(--adv) 40%, var(--rule)); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }.fa-cap-obj .o-body p { font-size: 13.5px; line-height: 1.6; margin: 0; }.fa-cap-obj .o-attempt { color: var(--ink); font-weight: 600; }.fa-cap-obj .o-response { color: var(--ink-soft); margin-top: 7px !important; }.fa-cap-obj .o-residual { color: var(--ink-mute); margin-top: 7px !important; font-size: 12.5px !important; }/* Mobile vertical */.fa-spine .sp { position: relative; border-left: 2.4px solid var(--teal); padding: 4px 0 22px 22px; margin-left: 8px; }.fa-spine .sp:last-child { padding-bottom: 4px; }.fa-spine .sp::before { content: ""; position: absolute; left: -7px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); }.fa-spine .sp b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--ink); }.fa-spine .sp span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 4px; }.fa-spine .sp.dets { border-left-color:var(--amber-deep); }.fa-spine .sp.dets::before { background: var(--amber); }.fa-mob-probes .pk { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--adv); }.fa-mob-probes .arrow { color: var(--adv-line); font-size: var(--size-body); line-height: 1; }.fa-mob-probes .arrow.extra { display: none; }.fa-scope[data-pressure="advanced"] .fa-mob-probes .arrow.extra { display: inline; }

@media (max-width: 980px) {.fa-cap-fields { grid-template-columns: 1fr 1fr; }.fa-cap-field + .fa-cap-field { border-left: 1px solid var(--rule); }.fa-cap-field:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }.fa-cap-field:nth-child(4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
}
@media (max-width: 680px) {.fa-cap-fields { grid-template-columns: 1fr; }.fa-cap-field + .fa-cap-field,
  .fa-cap-field:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }.fa-cap-obj { grid-template-columns: 1fr; }.fa-ctl { padding: 14px 16px; }.fa-ctl .c-label { min-width: 100%; }.fa-seg button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {.fa-svg .adv-edge,
  .fa-svg .adv-extra,
  .fa-svg .adv-coord,
  .fa-svg .actor-attack,
  .fa-svg .infl,
  .fa-seg button { transition: none !important; animation: none !important; }
}

/* ============================================================
   V19 additions · frontier-agentic-systems executive components
   Executive read band, bounded-case path figure, bounded-case
   stat band. Same token system; no new colors or faces.
   ============================================================ */
.xr { padding-top: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--rule-soft); }
.xr .eyebrow { color: var(--teal); }
.xr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 24px; }
.xr__item { padding-right: 30px; }
.xr__item--rule { border-left: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); padding-left: 30px; padding-right: 30px; }
.xr__item:last-child { padding-right: 0; padding-left: 30px; }
.xr__k { display: block; font-family: var(--fs); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.xr__item p { margin: 0; font-family: var(--fr); font-weight: 500; font-size: 19px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.xr__item p .d-permit, .xr__item p .d-defer, .xr__item p .d-block { font-family: var(--fs); font-size: var(--size-body); font-weight: 600; }
@media (max-width: 860px) {
  .xr__grid { grid-template-columns: 1fr; }
  .xr__item, .xr__item--rule, .xr__item:last-child { padding: 16px 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .xr__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .xr__item p { font-size: 18px; }
}

.bcpath { margin: 34px 0 0; }
.bcpath__row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.bcpath__hop { position: relative; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--panel); padding: 16px 16px 14px 16px; }
.bcpath__hop b { display: block; font-family: var(--fs); font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 5px; padding-right: 26px; }
.bcpath__hop span:not(.bcpath__n) { display: block; font-family: var(--fs); font-size: 12.5px; line-height: 1.55; font-weight: 300; color: var(--ink-soft); }
.bcpath__n { position: absolute; top: 12px; right: 12px; font-family: var(--fs); font-size: 10.5px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 999px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.bcpath__hop--tgt { border-color: color-mix(in srgb, var(--security) 45%, var(--rule)); background: var(--security-tint); }
.bcpath__hop--tgt b { color: var(--security-deep); }
.bcpath__arrow { align-self: center; color: var(--ink-mute); font-size: 16px; }
.bcpath figcaption { margin-top: 14px; font-family: var(--fs); font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--ink-soft); max-width: 76ch; }
@media (max-width: 860px) {
  .bcpath__row { grid-template-columns: 1fr; gap: 6px; }
  .bcpath__arrow { transform: rotate(90deg); justify-self: start; margin-left: 20px; }
}

.bcstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 30px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bcs { padding: 18px 18px 16px 0; border-right: 1px solid var(--rule-soft); }
.bcs + .bcs { padding-left: 18px; }
.bcs:last-child { border-right: 0; padding-right: 0; }
.bcs b { display: block; font-family: var(--fr); font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bcs span { display: block; margin-top: 7px; font-family: var(--fs); font-size: 11.5px; line-height: 1.5; letter-spacing: 0.02em; color: var(--ink-soft); }
.bcs--hold b { color: var(--teal-deep); }
.bcstats__cap { margin: 10px 0 0; font-family: var(--fs); font-size: 12px; color: var(--ink-soft); }
@media (max-width: 900px) { .bcstats { grid-template-columns: repeat(2, 1fr); border-bottom: 0; } .bcs, .bcs:last-child { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding-left: 0; } .bcs:nth-child(odd) { border-right: 1px solid var(--rule-soft); padding-right: 16px; } .bcs:nth-child(even) { padding-left: 16px; } }
@media (max-width: 380px) { .bcstats { grid-template-columns: 1fr; } .bcs:nth-child(odd) { border-right: 0; padding-right: 0; } .bcs:nth-child(even) { padding-left: 0; } }

/* ---- IA v2: where it applies -------------------------------------------
   The five surfaces are the primary taxonomy. Changing conditions sit in one
   framed section beneath them, prominent as a section and subordinate as
   items. Institutional functions take the lightest treatment. */
.navlinks .navsub__k{
  grid-column:1/-1;padding:6px 11px 2px;
  font-family:var(--fs);font-size:10.5px;font-weight:var(--weight-semibold);
  letter-spacing:0.14em;text-transform:uppercase;color: var(--ink-soft);
}
.fcol__sub{
  display:block;margin-top:20px;margin-bottom:2px;
  font-family:var(--fs);font-size:10.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color: var(--ink-soft);
}
.surfaces--lead{margin-top:30px;padding-top:0;border-top:none;}
.conditions{
  border:1px solid var(--rule-soft);border-top:1.6px solid var(--ink-mute);
  border-radius:12px;background:color-mix(in srgb, var(--ink) 3%, var(--limestone));
  padding:38px 34px 34px;
}
.conditions__head{max-width:74ch;}
.conditions__head .sec{margin-top:10px;}
.conditions__head .seclede{margin-top:14px;}
.conditions .featcap{margin-top:30px;}
.conditions .fcp{background:var(--limestone);}
.conditions__note{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.6;color:var(--ink-mute);
}
.functions{
  margin-top:30px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;border-top:1px solid var(--rule);
}
.functions .fn{padding:20px 22px 22px 0;border-bottom:1px solid var(--rule);}
.functions .fn + .fn{padding-left:22px;border-left:1px solid var(--rule);}
.functions .fn h3{
  margin:0 0 8px;font-family:var(--fs);font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);
}
.functions .fn p{margin:0;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.6;color:var(--ink-soft);}
@media (max-width:1040px){
  .functions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .functions .fn{padding:18px 22px 20px 0;}
  .functions .fn:nth-child(odd){border-left:none;padding-left:0;}
  .functions .fn:nth-child(even){border-left:1px solid var(--rule);padding-left:22px;}
}
@media (max-width:780px){
  .conditions{padding:26px 20px 24px;border-radius:10px;}
  .functions{grid-template-columns:1fr;}
  .functions .fn,.functions .fn:nth-child(even){padding:16px 0 18px;border-left:none;}
}

.cvcond{margin:36px 0 6px;font-family:var(--fr);font-weight:500;font-size: var(--size-h3);line-height:1.24;color:var(--ink);}
.cvcond__note{margin:0 0 18px;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.6;color:var(--ink-soft);max-width:74ch;}

/* ---- Frontier: framework / documented cases toggle ---------------------- */
.fa-viewseg button:hover{border-color:var(--teal);color:var(--teal);}
.fa-viewseg button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal);background:var(--ink-tint);}
#strategic-view .fa-cases{display:block;}
#strategic-view[data-view="cases"] .fa-cases{display:block;}
#strategic-view[data-view="cases"] .fa-proof,
#strategic-view[data-view="cases"] .fa-only-framework{display:none;}
.facase{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.facase .fc{
  border:1px solid var(--rule-soft);border-top:1.6px solid var(--teal);border-radius:12px;
  background:var(--limestone);padding:26px 24px 24px;display:flex;flex-direction:column;
}
.facase .fc__k{
  font-family:var(--fs);font-size:11px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--teal);
}
.facase .fc h3{margin:12px 0 0;font-family:var(--fr);font-weight:500;font-size: var(--size-h3);color:var(--ink);}
.facase .fc__figs{
  margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;border-top:1px solid var(--rule);
}
.facase .fc__figs > div{padding:14px 16px 16px 0;border-bottom:1px solid var(--rule);}
.facase .fc__figs > div:nth-child(even){padding-left:16px;border-left:1px solid var(--rule);}
.facase .fc__figs b{display:block;font-family:var(--fr);font-weight:500;font-size: var(--size-h3);line-height:1.1;color:var(--ink);}
/* --ink-mute on the limestone card measured 2.94:1 here, under the 4.5:1 floor, on the
   eight figure captions that carry the disclosed numbers. Same defect as .fc__note and
   the new .fc__src; the whole component now reads --ink-soft. */
.facase .fc__figs span{display:block;margin-top:5px;font-family:var(--fs);font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.facase .fc__body{margin:18px 0 0;font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.65;color:var(--ink-soft);}
.facase .fc__q{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--fr);font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);
}
.facase .fc .textlink{margin-top:auto;padding-top:18px;}
/* Per-card source credit (2026-09-05). The condition name took over .fc__k, so the
   attribution needs its own tier: without one it computed identical to .fc__body
   (14px / 400 / --ink-soft / 18px top) and read as a stray trailing sentence of
   narrative. On the page whose discipline is documented facts, the credit has to
   look like metadata. This is the .fc__note source tier, set on the card. */
.facase .fc__src{
  margin:14px 0 0;font-family:var(--fs);font-size:11.5px;font-weight:600;
  letter-spacing:0.1em;line-height:1.5;color:var(--ink-soft);
}
.fc__note{
  margin:24px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--fs);font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:86ch;
}
@media (max-width:900px){
  .facase{grid-template-columns:1fr;}
}
@media (max-width:780px){
  .facase .fc{padding:22px 18px 20px;}
  .facase .fc__figs{grid-template-columns:1fr;}
  .facase .fc__figs > div,.facase .fc__figs > div:nth-child(even){padding:12px 0 14px;border-left:none;}
}

/* ---- Nav: the parent of a panel is itself a destination ------------------ */
.navlinks .navsub>a{padding-right:15px;}
.navlinks .navsub>a::before{
  content:"";position:absolute;right:2px;top:50%;
  width:7px;height:7px;margin-top:-4px;
  border-right:1.4px solid var(--ink-mute);border-bottom:1.4px solid var(--ink-mute);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:border-color 160ms cubic-bezier(.4,0,.2,1),transform 160ms cubic-bezier(.4,0,.2,1);
}
.navlinks .navsub:hover>a::before,
.navlinks .navsub:focus-within>a::before{border-color:var(--teal);transform:rotate(225deg);}
.navlinks .navsub__panel a.navsub__self{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.navlinks .navsub__panel a.navsub__self::before{
  content:"Overview";
  font-size:10px;font-weight:var(--weight-semibold);letter-spacing:0.14em;
  text-transform:uppercase;color: var(--ink-soft);order:2;
}
.navlinks .navsub__panel a.navsub__self:hover::before{color:var(--teal);}
@media (prefers-reduced-motion:reduce){
  .navlinks .navsub>a::before{transition:none;}
}

/* ---- One process, end to end, with the access span (ac-zero-trust) ------
   Zero Trust is a span across the execution stretch, not a stage inside it,
   so it is drawn as a bracket beside the process rows. Below 820px the whole
   figure turns sideways and scroll-snaps, which keeps the span reading a span
   rather than collapsing it into one more row in a vertical sequence. */
.opf-tabs,.opf-jsonly{display:none;}
html.js .opf-jsonly{display:inline;}
html.js .opf-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0 0;}
.opf-tabs button{appearance:none;cursor:pointer;font-family:var(--fs);font-size:13px;padding:0 15px;min-height:44px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink-soft);}
.opf-tabs button:hover{border-color:var(--teal);color:var(--teal-deep);}
.opf-tabs button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal-deep);background:var(--ink-tint);font-weight:600;}
.opf{margin-top:30px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--panel);overflow:hidden;}
.opf__body{padding:32px 26px 30px;}
.opf__cap{padding:14px 22px 16px;border-top:1px solid var(--rule-soft);background:var(--limestone);font-family:var(--fs);font-size:12.5px;line-height:1.6;color:var(--ink-soft);}
.opf__cap b{font-weight:600;color:var(--ink);}
.opf-blk{max-width:560px;margin:0 auto;}
.opf-hd{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color: var(--ink-soft);padding-bottom:8px;border-bottom:1px solid var(--rule);}
.opf-hd--ext{color:var(--teal-deep);}
.opf-hd--proc{color:var(--amber-deep);}
.opf-row{padding:11px 0;border-bottom:1px solid var(--rule-soft);font-family:var(--fs);font-size: var(--size-body-dense);line-height:1.5;color:var(--ink);}
.opf-span{display:grid;grid-template-columns:1fr 15px minmax(140px,190px);gap:0 14px;align-items:stretch;}
.opf-brk{border:1.5px solid var(--security);border-left:0;border-radius:0 8px 8px 0;margin:6px 0;}
.opf-note{align-self:center;padding:8px 0;}
.opf-note .nk{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--security-deep);}
.opf-note .nt{display:block;margin-top:6px;font-family:var(--fs);font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.opf-note .nd{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--rule-soft);font-family:var(--fs);font-size:12px;line-height:1.5;color: var(--ink-soft);}
.opf-hand{max-width:560px;margin:16px auto 0;text-align:center;font-family:var(--fs);font-size:13px;line-height:1.6;color:var(--ink-soft);}
.opf-hand b{font-weight:600;color:var(--ink);}
.opf-arw{display:block;width:1px;height:26px;margin:12px auto;background:var(--rule-strong);position:relative;}
.opf-arw::after{content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;border-right:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);transform:translateX(-50%) rotate(45deg);}
.opf-arw--sm{height:16px;margin:8px auto;}
.opf-ac{max-width:400px;margin:0 auto;border:1.5px solid var(--teal);border-radius:var(--radius-md);background:var(--teal-tint);padding:20px 24px 18px;text-align:center;}
.opf-ac .n{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);}
.opf-ac .q{margin:9px 0 0;font-family:var(--fr);font-size:19px;line-height:1.3;color:var(--ink);}
.opf-dets{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap;}
.opf-det{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:999px;border:1px solid;}
.opf-det--p{color:var(--decision-permit);border-color:var(--decision-permit);background:var(--decision-permit-tint);}
.opf-det--d{color:var(--decision-defer-text);border-color:var(--decision-defer-text);background:var(--decision-defer-tint);}
.opf-det--b{color:var(--decision-block);border-color:var(--decision-block);background:var(--decision-block-tint);}
.opf-out{max-width:400px;margin:0 auto;border:1px solid var(--teal);border-radius:var(--radius-sm);background:var(--limestone);padding:16px 20px;text-align:center;font-family:var(--fr);font-size:18px;color:var(--ink);}
.opf-rec{max-width:400px;margin:0 auto;text-align:center;border:1px dashed var(--rule-strong);border-radius:var(--radius-sm);padding:12px 18px;font-family:var(--fs);font-size:12.5px;color:var(--ink-soft);}
@media (max-width:820px){
  /* Mobile-native rebuild. The figure becomes a single vertical spine and the
     stages hang off it. Zero Trust is not a bracket or a side note here: the
     spine itself changes colour for the stretch it covers, which states the
     span in the one axis a phone actually has. No swipe, no hidden content,
     no affordance to teach. */
  .opf__body{padding:26px 16px 24px;}
  .opf-track{display:block;padding-left:6px;}

  .opf-blk{
    max-width:none;position:relative;
    border-left:1px solid var(--rule-strong);
    padding:0 0 0 22px;margin:0;
  }
  .opf-hd{
    border-bottom:0;padding:22px 0 10px;
    position:relative;color:var(--ink-mute);
  }
  .opf-blk:first-child .opf-hd{padding-top:0;}
  .opf-hd::before{
    content:"";position:absolute;left:-26px;top:50%;
    width:9px;height:9px;border-radius:999px;
    background:var(--limestone);border:1px solid var(--rule-strong);
    transform:translate(-3px,-40%);
  }
  .opf-row{
    position:relative;padding:9px 0;font-size: var(--size-body-dense);
    border-bottom:0;
  }
  .opf-row::before{
    content:"";position:absolute;left:-26px;top:17px;
    width:5px;height:5px;border-radius:999px;background:var(--rule-strong);
  }
  /* inside the span the spine is 3px, so the marker shifts to keep one dot
     column, and it takes the access colour instead of painting grey on the rail */
  .opf-proc .opf-row::before{left:-29px;background:var(--security);}
  .opf-arw{
    display:block;width:auto;height:16px;margin:0;background:none;
    border-left:1px solid var(--rule-strong);margin-left:0;
  }
  .opf-arw::after{display:none;}

  /* the access span: the spine itself, recoloured for its length */
  .opf-span{display:flex;flex-direction:column;}
  .opf-brk{display:none;}
  .opf-proc{
    margin-left:-23px;padding-left:23px;
    border-left:3px solid var(--security);
  }
  .opf-note{
    order:-1;align-self:stretch;
    margin-left:-23px;padding:14px 0 12px 23px;
    border-left:3px solid var(--security);
  }
  .opf-note .nk{color:var(--security-deep);}
  .opf-note .nt{font-size:12.5px;}
  .opf-note .nd{margin-top:7px;padding-top:7px;}

  /* the determination: the one node that is a destination, not a step.
     The end block drops its own indent so its children sit on the spine
     without each one breaking out separately. */
  .opf-blk--end{border-left-color:transparent;padding-left:0;}
  .opf-hand{margin:20px 0 0;text-align:left;font-size:13px;}
  .opf-ac{
    max-width:none;margin-top:16px;margin-left:0;
    border-width:2px;padding:20px 20px 18px;
  }
  .opf-ac .q{font-size:18px;}
  .opf-out,.opf-rec{max-width:none;margin-left:0;}
  .opf-out{font-size:17px;padding:14px 18px;}
  .opf-blk--end .opf-arw{border-left:0;height:14px;margin:0;}

  .opf-tabs{margin-top:20px;}
  html.js .opf-tabs{gap:6px;}
  .opf-tabs button{font-size:12.5px;padding:0 13px;min-height:42px;}
  /* three pills, one row: at 390px they otherwise wrap 2+1 and orphan Block */
  .opf-dets{gap:6px;}
  .opf-det{padding:5px 10px;letter-spacing:.06em;}
}

/* ---- Tool ladder (ai-agents): one toolchain, six different consequences ---
   Technical access is uniform down the list. Organizational consequence is not.
   The consequence column carries the only visual escalation, so the figure
   cannot be read as a permission hierarchy. */
.tld{margin-top:30px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--panel);overflow:hidden;}
.tld__head{display:grid;grid-template-columns:minmax(170px,1fr) minmax(150px,1fr) minmax(220px,1.4fr);gap:0 22px;padding:12px 24px;background:var(--limestone);border-bottom:1px solid var(--rule);}
.tld__head span{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color: var(--ink-soft);}
.tld__list{list-style:none;margin:0;padding:0;counter-reset:tld;}
.tld__list li{display:grid;grid-template-columns:minmax(170px,1fr) minmax(150px,1fr) minmax(220px,1.4fr);gap:6px 22px;align-items:baseline;padding:15px 24px;border-bottom:1px solid var(--rule-soft);}
.tld__list li:last-child{border-bottom:0;}
.tld__a{font-family:var(--fs);font-size: var(--size-body-dense);font-weight:600;color:var(--ink);}
.tld__t{font-family:var(--fs);font-size:13px;line-height:1.5;color:var(--ink-soft);}
.tld__c{font-family:var(--fs);font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
.tld__list li[data-w="high"]{background:var(--amber-tint);}
.tld__list li[data-w="high"] .tld__c{color:var(--ink);}
.tld__list li[data-w="high"] .tld__a{color:var(--amber-deep);}
.tld__rule{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--fr);font-size:21px;line-height:1.35;color:var(--ink);max-width:44ch;}
.tld__rule b{font-weight:500;color:var(--teal-deep);}
@media (max-width:820px){
  .tld__head{display:none;}
  .tld__list li{grid-template-columns:1fr;padding:15px 18px;gap:4px;}
  .tld__t::before{content:"Technical access. ";color:var(--ink-soft);}
  .tld__c::before{content:"Consequence. ";font-weight:600;color:var(--ink);}
  .tld__rule{font-size:19px;}
}

/* ---- Consolidated panes -------------------------------------------------
   One band, several faces. Used to merge adjacent bands that answer one
   question from different angles, so a page reads as four or five movements
   instead of ten thin ones. Without JS every pane renders in sequence and the
   selector is hidden, so nothing is lost. */
.cseg{display:none;}
html.js .cseg{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;}
.cseg button{appearance:none;cursor:pointer;font-family:var(--fs);font-size:13px;padding:0 16px;min-height:44px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink-soft);}
.cseg button:hover{border-color:var(--teal);color:var(--teal-deep);}
.cseg button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal-deep);background:var(--ink-tint);font-weight:600;}
.cpane{margin-top:26px;}
html.js .cpane+.cpane{margin-top:0;}
.cpane[hidden]{display:none;}
.cpane__k{display:none;}
html:not(.js) .cpane__k{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color: var(--ink-soft);margin-bottom:12px;}

/* ---- Shared step sequences ---------------------------------------------
   Authored inline on how-it-works; the markup now lives on authority-mapping
   (.applysteps) and in-operation (.respseq), so the rules move to the shared
   sheet rather than being duplicated per page. */
.applysteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.applystep { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 20px 18px; }
.applystep .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--teal); display: block; margin-bottom: 10px; }
.applystep h3 { font-family: var(--font-sans); font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--ink); margin: 0 0 6px; }
.applystep p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.respseq { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.respseq li { display: grid; grid-template-columns: 44px 1fr; gap: 0 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.respseq .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--teal); padding-top: 4px; }
.respseq h3 { font-family: var(--font-serif, var(--font-sans)); font-size: 20px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.respseq p { font-family: var(--font-sans); font-size: var(--size-body-dense); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 68ch; }
@media (max-width:820px){ .applysteps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .applysteps{grid-template-columns:1fr;} }

/* Hero first impression: the mark card was centred against a copy column tall
   enough to push its foot below the fold on a laptop. Above the two-column
   breakpoint the hero sheds top padding and the mark aligns to the top of the
   grid instead of its middle, so the whole card, including the determination
   row, is visible on load. Unprefixed because index.html's body carries no
   page--* class at all, so every page--* hero rule in this sheet was inert;
   clarity.css loads after components.css, so equal specificity wins. */
@media (min-width: 1081px) {
  .home-hero { padding-top: clamp(44px, 3.4vw, 62px); }
  .home-hero-grid { align-items: start; }
  .home-hero .home-mark { margin-top: 10px; }
}

/* ── Primary nav at seven items: hold one line above the menu breakpoint ──── */
.navlinks{flex-wrap:nowrap;gap:clamp(13px,1.35vw,25px);}
.navlinks>a,.navlinks .navsub>a{white-space:nowrap;}
.navlinks a{font-size:clamp(12px,0.95vw,13.5px);}
.navlinks .navsub>a{padding-right:clamp(12px,1.1vw,15px);}
.navrow .navcta{white-space:nowrap;padding-left:clamp(13px,1.2vw,18px);padding-right:clamp(13px,1.2vw,18px);font-size:clamp(12px,0.95vw,13.5px);}

/* ---- Frontier: attempt pairs, one control per line -----------------------
   Two attempts share a line and one toggle, so five attempts cost three
   clicks rather than five and both answers on a line arrive together. */
.cmx--fold { display: block; }
.cmx--fold .cmx__head { display: none; }
.cmx--fold .cmx__row { display: block; border-bottom: 1px solid var(--rule-soft); }
.cmx--fold .cmx__row:last-child { border-bottom: 0; }
.cmx--fold summary {
  list-style: none; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px;
  padding: 20px 46px 18px 0;
}
.cmx--fold summary::-webkit-details-marker { display: none; }
.cmx--fold summary::after {
  content: "+"; position: absolute; right: 14px; top: 19px;
  font-family: var(--fs); font-size: 17px; line-height: 1; color: var(--ink-mute);
  transition: var(--transition-control);
}
.cmx--fold .cmx__row[open] summary::after { content: "\2212"; color: var(--teal); }
.cmx--fold summary:hover h3 { color: var(--security-deep); }
.cmx--fold summary:hover::after { color: var(--teal); }
.cmx--fold summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.cmx--fold .cmx__a { padding: 0; }
.cmx--fold .cmx__a h3 { color: var(--adversarial); }
.cmx--fold .cmx__ans {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px;
  padding: 0 46px 22px 0;
}
.cmx--fold .cmx__b { padding: 0; border-left: 0; background: none; }
.cmx--fold .cmx__lab {
  display: block; margin-bottom: 7px; font-family: var(--fs); font-size: 11px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal);
}
@media (max-width: 780px) {
  .cmx--fold summary, .cmx--fold .cmx__ans { grid-template-columns: 1fr; gap: 22px 0; }
  .cmx--fold summary { padding: 18px 40px 16px 0; }
  .cmx--fold summary::after { top: 17px; right: 4px; }
  .cmx--fold .cmx__ans { padding: 0 0 18px; }
}

.cmx__bar { display: flex; justify-content: flex-start; margin: 26px 0 0; }
.cmx__all {
  appearance: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; padding: 9px 18px; font-family: var(--fs); font-size: 13px;
  font-weight: 500; color: var(--ink-soft); transition: var(--transition-control);
}
.cmx__all:hover { border-color: var(--teal); color: var(--teal); }
.cmx__all[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); }
.cmx__all:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 780px) {
  .cmx__bar { justify-content: flex-start; }
  .cmx__all { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Post-Breach: the segmentation boundary folded into Complementary controls.
   It is the honest limit of the comparison above it, so it reads as a
   sub-block rather than a competing section. */
.boundary-note { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
.boundary-note .sec-sub {
  margin: 6px 0 12px; font-family: var(--fr); font-weight: 500; font-size: var(--size-h3);
  line-height: 1.25; color: var(--ink);
}
.boundary-note .prose { max-width: 78ch; }

/* Sources register: a short note under a reference, above its link. */
.sr-note { margin: 12px 0 0; font-family: var(--fs); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); max-width: 78ch; }

/* ---- Research: authority-gap survey findings -------------------------- */
.agstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 34px; }
.agstats .ag { border-top: 3px solid var(--teal); padding-top: 16px; }
.agstats .ag b { display: block; font-family: var(--fr); font-weight: 500; font-size: 42px; line-height: 1; color: var(--ink); }
.agstats .ag p { font-family: var(--fs); font-size: var(--size-body-sm); line-height: var(--leading-normal); color: var(--ink-soft); margin: 10px 0 0; }
@media (max-width: 900px) { .agstats { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 520px) { .agstats { grid-template-columns: 1fr; } }

/* ---- Home: enterprise outcomes ----------------------------------------- */
@media (max-width: 780px) { }

/* ---- Home: tailored authority pairs ------------------------------------
   Each row is one actor shown permitted and deferred at once, which is the
   claim: authority varies by result, not by actor. Teal marks the permitted
   result, amber the one that needs more authority - the same two colors the
   determination badges use elsewhere. */
.v21-pairs { margin-top: 32px; border-top: 1px solid var(--rule); }
.v21-pairs .pr {
  display: grid; grid-template-columns: 15ch 1fr 1fr; gap: 0 30px;
  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
}
.v21-pairs .who { font-family: var(--fr); font-size: var(--size-h4); color: var(--ink); }
.v21-pairs .may, .v21-pairs .req {
  font-family: var(--fs); font-size: var(--size-body-sm);
  line-height: var(--leading-normal); padding-left: 14px; border-left: 2px solid var(--rule);
}
.v21-pairs .may { color: var(--ink-soft); border-left-color: var(--teal); }
.v21-pairs .req { color: var(--ink-soft); border-left-color: var(--amber); }
@media (max-width: 860px) {
  .v21-pairs .pr { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .v21-pairs .who { font-size: 18px; }
}

/* ---- Home: institutional authority models ------------------------------ */
.v21-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 32px; }
.v21-model .mdl { border-top: 1px solid var(--rule); padding-top: 16px; }
.v21-model .mdl b { display: block; font-family: var(--fr); font-weight: 500; font-size: var(--size-h4); color: var(--ink); }
.v21-model .mdl p { font-family: var(--fs); font-size: var(--size-body-sm); line-height: var(--leading-normal); color: var(--ink-soft); margin: 8px 0 0; }
@media (max-width: 820px) { .v21-model { grid-template-columns: 1fr; gap: 22px; } }

/* ---- Home / the gap: where authority is already written ------------------
   The four artifacts were a sentence list inside a long paragraph. Naming
   them as objects makes the claim scannable and lets the drift sentence
   stand alone as the actual argument. */
.v21-written .wr__side .k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
@media (max-width: 820px) {
}

/* ---- Practice: tailored authority, folded under the worked examples ----- */
.v21-tailored { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule); }
.v21-tailored > .k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
}
.v21-tailored .tl__lede {
  font-family: var(--fs); font-size: clamp(16.5px, 1.5vw, 18px); line-height: var(--leading-relaxed);
  color: var(--ink-soft); margin: 0; max-width: 72ch;
}
.v21-tailored .v21-pairs { margin-top: 24px; }
.v21-tailored .tl__close {
  font-family: var(--fr); font-size: var(--size-h4); color: var(--ink); margin: 20px 0 0;
}

/* ---- Home: the four artifacts, as a full-width row ---------------------- */
.v21-artifacts {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.v21-artifacts li {
  font-family: var(--fr); font-size: clamp(20px, 1.9vw, 24px); line-height: var(--leading-snug);
  color: var(--ink); border-top: 1px solid var(--rule); padding-top: 14px;
}
@media (max-width: 820px) { .v21-artifacts { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 480px) { .v21-artifacts { grid-template-columns: 1fr; gap: 0; }
  .v21-artifacts li { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--rule-soft); } }

/* ---- How it works / Define: the institution's authority model ----------- */
.hw-model { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--rule); }
.hw-model__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
.hw-model__lede {
  font-family: var(--fs); font-size: clamp(16.5px, 1.5vw, 18px); line-height: var(--leading-relaxed);
  color: var(--ink-soft); margin: 0; max-width: 72ch;
}
.hw-model .v21-model { margin-top: 26px; }
.hw-model .v21-tailored { margin-top: 34px; }
.hw-model__close {
  font-family: var(--fs); font-size: clamp(16.5px, 1.5vw, 18px); line-height: var(--leading-relaxed);
  color: var(--ink-soft); margin: 26px 0 0; max-width: 74ch;
}

/* ---- Why now: the shift, shown rather than described --------------------
   Two hairline-topped states side by side. Then is muted, Now carries the
   teal edge - the same boundary accent the ladder and pairs use. */
.v21-shift { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 34px; }
.v21-shift .sh { border-top: 1px solid var(--rule); padding-top: 16px; }
.v21-shift .sh--now { border-top-color: var(--teal); }
.v21-shift .sh__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
}
.v21-shift .sh--now .sh__k { color: var(--teal); }
.v21-shift .sh__stmt {
  font-family: var(--fr); font-weight: 500; font-size: clamp(20px, 1.9vw, 24px);
  line-height: var(--leading-snug); color: var(--ink); margin: 0; text-wrap: pretty;
}
.v21-shift .sh--then .sh__stmt, .v21-shift .sh:not(.sh--now) .sh__stmt { color: var(--ink-soft); }
.v21-shift .sh__note {
  font-family: var(--fs); font-size: var(--size-body-sm);
  line-height: var(--leading-normal); color: var(--ink-soft); margin: 12px 0 0;
}
.v21-actors__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin: 40px 0 12px;
}
@media (max-width: 780px) {
  .v21-shift { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- Why now: centered closing statement -------------------------------
   Two sentences, each on its own measure, centered on desktop so the
   section's conclusion reads as a statement rather than another paragraph.
   Follows the bridge pattern in #the-pattern: ink premise, teal resolution. */
.v21-verdictline { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--rule); }
.v21-verdictline .vl__a, .v21-verdictline .vl__b {
  font-family: var(--fr); font-weight: 500; line-height: 1.4;
  margin: 0; max-width: 46ch; text-wrap: pretty;
}
.v21-verdictline .vl__a { font-size: clamp(20px, 1.9vw, 24px); color: var(--ink); }
.v21-verdictline .vl__b { font-size: clamp(20px, 1.9vw, 24px); color: var(--teal); margin-top: 20px; }
@media (min-width: 781px) {
  .v21-verdictline .vl__a, .v21-verdictline .vl__b {
    margin-left: auto; margin-right: auto; text-align: center;
  }
  .v21-verdictline .vl__b { margin-top: 20px; }
}

/* Single-line variant: the resolution alone, no ink premise above it. */
.v21-verdictline--single .vl__b { margin-top: 0; max-width: 52ch; }

/* ---- The shared record, read two ways -----------------------------------
   The record itself is identical on both arc pages, which is the point. What
   differs is which rows each discipline reads first, so those rows carry the
   arc's own accent on a left edge. Same substrate, two readings. */
.rec-legend {
  display: block; max-width: 62ch; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin: 30px 0 -18px;
}
.reccard--sec .rec-row, .reccard--gov .rec-row {
  border-left: 2px solid transparent; padding-left: 14px;
}
.reccard--sec .rec-row--lead { border-left-color: var(--security); }
.reccard--gov .rec-row--lead { border-left-color: var(--governance); }
.reccard--sec .rec-row--lead > span:first-child { color: var(--security); }
.reccard--gov .rec-row--lead > span:first-child { color: var(--governance); }
@media (max-width: 780px) { .rec-legend { margin-bottom: -10px; } }

.am-artifacts__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin: 34px 0 -6px;
}

/* ---- See it in practice: four stations, label -> leader -> value ---------
   Replaces a nine-block panel. Each example reads as one sentence broken
   into four beats, with a hairline leader carrying the eye from the mono
   label to the serif value. Supporting prose sits behind one disclosure so
   the default state stays calm. */
.pxflow { margin-top: 4px; }
.pxflow .pxst {
  display: grid; grid-template-columns: 13ch 34px 1fr; align-items: baseline;
  gap: 0 0; padding: 20px 0; border-bottom: 1px solid var(--rule-soft);
}
.pxflow .pxst:last-child { border-bottom: 0; }
.pxflow .pxst__k {
  font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.pxflow .pxst__lead {
  display: block; height: 1px; background: var(--rule);
  margin: 0 10px; transform: translateY(-5px);
}
.pxflow .pxst__v b {
  display: block; font-family: var(--fr); font-weight: 500;
  font-size: clamp(20px, 1.9vw, 24px); line-height: var(--leading-snug);
  color: var(--ink); text-wrap: pretty;
}
.pxflow .pxst__v small {
  display: block; margin-top: 7px; font-family: var(--fs);
  font-size: var(--size-body-sm); line-height: var(--leading-normal);
  color: var(--ink-soft); max-width: 56ch;
}
.pxflow .pxst--det .pxst__k { color: var(--amber-deep); }
.pxflow .pxst--det .pxst__lead { background: var(--decision-defer); }
.pxflow .pxst--det .pxst__v b { color: var(--amber-deep); }

.pxmore { margin-top: 22px; border-top: 1px solid var(--rule); }
.pxmore > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 32px 0 0; font-family: var(--fs); font-size: var(--size-body-sm);
  font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft);
  transition: var(--transition-control);
}
.pxmore > summary::-webkit-details-marker { display: none; }
.pxmore > summary::after {
  content: "+"; position: absolute; right: 6px; top: 13px;
  font-family: var(--fs); font-size: 17px; line-height: 1; color: var(--ink-mute);
}
.pxmore[open] > summary::after { content: "\2212"; color: var(--teal); }
.pxmore > summary:hover, .pxmore[open] > summary { color: var(--teal); }
.pxmore > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pxmore__b { padding: 14px 0 4px; }
.pxmore__b p {
  font-family: var(--fs); font-size: var(--size-body-sm);
  line-height: var(--leading-relaxed); color: var(--ink-soft);
  margin: 0 0 14px; max-width: 74ch;
}
.pxmore__b p:last-child { margin-bottom: 0; }
.pxmore__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 5px;
}
@media (max-width: 720px) {
  .pxflow .pxst { grid-template-columns: 1fr; padding: 16px 0; }
  .pxflow .pxst__lead { display: none; }
  .pxflow .pxst__k { margin-bottom: 8px; }
}

/* ---- Hero: the mark as ground, not a framed specimen --------------------
   The gate was sitting in a white card with border and shadow inside the
   limestone hero, which read as an illustration pasted onto the page. On the
   open ground it reads as the page's own architecture. Hairlines, not boxes. */
.home-mark .markcard {
  padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none;
}
.home-mark .markfoot {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
  max-width: 34ch; margin-left: auto; margin-right: auto;
}
.home-mark .markfoot .home-outcome {
  font-size: var(--size-eyebrow); letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}
.home-mark .markfoot .markcap {
  margin-top: 10px; font-size: var(--size-h4); color: var(--ink-soft);
}
@media (max-width: 680px) { .home-mark .markcard { padding: 0; } }

/* ---- Fixes: hero measure at the collapsed breakpoint, cool-band labels ---
   13 rules in this file are scoped to .page--clarity, a class the pages do
   not carry, so they never applied. One of them was the hero headline's
   widened measure below 1080px. Restated unscoped at the breakpoint where the
   grid actually collapses, rather than switching the dead scope on - several
   of those orphaned rules would revert later hero work. */
@media (max-width: 1080px) {
  .home-hero h1 { max-width: 26ch; }
}

/* --ink-mute clears 4.5:1 on limestone and white but not on the cool band,
   so eyebrow-scale labels there step up to --ink-soft. */
/* Generic rather than enumerated: any eyebrow-scale label landing on the cool
   band steps up, so a new one cannot miss the list. */
.v21-band--cool .eyebrow,
.v21-band--cool .k,
.v21-band--cool .rk,
.v21-band--cool .sh__k,
.v21-band--cool .v21-actors__k,
.v21-band--cool .pxreads__k,
.v21-band--cool .pxst__k,
.v21-band--cool .pxmore__k,
.v21-band--cool .v21-rung .k { color: var(--ink-soft); }
.v21-band--cool .eyebrow { color: var(--teal-deep); }

/* ---- Practice: the two readings, attached to the determination they read --
   Moved out of its own card in section 6, where it restated this panel's
   actor and action verbatim. Here the setup is already on the page, so the
   readings sit directly under the determination station. */

/* The readings sit inside the station flow now, so they follow its breakpoint
   and its supporting-text role rather than the old card's caption scale. */
@media (max-width: 720px) {
}
/* Section-level, following all three examples: the readings apply to every
   determination, so they sit outside the tab panels. */
#one-platform .pxreads { margin-top: 34px; }
#one-platform .pxreads .v21-read p { font-size: var(--size-body-sm); }

/* ---- Home (value-first): what it protects ------------------------------- */
.v21-protect .pt { border-top: 1px solid var(--rule); padding-top: 16px; display: flex; flex-direction: column; }
.v21-protect .pt b { font-family: var(--fr); font-weight: 500; font-size: var(--size-h4); color: var(--ink); }
.v21-protect .pt p { font-family: var(--fs); font-size: var(--size-body-sm); line-height: var(--leading-normal); color: var(--ink-soft); margin: 8px 0 14px; flex: 1; }
@media (max-width: 980px) { }
@media (max-width: 520px) { }

/* ---- Home (value-first): uses binned by reading -------------------------
   Nine uses grouped by which discipline reads the determination. The group
   accent is the arc color already used on the arc pages, so the homepage
   teaches that taxonomy before "One determination, two readings" arrives. */
.v21-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 34px; }
.v21-bins .bin__k {
  display: block; font-family: var(--fm); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding-bottom: 12px; border-bottom: 2px solid currentColor;
}
.v21-bins .bin--sec .bin__k { color: var(--security); }
.v21-bins .bin--gov .bin__k { color: var(--amber-deep); }
.v21-bins .bin--both .bin__k { color: var(--teal); }
.v21-bins .bin__items { display: flex; flex-direction: column; }
.v21-bins .bi {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; transition: var(--transition-control);
}
.v21-bins .bi:last-child { border-bottom: 0; }
.v21-bins .bi b {
  display: block; font-family: var(--fr); font-weight: 500;
  font-size: var(--size-h4); line-height: var(--leading-snug); color: var(--ink);
}
.v21-bins .bi span {
  display: block; margin-top: 5px; font-family: var(--fs);
  font-size: var(--size-body-sm); line-height: var(--leading-normal); color: var(--ink-soft);
}
.v21-bins .bin--sec .bi:hover b { color: var(--security-deep); }
.v21-bins .bin--gov .bi:hover b { color: var(--amber-deep); }
.v21-bins .bin--both .bi:hover b { color: var(--teal-deep); }
@media (max-width: 900px) { .v21-bins { grid-template-columns: 1fr; gap: 30px; } }

/* Actor chips, shared: used on the About shift band (moved from the homepage). */
.v21-actors{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.v21-actors span{font-family:var(--fs);font-size:var(--size-body-sm);color:var(--ink-soft);background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:7px 14px;}

/* ---- What it protects, mobile: five core uses, the rest behind a fold ----
   Desktop scans nine in three columns; a stacked phone list of nine is a
   wall. The five highest-recognition uses stay; the other four unfold. */
@media (max-width: 900px) {
}

/* ---- What it protects: three pillars, labels first -----------------------
   The nine labels are complete propositions, so they carry the section on
   their own and the supporting clause is an enhancement rather than a
   requirement. On a pointer device the clause expands in place on hover or
   keyboard focus; on touch, where neither exists, the labels stand alone and
   the destination page carries the detail. Nothing is hidden from crawlers -
   the text is in the DOM either way. */
.v21-bins { column-gap: 0; }
.v21-bins .bin { padding: 0 34px; }
.v21-bins .bin:first-child { padding-left: 0; }
.v21-bins .bin:last-child { padding-right: 0; }
.v21-bins .bin + .bin { border-left: 1px solid var(--rule); }
/* The clause is always present and always occupies its line: collapsing it
   reflowed the grid row (and everything below) by 26px on every hover, gave
   no affordance that a reveal existed, and deleted the copy outright on
   touch. Now the supporting clause carries low emphasis and hover only
   deepens the label - no layout moves, nothing is hidden from anyone. */
.v21-bins .bi { padding: 14px 0; }
.v21-bins .bi span {
  margin-top: 4px; font-size: var(--size-body-sm); color: var(--ink-soft);
}
.v21-bins .bi:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
@media (max-width: 900px) {
  .v21-bins .bin { padding: 0; }
  .v21-bins .bin + .bin { border-left: 0; padding-top: 26px; }
  .v21-bins .bi { padding: 13px 0; }
}

/* The closing link sits below the teal resolution rather than inside it, so a
   teal link is not set on a teal sentence. */
.v21-verdictline .vl__link { margin: 18px 0 0; font-family: var(--fs); font-size: var(--size-body-sm); }
@media (min-width: 781px) { .v21-verdictline .vl__link { text-align: center; } }

/* The closing statements grew from one sentence each to three, so they take a
   wider measure and a step down in size - a 46ch column of 24px serif reads
   as a pull quote rather than as explanation. */
/* Three-sentence closings, so a wider measure and looser leading than the
   one-sentence variant: the paragraph widens, the section frame does not. */
.v21-verdictline--prose .vl__a, .v21-verdictline--prose .vl__b {
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.58; max-width: 72ch;
}
.v21-verdictline--prose .vl__b { margin-top: 24px; }

/* ---- Leadership / adjacent-mechanism matrix ------------------------------
   Shared: leadership.html and existing-controls.html both use these rows. */
/* Leadership matrix: one row per leadership function, question first.
   Discipline accent on the row edge so the security / governance / both
   taxonomy the homepage teaches carries through. */
.lm { margin-top: 40px; border-top: 1px solid var(--rule); }
.lm__row {
  display: grid; grid-template-columns: 21ch 1fr; gap: 0 44px;
  padding: 26px 0 26px 16px; border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid transparent;
}
.lm__row--sec { border-left-color: var(--security); }
.lm__row--gov { border-left-color: var(--amber-deep); }
.lm__row--both { border-left-color: var(--teal); }
.lm__who { font-family: var(--fr); font-size: var(--size-h4); line-height: var(--leading-snug); color: var(--ink); margin: 0; }
.lm__disc { display: block; margin-top: 6px; font-family: var(--fm); font-size: var(--size-eyebrow); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-soft); }
.lm__row--sec .lm__disc { color: var(--security); }
.lm__row--gov .lm__disc { color: var(--amber-deep); }
.lm__row--both .lm__disc { color: var(--teal); }
.lm__q { font-family: var(--fr); font-weight: 500; font-size: var(--size-h3); line-height: 1.4; color: var(--ink); margin: 0; text-wrap: pretty; }
.lm__n { font-family: var(--fs); font-size: var(--size-body-sm); line-height: var(--leading-normal); color: var(--ink-soft); margin: 9px 0 0; max-width: 66ch; }
.lm__foot { font-family: var(--fs); font-size: var(--size-body); line-height: var(--leading-relaxed); color: var(--ink-soft); margin: 30px 0 0; max-width: 74ch; }
@media (max-width: 820px) {
  .lm__row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0 22px 14px; }
  .lm__q { font-size: var(--size-h4); }
}


/* State hook used by industry.js and by static posture panels: without this
   rule every posture renders at once and the toggle appears inert. */
.is-hidden { display: none !important; }
/* v9: Authority-in-force comparison. This is intentionally a second reading of
   the existing commitment-boundary figure, not a new process diagram. The fixed
   path is shown once; only the authority state and answer change. */
.authority-shift {
  margin: 6px 0 0;
  padding: 32px 0 34px;
  border-top: 1px solid var(--rule);
}
.authority-shift__head { max-width: 72ch; }
.authority-shift__k,
.authority-shift__same-k,
.authority-shift__when {
  display: block;
  font-family: var(--fs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.authority-shift__k { color: var(--teal); margin-bottom: 10px; }
.authority-shift__head h3 {
  margin: 0;
  font-family: var(--fr);
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 500;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.authority-shift__head p {
  margin: 12px 0 0;
  font-family: var(--fs);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 68ch;
}
.authority-shift__same {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 26px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.authority-shift__same-k { color: var(--ink-mute); padding-top: 3px; }
.authority-shift__same-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
}
.authority-shift__same-items span {
  font-family: var(--fs);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.authority-shift__states {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 22px;
}
.authority-shift__state { padding: 4px 24px 0; }
.authority-shift__state:first-child { padding-left: 0; }
.authority-shift__state:last-child { padding-right: 0; }
.authority-shift__when { color: var(--ink-mute); margin-bottom: 16px; }
.authority-shift__limit,
.authority-shift__answer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-family: var(--fs);
}
.authority-shift__limit { padding: 0 0 15px; }
.authority-shift__limit span,
.authority-shift__answer span { font-size: 12.5px; color: var(--ink-soft); }
.authority-shift__limit strong {
  font-family: var(--fr);
  font-size: 25px;
  font-weight: 500;
  color: var(--ink);
}
.authority-shift__boundary {
  position: relative;
  padding: 15px 0 16px;
  border-top: 1.6px solid var(--teal);
  border-bottom: 1px solid var(--rule);
}
.authority-shift__boundary span {
  display: block;
  font-family: var(--fs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.authority-shift__boundary small {
  display: block;
  margin-top: 6px;
  font-family: var(--fs);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.authority-shift__answer { padding-top: 16px; }
.authority-shift__answer strong {
  font-family: var(--fs);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.authority-shift__answer--permit strong { color: var(--decision-permit); }
.authority-shift__answer--block strong { color: var(--decision-block); }
.authority-shift__change {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 35px 10px 0;
  color: var(--teal);
  text-align: center;
}
.authority-shift__change span {
  font-family: var(--fs);
  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.authority-shift__change b {
  font-family: var(--fs);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.authority-shift__close {
  margin: 25px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--fs);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 76ch;
}
@media (max-width: 780px) {
  .authority-shift { padding-top: 28px; }
  .authority-shift__same { grid-template-columns: 1fr; gap: 10px; }
  .authority-shift__same-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  .authority-shift__states { grid-template-columns: 1fr; gap: 0; }
  .authority-shift__state { padding: 22px 0 0; }
  .authority-shift__change { padding: 22px 0 4px; flex-direction: row; justify-content: flex-start; text-align: left; }
  .authority-shift__change b { transform: rotate(90deg); font-size: 18px; }
  .authority-shift__state--after { padding-top: 18px; }
}
@media (max-width: 480px) {
  .authority-shift__same-items { grid-template-columns: 1fr; }
  .authority-shift__limit strong { font-size: 23px; }
}

/* v13 industry overview and standalone industry pages */
.industry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:38px}.industry-card{display:flex;flex-direction:column;min-height:250px;padding:28px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--panel);text-decoration:none;box-shadow:var(--shadow-xs);transition:var(--transition-control)}.industry-card:hover,.industry-card:focus-visible{border-color:var(--teal);box-shadow:var(--shadow-md)}.industry-featured{margin-top:38px}.industry-featured+.industry-grid{margin-top:16px}.industry-card--featured{min-height:230px;background:linear-gradient(140deg,var(--teal-tint),var(--panel))}.industry-card__tag{font-family:var(--fm);font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px}.industry-card h2{font-family:var(--fr);font-size:clamp(25px,2.5vw,34px);font-weight:var(--weight-medium);line-height:1.15;color:var(--ink);margin:0}.industry-card p{font-family:var(--fs);font-size:var(--size-body-sm);line-height:var(--leading-relaxed);color:var(--ink-soft);max-width:68ch;margin:14px 0 24px}.industry-card__go{font-family:var(--fs);font-size:var(--size-body-sm);font-weight:var(--weight-semibold);color:var(--teal-deep);margin-top:auto}.industry-overview__note{max-width:76ch;margin-top:30px;font-size:13px;line-height:1.65;color:var(--ink-mute)}.industry-related{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px}.industry-related__link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--fs);font-size:var(--size-body-sm);font-weight:var(--weight-semibold);color:var(--teal-deep)}.page--industry-sector .indpanel{padding-top:28px}@media(max-width:760px){.industry-grid{grid-template-columns:1fr}.industry-card{min-height:0;padding:22px}.industry-card h2{font-size:26px}}

/* Public legal notice in the global footer (v25) */
.footer-legal {
  margin: 6px 0 0; font-family: var(--font-sans); font-size: 12px;
  line-height: 1.5; color: rgb(188, 184, 174); letter-spacing: 0.01em;
}
.footer-base .footer-legal { display: block; margin-top: 5px; font-size: 12px; color: rgb(188, 184, 174); }
@media (max-width: 680px) { .footer-legal { font-size: 12px; } }

/* Authority Mapping: the applying-it sequence is a pair, not a four-step pipeline (v25) */
.applysteps--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .applysteps--pair { grid-template-columns: minmax(0, 1fr); } }


/* ============================================================
   v0.9 palette (2026-09-01). Tokens carry the recolor; these are
   the role changes: gold eyebrows, one charcoal band per page,
   navy primary CTAs so Defer gold is never the generic click color,
   teal reserved for Permit and the boundary. Serif is Source Serif 4.
   ============================================================ */
h1,h2,h3,h4,.wordmark{font-family:var(--font-serif);}
h1,.page-hero h1,.home-hero h1{font-weight:var(--weight-semibold);}
.eyebrow,.eyebrow--step{color:var(--gold-deep);}
.eyebrow.arc-sec{color:var(--security);}
.eyebrow.arc-gov{color:var(--gold-deep);}
.band--ink{background:var(--charcoal);color:#eef0f3;}
.band--ink .eyebrow{color:var(--gold);}
.btn--primary,.navcta,.menu-cta{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn--primary:hover,.navcta:hover{background:#0f1d2e;border-color:#0f1d2e;color:#fff;}
.btn--secondary:hover{border-color:var(--navy);color:var(--navy);}
.textlink,.backlink,a.textlink{color:var(--navy);border-bottom-color:var(--gold);}
.textlink:hover,a.textlink:hover{color:var(--gold-deep);}
.wordmark .arc{color:var(--teal);}
.wordmark .pipe{color:var(--gold);}
.navlinks a[aria-current]{border-bottom-color:var(--gold);}
.crumb,.pagenav a{color:var(--navy-mute);}
.d-permit{color:var(--decision-permit);}.d-defer{color:var(--decision-defer);}.d-block{color:var(--decision-block);}

/* Charcoal band: contrast for elements whose own color rules beat .band--ink */
.band--ink .btn--primary{background:var(--gold);border-color:var(--gold);color:var(--charcoal);}
.band--ink .btn--primary:hover{background:#d6ac3f;border-color:#d6ac3f;color:var(--charcoal);}
.band--ink .btn--secondary{border-color:#aeb6c2;color:#eef0f3;}
.band--ink .btn--secondary:hover{border-color:var(--gold);color:var(--gold);}
.band--ink .seclede,.band--ink .spine-note,.band--ink p,.band--ink li{color:#aeb6c2;}
.band--ink h2,.band--ink h3,.band--ink .sec{color:#f4f2ec;}
.band--ink .arcpair a,.band--ink .textlink,.band--ink a.textlink{color:#eef0f3;border-color:rgba(223,229,236,0.35);border-bottom-color:var(--gold);}
.band--ink .arcpair a:hover,.band--ink .textlink:hover{color:var(--gold);}

/* Footer sits on the same charcoal as the ink band. */
footer.site{background:var(--charcoal);color:#aeb6c2;}
footer.site .fcol__k,footer.site .fcol__sub,footer.site .footer-note,footer.site .footer-legal,footer.site .footer-base{color:#8492a6;}
footer.site a{color:#dfe5ec;}
footer.site a:hover{color:var(--gold);}
footer.site .footer-brand p{color:#aeb6c2;}
footer.site .wordmark{color:#f4f2ec;}

/* Long hero headlines take a smaller size, not a wider measure (see CLAUDE.md). */
@media (min-width: 781px){
  body.page-commitment-authority .page-hero h1,
  body.page-authority-mapping .page-hero h1,
  body.page-crown-jewel .page-hero h1{max-width:26ch;font-size:clamp(40px,3.6vw,48px);}
}

/* Essay lead sentences: .prose .lead is 0-2-0 and outranks .band--ink p. */
.band--ink .prose .lead{color:#f4f2ec;}
@media (min-width: 781px){
  body.page-commitment-boundary .page-hero h1{max-width:26ch;font-size:clamp(40px,3.6vw,48px);}
}

/* ============================================================
   Research essay reading format. One continuous column of serif
   prose, no band alternation, no section chrome. Scoped to essay
   pages so the rest of the site keeps its editorial bands.
   ============================================================ */
.band--essay{background:var(--limestone);border:0;padding:0;}
.band--essay > .wrap{padding-top:0;padding-bottom:0;}
.band--essay-open > .wrap{padding-top:clamp(34px,4vw,56px);}
.band--essay:last-of-type > .wrap{padding-bottom:clamp(60px,7vw,104px);}
.band--essay .prose{max-width:34em;margin:0 auto;}
.band--essay .prose p{font-family:var(--font-serif);font-size:18.5px;line-height:1.72;color:var(--ink);margin:0 0 1.15em;text-wrap:pretty;}
.band--essay .prose .lead{font-weight:600;color:var(--ink);}
.band--essay .prose h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(25px,2.6vw,31px);line-height:1.2;margin:2.1em 0 0.7em;color:var(--ink);scroll-margin-top:90px;}
.band--essay .prose h3{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-deep);margin:2em 0 0.5em;}
.band--essay .prose h3 + p{margin-top:0;}
.band--essay .prose sup a{font-family:var(--font-sans);font-size:10.5px;font-weight:600;color:var(--gold-deep);text-decoration:none;padding:0 1px;}
.band--essay .prose sup a:hover{color:var(--ink);}
.band--essay .eyebrow{margin-bottom:6px;}
.band--essay .toc{font-family:var(--font-sans);}
.band--essay .srcs{max-width:34em;margin-left:auto;margin-right:auto;}
@media (max-width:680px){
  .band--essay .prose p{font-size:17px;line-height:1.68;}
}

/* Essay pages: one centred column for the whole document, hero included. */
body.page-commitment-boundary .page-hero{border-bottom:0;padding-bottom:0;}
body.page-commitment-boundary .page-hero > .wrap,
body.page-commitment-boundary .band--essay > .wrap{max-width:calc(34em + 56px);margin:0 auto;text-align:left;}
body.page-commitment-boundary .page-hero .crumb{margin-bottom:22px;}
body.page-commitment-boundary .page-hero h1{max-width:22ch;font-size:clamp(34px,3.4vw,44px);line-height:1.14;margin-top:10px;}
body.page-commitment-boundary .page-hero .lede{max-width:34em;font-size:18.5px;line-height:1.6;}
body.page-commitment-boundary .band--essay .prose,
body.page-commitment-boundary .band--essay .srcs{max-width:none;}
body.page-commitment-boundary .band--essay .eyebrow{display:block;}
body.page-commitment-boundary .toc{max-width:none;}
/* The figure needs more width than the reading measure; centre it and let it breathe. */
body.page-commitment-boundary #figure > .wrap{max-width:1240px;}
body.page-commitment-boundary #figure .sec,
body.page-commitment-boundary #figure .seclede{margin-left:auto;margin-right:auto;}
@media (min-width: 781px){
  body.page-commitment-boundary .page-hero h1{max-width:22ch;font-size:clamp(34px,3.4vw,44px);}
}

/* Reference apparatus stays small print inside the essay measure. */
.band--essay .prose .srcs p{font-family:var(--font-sans);font-size:12.5px;line-height:1.7;color:var(--ink-mute);margin:0 0 10px;}
.band--essay .prose .srcs p a{color:var(--ink-soft);}
.band--essay .prose .srcs p a:hover{color:var(--gold-deep);}

/* v27.1: Three disclosed case families. On desktop, make the third card span
   the row so the three-card set reads as an intentional 2+1 composition
   instead of leaving an orphan half-width card. Mobile rules remain unchanged. */
@media (min-width: 861px){
  body.page-frontier .facase > .fc:nth-child(3):last-child{grid-column:1 / -1;}
  body.page-frontier .facase > .fc:nth-child(3):last-child .fc__body,
  body.page-frontier .facase > .fc:nth-child(3):last-child .fc__q{max-width:76ch;}
}


/* ---- Nav: a second level inside a dropdown panel (2026-09-08) ------------
   Model Authority and Frontier Agentic Systems are readings of the AI focus
   area, so in the Focus areas panel they sit indented under AI Systems and
   carry the same 4px dot the mobile sheet already gives a panel child. The
   mid-list hairline that stood in for this grouping is gone: one signal, not
   two. .sub.sub2 is written at 0-3-1 so the deeper phone indent outranks
   mobile.css's .menu-panel a.sub padding regardless of sheet order. */
.navlinks .navsub__panel a.navsub__child{
  padding-left:14px;font-weight:var(--weight-regular);color:var(--ink-soft);
  display:flex;align-items:center;gap:9px;
}
.navlinks .navsub__panel a.navsub__child::before{
  content:"";flex:0 0 4px;height:4px;border-radius:999px;background:var(--rule-strong);
}
.navlinks .navsub__panel a.navsub__child:hover,
.navlinks .navsub__panel a.navsub__child:focus-visible{color:var(--ink);}
.menu-panel a.sub.sub2{padding-left:calc(var(--page-gutter, 24px) + 34px);}


/* ---- Button borders (2026-09-09) ---------------------------------------
   components.css declares .btn--primary / .btn--secondary BEFORE .btn, and
   .btn's `border: 1px solid transparent` shorthand resets border-color at
   equal specificity, so every modifier's border colour was discarded.
   Only .btn--secondary was actually affected: the primary skins are all
   re-declared later in this sheet, which loads after components.css, so
   they already win on source order. Do not add a .btn--primary border rule
   here: at 0-2-0 appended last it outranks the navy, .band--ink gold, and
   .v26-phero gold-lit primaries and rings each of them in the wrong colour. */
.btn.btn--secondary{border-color:var(--rule-strong);}
.btn.btn--secondary:hover,.btn.btn--secondary:focus-visible{border-color:var(--teal);color:var(--teal);}

/* Industry workflow panel (2026-09-16): the headline needs more air before its
   lede, and the Authority Control point reads as a separate statement, not a
   continuation of the description. */
.band:has(.indpanel) .seclede{margin-top:28px;}
/* .executive p{margin:0} loads after this sheet at 0-1-1, so the panel's own
   paragraph margins never applied. Re-declare them scoped to .indpanel (0-2-0). */
.indpanel p.indpanel__desc{margin-top:16px;}
.indpanel p.indpanel__pt{margin-top:28px;}