/* Fixed82 — use the supplied J1 brand-board artwork without reinterpretation */
.reference-brand-hero{
  width:100%;
  height:100%;
  min-height:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:34px 26px;
  text-align:center;
}
.reference-brand-logo{
  display:block;
  width:min(68%,525px);
  height:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
  filter:none;
}
.reference-brand-logo-dark{display:none}
html[data-theme="dark"] .reference-brand-logo-light{display:none}
html[data-theme="dark"] .reference-brand-logo-dark{display:block;width:min(54%,360px)}
.reference-brand-description{
  max-width:590px;
  margin:4px auto 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}
.reference-brand-hero .brand-feature-row{justify-content:center;margin-top:2px}

/* Exact app icon from the supplied brand sheet. */
.join-card-title .brand-mark,
.brand-j-logo{
  background:#0b2445 url("j1-reference-app-icon.png?v=fixed82") center/100% 100% no-repeat!important;
  color:transparent!important;
  overflow:hidden!important;
  border:0!important;
}
.brand-j-logo{width:44px!important;height:44px!important;border-radius:13px!important}
.join-card-title .brand-mark{width:58px!important;height:58px!important;border-radius:15px!important;padding:0!important}
.contact-mascot{content:url("j1-reference-app-icon.png?v=fixed82")!important;border-radius:22px!important}
.jclass-splash-logo{content:url("j1-reference-app-icon.png?v=fixed82")!important;border-radius:24px!important}
.topbar .brand strong{letter-spacing:.12em!important;font-weight:900!important}

/* Disable the previous reconstructed symbol/text layout. */
.landing-brand-layout,.brand-symbol-stage,.brand-copy{display:none!important}

@media(max-width:1080px){
  .reference-brand-hero{min-height:auto;padding:28px 18px}
  .reference-brand-logo{width:min(74%,460px)}
  html[data-theme="dark"] .reference-brand-logo-dark{width:min(58%,330px)}
}
@media(max-width:620px){
  .reference-brand-hero{padding:20px 10px;gap:14px}
  .reference-brand-logo{width:min(88%,390px)}
  html[data-theme="dark"] .reference-brand-logo-dark{width:min(70%,280px)}
  .reference-brand-description{font-size:14px;line-height:1.65}
}