/* ============================================
   Mobil3 brand layer — loads after screen.css
   Accent #0066FF · Navy #0B1221
   Space Grotesk headings · Space Grotesk body (Inter fallback)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ghost-accent-color: #0066FF;
  --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

body { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6,
.gh-head-logo, .gh-card-title, .gh-article-title, .m3-hero-title {
  font-family: var(--font-heading);
}

/* Header: always visible, subtle border */
.gh-head { border-bottom: 1px solid var(--color-light-gray); }
.gh-head-logo { letter-spacing: -0.02em; }

/* Homepage hero */
.m3-hero {
  padding: 9.6rem 0 6.4rem;
  background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--color-light-gray);
}
.m3-kicker {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ghost-accent-color);
}
.m3-hero-title {
  margin: 0 0 1.6rem;
  font-size: 4.2rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.m3-hero-sub {
  max-width: 640px;
  margin: 0;
  font-size: 2rem;
  line-height: 1.55;
  color: var(--color-secondary-text);
}
@media (max-width: 767px) {
  .m3-hero { padding: 6.4rem 0 4.8rem; }
  .m3-hero-title { font-size: 3rem; }
  .m3-hero-sub { font-size: 1.8rem; }
}

/* Post cards */
.gh-card-image img { border-radius: 8px; }
.gh-card-title a { color: inherit; }

/* Buttons: navy secondary, accent primary */
.gh-btn { background-color: #0B1221; }
.gh-primary-btn { background-color: var(--ghost-accent-color) !important; }

/* Footer */
.gh-foot {
  border-top: 1px solid var(--color-light-gray);
  padding-top: 4rem;
  padding-bottom: 4rem;
}