/* ============================================
   gs-delivery-model — comparison cards section
   Section #6 — two equal-weight cards comparing
   Fully-Managed vs Expert-Supported delivery options.
   Light bg (white), with hover effects matching the
   gs-outcome-card pattern (border + pill turn blue on hover).
   ============================================ */

.gs-delivery-model {
  /* Giant Swarm White — pale blue alt section bg. Keeps the
     delivery cards (white) and includes callout (white) visually
     elevated against a tinted section ground. */
  background: var(--color-bg-muted);
  padding: 5rem 1.5rem;
}

.gs-delivery-model__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.gs-delivery-model__header {
  text-align: center;
  max-width: var(--content-header);
  margin: 0 auto 3rem;
}

.gs-delivery-model__title {
  font-size: var(--text-h2);
  margin: 0 0 1rem;
}

.gs-delivery-model__description {
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  text-wrap: balance;
}

/* ============================================
   Comparison cards
   ============================================ */

.gs-delivery-model__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: var(--content-frame);
  margin: 0 auto 1.5rem;
}

.gs-delivery-card {
  background: var(--color-bg);
  border: 1.5px solid #e3e6ec;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  /* Border width stays constant at 1.5px in both states — browsers
     don't animate border-width smoothly (it reflows the box). Hover
     uses an inset box-shadow to fake the "thicker border" effect:
     visually it looks like the border grew to 2px, but technically
     nothing changes size. */
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: none !important;
}

.gs-delivery-card:hover {
  /* Border WIDTH stays 1.5px — only the color changes. */
  border-color: var(--color-accent) !important;
  transform: translateY(-10px);
  /* Layered shadow:
       inset 0 0 0 0.5px = fake +0.5px border inside (visual "growth")
       0 12px 24px = the standard card-lift drop shadow */
  box-shadow:
    inset 0 0 0 0.5px var(--color-accent),
    0 12px 24px rgba(0, 38, 69, 0.1) !important;
}

.gs-delivery-card__header {
  text-align: left;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.gs-delivery-card__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0;
}

/* Pill — same hover-fills-blue pattern as gs-outcome-card.
   Pill sits ABOVE the title and is left-aligned with it. */
.gs-delivery-card__pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: 0.875rem;
  border: 1px solid #c5cbd2;
  border-radius: 999px;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.gs-delivery-card:hover .gs-delivery-card__pill {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.gs-delivery-card__bullets {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gs-delivery-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Inline SVG checkmark — explicit stroke-width: 3 gives the
   chunky weight FA's `fa-check` glyph can't produce at any size
   (font-size scales the glyph but not its stroke proportions).
   Override the global `svg { display: block }` reset so it sits
   inline with the bullet text. currentColor inherits accent. */
.gs-delivery-card__check {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

.gs-delivery-card__bestfor {
  background: #e8f4ff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin-top: auto; /* push to bottom of flex card so cards align */
}

.gs-delivery-card__bestfor strong {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}

/* ============================================
   "Both Models Include" callout below cards
   ============================================ */

.gs-delivery-model__includes {
  background: var(--color-bg);
  /* Static blue border — not a hover state, so back to 2px. The
     1.5px rule is for grey borders that need to grow to 2px on
     hover; this border is already at its "active" color. */
  border: 2px solid var(--color-accent);
  border-radius: 24px;
  padding: 1.25rem 2rem;
  text-align: center;
  max-width: var(--content-frame);
  margin: 0 auto;
}

.gs-delivery-model__includes-label {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.5rem;
}

.gs-delivery-model__includes-text {
  font-size: var(--text-base);
  color: var(--color-fg-body);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* Same SVG-with-explicit-stroke approach for the chevrons.
   Vertical-align: -0.15em pulls the SVG down so its visual
   baseline aligns with the text x-line (SVGs default to baseline
   alignment which sits below the cap-line and looks high). */
.gs-delivery-model__chev {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  margin: 0 0.4rem;
  color: var(--color-accent);
}

/* ============================================
   Mobile
   ============================================ */

@media (max-width: 767px) {
  .gs-delivery-model { padding: 3rem 1.5rem; }
  .gs-delivery-model__header { margin-bottom: 2rem; }
  /* Mobile: cards stack and span the full content width.
     This section has dense bullet content + best-for callout,
     so unlike outcome/assembly cards we don't cap to 380px —
     wider boxes give the text room to breathe. */
  .gs-delivery-model__cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .gs-delivery-model .gs-delivery-card {
    padding: 2rem 1.5rem;
  }
  .gs-delivery-model__includes {
    padding: 1.25rem 1.5rem;
  }
}