/* =========================================================================
   Economic Partnership Diagnostic (NGIN) — styles
   Ported from docs/mockup_13.html: this is the mock-up CSS, not a
   reinterpretation. Three deliberate changes from the original:
     1. Color and typography tokens were replaced with the ones from the
        NGIN Marketing Style Guide 2026 (Mirage #1D2A35, Mantis #82bd50,
        Alto #d9d9d9, #cbdebc; Lora for headings, Lato for body).
     2. Everything is scoped under .ngin-cic so the host site's theme and
        these styles cannot override each other.
     3. The dark theme was dropped: it is not in the brand guide.
   If the mock-up changes, the port is run again rather than edited by hand.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

.ngin-cic, .ngin-cic *, .ngin-cic *::before, .ngin-cic *::after { box-sizing: border-box; }
.ngin-cic .page { display: none; }
.ngin-cic .page.active { display: block; }


  :root{
    --bg: #ffffff;
    --bg-raise: #ffffff;
    --line: #d9d9d9;
    --ink: #1d2a35;
    --ink-soft: rgba(29, 42, 53, .70);
    --ink-faint: rgba(29, 42, 53, .45);
    --green: #82bd50;
    --green-deep: #1d2a35;
    --green-soft: #cbdebc;
    --navy: #1d2a35;
    --navy-soft: #1d2a35;
    --amber:#1d2a35;
    --amber-soft:rgba(217, 217, 217, .35);
    --red:#1d2a35;
    --red-soft:rgba(217, 217, 217, .35);
    --grey-soft:rgba(217, 217, 217, .35);
    --grey-ink:rgba(29, 42, 53, .70);
    --pink-line:#82bd50;
    --pink-soft:rgba(217, 217, 217, .35);
    --field-line:#1d2a35;
    --field-soft:rgba(217, 217, 217, .35);
    --postit-bg:rgba(217, 217, 217, .35);
    --postit-line:#d9d9d9;
    --postit-ink:#1d2a35;
    --ai-bg:#cbdebc;
    --ai-line:#82bd50;
    --ai-ink:#1d2a35;
    --mantis:#82bd50;
    --wash:rgba(217, 217, 217, .35);
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Lato', ui-monospace, Menlo, monospace;
  }.ngin-cic

  *{box-sizing:border-box;}.ngin-cic{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;}.ngin-cic h1, .ngin-cic h2, .ngin-cic h3, .ngin-cic h4{font-family:var(--font-display);font-weight:700;color:var(--ink);text-wrap:balance;margin:0;}.ngin-cic p{margin:0;}.ngin-cic a{color:var(--green);}.ngin-cic .mono{font-family:var(--font-mono);letter-spacing:.01em;}.ngin-cic .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}.ngin-cic .narrow{max-width:760px;}.ngin-cic .topnav{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:40;}.ngin-cic .topnav-inner{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;}.ngin-cic .brand{display:flex;align-items:center;gap:12px;cursor:pointer;border:none;background:none;padding:0;}.ngin-cic .brand-mark{width:36px;height:36px;border-radius:9px;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none;}.ngin-cic .brand-mark svg{width:19px;height:19px;}.ngin-cic .brand-text{text-align:left;}.ngin-cic .brand-text .n1{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.1;color:var(--ink);}.ngin-cic .brand-text .n2{font-size:.63rem;letter-spacing:.09em;color:var(--ink-faint);text-transform:uppercase;}.ngin-cic .navlinks{display:flex;align-items:center;gap:28px;font-size:.87rem;color:var(--ink-soft);}.ngin-cic .navlinks .cur{color:var(--green);font-weight:600;border-bottom:2px solid var(--green);padding-bottom:2px;}.ngin-cic .navlinks span{cursor:default;}.ngin-cic .stepbar{background:var(--grey-soft);border-bottom:1px solid var(--line);position:sticky;top:69px;z-index:39;}.ngin-cic .stepbar-inner{max-width:1180px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:0;overflow-x:auto;}.ngin-cic .step-item{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:none;padding:6px 4px;font-family:var(--font-body);flex:none;}.ngin-cic .step-dot{width:23px;height:23px;border-radius:50%;border:2px solid var(--ink-faint);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--ink-faint);flex:none;}.ngin-cic .step-item .step-label{font-size:.83rem;color:var(--ink-faint);white-space:nowrap;font-weight:500;}.ngin-cic .step-item.done .step-dot{background:var(--green);border-color:var(--green);color:#fff;}.ngin-cic .step-item.done .step-label{color:var(--ink-soft);}.ngin-cic .step-item.active .step-dot{border-color:var(--green);color:var(--green);}.ngin-cic .step-item.active .step-label{color:var(--ink);font-weight:700;}.ngin-cic .step-rule{width:34px;height:1px;background:var(--line);margin:0 8px;flex:none;}.ngin-cic .page{display:none;}.ngin-cic .page.active{display:block;}.ngin-cic section{padding:56px 0;}.ngin-cic .eyebrow{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:10px;}.ngin-cic .lede{font-size:1.06rem;color:var(--ink-soft);max-width:700px;margin-top:14px;}.ngin-cic h2.page-title{font-size:2rem;}.ngin-cic .callout{border-radius:12px;padding:18px 20px;margin:22px 0;display:flex;gap:12px;}.ngin-cic .callout-q{background:var(--pink-soft);border:1.5px dashed var(--pink-line);}.ngin-cic .callout-q .tag{color:var(--pink-line);}.ngin-cic .callout-icon{flex:none;font-size:1.05rem;line-height:1.3;}.ngin-cic .callout .tag{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:5px;}.ngin-cic .callout p{font-size:.9rem;color:var(--ink-soft);}.ngin-cic .callout p+p{margin-top:8px;}.ngin-cic .callout-decided{background:var(--green-soft);border:1.5px solid var(--green);}.ngin-cic .callout-decided .tag{color:var(--green-deep);}.ngin-cic .callout-field{background:var(--field-soft);border:1.5px solid var(--field-line);}.ngin-cic .callout-field .tag{color:var(--field-line);}.ngin-cic .postit{background:var(--postit-bg);border:1.5px solid var(--postit-line);border-radius:3px 12px 12px 12px;padding:18px 20px;margin:26px 0 0 0;position:relative;transform:rotate(-.35deg);box-shadow:0 6px 16px -8px rgba(0,0,0,.28);}.ngin-cic .postit::before{content:"📌";position:absolute;top:-14px;left:22px;font-size:1.2rem;transform:rotate(8deg);}.ngin-cic .postit .tag{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--postit-ink);margin-bottom:7px;display:flex;align-items:center;gap:7px;}.ngin-cic .postit .tag .pill-mini{background:var(--postit-line);color:#fff;border-radius:20px;padding:1px 8px;font-size:.62rem;}.ngin-cic .postit p{font-size:.87rem;color:#1d2a35;}.ngin-cic .postit p+p{margin-top:7px;}.ngin-cic .postit .loc{font-size:.8rem;margin-top:9px;padding-top:9px;border-top:1px dashed var(--postit-line);color:#1d2a35;}.ngin-cic .postit .loc b{color:var(--postit-ink);}.ngin-cic .ai-box{background:var(--ai-bg);border:1.5px dashed var(--ai-line);border-radius:12px;padding:22px 24px;margin-top:14px;}.ngin-cic .ai-box .tag{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ai-ink);display:flex;align-items:center;gap:8px;margin-bottom:12px;}.ngin-cic .ai-box .tag .spark{font-size:.95rem;}.ngin-cic .ai-box .disclaimer{font-size:.72rem;color:var(--ai-ink);opacity:.75;font-style:italic;margin-top:14px;padding-top:12px;border-top:1px solid rgba(29, 42, 53, .18);}.ngin-cic .ai-box p{font-size:.92rem;color:var(--ink);}.ngin-cic .ai-box p+p{margin-top:10px;}.ngin-cic .ai-box h5{font-family:var(--font-body);font-size:.78rem;font-weight:700;color:var(--ai-ink);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 6px;}.ngin-cic .ai-box .cite{font-family:var(--font-mono);font-size:.74rem;color:var(--ai-ink);background:rgba(130, 189, 80, .16);padding:1px 6px;border-radius:4px;}.ngin-cic .grid{display:grid;gap:16px;}.ngin-cic .grid-3{grid-template-columns:repeat(3,1fr);}.ngin-cic .grid-2{grid-template-columns:repeat(2,1fr);}.ngin-cic .evidence-stack{grid-template-columns:1fr;gap:18px;}
  @media (max-width:900px){.ngin-cic .grid-3, .ngin-cic .grid-2{grid-template-columns:1fr;}}.ngin-cic .card{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:22px;}.ngin-cic .outcome-card{cursor:pointer;transition:border-color .15s;}.ngin-cic .outcome-card h4{font-size:1rem;margin-bottom:8px;}.ngin-cic .outcome-card p{font-size:.86rem;color:var(--ink-soft);}.ngin-cic .outcome-card.selected{border-color:var(--green);background:var(--green-soft);position:relative;}.ngin-cic .pill-selected{position:absolute;top:16px;right:16px;background:var(--green);color:#fff;font-size:.63rem;font-weight:700;letter-spacing:.05em;padding:3px 10px;border-radius:20px;}.ngin-cic .outcome-id{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);display:block;margin-bottom:6px;}.ngin-cic .strat-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}.ngin-cic .strat-chip{border:1px solid var(--line);background:var(--bg-raise);border-radius:9px;padding:10px 14px;font-size:.82rem;display:flex;align-items:center;gap:8px;}.ngin-cic .strat-chip .id{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);}.ngin-cic .strat-chip.on{border-color:var(--green);background:var(--green-soft);font-weight:600;}.ngin-cic .strat-chip .bridge{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}.ngin-cic .strat-chip .bridge.no{background:var(--ink-faint);}.ngin-cic .evidence-card{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px;}.ngin-cic .tagrow{display:flex;flex-wrap:wrap;gap:6px;}.ngin-cic .tag-pill{font-size:.66rem;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:20px;background:var(--grey-soft);color:var(--grey-ink);text-transform:uppercase;}.ngin-cic .tag-pill.on{background:var(--green-soft);color:var(--green-deep);}.ngin-cic .tag-pill.warn{background:var(--amber-soft);color:var(--amber);}.ngin-cic .tag-pill.crit{background:var(--red-soft);color:var(--red);}.ngin-cic .ev-id{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);}.ngin-cic .ev-strategy{font-size:.74rem;color:var(--ink-soft);}.ngin-cic .ev-strategy b{font-weight:700;color:var(--ink);}.ngin-cic .ev-field .tag-pill{margin-bottom:6px;}.ngin-cic .evidence-card h4{font-size:1.03rem;line-height:1.3;}.ngin-cic .ev-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.79rem;}.ngin-cic .ev-meta b{display:block;color:var(--ink-faint);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px;}.ngin-cic .ev-field{font-size:.85rem;}.ngin-cic .ev-field b{display:block;color:var(--ink-faint);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}.ngin-cic .ev-field.crit b{color:var(--red);}.ngin-cic .ev-field.crit p{color:var(--red);}.ngin-cic .ev-divider{border-top:1px dashed var(--line);}.ngin-cic .ev-source{font-size:.72rem;color:var(--ink-faint);}.ngin-cic .ev-fields-row{display:flex;gap:0;margin-top:2px;}.ngin-cic .ev-fields-row .ev-field{flex:1;padding:0 20px;}.ngin-cic .ev-fields-row .ev-field:first-child{padding-left:0;}.ngin-cic .ev-fields-row .ev-field+.ev-field{border-left:1px dashed var(--line);}
  @media (max-width:820px){.ngin-cic .ev-fields-row{flex-direction:column;gap:12px;}.ngin-cic .ev-fields-row .ev-field{padding:0;}.ngin-cic .ev-fields-row .ev-field+.ev-field{border-left:none;border-top:1px dashed var(--line);padding-top:12px;}
  }.ngin-cic .btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:12px 20px;font-size:.9rem;font-weight:600;font-family:var(--font-body);cursor:pointer;border:1px solid transparent;text-decoration:none;}.ngin-cic .btn-primary{background:var(--green);color:#fff;}.ngin-cic .btn-secondary{background:var(--bg-raise);color:var(--ink);border-color:var(--line);}.ngin-cic .btn-row{display:flex;gap:12px;justify-content:flex-end;margin-top:34px;}.ngin-cic .precedent-card{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:20px;}.ngin-cic .precedent-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}.ngin-cic .precedent-head h4{font-size:.98rem;}.ngin-cic .precedent-id{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);}.ngin-cic .precedent-tags{display:flex;flex-direction:column;gap:7px;margin:12px 0 4px;}.ngin-cic .precedent-tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}.ngin-cic .precedent-tag-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);min-width:82px;}.ngin-cic .precedent-card p{font-size:.83rem;color:var(--ink-soft);}.ngin-cic .lesson{background:var(--bg-raise);border-left:3px solid var(--green);border-radius:0 10px 10px 0;padding:16px 20px;margin-bottom:12px;}.ngin-cic .lesson h5{font-size:.9rem;color:var(--ink);margin-bottom:7px;text-transform:none;letter-spacing:0;font-weight:700;}.ngin-cic .lesson p{font-size:.85rem;color:var(--ink-soft);}.ngin-cic .lesson b{color:var(--ink);}.ngin-cic .rate-block{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin-bottom:20px;}.ngin-cic .rate-block h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}.ngin-cic .rate-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:18px;}.ngin-cic .rate-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 0;border-top:1px solid var(--line);}.ngin-cic .rate-row:first-of-type{border-top:none;}.ngin-cic .rate-label{font-size:.87rem;flex:1;min-width:180px;}.ngin-cic .rate-opts{display:flex;gap:7px;flex-wrap:wrap;}.ngin-cic .opt{font-size:.72rem;padding:5px 11px;border-radius:20px;background:var(--grey-soft);color:var(--ink-faint);}.ngin-cic .opt.strong{background:var(--green);color:#fff;font-weight:700;}.ngin-cic .opt.frag{background:var(--amber-soft);color:var(--amber);font-weight:700;}.ngin-cic .opt.emerg{background:var(--amber-soft);color:var(--amber);font-weight:700;}.ngin-cic .opt.missing{background:var(--red-soft);color:var(--red);font-weight:700;}.ngin-cic .opt.unknown{background:var(--grey-soft);color:var(--grey-ink);font-weight:700;border:1px solid var(--ink-faint);}.ngin-cic .stage-qs{background:var(--grey-soft);border-radius:10px;padding:16px 18px;font-size:.85rem;color:var(--ink-soft);margin:0;}.ngin-cic .stage-qs li{margin-bottom:6px;}.ngin-cic .stage-qs.muted{background:transparent;border:1px dashed var(--line);color:var(--ink-faint);}.ngin-cic .chain{margin-top:24px;}.ngin-cic .chain-stage{border-left:3px solid var(--line);padding:4px 0 28px 26px;position:relative;margin-left:8px;}.ngin-cic .chain-stage:last-child{padding-bottom:4px;}.ngin-cic .chain-stage::before{content:"";position:absolute;left:-9px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--bg-raise);border:2.5px solid var(--ink-faint);}.ngin-cic .chain-stage.passed{border-left-color:var(--green);}.ngin-cic .chain-stage.passed::before{background:var(--green);border-color:var(--green);}.ngin-cic .chain-stage.stopped{border-left-color:var(--red);}.ngin-cic .chain-stage.stopped::before{background:var(--red);border-color:var(--red);}.ngin-cic .chain-stage.locked{opacity:.5;}.ngin-cic .chain-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}.ngin-cic .chain-head h4{font-size:1.02rem;}.ngin-cic .chain-status{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:20px;flex:none;}.ngin-cic .chain-status.passed{background:var(--green-soft);color:var(--green-deep);}.ngin-cic .chain-status.stopped{background:var(--red-soft);color:var(--red);}.ngin-cic .chain-status.locked{background:var(--grey-soft);color:var(--grey-ink);}.ngin-cic .chain-reco{background:var(--red-soft);border-radius:8px;padding:13px 16px;margin-top:12px;font-size:.85rem;color:var(--ink);}.ngin-cic .chain-reco b{color:var(--red);}.ngin-cic .consol-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin-top:16px;}
  @media (max-width:800px){.ngin-cic .consol-grid{grid-template-columns:1fr;}}.ngin-cic .consol-item{padding:10px 0;border-top:1px solid var(--line);font-size:.87rem;}.ngin-cic .consol-item:nth-child(1), .ngin-cic .consol-item:nth-child(2){border-top:none;}.ngin-cic .consol-item b{color:var(--ink);}.ngin-cic .consol-item span{display:block;color:var(--ink-faint);font-size:.78rem;margin-top:1px;}.ngin-cic .consol-item .consol-desc{color:var(--ink-soft);font-size:.82rem;margin-top:3px;}.ngin-cic .consol-item .consol-attr{color:var(--ink-faint);font-size:.73rem;font-style:italic;margin-top:3px;}.ngin-cic .acs-box{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:24px 0;}.ngin-cic .acs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap;}.ngin-cic .acs-badge{background:var(--field-soft);color:var(--field-line);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:20px;}.ngin-cic .acs-row{display:grid;grid-template-columns:2fr 1fr .75fr .85fr;gap:10px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline;}.ngin-cic .acs-row:first-of-type{border-top:none;}.ngin-cic .acs-row .ind{font-size:.86rem;}.ngin-cic .acs-row .tbl{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);}.ngin-cic .acs-row .val{font-family:var(--font-mono);font-size:.9rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}.ngin-cic .acs-row-head .val{font-family:var(--font-body);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);}.ngin-cic .acs-foot{font-size:.78rem;color:var(--ink-faint);font-style:italic;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}.ngin-cic .acs-filter{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line);}.ngin-cic .acs-filter-item label{display:block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:5px;}.ngin-cic .mock-select{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:6px 12px;font-size:.83rem;color:var(--ink-soft);min-width:150px;}.ngin-cic .results-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;}
  @media (max-width:960px){.ngin-cic .results-grid{grid-template-columns:1fr;}}.ngin-cic .res-list-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:.86rem;}.ngin-cic .res-list-row:first-of-type{border-top:none;}.ngin-cic .res-status{font-size:.72rem;font-weight:700;text-transform:uppercase;}.ngin-cic .res-status.strong{color:var(--green);}.ngin-cic .res-status.frag, .ngin-cic .res-status.emerg{color:var(--amber);}.ngin-cic .res-status.missing{color:var(--red);}.ngin-cic .res-status.unknown{color:var(--ink-faint);}.ngin-cic .gap-card{background:var(--red-soft);border-radius:10px;padding:14px 16px;margin-bottom:12px;}.ngin-cic .gap-card h5{font-size:.86rem;color:var(--ink);margin-bottom:4px;}.ngin-cic .gap-card p{font-size:.79rem;color:var(--ink-soft);}.ngin-cic .indicator-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:.83rem;}.ngin-cic .indicator-row:first-of-type{border-top:none;}.ngin-cic .indicator-row .src{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;}.ngin-cic .hero{padding:70px 0 46px;text-align:center;}.ngin-cic .hero-badge{display:inline-block;background:var(--green-soft);color:var(--green-deep);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:22px;}.ngin-cic .hero h1{font-size:2.6rem;line-height:1.16;max-width:820px;margin:0 auto;}.ngin-cic .hero .lede{margin:22px auto 0;text-align:center;font-size:1.06rem;}.ngin-cic .hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:30px;}.ngin-cic .intro-prose{max-width:740px;margin:0 auto;}.ngin-cic .intro-prose p{font-size:.98rem;color:var(--ink-soft);margin-bottom:16px;}.ngin-cic .intro-prose .thesis{font-size:1.04rem;color:var(--ink);font-weight:500;}.ngin-cic .section-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
  @media (max-width:900px){.ngin-cic .section-cards{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.ngin-cic .section-cards{grid-template-columns:1fr;}}.ngin-cic .sec-card{background:var(--bg-raise);border:1px solid var(--line);border-radius:12px;padding:20px;cursor:pointer;}.ngin-cic .sec-card:hover{border-color:var(--green);}.ngin-cic .sec-card .num{font-family:var(--font-mono);color:var(--green);font-size:.76rem;font-weight:700;}.ngin-cic .sec-card h4{font-size:.94rem;margin:8px 0 8px;line-height:1.28;}.ngin-cic .sec-card p{font-size:.78rem;color:var(--ink-soft);}.ngin-cic .stats-band{background:var(--navy);color:#fff;padding:52px 0;margin-top:10px;}.ngin-cic .stats-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;}
  @media (max-width:900px){.ngin-cic .stats-inner{grid-template-columns:1fr;}}.ngin-cic .stats-inner h3{color:#fff;font-size:1.5rem;margin-bottom:14px;}.ngin-cic .stats-inner .lede{color:#d9d9d9;font-size:.92rem;max-width:520px;margin-top:0;}.ngin-cic .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.ngin-cic .stat-tile{background:var(--navy-soft);border-radius:10px;padding:18px 20px;}.ngin-cic .stat-tile .n{font-family:var(--font-display);font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;}.ngin-cic .stat-tile .d{font-size:.78rem;color:#d9d9d9;margin-top:2px;}.ngin-cic footer{border-top:1px solid var(--line);padding:26px 0;}.ngin-cic .footer-inner{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-faint);flex-wrap:wrap;gap:10px;}.ngin-cic .footnote-line{font-size:.78rem;color:var(--ink-faint);font-style:italic;margin-top:26px;}.ngin-cic .provenance{font-size:.74rem;color:var(--ink-faint);font-style:italic;margin-top:6px;}

/* --- port adjustments --------------------------------------------------------
   The mock-up carries its own 69px top bar with the step bar sticky beneath it.
   The calculator is embedded in NGIN's site, which already has its own
   navigation, so no top bar or footer is rendered and the step bar sits at the
   top. ------------------------------------------------------------------- */
