/* Measurements from the September 2 desktop and 375 px mobile artboards.
   Desktop browser chrome (82 px) and the mobile status bar (44 px) are excluded. */
:root {
    --font: "PingFang SC", "PingFang TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --action-gradient: linear-gradient(270deg, #85e4ff 0%, #36c0ff 100%);
}

.site-nav { gap: 60px; }
.outline-pill { min-width: 80px; height: 36px; padding: 0 20px; border-color: rgba(255,255,255,.2); font-size: 14px; line-height: 20px; }
.outline-pill:hover { border-color: rgba(255,255,255,.4); background: transparent; }
.language-trigger { width: 41px; gap: 5px; }
.download-nav:hover > a i, .download-nav:focus-within > a i,
.language-menu:hover .language-trigger i, .language-menu:focus-within .language-trigger i { transform: none; }
.download-menu { right: -25px; width: max-content; min-width: 141px; }
.download-menu a { white-space: nowrap; }
.download-menu-icon { display: grid; place-items: center; }
.download-menu-icon img { inset: auto; width: 20px; height: 20px; max-width: none; transition: none; }
/* The normal iOS export is 38 px, while its hover export is 40 px.
   Render both at their original 2x scale to keep their silhouettes stationary. */
.download-menu-icon img[src$="download-ios.png"] { left: 1px; top: 0; width: 19px; height: 19px; }
.language-list { width: max-content; min-width: 169px; }
.language-list a { white-space: nowrap; }
.language-list a:hover { color: rgba(16,28,52,.8); }

