/* Astraa Mobile Responsive Fix
   Purpose: keep public website clean, aligned, and readable on phones.
*/

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a,
button {
  max-width: 100%;
}

.container,
.page-container,
.section-container,
.content,
.wrapper,
main,
section {
  max-width: 100%;
}

@media (max-width: 900px) {
  header,
  .site-header,
  .navbar,
  .nav,
  .topbar {
    width: 100%;
    max-width: 100%;
  }

  .nav,
  .navbar,
  .nav-links,
  .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
  }

  .hero,
  .hero-section,
  .landing-hero,
  .pricing-hero {
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero h1,
  .landing-hero h1,
  h1 {
    font-size: clamp(2rem, 9vw, 3.1rem);
    line-height: 1.08;
  }

  .hero p,
  .landing-hero p,
  .lead,
  .subtitle {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 100%;
  }

  .grid,
  .cards,
  .pricing-grid,
  .tools-grid,
  .features-grid,
  .dashboard-grid,
  .workspace-grid,
  .plans-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1rem;
    width: 100%;
  }

  .card,
  .pricing-card,
  .tool-card,
  .feature-card,
  .plan-card,
  .panel {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-row,
  .button-row,
  .actions,
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }

  .cta-row a,
  .button-row a,
  .actions a,
  .hero-actions a,
  .btn,
  .button {
    width: 100%;
    text-align: center;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  header,
  .site-header,
  main,
  section,
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .logo,
  .brand {
    max-width: 100%;
  }

  .pricing-card,
  .tool-card,
  .feature-card,
  .card {
    padding: 1rem;
    border-radius: 1rem;
  }

  h2 {
    font-size: clamp(1.55rem, 7vw, 2.2rem);
    line-height: 1.15;
  }

  h3 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  p,
  li {
    font-size: 0.98rem;
  }
}

