/* Boxpod Rent Index (/rent-index). Mobile first; uses the site's CSS variables. */
.ri-section { padding: 36px 0 8px; }
.ri-section h2 { font-family: var(--font-primary); font-size: 24px; font-weight: var(--fw-500); margin: 0 0 12px; letter-spacing: -0.01em; }
.ri-note { font-size: 14px; color: #666; margin: 0 0 16px; }
.guide-hero .guide-meta a { color: inherit; text-decoration: underline; }

.ri-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.ri-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid #e3e3e3; border-radius: 12px; background: #fff; }
.ri-card-label { font-size: 14px; font-weight: 600; color: #333; }
.ri-card-value { font-family: var(--font-primary); font-size: 30px; font-weight: var(--fw-500); color: var(--dark); }
.ri-card-value small { font-size: 14px; font-weight: 400; color: #666; }
.ri-card-meta { font-size: 13px; color: #666; }

.ri-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e3e3e3; border-radius: 12px; margin-bottom: 8px; }
.ri-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.ri-table th, .ri-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; }
.ri-table thead th { font-size: 12px; font-weight: 600; color: #555; background: #fafafa; }
.ri-table tbody tr:last-child th, .ri-table tbody tr:last-child td { border-bottom: 0; }
.ri-table tbody th { font-weight: 600; }
.ri-table tbody th a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ri-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.ri-method { padding-bottom: 48px; }
.ri-method p { max-width: 760px; font-size: 15px; line-height: 160%; }

@media (min-width: 769px) {
    .ri-cards { grid-template-columns: repeat(4, 1fr); }
    .ri-section h2 { font-size: 28px; }
}