/* ============================================================================
   Homepage only. Loaded after landing.css and features.css by index.astro, so
   it wins on cascade as well as specificity.

   Everything is scoped to #landing, and anything that re-dresses a shared
   component is scoped further to .home-hero / .home-panels. features.astro and
   the sport pages share .ft-hero, .lp-band and .lp-feat, so none of their
   treatment is touched from here.
   ========================================================================= */

/* ---------- hero: the photo dissolves into the page ----------
   features.css sizes the shared hero as a 600px dark stage. The homepage
   instead runs the photo as a fixed band under the header and fades it to
   white, so the product shot below rises out of it with no seam. */
#landing .home-hero{
  background:#fff; min-height:0; display:block; isolation:isolate;
  /* Homepage only: pull the hero up under the transparent sticky nav so the
     photo is full-bleed to the very top and the floating pill sits over it.
     The value equals the nav's rendered height; .ft-hero-in's 104px top pad
     keeps the headline clear of the pill. Other pages have no .home-hero, so
     their nav still floats on white. */
  margin-top:-83px;
}
#landing .home-hero .ft-hero-img{
  inset:0 0 auto 0; height:700px; opacity:1; filter:grayscale(.15);
}
#landing .home-hero::after{
  inset:0 0 auto 0; height:700px;
  background:linear-gradient(180deg,
    rgba(15,18,22,.72) 0%,
    rgba(15,18,22,.66) 26%,
    rgba(15,18,22,.42) 48%,
    rgba(255,255,255,.55) 70%,
    #fff 86%,
    #fff 100%);
}
/* The bottom padding is load-bearing, not spacing. .ft-hero carries
   overflow:hidden, and .lp-showcase casts a 0 30px 80px shadow — so it needs
   110px of clearance beneath it or the shadow is sliced off at the section
   edge. With no bottom padding the frame itself overhung the hero and the
   screenshot was being clipped along with it. */
#landing .home-hero .ft-hero-in{
  /* Bottom pad just clears the (flattened) showcase drop-shadow below, so
     "Compatible with" sits close under the hero instead of floating in space. */
  max-width:1120px; padding:150px 24px clamp(60px, 5vw, 84px);
}
/* A shallower shadow on the hero shot than the default showcase, so the bottom
   pad above can be tight without clipping it. */
#landing .home-hero .lp-showcase{ box-shadow:0 22px 55px rgba(25,28,34,.13); }
#landing .home-hero h1.lede{
  font-size:40px; line-height:1.16; letter-spacing:-.005em;
  text-transform:uppercase;
  max-width:none; margin:0 auto 18px;
}
#landing .home-hero .lp-hero-cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
/* the dashboard shot lands in the fade */
#landing .home-hero .lp-showcase{ margin-top:84px; }

@media(max-width:760px){
  #landing .home-hero .ft-hero-img,
  #landing .home-hero::after{ height:740px; }
  #landing .home-hero{ margin-top:-77px; }
  #landing .home-hero .ft-hero-in{ padding-top:120px; }
  #landing .home-hero h1.lede{ font-size:28px; }
  #landing .home-hero .lp-showcase{ margin-top:60px; }
}
/* Below this the line break is dropped and the headline wraps on its own.
   The markup carries a space before the <br> so the words stay separated. */
@media(max-width:560px){ #landing .home-hero h1.lede br{ display:none; } }

/* ---------- speed band ----------
   Sits between the hero fade and the feature band, both of which carry their
   own ground, so it runs white rather than the old grey. */
#landing .lp-speed{ background:#fff; }

/* ---------- feature panels ----------
   Replaces the icon-card grid on this page only. Soft blocks on the band's
   canvas: no border, no shadow, no icon chip. The whitespace does the work.
   .lp-feat is untouched and still serves /features and the sport pages. */
#landing .home-panels{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
#landing .home-panel{
  background:#fff; border-radius:24px; padding:46px 46px 50px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
#landing .home-panel:hover{ transform:translateY(-3px); }
#landing .home-panel h3{
  font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin:0;
}
#landing .home-panel p{
  font-size:15px; line-height:1.65; color:var(--ink-2); margin:14px 0 0;
}
@media(prefers-reduced-motion:reduce){
  #landing .home-panel{ transition:none; }
  #landing .home-panel:hover{ transform:none; }
}
@media(max-width:860px){
  #landing .home-panels{ grid-template-columns:1fr; gap:14px; }
  #landing .home-panel{ padding:32px 28px 36px; border-radius:20px; }
}

/* ---------- closing CTA ----------
   The shared .ft-hero closes dark, which put a second black slab directly
   under the Process band. On this page it runs light instead, so the type
   has to come back up from white. The gradient overlay is switched off since
   there is no longer a photo underneath it to darken. */
/* ---------- coaching teaser ----------
   A quiet "coming soon" band between the product features and the Process. The
   kick defaults to white/left for dark heroes, so recolour it accent + centered. */
#landing .lp-coach .ft-kick{ text-align:center; color:var(--accent); }

/* ---------- closing CTA ---------- */
#landing .home-cta{ background:#f1f1f1; }
#landing .home-cta::after{ display:none; }
#landing .home-cta .ft-hero-in{ color:var(--ink); }
#landing .home-cta .ft-kick{ color:var(--accent); }
#landing .home-cta .ft-cta-h{ color:var(--ink); }
#landing .home-cta p{ color:var(--ink-2); }

/* hero subhead: sits under the headline, ahead of the CTAs */
#landing .home-hero .home-hero-sub{ max-width:600px; margin:0 auto 36px; }