/* IMB Digital Hub · Production V1 · informative Home refinement
   Keeps the existing role-aware controller and app cards intact.
   This layer only improves the signed-in Home presentation. */

/* ---------- Hero ---------- */
#home .home-intro.prod-home-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  display:block!important;
  min-height:250px!important;
  margin:0 0 16px!important;
  padding:30px 34px!important;
  border:1px solid color-mix(in srgb,var(--h7-blue) 28%,var(--h7-line))!important;
  border-radius:20px!important;
  background:
    linear-gradient(90deg,rgba(3,37,73,.94) 0%,rgba(4,61,111,.82) 38%,rgba(6,65,112,.36) 66%,rgba(5,35,61,.12) 100%),
    url('/shared/imb-institute-aerial.jpg?v=20261007') center 48%/cover no-repeat!important;
  box-shadow:var(--h7-shadow)!important;
  color:#fff!important;
}
#home .home-intro.prod-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16));
  pointer-events:none;
}
#home .home-intro.prod-home-hero::after{display:none!important}
#home .home-intro.prod-home-hero>div{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-height:188px!important;
  max-width:min(660px,62%)!important;
}
#home .prod-hero-kicker{
  display:inline-flex;
  align-items:center;
  margin:0 0 10px;
  font-size:12px;
  line-height:1;
  font-weight:780;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
#home .home-intro.prod-home-hero h1{
  margin:0!important;
  max-width:18ch!important;
  font-size:clamp(31px,3.2vw,45px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
#home .prod-hero-description{
  margin:12px 0 0!important;
  max-width:58ch!important;
  font-size:15.5px!important;
  line-height:1.55!important;
  color:rgba(255,255,255,.9)!important;
}
#home .home-intro.prod-home-hero p.prod-hero-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px 8px!important;
  margin:10px 0 0!important;
  font-size:13px!important;
  line-height:1.4!important;
  color:rgba(255,255,255,.78)!important;
}
#home .prod-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}
#home .prod-hero-actions .btn{
  min-height:40px;
  padding:0 16px!important;
  border-radius:11px!important;
  font-size:13.5px!important;
  font-weight:700!important;
}
#home .prod-hero-actions .btn-primary{
  background:#fff!important;
  border-color:#fff!important;
  color:#064a87!important;
  box-shadow:0 6px 16px rgba(0,0,0,.14)!important;
}
#home .prod-hero-actions .btn-secondary{
  background:rgba(8,39,69,.28)!important;
  border-color:rgba(255,255,255,.62)!important;
  color:#fff!important;
  backdrop-filter:blur(6px);
}
#home .prod-hero-location{
  position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;
  background:rgba(4,28,50,.62);
  color:rgba(255,255,255,.92);
  font-size:11.5px;
  font-weight:650;
  backdrop-filter:blur(8px);
}
#home .prod-hero-location svg{width:15px;height:15px;flex:none}

/* ---------- How access works ---------- */
#home .prod-access-how{
  display:grid;
  grid-template-columns:minmax(180px,.85fr) minmax(0,2.4fr);
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid var(--h7-line);
  border-radius:16px;
  background:var(--h7-panel);
  box-shadow:var(--h7-shadow);
}
#home .prod-access-lead{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center}
#home .prod-access-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--h7-blue-tint);color:var(--h7-blue);
}
#home .prod-access-icon svg{width:20px;height:20px}
#home .prod-access-lead h2{margin:0;font-size:16px;color:var(--h7-ink)}
#home .prod-access-lead p{margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--h7-muted)}
#home .prod-access-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
#home .prod-access-steps li{position:relative;display:grid;grid-template-columns:27px minmax(0,1fr);gap:9px;align-items:start;min-width:0}
#home .prod-access-steps li:not(:last-child)::after{
  content:"›";position:absolute;right:-11px;top:6px;color:var(--h7-blue);font-size:19px;font-weight:700
}
#home .prod-step-num{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--h7-blue) 60%,var(--h7-line));color:var(--h7-blue);font-size:12px;font-weight:780}
#home .prod-access-steps strong{display:block;font-size:12.8px;line-height:1.3;color:var(--h7-ink)}
#home .prod-access-steps small{display:block;margin-top:3px;font-size:11.8px;line-height:1.35;color:var(--h7-muted)}

