/* =========================================================================
   06-cardoverview — "Spirit One Card" product section.
   Centered tag + h2 claim, hero card visual, h3 + feature chips + CTA.
   Every rule scoped under ._card-overview. Utilities (.g-row, .flex,
   .title-3 …) come from base.css and are not restyled here.
   ========================================================================= */

._card-overview {
  /* The grid spans (xxl-8, md-10, …) are not in base.css; constrain the
     column widths here so the centered content matches the source layout.   */
  /* Extra air between Unify and this section: double the my-180-64 utility's
     top gap (fluid 128px mobile → 360px desktop). */
  margin-top: calc(var(--180-64) * 2);
}

/* ---- Responsive column spans (16-col grid) ------------------------------ */
._card-overview .g-col {
  width: 100%;
  flex: 0 0 auto;
}
._card-overview .xxl-8  { max-width: 50%; }   /* 8 / 16 */
._card-overview .xxl-10 { max-width: 62.5%; } /* 10 / 16 */

@media (max-width: 1290px) {
  ._card-overview .md-10 { max-width: 62.5%; }
  ._card-overview .md-12 { max-width: 75%; }
}
@media (max-width: 1023px) {
  ._card-overview .sm-12 { max-width: 75%; }
  ._card-overview .sm-14 { max-width: 87.5%; }
}
@media (max-width: 743px) {
  ._card-overview .xs-16 { max-width: 100%; }
}

/* The card visual keeps its full top margin but only half the bottom one —
   pulls the "Contactless…" info block up and shortens the section. */
._card-overview .card-row { margin-bottom: calc(var(--96-48) * .5); }

/* ---- Hero card stage ---------------------------------------------------- */
._card-overview ._card-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
._card-overview ._hero-card {
  /* +30% vs. the original clamp(280,…,440) */
  --w: clamp(364px, 286px + 100vw * .234, 572px);
  width: var(--w);
  max-width: 100%;
  height: auto;
  display: block;
}
._card-overview ._hero-card .number {
  font-size: calc(var(--w) * .05);
}
._card-overview ._hero-card .brand {
  margin-top: 6px;
  font-size: calc(var(--w) * .06);
}
._card-overview ._card-contactless {
  width: calc(var(--w) * .09);
  height: calc(var(--w) * .09);
  color: rgba(255, 255, 255, .9);
}

/* ---- Feature chips ------------------------------------------------------- */
._card-overview ._feature-chips {
  flex-wrap: wrap;
  gap: var(--12-8);
  list-style: none;
  padding: 0;
  margin: 0;
}
._card-overview ._chip {
  display: inline-flex;
  align-items: center;
  gap: var(--8);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: var(--body);
  color: var(--orange-900);
  background: var(--orange-25);
  white-space: nowrap;
}
._card-overview ._chip ._icon {
  width: 18px;
  height: 18px;
  color: var(--orange);
}

/* gap-32-24 utility used on the footer column (not in base.css) */
._card-overview .gap-32-24 { gap: var(--32-24); }

/* my-96-48 spacing for the card row (not in base.css) */
._card-overview .my-96-48 {
  margin-top: var(--96-48);
  margin-bottom: var(--96-48);
}