/* ============================================================================
   DHS PLUMBING — Paid-traffic landing pages
   Imports every token and component from the live site stylesheet, then adds
   only the patterns these four pages need that don't already exist there:
   badges, FAQ accordion, brand wordmark row, tank-vs-tankless table, and the
   icon+copy info list. Everything below is built from the same custom
   properties as site.css. No new colors, no new radii, no new spacing units.
   ========================================================================== */
@import url("../../assets/site.css");

/* ---- Photograph fill inside the shared .lp-hero placeholder ------------- */
/* site.css defines .lp-hero__ph as a gradient-only placeholder div. These
   pages ship licensed stock photography (see per-page comments), so this
   adds the <img> cover treatment without touching the shared file. */
.lp-hero__ph{background:var(--ink-deep)}
.lp-hero__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02)}

/* ---- Availability / offer badge, dark ground default -------------------- */
.badge{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;
  border:1px solid oklch(96.5% .012 82 / .34);border-radius:var(--radius);
  font-family:var(--font-spec);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--bone)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--copper-lift);flex-shrink:0}
.badge--ink{border-color:var(--rule);color:var(--ink)}
.badge--ink i{background:var(--copper)}

/* ---- FAQ accordion. Same grid-template-rows disclosure as .reveal/.sub -- */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;
  padding-block:1.35rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq__q .n{font-family:var(--font-spec);font-size:.75rem;color:var(--copper);
  flex-shrink:0;margin-right:.3rem;font-weight:600}
.faq__q__ico{flex-shrink:0;color:var(--copper);display:grid;place-items:center;
  transition:transform var(--d-panel) var(--ease-enter)}
.faq__q[aria-expanded="true"] .faq__q__ico{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-panel) var(--ease-enter)}
.faq__a.open{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--ink-muted);padding-bottom:1.35rem;max-width:62ch;font-size:.9375rem;line-height:1.65}

/* ---- Manufacturer wordmark row. Text, never fake logo art. -------------- */
.brands{display:flex;flex-wrap:wrap;gap:.6rem 2.75rem;align-items:baseline;
  padding-block:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.brands span{font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  letter-spacing:-.01em;color:var(--ink-muted)}
.brands small{display:block;font-family:var(--font-spec);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-bottom:1.2rem;width:100%}

/* ---- Tank vs. tankless comparison table --------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius)}
.compare{width:100%;border-collapse:collapse;min-width:520px}
.compare th,.compare td{padding:.95rem 1.15rem;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:.9375rem}
.compare thead th{font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  background:var(--bone-deep);border-bottom:1px solid var(--rule)}
.compare thead th:first-child{color:var(--ink-muted);font-weight:500;font-size:.8125rem}
.compare tbody th{font-family:var(--font-spec);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--copper);font-weight:600;white-space:nowrap;background:var(--bone-lift)}
.compare tbody td{color:var(--ink-muted);line-height:1.55}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}

/* ---- Icon + heading + copy list. Leak signs, causes, prevention tips. --- */
.infolist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.infolist li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:flex-start;
  padding-block:clamp(1.35rem,1.1rem + 1vw,1.85rem);border-bottom:1px solid var(--rule)}
.infolist svg{color:var(--copper);flex-shrink:0;margin-top:.2rem}
.infolist h3{font-size:1.05rem;margin-bottom:.35rem;font-weight:600}
.infolist p{color:var(--ink-muted);max-width:58ch;margin:0}

/* ---- Simple two-path service line (used for "signs it's time to call") - */
.techband .spec.lbl{color:var(--copper)}

/* ---- Warranty note strip: hairline rule pair around a short claim ------- */
.warrline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);display:flex;gap:1.1rem;align-items:flex-start}
.warrline svg{color:var(--copper);flex-shrink:0;margin-top:.15rem}
.warrline p{color:var(--ink-muted);max-width:62ch;margin:0}
.warrline b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;margin-bottom:.3rem}