/* Legacy page/header styles. Public heroes use public-hero.css. */
.stinvar-homepage.stinvar-v4 {
  --st-bg: var(--stinvar-canvas);
  --st-panel: var(--stinvar-panel);
  --st-ink: var(--stinvar-ink);
  --st-muted: var(--stinvar-muted);
  --st-line: var(--stinvar-line);
  --st-light: var(--stinvar-accent);
  --st-light-line: var(--stinvar-accent);
  --st-hero-ink: var(--stinvar-off-white);
  --st-hero-muted: var(--stinvar-steel-tint);
  --st-values-bg: color-mix(in srgb, var(--stinvar-canvas) 86%, transparent);
  --st-hero-shade: linear-gradient(90deg, color-mix(in srgb, var(--stinvar-black) 54%, transparent), color-mix(in srgb, var(--stinvar-black) 36%, transparent) 44%, color-mix(in srgb, var(--stinvar-black) 26%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--stinvar-anthracite) 72%, transparent), transparent 38%);
  --bg: var(--stinvar-canvas) !important;
  --panel: var(--stinvar-panel) !important;
  --ink: var(--stinvar-ink) !important;
  --text: var(--stinvar-ink) !important;
  --muted: var(--stinvar-muted) !important;
  --line: var(--stinvar-line) !important;
  --blue: var(--stinvar-accent) !important;
  --aqua: var(--stinvar-accent) !important;
  --bb-bg: var(--stinvar-canvas) !important;
  --bb-background: var(--stinvar-canvas) !important;
  --bb-panel: var(--stinvar-panel) !important;
  --bb-surface: var(--stinvar-panel) !important;
  --bb-elevated: var(--stinvar-material-top) !important;
  --bb-text: var(--stinvar-ink) !important;
  --bb-muted: var(--stinvar-muted) !important;
  --bb-border: var(--stinvar-line) !important;
  --bb-accent: var(--stinvar-accent) !important;
  --bb-blue: var(--stinvar-accent) !important;
  --tenant-accent: var(--stinvar-accent) !important;
  --tenant-blue: var(--stinvar-accent) !important;
}
html[data-theme="light"] .stinvar-homepage.stinvar-v4 {
  --st-hero-ink: var(--stinvar-ink-light);
  --st-hero-muted: var(--stinvar-metal-shadow);
  --st-hero-shade: linear-gradient(90deg, color-mix(in srgb, var(--stinvar-off-white) 27%, transparent), color-mix(in srgb, var(--stinvar-metal-reflection) 75%, transparent) 35%, color-mix(in srgb, var(--stinvar-metal-reflection) 57%, transparent) 69%, color-mix(in srgb, var(--stinvar-off-white) 8%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--stinvar-metal-reflection) 70%, transparent), transparent 38%);
}
.stinvar-color-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.stinvar-v4 .site-header,
.stinvar-v4 .public-footer {
  border-color: var(--stinvar-line) !important;
  background: linear-gradient(115deg, var(--stinvar-panel), var(--stinvar-canvas) 45%) !important;
}
.stinvar-v4 .site-header :is(.nav-tile, .language-compact summary) {
  color: var(--stinvar-accent) !important;
  background: var(--stinvar-material) !important;
  border-color: var(--stinvar-line) !important;
  box-shadow: var(--stinvar-material-inset) !important;
}
.stinvar-v4 .site-header :is(.nav-tile, .language-compact summary)::after {
  content: "";
  display: block !important;
  position: absolute;
  height: 1px;
  left: 9px;
  right: 9px;
  bottom: -1px;
  border-radius: 1px;
  background: var(--stinvar-accent) !important;
  box-shadow: 0 0 6px var(--stinvar-glow-soft) !important;
  opacity: .45;
}
.stinvar-v4 .site-header .language-compact summary { position: relative; }
.stinvar-v4 .site-header :is(.nav-tile, .language-compact) svg {
  color: var(--stinvar-accent);
  stroke: currentColor;
  filter: drop-shadow(0 0 3px var(--stinvar-glow-soft));
}
.stinvar-v4 .site-header :is(.fill-play, .fill-moon, .fill-dot) { fill: currentColor; stroke: none; }
.stinvar-v4 .site-header a:is(:hover, :focus-visible) .nav-tile,
.stinvar-v4 .site-header .nav-tile:is(:hover, :focus-visible),
.stinvar-v4 .site-header .menu-toggle[aria-expanded="true"] {
  border-color: var(--stinvar-accent) !important;
  box-shadow: var(--stinvar-material-inset), 0 0 13px var(--stinvar-glow-soft) !important;
}
.stinvar-v4 .site-header a:is(:hover, :focus-visible) .nav-tile::after,
.stinvar-v4 .site-header .nav-tile:is(:hover, :focus-visible)::after,
.stinvar-v4 .site-header .menu-toggle[aria-expanded="true"]::after { opacity: 1; }
.stinvar-v4 .site-header > nav.open,
.stinvar-v4 .language-compact > div {
  color: var(--stinvar-ink) !important;
  background: var(--stinvar-panel) !important;
  border-color: var(--stinvar-line) !important;
}
.stinvar-v4 .site-header :is(.languages, .language-compact) a {
  color: var(--stinvar-muted) !important;
}
.stinvar-v4 .site-header :is(.languages, .language-compact) a:is([aria-current="page"], :hover, :focus-visible) {
  color: var(--stinvar-accent) !important;
}
.stinvar-v4 .site-header .nav-tile-image {
  
  filter: url("#stinvar-susi-blue") drop-shadow(0 0 3px var(--stinvar-glow-soft));
}
.stinvar-v4 .website-beerhub-symbol {
  --tenant-accent: var(--stinvar-accent) !important;
  --tenant-blue: var(--stinvar-accent) !important;
  color: var(--stinvar-accent) !important;
  filter: drop-shadow(0 0 3px var(--stinvar-glow-soft));
}
.stinvar-v4 .website-beerhub-symbol circle[fill] { fill: currentColor; }
.stinvar-v4 .website-sections > a {
  background: var(--stinvar-material) !important;
  border-color: var(--stinvar-line) !important;
  box-shadow: var(--stinvar-material-inset) !important;
}
.stinvar-v4 .website-sections > a[aria-current="page"]::after {
  background: var(--stinvar-accent) !important;
  box-shadow: 0 0 6px var(--stinvar-glow) !important;
}
.stinvar-v4 .stinvar-button {
  border-color: var(--stinvar-accent) !important;
  box-shadow: inset 0 -1px var(--stinvar-accent), 0 0 10px var(--stinvar-glow-soft);
}
.stinvar-v4 .stinvar-button:hover {
  box-shadow: inset 0 -1px var(--stinvar-accent), 0 0 18px var(--stinvar-glow);
}
.stinvar-v4 .stinvar-button span,
.stinvar-v4 .susi-capability-icon svg { color: var(--stinvar-accent); }
.stinvar-v4 .connected-cosmos__node {
  background: var(--stinvar-material) !important;
  box-shadow: var(--stinvar-material-inset) !important;
}
.stinvar-v4 .connected-cosmos__core {
  box-shadow: 0 0 24px var(--stinvar-glow-soft) !important;
}
.stinvar-v4 .connected-cosmos__core img {
  box-shadow: 0 0 0 1px var(--stinvar-line), 0 0 24px var(--stinvar-glow-soft) !important;
}
.stinvar-v4 .connected-cosmos__signal { fill: var(--stinvar-accent) !important; }
.stinvar-v4 .connected-cosmos__orbit,
.stinvar-v4 .connected-cosmos__link { stroke: var(--stinvar-accent) !important; }
.stinvar-v4 .susi-story__cta a,
.stinvar-v4 #next-step a {
  color: var(--stinvar-accent) !important;
  border-color: var(--stinvar-line) !important;
  box-shadow: var(--stinvar-material-inset);
}
.stinvar-v4 .susi-story__cta a:is(:hover, :focus-visible),
.stinvar-v4 #next-step a:is(:hover, :focus-visible) {
  border-color: var(--stinvar-accent) !important;
  box-shadow: 0 0 12px var(--stinvar-glow-soft);
}
.stinvar-v4 .public-footer nav a:is(:hover, :focus-visible) { color: var(--stinvar-accent); }