/* =================================================================
   YUJ V3 — Professional Document Design System
   Inspired by Stripe / Linear / a16z / WSJ
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ----- 1. Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25em; }
li { margin: 0.25em 0; }

/* ----- 2. Design Tokens ----- */
:root {
  /* Color · Ink (text) — Adjusted for higher contrast (WCAG AAA on white) */
  --ink-900: #0a1a2f;   /* 主标题 · 比之前更深 */
  --ink-800: #14233b;   /* 副标题 */
  --ink-700: #1a202c;   /* 正文（核心） · contrast ratio 16:1 on white */
  --ink-600: #2a3142;   /* 次要正文 · 11:1 on white */
  --ink-500: #4a5260;   /* 标签/eyebrow · 8:1 on white */
  --ink-400: #6b7280;   /* 注释 · 5.5:1（min AA）*/
  --ink-300: #9ca3af;   /* 弱化文字 */
  --ink-200: #d1d5db;   /* 边框 */
  --ink-100: #e5e7eb;   /* 边框/分隔 */
  --ink-50:  #f8fafc;   /* 软背景 */

  /* Color · Accent */
  --accent:        #635bff;   /* 紫，主强调（关键数字 / CTA） */
  --accent-soft:   #f5f4ff;
  --gold:          #b69b4c;
  --gold-soft:     #faf6e8;
  --success:       #00875a;
  --success-soft:  #e3fcef;
  --danger:        #d9444f;
  --danger-soft:   #ffeaea;
  --warning:       #c47100;
  --warning-soft:  #fff4d6;

  /* Surface */
  --surface:       #ffffff;
  --surface-soft:  var(--ink-50);
  --surface-dark:  var(--ink-900);

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing (8px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(10,37,64,0.06);
  --sh-2: 0 4px 8px rgba(10,37,64,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --sh-3: 0 8px 24px rgba(10,37,64,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --sh-cover: 0 25px 50px -12px rgba(10,37,64,0.25);
}

/* ----- 3. Body ----- */
body {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-700);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-weight: 400;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-9);
}

/* ----- 4. Cover Page ----- */
.cover {
  background: linear-gradient(160deg, #0a2540 0%, #1a365d 70%, #2d4a7c 100%);
  color: #fff;
  margin: var(--sp-5) calc(-1 * var(--sp-5)) var(--sp-8);
  padding: var(--sp-9) var(--sp-8);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 900px) {
  .cover {
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--r-xl);
    padding: var(--sp-10) var(--sp-9);
  }
}

/* Decorative grid bg */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.cover::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at center, rgba(99,91,255,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.cover-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.cover-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.cover-brand-mark {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.cover-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  text-align: right;
  line-height: 1.85;
  font-weight: 500;
}
.cover-main {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: var(--sp-8) 0;
}
.cover-doctype {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent);
  background: rgba(99,91,255,0.12);
  border: 1px solid rgba(99,91,255,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: var(--sp-5);
  text-transform: uppercase;
}
.cover-title {
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  color: #fff;
}
.cover-title em {
  font-style: normal;
  color: var(--accent);
  background: linear-gradient(90deg, #8d87ff 0%, #635bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cover-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
  max-width: 680px;
}
.cover-subtitle strong { color: #fff; font-weight: 700; }
.cover-subtitle em {
  font-style: italic;
  color: #a5a0ff;
  font-weight: 500;
  -webkit-text-fill-color: #a5a0ff;
}

/* Cover “brief stack” — 主句 + 分块要点（长文案封面） */
.cover .cover-subtitle-stack {
  max-width: 720px;
  margin-bottom: var(--sp-5);
}
.cover .cover-subtitle-stack .cover-brief-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 var(--sp-3) 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(99,91,255,0.35);
}
.cover .cover-subtitle-stack .cover-brief-kicker strong {
  color: var(--accent);
  font-weight: 700;
}
.cover .cover-subtitle-stack .cover-brief-lead {
  margin: 0 0 var(--sp-5) 0;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 400;
  line-height: 1.76;
  color: rgba(255,255,255,0.95);
}
.cover .cover-subtitle-stack .cover-brief-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4) 0;
}
@media (max-width: 680px) {
  .cover .cover-subtitle-stack .cover-brief-points {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}
.cover .cover-subtitle-stack .cover-brief-point {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  font-size: 14.75px;
  line-height: 1.76;
  color: rgba(255,255,255,0.9);
}
.cover .cover-subtitle-stack .cover-brief-point .cbf-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(165,160,255,0.95);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cover .cover-subtitle-stack .cover-brief-foot {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  font-size: 14.75px;
  line-height: 1.74;
  color: rgba(255,255,255,0.82);
  background: rgba(0,0,0,0.12);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.08);
}

.cover .cover-subtitle-stack strong {
  color: #fff;
  font-weight: 700;
}

.cover-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 16px;
  margin-top: var(--sp-4);
  font-style: italic;
  font-weight: 500;
}
.cover-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--sp-4);
  line-height: 1.7;
  font-weight: 500;
}
.cover-bottom strong {
  color: #fff;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* ----- 5. Section ----- */
section.sec {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-7);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--ink-100);
  box-shadow: var(--sh-1);
}
@media (max-width: 700px) {
  section.sec { padding: var(--sp-5) var(--sp-4); }
}

