/* Landing / magnet phone nav: Premium | Story Quest | hamburger (≤640px).
   Desktop keeps the page's full inline nav. Matches course chrome behavior. */
.lpn-phone-premium,
.lpn-phone-featured,
.lpn-menu-btn,
.lpn-menu { display: none; }
.lpn-menu-btn {
  width: 42px; height: 42px; padding: 0; margin: 0;
  border: 0; border-radius: 10px;
  background: transparent; color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.lpn-menu-btn:hover,
.lpn-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.lpn-menu-icon,
.lpn-menu-icon::before,
.lpn-menu-icon::after {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  content: "";
}
.lpn-menu-icon { position: relative; }
.lpn-menu-icon::before { position: absolute; top: -6px; left: 0; }
.lpn-menu-icon::after { position: absolute; top: 6px; left: 0; }
.lpn-menu {
  width: 100%; flex: 1 0 100%;
  background: #015a9c;
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(1, 60, 110, .35);
}
.lpn-menu[hidden] { display: none !important; }
.lpn-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.1rem .35rem;
  color: #eaf4fc; font-weight: 700; font-size: .9rem;
}
.lpn-menu-close {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lpn-menu-close:hover { background: rgba(255,255,255,.14); }
.lpn-menu-nav {
  display: flex; flex-direction: column; padding: .25rem .7rem .85rem;
  gap: .15rem;
}
.lpn-menu-nav a {
  color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: .85rem .75rem; border-radius: 10px; text-decoration: none;
}
.lpn-menu-nav a:hover { background: rgba(255,255,255,.14); }
.lpn-phone-premium {
  color: var(--ink, #1c232d); font-weight: 700; font-size: .95rem;
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
  background: var(--yellow, #ffaf00); text-decoration: none; flex: 0 0 auto;
}
.lpn-phone-premium:hover { background: var(--yellow-deep, #e59c00); text-decoration: none; color: var(--ink, #1c232d); }
.lpn-phone-featured {
  color: #fff; font-weight: 700; font-size: .95rem;
  padding: .4rem .55rem; border-radius: 8px; white-space: nowrap;
  text-decoration: none; flex: 0 0 auto;
}
.lpn-phone-featured:hover { background: rgba(255,255,255,.14); text-decoration: none; color: #fff; }

/* Light-background localized landings: dark icons/text for the phone chrome */
.lpn-on-light .lpn-menu-btn { color: var(--ink, #1c232d); }
.lpn-on-light .lpn-phone-featured { color: var(--blue, #0174c7); }
.lpn-on-light .lpn-phone-featured:hover { background: rgba(1,116,199,.1); color: var(--blue, #0174c7); }
.lpn-on-light .lpn-menu { background: #fff; border-top: 1px solid var(--line, #dfe6ee); box-shadow: 0 10px 24px rgba(3,67,111,.12); }
.lpn-on-light .lpn-menu-head { color: var(--ink, #1c232d); }
.lpn-on-light .lpn-menu-close { color: var(--ink, #1c232d); }
.lpn-on-light .lpn-menu-nav a { color: var(--ink, #1c232d); }
.lpn-on-light .lpn-menu-nav a:hover { background: rgba(1,116,199,.08); }

@media (max-width: 640px) {
  .lpn-root {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    row-gap: 0;
  }
  .lpn-root > .nav-logo,
  .lpn-root > .lo-logo,
  .lpn-root > a > img,
  .lpn-hide-phone { display: none !important; }
  .lpn-desktop { display: none !important; }
  .lpn-phone-premium,
  .lpn-phone-featured { display: inline-flex; align-items: center; }
  .lpn-menu-btn { display: inline-flex; }
  .lpn-menu:not([hidden]) { display: block; }
}