/*
 * Quomira mobile rescue pass
 *
 * Scope: first-run mobile funnel only. This stylesheet intentionally leaves
 * desktop intact and does not change calculator inputs, pricing, entitlement,
 * or result behavior.
 */

@media (max-width: 720px) {
  /* Keep the first mobile screen focused on the promise and the primary action. */
  body.home-page[data-theme="light"] {
    background: #f5f6f8;
  }

  .home-page .wrap {
    margin-top: 16px;
    margin-bottom: 28px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .home-page .homepage-topbar {
    padding: 14px 0 18px;
  }

  .home-page .homepage-hero-copy h1 {
    max-width: 15ch;
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.04;
  }

  .home-page .homepage-hero-copy .hero-authority,
  .home-page .hero-chips,
  .home-page .hero-micro {
    display: none;
  }

  .home-page .hero-note {
    margin-top: 12px;
  }

  .home-page .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .home-page .hero-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  /*
   * These are useful desktop education sections, but on mobile they create a
   * multi-screen wall before a visitor reaches the product. Pro quick starts
   * use a different aria label and remain available to Pro users.
   */
  .home-page .homepage-hero-preview,
  .home-page section[aria-label="Example scenarios"] {
    display: none;
  }

  /* Make the calculator unmistakably the next destination after the hero. */
  .home-page #calculator {
    scroll-margin-top: 76px;
    margin-top: 0;
    padding: 18px 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
  }

  .home-page #calculator .calc-header {
    align-items: flex-start;
    margin-top: 0 !important;
    gap: 0;
  }

  .home-page #calculator .calc-header-left {
    gap: 4px;
  }

  .home-page #calculator .calc-header-left::before {
    content: "Start your quote";
    display: block;
    margin-bottom: 2px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .home-page #calculator .calc-header-left h2 {
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  .home-page #calculator .calc-header-support,
  .home-page #calculator .calc-header-right {
    display: none;
  }

  .home-page #calculator .calc-form-topbar {
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
  }

  .home-page #calculator .stepper {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0;
  }

  .home-page #calculator .step {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 9px;
    font-size: 12px;
  }

  .home-page #calculator .presets-trigger .btn {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .home-page #calculator .form-sections {
    margin-top: 14px;
  }

  .home-page #calculator .form-section-head {
    margin-bottom: 14px;
  }

  .home-page #calculator .form-section-head h3 {
    font-size: 16px;
  }

  .home-page #calculator .form-section-head > p {
    display: none;
  }

  /* Flatten the first-step field stack: one calculator surface, not cards in cards. */
  .home-page #calculator .form-section[data-section="audience"] .grid.grid-2 {
    gap: 12px;
  }

  .home-page #calculator .form-section[data-section="audience"] .grid.grid-2 > label {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-page #calculator .form-section[data-section="audience"] select,
  .home-page #calculator .form-section[data-section="audience"] input {
    min-height: 48px;
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  .home-page #calculator .form-section[data-section="audience"] .field-help {
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
  }
}