/* =========================================================================
   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}