/* ============================================
   LEAN EDGE SPORTS — Homepage Preview
   homepage-preview.css

   Layout B (scores-first): scores strip -> slim hero (headline+search
   only) -> unified tagged feed -> league leaders -> box score/fantasy
   callouts -> footer. Cut entirely from the earlier draft: Trending Now
   (merged into the feed), Stat Spotlight, Popular Comparisons,
   Off-season Hub (merged into the feed), Explore grid, Why We Built It
   -- those are second-visit content, not homepage content. Reuses
   --navy/--red/--mid-blue etc. from leanedgesports_styles.css.
============================================ */

.hp-section-shell { max-width: 1400px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* What's Happening sets its own width directly and no longer carries
   the .hp-section-shell class at all (see homepage-preview.html), so
   there is no 1400px cap to fight -- previous attempts tried to
   override that class and kept losing. This is the only rule
   controlling this section's width: change the 40px to move both
   edges in or out. */
.hp-feed-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 14px;
  padding-left: 85px;
  padding-right: 85px;
  box-sizing: border-box;
}

/* --- SCORES STRIP (first thing on the page, above the hero) --- */

/* nav.html's .navbar is position:absolute site-wide, designed to overlay
   transparently on top of each page's own hero image (player.html,
   team.html, etc). This homepage's nav now does the same thing --
   #site-header is pinned to the top of .hp-hero-wrap (see below), and
   the navbar itself keeps a transparent background so the basketball
   photo shows through behind the logo and menu, same as every other
   page on the site. Padding is intentionally tight so the logo sits
   snug in the top-left corner, right under the scores strip. */
.hp-hero-wrap {
  position: relative;
}
/* nav.html now includes the new site-wide live-scores-strip as part of
   its own markup (see .site-top-wrap there) so it appears on every
   other page. This page already has its own separate, more heavily
   customized scores strip (.hp-scores-strip, further down this file) --
   without this, nav.html's version would inject an empty duplicate box
   here too, since this page doesn't load js/live-scores-strip.js. */
#site-header .live-scores-strip {
  display: none;
}
/* .site-top-wrap reserves 40px of padding-top site-wide so pages using
   the shared ticker don't lose that space now that the strip itself is
   position:fixed (see leanedgesports_styles.css). This page hides that
   shared strip entirely (above) and uses its own separate one further
   down the page instead -- so that 40px reservation is just dead space
   here, pushing the logo down and, because #site-header sits right on
   top of the hero, far enough to overlap the search bar underneath it. */
#site-header .site-top-wrap {
  padding-top: 0;
}
#site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Higher than .hp-scores-strip's z-index:20 (above), not just the
     hamburger toggle/menu's own much higher LOCAL z-index values
     (180/150 in leanedgesports_styles.css's mobile block) -- those
     only matter relative to other elements INSIDE this same
     #site-header stacking context. #site-header itself creates its
     own stacking context (position + z-index together always do), so
     once .hp-scores-strip went position:fixed with a HIGHER z-index
     than this element's own, the ticker rendered above this entire
     stacking context as a whole -- including the hamburger menu
     nested inside it, regardless of the menu's own z-index -- and
     silently ate its clicks. This needs to stay above whatever
     .hp-scores-strip uses. */
  z-index: 30;
}
#site-header .navbar {
  position: relative;
  top: auto;
  background: transparent;
  padding: 0 12px 0 0;
}
/* Nav centering, favourites, and search-bar positioning (the
   .navbar-right display:contents trick, nav spanning full width,
   .nav-fav-wrap/.global-search-wrap anchored to the right) now live in
   leanedgesports_styles.css instead of here -- promoted sitewide since
   #site-header is the same shared injection point on every page, not
   just this one. This file keeps only what's genuinely specific to the
   homepage's hero-overlay treatment. */

