/* ============================================================
   PricingPageSwitch — AI-first / Hybrid / Human-first pricing-page switch.
   Shared primitive: single implementation for the AIR pricing page,
   the Hybrid pricing hero AND the VR pricing hero (PricingHero). 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/Hybrid/Human-first switch is the shared PricingPageSwitch
   primitive (primitives/PricingPageSwitch) — also used by PricingHero
   (VR pricing hero). 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;
  }

}


/* ============================================================
   Design refresh — docs/design-refresh-rules.md, "Pricing". Everything below
   is scoped to `[data-design="refresh"]` on this section's root; the current
   look never sees it. The plan cards and the commitment banners are the shared
   AirPricingPlanCard primitive, restyled from here so the AIR page's own use
   of it is untouched (each Webflow component is its own shadow root).
   ============================================================ */

/* refresh.css steps every refresh section's block padding (96 → 80 → 64).
   This hero has no top padding of its own (the head carries it), so put the
   current top back; the bottom keeps refresh.css's steps. */
.hp-section.air-pricing-hero[data-design="refresh"] {
  padding-top: 0;
}

@media (max-width: 767px) {
  .hp-section.air-pricing-hero[data-design="refresh"] {
    padding-top: 1rem;
  }
}

/* H1: Rowan Light 48/60, stepping down with `.serif-display` (TY-1). The
   heading's `**…**` run is the italic marker (TY-14, MK-1). */
.air-pricing-hero[data-design="refresh"] .page-h1 {
  font-family: var(--font-family-serif);
  font-size:   var(--font-size-serif-display);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-serif-display);
}

/* Plan cards: beige on white, no outlines (BG-8, BD-1, BD-7). The tray (the
   included list) is the darker beige and the inner card the lighter one, the
   order the current Free card already uses, so the inner card keeps an edge on
   the white ground. Radius stays 24 (RD-2). */
.air-pricing-hero[data-design="refresh"] .air-pricing-plan-card {
  background: var(--background);
  border:     0;
}

.air-pricing-hero[data-design="refresh"] .air-pricing-plan-card__main {
  background: var(--secondary);
  border:     0;
}

/* Price: Rowan Light 36/40, the whole string including the unit (TY-4). */
.air-pricing-hero[data-design="refresh"] :is(.air-pricing-plan-card__price, .air-pricing-plan-card__unit) {
  font-family: var(--font-family-serif);
  font-size:   2.25rem;   /* 36px — no token */
  font-weight: var(--font-weight-light);
  line-height: 2.5rem;    /* 40px */
}

/* Commitment banners: beige on white, no outline (BG-8, BD-1). Radius 24
   (RD-2). */
.air-pricing-hero[data-design="refresh"] .air-pricing-commitment-banner {
  border: 0;
}