/* AnsweringHQ
   Structure follows what actually ranks for these terms:
   - service pages (answerconnect #5, wellreceived #3): announcement bar, utility
     bar with phone, nav + pill CTA, split hero, trust strip, icon cards, FAQ
   - the #1 result (getweave) is an ARTICLE: dark header, tags, read time,
     table of contents, flat isometric illustration
   Palette is semantic: teal = answered, brick = missed. Illustration over stock
   photography, matching the #1 page and the house style. */
:root{
  --ground:#FFFFFF;
  --wash:#F4F7F6;
  --cream:#F6EFE6;
  --ink:#14201F;
  --ink-2:#33403E;
  --mute:#5D6B68;
  --faint:#8B9793;
  --rule:#DCE4E1;
  --rule-soft:#EDF1EF;
  --brand:#0F5F4E;
  --brand-dk:#0A4034;
  --brand-lt:#3E9C82;
  --brand-bg:#E7F1ED;
  --missed:#B42318;
  --dark:#16262A;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.shell{width:min(100% - 40px,1080px);margin:0 auto}
a{color:var(--brand-dk)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;margin:0;
  text-wrap:balance;line-height:1.1}
h1{font-size:clamp(34px,5.4vw,54px)}
h2{font-size:clamp(26px,3.7vw,36px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
p{margin:0}

/* ── announcement + utility + nav ──────────────────── */
.announce{background:var(--brand);color:#DCEFE8;font-family:var(--display);
  font-size:13.5px;font-weight:600;text-align:center;padding:9px 20px}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.util{background:var(--dark);color:#9FB0AD;font-family:var(--display);font-size:13px}
.util .shell{display:flex;justify-content:flex-end;gap:22px;align-items:center;min-height:36px}
.util a{color:#CFDBD8;text-decoration:none;font-weight:600}
.util a:hover{color:#fff}
.nav{border-bottom:1px solid var(--rule);background:#fff;position:sticky;top:0;z-index:40}
.nav .shell{display:flex;align-items:center;gap:20px;min-height:70px}
.mark{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;flex:none}
.mark span{color:var(--brand)}
.nav-links{display:none;gap:26px;margin-left:auto}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none}
.nav-links a:hover{color:var(--brand)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:16px}
@media(min-width:900px){.nav-cta{margin-left:0}}
.pill{font-family:var(--display);font-weight:700;font-size:15px;background:var(--brand);color:#fff;
  padding:12px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;display:inline-block}
.pill:hover{background:var(--brand-dk);color:#fff}
.pill-wa{background:#25D366;color:#062B18}
.pill-wa:hover{background:#1FB855;color:#062B18}
.pill-ghost{background:transparent;color:var(--brand-dk);border:2px solid var(--brand)}
.pill-ghost:hover{background:var(--brand-bg);color:var(--brand-dk)}

/* ── hero: copy left, illustration right ───────────── */
.hero{background:var(--wash);border-bottom:1px solid var(--rule);padding:52px 0 0}
.hero .shell{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.hero .shell{grid-template-columns:1.05fr .95fr;gap:48px}}
.hero-copy{display:flex;flex-direction:column;gap:20px;padding-bottom:52px}
.hero-copy .sub{font-size:19.5px;color:var(--ink-2);max-width:46ch}
.hero-copy .sub b{font-weight:600;color:var(--ink)}
.hero-art{align-self:end}
.hero-art img{display:block;width:100%;border-radius:14px 14px 0 0;background:var(--cream)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:4px}
.hero-actions .tel{font-family:var(--display);font-weight:700;font-size:16px;color:var(--brand-dk);text-decoration:none}

/* ── trust strip ───────────────────────────────────── */
.trust{border-bottom:1px solid var(--rule);background:#fff}
.trust .shell{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:20px 0}
.trust div{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-size:14px;color:var(--mute)}
.trust b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── sections ──────────────────────────────────────── */
.sec{padding:62px 0}
.sec-wash{background:var(--wash);border-block:1px solid var(--rule)}
.sec-dark{background:var(--dark);color:#E6EDEB}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#A9B8B5}
.shead{max-width:62ch;display:flex;flex-direction:column;gap:12px;margin-bottom:34px}
.shead p{font-size:18.5px;color:var(--mute)}
.sec-dark .shead p{color:#A9B8B5}

/* ── the missed-call log: our artefact ─────────────── */
.log{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.sec-dark .log{background:#0E1B1E;border-color:#2A3B3E}
.log-scroll{overflow-x:auto}
.log-head{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;
  border-bottom:1px solid var(--rule);color:var(--mute);font-size:11.5px;letter-spacing:.06em}
.sec-dark .log-head{border-color:#2A3B3E;color:#7F918E}
.log-row,.log-foot{display:grid;grid-template-columns:84px 1fr 92px;gap:16px;align-items:baseline;
  padding:10px 18px;min-width:460px}
.log-row{border-bottom:1px solid var(--rule-soft)}
.sec-dark .log-row{border-color:#223336}
.log-row .t{color:var(--faint);white-space:nowrap}
.log-row .w{font-family:var(--body);font-size:15px;color:var(--ink-2)}
.sec-dark .log-row .w{color:#C4D2CF}
.log-row .v,.log-foot .v{text-align:right;color:var(--missed);white-space:nowrap}
.sec-dark .log-row .v,.sec-dark .log-foot .v{color:#F08A7A}
.log-foot{border-top:2px solid var(--ink);background:#FCF4F3}
.sec-dark .log-foot{border-color:#F08A7A;background:#221A1A}
.log-foot .w{font-family:var(--body);font-size:15px;font-weight:600}
.log-foot .v{font-weight:600}
.log-note{margin-top:12px;font-size:14px;color:var(--mute);max-width:62ch}
.sec-dark .log-note{color:#7F918E}

/* ── icon cards ────────────────────────────────────── */
.cards{display:grid;gap:18px}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column;gap:9px}
.card .ic{width:40px;height:40px;border-radius:10px;background:var(--brand-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.card .ic svg{width:21px;height:21px;stroke:var(--brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.card p{font-size:15.5px;color:var(--mute);line-height:1.5}

/* ── the wedge: numbered because it IS a sequence ──── */
.flow{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
@media(min-width:820px){.flow{grid-template-columns:repeat(5,1fr)}}
.step{background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--brand-lt);font-weight:500}
.step h3{font-size:16.5px}
.step p{font-size:14.5px;color:var(--mute);line-height:1.5}
.step.hi{background:var(--brand-bg)}

/* ── comparison table ──────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
th{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--ink);text-align:left;
  padding:14px 18px;border-bottom:2px solid var(--rule);white-space:nowrap}
th:last-child{color:var(--brand)}
td{padding:13px 18px;border-bottom:1px solid var(--rule-soft)}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.yes{color:var(--brand-dk);font-weight:600}
.no{color:var(--faint)}

/* ── verticals ─────────────────────────────────────── */
.verts{display:grid;gap:16px}
@media(min-width:720px){.verts{grid-template-columns:repeat(2,1fr)}}
.vert{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none}
.vert:hover{border-color:var(--brand-lt);background:var(--brand-bg)}
.vert p{font-size:15.5px;color:var(--mute);line-height:1.5}
.vert .go{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--brand);margin-top:4px}
.vert.soon{background:var(--wash);pointer-events:none}
.vert.soon h3,.vert.soon p{color:var(--faint)}

/* ── faq ───────────────────────────────────────────── */
.faq{max-width:760px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{font-family:var(--display);font-weight:700;font-size:17.5px;padding:18px 34px 18px 0;
  cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-size:22px;
  font-weight:400;color:var(--brand)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 20px;font-size:16.5px;color:var(--ink-2);max-width:64ch}

/* ── cta band ──────────────────────────────────────── */
.band{background:var(--dark);color:#fff;padding:60px 0}
.band h2{color:#fff}
.band p{color:#A9B8B5;font-size:18px;max-width:52ch;margin-top:12px}
.band-actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:26px}
.band .tel{font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,26px);
  color:#fff;text-decoration:none;letter-spacing:-.02em}
.band .tel:hover{color:var(--brand-lt)}
.band small{display:block;margin-top:16px;color:#7F918E;font-family:var(--display);font-size:14px}

/* ── footer ────────────────────────────────────────── */
footer{background:#fff;border-top:1px solid var(--rule);padding:30px 0 56px;font-size:14.5px;color:var(--mute)}
footer .shell{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--brand)}

/* ── ARTICLE shape (mirrors the #1 result) ─────────── */
.art-head{background:var(--dark);color:#fff;padding:44px 0 48px}
.art-head .shell{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.art-head .shell{grid-template-columns:.85fr 1.15fr;gap:44px}}
.art-art img{display:block;width:100%;border-radius:16px;background:var(--cream)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tags span{font-family:var(--display);font-size:12.5px;font-weight:600;color:#CFDBD8;
  background:#22343A;border-radius:999px;padding:5px 13px}
.art-head h1{color:#fff;font-size:clamp(29px,4.2vw,42px)}
.art-meta{font-family:var(--mono);font-size:12px;letter-spacing:.09em;color:#7F918E;margin:16px 0 14px}
.art-head .stand{color:#B9C7C4;font-size:18px;line-height:1.55;max-width:56ch}
.art-body{padding:48px 0 0;display:grid;gap:40px}
@media(min-width:960px){.art-body{grid-template-columns:230px 1fr;gap:52px;align-items:start}}
.toc{position:sticky;top:92px;font-family:var(--display);font-size:14.5px}
.toc h4{font-size:13px;letter-spacing:.08em;color:var(--mute);margin-bottom:12px;font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  border-left:2px solid var(--rule)}
.toc a{display:block;padding-left:14px;margin-left:-2px;color:var(--ink-2);
  text-decoration:none;border-left:2px solid transparent;line-height:1.35}
.toc a:hover{color:var(--brand);border-left-color:var(--brand)}
.art{max-width:68ch}
.art .kicker{font-family:var(--display);font-size:13px;font-weight:700;color:var(--brand);
  display:block;margin-bottom:14px}
.art h1{font-size:clamp(30px,5vw,44px);margin-bottom:18px}
.art .stand{font-size:19.5px;line-height:1.55;color:var(--ink-2)}
.art .byline{font-family:var(--display);font-size:13.5px;color:var(--faint);margin-top:14px}
.art figure{margin:30px 0;padding:0}
.art figure img{width:100%;display:block;border-radius:12px;border:1px solid var(--rule)}
.art h2{margin:40px 0 14px;font-size:clamp(23px,3vw,29px);scroll-margin-top:96px}
.art h3{margin:28px 0 8px}
.art p{margin:0 0 17px}
.art ul,.art ol{margin:0 0 20px;padding-left:22px}
.art li{margin-bottom:9px}
.art strong{font-weight:600}
.art table{margin:24px 0}
.art .pull{border-left:3px solid var(--brand);padding:4px 0 4px 22px;margin:28px 0}
.art .pull p{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.32;margin:0}
.art .hp{display:none}
.art .log{margin:26px 0}

.end{margin:48px 0 0;background:var(--brand-bg);border:1px solid var(--brand-lt);
  border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.end h3{font-size:22px}
.end p{font-size:16.5px;color:var(--ink-2);margin:0}
.end-actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:8px}

:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── vertical hero: centred dark, mirroring the shape that ranks #3
   for "plumber answering service" on a young domain ─────────────── */
.vhero{background:var(--dark);color:#fff;padding:56px 0 0;text-align:center}
.vhero .shell{display:flex;flex-direction:column;align-items:center;gap:18px}
.eyebrow{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--brand-lt);background:#22343A;border-radius:999px;padding:7px 16px}
.vhero h1{color:#fff;max-width:16ch}
.vsub{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.6vw,25px);
  color:#9FB0AD;letter-spacing:-.02em}
.vsub em{font-style:normal;color:#F08A7A}
.vscene{max-width:60ch;display:flex;flex-direction:column;gap:16px}
.vscene p{font-size:18px;line-height:1.6;color:#B9C7C4}
.vscene .vcap{color:#fff}
.vactions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:center;margin-top:6px}
.vactions .tel{font-family:var(--display);font-weight:700;font-size:16px;color:#CFDBD8;text-decoration:none}
.vactions .tel:hover{color:#fff}
.vart{width:min(100%,460px);margin-top:12px}
.vart img{display:block;width:100%;border-radius:16px 16px 0 0;background:var(--cream)}