/* Landing layout only. Colors, type and shadows stay in the design tokens. */

.lp-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
  background: color-mix(in srgb, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--c-line);
}

.lp-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 100%;
  flex-wrap: nowrap;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  color: var(--c-ink);
  text-decoration: none;
}

.lp-brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
}

.lp-nav__link {
  display: none;
  color: var(--c-ink);
  font-size: var(--text-s);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.lp-nav .c-btn {
  flex: none;
}

.lp-hero-section {
  padding-block: var(--space-32);
}

.lp-hero {
  display: grid;
  gap: var(--space-24);
  align-items: start;
}

.lp-hero__copy {
  --stack-gap: 1.125rem;
  min-width: 0;
}

.lp-hero__copy h1 {
  max-width: 17ch;
}

.lp-hero__actions {
  --cluster-gap: var(--space-10);
}

.lp-hero-media,
.lp-master {
  min-width: 0;
  width: 100%;
}

.lp-player {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-fill);
}

.lp-player picture,
.lp-player video,
.lp-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.lp-player picture {
  z-index: 0;
}

.lp-player video {
  z-index: 1;
}

/* The hero still is the picture underneath. The master still is the video's
   own poster, so that video stays visible before it plays. */
.lp-hero-media video {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.lp-hero-media.is-playing video {
  opacity: 1;
}

.lp-player__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.lp-player__bar .c-databadge {
  min-width: 0;
  flex: 1 1 12rem;
}

.lp-player__bar .c-btn {
  min-width: var(--control-m);
  min-height: var(--control-m);
}

.lp-hero-media .t-caption,
.lp-master .t-caption {
  margin-top: var(--space-8);
}

.lp-master {
  max-width: 27rem;
  margin-top: var(--space-32);
  margin-inline: auto;
}

.lp-chapters {
  margin-top: var(--space-16);
}

.lp-chapters ol,
.lp-steps,
.lp-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-chapters ol {
  display: grid;
  gap: var(--space-8);
}

.lp-chapters a {
  display: block;
  min-width: 0;
  min-height: var(--target-min);
  padding-block: var(--space-8);
  color: var(--c-ink);
  text-decoration: none;
}

.lp-chapters a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-page .l-section {
  padding-block: var(--space-32);
}

.lp-steps {
  display: grid;
  gap: var(--space-24);
}

.lp-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.lp-step__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border-strong) solid var(--c-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: var(--weight-heavy);
  font-size: var(--text-s);
}

.lp-step .t-body-s,
.lp-note .t-body-s {
  color: var(--c-ink-2);
}

.lp-example {
  display: grid;
  gap: var(--space-24);
}

.lp-example__phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  min-width: 0;
  max-width: 100%;
}

.lp-example__phone .c-phone {
  max-width: 100%;
}

.lp-example__keys {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lp-notes {
  display: grid;
  gap: var(--space-20);
}

.lp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-width: 0;
}

.lp-note__letter {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon-l);
  height: var(--icon-l);
  border-radius: var(--radius-pill);
  background: var(--c-mark);
  color: var(--c-on-mark);
  font-family: var(--font-mono);
  font-weight: var(--weight-heavy);
  font-size: var(--text-xs);
}

.lp-note div {
  min-width: 0;
}

.lp-features {
  display: grid;
  gap: var(--space-16);
  /* Two cards have no picture; stretched to the row they were mostly empty (Q-501). */
  align-items: start;
}

.lp-features img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
}

.lp-faq {
  display: flex;
  flex-direction: column;
}

.lp-faq details {
  border-bottom: var(--border-hairline) solid var(--c-line);
}

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: var(--target-min);
  padding-block: var(--space-8);
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq summary::marker {
  content: "";
}

.lp-faq summary .t-title {
  min-width: 0;
}

.lp-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-weight: var(--weight-heavy);
}

.lp-faq details[open] summary::after {
  content: "\2212";
}

.lp-faq .t-body {
  max-width: 66ch;
  padding-bottom: var(--space-16);
}

.lp-footer {
  border-top: var(--border-hairline) solid var(--c-line);
  padding-block: var(--space-32) var(--space-48);
}

.lp-footer__stack {
  --stack-gap: var(--space-8);
}

.lp-footer__links {
  --cluster-gap: var(--space-16);
}

@media (max-width: 399px) {
  .lp-brand__name {
    font-stretch: 100%;
    letter-spacing: 0.04em;
  }
}

@media (min-width: 600px) {
  .lp-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .lp-master {
    max-width: 60rem;
  }

  .lp-player--wide {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 820px) {
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .lp-example {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .lp-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target-min);
  }

  .lp-hero-section,
  .lp-page .l-section {
    padding-block: var(--space-48);
  }

  .lp-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .lp-hero {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: var(--space-40);
  }

  .lp-hero-media {
    justify-self: end;
    width: min(100%, 27rem);
  }
}