:root {
  --bg: #0A0B0D;
  --surface: #0D0F12;
  --surface-2: #101216;
  --line: #1E2128;
  --line-2: #262A31;
  --text: #E8EAED;
  --text-2: #C4C9D0;
  --text-3: #A3A9B2;
  --muted: #8A9099;
  --faint: #5C626B;
  --green: oklch(0.82 0.16 150);
  --cyan: oklch(0.82 0.11 200);
  --cyan-ink: oklch(0.86 0.10 200);
  --violet: oklch(0.78 0.12 260);
  --violet-ink: oklch(0.84 0.10 260);
  --amber: oklch(0.82 0.13 75);
  --amber-ink: oklch(0.87 0.12 75);
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: var(--green); color: var(--bg); }

.rm { min-height: 100vh; }
.rm-wrap { position: relative; max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Header */
.rm-header { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand img { width: 26px; height: 26px; object-fit: contain; }
.rm-nav { display: flex; gap: 26px; flex: 1; flex-wrap: wrap; font-size: 14px; }
.rm-nav a, .rm-actions .ghost { color: var(--muted); }
.rm-nav a:hover, .rm-actions .ghost:hover, .rm-nav a[aria-current="page"] { color: var(--text); }
.rm-actions { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.rm-actions .ghost { padding: 8px 14px; }
.btn { padding: 8px 16px; background: var(--text); color: var(--bg); border-radius: 6px; font-weight: 500; }
.btn:hover { background: #fff; color: var(--bg); }

/* Hero */
.hero { padding-top: 96px; padding-bottom: 72px; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hero h1 { margin: 22px 0 0; max-width: 900px; font-size: clamp(48px, 8vw, 104px); line-height: .95; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.hero h1 .serif { letter-spacing: -.01em; color: var(--green); }
.hero p { margin: 28px 0 0; max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }
.phases { margin-top: 48px; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.phases > div { background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.phases .mono { font-size: 12px; }
.phases strong { font-size: 17px; font-weight: 500; }

/* Section heading row */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* Gantt overview */
.overview { padding-bottom: 96px; }
.gantt-scroll { overflow-x: auto; }
.gantt { position: relative; min-width: 720px; padding-top: 4px; }
.gantt-months, .gantt-cols, .gantt-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gantt-months { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.gantt-months > div { padding: 14px 12px; border-left: 1px solid var(--line); }
.gantt-months > div:last-child, .gantt-cols > div:last-child { border-right: 1px solid var(--line); }
.gantt-cols { position: absolute; top: 44px; bottom: 0; left: 0; right: 0; pointer-events: none; }
.gantt-cols > div { border-left: 1px solid var(--line); }
.gantt-bars { position: relative; grid-auto-rows: 40px; row-gap: 10px; padding: 10px 0 18px; }
.bar { margin: 0 6px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 4px; border: 1px solid; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.bar .mono { font-size: 11px; opacity: .8; }
.bar--shipped { grid-column: 1 / span 1; grid-row: 1; background: var(--green); border-color: var(--green); color: var(--bg); }
.bar--frameworks { grid-column: 2 / span 1; grid-row: 2; border-color: oklch(0.82 0.11 200 / .45); background: oklch(0.82 0.11 200 / .1); color: var(--cyan-ink); }
.bar--microsoft { grid-column: 3 / span 2; grid-row: 3; border-color: oklch(0.78 0.12 260 / .45); background: oklch(0.78 0.12 260 / .1); color: var(--violet-ink); }
.bar--siem { grid-column: 5 / span 3; grid-row: 4; border-color: oklch(0.82 0.13 75 / .45); background: oklch(0.82 0.13 75 / .1); color: var(--amber-ink); }
.today-line { position: absolute; top: 36px; bottom: 0; left: 6%; width: 1px; background: var(--text); pointer-events: none; }
.today-dot { position: absolute; top: 30px; left: 6%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px var(--bg); }
.today-label { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.today-label::before { content: ""; width: 12px; height: 1px; background: var(--text); }

/* Milestones */
.milestones { padding-bottom: 120px; }
.milestones .sec-head { margin-bottom: 40px; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 34px; bottom: 34px; width: 1px; background: var(--line); }
.timeline::after { content: ""; position: absolute; left: 13px; top: 34px; height: calc(100% / 7); width: 1px; background: var(--green); }

.ms { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; }
.ms-node { display: flex; justify-content: center; padding-top: 30px; }
.node { width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid; background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
.node--done { width: 18px; height: 18px; transform: none; border: 0; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--bg); margin-top: -4px; }
.node--next { width: 14px; height: 14px; transform: none; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px oklch(0.82 0.11 200 / .3); margin-top: -2px; }
.node--target { width: 14px; height: 14px; border: 0; background: var(--amber); margin-top: -2px; }

.card { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 28px; display: flex; flex-wrap: wrap; gap: 24px 48px; transition: border-color .15s; }
.card:hover { border-color: #2E333B; }
.card-meta { flex: 0 0 180px; display: flex; flex-direction: column; gap: 12px; }
.card-date { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.card-date span { color: var(--faint); }
.tag { align-self: flex-start; padding: 4px 10px; border-radius: 100px; border: 1px solid; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.card-body { flex: 1 1 360px; min-width: 0; }
.card-body h2 { margin: 0 0 18px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.card-body ul { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.card-body li { counter-increment: item; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.card-body li::before { content: counter(item, decimal-leading-zero); font-family: var(--mono); font-size: 12px; padding-top: 3px; color: var(--faint); }
.card-body li strong { color: var(--text); font-weight: 500; }

/* Phase variants */
.ms--shipped .node { border-color: var(--green); }
.ms--shipped .card { border-color: oklch(0.82 0.16 150 / .35); background: #0F1312; }
.ms--shipped .tag { background: var(--green); border-color: var(--green); color: var(--bg); font-weight: 500; }
.ms--shipped li::before { content: "✓"; color: var(--green); }

.ms--frameworks .card { border-color: var(--line-2); background: var(--surface-2); }
.ms--frameworks .card:hover { border-color: #353A43; }
.ms--frameworks .tag { border-color: oklch(0.82 0.11 200 / .45); color: var(--cyan-ink); }

.ms--microsoft .node { border-color: var(--violet); }
.ms--microsoft .tag { border-color: oklch(0.78 0.12 260 / .45); color: var(--violet-ink); }

.ms--siem .node { border-color: var(--amber); }
.ms--siem .tag { border-color: oklch(0.82 0.13 75 / .45); color: var(--amber-ink); }

.ms--target .card { border-color: oklch(0.82 0.13 75 / .3); background: #12110D; }
.ms--target .card:hover { border-color: oklch(0.82 0.13 75 / .5); }
.ms--target .tag { background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 500; }
.ms--target h2 .serif { font-size: 28px; color: var(--amber-ink); }

.disclaimer { margin: 56px 0 0 48px; max-width: 640px; font-size: 14px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.disclaimer span { color: var(--text); }

/* Footer */
.rm-footer { border-top: 1px solid var(--line); }
.rm-footer .rm-wrap { padding-top: 28px; padding-bottom: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.rm-footer .brand { gap: 8px; font-size: 13px; }
.rm-footer .brand img { width: 20px; height: 20px; }
.rm-footer nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.rm-footer nav a { color: var(--muted); }
.rm-footer nav a:hover { color: var(--text); }
.rm-footer .mono { font-size: 12px; }

@media (max-width: 640px) {
  .hero { padding-top: 56px; }
  .card { padding: 22px; }
  .disclaimer { margin-left: 0; }
}