/* Realburn: the DesignKit look on the web.
   Black background, monochrome chrome, colour only for data. Aspekta for text, Oswald for numbers,
   IBM Plex Mono for small uppercase labels. Hairline borders, 14px cards, no shadows. */

/* Fonts: the original TTF files from DesignKit, served unmodified (licenses next to them). */
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/assets/fonts/Oswald-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/assets/fonts/Oswald-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;

  /* DesignKit dark grey scale (gray1…gray10), by role */
  --bg: #000000;
  --bg-secondary: #0A0A0A;
  --surface: #0A0A0A;
  --surface-hover: #1F1F1F;
  --hairline: rgba(255, 255, 255, 0.08);
  --border: #2E2E2E;
  --border-strong: #454545;
  --text: #FFFFFF;
  --text-secondary: #C9C9C9;
  --text-tertiary: #8F8F8F;
  --text-disabled: #6B6B6B;

  /* Data and state: only for information, never for chrome */
  --data-burn: #4F8EF7;
  --data-burn-soft: rgba(79, 142, 247, 0.22);
  --success: #30D158;
  --success-soft: rgba(48, 209, 88, 0.15);
  --danger: #FF453A;

  /* Spacing: 4pt grid */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 16px;
  --s-l: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 96px;
  --edge: 20px;
  --card-pad: 20px;

  /* Radii */
  --r-small: 8px;
  --r-medium: 14px;
  --r-large: 24px;
  --r-pill: 999px;

  --content: 1080px;
  --measure: 34em;

  --font-text: "Aspekta", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Oswald", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (min-width: 720px) {
  :root { --edge: 40px; --card-pad: 28px; --s-section: 144px; }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.35); transition: text-decoration-color 0.15s ease, color 0.15s ease; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--text); color: var(--bg); }

.skip-link {
  position: absolute; left: var(--edge); top: -100px; z-index: 10;
  background: var(--text); color: var(--bg); padding: var(--s-s) var(--s-m);
  border-radius: var(--r-pill); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: var(--s-m); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: calc(var(--content) + 2 * var(--edge)); margin: 0 auto; padding: 0 var(--edge); }

/* Type */

.overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.num { font-family: var(--font-num); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.section-title { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; max-width: 18em; }
.lead { font-size: 19px; line-height: 1.5; color: var(--text-secondary); max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 720px) { .lead { font-size: 21px; } }
.secondary { color: var(--text-secondary); }
.muted { color: var(--text-tertiary); }
.small { font-size: 14px; line-height: 1.5; }

h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; }

/* Header */

.site-header { padding: var(--s-m) 0; position: sticky; top: 0; z-index: 5; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-m); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: auto; height: 28px; flex: none; }

.nav { display: flex; align-items: center; gap: var(--s-l); }
.nav-link { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; padding: var(--s-s) 0; }
.nav-link:hover { color: var(--text); }
@media (max-width: 719px) { .nav-link { display: none; } }

/* Buttons and fields */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-s);
  min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent; color: var(--text);
  font: 500 15px/1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.button-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.button-primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }

/* Waitlist form: field and primary button side by side, stacked on small phones. */
.waitlist { display: grid; gap: var(--s-s); max-width: 30rem; }
.waitlist-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-s); }
@media (max-width: 419px) { .waitlist-row { grid-template-columns: 1fr; } }
.field {
  width: 100%; min-width: 0; height: 56px; padding: 0 18px;
  border-radius: var(--r-medium); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font: 400 17px/1 var(--font-text);
  transition: border-color 0.15s ease;
}
.field::placeholder { color: var(--text-disabled); }
.field:hover { border-color: var(--border-strong); }
.field:focus { outline: none; border: 2px solid var(--text); padding: 0 17px; }
.waitlist .button { height: 56px; border-radius: var(--r-medium); padding: 0 24px; font-size: 17px; }
.waitlist .button[disabled] { opacity: 0.6; cursor: progress; }
.waitlist-note { font-size: 14px; color: var(--text-tertiary); }
.waitlist-note a { color: var(--text-secondary); }
.waitlist-status { font-size: 15px; min-height: 0; }
.waitlist-status:empty { display: none; }
.waitlist-status.is-ok { color: var(--text); }
.waitlist-status.is-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--success); vertical-align: 1px; }
.waitlist-status.is-error { color: var(--danger); }
.waitlist.is-done .waitlist-row { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chips */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--surface-hover);
  border-radius: var(--r-pill); padding: 6px 11px 5px; white-space: nowrap;
}
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-medium);
  padding: var(--card-pad);
}
.card-large { border-radius: var(--r-large); }

