/* Ackerman answer engine. Loaded after theme.css, so the answers look like the rest
   of the company. Reading-optimized: one column, generous measure, the answer first. */

.ans{padding-block:34px 10px}
.ans .wrap{max-width:820px}

.crumbs{font-size:.86rem;color:var(--ink-2);margin:0 0 18px;letter-spacing:.01em}
.crumbs a{color:var(--red);text-decoration:none;font-weight:700}
.crumbs span[aria-hidden]{margin:0 6px;color:var(--line)}

.ans h1{font-size:clamp(1.7rem,4.6vw,2.6rem);color:var(--navy);margin-bottom:.5em;letter-spacing:-.025em}

/* The snippet. Deliberately the most prominent thing on the page: it is what a
   searcher, a featured snippet and an AI assistant all take away. */
.short-answer{
  font-size:clamp(1.08rem,2.4vw,1.28rem);line-height:1.58;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:var(--r);padding:22px 24px;margin:0 0 26px;
  box-shadow:0 2px 10px rgba(16,32,52,.05);
}

.ans-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:0 0 34px}
.btn-lg{padding:16px 26px;font-size:1.16rem}
.ans-cta-note{font-size:.95rem;color:var(--ink-2);max-width:34ch}

.prose section{margin:0 0 30px}
.prose h2{font-size:clamp(1.22rem,2.8vw,1.52rem);color:var(--navy);margin:0 0 .5em;letter-spacing:-.015em}
.prose p{margin:0 0 1em;line-height:1.68}
.prose ul,.prose ol{margin:0 0 1em;padding-left:24px;line-height:1.68}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--navy)}

/* Emergency panel. Only on intent=emergency, and it sits above the explanation
   because someone with no water does not want the explanation first. */
.donow{background:#fff5f5;border:1px solid rgba(164,22,26,.28);border-radius:var(--r);
  padding:22px 26px 22px 24px}
.donow h2{color:var(--red-dk);margin-bottom:.45em}
.donow ol{margin:0;padding-left:22px}
.donow li{margin-bottom:.55em;font-weight:600;color:var(--ink)}

/* Fact table. Cost pages live or die on whether real numbers are visible. */
.facts dl{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--white)}
.facts dl > div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 18px;
  border-bottom:1px solid var(--line)}
.facts dl > div:last-child{border-bottom:0}
.facts dt{color:var(--ink-2);font-size:.97rem}
.facts dd{margin:0;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}

/* The local note is the moat. Give it its own voice. */
.local{background:var(--navy);color:#dce7f3;border-radius:var(--r);padding:24px 26px;margin:0 0 30px}
.local h2{color:#fff;font-size:1.16rem;margin-bottom:.45em}
.local p{margin:0;line-height:1.66;color:#c3d5e8}

.convert{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;margin:36px 0 30px;text-align:center}
.convert h2{color:var(--navy);font-size:1.3rem;margin-bottom:.4em}
.convert p{color:var(--ink-2);max-width:52ch;margin:0 auto 1.1em}
.convert-more{margin:16px 0 0;font-size:.95rem}
.convert-more a{color:var(--red);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(164,22,26,.3)}

.related{margin:0 0 26px}
.related h2{font-size:1.16rem;color:var(--navy);margin-bottom:.5em}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.related a{color:var(--navy);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;font-size:1.02rem}
.related a:hover{color:var(--red);border-bottom-color:var(--red)}

/* The publication line. It now carries the honest attribution and the not-a-diagnosis
   note, so it runs to two or three lines and needs real measure and leading. */
.updated{font-size:.88rem;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:16px;margin:0 0 8px;line-height:1.55;max-width:62ch}

/* ---------- hub ---------- */
.hub .wrap{max-width:960px}
.hub .lede{font-size:1.12rem;color:var(--ink-2);max-width:62ch;margin-bottom:2em;line-height:1.62}
.hub .lede a{color:var(--red);font-weight:700;text-decoration:none}

.router{background:var(--navy);border-radius:var(--r);padding:26px;margin:0 0 40px}
.router h2{color:#fff;font-size:1.24rem;margin-bottom:.7em}
.router-grid{display:grid;gap:10px}
@media(min-width:700px){.router-grid{grid-template-columns:repeat(2,1fr)}}
.sym{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px 16px;
  color:#e8f0f9;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.35;
  transition:background .12s ease,border-color .12s ease,transform .12s ease}
.sym::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--red-2)}
.sym:hover{background:rgba(164,22,26,.22);border-color:var(--red-2);transform:translateX(2px)}

.cl{margin:0 0 34px}
.cl h2{font-size:1.42rem;color:var(--navy);margin-bottom:.25em;letter-spacing:-.018em}
.cl-b{color:var(--ink-2);margin:0 0 1em;max-width:58ch}
.cl ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.cl li{border-bottom:1px solid var(--line)}
.cl li:last-child{border-bottom:0}
.cl a{display:block;padding:14px 18px;color:var(--navy);text-decoration:none;font-weight:600}
.cl a:hover{background:var(--paper);color:var(--red)}

/* Footer links. theme.css does not style these, so without this rule the browser
   default #0000ee lands on the navy footer at 1.92:1 contrast and the phone number
   is effectively invisible. Caught by Lighthouse, not by eye. */
.foot a{color:#9fc4e8;text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(159,196,232,.35)}
.foot a:hover,.foot a:focus-visible{color:#fff;border-bottom-color:#fff}