/* ===========================================================================
   site.css — the shared My Free Water Report design system ("Warm").
   ---------------------------------------------------------------------------
   Created 2026-08-07 for the /raul homepage migration. Before this file the
   site had no shared chrome at all: ~130 hand-written HTML files each carried
   a full inlined <style>, and blog/blog.css was used by 7 of them.

   This file is injected into EVERY .html response by _inject_site_css() in
   server-mfwr.py, immediately after <head> and therefore BEFORE any page's own
   inline <style>. That cascade order is the safety argument: on a specificity
   tie the page's own rules still win, so adding this file cannot repaint a
   page that has not opted in.

   HOW A PAGE OPTS IN
     Put data-site on the <html> tag and delete the page's inline <style>:
       <html lang="en" data-site>
     Layer 1 (tokens) is global and inert on its own. Layer 2 (components) only
     applies inside [data-site], so an un-migrated page is untouched.

   WHERE THE VALUES CAME FROM
     Lifted from the wizard's [data-theme="warm"] ("Neighbor") template (that
     page was index-raul.html; it is index.html as of 2026-08-08),
     which the owner chose as the default after the 2026-07-31 template review.
     The multi-theme engine is gone; Warm is simply the brand now.

   DO NOT add rules here speculatively. This file replaced 205 lines of dead
   CSS in index.html that accumulated exactly that way. If a page needs a
   component, add it when the page needs it.

   NOT for offline deliverables. tools/build_town_report.py output, print/,
   casefiles/ and social/ must keep their CSS inlined because they have to open
   from file:// with no server.
   =========================================================================== */


/* ===========================================================================
   LAYER 1 — DESIGN TOKENS (global, unscoped)
   Declaring a custom property nobody reads costs nothing, so these are safe to
   ship site-wide before any page opts in. None of these names collide with the
   older --ink-900 / --teal-700 / --art-* convention still used by blog.css and
   the generated water pages.
   =========================================================================== */
:root{
  --maxw:1120px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --head-weight:900; --head-tracking:-.02em; --head-transform:none;

  /* surfaces */
  --bg:#eef4ff; --bg2:#e4edfd; --surface:#ffffff; --surface2:#f4f8ff;
  --ink:#122036; --muted:#526080; --faint:#8592ac;
  --line:#dde6f4; --line-strong:#cbd7ec;

  /* brand */
  --accent:#1f6fe0; --accent2:#16b8c4; --on-accent:#ffffff; --accent-ink:#14509f;
  /* --accent-soft was referenced via var(--accent-soft, fallback) in four places
     but never actually declared. Declaring it retires those silent fallbacks. */
  --accent-soft:rgba(31,111,224,.10);

  /* status — traffic-light severity, never brand colour (see BRAND.md) */
  --danger:#e23b57; --danger-soft:rgba(226,59,87,.08);
  --warn:#e0891e;   --warn-soft:rgba(224,137,30,.1);
  --safe:#12a866;   --safe-soft:rgba(18,168,102,.1);

  /* shape + depth */
  --radius:18px; --radius-lg:26px;
  --shadow:0 34px 80px -54px rgba(20,60,140,.35);
  --hero-glow:radial-gradient(70% 60% at 50% 0%,rgba(31,111,224,.12),transparent 70%);
}

/* Keyframes are inherently global, so they are namespaced. An un-migrated page
   defining its own @keyframes spin/pulse cannot collide with these. */
@keyframes mfwr-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mfwr-spin{to{transform:rotate(360deg)}}
@keyframes mfwr-step-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mfwr-log-in{to{opacity:1}}
@keyframes mfwr-blob-float{from{transform:translate(0,0) scale(1)}to{transform:translate(44px,-30px) scale(1.08)}}


/* ===========================================================================
   LAYER 2 — COMPONENTS (scoped to [data-site])
   =========================================================================== */

/* --- base --- */
[data-site]{scroll-behavior:smooth}
[data-site] *{box-sizing:border-box;margin:0}
[data-site] body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
[data-site] h1,[data-site] h2,[data-site] h3{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);line-height:1.06}
[data-site] a{color:inherit}
[data-site] .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
[data-site] section{padding:56px 0}

