/* PROOF Liskov roadmap — release sequence and version principles. */

.roadmap-hero h1 {
  max-width: 900px;
  font-size: clamp(54px, 7vw, 90px);
  line-height: 0.98;
}
.roadmap-hero-lede {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(247,248,250,0.76);
  font-size: 20px;
  line-height: 1.55;
}

.roadmap-releases { background: var(--frost); }
.roadmap-stack { display: grid; gap: 16px; }
.roadmap-release {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--smoke);
  border-radius: 20px;
  background: #fff;
}
.roadmap-release--next { border: 2px solid var(--beacon); box-shadow: 0 18px 54px rgba(14,18,24,0.09); }
.roadmap-release--horizon { background: var(--ink); color: var(--frost); }
.roadmap-version {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  border-right: 1px solid var(--smoke);
  background: rgba(231,234,238,0.28);
}
.roadmap-release--next .roadmap-version { background: var(--beacon-tint); border-right-color: rgba(255,106,44,0.25); }
.roadmap-release--horizon .roadmap-version { border-right-color: rgba(247,248,250,0.12); background: rgba(247,248,250,0.035); }
.roadmap-version > strong {
  color: var(--ink);
  font: 700 48px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}
.roadmap-release--next .roadmap-version > strong { color: var(--beacon); }
.roadmap-release--horizon .roadmap-version > strong { color: var(--frost); }
.roadmap-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--smoke);
  border-radius: 999px;
  color: var(--steel);
  font: 700 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.roadmap-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone); }
.roadmap-status--shipped { border-color: rgba(21,128,61,0.24); background: rgba(21,128,61,0.08); color: #15803d; }
.roadmap-status--shipped i { background: #27b565; }
.roadmap-status--next { border-color: rgba(255,106,44,0.34); background: rgba(255,106,44,0.10); color: var(--beacon); }
.roadmap-status--next i { background: var(--beacon); }
.roadmap-status--horizon { border-color: rgba(247,248,250,0.18); color: rgba(247,248,250,0.65); }

.roadmap-release-copy { padding: 34px 38px; }
.roadmap-eyebrow { margin: 0; color: var(--beacon); font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.roadmap-release-copy h3 { max-width: 760px; margin: 14px 0 12px; font: 700 28px/1.08 "Space Grotesk", sans-serif; letter-spacing: -0.03em; }
.roadmap-release-copy > p:not(.roadmap-eyebrow) { max-width: 780px; margin: 0; color: var(--steel); font-size: 15.5px; line-height: 1.6; }
.roadmap-release--horizon .roadmap-release-copy > p:not(.roadmap-eyebrow) { color: rgba(247,248,250,0.67); }
.roadmap-release-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--smoke); list-style: none; }
.roadmap-release--horizon .roadmap-release-copy ul { border-top-color: rgba(247,248,250,0.12); }
.roadmap-release-copy li { position: relative; padding-left: 18px; color: var(--steel); font-size: 14px; line-height: 1.45; }
.roadmap-release--horizon .roadmap-release-copy li { color: rgba(247,248,250,0.76); }
.roadmap-release-copy li::before { content: ""; position: absolute; top: 0.52em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--beacon); }

.roadmap-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.roadmap-method-grid article { padding: 28px; border: 1px solid var(--smoke); border-radius: 16px; background: var(--frost); }
.roadmap-method-grid span { color: var(--beacon); font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.12em; }
.roadmap-method-grid h3 { margin: 30px 0 10px; font: 700 22px/1.1 "Space Grotesk", sans-serif; }
.roadmap-method-grid p { margin: 0; color: var(--steel); font-size: 14.5px; line-height: 1.58; }

.roadmap-principles { background: var(--beacon); }
.roadmap-principles .section-label::before { background: var(--ink); }
.roadmap-principles .section-title { margin-bottom: 0; }
.roadmap-principles .section-title em { color: var(--frost); }
.roadmap-principles-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 70px; align-items: end; }
.roadmap-principles-copy { padding-bottom: 5px; }
.roadmap-principles-copy p { margin: 0; color: rgba(14,18,24,0.74); font-size: 16px; line-height: 1.65; }
.roadmap-principles-copy p + p { margin-top: 16px; }

@media (max-width: 880px) {
  .roadmap-hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .roadmap-hero-lede { font-size: 17px; }
  .roadmap-release { grid-template-columns: 1fr; }
  .roadmap-version { flex-direction: row; align-items: center; padding: 22px 24px; border-right: 0; border-bottom: 1px solid var(--smoke); }
  .roadmap-release--horizon .roadmap-version { border-bottom-color: rgba(247,248,250,0.12); }
  .roadmap-version > strong { font-size: 38px; }
  .roadmap-release-copy { padding: 26px 24px; }
  .roadmap-release-copy h3 { font-size: 24px; }
  .roadmap-release-copy ul { grid-template-columns: 1fr; }
  .roadmap-method-grid, .roadmap-principles-grid { grid-template-columns: 1fr; }
  .roadmap-principles-grid { gap: 30px; }
}