:root {
  --bg: #ffffff;
  --bg-soft: #f3f2f1;
  --bg-band: #faf9f8;
  --ink: #1f1f1f;
  --ink-soft: #4a4a4a;
  --ink-muted: #6e6e6e;
  --line: #e5e5e5;
  --line-strong: #d0d0d0;
  --accent: #0078d4;
  --accent-dark: #005a9e;
  --accent-soft: #e7f1fb;
  --red: #c4314b;
  --amber: #b8860b;
  --green: #107c10;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 6px;
  --radius-lg: 10px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(0,0,0,0.05);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.muted { color: var(--ink-muted); margin: 0; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #f25022, #7fba00 50%, #00a4ef 75%, #f25022);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brand-mark-c {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.4);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 14px;
}
.topnav {
  display: flex;
  gap: 24px;
  margin-left: 12px;
  flex: 1;
}
.topnav a {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.topnav a:hover { color: var(--accent); text-decoration: none; }
/* Mobile nav disclosure button. Hidden at desktop widths, where the inline
   .topnav is always visible and no toggle is needed. */
.nav-toggle { display: none; }
.topbar-cta { display: flex; gap: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  text-decoration: none !important;
}
.btn-lg { padding: 12px 22px; font-size: 1rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-block { display: flex; width: 100%; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(0,120,212,0.12), transparent 50%),
    radial-gradient(ellipse at top right, rgba(196,49,75,0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fa 100%);
  padding: 88px 0 96px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
  background: linear-gradient(180deg, transparent 65%, rgba(196,49,75,0.18) 65%);
  padding: 0 4px;
}
.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-meta { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }

.hero-stats {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  max-width: 560px;
}
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-stats span {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fafbfc, #f3f4f6);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.hero-card-head .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,124,16,0.18);
}
.hero-card-head .tag {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.hero-card-body { padding: 22px; }
.hero-card-body code {
  display: block;
  background: #0d1117;
  color: #e6edf3;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-bottom: 14px;
  overflow-x: auto;
}
.hero-card-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 3px 9px;
  border-radius: 999px;
}
.chip-red { background: #fde7eb; color: var(--red); border-color: #f4c0c8; }

/* ---------- section heads ---------- */
.band { padding: 80px 0; }
.band-soft { background: var(--bg-band); border-block: 1px solid var(--line); }
.section-head { margin-bottom: 40px; max-width: 720px; }
.section-head h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.section-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* ---------- release toolbar ---------- */
.release-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.search {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 10px 0 30px;
  height: 38px;
  width: min(360px, 100%);
  transition: border-color 120ms, box-shadow 120ms;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,120,212,0.16);
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.search input {
  border: 0; outline: 0;
  font: inherit;
  width: 100%;
  background: transparent;
}
.legend { display: flex; gap: 14px; color: var(--ink-muted); font-size: 0.88rem; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-feat { background: #2da44e; }
.dot-fix  { background: #d29922; }
.dot-chore{ background: #6e7681; }
.dot-docs { background: #8957e5; }

/* ---------- commit log ---------- */
.commit-log {
  background: #0d1117;
  border-radius: var(--radius-lg);
  border: 1px solid #30363d;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.commit-row {
  display: grid;
  grid-template-columns: 24px 110px 200px 1fr;
  gap: 0;
  border-top: 1px solid #21262d;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #c9d1d9;
}
.commit-row:first-child { border-top: 0; }
.commit-row:hover { background: #161b22; }

.commit-gutter {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14px;
  position: relative;
  background: #0d1117;
}
.commit-gutter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #30363d;
  transform: translateX(-1px);
}
.commit-row:first-child .commit-gutter::before { top: 14px; }
.commit-row:last-child .commit-gutter::before { bottom: 50%; }
.commit-dot {
  position: relative;
  z-index: 1;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #58a6ff;
  margin-top: 16px;
  box-shadow: 0 0 0 3px #0d1117;
}
.commit-row[data-type="fix"]  .commit-dot { background: #d29922; }
.commit-row[data-type="chore"] .commit-dot { background: #6e7681; }
.commit-row[data-type="docs"]  .commit-dot { background: #8957e5; }
.commit-row[data-type="feat"]  .commit-dot { background: #2da44e; }

.commit-when {
  padding: 12px 0;
  color: #8b949e;
  white-space: nowrap;
}
.commit-meta {
  padding: 14px 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid #21262d;
}
.commit-author { color: #c9d1d9; font-weight: 500; }
.commit-email { color: #6e7681; font-size: 0.78rem; word-break: break-all; }
.commit-hash { color: #58a6ff; font-size: 0.78rem; }
.commit-hash::before { content: "#"; color: #6e7681; }

.commit-body {
  padding: 14px 18px 18px 18px;
  border-left: 1px solid #21262d;
}
.commit-subject {
  color: #f0f6fc;
  font-weight: 500;
  margin: 0 0 8px;
  word-break: break-word;
}
.commit-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  background: rgba(56,139,253,0.18);
  color: #79c0ff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.commit-detail {
  display: none;
  color: #8b949e;
  font-size: 0.82rem;
  line-height: 1.55;
  border-top: 1px dashed #21262d;
  padding-top: 10px;
  /* Bodies contain bare URLs and long identifiers; without this the log
     scrolls sideways on narrow screens. */
  overflow-wrap: anywhere;
  margin-top: 10px;
}
.commit-detail code { background: rgba(110,118,129,0.18); color: #c9d1d9; padding: 0 4px; }
.commit-row.is-open .commit-detail { display: block; }

/* WCAG 2.2 AA (2.5.8) sets a 24x24 CSS px floor on target size. The old
   2px vertical padding put this at 22px, just under the line. The button is
   inline-flex with an explicit min-height so the box is sized by the target
   minimum rather than by the glyph. */
.commit-toggle {
  margin-top: 4px;
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.commit-toggle:hover { color: #c9d1d9; border-color: #58a6ff; }
.commit-empty {
  padding: 40px;
  text-align: center;
  color: #8b949e;
  font-family: var(--font-mono);
}

/* ---------- features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow 160ms, transform 160ms, border-color 160ms;
}
.feature:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), #00a4ef);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.feature h3 { font-size: 1.15rem; margin: 0 0 8px; }
.feature p { color: var(--ink-soft); margin: 0 0 14px; }
.feature .link {
  font-size: 0.9rem;
  font-weight: 600;
}
.feature .link::after { content: " \2192"; }

/* ---------- tiers ---------- */
/* Explicit track counts, not auto-fit. auto-fit fits three 240px tracks
   anywhere between about 820px and 1100px of viewport, which would leave the
   fourth card alone on a second row. The subgrid rules further down assume
   one card per row at 4-up and one pair per row at 2-up. */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.tier header h3 { margin: 0; font-size: 1.2rem; }
.tier .price { font-size: 2.1rem; font-weight: 700; margin: 4px 0 0; letter-spacing: -0.02em; }
.tier ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); font-size: 0.95rem; }
.tier ul li::before { content: "\2713 "; color: var(--green); font-weight: 700; margin-right: 6px; }
.tier ul li.strike { color: var(--ink-muted); text-decoration: line-through; }
.tier-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,120,212,0.12), var(--shadow);
  transform: translateY(-4px);
}
.tier-flag {
  position: absolute;
  top: -12px;
  right: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.fineprint {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin: 0;
}
.fineprint + .fineprint { margin-top: 16px; }

/* The counterfactual plan. Every tier card gets one: same money, opposite
   product. `margin-top: auto` pushes the block and the CTA below it to the
   bottom of the card, so the four CTAs line up across the grid however long
   the feature lists above them run. The blocks' own tops do not line up,
   since the four counterfactuals are deliberately different lengths. */
.tier-meter {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--red);
  margin: 8px 0 0;
}
.tier-alt {
  margin-top: auto;
  border-top: 1px dashed var(--line-strong);
  padding-top: 14px;
}
.tier-alt-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(16,124,16,0.07);
  border: 1px solid rgba(16,124,16,0.22);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
}
.tier-alt h4 { margin: 0 0 6px; font-size: 1rem; letter-spacing: -0.01em; }
.tier-alt p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

/* From 620px the cards share the parent's row tracks, which is what lines the
   counterfactual blocks up. Each card spans its band's rows and adopts them
   with subgrid, so the .tier-alt blocks in a band all start at the same y.
   The previous margin-top:auto anchored each block to the bottom of its own
   card, so taller counterfactual text pushed its border-top higher and the
   dashed rules were staggered by up to 156px. */
@media (min-width: 620px) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Two cards per band, two bands, so eight rows. */
    grid-template-rows: repeat(8, auto);
    column-gap: 18px;
    row-gap: 16px;
  }
  .tier {
    display: grid;
    /* span 4, not 1/5. A definite row span with an auto column position
       lets the placement cursor flow the cards into bands on its own: at
       2-up it puts cards 1-2 in rows 1-4 and 3-4 in rows 5-8. Pinning every
       card to 1/5 instead row-locks all four to the first band, and the
       grid answers by adding two zero-width implicit columns. */
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0;
  }
  .tier > header { grid-row: 1; }
  .tier > ul { grid-row: 2; }
  .tier-alt { grid-row: 3; margin-top: 0; }
  .tier > .btn-block { grid-row: 4; }
}
@media (min-width: 1100px) {
  .tiers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
  }
  /* Four across still fits in one band, so no second set of rows is needed. */
}

/* ---------- roadmap ---------- */
.roadmap {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px;
}
.roadmap li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.rm-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.roadmap h4 { margin: 0 0 6px; font-size: 1.05rem; }
.roadmap p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 800px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 1.2rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 12px 0 0; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer {
  background: #0d1117;
  color: #c9d1d9;
  padding: 48px 0 56px;
}
.footer-inner { display: flex; flex-direction: column; gap: 14px; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.1rem;
}
.footer-brand .brand-mark { background: linear-gradient(135deg, #f25022, #7fba00 50%, #00a4ef 75%, #f25022); }
.footer-brand .brand-mark-c { background: rgba(255,255,255,0.1); }
.footer-fine { color: #8b949e; font-size: 0.95rem; margin: 0; max-width: 760px; }
.footer-fine a { color: #79c0ff; }
.footer-meta { color: #6e7681; font-size: 0.85rem; margin: 6px 0 0; }

/* ---------- pull quote ---------- */
.quote-band { padding: 60px 0; }
.pullquote {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
}
.pullquote p {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  line-height: 1.28;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.pullquote footer {
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.pullquote cite {
  display: block;
  font-style: normal;
  margin-top: 2px;
}

/* ---------- responsive ---------- */

/* The hero is a two-column grid above 880px, so the stats live in whichever
   column is narrower. Between roughly 880px and 1150px that column is only
   about 410px, and four stats across it left each label around 85px, which
   broke the release date mid-string ("2026-" / "09-30"). Two across clears
   it, and this has to fire above the 880px breakpoint that stacks the hero. */
@media (max-width: 1150px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .hero { padding: 56px 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .band { padding: 56px 0; }
  .topbar-cta .btn-ghost { display: none; }

  /* .topnav used to be display:none here with nothing replacing it, which
     made all five primary links unreachable on a phone. Hand it to a
     disclosure button instead. The panel is positioned against
     .topbar-inner so it lines up with the container rather than the
     viewport, which is 92vw and not 100%. */
  .topbar-inner { position: relative; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
  }
  .nav-toggle:hover { border-color: var(--accent); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .topnav.is-open { display: flex; }
  .topnav a {
    display: block;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .topnav a:hover { background: rgba(0,120,212,0.04); }

  /* Four children, and the hash and author are most of what a commit log is
     for, so .commit-meta stays in the flow and folds under the date instead
     of being hidden. Name every area: a bare track list would auto-place the
     body into the 24px gutter. */
  .commit-row {
    grid-template-columns: 24px 100px minmax(0, 1fr);
    grid-template-areas:
      "dot when meta"
      "dot body body";
  }
  .commit-gutter { grid-area: dot; }
  .commit-when { grid-area: when; padding-left: 4px; }
  .commit-meta {
    grid-area: meta;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 12px 0 4px;
    border-right: 0;
  }
  .commit-body { grid-area: body; padding-left: 14px; }
}
@media (max-width: 560px) {
  .release-toolbar { flex-direction: column; align-items: stretch; }
  .legend { flex-wrap: wrap; }
  /* No room for a date track beside the metadata, so the row drops to one
     content track and everything stacks under it. */
  .commit-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "dot when"
      "dot meta"
      "dot body";
  }
  .commit-meta { padding-top: 0; }
  .hero-card-body code { overflow-wrap: anywhere; }
}