:root {
  --background: #F3F1EC;
  --ink: #171717;
  --muted: #8A8781;
  --accent: #FF6A00;
  --light-dot: #D9D7D1;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--muted); font-family: "Inter"; }
a { color: inherit; text-decoration: none; }
.mobile-page { min-height: 100vh; overflow: hidden; background: var(--background); }
.desktop-page { display: none; }
.hero { display: flex; min-height: 100vh; flex-direction: column; align-items: center; padding-top: 10.687vw; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 2.42vw; min-width: 42.2392vw; height: 7.25vw; margin: 0 0 4.3257vw; padding: 0 3.75vw; border: .4vw solid var(--ink); border-radius: 254.1985vw; color: var(--ink); font-size: 3.3vw; font-weight: 440; line-height: 1; white-space: nowrap; }
.eyebrow-dot { width: 1.35vw; height: 1.35vw; flex: 0 0 auto; border-radius: 50%; background: var(--ink); }
h1 { position: relative; z-index: 1; width: 100%; margin: 0; color: var(--ink); font-size: 8.4vw; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
h1 > span, .subhead > span { display: block; }
.clear-word { position: relative; display: inline-block; }
.clear-word::after { position: absolute; z-index: -1; left: -1%; bottom: -.45vw; width: 102%; height: 1.6vw; background: var(--accent); content: ""; }
.subhead { margin: 6.2vw 0 0; color: var(--muted); font-size: 3.7vw; font-weight: 400; letter-spacing: 0; line-height: 1.19; }
.app-store-badge { display: block; width: 38.3461vw; height: 11.4758vw; margin-top: 6.2vw; overflow: hidden; margin-right: auto; margin-left: auto; }
.app-store-badge img { display: block; width: 100%; height: 100%; object-fit: fill; }
.hero-device { position: relative; width: 76.3359vw; aspect-ratio: 1061 / 2170; margin-top: 6.2vw; user-select: none; }
.hero-visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transition: opacity 450ms ease-in-out; }
.visual-one { animation: mobileVisualOne 3.2s ease-in-out infinite; }
.visual-two { animation: mobileVisualTwo 3.2s ease-in-out infinite; }
@keyframes mobileVisualOne { 0%, 38% { opacity: 1; } 48%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mobileVisualTwo { 0%, 38% { opacity: 0; } 48%, 88% { opacity: 1; } 100% { opacity: 0; } }
.widgets { width: 100%; padding: 10.1781vw 10.7vw 0; text-align: center; }
.widgets-pill { margin-bottom: 5.3435vw; }
.widget-card { width: 100%; }
.widget-card + .widget-card { margin-top: 7vw; }
.widget-card img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 1.2vw rgba(0, 0, 0, .24)); }
.cta { width: 100%; padding: 10.1781vw 0 12vw; text-align: center; }
.cta h2 { position: relative; z-index: 1; margin: 0; color: var(--ink); font-size: 6.85vw; font-weight: 700; letter-spacing: 0; line-height: 1.2143; }
.cta h2 > span, .cta-subhead > span { display: block; }
.cta-clear-word { position: relative; display: inline-block; }
.cta-clear-word::after { position: absolute; z-index: -1; left: 0; bottom: -1.3995vw; width: 100%; height: 1.2723vw; background: var(--accent); content: ""; }
.cta-subhead { margin: 5.0891vw 0 0; color: var(--muted); font-size: 3.7vw; font-weight: 500; letter-spacing: 0; line-height: 1.19; }
.cta-badge { margin-top: 6.1069vw; }
@media (prefers-reduced-motion: reduce) { .visual-one { animation: none; } .visual-two { display: none; } }