.grid-2, .grid-3 { display: grid; gap: var(--s-s); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Sections */

.section { padding-top: var(--s-section); }
.section-head { display: grid; gap: var(--s-m); margin-bottom: var(--s-xxl); }
.section-head .lead { margin-top: var(--s-s); }

/* Hero: the claim, centred, then the Today card as the product shot. */

.hero { padding-top: 56px; display: grid; gap: 64px; justify-items: center; }
@media (min-width: 720px) { .hero { padding-top: 88px; gap: 88px; } }
.hero-copy { display: grid; gap: var(--s-l); justify-items: center; text-align: center; }
.hero-chip { color: var(--text-secondary); }
.hero-title {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.04; letter-spacing: -0.045em; font-weight: 600;
  margin-top: var(--s-s);
}
.hero-title > .line { display: block; text-wrap: balance; }
.hero-title > .was { color: var(--text-disabled); margin-bottom: 0.08em; }
/* The numbers are set like the heading itself (Aspekta, same size and weight). */
.hero-title .num { font: inherit; letter-spacing: inherit; font-variant-numeric: normal; white-space: nowrap; }
/* The struck watch number: a line drawn over it (animated in motion.css below). */
.strike { position: relative; display: inline-block; }
.strike::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 52%; height: 0.09em;
  background: currentColor; border-radius: 1em; transform-origin: left center;
}
.hero .lead { margin-top: var(--s-xs); }
.hero .waitlist { width: 100%; justify-items: center; margin-top: var(--s-l); }
.hero .waitlist-row { width: 100%; }

/* Today card: the true burn on the app's gauge, next to what the watch said. */

.today-card {
  position: relative; overflow: hidden; margin: 0;
  width: 100%; max-width: 920px;
  display: grid; gap: var(--s-l);
  background: var(--surface);
}
/* DSGlow: the state colour (calibrated = success) as a soft light from the top edge. */
.today-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 30% -10%, rgba(48, 209, 88, 0.16), rgba(48, 209, 88, 0) 70%);
}
.today-card > :not(.sr-only) { position: relative; }
.today-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); }
.today-body { display: grid; gap: var(--s-xl); align-items: center; }
@media (min-width: 760px) { .today-body { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* DSGauge: 101 ticks over half a circle, drawn once in SVG. The fills are the same ticks under a
   wedge from the circle's centre (scale 0–3 500 kcal: watch 3 140 = 161.5°, true 2 610 = 134.2°,
   plus 10° because the wedge starts below the left end). */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gauge { position: relative; width: min(100%, 380px); margin: 0 auto; aspect-ratio: 278 / 140; container-type: inline-size; }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-width: 1.45; stroke-linecap: round; }