/* --- top bar --- */
[data-site] .top{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
[data-site] .top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
/* .brand is a <div> on the funnel and an <a href="/"> on content pages, so it
   has to kill the default underline itself. */
[data-site] .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:15px;text-decoration:none}
/* .drop is THE brand mark: the gradient droplet. It replaced the otter. */
[data-site] .drop{width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,var(--accent2),var(--accent));display:grid;place-items:center;color:var(--on-accent);font-size:14px;box-shadow:0 6px 18px -8px var(--accent)}
[data-site] .top .area{color:var(--muted);font-size:12.5px;font-weight:600}
[data-site] .callbtn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--accent-ink);text-decoration:none;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px}
@media(max-width:640px){
  [data-site] .top .area{display:none}
  [data-site] .brand{font-size:13.5px;white-space:nowrap}
  [data-site] .callbtn{font-size:12.5px;padding:7px 11px;white-space:nowrap}
}

/* --- headings + eyebrows --- */
[data-site] .kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;margin-bottom:22px;background:var(--surface)}
[data-site] .kick .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:mfwr-pulse 2.2s infinite}
[data-site] .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
[data-site] .h2{font-size:clamp(26px,4vw,40px);max-width:22ch}
[data-site] .sub{color:var(--muted);font-size:17px;margin-top:14px;max-width:58ch;font-weight:500}
[data-site] .lede{margin-top:20px;font-size:clamp(16px,2.1vw,19px);color:var(--muted);max-width:54ch;font-weight:500}
[data-site] .lede b{color:var(--ink);font-weight:700}

/* --- buttons --- */
/* .btn is used on both <button> and <a>. Without text-decoration:none the
   anchor form renders underlined, which reads as a broken button. */
[data-site] .btn{cursor:pointer;border:0;border-radius:999px;font-family:var(--font-head);font-weight:var(--head-weight);font-size:16px;padding:15px 22px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--on-accent);box-shadow:0 16px 40px -18px var(--accent);transition:transform .15s ease,filter .15s ease;letter-spacing:0;text-decoration:none;display:inline-block;text-align:center}
[data-site] .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
[data-site] .btn:active{transform:translateY(0)}
[data-site] .btn.wide{width:100%;justify-content:center}
[data-site] .btn.lg{font-size:18px;padding:18px 26px}

/* --- ZIP entry --- */
[data-site] .ziprow{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
[data-site] .zipfield{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:4px 4px 4px 20px}
[data-site] .zipfield svg{flex:0 0 auto;opacity:.6}
[data-site] .zipfield input{flex:1;border:0;background:transparent;color:var(--ink);font-size:17px;font-weight:600;padding:14px 0;outline:none;font-family:var(--font-mono);letter-spacing:.08em}
[data-site] .zipfield input::placeholder{color:var(--faint);letter-spacing:0;font-family:var(--font-body)}
[data-site] .zipmeta{margin-top:12px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:var(--faint);font-size:12.5px;font-weight:600}
[data-site] .geo{background:none;border:0;color:var(--accent-ink);font-weight:700;cursor:pointer;font-size:12.5px;display:inline-flex;gap:6px;align-items:center;padding:0}
[data-site] .err{display:none;color:var(--danger);font-size:13px;font-weight:600;margin-top:10px}
[data-site] .err.show{display:block}
[data-site] .trustline{margin-top:26px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12.5px;font-weight:600}
[data-site] .stars{color:var(--warn);letter-spacing:2px}

/* --- findings / report rows --- */
[data-site] .util{font-size:13px;color:var(--muted);font-weight:600}
[data-site] .util b{color:var(--ink);font-weight:800;font-size:16px;display:block;font-family:var(--font-head)}
[data-site] .scanhead{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
[data-site] .scanbody{padding:26px}
[data-site] .scorepill{text-align:right}
[data-site] .scorepill .n{font-family:var(--font-mono);font-size:34px;font-weight:700;line-height:1;color:var(--danger)}
[data-site] .scorepill .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
[data-site] .finding{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
[data-site] .finding:last-child{border-bottom:0}
[data-site] .fbadge{flex:0 0 auto;width:52px;text-align:center}
[data-site] .fbadge .x{font-family:var(--font-mono);font-weight:700;font-size:20px;color:var(--danger);line-height:1}
[data-site] .fbadge .xl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:2px}
[data-site] .fmain{flex:1;min-width:0}
[data-site] .fmain .fn{font-weight:800;font-size:15.5px}
[data-site] .fmain .fe{color:var(--muted);font-size:13.5px;margin-top:3px}
[data-site] .fbar{height:7px;border-radius:6px;background:var(--line);margin-top:9px;overflow:hidden}
[data-site] .fbar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--warn),var(--danger))}
[data-site] .glass{margin-top:6px;font-size:12.5px;color:var(--faint);font-weight:600}
[data-site] details.more{margin-top:14px}
[data-site] details.more summary{cursor:pointer;font-weight:700;color:var(--accent-ink);font-size:14px;list-style:none}
[data-site] details.more summary::-webkit-details-marker{display:none}