/* Astraa Final Mobile Header Structure
   Row 1: logo + brand name + tagline
   Row 2: Home / Tools / Pricing / Support-FAQ / Contact
   Row 3: Workspace button
*/
@media (max-width: 900px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  header,
  .site-header,
  .topbar,
  .navbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.9rem 0.85rem 0.8rem !important;
    gap: 0.55rem !important;
    overflow-x: hidden !important;
  }

  /* ROW 1 — logo + brand/title area */
  header .brand,
  header .logo,
  header .site-brand,
  header .site-title,
  header .brand-name,
  header .brand-title,
  .site-header .brand,
  .site-header .logo,
  .site-header .site-brand,
  .site-header .site-title,
  .site-header .brand-name,
  .site-header .brand-title,
  .navbar .brand,
  .navbar .logo,
  .navbar .site-brand,
  .navbar .site-title,
  .navbar .brand-name,
  .navbar .brand-title {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.18rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Logo only */
  header .brand img,
  header .logo img,
  header .site-brand img,
  header .site-title img,
  .site-header .brand img,
  .site-header .logo img,
  .site-header .site-brand img,
  .site-header .site-title img,
  .navbar .brand img,
  .navbar .logo img,
  .navbar .site-brand img,
  .navbar .site-title img {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 0.15rem auto !important;
  }

  /* Astraa Systems — make only the brand name bigger */
  header .brand strong,
  header .brand b,
  header .brand .brand-name,
  header .brand .brand-title,
  header .brand .site-title,
  header .logo strong,
  header .logo b,
  header .logo .brand-name,
  header .logo .brand-title,
  header .logo .site-title,
  header .site-title,
  header .brand-name,
  header .brand-title,
  .site-header .brand strong,
  .site-header .brand b,
  .site-header .brand .brand-name,
  .site-header .brand .brand-title,
  .site-header .brand .site-title,
  .site-header .logo strong,
  .site-header .logo b,
  .site-header .logo .brand-name,
  .site-header .logo .brand-title,
  .site-header .logo .site-title,
  .site-header .site-title,
  .site-header .brand-name,
  .site-header .brand-title,
  .navbar .brand strong,
  .navbar .brand b,
  .navbar .brand .brand-name,
  .navbar .brand .brand-title,
  .navbar .brand .site-title,
  .navbar .logo strong,
  .navbar .logo b,
  .navbar .logo .brand-name,
  .navbar .logo .brand-title,
  .navbar .logo .site-title,
  .navbar .site-title,
  .navbar .brand-name,
  .navbar .brand-title {
    font-size: 2.6rem !important;
    font-weight: 950 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.065em !important;
    color: #050816 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Connected business tools — bigger than before, but clearly secondary */
  header small,
  header .tagline,
  header .subtitle,
  header .brand-subtitle,
  header .brand-tagline,
  .site-header small,
  .site-header .tagline,
  .site-header .subtitle,
  .site-header .brand-subtitle,
  .site-header .brand-tagline,
  .navbar small,
  .navbar .tagline,
  .navbar .subtitle,
  .navbar .brand-subtitle,
  .navbar .brand-tagline {
    display: block !important;
    width: 100% !important;
    font-size: 1.15rem !important;
    font-weight: 750 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    color: #64748b !important;
    text-align: center !important;
    margin: 0.08rem 0 0 0 !important;
    padding: 0 !important;
  }

  /* ROW 2 — navigation below brand */
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.35rem 0.55rem !important;
    text-align: center !important;
    margin: 0.25rem auto 0 !important;
    padding: 0 !important;
  }

  /* Normal nav links */
  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    padding: 0.25rem 0.42rem !important;
    text-align: center !important;
  }

  /* ROW 3 — Workspace button below nav */
  header a[href*="workspace"],
  header a[href*="Workspace"],
  header a[href*="customer-portal"],
  .site-header a[href*="workspace"],
  .site-header a[href*="Workspace"],
  .site-header a[href*="customer-portal"],
  .navbar a[href*="workspace"],
  .navbar a[href*="Workspace"],
  .navbar a[href*="customer-portal"] {
    display: flex !important;
    width: min(92%, 340px) !important;
    max-width: 340px !important;
    margin: 0.45rem auto 0 !important;
    padding: 0.62rem 1rem !important;
    border-radius: 999px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.96rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  header .brand img,
  header .logo img,
  header .site-brand img,
  header .site-title img,
  .site-header .brand img,
  .site-header .logo img,
  .site-header .site-brand img,
  .site-header .site-title img,
  .navbar .brand img,
  .navbar .logo img,
  .navbar .site-brand img,
  .navbar .site-title img {
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }

  header .brand strong,
  header .brand b,
  header .brand .brand-name,
  header .brand .brand-title,
  header .brand .site-title,
  header .logo strong,
  header .logo b,
  header .logo .brand-name,
  header .logo .brand-title,
  header .logo .site-title,
  header .site-title,
  header .brand-name,
  header .brand-title,
  .site-header .brand strong,
  .site-header .brand b,
  .site-header .brand .brand-name,
  .site-header .brand .brand-title,
  .site-header .brand .site-title,
  .site-header .logo strong,
  .site-header .logo b,
  .site-header .logo .brand-name,
  .site-header .logo .brand-title,
  .site-header .logo .site-title,
  .site-header .site-title,
  .site-header .brand-name,
  .site-header .brand-title,
  .navbar .brand strong,
  .navbar .brand b,
  .navbar .brand .brand-name,
  .navbar .brand .brand-title,
  .navbar .brand .site-title,
  .navbar .logo strong,
  .navbar .logo b,
  .navbar .logo .brand-name,
  .navbar .logo .brand-title,
  .navbar .logo .site-title,
  .navbar .site-title,
  .navbar .brand-name,
  .navbar .brand-title {
    font-size: 2.15rem !important;
  }

  header small,
  header .tagline,
  header .subtitle,
  header .brand-subtitle,
  header .brand-tagline,
  .site-header small,
  .site-header .tagline,
  .site-header .subtitle,
  .site-header .brand-subtitle,
  .site-header .brand-tagline,
  .navbar small,
  .navbar .tagline,
  .navbar .subtitle,
  .navbar .brand-subtitle,
  .navbar .brand-tagline {
    font-size: 1rem !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    font-size: 0.72rem !important;
    padding: 0.22rem 0.34rem !important;
  }
}


/* Astraa Exact Mobile Brand Text Fix
   Purpose: enlarge only the actual Astraa Systems brand name and tagline.
*/
@media (max-width: 900px) {
  .astraa-mobile-brand-title {
    display: block !important;
    font-size: 3.25rem !important;
    font-weight: 950 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.07em !important;
    color: #050816 !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .astraa-mobile-brand-tagline {
    display: block !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    color: #64748b !important;
    text-align: center !important;
    margin: 0.15rem auto 0 !important;
  }
}

@media (max-width: 430px) {
  .astraa-mobile-brand-title {
    font-size: 2.85rem !important;
  }

  .astraa-mobile-brand-tagline {
    font-size: 1.35rem !important;
  }
}