/* ---------- Apps section heading ---------- */
#home #homeAppsHeadV150{display:none!important}
#home .prod-apps-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:2px 0 10px;
}
#home .prod-apps-head>div:first-child{min-width:0}
#home .prod-apps-head h2{margin:0;font-size:19px;letter-spacing:-.01em;color:var(--h7-ink)}
#home .prod-apps-head p{margin:3px 0 0;font-size:13px;line-height:1.4;color:var(--h7-muted)}
#home .prod-apps-note{
  flex:0 1 390px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid color-mix(in srgb,var(--h7-blue) 24%,var(--h7-line));
  border-radius:11px;
  background:var(--h7-blue-tint);
  color:var(--h7-blue-ink);
  font-size:12px;
  line-height:1.35;
}
#home .prod-apps-note svg{width:16px;height:16px;flex:none}

/* Keep the accepted application cards, only make the section feel intentional. */
#home #appCardsV147{margin-bottom:0!important}
#home .h149-card{height:100%}

/* ---------- Role explainer ---------- */
#home .prod-role-info{
  margin:18px 0 0;
  padding:17px 18px 18px;
  border:1px solid var(--h7-line);
  border-radius:16px;
  background:var(--h7-panel);
  box-shadow:var(--h7-shadow);
}
#home .prod-role-info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
#home .prod-role-info-head h2{margin:0;font-size:17px;color:var(--h7-ink)}
#home .prod-role-info-head p{margin:3px 0 0;max-width:78ch;font-size:12.8px;line-height:1.45;color:var(--h7-muted)}
#home .prod-role-manager-link{display:none;flex:none;align-items:center;justify-content:center;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--h7-line);color:var(--h7-blue);font-size:12.5px;font-weight:700;text-decoration:none;background:var(--h7-panel)}
body.hub-manager-mode #home .prod-role-manager-link{display:inline-flex}
#home .prod-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#home .prod-role-card{display:grid;grid-template-columns:35px minmax(0,1fr);gap:10px;padding:11px;border:1px solid var(--h7-line-soft);border-radius:12px;background:var(--h7-soft);min-width:0}
#home .prod-role-card .ic{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:var(--h7-blue-tint);color:var(--h7-blue)}
#home .prod-role-card .ic svg{width:18px;height:18px}
#home .prod-role-card strong{display:block;font-size:13px;color:var(--h7-ink)}
#home .prod-role-card small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--h7-muted)}
#home .prod-role-foot{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--h7-line-soft);font-size:12px;line-height:1.4;color:var(--h7-muted)}

/* ---------- Existing role-aware layouts ---------- */
#home #hubOverviewV147{margin-top:0!important}
#home #passkeyInviteV149{margin-top:0!important}
#home.h150-member #homeGridV150{margin-top:0!important}
#home.h150-member .prod-role-info{margin-top:18px}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] #home .home-intro.prod-home-hero{
  border-color:rgba(110,170,225,.34)!important;
  background:
    linear-gradient(90deg,rgba(3,18,35,.96) 0%,rgba(5,36,64,.88) 40%,rgba(4,32,57,.46) 70%,rgba(2,14,25,.3) 100%),
    url('/shared/imb-institute-aerial.jpg?v=20261007') center 48%/cover no-repeat!important;
}
html[data-theme="dark"] #home .prod-hero-actions .btn-primary{background:#eaf3fb!important;color:#073e70!important;border-color:#eaf3fb!important}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  #home .home-intro.prod-home-hero>div{max-width:min(680px,72%)!important}
  #home .prod-access-how{grid-template-columns:minmax(160px,.75fr) minmax(0,2.5fr)}
  #home .prod-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  #home .home-intro.prod-home-hero{min-height:235px!important;padding:24px!important;background-position:center 44%!important}
  #home .home-intro.prod-home-hero>div{max-width:82%!important;min-height:185px!important}
  #home .prod-hero-location{display:none}
  #home .prod-access-how{grid-template-columns:minmax(0,1fr);align-items:start}
  #home .prod-access-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  #home .prod-apps-head{align-items:flex-start;flex-direction:column}
  #home .prod-apps-note{flex:auto;width:100%;box-sizing:border-box}
}
@media (max-width:640px){
  #home .home-intro.prod-home-hero{
    min-height:0!important;
    padding:22px 18px!important;
    border-radius:16px!important;
    background:
      linear-gradient(90deg,rgba(3,37,73,.95) 0%,rgba(4,61,111,.87) 58%,rgba(4,42,75,.55) 100%),
      url('/shared/imb-institute-aerial.jpg?v=20261007') 56% center/cover no-repeat!important;
  }
  #home .home-intro.prod-home-hero>div{min-height:205px!important;max-width:100%!important}
  #home .home-intro.prod-home-hero h1{font-size:30px!important;max-width:14ch!important}
  #home .prod-hero-description{max-width:36ch!important;font-size:14px!important}
  #home .prod-hero-actions{width:100%;display:grid;grid-template-columns:1fr}
  #home .prod-hero-actions .btn{width:100%;justify-content:center}
  #home .prod-access-how{padding:14px;border-radius:14px}
  #home .prod-access-steps{grid-template-columns:minmax(0,1fr);gap:11px}
  #home .prod-access-steps li:not(:last-child)::after{display:none}
  #home .prod-role-info{padding:14px;border-radius:14px}
  #home .prod-role-info-head{display:grid;grid-template-columns:minmax(0,1fr)}
  #home .prod-role-manager-link{width:100%;box-sizing:border-box}
  #home .prod-role-grid{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   2026-10-07 refinement · calmer hero, scalable app-role model, member width
   ===================================================================== */

