/* ==========================================================================
   home.css — HOMEPAGE ONLY overrides
   Loaded only by index.html, after style.css/article.css, scoped under
   body.home so it never touches the article/offerhub pages. Those pages
   run the logo at 34px and the pill row at tight padding because that is
   load-bearing for their fold budget (the money unit has to clear the
   fold on a phone with no scroll) — the homepage carries no such unit,
   so it can afford to be roomier.
   ========================================================================== */

/* bigger logo, more breathing room in the top bar */
body.home .top{padding:16px 0}
body.home .logoimg{height:68px}
@media(max-width:520px){ body.home .logoimg{height:52px} }

/* more prominent nav than the article/offerhub pages, but dialled back
   from an earlier pass that pushed padding up too far — the pill's bottom
   "3D button" shadow (set in style.css, .cats a.on / :hover) is a fixed
   pixel depth that did not scale with the bigger button, so the rounded
   base read as slightly detached. Smaller bump + a shadow rescaled to
   match fixes both at once. */
body.home .cats{padding:14px 0}
body.home .cats a{padding:9px 18px;font-size:14px;font-weight:800;letter-spacing:-.005em}
body.home .cats a:hover{box-shadow:0 4px 0 #E3EAF5}
body.home .cats a.on{box-shadow:0 3px 0 #0B1B3D}
body.home .cats a.on:active{box-shadow:0 1px 0 #0B1B3D}
body.home .navsearch{height:44px}
body.home .navsearch input[type=search]{height:42px;font-size:14.5px}

/* video hero at roughly half its original height. Both .stagecollapse and
   .c-scene carry their own min-height:100vh in stage-collapse.css, so both
   need the override or .c-scene keeps forcing full height on its own. */
body.home .stagecollapse{min-height:50vh}
body.home .c-scene{min-height:50vh;padding-top:5vh}
@media(max-width:820px){
  body.home .stagecollapse{min-height:56vh}
  body.home .c-scene{min-height:56vh}
}