/* =====================================================================
 * docs.css, Document format shared styles
 * Used by all inner pages (about, guides, verticals, product pages)
 * Matches the strategy.html document aesthetic.
 * ===================================================================== */

:root {
  --bg:          #FAFAF9;
  --bg-2:        #F4F4F2;
  --bg-deep:     #EFEFEC;
  --surface:     #FFFFFF;
  --dark:        #0A0A0A;
  --dark-2:      #141414;
  --ink:         #0A0A0A;
  --ink-2:       #262626;
  --muted:       #525252;
  --mute-2:      #737373;
  --mute-3:      #A3A3A3;
  --on-dark:     #FAFAF9;
  --on-dark-mute:#A3A3A3;
  --line:        #E5E5E5;
  --line-2:      #D4D4D4;
  --line-dark:   #262626;
  --accent:      #0E3D2E;
  --accent-2:    #155E47;
  --accent-3:    #E4EEEA;
  --accent-soft: #F1F6F3;
  --accent-on-dark: #2E7D5B; /* on-dark tint of #0E3D2E, single sanctioned accent for dark surfaces (replaces banned #5BA88C) */
  --low:         #15803D;
  --low-soft:    #F0FDF4;
  --low-tint:    #DCFCE7;
  --med:         #B45309;
  --med-soft:    #FFFBEB;
  --high:        #B91C1C;
  --high-soft:   #FEF2F2;
  --info:        #1D4ED8;
  --info-soft:   #EFF6FF;
  --radius:      6px;
  --radius-lg:   10px;
  --shadow-sm:   0 1px 0 rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.06);
  --shadow-md:   0 1px 0 rgba(10,10,10,.04), 0 12px 24px -10px rgba(10,10,10,.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; padding: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.65;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.mono { font-family: "Geist", sans-serif; }
code { font-family: "Geist", sans-serif; font-size: 0.92em; background: var(--bg-2); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.wrap        { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 800px;  margin: 0 auto; padding: 0 40px; }
@media (max-width: 680px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
}

/* ── Brand mark ── */
.brand {
  display: inline-flex; align-items: baseline; gap: 0;
  font-size: 20px; font-weight: 600; letter-spacing: -0.018em;
  color: var(--on-dark); line-height: 1; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-v {
  height: 26px; width: auto;
  color: inherit;
  margin-right: -1px;
  transform: translateY(3px);
  flex-shrink: 0;
}

/* ── Cover ── */
.cover {
  background: var(--dark);
  padding: 64px 0 60px;
  position: relative; overflow: hidden;
}
.cover::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(14,61,46,.32), transparent 65%);
  pointer-events: none;
}
.cover-inner { position: relative; z-index: 1; }
.cover-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 56px;
}
.cover-back {
  font-family: "Geist", sans-serif; font-size: 11px;
  color: var(--on-dark-mute); letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.cover-back:hover { color: var(--on-dark); text-decoration: none; }
.cover-doc-type {
  font-family: "Geist", sans-serif; font-size: 10px;
  color: var(--on-dark-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.cover-label {
  font-family: "Geist", sans-serif; font-size: 11px;
  color: var(--accent-on-dark); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 16px;
  display: block;
}
.cover-h1 {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 700;
  color: var(--on-dark); letter-spacing: -0.028em; line-height: 1.04;
  margin: 0 0 18px; max-width: 24ch;
}
.cover-sub {
  font-size: 17px; color: var(--on-dark-mute); max-width: 58ch;
  line-height: 1.65; margin: 0; font-weight: 300;
}
.cover-meta {
  margin-top: 48px; display: flex; gap: 40px;
  padding-top: 22px; border-top: 1px solid var(--line-dark);
  flex-wrap: wrap;
}
.cover-meta-item {
  font-family: "Geist", sans-serif; font-size: 10px;
  color: var(--on-dark-mute); letter-spacing: 0.08em; text-transform: uppercase;
}
.cover-meta-item span { display: block; color: var(--on-dark); margin-top: 4px; font-size: 12px; }

/* ── Sections ── */
.section          { padding: 64px 0; border-bottom: 1px solid var(--line); }
.section-light    { background: var(--bg-2); }
.section-dark     { background: var(--dark); color: var(--on-dark); border-bottom: none; }
.section:last-of-type { border-bottom: none; }

.eyebrow {
  display: inline-block; font-family: "Geist", sans-serif;
  font-size: 10.5px; color: var(--mute-2);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 14px;
}
.section-dark .eyebrow { color: var(--accent-on-dark); }

.section-h2 {
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 700;
  letter-spacing: -0.024em; line-height: 1.06; margin: 0 0 12px;
}
.section-h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.012em;
  line-height: 1.15; margin: 0 0 8px; color: var(--ink);
}
.section-lead {
  font-size: 16px; color: var(--muted); line-height: 1.65;
  max-width: 64ch; margin: 0 0 36px;
}
.section-dark .section-h2 { color: var(--on-dark); }
.section-dark .section-lead { color: var(--on-dark-mute); }

.body-p { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; }
.body-p:last-child { margin-bottom: 0; }

/* ── Two columns ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .three-col { grid-template-columns: 1fr; } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  text-decoration: none; white-space: nowrap; font-family: "Geist", sans-serif;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover  { background: var(--accent); border-color: var(--accent); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--surface); border-color: var(--ink-2); color: var(--ink); }
.btn-ghost  { background: rgba(255,255,255,.08); color: var(--on-dark); border-color: rgba(255,255,255,.16); }
.btn-ghost:hover  { background: rgba(255,255,255,.14); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-large  { padding: 13px 24px; font-size: 15px; }
.btn .arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Callout / note ── */
.callout {
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0;
}
.callout p { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.callout-label { font-family: "Geist", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display: block; }
.callout-warn  { border-left-color: var(--high); background: var(--high-soft); }
.callout-warn  p { color: #7F1D1D; }
.callout-warn  .callout-label { color: var(--high); }
.callout-amber { border-left-color: var(--med); background: var(--med-soft); }
.callout-amber p { color: #7C2D12; }
.callout-amber .callout-label { color: var(--med); }

/* ── Card ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.card-body { padding: 24px; }
.card-label { font-family: "Geist", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 8px; display: block; }
.card-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.012em; }
.card-desc  { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── List ── */
.doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-list li { font-size: 15px; color: var(--ink-2); padding-left: 20px; position: relative; line-height: 1.55; }
.doc-list li::before { content: '-'; position: absolute; left: 0; color: var(--mute-3); font-family: "Geist", sans-serif; }

/* ── Table ── */
.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  font-size: 13.5px; margin: 0;
}
.data-table th {
  font-family: "Geist", sans-serif; font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute-2); font-weight: 500; text-align: left;
  padding: 10px 18px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 13px 18px; border-bottom: 1px solid var(--bg-deep); vertical-align: top; line-height: 1.5; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-2); }

/* ── Badge / tag ── */
.badge {
  font-family: "Geist", sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  display: inline-block;
}
.badge-green  { color: var(--low); }
.badge-amber  { color: var(--med); }
.badge-red    { color: var(--high); }
.badge-info   { color: var(--ink-2); }
.badge-dark   { color: var(--ink); }
.badge-accent { color: var(--accent); }
.badge-muted  { color: var(--mute-2); }

/* ── Stats row ── */
.stats-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  background: var(--line); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-cell { background: var(--surface); padding: 26px 24px; }
.stat-num {
  font-family: "Geist", sans-serif; font-size: 36px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px;
}
.stat-num.accent { color: var(--accent); }
.stat-num.red    { color: var(--high); }
.stat-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ── Article card ── */
.article-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; }
.article-card:last-child { margin-bottom: 0; }
.article-header { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.article-ref { font-family: "Geist", sans-serif; font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-3); border: 1px solid rgba(14,61,46,.15); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.article-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.article-body { padding: 14px 18px; font-size: 14px; color: var(--ink-2); line-height: 1.65; }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 84px 1fr; column-gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: none; }
.t-badge { font-family: "Geist", sans-serif; font-size: 10.5px; font-weight: 600; color: #fff; padding: 3px 10px; border-radius: 4px; white-space: nowrap; justify-self: start; margin-top: 2px; }
.t-badge.past    { background: var(--mute-2); }
.t-badge.active  { background: var(--accent); }
.t-badge.future  { background: var(--ink); }
.t-badge.delayed { background: var(--med); }
.t-text  { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.t-text strong { color: var(--ink); }

/* ── Penalty box ── */
.penalty-box { background: var(--high-soft); border: 1px solid #FECACA; border-radius: var(--radius-lg); padding: 22px 26px; }
.penalty-num { font-family: "Geist", sans-serif; font-size: 32px; font-weight: 700; color: var(--high); letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1; }
.penalty-desc { font-size: 13.5px; color: #7F1D1D; line-height: 1.55; }
.penalty-box.amber { background: var(--med-soft); border-color: #FDE68A; }
.penalty-box.amber .penalty-num { color: var(--med); }
.penalty-box.amber .penalty-desc { color: #7C2D12; }

/* ── Feature items (no icon) ── */
.feature-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feature-item:last-child { border-bottom: none; }
.feature-num { font-family: "Geist", sans-serif; font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0; width: 20px; margin-top: 3px; }
.feature-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.feature-desc  { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ── Table of contents ── */
.toc { position: sticky; top: 32px; }
.toc-label { font-family: "Geist", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 12px; display: block; }
.toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-list a { font-size: 13.5px; color: var(--muted); text-decoration: none; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); display: block; transition: color .15s, border-color .15s; }
.toc-list a:hover { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }

/* ── Guide layout ── */
.guide-layout { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } .toc { position: static; } }

/* ── Footer ── */
.doc-footer { padding: 32px 0; border-top: 1px solid var(--line); }
.doc-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.doc-footer-copy { font-size: 12px; color: var(--mute-2); }
.doc-footer-copy a { color: var(--mute-2); }
.doc-footer-copy a:hover { color: var(--ink); text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .cover-meta { gap: 24px; }
}