.hp-scores-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #000000;
  border-bottom: 1px solid rgba(196,18,48,.4);
  min-height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8px 28px;
  gap: 22px;
}
.hp-ss-track-wrap { flex: 1; min-width: 0; overflow: hidden; }
.hp-ss-track {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
  width: max-content;
}
.hp-ss-track.hp-ss-scrolling {
  animation: hp-ss-scroll var(--hp-ss-duration, 30s) linear infinite;
}
.hp-ss-track-wrap:hover .hp-ss-track.hp-ss-scrolling {
  animation-play-state: paused;
}
@keyframes hp-ss-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-ss-track.hp-ss-scrolling { animation: none; }
}
.hp-ss-label { display: flex; align-items: center; gap: 8px; color: white; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; flex-shrink: 0; }
.hp-ss-game { display: inline-flex; align-items: center; gap: 8px; color: white; text-decoration: none; flex-shrink: 0; padding-right: 22px; border-right: 1px solid rgba(255,255,255,.1); }
.hp-ss-game:last-child { border-right: 0; padding-right: 0; }
.hp-ss-teams { font-size: 13px; font-weight: 700; }
.hp-ss-teams em { font-style: normal; color: white; font-size: 10px; margin: 0 2px; }
.hp-ss-score { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; }
.hp-ss-score .hp-loser { color: #9da7ba; }
.hp-ss-status { font-size: 10px; color: #9da8ba; letter-spacing: .5px; }
.hp-ss-status.hp-live { color: #ff6b6b; font-weight: 900; }
.hp-ss-time { font-size: 12px; color: #dce2ed; font-weight: 700; }
.hp-ss-empty { color: var(--grey-font); font-size: 12px; }
.hp-ss-more { color: var(--grey-font); font-size: 11px; font-weight: 900; text-decoration: none; flex-shrink: 0; margin-left: auto; padding-left: 22px; }
.hp-ss-more:hover { color: white; }

/* --- HERO (search only) --- */
/* Player photo is a CSS background here, NOT an <img> with a
   mask-image. The masked-<img> approach made the left ~40% of the
   photo transparent, so it never looked like it spanned the page even
   at width:100%. background-size:100% auto scales the photo to the
   full page width and lets its height overflow naturally; the
   background-position Y value (30%) picks which horizontal band of it
   shows. Tune that one number to move the image up/down. */
.hp-hero {
  min-height: 520px;
  padding: 165px 0 100px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-color: var(--darkest-navy);
  background-image:
    linear-gradient(90deg, rgba(13,24,48,.5) 0%, rgba(13,24,48,.35) 48%, rgba(13,24,48,.12) 100%),
    url('images/basketball-hero-panoramic.jpg');
  background-size: 100% auto;
  background-position: 100% 20%;
  background-repeat: no-repeat;
}
.hp-hero-grid {
  position: absolute; inset: 0; opacity: .06;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to right, transparent 5%, black 50%, transparent 100%);
}
.hp-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.hp-glow-one { width: 460px; height: 460px; top: 40px; right: 5%; background: var(--mid-blue); opacity: .16; }
.hp-glow-two { width: 250px; height: 250px; left: -120px; bottom: -80px; background: var(--red); opacity: .12; }
.hp-hero-inner { max-width: 1400px; padding: 0 28px; margin: 0 auto; width: 100%; z-index: 2; position: relative; display: flex; flex-direction: column; }

/* Hero search is the exact shared .global-search-wrap component
   (styled in leanedgesports_styles.css, same as every other page) --
   deliberately NOT resized or restyled for the hero, since matching
   every other page's formatting exactly was the point. The only
   change is the results panel anchoring left instead of right, which
   isn't a style choice -- it's necessary because this wrap sits at
   the left of its container, not the right like in the nav, so
   right:0 anchoring would push the panel outside the hero on the left. */
.hp-hero-search .global-search-bar {
  width: min(480px, 100%);
  border: 1px solid white;
  /* Solid-ish navy instead of the shared near-transparent white tint
     (rgba(255,255,255,0.06)) -- that's barely visible sitting on top
     of a busy photo. Scoped to the hero specifically rather than
     changing .global-search-bar's own background, so the nav search
     bar on every other page is untouched. */
  background: rgba(17,29,66,0.85);
  box-sizing: border-box;
  outline: none;
}
.hp-hero-search .global-search-bar input { width: 100%; flex: 1; }
.hp-hero-search .global-search-bar:focus-within { border-color: white; outline: none; }
.hp-hero-search .global-search-bar input,
.hp-hero-search .global-search-bar input:focus { outline: none; box-shadow: none; }
.hp-hero-search:focus,
.hp-hero-search:focus-within { outline: none; }
.hp-hero-search .global-search-panel { left: 0; right: auto; }

.hp-quick-links { margin-top: 14px; display: flex; gap: 14px; color: #7e8883; font-size: 13px; align-items: center; flex-wrap: wrap; }
.hp-quick-links button, .hp-quick-links a { color: #c7ceca; background: none; border: 0; padding: 0; font-size: 13px; border-bottom: 1px solid #4e5552; cursor: pointer; font-family: inherit; text-decoration: none; }
.hp-quick-links button:hover, .hp-quick-links a:hover { color: white; border-color: var(--red); }

.hp-live-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 4px rgba(196,18,48,.2); flex-shrink: 0; }
.hp-live-dot.hp-pulse { animation: hp-pulse 1.6s ease-in-out infinite; }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- TONIGHT panel --- */
/* Sibling of .hp-hero now, not nested inside it (see index.html) --
   defaults here are the mobile/normal-flow appearance: sits directly
   below the hero photo, in the page's own navy background, with the
   same outer gutter the rest of the mobile page uses. The desktop
   overlay-on-the-photo look is opt-in below via position:absolute,
   since .hp-hero-wrap (its containing block) stays position:relative
   at every width. */
.hp-tonight-panel {
  width: min(480px, calc(100% - 36px));
  display: grid; grid-template-columns: repeat(3, 1fr);
  min-height: 100px; position: relative;
  border: 1px solid rgba(177,204,241,.25);
  background: linear-gradient(135deg, rgba(3,19,43,.9), rgba(4,24,53,.62));
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
  margin: 28px 18px 0;
}
@media (min-width: 851px) {
  .hp-tonight-panel {
    position: absolute;
    left: max(28px, calc((100vw - 1400px) / 2 + 28px));
    bottom: 100px;
    margin: 0;
  }
}
.hp-tonight-title { position: absolute; padding: 10px 14px; font-size: 10px; font-weight: 900; letter-spacing: 1px; color: white; }
.hp-tonight-link {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; margin: 34px 0 10px; border-right: 1px solid rgba(177,204,241,.24);
  font-size: 10px; font-weight: 900; letter-spacing: .3px; color: white; text-decoration: none;
  transition: background .16s, transform .16s;
}
.hp-tonight-link:last-child { border-right: 0; }
.hp-tonight-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.035); }
.hp-tonight-link svg { width: 30px; height: 30px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- WHAT'S HAPPENING (off-season hub tile + plain news list) --- */
.hp-news-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 900; letter-spacing: 1.8px; color: white; }
.hp-news-heading > div:first-child, .hp-feed-status { display: flex; align-items: center; gap: 10px; }
.hp-feed-status > span { color: #ff6b6b; border: 1px solid rgba(196,18,48,.5); padding: 5px 8px; font-size: 10px; letter-spacing: 1.2px; }
.hp-feed-status p { margin: 0; color: #7f8a9e; font-size: 11px; letter-spacing: .4px; font-weight: 500; }
.hp-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 16px; }

.hp-hub-tile {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 250px; overflow: hidden; padding: 32px;
  border: 1px solid rgba(255,255,255,.15);
  background-image: linear-gradient(90deg, rgba(177,8,38,.94) 0%, rgba(139,5,31,.77) 44%, rgba(4,19,45,.15) 82%), url('images/off-season-hoop.jpg');
  background-position: center; background-size: cover;
  text-decoration: none; color: white;
}
.hp-hub-tag { align-self: flex-start; padding: 9px 11px; background: var(--red); font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.hp-hub-tile h2 { margin: 16px 0 19px; font-size: clamp(32px, 3vw, 46px); line-height: 1.03; color: white; font-family: 'Barlow Condensed', sans-serif; }
.hp-hub-link { font-size: 14px; font-weight: 700; }
.hp-hub-link b { color: white; font-size: 18px; }

.hp-latest-news h3 { margin: 0 0 13px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.25); font-size: 13px; font-weight: 900; letter-spacing: 1.8px; color: white; }
.hp-news-row { display: grid; grid-template-columns: 60px 1fr auto 22px; align-items: center; gap: 10px; min-height: 76px; border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; color: white; }
.hp-news-cat { color: #ff6b6b; font-size: 11px; font-weight: 900; }
.hp-news-row strong { font-size: 14px; line-height: 1.3; font-weight: 700; }
.hp-news-row time { color: var(--grey-font); font-size: 11px; white-space: nowrap; }
.hp-news-row b { color: #ff6b6b; font-size: 16px; transition: transform .16s; }
.hp-news-row:hover b { transform: translateX(4px); }
.hp-mobile-news-categories { display: none; }

/* --- SHARED SECTION HEADER --- */
.hp-leaders-section { padding-top: 90px; }
.hp-section-title-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.hp-kicker { color: #ff6b6b; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.hp-kicker.hp-light { color: white; }
.hp-section-title-row h2 { font-size: 44px; line-height: 1; letter-spacing: -2px; margin: 9px 0 0; color: var(--white); font-family: 'Barlow Condensed', sans-serif; }
.hp-section-title-row > a { font-size: 13px; font-weight: 900; padding-bottom: 9px; border-bottom: 1px solid var(--red); color: white; text-decoration: none; }
.hp-section-title-row > a span { margin-left: 25px; }

/* --- LEAGUE LEADERS (all 5 categories visible at once) --- */
.hp-leaders-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.hp-lt-col { border-right: 1px solid rgba(255,255,255,.12); padding: 18px 16px 4px; }
.hp-lt-col:last-child { border-right: 0; }
.hp-lt-head { font-size: 12px; font-weight: 900; letter-spacing: 1px; color: #ff6b6b; margin-bottom: 12px; text-transform: uppercase; }
.hp-lt-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; color: inherit; }
.hp-lt-row:hover { background: var(--card-bg); }
.hp-lt-rank { width: 16px; font-size: 12px; font-weight: 900; color: var(--grey-font); flex-shrink: 0; }
.hp-lt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hp-lt-name strong { font-size: 13px; color: white; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-lt-name small { font-size: 10px; color: var(--grey-font); font-weight: 900; }
.hp-lt-value { font-size: 18px; font-weight: 900; color: white; font-family: 'Barlow Condensed', sans-serif; flex-shrink: 0; }
/* Real medal tones rather than the previous flat/muted set (see
   player-stats.css's matching rule for the full rationale). Two
   variants now: a solid-fill circle with initials (fallback for a
   player with no verified photo -- .hp-avatar-1/2/3 set the fill), or
   a photo variant (.hp-avatar-photo) where a colored border ring
   carries the same rank-color coding instead, since the fill itself
   is now the player's actual photo. */
.hp-avatar { border-radius: 50%; background: #FFD700; color: var(--darkest-navy); display: grid; place-items: center; font-weight: 900; }
.hp-avatar-2 { background: #D7D9DC; color: var(--darkest-navy); }
.hp-avatar-3 { background: #CD7F32; color: var(--darkest-navy); }
.hp-leaders-table .hp-avatar { width: 30px; height: 30px; font-size: 10px; flex-shrink: 0; }

.hp-avatar.hp-avatar-photo {
  background: transparent;
  overflow: hidden;
  border: 2px solid #FFD700;
}
.hp-avatar.hp-avatar-photo.hp-avatar-2 { border-color: #D7D9DC; }
.hp-avatar.hp-avatar-photo.hp-avatar-3 { border-color: #CD7F32; }
.hp-avatar.hp-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-leader-empty { padding: 20px 0; color: var(--grey-font); font-size: 13px; }

/* --- BOX SCORE / FANTASY CALLOUTS --- */
.hp-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 70px; padding-bottom: 90px; }
.hp-callout-card { background: rgba(17,29,66,.5); border: 1px solid var(--card-border); padding: 28px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: white; transition: border-color .2s, transform .2s; }
.hp-callout-card:hover { border-color: rgba(196,18,48,.55); transform: translateY(-3px); }
.hp-callout-card h3 { font-size: 26px; margin: 8px 0 8px; font-family: 'Barlow Condensed', sans-serif; color: white; }
.hp-callout-card p { font-size: 14px; color: var(--grey-font); line-height: 1.5; margin: 0; max-width: 420px; }
.hp-callout-go { margin-top: 20px; font-size: 12px; font-weight: 900; color: white; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  /* Homepage already has its own big search bar in the hero -- the
     nav icon (leanedgesports_styles.css, shared with every other
     mobile page) would be a second, redundant entry point here.
     Loads after that shared rule, same specificity, so this wins. */
  #site-header .nav-search-wrap {
    display: none;
  }

  /* background-size:100% auto (see .hp-hero above) scales the photo's
     height in proportion to its own width -- fine at desktop widths,
     where that math happens to land close to the hero's height, but at
     phone widths the same image scales down to only a thin strip,
     leaving most of the hero showing flat --darkest-navy instead of the
     photo. Switching to cover for this breakpoint fills the box
     regardless of viewport width, same technique already used for
     .hp-hub-tile's background. */
  .hp-hero {
    background-size: cover;
    background-position: center 22%;
    overflow: visible;
  }

  /* .global-search-panel (below) already carries its own z-index:1000
     and position, which is what actually needs to render above
     Tonight when the dropdown is open -- it establishes its own
     stacking context regardless of its parents' z-index. Giving the
     whole wrapper (.hp-hero-inner/.hp-hero-search) z-index:400 was
     redundant for that, and had a real side effect: it's a sibling of
     #site-header inside .hp-hero-wrap (itself a z-index:30 stacking
     context via a rule that used to live here) -- so 400 > #site-
     header's own z-index put the ENTIRE search wrapper above the
     ENTIRE header -- not just the dropdown, all the time, whether the
     dropdown was open or not -- silently eating clicks meant for the
     hamburger toggle underneath it wherever the two boxes happened to
     overlap.

     .hp-hero-wrap's own z-index:30 (which caused that) is now removed
     entirely, not just the 400 above -- it was ALSO the direct cause
     of a second bug found later: since .hp-hero-wrap sat at the same
     z-index as .hp-scores-strip's fixed ticker (z-index:20) OR HIGHER,
     its entire stacking context -- not just the header, everything
     inside it, including the hero photo and Tonight panel as they
     scrolled -- painted above the ticker once scrolled to the same
     screen position, making the ticker appear to vanish behind the
     page. Nothing left actually depends on the wrap itself carrying
     an elevated z-index (confirmed: the dropdown panel's own 1000 is
     independently sufficient), so it's gone rather than re-tuned. */
  .hp-hero-search .global-search-panel {
    left: 0;
    right: auto;
    width: min(340px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    transform: none;
    z-index: 1000;
  }

  /* Mobile news order:
     LATEST NBA NEWS -> latest article -> divider -> category links. */
  .hp-hub-tile { display: none; }
  .hp-news-grid {
    display: block;
    margin-top: 16px;
  }
  .hp-news-heading > div:first-child > span:last-child {
    font-size: 0;
  }
  .hp-news-heading > div:first-child > span:last-child::after {
    content: 'LATEST NBA NEWS';
    font-size: 12px;
  }
  .hp-latest-news > h3 { display: none; }
  .hp-news-list .hp-news-row { display: none; }
  .hp-news-list .hp-news-row:first-child {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 18px;
    grid-template-areas:
      'category time arrow'
      'headline headline arrow';
    gap: 7px 10px;
    min-height: 0;
    padding: 16px;
    border: 1px solid rgba(177,204,241,.25);
    background: rgba(17,29,66,.72);
    box-sizing: border-box;
  }
  .hp-news-list .hp-news-row:first-child .hp-news-cat { grid-area: category; }
  .hp-news-list .hp-news-row:first-child strong { grid-area: headline; }
  .hp-news-list .hp-news-row:first-child time {
    grid-area: time;
    justify-self: end;
  }
  .hp-news-list .hp-news-row:first-child b {
    grid-area: arrow;
    align-self: center;
  }
  .hp-mobile-news-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .hp-mobile-news-categories a {
    padding: 8px 5px;
    border-right: 1px solid rgba(255,255,255,.14);
    color: #ff6b6b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    text-align: center;
    text-decoration: none;
  }
  .hp-mobile-news-categories a:last-child { border-right: 0; }
}

@media (max-width: 850px) {
  .hp-hero-inner { padding: 0 20px; }
  .hp-news-grid { grid-template-columns: 1fr; }
  .hp-hub-tile { min-height: 220px; }
  .hp-leaders-table { grid-template-columns: repeat(2, 1fr); }
  .hp-lt-col { border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
  .hp-lt-col:nth-child(2n) { border-right: 0; }
  .hp-callouts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hp-section-shell { padding-left: 18px; padding-right: 18px; }
  .hp-feed-section { padding-left: 18px; padding-right: 18px; }
  .hp-scores-strip { padding: 10px 18px; }
  .hp-hero { padding: 40px 0 30px; }
  .hp-news-heading { align-items: flex-start; }
  .hp-feed-status { flex-direction: column; align-items: flex-end; gap: 4px; }
  .hp-feed-status p { display: none; }
  .hp-hub-tile h2 { font-size: 30px; }
  .hp-section-title-row h2 { font-size: 34px; }
  .hp-section-title-row > a { display: none; }
  .hp-leaders-section { padding-top: 60px; }
  .hp-leaders-table { grid-template-columns: 1fr; }
  .hp-lt-col { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* --- APPROVED PHONE HOMEPAGE ---
   Kept last so Gary's broader 850px/560px responsive rules cannot
   override the approved phone composition. Desktop is untouched. */
@media (max-width: 768px) {
  /* Logo/tagline treatment (icon + CSS-generated "Stay Lean."/"Stay
     Ahead." text) is no longer homepage-only -- promoted to the
     shared leanedgesports_styles.css mobile block so every page uses
     the exact same asset and sizing. Removed the duplicate copy that
     used to live here to avoid the two drifting apart again (this
     site has hit that exact bug more than once with unconsolidated
     duplicate rules). Homepage's own nav still needs its background
     stripped, since it overlays the hero photo unlike other pages'
     solid bar -- that's genuinely homepage-specific, so it stays. */
  #site-header .navbar {
    border-bottom: 0;
    box-shadow: none;
  }

  /* Restore the exact 3:2 photograph composition from the approved
     version: full player and court, without the 520px mobile zoom. */
  .hp-hero {
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background-image:
      linear-gradient(90deg, rgba(13,24,48,.5) 0%, rgba(13,24,48,.35) 48%, rgba(13,24,48,.12) 100%),
      url('images/basketball-hero.jpg');
    background-size: 100% auto;
    background-position: center top;
  }
  .hp-hero-inner {
    justify-content: flex-end;
    padding: 0 18px 18px;
    box-sizing: border-box;
  }
  .hp-hero-inner > .hp-hero-search {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }
  .hp-hero-inner > .hp-hero-search .global-search-bar { width: 100%; }
  .hp-hero-search .global-search-bar input { font-size: 16px; }
  .hp-hero-search .global-search-panel {
    left: 0;
    right: auto;
    width: min(340px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    transform: none;
    z-index: 1000;
  }
  .hp-hero-inner > .hp-quick-links {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    gap: 10px;
    color: rgba(255,255,255,.62);
    box-sizing: border-box;
  }

  .hp-tonight-panel {
    width: calc(100% - 36px);
    max-width: 480px;
    margin: 20px auto 24px;
    box-sizing: border-box;
  }
  .hp-feed-section { margin-top: 32px; }
}

/* --- AUG 11 HOMEPAGE CONTENT UPDATE --- */
.hp-news-feature {
  min-height: 250px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(145deg, rgba(17,29,66,.92), rgba(5,20,48,.88));
  box-sizing: border-box;
}
.hp-news-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.25); }
.hp-news-card-heading h3 { margin:0; padding:0; border:0; }
.hp-news-card-heading a { color:#fff; text-decoration:none; font-size:11px; font-weight:800; }
.hp-update-grid { display:grid; grid-template-rows:repeat(3,1fr); gap:10px; }
.hp-update-card { min-height:72px; display:grid; grid-template-columns:86px 1fr 18px; align-items:center; gap:12px; padding:14px 18px; border:1px solid rgba(177,204,241,.22); background:rgba(17,29,66,.56); color:#fff; text-decoration:none; box-sizing:border-box; }
.hp-update-card:hover { border-color:rgba(196,18,48,.55); }
.hp-update-card > span { color:#ff6b6b; font-size:11px; font-weight:900; letter-spacing:.8px; }
.hp-update-card > strong { font-size:13px; line-height:1.25; }
.hp-update-card > b { color:#ff6b6b; font-size:16px; }
.hp-tonight-link { position:relative; z-index:2; pointer-events:auto; }

@media (max-width:768px) {
  .hp-news-grid { display:block; }
  .hp-news-feature { min-height:0; padding:16px; }
  .hp-news-card-heading { margin-bottom:0; }
  .hp-news-list .hp-news-row,
  .hp-news-list .hp-news-row:first-child {
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 18px;
    grid-template-areas:'category time arrow' 'headline headline arrow';
    gap:7px 10px;
    min-height:0;
    padding:16px 0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.14);
    background:transparent;
    box-sizing:border-box;
  }
  .hp-news-list .hp-news-row:last-child { border-bottom:0; }
  .hp-news-list .hp-news-row .hp-news-cat { grid-area:category; }
  .hp-news-list .hp-news-row strong { grid-area:headline; }
  .hp-news-list .hp-news-row time { grid-area:time; justify-self:end; }
  .hp-news-list .hp-news-row b { grid-area:arrow; align-self:center; }
  .hp-update-grid { margin-top:14px; grid-template-rows:none; gap:9px; }
  .hp-update-card { min-height:68px; grid-template-columns:78px 1fr 18px; padding:12px 14px; }
}

/* Keep homepage shortcut cards above decorative layers so every link is tappable. */
.hp-tonight-panel{z-index:20;pointer-events:auto}
.hp-tonight-link{position:relative;z-index:21;pointer-events:auto}
.hp-quick-links{position:relative;z-index:21}
@media(max-width:768px){.hp-update-card strong:empty::after{content:'No current updates';color:#aeb8c8;font-weight:600}}


/* Homepage action links must remain above decorative hero layers. */
.hp-tonight-panel{z-index:45;pointer-events:auto}.hp-tonight-link{position:relative;z-index:46;pointer-events:auto}
@media(max-width:768px){
  .hp-update-card strong:empty::after{content:'No current updates';color:#9ba8bd;font-weight:600}
}

/* AUG 11 v6 CLICK HOTFIX: decorative homepage layers are visual only. */
.hp-hero-grid,.hp-hero-glow,.hp-hero::before,.hp-hero::after{pointer-events:none!important;}
.hp-hero-inner{pointer-events:none;}
.hp-hero-inner .global-search-wrap,.hp-hero-inner .global-search-wrap *,.hp-quick-links,.hp-quick-links *{pointer-events:auto;}
.hp-tonight-panel{pointer-events:none!important;}
.hp-tonight-panel .hp-tonight-link{pointer-events:auto!important;}

/* AUG 11 v8: homepage nav must remain above hero/ticker layers and clickable. */
@media (min-width:1025px){
  body.homepage-page #site-header{z-index:2147483000!important;pointer-events:auto!important;isolation:isolate}
  body.homepage-page #site-header .site-top-wrap,
  body.homepage-page #site-header .navbar,
  body.homepage-page #site-header #main-nav,
  body.homepage-page #site-header #main-nav>a,
  body.homepage-page #site-header .navbar-right,
  body.homepage-page #site-header .navbar-right>*,
  body.homepage-page #site-header .logo,
  body.homepage-page #site-header .logo a{pointer-events:auto!important}
}


/* AUG 12 v23 — two-column homepage news treatment.
   Left = Latest NBA News. Right = What's Happening (Trade / Signings / Injuries). */
.hp-news-grid {
  align-items: stretch;
}

.hp-whats-panel {
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(145deg, rgba(17,29,66,.92), rgba(5,20,48,.88));
  padding: 22px 24px;
  box-sizing: border-box;
  min-height: 250px;
}

.hp-whats-panel .hp-news-card-heading {
  margin-bottom: 0;
}

.hp-whats-panel .hp-news-card-heading h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.3px;
  color: #fff;
}

.hp-whats-panel .hp-update-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
}

.hp-whats-panel .hp-update-card {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.hp-whats-panel .hp-update-card:first-child {
  border-top: 0;
}

@media (max-width: 768px) {
  .hp-whats-panel {
    margin-top: 14px;
    padding: 18px;
  }
}


/* AUG 12 v24 — Live Data replaces the old Tonight shortcut panel.
   Keeps .hp-tonight-panel as a compatibility class for the working
   homepage search guard, but the presentation is now Live Data. */
.hp-live-data-panel {
  display: block;
  width: min(560px, calc(100% - 36px));
  min-height: 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(103,155,218,.38);
  border-radius: 18px;
  background: rgba(5,18,39,.94);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  color: #fff;
}

.hp-live-data-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.hp-live-data-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .7px;
}

.hp-live-data-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #48e17f;
  box-shadow: 0 0 0 3px rgba(72,225,127,.12);
  flex: 0 0 auto;
}

.hp-live-data-view {
  color: #b9c2d1;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.hp-live-data-view span {
  margin-left: 5px;
  font-size: 21px;
  line-height: 0;
  vertical-align: -2px;
}

.hp-live-data-card {
  border-radius: 14px;
  background: rgba(17,29,52,.9);
  padding: 18px 20px 16px;
}

.hp-live-data-message {
  text-align: center;
  margin-bottom: 18px;
}

.hp-live-data-message strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 5px;
}

.hp-live-data-message span {
  color: #aeb8c8;
  font-size: 13px;
}

.hp-live-data-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  text-align: center;
}

.hp-live-data-stats div {
  min-width: 0;
}

.hp-live-data-stats span {
  display: block;
  color: #9ea8ba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .45px;
  margin-bottom: 5px;
}

.hp-live-data-stats strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

.hp-live-data-stats strong.hp-live-green {
  color: #48e17f;
}

/* League Leaders rank badges: 1 gold, 2 silver, 3 bronze. */
.hp-lt-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  font-size: 12px;
  font-weight: 900;
  color: #0b1730;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}

.hp-lt-rank-1 {
  background: linear-gradient(145deg, #f9dc63, #d5a51f);
  border-color: #f7da5b;
}

.hp-lt-rank-2 {
  background: linear-gradient(145deg, #f1f4f7, #aeb9c7);
  border-color: #e6ebf0;
}

.hp-lt-rank-3 {
  background: linear-gradient(145deg, #d99a63, #a85a2d);
  border-color: #e6a06a;
}

@media (max-width: 768px) {
  .hp-live-data-panel {
    width: calc(100% - 36px);
    max-width: 480px;
    margin: 20px auto 24px;
    padding: 16px;
  }

  .hp-live-data-card {
    padding: 18px 14px 16px;
  }

  .hp-live-data-stats {
    gap: 6px;
  }

  .hp-live-data-stats strong {
    font-size: 21px;
  }
}


/* AUG 12 v25 — restore accidentally removed homepage Popular + news panels. */
.hp-quick-links {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  color: #7e8883;
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 21;
}
.hp-quick-links button,
.hp-quick-links a {
  color: #c7ceca;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  border-bottom: 1px solid #4e5552;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.hp-quick-links button:hover,
.hp-quick-links a:hover {
  color: white;
  border-color: var(--red);
}

.hp-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.hp-news-feature,
.hp-whats-panel {
  min-height: 250px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(145deg, rgba(17,29,66,.92), rgba(5,20,48,.88));
  box-sizing: border-box;
  padding: 22px 24px;
}

.hp-news-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.hp-news-card-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.hp-news-card-heading a {
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.hp-update-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
}

.hp-update-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 110px 1fr 20px;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(255,255,255,.18);
  background: transparent;
  padding: 14px 0;
}
.hp-update-card:first-child { border-top: 0; }
.hp-update-card > span {
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
}
.hp-update-card > strong {
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
}
.hp-update-card > b {
  color: #ff6b6b;
  font-size: 16px;
}

@media (max-width: 768px) {
  .hp-news-grid { display: block; }
  .hp-news-feature,
  .hp-whats-panel {
    min-height: 0;
    padding: 16px;
  }
  .hp-whats-panel { margin-top: 14px; }
}


/* v27 definitive desktop Live Data positioning */
@media (min-width: 769px) {
  .live-data-position-fix {
    position: relative !important;
    top: 150px !important;
    margin-bottom: 150px !important;
    z-index: 5 !important;
  }

  .hp-quick-links {
    position: relative !important;
    z-index: 30 !important;
  }
}


/* v28: place Live Data neatly on the blue section immediately under the hero */
@media (min-width: 769px) {
  .live-data-position-fix {
    position: relative !important;
    top: 0 !important;
    margin-top: 34px !important;
    margin-bottom: 34px !important;
    z-index: 5 !important;
  }
}


/* v29: let Live Data bridge the hero and blue content area.
   About the top third overlaps the bottom of the hero on desktop. */
@media (min-width: 769px) {
  .live-data-position-fix {
    position: relative !important;
    top: -68px !important;
    margin-top: 0 !important;
    margin-bottom: -34px !important;
    z-index: 12 !important;
  }
}


/* v30: final desktop spacing refinements */
@media (min-width: 769px) {
  /* Move Live Data upward only, keeping its horizontal position/size unchanged */
  .live-data-position-fix {
    top: -143px !important;
    margin-bottom: -109px !important;
  }

  /* Widen the Latest NBA News + What's Happening row to align with the wider page content */
  .home-lower-grid,
  .news-happening-grid,
  .homepage-news-grid {
    width: calc(100% - 72px) !important;
    max-width: none !important;
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
}


/* v31: wide desktop Live Data + app-style looping scores ticker */
@media (min-width: 769px) {
  .live-data-position-fix {
    top: -58px !important;
    margin: 0 36px -24px !important;
    width: calc(100% - 72px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .live-data-position-fix .hp-live-data-card {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.35fr) minmax(520px, 2fr) !important;
    align-items: center !important;
    gap: 28px !important;
  }

  .live-data-position-fix .hp-live-data-message {
    text-align: left !important;
    margin: 0 !important;
    padding-right: 24px !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
  }
}

.hp-scores-strip {
  overflow: hidden !important;
}

.hp-ss-loop-wrap {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.hp-ss-loop-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: hpScoresLoop 18s linear infinite;
  will-change: transform;
}

.hp-ss-loop-copy {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 58px;
  font-weight: 700;
  letter-spacing: .3px;
}

.hp-ss-loop-copy .hp-loop-dot {
  padding: 0 18px;
  opacity: .82;
}

@keyframes hpScoresLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-ss-loop-track { animation: none; }
}


/* v32: final Live Data / ticker / rank refinements */
@media (min-width: 769px) {
  /* Less overlap on the hero: more of the player/court stays visible. */
  .live-data-position-fix {
    top: -18px !important;
    margin-bottom: 18px !important;
  }
}

/* Compact ticker typography to match the app proportions. */
.hp-scores-strip,
.hp-scores-strip * {
  box-sizing: border-box;
}

.hp-scores-strip {
  min-height: 42px !important;
  height: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.hp-scores-strip .hp-ss-label,
.hp-scores-strip .hp-ss-empty,
.hp-scores-strip .hp-ss-loop-copy,
.hp-scores-strip .hp-ss-game,
.hp-scores-strip .hp-ss-time,
.hp-scores-strip .hp-ss-score,
.hp-scores-strip .hp-ss-status {
  font-size: 11px !important;
  line-height: 1 !important;
}

.hp-scores-strip .hp-ss-label {
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  white-space: nowrap !important;
}

.hp-scores-strip .hp-ss-full-results {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
}

/* X sits at the far right, matching the compact app ticker. */
.hp-ss-close {
  flex: 0 0 auto;
  width: 36px;
  height: 42px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b7c2d3;
  font: 400 28px/1 Arial, sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hp-ss-close:hover {
  color: #fff;
}

/* League Leaders rank badges — force these after all older rules. */
.hp-lt-rank {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #0b1730 !important;
  border: 1px solid rgba(255,255,255,.45) !important;
}

.hp-lt-rank-1 {
  background: linear-gradient(145deg, #f9dc63, #d5a51f) !important;
  border-color: #f7da5b !important;
}

.hp-lt-rank-2 {
  background: linear-gradient(145deg, #f1f4f7, #aeb9c7) !important;
  border-color: #e6ebf0 !important;
}

.hp-lt-rank-3 {
  background: linear-gradient(145deg, #d99a63, #a85a2d) !important;
  border-color: #e6a06a !important;
}


/* v33: centre Live Data, strengthen ticker border, and style Full Results */
@media (min-width: 769px) {
  .live-data-position-fix {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100% - 72px) !important;
    max-width: none !important;
  }
}

/* Full rectangular border around the fixed Live Scores bar. */
.hp-scores-strip {
  border: 1px solid rgba(196,18,48,.72) !important;
  border-left-color: rgba(196,18,48,.72) !important;
  border-right-color: rgba(196,18,48,.72) !important;
  border-top-color: rgba(196,18,48,.72) !important;
  border-bottom-color: rgba(196,18,48,.72) !important;
}

/* FULL RESULTS uses the Lean Edge red treatment rather than link-purple/default. */
.hp-scores-strip .hp-ss-full-results,
.hp-scores-strip .hp-ss-full-results:link,
.hp-scores-strip .hp-ss-full-results:visited {
  color: #fff !important;
  background: rgba(196,18,48,.24) !important;
  border: 1px solid #c41230 !important;
  border-radius: 7px !important;
  text-decoration: none !important;
}

.hp-scores-strip .hp-ss-full-results:hover {
  background: rgba(196,18,48,.38) !important;
  color: #fff !important;
}

/* Keep View all visibly clickable. */
.hp-live-data-view {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* v35 — homepage ticker restore + tighter mobile flow + horizontal leaders */

/* Homepage live ticker must always render above the hero. */
#hp-scores-strip,
.hp-scores-strip {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147482500 !important;
  background: #000 !important;
  border-top: 1px solid rgba(196,18,48,.72) !important;
  border-bottom: 1px solid rgba(196,18,48,.72) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Smaller homepage ticker typography, closer to the rest of the site. */
.hp-scores-strip .hp-ss-label,
.hp-scores-strip .hp-ss-loop-copy,
.hp-scores-strip .hp-ss-loop-copy span,
.hp-scores-strip .hp-ss-game,
.hp-scores-strip .hp-ss-time,
.hp-scores-strip .hp-ss-score,
.hp-scores-strip .hp-ss-status,
.hp-scores-strip .hp-ss-empty {
  font-size: 10px !important;
  line-height: 1 !important;
}

.hp-scores-strip .hp-ss-label {
  font-weight: 900 !important;
  letter-spacing: .65px !important;
}

/* Neutral player-photo ring: medal number alone carries rank colour. */
.hp-avatar.hp-avatar-photo,
.hp-avatar.hp-avatar-photo.hp-avatar-2,
.hp-avatar.hp-avatar-photo.hp-avatar-3 {
  border-color: rgba(255,255,255,.38) !important;
}

/* Keep the coloured rank number badges themselves. */
.hp-lt-rank-1 {
  background: linear-gradient(145deg, #f9dc63, #d5a51f) !important;
  border-color: #f7da5b !important;
}
.hp-lt-rank-2 {
  background: linear-gradient(145deg, #f1f4f7, #aeb9c7) !important;
  border-color: #e6ebf0 !important;
}
.hp-lt-rank-3 {
  background: linear-gradient(145deg, #d99a63, #a85a2d) !important;
  border-color: #e6a06a !important;
}

@media (max-width: 768px) {
  /* Slower, smaller phone ticker */
  .hp-ss-loop-track {
    animation-duration: 34s !important;
  }

  .hp-scores-strip {
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 10px !important;
    padding-right: 4px !important;
    gap: 6px !important;
  }

  .hp-scores-strip .hp-ss-label,
  .hp-scores-strip .hp-ss-loop-copy,
  .hp-scores-strip .hp-ss-loop-copy span {
    font-size: 9px !important;
  }

  .hp-scores-strip .hp-ss-full-results {
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 9px !important;
    margin-left: auto !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }

  .hp-scores-strip .hp-ss-close {
    width: 30px !important;
    height: 40px !important;
    margin-left: 2px !important;
    font-size: 23px !important;
  }

  /* Close the oversized gap between Live Data and Latest NBA News */
  .hp-live-data-panel {
    margin-bottom: 18px !important;
  }

  .hp-feed-section {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }

  /* Mobile League Leaders becomes a sideways swipeable row of categories. */
  .hp-leaders-table {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 18px 12px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    scrollbar-width: none !important;
  }

  .hp-leaders-table::-webkit-scrollbar {
    display: none !important;
  }

  .hp-lt-col {
    flex: 0 0 calc(100vw - 72px) !important;
    width: calc(100vw - 72px) !important;
    min-width: calc(100vw - 72px) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 18px 16px 8px !important;
    scroll-snap-align: start !important;
    background: rgba(17,29,66,.36) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
  }
}


/* v36 — homepage ticker + phone leaders refinements */

/* Homepage ticker is a real fixed strip again */
#hp-scores-strip {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147482500 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  gap: 10px !important;
  align-items: center !important;
  background: #000 !important;
  border-top: 1px solid rgba(196,18,48,.72) !important;
  border-bottom: 1px solid rgba(196,18,48,.72) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

#hp-scores-strip .hp-ss-label,
#hp-scores-strip .hp-ss-loop-copy,
#hp-scores-strip .hp-ss-loop-copy span,
#hp-scores-strip .hp-ss-game,
#hp-scores-strip .hp-ss-time,
#hp-scores-strip .hp-ss-score,
#hp-scores-strip .hp-ss-status,
#hp-scores-strip .hp-ss-empty {
  font-size: 9px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#hp-scores-strip .hp-ss-label {
  height: 38px !important;
  font-weight: 900 !important;
  letter-spacing: .55px !important;
  white-space: nowrap !important;
}

#hp-scores-strip .hp-ss-loop-wrap {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

#hp-scores-strip .hp-ss-loop-track {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

#hp-scores-strip .hp-ss-loop-copy {
  height: 38px !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  /* Slower moving feed */
  #hp-scores-strip .hp-ss-loop-track {
    animation-duration: 42s !important;
  }

  /* Push Full Results further right and make smaller */
  #hp-scores-strip .hp-ss-full-results {
    margin-left: auto !important;
    margin-right: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 7.5px !important;
    border-radius: 5px !important;
    flex: 0 0 auto !important;
  }

  #hp-scores-strip .hp-ss-close {
    width: 28px !important;
    height: 38px !important;
    flex: 0 0 28px !important;
    margin-left: 0 !important;
    font-size: 21px !important;
  }

  /* Close gap after Live Data */
  .hp-live-data-panel {
    margin-bottom: 10px !important;
  }
  .hp-feed-section {
    margin-top: 10px !important;
    padding-top: 0 !important;
  }

  /* League Leaders: title remains fixed.
     Only the data columns scroll left/right across the full screen. */
  .hp-leaders-section .hp-section-title-row {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    margin-bottom: 18px !important;
  }

  .hp-leaders-table {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 18px 12px !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .hp-leaders-table::-webkit-scrollbar {
    display: none !important;
  }

  .hp-lt-col {
    flex: 0 0 calc(100vw - 36px) !important;
    width: calc(100vw - 36px) !important;
    min-width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    padding: 18px 16px 10px !important;
    background: rgba(17,29,66,.36) !important;
  }

  /* No duplicate rank-colour ring around player photos */
  .hp-avatar.hp-avatar-photo,
  .hp-avatar.hp-avatar-photo.hp-avatar-2,
  .hp-avatar.hp-avatar-photo.hp-avatar-3 {
    border-color: rgba(255,255,255,.36) !important;
  }
}


/* v37 — homepage now uses the SAME shared Live Scores ticker as every page. */
/* Retire the old homepage-only ticker so there is one source of truth. */
#hp-scores-strip,
.hp-scores-strip {
  display: none !important;
}

/* Undo the legacy homepage rule that hid nav.html's shared ticker. */
body.homepage-page #site-header .live-scores-strip,
#site-header .live-scores-strip {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The shared ticker is fixed, so reserve its compact height above the hero nav. */
body.homepage-page #site-header .site-top-wrap,
#site-header .site-top-wrap {
  padding-top: 38px !important;
}

/* PHONE — app-style League Leaders container stays fixed; stat groups swipe inside. */
@media (max-width: 768px) {
  .hp-leaders-section {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding: 22px 18px 18px !important;
    border: 1px solid rgba(91,139,197,.45) !important;
    border-radius: 18px !important;
    background: rgba(10,25,48,.82) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hp-leaders-section .hp-section-title-row {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hp-leaders-section .hp-section-title-row h2 {
    font-size: 25px !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
  }

  .hp-leaders-section .hp-section-title-row > a {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .hp-leaders-table {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
  }

  .hp-leaders-table::-webkit-scrollbar { display: none !important; }

  .hp-lt-col {
    flex: 0 0 calc(100% - 54px) !important;
    width: calc(100% - 54px) !important;
    min-width: calc(100% - 54px) !important;
    max-width: calc(100% - 54px) !important;
    scroll-snap-align: start !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .hp-lt-col:last-child { border-right: 0 !important; }

  .hp-lt-head {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  .hp-lt-row {
    min-height: 58px !important;
    padding: 9px 0 !important;
  }
}


/* v38 — phone homepage spacing refinement */
@media (max-width: 768px) {
  /* Give League Leaders breathing room below What's Happening / news panels. */
  .hp-leaders-section {
    padding-top: 42px !important;
    margin-top: 18px !important;
  }
}


/* v39 — restore homepage hero header over the player image */
.homepage-page #site-header,
body.homepage-page #site-header,
.homepage-page header#site-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.homepage-page #site-header .navbar,
.homepage-page #site-header .navbar-inner,
.homepage-page #site-header .nav-shell,
.homepage-page #site-header .header-inner {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.homepage-page .hp-hero-wrap,
.homepage-page .hp-hero {
  position: relative !important;
  z-index: 1 !important;
}

.homepage-page #site-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

.homepage-page #site-header a,
.homepage-page #site-header button,
.homepage-page #site-header nav,
.homepage-page #site-header #main-nav,
.homepage-page #site-header .navbar-right,
.homepage-page #site-header .hamburger,
.homepage-page #site-header .menu-toggle,
.homepage-page #site-header .nav-menu-button {
  pointer-events: auto !important;
}

.homepage-page #site-header .hamburger,
.homepage-page #site-header .menu-toggle,
.homepage-page #site-header .nav-menu-button {
  position: relative !important;
  z-index: 60 !important;
  isolation: isolate !important;
}

@media (max-width: 768px) {
  .homepage-page #site-header,
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .homepage-page #site-header .navbar,
  .homepage-page #site-header .navbar-inner,
  .homepage-page #site-header .nav-shell,
  .homepage-page #site-header .header-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* v40 — desktop nav clearance + phone hero framing */

/* Keep the approved desktop nav position, but tighten link spacing
   so Profile no longer sits underneath the hamburger button. */
@media (min-width: 1025px) {
  body.homepage-page #site-header #main-nav {
    gap: 15px !important;
  }
}

/* Phone homepage hero: slightly zoom out and vertically centre the
   player image so the full head/player framing matches the app better. */
@media (max-width: 768px) {
  body.homepage-page .hp-hero {
    background-image:
      linear-gradient(90deg, rgba(13,24,48,.5) 0%, rgba(13,24,48,.35) 48%, rgba(13,24,48,.12) 100%),
      url('images/basketball-hero.jpg') !important;
    background-size: auto 94% !important;
    background-position: center 48% !important;
    background-repeat: no-repeat !important;
    background-color: #020c1c !important;
  }
}


/* v41 — restore approved desktop nav position + app-like phone hero */

/* DESKTOP HOMEPAGE:
   Home sits just to the right of the player's head; all nav links stay
   before the hamburger on the far right. */
@media (min-width: 1025px) {
  body.homepage-page #site-header #main-nav {
    position: absolute !important;
    left: 72% !important;
    top: 28px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    width: max-content !important;
    white-space: nowrap !important;
    z-index: 70 !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .hamburger,
  body.homepage-page #site-header .menu-toggle,
  body.homepage-page #site-header .nav-menu-button {
    position: absolute !important;
    right: 18px !important;
    top: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 80 !important;
  }
}

/* PHONE HOMEPAGE:
   Match the app hero composition more closely:
   - full player visible, including head
   - logo+slogan upper left over the image
   - hamburger upper right over the image
   - image fills hero without a navy header strip */
@media (max-width: 768px) {
  body.homepage-page .hp-hero-wrap {
    position: relative !important;
    overflow: hidden !important;
    background: #020b18 !important;
  }

  body.homepage-page .hp-hero {
    min-height: 555px !important;
    height: 555px !important;
    background-image:
      linear-gradient(180deg, rgba(3,10,23,.06) 0%, rgba(3,10,23,.08) 62%, rgba(3,10,23,.20) 100%),
      url('images/basketball-hero.jpg') !important;
    background-size: cover !important;
    background-position: center 42% !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;
  }

  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 150px !important;
    min-height: 150px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 60 !important;
  }

  body.homepage-page #site-header .navbar,
  body.homepage-page #site-header .navbar-inner,
  body.homepage-page #site-header .nav-shell,
  body.homepage-page #site-header .header-inner {
    height: 150px !important;
    min-height: 150px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Brand block positioned like the app */
  body.homepage-page #site-header .brand,
  body.homepage-page #site-header .navbar-brand,
  body.homepage-page #site-header .site-brand {
    position: absolute !important;
    top: 28px !important;
    left: 28px !important;
    z-index: 70 !important;
  }

  body.homepage-page #site-header .brand img,
  body.homepage-page #site-header .navbar-brand img,
  body.homepage-page #site-header .site-brand img {
    max-height: 112px !important;
    width: auto !important;
  }

  /* Hamburger in app position */
  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .hamburger,
  body.homepage-page #site-header .menu-toggle,
  body.homepage-page #site-header .nav-menu-button {
    position: absolute !important;
    top: 48px !important;
    right: 22px !important;
    left: auto !important;
    z-index: 80 !important;
  }

  /* Desktop nav is not shown across the hero on phone. */
  body.homepage-page #site-header #main-nav {
    display: none !important;
  }

  /* Keep website Search + Popular treatment, but anchor it near hero bottom. */
  body.homepage-page .hp-hero-search {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 72px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 45 !important;
  }

  body.homepage-page .hp-quick-links {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 28px !important;
    margin: 0 !important;
    z-index: 45 !important;
  }
}


/* v42 — homepage keeps the approved desktop composition while using
   the same shared order: nav first, hamburger last. */
@media (min-width: 1025px) {
  body.homepage-page #site-header .navbar {
    display: block !important;
    position: relative !important;
  }

  body.homepage-page #site-header #main-nav {
    position: absolute !important;
    left: 72% !important;
    right: auto !important;
    top: 28px !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    display: flex !important;
    gap: 18px !important;
    justify-content: flex-start !important;
    z-index: 70 !important;
  }

  body.homepage-page #site-header .navbar-right {
    position: absolute !important;
    right: 18px !important;
    top: 20px !important;
    left: auto !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 80 !important;
  }

  body.homepage-page #site-header .desktop-more-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* Phone homepage hamburger sits level with the logo/slogan, app-style. */
@media (max-width: 768px) {
  body.homepage-page #site-header .mobile-menu-toggle {
    top: 30px !important;
    right: 20px !important;
  }
}


/* v43 — homepage desktop hamburger on the exact same horizontal line as nav */
@media (min-width: 1025px) {
  body.homepage-page #site-header .navbar-right {
    top: 28px !important;
    transform: translateY(-50%) !important;
    height: 48px !important;
    align-items: center !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .desktop-more-toggle {
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }
}


/* v44 — homepage hamburger: same 23px visual correction */
@media (min-width: 1025px) {
  body.homepage-page #site-header .desktop-more-wrap {
    transform: translateY(23px) !important;
  }

  body.homepage-page #site-header .desktop-more-toggle {
    transform: none !important;
  }
}


/* v45 — homepage hamburger fine adjustment */
@media (min-width: 1025px) {
  body.homepage-page #site-header .desktop-more-wrap {
    transform: translateY(17px) !important;
  }

  /* Homepage search is part of the hero, so do not shift any search control here. */
  body.homepage-page #site-header .nav-search-wrap,
  body.homepage-page #site-header .nav-search-btn,
  body.homepage-page #site-header .nav-search-toggle {
    transform: none !important;
  }
}


/* v46 — homepage: hamburger centre matches the navigation text baseline */
@media (min-width: 1025px) {
  body.homepage-page #site-header .navbar-right {
    position: absolute !important;
    right: 26px !important;
    top: 94px !important;
    transform: translateY(-50%) !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .desktop-more-toggle {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }
}


/* v47 — homepage uses the SAME navigation geometry as inner pages */
@media (min-width: 1025px) {
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  body.homepage-page #site-header .navbar {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "brand primary controls" !important;
    align-items: center !important;
    column-gap: 24px !important;
    min-height: 150px !important;
    height: 150px !important;
    padding: 0 28px 0 42px !important;
    background: transparent !important;
  }

  body.homepage-page #site-header .logo {
    grid-area: brand !important;
    position: static !important;
    align-self: center !important;
  }

  body.homepage-page #site-header #main-nav {
    grid-area: primary !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    margin: 0 !important;
  }

  body.homepage-page #site-header .navbar-right {
    grid-area: controls !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .desktop-more-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* As requested previously: no desktop magnifier on HOME only. */
  body.homepage-page #site-header .nav-search-wrap {
    display: none !important;
  }
}


/* v48 — homepage uses the SAME row position as all inner pages */
@media (min-width: 1025px) {
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  body.homepage-page #site-header .navbar {
    position: relative !important;
    display: block !important;
    min-height: 132px !important;
    height: 132px !important;
    padding: 0 28px 0 42px !important;
    background: transparent !important;
  }

  body.homepage-page #site-header .logo {
    position: absolute !important;
    left: 42px !important;
    top: 24px !important;
    transform: none !important;
  }

  body.homepage-page #site-header #main-nav {
    position: absolute !important;
    top: 34px !important;
    right: 158px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: max-content !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    margin: 0 !important;
  }

  body.homepage-page #site-header .navbar-right {
    position: absolute !important;
    top: 34px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .desktop-more-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* Home remains the only desktop page without the top magnifier. */
  body.homepage-page #site-header .nav-search-wrap {
    display: none !important;
  }
}


/* v49 — HOME uses the exact same desktop row geometry as every other page */
@media (min-width: 1025px) {
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  body.homepage-page #site-header .navbar {
    position: relative !important;
    display: block !important;
    height: 132px !important;
    min-height: 132px !important;
    padding: 0 28px 0 42px !important;
    background: transparent !important;
  }

  body.homepage-page #site-header #main-nav {
    position: absolute !important;
    top: 34px !important;
    right: 24px !important;
    left: auto !important;
    transform: none !important;
    width: max-content !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    margin: 0 !important;
  }

  /* Keep the shared site search usable on the homepage too. */
  body.homepage-page #site-header #main-nav > .nav-search-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header #main-nav .nav-search-toggle {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header #main-nav > .desktop-more-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* v50 — same active underline position on homepage */
@media (min-width: 1025px) {
  body.homepage-page #site-header #main-nav > a.nav-primary.active::after {
    bottom: 7px !important;
    height: 2px !important;
  }
}


/* v51 — restore desktop Search + Popular lower on the hero.
   Navigation/header stays completely untouched. */
@media (min-width: 1025px) {
  body.homepage-page .hp-hero-search {
    position: absolute !important;
    left: 42px !important;
    top: 182px !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  body.homepage-page .hp-quick-links {
    position: absolute !important;
    left: 42px !important;
    top: 238px !important;
    bottom: auto !important;
    margin: 0 !important;
  }
}


/* v53 — ONLY move desktop Search + Popular to match the approved reference.
   No navigation, hero, Live Data, ticker or other homepage elements touched. */
@media (min-width: 1025px) {
  body.homepage-page .hp-hero-search {
    transform: translateY(-210px) !important;
  }

  body.homepage-page .hp-quick-links {
    transform: translateY(-210px) !important;
  }
}


/* v54 — ONLY Search + Popular.
   Correct the previous over-shift and match the reference position:
   below the logo, above the middle of the hero. */
@media (min-width: 1025px) {
  body.homepage-page .hp-hero-search {
    transform: translateY(-85px) !important;
  }

  body.homepage-page .hp-quick-links {
    transform: translateY(-85px) !important;
  }
}


/* =========================================================
   v56 — PHONE HOMEPAGE RESET
   Desktop is untouched.
   Rebuild mobile around the app composition from a clean base.
   ========================================================= */
@media (max-width: 768px) {

  body.homepage-page {
    overflow-x: hidden !important;
  }

  /* Hero uses the original panoramic artwork and app-like proportions. */
  body.homepage-page .hp-hero-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #020b18 !important;
  }

  body.homepage-page .hp-hero {
    position: relative !important;
    width: 100% !important;
    height: 535px !important;
    min-height: 535px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background-color: #020b18 !important;
    background-image:
      linear-gradient(180deg, rgba(1,7,17,.02) 0%, rgba(1,7,17,.03) 68%, rgba(1,7,17,.12) 100%),
      url('images/basketball-hero-panoramic.jpg') !important;
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
  }

  /* Header floats over the image exactly once. */
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    z-index: 100 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header .site-top-wrap,
  body.homepage-page #site-header .navbar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* One logo lockup only: logo + Stay Lean / Stay Ahead. */
  body.homepage-page #site-header .logo {
    position: absolute !important;
    top: 28px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 110 !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header .logo-full {
    display: block !important;
    width: 220px !important;
    max-width: 62vw !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  body.homepage-page #site-header .logo-mark {
    display: none !important;
  }

  /* Hamburger mirrors the app placement. */
  body.homepage-page #site-header .mobile-menu-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 43px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 18px !important;
    z-index: 115 !important;
    pointer-events: auto !important;
  }

  /* No desktop navigation over the phone hero. */
  body.homepage-page #site-header #main-nav,
  body.homepage-page #site-header .navbar-right {
    display: none !important;
  }

  /* Search follows the hero in normal flow, as it does in the app. */
  body.homepage-page .hp-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -112px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
  }

  body.homepage-page .hp-hero-search {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(94,153,220,.48) !important;
    background: rgba(8,23,48,.96) !important;
    box-sizing: border-box !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    width: 100% !important;
    font-size: 16px !important;
    color: #fff !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input::placeholder {
    color: #aeb8c8 !important;
    opacity: 1 !important;
  }

  /* App doesn't use the Popular row here. */
  body.homepage-page .hp-quick-links {
    display: none !important;
  }

  /* Leave room for the search card beneath the hero, then Live Data. */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 142px 20px 0 !important;
    transform: none !important;
  }

  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 28px !important;
  }
}


