/* Narrow opt-in layout changes for the six P1 entry pages only. */
.home-mobile-intro{display:none}
@media(max-width:768px){
  body[data-mobile-page="home"] #hero{padding:28px 0 16px;min-height:0}
  body[data-mobile-page="home"] #hero .hero-content{display:block;min-height:0}
  .home-original-intro{display:none}
  .home-mobile-intro{display:block;color:#fff;text-align:left}
  .home-mobile-intro h1{font-size:28px;line-height:1.4;margin:0 0 12px;color:#fff;word-break:keep-all}
  .home-mobile-intro p{font-size:16px;line-height:1.65;color:#e8edf5;margin:8px 0}
  .home-mobile-intro details{color:#e8edf5}
  .home-entry{padding:14px 16px 24px;text-align:center}
  .home-entry a{width:100%;box-sizing:border-box}
  body[data-mobile-page="K"] .hero,body[data-mobile-page="L"] .hero{padding:16px 10px;margin-bottom:12px}
  body[data-mobile-page="K"] .hero h1,body[data-mobile-page="L"] .hero h1{font-size:26px;line-height:1.4;margin-bottom:8px}
  body[data-mobile-page="K"] .hero-subtitle,body[data-mobile-page="L"] .hero-subtitle{font-size:16px;margin-bottom:8px}
  body[data-mobile-page="K"] .hero-subtitle br{display:none}
  body[data-mobile-page="K"] .hero-stats,body[data-mobile-page="L"] .hero-stats{margin:12px 0;gap:8px}
  body[data-mobile-page="K"] .hero .mobile-disclosure,body[data-mobile-page="L"] .hero .mobile-disclosure{color:#fff;text-align:left}
  body[data-mobile-page="K"] .progress-container,body[data-mobile-page="L"] .progress-container{margin-bottom:16px}
  body[data-mobile-page="G"] .hero{padding:20px 12px;margin-bottom:16px}
  body[data-mobile-page="G"] .hero h1{font-size:26px;line-height:1.4}
  body[data-mobile-page="G"] .hero .subtitle{font-size:16px}
  body[data-mobile-page="G"] .hero .mobile-disclosure{color:#fff}
  body[data-mobile-page="G"] #tier-reference{color:#243862;background:#fff;border-radius:12px;padding:12px}
  body[data-mobile-page="G"] #tier-reference .card{margin-bottom:0;box-shadow:none;padding:16px 4px}
  body[data-mobile-page="G"] #step1{scroll-margin-top:20px}
  /* The expanded reference must fit too; remove its old 600px minimum. */
  body[data-mobile-page="G"] #tier-reference table{min-width:0;width:100%;table-layout:fixed}
  body[data-mobile-page="F"] .header{padding:16px 12px;margin-bottom:12px}
  body[data-mobile-page="F"] .header h1{font-size:26px}
  body[data-mobile-page="F"] .progress-bar{margin:16px 0;padding:12px}
  body[data-mobile-page="F"] .section{padding:18px 14px}
  body[data-mobile-page="F"] .recovery-intro{color:#683027}
  body[data-mobile-page="F"] .recovery-intro > div{padding:18px 14px!important;margin-bottom:16px!important}
  body[data-mobile-page="F"] .recovery-start{margin:14px 0}
  body[data-mobile-page="F"] #diagnosisForm{scroll-margin-top:16px}
  body[data-mobile-page="H"] > header{padding:20px 16px 12px}
  body[data-mobile-page="H"] > header h1{font-size:26px;line-height:1.4}
  body[data-mobile-page="H"] > header p{font-size:16px;margin:8px 0}
  body[data-mobile-page="H"] .header-extras{max-width:640px;margin:12px auto 0;color:#fff;text-align:left}
  body[data-mobile-page="H"] .exchange-rate-badge{display:block;margin:10px 0;padding:12px;font-size:14px;box-shadow:none}
  body[data-mobile-page="H"] > .container{padding-top:16px}
  body[data-mobile-page] .mobile-disclosure p{overflow-wrap:anywhere}
}
@media(max-width:600px){
  body[data-mobile-page="G"] #tier-reference tbody{display:block;width:100%}
  body[data-mobile-page="G"] #tier-reference tr{box-sizing:border-box;width:100%}
  body[data-mobile-page="G"] #tier-reference td{min-width:0;overflow-wrap:anywhere}
}