:root{color-scheme:light;font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;background:#f7fbff;}
*{box-sizing:border-box;}body{margin:0;color:#0f172a;background:#f7fbff;}.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;} .skip-link:focus{left:18px;top:18px;width:auto;height:auto;padding:10px 14px;background:#0ea5e9;color:#fff;border-radius:999px;z-index:50;}a{color:#0d6efd;text-decoration:none;}a:hover{text-decoration:underline;}header,main,footer{width:100%;}img{max-width:100%;display:block;}button,input,select,textarea{font-family:inherit;}button{cursor:pointer;}body.prefers-reduced-motion *{transition:none!important;animation:none!important;}
.app-shell{min-height:100vh;display:flex;flex-direction:column;} .site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);border-bottom:1px solid #e2e8f0;} .nav-bar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:12px;} .brand a{font-weight:700;color:#0f172a;font-size:18px;display:flex;align-items:center;gap:10px;text-decoration:none;} .brand-mark{display:inline-block;padding:6px 10px;border-radius:12px;background:#e0f2ff;color:#075985;font-weight:700;} .brand-text{display:flex;flex-direction:column;gap:2px;line-height:1;} .brand-name{letter-spacing:.08em;text-transform:uppercase;} .brand-dotcom{font-size:.7em;letter-spacing:.04em;text-transform:lowercase;margin-left:2px;} .tagline{font-size:12px;color:#64748b;font-weight:600;letter-spacing:.02em;} .nav-links{display:flex;align-items:center;gap:12px;justify-content:flex-end;} .nav-link{padding:8px 10px;border-radius:10px;color:#0f172a;font-weight:600;transition:all .2s ease;background:none;border:none;} .nav-link:hover,.nav-link:focus-visible{background:#e0f2ff;outline:none;} .nav-menu{position:relative;} .nav-menu summary{list-style:none;} .nav-menu summary::-webkit-details-marker{display:none;} .nav-menu__toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid #e2e8f0;background:white;color:#0f172a;cursor:pointer;transition:all .2s ease;} .nav-menu__toggle:hover,.nav-menu__toggle:focus-visible{background:#e0f2ff;outline:none;} .nav-menu__icon{position:relative;width:20px;height:2px;background:#0f172a;border-radius:999px;display:inline-block;} .nav-menu__icon::before,.nav-menu__icon::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#0f172a;border-radius:999px;transition:transform .2s ease,opacity .2s ease;} .nav-menu__icon::before{top:-6px;} .nav-menu__icon::after{top:6px;} .nav-menu[open] .nav-menu__icon{background:transparent;} .nav-menu[open] .nav-menu__icon::before{transform:translateY(6px) rotate(45deg);} .nav-menu[open] .nav-menu__icon::after{transform:translateY(-6px) rotate(-45deg);} .nav-menu__panel{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:white;border:1px solid #e2e8f0;border-radius:16px;padding:12px;box-shadow:0 18px 40px rgba(15,23,42,0.16);display:grid;gap:12px;z-index:30;} .nav-menu__links{display:grid;gap:6px;} .nav-menu__links .nav-link{display:flex;align-items:center;justify-content:space-between;} .nav-menu__cta{display:grid;} .nav-menu__cta .btn{width:100%;text-align:center;} .primary-cta{background:#0ea5e9;color:white;} .primary-cta:hover,.primary-cta:focus-visible{background:#0284c7;color:white;}
.nav-badge{display:inline-flex;align-items:center;gap:6px;background:#ecfeff;border:1px solid #bae6fd;color:#0f172a;font-weight:700;}
main{flex:1;} .hero{max-width:1100px;margin:0 auto;padding:40px 18px 18px;display:grid;gap:14px;} .hero h1{margin:0;font-size:32px;color:#0f172a;} .hero p{margin:0;color:#1f2937;font-size:17px;max-width:70ch;} .hero .actions{display:flex;gap:12px;flex-wrap:wrap;} .btn{padding:12px 14px;border-radius:12px;border:1px solid #0ea5e9;background:white;color:#0ea5e9;font-weight:700;transition:transform .2s ease,box-shadow .2s ease;} .btn:hover,.btn:focus-visible{transform:translateY(-1px);box-shadow:0 10px 30px rgba(14,165,233,0.18);outline:none;} .btn.primary{background:#0ea5e9;color:white;border-color:#0ea5e9;} .btn.secondary{border-color:#e2e8f0;color:#0f172a;} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#e0f2ff;color:#075985;font-weight:700;font-size:13px;}
.section{max-width:1100px;margin:0 auto;padding:28px 18px;} .section h2{margin:0 0 12px;font-size:24px;} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;} .card{padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:white;box-shadow:0 8px 24px rgba(15,23,42,0.05);display:flex;flex-direction:column;gap:10px;} .card h3{margin:0;font-size:18px;} .card p{margin:0;color:#334155;} .card .small{font-size:14px;color:#475569;} .sitemap-card{color:#0f172a;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;} .sitemap-card:hover,.sitemap-card:focus-visible{transform:translateY(-2px);box-shadow:0 16px 32px rgba(59,130,246,0.18);border-color:#93c5fd;outline:none;} .sitemap-grid{align-items:stretch;} .inline-list{display:flex;gap:10px;flex-wrap:wrap;} .inline-list a{padding:8px 10px;border-radius:10px;background:#e0f2ff;color:#075985;font-weight:700;}
.blog-page main{display:flex;justify-content:center;} .blog-shell{max-width:800px;width:100%;margin:0 auto;padding:28px 18px;} .blog-article{background:white;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 12px 36px rgba(15,23,42,0.08);display:grid;gap:18px;padding:22px;} .blog-header h1{margin:0;font-size:32px;color:#0f172a;} .blog-header .lead{margin:8px 0 0;color:#1f2937;font-size:17px;line-height:1.6;} .blog-section{display:grid;gap:10px;} .blog-section h2{margin:0;font-size:22px;color:#0f172a;} .blog-section p,.blog-section li{color:#1f2937;line-height:1.6;} .blog-section ol{padding-left:20px;display:grid;gap:8px;} .blog-footer{margin-top:6px;} .eyebrow{letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#075985;margin:0;} .lead{font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;} .bullet-list{padding-left:18px;display:grid;gap:8px;color:#1f2937;} .faq{border:1px solid #e2e8f0;border-radius:12px;background:white;} .faq-item{border-top:1px solid #e2e8f0;} .faq-item:first-of-type{border-top:none;} .faq button{width:100%;text-align:left;padding:14px;border:none;background:none;font-weight:700;display:flex;justify-content:space-between;align-items:center;} .faq .answer{padding:0 14px 14px;color:#334155;display:none;} .faq .answer.open{display:block;}
.layout-slab{background:white;border-radius:18px;border:1px solid #e2e8f0;box-shadow:0 10px 40px rgba(15,23,42,0.06);padding:18px;} .meta-line{font-size:14px;color:#475569;}
.footer{margin-top:30px;background:#0f172a;color:white;} .footer .footer-inner{max-width:1100px;margin:0 auto;padding:24px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;} .footer a{color:#bae6fd;} .footer-links{display:flex;gap:12px;flex-wrap:wrap;} .footnote{font-size:13px;color:#cbd5e1;} .ad-slot-placeholder{min-height:250px;border:1px dashed #cbd5e1;border-radius:12px;background:linear-gradient(135deg,#f0f9ff,#e2e8f0);display:flex;align-items:center;justify-content:center;color:#475569;font-weight:600;} .ad-slot{display:block;min-height:250px;width:100%;margin:12px auto;text-align:center;} .ad-fallback{min-height:250px;display:flex;align-items:center;justify-content:center;text-align:center;color:#475569;font-weight:600;} .ad-sticky{position:sticky;bottom:0;z-index:5;background:#f7fbff;padding:0 18px 18px;border-top:1px solid #e2e8f0;} ins.adsbygoogle[style*="position: fixed"]{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;pointer-events:auto;max-width:100vw;left:0;right:0;margin:0 auto;box-sizing:border-box;} ins.adsbygoogle.ws-margin-ad--hidden[style*="position: fixed"]{pointer-events:none!important;} .ws-margin-ad{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;} .ws-margin-ad.ws-margin-ad--visible{opacity:1;transform:translateY(0);pointer-events:auto;} .ws-margin-ad.ws-margin-ad--hidden{opacity:0;transform:translateY(8px);pointer-events:none;} .consent-banner{position:fixed;bottom:18px;left:18px;right:18px;z-index:20;background:white;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 10px 40px rgba(15,23,42,0.2);padding:16px;display:grid;gap:12px;} .consent-banner a{color:#0ea5e9;} .consent-options{display:grid;gap:6px;font-size:14px;color:#475569;} .consent-actions{display:flex;gap:10px;flex-wrap:wrap;} .consent-actions .btn{flex:1 1 160px;} .ads-diagnostics-panel{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:white;display:grid;gap:10px;} .ads-diagnostics-row{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:#0f172a;} .ads-diagnostics-floating{position:fixed;top:18px;right:18px;max-width:320px;z-index:30;}
.table{width:100%;border-collapse:collapse;} .table td,.table th{border:1px solid #e2e8f0;padding:10px;} .table th{background:#f0f9ff;text-align:left;}
label{display:block;font-weight:700;margin-bottom:6px;color:#0f172a;} input,select,textarea{width:100%;padding:11px;border-radius:10px;border:1px solid #e2e8f0;background:white;color:#0f172a;} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0ea5e9;} .form-row{display:grid;gap:8px;margin-bottom:12px;} .form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;} .muted{color:#475569;font-size:14px;} .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#e0f2ff;border-radius:10px;color:#075985;font-weight:700;font-size:13px;}
.wizard{display:grid;gap:12px;} .wizard-steps{display:flex;gap:8px;flex-wrap:wrap;} .step-pill{padding:8px 10px;border-radius:999px;border:1px solid #e2e8f0;font-weight:700;color:#475569;background:white;} .step-pill.active{background:#0ea5e9;color:white;border-color:#0ea5e9;} .wizard-step{display:none;gap:10px;} .wizard-step.active{display:grid;} .wizard-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.callout{padding:14px;border-radius:12px;border:1px solid #bae6fd;background:#eff6ff;color:#0f172a;} .callout strong{display:block;margin-bottom:6px;}
.calc-result{padding:14px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;display:grid;gap:6px;font-weight:700;} .result-number{font-size:22px;color:#0ea5e9;}
.sources{margin-top:18px;padding-top:12px;border-top:1px solid #e2e8f0;font-size:14px;color:#334155;} .breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:#475569;} .breadcrumbs a{color:#0f172a;}
.modal-trigger{cursor:pointer;} dialog{border:none;border-radius:14px;max-width:520px;width:90%;padding:0;box-shadow:0 10px 40px rgba(15,23,42,0.25);} dialog::backdrop{background:rgba(15,23,42,0.45);} .modal-inner{padding:18px;display:grid;gap:10px;} .modal-inner h2{margin:0;} .modal-actions{text-align:right;} .chip-list{display:flex;gap:8px;flex-wrap:wrap;} .mode-bar{border-top:1px solid #e2e8f0;background:#f8fafc;} .mode-bar__content{max-width:1100px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .mode-bar__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#64748b;} .mode-bar__actions{display:flex;gap:8px;flex-wrap:wrap;} .mode-bar__actions a{padding:6px 10px;border-radius:999px;border:1px solid #e2e8f0;color:#0f172a;font-size:12px;font-weight:600;background:white;} .mode-bar__actions a.active{background:#0ea5e9;color:white;border-color:#0ea5e9;} .mode-bar__close{margin-left:auto;border:none;background:#e2e8f0;border-radius:999px;width:30px;height:30px;font-size:18px;line-height:1;color:#475569;} .mode-bar__close:hover,.mode-bar__close:focus-visible{background:#bae6fd;color:#0f172a;outline:none;}
.mode-switcher{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569;flex-wrap:wrap;} .mode-switcher span{font-weight:700;} .mode-switcher a{padding:6px 8px;border-radius:999px;border:1px solid #e2e8f0;color:#0f172a;font-weight:600;} .mode-switcher a.active{background:#0ea5e9;color:white;border-color:#0ea5e9;}
.trust-capsule{margin-top:12px;padding:12px;border-radius:12px;border:1px solid #bae6fd;background:#eff6ff;}
.upload-stepper{display:grid;gap:6px;margin-top:10px;} .upload-stepper .step{padding:8px 10px;border-radius:10px;border:1px solid #e2e8f0;font-weight:700;color:#475569;} .upload-stepper .step.active{background:#0ea5e9;color:white;border-color:#0ea5e9;}
.results-grid{display:grid;gap:16px;} .result-card{padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:white;display:grid;gap:10px;} .result-card h3{margin:0;} .result-meta{display:flex;gap:12px;font-size:13px;color:#475569;font-weight:700;flex-wrap:wrap;}
.share-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.share-card{border:1px solid #e2e8f0;border-radius:16px;padding:14px;background:#f8fafc;display:grid;gap:12px;margin-top:16px;}
.share-card__title{font-size:16px;font-weight:800;margin:0;color:#0f172a;}
.share-card__copy{font-size:14px;color:#334155;margin:0;}
.share-card__media img{width:100%;border-radius:12px;border:1px solid #e2e8f0;}
.share-card__actions{display:flex;gap:8px;flex-wrap:wrap;}
.help-accordion summary{font-weight:700;cursor:pointer;margin-bottom:6px;}
.water-iq{display:flex;justify-content:center;} .water-iq-card{max-width:860px;width:100%;border:1px solid rgba(0,0,0,.12);border-radius:18px;padding:20px;background:#fff;} .water-iq-card--result{box-shadow:0 20px 50px rgba(15,23,42,.12);} .water-iq-result-header{display:flex;align-items:center;justify-content:space-between;gap:12px;} .water-iq-title{margin:0;font-size:22px;font-weight:750;color:#0f172a;} .water-iq-ellipsis{font-size:22px;letter-spacing:2px;color:#cbd5e1;} .water-iq-divider{height:1px;background:#e2e8f0;margin:12px 0 16px;} .water-iq-result-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;} .water-iq-score-circle{width:120px;height:120px;border-radius:50%;background:conic-gradient(rgba(79,155,255,.9) 0 var(--score-angle,0deg),rgba(79,155,255,.15) var(--score-angle,0deg) 360deg);display:flex;align-items:center;justify-content:center;position:relative;} .water-iq-score-circle::after{content:"";position:absolute;inset:10px;background:#f8fafc;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(148,163,184,.4);} .water-iq-score-value{position:relative;z-index:1;font-size:32px;font-weight:800;color:#0f172a;display:flex;align-items:baseline;gap:4px;} .water-iq-score-value span{font-size:16px;color:#64748b;font-weight:700;} .water-iq-result-copy{display:grid;gap:10px;min-width:200px;} .water-iq-badge-pill{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#5db5f3,#3f7acb);color:white;border-radius:999px;padding:10px 18px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 8px 20px rgba(59,130,246,.25);} .water-iq-badge-icon{background:white;color:#3f7acb;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;} .water-iq-fact{font-size:20px;line-height:1.35;font-weight:650;color:#0f172a;max-width:360px;} .water-iq-share,.water-iq-draft{padding:14px;border-radius:16px;border:1px solid rgba(59,130,246,.18);background:rgba(255,255,255,.9);display:grid;gap:10px;} .water-iq-share__actions{display:flex;flex-wrap:wrap;gap:10px;} .water-iq-draft__header{display:flex;align-items:center;justify-content:space-between;gap:10px;} .water-iq-draft__text{width:100%;min-height:120px;border-radius:12px;border:1px solid rgba(15,35,95,.2);padding:12px;font-family:inherit;font-size:14px;resize:vertical;} .water-iq-draft__actions{display:flex;justify-content:flex-end;} .wsH1{font-size:28px;line-height:1.15;margin:0 0 10px;} .wsH2{font-size:18px;margin:6px 0 6px;} .wsP{margin:8px 0 10px;line-height:1.45;} .wsQ{margin:10px 0 8px;font-size:18px;line-height:1.35;} .wsMuted{color:rgba(0,0,0,.62);font-size:13px;} .wsRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;} .wsBtnPrimary{background:#111;color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:650;cursor:pointer;} .wsBtnPrimary--pill{border-radius:999px;padding:12px 20px;background:linear-gradient(135deg,#4f9fe3,#2f6db9);box-shadow:0 12px 22px rgba(37,99,235,.2);} .wsBtnPrimary:disabled{opacity:.45;cursor:not-allowed;} .wsBtnGhost{background:transparent;color:#111;border:1px solid rgba(0,0,0,.16);border-radius:10px;padding:10px 14px;font-weight:650;cursor:pointer;text-decoration:none;display:inline-block;} .wsCallout{margin:10px 0 6px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);} .wsDisclosure{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.02);} .wsTopBar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;} .wsProgressWrap{flex:1;height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;} .wsProgress{height:100%;background:#111;border-radius:999px;} .wsChoices{display:flex;flex-direction:column;gap:10px;margin:12px 0;} .wsChoice{padding:12px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;text-align:left;cursor:pointer;} .wsChoice.isSelected{border-color:#111;box-shadow:0 0 0 2px rgba(0,0,0,.06) inset;} .wsChoice:disabled{opacity:.5;cursor:not-allowed;} .wsExplain{margin:10px 0 12px;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.03);} .wsGood,.wsBad{font-weight:750;margin-bottom:8px;} .wsSources{margin-top:10px;} .wsSources ul{margin:6px 0 0;padding-left:18px;} .wsLink{text-decoration:underline;} .wsNav{display:flex;justify-content:space-between;gap:10px;margin-top:8px;} .wsNumWrap{display:flex;flex-direction:column;gap:10px;margin:12px 0;} .wsNum{padding:12px;border:1px solid rgba(0,0,0,.14);border-radius:12px;font-size:16px;} .wsFoot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:rgba(0,0,0,.55);font-size:12px;} .wsGrid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px;margin-top:10px;} .wsStat{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;} .wsStatTitle{font-weight:800;} .wsStatValue{font-size:20px;font-weight:900;margin-top:4px;} .wsResultMoves{display:grid;gap:10px;margin-top:10px;} .wsResultMove{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);text-decoration:none;color:#111;background:#fff;display:block;} .wsResultMove strong{display:block;} .wsResultMove span{display:block;margin-top:4px;color:rgba(0,0,0,.65);font-size:13px;} .water-iq-dashboard{margin-top:18px;padding:16px;border-radius:16px;border:1px solid rgba(59,130,246,.25);background:rgba(59,130,246,.08);display:grid;gap:12px;} .water-iq-dashboard__actions{display:flex;flex-wrap:wrap;gap:10px;} .water-iq-badge-grid{display:grid;gap:10px;} .water-iq-badge-card{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(59,130,246,.12);} .water-iq-badge-card strong{display:block;} .water-iq-badge-card .wsMuted{display:block;font-size:12px;} .water-iq-badge-card.is-earned{border-color:rgba(59,130,246,.45);box-shadow:0 16px 28px rgba(59,130,246,.2);} .water-iq-badge-emoji{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(59,130,246,.12);font-size:18px;} .nav-link:hover,.nav-link:focus-visible,.btn:hover,.btn:focus-visible,.wsBtnPrimary:hover,.wsBtnPrimary:focus-visible,.wsBtnGhost:hover,.wsBtnGhost:focus-visible,.card:hover,.card:focus-visible,.wsResultMove:hover,.wsResultMove:focus-visible,.water-iq-badge-card:hover{animation:ws-wiggle .35s ease-in-out;} .wsBtnPrimary:hover,.wsBtnPrimary:focus-visible,.btn.primary:hover,.btn.primary:focus-visible{box-shadow:0 12px 28px rgba(59,130,246,.25);} .wsBtnGhost:hover,.wsBtnGhost:focus-visible{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.08);} .card:hover,.card:focus-visible,.wsResultMove:hover,.wsResultMove:focus-visible,.water-iq-badge-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(59,130,246,.16);} @keyframes ws-wiggle{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-2px) rotate(-0.35deg);}}
@media (max-width:640px){.nav-menu__panel{position:fixed;top:72px;right:12px;left:12px;min-width:auto;} .water-iq-card{padding:16px;border-radius:16px;} .water-iq-result-meta{flex-direction:column;align-items:flex-start;} .water-iq-score-circle{width:110px;height:110px;} .water-iq-fact{font-size:18px;} .wsRow{flex-direction:column;align-items:stretch;} .wsBtnPrimary,.wsBtnGhost{width:100%;text-align:center;} .wsBtnPrimary--pill{width:100%;} .wsNav{flex-direction:column;align-items:stretch;} .water-iq-badge-pill{width:100%;justify-content:center;text-align:center;}}
.ws-vignette-banner{position:fixed;bottom:18px;left:18px;right:18px;z-index:40;background:#0f172a;color:white;border-radius:16px;padding:14px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 20px 40px rgba(15,23,42,.35);opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;}
.ws-vignette-banner.is-visible{opacity:1;transform:translateY(0);}
.ws-vignette-banner__content{display:grid;gap:4px;}
.ws-vignette-banner__button{border:none;background:#38bdf8;color:#0f172a;padding:10px 16px;border-radius:999px;font-weight:700;min-height:44px;cursor:pointer;}
.ws-vignette-banner__button:focus-visible{outline:3px solid #fff;outline-offset:2px;}
@media (min-width:720px){.water-iq-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:768px){.hero{grid-template-columns:2fr 1fr;align-items:center;} .hero h1{font-size:40px;} }
@media print{.site-header,.footer,.ad-slot-placeholder,.actions,.wizard-actions,.nav-links{display:none!important;} body{background:white;} .layout-slab{box-shadow:none;border-color:#e2e8f0;} .hero{padding-top:0;}}