/* =============================================================================
   SCENARIO CARDS — 3-PART LAYOUT FORCE v=force1
   Part 1: title · Part 2: body · Part 3: route CTA in own container under copy
   Desktop + mobile. Loads LAST on home.
   ============================================================================= */

/* Card shell: icon + copy on top row; CTA full-width under */
html body #scenarios .story-scenario-card.scenario-reason-card,
html body #scenarios .scenario-reason-card,
html body #scenarios .story-scenario-card{
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:14px!important;
  align-items:start!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

/* Icon — part of top row */
html body #scenarios .scenario-reason-card > .scenario-icon,
html body #scenarios .scenario-reason-card > .scenario-number,
html body #scenarios .story-scenario-card > .scenario-icon,
html body #scenarios .story-scenario-card > .scenario-number{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  margin:0!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Main content container — title + body */
html body #scenarios .scenario-reason-copy,
html body #scenarios .story-scenario-card .scenario-reason-copy{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  text-align:left!important;
}

/* Part 1 — title */
html body #scenarios .scenario-part-title,
html body #scenarios .scenario-reason-copy .scenario-part-title{
  display:block!important;
  width:100%!important;
  margin:0!important;
}

html body #scenarios .scenario-part-title .scenario-title,
html body #scenarios .scenario-reason-copy .scenario-title,
html body #scenarios .scenario-reason-copy h3{
  margin:0!important;
  text-align:left!important;
  display:block!important;
}

/* Part 2 — body container */
html body #scenarios .scenario-part-body,
html body #scenarios .scenario-reason-copy .scenario-part-body{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

html body #scenarios .scenario-part-body .scenario-body,
html body #scenarios .scenario-reason-copy .scenario-body,
html body #scenarios .scenario-reason-copy p.scenario-body{
  margin:0!important;
  text-align:left!important;
  display:block!important;
}

/* Part 3 — CTA container UNDER the copy container (full card width) */
html body #scenarios .scenario-route-cta,
html body #scenarios .story-scenario-card > .scenario-route-cta,
html body #scenarios .scenario-reason-card > .scenario-route-cta{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  margin-top:0!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
  border-radius:16px!important;
  border:1px solid rgba(231,233,238,.98)!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  box-shadow:0 8px 22px rgba(7,17,31,.06)!important;
}

html body #scenarios .scenario-route-cta .scenario-route-btn,
html body #scenarios .scenario-route-cta a.btn,
html body #scenarios .scenario-route-cta a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.35!important;
  box-sizing:border-box!important;
}

/* Hide any leftover closing text if present */
html body #scenarios .scenario-closing,
html body #scenarios .micro-outcome{
  display:none!important;
}

/* Desktop polish */
@media (min-width:981px){
  html body #scenarios .story-scenario-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }

  html body #scenarios .story-scenario-card.scenario-reason-card,
  html body #scenarios .scenario-reason-card{
    grid-template-columns:52px minmax(0,1fr)!important;
    column-gap:18px!important;
    row-gap:16px!important;
    padding:22px 20px!important;
  }

  html body #scenarios .scenario-route-cta{
    padding:14px 16px!important;
  }
}

/* Mobile force */
@media (max-width:980px){
  html body #scenarios .story-scenario-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  html body #scenarios .story-scenario-card.scenario-reason-card,
  html body #scenarios .scenario-reason-card,
  html body #scenarios .story-scenario-card{
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    row-gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding:18px 16px 16px 20px!important;
    box-sizing:border-box!important;
  }

  html body #scenarios .scenario-reason-card > .scenario-icon,
  html body #scenarios .scenario-reason-card > .scenario-number{
    grid-column:1!important;
    grid-row:1!important;
  }

  html body #scenarios .scenario-reason-copy{
    grid-column:2!important;
    grid-row:1!important;
    gap:8px!important;
  }

  html body #scenarios .scenario-route-cta{
    grid-column:1 / -1!important;
    grid-row:2!important;
    padding:12px!important;
    border-radius:14px!important;
  }

  html body #scenarios .scenario-route-cta .scenario-route-btn,
  html body #scenarios .scenario-route-cta a.btn{
    width:100%!important;
    min-height:48px!important;
    padding:12px 14px!important;
    font-size:14px!important;
  }

  html body #scenarios .scenario-part-title .scenario-title{
    font-size:1.15rem!important;
    line-height:1.2!important;
  }

  html body #scenarios .scenario-part-body .scenario-body{
    font-size:15px!important;
    line-height:1.5!important;
  }
}