/* =====================================================================
   Compare Cards — Figma "OneGold Outperforms Competitors" 8376:27099.
   A FULL-BLEED DARK band: the <section> carries a navy gradient across the
   full viewport width; an inner .container (max 1240, centred) locks the
   content. Centred header (text-gradient Axiforma Medium 32/45 H2 + white
   Axiforma Regular 18/25 lead) above a 3-up row of equal-height cards.
   Each card is a darker gradient panel (1px OneGold-blue border, radius 8)
   with a 40x40 blue line icon, Axiforma SemiBold 20 title, Axiforma Regular
   16 body and a filled OneGold-blue CTA pinned to the bottom so buttons align
   across cards. Cards stack to a single column on mobile.
   Tokens only; component-local --cc-* properties for the Figma gradients and
   one-off sizes (mirrors bullion-about's --ba-split-* / feature-carousel's
   --fc-* pattern — no token edits).
   ===================================================================== */

.compare-cards {
  /* Component-local values (no token edits). */
  --cc-band-grad: linear-gradient(90deg, #000000 1%, #071f39 100%); /* full-bleed band */
  --cc-card-grad: linear-gradient(305deg, #000000 1%, #071f39 70%); /* per-card panel  */
  --cc-heading-grad: linear-gradient(90deg, #99ccfa 0%, #ffffff 99%); /* H2 text gradient */
  --cc-pad-block: var(--home-sec-pad-y);  /* 80px band padding              */
  --cc-pad-block-mobile: 60px;            /* reduced band padding @ mobile  */
  --cc-stack-gap: var(--cb-block-gap);    /* 40px header -> card row        */
  --cc-header-gap: var(--cb-gap);         /* 20px H2 -> subheading          */
  --cc-row-gap: 20px;                     /* between cards                  */
  --cc-card-pad-y: 40px;                  /* card top/bottom padding        */
  --cc-card-pad-x: 20px;                  /* card side padding              */
  --cc-card-gap: 20px;                    /* icon -> title -> body within   */
  --cc-icon-size: 40px;                   /* blue line glyph (40x40)        */
  --cc-cta-w: 160px;                      /* fixed button width             */
  --cc-cta-pad-y: 14px;                   /* button vertical padding        */
  --cc-cta-pad-x: 24px;                   /* button horizontal padding      */
  --cc-cta-tracking: 0.16px;              /* button letter-spacing          */

  background: var(--cc-band-grad);
  padding-block: var(--cc-pad-block);
}

/* ---- Inner content locked to the 1240 content area ---- */
.compare-cards__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-stack-gap);
}

/* ---- Header: text-gradient H2 + white lead ---- */
.compare-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-header-gap);
  width: 100%;
  text-align: center;
}

/* H2 — Axiforma Medium 32/45 with a soft-blue -> white text gradient. */
.compare-cards__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  background: var(--cc-heading-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  word-break: break-word;
}

/* Lead — Axiforma Regular 18/25, white. */
.compare-cards__subheading {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-0);
  word-break: break-word;
}

/* ---- 3-up card row: equal columns, equal height (align-items:stretch) ---- */
.compare-cards__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--cc-row-gap);
  width: 100%;
}

/* A single card: dark gradient panel, blue border, centred stack. */
.compare-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-card-gap);
  min-width: 0;
  padding: var(--cc-card-pad-y) var(--cc-card-pad-x);
  background: var(--cc-card-grad);
  border: 1px solid var(--og-blue);
  border-radius: var(--radius-8);
  text-align: center;
}

/* Icon — 40x40 blue line glyph, centred. */
.compare-cards__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-icon-size);
  height: var(--cc-icon-size);
}
.compare-cards__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Title — Axiforma SemiBold 20, white. */
.compare-cards__title {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-25);
  color: var(--gray-0);
  word-break: break-word;
}

/* Body — Axiforma Regular 16, white. */
.compare-cards__body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-0);
  word-break: break-word;
}

/* CTA — filled OneGold-blue button, Axiforma Medium 16, pinned to the bottom
   (margin-top:auto) so buttons align across cards of unequal body length. */
.compare-cards__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-cta-w);
  padding: var(--cc-cta-pad-y) var(--cc-cta-pad-x);
  background: var(--og-blue);
  border-radius: var(--radius-8);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  letter-spacing: var(--cc-cta-tracking);
  color: var(--gray-0);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.compare-cards__cta:hover { opacity: 0.85; }

/* ---- Tablet (≤1023.98): 3→2 columns ---- */
@media (max-width: 1023.98px) {
  .compare-cards__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Large-mobile (≤767.98): single column, reduced band padding, smaller H2 ---- */
@media (max-width: 767.98px) {
  .compare-cards {
    padding-block: var(--cc-pad-block-mobile);
    padding-inline: var(--pad-mobile);
  }
  .compare-cards__heading {
    font-size: clamp(28px, 7.2vw, var(--fs-32));
    line-height: 1.3;
  }
  .compare-cards__row {
    grid-template-columns: 1fr;
  }
  .compare-cards__cta {
    width: 100%;
  }
}