@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Bricolage+Grotesque:opsz,wght@12..96,300..700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* A×D · Hybrid — tokens.
   Ink + paper is the whole system.
   One accent (terracotta) with six authorized jobs. */
:root {
  /* paper & ink — inherited from D */
  --paper: #FBFAF7;
  --paper-2: #F2EEE2;
  --paper-3: #E8E2D0;
  --hairline: #DCD8CB;
  --rule: #B8B2A1;
  --mute: #76736B;
  --mute-2: #3A3832;
  --ink: #0B0B0A;

  /* THE accent — dialed terracotta.
     Softer than A's #F05A28. Passes 7:1 on paper. */
  --accent: #C85A32;
  --accent-ink: #8A3A1E;  /* for text on paper */
  --accent-wash: #F7E7DE; /* subtle wash, used sparingly */

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans:    'Inter', -apple-system, Helvetica, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

html, body { margin: 0; padding: 0; background: #000; color: var(--ink); }

section {
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  color: var(--ink);
}

/* ── Frame / chrome ─────────────────────────────────── */
.frame { position: absolute; inset: 0; padding: 80px 100px; display: flex; flex-direction: column; }
.chrome { position: absolute; top: 40px; left: 100px; right: 100px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 14px; color: var(--mute); letter-spacing: 0.04em; }
.chrome .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.chrome .brand-mark { width: 14px; height: 14px; position: relative; display: inline-block; }
.chrome .brand-mark::before, .chrome .brand-mark::after { content: ""; position: absolute; background: var(--accent); }
.chrome .brand-mark::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-0.75px); }
.chrome .brand-mark::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-0.75px); }
.chrome-foot { position: absolute; bottom: 40px; left: 100px; right: 100px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--mute); letter-spacing: 0.04em; }
.chrome-foot .ink-dot { color: var(--accent); }

.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.eyebrow-accent { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }

.header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; margin-top: 60px; margin-bottom: 32px; }
.slide-num { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; color: var(--mute); }
.slide-title { font-family: var(--font-display); font-size: 88px; font-weight: 400; line-height: 0.96; letter-spacing: -0.02em; margin: 0; color: var(--ink); max-width: 1400px; }
.slide-title em { font-style: italic; font-weight: 400; }
.slide-title .accent { color: var(--accent); font-style: italic; }
.body-lg { font-size: 32px; line-height: 1.4; color: var(--mute-2); max-width: 1400px; }
.body    { font-size: 24px; line-height: 1.5; color: var(--mute-2); max-width: 1400px; }

/* ── Cover ─────────────────────────────────────────── */
.cover { background: var(--paper); }
.cover .corner-ticks { position: absolute; inset: 80px; pointer-events: none; }
.cover .ct { position: absolute; width: 32px; height: 32px; }
.cover .ct::before, .cover .ct::after { content: ""; position: absolute; background: var(--ink); }
.cover .tl::before { top: 0; left: 0; width: 32px; height: 1px; }
.cover .tl::after  { top: 0; left: 0; width: 1px; height: 32px; }
.cover .tr { right: 0; }
.cover .tr::before { top: 0; right: 0; width: 32px; height: 1px; background: var(--accent); height: 2px; }
.cover .tr::after  { top: 0; right: 0; width: 1px; height: 32px; background: var(--accent); width: 2px;}
.cover .bl { bottom: 0; }
.cover .bl::before { bottom: 0; left: 0; width: 32px; height: 1px; }
.cover .bl::after  { bottom: 0; left: 0; width: 1px; height: 32px; }
.cover .br { bottom: 0; right: 0; }
.cover .br::before { bottom: 0; right: 0; width: 32px; height: 1px; }
.cover .br::after  { bottom: 0; right: 0; width: 1px; height: 32px; }
.cover .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11,11,10,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,10,.04) 1px, transparent 1px);
  background-size: 120px 120px; background-position: 60px 60px;
  pointer-events: none;
}
.cover h1 { font-family: var(--font-display); font-weight: 400; font-size: 280px; line-height: 0.88; letter-spacing: -0.035em; margin: 0; color: var(--ink); }
.cover h1 em { font-style: italic; font-weight: 400; }
.cover h1 .x { color: var(--accent); font-style: italic; font-weight: 400; }
.cover .subline { margin-top: 40px; max-width: 1100px; font-size: 28px; line-height: 1.45; color: var(--mute-2); }

