@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #090b10;
  --body: #374151;
  --muted: #6b7280;
  --accent: #30ba70;
  --accent-ink: #161a24;
  --accent-deep: #1f9a59;
  --page: #ffffff;
  --soft: #f7f8f9;
  --box: #f1f3f5;
  --line: #d1d5db;

  --shell: calc(1180px + 2 * var(--gutter));
  --radius: 24px;
  --radius-pill: 33px;

  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
}

html { overflow-x: clip; }
body { font: 400 17px/1.55 var(--sans); }

h1, h2, h3, h4 { letter-spacing: 0; }
h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.875rem);
  font-weight: 400;
  line-height: 1.29;
}
h1 strong { font-weight: 700; color: inherit; }
h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.483;
  margin-bottom: .3em;
}
h3 {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
h4 { font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.25rem; }
.lede { font-size: 1.125rem; line-height: 1.28; color: var(--body); }
.muted { color: var(--muted); }

a { color: var(--accent-deep); text-underline-offset: 2px; }

.btn {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  padding: .875rem 1.5rem;
  line-height: 1.3;
}
.btn:hover { box-shadow: 0 10px 24px rgba(48, 186, 112, .32); }
.btn--ghost { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); color: var(--page); }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }

.nav { padding: 1.5rem 0 0; }
.nav__brand { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; }
.nav__brand--icon img { height: 36px; border-radius: 9px; }
.nav__links { gap: calc(33px - 1.6rem); }
.nav__links a {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  padding: .5rem .8rem;
}
.nav__links a.is-cta { padding: .875rem 1.5rem; font-size: 1.0625rem; margin-left: .8rem; }

.card { padding: 1.5rem; }
.card h3 { margin-bottom: .75rem; }
.card p { font-size: 1rem; line-height: 1.31; }

