/* Mobile-first public form card flow.
   Purpose: show one collection card at a time and avoid stacked button walls. */

.card-deck {
  margin-top: 0.75rem;
}

.card-deck .compact-heading h2 {
  font-size: clamp(1.65rem, 7vw, 2.25rem);
}

.card-deck .compact-stepper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-deck .draft-status,
.card-deck .status-box {
  margin-bottom: 0.75rem;
}

.card-deck .form-step {
  display: block;
  min-height: auto;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(0, 51, 102, 0.08);
}

.card-deck .form-step[hidden] {
  display: none !important;
}

.card-deck .form-step.active {
  animation: card-in 160ms ease-out;
}

.card-deck .card-actions {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
}

.card-deck .card-actions > [hidden] {
  display: none !important;
}

.card-deck .card-actions button {
  flex: 1 1 0;
  min-width: 0;
}

.card-deck .card-actions button:only-child,
.card-deck .card-actions button:not([hidden]):first-child:last-child {
  flex-basis: 100%;
}

.card-deck .secondary-button {
  max-width: 42%;
}

.card-deck .primary-button {
  min-height: 3.25rem;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .hero-panel {
    padding: 1rem;
  }

  .hero-panel h1 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .hero-text {
    margin-bottom: 0.8rem;
  }

  .micro-trust,
  .quick-pay-panel {
    display: none;
  }

  .card-deck {
    margin-top: 0.75rem;
    padding: 0.85rem;
  }

  .card-deck .compact-heading .eyebrow,
  .card-deck .compact-heading h2 {
    display: none;
  }

  .card-deck .compact-heading p:last-child {
    margin-top: 0;
    font-size: 0.95rem;
  }

  .card-deck .compact-stepper {
    margin: 0.75rem 0;
  }

  .card-deck .compact-stepper li {
    padding: 0.5rem;
    font-size: 0.86rem;
  }

  .card-deck .draft-status {
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
  }

  .card-deck .form-step {
    padding: 0.9rem;
  }

  .card-deck .form-step h3 {
    font-size: 1.35rem;
  }

  .card-deck .step-intro {
    font-size: 0.96rem;
  }

  .card-deck input,
  .card-deck select,
  .card-deck textarea {
    min-height: 3.15rem;
    font-size: 1rem;
  }

  .card-deck textarea {
    min-height: 5.5rem;
  }

  .card-deck .card-actions {
    position: sticky;
    bottom: 0.5rem;
    z-index: 5;
    padding: 0.5rem;
    margin: 0.75rem -0.35rem -0.35rem;
    border-radius: 999px;
    background: rgba(238, 243, 248, 0.96);
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.16);
  }

  .card-deck .card-actions button {
    width: auto;
    min-height: 3rem;
    border-radius: 999px;
    font-size: 0.96rem;
  }

  .card-deck .card-actions button:not([hidden]):only-of-type {
    flex-basis: 100%;
  }
}