@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@88..100,500..800&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

/* HeightUp site styles.
   ---------------------------------------------------------------------------
   The app is a measuring instrument, so the site is built like one: a
   stadiometer rail down the left gutter, mono numerals for anything that is a
   reading, and the app's own lime (#BCFF00) used only where a value is being
   reported. Everything else stays quiet.

   The palette is lifted straight from the app (StatureLab): #bcff00 lime, the
   #0d2020 -> #061414 screen gradient, #d2d3ce text, #96998c muted.
   --------------------------------------------------------------------------- */

:root {
  --ink: #04100f; /* page */
  --ink-2: #071817; /* alternate band */
  --slab: #0b1f1e; /* card */
  --slab-2: #102a28; /* raised element inside a card */
  --edge: #17332f; /* hairline */
  --edge-soft: rgba(255, 255, 255, 0.07);

  --lime: #bcff00;
  --sun: #e9eb36;

  --bone: #d2d3ce; /* body text */
  --chalk: #f2f4ec; /* headings */
  --ash: #96998c; /* muted */
  --dim: #7e8478; /* fine print */

  --max: 1180px;
  --r-card: 20px;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--lime);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 92;
  color: var(--chalk);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 20px;
  top: 12px;
  z-index: 60;
  background: var(--lime);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
}

/* A reading: any number the product reports back to you. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* The recurring micro-label. Mono, so it reads as instrument marking rather
   than as a heading. */
.tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.tag .k {
  color: var(--dim);
}

/* ============================================================== stadiometer */
/* The signature. A fixed measuring scale in the left gutter whose lime mark
   rises as the page is read. Decorative, hidden from assistive tech, and only
   shown where there is empty gutter to put it in. */

.rail {
  display: none;
}

/* Only shown once the gutter beside the 1180px column is wider than the rail,
   otherwise it would sit on top of the text. */
@media (min-width: 1380px) {
  .rail {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 88px;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    border-right: 1px solid var(--edge);
    background: linear-gradient(to right, rgba(188, 255, 0, 0.02), transparent);
  }
}

/* 1 cm minor ticks over a 140-200 cm scale, so 60 divisions per viewport. */
.rail-scale {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 14px;
  background: repeating-linear-gradient(
    to bottom,
    var(--edge) 0 1px,
    transparent 1px calc(100% / 60)
  );
}

.rail-major {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.rail-major::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--edge);
}

.rail-mark {
  position: absolute;
  right: 0;
  left: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.rail-mark::after {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(188, 255, 0, 0.55);
}

.rail-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--lime);
}

/* ================================================================== header */

header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(4, 16, 15, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--edge);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--chalk);
  font-family: var(--display);
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

nav.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.site-nav a {
  color: var(--ash);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}

nav.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--lime);
  transition: right 0.22s ease;
}

nav.site-nav a:hover {
  color: var(--chalk);
  text-decoration: none;
}

nav.site-nav a:hover::after {
  right: 0;
}

@media (max-width: 900px) {
  nav.site-nav {
    display: none;
  }
}

/* ================================================================= buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  min-height: 48px;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

.btn-primary:hover {
  background: #cbff3a;
}

.btn-ghost {
  border-color: var(--edge);
  color: var(--bone);
}

.btn-ghost:hover {
  border-color: var(--lime);
  color: var(--chalk);
}

/* The store CTA. Lime plate, apple glyph, two-line label. */
.btn-store {
  background: var(--lime);
  color: var(--ink);
  padding: 9px 26px 9px 22px;
  min-height: 58px;
  gap: 12px;
}

.btn-store:hover {
  background: #cbff3a;
  transform: translateY(-1px);
}

.btn-store svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.btn-store .lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.18;
}

.btn-store .small {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

.btn-store .big {
  font-family: var(--display);
  font-variation-settings: "wdth" 92;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Header variant: outline, so the lime stays reserved for the page itself. */
.btn-store-sm {
  min-height: 42px;
  padding: 8px 18px;
  gap: 8px;
  background: transparent;
  border-color: var(--edge);
  color: var(--bone);
  font-weight: 600;
  font-size: 0.9rem;
}

.btn-store-sm:hover {
  border-color: var(--lime);
  color: var(--chalk);
  background: rgba(188, 255, 0, 0.06);
  transform: none;
}

.btn-store-sm svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ============================================================== home hero */

.home-hero {
  position: relative;
  padding: 96px 0 84px;
  overflow: hidden;
}

/* Growth-chart rules behind the hero, in place of the usual gradient bloom. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--edge-soft) 0 1px,
    transparent 1px 84px
  );
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  pointer-events: none;
}

.home-hero > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--lime);
}

.home-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

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

.hero-sub {
  margin: 0 0 34px;
  max-width: 34rem;
  font-size: 1.12rem;
  color: var(--ash);
}

.hero-sub strong {
  color: var(--bone);
  font-weight: 600;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.cta-note {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ------------------------------------------------------------ hero device */

.hero-device {
  position: relative;
  justify-self: center;
  padding: 34px;
}

/* Corner ticks: the device is framed like a dimensioned drawing. */
.hero-device::before,
.hero-device::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.hero-device::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}

.hero-device::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}

