/* =====================================================================
   page-faq.css — EraseMugshots FAQ page
   Shares the same design system (tokens, fonts, header, footer, buttons)
   as front-page.css / page-terms-of-service.css, but this page is a
   comprehensive Q&A reference with no lead-capture form of its own — all
   CTAs point to tel:+18666016803 or /contact-us/. Self-contained; only
   affects page-faq.php.
   ===================================================================== */

/* ===== Fonts (self-hosted, real .woff2 files in ../fonts/ — same files
   the homepage already uses; no re-download, no base64) ===== */
@font-face{
  font-family:'Archivo Black';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/archivo400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow700.woff2') format('woff2');
}

/* ===== Design tokens (same palette as front-page.css) ===== */
:root{
  --surface-a:#FDFDFB;
  --on-a:#151312;
  --on-a-muted:rgba(21,19,18,.66);
  --surface-b:#F1EFEA;
  --on-b:#151312;
  --on-b-muted:rgba(21,19,18,.66);
  --card-a-bg:#FFFFFF;
  --border-a:rgba(21,19,18,.14);
  --border-b:rgba(21,19,18,.13);

  --accent:#DC2525;
  --accent-hover:#B31D1D;
  --accent-active:#8F1717;
  --accent-contrast:#FFFFFF;
  --accent-tint:#F8D6D6;
  --accent-glow-rgb:220,37,37;

  --gold:#E8A93B;

  --shadow:rgba(21,19,18,.22);
  --focus-ring:#151312;

  --overlay-on-b:rgba(21,19,18,.045);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --maxw:1180px;
  --maxw-doc:74ch;
}
:root[data-theme="dark"]{
  --surface-a:#121110; --on-a:#F5F3EF; --on-a-muted:rgba(245,243,239,.66);
  --surface-b:#1B1917; --on-b:#F5F3EF; --on-b-muted:rgba(245,243,239,.66);
  --card-a-bg:#1B1917;
  --border-a:rgba(245,243,239,.14); --border-b:rgba(245,243,239,.14);
  --accent:#E83C3C; --accent-hover:#C73434; --accent-active:#AC2D2D; --accent-contrast:#FFFFFF;
  --accent-tint:rgba(232,60,60,.18); --accent-glow-rgb:232,60,60;
  --gold:#F0B94E;
  --shadow:rgba(0,0,0,.6); --focus-ring:#F5F3EF;
  --overlay-on-b:rgba(253,253,251,.06);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;}
/* Same legacy-Bootstrap html{font-size:10px} problem the homepage has to
   beat — see front-page.css for the full explanation. Must win outright
   with !important. */
html{-webkit-text-size-adjust:100%;font-size:16px!important;}
body{margin:0;}
img,svg{display:block;max-width:100%;}
ul{margin:0;padding:0;}
a{color:inherit;}
button{font:inherit;}

body{
  background:var(--surface-a);
  color:var(--on-a);
  font-family:'Barlow',system-ui,-apple-system,sans-serif!important;
  font-weight:400;
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
}
main{display:block;}

/* Same legacy `body h1, body h2, body h3, body h4{font-family:"Poppins"}`
   fight as the homepage — beat it with element-selector !important. */
h1,h2,h3{
  font-family:'Archivo Black','Barlow',system-ui,sans-serif!important;
  font-weight:400;
  line-height:1.15;
  text-wrap:balance;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1.1em;}
.muted{color:var(--on-a-muted);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;}

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}
/* `left:-999px` (the classic off-screen-until-focus skip-link
   technique) turned out to genuinely extend document.documentElement's
   scrollWidth on some pages depending on surrounding DOM structure —
   real horizontal mobile scroll, not just a hidden negative offset.
   The clip-based visually-hidden technique below can never affect
   layout/scrollWidth since the element has no box size until focus. */
.skip-link{
  position:absolute;top:0;left:0;background:var(--accent);color:#fff;
  padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--radius-sm) 0;font-weight:700;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.skip-link:focus{
  width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
}

