/* /warranty/ — the public 10-year warranty page. Uses the site's own tokens (vilo.css :root). Classes are wx-* so nothing else is touched. */

/* ---------- at a glance ---------- */
.wx-glances{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.wx-glances{grid-template-columns:repeat(4,1fr);gap:18px}}
.wx-glance,.wx-time,.wx-tier{background:var(--bg-alt);border-radius:var(--r-m);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:6px}
.wx-big{font:700 clamp(30px,4.4vw,48px)/1.02 var(--font);letter-spacing:-.035em;color:var(--brand)}
.wx-glance b,.wx-time b,.wx-tier b{font:650 17px/1.3 var(--font);color:var(--ink)}
.wx-glance p,.wx-time p,.wx-tier p{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.wx-note{margin-top:clamp(16px,2.4vw,24px);max-width:72ch;font-size:15px;line-height:1.5;color:var(--ink-3)}

/* ---------- material warranties ---------- */
.wx-mats{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-m);box-shadow:var(--shadow-s);overflow:hidden}
.wx-mat{display:grid;grid-template-columns:minmax(96px,160px) 1fr;gap:6px clamp(14px,3vw,32px);padding:clamp(14px,2vw,20px) clamp(16px,2.6vw,28px);border-top:1px solid var(--line-soft)}
.wx-mat:first-child{border-top:0}
.wx-term{font:700 clamp(20px,2.6vw,26px)/1.15 var(--font);letter-spacing:-.02em;color:var(--brand)}
.wx-mat b{display:block;font:650 17px/1.3 var(--font)}
.wx-mat p{margin-top:2px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.wx-none .wx-term{color:var(--ink-3)}
@media (max-width:560px){.wx-mat{grid-template-columns:1fr}}

/* ---------- covered / not covered cards ---------- */
.wx-cards{display:grid;gap:clamp(18px,2.6vw,28px);grid-template-columns:1fr}
@media (min-width:760px){.wx-cards{grid-template-columns:repeat(2,1fr)}}
.wx-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);box-shadow:var(--shadow-s);overflow:hidden}
.wx-media{position:relative;display:grid;grid-template-columns:1fr;gap:3px;background:var(--bg-alt)}
.wx-media.wx-two{grid-template-columns:1fr 1fr}
.wx-media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.wx-tag{position:absolute;left:14px;top:14px;padding:6px 13px;border-radius:var(--pill);background:#fff;font:650 13.5px/1 var(--font);letter-spacing:.01em;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.wx-ok .wx-tag{color:var(--good)}
.wx-no .wx-tag{color:var(--bad)}
.wx-body{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,26px)}
.wx-kick{font:600 13.5px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.wx-body p{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.wx-fix{padding-top:10px;margin-top:4px;border-top:1px solid var(--line-soft);color:var(--ink)}
.wx-fix b{color:var(--good)}

/* ---------- when it isn't covered ---------- */
.wx-steps{margin:0 0 clamp(20px,3vw,32px);padding:0;list-style:none;counter-reset:wx;display:grid;gap:12px;max-width:760px}
.wx-steps li{counter-increment:wx;position:relative;padding:14px 18px 14px 58px;background:var(--bg-alt);border-radius:var(--r-m);font-size:17px;line-height:1.45}
.wx-steps li::before{content:counter(wx);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font:700 15px/30px var(--font);text-align:center}
.wx-tiers{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.wx-tiers{grid-template-columns:repeat(4,1fr);gap:18px}}
.wx-price{font:700 clamp(30px,4vw,44px)/1.02 var(--font);letter-spacing:-.035em;color:var(--ink)}

/* ---------- timing ---------- */
.wx-times{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:860px){.wx-times{grid-template-columns:repeat(3,1fr);gap:18px}}
.wx-times .wx-big{font-size:clamp(24px,3.2vw,34px)}
.wx-times .wx-time{background:#fff;box-shadow:var(--shadow-s)}

/* ---------- how we tell the difference ---------- */
.wx-signs{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:860px}
.wx-signs li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--bg-alt);border-radius:var(--r-m)}
.wx-signs b{display:block;font:600 16.5px/1.35 var(--font)}
.wx-signs span:not(.wx-pill){display:block;margin-top:2px;font-size:14.5px;color:var(--ink-3)}
.wx-pill{flex:none;padding:6px 13px;border-radius:var(--pill);font:650 13.5px/1 var(--font);background:#fff;border:1px solid currentColor}
.wx-pill-ok{color:var(--good)}
.wx-pill-no{color:var(--bad)}
@media (max-width:520px){.wx-signs li{flex-direction:column;align-items:flex-start}}

/* ---------- make a claim ---------- */
.wx-claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(22px,3.4vw,40px);background:var(--tan);border-radius:var(--r-l)}
.wx-claim .lede{margin-top:8px;max-width:52ch}
.wx-acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- the agreement text ---------- */
.wx-law{background:var(--bg-alt);border-radius:var(--r-m);padding:0}
.wx-law summary{cursor:pointer;padding:18px 22px;font:650 17px/1.3 var(--font);list-style:none}
.wx-law summary::-webkit-details-marker{display:none}
.wx-law summary::after{content:"+";float:right;font-weight:500;color:var(--brand)}
.wx-law[open] summary::after{content:"–"}
.wx-lawtext{display:grid;gap:12px;padding:0 22px 22px;max-width:78ch}
.wx-lawtext p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- /fence-care/ (shares this stylesheet) ---------- */
.wx-glances.wx-three{grid-template-columns:1fr}
@media (min-width:760px){.wx-glances.wx-three{grid-template-columns:repeat(3,1fr)}}
.wx-big.wx-small{font-size:clamp(22px,2.8vw,30px);letter-spacing:-.025em}
.wx-term-s{font-size:clamp(18px,2.2vw,22px)}
.wx-term-s a{color:inherit;text-decoration:none}
.wx-term-s a:hover{text-decoration:underline;text-underline-offset:3px}
.wx-tips{margin:0;padding-left:20px;display:grid;gap:8px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.wx-prose{display:grid;gap:14px;max-width:72ch;font-size:17.5px;line-height:1.55;color:var(--ink-2)}
.wx-prose a,.wx-bul a,.ph-meta a{color:var(--brand);font-weight:600}
.wx-bul{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:78ch}
.wx-bul li{padding:16px 20px;border-radius:var(--r-m);background:#fff;box-shadow:var(--shadow-s);font-size:17px;line-height:1.5;color:var(--ink-2)}
.wx-bul b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.wx-card{transition:none}}