/* ============================================================ device mock */

.device {
  position: relative;
  width: 268px;
  margin: 0 auto;
  border-radius: 42px;
  border: 1px solid #253c37;
  background: #010807;
  padding: 7px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 34px 70px rgba(0, 0, 0, 0.8),
    0 0 90px rgba(188, 255, 0, 0.07);
}

.scr {
  position: relative;
  border-radius: 36px;
  background: linear-gradient(to bottom, #0d2020, #061414);
  overflow: hidden;
  padding: 30px 16px 16px;
  height: 512px;
  text-align: left;
}

/* Dynamic Island. */
.scr::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 18px;
  background: #010807;
  border-radius: 999px;
  z-index: 4;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}

.app-brand img {
  width: 21px;
  height: 21px;
  border-radius: 6px;
}

.app-brand span {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}

.app-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(188, 255, 0, 0.1);
  color: var(--lime);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.625rem;
  font-weight: 600;
}

.app-streak svg {
  width: 10px;
  height: 10px;
}

.app-h {
  margin: 14px 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 92;
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: -0.03em;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  background: rgba(188, 255, 0, 0.1);
  color: var(--lime);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.625rem;
  font-weight: 600;
}

.app-pill svg {
  width: 10px;
  height: 10px;
  flex: none;
}

.app-sub {
  margin: 4px 0 0;
  font-size: 0.6875rem;
  color: var(--ash);
  line-height: 1.45;
}

/* Prediction ring, mirroring the app's outer hairline track + thick arc. */
.ring-wrap {
  position: relative;
  margin: 16px auto 0;
  width: 178px;
}

.ring {
  display: block;
  width: 178px;
  height: 178px;
}

.ring-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring-val .n {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.ring-val .l {
  font-size: 0.625rem;
  color: var(--ash);
}

.tiles {
  display: flex;
  align-items: stretch;
  margin-top: 4px;
}

.tile {
  flex: 1;
  text-align: center;
  padding: 0 4px;
}

.tile + .tile {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tile .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}

.tile .v {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--bone);
}

.tile .v.hi {
  color: var(--lime);
}

/* SurfaceCard, straight from the app: #141414 plus a hairline. */
.app-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 11px 13px;
}

.app-card .k {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bone);
}

.app-card .k small {
  display: block;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 400;
  margin-bottom: 2px;
}

.app-card svg {
  width: 14px;
  height: 14px;
  color: var(--lime);
  flex: none;
}

/* Floating tab bar. */
.tabbar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: rgba(20, 20, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tabbar i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 30px;
  border-radius: 999px;
  color: #8e8e93;
}

.tabbar i.on {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tabbar svg {
  width: 15px;
  height: 15px;
}

/* Chat bubbles. */
.bub {
  max-width: 86%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 0.6875rem;
  line-height: 1.5;
  margin-top: 8px;
}

.bub.ai {
  background: #0d2020;
  border: 1px solid #163030;
  color: var(--bone);
  border-bottom-left-radius: 4px;
}

.bub.me {
  margin-left: auto;
  background: var(--lime);
  color: #061414;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

/* A big reported figure inside a screen. */
.readout {
  text-align: center;
  padding: 24px 0 14px;
}

.readout .n {
  font-family: var(--mono);
  font-size: 1.9rem;
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.03em;
}

.readout .l {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Labelled progress line, used for nutrients. */
.line {
  margin-top: 12px;
}

.line .lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.6875rem;
  color: var(--ash);
}

.line .lab b {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--bone);
}

.bar {
  display: block; /* used on <span>, which is inline by default */
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 6px;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: 999px;
}

/* Seven-night sleep column chart. The dashed rule is the nightly target. */
.week {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 96px;
  margin-top: 22px;
  padding-top: 8px;
  border-top: 1px dashed rgba(188, 255, 0, 0.3);
}

.week i {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px 3px 0 0;
}

.week i.hit {
  background: var(--lime);
}

.week-days {
  display: flex;
  gap: 7px;
  margin-top: 7px;
}

.week-days span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--dim);
}

/* ============================================================ facts strip */

.facts {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--ink-2);
}

.facts .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fact {
  padding: 32px 32px 32px 0;
}

.fact + .fact {
  border-left: 1px solid var(--edge);
  padding-left: 32px;
}

