/* PAR , Tariq's punch list, 2026-08-23. Preview only.
   Every rule here is a response to something he pointed at, and each says which. */

/* ---- 1. SERVICE ICONS ARE TOO SMALL ----------------------------------- */
/* They render at 28px inside a 64px grid cell, so more than half the column
   they were given is empty. 40px fills the cell it already has without moving
   a single other value, and lifts them off the muted colour so they read as
   objects rather than as grey marks beside the text. */
.sic{width:40px;height:40px;color:var(--text)}
.srow:hover .sic{color:var(--orange)}
@media(max-width:767px){.sic{width:32px;height:32px}}

/* ---- 2. THE PRICE ------------------------------------------------------ */
/* FULLY REVERTED 2026-08-23. Two goes at this. First I put it in Fraunces at
   the top of the optical axis; Tariq does not like the typography. Then I kept
   only the "from" split as a hierarchy fix, and that split the text node the
   kit relied on for spacing, so it rendered "$280incl. parts" with no gap.
   A half-revert that introduces its own bug is not a compromise, it is a third
   version nobody asked for. The price goes back to the kit exactly. */

/* ---- 3. THE FOOTER PAYMENT ROW ---------------------------------------- */
/* Zelle, contactless and Stripe invoicing join the marks. Switching is a
   cross-fade on the existing --t-large token and the brand curve, not a new
   motion vocabulary: Racim's kit law is that motion means arrival, once. */
.fpay-marks{position:relative;min-height:30px}
.fpay-set{display:flex;align-items:center;gap:var(--sp-12);
  transition:opacity var(--t-large) var(--ease);}
.fpay-set[hidden]{display:flex;position:absolute;inset:0;opacity:0;
  pointer-events:none}
.fpay-note{display:block;margin-top:var(--sp-8);font-size:var(--fs-cap);
  /* was --muted-2: measured 4.17:1 dark / 3.89:1 light at 12px, both under the
     4.5 small-text floor. --muted reads 7.64 dark / 7.04 light. */
  color:var(--muted);min-height:1.2em;
  transition:opacity var(--t-ui) var(--ease)}
.pm .zelle{color:#6D1ED4;font-weight:700;letter-spacing:-.02em}
/* the .pm chips are white in BOTH themes, so ink on them is a fixed dark, not
   a theme token. --text is light on dark and vanished on the chip. */
.pm .tap{display:inline-flex;align-items:center;gap:5px;color:#1A1714;font-weight:600}
.pm .stripe{color:#635BFF;font-weight:600;letter-spacing:-.02em}
@media(prefers-reduced-motion:reduce){.fpay-set{transition:none}}

/* ---- 5. THE GOOGLE G ON DARK ------------------------------------------ */
/* Google's brand rule: the four-colour G is only correct on a white or very
   light ground. In the light theme it already is, and reads properly. In the
   dark theme it sits straight on #0C0C0C, which is off-guideline and lets the
   blue arc go muddy against the ground.
   Fix uses a treatment the site already owns: the .pm payment marks are white
   chips holding a brand mark. Same idea, dark theme only, so the light theme
   is untouched. */
html[data-resolved=dark] .glogo,
html[data-resolved=dark] .gg,
:root:not([data-resolved=light]) .glogo,
:root:not([data-resolved=light]) .gg{
  background:#FFFFFF;border-radius:50%;
  /* 2px, not 3: at 3 the disc was exactly 24px inside a 24px row and sat
     wall to wall with no air. */
  padding:2px;box-sizing:content-box;
  /* a hairline keeps the white disc from glowing against near-black */
  box-shadow:0 0 0 1px rgba(255,255,255,.10)}
html[data-resolved=dark] .gg,
:root:not([data-resolved=light]) .gg{padding:2px}

/* ---- 6. THE ICON TAKES THE NUMBER'S PLACE ----------------------------- */
/* Tariq's call, and the reasoning holds: a number should mean a SEQUENCE.
   Refrigerator, Washer, Dryer, Oven, Dishwasher is a list, not an order, so
   01 to 05 encodes nothing true and just fills the widest column on the row
   with 52px of decoration. The icon in that slot IS information: it says which
   appliance before you have read a word.
   The numbers stay where they are genuinely a sequence, which is "How it
   works", because there the order is the point. */
/* Hide the number ONLY on a row that actually received an icon. The symptom
   rows on the service pages have a .snum and no .sic, so a blanket hide left
   them with an empty 64px column. The class is set by the script, after the
   move succeeds, so the CSS can never get ahead of the DOM. */
.srow.has-icon .snum{display:none}
.srow.has-icon .sicslot{display:flex;align-items:center;justify-content:flex-start}
.srow.has-icon .sicslot .sic{width:48px;height:48px;color:var(--text)}
.srow.has-icon:hover .sicslot .sic{color:var(--orange)}
/* the name no longer needs to carry the icon inline */
.srow.has-icon .snm{gap:0}
@media(max-width:767px){
  .srow.has-icon .sicslot .sic{width:36px;height:36px}
}

/* ---- PRICE, NEVER BARE ------------------------------------------------- */
/* UX audit 2026-08-23: the five home cards showed "From $280 / $245 / $265"
   with no diagnostic line beside them, while the FAQ and every symptom page
   pair the two correctly. A skimmer reading only the bold numbers can infer a
   SECOND price, which is the exact confusion the one-price rule exists to kill.
   Wording is the site's own: the $89 is APPLIED to the repair, not added. */
.sdiag{display:block;margin-top:2px;font-family:Inter,system-ui,sans-serif;
  font-size:var(--fs-cap);font-weight:400;color:var(--muted);letter-spacing:0}