/* neo-mobile.css — the phone layer. Loaded last so it wins on specificity ties;
   nothing here applies above 760px, so the desktop composition is untouched. */

html{overflow-x:hidden}
img,svg,canvas,iframe,video{max-width:100%}
/* Fixed nav would otherwise cover any anchor target. */
[id]{scroll-margin-top:76px}

/* Hover transforms fire on tap and stick on touch devices. */
@media(hover:none){
 .btn:hover,.pms:hover,.cap:hover,.quote-card:hover,.school img:hover,.pms-ask:hover{transform:none}
}

@media(max-width:760px){
 :root{--gut:20px;--sec-y:58px}
 [id]{scroll-margin-top:66px}
 /* Safe here: .seq-stage is already static at this width. */
 body{overflow-x:hidden}

 /* ---- type: the desktop clamps bottom out too large on a 390px screen ---- */
 .h1{font-size:clamp(32px,8.4vw,44px);line-height:1.05;letter-spacing:-0.022em}
 .h2{font-size:clamp(25px,6.4vw,33px);line-height:1.11;letter-spacing:-0.018em}
 .h3{font-size:18.5px;line-height:1.32;letter-spacing:-0.012em}
 .lede{font-size:16.5px;line-height:1.55;max-width:none}
 .body{font-size:16px;line-height:1.62;max-width:none}
 .small{font-size:13.5px;line-height:1.55}
 .sec-head{margin-bottom:30px}
 .sec-head .lede{margin-top:16px}

 /* ---- nav ---- */
 .nav-in{height:64px;gap:14px}
 .nav.on{background:rgba(255,255,255,0.95)}
 .nav-in>a img{height:22px!important}
 .mob-btn{min-height:44px;padding:11px 16px}
 .mob-sheet{inset:64px 0 0;padding:24px var(--gut) 40px}
 .mob-sheet a{font-size:23px;padding:17px 0}

 /* ---- hero ---- */
 .hero{padding:96px 0 54px;min-height:auto}
 .hero .lede{margin-top:20px}
 .hero-cta{margin-top:28px;gap:10px}
 .hero-cta .btn{flex:1 1 100%}
 /* The node field is the most expensive thing on the page; softened so it
    reads as texture behind the headline rather than competing with it. */
 .hero-canvas{opacity:0.5}

 /* ---- controls: nothing below the 44px touch minimum ---- */
 .btn{min-height:48px;padding:15px 22px;font-size:15px}
 .foot-col a{padding:9px 0}
 .faq summary{padding:22px 0;font-size:17px;gap:18px}
 /* Standalone links are targets, not prose: pad them to the 44px minimum.
    Links inside a sentence are excluded — padding them would break the line. */
 .nav-in>a{padding:11px 0}
 .baa a,.demo-replay,.sec-dl-act a.small{display:inline-flex;align-items:center;min-height:44px}
 .foot-badge+*,.small>a{padding:6px 0}

 /* ---- tabs: five pills wrap into three ragged rows, so they scroll ---- */
 .tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;margin:0 calc(var(--gut) * -1) 26px;padding:2px var(--gut) 10px;scrollbar-width:none}
 .tabs::-webkit-scrollbar{display:none}
 .tab{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:12px 18px;font-size:14px}
 .tab-grid{gap:32px}

 /* ---- panels and rows ---- */
 .claim-head{padding:14px 16px;gap:10px}
 .claim-head b{font-size:12px}
 .demo-stage{padding:0 16px}
 /* Carrier and elapsed time share the top line, the description sits under
    both, so nothing is squeezed into a 90px column. */
 .call-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark status" "text text";gap:9px 12px;padding:15px 0}
 .call-logo,.call-ico{grid-area:mark;width:auto;max-width:118px;height:24px;justify-self:start}
 .call-ico svg{width:30px;height:30px;padding:6px}
 .call-st{grid-area:status;justify-self:end}
 .call-row .tx{grid-area:text;font-size:14px}
 .call-row .tx em{font-size:12.5px}

 /* ---- capability, stat and trust grids ---- */
 .caps{gap:14px}
 .caps>.cap{padding:24px 20px}
 .cap-row{gap:22px;padding-top:32px;margin-top:32px}
 .stats{gap:28px}
 .trust{grid-template-columns:1fr;gap:12px}
 .pts{gap:22px}
 .pt span{max-width:none}

 /* ---- lifecycle rail ---- */
 .life{gap:0 22px}
 .stage{padding:18px 0}
 .stage-dot{left:-29px;top:26px;width:11px;height:11px}
 .stage p{font-size:15.5px;max-width:none}

 /* ---- integrations ---- */
 .pms{height:78px;padding:16px}
 .pms img{max-height:24px}
 .pms-ask{padding:0 18px}
 .pms-ask b{font-size:13.5px}
 .baa{padding:24px 20px;margin-top:32px}
 .baa-badge{width:56px}

 /* ---- testimonials ---- */
 .rate{flex-wrap:wrap;gap:8px 10px}
 .rate .small{flex:1 1 100%}
 .quote-grid{gap:14px;margin-top:32px}
 .quote-card{padding:24px 22px;gap:22px}
 .quote-card.lead{padding:26px 22px}
 .quote-card.lead blockquote{font-size:21px;line-height:1.26;max-width:none}
 .quote-card blockquote{font-size:16px}

 /* ---- contact ---- */
 .contact-grid{gap:32px}
 .form{gap:16px}
 /* 16px is the threshold below which iOS zooms the viewport on focus. */
 .input{font-size:16px;padding:14px 15px}
 textarea.input{min-height:110px}
 .sec-dl{padding:24px 20px;gap:20px}
 .sec-dl-act{width:100%}
 .sec-dl-act .btn{width:100%}

 /* ---- footer ---- */
 .foot{padding:44px 0 28px}
 .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
 .foot-grid>div:first-child{grid-column:1 / -1}
 .foot-bot{margin-top:36px;gap:10px}
 .foot-badge{margin-top:20px;padding-top:18px}
 .bigmark{padding:32px 0 0}

 /* ---- modal: a centred dialog wastes a phone screen ---- */
 .scrim{padding:0;align-items:flex-end}
 .modal{width:100%;max-height:94svh;border-radius:12px 12px 0 0;border-bottom:0}
 .modal-head{padding:18px 20px}
 .modal-head .h3{font-size:17px}
 .modal iframe{height:64svh}
 .modal-foot{padding:12px 20px}
}

@media(max-width:430px){
 :root{--gut:17px;--sec-y:50px}
 .h1{font-size:clamp(29px,8.2vw,36px)}
 .h2{font-size:clamp(23px,6.6vw,29px)}
 .foot-grid{grid-template-columns:1fr;gap:26px}
 .pms-grid{gap:10px}
 .pms{height:70px}
 .call-logo,.call-ico{max-width:100px}
 .quote-card.lead blockquote{font-size:19.5px}
 .school-row{gap:18px 22px}
 .school,.school img{height:36px;max-height:36px}
}