/* ============================================================
   PricingPageSwitch — AI-first / Human-first pricing-page switch.
   Shared primitive: single implementation for the AIR pricing page
   AND the VR pricing hero (behind PricingHero's `useNewPageSwitch`
   flag). Do not fork a per-page copy of this.
   ============================================================ */

.pricing-page-switch {
  display:        flex;
  align-items:    center;
  gap:            1rem;
  width:          fit-content;
  max-width:      100%;
  margin-left:    calc(var(--spacing-5) * -1);
  padding:        var(--spacing-1-5) var(--spacing-1-5) var(--spacing-1-5) var(--spacing-5);
  border-radius:  var(--radius-full);
  background:     var(--card);
  box-shadow:
    0 6px 18px rgba(40, 40, 37, 0.1),
    0 0 6px rgba(40, 40, 37, 0.06);
  box-sizing:     border-box;
}

.pricing-page-switch__label {
  flex:        0 0 auto;
  color:       var(--muted-foreground);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .pricing-page-switch {
    align-items:    stretch;
    width:          100%;
    height:         auto;
    margin-left:    0;
    padding:        0;
    border-radius:  0;
    background:     transparent;
    box-shadow:     none;
    flex-direction: column;
  }

  .pricing-page-switch__label {
    display: none;
  }

  .pricing-page-switch .seg-tabs {
    align-self: stretch;
    background: var(--muted);
    width:      100%;
  }

  .pricing-page-switch .seg-tabs__tab:hover {
    background: var(--opacity-background-50);
  }

  .pricing-page-switch .seg-tabs__tab.is-active:hover {
    background: var(--card);
  }

  .pricing-page-switch .seg-tabs__tab {
    flex: 1 1 0;
  }
}

/* ============================================================
   AirPricingHeroSection — AIR pricing-page hero.

   Layout: left-aligned heading block and a 3-card pricing row.
   No sticky badge / section-header convention here.

   The cards themselves (tray + inner card + included list) are the
   shared AirPricingPlanCard primitive — this file only owns the plans
   grid/flex wrapper around them. See
   docs/component-unification-playbook.md.

   The AI-first/Human-first switch is the shared PricingPageSwitch
   primitive (primitives/PricingPageSwitch) — also used by PricingHero
   (VR pricing hero, behind `useNewPageSwitch`). Its CSS lives there,
   not here.
   ============================================================ */

.air-pricing-hero {
  background: var(--background);
  padding-top: 0;
}

/* Single container holds the pricing stack. */
.air-pricing-hero .container {
  display:        flex;
  flex-direction: column;
}

.air-pricing-hero__pricing-stack {
  display:        flex;
  flex-direction: column;
  gap:            6rem;   /* 96px head -> plans */
}


.air-pricing-hero__top {
  display:        flex;
  flex-direction: column;
}

/* ============================================================
   1 — Heading block (left-aligned)
   ============================================================ */

.air-pricing-hero__head {
  gap:            3rem;   /* 48px H1 -> intro */
  max-width:      none;
  padding-top:    96px;  /* Preserves hero top rhythm when the switch is hidden. */
  box-sizing:     border-box;
}


.air-pricing-hero__intro--mobile {
  display: none;
}


/* ============================================================
   2 — Pricing packages (shared AirPricingPlanCard; this section only
   owns the grid wrapper — 3 columns, subgrid row-alignment across
   siblings when supported) + the commitment banner below the row.
   ============================================================ */

.air-pricing-hero__plans-row {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px plans -> commitment banner */
}

.air-pricing-hero__plans {
  display:     flex;
  gap:         1rem;   /* 16px */
  align-items: stretch;
}

@supports (grid-template-rows: subgrid) {
  .air-pricing-hero__plans {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows:    repeat(7, auto);
    align-items:           stretch;
  }
}

/* Two commitment banners side by side ("Other solutions" in Figma) —
   equal-width, stacks to a column at tablet. */
.air-pricing-hero__solutions-row {
  display:     flex;
  gap:         0.625rem;   /* 10px */
  align-items: stretch;
}

.air-pricing-hero__solutions-row > .air-pricing-commitment-banner {
  flex:      1 1 0;
  min-width: 0;
}

/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .air-pricing-hero__pricing-stack {
    gap: 4rem;
  }

  .air-pricing-hero__plans-row {
    align-items: center;
    gap:         1rem;
  }

  .air-pricing-hero__plans {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    gap:            1rem;
  }

  .air-pricing-hero__plans > .air-pricing-plan-card {
    flex:      none;
    width:     100%;
  }

  .air-pricing-hero__plans-row > .air-pricing-hero__solutions-row {
    width: 100%;
  }

  .air-pricing-hero__solutions-row {
    flex-direction: column;
    gap:            1rem;
  }
}

/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {

  .air-pricing-hero {
    padding-top: 1rem;
  }

  .air-pricing-hero__pricing-stack {
    gap: 2.625rem;   /* 42px copy -> cards */
  }


  .air-pricing-hero__intro--desktop {
    display: none;
  }

  .air-pricing-hero__intro--mobile {
    display: block;
  }

  .air-pricing-hero__plans {
    gap:           1rem;
    margin-inline: -1rem;
  }

  .air-pricing-hero__plans-row {
    gap: 1rem;
  }

}