/* Benefits product page (/benefits-administration) — this page's own mock-ups, prefix bn-.
   Shared kit: static/css/product.css. */
.bn-plan, .bn-enroll, .bn-elig, .bn-over, .bn-mine, .bn-docs { width: 272px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 14px 34px rgba(16, 24, 40, .1); font-size: .8rem; color: #1d2433; }
.bn-lbl { display: block; color: #8a93a4; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 8px; }

/* 1 — plan */
.bn-plan-head { display: flex; gap: 10px; align-items: center; }
.bn-ico { width: 38px; height: 38px; border-radius: 11px; background: #fdecf3; display: grid; place-items: center; font-size: 1.1rem; --fa-primary-color: #db2777; --fa-secondary-color: #db2777; color: #db2777; }
.bn-plan-head span:last-child { display: flex; flex-direction: column; } .bn-plan-head small { color: #8a93a4; font-size: .7rem; }
.bn-opts { margin-top: 12px; }
.bn-opt-h, .bn-opt { display: grid; grid-template-columns: 1fr 58px 62px; gap: 6px; padding: 7px 0; }
.bn-opt-h { color: #a0a8b6; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #eef0f4; }
.bn-opt-h span:not(:first-child), .bn-opt span:not(:first-child) { text-align: right; }
.bn-opt { border-bottom: 1px solid #f4f5f8; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * 120ms + .3s); }
.pp-card.in .bn-opt { opacity: 1; transform: none; }
.bn-opt span:last-child { font-weight: 700; color: #0c64ae; }
.bn-cur { display: block; text-align: right; color: #a0a8b6; font-size: .66rem; margin-top: 6px; }

/* 2 — enrollment */
.bn-enroll-who { display: flex; gap: 10px; align-items: center; }
.bn-enroll-who span:last-child { display: flex; flex-direction: column; } .bn-enroll-who small { color: #8a93a4; }
.bn-deps { display: grid; gap: 6px; }
.bn-deps span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #f7f8fb; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * 140ms + .4s); }
.pp-card.in .bn-deps span, .pp-scene.on .bn-deps span { opacity: 1; transform: none; }
.bn-deps i { width: 18px; height: 18px; border-radius: 5px; background: #0c64ae; color: #fff; display: grid; place-items: center; font-size: .6rem; }
.bn-deps em { margin-left: auto; font-style: normal; font-weight: 500; color: #8a93a4; font-size: .72rem; }
.bn-enroll-btn { display: block; margin-top: 12px; text-align: center; padding: 9px; border-radius: 10px; background: #0c64ae; color: #fff; font-weight: 600; }
.bn-deps-scene { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bn-deps-scene span { transition-delay: .4s; }
.bn-deps-scene span:nth-child(2) { transition-delay: .6s; } .bn-deps-scene span:nth-child(3) { transition-delay: .8s; }

/* 3 — eligibility */
.bn-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.bn-types span { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; font-size: .74rem; font-weight: 600; }
.bn-types .ok { background: #e7f6ec; color: #15803d; } .bn-types .no { background: #f4f5f8; color: #a0a8b6; text-decoration: line-through; }
.bn-wait { margin-top: 16px; } .bn-wait small { color: #8a93a4; font-size: .7rem; }
.bn-wait-bar { height: 8px; border-radius: 4px; background: #eef1f6; margin: 8px 0 6px; overflow: hidden; }
.bn-wait-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f59e0b, #16a34a); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) .4s; }
.pp-card.in .bn-wait-bar i { transform: scaleX(1); }
.bn-wait-lbl { display: flex; justify-content: space-between; color: #8a93a4; font-size: .7rem; } .bn-wait-lbl b { color: #1d2433; }

/* 4 — overview */
.bn-over-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bn-over-top > div { padding: 10px; border-radius: 10px; background: #f7f8fb; }
.bn-over-top small { color: #8a93a4; font-size: .68rem; display: block; }
.bn-over-top b { font-size: 1.3rem; } .bn-over-top b span { font-size: .8rem; color: #a0a8b6; font-weight: 500; }
.bn-cost { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: center; padding: 4px 0; font-size: .72rem; color: #4b5568; }
.bn-cost-bar { height: 10px; border-radius: 5px; background: #eef1f6; overflow: hidden; }
.bn-cost-bar i { display: block; height: 100%; width: var(--v); border-radius: 5px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 110ms + .3s); }
.pp-card.in .bn-cost-bar i { transform: scaleX(1); }

/* 5 — my benefits */
.bn-mine .bn-lbl { margin-top: 0; }
.bn-mine-card { padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #eef5fd, #f3effd); }
.bn-mine-card > small { display: block; color: #6b7487; font-size: .72rem; margin-top: 2px; }
.bn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bn-split span { padding: 9px 10px; border-radius: 10px; background: #fff; font-size: .68rem; color: #8a93a4; }
.bn-split b { display: block; font-size: .95rem; color: #1d2433; margin-top: 2px; }
.bn-split .co b { color: #15803d; }
.bn-mine-more { margin-top: 12px; color: #0c64ae; font-weight: 600; font-size: .76rem; }
.bn-mine-big { padding: 18px; }
.bn-mine-big p { margin: 12px 0 0; color: #4b5568; line-height: 1.5; font-size: .8rem; }
.bn-mine-row { display: flex; justify-content: space-between; align-items: center; }
.bn-active { font-size: .66rem; font-weight: 700; color: #15803d; background: #e7f6ec; padding: 3px 9px; border-radius: 999px; }

/* 6 — documents */
.bn-docs { display: grid; gap: 8px; }
.bn-doc { display: flex; gap: 10px; align-items: center; padding: 9px; border: 1px solid #eef0f4; border-radius: 10px;
  opacity: 0; transform: translateY(8px) rotate(-1deg); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * 140ms + .3s); }
.pp-card.in .bn-doc { opacity: 1; transform: none; }
.bn-pdf { flex: none; width: 34px; height: 40px; border-radius: 6px; background: #fdecec; color: #b42318; font-size: .58rem; font-weight: 800; display: grid; place-items: center; letter-spacing: .04em; }
.bn-doc span:last-child { min-width: 0; display: flex; flex-direction: column; }
.bn-doc b { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-doc small { color: #8a93a4; font-size: .68rem; }

@media (max-width: 640px) {
  .bn-deps-scene { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-opt, .bn-deps span, .bn-doc, .bn-wait-bar i, .bn-cost-bar i { opacity: 1 !important; transform: none !important; transition: none !important; }
}