/* Redwood-specific layer over the existing V4 configurator case layout. */
:root {
  --ink: #252c26;
  --ink-soft: #4d574f;
  --cream: #f1eee7;
  --accent: #386049;
  --accent-deep: #294a36;
  --accent-text: #2e573d;
  --accent-glow: rgba(56, 96, 73, .18);
  --blue: #386049;
  --hero-top: #faf9f5;
  --hero-bottom: #ebe8df;
  --challenge-bg: #f1eee7;
  --band: #252f28;
  --band-kicker: #b6d5b7;
  --band-soft: #d1dcd2;
  --band-line: #536457;
  --band-link: #c2ddbd;
}
.redwood-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.redwood-phones .phone-example { display: grid; grid-template-rows: auto 1fr; min-width: 0; margin: 0; }
.redwood-phones .phone-frame { background: #fff; border: 1px solid var(--line); }
.redwood-phones figcaption { max-width: 30ch; margin-inline: auto; line-height: 1.6; }
.project-lead .section-head > p:not(.kicker) { max-width: 60ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) {
  .redwood-phones { grid-template-columns: 1fr; gap: 48px; }
  .redwood-phones .phone-example { width: min(340px, 100%); margin-inline: auto; }
}