/* Homepage only. Shared type, colours, nav and footer live in /assets/site/site.css. */

/* Animated widget states */
.insight{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.insight.on{opacity:1;transform:none;}
.gain{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .45s;}
.gain.on{opacity:1;transform:translateY(-4px);}

/* Hover states (style-hover in the design tool). Inline styles need !important to be overridden. */
.h1:hover{background:#EAF2F9 !important;}
.h2:hover{background:#FBF1D6 !important;}
.h-badge:hover{background:#1a1a1a !important;}

/* Sticky "download the app" bar: phones only */
.mobile-dl{display:none;}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) !important;}
}

/* ---------- Phone ---------- */
@media (max-width:720px){
  .mobile-dl{display:flex;}

  /* Section rhythm: desktop spacing scaled to ~55%, 20px gutters */
  .hs-0{padding:26px 20px 53px !important;}
  .hs-1{padding:66px 20px 33px !important;}
  .hs-2{padding:44px 20px 66px !important;}
  .hs-3{padding:61px 20px 61px !important;}
  .hs-4{padding:66px 20px 66px !important;}
  .hs-5{padding:0px 20px 66px !important;}
  .hs-6{padding:66px 20px 22px !important;}
  .hs-7{padding:44px 20px 66px !important;}
  .hs-8{padding:22px 20px 66px !important;}
  .hs-9{padding:61px 20px 61px !important;}
  .hs-10{padding:0px 20px 50px !important;}
  .hs-11{padding:72px 20px 72px !important;}

  /* Sneakers story: stack, keep a compact phone pinned while the steps scroll under it */
  .story-grid{grid-template-columns:1fr !important;gap:0 !important;margin-top:28px !important;}
  .story-phone-col{position:sticky !important;top:0 !important;z-index:5;background:#FBF8F2;padding:10px 0 14px;margin:0 -20px;box-shadow:0 10px 18px -14px rgba(20,32,46,.35);}
  .story-phone{width:min(320px,calc(100% - 40px)) !important;min-height:0 !important;border-width:6px !important;border-radius:26px !important;padding:16px 18px !important;box-shadow:0 14px 30px rgba(3,86,147,.16) !important;}
  .story-phone > div:nth-child(2){font-size:20px !important;margin-top:6px !important;}
  .story-phone > div:nth-child(3){font-size:32px !important;margin-top:8px !important;}
  .story-phone > div:nth-child(4){margin-top:10px !important;}
  .story-phone > div:last-child{margin-top:12px !important;padding:10px 12px !important;font-size:13px !important;}
  .story-step{min-height:46vh !important;padding:28px 0 !important;}

  /* Money-weather stats: keep each value on one line */
  .weather-stats{gap:8px !important;}
  .weather-stats > div > div:first-child{font-size:19px !important;white-space:nowrap;}
  .weather-stats > div > div:last-child{font-size:11px !important;line-height:1.3;}

  /* Ecosystem rows: name + arrow on one line, description underneath */
  .eco-row{grid-template-columns:1fr auto !important;row-gap:6px !important;padding-left:4px !important;padding-right:4px !important;}
  .eco-row > :nth-child(1){grid-column:1;grid-row:1;}
  .eco-row > :nth-child(3){grid-column:2;grid-row:1;}
  .eco-row > :nth-child(2){grid-column:1 / -1;grid-row:2;}
}