/* =========================================================================
   Acquisition Ace — shared ARTICLE design layer
   Load AFTER site.css on every Learn / industry / glossary / answers article.
   ONE brand system for every article page (matches the plumbing reference and
   /learn/_foundation): Chivo display + Work Sans body, fixed type scale, one
   table style, one reading measure, clutter removed, one bottom disclaimer.
   ========================================================================= */

/* ---- Brand fonts: swap the page off Instrument Serif / Inter / Caveat ---- */
:root{
  --serif:"Chivo",system-ui,sans-serif;
  --sans:"Work Sans",system-ui,-apple-system,sans-serif;
  --hand:"Work Sans",system-ui,sans-serif;
}

/* ---- Nothing above the title: remove the eyebrow/kicker ("Buyer's Playbook", etc.).
        Scoped to .phero (not .article-col) so it also covers glossary/answers pages,
        which use a simpler layout with no .article-col wrapper. ---- */
.phero .kicker,.phero .eyebrow,.phero .pg-ey{display:none!important}

/* ---- TITLE (first thing on the page) ---- */
.phero .title{font-family:"Chivo",sans-serif;font-weight:900;font-size:clamp(30px,4.2vw,42px);letter-spacing:-.03em;line-height:1.05;margin-top:0}

/* ---- SUBTITLE ---- */
.lede{font-family:"Work Sans",sans-serif;font-weight:400;font-size:19px;line-height:1.55;color:var(--ink-2)}
.byline{margin-top:16px}

/* ---- BODY: one size, bold ink highlights only ---- */
.prose{font-family:"Work Sans",sans-serif;font-size:18px;line-height:1.72;color:var(--ink-2)}
.prose p,.prose li{font-size:18px}
.prose b,.prose strong{font-weight:700;color:var(--ink)}

/* ---- SECTION HEADINGS ---- */
.prose h2{font-family:"Chivo",sans-serif;font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.12;margin-top:2.3em}
.prose h3{font-family:"Chivo",sans-serif;font-weight:700;font-size:19px;margin-top:1.6em}

/* ---- TABLE: one style; numbers in the body font (no special font, no colour) ---- */
.data th{font-family:"Work Sans",sans-serif;font-size:12px}
.data td{font-family:"Work Sans",sans-serif;font-size:15px}
.data td.num,.data td.num.pos{font-family:"Work Sans",sans-serif!important;font-weight:700;color:var(--ink)}

/* ---- Header photo (industry pages): square photo top-right.
        Scoped with :has() so it ONLY applies to pages that actually have a
        .phero-thumb (the industry pages). Glossary/answers keep a text header. ---- */
.article-col .phero:has(> .phero-thumb){display:flex;gap:26px;align-items:flex-start}
.phero-main{flex:1;min-width:0}
.phero-thumb{flex:none;width:150px;height:150px;border-radius:16px;object-fit:cover;box-shadow:var(--sh-sm);margin-top:5px}
@media(max-width:560px){.article-col .phero:has(> .phero-thumb){gap:14px}.phero-thumb{width:84px;height:84px}}

/* ---- ONE reading measure: header, text, tables, boxes all share 704px ---- */
.phero{max-width:704px}
.prose{max-width:704px}
.prose p,.prose li,.prose ul,.prose ol,.answer p,.callout p,.table-wrap{max-width:none}
/* Closing CTA banner: match the 704px column, left-aligned (was wider, stuck out right). Desktop only. */
@media(min-width:761px){.final-split2{max-width:704px;margin-inline:0}}

/* ---- Remove clutter to match the reference page (kept in HTML, just hidden):
        pull-quotes, mid-article inline CTA boxes, and any custom figures ---- */
.prose blockquote,.cta-inline,.fig{display:none!important}

/* ---- "Educational only": one subtle disclaimer at the bottom, no emoji/icon,
        styled exactly like the plumbing page's plain .disc-note ---- */
.callout.disc{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;padding:18px 0 0!important;margin:34px 0 0}
.callout.disc::before{content:none!important;display:none!important}
.callout.disc,.callout.disc p{font-size:12px!important;line-height:1.6!important;color:var(--faint)!important;max-width:none;margin:0}

/* ---- APPENDIX headings (where present) stay Chivo, small ---- */
.appendix h2{font-family:"Chivo",sans-serif;font-weight:900}

/* ---- mobile: stack wide tables into cards instead of horizontal scrolling ---- */
@media(max-width:600px){
  .table-wrap{overflow-x:visible;border:0;box-shadow:none;border-radius:0;margin:1.3em 0;background:none}
  .table-wrap table{display:block;border:0;width:100%;min-width:0;max-width:100%}
  .table-wrap tbody{display:block;width:100%;min-width:0}
  .table-wrap thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .table-wrap tr{display:block;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 12px;padding:4px 6px 8px;box-shadow:var(--sh-sm);box-sizing:border-box}
  .table-wrap td{display:block;width:100%;border:0;padding:8px 13px;font-size:14.5px;line-height:1.5;text-align:left;overflow-wrap:anywhere;box-sizing:border-box}
  .table-wrap td::before{content:attr(data-label);display:block;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .table-wrap td:first-child{background:var(--paper-2);border-radius:9px;margin:2px 2px 6px;padding:11px 13px;font-weight:800;color:var(--ink);font-size:15.5px}
  .table-wrap td:first-child::before{display:none}
}