/* ==========================================================================
   Mobile Fixes — Login + Onboarding Steps 1-3
   Target: 375px (iPhone SE/mini) and up
   ========================================================================== */

/* -----------------------------------------------------------------------
   LOGIN PAGE — Mobile
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Tighten card padding */
  .onboarding-page {
    padding: var(--space-6) var(--space-3) !important;
  }

  .onboarding-card {
    padding: var(--space-6) var(--space-5) !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Full-width inputs with 16px font (prevents iOS zoom) */
  .onboarding-card .form-input {
    font-size: 16px !important;
    height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Login heading */
  .onboarding-card h3 {
    font-size: 20px !important;
    margin-bottom: var(--space-6) !important;
  }

  /* Form groups spacing */
  .onboarding-form__group {
    margin-bottom: var(--space-4) !important;
  }

  /* Labels */
  .onboarding-form__label {
    font-size: 14px !important;
  }

  /* Submit button */
  .btn-primary.btn-full {
    font-size: 16px !important;
    padding: 14px 16px !important;
    height: 48px !important;
  }

  /* Logo smaller on mobile */
  .onboarding-logo {
    font-size: 15px !important;
    margin-bottom: var(--space-5) !important;
  }
}

/* -----------------------------------------------------------------------
   STEP 3 — Plan Page Mobile
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
  .step3-header h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .step3-header p {
    font-size: 14px !important;
    padding: 0 4px;
  }

  /* Email/name inputs */
  .step3-header + div input,
  #checkout-name,
  #checkout-email {
    font-size: 16px !important;
  }

  /* Plan cards full width */
  .plan-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  .s3-card {
    padding: 24px 20px 20px !important;
  }

  .s3-card .plan-price {
    font-size: 32px !important;
  }

  .s3-card .plan-name {
    font-size: 18px !important;
  }

  .s3-card .features li {
    font-size: 13px !important;
  }

  .s3-card .cta-btn {
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* Billing toggle */
  .billing-toggle-wrap {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Trust strip */
  .trust-strip {
    gap: 12px 16px !important;
  }

  .trust-strip .trust-item {
    font-size: 12px !important;
  }

  /* Guarantee bar */
  .guarantee-bar {
    padding: 12px 10px !important;
  }

  .guarantee-bar span {
    font-size: 13px !important;
  }

  /* CTA button on step 2 */
  .s2-cta-btn {
    padding: 16px 24px !important;
    font-size: 16px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* -----------------------------------------------------------------------
   STEP 2 — Preview Page Mobile (375px)
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
  .s2-wrap {
    padding: 20px 12px 48px !important;
  }

  .s2-hero__title {
    font-size: 20px !important;
  }

  .s2-section-title {
    font-size: 20px !important;
  }

  .s2-section-sub {
    font-size: 14px !important;
  }

  /* Math boxes — stack vertically */
  .s2-math {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .s2-math__box {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .s2-math__big {
    font-size: 28px !important;
  }

  .s2-math__arrow {
    transform: rotate(90deg);
  }

  /* Info cards single column */
  .s2-info-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .s2-info-card {
    padding: 14px !important;
  }

  .s2-info-card__value {
    font-size: 14px !important;
    word-break: break-word;
  }

  /* Keyword grid single column */
  .s2-kw-grid {
    grid-template-columns: 1fr !important;
  }

  /* Example items */
  .s2-example {
    padding: 16px !important;
  }

  .s2-example__item {
    font-size: 13px !important;
  }

  /* Kicker text */
  .s2-kicker,
  .s2-kw-kicker {
    font-size: 14px !important;
    padding: 16px !important;
  }

  /* Timeline phases */
  .s2-timeline-grid {
    grid-template-columns: 1fr !important;
  }

  .s2-phase {
    padding: 18px !important;
  }

  .s2-phase__title {
    font-size: 16px !important;
  }

  .s2-phase__desc {
    font-size: 13px !important;
  }

  /* Process steps */
  .s2-step {
    padding: 16px !important;
    gap: 12px !important;
  }

  .s2-step__num {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .s2-step__title {
    font-size: 15px !important;
  }

  .s2-step__desc {
    font-size: 13px !important;
  }

  /* Services pills wrap properly */
  .s2-pills {
    gap: 6px !important;
  }

  .s2-pill {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* Confidence badge */
  .s2-confidence {
    font-size: 12px !important;
  }

  /* Secondary link */
  .s2-secondary {
    font-size: 13px !important;
  }
}

/* -----------------------------------------------------------------------
   Prevent horizontal overflow on all mobile sizes
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Ensure nothing breaks out of viewport */
  .onboarding-card,
  .onboarding-card--wide,
  .s2-container,
  .s1-card,
  .plan-grid,
  .s2-math,
  [data-step="3"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}