.r-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.r-fluid { font-size: clamp(1.5rem, 1rem + 3vw, 4rem); }
.r-stepped { font-size: var(--text-4xl); color: var(--color-primary); }
.r-vis p { margin: 0 0 var(--space-3); }
.only-tablet, .only-mobile { display: none; }
.r-reflow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.r-reflow img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.r-longword { overflow-wrap: anywhere; font-family: var(--font-mono); background: var(--color-surface); padding: var(--space-3); border-radius: var(--radius-sm); }
.r-table-wrap { overflow-x: auto; margin-block: var(--space-5); }
.r-table { border-collapse: collapse; min-width: 640px; width: 100%; background: var(--color-surface); }
.r-table caption { text-align: left; font-weight: 600; padding-bottom: var(--space-2); }
.r-table th, .r-table td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; }
.r-table th { background: var(--color-primary-soft); }
.r-spacing .box { padding: 80px; background: var(--color-primary-soft); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); font-weight: 600; }
@media (max-width: 1024px) {
  .r-cols { grid-template-columns: 1fr 1fr; }
  .r-stepped { font-size: var(--text-3xl); }
  .only-desktop { display: none; } .only-tablet { display: block; }
  .r-spacing .box { padding: 40px; }
}
@media (max-width: 640px) {
  .r-cols, .r-reflow { grid-template-columns: 1fr; }
  .r-reflow img { order: -1; }
  .r-stepped { font-size: var(--text-2xl); }
  .only-tablet { display: none; } .only-mobile { display: block; }
  .r-spacing .box { padding: var(--space-4); }
}
