@charset "UTF-8";

/* === Mobile overflow guard: 280px+ safe layout, no horizontal page spill === */
html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}

/* Every layout wrapper and flex/grid child may shrink instead of pushing the viewport. */
main,header,footer,nav,section,article,aside,figure,details,summary,
.container,.hero-grid,.section-head,.split,.intl-grid,.article-wrap,
.service-grid,.prep-grid,.province-grid,.reviews-grid,.faq,.contact-box,
.footer-main,.footer-grid,.catalog-groups,.catLinks,
#deep-guide,#howto-guide,#data-security-section,#buyer-checklist,
#services,#why-s66i,#international,#prepare,#coverage,#reviews,#faq,#contact,#catalog{
  min-width:0;
  max-width:100%;
}

/* Media can never create a viewport wider than the device. */
picture,img,svg,video,canvas,iframe,object,embed{
  max-width:100%;
}
picture{display:block;min-width:0}
img,video,canvas{height:auto}
iframe,object,embed{width:100%}

/* Long words, URLs, model numbers and multilingual labels must wrap safely. */
:is(h1:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h1"])),:is(h2:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h2"])),:is(h3:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h3"])),:is(h4:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h4"])),:is(h5:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h5"])),:is(h6:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h6"])),p,li,dt,dd,a,span,strong,b,em,small,label,button,
.section-kicker,.service-kicker,.chip,.footer-line,.footer-tags,
.catGroup summary,.catLinks a,.final-keyword-grid>span{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Tables/code scroll inside their own box rather than widening the entire page. */
table{
  width:100%;
  max-width:100%;
}
.article-content table,
#deep-guide table,
#howto-guide table,
#data-security-section table,
#buyer-checklist table{
  display:block;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
pre,code,samp,kbd{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Forms must stay within the viewport on iOS/Android. */
input,select,textarea,button{
  max-width:100%;
  min-width:0;
  font:inherit;
}
input,select,textarea{width:100%}

@media(max-width:680px){
  :root{--site-gutter-total:16px}
  .container,
  .topbar .container,.site-header .container,.hero>.container,.trust-strip>.container,
  #services>.container,#why-s66i>.container,#international>.container,
  #deep-guide>.container,#howto-guide>.container,#data-security-section>.container,
  #prepare>.container,#coverage>.container,#reviews>.container,#faq>.container,
  #contact>.container,#catalog>.container,.closing-art>.container,.sale-bottom>.container,
  .site-footer>.container{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    margin-inline:auto!important;
  }

  /* Remove the most common mobile overflow causes. */
  .hero :is(h1:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h1"])) .mark,
  .footer-bottom .powered,
  #coverage .province-card summary span,
  #howto-guide .sale-mode-summary strong,
  #data-security-section .data-security-notes strong,
  #data-security-section .server-value-note b,
  #howto-guide .pickup-summary strong,
  #buyer-checklist .closing-callout strong,
  #buyer-checklist .closing-note b,
  #buyer-checklist .closing-ready strong,
  #buyer-checklist .final-value-formula span,
  #buyer-checklist .final-keyword-head span,
  #buyer-checklist .final-semantic-note strong{
    white-space:normal!important;
  }

  .hero-grid,.intl-grid,.split,.article-wrap,
  #why-s66i .split,#international .intl-grid,
  #howto-guide .pickup-spread,#buyer-checklist .buyer-spread,
  #data-security-section .valuation-guide,#buyer-checklist .final-spread{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* All card contents can shrink; no intrinsic-width surprises. */
  .hero-grid>*,.intl-grid>*,.split>*,.article-wrap>*,
  .service-grid>*,.prep-grid>*,.province-grid>*,.reviews-grid>*,.faq>*,
  .contact-box>*,.footer-main>*,.catalog-groups>*,.catLinks>*,
  #buyer-checklist .final-page,#howto-guide .pickup-page,
  #data-security-section .valuation-copy,#data-security-section .valuation-factors{
    min-width:0!important;
    max-width:100%!important;
  }

  .nav-links{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
  }
  .floating-line{
    left:auto!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:42px!important;
    height:42px!important;
    max-width:42px!important;
  }

  /* Full-image sections stay fully visible without crop or horizontal spill. */
  .media-frame,
  .media-frame picture,
  .media-frame img,
  #why-s66i .media-frame,
  #why-s66i .media-frame picture,
  #why-s66i .media-frame img,
  #coverage .media-frame,
  .closing-art .media-frame,
  .sale-bottom .media-frame{
    max-width:100%!important;
  }
}

/* Very narrow phones / split-screen / browser zoom: 280–379px. */
@media(max-width:379px){
  :root{--site-gutter-total:12px}
  .container,
  .topbar .container,.site-header .container,.hero>.container,.trust-strip>.container,
  #services>.container,#why-s66i>.container,#international>.container,
  #deep-guide>.container,#howto-guide>.container,#data-security-section>.container,
  #prepare>.container,#coverage>.container,#reviews>.container,#faq>.container,
  #contact>.container,#catalog>.container,.closing-art>.container,.sale-bottom>.container,
  .site-footer>.container{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
  }

  .hero :is(h1:where(:not([data-s66i-heading-from])),:where([data-s66i-heading-from="h1"])){font-size:clamp(1.9rem,11.2vw,2.7rem)!important;line-height:1.02!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .hero-actions .btn{width:100%!important;min-width:0!important;padding-inline:11px!important}

  .service-grid,.prep-grid,.province-grid,.reviews-grid,.faq,
  #coverage .province-grid,
  #reviews .reviews-grid,
  #catalog .catalog-groups,
  #catalog .catLinks,
  #howto-guide .pickup-case-grid,
  #data-security-section .workstation-compare,
  #data-security-section .factor-list,
  #buyer-checklist .final-summary-grid,
  #buyer-checklist .final-intent-strip{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #buyer-checklist .final-keyword-grid,
  #buyer-checklist .final-keyword-block-right .final-keyword-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .language-cloud{gap:5px!important}
  .language-cloud span{flex:1 1 auto;min-width:0;padding:7px 8px!important;text-align:center}
  .footer-col ul{grid-template-columns:minmax(0,1fr)!important}
  .footer-bottom{gap:8px!important}
  .footer-bottom .powered{text-align:left!important}
}

/* Last-resort protection for legacy 280–319px webviews. */
@media(max-width:319px){
  .container,
  .topbar .container,.site-header .container,.hero>.container,.trust-strip>.container,
  #services>.container,#why-s66i>.container,#international>.container,
  #deep-guide>.container,#howto-guide>.container,#data-security-section>.container,
  #prepare>.container,#coverage>.container,#reviews>.container,#faq>.container,
  #contact>.container,#catalog>.container,.closing-art>.container,.sale-bottom>.container,
  .site-footer>.container{
    width:calc(100% - 8px)!important;
    max-width:calc(100% - 8px)!important;
  }
  #buyer-checklist .final-keyword-grid,
  #buyer-checklist .final-keyword-block-right .final-keyword-grid{grid-template-columns:1fr!important}
  .floating-line{width:38px!important;height:38px!important;max-width:38px!important}
}