/* Overhuman components. Every value comes from tokens.css (generated from tokens.json). Classes are prefixed oh-. */
.oh-strip { display: flex; height: var(--strip-height); width: 100% }
.oh-strip > span { flex: 1 }
.oh-strip > span:nth-child(1) { background: var(--swim) }
.oh-strip > span:nth-child(2) { background: var(--bike) }
.oh-strip > span:nth-child(3) { background: var(--run) }
.oh-strip > span:nth-child(4) { background: var(--build) }
.oh-strip > span:nth-child(5) { background: var(--cream) }

.oh-eyebrow { font-family: var(--font-mono); font-size: 16px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-text) }

.oh-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .92; color: var(--ink); text-wrap: balance }
.oh-display em { font-style: normal; color: var(--saffron) }

.oh-tag { display: inline-block; font-family: var(--font-sans); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase;
  padding: var(--space-6) 14px; background: var(--ink); color: var(--ground); transform: rotate(-6deg); transform-origin: left center }
.oh-tag--small { font-size: 20px; transform: rotate(-4deg) }
.oh-tag--saffron { background: var(--saffron); color: var(--on-saffron) }
.oh-tag--neem { background: var(--neem); color: var(--on-neem) }
.oh-tag--turmeric { background: var(--turmeric); color: var(--on-turmeric) }

.oh-chip { display: inline-flex; align-items: center; gap: var(--space-12); padding: 14px 20px; border-radius: var(--radius-14);
  font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 600 }
.oh-chip--done { background: var(--neem-tint); color: var(--neem) }
.oh-chip--now { background: var(--saffron-tint); color: var(--saffron-text) }

.oh-button { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: var(--radius-pill); padding: 18px 32px;
  background: var(--saffron); color: var(--on-saffron); font-family: var(--font-sans); font-weight: 600; font-size: 18px; cursor: pointer }
.oh-button:focus-visible, .oh-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

.oh-block { position: relative; overflow: hidden; border-radius: var(--radius-28) }
.oh-block--saffron { background: var(--saffron) }
.oh-block--neem { background: var(--neem) }
.oh-block--turmeric { background: var(--turmeric) }
.oh-block--surface { background: var(--surface) }

.oh-stat { padding: 24px var(--space-28); border-radius: var(--radius-20); background: var(--ink); color: var(--ground) }
.oh-stat--bike { background: var(--bike); color: var(--on-saffron) }
.oh-stat--swim { background: var(--swim); color: var(--on-neem) }
.oh-stat--run { background: var(--run); color: var(--on-turmeric) }
.oh-stat__n { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .92; font-size: 64px }
.oh-stat__k { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 10px }

.oh-route { display: block; width: 100%; height: auto }
.oh-route .halo { fill: none; stroke: var(--turmeric); stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; opacity: .45 }
.oh-route .line { fill: none; stroke: var(--saffron); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round }

.oh-phone { border-radius: 64px; background: var(--device); padding: 13px; box-shadow: var(--shadow-device), inset 0 0 0 2px var(--device-edge) }
.oh-phone__screen { position: relative; height: 100%; border-radius: 52px; overflow: hidden; background: var(--surface); color: var(--ink) }

.oh-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--body) }
.oh-foot b { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -.01em; color: var(--ink) }