:root { color-scheme: light; --ink:#242137; --muted:#6d6a7e; --purple:#6552dc; --line:#eae8f1; --soft:#f7f6fb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; height:auto; }
figure,p,h1,h2,h3 { margin:0; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid #8a79f4; outline-offset:5px; }
[hidden] { display:none !important; }
.container { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; padding:12px 18px; color:#fff; background:var(--purple); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { border-bottom:1px solid var(--line); background:#ffffffed; position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.header-inner { display:flex; align-items:center; gap:32px; min-height:86px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:19px; font-weight:700; white-space:nowrap; }
.brand img { flex:none; }
.site-nav { display:flex; align-items:center; gap:30px; margin-left:auto; font-size:14px; color:#696579; }
.site-nav a:hover,.legal-links a:hover,.contact-link:hover { color:var(--purple); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid var(--line); border-radius:12px; min-height:70px; padding:15px 20px; font-size:15px; font-weight:600; line-height:1.4; transition:background .15s,box-shadow .15s; }
.button:hover { box-shadow:0 4px 16px #30226b15; }
.button-small { min-height:42px; padding:9px 17px; border-radius:9px; font-size:13px; gap:16px; }
.header-inner>.button { color:#fff; background:var(--purple); border-color:var(--purple); }
.button small { display:block; margin-top:3px; font-size:11px; font-weight:400; opacity:.8; }
.button-primary { color:#fff; background:var(--purple); border-color:var(--purple); }
.button-primary:hover { background:#5845cb; }
.button-android { color:var(--ink); background:#fff; border-color:#d9d5e7; }
.button-platform { font-size:19px; letter-spacing:-.5px; }
.button-android .button-platform { display:grid; place-items:center; font-size:15px; width:25px; height:25px; border:1.5px solid currentColor; border-radius:8px; }
.button-arrow { margin-left:5px; font-size:21px; font-weight:400; }
.menu-toggle { display:none; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; padding-block:78px 86px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--purple); font-size:13px; font-weight:600; letter-spacing:1px; line-height:1.5; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 4px #eeebff; margin-right:4px; }
h1 { margin-top:25px; font-size:clamp(44px,4.3vw,64px); font-weight:700; line-height:1.23; letter-spacing:-2px; }
h1 em { color:var(--purple); font-style:normal; }
.hero-description { color:var(--muted); font-size:17px; line-height:1.95; margin-top:25px; }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.platform-note { font-size:12px; line-height:1.6; color:#746f83; margin-top:14px; }
.scan-download { display:flex; align-items:center; gap:17px; margin-top:27px; padding-top:25px; border-top:1px solid var(--line); max-width:405px; }
.scan-download img { width:76px; height:76px; padding:4px; border:1px solid var(--line); border-radius:8px; image-rendering:pixelated; }
.scan-download strong { font-size:13px; font-weight:600; }
.scan-download p { margin-top:7px; font-size:12px; line-height:1.6; color:var(--muted); }
.hero-preview { min-height:560px; position:relative; isolation:isolate; }
.hero-preview::before { content:""; position:absolute; width:430px; height:430px; top:60px; right:0; border-radius:50%; background:radial-gradient(circle,#e9e4ff 0,#f2efff 56%,#fbfaff 70%); z-index:-1; }
.platform-preview { position:absolute; }
.platform-preview img { border-radius:19px; box-shadow:0 24px 60px -22px #40347540,0 2px 10px #4034750a; }
.ios-preview { width:238px; top:0; right:16px; transform:rotate(5deg); z-index:2; }
.android-preview { width:220px; top:110px; left:5px; transform:rotate(-7deg); }
.platform-preview figcaption { margin-top:15px; text-align:center; font-size:11px; color:#706880; letter-spacing:.5px; }
.experience { background:var(--soft); padding-block:65px 68px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; }
h2 { font-size:clamp(25px,2.4vw,34px); line-height:1.4; letter-spacing:-.6px; font-weight:650; }
.section-heading h2 { margin-top:12px; }
.section-heading>p { color:var(--muted); font-size:13px; line-height:1.9; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature { padding:26px 26px 23px; background:#fff; border:1px solid #eeecf4; border-radius:15px; }
.feature-number { color:#a59bc8; font-size:12px; letter-spacing:1px; }
.feature h3 { font-size:18px; margin-top:22px; line-height:1.5; font-weight:600; }
.feature p { min-height:70px; margin-top:12px; color:var(--muted); font-size:13px; line-height:1.9; }
.feature-label { display:inline-block; color:var(--purple); font-size:11px; padding:5px 9px; background:#f4f1ff; border-radius:5px; margin-top:18px; }
.download-section { display:grid; grid-template-columns:.8fr 1.5fr; gap:70px; align-items:center; padding-block:76px 82px; }
.download-intro h2 { margin-top:13px; font-size:34px; }
.download-intro>p:last-child { margin-top:15px; font-size:14px; line-height:1.9; color:var(--muted); }
.download-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.download-option { display:flex; flex-direction:column; justify-content:space-between; min-height:224px; padding:27px 24px 23px; border:1px solid var(--line); border-radius:16px; transition:border-color .15s,box-shadow .15s; }
.download-option:hover { border-color:#b9acef; box-shadow:0 8px 24px #30226b0b; }
.option-kicker { color:var(--muted); font-size:12px; }
.download-option h3 { margin-top:12px; font-size:24px; font-weight:600; }
.download-option p { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.8; }
.option-link { display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); color:var(--purple); font-size:13px; font-weight:600; }
.site-footer { border-top:1px solid var(--line); padding-block:31px 26px; }
.footer-main { display:flex; align-items:center; gap:30px; }
.footer-main .brand { font-size:15px; gap:9px; }
.contact-link { color:var(--muted); font-size:12px; margin-left:10px; }
.legal-links { display:flex; gap:18px; margin-left:auto; color:var(--muted); font-size:11px; }
.footer-meta { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:28px; color:#777185; font-size:11px; line-height:1.8; }
.registrations { display:flex; flex-wrap:wrap; gap:6px 14px; }
.registrations>span { display:inline-flex; align-items:center; gap:4px; }
/* Known mobile platforms show their own content; unknown devices retain both choices. */
[data-platform="ios"] [data-platform-only="android"],
[data-platform="android"] [data-platform-only="ios"],
[data-platform="ios"] [data-platform-only="unknown"],
[data-platform="android"] [data-platform-only="unknown"],
[data-platform="unknown"] [data-platform-only]:not([data-platform-choice]):not([data-platform-only="unknown"]) { display:none !important; }
[data-platform="ios"] .scan-download,[data-platform="android"] .scan-download { display:none; }
@media(min-width:761px) { [data-platform="ios"] .hero-preview { min-height:590px; } }
[data-platform="android"] .hero-actions .android-download { background:var(--purple); border-color:var(--purple); color:#fff; }
[data-platform="ios"] .ios-preview,[data-platform="android"] .android-preview { left:50%; right:auto; top:12px; width:252px; transform:translateX(-50%) rotate(3deg); }
[data-platform="ios"] .download-options,[data-platform="android"] .download-options { grid-template-columns:1fr; max-width:440px; }
@media(min-width:1600px) { .hero { padding-block:94px 100px; } }
@media(max-width:1100px) {
  .container { width:calc(100% - 56px); }
  .header-inner { gap:24px; }
  .site-nav { gap:22px; }
  .hero { gap:20px; padding-block:68px; }
  .hero-preview { min-height:510px; }
  .ios-preview { width:210px; right:5px; top:10px; }
  .android-preview { width:185px; left:0; top:115px; }
  .hero-preview::before { width:350px; height:350px; }
  .button { gap:10px; padding-inline:15px; font-size:13px; }
  .feature { padding-inline:20px; }
  .feature-grid { gap:16px; }
  .download-section { gap:35px; }
  .footer-main { flex-wrap:wrap; gap:18px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:84px; }
  .container { width:calc(100% - 40px); }
  .header-inner { min-height:72px; gap:14px; flex-wrap:wrap; }
  .brand { font-size:16px; gap:8px; }
  .brand img { width:30px; }
  .header-inner>.button { margin-left:auto; min-height:36px; padding:8px 11px; font-size:11px; border-radius:8px; }
  .header-inner>.button>span[aria-hidden] { display:none; }
  .menu-toggle { min-height:40px; min-width:40px; border:0; padding:8px 0 8px 5px; font-size:12px; background:none; color:var(--muted); }
  .js .menu-toggle:not([hidden]) { display:inline-flex; }
  .site-nav { width:100%; order:4; justify-content:center; padding-block:8px 22px; font-size:13px; }
  .js .site-nav { display:none; }
  [data-menu="open"] .site-nav { display:flex; }
  .hero { grid-template-columns:1fr; padding-block:45px 34px; gap:30px; text-align:center; }
  .hero .eyebrow { justify-content:center; font-size:12px; }
  h1 { font-size:46px; letter-spacing:-1.5px; margin-top:20px; }
  .hero-description { font-size:15px; line-height:1.85; margin-top:18px; }
  .hero-actions { justify-content:center; margin-top:25px; gap:10px; }
  .hero-actions .button { font-size:14px; min-height:64px; padding:12px 14px; border-radius:11px; text-align:left; }
  .button small { font-size:10px; }
  .button-arrow { display:none; }
  .platform-note { font-size:11px; margin-top:12px; }
  .scan-download { display:none; }
  .hero-preview { display:flex; gap:16px; justify-content:center; align-items:center; min-height:0; padding:5px 6px 10px; }
  .hero-preview::before { width:100%; max-width:390px; height:320px; right:0; left:0; margin:auto; top:35px; }
  .platform-preview,.ios-preview,.android-preview { position:relative; width:calc(50% - 12px); left:auto; right:auto; top:auto; transform:none; }
  .android-preview { margin-top:40px; }
  .platform-preview img { border-radius:13px; }
  .platform-preview figcaption { margin-top:12px; font-size:10px; }
  [data-platform="ios"] .ios-preview,[data-platform="android"] .android-preview { left:auto; right:auto; top:auto; width:min(252px,72vw); transform:none; margin-top:0; }
  .experience { padding-block:42px; }
  .section-heading { display:block; margin-bottom:24px; }
  .section-heading>p { margin-top:15px; font-size:12px; }
  .section-heading h2 { font-size:26px; }
  .feature-grid { grid-template-columns:1fr; gap:12px; }
  .feature { padding:22px 24px; }
  .feature h3 { font-size:18px; margin-top:13px; }
  .feature p { min-height:0; }
  .feature-label { margin-top:16px; }
  .download-section { grid-template-columns:1fr; padding-block:44px 48px; gap:24px; }
  .download-intro h2 { font-size:28px; }
  .download-intro h2 br { display:none; }
  .download-intro>p:last-child { font-size:13px; margin-top:12px; }
  .download-intro>p:last-child br { display:none; }
  .download-options { gap:12px; }
  .download-option { min-height:195px; padding:22px 18px 19px; }
  .download-option h3 { font-size:22px; }
  .download-option p { font-size:10px; }
  .option-link { font-size:12px; }
  .site-footer { padding-block:26px; }
  .footer-main { align-items:flex-start; gap:18px 20px; }
  .footer-main .brand { width:100%; }
  .contact-link { margin-left:0; font-size:11px; }
  .legal-links { width:100%; margin-left:0; gap:10px 16px; flex-wrap:wrap; }
  .footer-meta { font-size:10px; margin-top:22px; gap:12px; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 32px); }
  .brand { font-size:14px; }
  .brand img { width:26px; }
  .header-inner { gap:10px; }
  .header-inner>.button { padding-inline:8px; font-size:10px; }
  .menu-toggle { font-size:11px; }
  h1 { font-size:40px; }
  .hero-actions .button { padding-inline:11px; gap:8px; font-size:12px; }
  .button-platform { font-size:16px; }
  .button-android .button-platform { width:22px; height:22px; }
  .section-heading h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.download-option { transition:none; } }

/* Carry the original Android product copy and complete screenshot set into the PC layout. */
.feature .feature-copy { margin-top:12px; }
.feature .feature-copy p { min-height:0; margin-top:10px; }
.feature .feature-copy p:first-child { margin-top:0; }
.android-overview { padding-block:68px 12px; }
.android-overview .section-heading { align-items:center; margin-bottom:22px; }
.android-overview h2 { margin-top:12px; font-size:28px; }
.text-link { color:var(--purple); font-size:13px; line-height:1.8; }
.text-link:hover { text-decoration:underline; }
.android-tags { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 24px; }
.android-tags li { padding:6px 12px; border-radius:6px; color:var(--purple); background:#f3f0ff; font-size:12px; }
.android-screenshots { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 18px; }
.android-screenshots figure { flex:0 0 calc((100% - 72px) / 5); scroll-snap-align:start; min-width:0; }
.android-screenshots img { width:100%; border-radius:12px; border:1px solid var(--line); }
.android-app-details { margin-top:22px; padding:25px 28px; border:1px solid var(--line); border-radius:14px; }
.android-app-details h3 { font-size:18px; margin-bottom:12px; }
.android-app-details p { color:var(--muted); font-size:14px; line-height:1.95; margin-top:8px; }
.android-app-details .text-link { display:inline-block; margin-top:16px; }
@media(max-width:760px) {
  .android-overview { padding-block:38px 0; }
  .android-overview .section-heading { display:block; }
  .android-overview h2 { font-size:24px; }
  .android-overview .section-heading .text-link { display:inline-block; margin-top:14px; }
  .android-screenshots figure { flex-basis:46%; }
  .android-screenshots { gap:12px; }
  .android-app-details { padding:22px; }
}
