/* Carrier Bridge and Trust: the Company page's type and luminous field, with
   a centered head over a short run of ruled sections (heading left, copy
   right). Products links to both. */
body.brand-page {
  font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* These pages scroll, so the header turns solid once the reader scrolls
   (site.js watches this, as on the legal pages). */
.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}
.nowrap {
  white-space: nowrap;
}
.brand-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.brand-title {
  margin: 0 auto;
  max-width: 18ch;
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 600;
  line-height: 1.015;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 3, 15, 0.55);
}
.brand-lede {
  margin: 26px auto 0;
  max-width: 38em;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.58;
  letter-spacing: -0.006em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.detail-screen {
  padding-top: 140px;
}
.detail-screen .screen-inner {
  display: block;
  max-width: 1080px;
}
.detail-hero {
  text-align: center;
}
.detail-hero .eyebrow {
  justify-content: center;
}
/* The launch film sits between the head and the sections, on the same
   900px column, so its edges line up with the ruled rows below. */
.detail-film {
  position: relative;
  max-width: 900px;
  margin: 52px auto 0;
}
.detail-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #00030f;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.film-play {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary);
  font: 600 15px/1 "Inter", "Inter Fallback", system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    transform 160ms ease-out;
}
.film-play svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.film-play-time {
  color: var(--text-secondary);
  font-weight: 500;
}
.film-play:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.film-play:active {
  transform: translateY(0) scale(0.98);
}
.film-play:focus-visible {
  border-radius: 999px;
}
.detail-film.is-playing .film-play {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .film-play {
    transition: none;
  }
  .film-play:hover,
  .film-play:active {
    transform: none;
  }
}
.detail-sections {
  max-width: 900px;
  margin: 60px auto 0;
}
.detail-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--divider);
}
.detail-section h2 {
  margin: 0;
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.detail-section p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}
.detail-section p + p {
  margin-top: 14px;
}
.detail-section a {
  color: var(--text-primary);
  text-underline-offset: 4px;
}
.detail-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 40px auto 32px;
  text-align: center;
}
.detail-close .text-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
@media (max-width: 860px) {
  .detail-screen {
    padding-top: 116px;
  }
  .brand-title {
    font-size: clamp(34px, 9vw, 56px);
  }
  .detail-film {
    margin-top: 36px;
  }
  .detail-film video {
    border-radius: var(--radius-sm);
  }
  .film-play {
    left: 12px;
    bottom: 12px;
    gap: 9px;
    padding: 8px 14px 8px 11px;
    font-size: 13px;
  }
  .film-play svg {
    width: 15px;
    height: 15px;
  }
  .detail-sections {
    margin-top: 40px;
  }
  .detail-section {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .detail-section h2 {
    font-size: 19px;
  }
}
/* Phones: the poster is about 300px wide, so the button keeps only the icon
   and the running time, clear of the Renaissance mark at the bottom center.
   The label stays for screen readers. */
@media (max-width: 560px) {
  .film-play {
    gap: 7px;
    padding: 7px 12px 7px 10px;
  }
  .film-play-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}