/* warranty.html — green-numbered ordered lists in the prose */
.prose ol { list-style:none; margin-left:0; counter-reset:w; }
.prose ol li { counter-increment:w; position:relative; padding-left:46px; margin:14px 0; }
.prose ol li::before { content:counter(w); position:absolute; left:0; top:1px; width:30px; height:30px; border-radius:50%; background:var(--green-tint); color:var(--green-hover); font-family:var(--font-display); font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:center; }

/* warranty.html — GAF tier comparison cards */
.warranty-tiers { padding:64px 0; background:#fafafa; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.warranty-tiers .sec-head .lede { max-width:640px; margin-left:auto; margin-right:auto; }

.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; align-items:start; }
@media (max-width:960px) { .tier-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; } }

.tier-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 28px; box-shadow:var(--shadow-sm); }
.tier-eyebrow { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-hover); background:var(--green-tint); padding:5px 12px; border-radius:999px; }
.tier-card h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; font-size:22px; margin:16px 0 10px; color:var(--fg); }
.tier-avail { font-size:13.5px; color:var(--fg-subtle); margin:0 0 18px; line-height:1.5; }
.tier-list { list-style:none; margin:0; padding:0; }
.tier-list li { position:relative; padding-left:22px; margin:14px 0; font-size:14.5px; line-height:1.6; color:var(--fg-muted); }
.tier-list li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--green-hover); font-weight:700; }
.tier-list strong { color:var(--fg); }

/* Golden Pledge — flagship emphasis */
.tier-card.featured { border:2px solid #C99A2E; background:linear-gradient(180deg,#FFFBF0,#ffffff); box-shadow:var(--shadow-lg); z-index:1; }
.tier-card.featured::before { display:none; }
@media (min-width:961px) { .tier-card.featured { transform:translateY(-14px); padding-top:40px; padding-bottom:40px; } }
.tier-flag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#C99A2E; color:#fff; font-family:var(--font-body); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.tier-eyebrow.gold { color:#8A6A16; background:#F5E6BE; }
.tier-card.featured h3 { color:#8A6A16; }

.tier-switch { display:flex; gap:6px; background:#F5E6BE; border-radius:999px; padding:4px; margin:4px 0 20px; }
.tier-switch-btn { flex:1; border:0; background:none; padding:9px 10px; border-radius:999px; font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.01em; color:#8A6A16; cursor:pointer; transition:background .15s, color .15s; }
.tier-switch-btn.active { background:#8A6A16; color:#fff; }
.tier-switch-btn:not(.active):hover { background:rgba(138,106,22,.12); }

/* GAF Master Elite mark — same white-panel treatment as the OC and
   CertainTeed section logos, sized to the square/diamond footprint. */
.gaf-logo-panel { background:#fff; border:1px solid var(--border-subtle); border-radius:14px; padding:22px 32px; margin:22px auto 6px; max-width:250px; box-shadow:var(--shadow-sm); }
.gaf-logo-panel img { width:100%; height:auto; max-width:150px; margin:0 auto; }

.tier-footnote { font-size:13px; color:var(--fg-subtle); text-align:center; max-width:720px; margin:40px auto 0; line-height:1.6; }

/* ============================================================
   Warranty hub — intro, workmanship, Owens Corning, compare, FAQ
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Intro — how roof coverage works */
.warranty-intro { padding:64px 0 56px; }
.wi-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
@media (max-width:800px) { .wi-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; } }
.wi-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow-sm); }
.wi-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--green-tint); color:var(--green-hover); font-family:var(--font-display); font-weight:600; font-size:15px; }
.wi-card h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:19px; margin:14px 0 8px; color:var(--fg); }
.wi-card p { font-size:15px; line-height:1.65; color:var(--fg-muted); margin:0 0 14px; }

