/* The X teaser opening occupies the existing full-height public hero. */
.hindle-intro noscript { display: none; }
.hindle-intro .hindle-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hindle-intro { --intro-base: #f0f5f8; overflow: hidden; background: var(--intro-base); }
.hindle-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 42% 48% at 50% 50%, rgb(255 255 255 / .68), rgb(255 255 255 / .36) 35%, rgb(255 255 255 / .09) 70%, transparent); opacity: var(--intro-glow-visibility, 0); }
.hindle-intro::after { background: linear-gradient(to bottom, var(--hindle-bg), transparent 140px, transparent 80%, var(--hindle-bg)); }
.hindle-intro-poster, .hindle-intro-canvas, .hindle-intro-glow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hindle-intro-poster { object-fit: cover; filter: grayscale(1) invert(1); mix-blend-mode: multiply; opacity: .5; visibility: hidden; }
.hindle-intro[data-intro-ready] { background: var(--intro-base); }
.hindle-intro-glow { z-index: -3; }
.hindle-intro[data-intro-ready] .hindle-intro-poster { visibility: hidden; }
.hindle-intro-identity { position: absolute; inset: 0; margin: auto; width: min(27vw, 326px); height: min(42.5svh, 270px); background: var(--hindle-text); mask: var(--intro-logo) center / contain no-repeat; -webkit-mask: var(--intro-logo) center / contain no-repeat; pointer-events: none; visibility: hidden; }
.hindle-intro[data-intro-ready] .hindle-intro-identity,
.hindle-intro[data-intro-fallback] :is(.hindle-intro-poster, .hindle-intro-identity),
:root[data-intro-unavailable] .hindle-intro :is(.hindle-intro-poster, .hindle-intro-identity) { visibility: visible; }
.hindle-intro[data-intro-fallback], :root[data-intro-unavailable] .hindle-intro { --intro-glow-visibility: 1; }
.hindle-intro .hindle-header { position: relative; z-index: 2; }
.hindle-intro-controls { grid-row: 3; display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-bottom: 60px; z-index: 2; }
.hindle-intro-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--hindle-muted); }
.hindle-intro-controls button:hover { color: var(--hindle-text); }
.hindle-intro-controls svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .hindle-intro-poster { filter: none; mix-blend-mode: normal; }
:root[data-theme="dark"] .hindle-intro { --intro-base: #030b12; }
:root[data-theme="dark"] .hindle-intro::before { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hindle-intro-poster { filter: none; mix-blend-mode: normal; }
  :root:not([data-theme="light"]) .hindle-intro { --intro-base: #030b12; }
  :root:not([data-theme="light"]) .hindle-intro::before { display: none; }
}
@media (max-width: 767px) {
  .hindle-intro-controls { margin-bottom: 44px; }
  .hindle-intro-identity { width: 51vw; height: min(39svh, 270px); }
}
@media (max-height: 560px) {
  .hindle-intro-identity { width: min(27vw, 326px); height: 38svh; }
  .hindle-intro-controls { margin-bottom: 20px; }
}