/* Quality Assurance — page-local layout variant.
   Enqueued by functions.php only on /customization/quality-assurance/
   Class prefix: .qa-: colours, type and radii come from assets/css/tokens.css
   and the shared pattern vocabulary in style.css; nothing here restates either. */

/* ---------- 01 · Five inspection gates: an audit register -----------------
   The gates are the page's spine, so they are kept as one bordered register:
   a square numbered block on the left, the gate on the right, and a hairline
   between rows, the way a buyer's own inspection sheet is laid out.          */
.qa-gates{list-style:none;margin:0 0 1em;padding:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.qa-gates li{margin:0}
.qa-gate{display:grid;grid-template-columns:48px 1fr;gap:18px;
  padding:18px 20px;min-width:0}
.qa-gate+.qa-gate{border-top:1px solid var(--line)}
.qa-gate__n{display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:0;border:1px solid var(--line-2);border-radius:2px;
  background:var(--off);font-family:var(--display);font-size:15px;font-weight:600;
  line-height:1;color:var(--accent)}
.qa-gate__b{min-width:0}
.qa-gate__b h3{margin:0 0 5px;font-size:15.5px}
.qa-gate__b p{margin:0;max-width:66ch;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- 02 · Testing: a 2x2 grid of checks ----------------------------
   Four checks, each under its own short accent rule rather than inside a card,
   so testing reads as a set of measurements and not as four offers.         */
.qa-checks{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4vw,64px);row-gap:clamp(26px,3vw,38px)}
.qa-check{min-width:0}
.qa-check::before{content:"";display:block;width:38px;height:2px;margin-bottom:14px;
  background:var(--accent)}
.qa-check .kicker{margin:0 0 5px}
.qa-check h3{font-size:16px}
.qa-check p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- 03 · Records: the split reads as a filed document -------------
   The records band is the one place on the page that is paperwork, so the two
   columns sit inside one hairline panel with a filing corner: the border is the
   only thing added here, no wording and no second heading.                  */
.qa-file{position:relative;padding:clamp(20px,2.6vw,32px);
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--white)}
.qa-file::after{content:"";position:absolute;top:-1px;right:-1px;width:16px;height:16px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  border-top-right-radius:var(--r)}

/* ---------- 01 · The four evidence frames beside the register -------------
   A captioned 4:3 frame needs more air between rows than the shared 16px, or the
   caption of the upper row crowds the frame below it.                        */
.qa-evidence{row-gap:clamp(18px,2vw,26px)}

/* ---------- 04 · Third-party inspection and the form ----------------------
   The closing band mirrors the one page-oem.php ends on, so the two sibling
   pages finish the same way: the third-party terms keep the left column and the
   form takes the wider share, because its two-column field grid has to fit. The
   form is held to its card, with a tighter field rhythm than it uses where it
   stands alone (§4.8 full form); the label above it names what the card is, since
   this band's heading answers the inspection question instead. Between 861 and
   1024px the two columns are dropped rather than squeezed.                      */
.qa-enquiry__label{margin:0 0 10px}
.qa-enquiry .enquiry-form{padding:clamp(18px,1.8vw,22px)}
.qa-enquiry .enquiry-form label{margin-bottom:5px}
.qa-enquiry .enquiry-form .field-grid{gap:16px 20px;margin-bottom:16px}
.qa-enquiry .enquiry-form textarea{min-height:92px}
.qa-enquiry .enquiry-form .form-foot{margin-top:20px;padding-top:18px;gap:12px}
@media (min-width:861px){
  .qa-rfq{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
}
@media (min-width:861px) and (max-width:1024px){
  .qa-rfq{grid-template-columns:1fr}
}

/* ---------- Small screens: one column, nothing to scroll sideways --------- */
@media (max-width:860px){
  .qa-file{padding:clamp(18px,4vw,26px)}
}
@media (max-width:640px){
  .qa-checks{grid-template-columns:1fr}
  .qa-gate{grid-template-columns:40px 1fr;gap:14px;padding:16px}
  .qa-gate__n{width:40px;height:40px;font-size:14px}
}