/* The source institute photo is 16:9 while the hero is panoramic. Using a
   fixed image height instead of `cover` avoids the severe default zoom/crop.
   The left side is intentionally filled by the Hub-blue overlay. */
#home#home .home-intro.prod-home-hero,
#home#home.h150-member .home-intro.prod-home-hero{
  min-height:270px!important;
  background:
    linear-gradient(90deg,rgba(3,37,73,.97) 0%,rgba(4,55,99,.92) 34%,rgba(5,61,108,.66) 52%,rgba(4,45,80,.22) 72%,rgba(3,27,48,.06) 100%),
    url('/shared/imb-institute-aerial.jpg?v=20261007b') right 47%/auto 138% no-repeat,
    #0b4f88!important;
  background-color:#0b4f88!important;
}
#home#home .home-intro.prod-home-hero>div,
#home#home.h150-member .home-intro.prod-home-hero>div{
  min-height:210px!important;
  max-width:min(650px,54%)!important;
}
/* Buttons duplicated the explanatory strip and made the photograph busy. */
#home .prod-hero-actions{display:none!important}

/* App-centred access model. Every registered app owns its own role catalogue. */
#home .prod-role-app-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));
  gap:10px;
  align-items:start;
}
#home .prod-role-app-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--h7-line-soft);
  border-radius:13px;
  background:var(--h7-soft);
}
#home .prod-role-app-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border-bottom:1px solid var(--h7-line-soft);
  background:color-mix(in srgb,var(--h7-panel) 72%,var(--h7-soft));
}
#home .prod-role-app-logo{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--h7-panel);
  border:1px solid var(--h7-line-soft);
}
#home .prod-role-app-logo img{width:30px;height:30px;object-fit:contain;display:block}
#home .prod-role-app-logo-generic{color:var(--h7-blue);background:var(--h7-blue-tint)}
#home .prod-role-app-logo-generic svg{width:20px;height:20px}
#home .prod-role-app-head strong{display:block;font-size:13.5px;line-height:1.25;color:var(--h7-ink)}
#home .prod-role-app-head small{display:block;margin-top:2px;font-size:11px;color:var(--h7-muted)}
#home .prod-role-app-roles{display:grid;padding:4px 11px 8px}
#home .prod-role-app-role{
  display:grid;
  grid-template-columns:minmax(92px,.34fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:8px 1px;
  border-bottom:1px solid var(--h7-line-soft);
}
#home .prod-role-app-role:last-child{border-bottom:0}
#home .prod-role-app-role b{font-size:11.8px;line-height:1.35;color:var(--h7-ink)}
#home .prod-role-app-role span{font-size:11.2px;line-height:1.38;color:var(--h7-muted);overflow-wrap:anywhere}
#home .prod-role-empty{grid-column:1/-1;margin:0;padding:14px;color:var(--h7-muted);font-size:12.5px}
#home .prod-role-app-grid-member .prod-role-app-role{grid-template-columns:minmax(0,1fr)}
#home .prod-role-app-grid-member .prod-role-app-role span{margin-top:-3px}

/* Member Home has no left navigation rail, so use the available viewport rather
   than retaining the old narrow desktop measure. The account panel remains a
   readable fixed rail while the app area receives the extra width. */
body.h150-member-home .hub-content{
  width:100%!important;
  max-width:1500px!important;
  padding-inline:clamp(20px,3vw,48px)!important;
  box-sizing:border-box!important;
}
body.h150-member-home #home{
  width:100%!important;
  max-width:none!important;
}
body.h150-member-home #homeGridV150.h150-grid{
  width:100%!important;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,360px)!important;
  gap:22px!important;
}
body.h150-member-home #homeMainV150{min-width:0!important}