.ngin-cic .stepbar { position: static; top: auto; margin-bottom: 0; }
.ngin-cic .wrap { padding-left: clamp(16px, 4%, 44px); padding-right: clamp(16px, 4%, 44px); }
.ngin-cic .stepbar-inner { padding-left: clamp(16px, 4%, 44px); padding-right: clamp(16px, 4%, 44px); }

/* the AI slot while it is writing, or when it fails */
.ngin-cic .ai-box.ai-loading p { opacity: .65; font-style: italic; }
.ngin-cic .ai-box.ai-error { border-style: solid; border-color: var(--red); background: var(--red-soft) !important; }
.ngin-cic .ai-box.ai-error p, .ngin-cic .ai-box.ai-error b { color: var(--red) !important; }

/* --- Screen refinements -------------------------------------------------------
   The subheads were squeezed to half the screen and now use the full width.
   The outcome cards are tightened so the full set fits without scrolling.
   Adds the selection breadcrumb, the "Show more" control on the evidence list
   and the per-item note of the generated text.
--------------------------------------------------------------------------- */

.ngin-cic .lede-wide { max-width: none !important; }
.ngin-cic .intro-prose-wide { max-width: none; }
.ngin-cic .intro-prose-wide p { max-width: none; font-size: .97rem; line-height: 1.65; margin-bottom: 14px; }
.ngin-cic .hero { padding-top: 34px; padding-bottom: 22px; }
.ngin-cic .hero h1 { max-width: none; }
.ngin-cic .section-cards { margin-top: 26px; }

/* top bar */
.ngin-cic .topnav { border-bottom: 1px solid var(--line); }
.ngin-cic .topnav-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.ngin-cic .brand-text { font-size: .9rem; letter-spacing: .01em; }
.ngin-cic .navlinks { display: flex; gap: 4px; }
.ngin-cic .navlink { background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  font-size: .86rem; padding: 6px 12px; border-radius: 3px; color: var(--ink-soft); }
.ngin-cic .navlink:hover { background: var(--green-soft); }
.ngin-cic .navlink.on { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--mantis); }

