/* ==========================================================================
   Comparison cards — the single pattern for every "this, not that" block.
   Prefix: .gbc-
   Used by: Why GreyBox ("The line we hold"), Trading Lab landing ("vs").

   Why a shared file: each page on this site carries its own CSS island
   (.ph-*, .tl-*, .gx-*), which is how the two comparison blocks drifted into
   two different designs in the first place. Anything new of this shape should
   use these classes rather than inventing a third.

   Structure:
     .gbc            grid wrapper (2 up, stacks under 820px)
     .gbc-card       one side; add .is-pos (ours) or .is-neg (theirs)
     .gbc-badge      pill straddling the top edge
     .gbc-eyebrow / .gbc-title / .gbc-lead
     .gbc-list > li  icon + text, hairline separated
     .gbc-foot       muted closing line
   ========================================================================== */

.gbc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  align-items: stretch;
  margin-top: 1.5rem;
}

.gbc-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 .5rem 1.75rem rgba(30, 34, 40, .06);
}

/* The affirmed side leads: a touch more presence, and it lifts on hover.
   The negative side deliberately stays flat — you should be able to tell
   which one is us before reading a word. */
.gbc-card.is-pos { border-color: #cfe9dc; box-shadow: 0 .5rem 1.75rem rgba(18, 128, 92, .10); }
.gbc-card.is-pos:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.5rem rgba(18, 128, 92, .16); }
.gbc-card.is-neg { background: #fcfdfe; }
.gbc-card { transition: transform .2s ease, box-shadow .2s ease; }

/* pill straddling the card's top edge */
.gbc-badge {
  position: absolute;
  top: -.75rem;
  left: 2rem;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.gbc-card.is-pos .gbc-badge { background: #12805c; }
.gbc-card.is-neg .gbc-badge { background: #c1443d; }

.gbc-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #96a1b5;
  margin-bottom: .25rem;
}

.gbc-title {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .3rem;
  color: #0d1b3e;
}
.gbc-card.is-neg .gbc-title { color: #21262c; }

.gbc-lead {
  font-size: .86rem;
  line-height: 1.5;
  color: #6b7c99;
  margin: 0 0 .8rem;
}

.gbc-list { list-style: none; margin: 0; padding: 0; }

.gbc-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem 0;
  border-top: 1px solid #eef1f6;
  font-size: .89rem;
  line-height: 1.35;
}
.gbc-list li:first-child { border-top: 0; padding-top: .1rem; }

.gbc-card.is-pos .gbc-list li { color: #0d1b3e; font-weight: 600; }
.gbc-card.is-neg .gbc-list li { color: #48566d; font-weight: 400; }

.gbc-ic {
  flex: 0 0 auto;
  width: 1.22rem;
  height: 1.22rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -.05rem;
}
.gbc-ic svg { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gbc-card.is-pos .gbc-ic { background: #e2f3ec; }
.gbc-card.is-pos .gbc-ic svg { width: .72rem; height: .72rem; stroke: #12805c; }
.gbc-card.is-neg .gbc-ic { background: #fae6e7; }
.gbc-card.is-neg .gbc-ic svg { width: .64rem; height: .64rem; stroke: #c1443d; }

.gbc-foot {
  margin-top: auto;
  padding-top: .85rem;
  font-size: .77rem;
  line-height: 1.45;
  color: #96a1b5;
}

@media (max-width: 820px) {
  .gbc { grid-template-columns: 1fr; gap: 1.9rem; }
  .gbc-card { padding: 1.7rem 1.15rem 1.1rem; }
  .gbc-badge { left: 1.4rem; }
  .gbc-list li { font-size: .855rem; padding: .45rem 0; }
  /* no hover lift on touch — it sticks after a tap */
  .gbc-card.is-pos:hover { transform: none; }
}