/* ======================================================================
   CTI AI Insights: Editorial review build
   Brand source: Cititec standard template (logo, Proxima Nova, Space Grotesk)
   Primary publishing identity: Commodities Tech Insider
   Secondary endorsement: Powered by Cititec
   ====================================================================== */

@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-boldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* Cititec brand ink, sampled from the supplied wordmark */
  --brand:#0D2F20;
  --brand-deep:#071B12;
  --brand-mid:#12402C;

  /* pale mint: restrained highlight and interaction colour */
  --mint:#DCEAE0;
  --mint-soft:#EDF4EF;
  --mint-line:#C3D9C9;
  --mint-on-dark:#9DC7AC;

  --ink:#141C17;
  --ink-2:#3A463E;
  --muted:#5A665E;
  --faint:#636D65;

  /* cream is the dominant reading surface */
  --paper:#FAF7F0;
  --paper-2:#F4F0E6;
  --card:#FFFFFF;
  --rule:#E3DDCE;
  --rule-2:#EEE9DC;

  --accent:var(--brand);
  --accent-2:var(--brand-mid);
  --accent-soft:var(--mint-soft);

  --tension:#8A4A1E;
  --tension-soft:#FBF0E6;
  --examine:#265F42;
  --examine-soft:var(--mint-soft);

  --src-private:#0D2F20;
  --src-private-soft:#E4EEE7;
  --src-external:#37506C;
  --src-external-soft:#E9EEF3;
  --src-cititec:#6B5316;
  --src-cititec-soft:#F7F0DE;

  --gap:#8A4A1E;

  --display:"Space Grotesk","Arial Narrow",sans-serif;
  --sans:"Proxima Nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --col:34rem;   /* single reading measure used by every narrative section */

  /* breathing room scale */
  --s-section:4.25rem;
  --s-block:2.4rem;
  --s-card:1.75rem;
  --s-para:1.15em;
  --radius-sm:3px;
  --ctrl-h:2.35rem;

  --shadow:0 1px 2px rgba(10,26,18,.04),0 12px 34px rgba(10,26,18,.07);
  --shadow-lift:0 2px 6px rgba(10,26,18,.06),0 20px 48px rgba(10,26,18,.10);
  --radius:6px;
  --dur:200ms;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.02rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.14;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 var(--s-para)}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-2)}
button{font-family:var(--sans)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.col{max-width:var(--col)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- review-build banner ---------- */

/* ---------- masthead ---------- */
.masthead{background:var(--brand);border-bottom:1px solid rgba(255,255,255,.08)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.5rem;padding-bottom:1.5rem;flex-wrap:wrap}
.cti-lockup{display:flex;flex-direction:column;gap:.15rem;text-decoration:none}
.cti-name{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.05}
.cti-edition{font-family:var(--sans);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-on-dark);margin-top:.35rem}
.powered-by{display:flex;align-items:center;gap:.7rem}
.powered-by-label{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-on-dark)}
.powered-by img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}