.cards { gap: 17px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.section-head { max-width: 600px; }
.section-head p { margin-bottom: 0; }
.section-head--centred { margin: 0 auto; text-align: center; }

.device {
  position: relative;
  width: 100%;
}
.device img.device__bezel { width: 100%; }
.device { isolation: isolate; }
.device img.device__shadow {
  position: absolute;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}
.device img.device__shadow--1 {
  left: var(--sh1-left);
  top: var(--sh1-top);
  width: var(--sh1-width);
  height: var(--sh1-height);
  opacity: var(--sh1-opacity);
}
.device img.device__shadow--2 {
  left: var(--sh2-left);
  top: var(--sh2-top);
  width: var(--sh2-width);
  height: var(--sh2-height);
  opacity: var(--sh2-opacity);
}
.device img.device__frame {
  position: absolute;
  inset: 0;
  width: 100%;
}
.device__screen {
  position: absolute;
  left: var(--ap-left);
  top: var(--ap-top);
  width: var(--ap-width);
  height: var(--ap-height);
  border-radius: var(--ap-radius, 0);
  overflow: hidden;
  background: #000;
}
.device__screen img {
  position: absolute;
  left: var(--shot-left);
  top: var(--shot-top);
  width: var(--shot-width);
  height: var(--shot-height);
  object-fit: cover;
  object-position: top center;
}

.device--phone {
  aspect-ratio: var(--dev-phone-ratio);
  --sh1-left: var(--dev-phone-shade1-left);
  --sh1-top: var(--dev-phone-shade1-top);
  --sh1-width: var(--dev-phone-shade1-width);
  --sh1-height: var(--dev-phone-shade1-height);
  --sh1-opacity: var(--dev-phone-shade1-opacity);
  --sh2-left: var(--dev-phone-shade2-left);
  --sh2-top: var(--dev-phone-shade2-top);
  --sh2-width: var(--dev-phone-shade2-width);
  --sh2-height: var(--dev-phone-shade2-height);
  --sh2-opacity: var(--dev-phone-shade2-opacity);
  --ap-left: var(--dev-phone-left);
  --ap-top: var(--dev-phone-top);
  --ap-width: var(--dev-phone-width);
  --ap-height: var(--dev-phone-height);
  --ap-radius: var(--dev-phone-radius);
  --shot-left: var(--dev-phone-shot-left);
  --shot-top: var(--dev-phone-shot-top);
  --shot-width: var(--dev-phone-shot-width);
  --shot-height: var(--dev-phone-shot-height);
}
.device--watch {
  aspect-ratio: var(--dev-watch-ratio);
  --ap-left: var(--dev-watch-left);
  --ap-top: var(--dev-watch-top);
  --ap-width: var(--dev-watch-width);
  --ap-height: var(--dev-watch-height);
  --ap-radius: var(--dev-watch-radius);
  --shot-left: var(--dev-watch-shot-left);
  --shot-top: var(--dev-watch-shot-top);
  --shot-width: var(--dev-watch-shot-width);
  --shot-height: var(--dev-watch-shot-height);
}
.device--car {
  aspect-ratio: var(--dev-car-ratio);
  --ap-left: var(--dev-car-left);
  --ap-top: var(--dev-car-top);
  --ap-width: var(--dev-car-width);
  --ap-height: var(--dev-car-height);
  --shot-left: var(--dev-car-shot-left);
  --shot-top: var(--dev-car-shot-top);
  --shot-width: var(--dev-car-shot-width);
  --shot-height: var(--dev-car-shot-height);
}
.device--car .device__bezel { position: relative; z-index: 1; }
.device--car .device__screen {
  left: calc(var(--dev-car-left) - 1px);
  top: calc(var(--dev-car-top) - 1px);
  width: calc(var(--dev-car-width) + 2px);
  height: calc(var(--dev-car-height) + 2px);
}
.device--car .device__screen img { object-position: left top; }

.hero { padding: clamp(2rem, 7.9vw, 7.1rem) 0 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 50.847% 38.257%;
  justify-content: space-between;
  align-items: start;
}
.hero__text { padding-top: clamp(0rem, 4.6vw, 4.125rem); }
.hero__text h1 { width: 115%; max-width: none; margin-bottom: .52em; }
.hero__text h1 span, .hero__text h1 strong { display: block; text-wrap: balance; }
.hero__text .lede { max-width: 600px; margin-bottom: 3.5rem; }
.hero__stroke {
  width: var(--stroke-hero-width);
  max-width: none;
  margin: 3.9rem 0 0 var(--stroke-hero-left);
}

.phones {
  position: relative;
  width: 119.46%;
  aspect-ratio: var(--hero-ratio);
}
.phones .device { position: absolute; }
.phones { isolation: isolate; }
.phones .device--back {
  left: var(--hero-back-left);
  top: var(--hero-back-top);
  width: var(--hero-back-width);
  z-index: var(--hero-back-z);
}
.phones .device--front {
  left: var(--hero-front-left);
  top: var(--hero-front-top);
  width: var(--hero-front-width);
  z-index: var(--hero-front-z);
}

.updates { padding-top: clamp(3rem, 6vw, 5.5rem); }
.updates__rule {
  max-width: 878px;
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--line);
}
.updates__clip {
  --clip: 292px;
  --fade: 99px;
  position: relative;
  max-width: 777px;
  margin: 0 auto;
  max-height: var(--clip);
  overflow: hidden;
}
.updates__clip::after {
  content: '';
  position: absolute;
  top: calc(var(--clip) - var(--fade));
  left: 0;
  right: 0;
  height: var(--fade);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--page));
  pointer-events: none;
}
.updates__rel {
  display: grid;
  grid-template-columns: 137px minmax(0, 600px);
  gap: 40px;
  padding-top: 2.5rem;
}
.updates__rel h3 { font-size: 1.375rem; margin: 0 0 .5rem; }
.updates__body p { margin: 0 0 .75rem; line-height: 1.18; }
.updates__rel time { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.33; }
.updates__rel ul { margin: 0; padding: 0; list-style: none; }
.updates__rel li {
  position: relative;
  padding-left: 38px;
  margin-bottom: .75rem;
  line-height: 1.18;
}
.updates__rel li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--body);
}
.updates__more { display: flex; justify-content: center; margin-top: .5rem; }
.updates__stroke {
  display: block;
  width: var(--stroke-updates-width);
  max-width: none;
  margin: 3.25rem 0 0 var(--stroke-updates-left);
}

.does { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.does .cards { margin-top: 2rem; }

.showcase {
  position: relative;
  padding: 0;
}
.showcase__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sc-ratio);
  clip-path: inset(-2000px 0);
  isolation: isolate;
}
.showcase__stroke {
  position: absolute;
  left: var(--sc-stroke-left);
  top: var(--sc-stroke-top);
  width: var(--sc-stroke-width);
  max-width: none;
  z-index: var(--sc-stroke-z);
}
.showcase .device { position: absolute; }
.showcase .device--phone {
  left: var(--sc-phone-left);
  top: var(--sc-phone-top);
  width: var(--sc-phone-width);
  z-index: var(--sc-phone-z);
}
.showcase .device--watch {
  left: var(--sc-watch-left);
  top: var(--sc-watch-top);
  width: var(--sc-watch-width);
  z-index: var(--sc-watch-z);
}
.showcase .device--car {
  left: var(--sc-car-left);
  top: var(--sc-car-top);
  width: var(--sc-car-width);
  z-index: var(--sc-car-z);
}

