/* Shared language controls and room for longer translations. */
@font-face { font-family: 'AllowanceGo Hero'; src: url('../assets/fonts/hero/latin.woff2?v=1f447653038f') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'AllowanceGo Hero TC'; src: url('../assets/fonts/hero/zh-Hant.woff2?v=56959c756e0c') format('woff2'); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'AllowanceGo Hero SC'; src: url('../assets/fonts/hero/zh-Hans.woff2?v=3724eacc0bc5') format('woff2'); font-style: normal; font-weight: 900; font-display: swap; }
.header-inner, .home-page .header-inner { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.header-inner .brand-link { order: 0; }
.header-inner .site-nav { order: 1; margin-left: auto; flex-wrap: wrap; }
.language-picker { order: 2; position: relative; flex-shrink: 0; color: #fff0ca; font-size: .82rem; }
.language-picker summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 7px; border: 1px solid #8c7954; border-radius: 12px; padding: 8px 12px; background: #102747; }
.language-picker summary::after { content: '▾'; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker nav { position: absolute; right: 0; top: calc(100% + 7px); width: 190px; padding: 6px; border: 1px solid #8c7954; border-radius: 12px; background: #0b1c38; box-shadow: 0 12px 28px #0008; }
.language-picker a { display: block; padding: 9px 12px; min-height: 44px; border-radius: 7px; text-decoration: none; }
.language-picker a:hover, .language-picker a[aria-current] { background: #243d60; color: #ffe1a0; }
.language-picker :focus-visible { outline: 2px solid #ffdc8c; outline-offset: 3px; }
.localized-hero-title { color: #f7fbff; font-family: 'AllowanceGo Hero', 'Arial Rounded MT Bold', sans-serif; font-size: clamp(2rem, 4.1vw, 3.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.localized-hero-art { display: block; filter: drop-shadow(0 5px 9px #06153080); }
.hero-title-line { --title-edge: #5b85dc; --title-depth: #294992; position: relative; display: block; width: max-content; max-width: 100%; }
.hero-title-line::before { content: attr(data-text); position: absolute; inset: 0; color: #f3f8ff; -webkit-text-stroke: .085em var(--title-edge); paint-order: stroke fill; text-shadow: 0 .035em var(--title-depth), 0 .075em var(--title-depth), 0 .11em var(--title-depth); }
.hero-title-line > span { position: relative; display: block; color: #f4faff; background: linear-gradient(#fffef4 8%, #fff 40%, #f1f9ff 72%, #b2d1f2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-title-gold { --title-edge: #ba8b2c; --title-depth: #825520; }
.hero-title-gold > span { color: #ffe65d; background-image: linear-gradient(#fffbc4 0%, #fff27a 24%, #ffe654 58%, #efb528 100%); }
@media (forced-colors: active) {
  .localized-hero-art { filter: none; }
  .hero-title-line::before { display: none; }
  .hero-title-line > span { background: none; -webkit-text-fill-color: CanvasText; }
}
.localized-store-action { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; max-width: 100%; width: auto; padding: 12px 20px; border: 1px solid #d3d8df; border-radius: 12px; background: #06080c; color: white; font: inherit; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; }
.localized-listing { display: grid; place-items: center; min-height: 54px; padding: 12px 20px; border: 1px solid #5e7093; border-radius: 9px; text-decoration: none; }
.home-hero-demo { padding-bottom: 12px; }
.home-demo-heading { line-height: 1.55; }
/* Supplied portrait screens keep their full UI, without the English composite crop. */
.story-visual.localized-scene { height: 568px; }
.story-phone.localized-screen { width: auto; height: 440px; aspect-ratio: 945 / 2048; }
.home-hero-demo .home-hero-phone.localized-screen { width: auto; height: 96%; aspect-ratio: 945 / 2048; }
.localized-screen img { position: static; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; }
/* Fill the status-bar battery at its position in the 945 × 2048 app captures. */
.localized-screen::after { content: ''; position: absolute; left: 84.02%; top: 2.39%; width: 6.56%; height: 1.51%; border-radius: 15% / 30%; background: #fff; pointer-events: none; }
.legal-document { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
:lang(zh-Hant), :lang(zh-Hans) { line-break: strict; }
:lang(zh-Hant) .localized-hero-title { font-family: 'AllowanceGo Hero TC', sans-serif; }
:lang(zh-Hans) .localized-hero-title { font-family: 'AllowanceGo Hero SC', sans-serif; }
:lang(zh-Hant) .localized-hero-title, :lang(zh-Hans) .localized-hero-title { font-size: clamp(2rem, 4.3vw, 4.1rem); font-weight: 900; line-height: 1.4; letter-spacing: .015em; }
:lang(zh-Hant) .home-hero-description, :lang(zh-Hans) .home-hero-description { max-width: 28em; }
@media (max-width: 1100px) {
  .home-page .site-nav { gap: 18px; }
  .home-hero-demo { position: relative; top: 0; }
  .home-hero-visual { height: auto; min-height: 550px; display: flex; justify-content: flex-end; align-items: flex-start; }
}
@media (max-width: 800px) {
  .header-inner, .home-page .header-inner { gap: 10px; }
  .header-inner .site-nav { order: 3; width: 100%; margin: 0; justify-content: center; gap: 10px 18px; }
  .language-picker { margin-left: auto; font-size: .74rem; }
  .home-page .kids-brand-logo, .kids-brand-logo { max-width: 150px; }
  .language-picker summary { padding: 6px 8px; }
  .home-hero-visual { min-height: 0; justify-content: center; }
  .home-hero-demo { scroll-margin-top: 180px; }
  .localized-hero-title { font-size: clamp(1.4rem, 7.2vw, 3.75rem); }
  .hero-title-line { margin-inline: auto; }
  :lang(zh-Hant) .localized-hero-title, :lang(zh-Hans) .localized-hero-title { font-size: clamp(1.75rem, 8.5vw, 4.1rem); }
}
@media (max-width: 1050px) {
  .story-visual.localized-scene { height: 510px; }
  .story-phone.localized-screen { height: 400px; }
}
@media (max-width: 800px) {
  .story-visual.localized-scene { height: 480px; }
  .story-phone.localized-screen { height: 344px; }
}
@media (max-width: 600px) {
  .story-visual.localized-scene { height: 495px; }
  .story-phone.localized-screen { height: 380px; }
}
@media (max-width: 390px) {
  .home-page .kids-brand-logo, .kids-brand-logo { max-width: 120px; }
  .language-picker summary { gap: 3px; font-size: .7rem; }
}