html[data-theme="dark"] #home#home .home-intro.prod-home-hero,
html[data-theme="dark"] #home#home.h150-member .home-intro.prod-home-hero{
  background:
    linear-gradient(90deg,rgba(2,18,34,.98) 0%,rgba(3,30,54,.94) 36%,rgba(4,38,67,.7) 54%,rgba(2,25,44,.34) 74%,rgba(1,14,25,.16) 100%),
    url('/shared/imb-institute-aerial.jpg?v=20261007b') right 47%/auto 138% no-repeat,
    #062c4c!important;
}

@media (max-width:1100px){
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{
    background-size:auto 132%!important;
    background-position:right 48%!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:62%!important}
  body.h150-member-home #homeGridV150.h150-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
}
@media (max-width:820px){
  body.h150-member-home .hub-content{max-width:none!important;padding-inline:16px!important}
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{
    min-height:245px!important;
    background-size:auto 126%!important;
    background-position:right center!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:72%!important;min-height:190px!important}
  #home .prod-role-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body.h150-member-home .hub-content{padding-inline:12px!important}
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{
    min-height:235px!important;
    background:
      linear-gradient(90deg,rgba(3,37,73,.96) 0%,rgba(4,54,96,.88) 58%,rgba(4,42,75,.57) 100%),
      url('/shared/imb-institute-aerial.jpg?v=20261007b') 62% center/auto 118% no-repeat,
      #0b4f88!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:100%!important;min-height:185px!important}
  #home .prod-role-app-grid{grid-template-columns:minmax(0,1fr)}
  #home .prod-role-app-role{grid-template-columns:minmax(0,1fr);gap:3px}
}

/* =====================================================================
   2026-10-07 refinement V3 · readable hero, aligned flow, role documentation
   ===================================================================== */

/* Hero: one label only, strong light-mode contrast and a larger photographic
   field. The photograph occupies the right side instead of being cropped as a
   full-card background; this keeps the building visible at every desktop size. */
#home#home .home-intro.prod-home-hero,
#home#home.h150-member .home-intro.prod-home-hero{
  min-height:286px!important;
  padding:32px 34px!important;
  background:#0b3b69!important;
  border-color:rgba(33,105,169,.34)!important;
}
#home .home-intro.prod-home-hero .eyebrow,
#home .home-intro.prod-home-hero .h150-kicker{display:none!important}
#home#home .home-intro.prod-home-hero::before,
#home#home.h150-member .home-intro.prod-home-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 0 0 44%!important;
  z-index:0!important;
  background:url('/shared/imb-institute-aerial.jpg?v=20261007c') 52% 52%/cover no-repeat!important;
  opacity:1!important;
  pointer-events:none!important;
}
#home#home .home-intro.prod-home-hero::after,
#home#home.h150-member .home-intro.prod-home-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,
    rgba(6,39,72,.99) 0%,
    rgba(7,47,84,.98) 34%,
    rgba(7,48,86,.92) 43%,
    rgba(7,48,86,.58) 53%,
    rgba(6,39,71,.20) 66%,
    rgba(4,24,43,.06) 78%,
    rgba(4,24,43,.02) 100%)!important;
  pointer-events:none!important;
}
#home#home .home-intro.prod-home-hero>div,
#home#home.h150-member .home-intro.prod-home-hero>div{
  z-index:2!important;
  min-height:222px!important;
  max-width:min(610px,45%)!important;
}
#home .prod-hero-kicker{
  color:#fff!important;
  opacity:.96!important;
  text-shadow:0 1px 2px rgba(0,0,0,.2)!important;
}
#home .home-intro.prod-home-hero p.prod-hero-meta,
#home .home-intro.prod-home-hero p.prod-hero-meta *{
  color:rgba(255,255,255,.96)!important;
  opacity:1!important;
}
#home .home-intro.prod-home-hero p.prod-hero-meta{
  margin:10px 0 0!important;
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:650!important;
  text-shadow:0 1px 2px rgba(0,0,0,.22)!important;
}
#home .prod-hero-description{
  order:initial!important;
  margin:7px 0 0!important;
  max-width:54ch!important;
  color:rgba(255,255,255,.90)!important;
  font-size:13.5px!important;
  line-height:1.46!important;
  font-weight:500!important;
  text-shadow:0 1px 2px rgba(0,0,0,.2)!important;
}
#home .prod-hero-location{z-index:3!important}

