/* ==========================================================================
   Invariance | Arc — v26 "Instrument"
   Loads last. Product surfaces run dark; research surfaces run light.
   Depends on tokens.css for the base palette.
   ========================================================================== */

:root{
  /* dark product surface */
  --deck:#181f2a;            /* the product ground */
  --deck-deep:#121822;       /* insets, figure wells */
  --deck-rule:rgba(238,240,243,.13);
  --deck-rule-soft:rgba(238,240,243,.07);
  --on-deck:#eef0f3;
  --on-deck-soft:#aeb6c2;
  --on-deck-mute:#8492a6;
  /* accents legible on the deck */
  --teal-lit:#5aa3a3;
  --teal-line:#3d8a8a;
  --gold-lit:#c49a2c;
  --block-lit:#cf6552;
  /* rhythm */
  --deck-pad:clamp(72px,8vw,132px);
  --lite-pad:clamp(64px,7.2vw,116px);
  --measure:66ch;
}

/* --------------------------------------------------------------------------
   1. Surfaces
   -------------------------------------------------------------------------- */
.deck{background:var(--deck);color:var(--on-deck);}
.deck-deep{background:var(--deck-deep);color:var(--on-deck);}
.lite{background:var(--limestone);color:var(--ink);}
.lite-panel{background:var(--panel);color:var(--ink);}
.deck + .lite,.lite + .deck{border-top:0;}
.lite + .lite,.lite + .lite-panel,.lite-panel + .lite{border-top:1px solid var(--rule);}
.v26-band{padding:var(--lite-pad) 0;}
.deck.v26-band{padding:var(--deck-pad) 0;}
.v26-wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.v26-wrap--narrow{max-width:1020px;}

/* --------------------------------------------------------------------------
   2. Type roles
   -------------------------------------------------------------------------- */
.v26-eyebrow{display:block;font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 16px;}
.deck .v26-eyebrow{color:var(--gold-lit);}
.v26-eyebrow--teal{color:var(--teal);}
.deck .v26-eyebrow--teal{color:var(--teal-lit);}

/* 21ch, not 17: at the widths this site is reviewed at the hero column is ~414px
   and a 17ch cap left 115px unused, breaking the headline into four lines with
   "effect." orphaned. The column governs the measure; the cap only guards very
   wide viewports. text-wrap computes to balance here and will not defeat a
   narrow measure on its own. */
.v26-display{font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,3.9vw,62px);
  line-height:1.04;letter-spacing:-.015em;margin:0;max-width:21ch;text-wrap:balance;}
.v26-h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(27px,3vw,40px);
  line-height:1.14;letter-spacing:-.01em;margin:0;max-width:26ch;text-wrap:balance;}
.v26-h3{font-family:var(--font-serif);font-weight:500;font-size:clamp(20px,2vw,25px);
  line-height:1.24;margin:0;max-width:32ch;}
.v26-lede{font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.65;color:var(--ink-soft);
  max-width:52ch;margin:0;text-wrap:pretty;}
.deck .v26-lede{color:var(--on-deck-soft);}
.v26-body{font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:var(--measure);margin:0;text-wrap:pretty;}
.deck .v26-body{color:var(--on-deck-soft);}
.v26-note{font-size:13.5px;line-height:1.65;color:var(--ink-mute);max-width:74ch;margin:0;}
.deck .v26-note{color:var(--on-deck-mute);}
.deck .v26-h2,.deck .v26-h3,.deck .v26-display{color:var(--on-deck);}

/* the statement: one per band, serif, gold. Replaces the centered mini-headline. */
.v26-stmt{font-family:var(--font-serif);font-weight:500;font-size:clamp(21px,2.3vw,29px);
  line-height:1.32;color:var(--gold-deep);max-width:34ch;margin:0;text-wrap:balance;}
.deck .v26-stmt{color:var(--gold-lit);}

/* --------------------------------------------------------------------------
   3. Links and controls on the deck
   -------------------------------------------------------------------------- */
.v26-link{display:inline-block;font-family:var(--font-sans);font-size:14.5px;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px;text-decoration:none;
  transition:border-color .18s ease,color .18s ease;}
.v26-link:hover{color:var(--gold-deep);border-bottom-color:var(--gold-deep);}
.deck .v26-link{color:var(--on-deck);border-bottom-color:var(--gold-lit);}
.deck .v26-link:hover{color:var(--gold-lit);}
.v26-btn{display:inline-flex;align-items:center;min-height:48px;padding:13px 26px;border-radius:4px;
  background:var(--gold);color:var(--navy);font-family:var(--font-sans);font-size:15px;font-weight:600;
  text-decoration:none;transition:background .18s ease;}
.v26-btn:hover{background:var(--gold-deep);color:#fff;}
.v26-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;}

/* --------------------------------------------------------------------------
   4. The lane — the recurring structural row. Replaces cards.
   -------------------------------------------------------------------------- */
/* The tracks belong to the GROUP, not to each row. Sized per row, the auto
   third track took 88px from the Runtime question and wrapped it while its three
   siblings held one line. The lane is the site's recurring row, so its columns
   have to agree down a group. */
.v26-lanes{display:grid;gap:0;margin:0;padding:0;list-style:none;
  grid-template-columns:minmax(140px,200px) minmax(0,1fr) minmax(0,auto);}
.v26-lane{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;
  gap:12px 32px;align-items:baseline;padding:19px 0;border-top:1px solid var(--rule);}
@supports not (grid-template-columns:subgrid){
  @media (min-width:681px){
    .v26-lane{grid-template-columns:minmax(140px,200px) minmax(0,1fr) minmax(0,240px);}
  }
}
.v26-lanes > .v26-lane:last-child{border-bottom:1px solid var(--rule);}
/* A group that hands straight to a block with its own head rule must not add a
   second one: two parallel rules with an empty band between them read as a
   stray table row. One hairline per transition. */
.v26-lanes:has(+ .v26-rise) > .v26-lane:last-child{border-bottom:0;}
.deck .v26-lane{border-top-color:var(--deck-rule);}
.deck .v26-lanes > .v26-lane:last-child{border-bottom-color:var(--deck-rule);}
.v26-lane__k{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);}
.deck .v26-lane__k{color:var(--on-deck-mute);}
.v26-lane__v{font-family:var(--font-serif);font-size:clamp(17px,1.7vw,20px);line-height:1.35;color:var(--ink);}
.deck .v26-lane__v{color:var(--on-deck);}
.v26-lane__n{font-size:14px;line-height:1.6;color:var(--ink-soft);}
.deck .v26-lane__n{color:var(--on-deck-soft);}
/* the authority lane: the one that carries the rule */
.v26-lane--authority{border-top-width:1.6px;border-top-color:var(--teal);}
.deck .v26-lane--authority{border-top-color:var(--teal-line);}
.v26-lane--authority .v26-lane__k{color:var(--teal-deep);}
.deck .v26-lane--authority .v26-lane__k{color:var(--teal-lit);}
.v26-lane--authority .v26-lane__v{color:var(--ink);font-weight:500;}
.deck .v26-lane--authority .v26-lane__v{color:var(--on-deck);}

/* --------------------------------------------------------------------------
   5. The record — determinations set as a ledger
   -------------------------------------------------------------------------- */
.v26-record{margin:0;}
.v26-record__head,.v26-record__row{display:grid;
  grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) minmax(0,1.6fr) 108px;gap:14px 28px;}
