:root{
    --paper:#EDF1F3; --card:#FBFCFD; --ink:#16232E; --ink-soft:#4C5D67;
    --rich:#16846A; --medium:#E0A548; --lean:#BB5A3C; --none:#CBD3D8;
    --accent:#2E5FE8; --line:#D6DEE2; --line-strong:#B9C4CA;
    --rich-tint:#E3F1EC; --medium-tint:#FaF0DD; --lean-tint:#F7E6DF;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--paper); color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1180px; margin:0 auto; padding:32px 22px 64px}

  /* ---- header ---- */
  .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-soft); display:flex; gap:10px; align-items:center}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--rich);display:inline-block}
  h1{font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(30px,5vw,50px);
    line-height:1.02; letter-spacing:-.02em; margin:14px 0 10px; max-width:16ch}

  /* title row with logo */
  .titlerow{display:flex; align-items:center; gap:14px; margin:14px 0 10px}
  .titlerow h1{margin:0}
  .logo{flex:0 0 auto; width:44px; height:44px; display:block;
    box-shadow:0 2px 8px rgba(22,35,46,.18); border-radius:11px}
  @media(max-width:520px){ .logo{width:38px; height:38px} }
  .lede{font-size:17px; color:var(--ink-soft); max-width:56ch; margin:0}

  /* ---- federal strip ---- */
  .federal{margin:26px 0 8px; border:1px solid var(--line); background:var(--card);
    border-radius:14px; padding:16px 18px}
  .federal h2{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; font-weight:600}
  .fedgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
  .fedcard{display:flex; gap:12px; align-items:flex-start}
  .fedcard .score{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px;
    color:var(--ink); background:var(--rich-tint); border:1px solid #BFE0D5; padding:3px 7px;
    border-radius:7px; white-space:nowrap; line-height:1.3}
  .fedcard .txt{font-size:13.5px}
  .fedcard .txt a{color:var(--ink); font-weight:600; text-decoration:none;
    border-bottom:1.5px solid var(--accent)}
  .fedcard .txt a:hover{color:var(--accent)}
  .fedcard .txt span{color:var(--ink-soft); display:block; font-size:12.5px}

  /* ---- legend ---- */
  .legend{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin:22px 0 14px}
  .legend .item{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-soft)}
  .legend .sw{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
  .legend .n{font-family:"IBM Plex Mono",monospace; color:var(--ink); font-weight:600}

  /* ---- main layout ---- */
  .stage{display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:start}
  @media(max-width:860px){ .stage{grid-template-columns:1fr} }

  /* ---- tile map ---- */
  .mapcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px}
  .maphd{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
  .maphd h2{font-family:"Archivo",sans-serif; font-size:17px; margin:0; letter-spacing:-.01em}
  .maphd .hint{font-size:12px; color:var(--ink-soft)}
  .grid{display:grid; grid-template-columns:repeat(11,1fr); gap:5px}
  .tile{aspect-ratio:1/1; border:none; border-radius:7px; cursor:pointer; position:relative;
    background:var(--none); color:#5A6771; font-family:"IBM Plex Mono",monospace; font-weight:600;
    font-size:11px; display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease, outline-color .12s; padding:0}
  .tile:hover{transform:translateY(-2px); box-shadow:0 5px 14px rgba(22,35,46,.16); z-index:2}
  .tile:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .tile.rich{background:var(--rich); color:#EAF6F1}
  .tile.medium{background:var(--medium); color:#3D2B08}
  .tile.lean{background:var(--lean); color:#FBEDE7}
  .tile.sel{outline:3px solid var(--ink); outline-offset:2px; z-index:3}
  .tile .sc{position:absolute; bottom:3px; right:4px; font-size:8.5px; opacity:.85}
  @media(max-width:520px){ .tile{font-size:9px} .tile .sc{display:none} }

  /* ---- detail panel ---- */
  .panel{background:var(--ink); color:#E7EDF0; border-radius:16px; padding:22px 22px 26px;
    position:sticky; top:20px}
  @media(max-width:860px){ .panel{position:static} }
  .panel .state{font-family:"Archivo",sans-serif; font-weight:800; font-size:28px;
    letter-spacing:-.02em; margin:2px 0 0; display:flex; align-items:center; gap:12px}
  .chip{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; padding:4px 9px; border-radius:20px; font-weight:600}
  .chip.rich{background:var(--rich); color:#EAF6F1}
  .chip.medium{background:var(--medium); color:#3D2B08}
  .chip.lean{background:var(--lean); color:#FBEDE7}
  .chip.none{background:#3A4A55; color:#B9C6CE}
  .panel .summary{color:#AEBCC5; font-size:14px; margin:12px 0 20px; max-width:44ch}
  .rowlabel{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:#7E909B; margin:0 0 10px}
  .src{display:block; text-decoration:none; color:inherit; border:1px solid #2B3B45;
    background:#1B2A34; border-radius:11px; padding:13px 14px; margin-bottom:10px;
    transition:border-color .12s, transform .12s}
  .src:hover{border-color:var(--accent); transform:translateX(2px)}
  .src .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
  .src .name{font-weight:600; font-size:15px; line-height:1.25}
  .src .score{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px;
    padding:2px 8px; border-radius:7px; white-space:nowrap}
  .src .meta{display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap}
  .cat{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:#9FB0BA; border:1px solid #33454F; padding:2px 7px; border-radius:6px}
  .src .pub{font-size:12px; color:#8DA0AB}
  .src .open{font-size:12px; color:var(--accent); font-weight:600; margin-left:auto}
  .bar{height:4px; border-radius:3px; background:#2B3B45; margin-top:11px; overflow:hidden}
  .bar > i{display:block; height:100%; border-radius:3px}
  .empty{color:#9FB0BA; font-size:14px; border:1px dashed #35464F; border-radius:11px;
    padding:18px; background:#1B2A34}
  .footnote{margin-top:20px; font-size:12px; color:#7E909B; line-height:1.5}
  .footnote code{font-family:"IBM Plex Mono",monospace; color:#AEBCC5}

  /* national tools strip */
  .tools{margin:14px 0 4px; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:16px 18px}
  .tools h2{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px; font-weight:600}
  .tools .sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 12px;max-width:70ch}
  .toolgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px}
  .tool{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:11px;padding:13px 14px;transition:border-color .12s,transform .12s;background:#fff}
  .tool:hover{border-color:var(--accent);transform:translateY(-2px)}
  .tool .nm{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px}
  .tool .nm .open{margin-left:auto;color:var(--accent);font-size:12px;font-weight:600}
  .tool .d{font-size:12.5px;color:var(--ink-soft);margin:6px 0 9px}
  .tool .tags{display:flex;flex-wrap:wrap;gap:6px}
  .tool .tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:6px;padding:2px 6px}

  /* crosswalk */
  .cross{margin:34px 0 0}
  .cross-hd h2{font-family:"Archivo",sans-serif;font-size:23px;letter-spacing:-.015em;margin:0 0 4px}
  .cross-hd p{font-size:14px;color:var(--ink-soft);margin:0 0 16px;max-width:64ch}
  .cross-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start}
  @media(max-width:860px){ .cross-stage{grid-template-columns:1fr} }
  .qlist{display:flex;flex-direction:column;gap:8px}
  .q{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:12px 14px;cursor:pointer;font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .12s,background .12s;display:flex;align-items:center;gap:10px}
  .q:hover{border-color:var(--accent)}
  .q.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
  .q .m{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.03em;opacity:.75;margin-left:auto;text-transform:uppercase;white-space:nowrap}
  .q:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .ans{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:20px 22px}
  .ans .metric{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 4px}
  .ans h3{font-family:"Archivo",sans-serif;font-size:19px;margin:0 0 16px;letter-spacing:-.01em}
  .tier{margin:0 0 15px}
  .tier .tl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px;display:flex;align-items:center;gap:8px}
  .tier .tl::after{content:"";flex:1;height:1px;background:var(--line)}
  .srcline{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:13.5px}
  .srcline .b{color:var(--accent);font-weight:700}
  .srcline a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent)}
  .srcline a:hover{color:var(--accent)}
  .srcline .note{color:var(--ink-soft);font-size:12.5px}
  .best{background:var(--rich-tint);border:1px solid #BFE0D5;border-radius:8px;padding:1px 7px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#0F6B54;margin-left:6px;white-space:nowrap}

/* roadmap phases */
.phasegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.phase{border:1px solid var(--line); background:var(--card); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column}
.phase .ph-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.ph-eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.status{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:2px 9px; border-radius:20px; font-weight:600}
.status.live{background:var(--rich); color:#EAF6F1}
.status.next{background:var(--medium); color:#3D2B08}
.status.planned{background:#E4EAED; color:#5A6771; border:1px solid var(--line-strong)}
.phase h3{font-family:"Archivo",sans-serif; font-size:16px; letter-spacing:-.01em; margin:0 0 8px; line-height:1.15}
.phase .what{font-size:13px; color:var(--ink-soft); margin:0 0 12px; flex:1 0 auto}
.phase .unlocks{font-size:12.5px; color:var(--ink); margin:0; padding-top:11px; border-top:1px solid var(--line)}
.phase .unlocks span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--rich); display:block; margin-bottom:3px}

/* concept-preview modal */
.phase.has-mock{cursor:pointer; transition:border-color .12s, transform .12s}
.phase.has-mock:hover{border-color:var(--accent); transform:translateY(-2px)}
.phase.has-mock:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.phase .preview{font-size:12px; color:var(--accent); font-weight:600; margin:11px 0 0}
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(16,35,46,.55)}
.modal-panel{position:relative; background:var(--paper); border-radius:16px; max-width:640px; width:100%; max-height:86vh; overflow:auto; padding:24px 26px; box-shadow:0 24px 60px rgba(16,35,46,.4)}
.modal-x{position:absolute; top:10px; right:14px; border:none; background:transparent; font-size:26px; line-height:1; color:var(--ink-soft); cursor:pointer}
.modal-x:hover{color:var(--ink)}
.modal-tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px}
.modal-panel h3{font-family:"Archivo",sans-serif; font-size:22px; letter-spacing:-.01em; margin:0 0 16px}
.mock-cap{font-size:12.5px; color:var(--ink-soft); margin:0 0 12px}

/* mock: filled national map */
.mock-map{display:grid; grid-template-columns:repeat(11,1fr); gap:3px; max-width:380px; margin:0 auto}
.mock-map span{aspect-ratio:1; border-radius:2px; display:block}
.mock-legend{display:flex; gap:6px; align-items:center; justify-content:center; font-size:11px; color:var(--ink-soft); margin-top:12px}
.mock-legend span{width:12px; height:12px; border-radius:3px; display:inline-block; margin-left:6px}

/* mock: hospital drill-down */
.mock-hp-head{font-size:13px; color:var(--ink-soft); margin-bottom:10px}
.mock-hp-head b{color:var(--ink)}
.mock-hp-row{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; background:var(--card)}
.mock-hp-row .muted{color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; font-size:12px; white-space:nowrap}
.mock-hp-card{border:1px solid var(--line-strong); border-radius:12px; padding:16px; margin-top:12px; background:var(--card)}
.mock-hp-card h4{font-family:"Archivo",sans-serif; margin:0 0 12px; font-size:16px}
.mock-metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.mock-metric{border:1px solid var(--line); border-radius:9px; padding:10px 11px}
.mock-metric .v{font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:600; color:var(--ink)}
.mock-metric .l{font-size:11px; color:var(--ink-soft); margin-top:2px}
.mock-metric .src{font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--rich); margin-top:6px}

/* mock: chat assistant */
.mock-chat{display:flex; flex-direction:column; gap:10px}
.bubble{max-width:88%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5}
.bubble.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px}
.bubble.bot .formula{font-family:"IBM Plex Mono",monospace; font-size:12px; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:7px 9px; margin:8px 0; display:block}
.bubble.bot a{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--accent)}
.mock-input{border:1px solid var(--line-strong); border-radius:22px; padding:10px 16px; color:var(--ink-soft); font-size:13px; margin-top:4px}

/* mock: learning library */
.mock-strat{border:1px solid var(--line); border-radius:9px; padding:11px 13px; margin-bottom:8px; background:var(--card)}
.mock-strat b{font-size:14px}
.mock-strat .d{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.mock-strat .n{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--rich); text-transform:uppercase; letter-spacing:.04em; margin-top:5px}
.mock-learn > p{font-size:12.5px; color:var(--ink-soft); margin-top:12px}
.mock-learn a{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--accent)}

/* mock: hospital drill-down — map + list layout */
.mock-hp-top{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px}
.mock-statemap{flex:0 0 148px; display:flex; flex-direction:column; align-items:center}
.mock-statemap svg{width:138px; height:auto; display:block}
.mock-statemap circle{stroke:#fff; stroke-width:1.3}
.mock-statemap .cap{font-size:10.5px; color:var(--ink-soft); margin-top:6px; text-align:center}
.mock-hp-listwrap{flex:1 1 250px; min-width:230px}

/* section tabs */
.tabs{position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:6px; background:var(--paper); padding:12px 0; margin:20px 0 24px; border-bottom:1px solid var(--line)}
.tab{font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em; padding:9px 17px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .12s, color .12s}
.tab:hover{color:var(--ink); background:#fff}
.tab.active{background:var(--ink); color:#fff}
.tab:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.tab-panel[hidden]{display:none}

/* mock: haves & have-nots dashboard */
.mock-haves{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:12px}
.mock-haves th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line-strong)}
.mock-haves td{padding:8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.mock-haves td:first-child{font-weight:600}
.tag-have{font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--rich); color:#EAF6F1; padding:2px 8px; border-radius:20px; white-space:nowrap}
.tag-havenot{font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--lean); color:#FBEDE7; padding:2px 8px; border-radius:20px; white-space:nowrap}
.mock-thresh{font-size:11.5px; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin:0 0 10px}
.mock-why{font-size:12.5px; color:var(--ink); margin:0}
.mock-cap a, .mock-thresh a{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--accent)}