/* How access works: explicit connector columns keep arrows visually centered
   between the three steps rather than attached to one card edge. */
#home .prod-access-how{
  grid-template-columns:minmax(195px,.82fr) minmax(0,2.8fr)!important;
  gap:20px!important;
}
#home .prod-access-flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);
  gap:0;
  align-items:stretch;
  min-width:0;
}
#home .prod-access-step{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  gap:9px;
  align-items:start;
  min-width:0;
}
#home .prod-access-step strong{display:block;font-size:12.8px;line-height:1.3;color:var(--h7-ink)}
#home .prod-access-step small{display:block;margin-top:3px;font-size:11.8px;line-height:1.35;color:var(--h7-muted)}
#home .prod-step-arrow{
  display:grid;
  place-items:center;
  align-self:stretch;
  color:var(--h7-blue);
  font-size:22px;
  line-height:1;
  font-weight:760;
  transform:translateY(-1px);
}

/* Role documentation is deliberately not another row of app launcher cards. */
#home .prod-role-info-head>div{flex:1;min-width:0}
#home .prod-role-info-head p{width:100%!important;max-width:none!important}
#home .prod-role-app-stack,
#home .prod-member-access-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

/* Hub Manager: one full-width application row at a time. Digital Hub is sorted
   first in JS, followed by the registered applications. */
#home .prod-role-app-row{
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,1fr);
  min-width:0;
  overflow:hidden;
  border:1px solid var(--h7-line-soft);
  border-radius:13px;
  background:var(--h7-soft);
}
#home .prod-role-app-identity{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;
  align-items:center;
  align-content:start;
  padding:13px 14px;
  border-right:1px solid var(--h7-line-soft);
  background:color-mix(in srgb,var(--h7-panel) 78%,var(--h7-soft));
}
#home .prod-role-app-identity strong{display:block;font-size:13.7px;line-height:1.25;color:var(--h7-ink)}
#home .prod-role-app-identity small{display:block;margin-top:2px;font-size:11.2px;color:var(--h7-muted)}
#home .prod-role-app-row .prod-role-app-roles{display:grid;padding:5px 13px 7px}
#home .prod-role-app-row .prod-role-app-role{
  display:grid;
  grid-template-columns:minmax(120px,170px) minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:9px 2px;
  border-bottom:1px solid var(--h7-line-soft);
}
#home .prod-role-app-row .prod-role-app-role:last-child{border-bottom:0}
#home .prod-role-app-row .prod-role-app-role b{font-size:12px;line-height:1.35;color:var(--h7-ink)}
#home .prod-role-app-row .prod-role-app-role span{font-size:11.5px;line-height:1.42;color:var(--h7-muted);overflow-wrap:anywhere}

/* Member: describe the assigned role, not the launcher. */
#home .prod-member-access-row{
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,1fr);
  min-width:0;
  overflow:hidden;
  border:1px solid var(--h7-line-soft);
  border-radius:13px;
  background:var(--h7-panel);
}
#home .prod-member-app-identity{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;
  align-items:center;
  align-content:start;
  padding:13px 14px;
  border-right:1px solid var(--h7-line-soft);
  background:var(--h7-soft);
}
#home .prod-member-app-identity strong{display:block;font-size:13.7px;line-height:1.25;color:var(--h7-ink)}
#home .prod-member-app-identity small{display:block;margin-top:2px;font-size:11.2px;color:var(--h7-muted)}
#home .prod-member-role-list{display:grid;padding:6px 14px}
#home .prod-member-role{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:14px;align-items:start;padding:9px 0;border-bottom:1px solid var(--h7-line-soft)}
#home .prod-member-role:last-child{border-bottom:0}
#home .prod-member-role-name{font-size:12px;line-height:1.35;font-weight:760;color:var(--h7-ink)}
#home .prod-member-role p{margin:0!important;font-size:11.7px!important;line-height:1.45!important;color:var(--h7-muted)!important}
#home .prod-role-contact a{font-weight:720;color:var(--h7-blue);text-decoration:none}
#home .prod-role-contact a:hover{text-decoration:underline}
#home .prod-role-contact>span{display:block;margin-top:3px;color:var(--h7-muted)}

