/* Shared layout accommodates translations and right-to-left reading. */
.hero-content h1 {
  max-width: 10ch;
  text-wrap: balance;
}
.screen-tabs {
  min-width: 0;
}
.screen-tabs button {
  white-space: normal;
  line-height: 1.4;
  text-align: start;
}
.screen-questions button {
  line-height: 1.4;
  text-align: start;
}
.live-menu-panel {
  right: auto;
  inset-inline-end: 0;
}
.live-menu-panel a {
  gap: 8px;
  overflow-wrap: anywhere;
}
.screen-primary {
  white-space: normal !important;
  line-height: 1.4;
}
html[dir="rtl"] :is(h1, h2, h3, .eyebrow, .section-sub, .brand-sub),
html:lang(zh) :is(h1, h2, h3, .eyebrow, .section-sub, .brand-sub) {
  letter-spacing: 0;
  line-height: 1.4;
}
html[dir="rtl"] .screen-position {
  text-align: left;
}
html[dir="rtl"] .screen-back span[aria-hidden],
html[dir="rtl"] .screen-browse span[aria-hidden] {
  transform: scaleX(-1);
}
html[dir="rtl"] .depth-progress {
  transform-origin: right;
}
@media (max-width: 760px) {
  .hero-content h1 {
    max-width: 12ch;
  }
  .live-menu-panel {
    inset-inline: 24px;
  }
  .screen-tabs {
    gap: 12px;
  }
  .screen-tabs button {
    font-size: 12px;
  }
  .screen-questions {
    gap: 4px 12px;
  }
  .brand-sub {
    max-width: 150px;
  }
  .screen-header .screen-back {
    max-width: 75%;
    text-align: start;
  }
}
@media (max-width: 360px) {
  .live-menu-panel {
    inset-inline: 16px;
  }
  .brand-sub {
    max-width: 130px;
  }
}

.screen-position,
.screen-page-count {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .depth-counter {
  unicode-bidi: plaintext;
}