/* ==========================================================================
   GM CORE — Why-Join carousel module CSS.
   Per-card seam colour comes via the inline --seam custom property; the icon
   tile colour is inline too (self-sufficient). Brand fallbacks via var(--x,LIT).
   ========================================================================== */

/* Heading (cream/light section) */
.gm-whyjoin-widget .shead{text-align:center;max-width:660px;margin:0 auto 56px}
.gm-whyjoin-widget .shead h2::after{
  content:"";display:block;width:88px;height:4px;border-radius:4px;
  background:var(--growth,linear-gradient(90deg,#1F4FBF,#0E7CC4 34%,#0AA9AC 68%,#0FA37A));
  margin:16px auto 0;
}
.gm-whyjoin-widget .shead p{color:var(--muted,#63738A);font-size:1.0625rem;line-height:1.75}
.gm-whyjoin-widget .eyebrow{
  display:inline-block;background:rgba(217,160,43,.14);color:var(--gold-text,#8A5A0C);
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--r-pill,100px);margin-bottom:18px;
}

/* Track — horizontal scroll with snap */
.gm-whyjoin-widget .track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gm-whyjoin-widget .track::-webkit-scrollbar{display:none}

/* Card */
.gm-whyjoin-widget .wcard{
  flex:0 0 300px;scroll-snap-align:start;background:#fff;
  border-radius:var(--r-lg,22px);padding:30px 26px;box-shadow:var(--sh,0 4px 24px rgba(10,27,51,.07));
  border:1px solid var(--border,#E1E7EE);position:relative;overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s;
}
.gm-whyjoin-widget .wcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--seam,#1F4FBF);transform:scaleX(0);transform-origin:left;
  transition:transform 320ms ease;
}
.gm-whyjoin-widget .wcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg,0 18px 48px rgba(10,27,51,.14))}
.gm-whyjoin-widget .wcard:hover::before{transform:scaleX(1)}

.gm-whyjoin-widget .wcard__ic{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
}
.gm-whyjoin-widget .wcard__ic svg{width:25px;height:25px}
.gm-whyjoin-widget .wcard h3{font-size:1.125rem;margin:0 0 10px;color:var(--navy,#0A1B33)}
.gm-whyjoin-widget .wcard p{font-size:.9375rem;color:var(--muted,#63738A);line-height:1.75;margin:0}

/* Arrows */
.gm-whyjoin-widget .arrows{display:flex;gap:10px;justify-content:center;margin-top:8px}
.gm-whyjoin-widget .arrows button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--border,#E1E7EE);
  background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--navy,#0A1B33);
  transition:background .26s,border-color .26s,opacity .26s;box-shadow:var(--sh,0 4px 24px rgba(10,27,51,.07));
}
.gm-whyjoin-widget .arrows button:hover{background:var(--gold,#D9A02B);border-color:var(--gold,#D9A02B);color:var(--navy,#0A1B33)}
.gm-whyjoin-widget .arrows button svg{width:20px;height:20px}
.gm-whyjoin-widget .arrows button:disabled{opacity:.35;cursor:default}
.gm-whyjoin-widget .arrows button:disabled:hover{background:#fff;border-color:var(--border,#E1E7EE)}

@media(prefers-reduced-motion:reduce){
  .gm-whyjoin-widget .wcard,.gm-whyjoin-widget .wcard::before,.gm-whyjoin-widget .arrows button{transition:none}
}