.fact h3 {
  margin: 12px 0 5px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fact p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ash);
  line-height: 1.55;
}

/* ================================================================ sections */

.sec {
  padding: 104px 0;
}

.sec.alt {
  background: var(--ink-2);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.sec-head {
  max-width: 44rem;
  margin-bottom: 56px;
}

.sec-head .tag {
  display: block;
  margin-bottom: 16px;
}

.sec-head h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  line-height: 1.02;
}

.sec-head p {
  margin: 0;
  color: var(--ash);
  font-size: 1.05rem;
  max-width: 36rem;
}

/* =========================================================== feature bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.f-card {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  background: var(--slab);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 28px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.f-card:hover {
  border-color: #2b5049;
  background: #0d2422;
}

@media (min-width: 900px) {
  .f-1 {
    grid-column: span 7;
  }
  .f-2 {
    grid-column: span 5;
  }
  .f-3 {
    grid-column: span 5;
  }
  .f-4 {
    grid-column: span 7;
  }
  .f-5 {
    grid-column: span 6;
  }
  .f-6 {
    grid-column: span 6;
  }
}

.f-card h3 {
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 700;
}

.f-card p {
  margin: 0;
  color: var(--ash);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Every feature is labelled with what it reads, not with a decorative icon. */
.f-card .tag {
  display: block;
  margin-bottom: 22px;
  font-size: 0.625rem;
}

/* Visuals sit at the bottom so cards in a row line up on their baselines. */
.f-vis {
  margin-top: auto;
  padding-top: 26px;
}

.f-vis svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.f-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f-chat span {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.f-chat .q {
  align-self: flex-end;
  background: var(--lime);
  color: var(--ink);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

.f-chat .a {
  background: var(--slab-2);
  border: 1px solid var(--edge);
  color: var(--bone);
  border-bottom-left-radius: 4px;
}

/* Routine progress, above the move list. */
.f-timer {
  margin-bottom: 18px;
}

.f-card .f-timer .tag {
  margin-bottom: 9px;
}

.f-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.f-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--slab-2);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.8rem;
  color: var(--bone);
}

.f-steps span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lime);
}

.f-steps span.off {
  color: var(--dim);
}

.f-steps span.off::before {
  background: var(--edge);
}

/* ============================================================ app preview */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  align-items: start;
}

.shot {
  text-align: left;
}

/* The middle screen is the one to look at, so its device sits highest. Only
   the device moves: the captions stay on one line across all three. */
@media (min-width: 980px) {
  .shot:nth-child(2) .device {
    margin-top: -44px;
    margin-bottom: 44px;
  }
}

.shot h3 {
  margin: 28px 0 7px;
  font-size: 1.12rem;
  font-weight: 700;
}

.shot p {
  margin: 0;
  color: var(--ash);
  font-size: 0.92rem;
  line-height: 1.6;
}

.shot .tag {
  display: block;
  margin-bottom: 6px;
  font-size: 0.625rem;
}

/* ================================================================== steps */
/* A real sequence, so it is numbered and set as ticks on a single rule. */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.steps li {
  position: relative;
  padding: 34px 28px 0 0;
  border-top: 1px solid var(--edge);
}

.steps li + li {
  padding-left: 28px;
  border-left: 1px solid var(--edge);
}

.steps li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--lime);
}

.steps li + li::before {
  left: 28px;
}

.step-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--lime);
  letter-spacing: 0.1em;
}

.steps h3 {
  margin: 12px 0 8px;
  font-size: 1.14rem;
  font-weight: 700;
}

.steps p {
  margin: 0;
  color: var(--ash);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ================================================================ science */

.science {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.science h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  line-height: 1.05;
}

.science .tag {
  display: block;
  margin-bottom: 16px;
}

.science p {
  margin: 0 0 18px;
  color: var(--bone);
  font-size: 1.02rem;
}

.sources {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.sources li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 0.92rem;
  color: var(--bone);
}

.sources .tag {
  flex: none;
  width: 112px;
  font-size: 0.5625rem;
}

.disclaimer {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 2px solid var(--edge);
  font-size: 0.85rem;
  color: var(--dim);
  line-height: 1.7;
}

.disclaimer a {
  color: var(--ash);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================== final cta */

.final {
  position: relative;
  padding: 108px 0;
  border-top: 1px solid var(--edge);
  background: var(--ink-2);
  overflow: hidden;
}

/* The scale runs out at the top: the last mark on a doorframe is the tallest. */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--edge-soft) 0 1px,
    transparent 1px 22px
  );
  mask-image: radial-gradient(ellipse at 50% 100%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 100%,
    #000,
    transparent 72%
  );
  pointer-events: none;
}

.final .wrap {
  position: relative;
  text-align: center;
}