/* breadcrumb: what the user picked */
.ngin-cic .crumb { background: var(--green-soft); border-bottom: 1px solid var(--line);
  font-size: .82rem; line-height: 1.4; padding: 5px 0; margin-bottom: 14px; }
.ngin-cic .crumb-k { font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  font-size: .7rem; margin-right: 6px; }

/* tighter outcome cards */
.ngin-cic .outcome-card.compact { padding: 14px 16px; }
.ngin-cic .outcome-card.compact h4 { font-size: .95rem; line-height: 1.3; }
.ngin-cic .outcome-card.compact p { font-size: .8rem; line-height: 1.45; margin-top: 5px; }

/* collapsible evidence */
.ngin-cic .showmore { background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--green);
  text-decoration: underline; }

/* generated note per capability or actor */
.ngin-cic .consol-ai { display: block; font-size: .82rem; line-height: 1.5; margin-top: 6px;
  color: #1d2a35; }

/* notice about remaining stages, now above the chain */
.ngin-cic .chain-notice { font-size: .85rem; color: var(--ink-soft); background: var(--green-soft);
  border-radius: 4px; padding: 9px 14px; margin-bottom: 14px; }

.ngin-cic .lesson-list { display: grid; gap: 12px; }
.ngin-cic .src-link { font-size: .8rem; }
.ngin-cic .todo-block { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--line); }
.ngin-cic .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .ngin-cic .results-grid { grid-template-columns: 1fr; } }

/* The top bar was sticky in the mock-up. Embedded, it overlaps the host page's
   header and, sitting above the content, intercepts clicks on whatever it
   covers, which is why the step 5 form stopped responding. It stays put. */
.ngin-cic .topnav { position: static !important; top: auto !important; z-index: auto !important; }
.ngin-cic .stepbar { position: static !important; top: auto !important; z-index: auto !important; }
.ngin-cic .topnav-inner { padding-left: clamp(16px, 4%, 44px); padding-right: clamp(16px, 4%, 44px); }
.ngin-cic .crumb .wrap { padding-top: 0; padding-bottom: 0; }

/* steps not unlocked yet */
.ngin-cic .step-item.locked { opacity: .45; cursor: not-allowed; }
.ngin-cic .step-item[disabled] { pointer-events: none; }

/* illustrative-content notice, same treatment as the ACS block */
.ngin-cic .demo-note { font-size: .84rem; color: var(--ink-soft); line-height: 1.55;
  background: var(--wash); border: 1px dashed var(--line); border-radius: 4px;
  padding: 12px 16px; margin-bottom: 14px; }
.ngin-cic .demo-note .acs-badge { margin-right: 8px; }

/* =========================================================================
   Layout adjustments
   ========================================================================= */

/* Beige background from the mockup across the tool; cards stay white so they
   contrast against it. */