.v26-record__head{padding:0 0 11px;border-bottom:1.5px solid var(--ink);
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color: var(--ink-soft);}
.deck .v26-record__head{border-bottom-color:var(--on-deck);color:var(--on-deck-mute);}
.v26-record__row{padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.deck .v26-record__row{border-bottom-color:var(--deck-rule);}
.v26-record__actor{font-size:14px;color:var(--ink-soft);}
.deck .v26-record__actor{color:var(--on-deck-soft);}
.v26-record__what{font-family:var(--font-serif);font-size:19px;line-height:1.3;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.deck .v26-record__what{color:var(--on-deck);}
.v26-record__why{font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
.deck .v26-record__why{color:var(--on-deck-soft);}
.v26-det{justify-self:end;font-family:var(--font-sans);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;}
.v26-det--permit{color:var(--decision-permit);}
.v26-det--defer{color:var(--decision-defer-text);}
.v26-det--block{color:var(--decision-block);}
.deck .v26-det--permit{color:var(--teal-lit);}
.deck .v26-det--defer{color:var(--gold-lit);}
.deck .v26-det--block{color:var(--block-lit);}

/* --------------------------------------------------------------------------
   6. The line field — the identity figure
   -------------------------------------------------------------------------- */
.v26-field{position:relative;width:100%;}
.v26-field svg{display:block;width:100%;height:auto;overflow:visible;}
.v26-field__cap{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--on-deck-mute);max-width:56ch;}
.v26-key{display:flex;flex-wrap:wrap;gap:8px 26px;margin:18px 0 0;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;}
.v26-key span{display:inline-flex;align-items:center;gap:8px;color:var(--on-deck-mute);}
.v26-key i{width:16px;height:0;border-top:1.6px solid currentColor;font-style:normal;}
.v26-key .k-permit{color:var(--teal-lit);}
.v26-key .k-defer{color:var(--gold-lit);}
.v26-key .k-block{color:var(--block-lit);}

/* --------------------------------------------------------------------------
   7. Industry plate — photograph beside the reading (composition from 1b)
   -------------------------------------------------------------------------- */
.v26-plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
.v26-plate__img{position:relative;min-height:clamp(320px,44vw,540px);background:var(--deck-deep);
  background-size:cover;background-position:center;overflow:hidden;}
/* Photography sits quiet beside limestone, per the system's imagery note: held
   back in saturation rather than converted to greyscale, so the infrastructure
   still reads as real. No scrim, because the reading column sits beside the
   plate rather than over it. */
.v26-plate__img{filter:saturate(.58) contrast(1.04);}
.v26-plate__brief{position:absolute;inset:auto 0 0 0;z-index:1;padding:24px 28px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.9;color:var(--on-deck-mute);}
.v26-plate__body{padding:clamp(38px,4.6vw,68px) clamp(28px,4vw,60px);display:flex;
  flex-direction:column;gap:18px;justify-content:center;}
.v26-plate--flip .v26-plate__img{order:2;}

/* industry masthead: plate beside the reading, full bleed */
.v26-ihero{border-bottom:1px solid var(--rule);}
.v26-ihero .v26-plate__img{min-height:clamp(280px,38vw,470px);}
.v26-ihero .v26-plate__body{background:var(--limestone);}
.v26-ihero .crumb{font-size:12px;color: var(--ink-soft);}
.v26-ihero .crumb a{color:var(--ink-soft);}
.v26-ihero .crumb a:hover{color:var(--teal-deep);}
@media (max-width:900px){.v26-ihero .v26-plate__img{min-height:210px;}}

/* --------------------------------------------------------------------------
   8. Research surfaces — apparatus rail, never dark
   -------------------------------------------------------------------------- */
body.is-research{background:var(--limestone);}
.v26-rsrch{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);
  gap:clamp(30px,4.4vw,72px);align-items:start;}
.v26-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;
  font-size:13px;line-height:1.55;color:var(--ink-soft);}
.v26-rail__k{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color: var(--ink-soft);}
.v26-rail__meta{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;}
.v26-rail__meta dt{color:var(--ink-mute);margin:0;}
.v26-rail__meta dd{margin:0;color:var(--ink);}
.v26-rail__toc{display:flex;flex-direction:column;border-top:1px solid var(--rule);}
.v26-rail__toc a{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft);
  font-size:13px;color:var(--ink-soft);text-decoration:none;}
.v26-rail__toc a:hover{color:var(--teal-deep);}
.v26-rail__toc a b{color:var(--ink-mute);font-weight:400;font-variant-numeric:tabular-nums;min-width:20px;}
.v26-abstract{border-top:1.6px solid var(--teal);padding-top:20px;margin-top:6px;}
.v26-abstract p{font-family:var(--font-serif);font-size:18px;line-height:1.66;color:var(--ink);
  margin:0;max-width:64ch;}
.v26-prose{font-family:var(--font-serif);font-size:17.5px;line-height:1.72;color:var(--ink);max-width:64ch;}
.v26-prose p{margin:0 0 1.1em;}
.v26-pull{font-family:var(--font-serif);font-size:clamp(22px,2.4vw,30px);line-height:1.3;
  color:var(--ink);border-left:1.6px solid var(--teal);padding-left:26px;margin:38px 0;max-width:36ch;}
@media (max-width:900px){.v26-rsrch{grid-template-columns:1fr;}.v26-rail{position:static;}}

/* product masthead on the deck */
.v26-phero{background:var(--deck)!important;color:var(--on-deck);border-bottom:0!important;
  padding:clamp(52px,6vw,92px) 0 clamp(46px,5.4vw,80px)!important;}
.v26-phero::before,.v26-phero::after{display:none!important;}
.v26-phero .crumb,.v26-phero .crumb a{color:var(--on-deck-mute);}
.v26-phero .crumb a:hover{color:var(--teal-lit);}
.v26-phero .eyebrow{color:var(--gold-lit);}
.v26-phero h1{color:var(--on-deck);font-weight:400;letter-spacing:-.015em;}
@media (min-width:781px){.v26-phero h1{max-width:22ch;font-size:clamp(32px,3.8vw,52px);}}
.v26-phero .lede,.v26-phero .seclede,.v26-phero p{color:var(--on-deck-soft);}
.v26-phero a:not(.crumb a){color:var(--on-deck);}
.v26-phero .textlink,.v26-phero .backlink{color:var(--on-deck);border-bottom-color:var(--gold-lit);}
.v26-phero .btn--primary{background:var(--gold-lit);border-color:var(--gold-lit);color:var(--navy);}
.v26-phero + .pagenav{background:var(--deck)!important;border-bottom:1px solid var(--deck-rule)!important;}
.v26-phero + .pagenav a,.v26-phero + .pagenav .wrap a{color:var(--on-deck-soft);}
.v26-phero + .pagenav a:hover{color:var(--teal-lit);}

/* research masthead */
body.is-research .page-hero{background:var(--limestone);}
body.is-research .page-hero::before,body.is-research .page-hero::after{display:none;}
body.is-research .page-hero .eyebrow,body.is-research .eyebrow{color:var(--teal-deep);}
@media (min-width:781px){
  body.is-research .page-hero h1{max-width:22ch;font-size:clamp(32px,3.8vw,52px);}
}

.v26-rmast{background:var(--panel);border-bottom:1px solid var(--rule);
  padding:clamp(28px,3.4vw,44px) 0 clamp(34px,4vw,56px);}
.v26-rmast .crumb{font-size:12px;color: var(--ink-soft);}
.v26-rmast .crumb a{color:var(--ink-soft);}
.v26-rmast__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);
  gap:clamp(26px,4vw,64px);align-items:end;}
.v26-rmast__h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(34px,4.2vw,58px);
  line-height:1.05;letter-spacing:-.018em;margin:14px 0 0;max-width:17ch;color:var(--ink);text-wrap:balance;}
.v26-rmast__sub{font-family:var(--font-serif);font-size:clamp(19px,2.1vw,24px);line-height:1.32;
  color:var(--ink-soft);margin:16px 0 0;max-width:40ch;}
.v26-rmast__meta{border-left:1px solid var(--rule);padding-left:26px;font-size:13px;line-height:1.5;}
.v26-rmast__standfirst{margin:clamp(26px,3vw,40px) 0 0;padding-top:20px;border-top:1.6px solid var(--teal);
  font-family:var(--font-serif);font-size:18px;line-height:1.65;color:var(--ink);max-width:64ch;}
@media (max-width:820px){.v26-rmast__grid{grid-template-columns:1fr;align-items:start;}
  .v26-rmast__meta{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:16px;}}

/* fixed contents rail, wide viewports only */
.v26-toc{display:none;}
@media (min-width:1280px){
  .v26-toc{display:flex;flex-direction:column;gap:0;position:fixed;left:26px;top:50%;
    transform:translateY(-50%);width:186px;z-index:20;opacity:0;pointer-events:none;
    transition:opacity .3s ease;}
  .v26-toc.is-on{opacity:1;pointer-events:auto;}
  .v26-toc .v26-rail__k{margin-bottom:8px;}
  .v26-toc a{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:7px 0;
    border-top:1px solid var(--rule);font-size:12.5px;line-height:1.4;color:var(--ink-mute);
    text-decoration:none;transition:color .18s ease,border-color .18s ease;}
  .v26-toc a:last-child{border-bottom:1px solid var(--rule);}
  .v26-toc a b{font-weight:400;font-variant-numeric:tabular-nums;}
  .v26-toc a:hover{color:var(--ink);}
  .v26-toc a.is-here{color:var(--ink);border-top-color:var(--teal);}
  .v26-toc a.is-here b{color:var(--teal-deep);}
}

