/* /renovate/ page only. Uses main.css tokens. */

.rv-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); overflow: clip; }
.rv-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .rv-hero-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.rv-hero-copy { display: grid; gap: 20px; }
.rv-hero-copy h1 em { font-style: italic; color: var(--brass); }
.rv-visual { position: relative; margin: 0; min-width: 0; }
.rv-hero-copy { min-width: 0; }
.rv-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.rv-cards { display: grid; gap: 18px; }
@media (min-width: 880px) { .rv-cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.rv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; display: grid; gap: 8px; align-content: start; }
.rv-card .rv-tag { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--brass); }
.rv-card h3 { font-size: 1.16rem; }
.rv-card p { color: var(--ink-soft); font-size: 0.95rem; }
.rv-card.is-not { background: var(--paper-2); }

.rv-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 0.95rem; }
.rv-compare th, .rv-compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.rv-compare tr:last-child th, .rv-compare tr:last-child td { border-bottom: 0; }
.rv-compare thead th { background: var(--ink); color: var(--paper-ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.rv-compare tbody th { width: 24%; font-weight: 700; color: var(--ink); background: var(--paper-2); }
.rv-compare td { color: var(--ink-soft); }
@media (max-width: 720px) {
  .rv-compare, .rv-compare tbody, .rv-compare tr, .rv-compare th, .rv-compare td { display: block; width: 100%; }
  .rv-compare thead { display: none; }
  .rv-compare tbody th { width: 100%; }
  .rv-compare td::before { content: attr(data-col); display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--brass); margin-bottom: 2px; }
}

.rv-timeline { list-style: none; display: grid; gap: 0; max-width: 820px; counter-reset: rv; border-left: 2px solid var(--line); margin-left: 18px; }
.rv-timeline li { position: relative; padding: 0 0 28px 34px; counter-increment: rv; }
.rv-timeline li:last-child { padding-bottom: 0; }
.rv-timeline li::before { content: counter(rv); position: absolute; left: -19px; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper-ink);
  font-family: var(--font-display); font-weight: 600; display: grid; place-items: center; }
.rv-timeline h3 { font-size: 1.12rem; margin-bottom: 4px; }
.rv-timeline p { color: var(--ink-soft); font-size: 0.96rem; max-width: 60ch; }
.rv-timeline .rv-who { display: inline-block; margin-top: 6px; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--brass); }

.rv-room { margin-top: clamp(28px, 4vw, 44px); }
.rv-room:first-of-type { margin-top: 0; }
.rv-room h3 { font-size: 1.25rem; margin-bottom: 4px; }
.rv-room > p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 14px; max-width: 62ch; }
.rv-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 880px) { .rv-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.rv-fig { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); box-shadow: var(--shadow); background: #fff; }
.rv-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-3); }
.rv-fig figcaption { padding: 8px 12px 10px; font-size: 0.78rem; color: var(--ink-soft); }

.rv-start { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .rv-start { grid-template-columns: 1fr 1fr; gap: 56px; } }
.rv-start ul { list-style: none; display: grid; gap: 12px; margin-top: 4px; }
.rv-start li { padding-left: 28px; position: relative; color: var(--ink-soft); }
.rv-start li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 2px; background: var(--brass-bright); }
.rv-start li strong { color: var(--ink); }

.rv-quiz { min-width: 0; }