/* Mobile typography is deliberately shared across every public page.
   Page-specific styles still own layout; this file only normalizes hierarchy,
   wrapping and the first-screen rhythm at phone widths. */
/* Keep headings as complete phrases instead of leaving one or two words on a
   stray line. This applies at every width; mobile rules only adjust scale. */
main :is(h1,h2,h3,h4),
.hero :is(h1,h2,h3),
.page-shell :is(h1,h2,h3),
footer :is(h2,h3){overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
header a,header button,header select{white-space:nowrap}

@media(max-width:620px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body{font-size:14px;line-height:1.55}
 header:not(.topbar){height:64px!important;padding-inline:14px!important}
 header .brand{font-size:20px!important;letter-spacing:-1.1px!important}
 header:not(.topbar)>nav{min-width:0;margin-left:auto;gap:5px!important;flex:0 0 auto}
 header:not(.topbar) .brand{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 /* Honour the notch inset and never let the last control sit under the edge. */
 header:not(.topbar){padding-right:max(14px,env(safe-area-inset-right))!important;padding-left:max(14px,env(safe-area-inset-left))!important}
 header:not(.topbar) #authSlot{margin-right:0!important;padding-right:0!important}
 header:not(.topbar) .mobile-nav-toggle{flex:0 0 38px;width:38px;height:38px;min-height:38px;padding:0!important;justify-content:center;border-radius:50%}
 header:not(.topbar) .theme-picker{flex:0 0 38px;width:38px;min-width:0}
 header:not(.topbar) .theme-select,
 header:not(.topbar) .theme-trigger{width:38px!important;min-width:38px!important;height:38px;padding:0!important;border-radius:50%}
 header:not(.topbar) .lang-btn{flex:0 0 38px;width:38px;height:38px;padding:0!important;border-radius:50%}
 /* The slot holds a 32px avatar when signed in but a text button when signed
    out, so pinning it to 32px wrapped "Tài khoản" onto two lines. Size the
    avatar, not the slot. */
 header:not(.topbar) #authSlot{flex:0 0 auto;min-width:32px!important}
 header:not(.topbar) .user-chip,
 header:not(.topbar) .user-avatar{flex:0 0 32px;width:32px;height:32px}
 header:not(.topbar) .user-chip{gap:0!important;margin:0!important;transform:none!important} header:not(.topbar) #authSlot{display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
 header:not(.topbar) .login-btn{flex:0 0 auto;height:38px;padding:0 14px!important;white-space:nowrap;font-size:12px;line-height:38px;border-radius:999px}
 main :is(h1,h2,h3,h4),.hero :is(h1,h2,h3),.page-shell :is(h1,h2,h3){overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
 main p,.hero p,.page-shell p{overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:pretty}
 .eyebrow{font-size:9px!important;line-height:1.4!important;letter-spacing:.15em!important}

 :where(.page-hero,.market-hero,.messages-heading,.entry-hero,.house-hero,.score-hero,.profile-intro,.checkout-head){margin-bottom:24px!important}
 :where(.page-hero,.market-hero,.messages-heading,.entry-hero,.house-hero,.score-hero,.profile-intro,.checkout-head) h1,
 .studio-page .section-title h1,
 .legal h1,
 .topbar~main .hero h1{font-size:clamp(32px,9vw,39px)!important;line-height:1.07!important;letter-spacing:-.05em!important;white-space:normal!important}
 :where(.page-hero,.market-hero,.messages-heading,.entry-hero,.house-hero,.score-hero,.profile-intro,.checkout-head) h1 em,
 .score-hero h1 em{display:inline!important}
 :where(.section-copy,.usecases,.cta-band,.how-heading,.how-role-intro,.demo-booking-copy,.shopping-proof-copy) h2,
 .how-role-intro h3{font-size:clamp(28px,8vw,34px)!important;line-height:1.1!important;letter-spacing:-.045em!important}
 .studio-page .section-title h1 span{display:inline!important}

 .page-shell,.market-shell,.messages-page{padding-top:32px!important;padding-inline:14px!important}
 .design-entry,.house-shell,.score-shell{padding-top:36px!important}
 .profile-shell{padding-top:28px!important}
 .profile-intro{min-height:120px!important;align-items:center!important}
 .checkout-shell{padding-top:34px!important}
 .how-page .how-work{padding-top:42px!important}

 .home-immersive .hero.landing{padding:30px 16px 48px!important}
 .home-immersive .hero.landing .eyebrow{display:none}
 .home-immersive .hero.landing h1{margin:0 auto 16px!important;font-size:clamp(33px,9vw,39px)!important;line-height:1.02!important;letter-spacing:-.058em!important}
 .home-immersive .hero.landing h1{--hero-line:clamp(25px,6.75vw,29px)}
 .home-immersive .hero-title-line{display:block!important;white-space:nowrap!important}
 .home-immersive .hero.landing h1 em{display:block!important}
 .home-immersive .hero-title-line,.home-immersive .hero.landing h1 em{font-size:var(--hero-line)!important;line-height:1.08!important}
 .home-immersive .hero.landing .lead{max-width:34ch;margin:0 auto 20px!important;font-size:15px!important;line-height:1.5!important;text-wrap:balance}
 .home-immersive .hero-actions{gap:0!important;align-items:center!important}
 .home-immersive .hero-actions .primary{width:min(100%,326px);min-height:54px;padding:0 18px!important;gap:18px;font-size:15px;text-align:center}
 .home-immersive .hero-actions .text-link,.home-immersive .cozy-scribble{display:none!important}
 .gsap-hero .landing-mascot,.home-immersive .landing-mascot{display:none!important}
 .home-immersive .demo-mobile-guide{margin:22px auto -4px!important;padding-inline:6px!important}
 .home-immersive .demo-mobile-guide>span{font-size:12px!important;letter-spacing:-.01em}
 .home-immersive .hero.landing .showcase{margin-top:18px!important}
 .home-immersive .demo-journey{height:462px!important}
 .home-immersive .demo-image{height:320px!important}

 .topbar~main .hero{padding-top:38px!important}
 .topbar~main .hero .lead{font-size:15px!important;line-height:1.55!important;text-wrap:pretty}
 .topbar~main .hero .micro{display:none}
}

@media(max-width:380px){
 .home-immersive .hero.landing h1{--hero-line:24px}
 .home-immersive .hero.landing h1{font-size:32px!important}
 :where(.page-hero,.market-hero,.messages-heading,.entry-hero,.house-hero,.score-hero,.profile-intro,.checkout-head) h1,
 .studio-page .section-title h1,.legal h1,.topbar~main .hero h1{font-size:31px!important}
}

@media(max-width:620px){
 /* The trust strip and the mood rail were both being sliced off at the right
    edge. Let the strip wrap into centred rows, and make the rail read as a
    deliberate horizontal scroller with a fade instead of a hard cut. */
 .trust-strip{flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:16px 18px;overflow:visible;white-space:normal;text-align:center}
 .trust-strip span{font-size:10px;letter-spacing:.06em}
 .trust-strip:not(.trust-tagline) span:nth-child(even){display:none}
 .mood-rail{padding:12px 18px!important;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
 .mood-rail::-webkit-scrollbar{display:none}
 .mood-rail .mood-chip{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:800px){header:not(.topbar) .user-chip{flex:0 0 auto!important;width:auto!important;gap:5px!important}header:not(.topbar) .current-plan{min-width:30px;height:17px;padding:0 5px;font-size:7px}}

/* Mobile hero: stronger editorial type and a compact, intentional demo control. */
@media(max-width:620px){
 .home-immersive .hero.landing{padding-top:38px!important}
 .home-immersive .hero.landing .eyebrow{display:inline-flex!important;align-items:center;width:auto;margin:0 auto 17px!important;padding:7px 11px;border:1px solid color-mix(in srgb,var(--coral) 28%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--surface) 74%,transparent);color:var(--coral);font-size:9px!important;letter-spacing:.14em!important;box-shadow:0 8px 24px color-mix(in srgb,var(--coral) 8%,transparent)}
 .home-immersive .hero.landing h1{width:100%;max-width:100%;margin:0 auto 19px!important;--hero-line:clamp(44px,11.8vw,50px);letter-spacing:-.075em!important;text-align:center;text-wrap:balance}
 .home-immersive .hero-title-line{max-width:100%;margin-inline:auto;white-space:normal!important}
 .home-immersive .hero-title-line,.home-immersive .hero.landing h1 em{line-height:1.04!important}
 .home-immersive .hero.landing h1 em{text-shadow:0 12px 30px color-mix(in srgb,var(--coral) 20%,transparent)}
 .home-immersive .hero.landing .lead{max-width:31ch;margin-bottom:23px!important;font-size:16px!important;line-height:1.48!important;color:color-mix(in srgb,var(--ink) 72%,var(--muted))}
 .home-immersive .hero-actions .primary{width:max-content;max-width:100%;min-height:46px!important;padding-inline:20px!important;gap:10px;font-size:13px!important;border-radius:999px;box-shadow:0 12px 27px color-mix(in srgb,var(--coral) 25%,transparent)}
 .home-immersive .demo-mobile-guide{width:min(100%,350px);min-height:44px;margin:24px auto 2px!important;padding:8px 11px 8px 15px!important;border:1px solid color-mix(in srgb,var(--coral) 18%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent)}
 .home-immersive .demo-mobile-guide>span{font-size:12px!important;font-weight:850!important;letter-spacing:0!important}
}

/* The dedicated mobile hero ships after the legacy hero rules. Match its full
   selector so the compact CTA and larger headline cannot be overridden. */
@media(max-width:767px){
 .home-immersive .hero.landing .mobile-hero-copy h1{--hero-line:clamp(41px,10.3vw,44px)!important}
 .home-immersive .hero.landing .mobile-hero-copy .hero-actions{display:flex!important;justify-content:center!important}
 .home-immersive .hero.landing .mobile-hero-copy .hero-actions>a.primary{display:inline-flex!important;flex:0 0 auto!important;width:max-content!important;max-width:calc(100vw - 32px)!important;min-height:46px!important;margin-inline:auto!important;padding:0 18px!important;gap:9px!important;font-size:13px!important}
}

/* Keep the three-step story light enough to scan without dominating a phone. */
@media(max-width:620px){
 .home-immersive main .how-work-compact{margin:52px 12px 64px!important;padding:25px 14px 30px!important;border-radius:22px}
 .home-immersive .how-work-compact .how-heading{margin-bottom:12px!important;padding:0 3px 12px!important}
 .home-immersive .how-work-compact .how-heading .eyebrow{font-size:8px;letter-spacing:.13em;line-height:1.45}
 .home-immersive .how-work-compact .how-heading h2{max-width:100%;font-size:33px!important;line-height:1.12!important}
 .home-immersive .home-faq-heading h2{font-size:33px!important;line-height:1.12!important}
 .home-immersive .how-work-compact .how-role-panel{padding-top:8px}
 .home-immersive .how-work-compact .how-steps{max-width:310px;gap:17px;margin-inline:auto}
 .home-immersive .how-work-compact .journey-visual{aspect-ratio:16/11}
 .home-immersive .how-work-compact .how-steps article{padding-bottom:15px}
 .home-immersive .how-work-compact .how-steps h4{margin-top:13px;font-size:17px}
 .home-immersive .how-work-compact .how-steps a{margin-top:8px;font-size:11px}
}