/* ── Divider slides ─────────────────────────────── */
.divider h2 { font-family: var(--font-display); font-size: 180px; line-height: 0.95; font-weight: 400; letter-spacing: -0.03em; margin: 0; color: var(--ink); max-width: 1600px; }
.divider h2 em { font-style: italic; }
.divider h2 .accent { color: var(--accent); font-style: italic; }

/* ── Rules chart (where color earns / is forbidden) ── */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; flex: 1; min-height: 0; margin-top: 24px; }
.rules-col { display: flex; flex-direction: column; gap: 14px; }
.rules-col .h { display: flex; align-items: baseline; gap: 14px; border-top: 2.5px solid var(--ink); padding-top: 16px; }
.rules-col.earn .h { border-top-color: var(--accent); }
.rules-col .h-title { font-family: var(--font-display); font-size: 54px; letter-spacing: -0.02em; line-height: 1; font-style: italic; font-weight: 400; }
.rules-col.earn .h-title .accent { color: var(--accent); }
.rule-row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.rule-row .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); }
.rule-row .title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.rule-row .title .chip { display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 8px; transform: translateY(0px); }
.rule-row .sub { font-size: 14.5px; color: var(--mute-2); line-height: 1.5; margin-top: 4px; font-family: var(--font-sans); }

/* ── Principles ────────────────────────────────── */
.princ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; flex: 1; min-height: 0; }
.princ { border-top: 2px solid var(--ink); padding-top: 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.princ.accent-top { border-top-color: var(--accent); }
.princ .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); }
.princ .h { font-family: var(--font-display); font-size: 44px; line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
.princ .h em { font-style: italic; }
.princ .h .accent { color: var(--accent); font-style: italic; }
.princ p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--mute-2); }

/* ── Palette panel ─────────────────────────────── */
.tokens-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; flex: 1; min-height: 0; }
.tokens-col { display: flex; flex-direction: column; gap: 16px; border-top: 1.5px solid var(--ink); padding-top: 22px; min-width: 0;}
.tokens-col.accent-col { border-top-color: var(--accent); border-top-width: 2.5px; }
.tokens-col .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); text-transform: uppercase; }
.tokens-col.accent-col .k { color: var(--accent-ink); font-weight: 600;}
.swatch-row { display: grid; grid-template-columns: 120px 1fr 140px; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.swatch-row .sw { height: 48px; border: 1px solid var(--ink); }
.swatch-row .name { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.swatch-row .name .hint { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); letter-spacing: 0.06em; margin-top: 2px; text-transform: uppercase;}
.swatch-row .hex { font-family: var(--font-mono); font-size: 12px; color: var(--mute-2); letter-spacing: 0.04em; text-align: right; }

.accent-big { display: flex; flex-direction: column; gap: 18px; }
.accent-big .swatch { height: 200px; background: var(--accent); border: 1.5px solid var(--ink); position: relative; }
.accent-big .swatch::after { content: "TERRACOTTA · #C85A32"; position: absolute; right: 14px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--paper); }
.accent-big .meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.8; color: var(--mute-2); }
.accent-big .meta strong { color: var(--ink); font-weight: 600; }
.accent-big .budget-bar { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); margin-top: 4px;}
.accent-big .bar-wrap { flex: 1; height: 14px; background: var(--paper-2); border: 1px solid var(--hairline); position: relative; }
.accent-big .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; background: var(--accent);}
.accent-big .bar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }

