/* Shared visual baseline: keeps BINSR readable and consistent on every public page.
   Loaded after each page's own <style>, so these rules win on equal specificity. */
html { font-size: 18px; }

/* Header: taller bar, larger wordmark and menu. */
header .nav {
  height: 88px;
  min-height: 88px;
  max-width: 1320px;
  gap: 32px;
}
header .nav-cta { gap: 22px; }

header .brand {
  font-size: 1.65rem;
  line-height: 1.1;
}

header .nav-links { gap: 28px; }
header .nav-links a { font-size: 1rem; }
header .nav-phone { font-size: 1.05rem; font-weight: 700; }
header .nav .btn {
  min-height: 52px;
  padding: 15px 30px;
  font-size: 1.02rem;
}

/* Headings and body copy. */
.hero h1 { font-size: 3.4rem; }
h2 { font-size: 2.15rem; }
.section-head p,
.step p,
.card p,
.advantage p,
.intro p,
.hero .sub { font-size: 1.08rem; }

/* Small labels: nothing customer-facing below about 15px. */
.eyebrow { font-size: .88rem; }
.crumb { font-size: .92rem; }
.seal { font-size: .85rem; }
.foot-bottom { font-size: .92rem; }
footer a { font-size: 1rem; }
/* Footer disclaimer block sets .72rem inline; lift it to a readable size. */
footer > .wrap[style*=".72rem"] { font-size: .85rem !important; }

/* Not enough room for the phone number beside the menu: it stays in the hero and mobile bar. */
@media (max-width: 1280px) {
  header .nav-phone { display: none; }
}

@media (max-width: 1100px) {
  header .nav-links { gap: 20px; }
  header .nav-links a { font-size: .95rem; }
}

@media (max-width: 880px) {
  html { font-size: 17px; }

  header .nav {
    height: 74px;
    min-height: 74px;
  }

  header .brand { font-size: 1.5rem; }
  header .nav .btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 1rem;
  }

  .hero h1 { font-size: 2.5rem; }
  h2 { font-size: 1.9rem; }
}

@media (max-width: 480px) {
  header .nav { height: 70px; min-height: 70px; }
  header .brand { font-size: 1.38rem; }
  .hero h1 { font-size: 2.2rem; }
}