.portal-doc #memberBenefits { max-width: 88rem; margin: 0 auto; }
.portal-doc .benefits-heading, .portal-doc .benefits-section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.portal-doc .benefits-heading h1 { font-size:2rem; margin:0 0 .4rem; }
.portal-doc .benefits-heading p, .portal-doc .benefits-section-heading p { margin:.3rem 0; color:#62666b; }
.portal-doc .benefits-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.1em; color:#c41019!important; }
.portal-doc .benefits-status { background:linear-gradient(115deg,#191919,#080808); color:white; border-radius:1rem; padding:1.7rem 2rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:1.5rem; border-left:5px solid #ed1424; }
.portal-doc .benefits-status h2 { font-size:2.3rem; margin:.3rem 0; color:white; }
.portal-doc .benefits-status p, .portal-doc .benefits-status span { color:#ccc; margin:.4rem 0; }
.portal-doc .benefits-progress { align-self:center; }
.portal-doc .benefits-progress progress { display:block; width:100%; height:.65rem; margin:1rem 0 .6rem; appearance:none; border:0; border-radius:1rem; overflow:hidden; background:#444; }
.portal-doc .benefits-progress progress::-webkit-progress-bar { background:#444; }
.portal-doc .benefits-progress progress::-webkit-progress-value { background:#ed1424; }
.portal-doc .benefits-progress progress::-moz-progress-bar { background:#ed1424; }
.portal-doc .benefits-explorer, .portal-doc .benefits-faq { background:white; border:1px solid #e1dfdc; border-radius:1rem; padding:1.5rem; }
.portal-doc #memberBenefits h2 { margin-top:0; }
.portal-doc .benefits-tier-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.portal-doc .benefits-tier-buttons button { text-align:left; padding:1rem; border:1px solid #ddd; border-radius:.65rem; background:#faf9f7; color:#242424; cursor:pointer; font:inherit; }
.portal-doc .benefits-tier-buttons button[aria-pressed="true"] { background:#fff1f2; border:2px solid #d4111e; padding:calc(1rem - 1px); }
.portal-doc .benefits-tier-buttons span { display:block; font-size:1.25rem; font-weight:700; }
.portal-doc .benefits-tier-buttons small { display:block; margin-top:.35rem; color:#62666b; }
.portal-doc .benefits-detail-heading { display:flex; align-items:center; gap:1rem; margin:1.3rem 0; }
.portal-doc .benefits-detail-heading h3 { margin:0; font-size:1.4rem; }
.portal-doc .benefits-detail-heading span { font-size:.8rem; background:#f2f1ee; padding:.25rem .6rem; border-radius:2rem; }
.portal-doc .benefits-perks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.portal-doc .benefits-perks > div { border-top:1px solid #e7e5e2; padding-top:1rem; }
.portal-doc .benefits-perks strong { font-size:1.7rem; color:#c41019; }
.portal-doc .benefits-perks h4 { margin:.5rem 0; }
.portal-doc .benefits-perks p { margin:0; color:#62666b; }
/* ONE COLUMN SINCE THE CALCULATOR WENT (2026-10-01). This was 1fr 1fr with
   the earnings calculator on the left and the FAQ on the right; with the
   calculator removed the FAQ was left in the left half against an empty
   right one. The questions read better full width anyway - an answer is
   prose, and it was wrapping at half the page. */
.portal-doc .benefits-bottom { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1.25rem; }
.portal-doc .benefits-faq details { border-bottom:1px solid #e6e4e1; padding:1rem 0; }
.portal-doc .benefits-faq summary { cursor:pointer; font-weight:600; }
.portal-doc .benefits-faq details p { color:#62666b; line-height:1.5; }
.portal-doc #memberBenefits :is(button,input,summary,a):focus-visible { outline:3px solid #b51019; outline-offset:4px; }
@media(max-width:55rem) { .portal-doc .benefits-bottom, .portal-doc .benefits-status { grid-template-columns:1fr; } .portal-doc .benefits-heading, .portal-doc .benefits-section-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:35rem) { .portal-doc .benefits-tier-buttons, .portal-doc .benefits-perks { grid-template-columns:1fr; } .portal-doc .benefits-status { padding:1.25rem; gap:1rem; } .portal-doc .benefits-explorer, .portal-doc .benefits-faq { padding:1rem; } }

/* ===================================================================
   Photography and hierarchy, matching the rewards page refresh.
   Appended rather than woven in, so the rules above stay the ones that
   built this page and these are visibly the later pass.
   =================================================================== */

/* The status band becomes the page's hero. It already carried the tier
   and the progress bar - the only thing it lacked was weight.

   THE PHOTOGRAPH IS A REAL BBM PROJECT, not stock: a standing-seam job
   the member's own trade produced. The scrim is heavier on the left,
   where the tier name sits, and lighter to the right so the building
   stays visible behind the progress figures. */
.portal-doc .benefits-status {
  position: relative; isolation: isolate; overflow: hidden;
  align-items: center;
  padding: 2.4rem 2rem;
  background-color: #111111;
  background-image:
    linear-gradient(100deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.86) 42%, rgba(10,10,10,.58) 72%, rgba(10,10,10,.76) 100%),
    url('../images/project-black-mountain.jpg?v=20260922');
  background-size: cover;
  background-position: center 62%;
}
.portal-doc .benefits-status h2 { font-family: var(--font-display); letter-spacing: -.02em; }
.portal-doc .benefits-status > div > span {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #ff5660;
}
.portal-doc .benefits-progress strong { font-size: 1.0625rem; }

/* The perk trio reads as three cards rather than three paragraphs under
   rules. Same idiom as the reward category captions. */
.portal-doc .benefits-perks > div {
  border: 1px solid #e7e5e2; border-top: 3px solid var(--red, #E41F26);
  border-radius: .75rem; padding: 1.15rem 1.15rem 1.25rem;
  background: #fdfdfc;
}
.portal-doc .benefits-perks strong { display: block; line-height: 1.1; }
.portal-doc .benefits-perks h4 { font-size: .95rem; }

/* A selected tier should be obvious at a glance, not on inspection. */
.portal-doc .benefits-tier-buttons button {
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.portal-doc .benefits-tier-buttons button:hover { border-color: #b9b9b9; transform: translateY(-1px); }
.portal-doc .benefits-tier-buttons button[aria-pressed="true"] { box-shadow: 0 .375rem 1rem rgba(212,17,30,.12); }

@media (prefers-reduced-motion: reduce) {
  .portal-doc .benefits-tier-buttons button { transition: none; }
  .portal-doc .benefits-tier-buttons button:hover { transform: none; }
}

@media (max-width: 55rem) {
  .portal-doc .benefits-status {
    padding: 1.6rem 1.35rem;
    background-image:
      linear-gradient(rgba(10,10,10,.86), rgba(10,10,10,.92)),
      url('../images/project-black-mountain.jpg?v=20260922');
  }
}