/* ==========================================================================
   Platform pages and shared responsive corrections.

   Written after the original console stylesheet so these rules win where they
   need to. The main job here is the public sales site: its header was cramped
   on phones and its comparison table was unreadable on narrow screens.
   ========================================================================== */

/* --- platform header ----------------------------------------------------- */

.platform-top {
  padding-inline: clamp(16px, 5vw, 5vw);
  gap: 14px;
}
.platform-top .brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
}
.platform-top nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 35px);
  min-width: 0;
}
.platform-top nav a {
  white-space: nowrap;
}
.platform-top nav a:last-child {
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

@media (max-width: 860px) {
  .platform-top {
    height: 66px;
    padding-inline: 16px;
  }
  .platform-top .brand {
    font-size: 19px;
  }
  .platform-top .brand-mark {
    width: 27px;
    height: 27px;
    font-size: 20px;
  }
  /* Pricing, Themes and Compare live in the page itself; the CTA stays. */
  .platform-top nav a:not(:last-child) {
    display: none;
  }
  .platform-top nav a:last-child {
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .platform-top .brand {
    font-size: 17px;
  }
  .platform-top nav a:last-child {
    font-size: 12px;
  }
}

/* --- platform hero ------------------------------------------------------- */

@media (max-width: 860px) {
  .cmp-hero {
    padding: 56px 20px 48px;
  }
  .cmp-hero h1 {
    font-size: clamp(2.1rem, 9.5vw, 3.4rem);
    max-width: none;
    margin: 14px 0;
  }
  .cmp-hero p {
    font-size: 1rem;
  }
  .cmp-price-row {
    gap: 22px;
    margin-top: 30px;
  }
  .cmp-price-row b {
    font-size: 26px;
  }
  .cmp-price-row div {
    flex: 1 1 40%;
  }
  .hero-eyebrow {
    font-size: 10px;
  }
  .platform-hero {
    padding: 48px 20px 56px;
  }
  .platform-hero h1 {
    font-size: clamp(2.6rem, 12vw, 4.4rem);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 26px;
  }
  .hero-actions .btn-dark,
  .hero-actions .btn-outline {
    width: 100%;
  }
}

/* --- platform sections --------------------------------------------------- */

@media (max-width: 860px) {
  .platform-pricing,
  .platform-themes,
  .platform-flow,
  .cmp-body {
    padding: 56px 20px 64px;
  }
  .cmp-body table,
  .cmp-body thead {
    min-width: 0;
  }
  .cmp-body th,
  .cmp-body td {
    padding: 12px 10px;
    font-size: 13px;
  }
  .cmp-body thead th small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    opacity: 0.8;
  }
  .cmp-body tbody th {
    padding-top: 26px;
  }
  /* Keep the feature column readable while the figures scroll. */
  .cmp-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cmp-scroll-x table {
    min-width: 640px;
  }
  .cmp-scroll-x td:first-child,
  .cmp-scroll-x th:first-child {
    position: sticky;
    left: 0;
    background: #fafbf7;
    z-index: 2;
    box-shadow: 1px 0 0 #e2e7df;
  }
  .platform-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 20px;
  }
  .platform-footer span:first-child {
    font-size: 22px;
  }
  .section-heading h2,
  .platform-flow h2 {
    font-size: clamp(1.9rem, 7.5vw, 2.8rem);
  }
  .platform-pricing h2 {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .platform-pricing h3 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .theme-image {
    height: 220px;
  }
  .cmp-disclaimers {
    font-size: 11px;
  }
}

/* --- console on small screens ------------------------------------------- */

@media (max-width: 750px) {
  .admin-header h1 {
    font-size: 24px;
  }
  .form-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .cz-wrap {
    grid-template-columns: 1fr;
  }
  .cz-side,
  .cz-preview {
    position: static;
    max-height: none;
  }
  .cz-presets {
    grid-template-columns: 1fr;
  }
  .table-wrap table {
    font-size: 12px;
  }
  .dashboard-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}