/* =========================================================
   v57 — PHONE HOMEPAGE ACTUAL FIX
   Fix duplicated brand, clipped Search, and hero scale.
   DESKTOP UNTOUCHED.
   ========================================================= */
@media (max-width: 768px) {

  /* 1) The shared mobile stylesheet already paints the full
        logo+slogan as a background on .logo a.
        Hide BOTH logo img elements here so it is drawn only once. */
  body.homepage-page #site-header .logo a {
    display: block !important;
    width: 225px !important;
    height: 96px !important;
    min-height: 96px !important;
    background:
      url('/images/LeanEdgeSports-Logo-Slogan-Clear.webp')
      left center / 225px auto no-repeat !important;
  }

  body.homepage-page #site-header .logo .logo-full,
  body.homepage-page #site-header .logo .logo-mark {
    display: none !important;
    visibility: hidden !important;
  }

  /* Put the single brand lockup in the same app-like place. */
  body.homepage-page #site-header .logo {
    top: 24px !important;
    left: 22px !important;
  }

  /* 2) Slightly zoom the hero OUT.
        Fit the panorama by height instead of using cover. */
  body.homepage-page .hp-hero {
    height: 505px !important;
    min-height: 505px !important;
    max-height: 505px !important;
    overflow: visible !important;
    background-size: auto 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  body.homepage-page .hp-hero-wrap {
    overflow: visible !important;
  }

  /* Keep hamburger high/right like the app. */
  body.homepage-page #site-header .mobile-menu-toggle {
    top: 40px !important;
    right: 20px !important;
    width: 58px !important;
    height: 58px !important;
  }

  /* 3) Search really does sit beneath the hero.
        It was being clipped by overflow:hidden before. */
  body.homepage-page .hp-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -92px !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 40 !important;
  }

  body.homepage-page .hp-hero-search {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar {
    display: flex !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    align-items: center !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* Popular remains hidden on phone, like the app. */
  body.homepage-page .hp-quick-links {
    display: none !important;
  }

  /* Live Data follows Search with app-like spacing, no giant blank area. */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    margin: 120px 20px 0 !important;
  }
}