/* ===== Header (same component as front-page.php) ===== */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--surface-b);color:var(--on-b);
  border-bottom:1px solid var(--border-b);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1.25rem;
}
.wordmark{
  display:inline-flex;align-items:center;flex:none;
  text-decoration:none;color:var(--on-b);white-space:nowrap;margin-right:.5rem;
}
.brand-logo{height:42px;width:auto;display:block;flex:none;}
nav.primary-nav{display:flex;gap:1.5rem;flex:1;}
nav.primary-nav a{
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--on-b-muted);
  padding:.4rem .1rem;position:relative;
}
nav.primary-nav a:hover{color:var(--on-b);}
nav.primary-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  transform:scaleX(0);transition:transform .18s ease;transform-origin:left;
}
nav.primary-nav a:hover::after{transform:scaleX(1);}
.header-actions{display:flex;align-items:center;gap:.9rem;margin-left:auto;}
.phone-link{
  display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.98rem;
  color:var(--on-b);text-decoration:none;white-space:nowrap;
}
.phone-link svg{width:18px;height:18px;fill:var(--accent);flex:none;}
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--border-b);color:var(--on-b);
  width:44px;height:44px;flex:none;padding:0;border-radius:var(--radius-sm);align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;flex:none;fill:currentColor;}

.main-nav{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;width:100%;
}
.main-nav li{margin:0;padding:0;position:relative;}
.main-nav > li:nth-last-child(-n+3){display:none;}

.main-nav .menu-item-has-children > a{padding-right:1.1rem;}
/* nav.primary-nav a::after (the red hover-underline bar on every top-level
   link) also matches this same ::after pseudo-element on "Our Services",
   and since this rule never declared background/left/bottom itself, those
   properties fell through from that unrelated rule — filling the chevron's
   box solid red and yanking it to the link's far-left edge, where it read
   as a stray red bullet/dot in front of the text. Self-contained now. */
.main-nav .menu-item-has-children > a::after{
  content:"";position:absolute;left:auto;right:0;top:50%;bottom:auto;width:7px;height:7px;
  background:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-65%) rotate(45deg);opacity:.6;
}
.main-nav .sub-menu{
  display:none;list-style:none;margin:0;padding:.5rem;position:absolute;top:100%;left:0;
  min-width:260px;background:var(--surface-a) !important;border:1px solid var(--border-a);
  border-radius:var(--radius-sm) !important;box-shadow:0 14px 30px -12px rgba(0,0,0,.25);z-index:50;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu{display:block;}
.main-nav .sub-menu li{padding:0;}
.main-nav .sub-menu a{
  display:block;padding:.6rem .75rem;border-radius:calc(var(--radius-sm) - 4px) !important;
  white-space:normal;line-height:1.3;color:var(--on-a) !important;font-weight:600;
  background:transparent !important;
}
/* Hover/focus highlight intentionally removed on submenu links per client request — they stay visually static. */
.main-nav .sub-menu a::after{display:none;}

@media (max-width:980px){
  .main-nav{flex-direction:column;align-items:stretch;gap:.15rem;}
  /* !important: legacy internal-style.css carries
   `li.menu-item-has-children ul.sub-menu{display:none}` at this same
   breakpoint with higher specificity, which silently kept every
   dropdown's sub-items hidden on mobile. */
.main-nav .sub-menu{
    display:block !important;position:static;box-shadow:none;border:none;background:transparent;
    padding:0 0 0 1rem;margin-top:.25rem;min-width:0;
  }
  .main-nav .menu-item-has-children > a::after{display:none;}
  .main-nav .sub-menu a{display:block;padding:.65rem .75rem;font-weight:500;}
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.95rem 1.6rem;border-radius:999px;border:none;
  cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none;}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem;}
.btn-lg{padding:1.15rem 2.1rem;font-size:1.08rem;}
/* Legacy style.css ships its own `.btn.btn-primary{color:#fff!important}`
   and `.btn.btn-primary:hover,:focus,:active{background:#000!important}`
   (an old, unrelated button style loaded sitewide). Its `color:#fff` happens
   to agree with our red-background default, but its `!important` black
   hover fights our red-on-hover state, and its color rule would otherwise
   silently break the inverted white-bg/red-text variant used inside
   .cta-strip below. Match its specificity with our own !important so our
   intended colors win in both places. */
