/* ============================================================
   Where it fits (light band)
   ============================================================ */
/* hairline grid, not gaps — the rules continue through the light bands */
.use-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(48px,7vw,86px)}
.use-cases article{border-top:1px solid var(--line-l);padding:24px clamp(20px,2.4vw,34px) 0}
.use-cases article:first-child{padding-left:0}
.use-cases article:last-child{padding-right:0}
.use-cases article+article{border-left:1px solid var(--line-l)}
.use-cases .label{min-height:36px;color:var(--on-light)}
.use-cases h3{margin-top:26px;font-size:clamp(21px,2.1vw,27px);line-height:1.18;letter-spacing:-.02em}
.use-cases p{margin-top:18px;color:#4d5450;font-size:16.5px}
.use-cases .note{
  margin-top:22px;padding-left:15px;border-left:1px solid var(--ink);
  font-size:14px;color:#313733;
}

/* ============================================================
   How we work — sticky card stack
   ============================================================ */
.stack{margin-top:clamp(48px,7vw,86px);padding-bottom:clamp(40px,6vw,90px)}
.stack-card{
  position:sticky;top:calc(var(--nav-h) + 26px + (var(--n) * 16px));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);
  background:#fff;border:1px solid var(--line-l);
  padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,42px);
  margin-bottom:18px;
}
.stack-card .idx{font-size:clamp(28px,4vw,54px);line-height:1;color:#2f7a26;font-variant-numeric:tabular-nums}
.stack-card .label{color:var(--on-light)}
.stack-card h3{margin-top:16px;font-size:clamp(22px,2.5vw,33px);line-height:1.1;letter-spacing:-.022em}
.stack-card p{margin-top:14px;color:#4d5450;font-size:16.5px;max-width:56ch}

/* ============================================================
   Technology
   ============================================================ */
.approach{border-top:1px solid var(--line-l)}
.technology{border-top:1px solid var(--line-l);background:#f6f6f3}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(44px,6vw,72px)}
.tech-grid>div{padding-right:clamp(24px,3vw,54px)}
.tech-grid>div+div{border-left:1px solid var(--line-l);padding:0 0 0 clamp(24px,3vw,54px)}
.tech-lead{font-size:clamp(18px,1.8vw,22px);line-height:1.5;max-width:34ch}
.tech-list{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px}
.tech-list li{color:#313733;font-size:15px}
.tech-list li::before{content:"+";display:inline-block;margin-right:7px;color:var(--on-light);font-weight:600}
.principles article{border-bottom:1px solid var(--line-l);padding:20px 0}
.principles article:first-child{padding-top:0}
.principles article:last-child{border-bottom:0;padding-bottom:0}
.principles h3{font-size:19px;letter-spacing:-.015em}
.principles p{margin-top:10px;color:#4d5450;font-size:16px}

/* ============================================================
   About (light band)
   ============================================================ */
.about{border-top:1px solid var(--line-l)}
.about-grid{display:grid;grid-template-columns:minmax(150px,1fr) 2.1fr;gap:clamp(24px,4vw,60px);align-items:start}
.about-grid .label{padding-top:14px}
.about-grid>p{
  font-size:clamp(21px,2.7vw,36px);line-height:1.32;letter-spacing:-.022em;max-width:22ch;
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .use-cases{grid-template-columns:1fr}
  .use-cases article{padding:24px 0 0}
  .use-cases article+article{border-left:0;margin-top:34px}
  .use-cases .label{min-height:0}
  .stack-card{gap:24px}
  .tech-grid{grid-template-columns:1fr}
  .tech-grid>div{padding-right:0}
  .tech-grid>div+div{border-left:0;padding-left:0;margin-top:40px}
  .tech-lead{max-width:52ch}
  .about-grid{grid-template-columns:1fr}
  .about-grid .label{padding-top:0}
  .about-grid>p{max-width:32ch}
}
@media(max-width:760px){
  .use-cases{margin-top:36px}
  .use-cases h3{margin-top:18px;font-size:22px}
  .stack{margin-top:36px}
  .stack-card{grid-template-columns:1fr;gap:10px;padding:24px 20px;position:static;margin-bottom:14px}
  .stack-card h3{margin-top:12px}
  .stack-card p{font-size:15.5px}
  .tech-grid{margin-top:30px}
  .tech-lead{font-size:17.5px}
  .principles p{font-size:15.5px}
  .about-grid>p{font-size:22px;max-width:none}
}

/* ============================================================
   Pipe schematic band (replaces the pixel band)
   ============================================================ */
.pipes{background:#f4f4f1;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);overflow:hidden}
.pipes-svg{display:block;width:100%;height:clamp(150px,17vw,240px)}
.pipe-lines{opacity:.62}
.pipe-labels{font-family:var(--sans);text-transform:uppercase}
.pipe-flow{opacity:.85;animation:pipe-flow 2.4s linear infinite}
@keyframes pipe-flow{to{stroke-dashoffset:-36}}
.pipe-nodes circle{animation:pipe-pulse 10.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes pipe-pulse{0%,6%{fill:#c9cac4}9%,14%{fill:#3f8f33}17%,100%{fill:#c9cac4}}
@media(prefers-reduced-motion:reduce){
  .pipe-flow{animation:none;stroke-dasharray:none;opacity:.35}
  .pipe-nodes circle{animation:none}
  .pipe-probe{display:none}
}
@media print{.pipes{display:none}}

/* ============================================================
   LIGHT SHEET — the landing page in the same scheme as /cui/ and
   /integrity/. Everything below is written here, not in styles.css,
   because detail.css is linked by index.html ALONE: the eight dark
   /insights/ pages and the six demo pages cannot be touched by it.

   Three traps this block deliberately works around:
     1. styles.css:113 `.hero-lead{color:#fff!important}` — the
        override has to carry !important too.
     2. styles.css:164 `.band.light{background:var(--paper)}` is
        (0,2,0), so every band ground below uses the doubled class.
     3. Focus rings are anchored to homepage section classes. A
        page-wide `:focus-visible` override would outrank
        `.contact-section :focus-visible` and put an invisible ink
        ring inside the untouchable blue band.
   ============================================================ */
:root{
  --ground:#f6f6f3;        /* page ground, as on the demo pages */
  --panel:#fff;            /* bands that hold a drawing or a grid */
  --clay:#f4f4f1;          /* drawing ground inside the figure panel */
  --t1:#1c231a;            /* 14.9:1 — headings, numerals, linework */
  --t2:rgba(2,8,1,.7);     /*  7.6:1 — body copy */
  --t3:rgba(2,8,1,.6);     /*  5.0:1 — 11.5-13px small text */
  --ln:rgba(2,8,1,.13);    /* hairline */
  --track:rgba(2,8,1,.1);  /* progress rail */
  --live-ink:#2f7a26;      /* 4.9:1 — small "this one is active" text */
  --live:#3f8f33;          /* marks only, never small text */
  --wash:#eaf6e6;          /* active fill */
  --data:'Barlow','Helvetica Neue',Arial,sans-serif;
}
body{background:var(--ground);color:var(--t1)}
/* the nav stays the dark bar, exactly as on the demo pages */
.nav{color:#fff}
.nav .brand{color:#fff}
.label{color:var(--t3)}

/* ---------- hero ---------- */
.hero{border-bottom-color:var(--ln)}
.hero h1 .accent{color:var(--t2)}      /* was mint: a tonal step, not a colour step */
.hero-split{border-top-color:var(--ln)}
.hero-cell:last-child{border-color:var(--ln)}
.hero-cell p{color:var(--t2)}
.hero-lead{color:var(--t1)!important}  /* trap 1 */
.button{background:var(--ink);color:#fff}
.button:hover{background:#1a221a}

/* ---------- rotator ---------- */
.rotator{border-bottom-color:var(--ln)}
.rot-list>span{color:var(--t1)}
.rot-list>span.is-past{color:var(--t3);opacity:1}
.rot-note{color:var(--t2)}

/* ---------- flow band: white plate, active cell washed ---------- */
.flow{background:var(--panel)}
.flow-grid li{border-top-color:var(--ln)}
.flow-grid li+li{border-left-color:var(--ln)}
.flow-grid .idx{color:var(--t3);font-family:var(--data);font-weight:500;font-variant-numeric:tabular-nums}
.flow-kicker{color:var(--t3)}
.flow-core{background:var(--wash);color:var(--t1);box-shadow:inset 0 0 0 1px var(--live-ink)}
.flow-core .idx{color:var(--live-ink)}
.flow-core .flow-kicker{color:var(--live-ink)}
.flow-core strong{color:var(--t1)}

/* ---------- capabilities: figure panel + scroll-linked rows ---------- */
.band-intro{color:var(--t2)}
.pin-inner{border-color:var(--ln);background:var(--panel)}
.pin-stage{background:
  linear-gradient(rgba(2,8,1,.05) 1px,transparent 1px) 0 0/100% 24px,
  linear-gradient(90deg,rgba(2,8,1,.05) 1px,transparent 1px) 0 0/24px 100%,var(--clay)}
.pf-box{stroke:rgba(2,8,1,.24)}
.pf-mintbox{fill:var(--wash);stroke:var(--live-ink)}
.pf-line{fill:var(--t2)}
.pf-dim{fill:rgba(2,8,1,.22)}
.pf-mint{fill:var(--live)}
.pf-path{stroke:rgba(2,8,1,.3)}
.pf-dot{fill:var(--live)}
.pf-check{stroke:rgba(2,8,1,.4)}
.pf-check-mint{stroke:var(--live)}
.pin-count{color:var(--t3);font-family:var(--data);font-weight:500;font-variant-numeric:tabular-nums}
.pin-count em{color:var(--live-ink)}
.pin-bar{background:var(--track)}
.pin-bar i{background:var(--t1)}
.pin-rows{border-top-color:var(--ln)}
.prow{border-bottom-color:var(--ln)}
.prow-num{color:var(--t3);font-family:var(--data);font-weight:500;font-variant-numeric:tabular-nums}
.prow>p{color:var(--t2)}
.prow .tags{color:var(--t3);font-family:var(--data)}
/* the live row lifts to white with a green rule. inset box-shadow, not
   border-left: a real border would nudge the text sideways on every
   activation, because box-sizing is border-box globally. */
.prow.is-live{background:var(--panel);color:var(--t1);box-shadow:inset 2px 0 0 var(--live),inset 0 0 0 1px var(--ln)}
.prow.is-live .prow-num{color:var(--live-ink)}
.prow.is-live h3{color:var(--t1)}
.prow.is-live>p{color:var(--t2)}
.prow.is-live .tags{color:var(--t3)}

/* ---------- pipe schematic: white plate ---------- */
.pipes{background:var(--panel);border-color:var(--ln)}
.pipe-labels{font-family:var(--data);letter-spacing:.06em;fill:var(--t3)}  /* the fill= attribute on the <g> is rgba(2,8,1,.5) = 3.8:1 at 11px; CSS beats a presentation attribute */

/* ---------- the remaining bands (trap 2: doubled class) ---------- */
.band.light.fits{background:var(--ground)}
.band.light.approach{background:var(--ground)}
.band.light.about{background:var(--ground)}
.band.light.technology{background:var(--panel)}
.use-cases article{border-top-color:var(--ln)}
.use-cases article+article{border-left-color:var(--ln)}
.use-cases p{color:var(--t2)}
.approach{border-top-color:var(--ln)}
.stack-card{border-color:var(--ln)}
.stack-card .idx{font-family:var(--data);font-weight:500;color:var(--t1);font-variant-numeric:tabular-nums}
.stack-card p{color:var(--t2)}
.technology{border-top-color:var(--ln)}
.tech-grid>div+div{border-left-color:var(--ln)}
.tech-list li{color:var(--t2)}
.tech-list li::before{color:var(--t3)}
.principles article{border-bottom-color:var(--ln)}
.principles p{color:var(--t2)}
.about{border-top-color:var(--ln)}

/* ---------- focus rings (trap 3: never page-wide) ---------- */
.hero :focus-visible,.rotator :focus-visible,.flow :focus-visible,
.capabilities :focus-visible,.pipes :focus-visible{outline-color:var(--t1)}
/* app.js makes every .prow focusable, so the row itself needs a ring;
   styles.css:44 only ever matched its descendants. */
.prow:focus-visible{outline:2px solid var(--t1);outline-offset:-3px}

/* one grey for eyebrows: styles.css:165 `.band.light .label` is (0,2,0) and
   outranks the bare `.label` above, which left two label greys on one page. */
.band.light .label{color:var(--t3)}
/* the skip link is the first tab stop and sits on white: the global mint ring is 1.2:1 there */
.skip:focus-visible{outline-color:var(--t1)}

@media(max-width:760px){
  /* the cells lose their horizontal padding when they stack, so the active
     cell's inset ring would sit on top of its own text */
  .flow-grid li.flow-core{margin:0;padding-left:16px;padding-right:16px}  /* beat styles.css `.flow-grid li` (0,1,1) */
}

/* Forced colours: these rules are appended AFTER styles.css's block, so the
   state cues it restores have to be restated here or they are overwritten. */
@media(forced-colors:active){
  .pin-bar i{background:Highlight}
  .rot-list>span.is-past{color:GrayText}
  .prow.is-live{box-shadow:none}            /* the Highlight outline is the cue */
  .button{forced-color-adjust:auto}         /* an ink fill vanishes on a dark high-contrast canvas */
  .flow-core{box-shadow:none;outline:2px solid Highlight;outline-offset:-2px}
}