/* Mobile polish, loaded last on every page (after page-level <style> blocks). */

@media(max-width:640px){
  /* iOS zooms into any field under 16px */
  input,select,textarea{font-size:16px!important}
  /* hero and CTA button pairs: full width, equal */
  .hero-cta,.hero-actions,.cta-row{flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn,.hero-actions .btn,.hero-actions .btn-store,.cta-row .btn{width:100%;justify-content:center;text-align:center}
  :is(div,p):has(> .btn-lg + .btn-lg){flex-direction:column;align-items:stretch}
  :is(div,p):has(> .btn-lg + .btn-lg) > .btn-lg{width:100%;justify-content:center}
  /* long headings */
  .display{font-size:clamp(2.1rem,10vw,2.6rem);line-height:1.02}
  .hero-badge{font-size:11px}
  .hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  /* tighter cards */
  .cap{padding:22px}
  .pc-body{padding:18px}
  .post-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .post-card:not(.post-feature) .post-thumb{aspect-ratio:21/9}
  /* chip rows scroll sideways instead of wrapping into many lines */
  .chip-row,.wk-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .chip-row::-webkit-scrollbar,.wk-filter::-webkit-scrollbar{display:none}
  .chip-row>*,.wk-filter>*{flex:none}
  /* code blocks scroll inside their box */
  .codeblock{font-size:12px;line-height:1.75;padding:18px;overflow-x:auto}
  /* blog post */
  .breadcrumb{flex-wrap:nowrap;min-width:0}
  .breadcrumb>*:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .post-meta{justify-content:center;font-size:13px!important}
  .post-meta>*{white-space:nowrap}
  .prose .lead-p{font-size:1.1rem}
  .prose h2{font-size:1.55rem}
  /* bigger tap targets in the footer and breadcrumbs */
  .foot-col li{margin-bottom:2px}
  .foot-col a,.foot-col .mic-footlink{display:inline-block;padding:7px 0}
  .breadcrumb a{display:inline-block;padding:8px 0}
  .foot-bot{font-size:12px}
  .cta{padding:32px 22px}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .foot-brand{grid-column:1/-1}
}
.blog-more{display:flex;justify-content:center;margin-top:28px}
.blog-more [hidden]{display:none}
@media(max-width:640px){
  /* /start form: Next / Back / Send fill the row */
  #next-1{flex:1;justify-content:center}
  :is(div):has(> #back-2),:is(div):has(> #back-3){gap:10px}
  #next-2,#submit-btn{flex:1;justify-content:center;min-width:0!important}
}

@media(max-width:640px){
  /* small mono labels: 12px minimum on phones */
  .hero-meta .m .l,.stat .l,.tag,.prod-badge,.foot-col h4,.foot-col h5,.foot-bot,.wk-stats *,.pc-status{font-size:12px!important}
  label{font-size:13px}
}
@media(max-width:640px){
  .wk-meta span,.wk-stack span,.wk-store,.wk-bar em,.contact-item-label{font-size:12px!important}
  .form-label{font-size:13px!important}
}
@media(max-width:640px){
  .page-hero .inner{padding-inline:20px}
  .outline-word{-webkit-text-stroke:0;color:var(--lime)}
  .svc-grid h3{font-size:20px!important}
  .prod-btns>a,.prod-btns>span{flex:1 1 100%;justify-content:center;text-align:center}
}
@media(max-width:640px){
  /* homepage "What we build": compact rows, first 6 only */
  #capabilities .caps{gap:12px}
  #capabilities .caps .cap{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px}
  #capabilities .caps .cap .no,#capabilities .caps .cap .tags,#capabilities .caps .cap .go{display:none}
  #capabilities .caps .cap .ic{grid-row:1/span 2;margin:2px 0 0;width:44px;height:44px}
  #capabilities .caps .cap h3{font-size:1.12rem;margin:0 0 4px}
  #capabilities .caps .cap p{grid-column:2;margin:0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #capabilities .caps .cap.cap-more{display:none}
  .caps-more-link{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;padding:14px;border:1px solid var(--line-2);border-radius:14px;color:var(--lime);font-weight:700;text-decoration:none}
}
@media(max-width:640px){
  /* homepage hero mockup: spread the three cards so they do not cover each other */
  .showcase{aspect-ratio:1/1.32;max-width:400px}
  .sc-dash{top:0;left:0;width:80%}
  .sc-phone{left:0;bottom:0;width:29%}
  .sc-ai{right:0;bottom:0;width:60%}
}