/* ── Status system ────────────────────────────── */
.status-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; flex: 1; min-height: 0; }
.status-col { display: flex; flex-direction: column; gap: 20px; border-top: 1.5px solid var(--ink); padding-top: 24px;}
.status-col.accent-top { border-top: 2.5px solid var(--accent); }
.status-col .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); text-transform: uppercase; }
.status-col.accent-top .label { color: var(--accent-ink); font-weight: 600;}
.status-col .title { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.01em; line-height: 1.05; font-style: italic; }
.status-col.accent-top .title .accent { color: var(--accent); }
.status-col .demo { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.pill-d { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; padding: 4px 10px; border: 1px solid var(--ink); width: fit-content; }
.pill-d .mark { font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.pill-d.ok   { background: transparent; color: var(--ink); }
.pill-d.warn { background: transparent; color: var(--accent); border-color: var(--accent); border-width: 1.5px; font-weight: 600; }
.pill-d.warn .mark { color: var(--accent); }
.pill-d.bad  { background: var(--ink); color: var(--paper); }
.pill-d.queued { border-style: dashed; color: var(--mute); }

/* ── Composer ───────────────────────────────── */
.composer-hero { display: grid; grid-template-columns: 1.1fr 1fr; flex: 1; min-height: 0; border: 1px solid var(--hairline); background: var(--paper);}
.composer-hero > * { padding: 30px 36px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px;}
.composer-hero .c-left { border-right: 1px solid var(--hairline); }

.c-h { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 400; letter-spacing: -0.015em; }
.c-h em { font-style: italic; }
.c-h .accent { color: var(--accent); font-style: italic; }

.c-prompt { font-family: var(--font-mono); font-size: 13px; color: var(--ink); padding: 14px 18px; border-left: 3px solid var(--accent); line-height: 1.55; background: var(--paper-2); }

.c-steps { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.c-step { display: grid; grid-template-columns: 38px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.c-step.active { border-left: 3px solid var(--accent); padding-left: 12px; margin-left: -12px; padding-right: 12px; margin-right: -12px; background: var(--paper-2); }
.c-step.queued .c-step-title { color: var(--mute); font-weight: 500;}
.c-step-n { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.c-step.active .c-step-n { color: var(--accent-ink); font-weight: 600; }
.c-step-title { font-weight: 600; font-size: 15.5px; letter-spacing: -0.005em; }
.c-step-sub { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 3px; letter-spacing: 0.04em; }
.c-step.active .c-step-sub { color: var(--accent-ink); font-weight: 500; }
.c-step .tail-mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); letter-spacing: 0.14em; }

.c-side-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.c-side-h .r { color: var(--accent-ink); font-weight: 600; }
.ev-row { display: grid; grid-template-columns: 58px 1fr 88px 80px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); align-items: baseline;}
.ev-row .ev-id { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.02em;}
.ev-row .ev-name { font-size: 13.5px; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; }
.ev-row .ev-score { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.ev-row .ev-flag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-align: right; }
.ev-row .ev-flag.ok   { color: var(--mute); }
.ev-row .ev-flag.warn { color: var(--accent); font-weight: 600; }

.c-attest { margin-top: auto; padding: 20px 22px; border: 1.5px solid var(--ink); background: var(--paper-2); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; position: relative; }
.c-attest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.c-attest .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--mute); margin-bottom: 6px; }
.c-attest .name { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.01em; font-style: italic; line-height: 1.05; font-variation-settings: "SOFT" 30, "opsz" 36; }
.c-attest .meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.06em; margin-top: 8px; }
.c-seal { width: 84px; height: 84px; border: 2px solid var(--ink); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink); text-align: center; line-height: 1.3; background: var(--accent); color: var(--paper); border-color: var(--accent);}
.c-seal::before, .c-seal::after { content: ""; position: absolute; background: var(--accent); }
.c-seal::before { left: 50%; top: -6px; width: 1px; height: 12px; transform: translateX(-0.5px); }
.c-seal::after  { left: 50%; bottom: -6px; width: 1px; height: 12px; transform: translateX(-0.5px); }