/* --- report summary cards ---
   The three numbers that carry the page's promise: how far past the guideline
   the worst result sits, how many results are above it, and how many have no
   federal legal limit at all. Colour is traffic-light severity, never brand. */
[data-site] .sumcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
@media(max-width:560px){[data-site] .sumcards{grid-template-columns:1fr}}
[data-site] .sumcard{background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
[data-site] .sumcard .sn{font-family:var(--font-mono);font-size:32px;font-weight:700;line-height:1;color:var(--ink)}
[data-site] .sumcard .sl{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px;line-height:1.35}
[data-site] .sumcard.bad .sn{color:var(--danger)}
[data-site] .sumcard.warn .sn{color:var(--warn)}

/* the legal-limit frame: legal and safe are not the same word */
[data-site] .legalframe{background:var(--warn-soft);border-radius:18px;padding:16px 20px;margin:0 0 22px;font-size:14.5px;color:var(--muted);font-weight:500}
[data-site] .legalframe b{color:var(--ink);font-weight:800}

/* per-finding legal-limit readout */
[data-site] .limits{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:12px;font-weight:600}
[data-site] .limits div{display:flex;flex-direction:column;gap:2px}
[data-site] .limits .lk{color:var(--faint);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
[data-site] .limits .lv{font-family:var(--font-mono);color:var(--ink);font-weight:700;font-size:13px}
[data-site] .limits .lv.over{color:var(--danger)}
[data-site] .limits .lv.none{color:var(--warn)}

/* --- forms (gate + booker share this grammar) --- */
[data-site] .gform{display:grid;gap:10px;max-width:400px;margin:0 auto;text-align:left}
[data-site] .gform input,[data-site] .bform input{width:100%;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:18px;padding:14px 15px;color:var(--ink);font-size:16px;font-weight:600;outline:none}
[data-site] .gform input:focus,[data-site] .bform input:focus{border-color:var(--accent)}
[data-site] .bform{display:grid;gap:10px;margin-top:18px}
[data-site] .bform input{background:var(--surface2)}
[data-site] .brow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){[data-site] .brow{grid-template-columns:1fr}}
[data-site] .fineprint{font-size:11.5px;color:var(--faint);margin-top:12px;max-width:42ch;margin-left:auto;margin-right:auto}
[data-site] .consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--faint);font-weight:500}
[data-site] .consent input{width:16px;height:16px;margin-top:2px;flex:0 0 auto}

/* --- offer card --- */
[data-site] .offercard{background:var(--surface);border:1px solid var(--line-strong);border-radius:30px;box-shadow:var(--shadow);overflow:hidden}
[data-site] .offertop{padding:30px;border-bottom:1px dashed var(--line-strong);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
[data-site] .offertitle{font-size:23px;max-width:16ch}
[data-site] .pricetag{display:flex;align-items:baseline;gap:4px}
[data-site] .pricetag .d{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--ink)}
[data-site] .pricetag .n{font-family:var(--font-mono);font-size:58px;font-weight:700;line-height:.9;color:var(--ink)}
[data-site] .creditline{color:var(--safe);font-weight:800;font-size:13.5px;margin-top:6px}
[data-site] .incl{padding:26px 30px;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
@media(max-width:640px){[data-site] .incl{grid-template-columns:1fr}}
[data-site] .incl .ii{display:flex;gap:12px;align-items:flex-start}
[data-site] .incl .ic{color:var(--safe);flex:0 0 auto;margin-top:1px}
[data-site] .incl .ih{font-weight:800;font-size:14.5px}
[data-site] .incl .ip{color:var(--muted);font-size:13px;margin-top:2px}
[data-site] .guarantee{padding:18px 30px;background:var(--surface2);border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink)}
[data-site] .guarantee span{display:inline-flex;gap:8px;align-items:center}
[data-site] .guarantee .gk{color:var(--accent-ink)}
[data-site] .anchor{text-align:center;max-width:56ch;margin:0 auto 6px;color:var(--muted);font-size:16px;font-weight:500}
[data-site] .anchor b{color:var(--ink);font-weight:800}
[data-site] .scarcity{text-align:center;margin-top:18px;font-size:13.5px;font-weight:700;color:var(--danger)}
[data-site] .scarcity b{font-family:var(--font-mono)}

