/* ==========================================================================
   FilterXpert public website — brand stylesheet
   --------------------------------------------------------------------------
   Plain CSS on purpose. The approved design was prototyped with the Tailwind
   CDN, but a marketing site lives or dies on how fast Google sees it, and a
   render-blocking CDN script is the wrong first thing to load. Same tokens as
   the product (frontend/shared/theme.css and the filterxpert-website skill),
   expressed the way this codebase actually ships: static files, no build step.

   Two gradients, two jobs, never blurred:
     --grad-brand  (blue to aqua)  = primary action / this is the brand
     --grad-good   (emerald)       = positive / verified / active
   Everything else stays neutral slate so those two keep their meaning.

   t255 (29 Oct 2026): moved onto the FilterXpert brand colours - the same
   tokens as the approved brand package: Deep Navy #0B1F4D for headings, the
   footer and dark bands; Brand Blue #1F6FEB -> Sky #2A9DF4 -> Aqua #12C2E9 for
   the water gradient; Ink #0F172A body text, Muted #475569, Line #DBE3EF.
   Aqua is never used for text on white (2.1:1).
   ========================================================================== */

:root{
  --navy:#0B1F4D; --navy-2:#163A8C;
  --blue-600:#1F6FEB; --blue-500:#2A9DF4; --cyan-500:#12C2E9; --cyan-600:#12C2E9;
  --emerald-600:#059669; --teal-600:#0d9488;
  --ink:#0F172A;            /* body text                    */
  --ink-soft:#334155;       /* strong body                  */
  --muted:#475569;          /* supporting copy (6.7:1)      */
  --faint:#94A3B8;          /* labels and icons only        */
  --line:#DBE3EF;           /* hairlines and card borders   */
  --line-soft:#EEF2F7;
  --paper:#ffffff;
  --wash:#F4F7FB;           /* section grounds              */
  --blue-wash:#EAF2FE;
  --emerald-wash:#ecfdf5;
  --amber:#F59E0B;          /* offers and "read this" only  */
  --grad-brand:linear-gradient(90deg,var(--blue-600),var(--blue-500) 55%,var(--cyan-600));
  --grad-brand-br:linear-gradient(135deg,var(--blue-600),var(--blue-500),var(--cyan-500));
  --grad-navy:linear-gradient(135deg,var(--navy-2),var(--navy));
  --grad-good:linear-gradient(90deg,var(--emerald-600),var(--teal-600));
  --shadow-sm:0 2px 12px -4px rgba(31,111,235,.20);
  --shadow-card:0 12px 36px -28px rgba(15,23,42,.22);
  --shadow-lift:0 22px 50px -32px rgba(15,23,42,.35);
  --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:28px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.12;font-weight:700;text-wrap:balance;color:var(--navy)}
