/* 2026-11-02 phone QA: the live phone consultation link must remain in normal
   document flow, below the add-on / benefit note and above its disclaimer.
   Override older UI Studio translation rules without touching saved designs. */
@media (max-width:760px) {
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] .estimate-details .plan-cost-group {
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:18px!important;
  }
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] .estimate-details .plan-cost-group > .bundle-welfare-note {
    position:static!important;
    order:2!important;
    flex:0 0 auto!important;
    height:auto!important;
    margin:10px 0 0!important;
    transform:none!important;
  }
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] .estimate-details .plan-cost-group > #checkoutButton {
    position:static!important;
    inset:auto!important;
    translate:none!important;
    transform:none!important;
    display:flex!important;
    order:3!important;
    flex:0 0 auto!important;
    align-self:center!important;
    align-items:center!important;
    justify-content:center!important;
    /* Keep both checkout labels centered in the receipt at every phone width.
       The element stays in document flow; the responsive side gutters prevent
       iPhone/Android viewport differences from shifting or clipping it. */
    width:calc(100% - 16px)!important;
    max-width:284px!important;
    min-height:54px!important;
    height:54px!important;
    margin:36px auto 6px!important;
    padding:12px 14px!important;
    box-sizing:border-box!important;
  }
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] > .estimate-details,
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] > .estimate-details > .estimate-details-content {
    height:auto!important;
    min-height:max-content!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html body.experience-ui[data-page="device"] #config [data-ui-name="P01"] > .checkout-disclaimer {
    position:static!important;
    display:block!important;
    clear:both!important;
    transform:none!important;
    translate:none!important;
    height:auto!important;
    margin:16px 0 0!important;
    line-height:1.5!important;
    white-space:normal!important;
  }
}

/* Internet C03: trim 18px of bottom whitespace; auto-height left/right cards follow content. */
@media (max-width:600px) {
  html body.experience-ui[data-page="internet"] .internet-layout [data-ui-name="C03"] > .internet-quick-facts {
    padding-bottom:64px!important;
  }
  /* Anchor the CTA to the right FACTS grid cell, never to the outer card's
     right edge. Works across iPhone/Android widths without pixel-offset drift. */
  html body.experience-ui[data-page="internet"] .internet-layout [data-ui-name="C03"] > #summaryAction {
    display:flex!important;
    position:relative!important;
    inset:auto!important;
    translate:none!important;
    transform:none!important;
    grid-area:facts!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    justify-self:center!important;
    z-index:3!important;
    width:calc(100% - 16px)!important;
    max-width:152px!important;
    min-width:0!important;
    height:43px!important;
    min-height:43px!important;
    margin:0 0 10px!important;
    box-sizing:border-box!important;
  }
}