/* --- booker: day chips + time windows --- */
[data-site] .scarce{margin-top:8px;font-size:12.5px;color:var(--warn);font-weight:700}
[data-site] .bookbody{padding:24px 26px}
[data-site] .blabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:6px 0 10px}
[data-site] .days{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
[data-site] .days::-webkit-scrollbar{display:none}
[data-site] .day{flex:0 0 auto;width:66px;border:1.5px solid var(--line-strong);background:var(--surface2);border-radius:18px;padding:11px 0;cursor:pointer;text-align:center;transition:.15s}
[data-site] .day .dow{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase}
[data-site] .day .dnum{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--ink)}
[data-site] .day[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
[data-site] .wins{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
[data-site] .chip{flex:1;min-width:140px;border:1.5px solid var(--line-strong);background:var(--surface2);border-radius:16px;padding:13px;cursor:pointer;font-weight:700;font-size:14px;text-align:center;transition:.15s}
[data-site] .chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}

/* --- trust row --- */
[data-site] .creds{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
[data-site] .cred{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:14px 18px;font-weight:700;font-size:13.5px;display:flex;gap:10px;align-items:center}
[data-site] .cred b{font-family:var(--font-mono);color:var(--accent-ink)}

/* --- FAQ / answer engine --- */
[data-site] .faq{background:var(--bg2)}
[data-site] .qa{border-bottom:1px solid var(--line)}
[data-site] .qa summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center}
[data-site] .qa summary::-webkit-details-marker{display:none}
[data-site] .qa summary .plus{flex:0 0 auto;color:var(--accent-ink);font-size:22px;font-weight:400;transition:transform .2s}
[data-site] .qa[open] summary .plus{transform:rotate(45deg)}
[data-site] .qa .ans{padding:0 0 22px;color:var(--muted);font-size:15px;max-width:70ch}
[data-site] .qa .ans b{color:var(--ink)}

/* --- footer --- */
[data-site] footer{padding:40px 0;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
[data-site] footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
[data-site] footer a{color:var(--muted);text-decoration:none;margin-left:16px}
@media(max-width:560px){[data-site] footer a{margin:0 16px 0 0}}


/* ===========================================================================
   LAYER 2c — DOCUMENT PAGES
   Long-form prose: privacy, terms, sms-terms, about, and anything else that is
   a page of writing rather than a funnel step. The wizard's components assume
   short, centred, one-idea-per-screen copy; a legal page needs the opposite,
   so it gets its own small vocabulary instead of overloading .step-in.

   Added 2026-08-08 for Phase 5 of the homepage migration. `[data-site] *` sets
   margin:0 globally, which is right for the funnel and wrong for prose — every
   rhythm rule below is putting that margin back deliberately, so do not
   "simplify" them away.
   =========================================================================== */
[data-site] .doc{max-width:760px;margin:0 auto;padding:0 22px 8px;font-size:17px;line-height:1.72}
[data-site] .doc h1{font-size:clamp(30px,5.4vw,42px);line-height:1.1;margin:44px 0 8px}
[data-site] .doc h2{font-size:clamp(20px,3.4vw,26px);line-height:1.2;margin:38px 0 10px}
[data-site] .doc h3{font-size:17.5px;margin:26px 0 6px}
[data-site] .doc p{margin:0 0 16px;color:var(--ink)}
[data-site] .doc ul,[data-site] .doc ol{margin:0 0 16px;padding-left:22px}
[data-site] .doc li{margin:6px 0}
/* Prose links are underlined — in a wall of text, colour alone is not enough to
   mark a link. A link that is styled as a button is exempt: it already reads as
   an affordance, and the underline just makes it look broken. */
[data-site] .doc a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
[data-site] .doc a:hover{text-decoration-thickness:2px}
[data-site] .doc a.btn{color:var(--on-accent);text-decoration:none;display:inline-block}
/* .doc a.btn above outranks the single-class .btn-ghost rule, which made ghost
   buttons render white-on-white inside prose. Match its specificity. */
[data-site] .doc a.btn.btn-ghost{color:var(--accent-ink)}
[data-site] .doc b,[data-site] .doc strong{font-weight:800}
[data-site] .doc hr{border:0;border-top:1px solid var(--line);margin:30px 0}
[data-site] .doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
[data-site] .doc th,[data-site] .doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
[data-site] .doc th{font-weight:800;color:var(--muted);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
/* wide content must scroll inside itself, never widen the page */
[data-site] .doc .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the dateline under a document title */
[data-site] .doc .eff{color:var(--faint);font-size:14.5px;font-weight:600;margin:0 0 24px}

/* "the short version" summary box that opens a policy */
[data-site] .callout{background:var(--accent-soft);border-radius:var(--radius);padding:18px 22px;margin:24px 0 8px}
[data-site] .callout b{color:var(--accent-ink);font-weight:800}
[data-site] .callout ul{margin:8px 0 0}
[data-site] .callout li{margin:5px 0;color:var(--ink)}
[data-site] .callout p:last-child{margin-bottom:0}

/* a bordered aside: contact block, address card, "what to expect" panel */
[data-site] .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:18px 0;line-height:1.8}
[data-site] .card p:last-child{margin-bottom:0}

/* breadcrumb above a content page's hero */
[data-site] .crumb{max-width:760px;margin:0 auto;padding:12px 22px 0;font-size:13px;color:var(--faint);font-weight:600}
[data-site] .crumb a{color:var(--faint);text-decoration:none}
[data-site] .crumb a:hover{color:var(--accent-ink)}
[data-site] .crumb [aria-current]{color:var(--muted)}

/* --- content-page hero ---
   The commercial hubs (softener, Reverse Osmosis (RO), hard water) open with a
   centred hero rather than a wizard step. */
[data-site] .pagehero{background:var(--hero-glow),linear-gradient(180deg,var(--bg2),var(--bg));padding:46px 0 30px;text-align:center;border-bottom:1px solid var(--line)}
[data-site] .pagehero h1{font-size:clamp(28px,5vw,42px);line-height:1.08;margin:0 auto 12px;max-width:22ch}
[data-site] .pagehero .lede{margin:0 auto 18px;max-width:62ch;text-align:center}
[data-site] .pagehero .byline{font-size:13.5px;color:var(--muted);margin:10px 0 14px;font-weight:600}
[data-site] .pagehero .byline a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* --- comparison cards ---
   .does / .doesnt carry a traffic-light edge because they are a claim about
   what a product fixes and what it does not: that is a verdict, not branding. */
/* 200px, not 230: inside the 760px .doc column three cards would not fit at
   230 and a three-up row broke to 2 + 1. */
[data-site] .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
[data-site] .cards .card{margin:0}
[data-site] .card .big{font-family:var(--font-mono);font-size:30px;font-weight:700;line-height:1;color:var(--accent-ink);margin-bottom:8px}
[data-site] .card b{display:block;margin-bottom:4px}
[data-site] .card.does{border-left:4px solid var(--safe)}
[data-site] .card.doesnt{border-left:4px solid var(--danger)}

/* verdict words inside a comparison table */
[data-site] .yes{color:var(--safe);font-weight:800}
[data-site] .no{color:var(--danger);font-weight:800}
[data-site] .part{color:var(--warn);font-weight:800}

/* --- expandable detail block --- */
[data-site] .doc details{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:10px 0;background:var(--surface)}
[data-site] .doc details summary{font-weight:800;cursor:pointer}
[data-site] .doc details p:last-child{margin-bottom:0}

/* --- closing call to action --- */
[data-site] .cta-band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;margin:36px 0;box-shadow:var(--shadow)}
[data-site] .cta-band h2{margin-top:0}
[data-site] .btn-ghost{background:var(--surface);color:var(--accent-ink);border:1.5px solid var(--line-strong);box-shadow:none;text-decoration:none}
[data-site] .btn-ghost:hover{background:var(--surface2)}
[data-site] .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0}

