/* Member benefits hub (benefits.php): the hero's hand of benefit cards, the intro
   counters, and the signature stack of the brochure's four benefit groups.
   Default styles show the finished page (no JS, reduced motion, narrow screens).
   The sticky stack only switches on when the script adds .is-stacked. */

/* ------------------------------------------------------------ hero fan */
.bhero-copy { min-width: 0; }
.bfan-wrap { position: relative; display: grid; justify-items: center; gap: clamp(.6rem, 1.6vh, 1.1rem); min-width: 0; }
.bfan {
  --cw: clamp(104px, 28vw, 150px);
  --chh: calc(var(--cw) * 1.25);
  position: relative; width: 100%; height: calc(var(--chh) * 1.44);
}
@media (min-width: 1000px) {
  .bfan { --cw: clamp(170px, min(15.5vw, 27vh), 250px); }
}
.bfan-in { position: absolute; inset: 0; transform-origin: 50% 100%; }
.bfan-card {
  display: block; position: absolute; left: calc(50% - var(--cw) / 2); top: calc(var(--chh) * .1);
  width: var(--cw); height: var(--chh);
  border-radius: clamp(14px, 1.4vw, 20px); overflow: hidden; background: var(--pine);
  transform-origin: 50% 260%;
  transform: rotate(calc(var(--r) * 1deg));
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 26px 44px -22px rgba(12,59,39,.6), 0 0 0 1px rgba(12,59,39,.08);
  text-decoration: none; color: #fff;
  will-change: transform;
}
.bfan-card:hover, .bfan-card:focus-visible { z-index: 20; }
.bfan-card:focus-visible { outline: 3px solid var(--tick); outline-offset: 4px; }
.bfan-card img { width: 100%; height: 100%; object-fit: cover; }
.bfan-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,59,39,.72) 0%, rgba(12,59,39,.18) 34%, rgba(12,59,39,0) 60%);
}
.bfan-tag {
  position: absolute; left: 8px; bottom: 10px; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: .8rem .3rem; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--pine);
  font: 700 1rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 10px 20px -12px rgba(0,0,0,.6);
}
.bfan-note { margin: 0; font-weight: 600; font-size: 1.0625rem; color: rgba(14,21,18,.66); text-align: center; }