/* 01 — Workmanship */
.warranty-section { padding:64px 0; background:var(--surface-subtle); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.warranty-section .sec-head .lede { max-width:660px; margin-left:auto; margin-right:auto; }
.ws-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px; }
@media (max-width:800px) { .ws-grid { grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; } }
.ws-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm); }
.ws-card h3 { position:relative; padding-left:26px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:17px; margin:0 0 8px; color:var(--fg); }
.ws-card h3::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green-hover); font-family:var(--font-body); font-weight:700; font-size:15px; }
.ws-card p { font-size:14.5px; line-height:1.65; color:var(--fg-muted); margin:0; }

.ws-gcl { display:flex; gap:18px; align-items:flex-start; background:var(--green-tint); border:1px solid rgba(28,190,114,.28); border-radius:16px; padding:26px 24px; margin-top:22px; }
.ws-gcl-ic { flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--green-hover); display:flex; align-items:center; justify-content:center; }
.ws-gcl h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:18px; margin:0 0 8px; color:var(--fg); }
.ws-gcl p { font-size:14.5px; line-height:1.65; color:var(--fg-muted); margin:0; }
.ws-gcl a { color:var(--green-hover); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px) { .ws-gcl { flex-direction:column; } }

.ws-notes { max-width:820px; margin:26px auto 0; }
.ws-notes p { font-size:14px; line-height:1.7; color:var(--fg-subtle); margin:0 0 10px; }
.ws-notes strong { color:var(--fg-muted); }

/* 02 — Manufacturer intro */
.mfr-intro { padding:64px 0 0; }
.mfr-intro .sec-head .lede { max-width:680px; margin-left:auto; margin-right:auto; }

/* Owens Corning */
.oc-section { padding:64px 0; }
.oc-section .sec-head .lede { max-width:680px; margin-left:auto; margin-right:auto; }
/* Brand safety: OC wordmark is black — always on a white panel with clear space. */
.oc-logo-panel { background:#fff; border:1px solid var(--border-subtle); border-radius:14px; padding:28px 32px; margin:22px auto 6px; max-width:460px; box-shadow:var(--shadow-sm); }
.oc-logo-panel img { width:100%; height:auto; max-width:340px; margin:0 auto; }

.oc-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; align-items:start; }
@media (max-width:860px) { .oc-grid { grid-template-columns:1fr; max-width:540px; margin-left:auto; margin-right:auto; } }
.oc-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 28px; box-shadow:var(--shadow-sm); }
.oc-card.featured { border:2px solid var(--green); box-shadow:var(--shadow-lg); }
@media (min-width:861px) { .oc-card.featured { transform:translateY(-12px); padding-top:38px; padding-bottom:38px; } }
.oc-flag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-family:var(--font-body); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.oc-eyebrow { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); background:var(--surface-subtle); padding:5px 12px; border-radius:999px; }
.oc-eyebrow.green { color:var(--green-hover); background:var(--green-tint); }
.oc-card h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; font-size:22px; margin:16px 0 16px; color:var(--fg); }

.oc-register { display:flex; gap:18px; align-items:flex-start; background:var(--green-tint); border:1px solid rgba(28,190,114,.28); border-radius:16px; padding:26px 24px; margin-top:32px; }
.oc-register-ic { flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--green-hover); display:flex; align-items:center; justify-content:center; }
.oc-register h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:18px; margin:0 0 8px; color:var(--fg); }
.oc-register p { font-size:14.5px; line-height:1.65; color:var(--fg-muted); margin:0; }
@media (max-width:560px) { .oc-register { flex-direction:column; } }