.btn-primary,
.btn.btn-primary{
  background:var(--accent) !important;color:var(--accent-contrast) !important;
  border-radius:999px;border:none;
  box-shadow:0 10px 22px -8px var(--shadow);
}
.btn-primary:hover,
.btn.btn-primary:hover{background:var(--accent-hover) !important;transform:translateY(-2px);box-shadow:0 14px 26px -8px var(--shadow);}
.btn-primary:active,
.btn.btn-primary:active{background:var(--accent-active) !important;transform:translateY(0) scale(.98);box-shadow:0 4px 10px -4px var(--shadow);}
.btn-secondary,
.btn.btn-secondary{
  background:transparent;color:var(--on-a);border:2px solid var(--border-a);
}
.btn-secondary:hover,
.btn.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}

/* ===== Phone CTA "pop" pulse (matches homepage's occasional attention pulse) ===== */
.phone-pop{animation:phonePop 5s ease-in-out infinite;transform-origin:center;}
.phone-pop:hover,.phone-pop:focus-visible{animation-play-state:paused;}
@keyframes phonePop{
  0%,10%,100%{transform:scale(1);}
  5%{transform:scale(1.08);}
}

/* =====================================================================
   Page bands — alternating near-white / warm-parchment surfaces, same
   convention as front-page.php's band-a/band-b sections.
   ===================================================================== */
.band-a{background:var(--surface-a);color:var(--on-a);padding:clamp(2.5rem,6vw,4.5rem) 0;}
.band-b{background:var(--surface-b);color:var(--on-b);padding:clamp(2.5rem,6vw,4.5rem) 0;}

/* ===== Hero ===== */
.faq-hero{padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,5vw,3rem);}
.faq-hero .wrap{max-width:var(--maxw-doc);text-align:center;}
.faq-hero .eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-hover);background:var(--accent-tint);
  padding:.4rem .95rem;border-radius:100px;margin-bottom:1.25rem;
}
.faq-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.75rem;}
.faq-hero .lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--on-a-muted);max-width:60ch;margin:0 auto 1.75rem;}
.faq-hero .cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;}

/* ===== FAQ section headers within the page ===== */
.section-head{max-width:var(--maxw-doc);margin:0 auto clamp(1.75rem,4vw,2.5rem);}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.section-head .muted{font-size:1.02rem;max-width:62ch;}
.faq-group{margin-bottom:clamp(2.5rem,6vw,3.5rem);}
.faq-group:last-child{margin-bottom:0;}
.faq-group-head{
  max-width:var(--maxw-doc);margin:0 auto 1.25rem;
  display:flex;align-items:baseline;gap:.75rem;
}
.faq-group-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:0;}
.faq-group-head .faq-group-count{
  font-size:.8rem;font-weight:700;color:var(--on-a-muted);
  background:var(--overlay-on-b);border:1px solid var(--border-a);
  padding:.25rem .7rem;border-radius:100px;white-space:nowrap;
}

/* ===== FAQ accordion — native <details>/<summary>, one long comprehensive
   list per the real content on this page (kept as a single readable
   column rather than the homepage's 2-col abbreviated grid, since these
   answers run longer). ===== */
.faq-grid{
  max-width:var(--maxw-doc);margin:0 auto;
  display:flex;flex-direction:column;gap:.85rem;
}
.faq-item{
  background:var(--card-a-bg);border:1px solid var(--border-a);border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.15rem 1.4rem;font-weight:700;font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-q{
  display:flex;align-items:baseline;gap:.6rem;
}
.faq-item summary .faq-q::before{
  content:"Q.";color:var(--accent);font-family:'Archivo Black',sans-serif;font-size:.92rem;flex:none;
}
.faq-item summary .faq-toggle-icon{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--overlay-on-b);display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, background-color .2s ease;
}
.faq-item summary .faq-toggle-icon svg{width:14px;height:14px;fill:var(--on-a);}
.faq-item[open] summary .faq-toggle-icon{transform:rotate(45deg);background:var(--accent-tint);}
.faq-item[open] summary .faq-toggle-icon svg{fill:var(--accent-hover);}
.faq-item summary:hover .faq-toggle-icon{background:var(--accent-tint);}
.faq-item .faq-answer{
  padding:0 1.4rem 1.35rem 2.35rem;font-size:.98rem;color:var(--on-a-muted);
}
.faq-item .faq-answer p{margin-bottom:.85em;}
.faq-item .faq-answer p:last-child{margin-bottom:0;}
.faq-item .faq-answer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.faq-item .faq-answer a:hover{color:var(--accent-hover);}

