/* Shared guardrails for narrow viewports. Loaded after each page stylesheet. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

.container,
.app-shell,
.flow-main,
.steps-wrap,
.hero,
.hero-copy,
.hero-visual,
.blog-container,
.blog-hero-inner,
.blog-toolbar,
.blog-content,
.newsletter-inner,
.admin-container,
.admin-main,
.admin-login,
.admin-layout,
.admin-list-card,
.admin-editor-card,
.dash-shell,
main,
.content,
.view {
  min-width: 0;
}

.hero-copy,
.blog-hero-copy,
.newsletter-inner > div,
.admin-login-copy,
.admin-post-main,
.page-title,
.connection-card > div:nth-child(2) {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .content,
  .admin-main {
    width: 100%;
  }

  .topbar,
  .view-toolbar,
  .reports-toolbar,
  .welcome-row,
  .blog-list-head,
  .admin-page-head {
    min-width: 0;
  }
}

.footer-contact .contact-note{display:flex;align-items:center;gap:10px;margin-bottom:12px}.footer-contact .contact-note>span{width:34px;height:34px;border-radius:10px;background:#262335;display:grid;place-items:center;color:#a990ff}.footer-contact .contact-note>div{display:flex;flex-direction:column}.footer-contact .contact-note small{font-size:8px;color:#85818f}.footer-contact .contact-note b{font-size:10px;margin-top:2px}
/* Landing CTA and pricing tiers */
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}.pricing-grid .plan-card{min-width:0;display:flex;flex-direction:column}.pricing-grid .plan-card ul{flex:1}.plan-icon.pro{background:#fff1de;color:#c17d22}.hero-actions>.button:first-child{position:relative;overflow:hidden;background:linear-gradient(135deg,#7d5bff,#5d3fe8);box-shadow:0 16px 34px rgba(109,74,255,.34);isolation:isolate}.hero-actions>.button:first-child:before{content:"";position:absolute;inset:0 auto 0 -70%;width:48%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:ctaShine 3.8s ease-in-out infinite;z-index:-1}.hero-actions>.button:first-child:hover{box-shadow:0 20px 42px rgba(109,74,255,.42);transform:translateY(-4px)}@keyframes ctaShine{0%,35%{left:-70%}70%,100%{left:130%}}
@media(max-width:950px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-grid .pro-plan{grid-column:1/-1;max-width:calc(50% - 10px);justify-self:center}}
@media(max-width:600px){.nav-actions .button-sm{font-size:12px!important;width:auto!important;height:auto!important;padding:10px 13px!important}.nav-actions .button-sm:after{content:none!important}.pricing-grid{grid-template-columns:1fr}.pricing-grid .pro-plan{grid-column:auto;max-width:none}.hero-actions>.button:first-child{width:100%}}/* Keep subscription tiers aligned with the landing page. */
.billing-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}.billing-grid .billing-plan{min-width:0;display:flex;flex-direction:column}.billing-grid .billing-plan ul{flex:1}
@media(max-width:950px){.billing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-grid .billing-plan:last-child{grid-column:1/-1;max-width:calc(50% - 7px);justify-self:center}}
@media(max-width:760px){.billing-grid{grid-template-columns:1fr}.billing-grid .billing-plan:last-child{grid-column:auto;max-width:none}}/* The footer now has three columns after removing the trust badge. */
.footer-main{grid-template-columns:1.4fr .7fr 1fr}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:390px){.footer-main{grid-template-columns:1fr}}.article-copy h2{font-size:24px;line-height:1.7;color:var(--ink);margin:35px 0 12px}.article-copy h2:first-child{margin-top:0}
@media(max-width:600px){.article-copy h2{font-size:21px;margin-top:28px}}
/* Stable touch viewport and overflow guardrails across mobile pages. */
html,body{overscroll-behavior-x:none}
body{min-height:100svh;touch-action:pan-y}
:where(p,h1,h2,h3,h4,li,a,span,small,strong,td,th){overflow-wrap:anywhere}
:where(.table-wrap,.automation-table,.article-table-wrap){overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
:where(.modal,.modal-card,.modal-backdrop){max-width:100vw}
@media(max-width:760px){
  input,textarea,select{font-size:16px!important}
  :where(.modal,.modal-backdrop){max-height:100dvh}
  :where(.modal-card,.modal-backdrop>.modal){max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior-y:contain}
}
@media(hover:none){
  :where(.button,.btn,.choice-card,.feature,.post-card,.article-card,.plan-card,.blog-primary,.legal-nav>a:last-child):hover{transform:none!important}
}