.c-input { display: flex; align-items: stretch; border: 1px solid var(--hairline); margin-top: auto;}
.c-input .field { flex: 1; padding: 12px 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--mute); letter-spacing: 0.02em; display: flex; align-items: center; }
.c-input .btn { background: var(--accent); color: var(--paper); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; padding: 12px 22px; border: none; font-weight: 600;}

/* ── Dashboard / product shell ───────────────── */
.surface-canvas { flex: 1; min-height: 0; background: var(--paper); border: 1px solid var(--hairline); overflow: hidden; display: flex; flex-direction: column; }
.product-shell { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; }
.product-shell .sidebar { border-right: 1px solid var(--hairline); padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; font-family: var(--font-sans); }
.product-shell .sidebar .brand-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; padding-bottom: 18px; border-bottom: 1.5px solid var(--ink); }
.product-shell .sidebar .brand-row em { font-style: italic; }
.product-shell .sidebar .brand-row .m { display: inline-block; width: 14px; height: 14px; position: relative; }
.product-shell .sidebar .brand-row .m::before, .product-shell .sidebar .brand-row .m::after { content: ""; position: absolute; background: var(--accent); }
.product-shell .sidebar .brand-row .m::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-0.75px); }
.product-shell .sidebar .brand-row .m::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-0.75px); }
.product-shell .sidebar .grp-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--mute); text-transform: uppercase; margin-top: 6px;}
.product-shell .sidebar a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: var(--mute-2); font-size: 14px; padding: 6px 0; letter-spacing: -0.005em; border-bottom: 1px solid transparent; }
.product-shell .sidebar a.active { color: var(--accent-ink); font-weight: 700; border-left: 3px solid var(--accent); padding-left: 10px; margin-left: -10px; background: var(--paper-2); }
.product-shell .sidebar a .n { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.product-shell .sidebar a.active .n { color: var(--accent-ink); }

.product-shell .main { padding: 32px 40px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.metric { border-top: 1.5px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0;}
.metric.hero { border-top: 2.5px solid var(--accent); }
.metric .m-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--mute); text-transform: uppercase; }
.metric.hero .m-label { color: var(--accent-ink); font-weight: 600; }
.metric .m-val   { font-family: var(--font-display); font-size: 60px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.metric.hero .m-val { color: var(--accent); }
.metric .m-val em { font-style: italic; font-size: 28px; margin-left: 4px; color: var(--mute); }
.metric .m-foot  { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.04em; display: flex; justify-content: space-between; }

.tbl { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px; }
.tbl th, .tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.tbl thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--mute); font-weight: 500; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }

/* ── Chart with single highlighted series ────── */
.chart-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; flex: 1; min-height: 0; align-items: stretch;}
.chart-hero .chart-wrap { border-top: 2.5px solid var(--accent); padding-top: 22px; display: flex; flex-direction: column; gap: 12px;}
.chart-hero .chart-wrap .lgd { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; }
.chart-hero .chart-wrap .lgd .item { display: flex; align-items: center; gap: 8px; }
.chart-hero .chart-wrap .lgd .sw { width: 16px; height: 2px; }
.chart-hero .chart-wrap .lgd .sw.ink { background: var(--ink); }
.chart-hero .chart-wrap .lgd .sw.accent { background: var(--accent); height: 3px; }
.chart-hero .chart-wrap .lgd .sw.mute { background: var(--rule); }
.chart-hero .side { border-top: 1.5px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 18px;}

