@media(max-width:850px){.container{width:min(100% - 36px,620px)}.nav-wrap{height:68px}.menu-toggle{display:flex;position:relative;z-index:2;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;cursor:pointer}.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}.menu-toggle.is-open span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:last-child{transform:translateY(-7px) rotate(-45deg)}.main-nav{display:none;position:absolute;top:68px;right:0;left:0;padding:22px 18px 27px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 12px 25px rgba(8,47,37,.06);flex-direction:column;align-items:flex-start;gap:18px}.main-nav.is-open{display:flex}.nav-link:after{bottom:-4px}.hero{padding:59px 0 56px}.hero-grid,.faq-layout{grid-template-columns:1fr;gap:35px}.hero h1{font-size:50px;letter-spacing:-2.3px}.hero-text{font-size:15px}.dashboard-wrap{max-width:600px;margin:7px auto 0}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-grid>div{padding:22px 20px;border-bottom:1px solid #315d4e}.trust-grid>div:nth-child(odd){border-left:1px solid #315d4e}.trust-grid>div:nth-child(even){border-right:1px solid #315d4e}.section{padding:75px 0}.section-heading h2{font-size:42px;letter-spacing:-2px}.row-heading{align-items:start;flex-direction:column;gap:17px}.benefit-grid,.package-grid,.article-grid{grid-template-columns:1fr}.benefit-grid{margin-top:38px}.package-grid{margin-top:38px}.package-card{min-height:365px}.logo-track{gap:45px}.faq-layout{gap:35px}.footer-cta h2{font-size:41px;letter-spacing:-2px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px;margin-top:60px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:15px}.footer-bottom div{gap:12px}.article-grid{margin-top:30px}}
@media(max-width:410px){.hero-actions{display:grid;grid-template-columns:1fr}.button{width:100%}.hero h1{font-size:44px}.trust-grid strong{font-size:31px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}

/* Content media remains within the reading column without affecting navigation artwork. */
main img,main picture,main video,main canvas,main svg,main iframe,main figure{max-width:100%}
main img{height:auto}
.article-content img,.article-content picture,.article-content video,.article-content iframe{display:block;max-width:100%}
.article-content figure{max-width:100%;margin-right:auto;margin-left:auto}
.article-content pre{max-width:100%;overflow-x:auto}
.article-content code{overflow-wrap:anywhere}
.article-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-content iframe{width:100%}

/*
  Content-width safety net for long-form and service templates.
  A small group of legacy SEO templates has post-article blocks directly below
  <main>; these blocks do not inherit a .container or .narrow-content wrapper.
  Keep those reading blocks aligned with the established column without
  changing their HTML or the full-width section backgrounds around them.
*/
main > .cluster-block,
main > .section-intro{
  width:min(820px,calc(100% - 48px));
  max-width:100%;
  min-width:0;
  margin-right:auto;
  margin-left:auto;
}

/* Grid and flex children may otherwise retain intrinsic content width. */
main :where(.container,.narrow-content,.content-grid,.benefit-grid,.package-grid,.article-grid,.faq-layout,.seo-hero-grid,.case-grid,.service-list,.timeline,.cluster-hub,.table-of-contents,.cluster-block,.content-card,.article-card,.package-card,.benefit-card){
  min-width:0;
  max-width:100%;
}

main :where(.hero-grid,.seo-hero-grid,.case-grid,.content-grid,.benefit-grid,.package-grid,.article-grid,.faq-layout,.service-list,.timeline) > *{
  min-width:0;
}

/* Full-width mobile CTAs stay within the column even inside flex/grid parents. */
.hero-actions{
  min-width:0;
  max-width:100%;
}

.hero-actions .button{
  min-width:0;
  max-width:100%;
  white-space:normal;
}

/* URLs, long technical labels and unbroken terms remain inside their column. */
main :where(h1,h2,h3,h4,p,li,a,summary,td,th){
  max-width:100%;
  overflow-wrap:break-word;
}

@media(max-width:850px){
  main > .cluster-block,
  main > .section-intro{width:min(820px,calc(100% - 36px))}

  /* A plain 1fr track keeps its intrinsic minimum; allow it to shrink on mobile. */
  main :where(.hero-grid,.seo-hero-grid,.case-grid,.content-grid,.benefit-grid,.package-grid,.article-grid,.faq-layout,.service-list,.timeline){
    grid-template-columns:minmax(0,1fr);
  }
}

@media(max-width:410px){
  .hero-actions{grid-template-columns:minmax(0,1fr)}
}