/* livedropr — additional multi-page site styles.
 * Loaded after styles.css on features / how / pricing pages. */

/* ────────────────────────────────────────────────────────────────
 * Feature-tile grid responsive behavior
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ld-feature-tile-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 800px) {
  .ld-feature-tile-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .ld-feature-tile-grid { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────────────────────────
 * Comparison table responsive — stack into card grid on tablet
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ld-compare-head { display: none !important; }
  .ld-compare-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 20px 22px !important;
  }
  .ld-compare-row > :nth-child(1) {
    font-size: 17px !important;
    margin-bottom: 6px;
  }
  .ld-compare-row > :nth-child(2)::before {
    content: "Typical selling assistant";
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    color: rgba(15,23,42,0.4); text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ld-compare-row > :nth-child(3)::before {
    content: "livedropr";
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    color: #7C3AED; text-transform: uppercase;
    margin-bottom: 4px;
  }
}

/* ────────────────────────────────────────────────────────────────
 * How-it-works step list
 * ──────────────────────────────────────────────────────────────── */
.ld-step-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.ld-step-row:last-child { border-bottom: none; }
.ld-step-row--reverse .ld-step-visual { order: 3; }
.ld-step-row--reverse .ld-step-body  { order: 2; }

.ld-step-number {
  font-size: 84px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #A78BFA 0%, #EC4899 60%, #FED7AA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 4px 6px 8px 0;
  overflow: visible;
}

/* Tablet and narrow desktop — stack early so the body text doesn't
 * crash into the dark visual card. The 3-col grid (number + body + visual)
 * is cramped below ~1080px even with minmax(0,1fr) on the columns. */
@media (max-width: 1080px) {
  .ld-step-row {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 64px 0;
  }
  .ld-step-row--reverse .ld-step-visual { order: 1; }
  .ld-step-row--reverse .ld-step-body  { order: 2; }
  .ld-step-number { font-size: 72px; }
}

@media (max-width: 640px) {
  .ld-step-row { padding: 48px 0; }
  .ld-step-number { font-size: 56px; }
}

/* ────────────────────────────────────────────────────────────────
 * Pricing tier grid (3-up)
 * ──────────────────────────────────────────────────────────────── */
.ld-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .ld-tier-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* "Why we cost more" 3-up grid */
@media (max-width: 900px) {
  .ld-honest-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ────────────────────────────────────────────────────────────────
 * Timeline (6-col on desktop, wraps down)
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ld-timeline-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .ld-timeline-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ────────────────────────────────────────────────────────────────
 * Producer Desk card gallery responsive
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ld-card-gallery { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .ld-card-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 460px) {
  .ld-card-gallery { grid-template-columns: 1fr !important; }
}

/* How-stats strip wraps cleanly on phone */
@media (max-width: 540px) {
  .ld-how-stats { flex-direction: column; align-items: stretch; gap: 16px !important; }
  .ld-how-stats > div[style*="background"] { display: none; }
}