:root {
  /* From AppColors.swift + monochrome steps for the light site */
  --app-bg: #141414;
  --app-card: #202020;
  --app-white: #ffffff;
  --app-secondary: #d9d9d9;
  --app-grid: #2d2d2d;

  --background: #ececec;
  --ink: #141414;
  --accent: #141414;
  --muted: #757575;
  --light-dot: #b8b8b8;
  --shadow: #c4c4c4;
  --rule: #b8b8b8;
}

* { 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: visible; 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: 500; 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; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity; }
.visual-one { opacity: 1; }
.visual-two { opacity: 0; transition: opacity 416ms ease-in-out; }
.visual-two.is-visible { opacity: 1; }

.pricing {
  width: 100%;
  padding: 10.1781vw 9.1603vw 0;
  text-align: center;
}

.pricing-pill {
  margin-bottom: 5.3435vw;
}

.price-card {
  width: 91%;
  min-height: 28vw;
  margin: 0 auto;
  padding: 5.0891vw 4.0712vw 3.2vw;
  border-radius: 8.1425vw;
  background: var(--background);
  box-shadow: 0.4vw 0.5vw 2.4vw rgba(20, 20, 20, 0.22), 0 0.2vw 0.8vw rgba(20, 20, 20, 0.1);
}

.price {
  margin: 0;
  color: var(--ink);
  font-size: 8.6vw;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.currency {
  position: relative;
  top: -0.093em;
  left: -0.04em;
  margin-right: 0.02em;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 0.8em;
}

.price-note {
  margin: 1.8vw 0 0;
  color: var(--ink);
  font-size: 4vw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.price-note span {
  position: relative;
  display: inline-block;
}

.price-note span::after {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: -0.8906vw;
  width: 100%;
  height: 0.5089vw;
  background: var(--accent);
  content: "";
}

.log-slip {
  width: 100%;
  padding: 10.1781vw 0 0;
  text-align: center;
}

.log-slip-pill {
  margin-bottom: 5.3435vw;
}

.log-slip-visual {
  display: block;
  width: 76.3359vw;
  max-width: none;
  height: auto;
  margin: 0 auto;
  user-select: none;
}

.cta { width: 78.6%; margin: 5vw auto 0; padding: 6vw 0 16vw; text-align: center; }
.cta h2 { margin: 0; color: var(--ink); font-size: 6.03vw; font-weight: 700; letter-spacing: 0; line-height: 1.18; }
.cta-subhead { margin: 4.1vw 0 0; color: var(--muted); font-size: 3.7vw; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.cta-badge { margin-top: 7.4vw; }
.mobile-legal { display: flex; align-items: center; justify-content: center; gap: 5.1vw; padding: 0 0 13vw; }
.mobile-legal button, .mobile-legal a { margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font-family: inherit; font-size: 3.4vw; font-weight: 450; line-height: 1; cursor: pointer; }