/* Public/style/responsive.css — Home page (index.html)
   ============================================================================
   Breakpoint scale used across this file (and its dashboard counterpart,
   responsive-dashboard.css):
     Mobile:      <= 640px   (phone)
     Tablet:      641px – 1024px
     Desktop:     1025px – 1919px  (the baseline home.css already targets —
                  no extra rules needed here for this tier)
     Big Screen:  >= 1920px  (conference-room TV / large monitor)

   This file is loaded LAST, after home.css, specifically so it can
   override home.css's existing rules by cascade order alone (same-
   specificity class selectors) rather than needing !important or
   rewriting home.css's already-hard-won mobile-nav/corner-logo rules in
   place. It ADDS what's missing (hero logo prominence, a big-screen
   tier) rather than re-deriving what home.css already does reasonably
   well (the phone-width nav/drawer/corner-logo swap).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero logo — NEW element (index.html), distinct from the small persistent
   badge in the sticky header. The header's own logo stays visible while
   scrolling for brand continuity, but it's modest by design (a nav
   element, not a statement); this one is the actual "first thing you see"
   mark, sized deliberately large per the explicit request that Distinct
   Revelations read as prominent on the first screen, at every breakpoint.
   --------------------------------------------------------------------------- */
.hero-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  /* Largest relative to the viewport here — mobile has no corner-bleed
     logo at all (home.css hides it below 899px) and the sticky header's
     own badge is comparatively small, so this hero mark carries all of
     the "first screen" brand impact on a phone. Centered, since
     .hero-copy's text-align isn't otherwise centered on mobile — this is
     a deliberate exception so the mark reads as a genuine hero moment
     instead of just another left-aligned line of content. */
  .hero-logo {
    height: 88px;
    margin: 0 auto 20px;
  }
}
@media (min-width: 1920px) {
  .hero-logo { height: 84px; margin-bottom: 24px; }
}

/* ---------------------------------------------------------------------------
   BIG SCREEN (>= 1920px) — a conference-room TV or large monitor. The
   marketing site is rarely the thing projected in a conference room, but
   it should still look intentional rather than just stretched: a wider
   reading column, larger type, and a bit more breathing room, not simply
   "the same 1120px column floating in a sea of empty space" nor content
   stretched edge-to-edge and losing all sense of hierarchy.
   --------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .container { width: min(1400px, 78%); }

  .hero-copy h1 { font-size: 3.4rem; }
  .hero-copy p { font-size: 1.15rem; max-width: 640px; }
  .hero-metrics div strong { font-size: 1.1rem; }

  .section-head h2, .section h2 { font-size: 2.1rem; }
  .section-head p { font-size: 1.05rem; max-width: 820px; }

  .footer-grid { max-width: 1400px; }
}