/* The account menu grows with the actual identity rather than truncating it. */
.user-card { width: max-content; min-width: 223px; max-width: calc(100vw - 48px); }
.user-card-head { height: auto; min-height: 76px; }
.user-card-head > span { overflow: visible; white-space: normal; }
.user-card-head strong, .user-card-head small { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.user-card-head strong { width: max-content; max-width: min(55vw, 560px); }
.user-card-head small { width: max-content; max-width: min(55vw, 560px); }
.member-tier-label { gap: 20px; white-space: nowrap; }
.member-tier small { white-space: nowrap; }
.user-card-logout:hover { background: transparent; }

.home-hero { height: 770px; overflow: visible; }
.hero-art { top: 43px; bottom: auto; height: 730px; overflow: hidden; }
.hero-art img { position: absolute; left: 50%; width: 1920px; max-width: none; height: 730px; transform: translateX(-50%); object-fit: contain; }
.hero-copy { padding-top: 95px; }
.hero-copy h1 { width: 392px; font-size: 56px; line-height: 78px; font-weight: 600; letter-spacing: 0; }
.hero-copy p { width: 420px; margin: 24px 0 45px; font-size: 20px; line-height: 36px; }
.download-cta { width: max-content; min-width: 256px; height: 83px; padding: 0 35px; gap: 13px; border-radius: 42px; background: var(--action-gradient); font-size: 20px; line-height: 28px; font-weight: 600; white-space: nowrap; }
.download-cta:hover { background: #85e4ff; filter: none; transform: none; }
.experience-section { padding: 23px 0 0; }
.home-section-title h2 { font-size: 48px; line-height: 67px; font-weight: 600; }
.home-section-title p { margin-top: 18px; font-size: 18px; line-height: 25px; }
.experience-grid { margin-top: 60px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.experience-grid article { min-height: 250px; padding: 32px 24px 30px; background: rgba(255,255,255,.05); }
.experience-grid h3 { margin: 23px 0 7px; font-size: 18px; line-height: 25px; font-weight: 400; }
.experience-grid p { width: 100%; max-width: 290px; margin-top: 6px; font-size: 15px; line-height: 26px; }
.platform-section { padding: 90px 0 60px; }
.platform-grid { margin-top: 40px; gap: 16px; }
.platform-grid a { height: 195px; padding: 30px 0; border-radius: 20px; gap: 30px; font-size: 18px; line-height: 25px; white-space: nowrap; }
.platform-grid a:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* Natural, balanced paragraphs avoid isolated words in Latin translations. */
html:lang(en-US) .hero-copy h1, html:lang(id-ID) .hero-copy h1 { width: 600px; max-width: 55%; font-size: 48px; line-height: 1.4; white-space: normal; text-wrap: balance; }
html:lang(en-US) .hero-copy p, html:lang(id-ID) .hero-copy p { width: 530px; max-width: 50%; white-space: normal; text-wrap: balance; }
html:lang(en-US) .experience-grid p, html:lang(id-ID) .experience-grid p { white-space: normal; text-wrap: balance; }
.platform-section .home-section-title p { white-space: normal; text-wrap: balance; }

.site-footer { color: rgba(255,255,255,.35); }
.footer-main { padding: 48px 0 40px; }
.footer-details { display: grid; grid-template-columns: 245px 111px minmax(0, 1fr); gap: 50px; }
.footer-main dl.footer-column { display: block; min-width: 0; }
.footer-column > div + div { margin-top: 18px; }
.footer-main dt { margin: 0 0 3px; font-size: 14px; line-height: 24px; font-weight: 600; }
.footer-main dd { font-size: 14px; line-height: 24px; overflow-wrap: normal; }
.footer-main .footer-address dd { line-height: 20px; padding-top: 2px; }
.footer-divider { margin: 32px 0 20px; }
.footer-meta, .footer-meta small { font-size: 14px; line-height: 20px; }
.footer-meta nav { flex-wrap: wrap; justify-content: center; }
.footer-meta nav a { white-space: nowrap; }
.footer-meta a:hover { color: rgba(255,255,255,.45); }

@media (min-width: 768px) and (max-width: 1150px) {
    .site-nav { gap: 28px; }
    .hero-copy h1 { font-size: 48px; }
    .footer-details { grid-template-columns: 1.2fr .8fr 2fr; gap: 28px; }
    html:lang(en-US) .hero-copy h1, html:lang(id-ID) .hero-copy h1 { font-size: 40px; }
    .experience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .experience-grid article { padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 767px) {
    .site-header { height: 124px; background: var(--bg); }
    .header-inner { padding: 0 24px; }
    .header-actions { gap: 15px; }
    .header-actions:has(.user-menu) { gap: 20px; }
    .outline-pill { min-width: 70px; height: 32px; padding: 0 14px; font-size: 14px; }
    .language-trigger { width: 41px; }
    .site-nav { left: 0; width: 100%; padding: 0 clamp(24px, 13.6vw, 60px); display: flex; justify-content: space-between; gap: 0; background: linear-gradient(180deg, rgba(40,51,72,0) 0%, rgba(40,51,72,.7) 100%); }
    .site-nav > a, .download-nav > a { min-width: 0; padding: 0; font-size: 16px; line-height: 22px; text-align: center; }
    .download-nav { height: 64px; min-width: 0; }
    .language-list { top: 50px; right: 50px; }
    .user-menu, .avatar, .avatar .avatar-image { width: 32px; height: 32px; }
    .user-card { top: 56px; right: 24px; max-width: calc(100vw - 48px); }
    .user-card::before { top: -30px; height: 30px; }
    .user-card-head strong, .user-card-head small { max-width: calc(100vw - 135px); }
    .member-tier-label { gap: 12px; }
    .member-tier small { white-space: normal; text-wrap: balance; }

    .home-hero { height: 730px; }
    .hero-art { top: 0; height: 730px; }
    .hero-art img { width: 375px; height: 730px; object-fit: contain; }
    .hero-copy { padding: 30px 0 0; }
    .hero-copy h1 { width: 100%; margin: 0 auto; font-size: 40px; line-height: 56px; }
    .hero-copy p { width: 100%; margin: 15px 0 36px; font-size: 18px; line-height: 32px; }
    .mobile-cta { width: max-content; min-width: 200px; height: 64px; padding: 0 28px; gap: 10px; border-radius: 33px; font-size: 16px; line-height: 22px; }
    .mobile-cta img { width: 30px; height: 30px; }
    .experience-section { margin-top: -8px; padding: 0 24px 50px; }
    .home-section-title h2 { font-size: 32px; line-height: 45px; text-wrap: balance; }
    .experience-section .home-section-title h2 { max-width: 280px; margin: 0 auto; }
    html:lang(zh-Hans) .experience-section .home-section-title h2,
    html:lang(zh-Hant) .experience-section .home-section-title h2 { max-width: 192px; text-wrap: wrap; }
    .home-section-title p { margin-top: 15px; font-size: 16px; line-height: 30px; white-space: normal; text-wrap: balance; }
    .experience-section .home-section-title p { white-space: pre-line; }
    .experience-grid { margin-top: 30px; grid-template-columns: 1fr; gap: 16px; }
    .experience-grid article { min-height: 221px; padding: 22px 24px 24px; }
    .experience-grid h3 { margin: 12px 0 8px; font-size: 16px; line-height: 22px; }
    .experience-grid p { max-width: 269px; margin-top: 8px; font-size: 14px; line-height: 26px; }
    .platform-section { display: none; }

    html:lang(en-US) .hero-copy, html:lang(id-ID) .hero-copy { padding-right: 24px; padding-left: 24px; }
    html:lang(en-US) .hero-copy h1, html:lang(id-ID) .hero-copy h1 { width: 100%; max-width: none; font-size: 30px; line-height: 40px; }
    html:lang(en-US) .hero-copy p, html:lang(id-ID) .hero-copy p { width: 100%; max-width: none; margin: 15px 0 20px; font-size: 16px; line-height: 26px; }
    html:lang(en-US) .mobile-cta, html:lang(id-ID) .mobile-cta { max-width: 100%; padding: 0 20px; }
    html:lang(en-US) .site-nav > a, html:lang(id-ID) .site-nav > a,
    html:lang(en-US) .download-nav > a, html:lang(id-ID) .download-nav > a { font-size: 15px; }

    .footer-main { width: 100%; min-height: 361px; padding: 24px 24px 32px; }
    .footer-details { grid-template-columns: 1fr; gap: 19px; }
    .footer-column > div + div { margin-top: 19px; }
    .footer-main dt { margin-bottom: 6px; font-size: 12px; line-height: 20px; }
    .footer-main dd { font-size: 12px; line-height: 20px; }
    .footer-main .footer-address dd { width: calc(100% + 8px); padding-top: 0; }
    .footer-divider { margin: 20px 0 18px; }
    .footer-meta { gap: 12px; }
    .footer-meta, .footer-meta small { font-size: 12px; line-height: 17px; }
    .footer-meta nav { padding: 0; gap: 16px; row-gap: 8px; }
}