/* 2026-08-18: Mobile/app home parity with approved desktop first-screen composition.
   Goal: compact brand + flags row, text-only horizontal nav, then a clean full-height hero.
   No icon cards, no nav subtitles, no extra hero sentence/underline on the first screen. */
@media (max-width:780px){
  html,body{overflow-x:hidden;background:#fff}

  .fortune-header{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
    height:auto!important;
    min-height:0!important;
    padding:12px 14px 0!important;
    display:block!important;
    background:#fff!important;
    border-bottom:1px solid #ececf1!important;
    box-shadow:none!important;
  }

  .brand-language-stack{
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:0!important;
    margin:0!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }

  .fortune-header .brand,
  .brand-language-stack .brand{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
    font-size:1.08rem!important;
    line-height:1.1!important;
    font-weight:850!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  .language-switcher,
  .brand-language-stack .language-switcher{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }

  .lang-choice{
    flex:0 0 auto!important;
    min-width:36px!important;
    width:36px!important;
    height:31px!important;
    padding:0!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:6px!important;
    font-size:1.05rem!important;
    line-height:1!important;
    background:#fff!important;
    border:1px solid #dedee7!important;
    box-shadow:none!important;
  }

  .lang-choice.active,
  .lang-choice[aria-current="true"]{
    border:2px solid #4b38d2!important;
    box-shadow:none!important;
  }

  /* Same visual language as desktop: one clean text row, horizontally scrollable on phones. */
  .main-fortune-nav{
    width:calc(100% + 28px)!important;
    max-width:none!important;
    height:50px!important;
    margin:10px -14px 0!important;
    padding:0 14px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:24px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    border:0!important;
    border-top:1px solid #f2f2f5!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .main-fortune-nav::-webkit-scrollbar{display:none!important}

  .main-fortune-nav a{
    position:relative!important;
    flex:0 0 auto!important;
    min-width:auto!important;
    min-height:0!important;
    height:50px!important;
    padding:0!important;
    margin:0!important;
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    border:0!important;
    border-bottom:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    color:#151824!important;
    font-size:.96rem!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    text-align:center!important;
    white-space:nowrap!important;
    box-shadow:none!important;
    transform:none!important;
    text-decoration:none!important;
    outline:none!important;
  }

  .main-fortune-nav a::before,
  .main-fortune-nav a::after,
  .main-fortune-nav a img,
  .main-fortune-nav a svg,
  .main-fortune-nav a small,
  .main-fortune-nav a .nav-icon,
  .main-fortune-nav a .nav-subtitle,
  .main-fortune-nav a [class*="icon"],
  .main-fortune-nav a [class*="subtitle"],
  .main-fortune-nav a [class*="indicator"]{
    content:none!important;
    display:none!important;
    border:0!important;
    box-shadow:none!important;
    background:none!important;
    background-image:none!important;
  }

  .main-fortune-nav a:hover,
  .main-fortune-nav a:focus,
  .main-fortune-nav a.active,
  .main-fortune-nav a[aria-current="page"]{
    color:#151824!important;
    background:transparent!important;
    border-bottom:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
  }

  /* First screen mirrors the desktop composition: generous white space and centered copy. */
  .compact-hero{
    box-sizing:border-box!important;
    min-height:calc(100svh - 124px)!important;
    padding:20px 24px 34px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    background:#fff!important;
  }

  .compact-hero .eyebrow{
    margin:0 0 24px!important;
    color:#4b38d2!important;
    font-size:.98rem!important;
    font-weight:800!important;
    line-height:1.1!important;
    letter-spacing:.16em!important;
    text-align:center!important;
  }

  .compact-hero h1{
    position:relative!important;
    width:100%!important;
    max-width:680px!important;
    margin:0!important;
    padding:0!important;
    color:#151824!important;
    font-size:clamp(2.05rem,9.2vw,2.72rem)!important;
    font-weight:850!important;
    line-height:1.14!important;
    letter-spacing:-.055em!important;
    text-align:center!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  .compact-hero h1::after{content:none!important;display:none!important}

  .compact-hero .hero-copy{
    width:100%!important;
    max-width:680px!important;
    margin:34px auto 0!important;
    color:#676d79!important;
    font-size:.98rem!important;
    line-height:1.7!important;
    letter-spacing:-.025em!important;
    text-align:center!important;
    word-break:keep-all!important;
  }
  .compact-hero .hero-copy::after{content:none!important;display:none!important}
}

@media (max-width:390px){
  .fortune-header{padding-left:10px!important;padding-right:10px!important}
  .brand-language-stack{gap:6px!important}
  .fortune-header .brand,.brand-language-stack .brand{font-size:1rem!important}
  .lang-choice{width:33px!important;min-width:33px!important;height:29px!important;font-size:1rem!important}
  .language-switcher,.brand-language-stack .language-switcher{gap:3px!important}
  .main-fortune-nav{width:calc(100% + 20px)!important;margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important;gap:20px!important}
  .main-fortune-nav a{font-size:.92rem!important}
  .compact-hero{min-height:calc(100svh - 120px)!important;padding-left:20px!important;padding-right:20px!important}
}