/* ==========================================================================
   SageLogic AI Solutions: visual components (v3, 29 Oct 2026)
   Uses the palette, type, corner sizes, and motion timing in styles.css.
   No new colors. Every component shows all of its content when JavaScript
   is off, works without hover, and respects reduced-motion settings.
   ========================================================================== */

.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.vico { width:1.15em; height:1.15em; flex:0 0 auto; display:inline-block; vertical-align:-0.2em; }
.vnote { font-size:15px; line-height:1.55; color:var(--ink-mute); font-style:italic; margin-top:18px; }
.vnote--dark { color:var(--on-dark-soft); }
.vpanel[hidden] { display:none !important; }
.inline-link--light { color:#FFFFFF; border-bottom-color:rgba(255,255,255,0.7); }

/* ---------- stage identifiers: Deconstruct, Redesign, Augment ---------- */
.vstage { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; line-height:1; padding:7px 11px 7px 9px; border-radius:999px; white-space:nowrap; }
.vstage .vico { width:16px; height:16px; }
.vstage--d { color:var(--ink-soft); border:1px dashed var(--ink-mute); }
.vstage--r { color:var(--teal-deep); border:1px solid var(--teal-deep); }
.vstage--a { color:#FFFFFF; background:var(--teal); border:1px solid var(--teal); }
.vstage--start { color:var(--ink-soft); border:1px solid var(--rule); padding-left:11px; }
.sec:not(.on-light) .vstage--d { color:var(--on-dark); border-color:rgba(255,255,255,0.6); }
.sec:not(.on-light) .vstage--r { color:#FFFFFF; border-color:rgba(255,255,255,0.85); }
.sec:not(.on-light) .vstage--a { color:var(--teal-deep); background:#FFFFFF; border-color:#FFFFFF; }

.hero-stage { display:flex; align-items:center; gap:10px; color:var(--on-dark-soft); }
.hero-stage .vico { width:20px; height:20px; color:rgba(255,255,255,0.8); }

/* ---------- tabs (segmented control) ---------- */
.vtabs-list { display:none; }
.vjs .vtabs-list { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper); }
.vtabs-list [role="tab"] { font:inherit; font-size:15px; font-weight:800; letter-spacing:0.01em; color:var(--ink-soft); background:transparent; border:0; border-radius:var(--r-sm); padding:10px 18px; min-height:44px; cursor:pointer; transition:background 180ms ease, color 180ms ease; }
.vtabs-list [role="tab"]:hover { color:var(--teal-deep); background:var(--cream); }
.vtabs-list [role="tab"][aria-selected="true"] { background:var(--teal); color:#FFFFFF; }
.vtab-fallback { color:var(--teal); margin:30px 0 12px; }
.vjs .vtab-fallback { display:none; }
.vjs .vpanel { animation:vfade 320ms var(--ease); }
@keyframes vfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.vpanel:focus-visible { outline:2px solid var(--teal); outline-offset:6px; border-radius:var(--r-sm); }

/* ---------- before and after workflow ---------- */
.wf-sum { font-size:17px; font-weight:700; color:var(--teal-deep); margin:26px 0 18px; }
.wf-flow { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:18px; }
.wf-step { position:relative; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; min-height:92px; }
.wf-step:not(:last-child)::after { content:""; position:absolute; top:50%; right:-17px; width:16px; height:2px; background:var(--rule); }
.wf-step:not(:last-child)::before { content:""; position:absolute; top:calc(50% - 4px); right:-17px; width:8px; height:8px; border-top:2px solid var(--rule); border-right:2px solid var(--rule); transform:rotate(45deg); }
.wf-name { font-size:16px; font-weight:800; line-height:1.3; color:var(--ink); }
.wf-note { font-size:14.5px; line-height:1.45; color:var(--ink-soft); }
.wf-tag { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:5px 9px; border-radius:999px; }
.wf-tag .vico { width:14px; height:14px; }
.wf-tag--remove { color:var(--ink-soft); border:1px dashed var(--ink-mute); }
.wf-tag--combine, .wf-tag--redesign { color:var(--teal-deep); border:1px solid var(--slate); }
.wf-tag--auto { color:#FFFFFF; background:var(--teal); }
.wf-tag--person { color:#FFFFFF; background:var(--teal-deep); }
.wf-tag--measure { color:var(--teal-deep); background:var(--cream); border:1px solid var(--rule); }
.wf-step--remove { border-style:dashed; border-color:var(--ink-mute); background:var(--cream); }
.wf-step--remove .wf-name { text-decoration:line-through; text-decoration-thickness:2px; color:var(--ink-soft); }
.wf-step--combine, .wf-step--redesign { box-shadow:inset 3px 0 0 var(--slate); }
.wf-step--auto { box-shadow:inset 3px 0 0 var(--teal); }
.wf-step--person { box-shadow:inset 3px 0 0 var(--teal-deep); }
.wf-step--measure { box-shadow:inset 3px 0 0 var(--green); }
@media (max-width: 1100px) {
  .wf-flow { grid-auto-flow:row; grid-template-columns:minmax(0,1fr); gap:14px; max-width:560px; }
  .wf-step { min-height:0; flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:6px; }
  .wf-name { flex:1 1 100%; }
  .wf-tag { margin-top:0; }
  .wf-step:not(:last-child)::after { top:auto; bottom:-14px; right:auto; left:28px; width:2px; height:14px; }
  .wf-step:not(:last-child)::before { display:none; }
}

/* ---------- 80/20 principle ---------- */
.ratio-bar { display:flex; gap:8px; min-height:132px; }
.ratio-seg { font:inherit; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:18px 22px; border-radius:var(--r-lg); cursor:pointer; transition:transform 200ms var(--ease), box-shadow 200ms ease, background 200ms ease; min-width:0; }
.ratio-seg--80 { background:#FFFFFF; color:var(--teal-deep); border:1px solid #FFFFFF; }
.ratio-seg--20 { background:rgba(255,255,255,0.10); color:#FFFFFF; border:1px solid rgba(255,255,255,0.45); }
.ratio-seg[aria-selected="true"] { box-shadow:0 0 0 3px var(--slate), 0 0 0 5px rgba(255,255,255,0.9); }
.ratio-seg:hover { transform:translateY(-2px); }
.ratio-num { font-size:64px; line-height:0.9; }
.ratio-lab { font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
.ratio-panel { margin-top:28px; color:var(--on-dark-soft); }
.ratio-stages { display:flex; flex-wrap:wrap; gap:8px; }
.ratio-h { font-family:"Instrument Serif", Georgia, serif; font-size:32px; line-height:1.15; color:#FFFFFF; margin-top:16px; }
.ratio-t { font-size:18px; margin-top:8px; max-width:62ch; }
.ratio-list { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.ratio-list li { font-size:15px; font-weight:700; color:#FFFFFF; border:1px solid rgba(255,255,255,0.35); border-radius:999px; padding:8px 14px; }
.ratio-note { font-size:15px; color:var(--on-dark-soft); margin-top:26px; max-width:72ch; }
.vjs .ratio-panel { margin-top:30px; }
@media (max-width: 700px) {
  .ratio-bar { min-height:104px; gap:6px; }
  .ratio-seg { padding:14px 14px; }
  .ratio-num { font-size:40px; }
  .ratio-seg--20 .ratio-lab { display:none; }
  .ratio-seg--80 .ratio-lab { font-size:11.5px; }
  .ratio-h { font-size:26px; }
}

/* ---------- business system map ---------- */
.smap { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:44px; align-items:start; }
.smap-stages { display:flex; flex-direction:column; gap:12px; }
.smap-stage { font:inherit; text-align:left; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:8px; row-gap:8px; align-items:center; padding:18px 18px 18px 16px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); cursor:pointer; transition:border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.smap-stage:hover { border-color:var(--teal); }
.smap-stage[aria-pressed="true"] { background:var(--cream); border-color:var(--teal); box-shadow:inset 4px 0 0 var(--teal); }
.smap-stage-n { grid-row:1 / span 3; align-self:start; font-size:30px; line-height:1; color:var(--numeral); }
.smap-stage[aria-pressed="true"] .smap-stage-n { color:var(--teal); }
.smap-stage .vstage { justify-self:start; }
.smap-stage-p { font-size:17px; font-weight:800; line-height:1.35; color:var(--ink); }
.smap-stage-o { font-size:15px; line-height:1.45; color:var(--ink-soft); }
.smap-stage-o b { color:var(--teal-deep); }
.smap-next { display:none; margin-top:16px; width:100%; }
.vjs .smap-next { display:inline-flex; }
.smap-more { margin-top:22px; }
.smap-fig { margin:0; background:#FBFAF7; border:1px solid var(--rule); border-radius:var(--r-lg); padding:14px 14px 12px; }
.smap-svg { width:100%; height:auto; display:block; }
.smap-n rect { fill:#FFFFFF; stroke:var(--rule); stroke-width:1.5; transition:fill 200ms ease, stroke 200ms ease; }
.smap-n text { font-family:"Nunito Sans", "Segoe UI", system-ui, sans-serif; font-size:15.5px; font-weight:800; fill:var(--ink); text-anchor:middle; transition:fill 200ms ease; }
.smap:not(.smap--hero) .smap-n { cursor:pointer; }
.smap[data-stage="r"] .smap-n rect, .smap[data-stage="a"] .smap-n rect { stroke:var(--teal-deep); }
.smap-n.is-sel rect { fill:var(--teal); stroke:var(--teal); }
.smap-n.is-sel text { fill:#FFFFFF; }
.smap-e { stroke-linecap:round; transition:opacity 320ms ease; }
.smap-e--d { stroke:var(--sand); stroke-width:1.5; stroke-dasharray:5 6; }
.smap-e--ra { stroke:var(--teal); stroke-width:2.2; }
.smap[data-stage="d"] .smap-e--ra { opacity:0; }
.smap[data-stage="r"] .smap-e--d, .smap[data-stage="a"] .smap-e--d { opacity:0; }
.smap-mk { opacity:0; transition:opacity 320ms ease; }
.smap-mk text { font-family:"Nunito Sans", "Segoe UI", system-ui, sans-serif; font-size:12.5px; font-weight:800; }
.smap-mk--issue rect { fill:#FFFFFF; stroke:var(--sand); stroke-width:1.2; stroke-dasharray:3 3; }
.smap-mk--issue text { fill:var(--ink-soft); }
.smap-mk--issue .smap-mk-g { fill:var(--sand); }
.smap-mk--auto rect { fill:var(--teal); }
.smap-mk--auto text, .smap-mk--auto .smap-mk-g { fill:#FFFFFF; }
.smap-mk--human rect { fill:var(--teal-deep); }
.smap-mk--human text, .smap-mk--human .smap-mk-g { fill:#FFFFFF; }
.smap[data-stage="d"] .smap-mk--issue, .smap[data-stage="a"] .smap-mk--auto, .smap[data-stage="a"] .smap-mk--human { opacity:1; }
.smap-legend { display:flex; flex-wrap:wrap; gap:8px 22px; padding:10px 6px 2px; font-size:14px; color:var(--ink-soft); }
.smap-key { display:inline-flex; align-items:center; gap:8px; }
.smap-key::before { content:""; width:14px; height:14px; border-radius:999px; display:inline-block; }
.smap-key--issue::before { border:1.5px dashed var(--sand); background:#FFFFFF; }
.smap-key--auto::before { background:var(--teal); }
.smap-key--human::before { background:var(--teal-deep); }
.smap-pick, .smap-chips { display:none; }
.vjs .smap-pick { display:block; color:var(--ink-soft); margin-top:24px; }
.vjs .smap-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.smap-chip { font:inherit; font-size:15px; font-weight:700; color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:9px 16px; min-height:44px; cursor:pointer; transition:background 160ms ease, color 160ms ease, border-color 160ms ease; }
.smap-chip:hover { border-color:var(--teal); }
.smap-chip[aria-pressed="true"] { background:var(--teal); border-color:var(--teal); color:#FFFFFF; }
.smap-detail { margin-top:18px; border-left:3px solid var(--teal); padding:4px 0 4px 20px; min-height:84px; }
.smap-detail-h { color:var(--teal); }
.smap-detail-t { font-size:18px; line-height:1.55; color:var(--ink); margin-top:6px; max-width:60ch; }
@media (max-width: 1000px) {
  .smap { grid-template-columns:minmax(0,1fr); gap:28px; }
  .smap-stages { flex-direction:row; flex-wrap:wrap; }
  .smap-stage { flex:1 1 220px; }
  .smap-main { order:-1; }
  .smap-side { order:0; }
}
.smap-marklist { display:none; }
.smap-ml { display:none; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.smap-key--r::before { border:2px solid var(--teal-deep); background:#FFFFFF; }
@media (max-width: 700px) {
  .smap-stages { flex-direction:column; }
  .smap-stage { flex:1 1 auto; }
  .smap-fig { padding:8px; }
  .smap:not(.smap--hero) .smap-marks { display:none; }
  .smap-marklist { display:block; padding:10px 6px 4px; }
  .smap[data-stage="d"] .smap-ml[data-s="d"], .smap[data-stage="r"] .smap-ml[data-s="r"], .smap[data-stage="a"] .smap-ml[data-s="a"] { display:block; }
  .smap-ml .smap-key { font-weight:800; color:var(--ink); margin-right:4px; }
  .smap-legend { display:none; }
  .hero-viz { display:none !important; }
}

/* hero variant, on dark teal */
.smap--hero { display:block; margin:0; }
.smap--hero .smap-svg { overflow:visible; }
.smap--hero .smap-n rect { fill:var(--teal); stroke:rgba(255,255,255,0.42); }
.smap--hero .smap-n text { fill:#FFFFFF; font-size:16px; }
.smap--hero[data-stage="r"] .smap-n rect { stroke:rgba(255,255,255,0.85); fill:#245446; }
.smap--hero .smap-e--d { stroke:rgba(255,255,255,0.42); }
.smap--hero .smap-e--ra { stroke:rgba(255,255,255,0.82); }
.hero-viz-cap { font-size:15px; color:var(--on-dark-soft); margin-top:12px; }
@media (max-width: 900px) {
  .hero-copy, .hero-viz { grid-column:1 / -1 !important; }
  .hero-viz { padding-top:36px !important; }
}

/* ---------- improvement grid ---------- */
.vgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.vcard { background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.vcard-ico { width:46px; height:46px; border-radius:var(--r-md); background:var(--cream); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; }
.vcard-ico .vico { width:24px; height:24px; }
.vcard-h { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:25px; line-height:1.15; color:var(--teal-deep); margin-top:4px; }
.vcard-t { font-size:16.5px; line-height:1.55; color:var(--ink-soft); }
.vcard-link { display:inline-block; margin-top:8px; font-weight:800; color:var(--teal); border-bottom:2px solid var(--teal); }
@media (max-width: 1100px) { .vgrid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .vgrid { grid-template-columns:minmax(0,1fr); gap:10px; } .vcard { flex-direction:row; flex-wrap:wrap; column-gap:14px; row-gap:6px; padding:14px 16px 16px; } .vcard-ico { width:40px; height:40px; } .vcard-h { flex:1 1 0; align-self:center; margin:0; font-size:22px; } .vcard-t { flex:1 1 100%; font-size:16px; } }

/* ---------- industries tiles ---------- */
.itiles { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.itile { display:flex; flex-direction:column; height:100%; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; transition:border-color 180ms ease, transform 200ms var(--ease); }
.itile:hover { border-color:var(--teal); transform:translateY(-2px); }
.itile-img { display:block; aspect-ratio:16 / 9; background:var(--teal-deep); overflow:hidden; }
.itile-img img { width:100%; height:100%; object-fit:cover; }
.itile-body { display:flex; flex-direction:column; gap:6px; padding:18px 20px 20px; flex:1 1 auto; }
.itile-h { font-family:"Instrument Serif", Georgia, serif; font-size:25px; line-height:1.15; color:var(--teal-deep); }
.itile-t { font-size:16px; line-height:1.5; color:var(--ink-soft); }
.itile-m { margin-top:auto; padding-top:8px; font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); }
.itile-wide { grid-column:1 / -1; }
.itile--text { background:var(--cream); }
.itile--text .itile-body { padding:24px 26px; }
@media (max-width: 1000px) { .itiles { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) {
  .itiles { grid-template-columns:minmax(0,1fr); gap:12px; }
  .itile { flex-direction:row; }
  .itile-img { flex:0 0 38%; aspect-ratio:auto; }
  .itile-body { padding:12px 14px 14px; gap:4px; }
  .itile-h { font-size:20px; }
  .itile-t { font-size:14.5px; line-height:1.45; }
  .itile-m { font-size:11.5px; padding-top:4px; }
}

/* ---------- governance rules (dark band) ---------- */
.govrules { border-bottom:1px solid rgba(255,255,255,0.14); }
.govrule { border-top:1px solid rgba(255,255,255,0.14); }
.govrule > summary { list-style:none; display:grid; grid-template-columns:46px minmax(0,1fr) 28px; gap:20px; align-items:center; padding:18px 0; cursor:pointer; }
.govrule > summary::-webkit-details-marker { display:none; }
.govrule > summary::after { content:"+"; font-size:26px; line-height:1; color:rgba(255,255,255,0.7); text-align:center; transition:transform 200ms ease; }
.govrule[open] > summary::after { transform:rotate(45deg); }
.govrule .ruletext { font-size:21px; }
.govrule .rulesub { margin:0 0 20px 66px; font-size:17.5px; color:var(--on-dark-soft); max-width:62ch; }
@media (max-width: 700px) { .govrule > summary { grid-template-columns:34px minmax(0,1fr) 24px; gap:12px; } .govrule .rulesub { margin-left:46px; } }

/* ---------- engagement journey ---------- */
.journey { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:22px; position:relative; }
.journey::before { content:""; position:absolute; top:22px; left:22px; right:22px; height:2px; background:var(--rule); }
.jstep { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.jdot { width:44px; height:44px; border-radius:999px; background:var(--paper); border:2px solid var(--teal); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; font-size:24px; line-height:1; position:relative; z-index:1; }
.jstep-h { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:24px; line-height:1.15; color:var(--teal-deep); }
.jstep-t { font-size:16px; line-height:1.55; color:var(--ink-soft); }
.jfees { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:22px; margin-top:26px; align-items:start; }
.jfee { display:flex; flex-direction:column; gap:4px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:14px 16px; font-size:16px; line-height:1.45; color:var(--ink); }
.jfee .lab { font-size:12px; color:var(--ink-mute); }
.jfee--design { grid-column:2 / span 2; box-shadow:inset 0 3px 0 var(--slate); }
.jfee--build { grid-column:4 / span 2; box-shadow:inset 0 3px 0 var(--teal); }
@media (max-width: 900px) {
  .journey { grid-template-columns:minmax(0,1fr); gap:26px; }
  .journey::before { top:22px; bottom:22px; left:21px; right:auto; width:2px; height:auto; }
  .jstep { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:18px; row-gap:8px; }
  .jstep > .jdot { grid-row:1 / span 3; }
  .jstep > .vstage { justify-self:start; }
  .jfees { grid-template-columns:minmax(0,1fr); }
  .jfee--design, .jfee--build { grid-column:1 / -1; }
}

/* ---------- accordions (native details) ---------- */
.acc { border-top:1px solid var(--rule); }
.acc > summary { list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:18px 0; cursor:pointer; }
.acc > summary::-webkit-details-marker { display:none; }
.acc > summary::after { content:"+"; flex:0 0 auto; font-size:26px; line-height:1; color:var(--teal); transition:transform 200ms ease; }
.acc[open] > summary::after { transform:rotate(45deg); }
.acc-t { font-size:20px; font-weight:800; color:var(--teal-deep); }
.acc-s { flex:1 1 auto; font-size:16px; color:var(--ink-soft); text-align:left; }
.acc > summary .acc-t + .acc-s { margin-left:4px; }
.acc-body { padding:0 0 22px; color:var(--ink-soft); font-size:17.5px; line-height:1.62; }
.acc-body p + p { margin-top:12px; }
.accs { border-bottom:1px solid var(--rule); }
.acc--faq > summary { padding:24px 0; }
.acc--faq .acc-t { font-size:28px; font-weight:400; line-height:1.2; letter-spacing:-0.012em; margin:0; }
.acc--faq:first-child { border-top-color:var(--teal-deep); }
.acc--inline { border-top:0; margin-top:10px; }
.acc--inline > summary { justify-content:flex-start; padding:6px 0; font-size:15px; font-weight:800; color:var(--teal); }
.acc--inline > summary::after { font-size:20px; order:-1; }
.acc--inline .acc-body { padding:8px 0 4px; }
.acc--compact > summary { justify-content:flex-start; gap:12px; padding:12px 0; font-size:15px; font-weight:800; color:var(--ink-soft); }
.acc--compact > summary::after { margin-left:auto; }
.vlist { margin:4px 0 12px; padding-left:20px; columns:2; column-gap:24px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.vlist li { break-inside:avoid; margin-bottom:5px; }
.acc-tools { margin-bottom:12px; }
.acc-all { font:inherit; font-size:15px; font-weight:800; color:var(--teal); background:none; border:1px solid var(--rule); border-radius:var(--r-md); padding:9px 14px; min-height:44px; cursor:pointer; }
.acc-all:hover { border-color:var(--teal); }
@media (max-width: 700px) { .acc-s { display:none; } .acc--faq .acc-t { font-size:23px; } .vlist { columns:1; } }

/* ---------- How it works: stages ---------- */
.vstages-intro { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:26px; }
.vstages-sep { font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); margin-right:10px; }
.vstep-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.vstep-one { color:var(--ink); margin-top:12px; font-weight:700; }

/* ---------- How it works: systems thinking ---------- */
.stm-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.stm-card { background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:24px 22px; }
.stm-h { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:26px; color:var(--teal-deep); margin-bottom:18px; }
.stm-root { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.stm-root li { position:relative; display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--rule); font-size:16px; line-height:1.45; color:var(--ink); }
.stm-root li .lab { font-size:12px; color:var(--ink-mute); }
.stm-root li:nth-child(1) { border-style:dashed; border-color:var(--ink-mute); }
.stm-root li:nth-child(3) { box-shadow:inset 3px 0 0 var(--teal); }
.stm-root li:not(:last-child)::after { content:""; position:absolute; left:50%; bottom:-19px; width:10px; height:10px; border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute); transform:translateX(-50%) rotate(45deg); }
.stm-chain { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:stretch; }
.stm-node { padding:11px 14px; border:1px solid var(--teal-deep); border-radius:var(--r-md); font-size:16px; font-weight:800; color:var(--teal-deep); text-align:center; }
.stm-link { height:26px; width:2px; background:var(--teal); align-self:center; position:relative; }
.stm-link--break { background:none; width:0; border-left:2px dashed var(--sand); height:44px; }
.stm-break { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; font-size:13px; font-weight:800; color:var(--ink-soft); background:var(--paper); border:1px dashed var(--sand); border-radius:999px; padding:4px 10px; }
.stm-bars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.stm-bar { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center; font-size:15px; font-weight:700; color:var(--ink-soft); }
.stm-bar-t { height:14px; background:var(--cream); border-radius:999px; overflow:hidden; }
.stm-bar-t span { display:block; height:100%; background:var(--slate); border-radius:999px; }
.stm-bar--neck { color:var(--teal-deep); }
.stm-bar--neck .stm-bar-t span { background:var(--teal-deep); }
.stm-bar--neck .stm-bar-l::after { content:" (constraint)"; font-weight:800; }
.stm-cap { font-size:15px; line-height:1.5; color:var(--ink-soft); margin-top:16px; }
@media (max-width: 1000px) { .stm-grid { grid-template-columns:minmax(0,1fr); } .stm-card { max-width:620px; } }

/* ---------- How it works: inside the analysis ---------- */
.dims { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px 22px; }
.dim { border-top:2px solid var(--teal-deep); padding-top:14px; }
.dim-n { font-size:26px; line-height:1; color:var(--numeral); }
.dim-h { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:23px; color:var(--teal-deep); margin-top:8px; }
.dim-t { font-size:15.5px; line-height:1.5; color:var(--ink-soft); margin-top:6px; }
.dim-r { font-size:15.5px; line-height:1.5; color:var(--ink); margin-top:8px; }
.dim-r .lab { font-size:11.5px; color:var(--teal); margin-right:4px; }
.an-sub { font-size:26px; color:var(--teal-deep); margin-top:46px; }
.echain { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; }
.echain li { position:relative; display:flex; flex-direction:column; gap:4px; background:var(--cream); border-radius:var(--r-md); padding:12px 12px 14px; font-size:15px; line-height:1.45; color:var(--ink); }
.echain li .lab { font-size:11.5px; color:var(--teal); }
.echain li:not(:last-child)::after { content:""; position:absolute; top:50%; right:-12px; width:9px; height:9px; border-top:2px solid var(--ink-mute); border-right:2px solid var(--ink-mute); transform:translateY(-50%) rotate(45deg); }
.an .accs { margin-top:22px; }
.delcols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:28px; }
.delcol { border:1px solid var(--rule); border-radius:var(--r-lg); padding:20px 20px 10px; background:var(--paper); }
.delcol-h { margin-bottom:12px; }
.delcol ul { list-style:none; margin:0; padding:0; }
.delcol li { display:flex; flex-direction:column; gap:2px; padding:12px 0; border-top:1px solid var(--rule-soft); }
.del-a { font-size:15.5px; font-weight:800; color:var(--teal-deep); }
.del-r { font-size:15.5px; line-height:1.45; color:var(--ink-soft); }
@media (max-width: 1100px) { .dims { grid-template-columns:repeat(2, minmax(0,1fr)); } .echain { grid-template-columns:repeat(3, minmax(0,1fr)); } .echain li:nth-child(3)::after { display:none; } }
@media (max-width: 900px) { .delcols { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 700px) { .dims { grid-template-columns:minmax(0,1fr); } .echain { grid-template-columns:minmax(0,1fr); gap:16px; } .echain li:not(:last-child)::after { top:auto; bottom:-13px; right:auto; left:24px; transform:rotate(135deg); display:block; } }

/* ---------- How it works: technology selection (dark band) ---------- */
.ladder { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:44px; align-items:start; }
.ladder-list { display:none; }
.vjs .ladder-list { display:flex; flex-direction:column; }
.ladder-cap { display:flex; justify-content:space-between; font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.74); padding:0 12px 10px 4px; }
.ladder-btn { font:inherit; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:0; border-top:1px solid var(--on-dark-rule); color:var(--on-dark-soft); padding:13px 12px 13px 4px; min-height:48px; cursor:pointer; border-radius:0; transition:background 160ms ease, color 160ms ease; }
.ladder-btn:hover { color:#FFFFFF; background:rgba(255,255,255,0.05); }
.ladder-btn[aria-selected="true"] { color:#FFFFFF; background:rgba(255,255,255,0.10); box-shadow:inset 3px 0 0 #FFFFFF; }
.ladder-n { font-size:24px; line-height:1; color:rgba(255,255,255,0.5); text-align:center; }
.ladder-t { font-size:17px; font-weight:800; }
.ladder-btn--ai .ladder-t::after { content:"Where AI usually enters"; display:block; font-size:11.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.78); margin-top:3px; }
.ladder-e { display:inline-flex; gap:4px; }
.ladder-e i { width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,0.18); }
.ladder-e i.on { background:rgba(255,255,255,0.85); }
.ladder-panel { background:rgba(255,255,255,0.06); border:1px solid var(--on-dark-rule); border-radius:var(--r-lg); padding:28px 30px 30px; color:var(--on-dark-soft); }
.vjs .ladder-panels { position:sticky; top:24px; }
.ladder-panels .ladder-panel + .ladder-panel { margin-top:14px; }
.vjs .ladder-panels .ladder-panel + .ladder-panel { margin-top:0; }
.ladder-ph { font-size:36px; line-height:1.1; color:#FFFFFF; }
.ladder-l { color:rgba(255,255,255,0.74); margin-top:22px; font-size:12.5px; }
.ladder-x { font-size:19px; line-height:1.55; margin-top:6px; color:var(--on-dark); }
.ladder-keep { display:flex; gap:14px; align-items:flex-start; margin-top:30px; padding:18px 20px; border:1px solid var(--on-dark-rule-2); border-radius:var(--r-md); font-size:16.5px; line-height:1.5; color:var(--on-dark-soft); max-width:820px; }
.ladder-keep .vico { width:24px; height:24px; color:#FFFFFF; margin-top:2px; }
.ladder-keep strong { color:#FFFFFF; }
.ladder .vtab-fallback { color:#FFFFFF; }
@media (max-width: 900px) { .ladder { grid-template-columns:minmax(0,1fr); gap:24px; } .vjs .ladder-panels { position:static; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vjs .vpanel { animation:none; }
  .smap-e, .smap-mk, .smap-n rect, .smap-n text, .itile, .ratio-seg, .govrule > summary::after, .acc > summary::after { transition:none !important; }
  .itile:hover, .ratio-seg:hover { transform:none; }
}

/* ==========================================================================
   v4 (29 Oct 2026): What we do and Industries
   Same tokens, same rules: no new colors, keyboard and touch first,
   everything visible without JavaScript.
   ========================================================================== */

/* ---------- hero stage strip (What we do) ---------- */
.wwd-strip { gap:12px 32px !important; }
.wwd-strip .hero-stage { font-size:12px; letter-spacing:0.08em; }
.hero-stage--on { color:#FFFFFF; }
.hero-stage--on .vico { color:#FFFFFF; }

/* ---------- starting points (What we do 01) ---------- */
.otabs { display:none; }
.vjs .otabs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.otab { font:inherit; text-align:left; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:2px; align-items:center; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:16px 18px; min-height:44px; cursor:pointer; transition:border-color 180ms ease, background 180ms ease, transform 200ms var(--ease); }
.otab:hover { border-color:var(--teal); transform:translateY(-2px); }
.otab:focus-visible, .ipick-btn:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.otab-ico { grid-row:1 / span 2; width:44px; height:44px; border-radius:var(--r-md); background:var(--cream); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; }
.otab-ico .vico { width:22px; height:22px; }
.otab-n { font-size:16px; line-height:1; color:var(--ink-mute); }
.otab-t { font-size:17px; font-weight:800; line-height:1.3; color:var(--teal-deep); }
.otab[aria-selected="true"] { background:var(--teal); border-color:var(--teal); }
.otab[aria-selected="true"] .otab-ico { background:rgba(255,255,255,0.12); color:#FFFFFF; }
.otab[aria-selected="true"] .otab-n { color:var(--on-dark-soft); }
.otab[aria-selected="true"] .otab-t { color:#FFFFFF; }
.ofr { margin-top:28px; }
.ofr-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr); gap:36px; }
.ofr-card { position:relative; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; }
.ofr-card--problem { background:var(--cream); border:1px dashed var(--ink-mute); }
.ofr-card--build { border:1.5px solid var(--teal-deep); box-shadow:inset 4px 0 0 var(--teal); }
.ofr-card--gets { background:var(--cream); }
.ofr-card:not(:last-child)::after { content:""; position:absolute; top:50%; right:-27px; width:12px; height:12px; border-top:2px solid var(--ink-mute); border-right:2px solid var(--ink-mute); transform:translateY(-50%) rotate(45deg); }
.ofr-lab { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.ofr-h { font-size:27px; line-height:1.15; color:var(--teal-deep); margin:0; }
.ofr-t { font-size:16.5px; line-height:1.6; color:var(--ink-soft); }
.ofr-gets { list-style:none; margin:0; padding:0; }
.ofr-gets li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--rule-soft); font-size:16px; line-height:1.45; color:var(--ink); }
.ofr-gets li:first-child { border-top:0; padding-top:2px; }
.ofr-gets .vico { color:var(--teal); width:18px; height:18px; margin-top:2px; }
.ofr-edges { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-top:24px; }
.ofr-edge { display:flex; gap:14px; align-items:flex-start; padding:18px 4px 0; border-top:2px solid var(--teal-deep); }
.ofr-edge > .vico { width:24px; height:24px; color:var(--teal); margin-top:2px; }
.ofr-edge--wont { border-top-color:var(--ink-mute); }
.ofr-edge--wont > .vico { color:var(--ink-soft); }
.ofr-edge .ofr-lab { margin-bottom:6px; }
.ofr-t--suits { font-size:21px; line-height:1.35; color:var(--teal-deep); }
@media (max-width: 1000px) {
  .ofr-flow { grid-template-columns:minmax(0,1fr); gap:30px; max-width:680px; }
  .ofr-card:not(:last-child)::after { top:auto; bottom:-22px; right:auto; left:50%; transform:translateX(-50%) rotate(135deg); }
  .ofr-edges { grid-template-columns:minmax(0,1fr); max-width:680px; }
}
@media (max-width: 900px) {
  .vjs .otabs { grid-template-columns:minmax(0,1fr); gap:8px; }
  .otab { padding:10px 14px; }
  .otab-ico { width:38px; height:38px; }
  .otab-t { font-size:16px; }
  .ofr-h { font-size:24px; }
  .ofr-t--suits { font-size:19px; }
}

/* ---------- the range (What we do 02) ---------- */
.rng { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.rng-lab { font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-deep); }
.rng-track { display:block; margin:10px 0 18px; border-radius:999px; background:var(--slate); }
.rng-band--1 .rng-track { height:3px; }
.rng-band--2 .rng-track { height:6px; background:var(--teal); }
.rng-band--3 .rng-track { height:10px; background:var(--teal-deep); }
.rng-cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.rng-card { background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); padding:16px 18px 18px; }
.rng-card--wide { border:1.5px solid var(--teal-deep); }
.rng-h { font-size:22px; line-height:1.2; color:var(--teal-deep); margin:0; }
.rng-t { font-size:16px; line-height:1.55; color:var(--ink-soft); margin-top:6px; }
.rng-link { margin-top:12px; }
.rng-note { display:flex; gap:10px; align-items:flex-start; margin-top:28px; font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:72ch; }
.rng-note > .vico { color:var(--teal); width:22px; height:22px; margin-top:2px; }
@media (max-width: 900px) { .rng { grid-template-columns:minmax(0,1fr); gap:30px; max-width:640px; } }

/* ---------- governance record (What we do 03) ---------- */
.grec-wrap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:start; }
.grec { margin:0; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:0 22px 44px -32px rgba(20,51,42,0.45); overflow:hidden; }
.grec-top { display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--rule); font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-deep); }
.grec-top > .vico { width:22px; height:22px; color:var(--teal); }
.grec-when { margin-left:auto; color:var(--ink-soft); font-weight:700; }
.grec-rows { list-style:none; margin:0; padding:4px 22px; }
.grec-row { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:12px; row-gap:4px; padding:15px 0; border-top:1px dashed var(--rule); }
.grec-row:first-child { border-top:0; }
.grec-n { grid-row:1 / span 2; font-size:22px; line-height:1.1; color:var(--ink-mute); }
.grec-q { font-size:18px; font-weight:800; line-height:1.3; color:var(--teal-deep); margin:0; }
.grec-a { font-size:16.5px; line-height:1.5; color:var(--ink); }
.grec-sign { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; padding:16px 22px; border-top:1px solid var(--rule); background:var(--cream); font-size:14.5px; color:var(--ink-soft); }
.grec-sig { display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--teal-deep); padding-bottom:6px; border-bottom:1px solid var(--ink-mute); }
.grec-sig .vico { width:18px; height:18px; color:var(--teal); }
@media (max-width: 1000px) { .grec-wrap { grid-template-columns:minmax(0,1fr); gap:34px; } .grec { max-width:640px; } }

/* ---------- operational intelligence loop (What we do 04) ---------- */
.oil-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; }
.oil-step { position:relative; border-top:2px solid var(--teal-deep); padding-top:18px; }
.oil-step:not(:last-child)::after { content:""; position:absolute; top:34px; right:-21px; width:10px; height:10px; border-top:2px solid var(--ink-mute); border-right:2px solid var(--ink-mute); transform:rotate(45deg); }
.oil-ico { width:44px; height:44px; border-radius:50%; background:var(--cream); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; }
.oil-ico .vico { width:22px; height:22px; }
.oil-n { position:absolute; top:20px; right:0; font-size:20px; color:var(--ink-mute); }
.oil-h { font-size:26px; line-height:1.15; color:var(--teal-deep); margin-top:12px; }
.oil-t { font-size:16.5px; line-height:1.55; color:var(--ink-soft); margin-top:8px; }
.oil-return { position:relative; height:28px; margin:18px 10% 0; border:2px dashed var(--rule); border-top:0; border-radius:0 0 18px 18px; text-align:center; }
.oil-return::before { content:""; position:absolute; left:-7px; top:-6px; width:10px; height:10px; border-top:2px solid var(--ink-mute); border-left:2px solid var(--ink-mute); transform:rotate(45deg); }
.oil-return span { position:relative; top:16px; display:inline-block; padding:0 12px; background:var(--paper); font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.oil-person { display:flex; align-items:center; gap:10px; margin-top:36px; font-size:17px; font-weight:700; color:var(--teal-deep); }
.oil-person .vico { width:22px; height:22px; color:var(--teal); }
@media (max-width: 1000px) { .oil-steps { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:34px; } .oil-step::after { display:none; } }
@media (max-width: 600px) { .oil-steps { grid-template-columns:minmax(0,1fr); } .oil-return { margin:18px 8% 0; } }

/* ---------- two layers, one approval gate (Industries 01) ---------- */
.lyr-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:30px; }
.lyr-node { position:relative; display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; background:var(--cream); border:1px solid var(--rule); border-radius:var(--r-lg); }
.lyr-node:not(:last-child)::after { content:""; position:absolute; top:40px; right:-22px; width:10px; height:10px; border-top:2px solid var(--ink-mute); border-right:2px solid var(--ink-mute); transform:rotate(45deg); }
.lyr-ico { width:42px; height:42px; border-radius:var(--r-md); background:var(--paper); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; }
.lyr-ico .vico { width:22px; height:22px; }
.lyr-h { font-size:17px; font-weight:800; line-height:1.3; color:var(--teal-deep); }
.lyr-t { font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
.lyr-node--3 { border:1.5px dashed var(--slate); }
.lyr-node--4 { background:var(--teal-deep); border-color:var(--teal-deep); }
.lyr-node--4 .lyr-ico { background:rgba(255,255,255,0.12); color:#FFFFFF; }
.lyr-node--4 .lyr-h { color:#FFFFFF; }
.lyr-node--4 .lyr-t { color:var(--on-dark-soft); }
.lyr-node--5 { background:var(--paper); border:1.5px solid var(--teal-deep); }
.lyr-node--5 .lyr-ico { background:var(--cream); }
.lyr-cores { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.lyr-who { font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); }
.lyr-why { margin-top:28px; padding:18px 22px; background:var(--cream); border-left:3px solid var(--teal); font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:84ch; }
.lyr-why strong { color:var(--teal-deep); }
@media (max-width: 1000px) {
  .lyr-flow { grid-template-columns:minmax(0,1fr); gap:22px; max-width:560px; }
  .lyr-node { display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:14px; row-gap:4px; align-items:start; }
  .lyr-ico { grid-row:1 / span 2; }
  .lyr-node:not(:last-child)::after { top:auto; bottom:-17px; right:auto; left:38px; transform:rotate(135deg); }
  .lyr-cores { grid-template-columns:minmax(0,1fr); max-width:620px; }
}

/* ---------- industry selector and panels (Industries 02) ---------- */
.inds { scroll-margin-top:52px; }
.ind-jumpnav { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.ind-jumpnav .lab { color:var(--ink-soft); }
.ind-jumpnav a { font-size:15px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal); border-bottom:2px solid transparent; }
.ind-jumpnav a:hover { border-bottom-color:var(--teal); }
.vjs .ind-jumpnav { display:none; }
.ipick { display:none; }
.vjs .ipick { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; }
.ipick-btn { font:inherit; text-align:left; display:flex; flex-direction:column; padding:0; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:border-color 180ms ease, background 180ms ease, transform 200ms var(--ease); }
.ipick-btn:hover { border-color:var(--teal); transform:translateY(-2px); }
.ipick-img { display:block; aspect-ratio:16 / 9; background:var(--teal-deep); overflow:hidden; }
.ipick-img img { width:100%; height:100%; object-fit:cover; opacity:0.82; transition:opacity 180ms ease; }
.ipick-name { padding:10px 12px 2px; font-size:15px; font-weight:800; line-height:1.25; color:var(--teal-deep); }
.ipick-m { padding:2px 12px 12px; font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.ipick-btn[aria-selected="true"] { background:var(--teal); border-color:var(--teal); box-shadow:0 0 0 2px var(--teal); }
.ipick-btn[aria-selected="true"] .ipick-img img { opacity:1; }
.ipick-btn[aria-selected="true"] .ipick-name { color:#FFFFFF; }
.ipick-btn[aria-selected="true"] .ipick-m { color:var(--on-dark-soft); }
.ipanel { margin-top:40px; scroll-margin-top:52px; }
.ipanel + .ipanel { padding-top:40px; border-top:1px solid var(--rule); }
.vjs .ipanel + .ipanel { padding-top:0; border-top:0; }
.ip-h { font-size:42px; line-height:1.1; color:var(--teal-deep); margin:0 0 28px; }
.ip-intro { font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:72ch; margin:-10px 0 28px; }
.ip-path { list-style:none; margin:0; padding:0; }
.ip-step { position:relative; margin-left:8px; padding:0 0 34px 30px; border-left:2px solid var(--rule); }
.ip-step::before { content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--cream); border:2px solid var(--teal); }
.ip-step:last-child { border-left-color:transparent; padding-bottom:0; }
.ip-step-h { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 14px; font-size:14px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-deep); }
.ip-lead { font-family:"Instrument Serif", Georgia, serif; font-size:25px; line-height:1.3; color:var(--teal-deep); max-width:52ch; margin-bottom:16px; }
.ip-sinks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.ip-sinks > li { background:var(--paper); border:1px dashed var(--ink-mute); border-radius:var(--r-md); padding:14px 16px; font-size:16px; line-height:1.45; color:var(--ink); }
.ip-sink-h { font-size:17px; font-weight:800; line-height:1.3; color:var(--teal-deep); margin:0 0 6px; }
.ip-sinks--full > li p { font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
.ip-t { font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:78ch; }
.ip-firms { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ip-firms li { padding:8px 14px; border:1px solid var(--rule); border-radius:999px; background:var(--paper); font-size:15px; font-weight:700; color:var(--ink); }

.isys { background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); padding:22px; }
.isys-lab { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-deep); }
.isys-lab span { font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink-soft); }
.isys-lab--auto { position:relative; margin-top:30px; }
.isys-lab--auto::before { content:""; position:absolute; left:24px; top:-28px; height:22px; border-left:2px dashed var(--slate); }
.isys-core, .isys-auto { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.isys-auto--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.isys-node { background:var(--paper); border:1.5px solid var(--teal-deep); border-radius:var(--r-md); padding:14px 16px 16px; }
.isys-node--auto { background:var(--cream); border:1.5px dashed var(--slate); }
.isys-h { font-size:17px; font-weight:800; line-height:1.3; color:var(--teal-deep); margin:0; }
.isys-who { font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.isys-t { font-size:15.5px; line-height:1.5; color:var(--ink-soft); margin-top:8px; }
.isys-gate { position:relative; display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:16px 18px; background:var(--teal-deep); border-radius:var(--r-md); color:var(--on-dark); }
.isys-gate::before { content:""; position:absolute; left:28px; top:-26px; height:24px; border-left:2px solid var(--teal-deep); }
.isys-gate > .vico { width:24px; height:24px; color:#FFFFFF; margin-top:2px; }
.isys-gl { font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-soft); margin:0 0 4px; }
.isys-gate p:not(.isys-gl) { font-size:16px; line-height:1.55; }
.isys-gate--light { background:var(--cream); border:1px solid var(--rule); color:var(--ink-soft); }
.isys-gate--light > .vico { color:var(--teal); }
.isys-gate--light .isys-gl { color:var(--teal-deep); }
.isys-wont { display:flex; gap:14px; align-items:flex-start; margin-top:12px; padding:14px 18px; border:1px dashed var(--ink-mute); border-radius:var(--r-md); color:var(--ink-soft); }
.isys-wont > .vico { width:22px; height:22px; color:var(--ink-soft); margin-top:2px; }
.isys-wont .isys-gl { color:var(--ink-soft); }
.isys-wont p:not(.isys-gl) { font-size:15.5px; line-height:1.55; }
.isys-pair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:34px; }
.isys-pair .isys-gate { margin-top:0; }
.isys-pair .isys-gate::before { display:none; }

.idemo { margin-top:48px; padding-top:26px; border-top:2px solid var(--teal-deep); }
.idemo-k { color:var(--teal); }
.idemo-h { font-size:32px; line-height:1.15; color:var(--teal-deep); margin:8px 0 0; }
.idemo-cb { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); align-items:stretch; margin-top:20px; }
.idemo-c, .idemo-b { background:var(--paper); border-radius:var(--r-md); padding:16px 18px; font-size:16px; line-height:1.5; color:var(--ink-soft); }
.idemo-c { border:1px dashed var(--ink-mute); }
.idemo-b { border:1.5px solid var(--teal); }
.idemo-arrow { display:flex; align-items:center; justify-content:center; color:var(--teal); }
.idemo-arrow .vico { width:24px; height:24px; }
.idemo-lab { font-size:12.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 6px; }
.idemo-main { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; margin-top:24px; align-items:start; }
.idemo-media { margin:0; }
.idemo-side .ind-watch { margin-top:4px; }
.idemo-more { margin-top:16px; }
.idemo-more .ind-demo-shows { margin-top:12px; }

.acc > summary h3.acc-t { margin:0; }
@media (max-width: 1100px) {
  .vjs .ipick { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ipick-img { aspect-ratio:16 / 6; }
  .isys-auto--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .isys-core, .isys-auto, .isys-auto--4 { grid-template-columns:minmax(0,1fr); }
  .isys-pair { grid-template-columns:minmax(0,1fr); }
  .idemo-main { grid-template-columns:minmax(0,1fr); }
  .idemo-cb { grid-template-columns:minmax(0,1fr); }
  .idemo-arrow { height:36px; }
  .idemo-arrow .vico { transform:rotate(90deg); }
}
@media (max-width: 640px) {
  .vjs .ipick { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .ipick-img { display:none; }
  .ipick-btn { min-height:56px; justify-content:center; }
  .ipick-name { padding:10px 12px 0; }
  .ipick-m { padding:2px 12px 10px; }
  .ip-h { font-size:32px; }
  .ip-lead { font-size:22px; }
  .ip-step { padding-left:22px; }
  .isys { padding:16px; }
  .ip-step--a .isys { margin-left:-24px; }
  .idemo-h { font-size:26px; }
}
@media (prefers-reduced-motion: reduce) {
  .otab, .ipick-btn, .ipick-img img { transition:none; }
  .otab:hover, .ipick-btn:hover { transform:none; }
}

/* v4 contrast: demo captions sit on cream here, and the rule numbers sit on teal. */
.idemo .idemo-media figcaption { color:var(--ink-soft); }
.idemo .ind-demo-len { color:var(--teal); }
.govrule .rulenum { color:var(--on-dark-soft); }