/* Automation repair offer. Builds on the shared offer layout in brand/components.css. */
.repair-main .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: center; padding-top: var(--wp-12); padding-bottom: var(--wp-16); }
.repair-main .hero-copy { display: grid; gap: var(--wp-6); }
.repair-main .hero-copy h1 { max-width: 14ch; }
.repair-main .rows .row th { white-space: normal; width: 52%; color: var(--wp-ink); }
.repair-main .rows .row td { text-align: left; white-space: normal; width: auto; color: var(--wp-muted); }
.repair-main .rows .row th, .repair-main .rows .row td { height: auto; padding-top: var(--wp-3); padding-bottom: var(--wp-3); line-height: 1.35; }

/* The checks: situation and observed result, with the PASS chip from the proof exhibit. */
.repair-main .checks { margin: 0; }
.repair-main .checks table { width: 100%; border-collapse: collapse; font-size: var(--wp-text-ledger); border-top: var(--wp-rule-strong) solid var(--wp-ink); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.repair-main .checks th, .repair-main .checks td { text-align: left; vertical-align: baseline; padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); line-height: 1.45; }
.repair-main .checks thead th { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule) solid var(--wp-ink); }
.repair-main .checks tbody th { font-weight: 600; width: 38%; }
.repair-main .checks .n { font: 500 var(--wp-text-cite)/1.45 var(--wp-font-mono); color: var(--wp-muted); width: 2.75rem; }
.repair-main .checks tbody tr:last-child > * { border-bottom: 0; }
.repair-main .checks .control { background: var(--wp-panel); }
.repair-main .checks .control th, .repair-main .checks .control td { padding-top: var(--wp-4); padding-bottom: var(--wp-4); }
.repair-main .pass { display: inline-block; margin-right: var(--wp-2); padding: 0 6px; background: var(--wp-cited); font: 500 var(--wp-text-cite)/1.6 var(--wp-font-mono); letter-spacing: 0.06em; color: var(--wp-ink); }
.repair-main .checks mark { background: var(--wp-cited); color: var(--wp-ink); padding: 0 2px; font-weight: 600; }
.repair-main .checks figcaption { margin-top: var(--wp-6); color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.5; }
.repair-main .aside > p:not(.big) { max-width: 32em; }

/* Five steps: numbered rules, not cards. */
.repair-main .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wp-8); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.repair-main .steps li { counter-increment: step; padding-top: var(--wp-6); display: grid; gap: var(--wp-3); align-content: start; }
.repair-main .steps li::before { content: "0" counter(step); font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); color: var(--wp-muted); letter-spacing: 0.06em; }
.repair-main .steps p { color: var(--wp-muted); }

/* Scope rows: name, what is included, what it adds. The price is quoted per job, so no price column. */
.repair-main .ways li { grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.repair-main .ways p { color: var(--wp-ink); line-height: 1.5; }
.repair-main .ways p:nth-of-type(2) { color: var(--wp-muted); }
.repair-main .dated { max-width: 52em; }

/* Fit: take and decline. */
.repair-main .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.repair-main .fit h3 { margin-bottom: var(--wp-4); }
.repair-main .service-list { display: grid; gap: var(--wp-4); list-style: none; margin: 0; padding: 0; max-width: 40em; }
.repair-main .service-list li { border-left: var(--wp-rule-strong) solid var(--wp-bio); padding-left: var(--wp-4); }
.repair-main .service-list.no li { border-left-color: var(--wp-rust); }

.repair-main .closing h2 { max-width: 14ch; }

@media (max-width: 1100px) {
  .repair-main .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repair-main .ways li { grid-template-columns: minmax(0, 1fr); }
  .repair-main .ways li > p { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .repair-main .hero .wrap, .repair-main .fit { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .repair-main .hero .wrap { padding-top: var(--wp-8); padding-bottom: var(--wp-12); }
}
@media (max-width: 600px) {
  .repair-main .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .repair-main .steps li { padding: var(--wp-6) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .repair-main .steps li:last-child { border-bottom: 0; }
  .repair-main .rows .row th { width: 50%; }
  /* Each check becomes a block: number and situation on one line, the result under it. */
  .repair-main .checks thead { display: none; }
  .repair-main .checks table, .repair-main .checks tbody { display: block; }
  .repair-main .checks tr { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .repair-main .checks tbody tr:last-child { border-bottom: 0; }
  .repair-main .checks th, .repair-main .checks td, .repair-main .checks tbody th { border: 0; padding: 0; width: auto; }
  .repair-main .checks tbody td:last-child { grid-column: 2; margin-top: var(--wp-1); }
  .repair-main .checks .control { padding: var(--wp-4) var(--wp-3); margin: 0 calc(-1 * var(--wp-3)); }
}
/* The shared phone receipt puts each value under its row name, right-aligned at tap height.
 * These rows are sentences, not cited values, so they read as one left-aligned pair. */
@media (max-width: 440px) {
  .repair-main .rows .row tr { display: block; padding: var(--wp-3); }
  .repair-main .rows .row th, .repair-main .rows .row td { display: block; width: auto; height: auto; padding: 0; text-align: left; }
  .repair-main .rows .row td { margin-top: 2px; }
  .repair-main .rows .row td:last-child { justify-content: flex-start; }
}