:root{
      --bg:#f6f7fb;
      --paper:#ffffff;
      --ink:#0b1020;
      --muted:#667085;
      --muted2:#98a2b3;
      --line:#e6e8f0;
      --soft:#f2f4ff;

      --crit:#b42318;
      --high:#c4320a;
      --med:#b54708;
      --low:#175cd3;
      --info:#344054;

      --accent:#111827; /* solid modern */
      --r:16px;
      --r2:22px;
      --r3:28px;

      --max:1080px;

      --safeT: env(safe-area-inset-top);
      --safeB: env(safe-area-inset-bottom);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(920px 520px at 16% 6%, rgba(17,24,39,.06), transparent 60%),
        radial-gradient(820px 520px at 86% 0%, rgba(99,102,241,.07), transparent 62%),
        var(--bg);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button{font-family:inherit}
    .wrap{
      width:min(100%, var(--max));
      margin:0 auto;
      padding: 0 clamp(12px, 3.2vw, 18px);
    }

    /* Prevent overflow from long tokens/urls */
    .break{
      overflow-wrap:anywhere;
      word-break:break-word;
    }

    /* ===== Header (mobile-first, wraps clean) ===== */
header{
  position: static; /* not sticky */
  z-index:auto;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
    .headRow{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding: calc(14px + var(--safeT)) 0 14px;
      flex-wrap:wrap;
    }
    .brand{
      display:flex; align-items:flex-start; gap:12px;
      min-width:0;
      flex: 1 1 560px;
    }
    .logo{
      width:130px; height:31px; object-fit:contain;
      flex:0 0 auto;
    }
    .brandTxt{min-width:0}
    .docTitle{
      margin:0;
      font-family:Sora, Inter, system-ui;
      font-weight:700;
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      line-height:1.35;
    }
    .docMeta{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:12px;
      min-width:0;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid var(--line);
      background: var(--paper);
      border-radius:999px;
      padding:8px 10px;
      max-width:100%;
      min-width:0;
    }
    .pill i{width:14px;height:14px;color:var(--muted2)}
    .pill span{min-width:0}
    .actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      flex: 1 1 240px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      min-height:44px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font-size:12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
      transition:transform .12s ease;
    }
    .btn:active{transform:translateY(1px)}
    .btn i{width:16px;height:16px}
    .btn.primary{
      background: var(--accent);
      border-color: transparent;
      color:#fff;
    }
    @media (max-width: 620px){
      .actions{justify-content:flex-start; width:100%;}
      .actions .btn{flex:1 1 160px;}
      .docTitle{letter-spacing:.10em;}
    }

    /* ===== Layout (mobile-first) ===== */
    main{
      padding: clamp(18px, 3.5vw, 32px) 0 calc(clamp(22px, 4vw, 40px) + var(--safeB));
    }
    .grid{
      display:grid;
      grid-template-columns: 1fr;    /* mobile: one column */
      gap: clamp(12px, 3vw, 24px);
      align-items:start;
    }
    @media (min-width: 980px){
      .grid{
        grid-template-columns: 1.35fr .65fr;
        gap: 24px;
      }
    }

    /* Cards */
    .card{
      border:1px solid var(--line);
      background: var(--paper);
      border-radius: var(--r3);
      overflow:hidden;
    }
    .cardPad{
      padding: clamp(16px, 3.5vw, 24px);
    }
    .kicker{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .kdot{width:8px;height:8px;border-radius:999px;background:#111827;opacity:.9;}
    h1{
      margin: 10px 0 0;
      font-family:Sora, Inter, system-ui;
      font-size: clamp(22px, 5.2vw, 34px);
      letter-spacing:-.03em;
      line-height:1.12;
    }
    .sub{
      margin:10px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
      max-width: 80ch;
    }

    /* Summary metrics */
    .metrics{
      margin-top: clamp(14px, 3vw, 24px);
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 380px){
      .metrics{grid-template-columns:1fr;}
    }
    @media (min-width: 900px){
      .metrics{grid-template-columns: repeat(4, minmax(0,1fr));}
    }
    .metric{
      border:1px solid var(--line);
      background: var(--soft);
      border-radius: var(--r2);
      padding: 14px 14px;
      display:grid;
      gap:8px;
      min-width:0;
    }
    .metricTop{display:flex; align-items:center; justify-content:space-between; gap:10px;}
    .metricTop b{
      font-family:Sora;
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .sev{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      padding:7px 10px;
      border:1px solid var(--line);
      background: var(--paper);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .sev.critical{color:var(--crit)}
    .sev.high{color:var(--high)}
    .sev.medium{color:var(--med)}
    .sev.low{color:var(--low)}
    .sev.info{color:var(--info)}
    .metricVal{
      font-family:Sora;
      font-weight:700;
      font-size:26px;
      letter-spacing:-.03em;
      line-height:1;
    }
    .metricNote{
      color:var(--muted);
      font-size:12.5px;
      line-height:1.5;
    }

    /* Right rail */
    .rail .card + .card{margin-top: clamp(12px, 3vw, 24px);}
    .railTitle{
      margin:0 0 10px;
      font-family:Sora;
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .toc{display:grid; gap:10px;}
    .toc a{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      border:1px solid var(--line);
      background: var(--paper);
      border-radius: 16px;
      padding: 12px 12px;
      min-width:0;
    }
    .toc a span{
      color:var(--muted);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .toc a i{width:16px;height:16px;color:var(--muted2)}

    .mini{display:grid; gap:10px; color:var(--muted); font-size:13px; line-height:1.6;}
    .miniRow{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      border:1px solid var(--line);
      background: var(--soft);
      border-radius: 16px;
      padding: 12px 12px;
      min-width:0;
    }
    .miniRow b{
      color:var(--ink);
      font-weight:700;
      font-family:Sora;
      letter-spacing:-.02em;
      font-size:13px;
    }

    /* Section blocks */
    .section{
      margin-top: clamp(16px, 3vw, 24px);
      border-top:1px solid var(--line);
      padding-top: clamp(16px, 3vw, 24px);
    }
    .h2{
      margin:0;
      font-family:Sora;
      font-size:13px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .p{
      margin: 10px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .list{
      margin: 12px 0 0;
      padding-left: 18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
    }

    /* ===== Tables: TRUE responsive (cards on mobile) ===== */
    .tableWrap{
      margin-top: 14px;
      border:1px solid var(--line);
      border-radius: var(--r2);
      background:#fff;
      overflow:hidden; /* no horizontal slider by default */
    }
    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      font-size:13px;
    }
    thead th{
      text-align:left;
      padding: 12px 12px;
      background: var(--soft);
      border-bottom:1px solid var(--line);
      color: rgba(11,16,32,.86);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:11px;
      white-space:nowrap;
    }
    tbody td{
      padding: 12px 12px;
      border-bottom:1px solid var(--line);
      color: rgba(11,16,32,.88);
      vertical-align:top;
    }
    tbody tr:last-child td{border-bottom:0}

    .sevTag{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      padding:7px 10px;
      border:1px solid var(--line);
      background:#fff;
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .sevTag.critical{color:var(--crit)}
    .sevTag.high{color:var(--high)}
    .sevTag.medium{color:var(--med)}
    .sevTag.low{color:var(--low)}
    .sevTag.info{color:var(--info)}
    .sevTag i{width:14px;height:14px;color:currentColor}

    /* Mobile: turn rows into cards, no horizontal scrolling */
    @media (max-width: 720px){
      .tableWrap{background:transparent;border:none}
      table{border:none}
      thead{display:none}
      tbody{display:grid; gap:12px}
      tr{
        display:block;
        border:1px solid var(--line);
        border-radius: var(--r3);
        background:#fff;
        overflow:hidden;
      }
      td{
        display:grid;
        grid-template-columns: 140px 1fr;
        gap:12px;
        padding:12px 14px;
        border-bottom:1px solid var(--line);
        align-items:start;
      }
      td:last-child{border-bottom:none}
      td::before{
        content: attr(data-label);
        color: rgba(11,16,32,.78);
        font-family:Sora;
        font-size:11px;
        letter-spacing:.14em;
        text-transform:uppercase;
      }
      /* Make long titles wrap nicely */
      td.break{overflow-wrap:anywhere; word-break:break-word;}
    }
    @media (max-width: 420px){
      td{grid-template-columns: 1fr;}
      td::before{margin-bottom:6px;}
    }

    /* Finding cards (expandable) */
    .findings{margin-top: 14px; display:grid; gap:12px;}
    details.finding{
      border:1px solid var(--line);
      background:#fff;
      border-radius: var(--r3);
      overflow:hidden;
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding: 14px 14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none}

    .sumLeft{
      display:flex;
      gap:12px;
      align-items:flex-start;
      min-width:0;
      flex: 1 1 auto;
    }
    .fIcon{
      width:42px; height:42px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: var(--soft);
      display:grid; place-items:center;
      flex:0 0 auto;
    }
    .fIcon i{width:18px;height:18px;color:var(--muted2)}

    .sumTxt{min-width:0}
    .fTitle{
      margin:0;
      font-family:Sora;
      font-size:14px;
      letter-spacing:-.02em;
      line-height:1.25;
      overflow-wrap:anywhere;
    }
    .fMeta{
      margin-top:8px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:12px;
      min-width:0;
    }
    .fMeta .pill{white-space:normal}

    .chev{
      width:38px; height:38px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      display:grid; place-items:center;
      flex:0 0 auto;
    }
    .chev i{width:18px;height:18px;color:var(--muted2); transition: transform .15s ease;}
    details[open] .chev i{transform: rotate(180deg)}

    .fBody{
      border-top:1px solid var(--line);
      padding: 14px 14px 16px;
      display:grid;
      gap:12px;
    }

    /* KV blocks stack on mobile */
    .kv{
      display:grid;
      grid-template-columns: 160px 1fr;
      gap:10px;
      padding: 12px;
      border:1px solid var(--line);
      background: var(--soft);
      border-radius: var(--r2);
      min-width:0;
    }
    @media (max-width: 620px){
      .kv{grid-template-columns: 1fr;}
    }
    .k{
      color: rgba(11,16,32,.82);
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-family:Sora
    }
    .v{color:var(--muted); font-size:13.5px; line-height:1.7; overflow-wrap:anywhere;}

    /* Code blocks: wrap on mobile (no horizontal slider) */
    .code{
      border:1px solid var(--line);
      border-radius: var(--r2);
      background:#0b1020;
      color:#f3f4f6;
      overflow:hidden;           /* remove horizontal slider by default */
      padding:12px 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      font-size:12px;
      line-height:1.55;
      white-space:pre;
      max-width:100%;
    }
    @media (max-width: 720px){
      .code{
        white-space:pre-wrap;    /* wrap */
        overflow-wrap:anywhere;
        word-break:break-word;
      }
    }

    .note{
      border:1px solid var(--line);
      background:#fff;
      border-radius: var(--r2);
      padding:12px 12px;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.7;
      overflow-wrap:anywhere;
    }

    /* Footer */
    footer{
      margin-top: clamp(18px, 4vw, 32px);
      padding: clamp(16px, 3.5vw, 24px) 0;
      border-top:1px solid var(--line);
      color: rgba(11,16,32,.60);
      font-size:12px;
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .footRow{
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .footRow a{
      border-bottom:1px solid rgba(17,24,39,.18);
      padding-bottom:2px;
    }

    /* Print */
    @media print{
      body{background:#fff}
      header{position:static; backdrop-filter:none; background:#fff}
      .btn{display:none}
      .wrap{padding:0}
      main{padding:18px 0}
      details.finding{break-inside:avoid}
      .tableWrap{border:1px solid var(--line); background:#fff}
      thead{display:table-header-group}
      tbody{display:table-row-group}
      tr{display:table-row}
      td{display:table-cell}
      td::before{content:none}
      .code{white-space:pre}
    }