/* The member Home can use the viewport because there is no navigation rail. */
body.h150-member-home .hub-content{max-width:1580px!important;padding-inline:clamp(18px,2.5vw,42px)!important}
body.h150-member-home #homeGridV150.h150-grid{grid-template-columns:minmax(0,1.85fr) minmax(300px,350px)!important;gap:20px!important}

html[data-theme="dark"] #home#home .home-intro.prod-home-hero,
html[data-theme="dark"] #home#home.h150-member .home-intro.prod-home-hero{background:#062b4c!important}
html[data-theme="dark"] #home#home .home-intro.prod-home-hero::after,
html[data-theme="dark"] #home#home.h150-member .home-intro.prod-home-hero::after{
  background:linear-gradient(90deg,rgba(2,17,32,.99) 0%,rgba(3,27,49,.98) 36%,rgba(3,31,56,.91) 44%,rgba(3,31,56,.58) 55%,rgba(2,20,36,.22) 68%,rgba(1,12,22,.06) 100%)!important;
}

@media (max-width:1100px){
  #home#home .home-intro.prod-home-hero::before,
  #home#home.h150-member .home-intro.prod-home-hero::before{left:40%!important}
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:52%!important}
  #home .prod-access-how{grid-template-columns:minmax(170px,.7fr) minmax(0,2.8fr)!important}
  body.h150-member-home #homeGridV150.h150-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:820px){
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{min-height:260px!important;padding:26px!important}
  #home#home .home-intro.prod-home-hero::before,
  #home#home.h150-member .home-intro.prod-home-hero::before{inset:0!important;background-position:center 52%!important}
  #home#home .home-intro.prod-home-hero::after,
  #home#home.h150-member .home-intro.prod-home-hero::after{
    background:linear-gradient(90deg,rgba(4,34,63,.94) 0%,rgba(4,38,69,.85) 48%,rgba(4,38,69,.52) 72%,rgba(3,24,43,.28) 100%)!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:70%!important;min-height:205px!important}
  #home .prod-access-how{grid-template-columns:minmax(0,1fr)!important}
  #home .prod-access-flow{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr)}
  #home .prod-role-app-row,
  #home .prod-member-access-row{grid-template-columns:minmax(0,1fr)}
  #home .prod-role-app-identity,
  #home .prod-member-app-identity{border-right:0;border-bottom:1px solid var(--h7-line-soft)}
}
@media (max-width:640px){
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{min-height:245px!important;padding:22px 18px!important}
  #home#home .home-intro.prod-home-hero::after,
  #home#home.h150-member .home-intro.prod-home-hero::after{
    background:linear-gradient(90deg,rgba(3,31,58,.96) 0%,rgba(4,42,76,.88) 64%,rgba(4,42,76,.62) 100%)!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{max-width:100%!important;min-height:195px!important}
  #home .prod-hero-location{display:none!important}
  #home .prod-access-flow{grid-template-columns:minmax(0,1fr);gap:10px}
  #home .prod-step-arrow{display:none}
  #home .prod-role-app-row .prod-role-app-role,
  #home .prod-member-role{grid-template-columns:minmax(0,1fr);gap:4px}
  body.h150-member-home .hub-content{padding-inline:12px!important}
}


/* =====================================================================
   2026-10-07 refinement V4 · balanced app grid + mobile hero composition
   ===================================================================== */

/* App cards use a 12-column internal grid so the rows can be balanced by
   JavaScript for any number of applications. Two apps fill two equal halves;
   three apps fill thirds; four fill quarters; larger sets are distributed so
   the last row never leaves a narrow orphan card. */
#home #appCardsV147.h147-apps{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
#home #appCardsV147.h147-apps>.h149-card{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
}

/* The member launcher and its account/security rail remain separate concepts.
   The launcher itself now consumes all of the width available to its column. */
body.h150-member-home #homeMainV150,
body.h150-member-home #appCardsV147{width:100%!important;min-width:0!important}

/* Dedicated connector columns are centered between the explanatory steps. */
#home .prod-step-arrow{
  align-self:center!important;
  justify-self:center!important;
  width:22px!important;
  height:30px!important;
  line-height:30px!important;
  transform:none!important;
}

/* On phones the hero becomes two honest bands instead of putting copy over a
   busy photograph. This guarantees readable text while keeping the institute
   photograph prominent and recognizable. */