/* Astraa Final Mobile Header Correction
   Purpose: only brand title is large; nav and workspace button stay normal.
*/
@media (max-width: 900px) {
  header,
  .site-header,
  .navbar,
  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.9rem 0.85rem 0.8rem !important;
    gap: 0.55rem !important;
    overflow-x: hidden !important;
  }

  /* Logo */
  header img,
  .site-header img,
  .navbar img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
  }

  /* Brand text only */
  header .brand-name,
  header .brand-title,
  header .site-title,
  .site-header .brand-name,
  .site-header .brand-title,
  .site-header .site-title,
  .navbar .brand-name,
  .navbar .brand-title,
  .navbar .site-title {
    font-size: 2.6rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    color: #050816 !important;
    text-align: center !important;
  }

  /* Tagline */
  header .tagline,
  header .subtitle,
  header .brand-tagline,
  header .brand-subtitle,
  .site-header .tagline,
  .site-header .subtitle,
  .site-header .brand-tagline,
  .site-header .brand-subtitle,
  .navbar .tagline,
  .navbar .subtitle,
  .navbar .brand-tagline,
  .navbar .brand-subtitle {
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    color: #64748b !important;
    text-align: center !important;
  }

  /* Nav must stay normal size */
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.35rem 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    padding: 0.25rem 0.42rem !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Workspace button normal */
  header a[href*="workspace"],
  .site-header a[href*="workspace"],
  .navbar a[href*="workspace"],
  header a[href*="customer-portal"],
  .site-header a[href*="customer-portal"],
  .navbar a[href*="customer-portal"] {
    width: min(92%, 340px) !important;
    max-width: 340px !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    padding: 0.65rem 1rem !important;
    margin-top: 0.35rem !important;
  }
}

/* Astraa Mobile Nav Row Fit Fix
   Purpose: keep second header/nav row inside both mobile edges.
   Does not change brand/logo size.
*/
@media (max-width: 900px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.35rem 0.45rem !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    padding: 0.28rem 0.12rem !important;
    box-sizing: border-box !important;
  }

  /* Workspace button stays below nav and inside viewport */
  header a[href*="workspace"],
  .site-header a[href*="workspace"],
  .navbar a[href*="workspace"],
  header a[href*="customer-portal"],
  .site-header a[href*="customer-portal"],
  .navbar a[href*="customer-portal"] {
    width: calc(100% - 2rem) !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    gap: 0.3rem 0.32rem !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    font-size: 0.76rem !important;
    padding: 0.24rem 0.08rem !important;
  }
}

/* Astraa Mobile Nav Shrink Fix
   Purpose: shrink only the second header nav row so it no longer cuts off at edges.
   Does not change logo, brand name, tagline, or workspace button.
*/
@media (max-width: 900px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.18rem !important;
    overflow: hidden !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    font-size: 0.66rem !important;
    font-weight: 750 !important;
    line-height: 1.05 !important;
    padding: 0.18rem 0.05rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 430px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    gap: 0.1rem !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    font-size: 0.58rem !important;
    padding: 0.16rem 0.02rem !important;
    letter-spacing: -0.025em !important;
  }
}

/* Astraa Mobile Single-Row Nav Final
   Purpose: keep Home / Tools / Pricing / FAQ-Support / Contact on one row without edge cut-off.
   Does not change logo, company name, tagline, or workspace button.
*/
@media (max-width: 900px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 0.12rem !important;
    row-gap: 0 !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    margin: 0.35rem auto 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    padding: 0.18rem 0.02rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  /* Keep workspace button below the nav row */
  header a[href*="workspace"],
  .site-header a[href*="workspace"],
  .navbar a[href*="workspace"],
  header a[href*="customer-portal"],
  .site-header a[href*="customer-portal"],
  .navbar a[href*="customer-portal"] {
    display: flex !important;
    width: calc(100% - 2rem) !important;
    max-width: 340px !important;
    margin: 0.45rem auto 0 !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  header nav,
  header .nav,
  header .nav-links,
  header .menu,
  .site-header nav,
  .site-header .nav,
  .site-header .nav-links,
  .site-header .menu,
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    column-gap: 0.06rem !important;
  }

  header nav a,
  header .nav a,
  header .nav-links a,
  header .menu a,
  .site-header nav a,
  .site-header .nav a,
  .site-header .nav-links a,
  .site-header .menu a,
  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a {
    font-size: 0.54rem !important;
    letter-spacing: -0.045em !important;
    padding: 0.16rem 0 !important;
  }
}

/* ========================================================================
   ARKA EXECUTION: IMMEDIATE DESKTOP ARCHITECTURE RESTORATION
   ======================================================================== */
@media screen and (min-width: 1025px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
    }
    header, main, .main-container, #root {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        display: block !important;
    }
    img[src*="logo"], .logo-container {
        max-width: 180px !important;
        height: auto !important;
    }
    .workflow-container, .features-grid, .grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 30px !important;
        width: 100% !important;
    }
    .workflow-container > *, .features-grid > *, .grid > * {
        flex: 1 !important;
        max-width: 33% !important;
    }
    div[class*="trial"], .cta-box {
        max-width: 750px !important;
        margin: 40px auto !important;
        display: block !important;
    }
}