h1{font-size:clamp(30px,5.2vw,52px);letter-spacing:-.03em}
h2{font-size:clamp(24px,3.4vw,36px)}
h3{font-size:19px}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600);
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font:600 15px/1 var(--font);padding:14px 22px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:var(--shadow-sm)}   /* solid Brand Blue: white on it reads 4.6:1, white on aqua would not */
.btn-primary:hover{background:#1A5FCC;box-shadow:0 10px 28px -8px rgba(31,111,235,.4)}
.btn-ghost{background:#fff;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-500);color:var(--blue-600)}
.btn-good{background:var(--grad-good);color:#fff}
.btn-lg{padding:16px 28px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:default}

/* ---- pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;padding:6px 13px;
}
.pill-brand{background:var(--blue-wash);color:#1d4ed8}
.pill-good{background:var(--emerald-wash);color:#047857}
.dot{width:8px;height:8px;border-radius:999px;background:var(--grad-brand);position:relative}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;background:var(--grad-brand-br);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:16px;
  box-shadow:0 8px 20px -6px rgba(37,99,235,.45);flex:none;
}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.05}
.brand-logo{height:34px;width:auto;flex:none}
@media(min-width:820px){ .brand-logo{height:40px} }
.brand-tag{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.nav{display:none;gap:26px;font-size:14px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:12px}
.header-phone{display:none;font-weight:700;font-size:14px;color:var(--ink-soft)}
@media(min-width:820px){ .nav{display:flex} .header-phone{display:inline} }
.nav a,.header-phone,.header-cta .btn{white-space:nowrap}   /* t258: a fifth menu item (Our story) - nothing wraps */
@media(min-width:820px) and (max-width:1099px){ .nav{gap:16px} .header-phone{display:none} }
/* fnd_101: a sixth item (Find your purifier). The logo never shrinks; on a tablet the two items the footer also carries step out. */
.brand{flex:none}
@media(min-width:820px) and (max-width:1023px){ .nav a.nav-wide{display:none} }

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% -20%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(700px 380px at 92% 8%, rgba(6,182,212,.12), transparent 50%),
    linear-gradient(105deg,#fff 0%,#f8fafc 45%,#eff6ff 100%);
}
.hero .wrap{padding-top:64px;padding-bottom:64px}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.15fr .85fr} }
.hero h1{margin-top:20px}
.hero .grad{background:linear-gradient(90deg,var(--blue-600),var(--blue-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:16px;max-width:30em;font-size:clamp(15px,1.6vw,17px);color:var(--muted);font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* the little "how water gets clean" card */
.spec-card{
  background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-lift);backdrop-filter:blur(8px);
}
.spec-steps{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:18px}
.spec-step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1}
.spec-ico{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:19px}
.spec-arrow{color:var(--faint);font-size:14px}
.spec-label{font-size:11px;font-weight:600;color:var(--muted)}

/* ---- generic sections ---- */
.section{padding:64px 0}
.section-wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:34em;margin-bottom:36px}
.section-head h2{margin-top:12px}
.section-head p{margin-top:12px;color:var(--muted)}

/* ---- cards grid ---- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .grid-3{grid-template-columns:1fr 1fr 1fr} .grid-4{grid-template-columns:repeat(4,1fr)} }
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--shadow-card);
}
.card-ico{width:48px;height:48px;border-radius:14px;background:var(--grad-brand-br);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:14px;color:var(--blue-600)}

/* "Why FilterXpert" - every tile is a positive assurance, so the badges take
   the emerald gradient (--grad-good = positive/verified), and the brand
   gradient stays where it belongs: on the section's primary CTA. */
.card-ico.good{background:var(--grad-good)}
.cta-nudge{text-align:center;color:var(--muted);margin-top:38px;font-size:15.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:16px}

/* "How we work" explainer - reading page, so the copy gets a real measure,
   and each promise ends in an emerald callout: the one thing YOU can do.
   Emerald on its tinted wash = the positive colour doing its stated job. */
.prose{max-width:44em}
.prose p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin-top:14px}
.you-can{display:flex;gap:10px;align-items:flex-start;max-width:44em;margin-top:22px;
  background:var(--emerald-wash);border:1px solid #a7f3d0;border-radius:var(--r);
  padding:13px 16px;font-size:14.5px;color:#047857;font-weight:500}
.you-can .k{flex:none}

/* trust row */
.trust{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:820px){ .trust{grid-template-columns:repeat(4,1fr)} }
.trust-item{display:flex;flex-direction:column;gap:4px}
.trust-num{font-size:26px;font-weight:800;letter-spacing:-.02em}
.trust-lbl{font-size:13px;color:var(--muted);font-weight:500}

/* ---- the conversational lead form ---- */
.leadwrap{background:var(--grad-navy);border-radius:var(--r-xl);padding:clamp(20px,4vw,44px);box-shadow:var(--shadow-lift)}
.leadwrap .eyebrow{color:rgba(255,255,255,.85)}
.leadwrap h2{color:#fff}
.leadwrap .lead-intro{color:rgba(255,255,255,.9);margin-top:10px}
.lead-card{background:#fff;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);margin-top:24px;box-shadow:var(--shadow-card)}
.lead-progress{height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-bottom:22px}
.lead-bar{height:100%;width:20%;background:var(--grad-brand);border-radius:999px;transition:width .35s ease}
.lead-step{display:none}
.lead-step.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lead-q{font-size:20px;font-weight:700;letter-spacing:-.02em}
.lead-hint{color:var(--muted);font-size:14px;margin-top:6px}
.choices{display:grid;gap:10px;margin-top:18px}
@media(min-width:520px){ .choices.two{grid-template-columns:1fr 1fr} }
.choice{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:15px 16px;cursor:pointer;
  font:600 15px/1.3 var(--font);color:var(--ink-soft);transition:border-color .15s,background .15s,transform .1s;
}
.choice:hover{border-color:var(--blue-500)}
.choice:active{transform:translateY(1px)}
.choice.sel{border-color:var(--blue-600);background:var(--blue-wash);color:#1d4ed8}
.choice .c-ico{font-size:20px;flex:none}
.field{margin-top:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 15px;font:500 15px/1.4 var(--font);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;background:#fff;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 4px var(--blue-wash)}
.lead-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.lead-back{background:none;border:none;color:var(--muted);font:600 14px var(--font);cursor:pointer;padding:8px 4px}
.lead-back:hover{color:var(--ink)}
.lead-msg{font-size:14px;margin-top:10px;font-weight:500}
.lead-msg.err{color:#b91c1c}
.lead-done{text-align:center;padding:14px 0}
.lead-done .tick{width:64px;height:64px;border-radius:999px;background:var(--grad-good);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto 16px}
.lead-done h3{font-size:22px}
.lead-done .ref{display:inline-block;margin-top:12px;font-weight:700;background:var(--emerald-wash);color:#047857;border-radius:999px;padding:6px 16px;font-size:14px}

/* ---- FAQ accordion ---- */
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:none;text-align:left;padding:18px 20px;font:700 16px var(--font);color:var(--ink);cursor:pointer}
.faq-chev{width:30px;height:30px;border-radius:999px;background:var(--line-soft);display:grid;place-items:center;flex:none;transition:transform .25s,background .25s,color .25s;color:var(--muted)}
.faq-item.open .faq-chev{transform:rotate(180deg);background:var(--grad-brand);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:15px}
.faq-a > div{padding:0 20px 20px}

/* ---- branch strip / branch page ---- */
.branch-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card)}
.branch-card h3{display:flex;align-items:center;gap:10px}
.branch-meta{margin-top:14px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-soft)}
.branch-meta .row{display:flex;gap:10px;align-items:flex-start}
.branch-meta .k{color:var(--faint);flex:none;width:22px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}

/* ---- footer ---- */
.site-footer{background:var(--navy);color:#E8EEF9;margin-top:8px}
.site-footer a{color:#E8EEF9}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-bar{height:4px;background:var(--grad-brand)}
.foot-top{display:grid;gap:28px 24px;grid-template-columns:1fr 1fr;padding-top:36px;padding-bottom:28px}
.foot-fx,.foot-talk{grid-column:1/-1}
@media(min-width:820px){
  .foot-top{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding-top:48px;padding-bottom:36px}
  .foot-fx,.foot-talk{grid-column:auto}
}
.foot-fx-logo{height:40px;width:auto}
.foot-tag{margin:12px 0 6px;font-weight:800;font-size:18px;color:#fff}
.foot-fx p{font-size:14px;line-height:1.55;color:#9FB3D9;max-width:22em}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--cyan-500);margin:0 0 12px}
.foot-col a{display:block;font-size:14px;margin-bottom:9px}
.foot-muted{display:block;font-size:13px;color:#9FB3D9}
.site-footer .foot-call{font-size:20px;font-weight:800;color:#fff;margin-bottom:2px}
.site-footer .foot-wa{display:inline-block;margin-top:12px;padding:10px 16px;border-radius:12px;background:var(--blue-600);color:#fff;font-weight:700;font-size:14px}
.site-footer .foot-wa:hover{text-decoration:none;background:#1A5FCC}
/* the mother company: Twinsons logo, legal name, address and registrations, certificate marks */
.foot-mother{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;padding-bottom:24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.foot-tw{height:64px;width:auto;flex:none}
.foot-co{flex:1 1 280px;min-width:0}
.foot-co b{color:#fff;font-size:15px}
.foot-co div{font-size:12.5px;line-height:1.6;color:#9FB3D9}
.foot-marks{display:flex;gap:14px;align-items:center;margin-left:auto}
.foot-marks img{height:34px;width:auto;opacity:.95}
@media(min-width:820px){ .foot-tw{height:72px} .foot-marks img{height:40px} }
@media(max-width:819px){ .foot-marks{order:2} .foot-co{order:3;flex-basis:100%} }
.nw{white-space:nowrap}
.foot-legal{background:#071635;font-size:12px;color:#9FB3D9}
.foot-legal .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:14px;padding-bottom:84px}   /* room under the last line for the floating Chat button */
.foot-legal a{color:#C9D6EE}
.foot-tm{flex-basis:100%;font-size:11.5px;line-height:1.5;color:#7F93BD}
.foot-legal sup{font-size:9px;line-height:0}

/* ---- Our story (t258) ---- */
.story-quote{margin:30px 0 0;max-width:44em;border-left:4px solid var(--blue-600);padding:6px 0 6px 20px}
.story-quote blockquote{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
.story-quote figcaption{margin-top:10px;font-size:14px;font-weight:600;color:var(--muted)}
.story-promises{display:grid;gap:10px;max-width:44em}
.story-promises .you-can{margin-top:0;background:var(--blue-wash);border-color:#c7dcfb;color:var(--navy)}

/* reveal-on-scroll (progressive; content is visible without JS) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---- "we service every brand": two reels ----------------------------------
   Brand NAMES as uniform wordmarks, not copied logos - lawful to say we
   service them, and no trademarked artwork on the page. The disclaimer scrolls
   the other way underneath, on the amber band the design system reserves for
   "read this". Both pause on hover, and reduced-motion turns each reel into a
   plain wrapped list that anyone can read at rest. The tracks carry the list
   twice so translateX(-50%) loops without a visible seam. */
.brandwall{position:relative;overflow:hidden;margin-top:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brandwall-track{display:flex;align-items:center;gap:14px;width:max-content;
  padding:10px 0;animation:brand-scroll 48s linear infinite}
.brandwall:hover .brandwall-track{animation-play-state:paused}
.brand-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:128px;height:62px;padding:0 24px;border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:var(--shadow-card);
  font-weight:800;font-size:17px;letter-spacing:.01em;color:#3f3f46;white-space:nowrap;filter:grayscale(1)}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.disc-reel{overflow:hidden;margin-top:16px;background:#fffbeb;
  border-top:1px solid #fde68a;border-bottom:1px solid #fde68a;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.disc-reel-track{display:flex;gap:64px;width:max-content;padding:9px 0;
  animation:brand-scroll 64s linear infinite reverse;
  font-size:12.5px;font-weight:600;color:#92400e;white-space:nowrap;letter-spacing:.01em}
.disc-reel:hover .disc-reel-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .brandwall-track,.disc-reel-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:12px}
}

/* ---- Google reviews on branch pages ---- */
.stars{color:var(--amber);font-size:15px;letter-spacing:2px;white-space:nowrap}
.stars-off{color:var(--line)}
.rev-card{display:flex;flex-direction:column;gap:8px}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rev-text{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ---- "Find the right purifier" (fnd_101) ---------------------------------
   One question at a time on the same card as the lead form, then the results:
   category by category, the best match first, extras, plants, and the send
   box. Built for a phone first; two or three cards a row on a desktop. */
.finder-wrap{max-width:860px;margin:0 auto}
#finder{scroll-margin-top:84px}
.fd-card{margin-top:0}
.fd-count{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.fd-q{outline:none}
.fd-q:focus-visible,.fd-top:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px;border-radius:6px}
.fd-sub{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:2px}
.choice.sel .fd-sub{color:#1d4ed8}
.fd-places .choice{padding:16px}
.fd-tick{width:22px;height:22px;flex:none;border:2px solid var(--line);border-radius:7px;background:#fff;display:grid;place-items:center}
.choice.sel .fd-tick{border-color:var(--blue-600);background:var(--blue-600)}
.choice.sel .fd-tick::after{content:'';width:10px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translateY(-1px) rotate(-45deg)}
.fd-typed{margin-top:18px}
.fd-row{display:flex;gap:10px}
.fd-row input{flex:1;min-width:0}
.fd-row .btn{flex:none}
.fd-top{font-size:clamp(22px,3vw,30px);outline:none}
.fd-head .chips{margin-top:12px}
.fd-change{margin-top:8px;padding-left:0}
.fd-note{margin-top:12px;color:var(--ink-soft);font-size:15px}
.fd-tip{background:var(--blue-wash);border-radius:var(--r-sm);padding:10px 14px;color:#1e3a8a;font-size:14.5px}
.fd-group{margin-top:28px}
.fd-group h3{font-size:20px;margin-bottom:14px}
.fd-grid{display:grid;gap:14px}
@media(min-width:600px){ .fd-grid{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .fd-grid{grid-template-columns:1fr 1fr 1fr} }
.fd-item{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-card);min-width:0}
.fd-item.best{border-color:var(--blue-600);box-shadow:0 18px 40px -26px rgba(31,111,235,.55)}
.fd-item.on{background:#f8fbff}
.fd-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--blue-600);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:5px 11px}
.fd-img{height:160px;border-radius:14px;background:#fff center/contain no-repeat;border:1px solid var(--line-soft);margin-bottom:14px}
.fd-noimg{display:grid;place-items:center;background:var(--wash)}
.fd-item h4{margin:0;font-size:17px;line-height:1.25;color:var(--navy);overflow-wrap:anywhere}
.fd-why{margin-top:6px;font-size:14px;color:var(--muted)}
.fd-price{margin-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fd-price b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.fd-price s{color:var(--faint);font-size:14px}
.fd-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fd-pick{margin-top:auto;min-height:44px;margin-top:14px;border:1.5px solid var(--line);background:#fff;border-radius:999px;font:700 14px var(--font);color:var(--ink-soft);cursor:pointer}
.fd-pick[aria-pressed="true"]{border-color:var(--blue-600);background:var(--blue-600);color:#fff}
.fd-extras{display:grid;gap:10px}
@media(min-width:600px){ .fd-extras{grid-template-columns:1fr 1fr} }
.fd-extra{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:12px;cursor:pointer;font:500 14px/1.35 var(--font);color:var(--ink-soft)}
.fd-extra.on{border-color:var(--blue-600);background:var(--blue-wash)}
.fd-ximg{width:52px;height:52px;flex:none;border-radius:12px;background:#fff center/contain no-repeat;border:1px solid var(--line-soft);font-weight:800;color:var(--faint)}
.fd-xt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fd-xt b{color:var(--ink);font-size:15px}
.fd-xt small{color:var(--muted);font-size:12.5px}
.fd-xt small.fd-need{color:#047857;font-weight:700}
.fd-xbox{width:30px;height:30px;flex:none;border-radius:999px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:800;color:var(--muted)}
.fd-extra.on .fd-xbox{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.fd-plant{box-shadow:none;background:var(--wash)}
.fd-pico{font-size:28px;margin-bottom:8px}
.fd-send{margin-top:32px}
.fd-form{display:grid;gap:0 14px}
@media(min-width:600px){ .fd-form{grid-template-columns:1fr 1fr} }
.fd-small{font-size:13.5px}
@media(max-width:520px){ .fd-send .lead-actions{flex-direction:column-reverse;align-items:stretch} .fd-send .lead-actions .btn{width:100%} }
.fd-steps{display:grid;gap:12px;margin-top:22px}
@media(min-width:700px){ .fd-steps{grid-template-columns:repeat(3,1fr)} }

/* ---- products page: stock near you (ost_101) ---- */
.ws-pin{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-card)}
.ws-pin label{font-weight:700;color:var(--navy)}
.ws-pin input{flex:1 1 150px;max-width:200px;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.ws-pin .btn{padding:10px 18px}
.ws-pin-clear{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;padding:4px}
.ws-pin-msg{flex-basis:100%;font-size:14px;color:var(--muted)}
.ws-pin-msg:empty{display:none}
.ws-pin-msg.ok{color:#047857}
.ws-pin-msg.warn{color:#92400e}
.ws-pin-msg.bad{color:#b91c1c}
.ws-tag{display:inline-block;align-self:flex-start;margin-top:8px;border-radius:999px;font-size:12px;font-weight:700;padding:4px 11px;background:var(--blue-wash);color:#1d4ed8}
.ws-tag.ws-in,.ws-tag.ws-available{background:var(--emerald-wash);color:#047857}
.ws-tag.ws-few{background:#fff7ed;color:#9a3412}
.ws-tag.ws-out{background:#f1f5f9;color:#475569}
.ws-tag.ws-eta{background:var(--blue-wash);color:#1d4ed8}
.ws-mrp s{color:var(--faint);font-size:14px}
.ws-save{color:#15803d;font-weight:700;font-size:13.5px}

/* ---- one honest price + service & parts prices (ost_102) ---- */
.honest{background:var(--grad-navy);color:#fff;border-radius:var(--r-xl);padding:34px 30px}
.honest h2{color:#fff;margin:6px 0 8px}
.honest p.lead{color:#cbd5e1;max-width:46em;margin:0}
.honest .eyebrow{color:#7dd3fc}
.honest-grid{display:grid;gap:14px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.honest-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:16px}
.honest-item b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}
.honest-item span{color:#cbd5e1;font-size:14px;line-height:1.5}
.honest a.honest-link{display:inline-block;margin-top:18px;color:#7dd3fc;font-weight:700}
.pp-find{width:100%;max-width:360px;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin:6px 0 14px}
.pp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.pp-table{width:100%;border-collapse:collapse;font-size:15px}
.pp-table th,.pp-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left}
.pp-table th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--wash)}
.pp-table .num{text-align:right;white-space:nowrap}
.pp-table th.num{white-space:normal}
@media (max-width:520px){.pp-table th,.pp-table td{padding:10px 10px;font-size:14px}}
.pp-table td.pp-member{color:#047857;font-weight:700}
.pp-table tr:last-child td{border-bottom:0}
.pp-visits{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pp-visit{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.pp-visit b{font-size:17px}
.pp-member-note{background:var(--emerald-wash);color:#065f46;border-radius:var(--r);padding:14px 16px;font-weight:600}
/* ost_103 (30 Oct 2026): "Still have questions? Get a free one-to-one consultation - we call you within 10 minutes" */
.cb{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift)}
@media (min-width:900px){.cb{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr)}}
.cb-side{background:var(--grad-navy);color:#fff;padding:clamp(24px,4vw,40px);position:relative;overflow:hidden}
.cb-side::after{content:"";position:absolute;right:-90px;bottom:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,194,233,.35),rgba(18,194,233,0) 70%);pointer-events:none}
.cb-free{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7dd3fc}
.cb-free::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.cb-side h2{color:#fff;margin:12px 0 0;font-size:clamp(24px,3vw,32px)}
.cb-side h2 span{color:#cfe3ff;font-weight:600}
.cb-promise{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px;border-radius:var(--r);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.cb-promise svg{width:34px;height:34px;flex:none;color:#7dd3fc;margin-top:2px}
.cb-promise b{display:block;font-size:19px;line-height:1.25}
.cb-promise small{display:block;margin-top:4px;color:#cbd5e1;font-size:14px;line-height:1.5}
.cb-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;position:relative;z-index:1}
.cb-points li{display:flex;gap:10px;color:#e2e8f0;font-size:15px;line-height:1.45}
.cb-points li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:#34d399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%230B1F4D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.cb-form,.cb-done{padding:clamp(22px,3.4vw,36px);display:grid;gap:18px;align-content:start;min-width:0}
.cb-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.cb [hidden]{display:none!important}
.cb-step legend{padding:0 0 0 36px;margin-bottom:12px;font-weight:700;color:var(--navy);font-size:16.5px;line-height:1.35;position:relative;display:block}
.cb-step legend i{font-style:normal;position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue-wash);color:var(--blue-600);font-size:13.5px}
.cb-step legend em{display:block;font-style:normal;font-weight:500;color:var(--muted);font-size:13.5px;margin-top:2px}
.cb-topics{display:flex;flex-wrap:wrap;gap:8px}
.cb-topic{font:inherit;font-size:14.5px;line-height:1.3;text-align:left;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);transition:border-color .15s,background .15s,color .15s}
.cb-topic::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #b6c3d6;background:#fff center/12px no-repeat}
.cb-topic:hover{border-color:var(--blue-500)}
.cb-topic[aria-pressed="true"]{border-color:var(--blue-600);background:var(--blue-wash);color:var(--navy);font-weight:600}
.cb-topic[aria-pressed="true"]::before{border-color:var(--blue-600);background-color:var(--blue-600);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cb-topic:focus-visible{outline:3px solid rgba(31,111,235,.35);outline-offset:2px}
.cb-form textarea,.cb-f input{font:inherit;font-size:16px;padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;width:100%;min-width:0;color:var(--ink)}
.cb-form textarea{resize:vertical;min-height:64px}
.cb-form textarea:focus,.cb-f input:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(31,111,235,.15)}
.cb-fields{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.cb-f{display:grid;gap:5px;min-width:0}
.cb-f span{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.cb-wide{grid-column:1 / -1}
@media (max-width:420px){.cb-fields{grid-template-columns:1fr}}
.cb-go{width:100%;justify-content:center}
.cb-msg{margin:-6px 0 0;font-size:14.5px;color:#b91c1c;font-weight:600}
.cb-msg:empty{display:none}
.cb-bad{border-color:#f87171!important;background:#fff7f7}
.cb-done{align-content:center;justify-items:center;text-align:center;min-height:320px}
.cb-done .cb-tick{width:64px;height:64px;border-radius:50%;background:var(--grad-good);display:grid;place-items:center;box-shadow:0 12px 30px -12px rgba(5,150,105,.6)}
.cb-done .cb-tick svg{width:32px;height:32px}
.cb-done h3{font-size:clamp(21px,2.6vw,26px);margin:0}
.cb-done p{margin:0;color:var(--ink-soft);max-width:30em;line-height:1.55}
.cb-done .cb-ref{font-size:14px;color:var(--muted)}
.cb-done .cb-time{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.02em}

/* bld_101 (30 Oct 2026): "Build your purifier" - the two ways in, "Your setup", and what each machine has */
.finder-wrap.bd-wide{max-width:1120px}
.bd-paths{display:grid;gap:12px;margin-top:18px}
@media(min-width:640px){ .bd-paths{grid-template-columns:1fr 1fr} }
.bd-path{display:grid;gap:6px;text-align:left;border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:18px;cursor:pointer;font:500 14.5px/1.45 var(--font);color:var(--ink-soft)}
.bd-path b{font-size:17px;color:var(--navy)}
.bd-path:hover{border-color:var(--blue-500)}
.bd-path.main{border-color:var(--blue-600);background:var(--blue-wash)}
.bd-setup{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){ .bd-setup{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start} }
.bd-main{min-width:0}
.bd-gt{font-weight:700;color:var(--navy);margin:20px 0 10px;font-size:15px}
.bd-gt span{font-weight:500;color:var(--muted);font-size:13.5px}
.bd-stages{display:grid;gap:8px}
.bd-st{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff;cursor:pointer;font:500 14px/1.4 var(--font);color:var(--ink-soft)}
.bd-st:hover{border-color:var(--blue-500)}
.bd-st[aria-pressed="true"]{border-color:var(--blue-600);background:var(--blue-wash)}
.bd-box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);background:#fff;display:grid;place-items:center}
.bd-st[aria-pressed="true"] .bd-box{border-color:var(--blue-600);background:var(--blue-600)}
.bd-st[aria-pressed="true"] .bd-box::after{content:'';width:10px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translateY(-1px) rotate(-45deg)}
.bd-st-t{min-width:0}
.bd-st-t b{display:block;color:var(--navy);font-size:15px}
.bd-st-t small{display:block;color:var(--muted);font-size:13px}
.bd-why{display:block;margin-top:3px;color:#047857;font-size:12.5px;font-weight:700}
.bd-why.bd-muted{color:var(--muted);font-weight:600}
.bd-sug{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--emerald-wash);color:#047857;white-space:nowrap}
.bd-sumbar{margin-top:18px;padding:12px 14px;border-radius:var(--r-sm);background:var(--navy);color:#e2e8f0;font-size:13.5px;line-height:1.45}
.bd-sumbar b{color:#fff;margin-right:4px}
@media(min-width:900px){ .bd-sumbar{display:none} }
.bd-panel{display:none;background:var(--grad-navy);color:#fff;border-radius:var(--r-xl);padding:22px;position:sticky;top:96px}
@media(min-width:900px){ .bd-panel{display:grid;gap:7px} }
.bd-panel h3{color:#fff;font-size:18px;margin:0}
.bd-psub{margin:0 0 6px;color:#cbd5e1;font-size:13.5px}
.bd-plabel{margin:8px 0 0;color:#cbd5e1;font-size:12.5px;font-weight:600}
.bd-lvl{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 10px;font-size:14px}
.bd-lvl i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(125,211,252,.18);color:#7dd3fc;font-weight:800;font-size:13px}
.bd-lvl.bd-out{border-style:dashed}
.bd-empty{color:#cbd5e1;font-size:14px;border:1.5px dashed rgba(255,255,255,.25);border-radius:12px;padding:14px;text-align:center;margin:0}
.bd-setupline{margin:10px 0 0;font-size:14px;color:var(--ink-soft)}
.bd-changes{display:flex;flex-wrap:wrap;gap:4px 18px}
.bd-mb{display:inline-block;align-self:flex-start;margin-top:10px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--wash);color:var(--muted)}
.bd-mb.good{background:var(--emerald-wash);color:#047857}
.bd-mb.blue{background:var(--blue-wash);color:var(--blue-600)}
.bd-mb.warn{background:#FFF7E6;color:#B45309}
.bd-fit{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink-soft)}
.bd-fit li{display:flex;gap:7px}
.bd-fit li::before{content:'✓';color:#047857;font-weight:800}
.bd-fit li.add::before{content:'+';color:var(--blue-600)}
.bd-fit li.more::before{content:'•';color:var(--faint)}
.bd-total{margin-top:10px;font-size:14px;color:var(--ink-soft)}
.bd-total b{font-size:17px;color:var(--navy)}
.bd-total small{color:var(--muted)}
.bd-built{max-width:560px;box-shadow:none;background:var(--wash)}
@media(max-width:520px){ .bd-sug{display:none} .bd-st{grid-template-columns:auto minmax(0,1fr)} }

/* ==========================================================================
   Why FilterXpert - how we work (t274, 31 Oct 2026): one customer's journey, scrolled.
   On a computer a phone stays beside the story and its screen changes to the real FilterXpert screen of each step;
   on a phone every step carries its own small phone. ps-* = the phone screens, jr-* = the page.
   ========================================================================== */
.jr-hero{background:radial-gradient(900px 480px at 82% 30%,rgba(18,194,233,.20),rgba(18,194,233,0) 70%),
  radial-gradient(700px 520px at 10% 110%,rgba(31,111,235,.35),rgba(31,111,235,0) 70%),var(--navy);color:#fff;overflow:hidden}
.jr-hero .wrap{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px)}
.jr-hero-grid{display:grid;gap:48px;align-items:center}
@media(min-width:980px){.jr-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.jr-kicker{margin:0;color:#7dd3fc;font-weight:600;font-size:15px}
.jr-hero h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;margin:14px 0 0;font-weight:800}
.jr-lead{color:#c7d4ea;font-size:clamp(16px,1.7vw,18px);line-height:1.6;max-width:34em;margin:22px 0 0}
.jr-btn-light{background:#fff;color:var(--navy);border-color:#fff}
.jr-btn-light:hover{background:#eaf2fe}
.jr-btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.jr-btn-line:hover{border-color:#fff}
.jr-hero-art{position:relative;display:grid;justify-items:center;padding:8px 0 0}
.jr-hero-cap{margin:18px 0 0;font-size:12.5px;color:#9fb3d6;text-align:center}
.jr-float{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;color:var(--navy);border-radius:14px;padding:11px 14px;
  box-shadow:0 22px 44px -18px rgba(3,10,30,.6);font-size:13.5px;line-height:1.3;max-width:230px}
.jr-float b{display:block;font-weight:700}.jr-float small{display:block;color:#475569;font-size:12px}
.jr-float.f1{left:max(0px,calc(50% - 345px));top:545px}
.jr-float.f2{right:max(0px,calc(50% - 330px));top:455px}
@media(max-width:620px){.jr-float{position:relative;left:auto!important;right:auto!important;top:auto!important;margin-top:12px}}

/* the phone */
.jr-phone{position:relative;width:300px;height:620px;flex:none;border-radius:50px;background:linear-gradient(160deg,#1b2a52,#070f26 60%);padding:11px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 50px 90px -40px rgba(4,12,38,.75),0 22px 40px -24px rgba(4,12,38,.55)}
.jr-screen{position:absolute;inset:11px;border-radius:40px;overflow:hidden;background:#F5F7FB;color:#0F172A;font-family:var(--font);font-size:12.5px;line-height:1.4}
.jr-island{position:absolute;top:21px;left:50%;width:88px;height:25px;margin-left:-44px;border-radius:14px;background:#03081a;z-index:5}
.jr-glass{position:absolute;inset:0;border-radius:50px;pointer-events:none;z-index:6;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 40%)}
.jr-phone-hero{transform:rotate(-2deg)}
.ps-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 6px;font-weight:600;font-size:12px}
.ps-sig{display:flex;gap:2px;align-items:flex-end}.ps-sig i{width:3px;background:#0F172A;border-radius:1px}
.ps-sig i:nth-child(1){height:5px}.ps-sig i:nth-child(2){height:7px}.ps-sig i:nth-child(3){height:9px}
.ps-sig b{width:18px;height:9px;border:1.3px solid #0F172A;border-radius:3px;margin-left:5px;box-shadow:inset 9px 0 0 #0F172A}
.ps-head{padding:12px 18px 12px;border-bottom:1px solid #E3E9F2;background:#fff}
.ps-head b{display:block;font-size:15px;color:#0B1F4D;letter-spacing:-.01em}.ps-head small{display:block;color:#64748B;font-size:11.5px;margin-top:1px}
.ps-navy{background:#0B1F4D;border-color:#0B1F4D;margin-top:-1px}.ps-navy b{color:#fff}.ps-navy small{color:#a8bbdd}
.jr-screen .ps-navy{box-shadow:0 -40px 0 #0B1F4D}
.ps-pad{padding:14px 14px}
.ps-ok{flex:none;width:20px;height:20px;border-radius:50%;background:#059669;color:#fff;display:inline-grid;place-items:center}
.ps-ok svg{width:12px;height:12px}
.ps-chat{padding:12px;display:flex;flex-direction:column;gap:7px}
.ps-chat p{margin:0;max-width:84%;padding:8px 11px;border-radius:14px;font-size:12px}
.ps-chat .b{background:#fff;border:1px solid #E3E9F2;border-bottom-left-radius:4px}
.ps-chat .me{align-self:flex-end;background:#1F6FEB;color:#fff;border-bottom-right-radius:4px}
.ps-done{display:flex;gap:9px;align-items:flex-start;background:#ecfdf5;border-radius:14px;padding:10px 11px;margin-top:2px}
.ps-done b{display:block;font-size:12px;color:#064E3B}.ps-done small{display:block;color:#047857;font-weight:700;font-size:13px;margin-top:2px}
.ps-q{margin:12px 0 7px;font-weight:700;font-size:12.5px;color:#0B1F4D}.ps-q:first-child{margin-top:2px}
.ps-opts{display:flex;flex-wrap:wrap;gap:6px}
.ps-opts span{border:1.4px solid #D6DFEC;border-radius:999px;padding:5px 10px;font-size:11.5px;background:#fff;color:#334155}
.ps-opts span.on{border-color:#1F6FEB;background:#EAF2FE;color:#0B1F4D;font-weight:600}
.ps-note{margin-top:14px;background:#0B1F4D;color:#fff;border-radius:14px;padding:11px 12px}
.ps-note b{display:block;font-size:12.5px}.ps-note small{display:block;color:#c7d4ea;font-size:11.5px;margin-top:2px}
.ps-stack{display:flex;flex-direction:column;gap:6px}
.ps-stage{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid #DCE5F2;border-radius:12px;padding:8px 10px}
.ps-stage.out{border-style:dashed;border-color:#93B4E8}
.ps-chk{flex:none;width:18px;height:18px;border-radius:6px;background:#1F6FEB;color:#fff;display:grid;place-items:center}.ps-chk svg{width:11px;height:11px}
.ps-stage b{display:block;font-size:12px;color:#0B1F4D}.ps-stage small{display:block;color:#059669;font-size:10.5px;font-weight:600}
.ps-cta{margin-top:12px;background:#1F6FEB;color:#fff;border-radius:999px;text-align:center;padding:9px;font-weight:700;font-size:12.5px}
.ps-ghost{background:#fff;color:#1F6FEB;border:1.4px solid #1F6FEB}
.ps-bill{background:#fff;border:1px solid #DCE5F2;border-radius:14px;padding:10px 12px}
.ps-bill p{display:flex;justify-content:space-between;margin:0;padding:6px 0;border-bottom:1px dashed #E3E9F2;font-size:12px;color:#334155}
.ps-bill p b{color:#0B1F4D}.ps-bill p.tot{border-bottom:0;padding-top:9px;font-weight:700;color:#0B1F4D}.ps-bill p.tot b{font-size:15px}
.ps-bill small{display:block;color:#64748B;font-size:10.5px;margin-top:2px}
.ps-code{display:flex;gap:6px}.ps-code i{flex:1;height:34px;border-radius:9px;background:#fff;border:1.4px solid #D6DFEC;display:grid;place-items:center;font-style:normal;color:#0B1F4D;font-size:16px}
.ps-time{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ps-time li{display:grid;grid-template-columns:22px 1fr;column-gap:10px}
.ps-time li>span{grid-row:span 2;width:22px;height:22px;border-radius:50%;border:2px solid #CBD5E1;display:grid;place-items:center;color:#fff}
.ps-time li.d>span{background:#059669;border-color:#059669}.ps-time li.a>span{border-color:#1F6FEB;box-shadow:0 0 0 4px rgba(31,111,235,.15)}
.ps-time svg{width:12px;height:12px}.ps-time b{font-size:12.5px;color:#0B1F4D}.ps-time small{color:#64748B;font-size:11px}
.ps-start{margin-top:16px;background:#0B1F4D;border-radius:16px;padding:14px;text-align:center;color:#fff}
.ps-start small{display:block;color:#a8bbdd;font-size:11px}.ps-start b{display:block;font-size:28px;letter-spacing:.08em;margin-top:2px;font-variant-numeric:tabular-nums}
.ps-scan{position:relative;height:130px;border-radius:16px;background:#0B1F4D;display:grid;place-items:center;overflow:hidden}
.ps-bars{display:flex;gap:3px;height:56px;align-items:stretch;background:#fff;padding:8px 12px;border-radius:6px}
.ps-bars i{width:2px;background:#0F172A}.ps-bars i:nth-child(3n){width:4px}.ps-bars i:nth-child(5n){width:1px}
.ps-beam{position:absolute;left:14%;right:14%;height:2px;top:50%;background:#12C2E9;box-shadow:0 0 12px 2px rgba(18,194,233,.8)}
.ps-verify{display:flex;gap:9px;align-items:flex-start;margin-top:12px;background:#ecfdf5;border-radius:14px;padding:10px 11px}
.ps-verify b{display:block;font-size:12.5px;color:#064E3B}.ps-verify small{display:block;color:#047857;font-size:11px}
.ps-fine{display:block;margin-top:10px;color:#64748B;font-size:10.5px;line-height:1.45}
.ps-receipt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;background:#fff;border:1px solid #DCE5F2;border-radius:14px;padding:12px}
.ps-receipt b{display:block;color:#0B1F4D;font-size:13px}.ps-receipt small{display:block;color:#64748B;font-size:10.5px}
.ps-amt{font-weight:800;color:#0B1F4D;font-size:15px}
.ps-hist{list-style:none;margin:12px 0 0;padding:0;border-left:2px solid #DCE5F2}
.ps-hist li{padding:4px 0 6px 12px;position:relative}.ps-hist li::before{content:"";position:absolute;left:-5px;top:9px;width:8px;height:8px;border-radius:50%;background:#94A3B8}
.ps-hist b{font-size:12px;color:#334155}.ps-hist small{display:block;color:#64748B;font-size:10.5px}
.ps-area{position:relative;height:160px;border-radius:16px;overflow:hidden;
  background:linear-gradient(0deg,rgba(255,255,255,.0),rgba(255,255,255,0)),repeating-linear-gradient(0deg,#E7EEF8 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,#E7EEF8 0 1px,transparent 1px 26px),#F2F6FC}
.ps-pin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-28px 0 0 -17px;color:#1F6FEB}.ps-pin svg{width:34px;height:34px}
.ps-av{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;border:3px solid #fff;box-shadow:0 8px 18px -8px rgba(11,31,77,.5)}
.ps-av.a1{left:22%;top:22%;background:#1F6FEB}.ps-av.a2{right:20%;top:34%;background:#0B1F4D}.ps-av.a3{left:34%;bottom:12%;background:#12A5C7}
.ps-quote{margin:12px 0 0;font-weight:700;color:#0B1F4D;font-size:13px;line-height:1.45}
.ps-part{background:#fff;border:1px solid #DCE5F2;border-radius:14px;padding:12px}
.ps-part>b{color:#0B1F4D;font-size:13px}
.ps-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ps-two span{background:#F5F7FB;border-radius:10px;padding:8px}.ps-two small{display:block;color:#64748B;font-size:10.5px}
.ps-two b{font-size:17px;color:#0B1F4D}.ps-two .m{background:#ecfdf5}.ps-two .m b{color:#047857}
.ps-amc{margin-top:12px;background:#0B1F4D;border-radius:14px;padding:12px;color:#fff}.ps-amc b{display:block;font-size:13.5px}.ps-amc small{color:#c7d4ea;font-size:11px}

/* the story */
.jr{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,72px);background:#fff}
.jr-intro{max-width:40em}
.jr-intro h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em}
.jr-intro p{color:var(--muted);font-size:17px;margin:12px 0 0}
.jr-grid{display:grid;gap:40px;margin-top:40px}
.jr-steps{list-style:none;margin:0;padding:0;position:relative}
.jr-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;padding:0 0 56px;position:relative}
.jr-step::before{content:"";position:absolute;left:21px;top:46px;bottom:6px;width:2px;background:linear-gradient(#DCE5F2,#DCE5F2)}
.jr-step:last-child::before{display:none}
.jr-num{width:44px;height:44px;border-radius:50%;border:2px solid #C9D6EA;display:grid;place-items:center;font-weight:800;color:var(--navy);background:#fff;font-variant-numeric:tabular-nums;transition:background .3s,border-color .3s,color .3s}
.jr-copy{min-width:0;padding:22px clamp(18px,2.4vw,28px) 24px;border-radius:22px;border:1px solid #E3EEF9;
  background:radial-gradient(420px 240px at 0% 0%,rgba(59,130,246,.13),rgba(59,130,246,0) 62%),
    radial-gradient(380px 240px at 100% 100%,rgba(6,182,212,.13),rgba(6,182,212,0) 60%),linear-gradient(180deg,#F8FBFF,#F4FBFC)}
/* t274b: "half black - half blue", as "We know your water." - navy, then the last phrase in the brand blue */
.jr-grad{background:linear-gradient(90deg,var(--blue-600),var(--blue-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.jr-copy h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em;line-height:1.15}
.jr-say{margin:12px 0 0;color:var(--ink-soft);font-size:17px;line-height:1.6;max-width:34em}
.jr-vs{margin-top:20px;display:grid;gap:10px;max-width:34em}
.jr-vs p{margin:0;font-size:15.5px;line-height:1.55}
.jr-vs span{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.jr-vs .u{color:#64748B}.jr-vs .u span{color:#94A3B8}
.jr-vs .w{color:var(--navy);font-weight:600}.jr-vs .w span{color:#059669}
.jr-link{display:inline-block;margin-top:16px;font-weight:700;color:var(--blue-600)}
.jr-mini{grid-column:1 / -1;margin:24px 0 0;display:grid;justify-items:center}
.jr-mini .jr-phone{transform:scale(.82);transform-origin:top center;margin-bottom:-112px}
.jr-mini figcaption{margin-top:10px;font-size:12.5px;color:#64748B;text-align:center}
.js-jr .jr-mini{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js-jr .jr-mini.in{opacity:1;transform:none}
.jr-stage{display:none}

/* t274c (Animesh 31 Oct, 02:08, phone): "each step & its mobile screen... a little smaller... it fills the entire
   screen by each single step" - on phones and tablets a step is compact: one step, words and its phone, about one
   screen tall. The small phone is drawn at 52% (49% on the narrowest phones), about 156 px wide. */
@media(max-width:999px){
  .jr-step{grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding-bottom:24px}
  .jr-num{width:34px;height:34px;font-size:15px;border-width:1.5px}
  .jr-copy{padding:14px 14px 16px;border-radius:18px}
  .jr-copy h3{font-size:clamp(19px,5.2vw,23px);line-height:1.18}
  .jr-say{margin-top:6px;font-size:15.5px;line-height:1.45}
  .jr-vs{margin-top:10px;gap:6px}
  .jr-vs p{font-size:15px;line-height:1.4}
  .jr-vs span{font-size:12px;margin-bottom:1px}
  .jr-link{margin-top:10px}
  .jr-mini{--ms:.52;margin-top:10px}
  .jr-mini .jr-phone{transform:scale(var(--ms));margin-bottom:calc(-620px * (1 - var(--ms)))}
  .jr-mini figcaption{margin-top:6px;font-size:12px}
}
@media(max-width:380px){ .jr-mini{--ms:.49} }
@media(min-width:1000px){
  .jr-grid{grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:start}
  .jr-step{min-height:74vh;padding-bottom:0}
  .jr-step:last-child{min-height:60vh}
  .jr-mini{display:none}
  .js-jr .jr-step .jr-copy{opacity:.38;transition:opacity .45s ease}
  .js-jr .jr-step.is-on .jr-copy{opacity:1}
  .js-jr .jr-step.is-on .jr-num{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
  .jr-stage{display:block;position:sticky;top:96px;height:calc(100vh - 120px);max-height:760px}
  .jr-stage-in{position:relative;display:grid;justify-items:center}
  .jr-phone-big .jr-sc{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .jr-phone-big .jr-sc.on{opacity:1;transform:none}
  .jr-chip{position:absolute;right:calc(50% + 132px);top:330px;white-space:nowrap;display:flex;gap:9px;align-items:center;background:#fff;color:var(--navy);font-weight:700;font-size:14px;
    padding:10px 14px 10px 10px;border-radius:14px;box-shadow:0 22px 44px -20px rgba(11,31,77,.45),0 0 0 1px #E3E9F2;opacity:0;transform:translateX(-10px);
    transition:opacity .45s ease .12s,transform .45s cubic-bezier(.2,.7,.2,1) .12s;z-index:8}
  .jr-chip.on{opacity:1;transform:none}
  .jr-cap{position:relative;height:18px;margin:14px 0 0;width:100%;text-align:center;font-size:12.5px;color:#64748B}
  .jr-cap span{position:absolute;left:0;right:0;opacity:0;transition:opacity .3s}.jr-cap span.on{opacity:1}
  .jr-rail{margin-top:14px;display:grid;justify-items:center;gap:8px}
  .jr-rail-t{font-size:13px;color:#64748B;font-variant-numeric:tabular-nums}.jr-rail-t b{color:var(--navy)}
  .jr-rail-bar{display:flex;gap:5px}
  .jr-rail-bar a{width:22px;height:5px;border-radius:3px;background:#DCE5F2;transition:background .3s,width .3s}
  .jr-rail-bar a.on{background:var(--blue-600);width:34px}
}
@media(min-width:1000px) and (max-height:860px){
  .jr-stage-in .jr-phone-big{transform:scale(.84);transform-origin:top center;margin-bottom:-99px}
  .jr-stage{top:84px}
}
/* small moments inside the screens, only when that screen is showing */
.jr-sc.on .ps-stage,.jr-mini.in .ps-stage{animation:psStack .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes psStack{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.jr-sc.on .ps-beam,.jr-mini.in .ps-beam{animation:psBeam 1.6s ease-in-out 2}
@keyframes psBeam{0%,100%{transform:translateY(-38px)}50%{transform:translateY(38px)}}
.jr-sc.on .ps-done,.jr-sc.on .ps-verify{animation:psPop .5s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes psPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* the comparison */
.jr-compare{background:var(--wash);padding:clamp(56px,7vw,88px) 0}
.jr-compare h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em}
.jr-table{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.jr-row{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.2fr);gap:20px;padding:16px 24px;border-top:1px solid #EEF2F7;align-items:center;font-size:15.5px}
.jr-row:first-child{border-top:0}
.jr-th{background:#F8FAFD;font-size:13px;font-weight:700;color:#64748B;padding-top:14px;padding-bottom:14px}
.jr-th span:last-child{color:var(--blue-600)}
.jr-row .k{font-weight:700;color:var(--navy)}
.jr-row .u{color:#64748B;display:flex;gap:10px;align-items:center}
.jr-row .w{color:var(--navy);font-weight:600;display:flex;gap:10px;align-items:center}
.jr-row .x{flex:none;width:18px;height:18px;border-radius:50%;background:#EEF2F7;position:relative}
.jr-row .x::before,.jr-row .x::after{content:"";position:absolute;left:5px;right:5px;top:8px;height:2px;background:#94A3B8;border-radius:1px;transform:rotate(45deg)}
.jr-row .x::after{transform:rotate(-45deg)}
/* t274b (Animesh 31 Oct, phone): "Make it in a comparison table" - on a phone too: the row name across the top of each
   row, then "The usual way" and "FilterXpert" side by side under one header */
@media(max-width:760px){
  .jr-table{border-radius:18px}
  .jr-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 0;padding:0;font-size:14px;align-items:stretch}
  .jr-row > span{padding:12px 14px}
  .jr-row .k{grid-column:1 / -1;padding:12px 14px 0;font-size:11.5px;color:#64748B;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
  .jr-row .u,.jr-row .w{align-items:flex-start;gap:8px;line-height:1.38;padding-top:2px;min-width:0;overflow-wrap:anywhere}
  .jr-row .w{border-left:1px solid #EEF2F7;background:#F6FBF9}
  .jr-row .x,.jr-row .w .ps-ok{margin-top:1px}
  .jr-row .x{width:16px;height:16px}.jr-row .x::before,.jr-row .x::after{left:4px;right:4px;top:7px}
  .jr-th{padding:0;font-size:12px;align-items:center}
  .jr-th > span{padding:11px 14px}
  .jr-th span:first-child{display:none}
  .jr-th span:last-child{border-left:1px solid #EEF2F7;background:#F1F8F5}
}
/* the end */
.jr-end{padding:0 0 clamp(48px,6vw,80px);background:var(--wash)}
.jr-end-in{background:radial-gradient(600px 300px at 90% 0%,rgba(18,194,233,.22),rgba(18,194,233,0) 70%),var(--navy);border-radius:28px;padding:clamp(28px,4vw,48px);
  display:grid;gap:24px;align-items:center;color:#fff}
@media(min-width:900px){.jr-end-in{grid-template-columns:minmax(0,1fr) auto}}
.jr-end h2{color:#fff;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em}
.jr-end p{color:#c7d4ea;margin:10px 0 0;font-size:16.5px}
.jr-end-act{display:flex;flex-wrap:wrap;gap:10px}
@media(prefers-reduced-motion:reduce){
  .jr-phone-big .jr-sc,.jr-chip,.jr-cap span,.js-jr .jr-mini,.js-jr .jr-step .jr-copy,.jr-num,.jr-rail-bar a{transition:none!important}
  .jr-sc.on .ps-stage,.jr-mini.in .ps-stage,.jr-sc.on .ps-beam,.jr-mini.in .ps-beam,.jr-sc.on .ps-done,.jr-sc.on .ps-verify{animation:none!important}
  .js-jr .jr-mini{opacity:1;transform:none}
}

.jr-hero h1 span{display:block}
@media(min-width:980px){.jr-hero h1 span{white-space:nowrap}}
.ps-tabs{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #E3E9F2;padding:8px 6px 22px}
.ps-tabs span{display:grid;justify-items:center;gap:3px;font-size:9.5px;color:#94A3B8;font-weight:600}
.ps-tabs span i{width:18px;height:18px;border-radius:6px;background:#E3E9F2}
.ps-tabs span.on{color:#1F6FEB}.ps-tabs span.on i{background:#1F6FEB}
.ps-home{position:absolute;left:50%;bottom:8px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#0F172A;opacity:.85;z-index:2}

/* ==========================================================================
   t274c (Animesh 31 Oct, 02:08): the light on every navy surface is the call-back box's corner glow, alive -
   "make this light on-off & moving slowly like a jellyfish" (it replaced the sweeping band of t274b).
   t276w (Animesh 31 Oct, 02:55): "Make them glide every area" - the glow now glides slowly across the WHOLE dark
   area: a wandering path through top, middle and bottom, left and right (27 s), with a slight squash and stretch of
   its own (9 s) and the same 6 s breathing on and off. It stays under the words (z-index -1 inside its own
   stacking context) and inside the surface (overflow clip); each surface starts at a different point of the path,
   so no two move together. For people who ask for less motion it is a still glow in the bottom-right corner.
   ========================================================================== */
.jr-hero,.jr-end-in,.honest,.leadwrap,.cb-side,.site-footer,.bd-sumbar,.fxa-h{position:relative}
.jr-hero,.jr-end-in,.honest,.leadwrap,.cb-side,.site-footer,.bd-panel,.bd-sumbar,.fxa-h{isolation:isolate;overflow:hidden;overflow:clip}
.jr-hero{--orb:540px}.site-footer{--orb:420px}.leadwrap{--orb:360px}.jr-end-in{--orb:340px}.honest{--orb:320px}
.cb-side{--orb:280px}.bd-panel{--orb:220px}.fxa-h{--orb:150px}.bd-sumbar{--orb:120px}
.cb-side::after{display:none}   /* its old still glow - now the moving one below */
.jr-hero::before,.jr-end-in::before,.honest::before,.leadwrap::before,.cb-side::before,.site-footer::before,.bd-panel::before,.bd-sumbar::before,.fxa-h::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:var(--orb);height:var(--orb);border-radius:50%;
  left:82%;top:80%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(18,194,233,.48) 0%,rgba(42,157,244,.24) 34%,rgba(18,194,233,.07) 54%,rgba(18,194,233,0) 70%);
  filter:blur(4px);opacity:.6;will-change:left,top,transform,opacity;
  animation:fxGlide 27s cubic-bezier(.45,.05,.55,.95) infinite,fxJelly 9s ease-in-out infinite,fxBreathe 6s ease-in-out infinite}
/* the path: the centre of the glow visits every part of the surface (per cent of the surface) */
@keyframes fxGlide{
  0%,100%{left:82%;top:80%}
  12%{left:62%;top:22%}
  25%{left:24%;top:16%}
  37%{left:12%;top:58%}
  50%{left:36%;top:88%}
  62%{left:58%;top:52%}
  75%{left:88%;top:30%}
  87%{left:70%;top:92%}}
/* the jellyfish: a slow squash and stretch around its centre */
@keyframes fxJelly{
  0%,100%{transform:translate(-50%,-50%) scale(1,1)}
  25%{transform:translate(-50%,-50%) scale(1.08,.92)}
  50%{transform:translate(-50%,-50%) scale(.93,1.07)}
  75%{transform:translate(-50%,-50%) scale(1.05,.96)}}
@keyframes fxBreathe{0%,100%{opacity:.25}45%{opacity:.9}60%{opacity:.85}}
.site-footer::before{animation-delay:-11s,-2s,-2s}.leadwrap::before{animation-delay:-19s,-4s,-4s}.cb-side::before{animation-delay:-6s,-7s,-1s}
.honest::before{animation-delay:-15s,-1s,-5s}.jr-end-in::before{animation-delay:-23s,-5s,-3s}.bd-panel::before{animation-delay:-8s,-3s,-2.5s}
.fxa-h::before{animation-delay:-17s,-6s,-4.5s}.bd-sumbar::before{animation-delay:-4s,-8s,-1.5s}
@media (prefers-reduced-motion:reduce){
  .jr-hero::before,.jr-end-in::before,.honest::before,.leadwrap::before,.cb-side::before,.site-footer::before,.bd-panel::before,.bd-sumbar::before,.fxa-h::before{
    animation:none;opacity:.75;left:82%;top:80%;transform:translate(-50%,-50%)}
}