/* --- discovery grid ---
   The columns of real links that let a reader (and a crawler) reach the water
   systems, the contaminant research and the guides from the homepage. The
   wizard replaced a homepage that linked out; without this, the site's
   strongest page passed equity to two legal pages and nothing else. */
[data-site] .linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px 30px;margin-top:26px}
[data-site] .linkcol h3{font-size:15px;margin-bottom:4px}
[data-site] .linkcol .colnote{font-size:13px;color:var(--faint);font-weight:500;margin-bottom:12px}
[data-site] .linkcol ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
[data-site] .linkcol a{color:var(--accent-ink);font-weight:600;font-size:14.5px;text-decoration:none}
[data-site] .linkcol a:hover{text-decoration:underline}
[data-site] .linkcol .more{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:700}

/* --- the full site footer ---
   Carries the site nav, the contractor licence line, the NAP block, the legal
   links and the data-source credit. The minimal `footer` component above is the
   funnel's footer; this is the one every content page ends with. It is a class
   on <footer>, so it beats the element rule above on specificity — that is
   deliberate, not an accident of ordering. */
[data-site] .sitefoot{background:var(--ink);color:#c7d2e6;font-size:13.5px;line-height:1.7;text-align:center;padding:30px 22px 44px;margin-top:56px;border-top:0}
[data-site] .sitefoot a{color:#9ad6ff;text-decoration:none;margin:0}
[data-site] .sitefoot a:hover{text-decoration:underline}
[data-site] .sitefoot .foot-nav{margin:0 0 16px;font-size:13.5px;font-weight:600}
[data-site] .sitefoot .sep{color:#5d6b85;padding:0 6px}
[data-site] .sitefoot .drop{width:30px;height:30px;font-size:16px;margin:0 auto 12px}
[data-site] .sitefoot .lic{color:#e6edf8;font-weight:700;text-decoration:underline;text-underline-offset:2px}
[data-site] .sitefoot .nap{margin-top:8px;color:#9aa8c2;font-size:13px}
[data-site] .sitefoot .nap a{color:#c7d2e6}
[data-site] .sitefoot .foot-legal{margin-top:6px;font-size:13px}
[data-site] .sitefoot .foot-source{margin-top:10px;color:#8593ae;font-size:12.5px}


/* ===========================================================================
   LAYER 2b — THE GUIDED WIZARD
   The step machine used by the homepage. /book and /quiz reuse the day-chip
   and one-tap-option grammar above without needing the step machine itself.
   =========================================================================== */
[data-site] .flowbar{position:sticky;top:0;z-index:36;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
[data-site] .flowbar-in{display:flex;align-items:center;gap:14px;height:54px}
[data-site] .fb-back{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;font-size:17px;line-height:1}
[data-site] .fb-back:hover{background:var(--surface2)}
[data-site] .fb-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
[data-site] .fb-title{font-weight:800;font-size:13px}
[data-site] .fb-step{font-size:11px;color:var(--faint);font-weight:600}
[data-site] .fb-prog{flex:0 0 130px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
[data-site] .fb-prog span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .5s cubic-bezier(.4,0,.2,1)}
@media(max-width:560px){
  [data-site] .fb-prog{flex-basis:88px}
  [data-site] .fb-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
}

[data-site] #flow{position:relative;overflow:hidden}
[data-site] #flow .step{position:relative;z-index:1}
/* Scoped to #flow deliberately. ".step" is a generic name and an unscoped
   `display:none` on it silently blanked an unrelated step list on /thank-you.
   The wizard's steps only ever live inside #flow, so the rule lives there. */
[data-site] #flow .step{display:none}
[data-site] #flow .step.active{display:block;animation:mfwr-step-in .45s cubic-bezier(.16,1,.3,1)}
/* The markup is <div class="wrap step-in">, and this rule comes after .wrap, so
   a padding SHORTHAND here wipes .wrap's `padding:0 22px`. On a desktop the
   660px max-width hides that; on a phone the headline, the ZIP field and the
   CTA all ran flush into the screen edge. Keep the horizontal inset explicit —
   never write a padding shorthand on a class that rides along with .wrap. */
/* Each wizard step is a <section>, so it inherited the sitewide
   `section{padding:56px 0}`. Stacked on .step-in's own 54px that put 110px of
   nothing between the header and the first word on EVERY step, which on a
   375x812 phone (87.6% of this page's traffic) pushed the ZIP field to y=542.
   The wizard controls its own vertical rhythm; the sitewide rule does not apply. */
[data-site] #flow .step{padding:0}
[data-site] .step-in{max-width:704px;margin:0 auto;padding:20px 22px 96px;min-height:56vh}
[data-site] .step-in.center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ===== Wizard type scale (conversion pass, 2026-08-18) =================
   87.6% of this page's traffic is a phone, and the funnel's own h1 had NO
   size rule at all: it was rendering at the browser default 2em/32px. Every
   size here is scoped to #flow so the shared stylesheet's other pages keep
   their own scale. Inputs stay >=16px because iOS zooms the viewport on focus
   below that, which throws a phone user out of the flow mid-form. */
[data-site] #flow h1{font-size:clamp(38px,8.6vw,60px);line-height:1.02;margin:0 0 4px}
[data-site] #flow .h2{font-size:clamp(30px,6.6vw,44px);line-height:1.06}
[data-site] #flow .lede{font-size:clamp(18px,4.6vw,22px);line-height:1.5;margin-top:16px}
[data-site] #flow .sub{font-size:clamp(17px,4.2vw,20px);line-height:1.5}
[data-site] #flow .kick{font-size:13px;padding:8px 15px;margin-bottom:16px}
[data-site] #flow .eyebrow{font-size:13px}

/* Tap targets. 44px is the Apple/WCAG floor; the primary action gets 58 so it
   reads as the obvious thing to press, not one control among several. */
[data-site] #flow .btn{font-size:18px;padding:17px 24px;min-height:56px}
[data-site] #flow .btn.lg{font-size:20px;padding:19px 28px;min-height:60px}
[data-site] #flow .opt{font-size:18px;padding:20px 20px;min-height:64px}
/* The bigger ZIP type needs a wider row to sit in. At the inherited 520px the
   22px placeholder clipped to "Enter your ZIP cod" on desktop, where the field
   and the (also larger) button share one line. On a phone the row wraps and the
   field takes the full width, which is why this only ever showed up at >=640px. */
[data-site] #flow .ziprow{max-width:620px}
[data-site] #flow .zipfield{padding:5px 5px 5px 20px;min-width:260px}
[data-site] #flow .zipfield input{font-size:22px;padding:16px 0}
[data-site] #flow .ziprow .btn{flex:0 0 auto;white-space:nowrap}
[data-site] #flow .gform input,[data-site] #flow .bform input{font-size:17px;padding:17px 16px;min-height:58px}
[data-site] #flow .chip{font-size:16.5px;min-height:52px}
[data-site] #flow .zipmeta,[data-site] #flow .geo{font-size:14px}
[data-site] #flow .microtrust{font-size:14px}

/* All three quiz questions share one screen now, so they need separating from
   each other rather than from a step transition. .q-k carries the question
   itself here, not a "2 of 3" counter, so it is sized as a question. */
[data-site] #flow .q+.q{margin-top:30px}
[data-site] #flow .q-k{font-size:19px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:12px;line-height:1.25}
[data-site] #flow .opts{margin-top:0}
[data-site] #flow .btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
[data-site] #flow .btn[disabled]:hover{transform:none;filter:none}

/* ===== sticky book bar ================================================
   Owns the bottom of the viewport from the reveal onward. .step-in carries
   96px of bottom padding so page content always clears it. */
[data-site] .bookbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-strong);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
[data-site] .bookbar[hidden]{display:none}
[data-site] .bookbar-in{max-width:704px;margin:0 auto;display:flex;gap:10px;align-items:stretch}
[data-site] .bookbar-go{flex:1;min-height:58px;font-size:18px;padding:16px 18px;display:flex;align-items:center;justify-content:center}
[data-site] .bookbar-ask{flex:0 0 auto;min-height:58px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line-strong);color:var(--accent-ink);
  font-family:var(--font-body);font-weight:700;font-size:13.5px;line-height:1.15;text-align:center}
[data-site] .bookbar-ask:hover{border-color:var(--accent)}
/* The floating FAB and this bar both want the bottom-right. Measured on the
   live page: the FAB covered 18% of the primary CTA and swallowed taps inside
   that patch. When the bar is up it hosts "Ask a plumber" and the FAB stands
   down; on the ZIP step there is no bar and the FAB behaves normally. */
[data-site] body.mfwr-flow-live .mfwr-ap-fab{display:none}

/* ===== booking: the address leads ===================================== */
[data-site] .addrlead{display:grid;gap:10px;margin-bottom:14px}
[data-site] #flow .addrlead input{font-size:18px;min-height:62px;border-width:2px}
[data-site] #flow .addrlead input:placeholder-shown{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
[data-site] .bconfirm{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface2);border:1.5px solid var(--line);border-radius:18px;padding:13px 15px;margin-bottom:10px}
[data-site] .bconfirm[hidden]{display:none}
[data-site] .bconfirm-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
[data-site] .bconfirm-txt b{font-size:15px;font-weight:700;color:var(--ink);word-break:break-word}
[data-site] .askline{text-align:center;font-size:14.5px;color:var(--muted);margin:2px 0 10px}
[data-site] .askline button{background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
[data-site] .bconfirm-edit{flex:0 0 auto;background:none;border:0;color:var(--accent-ink);
  font-family:var(--font-body);font-weight:700;font-size:14.5px;cursor:pointer;padding:8px;min-height:44px}

/* one-tap options */
[data-site] .opts{display:grid;gap:12px;margin-top:26px}
[data-site] .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:22px;padding:18px 20px;font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
[data-site] .opt:hover{border-color:var(--accent);transform:translateY(-1px)}
[data-site] .opt.sel{border-color:var(--accent);background:var(--surface2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
[data-site] .q{display:none}
[data-site] .q.active{display:block;animation:mfwr-step-in .35s ease}
[data-site] .q-k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}

/* scan (the labour-illusion step) */
[data-site] .scan-ring{position:relative;width:132px;height:132px;margin:18px auto 0}
[data-site] .scan-ring>span{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);animation:mfwr-spin 1s linear infinite}
[data-site] .scan-ring>span:nth-child(2){inset:13px;border-top-color:var(--accent2);animation-duration:1.4s}
[data-site] .scan-ring>span:nth-child(3){inset:26px;border-top-color:var(--danger);animation-duration:1.8s}
[data-site] .scan-ring>b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--ink)}
[data-site] .scan-log{margin-top:26px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);min-height:96px;text-align:left;max-width:430px;width:100%}
[data-site] .scan-log div{opacity:0;animation:mfwr-log-in .3s forwards;padding:3px 0}
[data-site] .scan-log div b{color:var(--safe)}

/* reveal */
[data-site] .reveal-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(88px,20vw,168px);line-height:.9;color:var(--danger);letter-spacing:-.04em}
[data-site] .reveal-lede{font-size:18px;color:var(--muted);margin-top:16px;max-width:46ch;font-weight:500}
[data-site] .reveal-lede b{color:var(--ink);font-weight:800}
[data-site] .reveal-note{margin:24px auto 28px;max-width:46ch;font-size:14.5px;color:var(--muted);padding:16px 20px;text-align:center;background:var(--danger-soft);border-radius:20px}
[data-site] .microtrust{margin-top:20px;font-size:12.5px;color:var(--faint);font-weight:600}

/* personalised recommendation */
[data-site] .rec{margin-top:24px;border:1.5px solid var(--accent);border-radius:30px;background:var(--surface2);padding:24px}
[data-site] .rec-k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
[data-site] .rec h3{font-size:21px;margin-bottom:8px}
[data-site] .rec p{color:var(--muted);font-size:15px}
[data-site] .rec p b{color:var(--ink)}


/* ===========================================================================
   LAYER 3 — AMBIENT BLOBS
   The soft background shapes that give Warm its character. Purely decorative,
   pointer-events:none, and fully disabled under prefers-reduced-motion.
   =========================================================================== */
[data-site] .blobs{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
[data-site] .blobs i{position:absolute;display:block;border-radius:52% 48% 61% 39%/44% 59% 41% 56%;filter:blur(2px);opacity:.55}
[data-site] .blobs .b1{width:520px;height:520px;left:-180px;top:-120px;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);animation:mfwr-blob-float 22s ease-in-out infinite alternate}
[data-site] .blobs .b2{width:440px;height:440px;right:-150px;top:20%;background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%);animation:mfwr-blob-float 27s ease-in-out infinite alternate-reverse}
[data-site] .blobs .b3{width:380px;height:380px;left:6%;bottom:-140px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);animation:mfwr-blob-float 31s ease-in-out infinite alternate}


/* ===========================================================================
   MOTION + PRINT
   =========================================================================== */
@media(prefers-reduced-motion:reduce){
  [data-site] #flow .step.active,[data-site] .q.active{animation:none}
  [data-site] .blobs i{animation:none}
  [data-site] .kick .dot{animation:none}
}
@media print{
  [data-site] .flowbar,[data-site] .blobs{display:none!important}
  [data-site] #flow .step{display:block!important}
}
