/* Equal-height feature cards keep the mobile and desktop grids balanced. */
.guest-only[hidden]{display:none!important}.feature-card{height:350px;min-height:350px;overflow:hidden}.feature-card small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5}.feature-card strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.feature-ai{height:350px!important;min-height:350px!important}.feature-ai small{display:block;overflow:visible;-webkit-line-clamp:unset}.feature-ai strong{display:block!important;overflow:visible!important;min-height:0!important;-webkit-line-clamp:unset!important}.feature-ai strong span{display:block}.feature-card::before{flex:0 0 auto}.feature-card .arrow,.feature-card .ai-arrow{align-self:end}@media(min-width:900px){.feature-card,.feature-ai{height:350px!important;min-height:350px!important}.feature-card small{-webkit-line-clamp:5}}@media(max-width:560px){.feature-card,.feature-ai{height:330px!important;min-height:330px!important;padding:14px!important;gap:7px}.feature-card small{font-size:.76rem;line-height:1.75}.feature-card strong{font-size:.94rem}.feature-card::before{width:84px;height:58px}.feature-ai::before{width:84px;height:58px}.feature-ai::after{top:11px;left:11px;min-height:25px;padding:0 8px;font-size:.57rem}}

/* More prominent touch targets for every action arrow on the home cards. */
.feature-card .arrow,
.feature-ai .ai-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(84, 132, 230, .12);
  box-shadow: 0 7px 15px rgba(55, 92, 168, .12);
  font-family: Arial, sans-serif;
  font-size: 1.75rem !important;
  font-weight: 900;
  line-height: 1;
}

.feature-card .arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.feature-card { position: relative; }

.feature-ai .ai-arrow {
  position: absolute !important;
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  transform: none;
}

.feature-card .arrow,
.feature-ai .ai-arrow {
  font-size: 0 !important;
}

.feature-card .arrow::before,
.feature-ai .ai-arrow::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12H4m0 0 7 7M4 12l7-7' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12H4m0 0 7 7M4 12l7-7' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Keep the longer AI title and its explanation in separate rows on narrow screens. */
@media (max-width: 560px) {
  .feature-ai {
    grid-template-rows: 58px 72px minmax(0, 1fr) auto;
  }

  .feature-ai strong {
    min-height: 72px !important;
    margin-top: 16px;
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  .feature-ai small {
    max-width: 100%;
    font-size: .72rem !important;
    line-height: 1.75 !important;
  }

  .feature-ai .ai-arrow {
    width: 38px;
    height: 38px;
    position: absolute;
    right: 14px;
    bottom: 16px;
  }

  .feature-ai small { padding-bottom: 52px; }
}

/* Small-screen safeguards: Persian copy and user-provided names never create
   a horizontal scrollbar or push cards wider than the device. */
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  .phone-shell, .home-screen, .hero-card, .hero-copy, .feature-grid,
  .feature-card, .mobile-about-link { min-width: 0; }
  .hero-copy p, .feature-card strong, .feature-card small,
  .mobile-about-link b, .mobile-about-link small { overflow-wrap: anywhere; }
}

/* Keep the feature cards compact on phones without changing their design. */
.feature-card,
.feature-ai {
  height: 272px !important;
  min-height: 272px !important;
}

.feature-card small,
.feature-ai small {
  -webkit-line-clamp: 3 !important;
  line-height: 1.72 !important;
}

@media (max-width: 560px) {
  .feature-card,
  .feature-ai {
    height: 262px !important;
    min-height: 262px !important;
  }
}

@media (min-width: 760px) {
  .feature-card,
  .feature-ai {
    height: 248px !important;
    min-height: 248px !important;
  }
}