/* Kyndrava smartphone-first layout fix */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Fixed badges can overlap mobile content; make them flow naturally on small screens. */
@media (max-width: 980px) {
  .aura-gate-patent-no-canonical-v4,
  .aura-patent-badge {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
    z-index: 1 !important;
  }

  .aura-gate-patent-no-canonical-v4 .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  main,
  section,
  article,
  .container,
  .wrap,
  .shell,
  .panel,
  .card,
  .screen,
  .app,
  .app-shell,
  .content,
  .page,
  .hero,
  .box,
  .module {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  h1,
  h2,
  h3,
  p,
  li,
  small,
  strong,
  span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  h1 {
    font-size: clamp(1.85rem, 10.5vw, 2.8rem) !important;
    line-height: 1.12 !important;
  }

  h2 {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.22 !important;
  }

  p,
  li {
    font-size: 1rem !important;
    line-height: 1.72 !important;
  }

  .actions,
  .buttons,
  .button-row,
  .cta-row,
  .control-row,
  .controls,
  .nav-actions,
  .tabs,
  .plans,
  .plan-grid,
  .grid,
  .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  button,
  input[type="button"],
  input[type="submit"],
  a.button,
  a.btn,
  a.cta,
  .button,
  .btn,
  .cta,
  [role="button"],
  [class*="button"],
  [class*="btn"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    margin: 6px 0 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    position: relative !important;
    z-index: 1 !important;
  }

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

  .modal,
  .dialog,
  .overlay,
  .popup {
    position: fixed !important;
    inset: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    overflow: auto !important;
  }

  [style*="position:absolute"],
  [style*="position: absolute"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: clamp(1.7rem, 11vw, 2.35rem) !important;
  }

  button,
  input[type="button"],
  input[type="submit"],
  a.button,
  a.btn,
  a.cta,
  .button,
  .btn,
  .cta,
  [role="button"],
  [class*="button"],
  [class*="btn"] {
    min-height: 50px !important;
    padding: 12px !important;
  }
}