/* essay reading surfaces */
body.is-research .band--essay-open .prose > p:first-of-type{font-family:var(--font-serif);
  font-size:18.5px;line-height:1.66;color:var(--ink);}
body.is-research .band--essay .prose{max-width:66ch;}
body.is-research .band--ink{background:var(--deck);}

/* --------------------------------------------------------------------------
   9. Motion — one language, off under reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js .v26-rise:not(.is-in){opacity:0;transform:translateY(12px);}
  .js .v26-rise{
    transition:opacity .62s cubic-bezier(.4,0,.2,1),transform .62s cubic-bezier(.4,0,.2,1);}
  .js .v26-rise.is-in{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .v26-rise{opacity:1;transform:none;}
}

/* --------------------------------------------------------------------------
   10. Header and footer on the deck
   -------------------------------------------------------------------------- */
/* The masthead is the deck's own ground, not a transparent overlay: at scroll 0
   there is nothing behind the header but the cream page, and light nav type
   would sit on it. */
body.is-deck-top header.site{background:var(--deck);border-bottom:1px solid var(--deck-rule);}
body.is-deck-top header.site .wordmark,
body.is-deck-top header.site .navlinks > a,
body.is-deck-top header.site .navsub > a{color:var(--on-deck);}
body.is-deck-top header.site .navlinks a:hover,
body.is-deck-top header.site .navsub > a:hover{color:var(--teal-lit);}
body.is-deck-top header.site .wordmark .pipe{color:var(--gold-lit);}
body.is-deck-top header.site .wordmark .arc{color:var(--teal-lit);}
footer.site .wordmark .arc{color:var(--teal-lit);}
body.is-deck-top header.site .navcta{color:var(--on-deck);border-color:var(--deck-rule);}
body.is-deck-top header.site .menu summary{color:var(--on-deck);}
body.is-deck-top header.site .bars span,
body.is-deck-top header.site .bars span::before,
body.is-deck-top header.site .bars span::after{background:var(--on-deck);}
body.is-deck-top.is-scrolled header.site{background:color-mix(in srgb,var(--deck) 94%,transparent);
  backdrop-filter:blur(6px);}
/* the design-partners pill reads as a hole on the deck unless it is filled */
body.is-deck-top header.site .navcta{background:transparent;border:1px solid rgba(238,240,243,.34);}
body.is-deck-top header.site .navcta:hover{border-color:var(--teal-lit);color:var(--teal-lit);}

footer.site{background:var(--deck);color:var(--on-deck-soft);border-top:0;}
footer.site .wordmark{color:var(--on-deck);}
footer.site .wordmark .pipe{color:var(--gold-lit);}
footer.site .footer-brand p{color:var(--on-deck-mute);}
footer.site .fcol__k,footer.site .fcol__sub{color:var(--on-deck-mute);}
footer.site a{color:var(--on-deck-soft);}
footer.site a:hover{color:var(--teal-lit);}
footer.site .footer-note{color:var(--on-deck-mute);border-top-color:var(--deck-rule);}
footer.site .footer-legal{color:var(--on-deck-mute);border-top:0;margin-top:6px;padding-top:0;}
@media (min-width:781px){
  footer.site .footer-note{display:flex;gap:8px 28px;flex-wrap:wrap;align-items:baseline;}
  footer.site .footer-legal{margin:-1.15em 0 0;padding:0;text-align:right;}
}
footer.site .footer-grid{border-top:0;}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .v26-plate{grid-template-columns:1fr;}
  .v26-plate--flip .v26-plate__img{order:0;}
  .v26-record__head{display:none;}
  .v26-record__row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 0;}
  .v26-record__actor{grid-column:1;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;}
  .v26-record__what{grid-column:1;font-size:18px;}
  .v26-record__why{grid-column:1;}
  .v26-det{grid-column:2;grid-row:1 / span 3;align-self:center;}
}
@media (max-width:680px){
  .v26-lanes{grid-template-columns:1fr;}
  .v26-lane{gap:5px;padding:15px 0;}
  .v26-display{font-size:clamp(32px,9vw,42px);max-width:none;}
  .v26-h2{font-size:clamp(24px,6.6vw,30px);}
  .v26-plate__brief{padding:18px 20px;letter-spacing:.1em;}
  .v26-pull{padding-left:18px;margin:28px 0;}
}

/* --------------------------------------------------------------------------
   12. Homepage compositions. Inline grid declarations on these blocks would
   outrank a media query, so the columns live here, not in the markup.
   -------------------------------------------------------------------------- */
.v26-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,4vw,72px);align-items:start;}
.v26-split--wide{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end;}
.v26-statrow{grid-column:1 / -1;display:grid;grid-template-columns:130px minmax(0,3fr) minmax(0,4fr);
  gap:18px 36px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.v26-triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
.v26-fieldlist{display:none;}
.v26-field-mobile{display:none;}
.v26-field-mobile svg{display:block;width:100%;height:auto;}

@media (max-width:900px){
  .v26-split,.v26-split--wide{grid-template-columns:1fr;gap:22px;}
  .v26-statrow{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  .v26-triad{grid-template-columns:1fr;}
  .v26-triad > div{padding:14px 0 16px!important;}
}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,7fr);
  gap:clamp(34px,4.4vw,68px);align-items:center;}
@media (max-width:780px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
}
/* Measured swap, not a chosen one. The field renders at (viewport - 56) x 7/13
   against a 660-unit viewBox; a 14-unit lane label only clears the site's 11px
   floor once the field is about 530px wide, i.e. a ~1040px viewport. Below that
   the same four determinations are read as a list. */
@media (max-width:1040px){
  .v26-field,.v26-key{display:none;}
  .v26-fieldlist{display:block;margin:0;padding:0;list-style:none;}
  .v26-fieldlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;
    padding:15px 0;border-top:1px solid var(--deck-rule);align-items:center;}
  .v26-fieldlist li:last-child{border-bottom:1px solid var(--deck-rule);}
  .v26-fieldlist span{grid-column:1;font-size:11px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--on-deck-mute);}
  .v26-fieldlist b{grid-column:1;font-family:var(--font-serif);font-size:17px;font-weight:400;
    line-height:1.3;color:var(--on-deck);}
  .v26-fieldlist em{grid-column:2;grid-row:1 / span 2;font-style:normal;}
}
@media (max-width:780px){
  .v26-fieldlist{display:none;}
  .v26-field-mobile{display:block;margin:2px 0 0;padding:4px 0 0;}
}
@media (max-width:1040px) and (min-width:781px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}

/* The crossing strands are where activity combines across branches, so they
   carry directional travel as well as the route drift every strand has.
   Dasharray period is 17, so the offset loops on a multiple of it and the
   pattern never jumps. */
.acp-cross{stroke-dasharray:10 7;}
@media (prefers-reduced-motion:no-preference){
  .acp-cross{animation:acpFlow 2.4s linear infinite;}
}
@media (prefers-reduced-motion:reduce){
  .acp-cross{stroke-dasharray:none;}
}
@keyframes acpFlow{to{stroke-dashoffset:-17;}}

/* Section 06's five blocks were v09 markup carrying their tracks inline, so no
   media query could collapse them and they held two columns down to 390px.
   Same trap as the v09 hero. Tracks live here now. */
.v26-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(24px,3vw,52px);}
@media (max-width:900px){.v26-pair{grid-template-columns:1fr;gap:8px;}}

/* The three v09 sections still ran centered heading over centered prose, the
   brief's first-named AI pattern. Ranged left here rather than in a style
   attribute: on this codebase layout never lives inline. Figures and their
   captions keep their centered composition; only the reading text moves. */
.v26-ranged{text-align:left;}
.v26-ranged > h1,.v26-ranged > h2,.v26-ranged > h3,.v26-ranged > p,
p.v26-ranged{margin-left:0;margin-right:0;}

/* Applications rows. The two children carried inline grid-column, which creates an
   implicit second track even against a single-1fr template, so the collapse rule
   could never win and the rows held two ~140px columns at 390px. Tracks and column
   assignment both live here now. */
.v26-pair__k{grid-column:1;display:grid;justify-items:end;text-align:right;
  padding-right:clamp(28px,4vw,54px);}
