.mobile-page { background: var(--brand-paper); color: var(--brand-ink); font-size: 17px; line-height: 1.9; }
.mobile-page h1, .mobile-page h2, .mobile-page h3, .mobile-page p, .mobile-page figure { margin: 0; }
.mobile-page h1, .mobile-page h2 { font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.mobile-page h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.mobile-page h3 { font-size: 1.2rem; line-height: 1.6; }
.mobile-page p + p { margin-top: 1rem; }
.mobile-page figcaption { margin-top: 16px; font-size: .875rem; line-height: 1.7; }
.mobile-page a { text-underline-offset: .25em; }

.mobile-hero { overflow: hidden; padding-block: 72px; background: radial-gradient(ellipse at 85% 55%, #315553 0, transparent 55%), radial-gradient(ellipse at 0 100%, #3d293b 0, transparent 55%), #101a2e; color: var(--brand-ivory); }
.mobile-hero__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 64px; }
.mobile-hero__platform { color: #dfb578; font-size: .875rem; letter-spacing: .08em; }
.mobile-hero h1 { margin-top: 24px; font-size: clamp(2.35rem, 4.2vw, 3.8rem); line-height: 1.4; }
.mobile-page .mobile-hero__lead { max-width: 34em; margin-top: 28px; color: #e3e8e4; }
.mobile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.mobile-page .mobile-store-link { gap: 20px; min-height: 54px; padding: 14px 22px; border: 1px solid #c9924b; border-radius: 6px; background: #d7a358; color: #101a2e; font-size: 1rem; font-weight: 700; text-decoration: none; }
.mobile-page .mobile-store-link:hover { background: #ebbb79; color: #101a2e; }
.mobile-hero__more { display: inline-flex; min-height: 44px; align-items: center; gap: 14px; font-size: .95rem; }
.mobile-page .mobile-hero__availability { max-width: 38em; margin-top: 20px; color: #b9c9cc; font-size: .875rem; }
.mobile-hero__figure { position: relative; justify-self: center; width: min(100%, 294px); text-align: center; }
.mobile-hero__figure::before { content: ""; position: absolute; z-index: 0; inset: 12% -23% 15%; border: 1px solid #c3b28b40; border-radius: 50%; transform: rotate(-23deg); pointer-events: none; }
.mobile-screen { position: relative; display: block; overflow: hidden; padding: 7px; border: 1px solid #adb2a97a; border-radius: 23px; background: #15242a; box-shadow: 0 28px 70px #0005; }
.mobile-screen img { width: 100%; height: auto; border-radius: 16px; }
.mobile-hero__figure figcaption { position: relative; color: #b9c9cc; }

.mobile-experience { padding-block: 88px; }
.mobile-section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.mobile-section-heading > p { max-width: 32em; color: var(--brand-muted); }
.mobile-experience__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.mobile-experience__grid article { padding-top: 24px; border-top: 2px solid var(--brand-ochre); }
.mobile-experience__grid h3 { margin-bottom: 16px; }
.mobile-experience__grid p { color: var(--brand-muted); }
.mobile-page .mobile-note { font-size: .875rem; }

.mobile-continuity { padding-block: 80px; border-block: 1px solid var(--brand-border); background: #eee8de; }
.mobile-continuity__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.mobile-continuity__copy h2 { margin-bottom: 24px; }
.mobile-continuity__copy p { color: var(--brand-muted); }
.mobile-continuity__copy .text-link { display: inline-block; margin-top: 24px; }
.mobile-web-proof a { display: block; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: 0 16px 40px #16233a12; }
.mobile-web-proof img { width: 100%; height: auto; }
.mobile-web-proof figcaption { color: var(--brand-muted); }

.mobile-download { padding-block: 88px; }
.mobile-download__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.mobile-app-icon { border-radius: 16px; margin-bottom: 24px; }
.mobile-download h2 { margin-bottom: 20px; }
.mobile-download p { margin-bottom: 28px; color: var(--brand-muted); }
.mobile-requirements { margin: 0; }
.mobile-requirements > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--brand-border); font-size: .95rem; }
.mobile-requirements > div:first-child { border-top: 1px solid var(--brand-border); }
.mobile-requirements dt { font-weight: 700; }
.mobile-requirements dd { margin: 0; color: var(--brand-muted); }

.mobile-faq { padding-block: 64px 88px; border-top: 1px solid var(--brand-border); }
.mobile-faq__layout { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 64px; }
.mobile-faq details { border-bottom: 1px solid var(--brand-border); }
.mobile-faq summary { padding-block: 20px; font-weight: 700; cursor: pointer; }
.mobile-faq details p { padding-bottom: 24px; color: var(--brand-muted); }
.mobile-page .mobile-faq__support { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; font-size: .95rem; }

@media (max-width: 1000px) {
    .mobile-hero__layout { gap: 32px; }
    .mobile-section-heading, .mobile-continuity__layout, .mobile-download__layout, .mobile-faq__layout { gap: 40px; }
    .mobile-experience__grid { gap: 24px; }
    .mobile-requirements > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 760px) {
    .mobile-hero { padding-block: 48px; }
    .mobile-hero__layout, .mobile-section-heading, .mobile-continuity__layout, .mobile-download__layout, .mobile-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mobile-hero__figure { width: min(75%, 294px); }
    .mobile-experience, .mobile-continuity, .mobile-download, .mobile-faq { padding-block: 56px; }
    .mobile-experience__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
    .mobile-section-heading { gap: 20px; }
    .mobile-experience__grid article { padding-top: 20px; }
    .mobile-requirements > div { grid-template-columns: 8em minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 420px) {
    .mobile-hero h1 { font-size: 2.15rem; }
    .mobile-actions { gap: 16px; }
    .mobile-requirements > div { grid-template-columns: 1fr; gap: 4px; }
}