.ngin-cic { background: #ffffff !important; }
.ngin-cic .card, .ngin-cic .evidence-card, .ngin-cic .acs-box,
.ngin-cic .rate-block, .ngin-cic .res-panel, .ngin-cic .gap-card,
.ngin-cic .sec-card { background: #ffffff !important; }
.ngin-cic .stepbar { background: rgba(217, 217, 217, .35) !important; }

/* Home: the hero subtitle and the line under the cards take the body size of
   the step copy, in bold green. */
.ngin-cic .hero-sub, .ngin-cic .cards-note {
  font-family: var(--font-body); font-size: .97rem; line-height: 1.65;
  font-weight: 700; color: var(--green) !important; max-width: none;
  margin: 14px 0 0;
}
.ngin-cic .hero-sub { margin-bottom: 22px; }
.ngin-cic .cards-note { margin-top: 22px; }
.ngin-cic .intro-prose-wide p { font-family: var(--font-body); font-size: .97rem; }

/* the step cards, in light green */
.ngin-cic .sec-card { background: var(--green-soft) !important; border-color: #cbdebc; }
.ngin-cic .sec-card:hover { border-color: var(--mantis); }
.ngin-cic .sec-card h4 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; line-height: 1.35; }
.ngin-cic .sec-card p { font-size: .88rem; }

/* Step 1: room between the copy and the cards */
.ngin-cic .grid-spaced { margin-top: 26px; }

/* Step 2: tighter baseline, filters on beige */
.ngin-cic .acs-row { padding: 7px 0; }
.ngin-cic .acs-filter .mock-select { background: rgba(217, 217, 217, .35); border-color: #d9d9d9; }
.ngin-cic .acs-compact .acs-row { padding: 5px 0; }

/* Step 2: narrow evidence card, with tags and a "+" */
.ngin-cic .evidence-card.slim { padding: 0; }
.ngin-cic .ev-top { width: 100%; display: flex; gap: 14px; align-items: flex-start;
  background: none; border: 0; cursor: pointer; text-align: left; padding: 13px 16px;
  font-family: var(--font-body); }
.ngin-cic .ev-top:hover { background: #ffffff; }
.ngin-cic .ev-main { flex: 1 1 auto; min-width: 0; }
.ngin-cic .ev-title { display: block; font-weight: 700; font-size: .92rem; line-height: 1.35; }
.ngin-cic .ev-aud { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.ngin-cic .ev-tags { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: flex-end; max-width: 40%; }
.ngin-cic .ev-plus { flex: 0 0 auto; font-size: 1.1rem; color: var(--ink-faint); width: 18px; text-align: center; }
.ngin-cic .evidence-card.slim .ev-body { padding: 0 16px 16px; }
.ngin-cic .label { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.ngin-cic .label.t-topic  { background: rgba(217, 217, 217, .35); color: #1d2a35; }
.ngin-cic .label.t-effect { background: var(--green-soft); color: #1d2a35; }
.ngin-cic .label.t-mon    { background: rgba(217, 217, 217, .35); color: #1d2a35; }
.ngin-cic .label.t-sites  { background: #cbdebc; color: #1d2a35; }

/* strategies grouped by goal */
.ngin-cic .group-head { font-family: var(--font-display); font-size: 1rem; margin: 18px 0 8px; }
.ngin-cic .chip-note { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  margin-left: 7px; padding: 2px 6px; border-radius: 3px; background: #cbdebc; color: #1d2a35; }

/* Step 3: radial diagram */
.ngin-cic .ring-wrap { text-align: center; margin: 4px 0 14px; }
.ngin-cic .ring { width: 100%; max-width: none; height: auto; }
.ngin-cic .ring-hub { fill: var(--green-soft); stroke: var(--mantis); stroke-width: 1.5; }
.ngin-cic .ring-hub-n { font: 700 15px var(--font-body); fill: var(--ink); }
.ngin-cic .ring-hub-t { font: 400 9px var(--font-body); fill: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.ngin-cic .ring-line { stroke: #d9d9d9; stroke-width: 1; }
.ngin-cic .ring-dot { fill: var(--mantis); }
.ngin-cic .ring-lbl { font: 400 11px var(--font-body); fill: var(--ink); }

/* Step 4: tighter rows and tooltip */
.ngin-cic .rate-row.tight { padding: 8px 0; }
.ngin-cic .rate-row.tight .rate-label { font-size: .89rem; }
.ngin-cic .tip-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; background: #d9d9d9;
  color: var(--ink-soft); font-size: .62rem; font-weight: 700; cursor: help; vertical-align: middle; }

/* Step 5 */
.ngin-cic .chain-pass { font-size: .84rem; color: #1d2a35; background: var(--green-soft);
  border-radius: 4px; padding: 8px 12px; margin-top: 10px; }

/* Step 6 */
.ngin-cic .res-h { margin-top: 30px; padding-bottom: 6px; border-bottom: 2px solid var(--mantis); }
.ngin-cic .res-panel { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; }
.ngin-cic .res-panel h5 { font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.ngin-cic .res-panel p { font-size: .87rem; line-height: 1.55; margin-bottom: 10px; }
.ngin-cic .results-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ngin-cic .results-grid.three { grid-template-columns: 1fr; } }
.ngin-cic .source-list { margin: 0 0 8px 18px; padding: 0; list-style: disc; }
.ngin-cic .source-list li { font-size: .84rem; line-height: 1.5; margin-bottom: 5px; }

/* bullets in the generated text */
.ngin-cic .ai-box ul { margin: 6px 0 0 18px; padding: 0; list-style: disc; }
.ngin-cic .ai-box li { font-size: .85rem; line-height: 1.55; margin-bottom: 5px; color: #1d2a35; }

/* =========================================================================
   Further layout adjustments
   ========================================================================= */

/* The key sentence under cards, tables and diagrams: bold and green, at the
   same size as the rest of the explanatory copy. */
.ngin-cic .lede-key { font-family: var(--font-body); font-weight: 700;
  color: var(--green) !important; font-size: .97rem; line-height: 1.65;
  max-width: none !important; margin-top: 14px; }

/* blurb on the capabilities and actors blocks */
.ngin-cic .rate-block .rate-sub { margin-top: 3px; margin-bottom: 14px; }
.ngin-cic .sub-note { font-size: .88rem; color: var(--ink-soft); margin-top: 6px; }

/* Custom tooltip: the native title takes a second and does not exist on mobile. */
.ngin-cic .tip-mark { position: relative; }
.ngin-cic .tip-mark::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 150%;
  transform: translateX(-50%); width: 300px; max-width: 62vw; background: var(--ink); color: #fff;
  font-size: .76rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none;
  padding: 9px 11px; border-radius: 5px; opacity: 0; visibility: hidden; transition: opacity .12s;
  z-index: 60; pointer-events: none; text-align: left; }
.ngin-cic .tip-mark:hover::after, .ngin-cic .tip-mark:focus::after { opacity: 1; visibility: visible; }
/* The first row of a block has nothing above it, so its bubble opens downwards. */
.ngin-cic .rate-row:first-of-type .tip-mark::after { bottom: auto; top: 150%; }
/* Short labels put the mark near the left edge, where a centred 300px bubble
   ran off the card. Those anchor to the left instead. */
@media (max-width: 1100px) { .ngin-cic .rate-row .tip-mark::after { left: 0; transform: none; } }
@media (max-width: 700px) { .ngin-cic .tip-mark::after { left: 0; transform: none; } }

/* Step 2: the scorecard uses the width better and labels its columns. */
.ngin-cic .acs-box { max-width: 960px; }
.ngin-cic .acs-row { grid-template-columns: minmax(0, 2.6fr) .9fr .8fr .9fr; }
.ngin-cic .acs-row-head .ind, .ngin-cic .acs-row-head .tbl {
  font-family: var(--font-body); font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-faint); }

/* Step 3: real coordination cases */
.ngin-cic .case-pat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin-bottom: 6px; }
.ngin-cic .case-pat b { color: var(--green); }

/* The diagram labels carry a halo in the background colour so no line runs
   across them. */
.ngin-cic .ring-lbl { paint-order: stroke; stroke: #ffffff; stroke-width: 3px;
  stroke-linejoin: round; }
.ngin-cic .ring-line { stroke: #d9d9d9; }

/* lessons and source for each coordination case */
.ngin-cic .case-lessons { margin: 8px 0 0 16px; padding: 0; list-style: disc; }
.ngin-cic .case-lessons li { font-size: .84rem; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 4px; }
.ngin-cic .case-src { margin-top: 8px; }
/* A citation, not a button. It reads as a reference line and carries the
   link on itself. */
.ngin-cic .case-cite { margin-top: 8px; font-size: .74rem; line-height: 1.4;
  color: var(--ink-faint); }
.ngin-cic .case-cite a { color: var(--ink-soft); text-decoration: underline; }
.ngin-cic .case-cite a:hover { color: var(--green); }

/* summary of each selected strategy, above the baseline */
.ngin-cic .picked-list { display: grid; gap: 10px; margin: 20px 0 4px; }
.ngin-cic .picked-strat { border-left: 3px solid var(--green-soft); padding-left: 12px; }
.ngin-cic .picked-strat b { font-size: .9rem; }
.ngin-cic .picked-strat span { display: block; font-size: .85rem; color: var(--ink-soft);
  line-height: 1.5; margin-top: 2px; }

/* outcome-strategy pair with sources but no documented effect or arrangement */
.ngin-cic .chip-note.thin { background: rgba(217, 217, 217, .35); color: #1d2a35; }

/* disabled buttons: without this they look the same as active ones and the
   user clicks something that does not respond */
.ngin-cic .btn[disabled] { opacity: .45; cursor: not-allowed; }
.ngin-cic .btn[disabled]:hover { opacity: .45; }

/* =========================================================================
   Brand palette (green / navy / grey), three-step progress bar and
   landing.
   ========================================================================= */

/* 1. Palette. NGIN only allows green, navy and grey, so the purple, amber
   and red tokens are remapped onto a green-grey scale. */
.ngin-cic {
  --ai-bg: #cbdebc;
  --ai-line: #82bd50;
  --ai-ink: #1d2a35;
  --amber: #82bd50;
  --amber-soft: #cbdebc;
  --red: rgba(29, 42, 53, .70);
  --red-soft: rgba(217, 217, 217, .35);
  --mantis: #82bd50;
  --wash: rgba(217, 217, 217, .35);
}
.ngin-cic .ai-box li { color: var(--ai-ink); }
.ngin-cic .ai-box .disclaimer { border-top-color: rgba(29, 42, 53, .18); }
.ngin-cic .ai-box .cite { background: rgba(130, 189, 80, .16); }
.ngin-cic .label.t-sites { background: rgba(217, 217, 217, .35); color: #1d2a35; }
.ngin-cic .label.t-topic { background: rgba(217, 217, 217, .35); color: #1d2a35; }
.ngin-cic .label.t-mon   { background: rgba(217, 217, 217, .35); color: rgba(29, 42, 53, .70); }
.ngin-cic .chip-note.thin { background: rgba(217, 217, 217, .35); color: rgba(29, 42, 53, .70); }
.ngin-cic .acs-badge { background: rgba(217, 217, 217, .35); color: #1d2a35; }

/* Rating scale: from green (strong) to grey (missing). */
.ngin-cic .opt.strong  { background: var(--green); color: #fff; }
.ngin-cic .opt.frag    { background: #cbdebc; color: #1d2a35; }
.ngin-cic .opt.emerg   { background: #cbdebc; color: rgba(29, 42, 53, .70); }
.ngin-cic .opt.missing { background: #d9d9d9; color: rgba(29, 42, 53, .70); }
.ngin-cic .opt.unknown { background: rgba(217, 217, 217, .35); color: rgba(29, 42, 53, .45); }
.ngin-cic .res-status.strong  { color: var(--green); }
.ngin-cic .res-status.frag    { color: rgba(29, 42, 53, .70); }
.ngin-cic .res-status.emerg   { color: #82bd50; }
.ngin-cic .res-status.missing { color: rgba(29, 42, 53, .70); }
.ngin-cic .res-status.unknown { color: rgba(29, 42, 53, .45); }

/* 2. Progress bar: three blocks, each with its own screens. */
.ngin-cic .stepbar-inner { gap: 26px; padding: 10px 32px 12px; align-items: stretch; }
.ngin-cic .stepgroup { flex: 1; min-width: 150px; }
.ngin-cic .stepgroup-label { display: block; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-bottom: 6px;
  white-space: nowrap; }
.ngin-cic .stepgroup.active .stepgroup-label { color: var(--green); }
.ngin-cic .stepgroup.done .stepgroup-label { color: var(--ink-soft); }
.ngin-cic .stepsegs { display: flex; gap: 4px; }
.ngin-cic .stepseg { flex: 1; border: none; background: #d9d9d9; border-radius: 3px; padding: 0;
  height: 6px; cursor: pointer; font-family: var(--font-body); position: relative;
  transition: background .15s; }
.ngin-cic .stepseg span { position: absolute; top: 9px; left: 0; font-size: .7rem; color: var(--ink-faint);
  white-space: nowrap; }
.ngin-cic .stepgroup { padding-bottom: 20px; }
.ngin-cic .stepseg.done { background: var(--green); }
.ngin-cic .stepseg.done span { color: var(--ink-soft); }
.ngin-cic .stepseg.active { background: var(--green); }
.ngin-cic .stepseg.active span { color: var(--ink); font-weight: 700; }
.ngin-cic .stepseg.locked { cursor: not-allowed; }
.ngin-cic .stepseg:not(.done):not(.active):not(.locked):hover { background: #d9d9d9; }
@media (max-width: 860px) {
  .ngin-cic .stepbar-inner { gap: 14px; }
  .ngin-cic .stepseg span { display: none; }
  .ngin-cic .stepgroup { padding-bottom: 0; min-width: 90px; }
}

/* 3. Landing */
.ngin-cic .hero-meta { font-size: .84rem; color: var(--ink-faint); font-style: italic; margin-top: 12px; }
.ngin-cic .section-cards-3 { grid-template-columns: repeat(3, 1fr); margin-top: 38px; }
.ngin-cic .sec-card-tabs { font-size: .82rem; color: var(--ink-soft); }
.ngin-cic .intro-prose-wide h3 { font-size: 1.12rem; margin-top: 26px; margin-bottom: 8px; }
@media (max-width: 860px) { .ngin-cic .section-cards-3 { grid-template-columns: 1fr; } }

/* 4. Strategy chips: tighter, with the detail in a tooltip and an asterisk in
   place of the SHARED tag. */
.ngin-cic .strat-chip-row { gap: 7px; margin-top: 14px; }
.ngin-cic .strat-chip { padding: 7px 12px; cursor: pointer; }
.ngin-cic .chip-star { color: var(--green); font-weight: 700; margin-left: 3px; }
.ngin-cic .strat-chip.has-tip { position: relative; }
.ngin-cic .strat-chip.has-tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: 128%;
  width: 320px; max-width: 70vw; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 400;
  line-height: 1.45; padding: 9px 11px; border-radius: 5px; opacity: 0; visibility: hidden;
  transition: opacity .12s; z-index: 60; pointer-events: none; text-align: left; }
.ngin-cic .strat-chip.has-tip:hover::after { opacity: 1; visibility: visible; }

/* 5. Roadmap: the download sits at the top, next to the title. */
.ngin-cic .res-top { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; }
.ngin-cic .res-top .page-title { margin: 0; }

/* Where You Stand progress bars: four segments on a green scale. */
.ngin-cic .res-bar-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.ngin-cic .res-bar-row:last-child { border-bottom: none; }
.ngin-cic .res-bar-top { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px; }
.ngin-cic .res-bar-top > span:first-child { font-size: .86rem; }
.ngin-cic .res-bar { display: flex; gap: 3px; }
.ngin-cic .bar-seg { flex: 1; height: 7px; border-radius: 2px; background: #d9d9d9; }
.ngin-cic .bar-seg.on.lvl4 { background: #1d2a35; }
.ngin-cic .bar-seg.on.lvl3 { background: #82bd50; }
.ngin-cic .bar-seg.on.lvl2 { background: #82bd50; }
.ngin-cic .bar-seg.on.lvl1 { background: rgba(29, 42, 53, .70); }
.ngin-cic .stage-def { font-size: .84rem; color: var(--ink-soft); margin-top: 6px; }

/* "Missing" in navy: in grey it was mistaken for an unselected option. */
.ngin-cic .opt.missing { background: #d9d9d9; color: var(--navy); font-weight: 700; }
.ngin-cic .res-status.missing { color: var(--navy); }

/* Tooltip on the diagram labels. */
.ngin-cic .ring-lbl.has-ringtip { cursor: help; }
.ring-tip { position: fixed; z-index: 90; display: none; max-width: 320px; background: #1d2a35;
  color: #fff; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: .78rem; line-height: 1.45;
  padding: 9px 11px; border-radius: 5px; pointer-events: none;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }

/* =========================================================================
   Partnership step: stage cards, with the detailed assessment in a modal
   ========================================================================= */
.ngin-cic .stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 900px) { .ngin-cic .stage-grid { grid-template-columns: 1fr; } }
.ngin-cic .stage-card { position: relative; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color .15s; }
.ngin-cic .stage-card:hover { border-color: var(--green); }
.ngin-cic .stage-card.on { border-color: var(--green); background: var(--green-soft); }
.ngin-cic .stage-card h4 { font-size: 1rem; margin-bottom: 8px; padding-right: 74px; }
.ngin-cic .stage-card p { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

.ngin-cic .stage-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }

.ngin-cic .modal-back { position: fixed; inset: 0; background: rgba(29,42,53,.55); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.ngin-cic .modal { background: #fff; border-radius: 14px; width: 100%; max-width: 860px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.ngin-cic .modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px; border-bottom: 1px solid var(--line); }
.ngin-cic .modal-head h3 { font-size: 1.15rem; }
.ngin-cic .modal-x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--ink-faint); padding: 0 4px; }
.ngin-cic .modal-x:hover { color: var(--ink); }
.ngin-cic .modal-body { padding: 22px 26px; }
.ngin-cic .modal-body .lede { margin-top: 0; }
.ngin-cic .modal-foot { padding: 16px 26px; border-top: 1px solid var(--line); display: flex;
  justify-content: flex-end; }
.ngin-cic .modal-done { background: var(--green-soft); border-radius: 10px; padding: 16px 18px;
  margin-top: 18px; font-size: .9rem; }

/* Room between each step 2 section and its AI box: they were sitting
   flush against each other. */
.ngin-cic .page h3 { margin-top: 34px; }
.ngin-cic .page .res-h { margin-top: 44px; }
.ngin-cic .ai-box { margin-top: 24px; }
.ngin-cic .sub-note { margin-bottom: 4px; }
.ngin-cic .section-cards-3 { margin-top: 44px; }

/* =========================================================================
   Layout refinements
   ========================================================================= */

/* Home: bigger subtitle and step questions, with the button between the copy
   and the cards. */
.ngin-cic .hero-sub { font-size: 1.16rem; line-height: 1.6; }
.ngin-cic .sec-card h4 { font-size: 1.06rem; }
.ngin-cic .hero-ctas-mid { margin-top: 34px; display: flex; justify-content: center; }

/* Outcomes: name only, with the explanation in a tooltip. */
.ngin-cic .outcome-card.name-only { display: flex; align-items: center; min-height: 92px;
  padding: 18px 20px; }
.ngin-cic .outcome-card.name-only h4 { margin: 0; padding-right: 70px; font-size: 1rem; }
.ngin-cic .outcome-card.full { opacity: .45; cursor: not-allowed; }
.ngin-cic .outcome-card.full:hover { border-color: var(--line); }

/* "What the Evidence Says", collapsed. */
.ngin-cic .ev-fold { border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px;
  margin-top: 44px; background: var(--bg-raise); }
.ngin-cic .ev-fold-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; cursor: pointer; }
.ngin-cic .ev-fold-head h3 { margin-top: 0; }
.ngin-cic .ev-fold-head .lede { margin-top: 6px; font-size: .92rem; }
.ngin-cic .ev-fold-x { font-size: 1.5rem; line-height: 1; color: var(--green); flex: none;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; }
.ngin-cic .ev-fold .evidence-stack { margin-top: 20px; }

/* Indicator table: no source column and tighter rows. */
.ngin-cic .acs-row.tight { grid-template-columns: minmax(0, 2.8fr) .9fr .9fr; padding: 5px 0; }

/* Email gate before entering the calculator. */
.ngin-cic .modal-narrow { max-width: 540px; }
.ngin-cic .gate-label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 6px; }
.ngin-cic .gate-label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ngin-cic .gate-input { width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: #fff; }
.ngin-cic .gate-input:focus { outline: none; border-color: var(--green); }
.ngin-cic .gate-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px;
  font-size: .86rem; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.ngin-cic .gate-check input { margin-top: 3px; flex: none; }
.ngin-cic .gate-privacy { font-size: .78rem; color: var(--ink-faint); line-height: 1.5;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ngin-cic .gate-err { color: var(--navy); font-weight: 700; font-size: .86rem; margin-top: 14px; }
.ngin-cic .modal-foot { gap: 12px; }

/* Values not connected to the Census API yet. */
.ngin-cic .acs-row .val.pending { color: var(--ink-faint); }
.ngin-cic .acs-box .showmore { margin-top: 12px; }

/* =========================================================================
   Home layout and screen tweaks
   ========================================================================= */

/* Home: horizontal journey. Keeps the site's fonts and greens. */
.ngin-cic .home { padding-top: 46px; padding-bottom: 20px; }
.ngin-cic .home-hero { text-align: center; }
.ngin-cic .home-hero h1 { font-size: 2.9rem; line-height: 1.08; max-width: 46rem; margin: 0 auto; }
.ngin-cic .home-lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 44rem;
  margin: 16px auto 0; }
.ngin-cic .home-meta { font-size: .84rem; font-style: italic; color: var(--ink-faint); margin-top: 10px; }

.ngin-cic .home-path-h { font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); text-align: center;
  margin-top: 52px; }
.ngin-cic .home-path-h + .path { margin-top: 26px; }

.ngin-cic .path { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  gap: 22px; margin-top: 46px; position: relative; }
.ngin-cic .stn { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.ngin-cic .stn[data-page] { cursor: pointer; }
.ngin-cic .path > .stn:nth-child(-n+3)::after { content: ""; position: absolute; top: 25px; left: 50%;
  width: calc(100% + 22px); height: 2px; background: var(--green-soft); z-index: 0; }
.ngin-cic .node { width: 50px; height: 50px; border-radius: 50%; background: var(--green); color: #fff;
  margin: 0 auto; position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1.05rem; }
.ngin-cic .node.result { box-shadow: 0 0 0 6px var(--green-soft); }
.ngin-cic .stn-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 14px; }
.ngin-cic .stn-lbl.spacer { visibility: hidden; }
.ngin-cic .stn h3 { font-size: 1.16rem; margin-top: 5px; line-height: 1.25; }
.ngin-cic .stn p { font-size: .83rem; color: var(--ink-faint); margin-top: 6px; }
.ngin-cic .stn.result h3 { color: var(--green); }
.ngin-cic .cta-row { display: flex; justify-content: center; margin-top: 38px; }
.ngin-cic .home-prose { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 44px;
  padding-top: 30px; border-top: 1px solid var(--line); }
.ngin-cic .home-prose h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  margin-top: 0; }
.ngin-cic .home-prose p { font-size: .88rem; color: var(--ink-soft); margin-top: 8px; }
.ngin-cic .home-band { background: var(--green-soft); border-top: 1px solid #cbdebc; margin-top: 46px; }
.ngin-cic .home-band p { max-width: 74rem; margin: 0 auto; padding: 16px 32px; font-size: .88rem;
  font-style: italic; color: #1d2a35; text-align: center; }
@media (max-width: 940px) {
  .ngin-cic .path { grid-template-columns: 1fr; gap: 28px; }
  .ngin-cic .path > .stn:nth-child(-n+3)::after { display: none; }
  .ngin-cic .home-prose { grid-template-columns: 1fr; gap: 26px; }
  .ngin-cic .home-hero h1 { font-size: 2.1rem; }
}

/* Step 2: the detail lives in the hover, so only a hint is left. */
.ngin-cic .ring-hint { text-align: center; font-size: .8rem; font-style: italic;
  color: var(--ink-faint); margin-top: 4px; }

/* Indicators: small marker in front of each one, and a divider per strategy. */
.ngin-cic .acs-ico { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 9px; vertical-align: middle; }
.ngin-cic .acs-group { font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 6px;
  padding-top: 10px; border-top: 1px solid var(--line); }

/* Partnership stages: numbered and chained. */
.ngin-cic .stage-card { padding-left: 54px; }
.ngin-cic .stage-n { position: absolute; left: 18px; top: 18px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: .78rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ngin-cic .stage-card.on .stage-n { background: var(--green); color: #fff; }

/* Why a case is on screen, and the self-study marker. */
.ngin-cic .case-place { font-size: .8rem; color: var(--ink-faint); margin: -3px 0 0; }
/* Goal, Strategies and Coordination structure: a label and its value, under
   the account of the case rather than folded into a sentence above it. */
.ngin-cic .case-meta { font-size: .82rem; color: var(--ink); margin-top: 7px; }
.ngin-cic .case-meta > span:first-child { display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1px; }
.ngin-cic .case-coord { display: block; margin-top: 3px; font-size: .82rem;
  color: var(--ink-soft); }
.ngin-cic .lesson h5 { margin-bottom: 3px; }
.ngin-cic .case-why { font-size: .88rem; color: var(--ink); margin-bottom: 6px; }
.ngin-cic .case-tag { display: inline-block; margin-left: 10px; font-size: .64rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
  background: rgba(217, 217, 217, .35); border-radius: 3px; padding: 3px 7px; vertical-align: middle; }

/* Capabilities and actors: grouped on the wheel, two intensities by how many
   of the selected strategies require each item. */
.ngin-cic .ring-dot.w1 { fill: #cbdebc; }
.ngin-cic .ring-dot.w2 { fill: var(--green); }
.ngin-cic .ring-lbl.w1 { fill: var(--ink-soft); }
.ngin-cic .ring-lbl.w2 { fill: var(--ink); font-weight: 700; }
.ngin-cic .ring-groups { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center;
  margin-top: 6px; }
.ngin-cic .ring-groups .rg { font-size: .72rem; color: var(--ink-faint); background: rgba(217, 217, 217, .35);
  border-radius: 20px; padding: 4px 11px; }
.ngin-cic .ring-groups .rg b { color: var(--ink-soft); font-weight: 700; text-transform: capitalize; }

/* Real county and tract pickers. */
.ngin-cic .acs-filter-item.wide { flex: 1; min-width: 320px; }
.ngin-cic .geo-select { font-family: var(--font-body); font-size: .88rem; color: var(--ink);
  background: var(--grey-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; max-width: 260px; }
.ngin-cic .geo-select:disabled { opacity: .6; }
.ngin-cic .geo-tracts { display: flex; gap: 8px; flex-wrap: wrap; }
.ngin-cic .geo-tracts .geo-select { max-width: 180px; }

/* Roadmap gaps as a checklist: tighter than the stacked cards, one sentence
   per item. */
.ngin-cic .gap-check { list-style: none; margin: 4px 0 0; padding: 0; }
.ngin-cic .gap-check li { display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.ngin-cic .gap-check li:last-child { border-bottom: none; }
.ngin-cic .gap-box { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 3px;
  border: 1.5px solid var(--green); background: #fff; }
.ngin-cic .gap-name { font-size: .84rem; font-weight: 700; color: var(--ink); }
.ngin-cic .gap-state { font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: 8px; }
.ngin-cic .gap-check p { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }

/* =========================================================================
   Screen layout
   ========================================================================= */

/* Instructions carry a rule in front, so they read as something to do rather
   than something to read. */
.ngin-cic .lede.instruction { color: var(--green); font-weight: 700; border-left: 3px solid var(--green);
  padding-left: 14px; margin-top: 18px; }

/* State, county and tract pickers. */
.ngin-cic .geo-box { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 26px; margin-top: 26px; max-width: 760px; }
.ngin-cic .geo-row { display: flex; gap: 20px; flex-wrap: wrap; }
.ngin-cic .geo-field { margin-bottom: 18px; flex: 1; min-width: 240px; }
.ngin-cic .geo-field > label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; }
.ngin-cic .geo-box .geo-select { width: 100%; max-width: none; }
.ngin-cic .geo-tracts .geo-select { max-width: none; flex: 1; min-width: 150px; }

/* Outcome cards in caps. */
.ngin-cic h4.caps { text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; }

/* About */
.ngin-cic .about h3 { margin-top: 32px; }
.ngin-cic .about-list { margin: 10px 0 0 18px; padding: 0; }
.ngin-cic .about-list li { font-size: .95rem; line-height: 1.65; color: var(--ink-soft);
  margin-bottom: 10px; }

/* Numbered actions, in the roadmap columns and under the partnership stage. */
.ngin-cic .action-list { margin: 6px 0 0 18px; padding: 0; }
.ngin-cic .action-list li { font-size: .86rem; line-height: 1.5; color: var(--ink);
  margin-bottom: 12px; padding-left: 4px; }
.ngin-cic .action-list li p { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }

/* The three boxes of Where You Stand line up. */
.ngin-cic .results-grid.even { align-items: stretch; }
.ngin-cic .results-grid.even .res-panel { display: flex; flex-direction: column; }

/* "How we selected this evidence", folded inside the evidence section. */
.ngin-cic .method-note { border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px;
  margin-top: 18px; background: var(--bg); }
.ngin-cic .method-head { border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .86rem; font-weight: 700; color: var(--green); }
.ngin-cic .method-note p { font-size: .84rem; line-height: 1.6; color: var(--ink-soft);
  margin-top: 10px; }

/* Helper line under the census tract selects. */
.ngin-cic .geo-help {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.ngin-cic .geo-help a { color: var(--green); }

/* =========================================================================
   Brand
   Lora is used unbolded, so headings carry weight through size and color.
   ========================================================================= */
.ngin-cic h1, .ngin-cic h2, .ngin-cic h3, .ngin-cic h4,
.ngin-cic .page-title, .ngin-cic .brand { font-weight: 500; }

/* Mantis is a light green: white text on it does not read. Buttons carry
   Mirage text on Mantis instead. */
.ngin-cic .btn-primary { background: #82bd50; color: #1d2a35; border-color: #82bd50; }
.ngin-cic .btn-primary:hover { background: #1d2a35; color: #ffffff; border-color: #1d2a35; }

/* For the same reason instructions read in Mirage, with Mantis as the rule. */
.ngin-cic .lede.instruction { color: #1d2a35; border-left-color: #82bd50; }

/* Outcome cards: title case, no bold, a little larger than the body. */
.ngin-cic h4.caps { text-transform: capitalize; font-weight: 500; font-size: 1.05rem;
  color: #1d2a35; letter-spacing: 0; }

/* A Roadmap for Action reads as one vertical list of next steps. */
.ngin-cic .action-stack { margin-top: 18px; }
.ngin-cic .action-sec { border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 16px; background: var(--bg-raise); }
.ngin-cic .action-sec h5 { font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.ngin-cic .action-sec .action-list li { font-size: .92rem; line-height: 1.55; }
.ngin-cic .action-sec .gap-state { margin-left: 0; }

/* =========================================================================
   Goal grouping, strategy blocks and the bubble diagram
   ========================================================================= */

/* Goal cards: narrower, so four columns fit and the names breathe. */
.ngin-cic .grid-3.grid-spaced { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ngin-cic .grid-3.grid-spaced .sec-card { padding: 14px 16px; }
@media (max-width: 1100px) {
  .ngin-cic .grid-3.grid-spaced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Strategies grouped by how many goals they serve. */
.ngin-cic .strat-block { margin-bottom: 22px; }
.ngin-cic .group-head { display: flex; align-items: center; gap: 10px; font-size: .78rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.ngin-cic .gh-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #82bd50;
  display: inline-flex; align-items: center; justify-content: center; }
.ngin-cic .gh-ico svg { width: 16px; height: 16px; }
.ngin-cic .gh-ico path { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round; }
.ngin-cic .group-n { margin-left: auto; font-size: .72rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: rgba(29, 42, 53, .45); }
.ngin-cic .group-hint { margin-left: auto; font-size: .76rem; font-style: italic;
  font-weight: 400; color: var(--ink-faint); }

/* The figure and the generated note sit side by side, so the whole step fits
   on one screen. The circles carry the short name and a category icon. */
.ngin-cic .eco-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 8px; }
.ngin-cic .eco-fig, .ngin-cic .eco-side { min-width: 0; }
.ngin-cic .eco-side .ai-box { margin-top: 0; }
.ngin-cic .bub-wrap { margin-top: 4px; }
.ngin-cic .bub-svg { width: 100%; height: auto; display: block; max-height: 520px; }
.ngin-cic .bub circle { fill: #cbdebc; stroke: #ffffff; stroke-width: 2; }
.ngin-cic .bub.lvl-some circle { fill: rgba(130, 189, 80, .62); }
.ngin-cic .bub.lvl-all circle { fill: #82bd50; }
.ngin-cic .bub text { font-family: var(--font-body); font-weight: 700; fill: #1d2a35;
  pointer-events: none; }
.ngin-cic .bub-ico path { fill: none; stroke: #1d2a35; stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round; opacity: .55; }
.ngin-cic .bub { cursor: help; }
.ngin-cic .bub:hover circle { filter: brightness(.94); }
.ngin-cic .bub-legend { display: flex; gap: 16px; margin-bottom: 4px; font-size: .76rem;
  color: rgba(29, 42, 53, .70); }
.ngin-cic .bub-legend .bl { display: inline-flex; align-items: center; gap: 6px; }
.ngin-cic .bub-legend i { width: 10px; height: 10px; border-radius: 50%; background: #cbdebc; }
.ngin-cic .bub-legend .lvl-all i { background: #82bd50; }
.ngin-cic .bub-legend .lvl-some i { background: rgba(130, 189, 80, .62); }
@media (max-width: 900px) { .ngin-cic .eco-split { grid-template-columns: 1fr; } }

/* =========================================================================
   Roadmap
   Six numbered chapters. The number carries the sequence and the alternating
   surface carries the break: the palette holds a single green, so color cannot
   tell the sections apart without introducing tones outside the brand guide.
   ========================================================================= */
.ngin-cic .rm-hero { padding: 40px 0 34px; }
.ngin-cic h1.rm { font-size: 2.4rem; font-weight: 500; margin: 6px 0 0; }
.ngin-cic .rm-geo { font-size: 1.02rem; color: var(--ink); margin-top: 14px; font-weight: 700; }
.ngin-cic .rm-intro { font-size: .92rem; color: var(--ink-soft); margin-top: 6px; max-width: 62rem; }
.ngin-cic .rm-date { font-weight: 700; color: var(--ink); margin-right: 8px; }

.ngin-cic .rm-sec { padding: 26px 0 30px; }
/* The opening summary has no number and no rule: it reads as a standfirst
   for the whole roadmap rather than as a seventh section. */
.ngin-cic .glance-sec { padding: 22px 0 4px; }
.ngin-cic .glance-sec .ai-box { margin-top: 0; }
.ngin-cic .rm-sec.alt { background: rgba(217, 217, 217, .35); }
.ngin-cic .rm-head { display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ngin-cic .rm-n { font-family: var(--font-display); font-size: 2.1rem; color: #82bd50;
  line-height: 1; }
.ngin-cic .rm-sec .s-title { font-size: 1.5rem; font-weight: 500; margin: 0; }
/* No max-width. It was narrower than the column it sits in, so both of these
   leads broke a line early and left a single word stranded underneath. */
.ngin-cic .rm-lead { font-size: .92rem; color: var(--ink-soft); margin: 10px 0 16px; }
/* Sits with the cards it annotates rather than floating in the band below. */
.ngin-cic .acs-note { margin-top: 6px; }

/* 01 profile: one card per tract, the county as the benchmark card. */
/* Map plus one card per geography, all on one line. The cards shrink rather
   than wrap, and the header has a fixed height so the values line up across
   cards even when a county name runs onto a second line. */
.ngin-cic .prof-grid { display: flex; gap: 12px; align-items: stretch; flex-wrap: nowrap; }
.ngin-cic .prof-card { flex: 1 1 0; min-width: 0; padding: 14px 14px; }
.ngin-cic .prof-card.map { flex: 0 0 270px; }
.ngin-cic .prof-card h4 { height: 40px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px; line-height: 1.25; overflow: hidden; }
.ngin-cic .pc-name { min-width: 0; }
.ngin-cic .pc-tag { flex: none; align-self: flex-start; }
@media (max-width: 1000px) {
  .ngin-cic .prof-grid { flex-wrap: wrap; }
  .ngin-cic .prof-card { flex: 1 1 160px; }
  .ngin-cic .prof-card.map { flex: 1 1 100%; }
}
.ngin-cic .prof-card { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; }
.ngin-cic .prof-card.bench { background: #1d2a35; border-color: #1d2a35; }
.ngin-cic .prof-card h4 { font-size: .95rem; font-weight: 700; margin: 0 0 10px; }
.ngin-cic .prof-card.bench h4, .ngin-cic .prof-card.bench .pc-row { color: #fff; }
/* Slimmer than it was: at the old size a county name of one long word had no
   room left on the line and ran underneath the tag. */
.ngin-cic .pc-tag { font-size: .56rem; letter-spacing: .04em; text-transform: uppercase;
  background: #82bd50; color: #1d2a35; border-radius: 3px; padding: 2px 5px; vertical-align: middle; }
/* The tag sits on its own line above the name so the name has the full width
   of the card. Side by side there was no room left for a county whose first
   word is long, and it was being broken mid-word. */
.ngin-cic .prof-card h4 { height: 56px; }
.ngin-cic .prof-card.bench h4 { flex-direction: column-reverse; align-items: flex-start;
  justify-content: flex-end; gap: 3px; }
.ngin-cic .pc-name { overflow-wrap: break-word; }
.ngin-cic .pc-row { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem;
  color: var(--ink-soft); padding: 5px 0; border-top: 1px solid rgba(0,0,0,.06); }
.ngin-cic .prof-card.bench .pc-row { border-top-color: rgba(255,255,255,.14); }

/* 02 goals, strategies, baseline */
.ngin-cic .gs-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; }
.ngin-cic .gs-col h4, .ngin-cic .stand-col h4, .ngin-cic .act-col h4,
.ngin-cic .ev-head-row h4, .ngin-cic .bl-top h4 { font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.ngin-cic .gs-item { display: flex; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); }
.ngin-cic .gs-item b { font-size: .92rem; }
.ngin-cic .gs-item p { font-size: .84rem; color: var(--ink-soft); margin-top: 3px; }
.ngin-cic .gs-key { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #cbdebc; color: #1d2a35; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.ngin-cic .gs-key.num { background: #82bd50; }
.ngin-cic .gs-key.sm { display: inline-flex; width: 19px; height: 19px; font-size: .68rem;
  vertical-align: middle; margin-right: 4px; }
.ngin-cic .gs-tag { display: inline-block; font-size: .66rem; font-weight: 700;
  background: #cbdebc; color: #1d2a35; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }

.ngin-cic .bl-wrap { margin-top: 26px; }
.ngin-cic .bl-top { display: flex; align-items: baseline; justify-content: space-between; }
.ngin-cic .bl-note { font-size: .74rem; color: var(--ink-faint); }
.ngin-cic .bl-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ngin-cic .bl-table th { font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
.ngin-cic .bl-table th:first-child { text-align: left; }
.ngin-cic .bl-table th.bench, .ngin-cic .bl-table td.bench { color: var(--ink); font-weight: 700; }
.ngin-cic .bl-table td { padding: 7px 8px; border-bottom: 1px solid rgba(217, 217, 217, .35); }
.ngin-cic .bl-table td.n { text-align: right; white-space: nowrap; }
.ngin-cic .bl-table tr.bl-grp td { font-size: .8rem; font-weight: 700; color: var(--ink);
  padding-top: 16px; border-bottom: none; }

/* 03 where you stand */
.ngin-cic .stand-grid, .ngin-cic .act-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ngin-cic .stand-col, .ngin-cic .act-col { background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; }
.ngin-cic .st-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: .88rem; padding: 7px 0; border-top: 1px solid rgba(217, 217, 217, .35); }
.ngin-cic .st-tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ngin-cic .st-tag.strong { color: #1d2a35; }
.ngin-cic .st-tag.missing { color: #1d2a35; }
.ngin-cic .st-stage { font-size: .95rem; }
.ngin-cic .stand-col p { font-size: .85rem; color: var(--ink-soft); }

/* 04 actions */
.ngin-cic .rm-actions { margin: 0 0 0 18px; padding: 0; }
.ngin-cic .rm-actions li { font-size: .88rem; line-height: 1.55; margin-bottom: 12px; }

/* 05 evidence */
.ngin-cic .ev-head-row { display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 20px; }
.ngin-cic .ev-shape { font-size: .8rem; color: var(--ink-faint); }
.ngin-cic .ev-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.ngin-cic .ev-chip { border: 1px solid var(--line); background: #fff; border-radius: 20px;
  padding: 5px 13px; font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft);
  cursor: pointer; }
.ngin-cic .ev-chip.on { background: #82bd50; border-color: #82bd50; color: #1d2a35; font-weight: 700; }
.ngin-cic .ev-n { margin-left: 7px; color: var(--ink-faint); font-size: .74rem; }
.ngin-cic .ev-chip.on .ev-n { color: #1d2a35; }
.ngin-cic .ev-item { padding: 12px 0; border-top: 1px solid var(--line); }
.ngin-cic .ev-head { display: flex; gap: 12px; align-items: flex-start; }
.ngin-cic .ev-plus { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .9rem;
  line-height: 1; cursor: pointer; font-family: var(--font-body); }
.ngin-cic .ev-item.open .ev-plus { background: #82bd50; border-color: #82bd50; }
.ngin-cic .ev-main { flex: 1; min-width: 0; }
.ngin-cic .ev-main b { font-size: .9rem; }
/* Title and the line under it are one block on the left, the tags a fixed
   column on the right. The tags get enough width to keep each label on one
   line, and because they are not in the flow of the left block they can never
   push the line under the title away from it. display:block matters: an older
   rule further up sets .ev-meta to a two-column grid, which sent the source
   link half a row away from the text it follows. */
.ngin-cic .ev-head { display: flex; gap: 12px; align-items: flex-start; }
.ngin-cic .ev-head > .ev-main { flex: 1 1 auto; min-width: 0; }
/* The column only has to hold three short markers now, not three sentences. */
.ngin-cic .ev-head > .ev-side { flex: 0 0 auto; }
.ngin-cic .ev-main > .ev-meta { display: block; font-size: .78rem; color: var(--ink-faint);
  margin: 3px 0 0; }
.ngin-cic .ev-main > .ev-meta .src-link { color: var(--green); font-weight: 700; }
.ngin-cic .ev-tag { white-space: nowrap; }
@media (max-width: 800px) { .ngin-cic .ev-head > .ev-side { flex: 1 1 100%; } }
/* Short labels, so the three of them sit on one line beside the title. */
.ngin-cic .ev-side { display: flex; flex-wrap: nowrap; gap: 5px; justify-content: flex-end;
  flex: none; }
/* One colour for all of them. Three different fills read as a severity scale,
   and these are categories, not grades. */
.ngin-cic .ev-tag { font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 3px; padding: 3px 8px;
  background: #cbdebc; color: #1d2a35; }
.ngin-cic .ev-detail { margin: 10px 0 2px 34px; padding: 12px 16px; background: rgba(217, 217, 217, .35);
  border-radius: 8px; }
.ngin-cic .evd-row { margin-bottom: 9px; }
.ngin-cic .evd-row:last-child { margin-bottom: 0; }
.ngin-cic .evd-row span { display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ngin-cic .evd-row p { font-size: .85rem; line-height: 1.55; color: var(--ink); margin-top: 2px; }
.ngin-cic .ev-src { margin-top: 10px; }
.ngin-cic .ev-chips { cursor: help; }

@media (max-width: 900px) {
  .ngin-cic .gs-grid, .ngin-cic .stand-grid, .ngin-cic .act-grid { grid-template-columns: 1fr; }
}

/* Goal cards, grouped in the families the workbook defines. */
.ngin-cic .goal-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-top: 8px; }
/* The four headers are not the same length, so a fixed height keeps the
   columns starting on the same line. The cards share a minimum height for the
   same reason, row by row. */
.ngin-cic .goal-group > h4 { font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #82bd50; margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); box-sizing: border-box; height: 46px;
  display: flex; align-items: flex-end; }
.ngin-cic .goal-group .outcome-card { margin-bottom: 10px; height: 96px;
  display: flex; align-items: center; }
.ngin-cic .goal-group .outcome-card h4 { margin: 0; }
@media (max-width: 1100px) {
  .ngin-cic .goal-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tract map: the county drawn from its own tract outlines, with the selected
   ones filled. Sits beside the profile cards. */
/* The map is one card in the row, the same height as the data cards. */
/* Same top padding as the data cards so the four headings share a baseline,
   and the map itself takes the space that is left rather than the heading being
   centred along with it. */
.ngin-cic .prof-card.map { padding: 16px 10px 10px; display: flex; flex-direction: column;
  justify-content: flex-start; }
.ngin-cic .prof-card.map h4 { justify-content: center; text-align: center; }
.ngin-cic .prof-card.map .map-wrap { margin-top: auto; margin-bottom: auto; }
.ngin-cic .prof-card.map .map-wrap { background: none; border: none; padding: 0; width: 100%; }
/* The key runs along the bottom in one line, leaving the height to the map. */
.ngin-cic .prof-card.map .map-key { flex-direction: row; flex-wrap: wrap; gap: 4px 12px;
  justify-content: center; margin-top: 8px; }
.ngin-cic .prof-card.map .map-key-item { font-size: .72rem; }
.ngin-cic .prof-card.map .map-key-item i { width: 15px; height: 15px; font-size: .62rem; }
.ngin-cic .map-wrap { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px 8px; }
.ngin-cic .tract-map { width: 100%; height: auto; display: block; }
.ngin-cic .tract-map .tr { fill: rgba(217, 217, 217, .35); stroke: #ffffff; stroke-width: .6; }
.ngin-cic .tract-map .tr.on { fill: #82bd50; stroke: #ffffff; stroke-width: 1; }
.ngin-cic .tract-map .tr:hover { fill: #cbdebc; }
.ngin-cic .tract-map .tr.on:hover { fill: #82bd50; }
.ngin-cic .tract-map .tr-pin { fill: #1d2a35; stroke: #ffffff; stroke-width: 1.5;
  pointer-events: none; }
.ngin-cic .tract-map .tr-num { font-family: var(--font-body); font-size: 10px; font-weight: 700;
  fill: #ffffff; pointer-events: none; }
.ngin-cic .map-key { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  margin-top: 10px; }
.ngin-cic .map-key-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  color: var(--ink-soft); }
.ngin-cic .map-key-item i { width: 17px; height: 17px; border-radius: 50%; background: #1d2a35;
  color: #fff; font-size: .68rem; font-weight: 700; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; }
.ngin-cic .map-note { font-size: .76rem; color: var(--ink-faint); text-align: center;
  margin-top: 6px; }
@media (max-width: 900px) {
  .ngin-cic .prof-split { grid-template-columns: 1fr; }
}

/* =========================================================================
   Roadmap detail
   ========================================================================= */

/* The intro closes with a full-width navy band holding the two cards. It marks
   where the opening ends and the first section begins. */
.ngin-cic .bg-band { background: #1d2a35; margin-top: 22px; padding: 26px 0; }
.ngin-cic .bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.ngin-cic .bg-card h4 { font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #82bd50; margin: 0 0 8px; }
.ngin-cic .bg-card p { font-size: .88rem; line-height: 1.6; color: #ffffff; margin: 0; }
.ngin-cic .rm-dot { color: var(--line); margin: 0 9px; }

/* Where You Stand: a three-segment meter beside each item. */
.ngin-cic .st-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: .86rem; padding: 8px 0; border-top: 1px solid rgba(217, 217, 217, .35); }
.ngin-cic .st-lbl { flex: 1; min-width: 0; }
/* Name, meter and state in three columns, so the bars line up down the card
   and the whole box can be read at a glance. */
.ngin-cic .st-meter { display: inline-flex; gap: 3px; flex: none; }
.ngin-cic .st-meter i { width: 15px; height: 11px; border-radius: 2px;
  background: rgba(217, 217, 217, .60); display: block; }
.ngin-cic .st-meter i.on { background: #82bd50; }
.ngin-cic .st-meter.unk i { background: transparent; border: 1px solid #d9d9d9; }
.ngin-cic .st-meter.wide i { width: 11px; }
.ngin-cic .st-tag { min-width: 82px; text-align: right; flex: none; }

/* Section 04: the number sits in its own circle, the action leads, the reason
   follows underneath. */
.ngin-cic .acts { margin-top: 4px; }
.ngin-cic .act { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(217, 217, 217, .35); }
.ngin-cic .act:first-child { border-top: none; padding-top: 2px; }
.ngin-cic .act-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #cbdebc;
  color: #1d2a35; font-size: .76rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; }
/* The action runs on into its reason: bold for the imperative, normal weight
   for the rest of the same sentence. */
.ngin-cic .act-lead { font-size: .85rem; line-height: 1.5; font-weight: 400;
  color: var(--ink-soft); margin: 0; }
.ngin-cic .act-lead b { font-weight: 700; color: var(--ink); }
.ngin-cic .act-resource { font-size: .74rem; line-height: 1.45; color: var(--ink-faint);
  margin-top: 4px; }
.ngin-cic .act-resource a { color: var(--green); font-weight: 700; text-decoration: none; }
.ngin-cic .act-resource a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .ngin-cic .bg-grid { grid-template-columns: 1fr; }
}

/* Space between the generated note and the first coalition below it. */
.ngin-cic .lesson-list { margin-top: 14px; }


/* Profile cards: a fixed row height keeps the indicator names on the same line
   across every card, so the four can be read across rather than one at a time. */
.ngin-cic .pc-row { height: 48px; align-items: center; }
.ngin-cic .pc-row span { font-size: .78rem; line-height: 1.25; }
.ngin-cic .pc-row span { flex: 1; min-width: 0; }
.ngin-cic .pc-row b { flex: none; }
.ngin-cic .pc-row span { line-height: 1.35; }

/* The strategies that carry indicators, named above the baseline table. */
.ngin-cic .bl-intro { font-size: .84rem; color: var(--ink-soft); margin: 8px 0 12px; }

/* Space between the copy and the diagram that follows it. */
.ngin-cic .lede-wide + .ring-wrap, .ngin-cic .lede-wide + .bub-legend,
.ngin-cic .lede-wide + .geo-box, .ngin-cic .sub-note + .bub-legend { margin-top: 26px; }

/* The card that closes the roadmap, offering NGIN's support. */
.ngin-cic .support-card { background: #1d2a35; color: #ffffff; border-radius: 12px;
  padding: 24px 28px; margin-top: 26px; }
.ngin-cic .support-card h4 { font-size: 1.05rem; font-weight: 500; color: #82bd50; margin: 0 0 10px; }
.ngin-cic .support-card p { font-size: .9rem; line-height: 1.6; color: #ffffff; margin-bottom: 10px; }
.ngin-cic .support-card p:last-child { margin-bottom: 0; }
.ngin-cic .support-card a { color: #82bd50; }

/* 02: a green band with the goals, then the strategies beside a single
   baseline table whose group rows carry the same numbers as the list. */
/* Was full bleed: on a wide screen that drew a green stripe right across the
   window with the text bunched at the left. It now ends where the content does. */
.ngin-cic .goals-band { background: #cbdebc; border-radius: 10px; margin: 0 0 22px;
  padding: 16px 20px; display: flex; gap: 26px; align-items: flex-start; }
.ngin-cic .gb-label { flex: none; width: 92px; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(29, 42, 53, .70);
  padding-top: 3px; }
.ngin-cic .gb-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; flex: 1; }
.ngin-cic .gb-item { display: flex; gap: 10px; }
.ngin-cic .gb-item b { font-size: .92rem; color: #1d2a35; }
.ngin-cic .gb-item p { font-size: .82rem; color: rgba(29, 42, 53, .70); margin-top: 3px; }

.ngin-cic .bl-top { display: flex; align-items: baseline; justify-content: space-between; }
.ngin-cic .bl-note { font-size: .72rem; color: rgba(29, 42, 53, .45); }
.ngin-cic .bl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #82bd50; margin-right: 5px; }
.ngin-cic .bl-table th.bench, .ngin-cic .bl-table td.bench { background: rgba(203, 222, 188, .35); }
.ngin-cic .bl-table tr.bl-none td { font-size: .8rem; font-style: italic;
  color: rgba(29, 42, 53, .45); }

/* 03: tighter boxes, and the stage shown on the same scale as the rest. */
.ngin-cic .stand-col { padding: 14px 16px; }
.ngin-cic .stand-col h4 { margin-bottom: 6px; }
.ngin-cic .st-def { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; }

/* 04: one section below the other. */
/* No card around each group. With the numbering running straight through, the
   three headings are dividers inside one list, and a border around each block
   cut that list into three again. */
.ngin-cic .act-stack { margin-top: 4px; }
.ngin-cic .act-block { margin-bottom: 16px; }
.ngin-cic .act-block:last-child { margin-bottom: 0; }
.ngin-cic .act-block h4 { font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); }

/* Goal cards: a checkbox states the choice, and each family carries an icon. */
.ngin-cic .goal-group > h4 { display: flex; align-items: center; gap: 8px; height: auto;
  min-height: 46px; }
.ngin-cic .gf-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #82bd50;
  display: inline-flex; align-items: center; justify-content: center; }
.ngin-cic .gf-ico svg { width: 17px; height: 17px; }
.ngin-cic .gf-ico path { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round; }
.ngin-cic .goal-group .outcome-card { display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; }
.ngin-cic .goal-box { flex: none; width: 17px; height: 17px; border-radius: 4px;
  border: 1.5px solid var(--line); background: #fff; color: #1d2a35; font-size: .72rem;
  line-height: 15px; text-align: center; }
.ngin-cic .outcome-card.selected .goal-box { background: #1d2a35; border-color: #1d2a35;
  color: #ffffff; }
.ngin-cic .goal-group .outcome-card h4.caps { font-size: .92rem; color: #1d2a35; margin: 0; }
.ngin-cic .outcome-card .pill-selected { display: none; }

/* Strategy chips carry a checkbox, so a selection reads the same way as in the
   goals step. */
.ngin-cic .strat-chip { display: inline-flex; align-items: center; gap: 9px; }
.ngin-cic .chip-box { flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line); background: #ffffff; color: #1d2a35; font-size: .68rem;
  line-height: 14px; text-align: center; }
.ngin-cic .strat-chip.on .chip-box { background: #1d2a35; border-color: #1d2a35; color: #ffffff; }

/* The six stages read as a progression: numbered, chained, and with the
   assessment offered at the end rather than competing with the cards. */
.ngin-cic .stage-card { position: relative; }
/* The six stages read as a journey, so the gap between cards carries an arrow.
   Only within a row: the third and sixth card end their line. */
.ngin-cic .stage-grid > .stage-card::after { content: ""; position: absolute; top: 30px;
  left: 100%; width: 14px; height: 7px; background: var(--green); opacity: .55;
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%); }
.ngin-cic .stage-grid > .stage-card:nth-child(3n)::after,
.ngin-cic .stage-grid > .stage-card:last-child::after { content: none; }
@media (max-width: 900px) {
  .ngin-cic .stage-grid > .stage-card::after { content: none; }
}

/* Running count of the current selection, above the buttons on both pickers. */
.ngin-cic .pick-count { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 16px;
  font-size: .88rem; color: var(--ink); }
.ngin-cic .pick-count span { color: var(--ink-faint); font-style: italic; }
.ngin-cic .pick-count + .btn-row { margin-top: 14px; }

/* The assessment box is an aside, not a second call to action, so it takes
   about three quarters of the row and sits left rather than spanning it. */
.ngin-cic .stage-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; margin-top: 20px; max-width: 74%; }
.ngin-cic .stage-cta span { font-size: .88rem; color: var(--ink); }
@media (max-width: 900px) { .ngin-cic .stage-cta { max-width: none; } }

/* The selection strip: one pill per choice, so four or five strategies read as
   a list rather than as a paragraph. */
.ngin-cic .crumb-row { display: flex; align-items: baseline; gap: 14px; padding: 3px 0; }
.ngin-cic .crumb-row + .crumb-row { border-top: 1px solid rgba(29, 42, 53, .08); }
.ngin-cic .crumb-k { flex: none; min-width: 108px; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(29, 42, 53, .70); }
.ngin-cic .crumb-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ngin-cic .crumb-pill { background: #ffffff; border: 1px solid rgba(29, 42, 53, .12);
  border-radius: 20px; padding: 2px 11px; font-size: .76rem; color: #1d2a35; }

/* The opening form: two columns for the short fields, full width for the ones
   people mistype when they are cramped. */
.ngin-cic .gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ngin-cic .gate-field.wide { grid-column: 1 / -1; }
.ngin-cic .gate-field .gate-label { margin-top: 0; }
.ngin-cic .gate-field .gate-input { width: 100%; margin-bottom: 0; }
.ngin-cic select.gate-input { appearance: auto; background: #ffffff; }
.ngin-cic .gate-privacy b { color: #1d2a35; }
@media (max-width: 620px) {
  .ngin-cic .gate-grid { grid-template-columns: 1fr; }
}

/* The assessment: a green band opens each block, and every row carries the
   icon of its category, so the two lists read as two separate questions. */
/* No overflow:hidden here. It was only rounding the green band, and it was
   also clipping the "?" tooltip of the first row of every block, which opens
   upwards. The band rounds its own two corners instead. */
.ngin-cic .rate-block { border: 1px solid var(--line); border-radius: 12px;
  margin-top: 20px; background: #ffffff; }
.ngin-cic .rate-band { background: #cbdebc; color: #1d2a35; font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 11px 11px 0 0; }
.ngin-cic .rate-block .rate-sub { padding: 12px 18px 0; margin: 0; }
.ngin-cic .rate-block .rate-row { padding-left: 18px; padding-right: 18px; }
.ngin-cic .rate-ico { width: 16px; height: 16px; flex: none; margin-right: 8px;
  vertical-align: -3px; }
.ngin-cic .rate-ico path { fill: none; stroke: rgba(29, 42, 53, .45); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }

/* The generated note reads as a panel: a header band naming it, the text in
   white underneath, and a line at the foot saying where it comes from. */
.ngin-cic .ai-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #ffffff; padding: 0; margin-top: 18px; }
.ngin-cic .ai-head { background: #cbdebc; color: #1d2a35; font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.ngin-cic .ai-mark { color: #1d2a35; }
.ngin-cic .ai-writing { margin-left: auto; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: rgba(29, 42, 53, .70); }
.ngin-cic .ai-body { padding: 14px 16px; }
.ngin-cic .ai-body p { font-size: .88rem; line-height: 1.6; color: #1d2a35; margin-bottom: 8px; }
.ngin-cic .ai-body ul { margin: 0 0 0 16px; padding: 0; }
.ngin-cic .ai-body li { font-size: .88rem; line-height: 1.55; margin-bottom: 7px; }
.ngin-cic .ai-foot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px;
  font-size: .74rem; font-style: italic; color: rgba(29, 42, 53, .45); }
.ngin-cic .ai-box.ai-loading .ai-body p { color: rgba(29, 42, 53, .45); font-style: italic; }

/* Coalition cases sit side by side: three accounts read as alternatives, not
   as a sequence. */
.ngin-cic .lesson-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px; }
.ngin-cic .lesson { background: #ffffff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin: 0; }

/* Closed, the card carries the name, the place and the opening of the account,
   which is what the reader judges it by. The head is the band that has to line
   up across the three; the grid does it where subgrid is available and the
   min-height covers the rest. */
.ngin-cic .lesson-head { min-height: 8.5em; }
.ngin-cic .lesson .case-lead { font-size: .84rem; line-height: 1.45; color: var(--ink-soft);
  margin-top: 6px; }
.ngin-cic .lesson-more:empty { display: none; }
.ngin-cic .case-toggle { margin-top: 8px; padding-top: 8px; width: 100%; text-align: left;
  border-top: 1px solid var(--line); text-decoration: none; }
.ngin-cic .case-toggle .chev { margin-left: 7px; font-size: .9em; }
.ngin-cic .case-toggle:hover { text-decoration: underline; }
@supports (grid-template-rows: subgrid) {
  .ngin-cic .lesson-list > .lesson { display: grid; grid-row: span 3;
    grid-template-rows: subgrid; align-content: start; }
  .ngin-cic .lesson-head { min-height: 0; }
  .ngin-cic .lesson-more { align-self: start; }
  .ngin-cic .case-toggle { align-self: end; }
}
@media (max-width: 900px) { .ngin-cic .lesson-head { min-height: 0; } }
.ngin-cic .ev-h { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  margin: 20px 0 8px; }
@media (max-width: 900px) {
  .ngin-cic .lesson-list { grid-template-columns: 1fr; }
}

.ngin-cic .ev-tag { cursor: help; }
/* The filter chips explain their own tag on hover, so they get the same
   affordance as the tags themselves. */
.ngin-cic .ev-chip[data-ringtip] { cursor: help; }
.ngin-cic .ev-chip[data-ringtip]:hover { border-color: var(--ink-faint); }
.ngin-cic .ev-chip.on[data-ringtip]:hover { border-color: #82bd50; }

/* =========================================================================
   Vertical space
   =========================================================================

   One pass over the whole tool, kept together rather than scattered through
   the file so it can be read, tuned or reverted as a unit.

   The base stylesheet gives every step page section 56px of padding at the
   top and another 56px at the bottom, which is 112px of nothing on a screen
   the reader is meant to work through in one view. The rest of the values
   below were set individually and never looked at side by side; together they
   pushed the fold down far enough that the buttons on several steps sit below
   it on a laptop.

   Nothing here changes a size, a colour or a line height: only the space
   between things, and only where the space was carrying no meaning.
   ========================================================================= */

/* The single biggest saving: ~50px on every step. */
.ngin-cic .page > section.wrap { padding-top: 30px; padding-bottom: 34px; }

/* Heading block: eyebrow, title, instruction, lede. */
.ngin-cic .eyebrow { margin-bottom: 6px; }
.ngin-cic .lede { margin-top: 10px; }
.ngin-cic .lede.instruction { margin-top: 12px; }

/* Step 1, the two pickers. */
.ngin-cic .strat-block { margin-bottom: 16px; }
.ngin-cic .geo-box { padding: 18px 22px; margin-top: 18px; }
.ngin-cic .geo-field { margin-bottom: 13px; }

/* Step 2, the diagrams. */
.ngin-cic .bub-wrap { margin-top: 0; }
.ngin-cic .eco-split { margin-top: 4px; }

/* Step 3, the assessment and the stages. */
.ngin-cic .rate-block { padding: 18px 22px; margin-bottom: 14px; }
.ngin-cic .rate-sub { margin-bottom: 12px; }
.ngin-cic .rate-row { padding: 10px 0; }
.ngin-cic .stage-grid { gap: 12px; margin-top: 16px; }

/* The roadmap. */
.ngin-cic .rm-hero { padding: 30px 0 26px; }
.ngin-cic .goals-band { padding: 13px 18px; margin-bottom: 16px; }
.ngin-cic .bl-wrap { margin-top: 18px; }
.ngin-cic .stand-col { padding: 12px 14px; }
.ngin-cic .support-card { margin-top: 16px; }

/* Generated notes, on every screen that carries one. The panel keeps no
   padding of its own: the header band runs edge to edge and the body carries
   the inner space. */
.ngin-cic .ai-box { padding: 0; margin-top: 10px; }

/* The buttons sit closer to the thing they act on. */
.ngin-cic .btn-row { margin-top: 22px; }
.ngin-cic .pick-count { margin-top: 20px; padding-top: 12px; }
.ngin-cic .pick-count + .btn-row { margin-top: 12px; }

/* =========================================================================
   Embedded on a host page that grows the frame to fit
   =========================================================================

   Set only after the host page has asked for it (see "embedding on a host
   page" in app.js). The frame is as tall as the tool, so the tool itself must
   never scroll: the page around it does. Without the host's request none of
   this applies and the tool keeps its own scrollbar. */
html.ngin-autosize,
html.ngin-autosize body { overflow: hidden; height: auto; }

/* =========================================================================
   Review round of 24 September (Taylor, Pablo, Vicky)
   ========================================================================= */

/* The instruction is what the reader acts on, so it leads: larger, and the
   supporting copy under it smaller. */
.ngin-cic .page .lede.instruction { font-size: 1.22rem; line-height: 1.45; }
.ngin-cic .page .lede:not(.instruction) { font-size: .92rem; line-height: 1.6; }
.ngin-cic .page .rm-lead { font-size: .92rem; }

/* The partnership assessment is an alternative path and reads as one: it
   sits before the stage cards, with a green border and a heavier prompt. */
.ngin-cic .stage-cta { max-width: none; border: 2px solid #82bd50; background: #ffffff;
  padding: 14px 20px; margin: 18px 0 4px; }
.ngin-cic .stage-cta span { font-size: 1.02rem; font-weight: 700; color: #1d2a35; }
.ngin-cic .stage-cta + .stage-grid { margin-top: 18px; }

/* The diagram notes: a two-sentence summary, then bullets that open with a
   bold phrase in the accent color. */
.ngin-cic .ai-body ul.ai-bullets { margin: 10px 0 0 0; padding: 0; list-style: none; }
.ngin-cic .ai-body ul.ai-bullets li { position: relative; padding-left: 14px; font-size: .88rem;
  line-height: 1.55; color: #1d2a35; margin-bottom: 9px; }
.ngin-cic .ai-body ul.ai-bullets li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: #82bd50; }
.ngin-cic .ai-lead { color: #82bd50; font-weight: 700; }

/* The bubble tooltip: the definition, then the strategies as a list. */
.ring-tip .tip-sum { margin: 0 0 7px; }
.ring-tip .tip-k { margin: 0 0 4px; font-weight: 700; color: #cbdebc; }
.ring-tip ul { margin: 0; padding-left: 16px; }
.ring-tip li { margin: 0 0 2px; }

/* Census values on their way. */
.ngin-cic .acs-loading { font-size: .88rem; color: rgba(29, 42, 53, .70); padding: 14px 0; }
.ngin-cic .spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  vertical-align: -1px; border: 2px solid #cbdebc; border-top-color: #82bd50; border-radius: 50%;
  animation: ngin-spin .8s linear infinite; }
@keyframes ngin-spin { to { transform: rotate(360deg); } }


/* =========================================================================
   Review round of 25 September (Vicky)
   ========================================================================= */

/* The partnership assessment prompt: a thin box, one compact line that only
   takes the width it needs, the question in bold and a soft green button. */
.ngin-cic .stage-cta { display: inline-flex; align-items: center; gap: 16px; width: auto;
  max-width: 100%; border: 1px solid #82bd50; border-radius: 8px; background: #ffffff;
  padding: 7px 8px 7px 16px; margin: 14px 0 6px; }
.ngin-cic .stage-cta span { font-size: .9rem; font-weight: 400; color: #1d2a35; }
.ngin-cic .stage-cta span b { font-weight: 700; }
.ngin-cic .btn.btn-cta-soft { background: #cbdebc; color: #1d2a35; border: 1px solid #cbdebc;
  padding: 7px 14px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.ngin-cic .btn.btn-cta-soft:hover { background: #82bd50; border-color: #82bd50; }
@media (max-width: 700px) {
  .ngin-cic .stage-cta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* NGIN's own case studies: a label in the top right corner of the card. */
.ngin-cic .lesson { position: relative; }
/* The label sits in the card's top padding, above the title, so the title
   keeps its full width and every card's title starts on the same line. */
.ngin-cic .ngin-tag { position: absolute; top: 12px; right: 14px; padding: 3px 8px;
  border-radius: 3px; background: #cbdebc; color: #1d2a35; font-size: .62rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }