/* ==========================================================================
   4Shadow Analytix — Field to Decision site stylesheet
   Template: Helmis Demo 3 layout system (topbar, hero, alternating bands,
   eye-lines, card grids, stage strips, dark footer).
   Content components: story text blocks, stat strips, figures, info cards,
   pipeline, change cards, and all SVG diagram classes.
   One file. Every page links this. No bespoke per-page CSS.
   ========================================================================== */

:root{
  /* Demo 3 chrome tokens */
  --dark:#0E1A26;
  --oxblood:#7A1F2B;
  --cloud:#F2F4F6;
  --slate:#5C6B7A;
  /* Content accent tokens (swap here to re-skin the whole site) */
  --ink:#1F2A44;
  --secondary:#46536e;
  --muted:#7a849c;
  --hairline:#e3e6ec;
  --blue:#1D5FAD;
  --teal:#0E7C9B;
  --gold:#F2A900;
  --red:#d03b3b;
  --blue-tint:rgba(29,95,173,.06);
  --teal-tint:rgba(14,124,155,.07);
  --gold-tint:rgba(242,169,0,.09);
  --band-tint:rgba(29,95,173,.09);
  --node-fill:#FFFFFF;
  --gray-node:#7a849c;
  --svg-gray:#7a849c;
  --svg-gray-soft:#c3cad8;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--ink);background:#FFFFFF;line-height:1.55}
a{text-decoration:none}
code{font-family:'JetBrains Mono',monospace;font-size:.92em}

/* ---------- Topbar ---------- */
.topbar{background:var(--dark);color:#FFFFFF;padding:.65rem clamp(1.2rem,4vw,3rem);
        display:flex;justify-content:space-between;align-items:center;font-size:.78rem}
.topbar .brand{font-weight:700;letter-spacing:.08em;color:#FFFFFF}
.topbar .brand span{color:rgba(255,255,255,.55);font-weight:500}
.topbar .mono{font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.55)}
.topbar a.brand:hover span{color:#FFFFFF}

/* ---------- Hero band ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--dark) 0%,#400D14 100%);
      padding:clamp(3rem,8vw,5.5rem) clamp(1.2rem,4vw,3rem);border-bottom:4px solid var(--oxblood)}
.hero .motif{position:absolute;right:clamp(-60px,-2vw,40px);top:50%;transform:translateY(-50%);
      width:min(46vw,560px);opacity:.14;pointer-events:none}
.hero-in{position:relative;max-width:760px}
.hero .tag{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1rem}
.hero h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;color:#FFFFFF;line-height:1.12;margin-bottom:1.1rem;letter-spacing:-.01em}
.hero .sub{font-family:'Source Serif 4',serif;font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.76);line-height:1.65;max-width:56ch}

/* ---------- Bands ---------- */
.band{padding:clamp(2.2rem,5vw,3.5rem) clamp(1.2rem,4vw,3rem)}
.band.cloud{background:var(--cloud)}
.band-in{max-width:1200px;margin:0 auto}
.band-in.narrow{max-width:920px}
.eye{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);margin-bottom:.5rem}
.band h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;color:var(--dark);margin-bottom:1.4rem;letter-spacing:-.01em}

/* ---------- Text columns inside bands ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem 2.6rem}
.cols p,.lead p,p.lead{color:var(--secondary);line-height:1.65;margin-bottom:12px;max-width:70ch}
.cols p:last-child,p.lead:last-child{margin-bottom:0}
.cols strong,p.lead strong{color:var(--ink)}
.mini{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--oxblood);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.taskline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-top:1.6rem;
          border:1px solid rgba(92,107,122,.25);border-left:4px solid var(--oxblood);border-radius:8px;
          padding:.85rem 1.1rem;background:#FFFFFF}
.band.cloud .taskline{background:#FFFFFF}
.taskline .n{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--oxblood);font-weight:700;letter-spacing:.12em}
.taskline .t{font-weight:700;color:var(--dark)}

/* ---------- Nav cards / info cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.cards .card{display:block;border-radius:10px;padding:1.2rem 1.3rem;background:#FFFFFF;
      border:1px solid rgba(92,107,122,.25);box-shadow:0 2px 10px rgba(14,26,38,.06)}
.cards a.card:hover{border-color:var(--oxblood)}
.cards .card.primary{background:var(--oxblood);border-color:var(--oxblood)}
.cards .card.primary .t,.cards .card.primary .d,.cards .card.primary .n{color:#FFFFFF}
.cards .card .n{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--oxblood);font-weight:700;margin-bottom:.35rem;letter-spacing:.08em}
.cards .card .t{font-size:.96rem;font-weight:700;color:var(--dark);margin-bottom:.4rem}
.cards .card .d{font-family:'Source Serif 4',serif;font-size:.85rem;color:var(--slate);line-height:1.55}
.cards .card .d p{margin-bottom:.6rem}
.cards .card .d p:last-child{margin-bottom:0}
.cards .card .d strong{color:var(--dark)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ---------- Stage strip / stat strip ---------- */
.stagestrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border:1px solid rgba(92,107,122,.25);border-radius:10px;overflow:hidden;background:#FFFFFF}
.stage{padding:1.15rem 1.2rem;border-left:1px solid rgba(92,107,122,.25)}
.stage:first-child{border-left:0}
.stage .n{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--oxblood);font-weight:700;margin-bottom:.3rem;letter-spacing:.08em}
.stage .t{font-size:.9rem;font-weight:700;color:var(--dark);margin-bottom:.25rem}
.stage .d{font-family:'Source Serif 4',serif;font-size:.8rem;color:var(--slate);line-height:1.5}
.stagestrip.stats .stage .t{font-size:1.55rem;font-weight:800;letter-spacing:-.01em}
.statnote{font-family:'Source Serif 4',serif;font-size:.95rem;color:var(--slate);line-height:1.65;max-width:70ch;margin-top:1.4rem}
.statnote strong{color:var(--dark)}

/* ---------- Serif note ---------- */
.note{font-family:'Source Serif 4',serif;font-size:.85rem;color:var(--slate);max-width:70ch;margin-top:1.6rem;line-height:1.6}