/* ── Sign & seal ────────────────────────────── */
.seal-hero { display: grid; grid-template-columns: 1fr 420px; flex: 1; min-height: 0; gap: 60px; align-items: stretch;}
.seal-hero .left { display: flex; flex-direction: column; gap: 24px; padding-top: 40px;}
.seal-hero .big-seal {
  width: 360px; height: 360px; border: 2.5px solid var(--accent); border-radius: 50%;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono); letter-spacing: 0.22em; color: var(--ink);
  margin: auto 0; background: var(--paper);
}
.seal-hero .big-seal::before, .seal-hero .big-seal::after { content: ""; position: absolute; background: var(--accent); }
.seal-hero .big-seal::before { left: 50%; top: -22px; width: 2px; height: 38px; transform: translateX(-1px); }
.seal-hero .big-seal::after  { left: 50%; bottom: -22px; width: 2px; height: 38px; transform: translateX(-1px); }
.seal-hero .big-seal .sig {
  font-family: var(--font-display); font-style: italic; font-size: 52px; letter-spacing: -0.01em; line-height: 1; margin: 14px 0 8px; color: var(--ink);
  font-variation-settings: "SOFT" 40, "opsz" 52;
}
.seal-hero .big-seal .kv { font-size: 11px; margin: 2px 0; color: var(--mute); font-weight: 500;}
.seal-hero .big-seal .kv.ink { color: var(--ink); font-weight: 700; }
.seal-hero .big-seal .kv.accent { color: var(--accent-ink); font-weight: 700; }

/* ── Rollout timeline ───────────────────────── */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; flex: 1; min-height: 0; margin-top: 20px;}
.tl-col { border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 12px;}
.tl-col.gate { border-top: 3px solid var(--accent); }
.tl-col .phase { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); }
.tl-col.gate .phase { color: var(--accent-ink); font-weight: 600; }
.tl-col .dates { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink); font-weight: 500; }
.tl-col h4 { margin: 8px 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.05;}
.tl-col ul { margin: 8px 0 0; padding: 0 0 0 18px; list-style: disc;}
.tl-col ul li { font-size: 15.5px; color: var(--mute-2); line-height: 1.5; margin-bottom: 4px; }

/* ── Footer stat (closing) ────────────────── */
.footer-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; padding-top: 22px; border-top: 1.5px solid var(--paper); }
.footer-stat > div { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); display: flex; flex-direction: column; gap: 8px;}
.footer-stat > div span { font-family: var(--font-sans); font-size: 22px; letter-spacing: -0.005em; color: var(--paper); font-weight: 500; }

/* ── Closing ─────────────────────────────── */
.closing { background: var(--ink); color: var(--paper); }
.closing h1 { font-family: var(--font-display); font-weight: 400; font-size: 220px; line-height: 0.9; letter-spacing: -0.025em; margin: 0; color: var(--paper); }
.closing h1 em { font-style: italic; }
.closing h1 .accent { color: var(--accent); font-style: italic; }
.closing .chrome { color: var(--mute); }
.closing .chrome .brand { color: var(--paper); }

/* ── Back link ───────────────────────────── */
.backlink {
  position: absolute; top: 40px; left: 100px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--mute); text-decoration: none;
  display: flex; align-items: center; gap: 8px; z-index: 10;
}
.backlink:hover { color: var(--accent); }

/* decision table */
.cmp-tbl { width: 100%; border-collapse: collapse; margin-top: 24px;}
.cmp-tbl th, .cmp-tbl td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top;}
.cmp-tbl thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--mute); font-weight: 500; text-transform: uppercase; border-bottom: 2px solid var(--ink);}
.cmp-tbl thead th.hybrid { color: var(--accent-ink); font-weight: 700; border-bottom-color: var(--accent);}
.cmp-tbl td.label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; width: 180px;}
.cmp-tbl td.val { font-family: var(--font-sans); font-size: 15.5px; color: var(--ink); line-height: 1.4;}
.cmp-tbl td.val.hybrid { background: var(--paper-2); border-left: 3px solid var(--accent); padding-left: 16px; font-weight: 500;}
.cmp-tbl td.val .mono { font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: 0.04em; display: block; margin-top: 4px;}