.faq-disclaimer{
  max-width:var(--maxw-doc);margin:1.75rem auto 0;
  font-size:.8rem;color:var(--on-a-muted);font-style:italic;
}

/* ===== CTA strip (matches front-page.php's cta-strip pattern) ===== */
.cta-strip{background:var(--accent);color:var(--accent-contrast);padding:2rem 0;}
.cta-strip-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
}
/* The legacy landing-page stylesheet (css/lf.css) has a blanket
   `body p, body div{color:#707070}` rule — since that sets color directly
   on the <p> element, it beats the inherited white from .cta-strip
   regardless of that ancestor's specificity, leaving this text a barely-
   legible gray on the solid red background. Set it explicitly. */
.cta-strip-inner p{margin:0;font-weight:700;font-size:1.1rem;color:var(--accent-contrast);}
.cta-strip-actions{display:flex;flex-wrap:wrap;gap:.85rem;}
.cta-strip .btn-primary,
.cta-strip .btn.btn-primary{background:var(--accent-contrast) !important;color:var(--accent) !important;box-shadow:none;}
.cta-strip .btn-primary:hover,
.cta-strip .btn.btn-primary:hover{background:var(--accent-contrast) !important;color:var(--accent-hover) !important;opacity:.92;transform:translateY(-2px);}
.cta-strip .btn-secondary,
.cta-strip .btn.btn-secondary{border-color:rgba(255,255,255,.55);color:var(--accent-contrast);}
.cta-strip .btn-secondary:hover,
.cta-strip .btn.btn-secondary:hover{border-color:var(--accent-contrast);color:var(--accent-contrast);}

/* ===== Final CTA band ===== */
.final-cta{text-align:center;}
.final-cta .wrap{max-width:var(--maxw-doc);}
.final-cta h2{font-size:clamp(1.7rem,3.6vw,2.4rem);}
.final-cta .lede{font-size:1.08rem;color:var(--on-b-muted);margin:0 auto 1.75rem;max-width:56ch;}
.final-cta .cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;}

/* ===== Footer (same component as front-page.php) ===== */
footer.site-footer{background:var(--surface-b);color:var(--on-b);border-top:1px solid var(--border-b);padding:4rem 0 2rem;}
.trust-eyebrow{font-size:.72rem;color:var(--on-b-muted);margin-bottom:1rem;}
.trust-badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border-b);}
.trust-badge{
  display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;
  background:var(--overlay-on-b);border:1px solid var(--border-b);padding:.55rem 1rem;border-radius:100px;
}
.trust-badge svg{width:16px;height:16px;fill:var(--gold);flex:none;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
.footer-brand .wordmark{margin-bottom:.9rem;display:block;}
.footer-brand .brand-logo{height:60px;}
.footer-brand p{font-size:.9rem;color:var(--on-b-muted);max-width:32ch;}
.footer-col h5{font-size:.78rem;color:var(--on-b-muted);margin-bottom:1.1rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.footer-col a{font-size:.92rem;text-decoration:none;color:var(--on-b);}
.footer-col a:hover{color:var(--accent);}
.footer-services-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.footer-contact-phone{font-weight:700;font-size:1.05rem;color:var(--on-b);text-decoration:none;display:inline-flex;gap:.5rem;align-items:center;}
.footer-contact-phone svg{width:16px;height:16px;fill:var(--accent);}
.footer-bottom{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-b);
  font-size:.78rem;color:var(--on-b-muted);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
}
.footer-disclaimer{max-width:70ch;font-size:.76rem;color:var(--on-b-muted);margin-top:1rem;}

/* ===== Sticky mobile call bar ===== */
.call-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--accent);color:var(--accent-contrast);
  padding:.85rem 1rem;padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px -8px rgba(0,0,0,.4);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.call-bar.is-visible{transform:translateY(0);}