/* ---------- Takeaway accent (kept for one-page file compatibility) ---------- */
.takeaway{font-weight:700;color:var(--ink) !important;border-left:3px solid var(--gold);padding-left:12px}
.big-num{font-size:25px;font-weight:700;color:var(--ink);line-height:1.25}
.big-num .accent{color:var(--blue)}
.result-stats{display:flex;flex-wrap:wrap;gap:32px;margin:6px 0 16px}
.result-stats .stat .num{font-size:40px;font-weight:700;line-height:1.05;color:var(--blue);letter-spacing:-.02em}
.result-stats .stat .lbl{font-size:13px;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.star-block{padding:18px 0;border-top:1px solid var(--hairline)}
.star-block h3{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:0 0 10px}
.star-block p{margin:0 0 12px;color:var(--secondary);max-width:72ch;line-height:1.6}
.star-block p:last-child{margin-bottom:0}
.star-block strong{color:var(--ink)}
.star-block.result{border-top:none;border-left:4px solid var(--blue);padding:16px 14px 16px 20px;margin-top:8px;
      background:var(--blue-tint);border-radius:0 6px 6px 0}
.star-block.result h3{color:var(--blue)}
.star-block.result p{color:var(--ink)}

/* ---------- Eras (story 3) ---------- */
.era-meta{font-size:.85rem;color:var(--muted);margin-bottom:1rem;font-family:'JetBrains Mono',monospace}
.pattern-line{padding-left:14px;border-left:3px solid var(--gold);font-weight:700;color:var(--ink);max-width:68ch;margin-bottom:1rem}
.lineage-note{font-family:'Source Serif 4',serif;color:var(--slate);max-width:62ch;line-height:1.65}

/* ---------- Figures ---------- */
figure.central{margin:0}
figure.central svg,figure.central img{width:100%;height:auto;display:block}
figure.central img{border:1px solid rgba(92,107,122,.25);border-radius:6px;box-shadow:0 2px 10px rgba(14,26,38,.06)}
figure.central figcaption{margin-top:12px;font-family:'Source Serif 4',serif;font-size:15px;color:var(--slate);line-height:1.5;font-style:italic;text-align:center}
figure.central figcaption.left{text-align:left;font-style:normal}
figure.central figcaption .recon{color:var(--red);font-weight:600}
.fig-sub{color:var(--secondary);max-width:66ch;margin:0 0 18px}
.scrollwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scrollwrap svg{display:block;width:100%;min-width:700px;height:auto}
.pipelabel{font-size:15px;font-weight:700;letter-spacing:.02em;margin:22px 0 8px}
.pipelabel.fail{color:var(--gold)}
.pipelabel.fix{color:var(--blue)}
.diagram-caption{margin:18px 0 0;font-family:'Source Serif 4',serif;font-size:15px;color:var(--slate);font-style:italic;max-width:44em}

/* ---------- Callout strips ---------- */
.strip{margin-top:24px;border-radius:8px;padding:22px 26px}
.strip h3{font-size:15px;font-weight:700;letter-spacing:.02em;margin:0 0 10px}
.strip p{margin:0 0 10px;color:var(--secondary);max-width:70ch;line-height:1.6}
.strip p:last-child{margin-bottom:0}
.strip strong{color:var(--ink)}
.strip.echo{background:var(--blue-tint);border-left:4px solid var(--blue)}
.strip.echo h3{color:var(--blue)}
.strip.reg{background:var(--teal-tint);border-left:4px solid var(--teal)}
.strip.reg h3{color:var(--teal)}
.strip.goldline{background:#FFFFFF;border:1px solid rgba(92,107,122,.25);border-left:4px solid var(--gold)}
.strip.goldline h3{color:var(--ink)}

/* ---------- Appendix: pipeline + change cards ---------- */
h3.section{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:34px 0 6px;padding-top:22px;border-top:1px solid var(--hairline)}
p.section-sub{color:var(--secondary);max-width:66ch;margin:0 0 18px}
p.body-copy{color:var(--secondary);max-width:70ch;margin:0 0 14px;line-height:1.6}
.pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pipeline .step{border:1px solid rgba(92,107,122,.25);border-radius:10px;padding:14px 16px;background:#FFFFFF;box-shadow:0 2px 10px rgba(14,26,38,.06)}
.pipeline .step .num{display:inline-block;background:var(--oxblood);color:#fff;font-weight:700;border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px;font-size:14px;margin-bottom:8px;font-family:'JetBrains Mono',monospace}
.pipeline .step h4{font-size:16px;font-weight:700;margin:0 0 4px}
.pipeline .step p{margin:0;font-family:'Source Serif 4',serif;font-size:15px;color:var(--slate)}
.pipeline .step .tool{font-weight:700;color:var(--teal);font-family:'Inter',sans-serif}
.changed{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.changed .card{border:1px solid rgba(92,107,122,.25);border-radius:10px;padding:16px 18px;background:#FFFFFF;box-shadow:0 2px 10px rgba(14,26,38,.06)}
.changed .card h4{font-size:16px;font-weight:700;margin:0 0 6px;color:var(--blue)}
.changed .card p{margin:0 0 10px;font-size:15px;color:var(--secondary);line-height:1.6}
.changed .card .then-now{margin:0;padding:8px 12px;background:var(--teal-tint);border-left:3px solid var(--teal);font-size:14px;color:var(--ink)}

/* ---------- SVG shared classes ---------- */
svg text{font-family:'Inter',sans-serif}
.svg-label{fill:var(--ink)}
.svg-sub{fill:var(--secondary)}
.svg-mut{fill:var(--muted)}
.svg-coltitle{font-weight:700;font-size:15px;letter-spacing:.1em}
.svg-node-text{font-weight:600;font-size:13.5px;fill:var(--ink)}
.svg-rowlabel{font-weight:600;font-size:12.5px;fill:var(--secondary)}
.svg-rowyears{font-size:12px;fill:var(--muted)}
.svg-caption{font-style:italic;font-weight:600;font-size:14px;fill:var(--blue)}
.svg-band{fill:var(--band-tint)}
.svg-node{fill:var(--node-fill)}
.svg-arrow{stroke:var(--muted);stroke-width:2;fill:none}
.svg-arrowhead{fill:var(--muted)}
.diagram text{fill:var(--ink)}
.diagram .lbl-muted{fill:var(--muted)}
.diagram .panel-label{font-weight:700;letter-spacing:.08em}
.diagram .gray-stroke{stroke:var(--svg-gray)}
.diagram .gray-fill{fill:var(--svg-gray)}
.diagram .gray-soft-stroke{stroke:var(--svg-gray-soft)}
.diagram .blue-stroke{stroke:var(--blue)}
.diagram .blue-fill{fill:var(--blue)}
.diagram .teal-stroke{stroke:var(--teal)}
.diagram .teal-fill{fill:var(--teal)}
.diagram .divider{stroke:var(--hairline)}
.n-box{fill:#FFFFFF;stroke:rgba(92,107,122,.35);stroke-width:2}
.n-check{fill:none;stroke:var(--secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-cbox{fill:none;stroke:var(--muted);stroke-width:2}
.n-lab{fill:var(--ink);font-size:13px;font-weight:700;text-anchor:middle}
.n-lab12{fill:var(--ink);font-size:12px;font-weight:700;text-anchor:middle}
.n-sub{fill:var(--muted);font-size:12px;text-anchor:middle}
.n-arrow{stroke:var(--secondary);stroke-width:2}
.n-ahead{fill:var(--secondary)}
.o-box{fill:var(--teal-tint);stroke:var(--teal);stroke-width:2.5}
.o-cbox{fill:none;stroke:var(--teal);stroke-width:2}
.o-lab12{fill:var(--teal);font-size:12px;font-weight:700;text-anchor:middle}
.o-mark{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.f-box{fill:var(--gold-tint);stroke:var(--gold);stroke-width:2.5}
.f-cbox{fill:none;stroke:var(--gold);stroke-width:2}
.f-lab{fill:var(--gold);font-size:13px;font-weight:700;text-anchor:middle}
.f-sub{fill:var(--gold);font-size:12px;font-weight:600;text-anchor:middle}
.f-mark{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.b-box{fill:var(--blue-tint);stroke:var(--blue);stroke-width:2.5}
.b-cbox{fill:none;stroke:var(--blue);stroke-width:2}
.b-lab{fill:var(--blue);font-size:14px;font-weight:800;text-anchor:middle}
.b-check{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lp-node{fill:#FFFFFF;stroke:var(--muted);stroke-width:2}
.lp-node-bad{fill:var(--gold-tint);stroke:var(--gold);stroke-width:2.5}
.lp-text{fill:var(--ink);font-size:13px;font-weight:700;text-anchor:middle}
.lp-sub{fill:var(--secondary);font-size:12px;text-anchor:middle}
.lp-arrow{stroke:var(--secondary);stroke-width:2;fill:none}
.lp-ahead{fill:var(--secondary)}
.lp-return{stroke:var(--gold);stroke-width:2.5;fill:none;stroke-dasharray:6 5}
.lp-return-head{fill:var(--gold)}
.lp-return-label{fill:var(--gold);font-size:13px;font-weight:700;text-anchor:middle}

/* ---------- Footer ---------- */
footer.site{background:var(--dark);color:rgba(255,255,255,.72);padding:1.6rem clamp(1.2rem,4vw,3rem);font-size:.82rem}
footer.site .f-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
footer.site a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.35)}