.oc-note { font-size:14px; line-height:1.7; color:var(--fg-subtle); text-align:center; max-width:720px; margin:22px auto 0; }
.oc-note a { color:var(--green-hover); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.oc-cta { text-align:center; margin-top:30px; }

/* CertainTeed — reuses the Owens Corning section pattern (same structure,
   same tokens); CertainTeed blue replaces green for the featured accent. */
.ct-section { padding:64px 0; background:var(--surface-subtle); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.ct-section .sec-head .lede { max-width:700px; margin-left:auto; margin-right:auto; }
/* Brand safety: mark always on a white panel with clear space. */
.ct-logo-panel { background:#fff; border:1px solid var(--border-subtle); border-radius:14px; padding:26px 32px; margin:22px auto 6px; max-width:300px; box-shadow:var(--shadow-sm); }
.ct-logo-panel img { width:100%; height:auto; max-width:190px; margin:0 auto; }

.ct-eyebrow { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); background:var(--surface-subtle); padding:5px 12px; border-radius:999px; }
.ct-eyebrow.blue { color:#1B5FA8; background:#E8F1FA; }
.ct-sys-lead { font-size:14.5px; line-height:1.65; color:var(--fg-muted); margin:0 0 6px; }
.ct-sys li { margin:10px 0; }

/* Homeowner / Property Owner toggle — reuses the GAF .tier-switch component,
   re-themed from Golden Pledge gold to CertainTeed blue for this section. */
.ct-switch-host { max-width:900px; margin:40px auto 0; }
.ct-switch { max-width:420px; margin:0 auto 22px; background:#E8F1FA; }
.ct-switch .tier-switch-btn { color:#1B5FA8; }
.ct-switch .tier-switch-btn.active { background:#1B5FA8; color:#fff; }
.ct-switch .tier-switch-btn:not(.active):hover { background:rgba(27,95,168,.12); }

.ct-eligibility { font-size:14.5px; line-height:1.7; color:var(--fg-muted); text-align:center; max-width:760px; margin:0 auto 24px; }
.ct-eligibility strong { color:var(--fg); }

/* Coverage matrix — mirrors the site-wide comparison table's language */
.ct-matrix-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-sm); }
.ct-matrix-scroll:focus-visible { outline:2px solid #1B5FA8; outline-offset:2px; }
.ct-matrix { width:100%; border-collapse:collapse; min-width:620px; }
.ct-matrix th, .ct-matrix td { padding:14px 16px; text-align:center; font-size:14.5px; line-height:1.5; border-bottom:1px solid var(--border-subtle); }
.ct-matrix thead th { background:var(--surface-muted); border-bottom:2px solid var(--border); vertical-align:bottom; padding-top:16px; }
.ct-matrix thead th:first-child { text-align:left; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:13px; color:var(--fg-subtle); }
.ct-matrix tbody th { text-align:left; font-weight:700; color:var(--fg); background:var(--surface-muted); white-space:nowrap; }
.ct-matrix tbody td { color:var(--fg-muted); }
.ct-matrix tbody tr:last-child th, .ct-matrix tbody tr:last-child td { border-bottom:0; }
.ct-stars { display:block; color:#1B5FA8; font-size:12px; letter-spacing:2px; line-height:1; margin-bottom:5px; }
.ct-lvl { display:block; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:15px; color:var(--fg); }
.ct-cov { display:block; font-size:11px; line-height:1.35; color:var(--fg-subtle); margin-top:3px; }
.ct-ours { display:block; background:#1B5FA8; color:#fff; font-family:var(--font-body); font-weight:800; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:4px 8px; border-radius:999px; margin-bottom:7px; white-space:nowrap; }
/* 4-STAR column — the level Home Source installs */
.ct-matrix .is-ours { background:#F2F8FD; }
.ct-matrix thead th.is-ours { background:#E8F1FA; }
.ct-matrix tbody td.is-ours { color:var(--fg); font-weight:600; }
.ct-matrix .inc { color:#1B5FA8; font-weight:700; font-size:16px; }
.ct-matrix .exc { color:var(--fg-subtle); }
.ct-fn { font-size:13px; line-height:1.65; color:var(--fg-subtle); max-width:760px; margin:16px auto 0; text-align:center; }
.ct-fn strong { color:var(--fg-muted); }

/* Integrity Roof System requirement card */
.ct-sys-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow-sm); max-width:900px; margin:24px auto 0; }
.ct-sys-card h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; font-size:20px; margin:14px 0 10px; color:var(--fg); }
.ct-sys-card .ct-sys { display:grid; grid-template-columns:repeat(3,1fr); gap:2px 24px; }
@media (max-width:700px) { .ct-sys-card .ct-sys { grid-template-columns:1fr 1fr; } }
@media (max-width:420px) { .ct-sys-card .ct-sys { grid-template-columns:1fr; } }
.ct-sys-card .tier-list li::before { color:#1B5FA8; }

.ct-note { font-size:14px; line-height:1.7; color:var(--fg-muted); max-width:760px; margin:22px auto 0; text-align:center; }
.ct-note strong { color:var(--fg); }
.ct-note a { color:var(--green-hover); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.ct-disclaimer { font-size:12.5px; line-height:1.65; color:var(--fg-subtle); max-width:820px; margin:28px auto 0; text-align:center; }
.ct-disclaimer a { color:var(--green-hover); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.ct-cta { text-align:center; margin-top:30px; }

/* Comparison table */
.wcompare { padding:64px 0; background:var(--surface-subtle); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.wcompare .sec-head .lede { max-width:620px; margin-left:auto; margin-right:auto; }
.wcompare-hint { display:none; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-subtle); text-align:right; margin:26px 0 8px; }
.wcompare-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:36px; border-radius:16px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-sm); }
.wcompare-scroll:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.wcompare-table { width:100%; border-collapse:collapse; min-width:1000px; }
.wcompare-table th, .wcompare-table td { padding:16px 18px; text-align:left; font-size:14px; line-height:1.5; border-bottom:1px solid var(--border-subtle); vertical-align:top; }
.wcompare-table thead th { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:14px; color:var(--fg); background:var(--surface-muted); border-bottom:2px solid var(--border); }
.wcompare-table tbody th { font-weight:700; color:var(--fg); width:190px; background:var(--surface-muted); }
.wcompare-table td { color:var(--fg-muted); }
.wcompare-table tbody tr:last-child th, .wcompare-table tbody tr:last-child td { border-bottom:0; }
.wcompare-table .yes { color:var(--green-hover); font-weight:700; }
.wcompare-table .no { color:var(--fg-subtle); font-weight:700; }
@media (max-width:820px) { .wcompare-hint { display:block; } .wcompare-scroll { margin-top:0; } }

/* FAQ */
.wfaq { padding:64px 0; }
.wfaq-list { max-width:820px; margin:40px auto 0; display:flex; flex-direction:column; gap:12px; }
.wfaq-item { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
.wfaq-item summary { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:15.5px; line-height:1.45; color:var(--fg); list-style:none; }
.wfaq-item summary::-webkit-details-marker { display:none; }
.wfaq-item summary::after { content:"+"; flex:0 0 auto; font-family:var(--font-body); font-weight:400; font-size:22px; line-height:1; color:var(--green-hover); transition:transform .18s ease; }
.wfaq-item[open] summary::after { content:"−"; }
.wfaq-item summary:hover { background:var(--surface-muted); }
.wfaq-item summary:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.wfaq-a { padding:0 22px 20px; }
.wfaq-a p { font-size:14.5px; line-height:1.7; color:var(--fg-muted); margin:0; }

/* Good Contractors List partnership section (ported from homepage) */
.gcl { padding:64px 0; }
.gcl-row { display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:center; }
.gcl-badge { display:flex; justify-content:center; }
.gcl-badge img { max-width:300px; width:100%; height:auto; border-radius:10px; filter:drop-shadow(0 16px 34px rgba(0,0,0,.16)); }
@media (max-width:900px) { .gcl-row { grid-template-columns:1fr; gap:30px; text-align:center; } .gcl-badge img { max-width:240px; } .gcl-row > div:last-child > div { justify-content:center; } }