button,a,summary{touch-action:manipulation}
.keypad button,#erase{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.keypad button:active,#erase:active{background:#583078;color:#fff;filter:none}
@media(hover:none){button:hover:enabled{filter:none}}
@media(max-width:760px){
  body{min-height:100svh}
  header{padding:16px 18px}
  main{padding:12px 16px 20px;gap:20px}
  input,select{font-size:16px;min-height:48px}
  button{min-height:44px}
  .panel{padding:22px;box-shadow:0 8px 24px #0003}
  .primary{box-shadow:none}
  .is-connected main{gap:16px}
  .is-connected .panel{order:-1;padding:20px}
  .is-connected .intro h1,.is-connected .intro>.eyebrow,.is-connected .intro>p{display:none}
  .is-connected .benefit{margin:0;padding:12px 15px;max-width:none}
  .is-connected .benefit img{width:32px;height:32px}
  .is-connected .benefit p{font-size:11px;margin-top:2px}
  .keypad{gap:9px;margin-top:14px}
  .keypad button{min-height:57px;padding:8px;font-size:25px;line-height:1.1}
  .keypad small{margin-top:5px;font-size:9px;line-height:1;height:10px}
  .number input{font-size:25px;padding:12px 8px}
  .number #erase{min-width:48px;padding:8px;font-size:23px}
  .account h2{font-size:20px}
  #call-status{margin-top:12px;min-height:22px}
  #call,#hangup{margin-top:12px;min-height:48px}
  .controls button{min-height:46px;font-size:12px;padding:8px}
  details{margin-top:16px}
  summary{min-height:36px;padding:8px 0}
  footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}