/* =====================================================================
   SHIM-ME Hub — Final CTA (Bucket B)
   Scoped: body #shim-final .shim-final-wrapper
   §0 compliant: body prefix + !important on all color/font props.
   ===================================================================== */

/* ------------------------------------------------------------------
   Two-column inner grid
   ------------------------------------------------------------------ */
body #shim-final .shim-final__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ------------------------------------------------------------------
   Left column — eyebrow + heading + CTAs
   ------------------------------------------------------------------ */
body #shim-final .shim-final__eyebrow {
  margin-bottom: 20px !important;
}

body #shim-final .shim-final__heading {
  margin-bottom: 0 !important;
}

body #shim-final .shim-final__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ------------------------------------------------------------------
   Right card
   ------------------------------------------------------------------ */
body #shim-final .shim-final__card {
  background: var(--shim-bg-2) !important;
  border: 1px solid var(--shim-line) !important;
  padding: 36px;
}

body #shim-final .shim-final__card-eyebrow {
  margin-bottom: 6px !important;
  /* "eyebrow--light" variant: slightly dimmer on a dark card */
  color: var(--shim-text-dim) !important;
}

body #shim-final .shim-final__card-heading {
  font-family: var(--shim-display) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  text-transform: uppercase !important;
  color: var(--shim-text) !important;
  margin: 6px 0 14px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
}

body #shim-final .shim-final__card-body {
  color: var(--shim-text-dim) !important;
  margin: 0 0 20px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body #shim-final .shim-final__card-body p {
  color: var(--shim-text-dim) !important;
  margin: 0 0 20px !important;
}

/* ------------------------------------------------------------------
   Button overrides scoped to this section
   (Global shim-btn tokens handle most of this, but belt-and-braces
   for any Total rule that might clobber our buttons here)
   ------------------------------------------------------------------ */
body #shim-final .shim-btn {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Responsive — single column on tablet and below (≤ 1100px, matches
   the design's media query)
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  body #shim-final .shim-final__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  body #shim-final .shim-final__cta {
    flex-direction: column;
  }
  body #shim-final .shim-final__card {
    padding: 24px;
  }
}