@media (max-width:640px){
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto clamp(150px,43vw,180px)!important;
    min-height:0!important;
    padding:0!important;
    background:#0b3b69!important;
    border-radius:16px!important;
  }
  #home#home .home-intro.prod-home-hero::before,
  #home#home.h150-member .home-intro.prod-home-hero::before{
    content:""!important;
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:100%!important;
    min-height:150px!important;
    z-index:0!important;
    background:url('/shared/imb-institute-aerial.jpg?v=20261007d') 50% 53%/cover no-repeat!important;
    opacity:1!important;
  }
  #home#home .home-intro.prod-home-hero::after,
  #home#home.h150-member .home-intro.prod-home-hero::after{display:none!important}
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{
    grid-column:1!important;
    grid-row:1!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:21px 18px 19px!important;
    background:linear-gradient(135deg,#0b3b69 0%,#124f86 100%)!important;
  }
  #home .home-intro.prod-home-hero h1{
    max-width:none!important;
    font-size:clamp(28px,8.4vw,34px)!important;
    line-height:1.06!important;
    text-wrap:balance;
  }
  #home .prod-hero-kicker{
    margin-bottom:8px!important;
    font-size:11px!important;
    color:#fff!important;
  }
  #home .home-intro.prod-home-hero p.prod-hero-meta{
    margin-top:9px!important;
    font-size:12.8px!important;
    line-height:1.38!important;
    color:#fff!important;
    text-shadow:none!important;
  }
  #home .prod-hero-description{
    margin-top:6px!important;
    max-width:none!important;
    font-size:12.8px!important;
    line-height:1.42!important;
    color:rgba(255,255,255,.94)!important;
    text-shadow:none!important;
  }
  #home .prod-hero-location{display:none!important}
  #home .prod-step-arrow{display:none!important}
}

/* Extra-small phones: keep the copy comfortable and let the image be the
   compact visual punctuation below it. */
@media (max-width:390px){
  #home#home .home-intro.prod-home-hero,
  #home#home.h150-member .home-intro.prod-home-hero{
    grid-template-rows:auto 150px!important;
  }
  #home#home .home-intro.prod-home-hero>div,
  #home#home.h150-member .home-intro.prod-home-hero>div{padding:19px 15px 17px!important}
  #home .home-intro.prod-home-hero h1{font-size:28px!important}
}


/* =====================================================================
   2026-10-07 refinement V5 · member hero parity + account action polish
   ===================================================================== */

/* The legacy member Home uses a highly-specific decorative ::after ring.
   Re-declare the production hero at a higher specificity so Hub Managers and
   members receive exactly the same hero treatment on desktop. */