/* Section header — minimalist with monospace number */
.sec-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
}
.sec-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 1px;
}
.sec-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sec-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Typography utilities */
h3.h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--sp-5) 0 var(--sp-3);
  letter-spacing: -0.005em;
}
h3.h3::before {
  content: "—  ";
  color: var(--accent);
  font-weight: 500;
}
p { margin-bottom: var(--sp-3); color: var(--ink-700); }
.lead { font-size: 17px; line-height: 1.65; color: var(--ink-700); }
strong { color: var(--ink-900); font-weight: 700; }
em { font-style: italic; color: var(--ink-600); }

/* 深底容器内 strong / em 保护：避免被全局深色文本覆盖 */
.cover strong, .banner strong { color: inherit; }
.cover-tagline em { color: inherit; }

/* Tabular numbers everywhere */
.num, .num-hl, td .num, table td b {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  font-weight: 600;
}
.num-hl { color: var(--ink-900); }
.num-accent { color: var(--accent); }
.num-gold { color: var(--gold); }
.num-success { color: var(--success); }
.num-danger { color: var(--danger); }

/* ----- 6. Tables ----- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: 13.5px;
}
thead {
  border-bottom: 2px solid var(--ink-900);
}
th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink-900);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
  line-height: 1.65;
  color: var(--ink-700);
  font-size: 14px;
}
tbody tr:last-child td { border-bottom: 1px solid var(--ink-900); }
tbody tr:hover { background: var(--ink-50); }
.t-total td { background: var(--ink-50); font-weight: 700; color: var(--ink-900); }
.t-total td .num-hl { color: var(--accent); }

/* ----- 7. Callout / Quote ----- */
.callout {
  background: var(--surface-soft);
  border-left: 4px solid var(--ink-900);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-700);
}
.callout.accent { border-left-color: var(--accent); background: var(--accent-soft); }
.callout.gold   { border-left-color: var(--gold); background: var(--gold-soft); }
.callout.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.callout.success { border-left-color: var(--success); background: var(--success-soft); }
.callout strong { color: var(--ink-900); font-weight: 700; }
.callout .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--ink-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ----- 8. KPI Strip ----- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  margin: var(--sp-5) 0;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.kpi-item {
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--ink-100);
}
.kpi-item:last-child { border-right: 0; }
.kpi-item .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--ink-600);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kpi-item .val {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi-item .val .unit {
  font-size: 14px;
  color: var(--ink-600);
  font-weight: 600;
  margin-left: 2px;
}
.kpi-item .desc {
  font-size: 13px;
  color: var(--ink-600);
  margin-top: 8px;
  line-height: 1.55;
  font-weight: 500;
}
@media (max-width: 700px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-item { border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
  .kpi-item:nth-child(even) { border-right: 0; }
}

/* ----- 9. Card grid ----- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-4) 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-4) 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; }
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* ----- 10. Card (universal) ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover { border-color: var(--ink-300); box-shadow: var(--sh-2); }
.card .card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--ink-600);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.card .card-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}
.card .card-body ul { font-size: 13.5px; line-height: 1.75; padding-left: 1.1em; }
.card .card-body li { margin: 3px 0; color: var(--ink-700); }
.card .card-footer {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--ink-200);
  font-size: 13px;
  color: var(--ink-600);
  font-weight: 500;
}

/* Card accent variants */
.card.accent { border-top: 3px solid var(--accent); }
.card.gold   { border-top: 3px solid var(--gold); }
.card.success { border-top: 3px solid var(--success); }
.card.danger { border-top: 3px solid var(--danger); }
.card.dark { background: var(--ink-900); color: #fff; border: 0; }
.card.dark .card-title { color: #fff; }
.card.dark .card-body { color: rgba(255,255,255,0.8); }
.card.dark .card-eyebrow { color: rgba(255,255,255,0.5); }

/* ----- 11. Category card (richer) ----- */
.cat {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  position: relative;
}
.cat .cat-num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-400);
  text-transform: uppercase;
}
.cat .cat-icon {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.02em;
}
.cat.gold .cat-icon { color: var(--gold); }
.cat.success .cat-icon { color: var(--success); }
.cat.danger .cat-icon { color: var(--danger); }
.cat .cat-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.cat .cat-tag {
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-100);
  font-weight: 500;
}
.cat-table { width: 100%; font-size: 13.5px; }
.cat-table tr td { padding: 7px 0; border-bottom: 1px dashed var(--ink-100); vertical-align: top; line-height: 1.65; font-size: 13.5px; }
.cat-table tr:last-child td { border-bottom: 0; }
.cat-table td:first-child {
  width: 28%;
  color: var(--ink-600);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-right: 8px;
}
.cat-table td:last-child { color: var(--ink-700); font-weight: 500; }
.cat-table td:last-child b { color: var(--ink-900); font-weight: 700; }
.cat-footer-note {
  margin-top: var(--sp-3);
  padding: 11px 13px;
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-700);
  border-left: 3px solid var(--accent);
  font-weight: 500;
  line-height: 1.6;
}
.cat-footer-note b { color: var(--ink-900); font-weight: 700; }
.cat.gold .cat-footer-note { border-left-color: var(--gold); }
.cat.success .cat-footer-note { border-left-color: var(--success); }

