/* Phone layout: fewer, larger things per screen; swipeable card rows */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-left:20px!important;padding-right:20px!important}
  section{padding-top:52px;padding-bottom:52px}
  h2.big,.big{font-size:31px!important;line-height:1.1}
  .lede,.center .lede{font-size:17px;line-height:1.55}
  p{font-size:16px}
  .eyebrow{font-size:13px}
  .fine{font-size:14px!important}
  .tag,.k,.n{font-size:12.5px}

  /* swipeable rows */
  .cards,.probs,.feat,.grid3,.menu,.work,.doors,.sectors,.vals,.roles,.two-shots,.sys,.plans,.topics,.feat2,.three,.trio3,.steps{
    display:flex!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:12px!important;margin-left:-20px!important;margin-right:-20px!important;
    padding:4px 20px 16px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
  .cards::-webkit-scrollbar,.probs::-webkit-scrollbar,.feat::-webkit-scrollbar,.grid3::-webkit-scrollbar,.menu::-webkit-scrollbar,.work::-webkit-scrollbar,.doors::-webkit-scrollbar,.sectors::-webkit-scrollbar,.vals::-webkit-scrollbar,.roles::-webkit-scrollbar,.two-shots::-webkit-scrollbar,.sys::-webkit-scrollbar,.plans::-webkit-scrollbar,.topics::-webkit-scrollbar,.feat2::-webkit-scrollbar,.three::-webkit-scrollbar,.trio3::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .cards>*,.probs>*,.feat>*,.grid3>*,.menu>*,.work>*,.doors>*,.vals>*,.roles>*,.two-shots>*,.sys>*,.plans>*,.topics>*,.feat2>*,.three>*,.trio3>*,.steps>*{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .sectors>*{flex:0 0 62%;scroll-snap-align:center}
  .plans>*{flex-basis:88%}

  /* bigger, squarer pictures in cards */
  .card .ph,.wcard .ph,.imgtile .ph,.rcard .ph,.item .iph,.plan .pph,.door .ph,.shotc .ph{aspect-ratio:1/1!important;border-radius:16px;overflow:hidden}
  .card .ph img,.wcard .ph img,.imgtile .ph img,.rcard .ph img,.item .iph img,.plan .pph img,.door .ph img,.shotc .ph img{width:100%;height:100%;object-fit:cover}
  img[src*="/mock-"],img[src*="audit-report"],img[src*="visibility-card"]{object-position:left top!important}

  /* short card copy */
  .card .bd p,.prob p,.tile p,.item p,.wcard p,.imgtile p,.rcard p,.val p,.sysc p,.shotc p,.door p,.feat p,.step p,.three p,.trio3 span{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
  .card .bd,.wcard .bd,.imgtile .bd,.rcard .bd,.shotc .bd{padding:18px 18px 20px}
  .card h3,.wcard h3,.imgtile h3,.rcard h3,.tile h3,.item h3,.prob h3{font-size:21px}

  /* trim tables and duplicate blocks on phones */
  section:has(.ptbl){display:none}

  /* swipe hint */
  .swipe-hint{display:flex;justify-content:center;gap:6px;margin-top:4px}
  .swipe-hint i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:.2s}
  .swipe-hint i.on{background:var(--ink);width:18px;border-radius:99px}
}
@media (max-width:640px){
  #monthly .plan{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin-left:-20px!important;margin-right:-20px!important;padding:4px 20px 16px!important;scrollbar-width:none}
  #monthly .plan::-webkit-scrollbar{display:none}
  #monthly .plan>*{flex:0 0 84%;scroll-snap-align:center;min-width:0}
}
@media (max-width:640px){
  header .btn.btn-dark{font-size:0!important;padding:12px 18px!important;white-space:nowrap}
  header .btn.btn-dark::after{content:"Free Visibility Score";font-size:12.5px;letter-spacing:.05em}
  .hero .chips{display:none}
  .hero.shero .inner{padding-bottom:40px!important}
  .plans .plan>*{margin-left:20px!important;margin-right:20px!important}
  .plans .plan>.pph{margin:0!important;width:100%}
  .plans .plan>.btn{width:calc(100% - 40px)!important}
  .plans .plan .scopebox{margin:14px 20px 22px!important}
}
@media (max-width:640px){
  .hero+section{padding-top:40px!important}
  .plans .plan .pph img{object-position:center top!important}
}
@media (max-width:640px){
  header .btn.btn-dark{padding:11px 14px!important}
  header .btn.btn-dark::after{font-size:11.5px!important;letter-spacing:.04em}
}
@media (max-width:370px){
  header .btn.btn-dark::after{content:"Free score"!important}
}

/* pricing programme cards: 4:3 images, purpose-built plan graphics centred */
.plans .plan .pph{aspect-ratio:4/3!important}
.plans .plan .pph img.fit{object-position:center!important}