.final .tag {
  display: block;
  margin-bottom: 18px;
  color: var(--lime);
}

.final h2 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  line-height: 1;
}

.final p {
  color: var(--ash);
  margin: 0 auto 34px;
  max-width: 32rem;
  font-size: 1.05rem;
}

.final .cta-row {
  justify-content: center;
}

/* Beats `.final p`, which would otherwise size this like body copy. */
.final p.cta-note {
  text-align: center;
  max-width: none;
  margin: 18px 0 0;
  font-size: 0.6875rem;
  color: var(--dim);
}

/* ================================================================= footer */

footer.site {
  border-top: 1px solid var(--edge);
  padding: 48px 0 56px;
  color: var(--ash);
  font-size: 0.88rem;
}

footer.site .cols {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

footer.site nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

footer.site nav a {
  color: var(--ash);
}

footer.site nav a:hover {
  color: var(--chalk);
  text-decoration: none;
}

footer.site .fine {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
  font-size: 0.78rem;
  color: var(--dim);
  line-height: 1.7;
}

/* ==================================================== 404 + simple heroes */

.hero {
  padding: 92px 0 84px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  line-height: 1.04;
}

.lede {
  margin: 0 auto 32px;
  max-width: 34rem;
  color: var(--ash);
  font-size: 1.05rem;
}

.hero .cta-row {
  justify-content: center;
}

/* ============================================================ legal pages */

.legal {
  padding: 60px 0 88px;
}

.legal .wrap {
  max-width: 50rem;
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  margin: 0 0 10px;
  text-align: left;
}

.updated {
  color: var(--ash);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.summary {
  background: var(--slab);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 24px 26px;
  margin: 28px 0 40px;
}

.summary h2 {
  font-size: 1.02rem;
  margin: 0 0 10px;
  text-align: left;
}

.summary ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ash);
  font-size: 0.94rem;
}

.summary li + li {
  margin-top: 6px;
}

.legal h2 {
  font-size: 1.32rem;
  font-weight: 700;
  margin: 46px 0 10px;
  text-align: left;
  scroll-margin-top: 90px;
}

.legal h3 {
  font-size: 1.04rem;
  margin: 30px 0 8px;
  font-weight: 700;
}

.legal p,
.legal li {
  color: #c9ccc2;
  font-size: 0.99rem;
}

.legal ul,
.legal ol {
  padding-left: 22px;
}

.legal li + li {
  margin-top: 8px;
}

.legal strong {
  color: var(--chalk);
}

.todo {
  background: #4a2b00;
  color: #ffd48a;
  border: 1px dashed #a86b00;
  border-radius: 5px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: 0.9em;
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  margin: 20px 0;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.92rem;
}

th,
td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
  color: #c9ccc2;
}

th {
  background: var(--slab);
  color: var(--chalk);
  font-weight: 700;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: none;
}

.notice {
  background: var(--slab);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--lime);
  border-radius: var(--r-card);
  padding: 24px;
}

.notice h3 {
  margin-top: 0;
}

.notice p {
  color: var(--ash);
  font-size: 0.95rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

.contact-box {
  background: var(--slab);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 24px;
  margin-top: 28px;
}

.contact-box p:last-child {
  margin-bottom: 0;
}

/* ============================================================== responsive */

@media (max-width: 1040px) {
  .home-hero > .wrap {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
    justify-items: center;
  }

  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .home-hero .cta-row {
    justify-content: center;
  }

  .science {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps li:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }

  .steps li:nth-child(3)::before {
    left: 0;
  }

  .steps li:nth-child(n + 3) {
    margin-top: 34px;
  }
}

@media (max-width: 979px) {
  .shots {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 56px;
  }

  .shot {
    max-width: 320px;
    text-align: center;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .home-hero {
    padding: 62px 0 68px;
  }

  .sec {
    padding: 72px 0;
  }

  .final {
    padding: 78px 0;
  }

  .sec-head {
    margin-bottom: 40px;
  }

  .facts .wrap {
    grid-template-columns: 1fr;
  }

  .fact {
    padding: 26px 0;
  }

  .fact + .fact {
    border-left: none;
    border-top: 1px solid var(--edge);
    padding-left: 0;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .steps li,
  .steps li + li {
    padding: 26px 0 0;
    border-left: none;
    margin-top: 0;
  }

  .steps li + li {
    margin-top: 26px;
  }

  .steps li + li::before {
    left: 0;
  }

  .f-card {
    padding: 24px;
  }

  .cta-row .btn {
    width: 100%;
    max-width: 340px;
  }

  .hero-device {
    padding: 22px;
  }

  .sources li {
    flex-direction: column;
    gap: 4px;
  }

  .sources .tag {
    width: auto;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}