:root{--ink:#111418;--muted:#667085;--paper:#fffdf7;--cream:#f5f1e8;--line:#ddd8cb;--navy:#121826;--navy2:#172033;--amber:#ffd166;--gold:#f4b942;--blue:#3f66ff;--green:#2d8a6a;--red:#c44f4f;--panel:rgba(255,255,255,.78);--shadow:0 26px 90px rgba(18,24,38,.14);--radius:30px;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:radial-gradient(circle at 0% 0%,rgba(255,209,102,.28),transparent 32rem),linear-gradient(180deg,#fbf8ef,#ebe8df);font-family:var(--sans);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}img,svg,video,canvas{max-width:100%;height:auto}h1,h2,h3,p,.large,.quote,.metric,strong{overflow-wrap:anywhere}a{color:inherit}.app{max-width:1320px;margin:auto;padding:24px 22px 80px}.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0 18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f5f1e8b8}.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#3d4654}.bulb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8d0,var(--amber) 48%,#e29d1a);box-shadow:0 0 34px #f4b942bf}.routes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.routes a{color:#424b57;text-decoration:none;border:1px solid var(--line);background:#ffffff9e;border-radius:999px;padding:9px 12px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}.routes a.active{background:var(--navy);color:#fff;border-color:var(--navy)}.hero,.panel{background:var(--panel);border:1px solid var(--line);border-radius:40px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px;min-width:0}.inner{padding:54px}.split{display:grid;grid-template-columns:1.04fr .96fr;min-height:680px;min-width:0}.split>*{min-width:0}.split>.inner{display:flex;flex-direction:column;justify-content:center}.dark{background:var(--navy);color:#fff;border-color:#ffffff1f}.dark p,.dark .muted{color:#ffffffb8}.visual{background:#101724;color:#fff;padding:48px;position:relative;overflow:hidden}.visual:before{content:"";position:absolute;right:-120px;top:-120px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,209,102,.45),transparent 68%)}.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:22px}.dark .kicker,.visual .kicker{color:var(--amber)}h1{font-size:clamp(52px,7vw,100px);line-height:.9;letter-spacing:-.075em;margin:0 0 28px}h2{font-size:clamp(36px,5vw,70px);line-height:.92;letter-spacing:-.065em;margin:0 0 24px}h3{font-size:25px;line-height:1.05;letter-spacing:-.035em;margin:0 0 12px}p{font-size:18px;color:#414956;max-width:780px;margin:0 0 20px}.large{font-size:26px;line-height:1.24;color:#343b46}.quote{font-size:clamp(30px,4.5vw,62px);line-height:.98;letter-spacing:-.06em;margin:0;color:inherit}.grid{display:grid;gap:16px;min-width:0}.grid>*{min-width:0}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:#ffffffbd;border:1px solid var(--line);border-radius:28px;padding:24px;min-width:0}.dark .card,.visual .card{background:#ffffff14;border-color:#ffffff24}.tag{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;background:#ffffff80}.dark .tag,.visual .tag{border-color:#ffffff2e;color:#ffffffa6;background:#ffffff0f}.metric{font-size:58px;line-height:.9;letter-spacing:-.07em;margin-bottom:12px}.metric small{display:block;font-size:13px;letter-spacing:0;color:var(--muted);font-family:var(--mono);margin-top:12px}.dark .metric small{color:#ffffff94}.table-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--line);border-radius:26px;background:var(--paper)}table{width:100%;min-width:720px;border-collapse:collapse;background:var(--paper);font-size:15px}th,td{text-align:left;padding:15px;border-bottom:1px solid var(--line);vertical-align:top}th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:#f2eddf}tr:last-child td{border-bottom:0}.flow{display:grid;gap:14px;margin-top:26px}.node{border:1px solid rgba(255,255,255,.15);background:#ffffff13;border-radius:22px;padding:18px}.node small{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#ffffff8c;font-size:11px;margin-bottom:8px}.arrow{text-align:center;color:var(--amber);font-family:var(--mono)}.pillrow{display:flex;gap:10px;flex-wrap:wrap}.pill{border:1px solid var(--line);background:#ffffff8c;padding:9px 12px;border-radius:999px;font-family:var(--mono);font-size:12px;color:#4b5563}.dark .pill{border-color:#ffffff29;background:#ffffff12;color:#ffffffbd}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}.sw{height:84px;border-radius:18px;border:1px solid rgba(255,255,255,.14)}.sw:nth-child(1){background:#111418}.sw:nth-child(2){background:#172033}.sw:nth-child(3){background:#ffd166}.sw:nth-child(4){background:#3f66ff}.sw:nth-child(5){background:#f5f1e8}.caption{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.cta{background:linear-gradient(135deg,#111827,#172033);color:#fff}.small{font-size:14px;color:var(--muted)}.cta .small{color:#ffffff9e}.content :where(ul,ol){font-size:18px;color:#414956;max-width:880px}.content li{margin:.4rem 0}.content blockquote{border-left:4px solid var(--amber);margin:24px 0;padding:12px 0 12px 20px;color:#343b46;background:#ffffff61;border-radius:0 18px 18px 0}.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.meta span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#fff9;color:#4b5563}.source-list{display:grid;gap:12px}.source-list a{color:var(--blue);word-break:break-word}.badge{font-family:var(--mono);font-size:11px;border-radius:999px;padding:5px 8px;background:#eef2ff;color:#3348b5;text-transform:uppercase;letter-spacing:.04em}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top{background:#f5f1e8f5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{font-size:clamp(38px,7vw,58px)}}@media(max-width:900px){.top{position:relative;display:block}.routes{justify-content:flex-start;margin-top:12px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch}.split,.g2,.g3,.g4{grid-template-columns:1fr}.inner,.visual{padding:30px}.split{min-height:auto}table{font-size:13px}th,td{padding:11px}}@media(max-width:640px){.app{padding:14px 12px 48px}.hero,.panel{border-radius:26px;margin-bottom:16px}.inner,.visual{padding:22px}.brand{font-size:10px;line-height:1.3}.routes a{font-size:10px;padding:8px 10px}h1{font-size:clamp(40px,13vw,58px);letter-spacing:-.055em;line-height:.96}h2{font-size:clamp(32px,10vw,44px);letter-spacing:-.045em;line-height:.98}h3{font-size:21px}.large{font-size:20px}p,.content :where(ul,ol){font-size:16px}.quote{font-size:clamp(28px,9vw,40px);line-height:1.05}.metric{font-size:42px}.card{padding:18px;border-radius:22px}.tag{font-size:10px}.pillrow{gap:7px}.pill{font-size:10px;padding:8px 10px}.sw{height:58px}.visual:before{width:260px;height:260px;right:-100px;top:-100px}.node{padding:15px;border-radius:18px}}@media(max-width:380px){.app{padding-left:10px;padding-right:10px}.inner,.visual{padding:18px}.routes a,.brand{font-size:9px}.bulb{width:15px;height:15px}h1{font-size:38px}h2{font-size:30px}}@media print{body{background:#fff}.top{position:relative;display:none}.hero,.panel{box-shadow:none;border-color:#ccc;page-break-inside:avoid}.dark,.cta,.visual{background:#fff!important;color:#111!important}.dark p,.visual p,.cta p{color:#333!important}}

/* ---------------------------------------
   Final responsive layout + table fix
   Fixed: 2026-05-28
--------------------------------------- */

/* Safer page gutters and top breathing room */
.app {
  width: min(100% - clamp(24px, 4vw, 64px), 1320px);
  max-width: 1320px;
  margin-inline: auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
  padding-left: 0;
  padding-right: 0;
}

/* Keep major editorial panels spaced and contained */
.hero,
.panel {
  margin-bottom: clamp(28px, 5vw, 56px);
  max-width: 100%;
  min-width: 0;
}

/* Balanced internal spacing */
.inner,
.visual {
  padding: clamp(32px, 5vw, 72px);
  min-width: 0;
}

/* Prevent grid and split children from forcing horizontal overflow */
.split,
.grid,
.card,
.content,
.inner,
.visual {
  min-width: 0;
  max-width: 100%;
}

/* Allow unwrapped markdown tables to scroll without breaking table structure */
.content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Proper table wrapper pattern */
.table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
}

