/*
 * Manabi Video Navi — photo-fidelity public surfaces V242
 * References: 02 (auth), 03/12 (learning search), 11 (public home),
 * 19 (mobile navigation), 20 (future-learning atmosphere).
 *
 * Presentation only. Existing forms, ids, names, links, data attributes and
 * application-owned behavior remain untouched. Remove this one stylesheet to
 * restore the V241 public presentation.
 */

body.mnv-future-ui.shell-public {
  --mnv-v242-public-night: #020a22;
  --mnv-v242-public-navy: #06183f;
  --mnv-v242-public-panel: #0a2454;
  --mnv-v242-public-blue: #1677ff;
  --mnv-v242-public-cyan: #35e4ff;
  --mnv-v242-public-violet: #835dff;
  --mnv-v242-public-gold: #ffc857;
  --mnv-v242-public-orange: #ff7a3d;
  --mnv-v242-public-white: #f7fbff;
  --mnv-v242-public-muted: #b9cae7;
  --mnv-v242-public-line: rgba(118, 185, 255, .34);
  --mnv-v242-public-glass: rgba(5, 22, 57, .84);
  --mnv-v242-public-radius: 28px;
  --mnv-v242-public-shadow: 0 28px 90px rgba(0, 6, 34, .48);
}

/* --------------------------------------------------------------------------
   Public header — the compact luminous command strip from reference 11
   -------------------------------------------------------------------------- */

