/* Shared mobile platform navigation. Customer/demo documents never opt in. */
moahome-mobile-navigation { display: none; }
moahome-mobile-navigation[hidden] { display: none !important; }
moahome-mobile-navigation,
moahome-mobile-navigation * { box-sizing: border-box; }

@media (max-width: 800px) {
  html[data-public-mobile-navigation="ready"] {
    scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px));
  }
  html[data-public-mobile-navigation="ready"] body {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }
  html[data-public-mobile-navigation="ready"] :is(
    [data-public-mobile-header], .landing-3d > .header, .search-nav,
    .story-nav, .mh-template-header, .legal-header, .public-support-header,
    .cafe-header, .studio-header, .salon-header, .mhv4 .v4-header,
    .public-discovery-header, .bk-header, .feature-nav, .guide-nav,
    .industry-nav, .homepage-nav, .seo-shell-header, .auth-header, .application-header
  ) { display: none; }
  html[data-public-mobile-navigation="ready"] body .service-mobile-nav {
    top: calc(72px + env(safe-area-inset-top, 0px));
  }
  html[data-public-mobile-navigation="ready"] :is(main, section)[id] {
    /* The root scroll-padding already accounts for the fixed header. */
    scroll-margin-top: 0;
  }
  html[data-public-mobile-navigation="ready"] a[class*="skip"]:focus {
    position: fixed;
    z-index: 1100;
  }
  moahome-mobile-navigation {
    display: block;
    --pmn-canvas: #f8f5ed;
    --pmn-ink: #263229;
    --pmn-muted: #626b61;
    --pmn-line: #dddcd2;
    --pmn-accent: #3156c5;
    color: var(--pmn-ink);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    font-synthesis: none;
    line-height: 1.5;
    letter-spacing: -.025em;
  }
  moahome-mobile-navigation a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  moahome-mobile-navigation button {
    color: inherit;
    font: inherit;
    border: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  moahome-mobile-navigation :is(a, button):focus-visible {
    outline: 3px solid var(--pmn-accent);
    outline-offset: 3px;
  }
  moahome-mobile-navigation .pmn-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: calc(72px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
    background: var(--pmn-canvas);
    border-bottom: 1px solid var(--pmn-line);
  }
  moahome-mobile-navigation .pmn-toggle,
  moahome-mobile-navigation .pmn-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border-radius: 4px;
  }
  moahome-mobile-navigation .pmn-toggle { justify-self: start; margin-left: -10px; }
  moahome-mobile-navigation .pmn-toggle-lines { display: grid; gap: 5px; width: 20px; }
  moahome-mobile-navigation .pmn-toggle-lines i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }
  moahome-mobile-navigation .pmn-toggle-lines i:nth-child(2) { width: 14px; }
  moahome-mobile-navigation .pmn-toggle-lines i:nth-child(3) { width: 18px; }
  moahome-mobile-navigation .pmn-wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: "Geist Variable", Geist, sans-serif;
    font-size: 27px;
    font-weight: 750;
    letter-spacing: -.08em;
    line-height: 1;
    white-space: nowrap;
  }
  moahome-mobile-navigation .pmn-wordmark span { color: #006773; }
  moahome-mobile-navigation .pmn-header-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #b8bdae;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  moahome-mobile-navigation .pmn-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--pmn-ink);
    background: var(--pmn-canvas);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  moahome-mobile-navigation .pmn-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: pmn-appear 160ms ease-out;
  }
  moahome-mobile-navigation .pmn-dialog::backdrop { background: rgba(38, 50, 41, .3); }
  moahome-mobile-navigation .pmn-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 16px;
    min-height: calc(72px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--pmn-line);
  }
  moahome-mobile-navigation .pmn-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.5; letter-spacing: -.025em; }
  moahome-mobile-navigation .pmn-close { margin-right: -10px; }
  moahome-mobile-navigation svg { display: block; width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  moahome-mobile-navigation .pmn-dialog-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 22px max(24px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  }
  moahome-mobile-navigation .pmn-intro { margin: 0 0 12px; color: var(--pmn-muted); font-size: 13px; line-height: 1.7; word-break: keep-all; }
  moahome-mobile-navigation .pmn-primary { display: block; }
  moahome-mobile-navigation .pmn-primary a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 63px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pmn-line);
    font-size: clamp(23px, 5.6vw, 28px);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1.4;
    word-break: keep-all;
  }
  moahome-mobile-navigation .pmn-primary svg { width: 20px; height: 20px; color: var(--pmn-accent); }
  moahome-mobile-navigation .pmn-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    padding: 19px 0 22px;
  }
  moahome-mobile-navigation .pmn-secondary a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 550;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  moahome-mobile-navigation .pmn-dialog a[aria-current] { color: var(--pmn-accent); }
  moahome-mobile-navigation .pmn-dialog-foot { margin-top: auto; padding-top: 2px; }
  moahome-mobile-navigation .pmn-apply {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 14px 18px;
    border-radius: 7px;
    background: var(--pmn-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
  }
  moahome-mobile-navigation .pmn-dialog-foot p { margin: 12px 0 0; text-align: center; color: var(--pmn-muted); font-size: 12px; line-height: 1.6; word-break: keep-all; }
  @keyframes pmn-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 360px) {
  moahome-mobile-navigation .pmn-header { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  moahome-mobile-navigation .pmn-wordmark { font-size: 25px; }
  moahome-mobile-navigation .pmn-header-apply { padding-inline: 9px; font-size: 12px; }
  moahome-mobile-navigation .pmn-dialog-head,
  moahome-mobile-navigation .pmn-dialog-content { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  moahome-mobile-navigation .pmn-secondary { column-gap: 14px; }
  moahome-mobile-navigation .pmn-secondary a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  moahome-mobile-navigation .pmn-dialog[open] { animation: none; }
}