/* Ando Systems: 2026 display layer for interior pages.
   Carries the homepage's approved type system (index.html, 10/20) to every
   page that links it: Bricolage Grotesque for headlines and card titles,
   the ghost word behind the hero, Fraunces kept for accents (pull quotes,
   price names, footer wordmark), Inter for body and UI.
   Load order: after /ando.css AND after any page <style>, so equal-specificity
   rules here win. Opt-in by link, so unlisted/share pages that only link
   ando.css are unchanged. */

:root { --display: 'Bricolage Grotesque', var(--sans); }

/* headline default: every h1-h4 takes the display face unless an accent
   rule below puts it back on the serif */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.01em; }

/* ── HERO + GHOST WORD ─────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero > .container, .hero > .container-wide { position: relative; z-index: 1; }
.hero-ghost {
  position: absolute; top: -0.16em; left: 50%; transform: translateX(-50%);
  z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(110px, 21vw, 300px); letter-spacing: -0.02em;
  text-transform: uppercase; color: rgba(255,255,255,0.045);
}
.hero .eyebrow { letter-spacing: 0.12em; margin-bottom: 22px; }
.hero h1 {
  font-family: var(--display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 800;
  line-height: 1.0; letter-spacing: -0.015em; text-transform: uppercase; color: #fff;
  margin-bottom: 22px; max-width: 860px;
}
.hero h1 .teal { color: var(--lime); }
/* article titles run long: same face, one step down */
.hero .article-wrap h1 { font-size: clamp(30px, 3.9vw, 46px); line-height: 1.04; }

/* ── SECTION HEADS ─────────────────────────────────── */
.section-h2, .section-head h2 {
  font-family: var(--display); font-size: clamp(30px, 3.8vw, 44px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.02em;
}
.section-h2 b, .section-head h2 b { font-weight: 800; color: var(--teal-dark); }
.section-dark .section-h2 b, .section-dark .section-head h2 b { color: var(--teal-bright); }

.talk-h2, .talk h2 { font-family: var(--display); font-size: clamp(32px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.section-dark .talk-h2, .section-dark .talk h2 { color: #fff; }
.section-dark .talk-body, .section-dark .talk p { color: rgba(255,255,255,0.72); }

/* ── CARD + LIST TITLES (homepage .feature h3 / .service-title pattern) ── */
.feature h3, .card h3, .path h3, .post-item .post-title, .post-cta h3,
.faq-dark .q h4, .qa h3, .qcat-title, .step-body h3, .cadence h2, .beat h4,
.fit-card h4, .ab-tl-role, .ab-personal h3, .product-card h2, .tool-card h3,
.calc-input h2, .sec-card h3, .sec-plaid-block h3, .sec-cta h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
}
.step-n { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }

/* reading content: headings in the display face, body stays Inter */
.prose h2, .prose h3, .article-body h2, .article-body h3, .article h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.015em;
}

/* ── SERIF ACCENTS (kept on Fraunces, as on the homepage) ── */
.footer-word, .price-name, .ab-pull, .ab-personal .mono, .path .price, .dash-stat .v {
  font-family: var(--serif); letter-spacing: -0.01em;
}

/* ── FOOTER ────────────────────────────────────────── */
/* some pages ship the copyright span without .footer-copy, which left it
   ink-on-navy; style the slot, not the class */
.footer-bottom span { font-size: 13.5px; color: rgba(255,255,255,0.4); }

/* ── MOBILE ────────────────────────────────────────── */
/* gutters match the homepage and the nav logo (22px); grids that had no
   phone breakpoint stack to one column; long CTAs wrap instead of
   pushing the page sideways */
@media (max-width: 760px) {
  .container, .container-wide { padding-left: 22px; padding-right: 22px; }
  .features-grid, .paths-grid, .dash-stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 36px); }
  .hero .article-wrap h1 { font-size: clamp(27px, 7.6vw, 34px); }
}
@media (max-width: 460px) {
  .btn { white-space: normal; text-align: left; }
}