/* Website redesign page (prefix: rd-) --------------------------------------- */

/* Hero: planning photo with an illustrative page audit card */
.rd-hero { position: relative; padding-bottom: clamp(36px, 5vw, 64px); }
.rd-hero__photo { aspect-ratio: 4 / 3.2; }
.rd-hero__audit { position: absolute; left: -4%; bottom: 0; width: 280px; }
.rd-hero__audit .ui-card__row { font-size: .82rem; }
.rd-hero__audit b { white-space: nowrap; }
.rd-keep { color: var(--success) !important; }
.rd-move { color: var(--brand) !important; }
.rd-drop { color: var(--error) !important; }

/* Eight signs: two ruled columns rather than cards */
.rd-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.rd-sign { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.rd-sign > i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand); }
.rd-sign h3 { font-size: var(--fs-h4); align-self: center; }
.rd-sign p { color: var(--muted); font-size: .97rem; }
.rd-signs__foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--text); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; color: var(--muted); }
.rd-signs__foot strong { color: var(--text); font-family: var(--font-display); font-size: 1.1rem; }

/* Before and after, with numbered notes */
.rd-ba { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.rd-ba__media { position: sticky; top: calc(var(--header-h) + 24px); }
.rd-notes { counter-reset: rd; display: grid; gap: 24px; }
.rd-notes li { counter-increment: rd; position: relative; padding-left: 50px; }
.rd-notes li::before {
  content: counter(rd); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 .85rem/1 var(--font-display);
}
.rd-notes h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.rd-notes p { margin-top: 6px; color: var(--muted); font-size: .97rem; }

/* Migration steps with the redirect map alongside */
.rd-migrate { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rd-migrate__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.rd-migrate .code-card { font-size: .76rem; line-height: 1.85; }
.rd-honest { margin-top: 20px; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: .95rem; line-height: 1.6; }
.rd-honest strong { display: block; margin-bottom: 6px; color: var(--on-dark); font: 600 1.05rem/1.3 var(--font-display); }

/* Refresh or rebuild */
.rd-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.rd-option { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line-soft); }
.rd-option--full { border-color: transparent; background-color: var(--ink); color: var(--on-dark); background-image: radial-gradient(90% 80% at 100% 0, rgba(25, 150, 105, .45), transparent 60%); }
.rd-option__kicker { font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.rd-option--full .rd-option__kicker { color: var(--citron); }
.rd-option h3 { font-size: var(--fs-h3); }
.rd-option__when { color: var(--muted); font-weight: 500; }
.rd-option__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }

@media (max-width: 1023px) {
  .rd-hero__audit { left: 4%; }
  .rd-ba, .rd-migrate { grid-template-columns: minmax(0, 1fr); }
  .rd-ba__media, .rd-migrate__aside { position: static; }
}
@media (max-width: 767px) {
  .rd-signs, .rd-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .rd-hero__audit { position: relative; left: auto; width: auto; margin: -40px 12px 0; }
  .rd-migrate .code-card { font-size: .66rem; padding: 16px; }
}