.gauge-track { stroke: #2E2E2E; }
.gauge-fill { position: absolute; inset: 0; }
.gauge-fill {
  -webkit-mask-image: conic-gradient(from -100deg at 50% 99.3%, #000 var(--sweep), transparent var(--sweep));
  mask-image: conic-gradient(from -100deg at 50% 99.3%, #000 var(--sweep), transparent var(--sweep));
}
.gauge-watch { --sweep: 171.5deg; }
.gauge-watch svg { stroke: var(--text-disabled); }
.gauge-true { --sweep: 144.2deg; }
.gauge-true svg { stroke: var(--data-burn); }
.gauge-readout { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; }
.today-number { font-family: var(--font-num); font-size: 25cqw; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mono-subtitle { display: grid; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.mono-subtitle > span { grid-area: 1 / 1; }
.label-watch { opacity: 0; }

.today-detail { display: grid; gap: var(--s-l); }
.compare { display: grid; gap: 14px; }
.compare-row { display: grid; grid-template-columns: 76px 1fr 56px; align-items: center; gap: 12px; }
.compare-label { font-size: 13px; color: var(--text-tertiary); }
.compare-value { font-family: var(--font-num); font-weight: 500; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.compare-row.is-watch .compare-value { color: var(--text-tertiary); }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-hover); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; width: var(--w); }
.bar-watch > i { background: var(--text-disabled); }
.bar-true > i { background: var(--data-burn); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); padding-top: var(--s-l); }
.stats > div { display: grid; gap: 4px; }
.stats > div + div { padding-left: var(--s-m); border-left: 1px solid var(--hairline); }
.stat-label { font-size: 13px; color: var(--text-tertiary); }
.stat-value { font-family: var(--font-num); font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.stat-value small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-tertiary); margin-left: 4px; text-transform: uppercase; }

.today-card .provenance { font-size: 13px; color: var(--text-tertiary); }
@media (max-width: 759px) { .today-card .provenance { text-align: center; } }

/* Problem */

.problem { display: grid; gap: var(--s-xxl); }
@media (min-width: 900px) { .problem { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.big-stat { display: grid; gap: var(--s-m); }
.big-stat .value { font-family: var(--font-num); font-size: clamp(112px, 24vw, 200px); line-height: 0.85; letter-spacing: -0.05em; }
.big-stat .value small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.04em; vertical-align: 0.9em; }
.big-stat .caption { color: var(--text-secondary); max-width: 24em; }
.source { font-size: 13px; color: var(--text-tertiary); }
.source a { color: var(--text-tertiary); }

.approaches { list-style: none; margin: 0; padding: 0; }
.approaches li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.approaches li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) { .approaches li { grid-template-columns: 170px 1fr; gap: var(--s-l); } }
.approaches .who { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 4px; }
.approaches .what { color: var(--text-secondary); }
.approaches .what strong { color: var(--text); font-weight: 500; }
.approaches li.is-us .who { color: var(--text); }

/* Precision ladder: each step narrows the range. */

.ladder { counter-reset: step; }
.step { display: grid; gap: var(--s-l); align-content: start; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); }
.step-index { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--text-tertiary); }
.step h3 { margin-bottom: var(--s-s); }

.range { display: grid; gap: 10px; padding-top: var(--s-s); }
.range-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.range-figure .num { font-size: 32px; line-height: 1; letter-spacing: -0.02em; }
.range-figure .unit { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary); text-transform: uppercase; }
.range-track { position: relative; height: 22px; }
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: var(--r-pill); background: var(--surface-hover); }
.range-span { position: absolute; top: 7px; height: 8px; left: var(--from); width: calc(var(--to) - var(--from)); border-radius: var(--r-pill); background: var(--data-burn-soft); box-shadow: inset 0 0 0 1px rgba(79, 142, 247, 0.55); }
.range-mark { position: absolute; top: 2px; left: var(--at); width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--data-burn); }
.range-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--text-disabled); font-variant-numeric: tabular-nums; }