.getting { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.getting .btn-row { margin-top: 1.5rem; }
.getting .cards { margin-top: 2.8rem; }

.foot { background: var(--soft); }
.foot__col a:hover { color: var(--accent-deep); }
.foot__mark p a { display: inline; }

@media (max-width: 767px) {
  .nav__links { gap: .15rem; }
  .nav__links a, .nav__links a.is-cta { padding: .8rem 1rem; }
  .nav__links a.is-cta { margin-top: .35rem; text-align: center; }
}

@media (min-width: 1440px) {
  .showcase__canvas { aspect-ratio: auto; height: var(--sc-h); }
  .showcase__stroke {
    left: calc(50% - var(--sc-w) / 2 + var(--sc-stroke-x));
    width: var(--sc-stroke-w);
    height: var(--sc-stroke-h);
  }
  .showcase .device--phone {
    left: calc(50% - var(--sc-w) / 2 + var(--sc-phone-x));
    width: var(--sc-phone-w);
  }
  .showcase .device--watch {
    left: calc(50% - var(--sc-w) / 2 + var(--sc-watch-x));
    width: var(--sc-watch-w);
  }
  .showcase .device--car {
    left: calc(50% - var(--sc-w) / 2 + var(--sc-car-x));
    width: var(--sc-car-w);
  }
}

@media (max-width: 1400px) {
  .phones { width: 100%; }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero__text { padding-top: 0; }
  .hero__text h1 { width: 100%; max-width: none; }
  .hero__text .lede { margin-bottom: 2rem; }
  .hero__stroke { width: 100%; margin: 2rem 0 0; }
  .phones { max-width: 460px; }
  .updates__rel { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .updates__clip { --clip: 320px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  .lede { font-size: 1.125rem; }

  .nav { padding: 1.125rem 0 0; }
  .nav__brand { font-size: 1.25rem; }
  .nav__brand--icon img { height: 36px; }

  .hero { padding-top: 2.0625rem; }
  .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__text { order: 2; margin-top: 1.5rem; }
  .hero__text h1 { margin-bottom: 1.25rem; }
  .hero__text .lede { margin-bottom: 2.5rem; }
  .hero__stroke {
    width: var(--stroke-m-hero-width);
    margin: 4.375rem 0 -2.35rem var(--stroke-m-hero-left);
  }

  .phones {
    order: 1;
    width: 111.5%;
    margin-left: .55%;
    aspect-ratio: var(--m-hero-ratio);
  }
  .phones .device--back {
    left: var(--m-hero-back-left);
    top: var(--m-hero-back-top);
    width: var(--m-hero-back-width);
    z-index: var(--m-hero-back-z);
  }
  .phones .device--front {
    left: var(--m-hero-front-left);
    top: var(--m-hero-front-top);
    width: var(--m-hero-front-width);
    z-index: var(--m-hero-front-z);
  }

  .updates { padding-top: 0; }
  .updates__rule { max-width: none; margin-top: 1.3125rem; }
  .updates__clip { max-width: none; max-height: none; overflow: visible; }
  .updates__clip::after { content: none; }
  .updates__rel { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 2rem; }
  .updates__rel li { padding-left: 38px; }
  .updates__rel li::before { left: 12px; }
  .updates__more { margin-top: 2.25rem; }
  .updates__stroke {
    width: var(--stroke-m-updates-width);
    margin: 3.3125rem 0 0 var(--stroke-m-updates-left);
  }

  .does { padding-top: 5.75rem; }
  .does .cards { margin-top: 2.0625rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 20px 16px; }
  .card p { font-size: .9375rem; line-height: 1.333; }
  .section-head { max-width: none; }

  .showcase { margin-top: 2.4375rem; }
  .showcase__canvas { aspect-ratio: var(--m-sc-ratio); }
  .showcase__stroke {
    left: var(--m-sc-stroke-left);
    top: var(--m-sc-stroke-top);
    width: var(--m-sc-stroke-width);
    height: var(--m-sc-stroke-height);
    z-index: var(--m-sc-stroke-z);
  }
  .showcase .device--phone {
    left: var(--m-sc-phone-left);
    top: var(--m-sc-phone-top);
    width: var(--m-sc-phone-width);
    z-index: var(--m-sc-phone-z);
  }
  .showcase .device--watch {
    left: var(--m-sc-watch-left);
    top: var(--m-sc-watch-top);
    width: var(--m-sc-watch-width);
    z-index: var(--m-sc-watch-z);
  }
  .showcase .device--car {
    left: var(--m-sc-car-left);
    top: var(--m-sc-car-top);
    width: var(--m-sc-car-width);
    z-index: var(--m-sc-car-z);
  }

  .getting { padding-top: 4.375rem; }
  .getting .btn-row { margin-top: 1.5rem; }
  .getting .cards { margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .getting .card { padding: 20px; }
  .getting .card p { font-size: 1rem; }

  .foot { margin-top: 3.5rem; }
}

@media (max-width: 767px) {
  .nav__links { gap: .15rem; }
  .nav__links a, .nav__links a.is-cta { padding: .8rem 1rem; }
  .nav__links a.is-cta { margin-top: .35rem; margin-left: 0; text-align: center; }
}