body.mnv-future-ui.public-app.shell-public.page-index .site-header,
body.mnv-future-ui.public-app.shell-auth .site-header {
  position: relative !important;
  z-index: 30 !important;
  border-bottom: 1px solid rgba(94, 213, 255, .26) !important;
  background:
    radial-gradient(circle at 14% -120%, rgba(53, 228, 255, .28), transparent 21rem),
    linear-gradient(100deg, rgba(3, 13, 48, .98), rgba(7, 38, 103, .98) 58%, rgba(13, 32, 91, .98)) !important;
  box-shadow: 0 14px 38px rgba(0, 8, 44, .28) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header-inner,
body.mnv-future-ui.public-app.shell-auth .site-header-inner {
  width: min(1500px, calc(100% - 38px)) !important;
  min-height: 78px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .brand,
body.mnv-future-ui.public-app.shell-auth .site-header .brand {
  gap: 11px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .brand-mark,
body.mnv-future-ui.public-app.shell-auth .site-header .brand-mark {
  box-shadow: 0 0 0 1px rgba(108, 213, 255, .34), 0 0 24px rgba(35, 174, 255, .26) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header :is(.brand-text strong, .brand-text small, .site-nav a, .nav-link),
body.mnv-future-ui.public-app.shell-auth .site-header :is(.brand-text strong, .brand-text small, .site-nav a, .nav-link) {
  color: #f5f9ff !important;
  text-shadow: 0 1px 14px rgba(49, 170, 255, .12) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .brand-text small,
body.mnv-future-ui.public-app.shell-auth .site-header .brand-text small {
  color: #b8d4f3 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .site-nav a,
body.mnv-future-ui.public-app.shell-auth .site-header .site-nav a {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .site-nav a:hover,
body.mnv-future-ui.public-app.shell-public.page-index .site-header .site-nav a:focus-visible,
body.mnv-future-ui.public-app.shell-auth .site-header .site-nav a:hover,
body.mnv-future-ui.public-app.shell-auth .site-header .site-nav a:focus-visible {
  background: rgba(51, 193, 255, .13) !important;
  color: #fff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .nav-cta,
body.mnv-future-ui.public-app.shell-auth .site-header .nav-cta {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: linear-gradient(135deg, #d9fbff, #81ebff) !important;
  color: #052555 !important;
  box-shadow: 0 8px 24px rgba(35, 197, 255, .24) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .site-header .qr-nav-button,
body.mnv-future-ui.public-app.shell-auth .site-header .qr-nav-button {
  border-color: rgba(122, 204, 255, .38) !important;
  background: rgba(7, 34, 84, .86) !important;
  color: #eaf8ff !important;
}

/* --------------------------------------------------------------------------
   Public home — reference 11 composition, followed by references 03 / 12
   -------------------------------------------------------------------------- */

body.mnv-future-ui.public-app.shell-public.page-index,
body.mnv-future-ui.public-app.shell-public.page-index .container {
  background: #06183f !important;
}

body.mnv-future-ui.public-app.shell-public.page-index main.container {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: clip !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 85% 8%, rgba(54, 220, 255, .20), transparent 30rem),
    linear-gradient(180deg, #063781, #051638 72%, #030d27) !important;
  color: var(--mnv-v242-public-white) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(63, 223, 255, .20), transparent 20rem),
    linear-gradient(120deg, transparent 42%, rgba(77, 90, 255, .08), transparent 71%) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero::after {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-image: radial-gradient(circle, rgba(167, 226, 255, .42) 0 1px, transparent 1.6px) !important;
  background-size: 78px 78px !important;
  opacity: .22 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-cosmic-sky,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-aurora,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-route-line-one {
  z-index: 1 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "copy" "stage" !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
  position: relative !important;
  display: flex !important;
  grid-area: copy !important;
  min-height: clamp(670px, 63vw, 900px) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(62px, 7vw, 110px) max(6vw, calc((100vw - 1500px) / 2 + 40px)) clamp(76px, 8vw, 126px) !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg, rgba(239, 251, 255, .98) 0%, rgba(220, 246, 255, .94) 31%, rgba(209, 242, 255, .62) 49%, rgba(181, 231, 255, .08) 69%, rgba(50, 147, 224, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(61, 155, 223, .13)),
    url('../mnv-learning-world-v242.webp') !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #062f65 !important;
  text-align: left !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy::after {
  position: absolute !important;
  right: 5.5% !important;
  bottom: 5.5% !important;
  width: clamp(180px, 22vw, 360px) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(75, 226, 255, .20) !important;
  border-radius: 50% !important;
  background: repeating-radial-gradient(circle, transparent 0 32px, rgba(69, 215, 255, .13) 33px 34px) !important;
  content: "" !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-kicker {
  order: 0 !important;
  max-width: min(720px, 100%) !important;
  margin: 0 0 22px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(117, 222, 255, .36) !important;
  border-radius: 999px !important;
  background: rgba(247, 253, 255, .84) !important;
  color: #144d82 !important;
  box-shadow: 0 10px 35px rgba(28, 109, 165, .13) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-kicker b {
  color: #0e5ca4 !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero h1 {
  order: 1 !important;
  width: min(820px, 64vw) !important;
  max-width: 820px !important;
  margin: 0 !important;
  color: #062f65 !important;
  font-family: inherit !important;
  font-size: clamp(52px, 5.7vw, 94px) !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  letter-spacing: -.058em !important;
  text-wrap: balance !important;
  text-shadow: 0 3px 24px rgba(255, 255, 255, .84) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-problem {
  color: #062f65 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge {
  display: grid !important;
  grid-template-columns: 48px auto 48px !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(410px, 100%) !important;
  margin: .30em 0 .20em !important;
  color: #174f81 !important;
  font-size: clamp(12px, 1vw, 16px) !important;
  font-weight: 850 !important;
  letter-spacing: .03em !important;
  opacity: 1 !important;
  transform: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge::before,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge::after {
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #38d6ff) !important;
  content: "" !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge::after {
  background: linear-gradient(90deg, #38d6ff, #ffb04e) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge > span {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(137, 221, 255, .44) !important;
  border-radius: 999px !important;
  background: rgba(246, 252, 255, .87) !important;
  color: #174f81 !important;
  -webkit-text-fill-color: #174f81 !important;
  box-shadow: 0 8px 25px rgba(30, 104, 157, .13) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-solution-band,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-solution,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-solution em {
  color: #082f63 !important;
  -webkit-text-fill-color: #082f63 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-solution strong {
  background: linear-gradient(100deg, #074f99 0%, #087ec0 38%, #5844cf 68%, #d16930 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy > p {
  order: 2 !important;
  width: min(690px, 61vw) !important;
  max-width: 690px !important;
  margin: 25px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #174b77 !important;
  font-size: clamp(16px, 1.38vw, 21px) !important;
  font-weight: 680 !important;
  line-height: 1.85 !important;
  box-shadow: none !important;
  text-shadow: 0 2px 17px rgba(255, 255, 255, .75) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions {
  display: flex !important;
  order: 3 !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: flex-start !important;
  margin: 32px 0 0 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions .button {
  min-height: 58px !important;
  padding-inline: 26px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions .button.primary {
  border: 1px solid rgba(255, 244, 190, .90) !important;
  background: linear-gradient(110deg, #ffd459, #ff9b44 55%, #ff7044) !important;
  color: #10234d !important;
  box-shadow: 0 14px 38px rgba(255, 136, 56, .34), 0 0 0 5px rgba(255, 205, 96, .10) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-secondary-button {
  border: 1px solid rgba(142, 226, 255, .55) !important;
  background: rgba(242, 251, 255, .82) !important;
  color: #0b5594 !important;
  box-shadow: 0 12px 34px rgba(34, 117, 170, .16) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope {
  display: grid !important;
  order: 4 !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(820px, 67vw) !important;
  margin: 34px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(115, 207, 255, .31) !important;
  border-radius: 20px !important;
  background: rgba(244, 252, 255, .82) !important;
  color: #123e69 !important;
  box-shadow: 0 15px 38px rgba(23, 95, 148, .14) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope strong {
  color: #124a7e !important;
  white-space: nowrap !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope ul {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope li {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(137, 217, 255, .30) !important;
  border-radius: 999px !important;
  background: rgba(228, 247, 255, .88) !important;
  color: #16558c !important;
  font-size: 11px !important;
  text-align: center !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-trust-row {
  display: flex !important;
  order: 5 !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  width: min(820px, 67vw) !important;
  margin: 14px 0 0 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-trust-row span {
  min-height: 34px !important;
  border: 1px solid rgba(131, 213, 255, .24) !important;
  background: rgba(239, 250, 255, .84) !important;
  color: #245b87 !important;
  box-shadow: none !important;
}

/* Search cockpit: a full-width learning command surface like references 03/12. */
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-stage {
  position: relative !important;
  display: grid !important;
  grid-area: stage !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 34px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(76px, 7vw, 112px) max(4vw, calc((100vw - 1380px) / 2 + 28px)) clamp(84px, 8vw, 126px) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(59, 98, 255, .22), transparent 28rem),
    radial-gradient(circle at 8% 82%, rgba(133, 62, 255, .18), transparent 30rem),
    linear-gradient(145deg, #02091e, #061637 50%, #071e4d) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-stage::before {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(112deg, transparent 34%, rgba(58, 215, 255, .06) 50%, transparent 66%),
    radial-gradient(circle, rgba(103, 187, 255, .27) 0 1px, transparent 1.6px) !important;
  background-size: auto, 84px 84px !important;
  content: "" !important;
  opacity: .42 !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-stage-orb {
  opacity: .42 !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device {
  position: relative !important;
  z-index: 2 !important;
  width: min(1160px, 100%) !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 1px !important;
  overflow: visible !important;
  border: 1px solid rgba(95, 220, 255, .62) !important;
  border-radius: 34px !important;
  background: linear-gradient(135deg, rgba(61, 216, 255, .88), rgba(75, 95, 255, .48) 48%, rgba(206, 74, 255, .78)) !important;
  box-shadow: 0 38px 110px rgba(0, 2, 22, .58), 0 0 50px rgba(53, 192, 255, .12), 0 0 0 7px rgba(44, 113, 255, .06) !important;
  transform: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-camera {
  display: block !important;
  background: #02091c !important;
  box-shadow: 0 0 0 1px rgba(119, 198, 255, .18) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-screen {
  min-height: 680px !important;
  margin: 9px !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 82% 6%, rgba(54, 139, 255, .20), transparent 25rem),
    radial-gradient(circle at 12% 92%, rgba(133, 85, 255, .15), transparent 26rem),
    linear-gradient(150deg, rgba(5, 20, 54, .98), rgba(5, 26, 71, .98)) !important;
  color: #f5f9ff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar {
  display: flex !important;
  min-height: 68px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid rgba(117, 193, 255, .20) !important;
  background: rgba(3, 14, 43, .88) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar :is(a, strong, span) {
  color: #eaf4ff !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar nav .is-active {
  border: 1px solid rgba(72, 214, 255, .25) !important;
  background: rgba(35, 123, 255, .20) !important;
  color: #8eeeff !important;
  box-shadow: inset 3px 0 #3fe3ff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-content {
  padding: clamp(25px, 3vw, 42px) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome {
  align-items: center !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome::after {
  width: 118px !important;
  height: 112px !important;
  flex: 0 0 118px !important;
  align-self: center !important;
  background: url('../mnv-ai-companion-v242.webp') center / contain no-repeat !important;
  content: "" !important;
  filter: drop-shadow(0 14px 20px rgba(29, 155, 255, .26)) !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome > div {
  flex: 1 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome :is(span, h2),
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-form :is(label, legend, summary),
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-plan-options label {
  color: #f1f7ff !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome h2 {
  margin-top: 4px !important;
  background: linear-gradient(100deg, #fff, #94eaff 45%, #d7aaff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  font-weight: 950 !important;
  line-height: 1.14 !important;
  letter-spacing: -.045em !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome > div > span,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-form > label,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-field legend {
  color: #c1d3ed !important;
  font-size: 13px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .status-badge.status-info {
  border: 1px solid rgba(71, 232, 193, .30) !important;
  background: rgba(16, 106, 89, .20) !important;
  color: #90f1d2 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .first-visit-guide {
  margin-bottom: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(66, 224, 255, .34) !important;
  border-radius: 17px !important;
  background: rgba(8, 48, 99, .72) !important;
  color: #eef9ff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .first-visit-guide :is(span, strong, small, button) {
  color: #eef9ff !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .first-guide-copy > span {
  color: #66e5ff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .first-visit-guide > button {
  border-color: rgba(136, 220, 255, .32) !important;
  background: rgba(12, 54, 111, .90) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-form {
  gap: 18px !important;
  padding: clamp(20px, 2.5vw, 32px) !important;
  border: 1px solid rgba(122, 124, 255, .56) !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(51, 182, 255, .14), transparent 22rem),
    linear-gradient(145deg, rgba(6, 28, 73, .94), rgba(12, 29, 76, .90)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 22px 70px rgba(0, 4, 29, .32) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-input-shell textarea {
  min-height: 150px !important;
  padding: 19px 20px 34px !important;
  border: 1px solid rgba(181, 104, 255, .84) !important;
  border-radius: 18px !important;
  background: rgba(8, 33, 82, .86) !important;
  color: #f7fbff !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  caret-color: #5fe7ff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 0 4px rgba(75, 115, 255, .05), 0 0 27px rgba(113, 79, 255, .13) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-input-shell textarea::placeholder {
  color: #aebdda !important;
  opacity: 1 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .char-counter {
  color: #91a8cb !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button {
  min-height: 76px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(113, 166, 255, .38) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(16, 48, 105, .92), rgba(25, 37, 91, .92)) !important;
  color: #eef6ff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 10px 25px rgba(0, 4, 30, .22) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button :is(span, b, small) {
  color: #eef6ff !important;
  text-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button > span {
  border: 1px solid rgba(80, 213, 255, .44) !important;
  background: rgba(19, 109, 184, .30) !important;
  color: #77eaff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button > b {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button > small {
  color: #aebfdb !important;
  font-size: 10px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button:hover,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button:focus-visible,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button.is-selected,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button.is-guide-preview,
body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button.is-guide-active {
  border-color: #5be6ff !important;
  background: linear-gradient(145deg, rgba(20, 98, 187, .96), rgba(58, 54, 169, .96)) !important;
  box-shadow: 0 0 0 3px rgba(58, 220, 255, .12), 0 0 28px rgba(45, 175, 255, .18) !important;
  filter: none !important;
  transform: translateY(-2px) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-bottom {
  grid-template-columns: minmax(300px, .72fr) minmax(370px, 1.28fr) !important;
  gap: 16px !important;
  align-items: end !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-pills {
  gap: 8px !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-pills span {
  min-height: 52px !important;
  border: 1px solid rgba(119, 165, 240, .35) !important;
  border-radius: 14px !important;
  background: rgba(10, 38, 88, .84) !important;
  color: #dce9fb !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-pills input:checked + span {
  border-color: #5fe8ff !important;
  background: linear-gradient(145deg, rgba(19, 108, 199, .95), rgba(40, 75, 177, .95)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(57, 217, 255, .12), 0 0 22px rgba(39, 183, 255, .18) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-submit {
  position: relative !important;
  min-height: 72px !important;
  padding-inline: 25px !important;
  overflow: hidden !important;
  border: 1px solid rgba(147, 232, 255, .78) !important;
  border-radius: 18px !important;
  background: linear-gradient(105deg, #196bf0, #6448f7 58%, #b03be4) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: 0 17px 42px rgba(56, 75, 238, .36), 0 0 30px rgba(78, 199, 255, .13) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-submit::after {
  position: absolute !important;
  inset: 0 auto 0 -38% !important;
  width: 28% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent) !important;
  content: "" !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-plan-options {
  display: block !important;
  border: 1px solid rgba(111, 166, 246, .23) !important;
  border-radius: 15px !important;
  background: rgba(4, 24, 61, .76) !important;
  color: #dce9fb !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-plan-options :is(input, select) {
  border-color: rgba(118, 175, 249, .32) !important;
  background: #0a2b61 !important;
  color: #fff !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-live-showcase {
  position: relative !important;
  z-index: 2 !important;
  width: min(1160px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(74, 210, 255, .26) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(58, 224, 255, .14), transparent 20rem),
    radial-gradient(circle at 8% 92%, rgba(137, 77, 255, .17), transparent 22rem),
    linear-gradient(145deg, rgba(5, 25, 62, .96), rgba(7, 37, 82, .94)) !important;
  box-shadow: 0 30px 85px rgba(0, 3, 24, .40) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-preview-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-preview-cards article {
  min-height: 155px !important;
  padding: 18px !important;
  border: 1px solid rgba(100, 179, 255, .27) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(13, 49, 103, .91), rgba(10, 34, 80, .91)) !important;
  box-shadow: 0 16px 35px rgba(0, 4, 26, .24) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-demo-player {
  grid-template-columns: 164px minmax(0, 1fr) !important;
  min-height: 330px !important;
  padding: 10px !important;
  border: 1px solid rgba(115, 99, 255, .52) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(5, 24, 66, .98), rgba(37, 16, 79, .95)) !important;
  box-shadow: 0 22px 52px rgba(0, 2, 21, .43) !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-demo-player video {
  min-height: 308px !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}

/* The remainder of the public story uses the bright, premium lower half of ref 11. */
body.mnv-future-ui.public-app.shell-public.page-index :is(.koto-learning-range-section, .koto-pain-section, .koto-flow-section, .koto-proof-section, .koto-how-section, .koto-final-cta) {
  width: min(1380px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-learning-range-section {
  margin-top: 78px !important;
}

/* --------------------------------------------------------------------------
   Authentication — reference 02 two-panel welcome / form composition
   -------------------------------------------------------------------------- */

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register, .page-forgot_password, .page-reset_password) {
  min-height: 100dvh !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(46, 122, 255, .20), transparent 31rem),
    radial-gradient(circle at 91% 78%, rgba(115, 68, 255, .18), transparent 34rem),
    linear-gradient(145deg, #010717, #03112d 48%, #061c43) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register, .page-forgot_password, .page-reset_password) main.container {
  width: min(1500px, calc(100% - 42px)) !important;
  max-width: 1500px !important;
  min-height: calc(100dvh - 158px) !important;
  padding-block: clamp(32px, 4vw, 62px) !important;
  background: transparent !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-wrap {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 56.7fr) minmax(460px, 43.3fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1380px !important;
  min-height: 840px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(83, 182, 255, .32) !important;
  border-radius: 34px !important;
  background: rgba(3, 14, 38, .92) !important;
  box-shadow: 0 42px 120px rgba(0, 2, 19, .62), 0 0 0 1px rgba(255, 255, 255, .03) !important;
}

body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single {
  grid-template-columns: minmax(0, 56.7fr) minmax(460px, 43.3fr) !important;
  max-width: 1380px !important;
}

body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single::before {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 840px !important;
  border-right: 1px solid rgba(81, 198, 255, .20) !important;
  background-image:
    linear-gradient(180deg, rgba(2, 8, 28, .08), rgba(1, 7, 25, .78)),
    linear-gradient(90deg, rgba(2, 10, 33, .16), rgba(4, 27, 78, .05)),
    url('../mnv-command-skyline-v242.webp') !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  content: "" !important;
  pointer-events: none !important;
}

body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single .auth-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(44px, 4.3vw, 70px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 90% 4%, rgba(66, 134, 255, .13), transparent 18rem),
    linear-gradient(150deg, rgba(5, 23, 58, .98), rgba(4, 18, 45, .98)) !important;
  color: #f5f9ff !important;
  box-shadow: none !important;
}

body.mnv-future-ui.public-app.shell-auth.page-register .auth-side {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-content: end !important;
  padding: clamp(44px, 4vw, 68px) !important;
  border: 0 !important;
  border-right: 1px solid rgba(81, 198, 255, .20) !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 10, 34, .20), rgba(2, 11, 37, .92)),
    url('../mnv-command-skyline-v242.webp') !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #fff !important;
}

body.mnv-future-ui.public-app.shell-auth.page-register .auth-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.mnv-future-ui.public-app.shell-auth.page-register .auth-side h2 {
  color: #fff !important;
  font-size: clamp(28px, 2.8vw, 42px) !important;
  text-shadow: 0 5px 24px rgba(0, 4, 29, .65) !important;
}

body.mnv-future-ui.public-app.shell-auth.page-register .auth-side .check-list,
body.mnv-future-ui.public-app.shell-auth.page-register .auth-side .side-card {
  border: 1px solid rgba(117, 210, 255, .28) !important;
  border-radius: 20px !important;
  background: rgba(5, 30, 76, .78) !important;
  box-shadow: 0 18px 44px rgba(0, 4, 28, .32) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

body.mnv-future-ui.public-app.shell-auth.page-register .auth-side .check-list {
  margin-top: 20px !important;
  padding: 21px 24px 21px 46px !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) :is(.auth-card, .auth-side) :is(h1, h2, h3, label, strong, p, li, small, span, a) {
  color: #f4f8ff !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card h1 {
  margin: 10px 0 24px !important;
  color: #fff !important;
  font-size: clamp(34px, 3.2vw, 50px) !important;
  font-weight: 930 !important;
  line-height: 1.18 !important;
  letter-spacing: -.045em !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .eyebrow {
  color: #67e6ff !important;
  font-size: 13px !important;
  letter-spacing: .16em !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .muted {
  color: #b9cae1 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .search-form {
  gap: 10px !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .search-form label {
  margin-top: 5px !important;
  color: #eaf3ff !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .search-form :is(input, select) {
  min-height: 56px !important;
  margin-bottom: 5px !important;
  border: 1px solid rgba(111, 165, 244, .34) !important;
  border-radius: 13px !important;
  background: rgba(7, 30, 72, .88) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .search-form :is(input, select)::placeholder {
  color: #8ea5c6 !important;
  opacity: 1 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .search-form button.primary {
  min-height: 58px !important;
  margin-top: 8px !important;
  border: 1px solid rgba(130, 226, 255, .70) !important;
  border-radius: 14px !important;
  background: linear-gradient(105deg, #176bf0, #6548f3 58%, #a539dc) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 15px 38px rgba(53, 77, 233, .34) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .google-login-button {
  min-height: 56px !important;
  border: 1px solid #e3e9f3 !important;
  border-radius: 13px !important;
  background: #f9fbff !important;
  color: #132641 !important;
  box-shadow: 0 10px 28px rgba(0, 4, 25, .22) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .google-login-button span {
  color: #132641 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-divider::before {
  border-color: rgba(131, 174, 227, .20) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-divider span {
  background: #061b42 !important;
  color: #9eb2d0 !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card a:not(.google-login-button) {
  color: #7ce9ff !important;
  text-decoration-color: rgba(124, 233, 255, .38) !important;
}

/* Password recovery remains a focused single-card task. */
body.mnv-future-ui.public-app.shell-auth:is(.page-forgot_password, .page-reset_password) .auth-wrap.single {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(91, 189, 255, .34) !important;
  border-radius: 28px !important;
  background: rgba(4, 18, 47, .94) !important;
  box-shadow: var(--mnv-v242-public-shadow) !important;
}

body.mnv-future-ui.public-app.shell-auth:is(.page-forgot_password, .page-reset_password) .auth-card {
  padding: clamp(34px, 5vw, 58px) !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Responsive public fidelity — references 12 and 19
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  body.mnv-future-ui.public-app.shell-public.page-index .site-header-inner,
  body.mnv-future-ui.public-app.shell-auth .site-header-inner {
    width: min(100% - 28px, 1120px) !important;
    min-height: 68px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
    min-height: 720px !important;
    padding-inline: 6vw !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero h1 {
    width: min(760px, 72vw) !important;
    font-size: clamp(52px, 7vw, 82px) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-bottom {
    grid-template-columns: 1fr !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-wrap,
  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single {
    grid-template-columns: minmax(0, 56.7fr) minmax(420px, 43.3fr) !important;
  }
}

@media (max-width: 900px) {
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
    min-height: 680px !important;
    background-position: center, center, 62% center !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero h1,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy > p,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-trust-row {
    width: min(720px, 82vw) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope {
    grid-template-columns: 1fr !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope strong {
    white-space: normal !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-wrap,
  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 680px !important;
    min-height: 0 !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 300px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(81, 198, 255, .20) !important;
    background-position: center, center, center 38% !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single .auth-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-register .auth-side {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 340px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(81, 198, 255, .20) !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-register .auth-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 760px) {
  body.mnv-future-ui.public-app.shell-public.page-index.has-mobile-tabbar {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .site-header,
  body.mnv-future-ui.public-app.shell-auth .site-header {
    border-radius: 0 0 20px 20px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .site-header .nav-toggle,
  body.mnv-future-ui.public-app.shell-auth .site-header .nav-toggle {
    border: 1px solid rgba(121, 212, 255, .42) !important;
    background: rgba(6, 35, 89, .90) !important;
    color: #fff !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .site-header .nav-toggle span,
  body.mnv-future-ui.public-app.shell-auth .site-header .nav-toggle span {
    background: #eaf8ff !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
    min-height: 680px !important;
    padding: 48px 18px 58px !important;
    background-image:
      linear-gradient(180deg, rgba(237, 251, 255, .92) 0%, rgba(215, 245, 255, .76) 52%, rgba(222, 246, 255, .91) 100%),
      url('../mnv-learning-world-v242.webp') !important;
    background-position: center, 68% center !important;
    text-align: left !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-kicker {
    margin-bottom: 18px !important;
    font-size: 11px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero h1 {
    width: 100% !important;
    font-size: clamp(39px, 11.7vw, 58px) !important;
    line-height: 1.10 !important;
    letter-spacing: -.052em !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-bridge {
    grid-template-columns: 24px auto 24px !important;
    width: min(330px, 100%) !important;
    margin-inline: 0 !important;
    font-size: 11px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy > p {
    width: 100% !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 25px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-actions .button {
    width: 100% !important;
    min-height: 54px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope {
    width: 100% !important;
    margin-top: 24px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-trust-row {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 5px !important;
    scroll-snap-type: x proximity !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-trust-row span {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-stage {
    gap: 24px !important;
    padding: 56px 12px 70px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device {
    border-radius: 25px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-screen {
    min-height: 0 !important;
    margin: 6px !important;
    border-radius: 19px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar {
    min-height: 56px !important;
    padding: 0 13px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar nav {
    gap: 4px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar nav span {
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-content {
    padding: 17px 13px 19px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome {
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome::after {
    order: -1 !important;
    width: 96px !important;
    height: 88px !important;
    margin-bottom: -12px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-form {
    gap: 14px !important;
    padding: 15px !important;
    border-radius: 20px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-input-shell textarea {
    min-height: 118px !important;
    padding: 16px 16px 31px !important;
    font-size: 16px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button {
    min-height: 74px !important;
    padding: 10px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-bottom {
    grid-template-columns: 1fr !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-submit {
    min-height: 62px !important;
    font-size: 14px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-live-showcase {
    padding: 17px !important;
    border-radius: 22px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-preview-cards {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-preview-cards article {
    scroll-snap-align: start !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-demo-player {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-player-side {
    padding: 13px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .cosmic-demo-player video {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mobile-tabbar,
  body.mnv-future-ui.public-app.shell-auth .mobile-tabbar {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    min-height: 70px !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(83, 124, 213, .20) !important;
    border-radius: 22px !important;
    background: rgba(250, 252, 255, .96) !important;
    box-shadow: 0 16px 46px rgba(9, 34, 88, .24) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mobile-tabbar a,
  body.mnv-future-ui.public-app.shell-auth .mobile-tabbar a {
    min-height: 54px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    color: #627393 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mobile-tabbar a.is-active,
  body.mnv-future-ui.public-app.shell-public.page-index .mobile-tabbar a[aria-current="page"],
  body.mnv-future-ui.public-app.shell-auth .mobile-tabbar a.is-active,
  body.mnv-future-ui.public-app.shell-auth .mobile-tabbar a[aria-current="page"] {
    border-color: #b9d8ff !important;
    background: linear-gradient(180deg, #edf6ff, #e2ecff) !important;
    color: #155de5 !important;
    box-shadow: inset 0 3px #2a77ff !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register, .page-forgot_password, .page-reset_password) main.container {
    width: min(100% - 24px, 680px) !important;
    min-height: 0 !important;
    padding-block: 24px 44px !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-wrap,
  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single {
    border-radius: 25px !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-login .auth-wrap.single::before {
    min-height: 230px !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card,
  body.mnv-future-ui.public-app.shell-auth.page-register .auth-side {
    padding: 28px 22px !important;
  }

  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card h1 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }
}

@media (max-width: 430px) {
  body.mnv-future-ui.public-app.shell-public.page-index .site-header-inner,
  body.mnv-future-ui.public-app.shell-auth .site-header-inner {
    width: calc(100% - 20px) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .site-header .brand-text small,
  body.mnv-future-ui.public-app.shell-auth .site-header .brand-text small {
    font-size: 8.5px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
    min-height: 640px !important;
    padding-inline: 14px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero h1 {
    font-size: clamp(37px, 11.5vw, 49px) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-kicker {
    line-height: 1.5 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope {
    padding: 11px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-audience-scope li {
    font-size: 10px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-stage {
    padding-inline: 8px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-appbar .koto-app-logo strong {
    font-size: 11px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button > b {
    font-size: 12px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button > small {
    font-size: 9px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-time-pills span {
    min-height: 48px !important;
    padding-inline: 7px !important;
    font-size: 12px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-plan-options {
    font-size: 12px !important;
  }

  body.mnv-future-ui.public-app.shell-auth.page-register .auth-side {
    min-height: 290px !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) and (max-width: 960px) {
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy {
    min-height: 560px !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .mobile-tabbar,
  body.mnv-future-ui.public-app.shell-auth .mobile-tabbar {
    min-height: 62px !important;
  }
}

/* --------------------------------------------------------------------------
   Finite, presentation-only motion. No interaction or process is delayed.
   -------------------------------------------------------------------------- */

@keyframes mnvV242PublicHeroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mnvV242PublicPanelIn {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mnvV242PublicShine {
  0%, 22% { transform: translate3d(0, 0, 0) skewX(-18deg); }
  64%, 100% { transform: translate3d(520%, 0, 0) skewX(-18deg); }
}

@keyframes mnvV242PublicSelected {
  0%, 100% { box-shadow: 0 0 0 3px rgba(58, 220, 255, .10), 0 0 22px rgba(45, 175, 255, .14); }
  50% { box-shadow: 0 0 0 4px rgba(58, 220, 255, .17), 0 0 31px rgba(45, 175, 255, .23); }
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > :is(.koto-kicker, h1, .koto-hero-promise, .koto-hero-actions, .koto-audience-scope, .koto-trust-row) {
  animation: mnvV242PublicHeroIn 560ms cubic-bezier(.2, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > h1 { animation-delay: 70ms !important; }
body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > .koto-hero-promise { animation-delay: 130ms !important; }
body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > .koto-hero-actions { animation-delay: 180ms !important; }
body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > .koto-audience-scope { animation-delay: 230ms !important; }
body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > .koto-trust-row { animation-delay: 270ms !important; }

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.is-visible .koto-device,
body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.is-visible .cosmic-live-showcase,
body.mnv-future-ui.public-app.shell-auth .auth-wrap.is-visible {
  animation: mnvV242PublicPanelIn 620ms cubic-bezier(.16, .82, .2, 1) both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.is-visible .cosmic-live-showcase {
  animation-delay: 100ms !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-submit::after {
  animation: mnvV242PublicShine 3.8s ease-in-out 1.2s 2 both !important;
}

body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button:is(.is-selected, .is-guide-preview, .is-guide-active) {
  animation: mnvV242PublicSelected 1.7s ease-in-out 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-copy.is-visible > :is(.koto-kicker, h1, .koto-hero-promise, .koto-hero-actions, .koto-audience-scope, .koto-trust-row),
  body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.is-visible .koto-device,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-hero-stage.is-visible .cosmic-live-showcase,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-search-submit::after,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-guided-keywords > button:is(.is-selected, .is-guide-preview, .is-guide-active),
  body.mnv-future-ui.public-app.shell-auth .auth-wrap.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-solution strong,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-device-welcome h2 {
    background: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    forced-color-adjust: auto !important;
  }
}

@media print {
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-copy,
  body.mnv-future-ui.public-app.shell-public.page-index .koto-cosmic-hero .koto-hero-stage,
  body.mnv-future-ui.public-app.shell-auth:is(.page-login, .page-register) .auth-card,
  body.mnv-future-ui.public-app.shell-auth.page-register .auth-side {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }
}