/* Not Yet — marketing site
   ---------------------------------------------------------------------------
   Colours are lifted from the app's own palette (Palette.swift) so the site and
   the screenshots on it agree: catabolic teal, fat-burning orange, anabolic
   indigo. The app is light-first, so this is too, with a dark scheme that
   follows the system rather than a toggle nobody asks for. */

:root {
  --ink:            #1b1614;
  --ink-soft:       #5c534e;
  --ink-faint:      #8b807a;
  --surface:        #ffffff;
  --bg:             #faf7f4;
  --bg-tint:        #f2ece6;
  --line:           rgba(27, 22, 20, 0.10);

  --orange:         #d96b0d;
  --orange-deep:    #ad5008;
  --teal:           #0d8fa8;
  --indigo:         #5957d6;
  --purple:         #943dc7;

  --shadow-card:    0 1px 2px rgba(27, 22, 20, .05), 0 8px 24px -12px rgba(27, 22, 20, .18);
  --shadow-device:  0 2px 6px rgba(27, 22, 20, .10), 0 40px 80px -32px rgba(27, 22, 20, .45);

  --radius:         20px;
  --measure:        62ch;
  --pad:            clamp(1.25rem, 5vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #f4efec;
    --ink-soft:     #b3a9a3;
    --ink-faint:    #8b807a;
    --surface:      #1d1917;
    --bg:           #12100f;
    --bg-tint:      #1a1614;
    --line:         rgba(244, 239, 236, 0.12);

    --orange:       #f08a2e;
    --orange-deep:  #d96b0d;
    --teal:         #3fc4dd;
    --indigo:       #7b79ee;
    --purple:       #c17ae8;

    --shadow-card:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-device:0 2px 6px rgba(0, 0, 0, .5), 0 40px 80px -32px rgba(0, 0, 0, .9);
  }
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               system-ui, sans-serif;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--bg);
  padding: .75rem 1rem;
  border-radius: 8px;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--pad);
  max-width: 1200px;
  margin-inline: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* The app icon in miniature: a fasting ring part-way round. */
.wordmark__mark {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 3px solid var(--orange);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(35deg);
}

.site-header nav {
  display: flex;
  gap: 1.5rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }

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

.hero {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem) var(--pad) clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: clamp(3rem, 7vw, 5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 9vw, 8rem);
  }
}

.eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 1.25rem;
}
@media (prefers-color-scheme: dark) {
  .eyebrow { color: var(--orange); }
}

h1 {
  font-size: clamp(2.75rem, 1.4rem + 5.6vw, 5rem);
  font-weight: 700;
  display: grid;
  gap: .1em;
}

/* The name is the punchline, so the question is set back and the answer leads. */
.hero__question {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: .52em;
  letter-spacing: -0.01em;
}

.hero__answer {
  background: linear-gradient(103deg, var(--orange) 0%, var(--purple) 52%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The descender on "y" clips against a background-clip box without this. */
  padding-bottom: .06em;
}

.lede {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-soft);
}

.cta { margin-top: 2.25rem; }

.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: .05rem;
  padding: .6rem 1.35rem;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  line-height: 1.15;
}
.badge__small { font-size: .6875rem; letter-spacing: .02em; opacity: .8; }
.badge__large { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }

.cta__note {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- device cluster */

.cluster {
  /* One dimension drives the whole arrangement: every device is sized and placed
     against `--w`, so the cluster scales as a unit instead of drifting apart. */
  --w: clamp(12rem, 21vw, 16.5rem);
  /* A phone screenshot is 1206x2622, so the frame is a shade over 2.2x its width. */
  --phone-h: calc(var(--w) * 2.23);
}

/* Sized against the viewport, not a container query. `.cluster` is a grid item sized by
   its own contents, so `container-type: inline-size` asked the browser to resolve a width
   that depends on the answer — a near-cycle whose outcome is not worth relying on. The
   viewport is the honest input: it is what this layout actually responds to. */
@media (max-width: 61.99rem) {
  .cluster { --w: min(11rem, 40vw); }
}

.cluster__stage {
  position: relative;
  margin-inline: auto;
  /* Twice the phone width leaves each one about half of itself visible in the
     cascade; any narrower and the ones behind become slivers. */
  width: calc(var(--w) * 2);
  max-width: 100%;
  height: calc(var(--phone-h) * 1.16);
  isolation: isolate;
}

/* A soft wash of the app's own zone colours, sitting behind the glass. */
.cluster__stage::before {
  content: "";
  position: absolute;
  inset: -10% -12% 4%;
  background:
    radial-gradient(38% 34% at 22% 26%, color-mix(in oklab, var(--orange) 40%, transparent), transparent 70%),
    radial-gradient(42% 38% at 80% 42%, color-mix(in oklab, var(--teal) 38%, transparent), transparent 72%),
    radial-gradient(38% 34% at 46% 84%, color-mix(in oklab, var(--indigo) 30%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: .5;
  z-index: -1;
}

.phone {
  position: absolute;
  width: var(--w);
  padding: 2.4%;
  border-radius: 15.5%/7%;
  background: linear-gradient(150deg, #3a3532, #131110 42%, #2b2725);
  box-shadow: var(--shadow-device);
  transform-origin: 50% 100%;
}

/* A hairline along the edge reads as the chamfer on the rail. */
.phone::after,
.watch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .18);
  pointer-events: none;
}

.phone__screen,
.watch__screen {
  overflow: hidden;
  border-radius: 13.5%/6.2%;
  background: #000;
}

.phone__screen img { width: 100%; }

/* Cascading left to right, each one further back, higher and turned a little more
   — so it reads as a pile of devices rather than a row of rectangles. Half of each
   frame stays visible, which is what makes the second and third readable at all. */
.phone--back  { left: 50%; top: 0;    transform: rotate(6deg)   scale(.88); z-index: 1; }
.phone--mid   { left: 26%; top: 5.5%; transform: rotate(3deg)   scale(.94); z-index: 2; }
.phone--front { left: 0;   top: 11%;  transform: rotate(-2.5deg);           z-index: 3; }

.watch {
  position: absolute;
  /* Proportions measured off the Ultra itself: a 44x49mm case around a 31.9x39.1mm
     display, so the bezel is 19% of the screen's width but only 13% of its height.
     Every length here is calc'd against `--w` on purpose — the previous `padding: 5.5%`
     resolved against the stage (twice this element's width), which silently doubled the
     bezel and applied it uniformly. That is what made this read as a black lump. */
  --screen-w: calc(var(--w) * .42);
  --bezel-x: calc(var(--w) * .072);
  --bezel-y: calc(var(--w) * .058);
  --case-radius: calc(var(--w) * .15);

  /* Hanging off the front phone's bottom-left corner. Any further right and it
     covers the timer, which is the one thing the hero shot exists to show. */
  left: -3%;
  bottom: 0;
  width: calc(var(--screen-w) + var(--bezel-x) * 2);
  padding: var(--bezel-y) var(--bezel-x);
  border-radius: var(--case-radius);
  /* Black titanium. Natural titanium is the other Ultra finish, but a bright case beside
     three black phones reads as a different product; black keeps the family and lets the
     screen carry the colour. The light band at 34-62% is where the brushed face turns. */
  background: linear-gradient(155deg, #6d665e, #26221f 34%, #14110f 62%, #4b453f);
  box-shadow: var(--shadow-device);
  transform: rotate(-9deg);
  z-index: 4;
}

/* Concentric with the case: each corner is the outer curve inset by its own bezel, so
   the radii differ per axis exactly as the bezels do. Corners that share a centre are
   most of what separates a device from a rounded rectangle. */
.watch__screen {
  border-radius:
    calc(var(--case-radius) - var(--bezel-x)) / calc(var(--case-radius) - var(--bezel-y));
}

/* Brushed titanium catches light along the top-left edge, not evenly all round. */
.watch::after {
  border-color: rgba(255, 255, 255, .34) rgba(0, 0, 0, .4) rgba(0, 0, 0, .45) rgba(255, 255, 255, .26);
}

.watch__crown,
.watch__side,
.watch__action {
  position: absolute;
  background: linear-gradient(90deg, #857d74, #201d1a);
}

/* The crown sits proud of the case and is the one control with any depth to it. */
.watch__crown {
  right: calc(var(--w) * -.019);
  top: 29%;
  width: calc(var(--w) * .024);
  height: calc(var(--w) * .058);
  border-radius: calc(var(--w) * .006);
}

.watch__side {
  right: calc(var(--w) * -.009);
  top: 47%;
  width: calc(var(--w) * .013);
  height: calc(var(--w) * .072);
  border-radius: calc(var(--w) * .006);
}

/* The Ultra's Action Button, and the only orange on the device. */
.watch__action {
  left: calc(var(--w) * -.009);
  top: 38%;
  width: calc(var(--w) * .013);
  height: calc(var(--w) * .062);
  border-radius: calc(var(--w) * .006);
  background: linear-gradient(90deg, #b8560a, #f08b2a);
}

@media (prefers-reduced-motion: no-preference) {
  .phone, .watch { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .cluster__stage:hover .phone--front { transform: rotate(-2.5deg) translateY(-12px); }
  .cluster__stage:hover .watch { transform: rotate(-9deg) translateY(-7px); }
}

/* ----------------------------------------------------------------- split */

.split {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split__card {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}

.split__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.split__card--voice .split__label { color: var(--orange-deep); }
.split__card--data  .split__label { color: var(--teal); }
@media (prefers-color-scheme: dark) {
  .split__card--voice .split__label { color: var(--orange); }
}

.split__card h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); }
.split__card p { margin-top: .9rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- features */

.features {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad) 0;
}

.section-heading {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-top: .9rem;
  border-top: 2px solid var(--line);
}
.grid p { margin-top: .5rem; color: var(--ink-soft); font-size: .9375rem; }

/* --------------------------------------------------------------- privacy */

.privacy {
  max-width: 1200px;
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  padding-inline: var(--pad);
}

.privacy > * {
  max-width: var(--measure);
}

.privacy h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
.privacy p { margin-top: 1rem; color: var(--ink-soft); }
.privacy strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  max-width: 1200px;
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  padding: clamp(2rem, 5vw, 3rem) var(--pad) clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  font-size: .875rem;
  color: var(--ink-faint);
}

.site-footer__brand { font-weight: 700; color: var(--ink); }

.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }

.site-footer__legal { max-width: var(--measure); }

/* ------------------------------------------------------------- sub-pages */

.page {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad) 0;
}

.page__head { max-width: var(--measure); }

/* h1 is a grid on the home page so the question and answer stack; here it is one line. */
.page__head h1 {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  font-weight: 700;
}

.page__lede {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--ink-soft);
}

.page__stamp {
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ prose */

.prose { max-width: var(--measure); }

.prose h2 {
  font-size: clamp(1.1875rem, 1.1rem + .6vw, 1.4375rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: .9rem;
  border-top: 2px solid var(--line);
}

.prose p,
.prose ul { margin-top: 1rem; color: var(--ink-soft); }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-top: .5rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* The one-paragraph answer, for anyone who will not read the rest. */
.summary-card {
  margin-top: 2rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.summary-card p { margin-top: 0; color: var(--ink); }

/* ------------------------------------------------------------------ forms */

.support-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 62rem) {
  .support-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.form-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.field { display: grid; gap: .4rem; margin-bottom: 1.35rem; }
.field > label { font-size: .875rem; font-weight: 600; }
.field__hint { font-size: .8125rem; color: var(--ink-faint); }
.req { color: var(--orange-deep); }
@media (prefers-color-scheme: dark) { .req { color: var(--orange); } }

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .85rem;
}
.field textarea { min-height: 9.5rem; resize: vertical; }

.field :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: transparent;
}

.button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 14px;
  padding: .8rem 1.7rem;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
}
.button:hover { opacity: .88; }

/* Netlify's honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ aside */

.aside {
  display: grid;
  gap: 1.75rem;
  font-size: .9375rem;
}

.aside h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-top: .9rem;
  border-top: 2px solid var(--line);
}

