/* ============================================================
   Get Started Commitment Section

   Rebuilds the native Webflow Commitment instance as one page-
   specific unit: guarantee content followed by shared, current
   AIR pricing. The pricing implementation remains owned by
   AirPricingV2Section so this page cannot drift to stale plans.
   ============================================================ */

.get-started-commitment,
.get-started-commitment__guarantee,
.get-started-commitment__pricing {
  background: var(--background);
}

.get-started-commitment {
  width:       100%;
  font-family: var(--font-family-default);
}

.get-started-commitment__guarantee {
  padding-bottom: 4rem;
}

.get-started-commitment__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

.get-started-commitment__panel {
  display:        flex;
  flex-direction: column;
  gap:            2.5rem;
  padding:        2rem;
  border:         0.5px solid var(--border);
  border-radius:  var(--radius-lg);
  background:     var(--card);
}

.get-started-commitment__guarantees {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1rem;
}

.get-started-commitment__guarantee-card {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  min-height:     12rem;
  padding:        2rem;
}

.get-started-commitment__guarantee-heading {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.get-started-commitment__guarantee-heading .icon-badge {
  background: var(--primary);
  color:      var(--primary-foreground);
}

.get-started-commitment__guarantee-heading svg {
  display: block;
  width:   1.25rem;
  height:  1.25rem;
}

.get-started-commitment__cta {
  align-self:    center;
  width:         min(100%, 40rem);
  min-height:    6.75rem;
  flex-shrink:   1;
  padding:       1.5rem 2rem;
  white-space:   normal;
  text-align:    center;
}

.get-started-commitment__cta.btn[data-shape] {
  border-radius: var(--radius-lg);
}

.get-started-commitment__cta .btn__label {
  display:        flex;
  align-items:    center;
  flex-direction: column;
  gap:            0.5rem;
}

.get-started-commitment__cta-heading {
  font-size:   1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.75rem;
}

.get-started-commitment__cta-body {
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
}

.get-started-commitment__pricing {
  padding-top: 0;
}

@media (max-width: 991px) {
  .get-started-commitment__guarantee {
    padding-bottom: 3rem;
  }

  .get-started-commitment__guarantees {
    grid-template-columns: 1fr;
  }

  .get-started-commitment__guarantee-card {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .get-started-commitment__guarantee {
    padding-bottom: 2rem;
  }

  .get-started-commitment__panel {
    gap:     1.5rem;
    padding: 0.75rem;
  }

  .get-started-commitment__guarantee-card {
    gap:     1rem;
    padding: 1.5rem;
  }

  .get-started-commitment__cta {
    min-height: 6.25rem;
    padding:    1.25rem;
  }
}

/* ============================================================
   AirPricingV2Section — AIR page plan comparison.

   Layout: header (badge rail + heading + body) + content block.
   Content block: 3-column plan grid + included pills row.

   The cards themselves (tray + inner card + included list) AND the
   plans-row layout are identical to AirPricingHeroSection — same
   shared AirPricingPlanCard primitive, same wrapper CSS (3 columns,
   subgrid row-alignment, stacks to 1 at tablet/mobile). Keep the two
   wrappers in sync if either changes. See
   docs/component-unification-playbook.md.
   ============================================================ */


/* ---- Single container spanning header + plans + included --
   Header uses the shared .section-header convention (see
   section.css). The container stacks header / plans / included
   with a 64px rhythm. */

.air-pricing-v2 .container {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px between header, plans, and included */
}


/* ---- Plans grid (shared AirPricingPlanCard; same 3-column + subgrid
   row-alignment wrapper as AirPricingHeroSection's __plans) + the
   commitment banner below the row. ------------------------------- */

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

.air-pricing-v2__plans {
  display:     flex;
  gap:         1rem;
  align-items: stretch;
}

@supports (grid-template-rows: subgrid) {
  .air-pricing-v2__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-v2__solutions-row {
  display:     flex;
  gap:         0.625rem;   /* 10px */
  align-items: stretch;
}

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


/* ============================================================
   Included-on-every-plan row
   ============================================================ */

.air-pricing-v2__included {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.air-pricing-v2__included-label {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

.air-pricing-v2__pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
}

/* ============================================================
   Tablet (≤991px) — cards are tall (volume selector + accordion),
   so stack to a single column like the air-pricing hero's own cards
   do at this same breakpoint, instead of a cramped 2-column grid.
   ============================================================ */

@media (max-width: 991px) {
  .air-pricing-v2__plans-row {
    align-items: center;
    gap:         1rem;
  }

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

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

  .air-pricing-v2__plans-row > .air-pricing-v2__solutions-row {
    width: 100%;
  }

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

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }