html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--surface-canvas);
  color: var(--text-primary);
}

.skip-link {
  position: fixed;
  top: var(--space-12);
  left: var(--space-12);
  z-index: var(--z-skip-link);
}

/* The Brain50 portal keeps the Streetbeat homepage's floating navigation
   silhouette, but the contents stay specific to the download flow. */
.site-header {
  position: fixed;
  top: var(--space-12);
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  padding-inline: var(--space-16);
}

.nav-shell {
  width: min(100%, 1280px);
  min-height: 62px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-24);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-24);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-canvas) 92%, transparent);
  box-shadow: 0 var(--space-12) var(--space-40) color-mix(in srgb, var(--text-primary) 6%, transparent);
  -webkit-backdrop-filter: blur(var(--space-16));
  backdrop-filter: blur(var(--space-16));
}

.brand-lockup,
.nav-actions,
.account-line,
.footer-links {
  display: flex;
  align-items: center;
}

.brand-lockup {
  min-width: 0;
  gap: var(--space-12);
}

.streetbeat-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.streetbeat-logo img {
  display: block;
  width: 124px;
  height: auto;
}

.brand-divider {
  width: 1px;
  height: var(--space-24);
  flex: 0 0 auto;
  background: var(--border-subtle);
}

.product-name {
  font-family: var(--ts-body-m-family);
  font-size: var(--ts-body-m-size);
  font-weight: 600;
  line-height: var(--ts-body-m-line);
}

.nav-promise {
  color: var(--text-secondary);
  font-family: var(--ts-body-m-family);
  font-size: var(--ts-body-m-size);
  line-height: var(--ts-body-m-line);
  white-space: nowrap;
}

.nav-actions {
  justify-content: flex-end;
  gap: var(--space-8);
}

.nav-action {
  min-height: 42px;
  padding: var(--space-8) var(--space-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-family: var(--ts-body-base-family);
  font-size: var(--ts-body-base-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.nav-action:hover {
  transform: translateY(-1px);
}

.nav-action:active {
  transform: scale(0.98);
}

.nav-action--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark-primary);
}

.nav-action--green {
  background: var(--accent-green);
  color: var(--text-primary);
}

.account-line {
  gap: var(--space-8);
  min-width: 0;
  color: var(--text-secondary);
  font-family: var(--ts-body-xs-family);
  font-size: var(--ts-body-xs-size);
  line-height: var(--ts-body-xs-line);
  white-space: nowrap;
}

.account-line a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

[hidden] {
  display: none !important;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  touch-action: none;
}

.hero-canvas,
.hero-detail-canvas,
.hero-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-canvas,
.hero-graphic {
  z-index: 1;
  filter: blur(var(--hero-logo-monument-blur));
}

.hero-canvas {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.hero-canvas.is-ready {
  opacity: var(--hero-logo-monument-opacity);
}

.hero-detail-canvas {
  z-index: 2;
  opacity: var(--hero-logo-monument-opacity);
}

.hero-graphic {
  display: none;
  object-fit: cover;
  opacity: var(--hero-logo-monument-opacity);
}

.hero-graphic.is-fallback {
  display: block;
}

.hero-copy {
  position: absolute;
  top: 37%;
  right: var(--pad);
  z-index: 3;
  width: min(52vw, 980px);
}

.hero-title {
  font-family: var(--ts-display-xl-family);
  font-size: clamp(112px, 11.8vw, 226px);
  font-weight: var(--ts-display-xl-weight);
  line-height: 0.78;
  letter-spacing: var(--ts-display-xl-spacing);
}

.hero-subtitle {
  max-width: 18ch;
  margin-top: clamp(var(--space-20), 3vw, var(--space-40));
  font-family: var(--ts-title-hero-subtitle-family);
  font-size: var(--ts-title-hero-subtitle-size);
  font-weight: var(--ts-title-hero-subtitle-weight);
  line-height: var(--ts-title-hero-subtitle-line);
  letter-spacing: var(--ts-title-hero-subtitle-spacing);
}

.hero-bottom {
  position: absolute;
  right: var(--pad);
  bottom: var(--space-24);
  left: var(--pad);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-40);
}

.local-note,
.hero-footer {
  color: var(--text-tertiary);
  font-family: var(--ts-body-xs-family);
  font-size: var(--ts-body-xs-size);
  line-height: var(--ts-body-xs-line);
}

.local-note {
  max-width: 72ch;
}

.local-note a,
.footer-links a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.hero-footer {
  text-align: right;
}

.footer-links {
  justify-content: flex-end;
  gap: var(--space-16);
  margin-top: var(--space-8);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .nav-promise {
    display: none;
  }

  .hero-copy {
    width: min(62vw, 760px);
  }

  .hero-title {
    font-size: clamp(104px, 13.5vw, 172px);
  }

  .local-note {
    max-width: 56ch;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-inline: var(--space-12);
  }

  .nav-shell {
    min-height: 56px;
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
    gap: var(--space-12);
  }

  .streetbeat-logo img {
    width: 96px;
  }

  .brand-divider {
    height: var(--space-20);
  }

  .product-name {
    font-size: var(--ts-body-base-size);
  }

  .nav-action--dark,
  .account-line {
    display: none;
  }

  .nav-action {
    min-height: 38px;
    padding: var(--space-8) var(--space-16);
    font-size: var(--ts-body-xs-size);
  }

  .hero-copy {
    top: auto;
    right: var(--pad);
    bottom: 31%;
    left: var(--pad);
    width: auto;
  }

  .hero-title {
    font-size: clamp(76px, 22vw, 132px);
    line-height: 0.82;
  }

  .hero-subtitle {
    margin-top: var(--space-20);
    font-size: clamp(28px, 8vw, 42px);
  }

  .hero-bottom {
    right: var(--pad);
    bottom: var(--space-16);
    left: var(--pad);
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .local-note {
    max-width: 62ch;
    font-size: 11px;
    line-height: 1.35;
  }

  .hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .footer-links {
    margin-top: 0;
  }

  .footer-links a,
  .footer-links span:last-child {
    display: none;
  }
}

@media (max-width: 460px) {
  .streetbeat-logo img {
    width: 82px;
  }

  .brand-lockup {
    gap: var(--space-8);
  }

  .nav-action {
    padding-inline: var(--space-12);
  }

  .hero-copy {
    bottom: 34%;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .hero-copy {
    top: 31%;
  }

  .hero-title {
    font-size: clamp(92px, 12vw, 154px);
  }

  .hero-bottom {
    bottom: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas,
  .nav-action {
    transition: none;
  }
}