/* Shared mobile layout polish for Cardintel pages. */
@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    overflow-x: hidden;
    background-attachment: scroll !important;
  }

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

  .wrap,
  .container,
  .inner,
  .nav-inner,
  .page,
  .content,
  .site-main,
  main.wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wrap,
  .container,
  .inner,
  .page,
  .content,
  main.wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-nav,
  .nav {
    max-width: 100%;
  }

  .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px;
    padding: 8px 10px !important;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .site-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 10px !important;
  }

  .nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .nav-links {
    display: flex !important;
    gap: 8px !important;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px !important;
    border-radius: 999px;
    white-space: nowrap;
  }

  h1,
  .hero h1 {
    font-size: clamp(1.9rem, 11vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .section-head h2 {
    font-size: clamp(1.35rem, 7vw, 2.1rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  h3 {
    line-height: 1.2 !important;
  }

  p,
  li,
  .lead,
  .intro {
    font-size: min(1rem, 16px) !important;
    line-height: 1.55 !important;
  }

  .hero,
  .hero-grid,
  .hero-inner,
  .section,
  .section-card,
  .page-card,
  .card,
  .tile,
  .feature-card,
  .note-card,
  .rate-card,
  .panel,
  .plan-card,
  .profile-card,
  .auth-card,
  .login-card,
  .signup-card,
  .dashboard-card,
  .cta-box {
    max-width: 100%;
    border-radius: 12px !important;
  }

  .hero,
  .section,
  .section-card,
  .page-card,
  .card,
  .tile,
  .feature-card,
  .note-card,
  .rate-card,
  .panel,
  .plan-card,
  .profile-card,
  .auth-card,
  .login-card,
  .signup-card,
  .dashboard-card,
  .cta-box {
    padding: 16px !important;
  }

  .hero,
  .section {
    min-height: auto !important;
  }

  .grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .two,
  .three,
  .four,
  .hero-grid,
  .hero-inner,
  .section-head,
  .card-grid,
  .cards-grid,
  .feature-grid,
  .features-grid,
  .solution-grid,
  .solutions-grid,
  .product-grid,
  .plans-grid,
  .pricing-grid,
  .rate-grid,
  .roadmap-grid,
  .trust-grid,
  .layer-grid,
  .metrics-grid,
  .preview-grid,
  .interaction-grid,
  .control-grid,
  .form-grid,
  .address-grid,
  .color-grid,
  .style-controls-grid,
  .plan-feature-grid,
  .price-ladder,
  .recommendation,
  .workflow,
  .estimate,
  .estimate-form,
  .concierge-grid,
  .screen-grid,
  .mvp-flow,
  .use-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-actions,
  .actions,
  .cta-row,
  .product-actions,
  .table-actions,
  .button-row,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .button,
  button,
  input[type="submit"],
  input[type="button"],
  .cart-action,
  .cart-control {
    max-width: 100%;
  }

  .hero-actions .button,
  .actions .button,
  .cta-row .button,
  .cta-row a,
  .product-actions button,
  .table-actions button,
  .form-actions button,
  .form-actions a {
    width: 100%;
  }

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

  input,
  select,
  textarea {
    width: 100%;
    font-size: 16px !important;
  }

  table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: normal;
  }

  .legal-footer,
  footer.legal-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: center;
  }

  .elektra-widget,
  .language-widget,
  .language-switcher,
  .translator-widget {
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 520px) {
  .wrap,
  .container,
  .inner,
  .page,
  .content,
  main.wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nav {
    grid-template-columns: 1fr !important;
  }

  .page-card,
  .hero,
  .section,
  .section-card,
  .card,
  .tile,
  .feature-card,
  .note-card,
  .rate-card,
  .panel,
  .plan-card,
  .profile-card,
  .auth-card,
  .login-card,
  .signup-card,
  .dashboard-card,
  .cta-box {
    padding: 14px !important;
  }

  h1,
  .hero h1 {
    font-size: clamp(1.65rem, 12vw, 2.45rem) !important;
  }
}