/* ============================================================
   Guarantee card — shared light "certificate" treatment (Patch 24)
   Single source for the £15,000 guarantee card's visual treatment.
   The homepage and /structure-review keep their own card geometry and
   inner markup (they differ); this file owns only the treatment.
   Selectors are 2-class so they override each page's prior dark rules
   regardless of stylesheet order. Linked by both consuming pages.
   ============================================================ */
.sr-guarantee.guarantee-card {
  background: #FFFFFF;
  border: 1px solid #E5E1D5;
  box-shadow: 0 1px 0 rgba(21, 23, 27, 0.04), 0 16px 40px -24px rgba(21, 23, 27, 0.22);
}
/* Label stays Arc; figure large and Ink; body copy in light-surface tones. */
.guarantee-card .sr-guarantee-label { color: #5B6CF2; }
.guarantee-card .sr-guarantee-figure { color: #15171B; }
.guarantee-card .sr-guarantee-text { color: rgba(21, 23, 27, 0.78); }
.guarantee-card .sr-guarantee-stmt { color: #15171B; }
.guarantee-card .sr-guarantee-gate { color: rgba(21, 23, 27, 0.60); }

/* ============================================================
   Patch 28 — unified internal anatomy: figure left, text right.
   Layout owned here so both instances share one anatomy; values match
   the homepage card so its render is unchanged. 2-class selectors win
   over each page's prior per-page layout.
   ============================================================ */
.sr-guarantee.guarantee-card {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 36px 44px;
  border-radius: 6px;
}
.guarantee-card .sr-guarantee-head { flex: none; }
.guarantee-card .sr-guarantee-figure {
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}
.guarantee-card .sr-guarantee-text,
.guarantee-card .sr-guarantee-body { flex: 1; }
@media (max-width: 767px) {
  .sr-guarantee.guarantee-card { flex-direction: column; align-items: flex-start; gap: 22px; }
}