.v26-pair__v{grid-column:2;padding:40px 0 0 clamp(28px,4vw,54px);}
.v26-pair__hk{grid-column:1;text-align:right;padding:0 clamp(28px,4vw,54px) 12px 0;
  border-bottom:1px solid var(--rule);}
.v26-pair__hv{grid-column:2;padding:0 0 12px clamp(28px,4vw,54px);
  border-bottom:1px solid var(--rule);}
/* the shared boundary axis and its row nodes */
.v26-axis,.v26-node{position:absolute;left:50%;}
.v26-axis{top:6px;bottom:6px;width:1px;background:var(--teal);opacity:.34;}
.v26-node{top:14px;transform:translateX(-50%);width:11px;height:11px;
  border:1.5px solid var(--teal);border-radius:50%;background:var(--panel);}
@media (max-width:900px){
  .v26-pair__k,.v26-pair__v,.v26-pair__hk,.v26-pair__hv{grid-column:1;}
  .v26-pair__k{justify-items:start;text-align:left;padding:0 0 4px;}
  .v26-pair__v{padding:14px 0 0;}
  .v26-pair__hv{display:none;}
  .v26-pair__hk{text-align:left;padding:0 0 12px;}
  /* the axis sits at the horizontal centre, which lands mid-text once stacked */
  .v26-axis,.v26-node{display:none;}
}

/* Industries index. clarity.css gives the featured card a linear-gradient, which
   the system prohibits outright; v26.css loads last so the flat surface is
   asserted here rather than by editing the older sheet. The cards also take the
   deep-dive plate's composition, photograph beside reading column, so the hub
   and its children share one vocabulary. */
.industry-card,.industry-card--featured{background:var(--panel);box-shadow:none;
  display:grid;grid-template-columns:minmax(0,186px) minmax(0,1fr);
  padding:0;overflow:hidden;align-items:stretch;min-height:0;}
.industry-card--featured{grid-template-columns:minmax(0,44%) minmax(0,1fr);}
.industry-card__img{background-size:cover;background-position:center;
  filter:saturate(.58) contrast(1.04);min-height:214px;}
.industry-card--featured .industry-card__img{min-height:268px;}
.industry-card__body{display:flex;flex-direction:column;padding:26px 28px 24px;}
.industry-card:hover{border-color:var(--teal);}
@media (max-width:900px){
  .industry-card,.industry-card--featured{grid-template-columns:minmax(0,140px) minmax(0,1fr);}
  .industry-card__img,.industry-card--featured .industry-card__img{min-height:170px;}
}
@media (max-width:680px){
  .industry-card,.industry-card--featured{grid-template-columns:1fr;}
  .industry-card__img,.industry-card--featured .industry-card__img{min-height:148px;}
  .industry-card__body{padding:20px 22px 22px;}
}

/* about.html principle statements. The page carries two, and the research-
   foundation rebuild gave one of them the homepage's statement treatment while
   the other stayed a default blockquote. Both take the same treatment so the
   page states a principle one way. Scoped to this page: elsewhere blockquote
   is a quotation, not a statement. */
body.page-about blockquote{margin:clamp(28px,3.2vw,42px) 0 0;padding:0;border:0;
  font-family:var(--font-serif);font-size:clamp(21px,2.3vw,29px);font-weight:500;
  line-height:1.32;color:var(--gold-deep);max-width:34ch;font-style:normal;
  text-wrap:balance;}


/* ============================================================
   Authority figures — .acbfig / .acbrec (2026-09-05)
   Namespace note: .acfig / .acfig-m is ALREADY TAKEN by the
   how-it-works evaluation figure in clarity.css (which swaps at
   780px and owns .acfig svg, .acfig__cap, .acfig__scroll,
   .acfig__hint, .acfig h3). These figures are a different
   component and use .acbfig / .acbrec so nothing layers on it.
   Each figure ships a desktop drawing and a portrait sibling;
   the swap is at 680px, matching every other wide diagram.
   The display rules are written .acbfig svg.acbfig__mob, NOT
   .acbfig__mob — a type-qualified .acbfig svg rule (0-1-1) beats
   a bare class (0-1-0) at any source order, which is the same
   trap already recorded for .acv-view .figure > svg.
   Labels carry stroke:var(--limestone) + paint-order:stroke, so
   the seven to nine converging flow lines never cut type.
   ============================================================ */
.acbfig{margin:36px 0 0;max-width:none}
.acbfig svg{display:block;width:100%;height:auto}
.acbfig svg.acbfig__mob{display:none}
.acbfig figcaption{margin-top:18px;font-family:var(--font-sans);font-size:var(--size-body-sm);line-height:1.6;color:var(--acb-mute);max-width:78ch}
.acbfig__lede{margin:24px 0 0;font-family:var(--font-serif);font-weight:400;font-size:var(--size-h3);line-height:1.38;color:var(--ink);max-width:46ch}
.acbrec{margin-top:28px}
.acbrec__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:11px;border-bottom:1px solid var(--teal)}
.acbrec__k{font-family:var(--font-sans);font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--teal)}
.acbrec__say{font-family:var(--font-sans);font-size:var(--size-body-sm);color:var(--ink-soft)}
.acbrec__grid{display:grid;grid-template-columns:104px minmax(0,1fr) 116px 128px;gap:0 18px;align-items:center}
.acbrec__hd{padding:11px 2px 9px;border-bottom:1px solid var(--rule);font-family:var(--font-sans);font-size:var(--size-eyebrow);font-weight:600;letter-spacing:0.12em;color:var(--acb-mute)}
.acbrec__row{padding:12px 2px}
.acbrec__t,.acbrec__id{font-family:var(--font-sans);font-size:var(--size-caption);letter-spacing:0.03em;color:var(--acb-mute)}
.acbrec__r{font-family:var(--font-sans);font-size:var(--size-body-dense);color:var(--ink-soft)}
.acbrec__note{margin:0;padding-top:12px;border-top:1px solid var(--rule-soft);font-family:var(--font-sans);font-size:var(--size-body-sm);line-height:1.6;color:var(--acb-mute);max-width:82ch}
/* Measured swap, not a chosen one. Content width is min(vw,1240) - 56, and the
   desk viewBox is 948 units (frontier) / 910 (existing-controls), so an 11-unit
   label only reaches the site's 11px floor once the column is >= 948px, i.e. a
   ~1004px viewport. Below 1010px the portrait sibling is the reading, capped at
   460px so it does not balloon on a laptop. Same method as the .fa-svg swap at
   1180px; 1024 and 1152 laptops get the spine, deliberately. */
.acbfig svg.acbfig__mob{max-width:460px}
/* The label halo has to match the band the figure sits on, not the page. These
   two figures land on section.band (transparent, so the page limestone) and on
   .band--cool, which is rgb(241,245,244) — a cream halo there erases each strand
   crossing to a visibly warm gap. Every knockout stroke and every ground-coloured
   fill in both drawings reads --acb-knockout. */
/* Two ground-dependent tiers, both declared here so a new label cannot miss them.
   --acb-mute is the caption/sub-label tier. On the page limestone it is the design
   system's documented caption colour; on .band--cool (rgb(241,245,244)) --ink-mute
   measures 2.92:1, so it steps to --ink-soft (6.18:1), which is what the band's own
   seclede and .dim copy already use. Same intent as the .v21-band--cool step-up in
   clarity.css, which these class names are not in. */