.ladder-note { margin-top: var(--s-l); display: grid; gap: var(--s-m); }
@media (min-width: 720px) { .ladder-note { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-l); } }
.watch-pill { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.watch-pill svg { width: 22px; height: 22px; color: var(--text-secondary); }

/* No watch, no log */

.feature { display: grid; gap: var(--s-s); align-content: start; }
.feature .overline { margin-bottom: var(--s-s); }
.feature p { color: var(--text-secondary); max-width: 40em; }

.quicklog { display: flex; flex-wrap: wrap; gap: var(--s-s); margin-top: var(--s-m); }
.quicklog .chip { text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-size: 14px; padding: 8px 14px; color: var(--text); }
.quicklog .chip b { font-family: var(--font-num); font-weight: 500; font-size: 15px; }

.sources { display: flex; flex-wrap: wrap; gap: var(--s-s); margin-top: var(--s-m); }

/* Privacy */

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.checks li:first-child { border-top: 0; padding-top: 0; }
.checks li:last-child { padding-bottom: 0; }
.checks svg { width: 20px; height: 20px; margin-top: 3px; color: var(--text-tertiary); }
.checks strong { display: block; font-weight: 500; }
.checks span span { display: block; color: var(--text-secondary); margin-top: 2px; }

/* FAQ: native details/summary */

.faq { border-top: 1px solid var(--hairline); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-m);
  padding: 22px 0;
  font-size: 18px; font-weight: 500; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover::after { border-color: var(--text); }
.faq .answer { padding-bottom: var(--s-l); color: var(--text-secondary); max-width: 40em; }
.faq .answer p + p { margin-top: var(--s-s); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Closing call to action */

.closing { text-align: left; display: grid; gap: var(--s-l); justify-items: start; padding-bottom: var(--s-section); }
.closing .section-title { max-width: 14em; }

/* Footer */

.site-footer { border-top: 1px solid var(--hairline); padding: var(--s-xl) 0 var(--s-xxl); font-size: 14px; color: var(--text-tertiary); }
.site-footer .wrap { display: grid; gap: var(--s-l); }
@media (min-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.footer-legal p + p { margin-top: var(--s-xs); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-s) var(--s-l); list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-mark { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; margin-bottom: var(--s-s); }
.footer-mark img { height: 20px; width: auto; }

/* Calculator page (/calculator) */

.page-head { padding-top: 56px; display: grid; gap: var(--s-l); justify-items: start; }
@media (min-width: 720px) { .page-head { padding-top: 88px; } }
.page-title { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; max-width: 14em; }
.section-tight { padding-top: var(--s-xxl); }

.calc-layout { display: grid; gap: var(--s-s); }
@media (min-width: 960px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .result-card { position: sticky; top: 84px; }
}

.calc { padding: 0; }
.calc-group { border: 0; margin: 0; min-width: 0; padding: var(--card-pad); display: grid; gap: var(--s-m); }
.calc-group + .calc-group { border-top: 1px solid var(--hairline); }
/* A legend can't be a grid item; floated, it sits in the grid flow like a heading. */
.calc-group > legend:not(.sr-only) { float: left; width: 100%; padding: 0; }
.calc-units { grid-template-columns: 1fr auto; align-items: center; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-m); }
.calc-field { display: grid; gap: var(--s-s); align-content: start; min-width: 0; }
.calc-label { font-size: 15px; line-height: 1.35; color: var(--text-secondary); }
.optional { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-disabled); white-space: nowrap; }
.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-s); }
.hint { font-size: 13px; line-height: 1.45; color: var(--text-tertiary); }

.input-unit { position: relative; }
.field-num { height: 52px; padding-right: 64px; font: 400 22px/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; -moz-appearance: textfield; appearance: textfield; }
.field-num:focus { padding-right: 63px; }
.field-num::-webkit-outer-spin-button, .field-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field[aria-invalid="true"] { border-color: var(--danger); }
.input-unit .unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

/* Segmented control: radios styled as one pill, the chosen one in white. */
.seg { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-pill); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; min-width: 40px; padding: 7px 14px; border-radius: var(--r-pill); text-align: center; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--text-secondary); transition: background-color 0.15s ease, color 0.15s ease; }
.seg label:hover span { color: var(--text); }
.seg input:checked + span { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }

.result-card { display: grid; gap: var(--s-l); align-content: start; }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); min-height: 26px; }
.result-main { display: grid; gap: var(--s-s); }
.result-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-num); font-size: clamp(72px, 16vw, 104px); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.result-number .is-range { font-size: 0.62em; letter-spacing: -0.03em; }
.result-number small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.result-note { font-size: 15px; max-width: 32em; }

.bar-formula > i { background: var(--border-strong); }
.compare-row.is-formula .compare-value { color: var(--text-tertiary); }
.result-card .compare-row { grid-template-columns: 64px 1fr 56px; }

.result-range { padding-top: 0; }
.range-watch { position: absolute; top: 0; left: var(--watch); width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; background: var(--text-disabled); }
.range-legend { font-size: 13px; color: var(--text-tertiary); }

.result-card .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; border-top: 1px solid var(--hairline); padding-top: var(--s-l); }
.findings li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.findings li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-disabled); }
.findings li.is-warning { color: var(--text); }
.findings li.is-warning::before { background: var(--danger); }
.example-note { font-size: 13px; color: var(--text-tertiary); }
[hidden] { display: none !important; }