/* Keep table semantics intact. Do not use display:block on table. */
table,
.content table,
.table-wrap table {
  display: table;
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--paper);
}

/* If the table is inside .table-wrap, the wrapper owns the border */
.table-wrap table {
  border: 0;
}

/* If a markdown table is not wrapped, keep its own border */
.content table:not(.table-wrap table) {
  border: 1px solid var(--line);
  border-radius: 26px;
}

/* Stable table sections */
thead,
tbody,
tr,
.content thead,
.content tbody,
.content tr {
  width: auto;
}

/* More readable cells */
th,
td,
.content table th,
.content table td,
.table-wrap th,
.table-wrap td {
  vertical-align: top;
  text-align: left;
  padding: clamp(13px, 1.7vw, 22px);
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

/* Header cells */
th,
.content table th,
.table-wrap th {
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .07em;
}

/* Body cells */
td,
.content table td,
.table-wrap td {
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.45;
}

/* Navigation should scroll horizontally on smaller screens instead of wrapping into a tall block */
@media (max-width: 900px) {
  .app {
    width: min(100% - 28px, 1320px);
    padding-top: 48px;
  }

  .top {
    position: relative;
    display: block;
  }

  .routes {
    justify-content: flex-start;
    margin-top: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .routes a {
    flex: 0 0 auto;
  }

  .split,
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }

  .split {
    min-height: auto;
  }

  .inner,
  .visual {
    padding: 32px;
  }

  table,
  .content table,
  .table-wrap table {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  .app {
    width: min(100% - 24px, 1320px);
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .hero,
  .panel {
    border-radius: 24px;
    margin-bottom: 20px;
  }

  .inner,
  .visual {
    padding: 24px;
  }

  .table-wrap {
    border-radius: 20px;
  }

  table,
  .content table,
  .table-wrap table {
    min-width: 720px;
  }

  th,
  .content table th,
  .table-wrap th {
    font-size: 10px;
    letter-spacing: .06em;
  }

  td,
  .content table td,
  .table-wrap td {
    font-size: 14px;
    padding: 14px;
  }
}

@media (max-width: 380px) {
  .app {
    width: min(100% - 20px, 1320px);
  }

  .inner,
  .visual {
    padding: 20px;
  }

  table,
  .content table,
  .table-wrap table {
    min-width: 680px;
  }
}