/* ============================================================
   Spare-parts rate card.

   A price table, so it reads like one: tabular numerals, one rule
   per row, no card-in-card nesting. The point is that a customer
   can scan for the part they think failed and see the number.
   ============================================================ */

.rc {
    margin: 32px 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 14px;
}

.rc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.rc-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #0F172A); margin: 0; }
.rc-sub {
    font-size: 13.5px; line-height: 1.55; max-width: 52ch;
    color: var(--text-tertiary, #94A3B8); margin: 5px 0 0;
}

.rc-toggle {
    flex-shrink: 0;
    padding: 7px 13px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 9px;
    background: #fff;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rc-toggle:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }

.rc-table { border-top: 1px solid var(--border, #E2E8F0); }

.rc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px 88px;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.rc-row:last-child { border-bottom: none; }
.rc-row[hidden] { display: none; }

.rc-row-head {
    padding: 10px 0;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-tertiary, #94A3B8);
}

.rc-name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary, #0F172A); }
.rc-desc {
    display: block; margin-top: 3px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-tertiary, #94A3B8);
}

.rc-num { text-align: right; font-variant-numeric: tabular-nums; }
.rc-price { font-size: 14px; font-weight: 700; color: var(--text-primary, #0F172A); }
.rc-branded { font-size: 13.5px; color: var(--text-secondary, #475569); }
.rc-warranty { font-size: 12.5px; color: var(--text-tertiary, #94A3B8); }

.rc-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 16px 0 0; padding-top: 14px;
    border-top: 1px solid var(--border, #E2E8F0);
    font-size: 12.5px; line-height: 1.6;
    color: var(--text-tertiary, #94A3B8);
}
.rc-note svg { flex-shrink: 0; margin-top: 2px; }
.rc-note strong { color: var(--text-secondary, #475569); font-weight: 700; }

/* ============================================================
   Process + FAQ
   ============================================================ */
.pf { margin: 36px 0; }
.pf-h2 { font-size: 20px; font-weight: 700; color: var(--text-primary, #0F172A); margin: 0 0 16px; }

.pf-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0; padding: 0;
}
.pf-step { display: block; }
.pf-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary-subtle, #EFF6FF); color: #1E40AF;
    font-size: 12px; font-weight: 800; margin-bottom: 9px;
}
.pf-t { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary, #0F172A); }
.pf-d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary, #94A3B8); }

.pf-faq { border-top: 1px solid var(--border, #E2E8F0); }
.pf-item { border-bottom: 1px solid var(--border, #E2E8F0); }
.pf-q {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 0; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 600; color: var(--text-primary, #0F172A);
}
.pf-q::-webkit-details-marker { display: none; }
.pf-q svg { flex-shrink: 0; color: var(--text-tertiary, #94A3B8); transition: transform .18s; }
.pf-item[open] .pf-q svg { transform: rotate(180deg); }
.pf-a {
    margin: 0; padding: 0 0 16px;
    font-size: 14px; line-height: 1.65; max-width: 68ch;
    color: var(--text-secondary, #475569);
}

@media (max-width: 860px) {
    .pf-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .pf-steps { grid-template-columns: 1fr; gap: 14px; }
    .pf-q { font-size: 14.5px; }
}

/* On a phone the four columns become a label/value stack — a 4-column
   price table at 375px is unreadable however you size it. */
@media (max-width: 640px) {
    .rc { padding: 18px 16px; }
    .rc-head { flex-direction: column; gap: 12px; }
    .rc-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .rc-row-head { display: none; }
    .rc-row .rc-branded,
    .rc-row .rc-warranty {
        grid-column: 1 / -1;
        text-align: left;
        font-size: 12px;
    }
    .rc-row .rc-branded::before { content: 'Branded: '; color: var(--text-tertiary, #94A3B8); }
    .rc-row .rc-warranty::before { content: 'Warranty: '; }
}