/* =========================================================
   v58 — PHONE HOMEPAGE: closer visual match to the app
   DESKTOP UNTOUCHED
   ========================================================= */
@media (max-width: 768px) {

  /* More app-like hero proportions: shorter, calmer, less zoomed. */
  body.homepage-page .hp-hero {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: hidden !important;
    background-size: auto 88% !important;
    background-position: center 42% !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;
  }

  body.homepage-page .hp-hero-wrap {
    overflow: visible !important;
    background: #020b18 !important;
  }

  /* Brand smaller and slightly higher/left, like the app. */
  body.homepage-page #site-header .logo {
    top: 20px !important;
    left: 18px !important;
  }

  body.homepage-page #site-header .logo a {
    width: 190px !important;
    height: 82px !important;
    min-height: 82px !important;
    background-size: 190px auto !important;
  }

  /* Hamburger tighter and closer to app proportions. */
  body.homepage-page #site-header .mobile-menu-toggle {
    top: 31px !important;
    right: 18px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }

  /* Search should sit immediately under the hero, not float far away. */
  body.homepage-page .hp-hero-inner {
    bottom: -82px !important;
    padding: 0 18px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar {
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 15px !important;
    padding: 0 16px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    font-size: 15px !important;
  }

  /* Pull Live Data up closer, matching the app's rhythm. */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    margin: 104px 18px 0 !important;
  }

  /* Make Live Data a touch tighter like the app. */
  body.homepage-page .hp-live-data-card {
    border-radius: 14px !important;
  }

  body.homepage-page .hp-live-data-message {
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  /* Latest News follows sooner, no large blank breathing gap. */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 22px !important;
  }

  /* App-style compact spacing for the first homepage blocks. */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-boxscores-section,
  body.homepage-page .hp-fantasy-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   v59 — PHONE HOMEPAGE: sharper, cleaner app match
   DESKTOP UNTOUCHED
   ========================================================= */
@media (max-width: 768px) {

  /* Sharper/cleaner hero:
     - less overlay
     - slightly more zoomed out
     - shorter overall visual height */
  body.homepage-page .hp-hero {
    height: 408px !important;
    min-height: 408px !important;
    max-height: 408px !important;
    background-image:
      linear-gradient(180deg, rgba(1,7,17,.00) 0%, rgba(1,7,17,.015) 70%, rgba(1,7,17,.07) 100%),
      url('images/basketball-hero-panoramic.jpg') !important;
    background-size: auto 83% !important;
    background-position: center 43% !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;
    filter: none !important;
  }

  /* Slightly smaller brand, closer to the app */
  body.homepage-page #site-header .logo {
    top: 18px !important;
    left: 16px !important;
  }

  body.homepage-page #site-header .logo a {
    width: 172px !important;
    height: 74px !important;
    min-height: 74px !important;
    background-size: 172px auto !important;
  }

  /* Smaller hamburger and a little higher */
  body.homepage-page #site-header .mobile-menu-toggle {
    top: 27px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle svg,
  body.homepage-page #site-header .mobile-menu-toggle .hamburger-lines {
    transform: scale(.88) !important;
  }

  /* Search closer and slimmer, like app */
  body.homepage-page .hp-hero-inner {
    bottom: -72px !important;
    padding: 0 16px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
    padding: 0 15px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    font-size: 14px !important;
  }

  /* Live Data starts sooner */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    margin: 90px 16px 0 !important;
  }

  /* First section spacing closer to app */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 18px !important;
  }

  /* Keep mobile content width compact and consistent */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-boxscores-section,
  body.homepage-page .hp-fantasy-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* =========================================================
   v60 — PHONE HOMEPAGE: use the APP'S 3:2 hero proportions
   DESKTOP COMPLETELY UNTOUCHED
   ========================================================= */
