/* Phone buttons, top and mid-page (Reece 16 Oct: "the CTAs on mobile look absolutely trash ... both the top and mid
   page ones"). One style for every phone CTA: full-width pills stacked, 56px tall, 16px words, icon circle on the right. */
@media (max-width:560px){
  .hero .hero-ctas{display:grid!important;grid-template-columns:1fr!important;gap:.65rem!important;width:100%!important;max-width:none!important;}
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost,.tcta .begin-btn,.midcta .begin-btn{
    display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;box-sizing:border-box!important;
    min-height:56px!important;height:56px!important;padding:0 6px 0 22px!important;font-size:16px!important;letter-spacing:-.005em!important;
    border-radius:999px!important;margin:0!important;white-space:nowrap!important;}
  .hero .hero-ctas .hero-ghost{background:#fff!important;border:1px solid rgba(20,20,18,.16)!important;color:#141412!important;}
  .hero .hero-ctas .gp::after,.hero .hero-ctas .cu::after,.tcta .begin-btn::after,.midcta .begin-btn::after{width:44px!important;height:44px!important;flex:none!important;}
  .tcta,.midcta{padding-left:20px!important;padding-right:20px!important;}
  .tcta .begin-btn,.midcta .begin-btn{max-width:24rem!important;margin:1rem auto 0!important;box-shadow:0 12px 26px -18px rgba(20,20,18,.7)!important;}
}

/* Hero pair side by side (Reece 16 Oct: "the 'contact us' looks weird they should be side by side not stacked on mobile").
   Same pills, one row: the quote button takes the room it needs, Contact us drops its icon circle to fit. */
@media (max-width:560px){
  .hero .hero-ctas{grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;}
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{width:auto!important;}
  .hero .hero-ctas .hero-ghost{width:100%!important;}
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{min-height:52px!important;height:52px!important;font-size:14px!important;gap:8px!important;}
  .hero .hero-ctas .hero-cta{padding:0 5px 0 16px!important;}
  .hero .hero-ctas .gp::after{width:40px!important;height:40px!important;margin-left:0!important;}
  .hero .hero-ctas .hero-ghost{justify-content:center!important;padding:0 18px!important;}
  .hero .hero-ctas .cu::after{display:none!important;}
}
@media (max-width:389px){
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{font-size:13.5px!important;}
  .hero .hero-ctas .hero-cta{padding-left:14px!important;}
  .hero .hero-ctas .hero-ghost{padding:0 13px!important;}
  .hero .hero-ctas .gp::after{width:34px!important;height:34px!important;}
}
@media (max-width:350px){.hero .hero-ctas .gp::after{display:none!important;}.hero .hero-ctas .hero-cta{padding:0 14px!important;}}

/* Mid-page buttons as wide as their words, centred, not the whole phone (Reece 16 Oct: "shouldn't be the whole width
   of the phone, but it is"). Same 56px pill and icon circle. */
@media (max-width:560px){
  .tcta .begin-btn,.midcta .begin-btn{display:inline-flex!important;width:auto!important;gap:16px!important;align-self:center!important;}
}