/* Apply first (Nov 9 and 10, 2026). Homepage only.
   1. First screen: on phones the Apply button, the deal link and the "Free to apply" note sit right under the
      headline, ahead of the photo. The page keeps one copy of every word (display:contents plus grid rows).
   2. One highlight color: orange is for the next step (Apply). The walkthrough's Play button is navy.
   3. The main button is lifted with a soft shadow.
   Nothing here moves. No card in the hero: Ken turned down both a calculator card and a three-number story card
   (Nov 10), because the deal lesson needs the room the full section gives it. */

/* The "Free to apply" line beside the main button. */
.hero .micro .hero-free{display:block;font-size:14px;line-height:1.5;color:#f4efe3;font-weight:700;margin-bottom:4px}

/* Lift only what matters: the main (orange) buttons. Outline buttons stay flat. */
.btn:not(.outline){box-shadow:0 12px 24px -10px rgba(6,27,51,.6),0 2px 4px rgba(6,27,51,.18)}
.sitehead .btn{box-shadow:0 8px 16px -8px rgba(6,27,51,.7)}

/* Orange is the Apply color. The walkthrough's Play button is a second-level action, so it is navy. */
.dp-btn.dp-play{background:#0e2a47;border-color:#0e2a47;color:#f4efe3}
.dp-btn.dp-play:hover:not(:disabled){background:#1b3d63;border-color:#1b3d63;color:#fff}

@media (max-width:760px){
  /* Phone order: headline, then the next step, then the photo, then the longer description. */
  .hero-description{display:contents}
  .hero-actions{grid-row:2}
  .hero-visual{grid-row:3}
  .hero-lede{grid-row:4;margin:0}
  .hero-actions .btn{width:100%}
  .hero .micro{margin-top:14px}
  .hero .micro .hero-free{font-size:13px}
}