/* ----- 12. Image frame ----- */
.fig {
  margin: var(--sp-5) 0;
  background: var(--surface-soft);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
}
.fig img { max-width: 100%; border-radius: var(--r-sm); }
.fig-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-500);
  margin-top: var(--sp-3);
  text-transform: uppercase;
}

/* ----- 13. Timeline ----- */
.tl-row {
  display: grid;
  grid-template-columns: 110px 1fr 140px;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--ink-100);
}
.tl-row:last-child { border-bottom: 0; }
.tl-day {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  background: var(--accent-soft);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  text-align: center;
}
.tl-action { font-size: 14.5px; color: var(--ink-700); line-height: 1.6; }
.tl-action strong { color: var(--ink-900); font-weight: 700; }
.tl-owner {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-600);
  background: var(--ink-50);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  text-align: center;
  letter-spacing: 0.5px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .tl-row { grid-template-columns: 1fr; gap: 6px; }
  .tl-day, .tl-owner { justify-self: start; }
}

/* ----- 14. Flow diagram (CSS-built) ----- */
.flow {
  background: var(--surface-soft);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  margin: var(--sp-5) 0;
}
.flow-node {
  background: var(--ink-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
.flow-arrow {
  text-align: center;
  color: var(--ink-300);
  font-family: var(--font-mono);
  margin: 8px 0;
  font-size: 14px;
}
.flow-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
@media (max-width: 700px) { .flow-lines { grid-template-columns: 1fr; } }
.flow-line {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.flow-line.gold { border-top-color: var(--gold); }
.flow-line.success { border-top-color: var(--success); }
.flow-line .ln-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.flow-line .ln-body { font-size: 13.5px; color: var(--ink-700); line-height: 1.6; font-weight: 500; }
.flow-line .ln-tag {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-600);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ----- 15. Compare panel (A vs B) ----- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.compare > div {
  border-radius: var(--r-md);
  padding: var(--sp-5);
  border: 1px solid;
}
.compare .pick {
  background: var(--success-soft);
  border-color: var(--success);
}
.compare .skip {
  background: #fefcfa;
  border-color: var(--ink-200);
}
.compare h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.compare .pick h4 { color: var(--success); }
.compare .skip h4 { color: var(--ink-600); }
.compare h4 .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.compare .pick .badge { background: var(--success); color: #fff; }
.compare .skip .badge { background: var(--ink-200); color: var(--ink-600); }
.compare ul {
  font-size: 13.5px;
  line-height: 1.85;
  list-style: none;
  padding: 0;
}
.compare li {
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.compare li:last-child { border-bottom: 0; }
.compare li b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
}

/* ----- 16. Equity ring ----- */
.eq-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.eq-item {
  flex: 1 1 140px;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface);
  position: relative;
}
.eq-item .pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 32px;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.eq-item .who {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 8px 0 4px;
}
.eq-item .role {
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.55;
  font-weight: 500;
}
.eq-item .bar {
  margin-top: 12px;
  height: 4px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
}
.eq-item .bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.eq-item.gold .bar-fill { background: var(--gold); }
.eq-item.success .bar-fill { background: var(--success); }
.eq-item.danger .bar-fill { background: var(--danger); }
.eq-item.ink .bar-fill { background: var(--ink-700); }
.eq-item.gray .bar-fill { background: var(--ink-400); }

/* ----- 17. Achievement chips ----- */
.ach {
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.ach .ach-num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 56px;
}
.ach .ach-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}
.ach .ach-text b { color: #fff; font-weight: 600; }

/* ----- 18. Year roadmap card ----- */
.yr {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  position: relative;
  border-top: 3px solid var(--ink-300);
}
.yr.y1 { border-top-color: #4dabf7; }
.yr.y2 { border-top-color: #20c997; }
.yr.y3 { border-top-color: #ffb84d; }
.yr.y4 { border-top-color: #ff6b35; }
.yr.y5 { border-top-color: var(--danger); }
.yr-y {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-600);
  margin-bottom: 4px;
}
.yr-stage {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.005em;
}
.yr-body {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.75;
}
.yr-body ul { padding-left: 1.1em; margin: 0; }
.yr-body li { margin: 3px 0; color: var(--ink-700); }
.yr-kpi {
  margin-top: var(--sp-3);
  padding: 9px 11px;
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
  line-height: 1.65;
  font-weight: 500;
}
.yr-kpi b { color: var(--ink-900); font-weight: 700; }

/* ----- 19. Tagline (centered statement) ----- */
.tagline {
  background: var(--ink-900);
  color: #fff;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  text-align: center;
  margin: var(--sp-4) 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.6;
}
.tagline em {
  color: var(--gold);
  font-style: normal;
  font-family: var(--font-mono);
}
.tagline.accent { background: var(--accent); }
.tagline.gold { background: var(--gold); color: #1a1a1a; }
.tagline.gold em { color: var(--ink-900); }

/* ----- 20. Banner ----- */
.banner {
  background: linear-gradient(135deg, #0a2540 0%, #1a365d 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-7);
  margin: var(--sp-6) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99,91,255,0.2) 0%, transparent 70%);
}
.banner .b-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  position: relative;
}
.banner .b-text {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.95);
  font-weight: 400;
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.banner .b-text strong {
  color: var(--gold);
  font-weight: 700;
}
.banner .b-text em { font-style: italic; color: #ffd778; font-weight: 500; }

/* ----- 21. Footer ----- */
.doc-footer {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--ink-600);
  padding: var(--sp-6) 0 var(--sp-4);
  border-top: 1px solid var(--ink-100);
  margin-top: var(--sp-7);
  line-height: 1.8;
}
.doc-footer strong { color: var(--ink-800); font-weight: 700; }

/* ----- 22. Site / doc chrome (sticky top) ----- */
.back-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(92deg, #0a1a2f 0%, #14233b 72%, #1a365d 100%);
  color: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  box-shadow: 0 4px 24px rgba(10,26,47,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.back-bar-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  flex-wrap: wrap;
  min-height: 48px;
}
.back-bar.has-doc-tabs .back-bar-top {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.back-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.back-bar a.back-btn,
.back-bar button.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-sm);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.back-bar button.back-btn {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.back-bar a.back-btn:hover,
.back-bar button.back-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(-2px);
}
.back-bar button.back-btn.back-prev {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.back-bar button.back-btn.back-prev:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.back-bar a.back-btn .arrow,
.back-bar button.back-btn .arrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.back-bar .breadcrumb {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.back-bar .breadcrumb .bc-current {
  color: var(--accent);
  font-weight: 700;
}
.back-bar .breadcrumb .bc-sep {
  margin: 0 8px;
  color: rgba(255,255,255,0.3);
}
.back-bar .bc-tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(99,91,255,0.18);
  border: 1px solid rgba(99,91,255,0.35);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #a5a0ff;
}

@media (max-width: 700px) {
  .back-bar-top { padding: 8px 12px; gap: 10px; }
  .back-bar a.back-btn,
  .back-bar button.back-btn { padding: 6px 11px 6px 9px; font-size: 12px; }
  .back-bar .breadcrumb { font-size: 10px; letter-spacing: 0.8px; }
  .back-bar .breadcrumb .bc-sep { margin: 0 5px; }
}

/* 22b. Main doc chrome */
.back-bar.is-main {
  background: linear-gradient(92deg, #0a1828 0%, #14233b 100%);
}
.back-bar .page-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: rgba(99,91,255,0.18);
  border: 1px solid rgba(99,91,255,0.4);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #b8b3ff;
  text-transform: uppercase;
  white-space: nowrap;
}
.back-bar .page-mark .pm-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}
/* ----- 22d. Top document tabs (replaces floating quick-nav) ----- */
.doc-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 8px 16px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.doc-tabs::-webkit-scrollbar {
  height: 5px;
}
.doc-tabs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 3px;
}
.doc-tabs a.tab {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 8px 14px 9px;
  min-height: 48px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-family: var(--font-display);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.doc-tabs a.tab:hover:not(.is-current) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.doc-tabs a.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.doc-tabs a.tab .tab-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.45);
}
.doc-tabs a.tab .tab-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.doc-tabs a.tab.is-current {
  background: rgba(99,91,255,0.28);
  border-color: rgba(165,160,255,0.65);
  color: #fff;
  cursor: default;
}
.doc-tabs a.tab.is-current .tab-num {
  color: var(--accent);
}
.doc-tabs a.tab.is-current:hover {
  transform: none;
}

@media (max-width: 520px) {
  .doc-tabs {
    gap: 6px;
    padding: 7px 12px 9px;
  }
  .doc-tabs a.tab {
    padding: 7px 12px;
    min-height: 44px;
  }
  .doc-tabs a.tab .tab-name { font-size: 12px; }
}

/* ----- 22c. Quick-Access Portal (link table) ----- */
.portal {
  margin: var(--sp-5) 0;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.portal-header {
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, #0a1a2f 0%, #14233b 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.portal-header .ph-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.portal-header .ph-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.portal-header .ph-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
}
.portal-header .ph-count strong {
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}

.portal-group {
  border-bottom: 1px solid var(--ink-100);
}
.portal-group:last-child { border-bottom: 0; }
.portal-group .pg-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--sp-5);
  background: var(--ink-50);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-900);
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-100);
}
.portal-group .pg-label .pg-pill {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}
.portal-group .pg-label .pg-pill.gold { background: var(--gold); }
.portal-group .pg-label .pg-pill.success { background: var(--success); }
.portal-group .pg-label .pg-pill.danger { background: var(--danger); }
.portal-group .pg-label .pg-pill.ink { background: var(--ink-700); }

.portal-row {
  display: grid;
  grid-template-columns: 36px 1.6fr 1.1fr 1.4fr 110px;
  gap: var(--sp-3);
  align-items: center;
  padding: 12px var(--sp-5);
  border-bottom: 1px solid var(--ink-100);
  transition: background 0.12s ease;
}
.portal-row:last-child { border-bottom: 0; }
.portal-row:hover { background: var(--ink-50); }
.portal-row .pr-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-400);
  letter-spacing: 0.5px;
}
.portal-row .pr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.35;
}
.portal-row .pr-name .pr-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-600);
  margin-top: 2px;
  letter-spacing: 0;
}
.portal-row .pr-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.5px;
}
.portal-row .pr-type .pr-tag {
  display: inline-block;
  padding: 2px 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.portal-row .pr-type .pr-tag.gold { background: var(--gold-soft); color: var(--gold); }
.portal-row .pr-type .pr-tag.success { background: var(--success-soft); color: var(--success); }
.portal-row .pr-type .pr-tag.danger { background: var(--danger-soft); color: var(--danger); }
.portal-row .pr-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-600);
  word-break: break-all;
  font-weight: 500;
}
.portal-row .pr-visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--ink-900);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: var(--r-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.portal-row .pr-visit:hover {
  background: var(--accent);
  transform: translateX(2px);
}
.portal-row .pr-visit .pv-arrow {
  font-family: var(--font-mono);
  font-weight: 700;
}
.portal-row.is-star { background: linear-gradient(90deg, rgba(99,91,255,0.04) 0%, transparent 100%); }
.portal-row.is-star .pr-name { color: var(--accent); }

@media (max-width: 800px) {
  .portal-row {
    grid-template-columns: 28px 1fr 90px;
    grid-template-areas:
      "num name visit"
      ". type type"
      ". url url";
    gap: 6px;
  }
  .portal-row .pr-num { grid-area: num; }
  .portal-row .pr-name { grid-area: name; }
  .portal-row .pr-type { grid-area: type; }
  .portal-row .pr-url { grid-area: url; font-size: 11px; }
  .portal-row .pr-visit { grid-area: visit; padding: 6px 10px; }
}

/* ----- 23. Cross-Doc Navigation ----- */

/* 22.1 Bottom "Related Docs" card group (visible on both screen & print) */
.related-docs {
  margin: var(--sp-6) 0 var(--sp-4);
  padding: var(--sp-5);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
}
.related-docs .rd-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.related-docs .rd-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.005em;
}
.related-docs .rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-3);
}
.related-docs a.rd-card {
  display: block;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  position: relative;
}
.related-docs a.rd-card:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.related-docs a.rd-card.current {
  background: var(--accent-soft);
  border-color: var(--accent);
  cursor: default;
}
.related-docs a.rd-card.current:hover { transform: none; box-shadow: none; }
.related-docs .rd-doc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.related-docs .rd-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 6px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.related-docs .rd-desc {
  font-size: 12.5px;
  color: var(--ink-700);
  line-height: 1.55;
  font-weight: 500;
}
.related-docs .rd-arrow {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
}
.related-docs a.rd-card.current .rd-arrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 700;
}

/* ----- 23. Print ----- */
@media print {
  body { background: #fff; font-size: 10pt; }
  .container { max-width: 100%; padding: 0; }
  section.sec { box-shadow: none; border: 1px solid var(--ink-100); page-break-inside: avoid; margin-bottom: 12px; padding: 16px 20px; }
  .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; margin: 0; border-radius: 0; page-break-after: always; }
  .cover, .banner, .tagline, .ach { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-strip, .card, .cat, .compare > div, .flow-line, .yr, table, .eq-item { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sec-header { page-break-after: avoid; }
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .compare, .flow-lines, .eq-row { page-break-inside: avoid; }
  a { color: var(--ink-700); }
  .back-bar { display: none !important; }
  .related-docs { page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .related-docs a.rd-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 14mm 12mm; }
}