/* Shared by every page: tokens, reset, buttons, inputs, header nav, footer, compare table, toast. */
:root{
  --ink:#0B1F2A; --ink2:#2F4A55; --muted:#47606B; --bg:#F4FAFC; --line:#D4E7ED; --line2:#EEF6F8;
  --deep:#04212F; --sea:#0A4A63; --blue:#0B6F92; --blue-d:#08506A; --cyan:#22B8D6; --ice:#8FE6F5; --mist:#E4F5F9;
  --g-bg:#E6F6EC; --g-bd:#BFE5CD; --g-ink:#17603F; --g:#1E8A4C;
  --a-bg:#FFF4E2; --a-bd:#F3D7AA; --a-ink:#6B3A06; --a:#D9890F;
  --r-bg:#FDE8E5; --r-bd:#F4C3BC; --r-ink:#8E2A1F; --r:#C2392B;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --btn:linear-gradient(180deg,#0C93BC 0%,#0A7DA2 100%);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wq-anim{animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* on the dark sections the light ring reads better */
.hero :focus-visible,.phero :focus-visible,.qhero :focus-visible,.foot :focus-visible,.cond :focus-visible,.shower :focus-visible,.picks .wave-banner :focus-visible,.cmpbar :focus-visible,.pcmpbar :focus-visible,.cta :focus-visible{outline-color:var(--ice)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:800}
.skip:focus{left:12px}
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
.serif em,h1 em{font-style:italic;color:var(--ice)}
.light{color:#fff}
.muted{color:var(--muted)}
.sm{font-size:13px}
.mono{font-family:var(--mono)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.eyebrow.sm{letter-spacing:.08em}
.eyebrow.cyan{color:var(--ice)}
.card{background:#fff;border:1px solid var(--line);border-radius:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border:0;border-radius:14px;background:var(--btn);color:#fff;font-weight:800;text-decoration:none;text-align:center}
.btn:hover{color:#fff;filter:brightness(1.06)}
.btn-sm{min-height:44px;padding:0 16px;border-radius:12px;font-size:14px;flex:none}
.btn-xs{min-height:44px;padding:0 12px;border-radius:10px;font-size:13px;flex:none}
.link-btn{align-self:flex-start;min-height:40px;padding:0 4px;border:0;background:transparent;font-weight:800;color:var(--blue)}
.link-btn.light{color:var(--ice)}
.inp{height:48px;padding:0 14px;border:1.5px solid #9DB0AC;border-radius:12px;background:#fff;color:var(--ink);width:100%;min-width:0}
.inp.sm{height:44px;padding:0 10px;border-radius:10px}
.lbl{font-size:13px;font-weight:700}
.stack{display:flex;flex-direction:column;gap:8px}
.fine{margin:0;font-size:12px;color:var(--muted)}
.aff{font-size:11.5px;color:var(--muted)}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(11,111,146,.25);border-top-color:var(--blue);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wqFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wqRipple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* ---------- header nav ---------- */
.nav{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:0 auto;padding:14px 20px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:#fff;text-decoration:none;letter-spacing:-.01em}
.brand:hover{color:#fff}
.nav nav{display:flex;gap:22px}
.nav nav a{color:#D7F1F7;font-size:14px;font-weight:700;text-decoration:none;padding:10px 2px}
.nav nav a:hover{color:#fff}
.nav-wide{display:none}
.pill{display:inline-flex;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;color:#D7F1F7;margin-bottom:14px}
.nav nav a[aria-current=page]{color:#fff;box-shadow:inset 0 -2px 0 var(--cyan)}

/* ---------- shared bits ---------- */
.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:12px;border:1.5px solid #9CCFDC;background:#fff;color:#0B5F7C;font-weight:800;font-size:14px;text-decoration:none}
.btn-outline:hover{border-color:var(--blue);color:var(--blue-d)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:80;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.3)}
body.noscroll{overflow:hidden}

/* ---------- compare table ---------- */
.cmp-box{position:relative;border:1px solid var(--line);border-radius:16px;overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:0}
.cmp-table th,.cmp-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2)}
.cmp-table thead th{border-bottom:2px solid var(--line);min-width:170px}
.cmp-table thead th:first-child,.cmp-table tbody th{width:118px;min-width:110px;color:var(--muted);font-weight:700}
.cmp-table .ck{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cmp-table .yes{font-weight:800;color:var(--g-ink)}
.cmp-table .no{font-weight:700;color:#A3261B}
.cmp-table .phv{font-family:var(--mono);font-size:12px;color:var(--muted)}
.cmp-table tfoot td{border-bottom:0}
.cmp-empty{margin:0;padding:18px;background:var(--bg);color:var(--muted)}
.rm-cmp{border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;padding:4px 0;text-decoration:underline}

/* ---------- footer ---------- */
.foot{position:relative;margin-top:30px;color:#B9DDE8;font-size:13px;padding:32px 0 56px;background-color:var(--deep);background-size:cover;background-position:center;background-image:linear-gradient(180deg,#04212F 0%,rgba(4,33,47,.84) 100%)}
.foot.bg-in{background-image:linear-gradient(180deg,#04212F 0%,rgba(4,33,47,.84) 100%),url(/assets/img/drops.jpg);background-image:linear-gradient(180deg,#04212F 0%,rgba(4,33,47,.84) 100%),image-set(url(/assets/img/drops.avif) type("image/avif"),url(/assets/img/drops.webp) type("image/webp"),url(/assets/img/drops.jpg) type("image/jpeg"))}
.foot-wave{position:absolute;left:0;top:-30px;width:100%;height:31px;display:block}
.foot-in{display:flex;flex-direction:column;gap:12px}
.foot p{margin:0;max-width:900px}
.foot a{color:var(--ice)}
.rev{display:flex;gap:12px;align-items:center;color:#fff}
.rev-badge{width:42px;height:42px;flex:none;border-radius:21px;background:var(--sea);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ice)}
.rev strong{display:block;font-weight:800}
.rev span{font-size:12px;color:#B9DDE8}
.sources summary{cursor:pointer;color:var(--ice);font-weight:700;min-height:32px;display:flex;align-items:center}
.sources ul{margin:6px 0 0;padding-left:18px}
.copy{font-size:12px;color:#8DB8C6}

/* ---------- touch screens: 16px inputs so iOS Safari doesn't zoom on focus ---------- */
@media (max-width:1023px),(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}

@media (min-width:760px){
  .wrap{padding-left:32px;padding-right:32px}
  .nav{padding:22px 32px}
  .brand{font-size:19px}
  .nav-wide{display:inline}
  .nav nav a{font-size:15px;font-weight:600}
  .cmp-table{font-size:14px}
  .foot{padding:48px 0 64px;margin-top:50px}
  .foot-wave{height:40px;top:-39px}
}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-nav a{display:inline-flex;align-items:center;min-height:40px;font-weight:700;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}

/* site name with byline under it */
.brand-t{display:flex;flex-direction:column;line-height:1.1}
.brand-by{font-size:11.5px;font-weight:600;opacity:.75;letter-spacing:0}
@media (max-width:420px){.brand-by{font-size:10.5px}}
@media (max-width:480px){.brand{font-size:14.5px;gap:6px}.brand-t>span,.brand-by{white-space:nowrap}.brand-by{font-size:10px}}
@media (max-width:400px){.nav nav a:last-child{display:none}}

/* elegant brand name */
.brand-t>span{font-family:var(--serif);font-weight:600;font-size:1.18em;letter-spacing:-.01em;font-optical-sizing:auto}
@media (max-width:480px){.brand-t>span{font-size:1.12em}}
h1,h2,.serif{font-optical-sizing:auto}

/* byline in an elegant script */
.brand-by{font-family:'Parisienne',cursive;font-size:16px;font-weight:400;opacity:.9;letter-spacing:.01em;line-height:1.15;margin-top:1px}
@media (max-width:480px){.brand-by{font-size:13.5px}}
.brand-by{font-size:18px}
@media (max-width:480px){.brand-by{font-size:15px}}