/* #why cards:
   RIGHT = big feature icon (v-center, fixed)
   LEFT  = stack (GO+title + teaser/detail) vertically centered in card — rest AND hover
*/
:root {
  --gl-why-paper: #F6F2EB;
  --gl-why-ink: #141414;
  --gl-why-soft: #5C5A55;
  --gl-why-line: #DDD8CE;
  --gl-why-go: var(--golander-blue);
  --gl-why-ease: cubic-bezier(.22, 1, .36, 1);
  --gl-why-card-h: 280px;
  --gl-why-feature: 80px;
  --gl-why-feature-col: 108px;
  --gl-why-go-h: 22px;
  --gl-why-reveal: .4s;
  --gl-why-slot-h: 5rem; /* fixed: 2 bullets ≈ teaser — no hover reflow */
}

#why .gl-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gl-why-card {
  position: relative;
  height: var(--gl-why-card-h);
  min-height: var(--gl-why-card-h);
  border: 1px solid var(--gl-why-line);
  border-radius: 16px;
  background: var(--gl-why-paper);
  overflow: hidden;
  transition: opacity .3s var(--gl-why-ease), border-color .22s var(--gl-why-ease), box-shadow .3s var(--gl-why-ease);
}

#why.is-go-hot .gl-why-card:not(.is-active) { opacity: .48; }

.gl-why-card.is-active {
  opacity: 1;
  border-color: var(--gl-why-go);
  box-shadow: inset 0 3px 0 var(--gl-why-go), 0 12px 28px rgba(29,78,216,.08);
  z-index: 2;
}

/* Big feature — visual RIGHT, v-center, never moves */
.gl-why-card__feature {
  position: absolute;
  top: 50%;
  inset-inline-start: 1.15rem; /* keep clear of border-radius clip */
  transform: translateY(-50%);
  width: var(--gl-why-feature);
  height: var(--gl-why-feature);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 5;
  pointer-events: none;
  color: var(--gl-why-go);
  overflow: visible; /* never clip dual-ring strokes */
}
.gl-why-card.is-active .gl-why-card__feature {
  transform: translateY(-50%);
  overflow: visible;
}
.gl-why-card__feature img {
  width: var(--gl-why-feature) !important;
  height: var(--gl-why-feature) !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  overflow: visible;
  filter: none !important;
}

/* Content column LEFT of feature */
.gl-why-card__hit {
  position: absolute;
  inset: 0; /* full card — hover/click on feature icon works (feature is pointer-events:none) */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center stack — rest + hover */
  align-items: stretch;
  /* content column stays LEFT of feature; padding reserves icon column */
  padding: 1.1rem 1rem 1rem 0.7rem;
  padding-inline-start: calc(var(--gl-why-feature-col) + 0.15rem);
  margin: 0;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  touch-action: manipulation;
}
.gl-why-card__hit:focus { outline: none; }
.gl-why-card__hit:focus-visible {
  outline: 2px solid var(--gl-why-go);
  outline-offset: -2px;
  border-radius: 14px;
}

/* Stack: constant height (head + fixed slot) — optical center identical rest/hover */
.gl-why-card__stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  transform: none !important; /* never hover-rise */
}
.gl-why-card.is-active .gl-why-card__stack {
  transform: none !important;
}

/* Title row — top of stack */
.gl-why-card__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  direction: ltr; /* GO then Fast — GO left of word */
  gap: 10px;
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 0 0.45rem;
  background: var(--gl-why-paper);
}
.gl-why-card.is-active .gl-why-card__head {
  padding-bottom: 0.45rem; /* same as rest — no shift */
}

.gl-why-card__go {
  height: var(--gl-why-go-h);
  width: auto;
  max-width: 48px;
  display: block;
  flex: 0 0 auto;
}

.gl-why-card__title {
  margin: 0;
  font-size: 1.125rem; /* 18px floor mobile */
  font-weight: 650;
  letter-spacing: -.03em;
  color: var(--gl-why-ink);
  line-height: 1.2;
}
.gl-why-card.is-active .gl-why-card__title { color: var(--gl-why-go); }

/* Fixed slot — teaser↔detail opacity only; no height jump, no void */
.gl-why-card__slot {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: var(--gl-why-slot-h);
  min-height: var(--gl-why-slot-h);
  max-height: var(--gl-why-slot-h);
  overflow: hidden;
}
.gl-why-card.is-active .gl-why-card__slot {
  height: var(--gl-why-slot-h);
  min-height: var(--gl-why-slot-h);
  max-height: var(--gl-why-slot-h);
}

.gl-why-card__teaser {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 1rem; /* 16px mobile floor */
  color: var(--gl-why-soft);
  line-height: 1.4;
  max-width: 28ch;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--gl-why-reveal) var(--gl-why-ease), visibility 0s;
}
.gl-why-card.is-active .gl-why-card__teaser {
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition: opacity var(--gl-why-reveal) var(--gl-why-ease), visibility 0s linear var(--gl-why-reveal);
}

/* Detail overlays same slot box — opacity only */
.gl-why-card__detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  background: var(--gl-why-paper);
  overflow: hidden; /* never inner scrollbar */
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition:
    opacity var(--gl-why-reveal) var(--gl-why-ease),
    visibility 0s linear var(--gl-why-reveal);
}
.gl-why-card.is-active .gl-why-card__detail {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: none;
  transition: opacity var(--gl-why-reveal) var(--gl-why-ease), visibility 0s;
}

.gl-why-card__detail ul {
  margin: 0;
  padding: 0 .85rem 0 0;
  font-size: 1rem;
  color: var(--gl-why-soft);
  line-height: 1.28;
}
.gl-why-card__detail li + li { margin-top: 0.12rem; }
.gl-why-card__manage {
  margin: 0.28rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gl-why-go);
  line-height: 1.25;
}

@media (max-width: 900px) {
  #why .gl-why { grid-template-columns: 1fr; }
  .gl-why-card { height: 260px; min-height: 260px; }
  :root { --gl-why-feature: 68px; --gl-why-feature-col: 92px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  #why .gl-why { grid-template-columns: 1fr 1fr; }
}


/* Type floors — Bar: mobile ≥16px, desktop ≥18px */
@media (min-width: 768px) {
  .gl-why-card__title { font-size: 1.25rem; } /* 20 */
  .gl-why-card__teaser { font-size: 1.125rem; } /* 18 */
  .gl-why-card__detail ul { font-size: 1.125rem; }
  .gl-why-card__manage { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-why-card, .gl-why-card__detail, .gl-why-card__teaser, .gl-why-card__stack { transition: none !important; }
  .gl-why-card__stack, .gl-why-card.is-active .gl-why-card__stack { transform: none !important; }
  .gl-why-card__detail, .gl-why-card.is-active .gl-why-card__detail { transform: none !important; }
  .gl-why-card.is-active .gl-why-card__teaser { transform: none !important; }
}
html.gl-a11y-reduce-motion .gl-why-card,
html.gl-a11y-reduce-motion .gl-why-card__detail,
html.gl-a11y-reduce-motion .gl-why-card__teaser { transition: none !important; }
html.gl-a11y-reduce-motion .gl-why-card__detail,
html.gl-a11y-reduce-motion .gl-why-card.is-active .gl-why-card__detail { transform: none !important; }

.plan-card.is-plan-hl {
  outline: 2px solid var(--gl-why-go);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}