/* ---------------------------------------------------------------------------
   Partner spotlight — "No VPS" option (AI Telegram Copier)
   Used by the #no-vps-partner section on the home page.

   Plain CSS on purpose. ./style.css is a *compiled* Tailwind build and the
   Dockerfile only COPYs files (no `npm run build` at deploy time), so any
   Tailwind class that is new to the markup may not exist in style.css and
   would silently render unstyled. Everything this section needs lives here,
   so it renders correctly with or without a Tailwind rebuild.
   --------------------------------------------------------------------------- */

.atc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 9999px;
  padding: 0.45rem 0.8rem;
  margin-bottom: 1.15rem;
}

/* Card ------------------------------------------------------------------- */
.atc-card {
  background: linear-gradient(160deg, rgba(23, 30, 42, 0.95), rgba(17, 24, 39, 0.55));
  border: 1px solid #1f2937;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.75);
}
@media (min-width: 768px) {
  .atc-card {
    padding: 2.25rem;
  }
}

.atc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #1f2937;
}

.atc-wordmark {
  font-family: 'Uncut Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f9fafb;
}
.atc-wordmark em {
  font-style: normal;
  color: #10b981;
}

.atc-tagline {
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 0.4rem;
  max-width: 34rem;
}

/* Buttons ---------------------------------------------------------------- */
.atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.72rem 1.15rem;
  border-radius: 0.5rem;
  color: #03140e;
  background: linear-gradient(180deg, #34d399, #10b981);
  box-shadow: 0 12px 26px -14px rgba(16, 185, 129, 0.75);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.atc-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.atc-btn em {
  font-style: normal;
  transition: transform 0.15s ease;
}
.atc-btn:hover em {
  transform: translateX(2px);
}

.atc-btn-ghost {
  color: #93c5fd;
  background: transparent;
  border: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: none;
}
.atc-btn-ghost:hover {
  filter: none;
  border-color: rgba(59, 130, 246, 0.75);
}

/* Two columns ------------------------------------------------------------ */
.atc-cols {
  display: grid;
  gap: 1.75rem;
  padding: 1.5rem 0;
}
@media (min-width: 768px) {
  .atc-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

.atc-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d1d5db;
  margin-bottom: 0.9rem;
}

.atc-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.atc-li {
  display: flex;
  gap: 0.65rem;
  color: #9ca3af;
  font-size: 0.95rem;
  line-height: 1.55;
}
.atc-li b {
  color: #e5e7eb;
  font-weight: 600;
}
.atc-check {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.36rem;
  fill: #10b981;
}
.atc-check--blue {
  fill: #3b82f6;
}

/* Compare table ---------------------------------------------------------- */
.atc-table {
  border-top: 1px solid #1f2937;
}
.atc-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.75fr) 1.15fr 1.15fr;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #1f2937;
  font-size: 0.875rem;
  line-height: 1.5;
}
.atc-row:last-child {
  border-bottom: 0;
}
.atc-label {
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}
.atc-us {
  color: #e5e7eb;
}
.atc-them {
  color: #9ca3af;
}
.atc-headrow .atc-us,
.atc-headrow .atc-them {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d1d5db;
}
.atc-headrow .atc-them {
  color: #34d399;
}

@media (max-width: 639px) {
  .atc-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .atc-us::before {
    content: 'Us — ';
    color: #6b7280;
  }
  .atc-them::before {
    content: 'Partner — ';
    color: #6b7280;
  }
  .atc-headrow {
    display: none;
  }
}

/* Footer of card --------------------------------------------------------- */
.atc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #1f2937;
}
.atc-disclosure {
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 30rem;
}
.atc-disclosure a {
  color: #9ca3af;
  text-decoration: underline;
}