:root {
  --ink: #13281b;
  --muted: #66786c;
  --dim: #87968d;
  --night: #f7fbf8;
  --panel: #ffffff;
  --line: rgba(11, 103, 56, 0.14);
  --blue: #17894c;
  --blue-bright: #08783a;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

svg {
  display: block;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(11, 103, 56, 0.12);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #123d25;
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.brand-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #17894c;
}

.brand-icons svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.brand-icons .brand-tap {
  width: 32px;
  height: 32px;
  transform: rotate(90deg);
}

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 88px;
  background:
    radial-gradient(circle at 72% 25%, rgba(23, 137, 76, 0.14), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(11, 103, 56, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 103, 56, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero-glow {
  position: absolute;
  top: 12%;
  left: -10%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(23, 137, 76, 0.1);
  filter: blur(80px);
}

.hero-inner {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.85fr);
  gap: 70px;
  padding-block: 44px 52px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #187f49;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 20px;
  height: 2px;
  background: var(--blue-bright);
}

.hero h1 {
  max-width: 700px;
  margin: 24px 0 0;
  font-size: clamp(56px, 6.2vw, 91px);
  font-weight: 800;
  letter-spacing: -0.067em;
  line-height: 0.97;
}

.hero h1 em {
  color: var(--blue-bright);
  font-style: normal;
}

.hero-lede {
  max-width: 580px;
  margin: 30px 0 0;
  color: #5e7165;
  font-size: 18px;
  line-height: 1.7;
}

.runner-note {
  display: block;
  margin-top: 12px;
}

/*
  Store badges are deliberately not drawn here. When the listings go live, the
  official Apple and Google badge artwork replaces .store-status; it must be
  used unmodified, so give it its own rule rather than restyling these.
*/
.store-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 32px;
}

.store-status-line {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
}

.store-status-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  border-radius: 999px;
  background: var(--blue);
  padding: 0 22px;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(18, 61, 37, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.store-status-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(18, 61, 37, 0.25);
}

/*
  The phone is in flow, so the stage is exactly as tall as the phone and can
  never be clipped by the section below it. The block padding leaves room for
  the corners the 2.2deg rotation pushes past the layout box.
*/
.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(520px, 100%);
  margin-inline: auto;
  padding-block: 10px;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(23, 137, 76, 0.18);
  border-radius: 50%;
}

.orbit-one {
  top: 1%;
  right: -10%;
  width: 540px;
  height: 540px;
}

.orbit-two {
  top: 13%;
  right: 0;
  width: 410px;
  height: 410px;
}

/*
  content-box so the aspect ratio describes the screen rather than the screen
  plus the bezel; with the global border-box the two drift apart and the
  screenshot gets letterboxed inside the frame.
*/
.phone {
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  width: 278px;
  aspect-ratio: 1320 / 2868;
  overflow: hidden;
  transform: rotate(2.2deg);
  border: 7px solid #1b3325;
  border-radius: 48px;
  background: #f9fcfa;
  box-shadow:
    0 42px 90px rgba(26, 72, 44, 0.24),
    0 0 0 2px #0a2315,
    0 0 70px rgba(23, 137, 76, 0.14);
}

.phone-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding-block: clamp(72px, 9vw, 118px);
}

.showcase-heading {
  max-width: 720px;
}

.showcase-heading h2 {
  margin: 22px 0 0;
  color: var(--ink);
  font-size: clamp(38px, 5vw, 66px);
  letter-spacing: -.055em;
  line-height: 1;
}

.showcase-heading > p:last-child {
  max-width: 610px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.shot-row {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.shot {
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(11, 103, 56, .15);
  border-radius: 28px;
  box-shadow: 0 22px 55px rgba(18, 61, 37, .13);
}

.shot figcaption {
  margin-top: 16px;
  color: #3f5848;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.race-ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: #edf7f0;
  white-space: nowrap;
}

.race-ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 24px;
  padding: 19px 0;
  animation: ticker 140s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.ticker-item > span {
  color: #4f6a58;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ticker-item > i {
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

@media (max-width: 1000px) {
  .hero-inner {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: 72px 56px;
    text-align: center;
  }

  .hero-copy {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .shot-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  .shell {
    width: min(100% - 30px, 1180px);
  }

  .hero-inner {
    padding-block: 64px 52px;
  }

  .hero h1 {
    font-size: clamp(48px, 14vw, 68px);
  }

  .hero-lede {
    font-size: 16px;
  }

  .phone {
    width: 254px;
  }

  .showcase-heading {
    text-align: center;
  }

  .showcase-heading .eyebrow {
    justify-content: center;
  }

  .shot-row {
    gap: 28px 14px;
  }

  .shot img {
    border-radius: 20px;
  }

}

@media (max-width: 390px) {
  .brand span {
    font-size: 23px;
  }

  .brand {
    gap: 8px;
  }

  .brand-icons svg {
    width: 29px;
    height: 29px;
  }

  .brand-icons .brand-tap {
    width: 27px;
    height: 27px;
  }

  .phone {
    width: 220px;
  }

  .store-status {
    width: 100%;
  }

  .store-status-link {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--muted);
  font-size: .875rem;
}

.footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem 1.25rem;
}

/* Apple and Google both require these credit lines wherever their marks appear. */
.footer-legal {
  margin: 0 0 1.5rem;
  color: var(--dim);
  font-size: .75rem;
  line-height: 1.6;
}

.footer-inner a,
.document a {
  color: var(--blue-bright);
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

.document {
  width: min(100% - 2rem, 760px);
  min-height: calc(100vh - 154px);
  margin: 0 auto;
  padding: calc(88px + clamp(2.5rem, 7vw, 5rem)) 0 clamp(2.5rem, 7vw, 5rem);
}

.document h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.document .effective {
  margin: .75rem 0 2rem;
  color: var(--muted);
  font-size: .875rem;
}

.document .intro {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.document section {
  margin-top: 2rem;
}

.document h2 {
  margin: 0 0 .5rem;
  color: var(--ink);
  font-size: 1.15rem;
}

.document p,
.document li {
  color: var(--muted);
  line-height: 1.75;
}

.document ul,
.document ol {
  padding-left: 1.25rem;
}

.document .primary-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: var(--blue);
  padding: .75rem 1.25rem;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 680px) {
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-inner nav {
    justify-content: flex-start;
  }
}