.aside p { margin-top: .6rem; color: var(--ink-soft); }
.aside ul { margin-top: .6rem; padding-left: 1.15rem; color: var(--ink-soft); }
.aside li { margin-top: .4rem; }
.aside strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- confirmed */

.confirm {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) var(--pad) 0;
}
.confirm__inner { max-width: var(--measure); }
.confirm h1 {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
  font-weight: 700;
}
.confirm p { margin-top: 1.25rem; color: var(--ink-soft); }
.confirm .button { margin-top: 2rem; display: inline-block; text-decoration: none; }

/* -------------------------------------------------------------------- 404 */

.notfound {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--pad) 0;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .notfound { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}

.notfound h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem); }

.notfound__note {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--ink-soft);
}

.notfound__links { margin-top: 2.25rem; max-width: 32rem; }

.notfound__links h2 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.notfound__links ul { list-style: none; margin: .5rem 0 0; padding: 0; }

.notfound__links a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.notfound__links a span + span { color: var(--ink-faint); font-size: .9375rem; }
.notfound__links a:hover span + span { color: var(--ink-soft); }

.notfound__blame { margin-top: 1.75rem; font-size: .875rem; color: var(--ink-faint); }
.notfound__blame a { text-decoration: underline; text-underline-offset: 2px; }

