/* ── Elizabet M · shared brand + accessibility layer ────────────────────────
   Loaded by EVERY page, including the self-contained ones that ship their own
   component CSS. Deliberately contains only things that must never drift
   between pages: colour tokens, the surface-aware accent rules, the skip link
   and text-wrapping. No component styling lives here, so it cannot collide
   with a page's own rules. Fix a colour or a contrast bug once, here.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  /* Brand hues — for fills, gradients, borders, icons. */
  --blue:#2F86D6; --green:#6FB23B; --gold:#F5A623; --ink:#16261A;
  --bg:#F5F8EF; --surface:#FFFFFF; --muted:#5C6B57;

  /* Text-safe accents. Small text (13px/700 labels, links, list markers) needs
     4.5:1; the brand hues do not reach it on white, so each accent has a
     light-surface and a dark-surface value. Ratios measured against #FFFFFF
     and #16261A respectively. */
  --green-ink:#356B1E;      /* 6.4:1 on white · 6.0:1 on cream */
  --green-d:#3F7A20;        /* 5.2:1 on white · also 5.2:1 for white text on this fill */
  --blue-d:#1F5FA8;         /* 6.4:1 on white */
  --gold-ink:#8B5E0A;       /* 5.7:1 on white */
  --green-on-dark:#6FB23B;  /* 6.1:1 on ink */
  --blue-on-dark:#6BB0E8;   /* 6.8:1 on ink */
  --gold-on-dark:#F5A623;   /* 7.8:1 on ink */

  /* Star glyphs are a rating graphic, so they need 3:1 against their surface.
     Brand gold only reaches 2.0:1 on white; this is the nearest warm amber
     that clears the bar (3.4:1 white / 3.1:1 cream) without reading brown. */
  --star:#C67B00; --star-on-dark:#F5A623;
}

/* Rating stars. Always paired with the numeric rating in the markup, and
   exposed as an image with an accessible name, so the score never depends on
   distinguishing five glyphs. */
.stars{color:var(--star)}
.announce .stars,.stats .stars,.steps .stars,.bigmar .stars,footer .stars,.on-dark .stars{color:var(--star-on-dark)}

/* Eyebrow — section label. One component, three accents, surface-aware:
   the accent flips automatically inside a dark band, so no page needs to
   hard-code a colour on it. */
.eyebrow{color:var(--green-ink)}
.eyebrow.is-blue{color:var(--blue-d)}
.eyebrow.is-gold{color:var(--gold-ink)}
.announce .eyebrow,.stats .eyebrow,.steps .eyebrow,.bigmar .eyebrow,footer .eyebrow,.on-dark .eyebrow{color:var(--green-on-dark)}
.announce .eyebrow.is-blue,.stats .eyebrow.is-blue,.steps .eyebrow.is-blue,.bigmar .eyebrow.is-blue,footer .eyebrow.is-blue,.on-dark .eyebrow.is-blue{color:var(--blue-on-dark)}
.announce .eyebrow.is-gold,.stats .eyebrow.is-gold,.steps .eyebrow.is-gold,.bigmar .eyebrow.is-gold,footer .eyebrow.is-gold,.on-dark .eyebrow.is-gold{color:var(--gold-on-dark)}

/* Skip link — must become visible when it takes focus, or it helps nobody. */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus,.skip:focus-visible{left:0;outline:3px solid var(--gold);outline-offset:2px}

/* Long compounds (Dutch especially: "Schoonmaakabonnementen") must hyphenate at
   a real syllable boundary rather than snap mid-word. hyphens:auto uses the
   document's lang; break-word is the fallback for words that still overflow. */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---------------------------------------------------------------------------
   Shared components that appear on EVERY page — including the self-contained
   ones that deliberately don't load site.css (both pricing pages,
   carpet-sofa-mattress, floor-machine-cleaning).
   Those pages still ship the footer payment strip, and site.js still injects
   #pbar into them, so the markup existed with no CSS behind it: the six payment
   logos stacked into a single column, and the price bar rendered as unstyled
   run-together text. Styling lives here so it cannot depend on site.css.
   site.css repeats these rules identically and loads later, so pages that have
   both are unaffected.
   --------------------------------------------------------------------------- */
.pay-methods{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;vertical-align:middle}
.pay-methods img{height:25px;width:auto;display:block}

/* The big payment row under "Pay the way you know". Only the two pricing pages use
   it — the exact pages that don't load site.css — so its rule there never applied
   to anything and the logos rendered as a single stacked column. */
.pay-strip{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;padding:14px 0}
.pay-strip img{height:42px;width:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.10))}
/* Six logos free-wrapping on a phone break 4+2, which reads as an accident.
   Pin them to an even 3x2 so the block looks composed at any narrow width. */
@media(max-width:560px){
  .pay-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;justify-items:center;align-items:center}
  .pay-strip img{height:38px}
}

/* Mobile sticky live-price bar — injected by site.js */
#pbar{display:none}
@media(max-width:640px){
  #pbar{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:79;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;border-radius:14px;padding:10px 16px;text-decoration:none;box-shadow:0 10px 28px -12px rgba(22,38,26,.55);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s}
  #pbar.show{opacity:1;transform:none;pointer-events:auto}
  #pbar small{display:block;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.02em}
  #pbar b{font-family:var(--display);font-size:19px;font-weight:800;color:#9FD86B;line-height:1.2}
  #pbar .go{flex:0 0 auto;font-weight:700;font-size:13.5px;background:var(--grad);padding:9px 14px;border-radius:999px;color:#fff}
}
@media (prefers-reduced-motion:reduce){#pbar{transition:none}}