/* MyPortfolioHub Resume Builder v17 — mobile landing polish.
   Loaded after landing-palette-v16.css. Presentation-only: no route, editor,
   resume document, auth, or template-rendering behavior changes. */

@media (max-width: 900px) {
  /* Header: compact and intentional instead of oversized browser-chrome-like UI. */
  .mph26-light-page .rb-header {
    height: 64px !important;
  }
  .mph26-light-page .rb-header-inner {
    width: calc(100% - 28px) !important;
    min-width: 0;
  }
  .mph26-light-page .rb-brand {
    gap: 9px !important;
    min-width: 0;
  }
  .mph26-light-page .rb-brand-mark,
  .mph26-light-page .rb-brand-mark img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }
  .mph26-light-page .rb-brand strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }
  .mph26-light-page .rb-brand small {
    margin-top: 3px !important;
    font-size: 7px !important;
    letter-spacing: .13em !important;
  }
  .mph26-light-page .rb-header-actions {
    gap: 8px !important;
  }
  .mph26-light-page .rb-menu-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(216, 247, 238, .18) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .055) !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
  }
  .mph26-light-page .rb-menu-btn span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #e8f7f3 !important;
    transform-origin: center;
    transition: transform .18s ease, opacity .18s ease !important;
  }
  .mph26-light-page .rb-menu-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mph26-light-page .rb-menu-btn.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .mph26-light-page .rb-menu-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Mobile navigation: card-like sheet below the sticky header. */
  .mph26-light-page .rb-nav.is-open {
    top: 64px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(157, 216, 199, .22) !important;
    border-radius: 0 0 16px 16px !important;
    background: linear-gradient(180deg, #043936 0%, #032f2d 100%) !important;
    box-shadow: 0 18px 40px rgba(2, 31, 30, .24) !important;
  }
  .mph26-light-page .rb-nav.is-open > a:not(.rb-btn),
  .mph26-light-page .rb-nav.is-open .rb-nav-account-links > a {
    min-height: 44px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    color: #d8ebe6 !important;
  }
  .mph26-light-page .rb-nav.is-open > a:not(.rb-btn):hover,
  .mph26-light-page .rb-nav.is-open > a:not(.rb-btn).is-active,
  .mph26-light-page .rb-nav.is-open .rb-nav-account-links > a:hover {
    background: rgba(16, 185, 129, .11) !important;
    color: #fff !important;
  }
  .mph26-light-page .rb-nav.is-open > a:not(.rb-btn)::after {
    display: none !important;
  }
  .mph26-light-page .rb-nav.is-open .rb-nav-cta-mobile {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 6px !important;
    border-radius: 11px !important;
  }

  /* FAQ to CTA transition: remove the detached blank band seen on mobile. */
  .mph26-light-page .mph26-faq-section {
    padding-bottom: 22px !important;
  }
  .mph26-light-page .mph26-faqs details:last-child {
    margin-bottom: 0 !important;
  }
  .mph26-light-page .mph26-final-cta {
    padding-top: 14px !important;
  }

  /* CTA: premium full-width action with clear label/arrow separation. */
  .mph26-light-page .mph26-final-cta > .rb-container {
    gap: 20px !important;
    box-shadow: 0 18px 38px rgba(3, 47, 45, .14) !important;
  }
  .mph26-light-page .mph26-final-cta .rb-btn-primary {
    justify-content: space-between !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
  }
  .mph26-light-page .mph26-final-cta .rb-btn-primary span:last-child {
    margin-left: 16px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    opacity: .9 !important;
  }

  /* Footer: reduce density while retaining every destination. */
  .mph26-light-page .rb-footer-enterprise-inner {
    padding-top: 34px !important;
    padding-bottom: 22px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-brand {
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-brand p {
    max-width: 430px !important;
    margin-top: 8px !important;
    line-height: 1.6 !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-cols {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 34px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-col:last-child {
    grid-column: 1 / -1 !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-col h4 {
    margin-bottom: 10px !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-col a,
  .mph26-light-page .rb-footer-enterprise .rb-footer-col span {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-bottom {
    margin-top: 26px !important;
    padding-top: 18px !important;
    gap: 14px !important;
  }
}

@media (max-width: 560px) {
  .mph26-light-page .rb-header-inner,
  .mph26-light-page .rb-container {
    width: calc(100% - 28px) !important;
  }
  .mph26-light-page .rb-brand strong {
    font-size: 12.5px !important;
  }
  .mph26-light-page .mph26-faq-section {
    padding-top: 44px !important;
    padding-bottom: 16px !important;
  }
  .mph26-light-page .mph26-faqs {
    gap: 8px !important;
  }
  .mph26-light-page .mph26-faqs details {
    border-radius: 12px !important;
  }
  .mph26-light-page .mph26-final-cta {
    padding: 10px 0 40px !important;
  }
  .mph26-light-page .mph26-final-cta > .rb-container {
    padding: 25px 20px !important;
    border-radius: 18px !important;
  }
  .mph26-light-page .mph26-final-cta h2 {
    max-width: 13ch !important;
    font-size: clamp(29px, 9vw, 36px) !important;
  }
  .mph26-light-page .mph26-final-cta .rb-btn-primary {
    min-height: 52px !important;
    padding: 0 18px !important;
  }
  .mph26-light-page .rb-footer-enterprise-inner {
    padding-top: 30px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-col,
  .mph26-light-page .rb-footer-enterprise .rb-footer-col:last-child {
    grid-column: auto !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(157, 189, 181, .12) !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-col:first-child {
    border-top: 0 !important;
  }
  .mph26-light-page .rb-footer-enterprise .rb-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}