/* Responsive polish for every device — loaded on all pages after site.css / parts.css.
   Phones, tablets (portrait + landscape), laptops, large monitors, notches / home-bars, touch vs mouse. */

/* ---- notches and home bars (iPhone etc.) ---- */
.mkt-nav{top:max(14px,env(safe-area-inset-top))}
.mkt-footer .ft-bottom{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.lg-dialog,.qe-dialog{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}

/* ---- phones: 16px fields (iOS zooms into anything smaller when it is tapped) ---- */
@media (max-width:820px){
  .sw-field input,.sw-field textarea,.sw-field select,.lg-input input{font-size:16px}
  .cap-row .cap-input{font-size:18px}
  .cap-row .cap-input::placeholder{font-size:15px}
}

/* ---- touch screens: comfortable tap targets (44px) ---- */
@media (pointer:coarse){
  .sw-pick{min-height:44px;padding:10px 14px;font-size:13.5px}
  .lg-close{width:44px;height:44px}
  .mkt-mobile-toggle{width:46px;height:46px}
  .mkt-mobile-menu a,.mkt-mobile-menu .mkt-btn-primary{min-height:48px;display:flex;align-items:center}
  .mkt-mobile-menu .mkt-btn-primary{justify-content:center;gap:9px}
  .jump a{padding:12px 18px}
  .ft-col a{padding:7px 0;margin-bottom:0}
  .ft-contact a,.ft-addr{padding:5px 0}
  .ft-legal a{padding:9px 0}
  .sw-social a{width:44px;height:44px}
  .sv-list a,.contact-list a{display:inline-block;padding:5px 0}
  .text-link{padding:9px 0}
  .mkt-faq-item summary{min-height:52px}
  .pr-seg button{min-height:46px}
}

/* ---- laptop-sized screens where the hero picture was wider than its column ---- */
@media (min-width:992px) and (max-width:1200px){.hero-visual{width:100%}}

/* ---- tablets in portrait ---- */
@media (min-width:600px) and (max-width:991.98px){
  .hero-visual{max-width:620px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
}

/* ---- small phones (320–380px) ---- */
@media (max-width:380px){
  .mkt-wrap{padding:0 18px}
  .nav-pill{width:calc(100% - 20px);padding-left:14px}
  .mkt-brand-text{font-size:21px}
  .hero h1{font-size:28px}
  .page-hero h1{font-size:28px}
  .sw-form{padding:18px}
  .lg-main{padding:40px 18px 22px}
  .qe-dialog{padding:22px 16px 18px}
  .sw-picks{gap:6px}
  .cta-band{padding:36px 18px}
  .cta-band .mkt-btn-lg{width:100%}
}

/* ---- landscape phones: short screens ---- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:96px 0 40px}
  .page-hero{padding:100px 0 36px}
  .lg-side{display:none}
  .lg-dialog{grid-template-columns:1fr}
}

/* ---- very large monitors: keep the content from looking lost ---- */
@media (min-width:1600px){
  .mkt-wrap,.nav-pill,.mkt-mobile-menu{max-width:1320px}
  .hero h1{font-size:54px}
  .sec-head h2{font-size:38px}
}

/* ---- people who zoom the text / long words never break the layout ---- */
h1,h2,h3,p,li,a{overflow-wrap:break-word}
img,svg,canvas,video{max-width:100%;height:auto}
.cap-canvas{height:42px}

/* ---- phones: the hero picture shows just the laptop, big enough to read (the small side tiles would be unreadable) ---- */
@media (max-width:480px){
  .hero-visual{overflow:hidden;border-radius:24px}
  .hero-visual .hero-svg{width:150%;max-width:none;margin:-11% 0 -11% -25%}
  .hero-svg .tile{display:none}
}