/* /beta phone and tablet fixes (QA 2026-09-27). Loaded last by components/beta-layout, so equal-specificity
   rules here win over pricing-v3.css / home-v1.css / social-v1.css / contact-v1.css. Page stylesheets are
   unchanged; everything here is additive. */

/* ---- Small caps labels: 12px minimum ---- */
.pv .pv-seal span{font-size:12px;letter-spacing:.08em}
.pv .pv-live-h span,.pv .pv-row .m em,.pv .pv-toggle small{font-size:12px}
.ps-row .ps-mail{font-size:12px}
.pv-card.pro .pv-flag{letter-spacing:.06em;font-kerning:normal;word-spacing:.05em}

/* ---- Tablet: plan cards side by side from 720px (pricing-v3 stacks them below 900px) ---- */
@media (min-width:720px) and (max-width:900px){
  .pv .pv-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pv .pv-card{padding:20px 16px}
  .pv .pv-card.pro .pv-flag{margin:0 -16px 18px;padding:9px 8px;letter-spacing:.03em;text-wrap:balance}
  .pv .pv-price b{font-size:34px}
  .pv .pv-price span{font-size:14px}
  .pv .pv-feat li{font-size:13.5px}
  .pv .ph-cards,.pv .ph-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Enterprise "$2,500+ / month": the suffix wraps under the price, never alone at the card edge */
.pv .pv-price{flex-wrap:wrap;row-gap:2px}
.pv .pv-price b{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){.pv .pv-price b{font-size:44px}}

/* ---- Stats grid: two equal columns that fit at 360/390 ---- */
@media (max-width:900px){
  .pv .pv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv .pv-stats div{padding:20px 16px;min-width:0}
  .pv .pv-stats b{font-size:clamp(22px,7vw,34px);overflow-wrap:anywhere}
  .pv .pv-stats span{font-size:13px}
}

/* ---- "The math": struck price stays on one line; "/yr" not struck or underlined ---- */
.pv .pv-big{white-space:nowrap}
.pv .pv-old .pv-big small{display:inline-block;text-decoration:none}
@media (max-width:520px){.pv .pv-big{font-size:clamp(24px,8vw,40px)}.pv .pv-big small{font-size:14px}}

/* ---- Compare table on phones: scrolls sideways with a hint and a pinned first column ---- */
@media (max-width:640px){
  .pv .pv-cmp-wrap{position:relative;-webkit-overflow-scrolling:touch}
  .pv .pv-cmp-wrap::before{content:"Swipe the table to compare all plans \2192";display:block;font-size:13px;color:var(--mute,#5b6660);margin:28px 0 -24px}
  .pv .pv-cmp{min-width:560px;font-size:14px}
  .pv .pv-cmp th:first-child,.pv .pv-cmp td:first-child{position:sticky;left:0;z-index:1;background:var(--bg,#fff);min-width:128px;max-width:150px}
  .pv .pv-cmp th .pv-btn{white-space:nowrap;padding:10px;min-height:40px}
}

/* ---- Phones: 16px form fields (stops iOS zoom), 40px tap targets, no clipped placeholders ---- */
/* 16px at every width: iOS (iPad too) zooms into any field under 16px */
main.bm input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main.bm select,main.bm textarea{font-size:16px}
@media (max-width:819px){
  main.bm input::placeholder,main.bm textarea::placeholder{font-size:14px}
  main.bm input{text-overflow:ellipsis}
  .pv .pv-search input,.pv .pv-search button{min-height:44px}
  .pv .pv-chips button{min-height:40px}
  .pv .pv-toggle button{min-height:44px}
  .pv .ph-live-f a{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .pv .ph-team a,.pv p a[href^="mailto:"]{display:inline-block;padding:10px 0;margin:-10px 0}
  .pc-card .pv-btn{white-space:nowrap}
}

/* ---- Phones: headings without orphan words, CTA arrow stays with its text ---- */
.pv .pv-eyebrow,.pv .ph-news-h,.pv .pv-live-h{text-wrap:balance}
@media (max-width:420px){
  .pv .pv-final a{padding:14px 18px;white-space:nowrap}
  .pv .pv-final .row{flex-direction:column;align-items:stretch}
  .pv .pv-live-h{flex-wrap:wrap;gap:4px 12px}
}