/* ------------------------------------------------------------ intro */
@media (min-width: 560px) { .bintro-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bintro .duo-media > .frame > img { max-height: min(56vh, 560px); }

/* ------------------------------------------------------------ group stack */
.bstack-wrap { position: relative; }
.bstack-rail { display: none; }
.bstack-cards { position: relative; }
.bstack-mark { display: block; height: 0; scroll-margin-top: 100px; }
.bstack-card { position: relative; margin-bottom: clamp(18px, 2.4vw, 28px); }
.bstack-card:last-child { margin-bottom: 0; }

.bstack-in {
  --focus: var(--tick);
  position: relative; display: grid; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 -1px 0 rgba(255,255,255,.5) inset, 0 50px 90px -46px rgba(0,0,0,.75);
  transform-origin: 50% 0%;
}
.bstack-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--pine); }
.bstack-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.bstack-body { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 44px); }
@media (min-width: 900px) {
  .bstack-in { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
  .bstack-shot { aspect-ratio: auto; min-height: 100%; }
}

.bstack-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sec-pine .bstack-top h3 { color: var(--pine); font-size: clamp(1.7rem, 2.5vw, 2.15rem); margin: 0 0 .45rem; }
.bstack .bstack-num {
  margin: 0; flex: none; white-space: nowrap;
  font: 800 1.1rem/1 var(--display); letter-spacing: -.01em; color: var(--tick-dark);
  text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: .14em; text-underline-offset: .28em;
}
.bstack .bstack-sum { margin: 0 0 clamp(1rem, 2.2vh, 1.5rem); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: rgba(14,21,18,.78); }
.bstack .bstack-items { margin: 0 0 clamp(1.1rem, 2.6vh, 1.8rem); gap: .55rem 1.8rem; }
.bstack-items li { font-size: 1.0625rem; line-height: 1.4; color: rgba(14,21,18,.86); }
@media (min-width: 700px) { .bstack-items:not(.bstack-items-few) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bstack .bstack-items-few { gap: clamp(.9rem, 2vh, 1.3rem); }
.bstack-items-few b {
  display: block; margin-bottom: .2rem;
  font: 700 clamp(1.2rem, 1.5vw, 1.35rem)/1.2 var(--display); letter-spacing: -.015em; color: var(--pine);
}
.bstack-items-few .tick { margin-top: .05em; }
.bstack .bstack-links { display: flex; flex-wrap: wrap; gap: .7rem; margin: auto 0 0; }
.bstack-dim { position: absolute; inset: 0; z-index: 5; background: #051A10; opacity: 0; pointer-events: none; }

/* rail: count, progress and the group names (sticky mode only) */
.bstack .bstack-count {
  display: flex; align-items: baseline; gap: .35rem; margin: 0 0 1rem;
  font: 800 clamp(3rem, 4.4vw, 4.2rem)/1 var(--display); letter-spacing: -.04em; color: #fff;
  font-variation-settings: "opsz" 96;
}
.bstack-count span { font-size: .38em; letter-spacing: 0; color: rgba(255,255,255,.62); }
.bstack-bar { display: block; height: 3px; margin: 0 0 1.1rem; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.bstack-bar i { display: block; width: 100%; height: 100%; background: var(--tick); transform-origin: 0 50%; transform: scaleX(.25); }
.bstack-rail ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.bstack-go {
  display: flex; align-items: center; gap: .7rem; min-height: 44px;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.25; color: rgba(255,255,255,.66); text-decoration: none;
  transition: color .3s;
}
.bstack-go::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; transition: background-color .3s, box-shadow .3s; }
.bstack-go:hover, .bstack-go.is-on { color: #fff; }
.bstack-go.is-on::before { background: var(--tick); box-shadow: 0 0 0 5px rgba(20,155,68,.3); }

/* sticky stack: desktop with room for a whole card, full motion (the script adds .is-stacked) */
@media (min-width: 1200px) and (min-height: 680px) {
  .bstack.is-stacked {
    --stack-top: 96px; --stack-step: 18px;
    --ch: min(600px, calc(100vh - var(--stack-top) - 3 * var(--stack-step) - 28px));
  }
  .bstack.is-stacked .bstack-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(28px, 3vw, 52px); align-items: start; }
  .bstack.is-stacked .bstack-rail { display: block; position: sticky; top: calc(var(--stack-top) + 24px); }
  .bstack.is-stacked .bstack-card {
    position: sticky; top: calc(var(--stack-top) + var(--i) * var(--stack-step));
    height: var(--ch); margin-bottom: 6vh;
  }
  .bstack.is-stacked .bstack-card:last-child { margin-bottom: 0; }
  .bstack.is-stacked .bstack-in { height: 100%; will-change: transform; }
  .bstack.is-stacked .bstack-shot { height: 100%; }
  .bstack.is-stacked .bstack-body { padding: clamp(22px, 3.6vh, 40px) clamp(28px, 3vw, 44px); }
}

/* QA fixes */
@media (min-width: 1200px) and (min-height: 680px) {
  /* the last card has nothing below it to stick against: it simply arrives over the stack */
  .bstack.is-stacked .bstack-card:last-child { position: relative; top: auto; }
}
@media (min-width: 700px) {
  .bstack-items:not(.bstack-items-few) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.bstack .bstack-links .btn { white-space: nowrap; max-width: 100%; }
/* QA: the hand of cards sits from the start of its column (no empty strip beside the intro) */
@media (min-width: 1000px) {
  .bfan { --cw: clamp(150px, min(14vw, 25vh), 225px); }
  .bfan-card { left: calc(var(--cw) * .84); }
}