@media (max-width: 768px) {

  body.homepage-page {
    overflow-x: hidden !important;
  }

  /* The app hero is landscape, roughly 3:2.
     Use the 1536x1024 landscape source at its natural ratio so
     it is not stretched/softened into a tall mobile background. */
  body.homepage-page .hp-hero-wrap {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 76px !important;
    overflow: visible !important;
    background: #020b18 !important;
  }

  body.homepage-page .hp-hero {
    position: relative !important;
    width: 100% !important;
    height: 66.6667vw !important;
    min-height: 0 !important;
    max-height: 290px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-image: url('images/basketball-hero.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;
    filter: none !important;
  }

  /* Remove homepage decorative overlays that mute the image on phone. */
  body.homepage-page .hp-hero::before,
  body.homepage-page .hp-hero::after,
  body.homepage-page .hp-hero-grid,
  body.homepage-page .hp-hero-glow {
    display: none !important;
    opacity: 0 !important;
  }

  /* App-sized brand lockup. */
  body.homepage-page #site-header {
    height: 100px !important;
    min-height: 100px !important;
  }

  body.homepage-page #site-header .site-top-wrap,
  body.homepage-page #site-header .navbar {
    height: 100px !important;
    min-height: 100px !important;
  }

  body.homepage-page #site-header .logo {
    top: 18px !important;
    left: 18px !important;
  }

  body.homepage-page #site-header .logo a {
    width: 142px !important;
    height: 78px !important;
    min-height: 78px !important;
    background:
      url('/images/LeanEdgeSports-Logo-Slogan-Clear.webp')
      left top / 142px auto no-repeat !important;
  }

  body.homepage-page #site-header .logo .logo-full,
  body.homepage-page #site-header .logo .logo-mark {
    display: none !important;
  }

  /* App-sized hamburger. */
  body.homepage-page #site-header .mobile-menu-toggle {
    display: grid !important;
    place-items: center !important;
    top: 21px !important;
    right: 17px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle i,
  body.homepage-page #site-header .mobile-menu-toggle svg {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    transform: none !important;
  }

  /* Search sits just beneath hero, like the app. */
  body.homepage-page .hp-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -64px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 40 !important;
  }

  body.homepage-page .hp-hero-search {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* App-style search card. */
  body.homepage-page .hp-hero-search .global-search-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 48px 0 62px !important;
    border: 1px solid rgba(81,137,201,.48) !important;
    border-radius: 15px !important;
    background: rgba(8,23,46,.97) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Magnifier circle, like app. */
  body.homepage-page .hp-hero-search .global-search-bar > i {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    width: 38px !important;
    height: 38px !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(81,137,201,.45) !important;
    border-radius: 50% !important;
    background: rgba(22,52,88,.75) !important;
    color: #fff !important;
    font-size: 21px !important;
    z-index: 3 !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar::before {
    content: "Search players and teams" !important;
    position: absolute !important;
    left: 62px !important;
    top: 13px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    pointer-events: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar::after {
    content: "Find profiles, stats and team pages   →" !important;
    position: absolute !important;
    left: 62px !important;
    right: 14px !important;
    bottom: 11px !important;
    color: #9da9ba !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  /* Keep the real search input functional but visually quiet until typing. */
  body.homepage-page .hp-hero-search .global-search-bar input {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: #fff !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input::placeholder {
    color: transparent !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar:focus-within::before,
  body.homepage-page .hp-hero-search .global-search-bar:focus-within::after {
    display: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar:focus-within input {
    color: #fff !important;
  }

  body.homepage-page .hp-quick-links {
    display: none !important;
  }

  /* Pull Live Data directly beneath Search, matching app spacing. */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 10px 18px 0 !important;
    transform: none !important;
  }

  /* Latest News follows closely as in the app. */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 20px !important;
  }
}


/* =========================================================
   v61 — PHONE HOMEPAGE: actual app-match fixes
   DESKTOP UNTOUCHED
   ========================================================= */
@media (max-width: 768px) {

  body.homepage-page {
    overflow-x: hidden !important;
  }

  /* HERO — sharp 1536x1024 source, no muting overlay.
     Keep natural app-like landscape framing and allow Search
     to sit visibly below it. */
  body.homepage-page .hp-hero {
    position: relative !important;
    width: 100% !important;
    height: 66.6667vw !important;
    min-height: 0 !important;
    max-height: 292px !important;
    margin: 0 0 74px !important;
    padding: 0 !important;
    overflow: visible !important;

    background-image: url('images/basketball-hero.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;

    filter: none !important;
    opacity: 1 !important;
  }

  body.homepage-page .hp-hero::before,
  body.homepage-page .hp-hero::after,
  body.homepage-page .hp-hero-grid,
  body.homepage-page .hp-hero-glow {
    display: none !important;
    opacity: 0 !important;
  }

  /* HEADER OVER HERO */
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1000 !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header .site-top-wrap,
  body.homepage-page #site-header .navbar {
    position: relative !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* LOGO + SLOGAN — app position/scale */
  body.homepage-page #site-header .logo {
    position: absolute !important;
    top: 34px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1010 !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header .logo a {
    display: block !important;
    width: 148px !important;
    height: 82px !important;
    min-height: 82px !important;
    background:
      url('/images/LeanEdgeSports-Logo-Slogan-Clear.webp')
      left top / 148px auto no-repeat !important;
  }

  body.homepage-page #site-header .logo .logo-full,
  body.homepage-page #site-header .logo .logo-mark {
    display: none !important;
    visibility: hidden !important;
  }

  /* HAMBURGER — app-size, app-position, and clickable */
  body.homepage-page #site-header .mobile-menu-toggle {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 38px !important;
    right: 19px !important;
    left: auto !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 50% !important;
    z-index: 1030 !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle i,
  body.homepage-page #site-header .mobile-menu-toggle svg {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    transform: none !important;
  }

  /* Closed menu remains hidden. */
  body.homepage-page #site-header #main-nav:not(.mobile-open) {
    display: none !important;
  }

  /* OPEN HAMBURGER MENU — the previous phone CSS was still hiding
     #main-nav even after JS added .mobile-open. */
  body.homepage-page #site-header #main-nav.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 42px !important;
    width: calc(100dvw - 42px) !important;
    max-width: calc(100dvw - 42px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 1020 !important;
    pointer-events: auto !important;
  }

  /* SEARCH — visible directly beneath the hero */
  body.homepage-page .hp-hero-inner {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -62px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 60 !important;
  }

  body.homepage-page .hp-hero-search {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* APP-STYLE SEARCH CARD */
  body.homepage-page .hp-hero-search .global-search-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 46px 0 60px !important;
    border: 1px solid rgba(72,126,190,.52) !important;
    border-radius: 15px !important;
    background: rgba(8,23,46,.98) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar > i {
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    width: 38px !important;
    height: 38px !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(72,126,190,.48) !important;
    border-radius: 50% !important;
    background: rgba(24,53,88,.8) !important;
    color: #fff !important;
    font-size: 21px !important;
    z-index: 5 !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar::before {
    content: "Search players and teams" !important;
    position: absolute !important;
    left: 60px !important;
    top: 12px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    pointer-events: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar::after {
    content: "Find profiles, stats and team pages   →" !important;
    position: absolute !important;
    left: 60px !important;
    right: 13px !important;
    bottom: 10px !important;
    color: #9ca8b9 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: #fff !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input::placeholder {
    color: transparent !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar:focus-within::before,
  body.homepage-page .hp-hero-search .global-search-bar:focus-within::after {
    display: none !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar:focus-within input {
    color: #fff !important;
  }

  body.homepage-page .hp-quick-links {
    display: none !important;
  }

  /* LIVE DATA — immediately after Search, like the app */
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 6px 18px 0 !important;
    transform: none !important;
  }

  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 20px !important;
  }
}


/* =========================================================
   PHONE REAL FIX — stronger, direct rules
   ========================================================= */
@media (max-width: 768px) {

  /* MOVE PLAYER DOWN:
     lower percentage = background image moves DOWN when image is cropped. */
  body.homepage-page .hp-hero {
    background-size: 110% auto !important;
    background-position: center 18% !important;
  }

  /* LIVE DATA — materially smaller, app-like */
  body.homepage-page .hp-tonight-panel.hp-live-data-panel,
  body.homepage-page .hp-live-data-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 9px 11px 11px !important;
    border-radius: 15px !important;
  }

  body.homepage-page .hp-live-data-heading {
    margin: 0 0 7px !important;
    min-height: 25px !important;
  }

  body.homepage-page .hp-live-data-title {
    font-size: 13px !important;
    gap: 7px !important;
  }

  body.homepage-page .hp-live-data-dot {
    width: 8px !important;
    height: 8px !important;
  }

  body.homepage-page .hp-live-data-view {
    font-size: 11px !important;
  }

  body.homepage-page .hp-live-data-view span {
    font-size: 17px !important;
  }

  body.homepage-page .hp-live-data-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 8px 10px !important;
    border-radius: 12px !important;
  }

  body.homepage-page .hp-live-data-message {
    margin: 0 0 9px !important;
  }

  body.homepage-page .hp-live-data-message strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin-bottom: 3px !important;
  }

  body.homepage-page .hp-live-data-message span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.homepage-page .hp-live-data-stats {
    gap: 2px !important;
  }

  body.homepage-page .hp-live-data-stats span {
    font-size: 8px !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  body.homepage-page .hp-live-data-stats strong {
    font-size: 17px !important;
    line-height: 1 !important;
  }
}


/* =========================================================
   PHONE TIDY FIX
   1) player lower
   2) Latest NBA News higher
   3) dark background continues down page
   ========================================================= */
@media (max-width: 768px) {

  /* Move player/arena composition down further so head clears ticker. */
  body.homepage-page .hp-hero {
    background-size: 114% auto !important;
    background-position: center 8% !important;
  }

  /* Pull news section upward and remove excess dead gap. */
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section {
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  /* Keep the page background consistently dark all the way down. */
  body.homepage-page,
  body.homepage-page main,
  body.homepage-page .homepage-main,
  body.homepage-page .hp-page,
  body.homepage-page .hp-content,
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section,
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-boxscores-section,
  body.homepage-page .hp-fantasy-section {
    background: #020b18 !important;
    background-color: #020b18 !important;
  }
}


/* =========================================================
   PHONE — ONLY TWO REMAINING FIXES
   1) player's head clears ticker
   2) Latest NBA News moves upward
   ========================================================= */
@media (max-width: 768px) {

  /* Make the player a touch smaller AND physically start the
     background lower. This gives clear space above his head. */
  body.homepage-page .hp-hero {
    background-size: 102% auto !important;
    background-position: center 14px !important;
  }

  /* Pull the complete Latest NBA News/feed block upward.
     Position + negative margin ensures both the visual section
     and the space it occupies actually move. */
  body.homepage-page .hp-feed-section {
    position: relative !important;
    top: -46px !important;
    margin-top: 0 !important;
    margin-bottom: -46px !important;
    padding-top: 0 !important;
  }
}


/* =========================================================
   MENU / CARD FINISHING FIX — HOMEPAGE
   ========================================================= */
@media (max-width: 768px) {

  /* Keep Explore drawer above Latest News / What's Happening / all cards */
  body.homepage-page #site-header {
    z-index: 2147483000 !important;
  }

  body.homepage-page #site-header #main-nav.mobile-open {
    z-index: 2147483600 !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle {
    z-index: 2147483700 !important;
  }

  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-grid,
  body.homepage-page .hp-news-feature,
  body.homepage-page .hp-update-card,
  body.homepage-page .hp-callouts,
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-boxscores-section,
  body.homepage-page .hp-fantasy-section {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Match Fantasy / Box Scores / What's Happening / Latest News
     to the same deep navy family as Live Data and League Leaders. */
  body.homepage-page .hp-news-feature,
  body.homepage-page .hp-update-card,
  body.homepage-page .hp-callout-card,
  body.homepage-page .hp-callout-card.hp-callout-muted,
  body.homepage-page .hp-boxscores-section .hp-callout-card,
  body.homepage-page .hp-fantasy-section .hp-callout-card {
    background: #07162f !important;
    background-image: none !important;
    border-color: rgba(103,155,218,.30) !important;
  }

  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-grid,
  body.homepage-page .hp-callouts,
  body.homepage-page .hp-boxscores-section,
  body.homepage-page .hp-fantasy-section {
    background-color: #020b18 !important;
  }

  /* App-like hamburger button: translucent, slightly lower, circular */
  body.homepage-page #site-header .mobile-menu-toggle {
    top: 44px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: rgba(7,22,47,.74) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
  }
}


/* =========================================================
   DESKTOP HOMEPAGE SEARCH — ACTUAL ELEMENT
   Restore approved compact width.
   MOBILE UNTOUCHED.
   ========================================================= */
@media (min-width: 1025px) {
  body.homepage-page .hp-hero-search {
    width: 475px !important;
    max-width: 475px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar {
    width: 475px !important;
    max-width: 475px !important;
  }

  body.homepage-page .hp-hero-search .global-search-bar input {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   DESKTOP HOMEPAGE SEARCH RESULTS — KEEP FULL LIST VISIBLE
   Search bar size/position is deliberately untouched.
   ========================================================= */
@media (min-width: 1025px) {

  /* Search/results must sit above the blue section below the hero. */
  body.homepage-page .hp-hero-search {
    position: relative !important;
    z-index: 5000 !important;
    overflow: visible !important;
  }

  body.homepage-page .hp-hero,
  body.homepage-page .hp-hero-wrap,
  body.homepage-page .hp-hero-inner {
    overflow: visible !important;
  }

  /* Lift the actual autocomplete/results panel above subsequent sections. */
  body.homepage-page .search-results,
  body.homepage-page .global-search-results,
  body.homepage-page .search-dropdown,
  body.homepage-page .autocomplete-results,
  body.homepage-page .global-search-dropdown,
  body.homepage-page [class*="search-results"],
  body.homepage-page [class*="search-dropdown"] {
    position: absolute !important;
    z-index: 6000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 420px !important;
  }

  /* The content below must never paint over an open search dropdown. */
  body.homepage-page .hp-live-data-panel,
  body.homepage-page .hp-feed-section,
  body.homepage-page .hp-news-section,
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-callouts {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* =========================================================
   NEWS FEATURED THUMBNAILS — AUG 12
   Use the article's own featured image beside Latest NBA News.
   Text-only articles retain the existing layout unchanged.
   ========================================================= */
.hp-news-row.has-image {
  grid-template-columns: 58px 60px minmax(0,1fr) auto 22px !important;
}

.hp-news-thumb {
  width: 58px;
  height: 58px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(177,204,241,.24);
  background: #07162f;
}

.hp-news-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 768px) {
  body.homepage-page .hp-news-list .hp-news-row.has-image,
  body.homepage-page .hp-news-list .hp-news-row.has-image:first-child {
    grid-template-columns: 62px 56px minmax(0,1fr) 18px !important;
    grid-template-areas:
      'thumb category time arrow'
      'thumb headline headline arrow' !important;
  }

  body.homepage-page .hp-news-row.has-image .hp-news-thumb {
    grid-area: thumb;
    width: 58px;
    height: 58px;
    align-self: center;
  }
}


/* =========================================================
   HOMEPAGE NEWS IMAGE ALIGNMENT — AUG 12
   If a story has a featured image, the image REPLACES the
   category label rather than adding an extra column.
   ========================================================= */

/* Desktop: use the exact same column structure as text-only stories.
   Image occupies column 1; headline stays aligned with stories below. */
.hp-news-row.has-image {
  grid-template-columns: 60px minmax(0,1fr) auto 22px !important;
}

.hp-news-row.has-image .hp-news-cat {
  display: none !important;
}

.hp-news-row.has-image .hp-news-thumb {
  grid-column: 1 !important;
  width: 58px !important;
  height: 58px !important;
  align-self: center !important;
}

.hp-news-row.has-image > strong {
  grid-column: 2 !important;
}

.hp-news-row.has-image > time {
  grid-column: 3 !important;
}

.hp-news-row.has-image > b {
  grid-column: 4 !important;
}

/* Phone: no NEWS label when a photo exists. Keep a compact thumbnail
   beside the article while preserving the normal text-only layout for
   stories that do not have a featured image. */
@media (max-width: 768px) {
  body.homepage-page .hp-news-list .hp-news-row.has-image,
  body.homepage-page .hp-news-list .hp-news-row.has-image:first-child {
    grid-template-columns: 62px minmax(0,1fr) auto 18px !important;
    grid-template-areas:
      'thumb headline time arrow'
      'thumb headline headline arrow' !important;
  }

  body.homepage-page .hp-news-row.has-image .hp-news-cat {
    display: none !important;
  }

  body.homepage-page .hp-news-row.has-image .hp-news-thumb {
    grid-area: thumb !important;
    width: 58px !important;
    height: 58px !important;
    align-self: center !important;
  }

  body.homepage-page .hp-news-row.has-image > strong {
    grid-area: headline !important;
    align-self: center !important;
  }

  body.homepage-page .hp-news-row.has-image > time {
    grid-area: time !important;
  }

  body.homepage-page .hp-news-row.has-image > b {
    grid-area: arrow !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — OUR TAKE REFINED FULL VERSION
   Restores the original full editorial card, but tidies the mobile
   spacing/typography and prevents Latest News from riding over it.
   Desktop is intentionally untouched.
   ========================================================= */
@media (max-width: 768px) {
  /* Pull the editorial section into the dead space left below Live Data. */
  body.homepage-page #hp-why-lean-edge {
    position: relative !important;
    top: -145px !important;
    margin-bottom: -145px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Keep the original full-text treatment, but make it feel like the
     finished Live Data / League Leaders card family. */
  body.homepage-page #hp-why-lean-edge .hp-why-copy {
    display: block !important;
    padding: 22px 20px 20px !important;
    border: 1px solid rgba(103,155,218,.34) !important;
    border-radius: 16px !important;
    background: #07162f !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-kicker {
    display: block !important;
    margin: 0 0 10px !important;
    color: #ff6a70 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 2.2px !important;
  }

  body.homepage-page #hp-why-lean-edge h2 {
    margin: 0 0 15px !important;
    font-size: 29px !important;
    line-height: 1.08 !important;
  }

  body.homepage-page #hp-why-lean-edge p {
    display: block !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    color: #9aa6b8 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  body.homepage-page #hp-why-lean-edge p:last-of-type {
    margin-bottom: 15px !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 0 !important;
    color: #8dbdff !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  /* Earlier phone rules pulled Latest News upward by 46px. That was useful
     before this editorial card existed here, but now it causes the sections
     to collide. Give the card a clean finish instead. */
  body.homepage-page .hp-feed-section {
    top: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — COLLAPSIBLE "OUR TAKE" CARD
   Phone only. Desktop retains the original full editorial section.
   ========================================================= */
.hp-why-mobile-card { display: none; }

@media (max-width: 768px) {
  /* The previous negative offset caused this card to overlap Live Data.
     Keep normal document flow on phone and use a separate compact summary. */
  body.homepage-page #hp-why-lean-edge {
    display: none !important;
  }

  body.homepage-page .hp-why-mobile-card {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 18px 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  body.homepage-page .hp-why-mobile-details {
    margin: 0 !important;
    border: 1px solid rgba(103,155,218,.34) !important;
    border-radius: 16px !important;
    background: #07162f !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.homepage-page .hp-why-mobile-details summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 17px 18px !important;
    cursor: pointer !important;
    list-style: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.homepage-page .hp-why-mobile-details summary::-webkit-details-marker {
    display: none !important;
  }

  body.homepage-page .hp-why-mobile-summary-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.homepage-page .hp-why-mobile-details .hp-kicker {
    margin: 0 !important;
    color: #ff6a70 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
  }

  body.homepage-page .hp-why-mobile-summary-copy strong {
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 22px !important;
    line-height: 1.06 !important;
    font-weight: 800 !important;
  }

  body.homepage-page .hp-why-mobile-chevron {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    border-right: 2px solid #dce7f7 !important;
    border-bottom: 2px solid #dce7f7 !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform .18s ease !important;
  }

  body.homepage-page .hp-why-mobile-details[open] .hp-why-mobile-chevron {
    transform: rotate(225deg) translate(-2px,-2px) !important;
  }

  body.homepage-page .hp-why-mobile-content {
    padding: 0 18px 18px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  body.homepage-page .hp-why-mobile-content p {
    margin: 14px 0 0 !important;
    color: #9aa6b8 !important;
    font-size: 14px !important;
    line-height: 1.52 !important;
  }

  body.homepage-page .hp-why-mobile-content .hp-why-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 15px !important;
    color: #8dbdff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body.homepage-page .hp-feed-section {
    top: auto !important;
    margin-top: 16px !important;
    padding-top: 0 !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — SECTION RHYTHM + RELIABLE OUR TAKE TOGGLE
   Mobile only. Desktop remains unchanged.
   ========================================================= */
.hp-mobile-section-divider { display: none; }

@media (max-width: 768px) {
  /* Our Take: explicit button-driven expander. */
  body.homepage-page .hp-why-mobile-details .hp-why-mobile-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 17px 18px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.homepage-page .hp-why-mobile-details .hp-why-mobile-summary:focus-visible {
    outline: 2px solid rgba(141,189,255,.8) !important;
    outline-offset: -3px !important;
  }

  body.homepage-page .hp-why-mobile-content[hidden] {
    display: none !important;
  }

  body.homepage-page .hp-why-mobile-details.is-open .hp-why-mobile-chevron,
  body.homepage-page .hp-why-mobile-summary[aria-expanded="true"] .hp-why-mobile-chevron {
    transform: rotate(225deg) translate(-2px,-2px) !important;
  }

  /* Thin divider + understated basketball icon, matching the approved mock-up. */
  body.homepage-page .hp-mobile-section-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 14px 18px !important;
    color: rgba(169,188,214,.72) !important;
    pointer-events: none !important;
  }

  body.homepage-page .hp-mobile-section-divider::before,
  body.homepage-page .hp-mobile-section-divider::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: rgba(119,148,184,.45) !important;
  }

  body.homepage-page .hp-mobile-section-divider i {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  /* Divider between Latest News and What's Happening lives inside the grid. */
  body.homepage-page .hp-news-grid > .hp-mobile-section-divider-inside {
    width: calc(100% - 36px) !important;
    margin: 14px 18px !important;
    grid-column: 1 / -1 !important;
  }

  /* Don't double-up spacing where a divider now provides the breathing room. */
  body.homepage-page .hp-feed-section {
    margin-top: 0 !important;
  }

  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-callouts {
    margin-top: 0 !important;
  }

  /* When Explore is open, its header/menu must be globally above every homepage card. */
  body.homepage-page.les-menu-open .hp-hero-wrap {
    z-index: auto !important;
  }

  body.homepage-page.les-menu-open #site-header,
  body.homepage-page.les-menu-open #site-header #main-nav.mobile-open,
  body.homepage-page.les-menu-open #site-header .mobile-menu-toggle {
    z-index: 2147483640 !important;
  }

  body.homepage-page.les-menu-open .hp-why-mobile-card,
  body.homepage-page.les-menu-open .hp-feed-section,
  body.homepage-page.les-menu-open .hp-leaders-section,
  body.homepage-page.les-menu-open .hp-callouts,
  body.homepage-page.les-menu-open .hp-mobile-section-divider {
    z-index: 0 !important;
  }

  /* Hamburger keeps the same translucent rounded-square shell when open.
     Only the glyph changes from menu to X. */
  body.homepage-page #site-header .mobile-menu-toggle,
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="false"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    background: rgba(7,22,47,.74) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — FINAL RHYTHM TUNE
   Requested Aug 13. Mobile only; desktop unchanged.
   ========================================================= */
@media (max-width: 768px) {
  /* Keep the menu control the same rounded-square in both states. */
  body.homepage-page #site-header .mobile-menu-toggle,
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="false"] {
    border-radius: 14px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: rgba(7,22,47,.74) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
  }

  /* Group Our Take with Latest News by putting the divider BEFORE Our Take. */
  body.homepage-page .hp-live-data-panel + .hp-mobile-section-divider,
  body.homepage-page .hp-live-data-section + .hp-mobile-section-divider {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  /* The box-score card should sit close beneath its divider, not float away. */
  body.homepage-page .hp-leaders-section + .hp-mobile-section-divider {
    margin-bottom: 6px !important;
  }
  body.homepage-page .hp-leaders-section + .hp-mobile-section-divider + .hp-callouts {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — STICKY TICKER / SQUARE MENU / FINAL DIVIDER RHYTHM
   Aug 13. Mobile only. Desktop intentionally untouched.
   ========================================================= */
@media (max-width: 768px) {
  /* Live Scores must always be the top page layer while scrolling. */
  body.homepage-page #site-header {
    z-index: 2147483645 !important;
  }

  body.homepage-page #site-header .live-scores-strip,
  body.homepage-page .live-scores-strip {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* The hamburger shell stays a rounded SQUARE in every state.
     Only the icon changes from menu to X. */
  body.homepage-page #site-header .mobile-menu-toggle,
  body.homepage-page #site-header .mobile-menu-toggle.active,
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header .mobile-menu-toggle[aria-expanded="false"],
  body.homepage-page.les-menu-open #site-header .mobile-menu-toggle,
  body.homepage-page.mobile-menu-open #site-header .mobile-menu-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 11px !important;
    background: rgba(7,22,47,.78) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle i,
  body.homepage-page #site-header .mobile-menu-toggle svg {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Put the divider after Live Data closer to Live Data itself, roughly
     halfway through the otherwise empty navy breathing space. */
  body.homepage-page .hp-divider-after-live-data {
    transform: translateY(-42px) !important;
    margin-bottom: -28px !important;
  }

  /* Use the same line-to-card spacing below League Leaders as everywhere else. */
  body.homepage-page .hp-leaders-section + .hp-mobile-section-divider {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  body.homepage-page .hp-leaders-section + .hp-mobile-section-divider + .hp-callouts {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Box Scores and Fantasy are separate sections too: put the same divider
     between them and preserve the same 14px breathing room on both sides. */
  body.homepage-page .hp-callouts {
    gap: 14px !important;
    padding-top: 0 !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-divider {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — DEFINITIVE TICKER + MENU CONTROL FIX
   Aug 13. These rules deliberately target only the mobile homepage.
   ========================================================= */
@media (max-width: 768px) {
  /* nav-loader moves the shared ticker to be a direct child of BODY on the
     phone homepage. This removes it from the header's stacking context so
     no scrolling homepage section can ever paint over it. */
  body.homepage-page > .live-scores-strip#live-scores-strip {
    display: flex !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
  }

  /* Make the hamburger shell physically square in both states. clip-path
     prevents any older 50% border-radius rule from showing through. */
  body.homepage-page #site-header button.mobile-menu-toggle,
  body.homepage-page #site-header button.mobile-menu-toggle.active,
  body.homepage-page #site-header button.mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header button.mobile-menu-toggle[aria-expanded="false"],
  body.homepage-page.les-menu-open #site-header button.mobile-menu-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background: rgba(7,22,47,.78) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle::before,
  body.homepage-page #site-header .mobile-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle .les-menu-glyph {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 29px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header .mobile-menu-toggle .les-menu-glyph-menu {
    font-size: 27px !important;
    line-height: .8 !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — SINGLE FINAL HAMBURGER RULE
   Compact rounded-square in BOTH states. Mobile homepage only.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle.active,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"],
  body.homepage-page.les-menu-open #site-header #mobile-menu-toggle,
  body.homepage-page.mobile-menu-open #site-header #mobile-menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background: rgba(7,22,47,.78) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle::before,
  body.homepage-page #site-header #mobile-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-visual-shell {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-glyph {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-glyph-menu {
    font-size: 25px !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-glyph-close {
    font-size: 27px !important;
  }
}

/* =========================================================
   PHONE HOME — FINAL HAMBURGER ARCHITECTURE
   The actual button is an invisible 44px hit target. The visible
   shape is .les-menu-square, which never changes between states.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle::before,
  body.homepage-page #site-header #mobile-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border-radius: 11px !important;
    background: rgba(7,22,47,.78) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol {
    display: block !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    font-size: 27px !important;
    transform: translateY(-1px) !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — STABLE EXPLORE DRAWER FINAL
   Keep original row sizing; only narrow the drawer slightly.
   Desktop untouched.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page .les-mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.08) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    z-index: 2147483500 !important;
  }
  body.homepage-page .les-mobile-menu-backdrop.is-open {
    display: block !important;
  }

  /* Original drawer internals stay untouched. Only make the panel
     a little narrower than the previous full-width version. */
  body.homepage-page #site-header #main-nav.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 56px !important;
    width: calc(100dvw - 56px) !important;
    max-width: calc(100dvw - 56px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 2147483600 !important;
  }

  /* Return the visible hamburger to a compact size. The square shell
     is identical whether the drawer is open or closed. */
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 10px !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol {
    font-size: 24px !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    font-size: 25px !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — TRUE SQUARE MENU CONTROL (FINAL OVERRIDE)
   Fixed physical dimensions: no inherited min-height/padding can stretch it.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    position: relative !important;
    display: block !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-inline-size: 40px !important;
    min-block-size: 40px !important;
    max-inline-size: 40px !important;
    max-block-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background: rgba(7,22,47,.78) !important;
    border: 1px solid rgba(191,210,236,.55) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — MATCH SHARED PAGE HAMBURGER GEOMETRY
   Final mobile-only override. Keep same position/size as other pages.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header .navbar {
    position: relative !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    position: absolute !important;
    top: 28px !important;
    right: 20px !important;
    left: auto !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-inline-size: 48px !important;
    min-block-size: 48px !important;
    max-inline-size: 48px !important;
    max-block-size: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex: 0 0 48px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    position: absolute !important;
    inset: 0 !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE — final header alignment nudge
   Mobile only. Keep desktop untouched.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: 52px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    inline-size: 48px !important;
    block-size: 48px !important;
    border-radius: 10px !important;
  }
}


/* =========================================================
   PHONE HOMEPAGE — MATCH OTHER PAGES HAMBURGER VISUAL ONLY
   Position intentionally unchanged. Mobile only.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    background: #061a3b !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  }
  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol {
    color: var(--white) !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE TEST — HERO FRAMING + APP RED
   Mobile only. Desktop rules intentionally untouched.
   ========================================================= */
@media (max-width: 768px) {
  /* Restore more breathing room around the original hero image.
     Same image, no crop asset changes: slightly zoomed out and lowered. */
  body.homepage-page .hp-hero {
    background-size: 96% auto !important;
    background-position: center 26px !important;
  }

  /* Stronger app-style Lean Edge red for existing red accents only. */
  body.homepage-page {
    --red: #f3264a;
  }

  body.homepage-page .hp-kicker,
  body.homepage-page .hp-lt-head,
  body.homepage-page .hp-news-cat,
  body.homepage-page .hp-news-row b,
  body.homepage-page .hp-feed-status > span,
  body.homepage-page .hp-update-card > span,
  body.homepage-page .hp-update-card > b,
  body.homepage-page .hp-ss-status.hp-live,
  body.homepage-page #hp-why-lean-edge .hp-kicker,
  body.homepage-page .hp-why-mobile-details .hp-kicker {
    color: #f3264a !important;
  }

  body.homepage-page .hp-hub-tag {
    background: #f3264a !important;
  }

  body.homepage-page .hp-section-title-row > a {
    border-bottom-color: #f3264a !important;
  }

  body.homepage-page .hp-live-dot {
    background: #f3264a !important;
    box-shadow: 0 0 0 4px rgba(243,38,74,.20) !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE TEST — CLOSER TO APP FINISH
   Aug 14. MOBILE ONLY. No shared HTML / desktop rules touched.
   ========================================================= */
@media (max-width: 768px) {
  /* Use the stronger app red consistently on phone. */
  body.homepage-page {
    --les-app-red: #f3264a;
  }

  /* League Leaders: slightly tighter, cleaner app-like card. */
  body.homepage-page .hp-leaders-section {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 18px 16px 14px !important;
    border-radius: 20px !important;
    background: #07162f !important;
    border-color: rgba(103,155,218,.42) !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row {
    margin-bottom: 12px !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row h2 {
    font-size: 23px !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row > a {
    font-size: 12px !important;
    border-bottom: 2px solid var(--les-app-red) !important;
    padding-bottom: 5px !important;
  }

  body.homepage-page .hp-lt-head {
    color: var(--les-app-red) !important;
    font-size: 14px !important;
    letter-spacing: .08em !important;
    margin-bottom: 8px !important;
  }

  body.homepage-page .hp-lt-row {
    min-height: 54px !important;
    padding: 7px 0 !important;
  }

  /* Full Box Scores: app-style feature card rather than a large plain panel. */
  body.homepage-page .hp-callouts {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    gap: 14px !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type {
    min-height: 220px !important;
    padding: 24px 20px !important;
    border: 2px solid var(--les-app-red) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 82% 82%, rgba(95,137,185,.20), transparent 28%),
      linear-gradient(145deg, #07162f 15%, #061327 100%) !important;
    justify-content: space-between !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type .hp-kicker {
    color: var(--les-app-red) !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type h3 {
    font-size: 31px !important;
    line-height: 1 !important;
    margin: 10px 0 10px !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type p {
    font-size: 16px !important;
    line-height: 1.35 !important;
    max-width: 90% !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type .hp-callout-go {
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    background: #d91337 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card:first-of-type .hp-callout-go b {
    font-size: 18px !important;
  }

  /* Fantasy Tools: compact app-like "coming soon" card. */
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted {
    position: relative !important;
    min-height: 138px !important;
    padding: 20px 44px 20px 86px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(77,135,204,.62) !important;
    background: #071a3a !important;
    justify-content: center !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::before {
    content: "♜" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(90,151,222,.55) !important;
    color: #6aaaff !important;
    font-size: 22px !important;
    font-family: system-ui, sans-serif !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::after {
    content: "›" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-52%) !important;
    color: rgba(220,231,246,.72) !important;
    font-size: 36px !important;
    font-weight: 300 !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-kicker {
    color: var(--les-app-red) !important;
    font-size: 11px !important;
    letter-spacing: .16em !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted h3 {
    font-size: 25px !important;
    margin: 4px 0 4px !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-callout-go {
    display: none !important;
  }

  /* Keep section dividers visually light so the cards do the talking. */
  body.homepage-page .hp-mobile-section-divider {
    opacity: .82 !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE TEST V3 — APP SCALE / TYPE / COLOUR MATCH
   MOBILE ONLY. Desktop deliberately untouched.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page {
    --les-app-red: #ff2348;
  }

  /* Match the app's tighter typographic rhythm in these lower-home cards. */
  body.homepage-page .hp-leaders-section,
  body.homepage-page .hp-callouts {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body.homepage-page .hp-leaders-section {
    width: calc(100% - 34px) !important;
    margin-left: 17px !important;
    margin-right: 17px !important;
    padding: 16px 15px 12px !important;
    border-radius: 17px !important;
    background: #07152b !important;
    border: 1px solid rgba(74,111,157,.52) !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row {
    margin: 0 0 10px !important;
    align-items: end !important;
  }

  body.homepage-page .hp-leaders-section .hp-kicker {
    color: var(--les-app-red) !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    line-height: 1.1 !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row h2 {
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -.45px !important;
    margin-top: 6px !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row > a {
    font-size: 10px !important;
    line-height: 1 !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid var(--les-app-red) !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row > a span {
    margin-left: 8px !important;
    font-size: 14px !important;
  }

  body.homepage-page .hp-leaders-table {
    gap: 10px !important;
    padding-bottom: 2px !important;
  }

  body.homepage-page .hp-lt-col {
    flex-basis: calc(100% - 48px) !important;
    width: calc(100% - 48px) !important;
    min-width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    padding-right: 9px !important;
  }

  body.homepage-page .hp-lt-head {
    color: var(--les-app-red) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    margin-bottom: 5px !important;
  }

  body.homepage-page .hp-lt-row {
    min-height: 43px !important;
    gap: 7px !important;
    padding: 5px 0 !important;
  }

  body.homepage-page .hp-lt-rank {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    font-size: 9px !important;
  }

  body.homepage-page .hp-leaders-table .hp-avatar,
  body.homepage-page .hp-avatar.hp-avatar-photo {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex: 0 0 26px !important;
  }

  body.homepage-page .hp-lt-name {
    gap: 0 !important;
  }

  body.homepage-page .hp-lt-name strong {
    font-size: 11.5px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
  }

  body.homepage-page .hp-lt-name small {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  body.homepage-page .hp-lt-value {
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* Lower callout group: compact like the app, not desktop cards squeezed onto phone. */
  body.homepage-page .hp-callouts {
    width: calc(100% - 34px) !important;
    margin-left: 17px !important;
    margin-right: 17px !important;
    gap: 10px !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) {
    min-height: 154px !important;
    padding: 18px 17px 16px !important;
    border: 1.5px solid var(--les-app-red) !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 82% 86%, rgba(120,160,205,.16), transparent 31%),
      linear-gradient(145deg, #07142a, #061124) !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) .hp-kicker {
    color: var(--les-app-red) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) h3 {
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: .98 !important;
    letter-spacing: -.25px !important;
    margin: 7px 0 7px !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) p {
    font-size: 12px !important;
    line-height: 1.32 !important;
    max-width: 82% !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) .hp-callout-go {
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    margin-top: 12px !important;
    padding: 8px 13px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #dd1237 !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card:not(.hp-callout-muted) .hp-callout-go b {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Fantasy: short horizontal app card. */
  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted {
    min-height: 96px !important;
    padding: 14px 38px 14px 70px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(69,117,178,.7) !important;
    background: #081a37 !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted::before {
    left: 14px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted::after {
    right: 13px !important;
    font-size: 26px !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted .hp-kicker {
    color: var(--les-app-red) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .17em !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted h3 {
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
    font-size: 19px !important;
    line-height: 1 !important;
    margin: 4px 0 4px !important;
  }

  body.homepage-page .hp-callouts .hp-callout-card.hp-callout-muted p {
    font-size: 10px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
  }

  /* App-style red throughout the visible accent treatment. */
  body.homepage-page .hp-kicker,
  body.homepage-page .hp-lt-head,
  body.homepage-page .hp-news-cat,
  body.homepage-page .hp-feed-status > span,
  body.homepage-page .hp-update-card > span,
  body.homepage-page .hp-update-card > b {
    color: var(--les-app-red) !important;
  }

  body.homepage-page .hp-section-title-row > a {
    border-bottom-color: var(--les-app-red) !important;
  }
}

/* =========================================================
   PHONE HOMEPAGE TEST V5 — EXACT APP CTA + TROPHY
   MOBILE ONLY. Desktop untouched.
   ========================================================= */
@media only screen and (max-width: 768px) {
  /* Exact first callout = Full box scores */
  body.homepage-page section.hp-callouts > a.hp-callout-card:first-of-type .hp-callout-go {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 98px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 11px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #e4143b !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 34px !important;
    text-transform: none !important;
  }
  body.homepage-page section.hp-callouts > a.hp-callout-card:first-of-type .hp-callout-go::before {
    content: "BROWSE   →" !important;
    display: block !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    line-height: 34px !important;
    font-weight: 900 !important;
    letter-spacing: .065em !important;
    white-space: pre !important;
  }
  body.homepage-page section.hp-callouts > a.hp-callout-card:first-of-type .hp-callout-go b {
    display: none !important;
  }

  /* Exact second callout = Fantasy tools */
  body.homepage-page section.hp-callouts > a.hp-callout-card.hp-callout-muted {
    padding-left: 69px !important;
  }
  body.homepage-page section.hp-callouts > a.hp-callout-card.hp-callout-muted::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    border: 1px solid rgba(77,139,215,.72) !important;
    background-color: #0a2245 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235da4f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0V4Z'/%3E%3Cpath d='M8 6H5v2a4 4 0 0 0 4 4M16 6h3v2a4 4 0 0 1-4 4M12 13v5M9 20h6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
    font-size: 0 !important;
  }
}

/* =========================================================
   v62 — PHONE HOMEPAGE ONLY: restore full-bleed hero + logo edge
   DESKTOP / TABLET >768px UNTOUCHED
   ========================================================= */
@media only screen and (max-width: 768px) {
  /* Force the basketball hero back to true edge-to-edge phone width,
     regardless of any parent content gutter. Image crop/scale unchanged. */
  body.homepage-page .hp-hero-wrap {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.homepage-page .hp-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Tiny nudge toward the top-left edge only. */
  body.homepage-page #site-header .logo {
    left: 14px !important;
  }
}

/* =========================================================
   v63 — PHONE HOMEPAGE ONLY: ACTUAL HERO BACKGROUND FIX
   Desktop >768px untouched.
   ========================================================= */
@media only screen and (max-width: 768px) {
  /* The dark side strips were caused by an older background-size:96%
     rule, not by the hero element width. Restore the 3:2 phone image
     to full bleed at its natural hero ratio. */
  body.homepage-page .hp-hero {
    width: 100vw !important;
    max-width: none !important;
    background-image: url('images/basketball-hero.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Small but visible move toward the left edge. */
  body.homepage-page #site-header .logo {
    left: 9px !important;
  }
}


/* =========================================================
   v65 — PHONE HOMEPAGE HERO: FULL WIDTH WITHOUT HEAD CROP
   Mobile only. Desktop untouched.
   ========================================================= */
@media only screen and (max-width: 768px) {
  body.homepage-page .hp-hero {
    width: 100vw !important;
    max-width: none !important;
    height: 330px !important;
    min-height: 330px !important;
    background-image:
      linear-gradient(180deg, rgba(1,7,17,.02) 0%, rgba(1,7,17,.03) 70%, rgba(1,7,17,.10) 100%),
      url('images/basketball-hero.jpg') !important;
    background-size: 126% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #020b18 !important;
  }
}


/* v66 — tiny phone-only hero headroom adjustment */
@media only screen and (max-width: 768px) {
  body.homepage-page .hp-hero {
    background-size: 122% auto !important;
    background-position: center top !important;
  }
}


/* v67 — phone homepage hero: move image DOWN, keep same scale */
@media only screen and (max-width: 768px) {
  body.homepage-page .hp-hero {
    background-position: center 14px !important;
  }
}


/* AUG 14 SAFE FIX — What's Happening article thumbnails.
   Thumbnail only. No full-card/background image. Desktop + phone. */
.hp-update-card.has-thumb {
  grid-template-columns: 58px 86px minmax(0,1fr) 18px !important;
}
.hp-update-thumb {
  width: 58px !important;
  height: 58px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid rgba(177,204,241,.24) !important;
  background: #07162f !important;
  display: block !important;
}
.hp-update-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
}
@media (max-width:768px) {
  body.homepage-page .hp-update-card.has-thumb {
    grid-template-columns: 58px 72px minmax(0,1fr) 18px !important;
  }
}


/* =========================================================
   DESKTOP HOMEPAGE MIDDLE-SECTION TIDY
   HERO UNTOUCHED. PHONE UNTOUCHED.
   ========================================================= */
@media only screen and (min-width: 769px) {

  /* "Our Take" remains the same card family, but starts compact. */
  body.homepage-page #hp-why-lean-edge {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-copy {
    position: relative !important;
    padding: 18px 66px 18px 22px !important;
    transition: padding .18s ease !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-copy.is-desktop-collapsed {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-copy.is-desktop-collapsed p,
  body.homepage-page #hp-why-lean-edge .hp-why-copy.is-desktop-collapsed .hp-why-link {
    display: none !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-copy.is-desktop-collapsed h2 {
    margin-bottom: 0 !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-desktop-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #dce7f5 !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-desktop-toggle span {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-right: 3px solid currentColor !important;
    border-bottom: 3px solid currentColor !important;
    transform: rotate(45deg) translate(-2px,-2px) !important;
    transition: transform .18s ease !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-desktop-toggle[aria-expanded="true"] span {
    transform: rotate(225deg) translate(-2px,-2px) !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-desktop-toggle:hover {
    background: rgba(255,255,255,.045) !important;
  }

  /* Close the oversized gap between Our Take and the two feed panels. */
  body.homepage-page .hp-feed-section {
    padding-top: 5px !important;
  }

  body.homepage-page .hp-feed-section .hp-news-grid {
    margin-top: 6px !important;
  }

  /* Slightly denser desktop feed panels. Widths and layout are unchanged. */
  body.homepage-page .hp-news-feature,
  body.homepage-page .hp-whats-panel {
    min-height: 220px !important;
    padding: 17px 20px !important;
  }

  body.homepage-page .hp-news-card-heading {
    padding-bottom: 10px !important;
  }

  body.homepage-page .hp-news-row {
    min-height: 66px !important;
  }

  body.homepage-page .hp-update-card {
    min-height: 62px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* =========================================================
   DESKTOP HOMEPAGE — TRUE STANDARD TYPOGRAPHY
   HERO UNTOUCHED. PHONE UNTOUCHED.
   Only the homepage content beneath the hero is reduced.
   ========================================================= */
@media only screen and (min-width: 769px) {

  /* Our Take */
  body.homepage-page #hp-why-lean-edge .hp-kicker {
    font-size: 9.5px !important;
    letter-spacing: 1.7px !important;
  }

  body.homepage-page #hp-why-lean-edge h2 {
    font-size: 24px !important;
    line-height: 1.08 !important;
    letter-spacing: -.6px !important;
  }

  body.homepage-page #hp-why-lean-edge p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body.homepage-page #hp-why-lean-edge .hp-why-link {
    font-size: 12px !important;
  }

  /* Latest NBA News / What's Happening */
  body.homepage-page .hp-news-card-heading h3 {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }

  body.homepage-page .hp-news-card-heading a {
    font-size: 10px !important;
  }

  body.homepage-page .hp-news-row strong {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  body.homepage-page .hp-news-row .hp-news-cat {
    font-size: 9.5px !important;
  }

  body.homepage-page .hp-news-row time {
    font-size: 10px !important;
  }

  body.homepage-page .hp-update-card > span {
    font-size: 9.5px !important;
    letter-spacing: .65px !important;
  }

  body.homepage-page .hp-update-card > strong {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  body.homepage-page .hp-update-card > b,
  body.homepage-page .hp-news-row b {
    font-size: 14px !important;
  }

  /* League Leaders */
  body.homepage-page .hp-leaders-section .hp-kicker {
    font-size: 9.5px !important;
    letter-spacing: 1.7px !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row h2 {
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -1.4px !important;
  }

  body.homepage-page .hp-leaders-section .hp-section-title-row > a {
    font-size: 11px !important;
    padding-bottom: 7px !important;
  }

  body.homepage-page .hp-lt-head {
    font-size: 10.5px !important;
    letter-spacing: .8px !important;
  }

  body.homepage-page .hp-lt-rank {
    font-size: 10.5px !important;
  }

  body.homepage-page .hp-lt-name strong {
    font-size: 11.5px !important;
  }

  body.homepage-page .hp-lt-name small {
    font-size: 9px !important;
  }

  body.homepage-page .hp-lt-value {
    font-size: 16px !important;
  }

  /* Full Box Scores / Fantasy cards further down the homepage */
  body.homepage-page .hp-callout-card .hp-kicker {
    font-size: 9.5px !important;
  }

  body.homepage-page .hp-callout-card h3 {
    font-size: 22px !important;
  }

  body.homepage-page .hp-callout-card p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  body.homepage-page .hp-callout-card .hp-callout-go {
    font-size: 11.5px !important;
  }
}


/* =========================================================
   DESKTOP HOMEPAGE — MOVE LEAGUE LEADERS UP SLIGHTLY
   Hero + phone untouched.
   ========================================================= */
@media only screen and (min-width: 769px) {
  body.homepage-page .hp-leaders-section {
    margin-top: -22px !important;
  }
}


/* PHONE ONLY — live score ticker always stays above scrolling homepage content. */
@media only screen and (max-width: 768px) {
  body.homepage-page > #live-scores-strip.live-scores-strip {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
  }
}

/* PHONE HOMEPAGE ONLY — place the brand row above the player picture.
   The shared menu markup and JavaScript are unchanged, so the logo,
   hamburger and drawer links retain their existing click behaviour. */
@media only screen and (max-width: 768px) {
  body.homepage-page #site-header {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: #020b18 !important;
    background-color: #020b18 !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header .site-top-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--les-mobile-ticker-h, 52px) !important;
    background: #020b18 !important;
    background-color: #020b18 !important;
  }

  body.homepage-page #site-header .navbar {
    position: relative !important;
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    padding: 0 !important;
    background: #020b18 !important;
    background-color: #020b18 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.homepage-page #site-header .logo {
    top: 18px !important;
    left: 9px !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: 28px !important;
    right: 20px !important;
    pointer-events: auto !important;
  }

  body.homepage-page .hp-hero {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* PHONE HOMEPAGE — final hamburger alignment from device reference. */
@media only screen and (max-width: 768px) {
  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: -48px !important;
    right: 20px !important;
    background: rgba(6,26,59,.92) !important;
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.48) !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    background: rgba(6,26,59,.92) !important;
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.48) !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    color: #ffffff !important;
  }
}

/* PHONE HOMEPAGE CORRECTION — restore the original player-photo hero.
   Keep the approved brand position, align the menu with the visible top
   of the ball logo, and retain the existing interactive menu elements. */
@media only screen and (max-width: 768px) {
  body.homepage-page #site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    background: transparent !important;
    background-color: transparent !important;
    pointer-events: none !important;
  }

  body.homepage-page #site-header .site-top-wrap,
  body.homepage-page #site-header .navbar {
    position: relative !important;
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.homepage-page #site-header .logo {
    top: 70px !important;
    left: 9px !important;
    pointer-events: auto !important;
  }

  body.homepage-page #site-header #mobile-menu-toggle,
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: 104px !important;
    right: 20px !important;
    background: #061a3b !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.48) !important;
    pointer-events: auto !important;
  }
}

/* MUST REMAIN LAST — phone homepage hamburger final device alignment. */
@media only screen and (max-width: 768px) {
  html body.homepage-page #site-header #mobile-menu-toggle,
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: -48px !important;
    right: 20px !important;
    background: rgba(6,26,59,.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
    pointer-events: auto !important;
  }

  html body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    background: rgba(6,26,59,.94) !important;
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
  }

  html body.homepage-page #site-header #mobile-menu-toggle .les-menu-symbol,
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"] .les-menu-symbol {
    color: #ffffff !important;
  }
}

/* MUST REMAIN LAST — final 15px downward phone-only nudge. */
@media only screen and (max-width: 768px) {
  html body.homepage-page #site-header #mobile-menu-toggle,
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: 10px !important;
  }
}

/* MUST REMAIN LAST — corrected phone position and complete four-sided outline. */
@media only screen and (max-width: 768px) {
  html body.homepage-page #site-header #mobile-menu-toggle,
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: 10px !important;
    right: 20px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.homepage-page #site-header #mobile-menu-toggle .les-menu-square {
    position: absolute !important;
    inset: 0 !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(6,26,59,.94) !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 2px solid #ffffff !important;
    outline-offset: -2px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
  }
}

/* =========================================================
   FANTASY TOOLS HOMEPAGE CARD REFRESH
   Only the two homepage callout cards.
   ========================================================= */
body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(196,18,48,.55) !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(196,18,48,.18), transparent 32%),
    linear-gradient(145deg, rgba(16,31,70,.9), rgba(7,18,42,.95)) !important;
}
body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::before {
  content: "↗" !important;
  position:absolute !important;
  right:28px !important;
  top:22px !important;
  width:54px !important;
  height:54px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(196,18,48,.7) !important;
  color:#e4143b !important;
  font-size:28px !important;
  font-weight:900 !important;
}
body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-kicker {
  color: var(--les-app-red) !important;
}
body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-callout-go {
  display:inline-flex !important;
  margin-top:18px !important;
  color:white !important;
}
@media only screen and (max-width:768px){
 body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted {
   min-height:220px !important;
   padding:24px 20px !important;
 }
 body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::before {
   right:18px !important;
   top:18px !important;
 }
 body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted h3 {
   font-size:31px !important;
   line-height:1.05 !important;
 }
}


/* MOBILE FANTASY TOOLS CARD — WEBSITE-STYLE COMPOSITION */
@media only screen and (max-width: 768px) {
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted {
    min-height: 248px !important;
    padding: 28px 78px 26px 24px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    text-align: left !important;
    border: 1px solid rgba(228, 20, 59, .82) !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at 91% 20%, rgba(228, 20, 59, .16), transparent 31%), linear-gradient(135deg, #0d1d43 0%, #0b1937 58%, #181329 100%) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22) !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted > div { width: 100% !important; text-align: left !important; }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::before {
    content: "↗" !important; left: auto !important; right: 20px !important; top: 22px !important;
    transform: none !important; width: 48px !important; height: 48px !important;
    border: 1px solid rgba(228, 20, 59, .8) !important; border-radius: 50% !important;
    background: rgba(7, 24, 54, .62) !important; color: #e4143b !important;
    font-family: inherit !important; font-size: 25px !important; font-weight: 500 !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted::after { content: none !important; display: none !important; }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-kicker {
    display: block !important; margin: 0 0 15px !important; color: #ff405d !important;
    font-size: 12px !important; letter-spacing: .18em !important; text-align: left !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted h3 {
    max-width: 245px !important; margin: 0 0 14px !important; color: #fff !important;
    font-size: 30px !important; line-height: 1.02 !important; text-align: left !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted p {
    display: block !important; max-width: 280px !important; margin: 0 !important;
    color: rgba(230, 237, 249, .76) !important; font-size: 14px !important;
    line-height: 1.45 !important; text-align: left !important; overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-callout-go {
    align-self: flex-start !important; display: inline-flex !important; gap: 5px !important;
    margin-top: 22px !important; padding: 0 !important; background: transparent !important;
    color: #fff !important; font-size: 14px !important; font-weight: 800 !important;
    text-align: left !important; text-transform: none !important;
  }
  body.homepage-page .hp-callouts > .hp-callout-card.hp-callout-muted .hp-callout-go b { font-size: 17px !important; font-weight: 500 !important; }
}


/* ==========================================================
   FANTASY TOOLS MOBILE CARD - MATCH DESKTOP HOMEPAGE CARD
   Final override after hp-callout-card mobile rules
   ========================================================== */

@media only screen and (max-width: 768px) {

  body.homepage-page .hp-callout-card.hp-callout-muted {
    background:
      radial-gradient(circle at 88% 12%, rgba(242,45,66,.10), transparent 38%),
      linear-gradient(135deg, rgba(11,28,58,.98), rgba(6,20,43,.98)) !important;
    border: 1px solid rgba(242,45,66,.78) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted .hp-kicker {
    color: #ff6470 !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted h3 {
    color: #ffffff !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted p {
    color: #aab6c8 !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted .hp-callout-go {
    color: #ffffff !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted .hp-callout-go b {
    color: #ff6470 !important;
  }

  body.homepage-page .hp-callout-card.hp-callout-muted::after {
    content: "↗";
    position: absolute;
    top: 22px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(242,45,66,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6470;
    font-size: 20px;
  }
}


/* ==========================================================
   FINAL: FANTASY TOOLS ONLY - MOBILE MATCH DESKTOP CARD
   Does not affect Full Box Scores or other callouts
   ========================================================== */

@media (max-width:768px) {

  body.homepage-page .hp-callout-card[href="/fantasy-tools"] {
    background: rgba(17,29,66,.5) !important;
    border: 1px solid var(--card-border) !important;
    padding: 28px !important;
    min-height: 150px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  body.homepage-page .hp-callout-card[href="/fantasy-tools"] h3 {
    font-size: 26px !important;
    margin: 8px 0 8px !important;
    color: white !important;
  }

  body.homepage-page .hp-callout-card[href="/fantasy-tools"] p {
    font-size: 14px !important;
    color: var(--grey-font) !important;
    line-height: 1.5 !important;
  }

  body.homepage-page .hp-callout-card[href="/fantasy-tools"] .hp-callout-go {
    margin-top: 20px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: white !important;
  }

}

/* AUG 25 — Desktop homepage: make the three Latest NBA News rows fill the
   panel evenly, matching the three What's Happening rows. Mobile untouched. */
@media only screen and (min-width: 769px) {
  body.homepage-page .hp-news-feature.hp-latest-news,
  body.homepage-page .hp-whats-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body.homepage-page .hp-news-feature.hp-latest-news .hp-news-list,
  body.homepage-page .hp-whats-panel .hp-update-grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  }

  body.homepage-page .hp-news-feature.hp-latest-news .hp-news-row,
  body.homepage-page .hp-whats-panel .hp-update-card {
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}


/* v39 — APP-style live scores: stacked teams + continuous marquee */
.hp-scores-strip {
  height: 56px !important;
  min-height: 56px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.hp-scores-strip .hp-ss-track-wrap {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.live-scores-strip .lss-track.lss-continuous,
.hp-scores-strip .hp-ss-track.hp-ss-continuous {
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  will-change: transform;
}

.live-scores-strip .lss-track.lss-continuous.lss-scrolling {
  animation: lss-app-flow var(--lss-duration, 28s) linear infinite !important;
}
.hp-scores-strip .hp-ss-track.hp-ss-continuous.hp-ss-scrolling {
  animation: hp-app-flow var(--hp-ss-duration, 28s) linear infinite !important;
}

@keyframes lss-app-flow {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--lss-loop-distance, 500px))); }
}
@keyframes hp-app-flow {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--hp-ss-loop-distance, 500px))); }
}

.live-scores-strip .lss-score-copy,
.hp-scores-strip .hp-ss-score-copy {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 56px;
}

.live-scores-strip .lss-game-stacked,
.hp-scores-strip .hp-ss-game-stacked {
  height: 46px !important;
  min-width: 150px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-right: 16px;
  padding: 0 16px 0 10px !important;
  border-right: 1px solid rgba(255,255,255,.14) !important;
  text-decoration: none !important;
  color: #fff !important;
}

.live-scores-strip .lss-team-stack,
.hp-scores-strip .hp-ss-team-stack {
  display: grid;
  gap: 3px;
  min-width: 92px;
}
.live-scores-strip .lss-team-row,
.hp-scores-strip .hp-ss-team-row {
  display: grid;
  grid-template-columns: 22px 30px minmax(24px,auto);
  align-items: center;
  gap: 5px;
  height: 20px;
}

.live-scores-strip .les-score-team-badge,
.hp-scores-strip .les-score-team-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,var(--score-badge-a),var(--score-badge-b));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}
.live-scores-strip .les-score-team-badge::after,
.hp-scores-strip .les-score-team-badge::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 4px;
  transform: rotate(-35deg);
  background: rgba(255,255,255,.22);
}
.live-scores-strip .les-score-team-badge b,
.hp-scores-strip .les-score-team-badge b {
  position: relative;
  z-index: 1;
  font: 900 6.5px/1 Barlow, sans-serif;
  color: #fff;
  letter-spacing: -.2px;
}

.live-scores-strip .lss-team-code,
.hp-scores-strip .hp-ss-team-code {
  font: 800 10px/1 Barlow, sans-serif !important;
  color: #e8edf5;
}
.live-scores-strip .lss-team-score,
.hp-scores-strip .hp-ss-team-score {
  font: 900 13px/1 'Barlow Condensed', Barlow, sans-serif !important;
  color: #fff;
  text-align: right;
}
.live-scores-strip .lss-team-score.lss-loser,
.hp-scores-strip .hp-ss-team-score.hp-ss-loser { color: #8f9bad !important; }

.live-scores-strip .lss-game-state,
.hp-scores-strip .hp-ss-game-state {
  min-width: 36px;
  display: grid;
  place-items: center;
  text-align: center;
}
.live-scores-strip .lss-game-state :is(.lss-status,.lss-time),
.hp-scores-strip .hp-ss-game-state :is(.hp-ss-status,.hp-ss-time) {
  font-size: 8px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}

/* Keep fixed controls compact while letting the moving games breathe. */
.live-scores-strip .lss-label,
.hp-scores-strip .hp-ss-label { align-self: center !important; }
.live-scores-strip .lss-hide-btn { height: 56px !important; }
.hp-scores-strip .hp-ss-close { height: 56px !important; }

@media (max-width: 768px) {
  .live-scores-strip,
  .hp-scores-strip { height: 50px !important; min-height: 50px !important; }
  .live-scores-strip .lss-track-wrap,
  .hp-scores-strip .hp-ss-track-wrap,
  .live-scores-strip .lss-track.lss-continuous,
  .hp-scores-strip .hp-ss-track.hp-ss-continuous,
  .live-scores-strip .lss-score-copy,
  .hp-scores-strip .hp-ss-score-copy { height: 50px !important; }
  .live-scores-strip .lss-game-stacked,
  .hp-scores-strip .hp-ss-game-stacked {
    height: 42px !important;
    min-width: 136px;
    margin-right: 10px;
    padding: 0 11px 0 7px !important;
  }
  .live-scores-strip .lss-team-row,
  .hp-scores-strip .hp-ss-team-row { grid-template-columns: 20px 27px minmax(22px,auto); gap: 4px; }
  .live-scores-strip .les-score-team-badge,
  .hp-scores-strip .les-score-team-badge { width: 18px; height: 18px; }
  .live-scores-strip .lss-team-code,
  .hp-scores-strip .hp-ss-team-code { font-size: 8px !important; }
  .live-scores-strip .lss-team-score,
  .hp-scores-strip .hp-ss-team-score { font-size: 12px !important; }
  .live-scores-strip .lss-hide-btn,
  .hp-scores-strip .hp-ss-close { height: 50px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .live-scores-strip .lss-track.lss-continuous.lss-scrolling,
  .hp-scores-strip .hp-ss-track.hp-ss-continuous.hp-ss-scrolling { animation: none !important; }
}

/* =========================================================
   DESKTOP HOME — SEARCH / LIVE DATA FINAL POSITION
   Homepage only. Mobile/tablet and shared navbar untouched.
   ========================================================= */
@media (min-width: 1025px) {
  /* Align the search pill's left edge exactly with the Popular row. */
  body.homepage-page .hp-hero-search {
    margin-left: -30px !important;
  }

  /* Keep Live Data fully in the navy section below the hero image. */
  body.homepage-page .hp-tonight-panel.hp-live-data-panel,
  body.homepage-page .live-data-position-fix,
  body.homepage-page .hp-live-data-panel {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 24px 38px 0 !important;
  }
}

/* =========================================================
   DESKTOP HOME — HERO / SHARED LIVE TICKER FINAL ADJUSTMENT
   Homepage desktop only. Shared navbar and other pages untouched.
   ========================================================= */
@media (min-width: 1025px) {
  /* Drop the arena crop slightly so the player's head clears the ticker. */
  body.homepage-page .hp-hero {
    background-position: center 42px !important;
  }

  /* Desktop Home uses the exact same populated shared ticker as every page. */
  body.homepage-page > #hp-scores-strip,
  body.homepage-page > .hp-scores-strip {
    display: none !important;
    visibility: hidden !important;
  }

  body.homepage-page > #live-scores-strip.live-scores-strip {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.homepage-page > #live-scores-strip.live-scores-strip > * {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   MOBILE HOME — HERO PLAYER CLEARANCE FROM LIVE STATUS BAR
   Mobile only. Desktop untouched.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page .hp-hero {
    /* Lower the panoramic artwork so the player's head has clear breathing
       room beneath the live scores/status strip. */
    background-position: center calc(42% + 28px) !important;
  }
}


/* =========================================================
   MOBILE HOME — HERO CONTROLS LIFT
   Mobile only. Keep the lowered player crop, but lift the
   brand lockup and hamburger into the darker upper hero area.
   ========================================================= */
@media (max-width: 768px) {
  body.homepage-page #site-header .brand,
  body.homepage-page #site-header .navbar-brand,
  body.homepage-page #site-header .site-brand {
    top: 12px !important;
  }

  body.homepage-page #site-header .desktop-more-wrap,
  body.homepage-page #site-header .hamburger,
  body.homepage-page #site-header .menu-toggle,
  body.homepage-page #site-header .nav-menu-button {
    top: 32px !important;
  }
}

/* =========================================================
   MOBILE HOME — BRAND + MENU LIFT (CORRECT SELECTORS)
   Final phone-only override. Uses the live selectors that are
   actually rendered by the homepage header.
   ========================================================= */
@media only screen and (max-width: 768px) {
  html body.homepage-page #site-header .logo {
    top: 54px !important;
  }

  html body.homepage-page #site-header #mobile-menu-toggle,
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="true"],
  html body.homepage-page #site-header #mobile-menu-toggle[aria-expanded="false"] {
    top: -6px !important;
  }
}