/* ---------- hero ---------- */
.hero{background:var(--brand);color:#fff;padding:6.6rem 0 6rem;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.10)}
.kicker{font-family:var(--sans);font-size:.69rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:2rem}
.hero h1{font-size:clamp(2.5rem,6vw,4.35rem);letter-spacing:-.022em;max-width:16ch;color:#fff;line-height:1.06}
.title-note{font-family:var(--sans);font-size:.74rem;color:var(--mint-on-dark);margin-top:1.1rem;font-style:italic;opacity:.85}
.standfirst{font-family:var(--sans);font-size:clamp(1.1rem,2vw,1.34rem);line-height:1.62;color:#D5E2D8;max-width:46ch;margin-top:2.2rem;font-weight:400}
.hero-meta{font-family:var(--sans);font-size:.76rem;letter-spacing:.02em;color:#A9C0B0;margin-top:3.6rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.13);display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem 2.4rem;max-width:60rem;line-height:1.6}
.hero-meta b{font-weight:700;color:#fff;display:block;margin-bottom:.3rem;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-on-dark)}

/* ---------- nav ---------- */
.navbar{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.95);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--rule)}
.navbar .wrap{display:flex;align-items:center;gap:.85rem;padding:0}
.navlist{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;flex:1;margin:0;padding:0;list-style:none}
.navlist::-webkit-scrollbar{display:none}
.navlist a{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.01em;color:var(--muted);text-decoration:none;white-space:nowrap;padding:1.1rem .7rem;display:block;border-bottom:2px solid transparent;transition:color var(--dur)}
.navlist a:hover{color:var(--ink)}
.navlist a.on{color:var(--accent);border-bottom-color:var(--accent)}
.nav-tools{display:flex;gap:.5rem;align-items:center;padding:.5rem 0;flex-shrink:0}
.icon-btn{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);height:2.05rem;padding:0 .75rem;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:border-color var(--dur),color var(--dur)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- evidence lens filter bar ---------- */
.lens-bar{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:.95rem 0}
.lens-bar .wrap{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.lens-label{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lens-chip{font-family:var(--sans);font-size:.75rem;font-weight:600;padding:.45rem .9rem;border-radius:20px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:all var(--dur)}
.lens-chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.lens-chip[data-src="private"] .dot{background:var(--src-private)}
.lens-chip[data-src="external"] .dot{background:var(--src-external)}
.lens-chip[data-src="cititec"] .dot{background:var(--src-cititec)}
.lens-chip.active[data-src="private"]{background:var(--src-private-soft);border-color:var(--src-private);color:var(--src-private)}
.lens-chip.active[data-src="external"]{background:var(--src-external-soft);border-color:var(--src-external);color:var(--src-external)}
.lens-chip.active[data-src="cititec"]{background:var(--src-cititec-soft);border-color:var(--src-cititec);color:var(--src-cititec)}
.lens-reset{font-family:var(--sans);font-size:.72rem;color:var(--faint);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
body.lens-filtering [data-source]{opacity:.22;transition:opacity var(--dur)}
body.lens-filtering [data-source].lens-match{opacity:1}

/* ---------- evidence badges (inline, restrained) ---------- */
.src-badge{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--sans);font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.16rem .5rem;border-radius:20px;white-space:nowrap;vertical-align:middle}
.src-badge .dot{width:6px;height:6px;border-radius:50%}
.src-badge[data-src="private"]{background:var(--src-private-soft);color:var(--src-private)}
.src-badge[data-src="private"] .dot{background:var(--src-private)}
.src-badge[data-src="external"]{background:var(--src-external-soft);color:var(--src-external)}
.src-badge[data-src="external"] .dot{background:var(--src-external)}
.src-badge[data-src="cititec"]{background:var(--src-cititec-soft);color:var(--src-cititec)}
.src-badge[data-src="cititec"] .dot{background:var(--src-cititec)}
.gap-badge{display:inline-flex;align-items:center;font-family:var(--sans);font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.16rem .5rem;border-radius:20px;background:#fff;color:var(--gap);border:1px dashed var(--gap)}

/* ---------- snapshot ---------- */
.snapshot{padding:var(--s-section) 0;border-bottom:0;background:var(--paper-2)}
.sec-label{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.snapshot h2{font-size:clamp(1.75rem,3vw,2.2rem);margin:1rem 0 .9rem;letter-spacing:-.015em}
.snapshot .lede{color:var(--ink-2);max-width:52ch;margin-bottom:2.4rem;font-size:1rem}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.4rem}
.snap{background:var(--card);padding:var(--s-card) 1.7rem;position:relative;border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow var(--dur)}
.snap:hover{box-shadow:var(--shadow-lift)}
.snap-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.65rem}
.snap-num{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--accent);background:var(--mint);padding:.28rem .55rem;border-radius:3px}
.snap-head{font-family:var(--display);font-size:1.12rem;line-height:1.38;font-weight:700;letter-spacing:-.008em;margin:0}
.snap-summary{font-size:.96rem;color:var(--ink-2);margin-top:1.1rem;line-height:1.68}
.snap-toggle{font-family:var(--sans);font-size:.73rem;font-weight:600;color:var(--accent);margin-top:1.3rem;display:inline-flex;align-items:center;gap:.45rem;background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:3px;cursor:pointer;padding:.45rem .75rem;transition:background var(--dur)}
.snap-toggle:hover{background:var(--mint)}
.snap-toggle::after{content:"+";font-size:.95rem;line-height:1}
.snap-toggle[aria-expanded="true"]::after{content:"\2013"}
.snap-toggle[aria-expanded="true"]{color:var(--accent)}
.snap-evidence{font-size:.94rem;color:var(--ink-2);margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--rule-2);display:none;line-height:1.68}
.snap-evidence.open{display:block}
.snap-evidence p{margin-bottom:.75em}
.snap-evidence .ev-block{margin-bottom:1.35rem}
.snap-evidence .ev-block:last-child{margin-bottom:0}
.snap-evidence .badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.snap-jump{font-family:var(--sans);font-size:.75rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)}
/* Only the snapshot cards position their comment button absolutely; the
   card is position:relative. Elsewhere the button is a normal flex/flow
   child, otherwise it escapes its unpositioned container. */
.card-comment{position:static}
.snap > .card-comment{position:absolute;top:1.5rem;right:1.5rem}
.feature-head{position:relative}
.feature-head .card-comment,.briefing-panel .card-comment{flex-shrink:0}

/* ---------- comment button ---------- */
.comment-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;transition:all var(--dur)}
.comment-btn:hover{border-color:var(--accent);color:var(--accent)}
.comment-btn.has-comments{background:var(--tension-soft);border-color:var(--tension);color:var(--tension)}
.section-comment-row{display:flex;justify-content:flex-end;margin-top:1.2rem}

/* ---------- sections ---------- */
.section{padding:var(--s-section) 0;border-bottom:0}
.surface-cream{background:var(--paper-2)}
.surface-white{background:var(--card)}
.surface-mint{background:var(--mint-soft)}
/* hairline only where two like surfaces meet */
.surface-white + .surface-white,.surface-cream + .surface-cream{border-top:1px solid var(--rule)}
/* keep anchored headings clear of the sticky nav */
section[id],div[id="top"]{scroll-margin-top:5rem}
.section-head{display:grid;grid-template-columns:5rem 1fr;gap:1.75rem;align-items:start;margin-bottom:var(--s-block);padding-bottom:1.3rem;border-bottom:1px solid var(--rule)}
.section-num{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--faint);padding-top:.5rem;border-top:2px solid var(--ink)}
.section-head h2{font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.02em;max-width:22ch;line-height:1.14}
.section-head .sub{font-family:var(--sans);font-size:.93rem;color:var(--muted);margin-top:.85rem;max-width:52ch;line-height:1.6}
.body{max-width:var(--col)}
.body.wide{max-width:none}
.body h3{font-family:var(--display);font-size:1.2rem;margin:2.6rem 0 .9rem;letter-spacing:-.008em;padding-top:1.4rem;border-top:1px solid var(--rule)}
.body h3:first-child{margin-top:0;padding-top:0;border-top:0}
.lead-para{font-size:1.18rem;line-height:1.58;color:var(--ink);margin-bottom:1.35em}