:is(html,#q150#q150) #home .home-intro.prod-home-hero{
  background:#0b3b69!important;
  color:#fff!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 0 0 44%!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  z-index:0!important;
  opacity:1!important;
  background:url('/shared/imb-institute-aerial.jpg?v=20261007e') 52% 52%/cover no-repeat!important;
  pointer-events:none!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  z-index:1!important;
  opacity:1!important;
  background:linear-gradient(90deg,
    rgba(6,39,72,.99) 0%,
    rgba(7,47,84,.98) 34%,
    rgba(7,48,86,.92) 43%,
    rgba(7,48,86,.58) 53%,
    rgba(6,39,71,.20) 66%,
    rgba(4,24,43,.06) 78%,
    rgba(4,24,43,.02) 100%)!important;
  pointer-events:none!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero>div{
  position:relative!important;
  z-index:2!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero .prod-hero-kicker{
  color:#fff!important;
  opacity:.94!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero h1{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.14)!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero p.prod-hero-meta,
:is(html,#q150#q150) #home .home-intro.prod-home-hero p.prod-hero-meta span{
  color:rgba(255,255,255,.96)!important;
  font-weight:650!important;
  text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}
:is(html,#q150#q150) #home .home-intro.prod-home-hero p.prod-hero-description{
  color:rgba(255,255,255,.91)!important;
  font-weight:500!important;
  text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}

/* Member account actions remain ordinary buttons owned by hub-suite-v147.js.
   These rules only improve presentation and explicitly keep the click targets
   above decorative layers. */
body.h150-member-home .h150-acct [data-h150-addpk],
body.h150-member-home .h150-acct [data-h150-security],
body.h150-member-home .h150-acct [data-h150-phone]{
  position:relative;
  z-index:2;
  pointer-events:auto!important;
  cursor:pointer!important;
}
body.h150-member-home .h150-acct [data-h150-addpk]{
  min-width:58px;
  min-height:36px;
  padding-inline:13px!important;
  border-radius:10px!important;
}
body.h150-member-home .h150-acct [data-h150-security]{
  min-height:40px;
  border-radius:11px!important;
  font-weight:700!important;
}
body.h150-member-home .h150-phone-link{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:52px;
  margin-top:10px;
  padding:9px 11px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 18px;
  gap:9px;
  align-items:center;
  text-align:left!important;
  border:1px solid var(--h7-line)!important;
  border-radius:12px!important;
  background:var(--h7-soft)!important;
  color:var(--h7-ink)!important;
  text-decoration:none!important;
  box-shadow:none!important;
  font:inherit;
}
body.h150-member-home .h150-phone-link:hover{
  border-color:color-mix(in srgb,var(--h7-blue) 42%,var(--h7-line))!important;
  background:color-mix(in srgb,var(--h7-blue-tint) 62%,var(--h7-soft))!important;
}
body.h150-member-home .h150-phone-link:focus-visible{
  outline:2px solid var(--h7-blue)!important;
  outline-offset:2px!important;
}
body.h150-member-home .h150-phone-link .h150-phone-ic{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--h7-line);
  border-radius:10px;
  background:var(--h7-panel);
  color:var(--h7-blue);
}
body.h150-member-home .h150-phone-link .h150-phone-ic svg{width:18px;height:18px}
body.h150-member-home .h150-phone-link .h150-phone-copy{min-width:0;display:block}
body.h150-member-home .h150-phone-link .h150-phone-copy strong{
  display:block;
  font-size:12.8px;
  line-height:1.28;
  color:var(--h7-ink);
}
body.h150-member-home .h150-phone-link .h150-phone-copy small{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  line-height:1.3;
  color:var(--h7-muted);
}
body.h150-member-home .h150-phone-link .h150-phone-arrow{
  justify-self:end;
  color:var(--h7-blue);
  font-size:20px;
  font-weight:700;
  line-height:1;
}

html[data-theme="dark"] :is(html,#q150#q150) #home .home-intro.prod-home-hero::after{
  background:linear-gradient(90deg,
    rgba(2,17,32,.99) 0%,
    rgba(3,27,49,.98) 36%,
    rgba(3,31,56,.91) 44%,
    rgba(3,31,56,.58) 55%,
    rgba(2,20,36,.22) 68%,
    rgba(1,12,22,.06) 100%)!important;
}

/* Preserve the V4 stacked mobile composition at a specificity that also beats
   the old member-only ring decoration. */
@media (max-width:640px){
  :is(html,#q150#q150) #home .home-intro.prod-home-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto clamp(150px,43vw,180px)!important;
    min-height:0!important;
    padding:0!important;
    background:#0b3b69!important;
  }
  :is(html,#q150#q150) #home .home-intro.prod-home-hero::before{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:100%!important;
    min-height:150px!important;
    z-index:0!important;
    background:url('/shared/imb-institute-aerial.jpg?v=20261007e') 50% 53%/cover no-repeat!important;
  }
  :is(html,#q150#q150) #home .home-intro.prod-home-hero::after{
    display:none!important;
    content:none!important;
  }
  :is(html,#q150#q150) #home .home-intro.prod-home-hero>div{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:21px 18px 19px!important;
    background:linear-gradient(135deg,#0b3b69 0%,#124f86 100%)!important;
  }
}

/* =====================================================================
   2026-10-07 refinement V6 · exact hero layer geometry
   ===================================================================== */

/* Desktop/tablet hero layers must share the exact same containing block.
   Older member styles can otherwise leave the gradient mask a few pixels
   outside the rounded hero.  Use opposing edges rather than width/height so
   both the photo layer and the overlay resolve to the hero's padding box. */
@media (min-width:641px){
  :is(html,#q150#q150) #home .home-intro.prod-home-hero{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }

  :is(html,#q150#q150) #home .home-intro.prod-home-hero::before{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:44%!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    border-radius:0 19px 19px 0!important;
    box-sizing:border-box!important;
  }

  :is(html,#q150#q150) #home .home-intro.prod-home-hero::after{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    border-radius:19px!important;
    box-sizing:border-box!important;
  }
}

/* Keep the same exact clipping model for every signed-in Home variant. */
#home .home-intro.prod-home-hero{
  overflow:hidden!important;
  background-clip:padding-box!important;
}

/* =====================================================================
   2026-10-07 refinement V7 · restore desktop/tablet hero photo
   ===================================================================== */
/* V6 used `inset:auto` after explicit top/right/bottom/left values, which
   reset those edges and collapsed the desktop/tablet pseudo-element layers.
   The V6 block above now intentionally uses only the explicit edge values. */