body {
  margin: 0;
  background: #0D0F14;
  color: #E8EAED;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

a {
  color: #26C8DF;
}

a:hover {
  color: #7FE4F2;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

h1,
h2,
p {
  margin: 0;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #E8EAED;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}

.brand:hover {
  color: #E8EAED;
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 15px;
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}

.hero-text {
  flex: 3 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.eyebrow {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9AA3AE;
}

h1 {
  font-size: 60px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  font-size: 20px;
  line-height: 1.5;
  color: #B9C0C9;
  max-width: 520px;
}

.install-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #161A21;
  border: 1px solid #2A303A;
  border-radius: 10px;
  padding: 8px 8px 8px 18px;
}

.install-box code {
  flex: 1 1 280px;
  min-width: 0;
  font-size: 15px;
  color: #E8EAED;
  overflow-wrap: anywhere;
}

.install-box button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: #26C8DF;
  color: #0D0F14;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.note {
  font-size: 14px;
  color: #9AA3AE;
}

.hero-gauge {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.hero-gauge svg {
  max-width: 100%;
  height: auto;
}

.runout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.runout-quote {
  font-size: 34px;
  line-height: 1.3;
  font-weight: 600;
  max-width: 860px;
  text-wrap: pretty;
}

.warn {
  color: #EA8300;
  font-size: 1.2em;
}

.runout-text {
  font-size: 18px;
  line-height: 1.5;
  color: #B9C0C9;
  max-width: 640px;
}

.shot-dashboard {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #222832;
  box-sizing: border-box;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 14px;
  background: #13171D;
  border: 1px solid #222832;
}

.card h2 {
  font-size: 20px;
}

.card p {
  color: #B9C0C9;
  line-height: 1.5;
}

.card code {
  color: #E8EAED;
}

.card img {
  display: block;
  max-width: 100%;
  height: auto;
}

.shot-menubar {
  width: 110px;
}

.card .shot-popover {
  width: 386px;
  max-width: min(240px, 100%);
  margin: 0 auto;
}

.setup {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.setup-text {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup h2 {
  font-size: 32px;
}

.setup-text p {
  font-size: 18px;
  line-height: 1.5;
  color: #B9C0C9;
}

.setup code {
  color: #E8EAED;
}

.setup-list {
  flex: 1 1 380px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: #B9C0C9;
}

.setup-list li {
  padding: 14px 18px;
  border-radius: 10px;
  background: #13171D;
}

.privacy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px;
  border-radius: 14px;
  border: 1px solid #2A3E52;
  background: #101820;
}

.privacy h2 {
  font-size: 32px;
  color: #64A8FF;
}

.privacy p {
  font-size: 18px;
  line-height: 1.5;
  color: #C9D1DA;
  max-width: 720px;
}

.install {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.install h2 {
  font-size: 40px;
}

.install code {
  font-size: 16px;
  padding: 16px 22px;
  border-radius: 10px;
  background: #161A21;
  border: 1px solid #2A303A;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  box-sizing: border-box;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0 48px;
  border-top: 1px solid #222832;
  font-size: 14px;
  color: #9AA3AE;
}

@property --p {
  syntax: "<integer>";
  inherits: true;
  initial-value: 100;
}

@property --sg-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 600px;
}

@property --disc {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --dx {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --dy {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.sg-rail,
.sg,
.intro,
.landing {
  display: none;
}

/* Scroll gauge: needs scroll timelines and allowed motion. Otherwise the page keeps the static hero gauge. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-padding-top: 88px;
    }

    /* The first screen holds only the gauge, big and full, at the center. */
    .intro {
      display: block;
      height: 68vh;
      margin-bottom: -120px;
    }

    .landing {
      display: block;
      height: 200px;
    }

    .hero-gauge {
      display: none;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 3;
      padding-bottom: 16px;
      background: #0D0F14;
    }

    .nav,
    .reveal {
      animation: d-fade linear both;
      animation-timeline: scroll(root);
      animation-range: 55vh 80vh;
    }

    .nav:focus-within,
    .reveal:focus-within {
      animation: none;
      opacity: 1;
    }

    /* Full viewport box, so cqw in the gauge keyframes is the viewport width without a classic scrollbar. */
    .sg-rail {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 2;
      container-type: size;
      pointer-events: none;
    }

    .sg {
      display: block;
      position: absolute;
      inset: 0;
      margin: auto;
      --dock-size: 110px;
      --dock-x: calc(50cqw - 39px - var(--dock-size) / 2);
      width: var(--sg-size);
      height: var(--sg-size);
      translate: var(--dx) var(--dy);
      animation: d-move linear both, d-land linear forwards, d-count linear both;
      animation-timeline: scroll(root), scroll(root), scroll(root);
      animation-range: 0 60vh, 90% 100%, normal;
    }

    .sg::before {
      content: "";
      position: absolute;
      inset: -14%;
      border-radius: 50%;
      background: rgba(13, 15, 20, 0.85);
      filter: blur(16px);
      opacity: var(--disc);
    }

    .sg svg {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }

    .sg-track,
    .brand-track {
      animation: d-health steps(1, end) both;
      animation-timeline: scroll(root);
    }

    .sg-fill,
    .brand-fill {
      animation: d-drain linear both, d-health steps(1, end) both;
      animation-timeline: scroll(root), scroll(root);
    }

    .sg-track {
      fill: none;
      stroke: #64A8FF;
      stroke-opacity: 0.18;
      stroke-width: 2.4;
      stroke-linecap: round;
    }

    .sg-fill {
      fill: none;
      stroke: #64A8FF;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 100 200;
    }

    .sg-label {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.4em;
      padding-top: 4%;
    }

    .sg-pct {
      font-family: ui-rounded, -apple-system, sans-serif;
      font-weight: 700;
      font-size: calc(var(--sg-size) * 0.19);
      line-height: 1;
      color: #E8EAED;
    }

    .sg-pct::after {
      counter-reset: pct var(--p);
      content: counter(pct) "%";
    }

    /* round() needs its own support test: an unsupported round() after var() substitution leaves the counter at 0. */
    @supports (counter-reset: pct round(1, 1)) {
      .sg-pct::after {
        counter-reset: pct round(var(--p), 1);
      }
    }

    .sg-sub {
      font-size: calc(var(--sg-size) * 0.066);
      color: #B9C0C9;
      opacity: calc(1 - var(--disc));
    }
  }
}

/* On the first scroll the gauge moves to the bottom right corner and shrinks, before the copy fades in.
   The corner is set with cqw (the width of .sg-rail, the viewport without the scrollbar), not vw, so a classic scrollbar does not push the disc off screen.
   The corner offset is 24px margin + half the dock size + 15px disc overhang (inset -14%). --dock-size and --dock-x are read on the element, so the phone breakpoint can set them.
   The keyframes animate --dx and --dy, not translate: Safari 27 did not paint a scroll-driven translate here, but it paints animated custom properties. */
@keyframes d-move {
  from {
    --sg-size: min(64vmin, 600px);
    --dx: 0px;
    --dy: 0px;
    --disc: 0;
  }

  to {
    --sg-size: var(--dock-size);
    --dx: var(--dock-x);
    --dy: calc(50vh - var(--dock-size) / 2 - 36px);
    --disc: 1;
  }
}

/* At the end of the page the gauge slides from the corner to the bottom center, over the landing pad. */
@keyframes d-land {
  from {
    --dx: var(--dock-x);
  }

  to {
    --dx: 0px;
  }
}

@keyframes d-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The number and the arc fall from 100 to 0 over the whole page, so 0% is the very end of the scroll. */
@keyframes d-count {
  from {
    --p: 100;
  }

  to {
    --p: 0;
  }
}

/* The arc is hidden at 0 so the round cap does not leave a dot. */
@keyframes d-drain {
  0% {
    stroke-dasharray: 100 200;
    stroke-opacity: 1;
  }

  98% {
    stroke-opacity: 1;
  }

  100% {
    stroke-dasharray: 0 200;
    stroke-opacity: 0;
  }
}

/* App health colors (Theme.swift), switched in steps like the app: healthy blue, short orange, critical red.
   The stops sit at 49.5% and 89.5% so they match the rounded percent label: 51 and above blue, 50 to 11 orange, 10 and below red.
   steps(1, end) holds each color until the next stop, so a mixed color never shows. */
@keyframes d-health {
  0% {
    stroke: #64A8FF;
  }

  49.5% {
    stroke: #FF9F0A;
  }

  89.5%, 100% {
    stroke: #FF6961;
  }
}

@media (max-width: 600px) {
  /* On phones the gauge stays centered and docks at the bottom center. */
  .sg {
    --dock-size: 76px;
    --dock-x: 0px;
  }

  .page {
    gap: 80px;
  }

  .hero {
    gap: 40px;
  }

  h1 {
    font-size: 40px;
  }

  .runout-quote {
    font-size: 24px;
  }

  .setup {
    gap: 32px;
  }

  .privacy {
    padding: 28px 24px;
  }

  .install h2 {
    font-size: 30px;
  }

  .install code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}