.cta-card { display: grid; gap: var(--s-l); justify-items: start; }
.cta-card .section-title { max-width: 16em; }
.cta-card .waitlist { width: 100%; }

.prose { display: grid; gap: var(--s-m); max-width: 44rem; color: var(--text-secondary); }
.prose h3 { color: var(--text); margin-top: var(--s-l); }
.prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 500; }
.formula { font-family: var(--font-mono); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-small); padding: 14px 16px; overflow-x: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-medium); }
.num-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.num-table th, .num-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
.num-table thead th { border-top: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.num-table tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }
@media (max-width: 559px) { .num-table tbody th { white-space: normal; min-width: 7em; } }

.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-s); font-size: 14px; }
.refs a { color: var(--text-secondary); }

.nav-link[aria-current="page"] { color: var(--text); }
.hero-calc { font-size: 15px; color: var(--text-secondary); }
.hero-calc a { color: var(--text); }

/* Small utilities */

.mt-s { margin-top: var(--s-s); }
.mt-m { margin-top: var(--s-m); }
.mt-l { margin-top: var(--s-l); }

/* 404 */

.not-found { min-height: 60vh; display: grid; align-content: center; gap: var(--s-l); justify-items: start; }

/* Example values for the bars (kept here, not inline, so the CSP can forbid inline styles). */
.w-watch { --w: 100%; }
.w-true { --w: 83.1%; }              /* 2 610 / 3 140 */
.r1 { --from: 12.5%; --to: 90%; --at: 45%; }      /* 2 300–2 920, likely 2 560, on 2 200–3 000 */
.r2 { --from: 31.25%; --to: 70%; --at: 48.75%; }  /* 2 450–2 760, likely 2 590 */
.r3 { --from: 45%; --to: 57.5%; --at: 51.25%; }   /* 2 560–2 660, 2 610 */
.ladder { list-style: none; margin: 0; padding: 0; }
.span-all { grid-column: 1 / -1; }

/* ------------------------------------------------------------------------------------------------
   Motion. Everything below runs only with html.motion, which assets/motion.js sets when the visitor
   hasn't asked for reduced motion. Without it (or without JavaScript) the page shows its final state.
   Easing: DesignKit's easeOut, no bounce on data. */

:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes dim { from { color: var(--text); } }
@keyframes strike { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

/* Hero, on load, in sequence: "Your watch says 3 140." arrives in white (0.1s); the number is struck
   out (0.95s); the sentence fades to grey (1.5s); "You burned 3 140." arrives (1.9s) and motion.js
   counts it down to 2 610 (2.3–3.5s). */
.motion .hero-chip { animation: rise 0.8s var(--ease) 0.05s both; }
.motion .hero-title .was { animation: rise 0.9s var(--ease) 0.1s both, dim 0.6s ease 1.5s both; }
.motion .hero-title .strike::after { animation: strike 0.5s var(--ease-in-out) 0.95s both; }
.motion .hero-title .now { animation: rise 0.9s var(--ease) 1.9s both; }
.motion .hero .lead { animation: rise 0.9s var(--ease) 0.3s both; }
.motion .hero .waitlist { animation: rise 0.9s var(--ease) 0.42s both; }
.motion .hero .hero-calc { animation: rise 0.9s var(--ease) 0.54s both; }

/* Today card, when it scrolls into view (motion.js adds .is-in and counts the number):
   0.15–1.35s the watch's arc fills to 3 140; at 1.65s it settles back to the true 2 610,
   leaving the watch's extra as grey ticks; then the state and the numbers come in. */
@keyframes sweep-watch { from { --sweep: 0deg; } }
@keyframes sweep-true {
  0% { --sweep: 0deg; animation-timing-function: var(--ease); }
  48% { --sweep: 171.5deg; }
  60% { --sweep: 171.5deg; animation-timing-function: var(--ease-in-out); }
  100% { --sweep: 144.2deg; }
}
@keyframes bar-grow { from { width: 0; } }
@keyframes bar-settle {
  0% { width: 0; animation-timing-function: var(--ease); }
  48% { width: 100%; }
  60% { width: 100%; animation-timing-function: var(--ease-in-out); }
  100% { width: var(--w); }
}
.motion .today-card:not(.is-in) :is(.gauge-watch, .gauge-true) { --sweep: 0deg; }
.motion .today-card:not(.is-in) .bar > i { width: 0; }
.motion .today-card:not(.is-in) :is(.today-state, .stats, .provenance, .is-true .compare-value, .label-true),
.motion .today-card:not(.is-in)::before { opacity: 0; }

.motion .today-card.is-in .gauge-watch { animation: sweep-watch 1.2s var(--ease) 0.15s both; }
.motion .today-card.is-in .gauge-true { animation: sweep-true 2.5s linear 0.15s both; }
.motion .today-card.is-in .bar-watch > i { animation: bar-grow 1.2s var(--ease) 0.15s both; }
.motion .today-card.is-in .bar-true > i { animation: bar-settle 2.5s linear 0.15s both; }
.motion .today-card.is-in .label-watch { animation: fade-out 0.3s ease 1.6s both; }
.motion .today-card.is-in .label-true { animation: fade 0.4s ease 1.75s both; }
.motion .today-card.is-in .is-true .compare-value { animation: fade 0.5s ease 2.3s both; }
.motion .today-card.is-in::before { animation: fade 1.2s ease 2.4s both; }
.motion .today-card.is-in .today-state { animation: pop 0.45s var(--ease) 2.55s both; }
.motion .today-card.is-in .stats { animation: rise 0.8s var(--ease) 2.5s both; }
.motion .today-card.is-in .provenance { animation: fade 0.8s ease 2.8s both; }
/* Without motion the card shows only "True burn"; with motion it starts on "Watch says". */
.motion .today-card .label-watch { opacity: 1; }

/* Scroll reveals: each block rises into place as it enters, siblings one after another (--i). */
.motion [data-reveal] {
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }

/* 28%: counted up by motion.js. Precision ladder: each range starts as the whole scale and narrows. */
.motion .range-span { transition: left 1.3s var(--ease), width 1.3s var(--ease), opacity 0.6s ease; transition-delay: calc(var(--i, 0) * 120ms + 0.35s); }
.motion .step:not(.is-in) .range-span { left: 0; width: 100%; opacity: 0.4; }
.motion .range-mark { transition: opacity 0.4s ease, transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 1.2s); }
.motion .step:not(.is-in) .range-mark { opacity: 0; transform: scaleY(0); }

/* Quick Log chips land one by one. */
.motion .quicklog .chip { transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.motion .quicklog .chip:nth-child(2) { transition-delay: 0.12s; }
.motion .quicklog .chip:nth-child(3) { transition-delay: 0.24s; }
.motion .quicklog:not(.is-in) .chip { opacity: 0; transform: translateY(10px); }

/* Privacy checks draw themselves. */
.checks svg path { stroke-dasharray: 20; }
.motion .checks svg path { transition: stroke-dashoffset 0.6s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 90ms + 0.3s); }
.motion .checks li:not(.is-in) svg path { stroke-dashoffset: 20; }

/* Sticky header: a hairline once the page scrolls under it. */
.site-header { transition: border-color 0.25s ease; }
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

/* Buttons: a small press. */
.button { transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; }
.button:active { transform: scale(0.97); }

/* FAQ: answers open smoothly where the browser can animate to height auto. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* Cursor glow on card groups (as on the Hydra page): borders light up around the cursor and the card
   under it gets a soft spot. Mouse only; motion.js sets --mx and --my. */
@media (hover: hover) and (pointer: fine) {
  [data-card-glow] .card { position: relative; }
  [data-card-glow] .card::before,
  [data-card-glow] .card::after {
    content: ""; position: absolute; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.5s ease;
  }
  [data-card-glow] .card::before {
    inset: -1px; padding: 1px;
    background: radial-gradient(600px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.35), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  [data-card-glow] .card::after {
    inset: 0;
    background: radial-gradient(600px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.04), transparent 40%);
  }
  [data-card-glow]:hover .card::before,
  [data-card-glow] .card:hover::after { opacity: 1; }
}