/* ---------- editorial boxes (authority labels) ---------- */
.box{border-left:3px solid var(--rule);padding:.15rem 0 .15rem 1.4rem;margin:2rem 0;max-width:var(--col)}
.box-label{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem;flex-wrap:wrap}
.box p{margin-bottom:.6em}
.box p:last-child{margin-bottom:0}
.box.observed{border-left-color:var(--accent)}
.box.observed .box-label{color:var(--accent)}
.box.tension{border-left-color:var(--tension)}
.box.tension .box-label{color:var(--tension)}
.box.interpretation{border-left-color:#5C6F8A}
.box.interpretation .box-label{color:#48597A}
.box.question{border-left-color:var(--examine);background:var(--mint-soft);padding:1.5rem 1.7rem 1.5rem 1.4rem;border-radius:0 var(--radius) var(--radius) 0}
.box.question .box-label{color:var(--examine)}
.box.question ol{margin:.5rem 0 0;padding-left:1.15rem}
.box.question li{margin-bottom:.75em;font-size:.98rem;line-height:1.6;padding-left:.25rem}
.box .badges{display:inline-flex;gap:.35rem}

/* ---------- reported account block ---------- */
.account-block{background:var(--mint-soft);border:1px solid var(--mint-line);border-left:3px solid var(--brand);border-radius:var(--radius);padding:1.5rem 1.7rem;margin:2rem 0;max-width:var(--col);box-shadow:none}
.expand-note{margin:1.5rem 0;max-width:var(--col)}
.expand-note summary{cursor:pointer;font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:.45rem}
.expand-note summary::-webkit-details-marker{display:none}
.expand-note summary::before{content:"+";color:var(--accent);font-size:1rem}
.expand-note[open] summary::before{content:"\2013"}
.expand-note-body{font-size:.95rem;color:var(--ink-2);padding:1rem 0 .4rem 1.5rem;border-left:2px solid var(--mint-line);margin-left:.05rem;margin-top:.7rem;line-height:1.68}

.market-dek{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin:0 0 .9rem}

/* ---------- feature card shell ---------- */
.body .feature,.body .bench,.body .wide-block{width:min(calc(var(--wrap) - 3rem),calc(100vw - 4.5rem));max-width:none}
.feature{margin:var(--s-block) 0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:none;overflow:hidden}
.feature-head{padding:1.5rem 1.8rem 1.25rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;background:var(--mint-soft)}
.feature-head .sec-label{color:var(--accent)}
.feature-head h3{font-size:1.22rem;margin:.5rem 0 .45rem;letter-spacing:-.012em;padding-top:0;border-top:0}
.feature-head p{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0;max-width:56ch;line-height:1.5}
.feature-body{padding:1.7rem 1.8rem 1.9rem}

/* ---------- FDE comparator ---------- */

/* ---------- architecture explorer ---------- */

/* ---------- market activity chart ---------- */
.chart-panels{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media (max-width:760px){.chart-panels{grid-template-columns:1fr}}
.chart-panel{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1.7rem 1.8rem}
.chart-panel h4{font-family:var(--display);font-size:.98rem;margin-bottom:.35rem}
.chart-panel .chart-note{font-size:.8rem;color:var(--muted);margin-bottom:1.1rem}
.bar-row{margin-bottom:.9rem}
.bar-row:last-child{margin-bottom:0}
.bar-label{font-family:var(--sans);font-size:.83rem;color:var(--ink-2);margin-bottom:.35rem;display:flex;justify-content:space-between}
.bar-label b{color:var(--ink);font-weight:700}
.bar-track{height:10px;background:var(--rule-2);border-radius:20px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:20px;width:0;transition:width 700ms ease}
.chart-panel.impact .bar-fill{background:var(--tension)}
.chart-counterpoint{grid-column:1/-1;background:var(--tension-soft);border:1px solid #E9CDAE;border-radius:4px;padding:1.1rem 1.3rem;font-size:.92rem;color:#5A3612}
.chart-counterpoint b{display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;color:var(--tension)}

/* ---------- readiness ---------- */
.q{padding:1.05rem 0;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:1fr auto;gap:1rem 1.5rem;align-items:start}
.q:last-of-type{border-bottom:0}
.q-text{font-size:.98rem;line-height:1.5}
.q-group{display:flex;gap:.3rem;position:relative}
.q-group input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.q-group label{font-family:var(--sans);font-size:.73rem;font-weight:600;padding:.4rem .7rem;border:1px solid var(--rule);border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);background:var(--card);white-space:nowrap}
.q-group input:checked + label{background:var(--accent);border-color:var(--accent);color:#fff}
.q-group input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.q-cat{font-family:var(--sans);font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem}
.score{margin-top:1.5rem;padding:1.3rem 1.4rem;background:var(--accent-soft);border-radius:4px;display:none}
.score.on{display:block}
.score-band{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.score h4{font-size:1.15rem;margin-bottom:.55rem}
.score p{font-size:.96rem;color:var(--ink-2);margin-bottom:.65em}
.score ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.94rem;color:var(--ink-2)}
.assess-actions{display:flex;gap:.6rem;align-items:center;margin-top:1.4rem;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:.8rem;font-weight:700;height:var(--ctrl-h);padding:0 1.15rem;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur)}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent);background:transparent}
.progress-note{font-family:var(--sans);font-size:.75rem;color:var(--muted)}

/* ---------- ask the briefing ---------- */

/* ---------- in-development list ---------- */

/* ---------- method / source notes ---------- */

/* ---------- comment drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(13,20,17,.4);z-index:190;display:none}
.drawer-backdrop.open{display:block}
.comment-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--card);z-index:200;box-shadow:-8px 0 30px rgba(0,0,0,.15);transform:translateX(100%);transition:transform 220ms ease;display:flex;flex-direction:column}
.comment-drawer.open{transform:translateX(0)}
.drawer-head{padding:1.3rem 1.4rem 1rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.drawer-head h3{font-size:1.1rem}
.drawer-context{font-family:var(--sans);font-size:.75rem;color:var(--muted);margin-top:.3rem}
.drawer-close{background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer;line-height:1;padding:.2rem}
.drawer-body{padding:1.2rem 1.4rem;overflow-y:auto;flex:1}
.drawer-body label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem}
.drawer-body label:first-child{margin-top:0}
.drawer-body select,.drawer-body textarea,.drawer-body input[type=text]{width:100%;font-family:var(--sans);font-size:.9rem;padding:.6rem .7rem;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
.drawer-body textarea{min-height:6rem;resize:vertical}
.selected-text-preview{font-size:.83rem;color:var(--ink-2);background:var(--paper);border-left:3px solid var(--accent);padding:.6rem .8rem;margin-top:.3rem;font-style:italic}
.drawer-actions{padding:1rem 1.4rem 1.3rem;border-top:1px solid var(--rule);display:flex;gap:.6rem}
.comment-list{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.comment-item{padding:.8rem 0;border-top:1px solid var(--rule-2)}
.comment-item:first-child{border-top:0}
.comment-item .meta{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.72rem;color:var(--muted);margin-bottom:.35rem}
.comment-item .cat-tag{font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.comment-item .text{font-size:.9rem;color:var(--ink-2)}
.comment-item .status{display:inline-block;margin-top:.4rem;font-size:.7rem;font-weight:700;padding:.14rem .5rem;border-radius:20px}
.comment-item .status.open{background:var(--tension-soft);color:var(--tension)}
.comment-item .status.resolved{background:var(--examine-soft);color:var(--examine)}
.comment-item .resolve-btn{font-family:var(--sans);font-size:.7rem;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;margin-left:.6rem}
.empty-comments{font-size:.85rem;color:var(--faint);font-style:italic}

/* ---------- footer ---------- */
footer{background:var(--brand-deep);color:#A9C0B0;padding:4.5rem 0 4rem;font-family:var(--sans);font-size:.84rem}

footer h4{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:1.1rem}
footer p{margin-bottom:.65em;line-height:1.6}
footer a{color:#D5DBCF}
footer a:hover{color:#fff}
.foot-brand{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.03em;color:#fff;margin-bottom:1.2rem}
.foot-bottom{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid #1E2B23;font-size:.74rem;color:#6E7E71;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .section-head{grid-template-columns:1fr;gap:.85rem}
  .section-num{border-top:0;padding-top:0}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero{padding:2.6rem 0 2rem}
  .section{padding:2.8rem 0}
  .feature-head,.feature-body{padding-left:1.2rem;padding-right:1.2rem}
  .body .feature,.body .bench,.body .wide-block{width:100%}
  .q{grid-template-columns:1fr;gap:.7rem}
  .masthead .wrap{gap:.6rem}
  /* keep the section list usable: the review chip and long button labels
     otherwise squeeze the scroller down to a sliver on a phone */
  .navbar .wrap{gap:.5rem}
  .navbar .review-chip{display:none}
  .nav-tools{gap:.35rem}
  .icon-btn{font-size:.68rem;padding:0 .55rem}
  .navlist a{padding:1.1rem .55rem}
}
@media (max-width:520px){
  body{font-size:1rem}
  .wrap{padding:0 1.1rem}
  .powered-by-label{font-size:.58rem;letter-spacing:.1em}
}

/* ---------- print ---------- */
@media print{
  :root{--paper:#fff}
  body{background:#fff;font-size:10.5pt;line-height:1.45;color:#000}
  /* chrome that must never print */
  .navbar,.lens-bar,.comment-btn,.card-comment,.box-comment,.section-comment-row,
  .overall-comment-wrap,.comment-drawer,.drawer-backdrop,.assess-actions,
  .snap-toggle,.review-chip{display:none !important}
  .masthead{border-bottom:1px solid #ccc}
  a{color:#000;text-decoration:none}
  .hero{padding:1.4rem 0}
  .hero h1{font-size:26pt}
  .section{padding:1.15rem 0;border-bottom:0}
  .section-head{break-after:avoid}
  .body .feature,.body .bench,.body .wide-block{width:100%}
  .feature,.box,.snap,.account-block,.placeholder-block,.arch-detail{break-inside:avoid}
  .snap-evidence{display:block !important}
  footer{background:#fff;color:#333;border-top:1px solid #ccc}
  footer h4,.foot-brand{color:#000}
  footer a{color:#000}
  .score{display:block !important;background:#f4f4f4}
  .q-group{display:none}
  .expand-note{display:block}
  .expand-note-body{display:block !important}
}

/* ---------- comment-button placement helpers (added for review mode) ---------- */
.box{position:relative}
.box .box-comment{position:absolute;top:.5rem;right:.5rem}
.box .box-comment .comment-btn{width:22px;height:22px;font-size:.62rem}
.overall-comment-wrap{position:fixed;bottom:1.4rem;right:1.4rem;z-index:150}
.overall-comment-wrap .comment-btn{width:46px;height:46px;font-size:1.05rem;box-shadow:var(--shadow);background:var(--accent);border-color:var(--accent);color:#fff}
.overall-comment-wrap .comment-btn:hover{background:var(--accent-2)}
.overall-comment-wrap .comment-btn.has-comments{background:var(--tension);border-color:var(--tension)}
body.review-mode-off .overall-comment-wrap{display:none}
@media print{.overall-comment-wrap{display:none !important}}

/* build separation notes */

/* reserved approved material */

/* ---------- responsive: keep breathing room on mobile ---------- */
@media (max-width:820px){
  :root{--s-section:4rem;--s-block:2.4rem;--s-card:1.6rem}
  .hero{padding:3.5rem 0 3.5rem}
  .hero-meta{margin-top:2.4rem;gap:1rem}
  .snap-grid{gap:1.1rem}
  .snap{padding:1.7rem 1.5rem}
  .feature-head,.feature-body{padding-left:1.5rem;padding-right:1.5rem}
  .author-card{grid-template-columns:1fr;gap:2rem;padding:2.2rem 1.7rem}
  .author-photo,.author-monogram{width:120px;height:120px}
  .author-photo-pending{width:120px}
  .wrap{padding:0 1.4rem}
}
@media (max-width:520px){
  .wrap{padding:0 1.2rem}
  .masthead .wrap{padding-top:1.1rem;padding-bottom:1.1rem}
  .box.question{padding:1.4rem 1.3rem 1.4rem 1.2rem}
}

/* ---------- print: benchmark and author render on white ---------- */
@media print{
  .benchmark-section{background:#fff !important;color:#000 !important;border-bottom:1px solid #ccc}
  .benchmark-section .section-head h2,.benchmark-section .section-head .sub{color:#000 !important}
  .conv-out{background:#f2f2f2 !important;color:#000 !important}
  .author-section{background:#fff !important}
  .author-card{border:1px solid #999 !important;box-shadow:none !important;break-inside:avoid}
  .author-monogram{background:#f2f2f2 !important;color:#000 !important}
}

/* ======================================================================
   FDE ROLE COMPARATOR
   Same card shell, typography and control language as every other
   feature. Its dark band is a header accent, not a separate design.
   ====================================================================== */

/* ======================================================================
   AUTHOR PANEL: dark closing anchor, centred and composed
   ====================================================================== */
.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.author-section{background:var(--brand);color:#fff;padding:var(--s-section) 0 calc(var(--s-section) * .9)}
.author-panel{max-width:56rem;margin:0 auto;text-align:center}
.author-eyebrow{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:2rem}
.author-inner{display:grid;grid-template-columns:auto 1fr;gap:2.6rem;align-items:start;text-align:left}
.author-figure{margin:0;flex-shrink:0}
.author-photo{width:190px;height:190px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--mint-on-dark);box-shadow:0 0 0 8px rgba(157,199,172,.10)}
.author-name{font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:-.018em;color:#fff;margin-bottom:.4rem}
.author-title{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:1.4rem}
.author-bio p{font-size:.97rem;line-height:1.7;color:#C8D6CB;margin-bottom:1em;max-width:58ch}
.author-bio p:last-child{margin-bottom:0}
.author-contact{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.author-link{font-family:var(--sans);font-size:.82rem;font-weight:600;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.26);border-radius:var(--radius-sm);height:var(--ctrl-h);padding:0 1rem;display:inline-flex;align-items:center;transition:all var(--dur)}
.author-link:hover{background:var(--mint);border-color:var(--mint);color:var(--brand-deep)}
.author-endorse{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14)}
.author-pub{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.author-dot{width:4px;height:4px;border-radius:50%;background:var(--mint-on-dark);display:inline-block}
.author-powered{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-on-dark)}
.author-logo{height:30px;width:auto;filter:brightness(0) invert(1)}

/* ======================================================================
   SLIM FOOTER
   ====================================================================== */
footer{background:var(--brand-deep);color:#A9C0B0;padding:2.2rem 0 2.4rem;font-family:var(--sans);font-size:.82rem}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.10)}
.foot-identity{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.foot-brand{font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:.04em;color:#fff}
.foot-powered{display:inline-flex;align-items:center;gap:.5rem}
.foot-powered span{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-on-dark)}
.foot-powered img{height:24px;width:auto;filter:brightness(0) invert(1)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{color:#C8D6CB;text-decoration:none;font-size:.8rem}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-bottom{margin-top:1.2rem;font-size:.73rem;color:#7E9187;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- comment drawer status ---------- */
.drawer-status{padding:.8rem 1.4rem;font-family:var(--sans);font-size:.78rem;line-height:1.5;border-bottom:1px solid var(--rule)}
.drawer-status.loading{background:var(--paper-2);color:var(--muted)}
.drawer-status.online{background:var(--mint-soft);color:var(--accent)}
.drawer-status.offline{background:var(--tension-soft);color:#5A3612}
.drawer-status b{display:block;margin-bottom:.2rem}
.comment-list-head{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
#c-submit:disabled{opacity:.45;cursor:not-allowed}

/* ---------- responsive ---------- */
@media (max-width:820px){
  :root{--s-section:3rem;--s-block:1.9rem;--s-card:1.4rem}
  .author-inner{grid-template-columns:1fr;gap:1.6rem;text-align:center;justify-items:center}
  .author-photo{width:140px;height:140px}
  .author-bio p{text-align:left}
  .author-contact{justify-content:center}
  .foot-row{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- print ---------- */
@media print{
  .surface-white,.surface-cream,.surface-mint{background:#fff !important}
  .benchmark-section,.author-section{background:#fff !important;color:#000 !important}
  .benchmark-section .section-head h2,.benchmark-section .section-head .sub,
  .author-name,.author-title,.author-bio p,.author-pub,.author-powered{color:#000 !important}
  .author-logo,.foot-powered img{filter:none !important}
  .author-panel{max-width:none}
  footer{background:#fff !important;color:#333 !important;border-top:1px solid #ccc}
  .foot-brand,.foot-links a{color:#000 !important}
  .drawer-status{display:none !important}
}

/* ======================================================================
   METHOD & SOURCES: compact disclosure
   ====================================================================== */
.method-strip{padding:2.4rem 0}
.method-disclosure{max-width:var(--wrap);border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)}
.method-disclosure summary{cursor:pointer;list-style:none;padding:1rem 1.3rem;display:flex;
  align-items:baseline;gap:.7rem;flex-wrap:wrap;font-family:var(--sans)}
.method-disclosure summary::-webkit-details-marker{display:none}
.method-disclosure summary::before{content:"+";color:var(--accent);font-size:1rem;font-weight:700}
.method-disclosure[open] summary::before{content:"\2013"}
.md-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.md-sum{font-size:.85rem;color:var(--muted);line-height:1.5}
.method-body{padding:0 1.3rem 1.4rem;border-top:1px solid var(--rule-2)}
.md-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin:1.2rem 0}
.md-layer p{font-size:.86rem;color:var(--ink-2);line-height:1.55;margin:.5rem 0 0}
.md-note{font-size:.86rem;color:var(--ink-2);line-height:1.6;margin:0 0 1rem;max-width:74ch}
.md-sources{margin:0;padding-left:1.1rem;columns:2;column-gap:2rem}
.md-sources li{font-size:.8rem;color:var(--muted);margin-bottom:.4em;break-inside:avoid}
.md-sources a{color:var(--accent)}
@media (max-width:820px){.md-sources{columns:1}}

/* ======================================================================
   REVIEW INDICATOR: restrained, lives in the toolbar only
   ====================================================================== */
.review-chip{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);background:var(--mint);border-radius:20px;
  padding:.28rem .6rem;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
}

/* ---------- print ---------- */
@media print{
  .method-disclosure{border-color:#999 !important}
  .method-body{display:block !important}
  .review-chip{display:none !important}
}
.foot-sep{color:var(--mint-on-dark);font-size:1rem;line-height:1}

/* ======================================================================
   COMPENSATION EXPLORER
   Transplanted from the published CTI component. Values below are the
   original's final computed appearance (paper variant), expressed with
   this application's brand tokens where they are identical.
   ====================================================================== */
.benchmark-section{background:var(--paper-2);padding:var(--s-section) 0;border-bottom:0}
.benchmark-section .section-head{border-bottom-color:var(--rule)}

.explorer{background:#FFFFFF;border:1px solid rgba(18,33,26,.10);margin-top:1.6rem}
.exp-controls{background:#173324;padding:22px 24px}
.ctrl{margin-bottom:16px}
.ctrl:last-child{margin-bottom:0}
.ctrl-lab{font-family:var(--display);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#B9E4C9;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl-lab button{background:none;border:none;color:#8FCBAA;font-family:var(--sans);font-size:11px;
  letter-spacing:0;text-transform:none;cursor:pointer;margin-left:10px;text-decoration:underline;padding:0}
.ctrl-lab button:hover{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:transparent;border:1.5px solid #37604A;color:#BFD6C8;padding:7px 14px;border-radius:2px;
  font-family:var(--display);font-size:13.5px;font-weight:400;cursor:pointer;line-height:1.2;transition:all var(--dur)}
.chip:hover{border-color:#B9E4C9;color:#fff}
.chip.on{background:#B9E4C9;border-color:#B9E4C9;color:#07130D;font-weight:700}
.chip small{display:block;font-size:10.5px;opacity:.7;font-weight:400}
.seg{display:inline-flex;border:1.5px solid #37604A;border-radius:2px;overflow:hidden;flex-wrap:wrap}
.seg button{background:transparent;border:none;color:#BFD6C8;padding:8px 16px;font-size:13.5px;
  font-family:var(--display);font-weight:400;cursor:pointer;border-right:1.5px solid #37604A;transition:all var(--dur)}
.seg button:last-child{border-right:none}
.seg button:hover{color:#fff}
.seg button.on{background:#B9E4C9;color:#07130D;font-weight:700}

.exp-body{padding:24px}
.exp-note{font-size:13px;color:#5A7266;padding:0 24px 20px;line-height:1.5}

.rgroup{margin-bottom:30px}
.rgroup:last-child{margin-bottom:0}
.rgroup-h{font-family:var(--display);font-weight:700;font-size:17px;color:#0E2A1D;
  border-bottom:1px solid #2C5C42;padding-bottom:12px;margin-bottom:4px;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.rgroup-h .spread{font-family:var(--sans);font-size:11px;font-weight:400;color:#5A7266;white-space:nowrap;letter-spacing:.08em}
.rrow{display:grid;grid-template-columns:108px 186px 1fr 56px;gap:18px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(18,33,26,.10)}
.rgroup .rrow:last-of-type{border-bottom:none}
.rrow-lab{font-size:14px;color:#122A1E;font-weight:400;line-height:1.25;font-family:var(--sans)}
.rrow-fig{font-family:var(--sans);font-size:15px;font-weight:500;color:#0E2A1D;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.rrow-fig .to{font-weight:400;color:#7A8F83;font-size:13px;margin:0 3px}
.rrow-fig.none{font-family:var(--sans);font-weight:400;font-size:13px;color:#6E8377;white-space:normal}
.rrow-note{grid-column:2/-1;font-size:12.5px;color:#5A7266;font-style:italic;
  padding-top:4px;border-bottom:none}
.rbar{position:relative;height:13px;background:rgba(18,33,26,.08);border-radius:7px}
.rfill{position:absolute;top:0;bottom:0;background:#3E6B54;border-radius:7px;min-width:4px}
.rfill.fde{background:#1F6B45}
.rfill.base{background:#B9E4C9;box-shadow:inset 0 0 0 1.5px #3E6B54}
.rvar{text-align:right}
.vtag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:12px;padding:3px 7px;border-radius:2px}
.vtag.up{background:rgba(31,107,69,.12);color:#1F6B45}
.vtag.dn{background:#F7EFD9;color:#8A6D1E}
.vtag.lv{background:rgba(18,33,26,.07);color:#4E6659}
.axis{display:flex;justify-content:space-between;font-size:11px;color:#5F7669;
  font-family:var(--sans);border-top:1px solid rgba(18,33,26,.12);padding-top:8px;margin-top:10px}
.bm-caveat{margin-top:1.2rem;font-size:.82rem;color:var(--muted);line-height:1.55;max-width:78ch}

@media (max-width:760px){
  .rrow{grid-template-columns:1fr auto;gap:3px 12px;padding:13px 0}
  .rrow-lab{grid-row:1;grid-column:1;font-size:13.5px}
  .rvar{grid-row:1;grid-column:2}
  .rrow-fig{grid-row:2;grid-column:1/-1}
  .rbar{grid-row:3;grid-column:1/-1;margin-top:7px}
  .rrow-note{grid-column:1/-1;margin-top:6px}
  .axis{margin:6px 0 0 0}
  .exp-controls{padding:18px 16px}
  .exp-body{padding:18px 16px}
  .exp-note{padding:0 16px 16px}
}

@media print{
  .exp-controls{display:none !important}
  .explorer{border-color:#999 !important}
  .rgroup-h,.rrow-fig,.rrow-lab{color:#000 !important}
  .rgroup-h .spread,.exp-note,.axis,.rrow-note{color:#333 !important}
  .rbar{background:#eee !important}
  .rfill,.rfill.fde{background:#666 !important}
  .rgroup{break-inside:avoid}
}

/* ======================================================================
   WHERE FIRMS ARE APPLYING AI: evidence-state list
   ====================================================================== */
.ev-legend{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.ev-key{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.68rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ev-key i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ev-production i{background:var(--brand)}
.ev-pilot i{background:var(--mint-line);box-shadow:inset 0 0 0 2px var(--brand)}
.ev-intent i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.ev-production{color:var(--brand)}
.apps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.app{padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.app:last-child{border-bottom:0}
.app-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-bottom:.5rem}
.app-title{font-family:var(--display);font-size:1.08rem;font-weight:700;margin:0;padding:0;border:0;letter-spacing:-.008em}
.app-text{margin:0;font-size:.97rem;line-height:1.65;color:var(--ink-2);max-width:var(--col)}
.apps-closing{margin-top:1.4rem;font-size:.95rem;color:var(--ink-2);max-width:var(--col)}

/* ======================================================================
   FORWARD-DEPLOYED CAPABILITY: four evidence-led views
   ====================================================================== */
.cap{background:var(--brand);border-radius:var(--radius);overflow:hidden;margin:var(--s-block) 0;
  width:min(calc(var(--wrap) - 4rem),calc(100vw - 4rem))}
.cap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  padding:1.9rem 2.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.cap-kicker{font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:.55rem}
.cap-title{font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.5rem);color:#fff;
  margin:0 0 .55rem;padding:0;border:0;letter-spacing:-.01em;line-height:1.22}
.cap-dek{font-family:var(--sans);font-size:.86rem;color:#A9C0B0;margin:0;max-width:60ch;line-height:1.55}
.cap-head .comment-btn{background:transparent;border-color:rgba(255,255,255,.28);color:var(--mint-on-dark);flex-shrink:0}
.cap-body{display:grid;grid-template-columns:16.5rem 1fr;gap:0}
.cap-tabs{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.12);padding:1.2rem 0}
.cap-tab{display:flex;align-items:flex-start;gap:.7rem;text-align:left;background:none;border:0;
  border-left:2px solid transparent;cursor:pointer;padding:.85rem 1.5rem .85rem 2rem;
  font-family:var(--sans);font-size:.86rem;font-weight:600;line-height:1.35;color:#A9C0B0;
  transition:color var(--dur),border-color var(--dur),background var(--dur)}
.cap-tab:hover{color:#fff}
.cap-tab.active{color:#fff;border-left-color:var(--mint);background:rgba(255,255,255,.05)}
.cap-tab-n{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  color:var(--mint-on-dark);padding-top:.25rem;min-width:1ch}
.cap-tab.active .cap-tab-n{color:var(--mint)}
.cap-panel{padding:1.9rem 2.1rem 2rem}
.cap-panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:.9rem}
.cap-panel-h{font-family:var(--display);font-size:1.08rem;color:#fff;margin:0;padding:0;border:0}
.cap-srcs{display:flex;gap:.4rem;flex-wrap:wrap}
.cap-src{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A9C0B0;
  border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:.16rem .55rem}
/* on-dark equivalents of the lens dots: the light-background tokens vanish here */
.cap-src i{width:5px;height:5px;border-radius:50%;background:var(--mint-on-dark)}
.cap-src[data-src="cititec"] i{background:#D9B860}
.cap-panel p{margin:0 0 .85rem;font-size:.94rem;line-height:1.66;color:#C8D6CB;max-width:62ch}
.cap-panel p:last-child{margin-bottom:0}
.cap-list{margin:0;padding:0;list-style:none;max-width:62ch}
.cap-list li{position:relative;padding-left:1.3rem;margin-bottom:.75em;font-size:.94rem;
  line-height:1.6;color:#C8D6CB}
.cap-list li:last-child{margin-bottom:0}
.cap-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--mint-on-dark)}
.cap-closing{margin-top:1.2rem !important;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.88rem !important;color:#A9C0B0 !important}

/* ======================================================================
   VALUE, MEASUREMENT AND RUN ECONOMICS
   ====================================================================== */
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;align-items:start}
.val-card{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--brand);
  border-radius:var(--radius);padding:1.5rem 1.6rem}
.val-h{font-family:var(--display);font-size:1rem;margin:0 0 .9rem;padding:0;border:0;letter-spacing:-.005em}
.val-card ul{margin:0;padding-left:1.05rem}
.val-card li{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin-bottom:.65em}
.val-card li:last-child{margin-bottom:0}
.val-q{margin:1.1rem 0 0;padding-top:.95rem;border-top:1px solid var(--mint-line);
  font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.val-q span{display:block;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}

@media (max-width:900px){
  .cap{width:100%}
  .cap-head{padding:1.5rem 1.4rem 1.2rem}
  .cap-body{grid-template-columns:1fr}
  .cap-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);padding:0}
  .cap-tabs::-webkit-scrollbar{display:none}
  .cap-tab{padding:.95rem 1rem;border-left:0;border-bottom:2px solid transparent;white-space:nowrap;font-size:.8rem}
  .cap-tab.active{border-left-color:transparent;border-bottom-color:var(--mint)}
  .cap-panel{padding:1.5rem 1.4rem 1.7rem}
  .cap-panel-top{gap:.5rem}
  .app-top{gap:.4rem}
}

@media print{
  .cap{background:#fff !important;border:1px solid #999}
  .cap-title,.cap-panel-h{color:#000 !important}
  .cap-dek,.cap-panel p,.cap-list li{color:#333 !important}
  .cap-kicker,.cap-closing,.cap-src{color:#555 !important}
  .cap-src{border-color:#bbb !important}
  .cap-body{display:block !important}
  .cap-tabs{display:none !important}
  /* every view prints, whether or not it is the selected tab */
  .cap-panel,.cap-panel[hidden]{display:block !important;padding:1rem 0 0 !important;break-inside:avoid}
  .cap-panel-h{border-bottom:1px solid #ccc;padding-bottom:.3rem}
  .cap-list li::before{background:#666 !important}
  .cap-closing{border-top-color:#ccc !important}
  .val-card{border-color:#999 !important;break-inside:avoid}
  .app{break-inside:avoid}
}
.box-title{font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);margin:0 0 .5rem;letter-spacing:-.005em}
.box.tension .box-title{color:var(--tension)}
@media print{.box-title{color:#000 !important}}