/* The app's own Fasting card, rebuilt in markup. */
.fastcard {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.fastcard__quip {
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 28ch;
  margin-inline: auto;
}

.ring {
  position: relative;
  width: min(15rem, 62vw);
  margin: 1.4rem auto 0;
  aspect-ratio: 1;
}
.ring svg { width: 100%; height: 100%; display: block; }
.ring__track { fill: none; stroke: var(--line); stroke-width: 7; }
.ring__arc {
  fill: none;
  stroke: var(--teal);
  stroke-width: 7;
  stroke-linecap: round;
  /* r=42, so the circumference is 263.9. This leaves the arc deliberately short. */
  stroke-dasharray: 190 264;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.ring__inner {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: .3rem;
}

.ring__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}

.ring__sub { font-size: .8125rem; color: var(--ink-faint); }

.clock {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* A running timer with no JavaScript. Animating a registered <integer> custom property
   re-evaluates `counter-reset` on every step, and the counter is what ::after prints —
   so the digits advance in real time while the site keeps `script-src 'none'`.
   Where @property is unsupported the counters simply rest at 00:00:00. */
@property --nf-h { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --nf-m { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --nf-s { syntax: "<integer>"; initial-value: 0; inherits: false; }

@keyframes nf-h { to { --nf-h: 24; } }
@keyframes nf-m { to { --nf-m: 60; } }
@keyframes nf-s { to { --nf-s: 60; } }

.clock .h { counter-reset: u var(--nf-h); }
.clock .m { counter-reset: u var(--nf-m); }
.clock .s { counter-reset: u var(--nf-s); }
.clock span::after { content: counter(u, decimal-leading-zero); }

@keyframes ring-fill {
  from { stroke-dasharray: 0 264; }
  to   { stroke-dasharray: 190 264; }
}

@media (prefers-reduced-motion: no-preference) {
  .clock .h { animation: nf-h 86400s steps(24) infinite; }
  .clock .m { animation: nf-m 3600s steps(60) infinite; }
  .clock .s { animation: nf-s 60s steps(60) infinite; }
  .ring__arc { animation: ring-fill 1.6s cubic-bezier(.2, .8, .2, 1) both; }
}

.fastcard__row {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}
.fastcard__row > div:last-child { text-align: right; }
.fastcard__key { font-size: .75rem; color: var(--ink-faint); }
.fastcard__val { font-size: .9375rem; font-weight: 600; }

.zone-pill {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: var(--bg-tint);
  font-size: .8125rem;
  color: var(--ink-faint);
}
.zone-pill strong { color: var(--teal); font-weight: 600; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}