.acbfig,.acbrec{--acb-knockout:var(--limestone);--acb-mute:var(--ink-mute)}
.band--cool .acbfig,.band--cool .acbrec{--acb-knockout:#f1f5f4;--acb-mute:var(--ink-soft)}
@media (max-width:1010px){
  .acbfig svg.acbfig__desk{display:none}
  .acbfig svg.acbfig__mob{display:block}
}
@media (max-width:680px){
  .acbfig{margin:26px 0 0;padding:0}
  .acbfig figcaption{margin-top:14px;font-size:13px}
  .acbfig__lede{font-size:19px;line-height:1.42}
  .acbrec__head{flex-direction:column;align-items:flex-start;gap:5px}
  .acbrec__hd{display:none}
  .acbrec__grid{grid-template-columns:1fr;gap:9px 0}
  .acbrec__row{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
  .acbrec__row > span[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:var(--size-eyebrow);font-weight:600;letter-spacing:0.12em;color:var(--acb-mute)}
}


/* ============================================================
   Swipe rail — .v26-swipe (2026-09-05)
   The site-wide pattern for a set of peer items that will not
   fit a phone vertically without becoming a wall. Generic on
   purpose: any group of sibling cards becomes a rail by adding
   .v26-swipe + data-v26-swipe to the parent and a
   .v26-swipe__foot sibling after it. Desktop is untouched —
   every rule here is inside the phone breakpoint.
   Affordances, all three deliberate: the cards are 300px in a
   390px viewport so the next card always peeks (the peek IS the
   swipe cue), the rail bleeds to the viewport edge with negative
   margins so the peek is not clipped by the 28px gutter, and a
   progress bar plus 01 / 04 counter says how much is behind the
   gesture. Card numbers come from a CSS counter, not markup.
   Why it exists here: #concerns is a problem/answer comparison.
   .v26-pair stacks below 900px and .v26-pair__hv is hidden, so
   the answer half lost its only label and each row read as four
   unlabelled paragraphs. Each card now carries its own gold
   "With Authority Control" label over a gold hairline, drawn
   from data-label the way .ptr-cell does.
   ============================================================ */
@media (max-width:680px){
  #concerns .v26-pair--head{display:none}
  /* The rail is a scroll container: overflow-x:auto forces overflow-y:auto, so a
     padding-bottom of 0 clipped the cards' shadow entirely and the elevation painted
     nothing. 4px top and 8px bottom give it room; the foot's margin drops by the same
     8px below, so the section's rhythm and height are unchanged. */
  .v26-swipe{display:flex;align-items:stretch;gap:14px;
    margin-left:-28px;margin-right:-28px;padding:4px 28px 8px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:28px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;counter-reset:v26swc}
  .v26-swipe::-webkit-scrollbar{display:none}
  .v26-swipe::after{content:"";flex:0 0 14px}
  .v26-swipe > .v26-pair{flex:0 0 300px;scroll-snap-align:start;counter-increment:v26swc;
    display:flex;flex-direction:column;box-sizing:border-box;
    background:var(--cream);border:1px solid var(--rule-strong);border-radius:12px;
    box-shadow:var(--shadow-md);
    padding:22px!important;margin:0!important}
  .v26-swipe > .v26-pair .v26-pair__k{padding:0!important}
  .v26-swipe > .v26-pair .v26-pair__k::before{content:"0" counter(v26swc);display:block;
    margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:0.13em;
    color:var(--gold-deep)}
  /* the answer block bottom-aligns, so every card's answer ends on the same line
     and the uneven copy lengths show up as trailing air, not ragged endings */
  .v26-swipe > .v26-pair .v26-pair__v{margin-top:auto;padding:16px 0 0!important;
    border-top:1px solid var(--gold)}
  .v26-swipe > .v26-pair .v26-pair__v[data-label]::before{content:attr(data-label);
    display:block;margin-bottom:12px;font-size:11px;font-weight:600;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--gold-deep)}
  .v26-swipe .v26-pair p{max-width:none!important}
  /* the deep links carry their gold underline as an inline border-bottom, which
     tracks the box edge — min-height would drop the rule 15px below the words, so
     the 44px target is built with padding-top instead */
  .v26-swipe .v26-pair__v > div{flex-direction:column;align-items:flex-start;gap:0!important}
  .v26-swipe .v26-pair__v a{padding-top:22px}
  .v26-swipe__foot{display:flex;align-items:center;gap:14px;margin-top:20px}
  .v26-swipe__hint{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
    color:var(--amber-deep)}
  .v26-swipe__hint::after{content:"\2192";font-size:13px;letter-spacing:0}
  @media (prefers-reduced-motion:no-preference){
    @keyframes v26-swipe-nudge{0%,72%,100%{transform:translateX(0)}84%{transform:translateX(3px)}}
    .v26-swipe__hint::after{animation:v26-swipe-nudge 2.8s cubic-bezier(.4,0,.2,1) infinite}
  }
  .v26-swipe__track{flex:1 1 auto;height:3px;background:var(--rule-strong);position:relative}
  .v26-swipe__bar{position:absolute;left:0;top:0;bottom:0;background:var(--navy);
    transition:transform 220ms cubic-bezier(.4,0,.2,1)}
  .v26-swipe__count{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:0.13em;
    color:var(--navy-mute);font-variant-numeric:tabular-nums}

  /* ---- one-screen fit ----------------------------------------------------
     Measured: the section ran 1353px against an ~844px phone (header 458,
     rail 714, foot 18, 120 padding), so the reader met the first card already
     half past it. Getting the whole rail on one screen needs ~600px out, and
     the three places it comes from, in order of how much they cost:

     1. The enumerating lede paragraph is suppressed on phones. It names all
        four problems in sequence, which the four cards then state one at a
        time — the only paragraph on the page whose whole content is repeated
        by the element directly beneath it. Saves ~200px and no information.
        The "In each case…" statement stays; it is the section's actual claim.
        LOGGED as phone-only content suppression (see CLAUDE.md copy parity).
     2. Vertical air: section padding 60 -> 40, h2 and lede margins tightened.
     3. Card internals: padding 22 -> 17, serif statements down one step
        (19->17.5 problem, 18->17 answer), support copy 14.5 -> 14, and the
        gold answer rule tightened. Nothing lands under the 11px floor.
     Everything here is inside the phone breakpoint; desktop is untouched. */
  #concerns{padding-top:30px!important;padding-bottom:30px!important}
  #concerns .v26-ranged h2{font-size:23.5px!important;margin-top:10px!important;
    line-height:1.14!important}
  #concerns .v26-ranged p{margin-top:12px!important;font-size:15px!important;
    line-height:1.54!important}
  #concerns .v26-swipe{margin-top:18px!important}
  .v26-swipe > .v26-pair{padding:15px!important}
  .v26-swipe > .v26-pair .v26-pair__k::before{margin-bottom:10px}
  .v26-swipe > .v26-pair .v26-pair__k > span{font-size:10.5px}
  .v26-swipe > .v26-pair .v26-pair__k p:first-of-type{font-size:17.5px!important;
    margin-top:7px!important}
  .v26-swipe > .v26-pair .v26-pair__k p + p{font-size:14px!important;
    margin-top:8px!important;line-height:1.52!important}
  .v26-swipe > .v26-pair .v26-pair__v{padding-top:13px!important}
  .v26-swipe > .v26-pair .v26-pair__v[data-label]::before{margin-bottom:9px}
  .v26-swipe > .v26-pair .v26-pair__v p:first-of-type{font-size:17px!important}
  .v26-swipe > .v26-pair .v26-pair__v p + p{font-size:14px!important;
    margin-top:7px!important;line-height:1.52!important}
  .v26-swipe .v26-pair__v a{padding-top:20px}
  .v26-swipe__foot{margin-top:8px}
}
@media (min-width:681px){.v26-swipe__foot{display:none}}

/* ============================================================
   Scroll cue — the other half of the swipe pattern (2026-09-05)
   Three containers on the site already scrolled horizontally on
   phones with nothing saying so: .acv-view .figure / .figure--wide
   / .zt-figure (clarity.css, <=780px) and .tscroll (mobile.css,
   the wrapper mobile.js injects around wide tables). CLAUDE.md
   has carried "no swipe affordance yet" against these since the
   mobile pass.
   They are single wide objects, not card sets, so they take the
   cue but not the counter: a hairline eyebrow that names the
   gesture and retires once the reader has scrolled. No gradient
   fade — the system does not put gradients on canonical
   surfaces, and a typographic cue is the house language.
   JS sets data-v26-cue only on containers that actually overflow,
   so nothing appears on a container that fits.
   ============================================================ */
@media (max-width:780px){
  [data-v26-cue]{position:relative}
  [data-v26-cue]::after{content:"Swipe \2192";position:absolute;right:2px;bottom:2px;
    padding:3px 8px;background:var(--panel);border:1px solid var(--rule);border-radius:999px;
    font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:0.13em;
    text-transform:uppercase;color: var(--ink-soft);pointer-events:none;
    transition:opacity 200ms cubic-bezier(.4,0,.2,1)}
  [data-v26-cue="off"]::after{opacity:0}
}


