body.support-page {
  margin: 0;
  color: #f5f8ff;
  background:
    radial-gradient(circle at 50% -8%, rgba(21, 157, 255, .13), transparent 38%),
    linear-gradient(180deg, #050a13 0%, #07101d 56%, #050a13 100%);
}

.support-shell.site-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 32px;
}

.support-shell > .viewer-site-nav {
  margin-bottom: 0;
}

.support-shell > section,
.support-shell > footer {
  width: min(1460px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}

.support-hero.hero-panel {
  position: relative;
  display: block;
  min-height: 0;
  margin-top: 24px;
  margin-bottom: 18px;
  padding: clamp(34px, 5vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(52, 94, 145, .5);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(3, 12, 27, .97), rgba(6, 25, 52, .88) 62%, rgba(8, 41, 82, .65)),
    radial-gradient(circle at 84% 20%, rgba(21, 157, 255, .2), transparent 30%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.support-hero::after {
  content: "?";
  position: absolute;
  right: clamp(30px, 8vw, 120px);
  top: 50%;
  transform: translateY(-52%);
  color: rgba(80, 166, 255, .08);
  font-size: clamp(12rem, 22vw, 24rem);
  font-weight: 950;
  line-height: .8;
}

.support-hero > * { position: relative; z-index: 1; }

.support-hero h1 {
  max-width: 760px;
  margin: 14px 0 16px;
  font-size: clamp(3.4rem, 7vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.support-hero .hero-text {
  max-width: 680px;
  margin: 0;
  color: #b8c7da;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}

.support-hero .hero-actions { margin-top: 26px; }

.support-development { margin-bottom: 18px; }

.support-development-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  padding: 28px 34px;
  border: 1px solid rgba(52, 94, 145, .46);
  border-left: 3px solid #159dff;
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(8, 22, 42, .96), rgba(8, 31, 59, .84));
}

.support-development-card h2 { margin: 6px 0 8px; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.support-development-card p:last-child { max-width: 820px; margin: 0; color: #aebdd0; line-height: 1.55; }
.support-development-actions { min-width: 0; margin: 0; flex-wrap: wrap; }
.support-development-actions .btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }

.support-shell .compact-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.support-capability-card {
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(52, 94, 145, .48);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(8, 20, 39, .97), rgba(5, 14, 29, .96));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.support-capability-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 157, 255, .72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
}

.support-capability-card .cap-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border: 1px solid rgba(21, 157, 255, .5);
  border-radius: 14px;
  background-color: rgba(21, 157, 255, .14);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
}

.support-capability-card .cap-icon.group { background-image: url('/public/assets/nav-icons/teams.svg'); }
.support-capability-card .cap-icon.trophy { background-image: url('/public/assets/nav-icons/org-portal.svg'); }
.support-capability-card .cap-icon.camera { background-image: url('/public/assets/nav-icons/talent.svg'); }
.support-capability-card .cap-icon.globe { background-image: url('/public/assets/nav-icons/whats-on.svg'); }
.support-capability-card h3 { margin: 0 0 12px; font-size: 1.35rem; line-height: 1.15; }
.support-capability-card p { color: #9fb0c5; line-height: 1.55; }
.support-capability-card > a { max-width: 100%; margin-top: auto; overflow-wrap: anywhere; }

.support-guides {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.support-guide-card {
  border-radius: 12px;
  border-color: rgba(52, 94, 145, .46);
  background: rgba(7, 18, 35, .94);
}

.support-guide-card h2 { margin-bottom: 18px; }
.support-guide-card .mini-row { align-items: flex-start; }
.support-guide-card .avatar-chip { flex: 0 0 auto; background: rgba(21, 157, 255, .14); color: #71c5ff; }
.support-guide-card--featured { grid-column: 1 / -1; }
.support-guide-card--featured p:not(.eyebrow) { max-width: 760px; color: #9fb0c5; line-height: 1.6; }
.support-guide-card--featured .btn { display: inline-flex; margin-top: 12px; white-space: normal; }

.support-shell .compact-footer { margin-top: 24px; }

.support-shell a:focus-visible,
.support-shell button:focus-visible {
  outline: 3px solid #69c7ff;
  outline-offset: 3px;
}

html.bracketr-theme-light body.support-page {
  color: #17263a;
  background: radial-gradient(circle at 50% -8%, rgba(21,157,255,.1), transparent 38%), linear-gradient(180deg,#f4f8fc,#eaf2f9 56%,#f4f8fc);
}

html.bracketr-theme-light .support-hero,
html.bracketr-theme-light .support-development-card,
html.bracketr-theme-light .support-capability-card,
html.bracketr-theme-light .support-guide-card {
  border-color: rgba(30,64,105,.2);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 46px rgba(35,73,112,.08);
}

html.bracketr-theme-light .support-hero h1,
html.bracketr-theme-light .support-development-card h2,
html.bracketr-theme-light .support-capability-card h3,
html.bracketr-theme-light .support-guide-card h2 { color: #102b48; }

html.bracketr-theme-light .support-hero .hero-text,
html.bracketr-theme-light .support-development-card p:last-child,
html.bracketr-theme-light .support-capability-card p { color: #526a82; }
html.bracketr-theme-light .support-guide-card--featured p:not(.eyebrow) { color: #526a82; }

@media (prefers-reduced-motion: reduce) {
  .support-capability-card { transition: none; }
  .support-capability-card:hover { transform: none; }
}

@media (max-width: 1000px) {
  .support-shell .compact-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-development-card { grid-template-columns: 1fr; }
  .support-development-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .support-shell > section,
  .support-shell > footer { width: min(100% - 28px, 1460px); }
  .support-hero.hero-panel { margin-top: 14px; padding: 28px 22px; }
  .support-hero h1 { font-size: clamp(3rem, 17vw, 5rem); }
  .support-development-card { padding: 24px 20px; }
  .support-development-actions { align-items: stretch; flex-direction: column; }
  .support-development-actions .btn { width: 100%; }
  .support-shell .compact-capabilities,
  .support-guides { grid-template-columns: 1fr; }
  .support-capability-card { min-height: 0; }
}