/* Plumber AI Index — distinct theme (pipe-teal + copper), separate from the directory's steel+amber */
:root{
  --ink:#16201f; --ink-soft:#3f4e4c; --ink-muted:#6b7a78;
  --paper:#ffffff; --paper-warm:#f5f3ee; --paper-mid:#ece8df; --line:#e3dfd6;
  --pipe:#0e5b6b; --pipe-dark:#0a4350; --pipe-light:#e3eff0;
  --copper:#bd5f2a; --copper-light:#dd8b54; --copper-pale:#f8ebdf;
  --radius:9px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;}
h1,h2,h3,h4{font-family:'Archivo','Inter',sans-serif;line-height:1.12;letter-spacing:-0.01em;}
a{color:var(--pipe);}
.skip-link{position:absolute;left:-999px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;font-size:1.18rem;}
.brand .mk{display:inline-flex;width:26px;height:26px;border-radius:7px;background:var(--pipe);color:#fff;align-items:center;justify-content:center;font-size:0.85rem;}
.brand span{color:var(--copper);}
.nav-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:0.93rem;}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-weight:500;}
.nav-links a:hover{color:var(--pipe);}
.nav-cta{background:var(--copper);color:#fff !important;padding:8px 15px;border-radius:var(--radius);font-weight:600;}
.btn{display:inline-block;padding:13px 22px;border-radius:var(--radius);font-weight:600;text-decoration:none;font-size:0.95rem;}
.btn-primary{background:var(--copper);color:#fff;border:2px solid var(--copper);}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);}
.btn-out{background:#fff;color:var(--pipe);border:2px solid var(--pipe);}
.hero{background:var(--pipe);color:#fff;padding:46px 0 40px;}
.hero h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin:0 0 14px;color:#fff;}
.hero p.sub{font-size:1.08rem;color:rgba(255,255,255,0.9);max-width:640px;margin:0 0 20px;}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.hero .trust{font-size:0.85rem;color:rgba(255,255,255,0.72);}
section.pad{padding:40px 0;}
.pad.warm{background:var(--paper-warm);}
.sec-tag{display:inline-block;font-size:0.74rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--copper);margin-bottom:7px;}
.sec-title{font-size:1.55rem;font-weight:800;margin:0 0 8px;}
.sec-sub{color:var(--ink-soft);max-width:680px;margin:0 0 22px;}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;}
.card h3{margin:0 0 7px;font-size:1.12rem;}
.card.path{border-top:4px solid var(--copper);}
.card .lead{color:var(--ink-soft);font-size:0.95rem;margin:0 0 12px;}
.card a.more{font-weight:600;text-decoration:none;}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.tool{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 16px;}
.tool .nm{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;}
.tool .pr{color:var(--copper);font-weight:700;font-size:0.95rem;margin:2px 0 6px;}
.tool .ds{font-size:0.9rem;color:var(--ink-soft);margin-bottom:9px;}
.tool a{font-size:0.86rem;font-weight:600;text-decoration:none;}
.guides{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;}
.guides a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;text-decoration:none;color:var(--ink);font-weight:600;font-size:0.95rem;}
.guides a:hover{border-color:var(--pipe);color:var(--pipe);}
.guides a.soon{color:var(--ink-muted);font-weight:500;pointer-events:none;}
.guides a small{display:block;font-weight:400;color:var(--ink-muted);font-size:0.8rem;margin-top:3px;}
table.cmp{width:100%;border-collapse:collapse;font-size:0.92rem;background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;}
table.cmp th,table.cmp td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);}
table.cmp thead th{background:var(--pipe);color:#fff;font-family:'Archivo',sans-serif;}
table.cmp tbody tr:last-child td{border-bottom:none;}
.verdict{background:var(--pipe-light);border:1px solid #cfe2e4;border-left:5px solid var(--pipe);border-radius:10px;padding:16px 18px;font-size:1.02rem;}
.pickbox{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pickbox .p{background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px 18px;}
.pickbox .p.a{border-top:4px solid var(--copper);}
.pickbox .p.b{border-top:4px solid var(--pipe);}
.slot{background:repeating-linear-gradient(45deg,#f3f1ec,#f3f1ec 12px,#eee9df 12px,#eee9df 24px);border:1px dashed var(--copper);border-radius:10px;padding:26px 18px;text-align:center;color:var(--ink-muted);font-size:0.9rem;}
.slot b{color:var(--copper);}
details.summ{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 16px;margin:10px 0;}
details.summ summary{font-weight:700;cursor:pointer;padding:8px 0;font-family:'Archivo',sans-serif;}
.quote{border-left:4px solid var(--copper);padding:4px 0 4px 14px;color:var(--ink-soft);font-style:italic;margin:12px 0;}
.faq h3{font-size:1.05rem;margin:16px 0 4px;}
.faq p{margin:0 0 8px;color:var(--ink-soft);}
.byline{display:flex;align-items:center;gap:11px;background:var(--paper-warm);border:1px solid var(--line);border-radius:11px;padding:12px 15px;font-size:0.9rem;color:var(--ink-soft);}
.byline .av{width:38px;height:38px;border-radius:50%;background:var(--pipe);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.sources{font-size:0.86rem;color:var(--ink-muted);}
.sources a{color:var(--ink-soft);}
.cta-band{background:var(--copper);color:#fff;border-radius:14px;padding:26px 22px;text-align:center;}
.cta-band h2{color:#fff;margin:0 0 8px;}
.cta-band p{color:rgba(255,255,255,0.9);max-width:560px;margin:0 auto 16px;}
footer{background:var(--ink);color:#cdd6d4;padding:30px 0;font-size:0.9rem;margin-top:10px;}
footer a{color:#fff;}
footer .net{margin:8px 0 14px;color:#9fb0ad;}
.disc{font-size:0.8rem;color:#8a9a97;margin-top:12px;line-height:1.5;}
@media(max-width:640px){.pickbox{grid-template-columns:1fr;}}
/* find-a-pro form */
.findpro-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;max-width:620px;margin:0 auto;}
.field-group{margin-bottom:14px;text-align:left;}
.field-group label{display:block;font-weight:600;margin-bottom:6px;font-size:0.92rem;}
.findpro-box input,.findpro-box select{width:100%;font-family:'Inter',sans-serif;font-size:1rem;padding:12px 13px;border:1.5px solid var(--line);border-radius:9px;box-sizing:border-box;background:#fff;}
.submit-row{text-align:center;margin-top:6px;}
.submit-row button{background:var(--copper);color:#fff;border:none;border-radius:9px;padding:13px 24px;font-weight:700;font-size:1rem;cursor:pointer;font-family:'Inter',sans-serif;}
.findpro-results{max-width:620px;margin:16px auto 0;text-align:left;}
.findpro-empty{background:var(--paper-warm);border:1px solid var(--line);border-radius:10px;padding:16px;color:var(--ink-soft);text-align:center;}
.findpro-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px;}
.findpro-card h3{margin:0 0 4px;font-size:1.05rem;}
.findpro-card .loc{color:var(--ink-muted);font-size:0.85rem;margin:0 0 6px;}
.findpro-card .tags{color:var(--pipe);font-size:0.82rem;margin:6px 0 8px;}
.findpro-card a.visit{font-weight:600;text-decoration:none;color:var(--copper);}
.findpro-slot{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);margin:12px 0 6px;}
.findpro-disc{font-size:0.8rem;color:var(--ink-muted);margin-top:10px;line-height:1.5;}
/* tool-updates opt-in */
.subscribe-box{max-width:620px;margin:16px auto 0;background:var(--pipe-light);border:1px solid #cfe2e4;border-radius:12px;padding:16px 18px;}
.subscribe-box p{margin:0 0 10px;font-size:0.92rem;color:var(--ink-soft);}
#subscribe-form{display:flex;gap:8px;flex-wrap:wrap;}
#subscribe-form input{flex:1;min-width:180px;font-family:'Inter',sans-serif;font-size:0.95rem;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;}
#subscribe-form button{background:var(--pipe);color:#fff;border:none;border-radius:9px;padding:10px 18px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.sub-msg{font-size:0.88rem;color:var(--pipe);margin-top:8px;}
/* affiliate disclosure bar + clickable tool cards + comparison filter */
.aff-bar{background:var(--paper-mid);color:var(--ink-soft);font-size:0.8rem;text-align:center;padding:6px 12px;}
a.tool{display:block;text-decoration:none;color:inherit;transition:border-color .12s;}
a.tool:hover{border-color:var(--pipe);}
a.tool .rev{color:var(--copper);font-weight:600;font-size:0.86rem;}
.cmp-filter{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0 14px;}
.cmp-filter label{display:flex;align-items:center;gap:6px;font-size:0.9rem;cursor:pointer;color:var(--ink-soft);}
.cmp-count{font-size:0.85rem;color:var(--ink-muted);margin:8px 0 0;}
/* full footer */
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:18px;margin-bottom:16px;}
footer h4{font-size:0.92rem;margin:0 0 8px;color:#fff;font-family:'Archivo',sans-serif;}
footer .ft-grid a{display:block;margin:0 0 4px;color:#cdd6d4;font-size:0.87rem;text-decoration:none;}
footer .ft-grid a:hover{color:#fff;}
.ft-tag{color:#9fb0ad;font-size:0.85rem;margin:6px 0 0;line-height:1.5;}
@media(max-width:640px){.ft-grid{grid-template-columns:1fr 1fr;}}
/* hero photo layout */
.hero .wrap{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;}
@media(min-width:860px){.hero .wrap{grid-template-columns:1.25fr 0.85fr;}}
.hero-img{width:100%;max-width:440px;height:auto;border-radius:14px;display:block;margin:0 auto;border:3px solid rgba(255,255,255,0.18);}
/* responsive comparison table — stacks into labelled cards on phones */
@media(max-width:640px){
  table.cmp-stack{border:none;background:transparent;}
  table.cmp-stack thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  table.cmp-stack,table.cmp-stack tbody,table.cmp-stack tr,table.cmp-stack td{display:block;width:100%;}
  table.cmp-stack tr{border:1px solid var(--line);border-radius:11px;margin:0 0 12px;background:#fff;overflow:hidden;}
  table.cmp-stack td{border:none;border-bottom:1px solid var(--line);padding:9px 14px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;}
  table.cmp-stack tr td:last-child{border-bottom:none;}
  table.cmp-stack td::before{content:attr(data-label);flex:0 0 42%;font-size:0.7rem;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em;}
  table.cmp-stack td[data-label="Tool"]{background:var(--pipe);}
  table.cmp-stack td[data-label="Tool"]::before{color:rgba(255,255,255,0.8);}
  table.cmp-stack td[data-label="Tool"] a{color:#fff;}
}