/* ============================================================
   Authority figure animation — .acb-anim (2026-09-05)
   The same three acts as the hero field, so the two read as one
   system: activity flows along the paths, one proposed result
   travels the trunk and crosses the boundary, Authority Control
   returns a determination and the three returns take their turn.
   Quiet by house rule: linear dash motion, no bounce, no scale.

   Keyed on .acb-anim, which v26.js adds only while the figure is
   on screen and only to the SVG that is actually laid out (the
   desk/portrait swap is at 1010px, so the hidden sibling has no
   width and never animates). Everything sits inside
   prefers-reduced-motion: no-preference, so the static drawing
   is the reduced-motion rendering with no separate markup.

   Timing: the packet repeats every 3s; the determination cycle is
   9s with 3s slots, so each arrival lights the next return.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes acb-flow{to{stroke-dashoffset:-64}}
  @keyframes acb-pk{
    0%{stroke-dashoffset:var(--acb-run);opacity:0}
    7%{opacity:1}
    56%{stroke-dashoffset:0;opacity:1}
    68%{opacity:0}
    100%{stroke-dashoffset:0;opacity:0}
  }
  @keyframes acb-gate{0%,14%{opacity:.6}24%,32%{opacity:1}42%,100%{opacity:.6}}
  @keyframes acb-det{0%,17%{opacity:.22}23%,31%{opacity:1}37%,100%{opacity:.22}}

  .acb-anim .acb-pk{animation:acb-pk 3s linear infinite}
  .acb-anim .acb-gate{animation:acb-gate 3s cubic-bezier(.4,0,.2,1) infinite}
  .acb-anim .acb-d{animation:acb-det 9s linear infinite}
  .acb-anim .acb-d--defer{animation-delay:3s}
  .acb-anim .acb-d--block{animation-delay:6s}
}


/* ============================================================
   .closing-line spacing for the bands added 2026-09-05
   clarity.css gives .closing-line / .secclose type only, and no
   margin on purpose: each usage supplies its own top margin via a
   scoped rule. The precedent already in that sheet is
   #question .closing-line{margin-top:34px}. All three bands added
   this session use .cols2 + .closing-line, so without this the
   serif statement starts flush against the card borders.
   34px matches each band's own .cols2 rhythm.
   Any NEW band using .closing-line needs its selector added here.
   ============================================================ */
#two-way .closing-line,
#context .closing-line,
#multiplicity .closing-line,
#questions .closing-line,
#thesis .closing-line,
#complement .closing-line{margin-top:34px;}
.partner__actions + .backlink{margin-top:22px;}


/* ============================================================
   The two-layer exchange in the authority figures (2026-09-05)
   .acb-flow sits directly on these two paths rather than on a
   group, so it needs its own selector: the group rule above is
   written .acb-flow > *. The return path animates a reversed
   dashoffset so the two lines visibly travel opposite ways.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes acb-flow-rev{to{stroke-dashoffset:64}}
  .acb-anim path.acb-flow{stroke-dasharray:5 11;animation:acb-flow 3.4s linear infinite}
  .acb-anim path.acb-flow--rev{animation-name:acb-flow-rev}
}


/* ============================================================
   Figure 1 on phones — commitment-boundary essay (2026-09-07)
   The restored three-state figure is a 1000x504 drawing. At a 390px
   viewport it would scale to ~334px and put its 13.5-unit labels at
   4.5px, well under the site's 11px floor. The svg alone scrolls
   horizontally at a min-width that holds labels at ~11.6px; the
   figcaptions and state copy stay put.
   ============================================================ */
[data-figscroll]{display:block}
[data-figswipe]{display:none}
@media (max-width:680px){
  body.page-commitment-boundary #figure figure{padding:0 14px}
  body.page-commitment-boundary #figure [data-figscroll]{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  body.page-commitment-boundary #figure [data-figscroll]::-webkit-scrollbar{display:none}
  body.page-commitment-boundary #figure [data-figscroll] > svg{min-width:860px}
  body.page-commitment-boundary #figure [data-figswipe]{
    display:block;margin:10px auto 0;text-align:center;
    font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
    color:#c49a2c;
  }
}


/* ============================================================
   Applications ledger reveal — #concerns (2026-09-07)
   The site-wide .v26-rise runs 620ms. Four sequential rows turn that
   into visible lag for anyone scrolling fast, so this variant is 220ms
   with an 8px lift and fires before the row reaches the viewport: a
   quick scroll never outruns it. The teal axis draws downward as rows
   land and each node lights with its own row, so the four cases read
   as one accumulating object rather than four independent fades.
   --axis-p defaults to 1, so the axis is whole if the script never runs.
   ============================================================ */
#concerns .v26-swipe{--axis-p:1}
.js #concerns .v26-axis{
  transform-origin:top center;
  transform:scaleY(var(--axis-p,1));
  transition:transform 420ms cubic-bezier(.4,0,.2,1);
}
.js .v26-rise-q{
  transition:opacity 220ms cubic-bezier(.4,0,.2,1),transform 220ms cubic-bezier(.4,0,.2,1);
}
.js .v26-rise-q:not(.is-in){opacity:0;transform:translateY(8px)}
.js .v26-rise-q.is-in{opacity:1;transform:none}
.js #concerns .v26-node{
  transition:border-color 240ms cubic-bezier(.4,0,.2,1),background-color 240ms cubic-bezier(.4,0,.2,1);
}
.js #concerns .v26-rise-q:not(.is-in) > .v26-node{
  border-color:var(--rule,#ddd9cf);background:var(--panel,#ffffff);
}
@media (prefers-reduced-motion:reduce){
  .js .v26-rise-q,.js #concerns .v26-axis,.js #concerns .v26-node{transition:none}
  .js .v26-rise-q:not(.is-in){opacity:1;transform:none}
  .js #concerns .v26-axis{transform:none}
}


/* ============================================================
   Applications ledger: constant header, one topic in focus (2026-09-07)
   The four rows run 250-350px, so at laptop heights two or three of them
   enter the viewport in a single scroll and the entry fade reads as one
   event rather than topic-to-topic progression. Two changes fix that
   without lengthening the section: the column header pins beneath the
   site header so it stays constant, and the row nearest the reading line
   carries a filled node and a navy eyebrow while the others sit hollow
   and muted. Emphasis is carried by the node and the label only, never by
   dimming body copy, so text contrast is untouched.
   ============================================================ */
@media (min-width:781px){
  #concerns .v26-pair--head{
    position:sticky;top:80px;z-index:5;
    background:var(--panel,#ffffff);
    padding:30px 0 14px;
    border-bottom:1px solid var(--rule,#ddd9cf);
    margin-bottom:-1px;
  }
}
.js #concerns .v26-rise-q .v26-pair__k > span:first-child{
  transition:color 240ms cubic-bezier(.4,0,.2,1);
}
.js #concerns .v26-rise-q.is-focus .v26-pair__k > span:first-child{
  color:var(--navy,#16293f);
}
.js #concerns .v26-node{
  transition:border-color 240ms cubic-bezier(.4,0,.2,1),
             background-color 240ms cubic-bezier(.4,0,.2,1),
             width 240ms cubic-bezier(.4,0,.2,1),
             height 240ms cubic-bezier(.4,0,.2,1),
             top 240ms cubic-bezier(.4,0,.2,1);
}
.js #concerns .v26-rise-q.is-in > .v26-node{
  border-color:var(--teal,#3d6b6b);background:var(--panel,#ffffff);
}
.js #concerns .v26-rise-q.is-focus > .v26-node{
  background:var(--teal,#3d6b6b);width:13px;height:13px;top:13px;
}
@media (prefers-reduced-motion:reduce){
  .js #concerns .v26-node,
  .js #concerns .v26-rise-q .v26-pair__k > span:first-child{transition:none}
}


/* ============================================================
   Applications ledger focus, corrected (2026-09-07)
   The eyebrow and the serif statement carried their colour as an INLINE
   style, which no stylesheet rule can override, so the focus treatment
   was dead on both. The inline colours are removed from the four rows in
   index.html and the resting values live here instead, leaving .is-focus
   free to win normally. Both resting colours stay well above the contrast
   floor (navy-soft is ~7.4:1 on white), so an unfocused row is quieter,
   never unreadable.
   ============================================================ */
#concerns .v26-rise-q .v26-pair__k > span:first-child{color:var(--navy-soft,#4d5c72)}
#concerns .v26-rise-q .v26-pair__k > p:first-of-type{color:var(--navy-soft,#4d5c72)}
.js #concerns .v26-rise-q .v26-pair__k > p:first-of-type{
  transition:color 240ms cubic-bezier(.4,0,.2,1);
}
.js #concerns .v26-rise-q.is-focus .v26-pair__k > span:first-child{color:var(--navy,#16293f)}
.js #concerns .v26-rise-q.is-focus .v26-pair__k > p:first-of-type{color:var(--navy,#16293f)}
.js #concerns .v26-rise-q.is-focus > .v26-node{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--teal,#3d6b6b) 16%, transparent);
}
@media (prefers-reduced-motion:reduce){
  .js #concerns .v26-rise-q .v26-pair__k > p:first-of-type{transition:none}
}


