/* A short, optional brand arrival. The page stays usable without this enhancement. */
.brand-intro[hidden] { display: none !important; }
.brand-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 50);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--color-paper, #f4f6f8);
  color: var(--color-ink, #10213a);
  opacity: 1;
  overscroll-behavior: contain;
  touch-action: none;
  transition: opacity 160ms var(--ease-out, cubic-bezier(.2, 0, 0, 1));
}
.brand-intro.is-leaving { opacity: 0; pointer-events: none; }
.brand-intro-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 360px);
  text-align: center;
}
.brand-intro-mark { width: 64px; height: 64px; object-fit: contain; }
.brand-intro-title {
  margin: 24px 0 0;
  font-size: clamp(23px, 5vw, 28px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.15;
}
.brand-intro-description {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted, #566478);
}
.brand-intro-line {
  width: 44px;
  height: 3px;
  margin-top: 28px;
  border-radius: 3px;
  background: var(--color-accent, #1458ed);
  transform-origin: center;
}
.brand-intro.is-visible .brand-intro-line {
  animation: syntax-intro-line 650ms var(--ease-out, cubic-bezier(.2, 0, 0, 1)) both;
}
.brand-intro.is-visible .brand-intro-mark { animation: syntax-intro-arrive 420ms var(--ease-out) both; }
.brand-intro.is-visible .brand-intro-title { animation: syntax-intro-arrive 420ms 60ms var(--ease-out) both; }
.brand-intro.is-visible .brand-intro-description { animation: syntax-intro-arrive 420ms 120ms var(--ease-out) both; }
@keyframes syntax-intro-arrive { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.intro-skip {
  min-width: 108px;
  min-height: 44px;
  margin-top: 32px;
  padding: 10px 16px;
  border: 1px solid var(--color-rule, #d8dee7);
  border-radius: var(--radius-button, 12px);
  color: var(--color-ink, #10213a);
  background: var(--color-paper-2, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.intro-skip:hover { background: var(--color-paper-3, #e9edf3); }
.intro-skip:focus-visible { outline: 3px solid var(--color-focus, #1458ed); outline-offset: 4px; }
html.intro-active { overflow: hidden; }
@keyframes syntax-intro-line {
  from { transform: scaleX(.35); opacity: .45; }
  to { transform: scaleX(1); opacity: 1; }
}
@media (max-width: 420px) {
  .brand-intro { padding: 20px; }
  .brand-intro-title { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-intro, .brand-intro-line { animation: none !important; transition: none !important; }
}