/* =====================================================
   Water Leak & Freeze Sensors v2.0 — NEW PAGE
   File: water-leak-sensors.css
   Prefix: wl-
   ===================================================== */

/* ---- Hero ---- */
.wl-hero-wrap { position:relative; overflow:hidden; padding:8rem 0 7rem; }
.wl-hero-bg { background-image:url('../../images/water-leak-hero.webp'); background-size:cover; background-position:center top; position:absolute; inset:0; }
.wl-hero-overlay { background:linear-gradient(135deg,rgba(4,15,40,.90) 0%,rgba(6,14,31,.82) 50%,rgba(10,22,55,.88) 100%); position:absolute; inset:0; }
.wl-hero-orb { position:absolute; }
.wl-hero-orb.orb-1 { width:520px; height:520px; background:radial-gradient(circle,rgba(21,87,192,.35) 0%,transparent 70%); top:-100px; left:-120px; animation:wlOrb1 9s ease-in-out infinite; }
.wl-hero-orb.orb-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(56,189,248,.25) 0%,transparent 70%); bottom:-80px; right:-60px; animation:wlOrb2 12s ease-in-out infinite; }
@keyframes wlOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,20px) scale(1.08)} }
@keyframes wlOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,-15px) scale(1.05)} }
.wl-hero-inner { position:relative; z-index:3; }
.wl-hero-breadcrumb { background:transparent; padding:0; font-size:.8rem; }
.wl-hero-breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; }
.wl-hero-breadcrumb .active { color:rgba(255,255,255,.65); }
.wl-hero-eyebrow { background:rgba(21,87,192,.3); border:1px solid rgba(96,165,250,.4); backdrop-filter:blur(10px); padding:6px 18px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; color:#93c5fd; font-size:.82rem; font-weight:700; letter-spacing:.5px; margin-bottom:1.5rem; }
.wl-hero-h1 { font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; letter-spacing:-1.5px; line-height:1.1; color:#fff; margin-bottom:1.25rem; text-shadow:0 4px 32px rgba(0,0,0,.4); }
.wl-hero-grad { background:linear-gradient(90deg,#60a5fa 0%,#38bdf8 50%,#a78bfa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.wl-hero-sub { font-size:1.12rem; line-height:1.8; color:rgba(255,255,255,.72); max-width:720px; margin:0 auto 2rem; }
.wl-hero-ctas { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; align-items:center; }
.wl-hero-cta-btn { font-size:1.02rem; font-weight:700; box-shadow:0 8px 32px rgba(21,87,192,.45); border-radius:12px; display:inline-flex; align-items:center; gap:8px; }
.wl-hero-cta-call { color:rgba(255,255,255,.75); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:7px; text-decoration:none; border:1px solid rgba(255,255,255,.2); padding:12px 24px; border-radius:12px; backdrop-filter:blur(6px); transition:all .2s; }
.wl-hero-cta-call:hover { border-color:rgba(255,255,255,.5); color:#fff; }

/* ---- Shared ---- */
.wl-grad { background:linear-gradient(90deg,#1d4ed8 0%,#0284c7 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.wl-mini-cta-banner { background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-radius:20px; padding:2.25rem 2.5rem; box-shadow:0 12px 36px rgba(15,23,42,0.08); margin-top:1rem; }
.wl-advisor-callout { background:#eff6ff; border:1px solid rgba(59,130,246,0.15); border-radius:18px; padding:1.75rem 2rem; display:flex; gap:1.5rem; align-items:flex-start; }
.wl-advisor-callout-icon { width:48px; height:48px; border-radius:50%; background:rgba(37,99,235,0.1); color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.wl-advisor-callout-label { font-size:0.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#2563eb; margin-bottom:0.25rem; }
.wl-advisor-callout-text { font-size:0.97rem; color:#1e3a8a; line-height:1.65; }

/* ---- Disclosure ---- */
.wl-disclosure-section { padding:2rem 0; background:#fffbeb; border-bottom:1px solid #fde68a; }
.wl-disclosure-card { background:#fff; border:1px solid #fde68a; border-radius:16px; padding:1.5rem 2rem; display:flex; gap:1.25rem; align-items:flex-start; }
.wl-disclosure-icon { width:42px; height:42px; border-radius:50%; background:#fef3c7; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.wl-disclosure-title { font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#b45309; margin-bottom:0.25rem; }
.wl-disclosure-text { font-size:0.88rem; color:#78350f; line-height:1.6; margin:0; }

/* ---- Intro ---- */
.wl-intro-section { padding:7rem 0; background:#fff; position:relative; overflow:hidden; }
.wl-intro-glow-1 { position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(37,99,235,0.04) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.wl-intro-glow-2 { position:absolute; bottom:-100px; left:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(56,189,248,0.04) 0%,transparent 70%); border-radius:50%; pointer-events:none; }

/* ---- Tier Cards ---- */
.wl-tier-section { padding:7rem 0; background:#f8fafc; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; }
.wl-tier-card { background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:2.5rem; height:100%; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,0.02); transition:all .25s ease; position:relative; }
.wl-tier-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(37,99,235,0.05); border-color:rgba(37,99,235,0.2); }
.wl-tier-card.premium { border:2px solid #3b82f6; box-shadow:0 15px 35px rgba(37,99,235,0.06); }
.wl-tier-card.premium:hover { box-shadow:0 25px 50px rgba(37,99,235,0.12); }
.wl-tier-badge { position:absolute; top:1.25rem; right:1.5rem; background:#f1f5f9; color:#475569; font-size:0.72rem; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:99px; letter-spacing:0.5px; }
.wl-tier-card.premium .wl-tier-badge { background:#eff6ff; color:#2563eb; }
.wl-tier-icon { width:56px; height:56px; border-radius:16px; background:#eff6ff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#2563eb; margin-bottom:1.5rem; }
.wl-tier-card.premium .wl-tier-icon { background:#2563eb; color:#fff; }
.wl-tier-title { font-family:var(--fh); font-size:1.4rem; font-weight:800; color:#0f172a; margin-bottom:0.5rem; }
.wl-tier-intro { font-size:0.95rem; color:#475569; margin-bottom:2rem; line-height:1.6; }
.wl-tier-features { flex-grow:1; }
.wl-tier-features h5 { font-size:0.85rem; text-transform:uppercase; letter-spacing:0.5px; color:#64748b; margin-bottom:1rem; font-weight:700; }
.wl-tier-features ul { list-style:none; padding:0; margin:0 0 1.5rem 0; }
.wl-tier-features ul li { display:flex; gap:10px; font-size:0.95rem; color:#334155; line-height:1.6; margin-bottom:0.75rem; align-items:flex-start; }
.wl-tier-features ul li i { color:#10b981; font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.wl-tier-best-for { font-size:0.9rem; color:#475569; background:#f8fafc; border-radius:12px; padding:1rem 1.25rem; margin-top:auto; line-height:1.6; }
.wl-tier-best-for strong { color:#0f172a; }
.wl-shutoff-config { background:rgba(59,130,246,0.05); border:1px solid rgba(59,130,246,0.12); border-radius:16px; padding:1.5rem 2rem; }

/* ---- Locations ---- */
.wl-locations-section { padding:7rem 0; background:#fff; }
.wl-location-card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:2rem; height:100%; display:flex; gap:1.25rem; align-items:flex-start; transition:all .25s ease; }
.wl-location-card:hover { border-color:rgba(37,99,235,0.2); transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,99,235,0.04); }
.wl-location-icon { width:48px; height:48px; min-width:48px; border-radius:14px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.wl-location-card h4 { font-family:var(--fh); font-size:1.05rem; font-weight:800; color:#0f172a; margin-bottom:0.5rem; }
.wl-location-card p { font-size:0.92rem; color:#475569; line-height:1.6; margin:0; }

/* ---- Freeze (Dark) ---- */
.wl-freeze-section { padding:8rem 0; background:#0f172a; color:#fff; position:relative; overflow:hidden; }
.wl-freeze-image { border-radius:20px; overflow:hidden; box-shadow:0 20px 48px rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); }
.wl-freeze-image img { width:100%; height:auto; display:block; }
.wl-freeze-risk-list { list-style:none; padding:0; margin:0; }
.wl-freeze-risk-list li { display:flex; gap:12px; font-size:0.95rem; color:#94a3b8; line-height:1.6; margin-bottom:0.75rem; align-items:flex-start; }
.wl-freeze-risk-list li i { color:#60a5fa; font-size:1rem; flex-shrink:0; margin-top:3px; }
.wl-freeze-highlight { background:rgba(59,130,246,0.15); border:1px solid rgba(59,130,246,0.25); border-radius:16px; padding:1.75rem 2rem; }
.wl-freeze-highlight h5 { font-weight:800; font-size:1rem; color:#60a5fa; margin-bottom:0.5rem; }

/* ---- Insurance ---- */
.wl-insurance-section { padding:7rem 0; background:#f8fafc; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; }
.wl-insurance-card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:2.5rem; box-shadow:0 8px 24px rgba(0,0,0,0.02); }

/* ---- Placement Table ---- */
.wl-placement-section { padding:7rem 0; background:#fff; }
.wl-placement-table { border-radius:16px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 8px 24px rgba(0,0,0,0.02); }
.wl-placement-table table { width:100%; border-collapse:collapse; margin:0; }
.wl-placement-table thead th { background:#0f172a; color:#fff; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:1rem 1.5rem; text-align:left; }
.wl-placement-table tbody tr { border-bottom:1px solid #f1f5f9; transition:background .15s ease; }
.wl-placement-table tbody tr:last-child { border-bottom:none; }
.wl-placement-table tbody tr:hover { background:#f8fafc; }
.wl-placement-table tbody td { padding:1rem 1.5rem; font-size:0.95rem; color:#334155; line-height:1.6; vertical-align:top; }
.wl-placement-table tbody td:first-child { font-weight:700; color:#0f172a; white-space:nowrap; }

/* ---- Why HSC ---- */
.wl-why-section { padding:7rem 0; background:#fff; }
.wl-why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.wl-why-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:18px; padding:2rem; transition:all .22s ease; }
.wl-why-card:hover { background:#fff; border-color:rgba(37,99,235,0.2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,0.03); }
.wl-why-card-icon { width:44px; height:44px; border-radius:12px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.25rem; }
.wl-why-card h4 { font-family:var(--fh); font-size:1.1rem; font-weight:800; color:#0f172a; margin-bottom:0.5rem; }
.wl-why-card p { font-size:0.92rem; color:#475569; line-height:1.6; margin:0; }

/* ---- FAQ (Dark) ---- */
.wl-faq-section { padding:8rem 0; background:#0f172a; position:relative; overflow:hidden; }
.wl-faq-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(37,99,235,0.05) 0%,transparent 60%); pointer-events:none; }
.wl-faq-accordion-container { display:flex; flex-direction:column; gap:1rem; }
.wl-faq-accordion-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden; transition:all .2s ease; }
.wl-faq-accordion-item:hover { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.12); }
.wl-faq-accordion-btn { width:100%; background:transparent; border:none; padding:1.5rem; display:flex; justify-content:space-between; align-items:center; text-align:left; cursor:pointer; outline:none; }
.wl-faq-accordion-title { font-size:1.05rem; font-weight:700; color:#fff; padding-right:1.5rem; }
.wl-faq-accordion-icon-wrap { font-size:1.25rem; color:#60a5fa; font-weight:300; transition:transform .25s ease; line-height:1; }
.wl-faq-accordion-content { max-height:0; overflow:hidden; transition:max-height .25s cubic-bezier(0,1,0,1),padding .2s; padding:0 1.5rem; }
.wl-faq-accordion-text { font-size:0.95rem; color:#94a3b8; line-height:1.65; margin:0; }

/* ---- Final CTA & Disclaimer ---- */
.wl-final-cta-section { position:relative; background:#0f172a; overflow:hidden; border-top:1px solid rgba(255,255,255,0.08); }
.wl-final-cta-bg { position:absolute; inset:0; background-image:url('../../images/water-leak-home.webp'); background-size:cover; background-position:center; opacity:0.2; }
.wl-final-cta-desc { font-size:1.1rem; line-height:1.75; color:rgba(255,255,255,0.8); max-width:780px; margin:0 auto 2.5rem; }
.wl-final-cta-actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; margin-bottom:1.5rem; }
.wl-final-cta-btn-primary { border-radius:12px; font-weight:700; }
.wl-final-cta-hours { font-size:0.85rem; color:rgba(255,255,255,0.5); margin:0; }
.wl-disclaimer-section { padding:2.5rem 0; background:#0f172a; border-top:1px solid rgba(255,255,255,0.05); }
.wl-disclaimer-text { font-size:0.78rem; color:rgba(255,255,255,0.35); line-height:1.65; max-width:900px; margin:0 auto; text-align:center; }

/* ---- Responsive ---- */
@media(max-width:1199px){ .wl-why-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:991px){ .wl-mini-cta-banner{padding:1.75rem 2rem} .wl-why-grid{grid-template-columns:1fr} .wl-location-card{flex-direction:column} .wl-tier-card{padding:2rem} .wl-placement-table tbody td:first-child{white-space:normal} }
@media(max-width:767px){ .wl-hero-wrap{padding:6rem 0 5rem} .wl-intro-section,.wl-tier-section,.wl-locations-section,.wl-freeze-section,.wl-insurance-section,.wl-placement-section,.wl-why-section,.wl-faq-section{padding:5rem 0} .wl-mini-cta-banner{padding:1.5rem} .wl-advisor-callout{flex-direction:column;gap:1rem} .wl-disclosure-card{flex-direction:column;gap:1rem} .wl-hero-ctas{flex-direction:column} .wl-hero-cta-call{width:100%;justify-content:center;text-align:center} .wl-hero-cta-btn{width:100%;justify-content:center} .wl-placement-table thead th,.wl-placement-table tbody td{padding:.75rem 1rem;font-size:.88rem} }
@media(max-width:480px){ .wl-hero-h1{font-size:1.8rem;letter-spacing:-1px} .wl-hero-sub{font-size:1rem} .wl-why-card{padding:1.5rem} }