.call-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--maxw);margin:0 auto;}
.call-bar-text{display:flex;flex-direction:column;line-height:1.2;}
/* Same legacy-CSS inheritance-breaking bug as elsewhere: css/lf.css's
   `body div{color:#707070}` directly colors .call-bar-text (a div),
   so its children no longer inherit the white .call-bar color — set it
   explicitly instead of relying on inheritance. */
.call-bar-text strong{font-size:.95rem;color:var(--accent-contrast);}
.call-bar-text span{font-size:.74rem;opacity:.85;color:var(--accent-contrast);}
.call-bar a.btn{background:var(--accent-contrast);color:var(--accent);padding:.7rem 1.1rem;box-shadow:none;}
.call-bar a.btn:hover{background:var(--accent-contrast);opacity:.92;transform:none;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
  nav.primary-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface-b);
    flex-direction:column;padding:1rem 1.5rem 1.5rem;gap:.25rem;border-bottom:1px solid var(--border-b);
    display:none;
  }
  nav.primary-nav.is-open{display:flex;}
  nav.primary-nav a{display:block;padding:.85rem 1rem;}
  .nav-toggle{display:flex;}
  /* Needs !important + higher specificity than the hardening pass's
     unconditional `.btn{display:inline-flex!important}` below, or that
     wins the !important fight and the button stays visible on mobile. */
  body.em-faq-page .header-actions .btn-sm{display:none !important;}
}
@media (max-width:720px){
  .call-bar{display:block;}
  .header-inner{padding:.7rem 1rem;}
  .header-inner .brand-logo{height:32px;}
  body{padding-bottom:5.5rem;}
  .faq-item .faq-answer{padding-left:1.4rem;}
  .cta-strip-inner{justify-content:center;text-align:center;}
}

@media (max-width:520px){
  /* On phones ~390px and narrower, wordmark + nav-toggle + phone-link no
     longer fit the header in one row — real horizontal-scroll overflow,
     confirmed by measuring document.documentElement.scrollWidth. The
     phone icon plus its own gap is the single biggest easy win; shaving
     the inter-item gap and the phone number's font-size closes the rest
     even on the narrowest supported phones. */
  .header-inner{padding:.6rem .6rem;gap:.5rem;}
  .phone-link svg{display:none;}
  .phone-link{font-size:.8rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;}
  .phone-pop{animation:none!important;}
  .call-bar{transition:none;}
  .faq-item .faq-toggle-icon{transition:none;}
}

/* =====================================================================
   HARDENING PASS — same rationale as front-page.css's own pass at the
   bottom of that file: this theme's legacy sitewide CSS (theme.css,
   style.css, bootstrap.min.css) wins font-family/display/color fights
   despite loading first, via !important or selectors our rules above
   didn't anticipate. Scoped to this page's own unique body class
   (em-faq-page) so nothing outside this template is touched.
   ===================================================================== */
body.em-faq-page,
body.em-faq-page *{
  font-family:'Barlow',system-ui,sans-serif !important;
}
body.em-faq-page h1,
body.em-faq-page h2,
body.em-faq-page h3,
body.em-faq-page h4,
body.em-faq-page h5,
body.em-faq-page h6{
  font-family:'Archivo Black','Barlow',system-ui,sans-serif !important;
}

/* Legacy `.site-footer *, .site-footer a{color:#fff!important}` in
   theme.css was written for the OLD dark footer and still matches our
   new, lighter footer. Reassert. */
body.em-faq-page .site-footer,
body.em-faq-page .site-footer *{
  color:var(--on-b) !important;
}

/* Legacy `.btn{display:inline-block}` (Bootstrap's own reserved class)
   beats plain inline-flex button layout. Reassert. */
body.em-faq-page .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.55rem !important;
}