.mobile-page { --mobile-blue: #006aff; --mobile-ink: #071f62; background: #fff; color: #52648d; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.45; }
.mobile-page * { box-sizing: border-box; }
.mobile-container { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.mobile-page h1, .mobile-page h2 { color: var(--mobile-ink); font-weight: 700; letter-spacing: -.8px; }
.mobile-page p { color: inherit; margin: 0 0 22px; }
.mobile-hero { background: radial-gradient(ellipse at 66% 50%, #e9f4ff, #f5faff 65%, #f2f9ff); }
.mobile-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 20px; padding-block: 30px; }
.mobile-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid #c9e1ff; background: #eff7ff; border-radius: 25px; color: var(--mobile-blue); font-size: 13px; font-weight: 600; }
.mobile-badge i { font-size: 19px; }
.mobile-page h1 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.04; margin: 18px 0 25px; letter-spacing: -1.6px; }
.mobile-page h1 span { color: var(--mobile-blue); }
.mobile-lead { font-size: 20px; line-height: 1.35; max-width: 540px; }
.mobile-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 28px 0 36px; }
.mobile-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 35px; border: 1px solid var(--mobile-blue); border-radius: 8px; font-size: 16px; font-weight: 700; }
.mobile-primary { color: white; background: var(--mobile-blue); }
.mobile-primary:hover { color: white; background: #0052cc; }
.mobile-outline { color: var(--mobile-blue); background: white; }
.mobile-outline:hover { color: #0052cc; background: #eaf3ff; }
.mobile-page a:focus-visible { outline: 3px solid #ffa900; outline-offset: 4px; }
.mobile-trust { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.mobile-trust li { display: flex; align-items: center; gap: 10px; }
.mobile-trust i { font-size: 25px; color: var(--mobile-blue); }
/* Product illustrations displayed from the supplied reference; page copy and links are HTML. */
.mobile-hero-art { aspect-ratio: 680 / 534; background: url('mobile-reference.png') no-repeat; background-size: 180.147% 240.449%; background-position: 100% 10.667%; }
.mobile-features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-block: 35px 50px; }
.mobile-features article { text-align: center; padding: 0 16px; border-right: 1px solid #eaf2fb; }
.mobile-features article:last-child { border: 0; }
.mobile-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; background: #eaf4ff; color: var(--mobile-blue); border-radius: 50%; font-size: 32px; margin-bottom: 10px; }
.mobile-features h2 { font-size: 18px; line-height: 1.15; min-height: 42px; margin: 0 0 10px; letter-spacing: -.5px; display: flex; align-items: center; justify-content: center; }
.mobile-features p { font-size: 14px; line-height: 1.4; margin: 0; }
.mobile-details { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 40px; padding-block: 10px 40px; align-items: center; }
.mobile-easy h2 { font-size: 34px; line-height: 1.15; margin: 0 0 18px; }
.mobile-easy h2 span { color: #009ee7; }
.mobile-checks { list-style: none; padding: 0; margin: 0; }
.mobile-checks li { position: relative; padding-left: 40px; margin: 16px 0; }
.mobile-checks li::before { content: '\2713'; position: absolute; left: 0; top: -2px; width: 27px; height: 27px; border-radius: 50%; background: var(--mobile-blue); color: #fff; text-align: center; line-height: 27px; font-weight: 700; }
.mobile-download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; border-radius: 15px; overflow: hidden; background: #edf6ff; scroll-margin-top: 100px; }
.mobile-notification-art { aspect-ratio: 285 / 370; align-self: stretch; background: url('mobile-reference.png') no-repeat; background-size: 429.825% 347.027%; background-position: 58.085% 95.842%; }
.mobile-download-copy { padding: 26px 20px 26px 8px; }
.mobile-download h2 { font-size: 25px; line-height: 1.2; margin: 0 0 16px; }
.mobile-download-copy p { font-size: 15px; }
.mobile-stores { display: flex; flex-wrap: wrap; gap: 9px; margin-block: 26px; }
.mobile-stores a { display: flex; align-items: center; gap: 8px; color: white; background: #000; border: 1px solid #888; border-radius: 5px; padding: 6px 10px; font-size: 19px; line-height: 1.1; }
.mobile-stores i { font-size: 28px; }
.mobile-stores small { display: block; font-size: 9px; }
.mobile-download-copy .mobile-download-note { font-style: italic; color: var(--mobile-ink); font-size: 17px; margin: 0; text-align: center; }
@media (max-width: 1100px) { .mobile-container { width: calc(100% - 48px); } .mobile-lead { font-size: 18px; } .mobile-trust { gap: 12px; } .mobile-details { gap: 24px; } .mobile-easy h2 { font-size: 29px; } .mobile-features article { padding-inline: 10px; } }
@media (max-width: 900px) { .mobile-hero-grid { grid-template-columns: 1fr; } .mobile-copy { max-width: 620px; } .mobile-hero-art { width: 100%; max-width: 650px; margin-inline: auto; } .mobile-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; } .mobile-features article:nth-child(3) { border: 0; } .mobile-details { grid-template-columns: 1fr; } .mobile-download { max-width: 700px; width: 100%; margin-inline: auto; } }
@media (max-width: 480px) { .mobile-container { width: calc(100% - 32px); } .mobile-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-features article:nth-child(3) { border-right: 1px solid #eaf2fb; } .mobile-features article:nth-child(even) { border: 0; } .mobile-button { padding-inline: 24px; } .mobile-download { grid-template-columns: 1fr; } .mobile-notification-art { width: 75%; margin-inline: auto; } .mobile-download-copy { padding: 24px; } .mobile-stores { justify-content: center; } }