/* ============================================================
   Applications ledger as a stacked card scroll — #concerns (2026-09-07)
   Each of the four problems is its own card. Cards are sticky at rising
   offsets, so scrolling slides each new card up over the one before it
   and leaves a 42px strip of the covered card showing. That strip is the
   card's own eyebrow, lifted out of flow to span the card head, so a
   reader can always see which topics are behind the current one. No DOM
   change: the eyebrow is repositioned, not moved, so the phone rail and
   the 681-900px stack are untouched.
   Scoped to 901px and up, which is where .v26-pair is actually two
   columns. z-index tops out at 4, below the pinned column header (5) and
   the site header (40).
   ============================================================ */
/* the inline style on each row carried position:relative, which no
   stylesheet position can override. It is removed from the markup and
   declared here, so the sticky value below can win normally. */
#concerns .v26-pair.v26-rise-q{position:relative}
@media (min-width:901px){
  /* grid-auto-rows:1fr in an indefinite-height grid sizes every row to the
     tallest, so the four cards are equal without a measured value. That matters
     because sticky containment clamps each card to (containerBottom - itsHeight):
     unequal cards release at different rates and the taller ones ride up over
     their neighbours. Extra bottom padding only delays that, it does not stop it. */
  #concerns .v26-swipe{display:grid;grid-auto-rows:1fr;padding-bottom:150px}
  #concerns .v26-axis,#concerns .v26-node{display:none}

  #concerns .v26-pair.v26-rise-q{
    position:sticky;
    background:var(--cream,#fbfaf6);
    border:1px solid var(--rule-strong,#cfc9bb);
    border-bottom:0;
    border-radius:14px 14px 0 0;
    box-shadow:0 -12px 32px -14px rgba(22,41,63,.16);
    padding:58px 30px 34px!important;
    margin-bottom:0;
  }
  #concerns .v26-pair.v26-rise-q:last-of-type{
    border-bottom:1px solid var(--rule-strong,#cfc9bb);
    border-radius:14px;
  }
  #concerns .v26-pair.v26-rise-q:nth-of-type(1){top:188px;z-index:1}
  #concerns .v26-pair.v26-rise-q:nth-of-type(2){top:236px;z-index:2}
  #concerns .v26-pair.v26-rise-q:nth-of-type(3){top:284px;z-index:3}
  #concerns .v26-pair.v26-rise-q:nth-of-type(4){top:332px;z-index:4}

  /* the eyebrow becomes the card tab: the strip that stays visible once
     the next card slides over this one */
  #concerns .v26-rise-q .v26-pair__k > span:first-child{
    position:absolute;top:0;left:0;right:0;
    padding:16px 30px 10px;
    text-align:left;
    border-bottom:1px solid var(--rule,#ddd9cf);
  }
  #concerns .v26-rise-q .v26-pair__k{padding-top:0}
}
@media print{
  #concerns .v26-pair.v26-rise-q{position:static;box-shadow:none;margin-bottom:24px}
}


/* ============================================================
   Applications ledger as a stacked card scroll on phones (2026-09-07)
   Below 680px this section was the horizontal swipe rail. Sticky cannot
   stack inside a scroll container (it resolves against the scroller, not
   the viewport), so the rail is turned back into a vertical block here and
   the four cards stack the way they do on desktop. Strips are 36px rather
   than 48: on an 844px screen the site header and the injected action bar
   already take ~120px, so four desktop-sized tabs would spend a quarter of
   the viewport. No dwell gaps either, so the section does not grow.
   The rail's swipe foot and its 01-04 counter both go: they were rail
   affordances, and the tab stack now shows position. The rail script
   already no-ops on a container with no overflow, so nothing else changes.
   ============================================================ */
@media (max-width:680px){
  #concerns .v26-swipe{
    display:grid!important;
    grid-auto-rows:1fr;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding:0 0 110px!important;
  }
  #concerns .v26-swipe::after{content:none!important}
  #concerns .v26-swipe > .v26-pair{
    flex:none!important;
    width:auto!important;
    position:sticky;
    border-bottom:0;
    border-radius:12px 12px 0 0;
    box-shadow:0 -10px 26px -12px rgba(22,41,63,.18)!important;
    padding:40px 16px 20px!important;
    margin:0!important;
  }
  #concerns .v26-swipe > .v26-pair:last-of-type{
    border-bottom:1px solid var(--rule-strong,#cfc9bb);
    border-radius:12px;
  }
  #concerns .v26-swipe > .v26-pair:nth-of-type(1){top:84px;z-index:1}
  #concerns .v26-swipe > .v26-pair:nth-of-type(2){top:120px;z-index:2}
  #concerns .v26-swipe > .v26-pair:nth-of-type(3){top:156px;z-index:3}
  #concerns .v26-swipe > .v26-pair:nth-of-type(4){top:192px;z-index:4}

  /* the eyebrow is the card tab and the strip that stays visible */
  #concerns .v26-swipe > .v26-pair .v26-pair__k > span:first-child{
    position:absolute;top:0;left:0;right:0;
    padding:8px 16px 7px;
    font-size:11px!important;
    letter-spacing:0.14em;
    text-align:left;
    border-bottom:1px solid var(--rule,#ddd9cf);
  }
  #concerns .v26-swipe > .v26-pair .v26-pair__k::before{display:none!important}
  #concerns .v26-swipe__foot{display:none!important}
}



/* ---- Emerging-pressure figure: scroll-gated pass (2026-09-10) -----------
   Reset state runs the dotted crossings slowly and continuously. When the
   figure scrolls into view each named route wipes along its own line and its
   label rides from the group node it leaves to the lane it lands on, and the
   flowing copy drops back to a trace. One shot, opacity and transform only.
   v26.js adds .is-on; without JS every layer sits in its finished state. */
@keyframes pf-dash { to { stroke-dashoffset: -26px; } }
#pressure .prfig .flow { animation: pf-dash 3.4s linear infinite; }
#pressure .prfig.is-on .flow { opacity:.18; transition: opacity 900ms cubic-bezier(.4,0,.2,1); }
.js #pressure .prfig .rvl { opacity:0; transition: opacity 620ms cubic-bezier(.4,0,.2,1); }
.js #pressure .prfig .rvl-t { opacity:0; transform: translate(var(--dx,-6px), var(--dy,0px));
  transition: opacity 760ms cubic-bezier(.4,0,.2,1), transform 980ms cubic-bezier(.4,0,.2,1); }
.js #pressure .prfig .wipe { transform: scaleX(0); transform-origin: 196px 0;
  transition: transform 1080ms cubic-bezier(.4,0,.2,1); }
#pressure .prfig.is-on .rvl, #pressure .prfig.is-on .rvl-t { opacity:1; transform: translate(0,0); }
#pressure .prfig.is-on .wipe { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  #pressure .prfig .flow { animation: none; }
  .js #pressure .prfig .rvl, .js #pressure .prfig .rvl-t { opacity:1!important; transform:none!important; transition:none!important; }
  .js #pressure .prfig .wipe { transform: scaleX(1)!important; transition:none!important; }
}

/* the pass is also on demand, not only on arrival */
#pressure .prfig__act{margin:16px 0 0;}
#pressure .prfig__toggle{display:inline-flex;align-items:center;min-height:40px;padding:10px 20px;border-radius:999px;
  border:1px solid rgba(223,229,236,.34);background:transparent;font-family:var(--font-sans);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#dfe5ec;cursor:pointer;
  transition:border-color 160ms cubic-bezier(.4,0,.2,1),color 160ms cubic-bezier(.4,0,.2,1);}
