.native-page {
  width: var(--loy-desktop-width, 100%);
  margin-inline: auto;
}

html[lang] .native-page .native-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  height: auto;
  padding: .95rem 1rem .7rem;
}

html[lang] .native-header :is(#how-to, #english, #spanish, #tagalog, #back-english, #replay, #stop, #mute) {
  position: static;
  width: auto;
  height: auto;
  min-height: 2rem;
  padding: .4rem .65rem;
  border-radius: .35rem;
  font-size: .85rem;
  white-space: normal;
}

/* Share the full first row among help and language controls. */
.top-navigation {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
  gap: .55rem;
}

html[lang] .native-header .top-navigation :is(#how-to, #english, #spanish, #tagalog, #back-english) {
  flex: 1 0 7.25rem;
  min-height: 2.75rem;
  padding: .55rem .65rem;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
}

@container (max-width: 640px) {
  html[lang] .native-header .top-navigation :is(#how-to, #english, #spanish, #tagalog, #back-english) {
    flex-basis: 40%;
  }
}

html[lang] .native-header .greeting-help {
  position: static;
  flex-basis: 100%;
  font-size: .85rem;
  text-align: left;
  white-space: normal;
}

.native-hero .brand-mask { z-index: 1; }
/* Crop the thin frame baked into the stills and greeting videos. */
.native-hero :is(.hero-art, .greeting-film) { transform: scaleX(1.008); }
html[lang="en"] .hero-art { transform-origin: 24.7% center; }
html[lang="es"] .hero-art { transform-origin: 75.3% center; }

.native-hero::after {
  /* The reference still and greeting film both contain the old benefits rail. */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: url("assets/loy-hero-edge.webp?v=5") right top / 102% 100% no-repeat;
  mask-image: linear-gradient(to right, #000 85%, transparent),
    linear-gradient(transparent 12%, #000 17%, #000 85%, transparent 95%);
  mask-composite: intersect;
  pointer-events: none;
}
html[lang="tl"] .native-hero::after {
  width: 16%;
  mask-image: linear-gradient(to right, #000 84%, transparent),
    linear-gradient(transparent 8%, #000 13%, #000 81%, transparent 91%);
}

html[lang] .native-hero #talk {
  left: auto;
  right: 4%;
  top: 3%;
  width: auto;
  height: auto;
  min-height: 3.55cqw;
  padding: .55cqw 1.15cqw;
  font-size: 1.55cqw;
  z-index: 1;
}
html[lang="tl"] .native-hero #talk {
  top: .4%;
  min-height: 2.8cqw;
  padding-block: .25cqw;
}

.chat-actions, .account-actions { flex-wrap: wrap; align-items: center; }
html[lang] .native-page :is(#last-conversation, #clear-conversation, #owner) {
  position: static;
  width: auto;
  height: auto;
  min-height: 2rem;
  padding: .4rem .7rem;
  font-size: .85rem;
  cursor: pointer;
}
html[lang] .account-actions #feedback {
  position: static;
  width: auto;
  height: auto;
  min-height: 2rem;
  margin-inline-start: auto;
  padding: .4rem .85rem;
  font-size: .85rem;
  border-radius: 1rem;
  cursor: pointer;
}
.footer-publisher { display: grid; justify-items: start; gap: .5rem; }
.footer-badges { align-items: start; }

@container (max-width: 640px) {
  html[lang] .native-page .chat-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  html[lang] .native-page :is(.chat-main, .greeting, .chat-main textarea, .allowance, .chat-main label, .account-strip p, .memory-strip p, .billing, .plus-card ul, .history, .memory) {
    font-size: .9rem;
    line-height: 1.35;
  }
  html[lang] .native-page .chat-main textarea { min-height: 4rem; }
  html[lang] .native-page .greeting { white-space: normal; }
  html[lang] .native-page :is(.send, .reset, .outline-action, .subscribe-cta) {
    min-height: 2rem;
    height: auto;
    font-size: .85rem;
    white-space: normal;
  }
  html[lang] .native-page .native-footer { grid-template-columns: minmax(0, 1fr); }
  html[lang] .native-page :is(.native-footer p, .publisher, .visits) { font-size: .75rem; }
  html[lang] .native-page .plus-card h2 { font-size: 1.05rem; }
  html[lang] .native-page .price { font-size: 1.4rem; }
  html[lang] .native-page .price small { font-size: .9rem; }
}