#pressure .prfig__toggle:hover,#pressure .prfig__toggle:focus-visible{border-color:var(--teal-lit,#5aa3a3);color:var(--teal-lit,#5aa3a3);}
html:not(.js) #pressure .prfig__act{display:none;}
@media (max-width:680px){#pressure .prfig__toggle{min-height:44px;width:100%;justify-content:center;}}
@media (prefers-reduced-motion: reduce){#pressure .prfig__act{display:none;}}

/* The pressure figure was inheriting the band's 900px text measure (844px of
   content), so the drawing read smaller than the abstract one it replaced.
   It is a diagram, not prose: let it break the measure and centre on the
   section, capped so the 900-unit canvas never scales past comfortable. */
#pressure .prfig{width:min(1080px,calc(100vw - 56px));margin-left:50%;transform:translateX(-50%);}
@media (max-width:680px){#pressure .prfig{width:auto;margin-left:0;transform:none;}}

/* Case links in the homepage problem rows (2026-09-10). The anchor is appended to
   the description text node, so it must claim its own line regardless of how the
   copy wraps — inline-block landed the third row's link at the end of line 3.
   width:fit-content keeps the gold underline to the text, not the column. */
.v26-statrow .textlink{display:block;width:fit-content;margin-top:10px;}
@media (max-width:680px){
  .v26-statrow .textlink{display:flex;align-items:center;min-height:44px;}
}


/* ============================================================
   Pressure-figure legend — .prkey (2026-09-10)
   Three tiers: grey is what the enterprise already runs, gold is
   what AI adds, gold dotted is where AI combines across them.
   The two AI tiers are SUBTRACTIVE toggles: clicking a key drops
   that layer so the baseline can be read on its own. The baseline
   key is static because it is the drawing's frame, not a layer.
   The legend sits outside <figure role="img"> on purpose — an
   interactive control inside an img-role subtree is not exposed.
   ============================================================ */
#pressure .prkey{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:clamp(22px,2.6vw,32px) 0 0;}
#pressure .prkey__item{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.2;color:#dfe5ec;text-align:left;}
#pressure .prkey__item--static{color:#8492a6;}
#pressure button.prkey__item{cursor:pointer;transition:color 160ms cubic-bezier(.4,0,.2,1),opacity 160ms cubic-bezier(.4,0,.2,1);}
#pressure button.prkey__item:hover,#pressure button.prkey__item:focus-visible{color:#f4f2ec;}
#pressure .prkey__sw{display:block;flex:0 0 auto;width:26px;height:0;border-top-width:1.7px;border-top-style:solid;
  transition:border-top-color 160ms cubic-bezier(.4,0,.2,1);}
#pressure .prkey__sw--base{border-top-color:#8492a6;}
#pressure .prkey__sw--ai{border-top-color:#e0b64a;}
#pressure .prkey__sw--comb{border-top-color:#e0b64a;border-top-style:dotted;border-top-width:2.2px;}
#pressure button.prkey__item[aria-pressed="false"]{color:#8492a6;}
#pressure button.prkey__item[aria-pressed="false"] .prkey__sw{border-top-color:#4a5466;}

#pressure .prfig.hide-ai .pf-ai{opacity:0!important;transition:opacity 320ms cubic-bezier(.4,0,.2,1);}
#pressure .prfig.hide-comb .pf-comb{opacity:0!important;transition:opacity 320ms cubic-bezier(.4,0,.2,1);}
html:not(.js) #pressure button.prkey__item{display:none;}
@media (max-width:680px){
  #pressure .prkey{gap:0;flex-direction:column;align-items:flex-start;}
  #pressure .prkey__item{min-height:44px;}
}


/* ============================================================
   Determination figure — .cgfig (2026-09-10)
   Replaces the converging-paths drawing. Two objects on one
   month scale: the proposed result and the authority the
   organization established. The swap to portrait is at 940px,
   not the usual 680, and the number is measured: the figure
   renders at its container minus padding against an 820-unit
   viewBox, so an 11-unit label only clears the site's 11px
   floor while the drawing is about 824px wide.
   ============================================================ */
/* !important on all four: the site carries unconditional .dgm-mob{display:none!important}
   and a 680px pair that also uses !important, so a plain rule here loses. The svgs
   carry no inline display for the same reason — inline would outrank the cascade. */
#control-gap .cgfig .dgm-desk{display:block!important;}
#control-gap .cgfig .dgm-mob{display:none!important;}
@media (max-width:940px){
  #control-gap .cgfig .dgm-desk{display:none!important;}
  #control-gap .cgfig .dgm-mob{display:block!important;}
}
/* the portrait drawing is designed at 360 units; without a cap it stretches to the
   full card in the 681-940 band and renders at 2.3x, which is the same legibility
   failure in the other direction. 410 holds it near 1.14. */
#control-gap .cgfig .dgm-mob{max-width:410px;margin-left:auto;margin-right:auto;}
/* and the card has to hug it. Between the 940 swap and the phone bleed the container
   was still at desktop width, leaving a 410px drawing centred in an 868px card with
   229px of dead space each side. 472 = the 410 cap plus the card's own padding. */
#control-gap .cgfig{max-width:980px;}
@media (max-width:940px){#control-gap .cgfig{max-width:472px;}}
/* On phones the card goes full-bleed. Not decoration: in a 390px viewport the
   28px gutters plus card padding left the 360-unit portrait drawing rendering at
   0.83, which puts an 11-unit label at 9.2px, under the site's floor. Bleeding to
   100vw with 12px of inner padding gives 366px, scale 1.02, and 11.2px labels. */
@media (max-width:680px){
  #control-gap .cgfig{width:100vw;max-width:none;box-sizing:border-box;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-left:0;border-right:0;border-radius:0;padding:18px 12px;}
}


/* ============================================================
   Determination section, closing block — .cgruns (2026-09-10)
   The figure above it is one case; this is the general procedure,
   so it gets its own rule, eyebrow, and frame rather than trailing
   the case as loose detail. Two cards, not three: the middle card
   of the old triad restated what the figure already draws.
   ============================================================ */
#control-gap .cgruns{margin-top:clamp(42px,4.8vw,66px);padding-top:clamp(26px,2.8vw,34px);
  border-top:1px solid var(--rule,#ddd9cf);}
#control-gap .v26-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);
  margin-top:clamp(20px,2.2vw,28px);}
@media (max-width:780px){#control-gap .v26-duo{grid-template-columns:1fr;gap:26px;}}

.casefig{display:flex;flex-wrap:wrap;gap:18px 54px;margin:26px 0 30px;padding-bottom:24px;border-bottom:1px solid #d5cec3;}
.casefig div{display:flex;flex-direction:column;gap:5px;}
.casefig strong{font:500 40px/1.05 var(--ex-serif,Georgia,serif);letter-spacing:-.03em;color:#805d44;}
.casefig span{font:400 13.5px/1.5 var(--ex-sans,Arial,sans-serif);color:#5d5a55;max-width:24ch;}
.casenote{font-size:14px;line-height:1.65;color:#6a6762;max-width:58ch;margin-top:26px;}
@media(max-width:680px){.casefig{gap:16px 32px}.casefig strong{font-size:32px}}

/* Prose rhythm for band pages: paragraphs and headings carry their own spacing,
   so individual blocks do not need inline margins. */
.band .prose>p{margin:0 0 1.15em;}
.band .prose>p:last-child{margin-bottom:0;}
.band .prose>h2{margin-top:1.1em;}
.band .prose>h2:first-child{margin-top:0;}
.band .prose>h3{margin-top:1.6em;}
.band .prose>.apptag+h2{margin-top:.55em;}
.band .prose>h2+p{margin-top:1.35em;}
.band .prose>p+p:has(>strong:only-child){margin-top:1.75em;}
.band .prose>div+p,.band .prose>ul+p,.band .prose>ol+p,.band .prose>blockquote+p,.band .prose>dl+p,.band .prose>figure+p{margin-top:1.45em;}

/* Control stack: existing controls read as equivalent rows; Authority Control
   carries the teal authority accent, matching the homepage question frame. */
.ctrls{margin-top:30px;border-top:1px solid var(--rule,#d8d3c8);}
.ctrl{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:baseline;padding:19px 0 21px;border-bottom:1px solid var(--rule,#d8d3c8);}
.ctrl-k{font-family:var(--fs,inherit);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal,#3d6b6b);}
.band .prose .ctrl p{margin:0;font-size:var(--size-body,16px);line-height:1.6;color:var(--ink-soft,#55534d);max-width:54ch;}
.ctrl--auth{border-top:1.6px solid var(--teal,#3d6b6b);border-bottom:0;margin:-1px -22px 0;padding:22px;background:color-mix(in srgb,var(--teal,#3d6b6b) 4%,var(--limestone,#fcfbf8));}
@media(max-width:800px){.ctrl{grid-template-columns:1fr;gap:8px;padding:16px 0 18px;}.ctrl--auth{margin:-1px -16px 0;padding:18px 16px 20px;}}