/*
 * O-FIT marketing site.
 * Every token below is copied from O-Fit/DesignSystem/DesignSystem.swift.
 * Do not introduce a colour, radius or duration that is not defined here.
 */

/* woff2 first — it is about 60% of the TrueType size, so the headline settles
   sooner. The .ttf stays as a fallback for anything that cannot read woff2. */
@font-face {
  font-family: Oswald;
  src: url('fonts/Oswald-Variable.woff2') format('woff2'),
       url('fonts/Oswald-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('fonts/Inter-Variable.woff2') format('woff2'),
       url('fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand */
  --bg: #0a0b0e;
  --sheet: #16181c;
  --volt: #d7ff1a;
  --volt-deep: #b8dc00;
  --black: #111111;

  /* Dark-mode semantic aliases */
  --text: #ffffff;
  /* Raised on 2026-09-25 with the app: DesignSystem.swift moved Dark.textDim
     from 0.55 to 0.68 and Dark.textFaint from 0.40 to 0.52, for readability. */
  --text-dim: rgba(255, 255, 255, 0.68);
  --text-faint: rgba(255, 255, 255, 0.52);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-card: rgba(255, 255, 255, 0.06);
  --surface-raised: rgba(255, 255, 255, 0.08);
  --border-faint: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-chip: rgba(255, 255, 255, 0.12);

  --volt-tint: rgba(215, 255, 26, 0.10);
  --volt-border: rgba(215, 255, 26, 0.20);

  /* Semantic */
  --critical: #ee0005;
  --warning: #fedf35;
  --live: #56d364;

  /* Radii */
  --r-tile: 10px;
  --r-card: 14px;
  --r-card-lg: 16px;
  --r-panel: 18px;
  --r-pill: 30px;

  /* Motion — the house curve */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --shell: 1400px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

/* Every <img> carries width and height attributes so the page cannot jump
   while it loads. Those attributes are also presentational hints, so a rule
   that sets only the width leaves the attribute height in force and the
   picture comes out stretched. height:auto once, here, rather than remembering
   it at every call site. */
img {
  max-width: 100%;
  height: auto;
}

/* The base colour lives on html so the fixed backdrop below can sit above it
   while still being behind every section. */
html { background: var(--bg); }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: Inter, -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ═══════════════ Shared type primitives ═══════════════ */

/* White, not volt. The app stopped using volt as a text colour on 2026-09-25 —
   ofitEyebrowVolt() and every secondary link in AuthFlowView went white, because
   volt is hard to read at these sizes. Volt is now reserved for things you look
   at rather than read: the full stop, the icons, a filled button, a progress
   ring. The page follows. */
.eyebrow {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.eyebrow--dim { color: var(--text-dim); }

h1, h2, h3 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.dot { color: var(--volt); }

/* ═══════════════ Buttons ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 15px Oswald, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease);
}

.btn svg { flex: none; }

.btn--light { background: #fff; color: var(--black); }
.btn--light:hover { transform: translateY(-1px); background: #f0f0f0; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.40); transform: translateY(-1px); }

.btn--volt { background: var(--volt); color: var(--black); }
.btn--volt:hover { background: var(--volt-deep); transform: translateY(-1px); }

.btn--sm { min-height: 46px; padding: 0 22px; font-size: 13px; }

/* ═══════════════ Navigation ═══════════════ */
/* The bar spans the window; only its contents are held to the page width.
   Before, the background was the 1400px box itself, which left a strip of bare
   page down each side and made the header look unfinished. */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 14, 0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease);
}

/* Once the page has moved under it, the bar earns an edge and a little weight. */
.nav.is-stuck {
  background: rgba(10, 11, 14, 0.92);
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px 40px;
}

.wordmark {
  font: 700 30px/1 Oswald, sans-serif;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  gap: 38px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* :not(.nav__cta) throughout — the demo button lives in this list too, and
   the link rules would otherwise repaint its label dim on a white pill. */
.nav__links li:not(.nav__cta) a {
  position: relative;
  display: block;
  padding: 6px 0;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.18s var(--ease);
}

.nav__links li:not(.nav__cta) a:hover { color: var(--text); }

/* Where you are, marked under the word rather than by colour alone. */
.nav__links li:not(.nav__cta) a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--volt);
  transform: scaleX(0);
  transition: transform 0.22s var(--ease);
}

.nav__links li:not(.nav__cta) a[aria-current="true"] { color: var(--text); }
.nav__links li:not(.nav__cta) a[aria-current="true"]::after { transform: scaleX(1); }

.nav__cta { display: none; }

.lang {
  appearance: none;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-tile);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  color: var(--text);
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: border-color 0.18s var(--ease);
}

.lang:hover { border-color: rgba(255, 255, 255, 0.28); }
.lang:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* The menu button, only on narrow screens. */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-chip);
  border-radius: var(--r-tile);
  background: transparent;
  color: var(--text-dim);
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__toggle:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

.nav__bars { display: grid; gap: 4px; }

.nav__bars i {
  display: block;
  width: 17px;
  height: 1.6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
}

.nav.is-open .nav__toggle { color: var(--volt); border-color: var(--volt-border); }
.nav.is-open .nav__bars i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav.is-open .nav__bars i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__bars i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__inner { gap: 14px; padding: 14px 20px; }
  .nav__toggle { display: inline-flex; }

  /* The bar's own demo button steps aside; the one in the menu takes over, so
     the call to action is still reachable on a phone. */
  .nav__inner > .btn { display: none; }
  .nav__cta { display: block; margin-top: 10px; }
  .nav__cta .btn { width: 100%; }

  .nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 20px 22px;
    /* Opaque, and no blur of its own. The bar above already has a
       backdrop-filter, and a second one nested inside it makes the panel paint
       as if it were transparent even though it is not — the content behind
       showed straight through a 98% background. */
    background: #0c0d11;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }

  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; }

  .nav__links li:not(.nav__cta) a { padding: 14px 0; font-size: 12px; }
  .nav__links li:not(.nav__cta) a::after { display: none; }
  .nav__links li:not(.nav__cta) a[aria-current="true"] { color: var(--volt); }
}

@media (max-width: 420px) {
  .nav__toggle .nav__togglelabel { display: none; }
  .wordmark { font-size: 26px; }
}

/* ═══════════════ Scroll reveal ═══════════════ */
/* The app brings every screen in the same way: a short rise plus a fade on the
   house curve, cascaded 60–380ms apart (DesignSystem.swift → Motion.Delay).
   The page borrows that rather than inventing a web-only motion. */

.js .step__why,
.js .day__why { display: inline-flex; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) var(--d, 0s),
              transform 0.6s var(--ease) var(--d, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ═══════════════ Hero — three elements, no product image ═══════════════ */

.hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 86px 24px 78px;
  text-align: center;
}

.hero { flex: 1; }

/* ═══════════════ The page-wide backdrop ═══════════════ */
/* Fixed to the viewport, behind every section, so the same living background
   runs the length of the site rather than stopping under the headline.
   WelcomeBackdrop puts a volt light up and to the right and a teal one down
   and to the left, over a diagonal near-black gradient. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 760px at 78% -12%, rgba(215, 255, 26, 0.18), transparent 66%),
    radial-gradient(900px 760px at 18% 112%, rgba(33, 115, 158, 0.32), transparent 66%),
    linear-gradient(158deg, #0a0f12 0%, #08090c 58%, var(--bg) 100%);
}

.backdrop__canvas { display: block; width: 100%; height: 100%; }

.hero__bg {
  position: relative;
  /* Deliberately NOT a full screen. A hero that fills the viewport pushes the
     product below the fold, so a first-time visitor has to scroll before
     learning what O-FIT is. This leaves roughly 300px — the sticky nav plus a
     slice of the panels below — so the top of the corporate dashboard and the
     phone are already in view on landing. Clamped so it still breathes on a
     tall display and does not crush on a short laptop.
     dvh so a phone's collapsing address bar does not cut the bottom off. */
  min-height: clamp(440px, calc(100vh - 360px), 640px);
  min-height: clamp(440px, calc(100dvh - 360px), 640px);
  display: flex;
  align-items: center;
  /* The props and the scrim behind the headline both reach past the sides on
     purpose; without this they widen the page and give it a sideways scroll. */
  overflow: hidden;
}

.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* This sentence, not the headline, is what tells a stranger what O-FIT is.
   It is brighter and larger than ordinary body copy so it is read, not skimmed. */
.hero__sub {
  max-width: 600px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 19px;
  line-height: 1.55;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.hero__cta .btn { min-width: 210px; }

/* ═══════════════ The 50/50 split — the heart of the page ═══════════════ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 40px 72px;
}

.panel {
  display: flex;
  flex-direction: column;
  padding: 38px 38px 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  /* The phone's layout box (402pt) and the laptop base both reach past the
     panel's inner width; only their scaled rendering is meant to show. */
  overflow: hidden;
}

.panel h2 {
  margin: 16px 0 0;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.panel__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  margin: 30px 0 4px;
}

.bullets {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  font-size: 15px;
}

.bullets svg { flex: none; }

.panel .btn { align-self: flex-start; }

/* ═══════════════ Laptop frame ═══════════════ */

.laptop { width: 100%; }

.laptop__screen {
  padding: 9px 9px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 12px 12px 3px 3px;
  background: #1c1e22;
}

.laptop__shot {
  overflow: hidden;
  border-radius: 4px;
}

.laptop__shot img {
  display: block;
  width: 100%;
}

.laptop__base {
  height: 11px;
  margin: 0 -7%;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(#26282d, #15171a);
}

.laptop__notch {
  width: 88px;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  background: #34363c;
}

/* ═══════════════ Phone frame — real UI, not a picture ═══════════════ */

.phone-wrap {
  width: 402px;
  height: 874px;
  transform: scale(0.58);
  transform-origin: center center;
  margin: -183px 0; /* reclaim the space the scale gives back: (874 − 874×0.58) ÷ 2 */
}

.phone {
  position: relative;
  width: 402px;
  height: 874px;
  padding: 11px;
  border-radius: 56px;
  background: #24262b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 46px;
  background: var(--bg);
}

.phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 116px;
  height: 33px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
  z-index: 5;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px 0;
  font: 600 15px Inter, sans-serif;
}

/* ═══════════════ The READINESS screen (spec §9.4) ═══════════════ */

.rd {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 20px 0;
  text-align: center;
}

.rd__top {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rd__dots {
  display: flex;
  gap: 6px;
  margin: 0 auto;
}

.rd__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.rd__dots i.on { background: var(--volt); }

.rd h3 {
  margin: 22px 0 0;
  font-size: 26px;
  line-height: 1.10;
  letter-spacing: -0.005em;
}

.rd__sub { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

.rd__rule { height: 1px; margin: 22px 0 0; background: var(--border); }

.rd__dial { position: relative; margin: 30px auto 0; width: 220px; height: 220px; }

.rd__dial svg { display: block; }

.rd__score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rd__num {
  font: 700 64px/1 Oswald, sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rd__num span { font-size: 22px; font-weight: 600; opacity: 0.70; }

.rd__cap {
  margin-top: 8px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rd__band {
  margin: 12px 0 0;
  font: 700 28px Oswald, sans-serif;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--volt);
}

.rd__bandsub {
  max-width: 320px;
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.40;
  color: var(--text-dim);
}

.rd__card {
  margin-top: 24px;
  padding: 18px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface-card);
}

.rd__cardtitle {
  margin: 0 0 14px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rd__stats { display: flex; align-items: stretch; }

.rd__stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.rd__divider { width: 1px; margin: 6px 0; background: var(--border); }

.rd__statlabel {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rd__statvalue {
  font: 700 18px Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--volt);
}

.rd__why {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  background: var(--surface-card);
  text-align: left;
}

.rd__whyicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--volt-border);
  border-radius: var(--r-tile);
  background: var(--volt-tint);
}

.rd__whytitle { font: 600 14px Inter, sans-serif; }
.rd__whysub { margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--text-dim); }

.rd__cta { margin-top: auto; padding: 20px 0 14px; }

.rd__cta .btn { width: 100%; min-height: 56px; font-size: 16px; }

.rd__back {
  padding: 14px 0 0;
  font: 500 13px Inter, sans-serif;
  color: var(--text-dim);
}

/* ═══════════════ Proof strip ═══════════════ */

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 58px 40px 26px;
}

.proof__item { text-align: center; }
.proof__item + .proof__item { border-left: 1px solid var(--border); }

.proof__num {
  font: 700 52px/1 Oswald, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.proof__label {
  margin-top: 12px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.proof__caveat {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 40px 58px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}


/* ═══════════════ Shared section shell ═══════════════ */

.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px 40px;
}

.section__head { max-width: 680px; margin-bottom: 48px; }

.section__head h2 {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.section__sub {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}

.section__note {
  margin: 34px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

.section__note--warn {
  display: inline-block;
  padding: 11px 15px;
  border: 1px dashed rgba(254, 223, 53, 0.35);
  border-radius: var(--r-card);
  color: var(--text-dim);
}

/* ═══════════════ How it works — three steps ═══════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Each card owns its height. Without this the grid makes every card in a row
     as tall as the tallest, so opening one leaves its neighbours as tall empty
     boxes and the whole row looks as though it opened. */
  align-items: start;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

/* A step that only states something keeps its padding; one that opens carries
   it on the button instead, so the whole card is the hit area. */
.step:not(:has(.step__btn)) { padding: 32px 30px 34px; }

.step:has(.step__btn):hover { border-color: var(--volt-border); background: rgba(255, 255, 255, 0.055); }
.step.is-open { border-color: var(--volt-border); }

.step__btn {
  display: block;
  width: 100%;
  padding: 32px 30px 26px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.step__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }

.step__n {
  display: block;
  font: 700 13px Oswald, sans-serif;
  letter-spacing: 0.18em;
  color: var(--volt);
}

.step h3,
.step__title {
  display: block;
  margin: 18px 0 0;
  font: 700 22px/1.12 Oswald, sans-serif;
  text-transform: uppercase;
}

.step p,
.step__body {
  display: block;
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

.step__why {
  display: none;
  align-items: center;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.18s var(--ease);
}

.step__btn:hover .step__why { color: var(--volt); }
.step__why svg { transition: transform 0.2s var(--ease); }
.step.is-open .step__why svg { transform: rotate(180deg); }

/* One child only, and min-height zero, or the 0fr row cannot collapse. */
/* Same as the day cards: open unless script can open them. */
.step__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.js .step__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.js .step.is-open .step__panel { grid-template-rows: 1fr; }
.step__panelin { overflow: hidden; min-height: 0; }

.step__panelin > * { border-top: 1px solid var(--border); }

.step__lead {
  margin: 0;
  padding: 18px 30px 0;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.step__panelin .plain { margin: 0; padding: 10px 30px 26px; border-top: 0; }
.step__panelin .plain li { padding: 9px 0 9px 22px; font-size: 14px; }

/* ═══════════════ Two columns — privacy, pricing ═══════════════ */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.col, .plan {
  padding: 34px 32px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.plan { display: flex; flex-direction: column; }

.col__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 20px;
}

.plan h3 { margin: 14px 0 0; font-size: 26px; line-height: 1.1; }

.plan__price { margin: 16px 0 24px; }

.plan__tbd {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed var(--border-chip);
  border-radius: var(--r-chip);
  font: 600 12px Inter, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.plain { margin: 0 0 28px; padding: 0; list-style: none; }

.plain li {
  position: relative;
  padding: 10px 0 10px 22px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}

.plain li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  opacity: 0.55;
}

.plan .btn { align-self: flex-start; margin-top: auto; }

/* Volt marks what is true of the product. On the "never see" list that would
   read as approval of the thing being denied, so those markers stay neutral. */
.col--no .plain li::before { background: var(--text-faint); opacity: 1; }

/* ═══════════════ FAQ ═══════════════ */

.faq {
  max-width: 880px;
  border-top: 1px solid var(--border);
}

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font: 600 17px Inter, sans-serif;
  cursor: pointer;
  list-style: none;
  transition: color 0.18s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--volt); }

/* The open/close marker, drawn rather than shipped as an icon. */
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq details p {
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
}

/* ═══════════════ Demo request ═══════════════ */

.section--cta { padding-bottom: 96px; }

.cta-box {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 48px 48px;
  border: 1px solid var(--volt-border);
  border-radius: var(--r-panel);
  background: rgba(215, 255, 26, 0.04);
}

.cta-box h2 {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.form { max-width: 720px; margin-top: 34px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form label {
  display: block;
  margin-bottom: 16px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 14px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
  font: 400 15px Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.form textarea { resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--volt);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.form .btn { margin-top: 6px; }

.form__status {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--warning);
}

/* ═══════════════ Responsive ═══════════════ */

@media (max-width: 1100px) {
  .steps { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 64px 20px; }
  .step__btn { padding: 26px 22px 22px; }
  .step__lead, .step__panelin .plain { padding-left: 22px; padding-right: 22px; }
  .feature__btn { padding: 24px 22px 20px; }
  .feature__panelin .plain { padding-left: 22px; padding-right: 22px; }
  .section__head { margin-bottom: 34px; }
  .step, .col, .plan { padding: 26px 22px 28px; }
  .cta-box { padding: 34px 22px 30px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .plan .btn, .cta-box .btn { width: 100%; }
}


/* A panel that is a link to its own page. The whole card is the target, so it
   has to say so on hover and hold a focus ring for the keyboard. */
.panel--link {
  color: inherit;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              transform 0.18s var(--ease);
}

.panel--link:hover {
  transform: translateY(-2px);
  border-color: var(--volt-border);
  background: rgba(255, 255, 255, 0.055);
}

.panel--link:hover .btn--light { background: var(--volt); }

.panel--link:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* A standalone screenshot. The captures used to be clipped here to hide a
   "clickable prototype" badge burned into their bottom-right corner; the badge
   is now cut out of the file itself, so each one is shown whole. */
.shot {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
}

.shot img { display: block; width: 100%; }

.shot__caption {
  margin: 14px 0 0;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* A page that is not the front page: the hero is shorter and left-aligned. */
.subhero { text-align: left; max-width: var(--shell); padding: 72px 40px 24px; }
.subhero h1 { margin: 16px 0 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.0; letter-spacing: -0.02em; }
.subhero .hero__sub { margin: 20px 0 0; }
.subhero .hero__cta { justify-content: flex-start; margin-top: 30px; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.18s var(--ease);
}

.crumb:hover { color: var(--volt); }

/* Two phones side by side on the individuals page. */
.phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

@media (max-width: 760px) {
  .subhero { padding: 48px 20px 16px; }
  .subhero .hero__cta .btn { width: 100%; }
}


/* ═══════════════ Feature grid ═══════════════ */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: var(--gutter);
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.feature:not(:has(.feature__btn)) { padding: 28px 26px 30px; }
.feature:has(.feature__btn):hover { border-color: var(--volt-border); background: rgba(255, 255, 255, 0.055); }
.feature.is-open { border-color: var(--volt-border); }

.feature__btn {
  display: block;
  width: 100%;
  padding: 28px 26px 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.feature__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }
.feature__btn > svg { display: block; }

.feature h3,
.feature__title {
  display: block;
  margin: 18px 0 0;
  font: 700 19px/1.15 Oswald, sans-serif;
  text-transform: uppercase;
}

/* Now that each card keeps its own height, a shorter headline or summary would
   leave its card standing lower than the rest of the row. Reserving the room a
   two-line title and a four-line summary need lands them all on the same
   height, and because it is a minimum a longer German or Dutch line still
   grows instead of being cut.
   The px value ahead of each one is the same measurement written out, for a
   browser too old to know the lh unit. */
.feature__btn .feature__title { min-height: 44px; min-height: 2lh; }
.feature__btn .feature__body { min-height: 96px; min-height: 4lh; }

.feature p,
.feature__body {
  display: block;
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

.feature__why {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.18s var(--ease);
}

.js .feature__why { display: inline-flex; }
.feature__btn:hover .feature__why { color: var(--volt); }
.feature__why svg { transition: transform 0.2s var(--ease); }
.feature.is-open .feature__why svg { transform: rotate(180deg); }

/* Open unless script can open it, like the day and step cards. */
.feature__panel { display: grid; grid-template-rows: 1fr; }
.js .feature__panel { grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.js .feature.is-open .feature__panel { grid-template-rows: 1fr; }
.feature__panelin { overflow: hidden; min-height: 0; }

.feature__panelin .plain {
  margin: 0;
  padding: 16px 26px 24px;
  border-top: 1px solid var(--border);
}

.feature__panelin .plain li { padding: 9px 0 9px 22px; font-size: 14px; }

/* ═══════════════ The block runner screen (SCREENS.md § C6.2) ═══════════════ */

.wk {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 0;
  text-align: center;
}

.wk__top { display: flex; align-items: center; gap: 12px; }

.wk__close, .wk__audio {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-card);
}

.wk__audio { background: rgba(215, 255, 26, 0.16); }

.wk__mid { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.wk__sub {
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wk__label {
  font: 700 14px Oswald, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wk__ring { position: relative; margin: 20px auto 0; width: 170px; height: 170px; }
.wk__ring svg { display: block; }

.wk__ringtext {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wk__work {
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--volt);
}

.wk__secs {
  margin-top: 4px;
  font: 700 48px/1 Oswald, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.wk__now { margin-top: 14px; }

.wk__nowlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--volt);
}

.wk__nowlabel i { width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }

.wk__ex {
  margin: 8px 0 0;
  font: 700 30px/1 Oswald, sans-serif;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.wk__reps {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-card);
  font: 700 22px Oswald, sans-serif;
  font-variant-numeric: tabular-nums;
}

.wk__reps em {
  margin-left: 4px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--text-dim);
}

.wk__list { margin-top: 20px; text-align: left; }

.wk__section {
  margin: 0 0 6px;
  padding: 4px 6px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wk__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.wk__row--on { border-color: var(--volt); background: var(--volt-tint); }
.wk__row--on .wk__id { color: var(--volt); }
.wk__row--on .wk__name { font-weight: 700; }

.wk__id { min-width: 22px; font: 700 12px Oswald, sans-serif; letter-spacing: 0.06em; color: var(--text-dim); }
.wk__name { flex: 1; font: 600 14px Inter, sans-serif; }
.wk__n { font: 600 11px Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--text-dim); }

.wk__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 22px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.wk__coach {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wk__toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--volt);
}

.wk__toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}

.wk__btns { display: flex; gap: 10px; margin-left: auto; }

.wk__circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-raised);
}

.wk__circle--ghost { background: var(--surface-card); border: 1px solid var(--border-strong); }

/* Two phones side by side need to give a little at narrow widths. */
@media (max-width: 900px) {
  .phones { gap: 0; }
}


/* ═══════════════ App screen gallery ═══════════════ */

.gallery { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* The phone's layout box is a full 402pt wide whatever the scale, so on a
   narrow screen it would reach past the viewport and give the page a sideways
   scroll. Only its scaled rendering is meant to show. */
.gallery__stage {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.phone-wrap--gallery { transform: scale(0.76); margin: -105px 0; }

/* One screen at a time, all of them present so switching costs nothing. */
.slide { display: none; flex: 1; flex-direction: column; min-height: 0; }
.slide.is-on { display: flex; }

.gallery__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.gtab {
  padding: 12px 22px;
  border: 1px solid var(--border-chip);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-dim);
  font: 700 13px Oswald, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              background 0.18s var(--ease);
}

.gtab:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.30); }

.gtab.is-on {
  border-color: var(--volt);
  background: var(--volt-tint);
  color: var(--volt);
}

.gtab:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

.gallery__note {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

/* ═══════════════ Rest screen ═══════════════ */

.wk__ring--big { width: 200px; height: 200px; margin-top: 26px; }
.wk__secs--big { font-size: 52px; }

.wk__next { margin-top: 26px; }

.wk__nextlabel {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wk__next .wk__ex { margin-top: 10px; font-size: 28px; }

.wk__nextsub { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); }

.wk__skip { margin: auto 0 22px; }
.wk__skip .btn { width: 100%; min-height: 52px; }

/* ═══════════════ Today screen ═══════════════ */

.td { display: flex; flex: 1; flex-direction: column; padding: 26px 20px 0; }

/* HomeView builds this with OFitScreenHeader, whose eyebrow went white with
   the rest of them. The in-app labels that stayed volt — the readiness band,
   "WORK", "NOW · E4" — are untouched, because those views were not changed. */
.td__eyebrow {
  margin: 0;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.td__title {
  margin: 12px 0 0;
  font: 700 30px/1.05 Oswald, sans-serif;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.td__sub { margin: 10px 0 0; font-size: 14px; color: var(--text-dim); }

.td__card {
  margin-top: 20px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  background: var(--surface-card);
}

.td__card--volt { background: rgba(215, 255, 26, 0.06); border-color: rgba(215, 255, 26, 0.18); }

.td__cardtitle {
  margin: 0;
  font: 700 18px Oswald, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.td__cardbody { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }

.td__days { display: flex; gap: 6px; margin-top: 14px; }

.td__days span {
  flex: 1;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  font: 700 13px Oswald, sans-serif;
  text-align: center;
  color: var(--text-dim);
}

.td__days span.on { border-color: var(--volt); background: var(--volt-tint); color: var(--volt); }

.td__cta { margin: auto 0 0; padding: 20px 0 14px; }
.td__cta .btn { width: 100%; min-height: 56px; font-size: 16px; }

/* ═══════════════ Tab bar — exactly three items ═══════════════ */

.tabbar {
  display: flex;
  margin: 0 -20px;
  padding: 0 8px 22px;
  border-top: 1px solid var(--border);
  background: rgba(22, 24, 28, 0.98);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding-top: 11px;
  color: var(--text-dim);
}

.tab.on { color: var(--volt); }

.tab span {
  font: 600 9px Inter, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .phone-wrap--gallery { transform: scale(0.58); margin: -183px 0; }
  .gtab { padding: 11px 16px; font-size: 12px; }
}


/* ═══════════════ Enlarging a screenshot ═══════════════ */

.shot--zoom { cursor: zoom-in; transition: border-color 0.18s var(--ease); }
.shot--zoom:hover { border-color: var(--volt-border); }
.shot--zoom:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  background: rgba(6, 7, 9, 0.94);
  backdrop-filter: blur(10px);
}

.lightbox[hidden] { display: none; }

.lightbox__frame {
  max-width: 1600px;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
}

/* The captures carry a prototype badge in the last 3.4%; keep it clipped here
   too, or enlarging would put back what the page deliberately hides. */
.lightbox img { display: block; width: 100%; margin-bottom: -3.4%; }

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-chip);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.lightbox__close:hover { border-color: var(--volt); color: var(--volt); }
.lightbox__close:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

@media (max-width: 760px) {
  .lightbox { padding: 60px 14px; }
}


/* ═══════════════ One member, three days ═══════════════ */
/* What sits where a stock photograph would have gone. The brand's own object,
   the readiness dial, at three real values. Each card opens to show what made
   that score, using the engine's own weights. */

.week { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.day {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.day:hover { border-color: var(--volt-border); background: rgba(255, 255, 255, 0.055); }
.day.is-open { border-color: var(--volt-border); }

.day__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 34px 26px 26px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.day__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }

.day__name {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.day__dial { position: relative; margin-top: 22px; width: 124px; height: 124px; }
.day__dial svg { display: block; }

.day__score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 40px Oswald, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.day__band {
  margin-top: 20px;
  font: 700 22px Oswald, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--volt);
}

.day__say {
  margin-top: 12px;
  max-width: 260px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
}

.day__why {
  display: none;
  align-items: center;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.18s var(--ease);
}

.day__btn:hover .day__why { color: var(--volt); }
.day__why svg { transition: transform 0.2s var(--ease); }
.day.is-open .day__why svg { transform: rotate(180deg); }

/* Opening: a row that grows from nothing to its content height. */
/* Open by default, collapsed only once script is there to reopen it. Without
   script the factors are simply on the page rather than locked behind a button
   that cannot work. */
.day__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.js .day__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.js .day.is-open .day__panel { grid-template-rows: 1fr; }

/* The panel must have exactly ONE child. A second one lands in an implicit
   auto row that 0fr does not govern, and the panel never closes. min-height:0
   matters too, or the child keeps its content height. */
.day__panelin { overflow: hidden; min-height: 0; }

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

/* The label column has to hold the longest factor name in whichever language
   is showing, and every row has to keep its bars in line. Measured at 11px
   uppercase: "Fatigue" 56px, "Fáradtság" 75px, "Müdigkeit" 74px and the Dutch
   "Vermoeidheid" 104px. A single fixed width would either cut the Dutch word
   or waste 48px on the English one, so the column is set per language and the
   switcher already puts the language on <html>. */
:root { --fac-name: 62px; }
html[lang="hu"], html[lang="de"] { --fac-name: 80px; }
html[lang="nl"] { --fac-name: 110px; }

.fac li {
  display: grid;
  grid-template-columns: var(--fac-name) 1fr 26px 30px;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
}

.fac li + li { border-top: 1px solid var(--border-faint); }

.fac__name {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
}

.fac__track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-raised);
  overflow: hidden;
}

.fac__track i { display: block; height: 100%; border-radius: 3px; }

.fac__val {
  font: 700 13px Oswald, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fac__w {
  font: 600 10px Inter, sans-serif;
  color: var(--text-faint);
  text-align: right;
}

.fac__note {
  margin: 0;
  padding: 12px 26px 22px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: left;
}

.week .section__note { text-align: center; display: block; margin-top: 40px; }

@media (max-width: 900px) {
  .days { grid-template-columns: 1fr; }
  .day__btn { padding: 28px 22px 24px; }
  .fac, .fac__note { padding-left: 22px; padding-right: 22px; }
}


/* ═══════════════ The product behind the headline ═══════════════ */
/* A visitor should see what this is before reading a word: a phone with a
   health score on the right, a workforce dashboard on the left. Both are
   pushed past the viewport edge, faded and masked toward the middle, so the
   headline keeps the centre to itself. */

.props {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.props__laptop,
.props__phone {
  position: absolute;
  display: block;
}

.props__laptop {
  left: -14%;
  top: 50%;
  width: 46%;
  min-width: 520px;
  border-radius: 10px;
  transform: translate(0, -50%) perspective(1400px) rotateY(19deg) rotateX(4deg) rotateZ(-2deg);
  opacity: 0.42;
  /* Clip the badge baked into the capture's last 3.4%, as everywhere else. */
  clip-path: inset(0 0 3.4% 0 round 10px);
  /* Two masks intersected: fade toward the middle so the words stay clear, and
     fade at the foot so the picture does not end on a hard horizontal cut. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%),
                      linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%),
              linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}

.props__phone {
  right: -3%;
  top: 50%;
  width: 19%;
  min-width: 230px;
  transform: translate(0, -50%) perspective(1200px) rotateY(-16deg) rotateX(3deg) rotateZ(2deg);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 52%, transparent 94%),
                      linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, #000 0%, #000 52%, transparent 94%),
              linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}

/* The words sit above them, on their own patch of dark. */
.hero {
  position: relative;
  z-index: 1;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -12% -14%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 62% at 50% 50%,
              rgba(10, 11, 14, 0.92) 0%, rgba(10, 11, 14, 0.74) 52%, transparent 78%);
}

/* The sub-page hero is a narrow centred column, not full-bleed, so the sideways
   spill above would hang past the viewport on a phone and let the whole page be
   dragged left. Spill only up and down here: the gradient already fades out
   before the column's own edges, so nothing gains a hard edge. */
.subhero::before { inset: -12% 0; }


/* They arrive rather than appear: each one slides in from its own edge and
   turns a little further square as it settles, on the house curve. This runs
   when the hero is reached — on load, and again if it is scrolled back to
   after leaving. It is not ambient: nothing moves while you sit and read. */
.js .props__laptop,
.js .props__phone {
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.js .props__laptop {
  transform: translate(-46px, -50%) perspective(1400px) rotateY(27deg) rotateX(4deg) rotateZ(-2deg);
  transition-delay: 0.16s;
}

.js .props__phone {
  transform: translate(50px, -50%) perspective(1200px) rotateY(-25deg) rotateX(3deg) rotateZ(2deg);
  transition-delay: 0.30s;
}

.js .props.is-in .props__laptop {
  opacity: 0.42;
  transform: translate(0, -50%) perspective(1400px) rotateY(19deg) rotateX(4deg) rotateZ(-2deg);
}

.js .props.is-in .props__phone {
  opacity: 0.55;
  transform: translate(0, -50%) perspective(1200px) rotateY(-16deg) rotateX(3deg) rotateZ(2deg);
}

@media (max-width: 1200px) {
  /* Not enough width left for the words once both are in frame. The phone
     stays, because it is the quicker of the two to recognise, but it moves
     further out and dims so it cannot compete with the headline. */
  .props__laptop { display: none; }
  .props__phone { right: -20%; width: 30%; min-width: 210px; }
  .js .props.is-in .props__phone { opacity: 0.26; }
}

@media (max-width: 820px) {
  /* Below this the headline needs the whole width. */
  .props { display: none; }
}

/* ═══════════════ Trust strip ═══════════════ */

.trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 26px 40px;
  list-style: none;
}

.trust__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 12px Inter, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--text-dim);
}

.trust__list svg { flex: none; }

/* ═══════════════ Skip link ═══════════════ */
/* First thing a keyboard reaches, invisible until it is focused. */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 22px;
  border-radius: 0 0 var(--r-card) 0;
  background: var(--volt);
  color: var(--black);
  font: 700 13px Oswald, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip:focus { left: 0; }

@media (max-width: 900px) {
  .trust__list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .trust__list { grid-template-columns: 1fr; padding: 22px 20px; }
}


/* ═══════════════ Legal pages ═══════════════ */
/* Long-form reading: one narrow column, generous leading, nothing decorative. */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 40px 96px;
}

.legal h1 {
  margin: 16px 0 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.legal__lead {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}

.legal__warn {
  margin: 34px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--critical);
  border-radius: var(--r-card);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.legal__warn strong { display: block; margin-bottom: 6px; color: var(--text); }

.legal__block {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.legal__block h2 { font-size: 21px; line-height: 1.2; }

/* The note under each heading says what belongs there; it is not the text. */
.legal__todo {
  margin: 12px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--border-chip);
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
}

.legal__foot {
  margin-top: 46px;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 760px) {
  .legal { padding: 44px 20px 68px; }
}


/* ═══════════════ History screen (HistoryViews.swift) ═══════════════ */
/* Its real order: header, filter, summary, the two progress cards, readiness,
   the range picker, then the sessions. The screen scrolls in the app, so this
   shows the top of it with the tab bar pinned, as a capture would. */

.hs { display: flex; flex: 1; flex-direction: column; padding: 22px 20px 0; }

.hs__eyebrow {
  margin: 0;
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.hs__title { margin: 12px 0 0; font: 700 30px/1.05 Oswald, sans-serif; text-transform: uppercase; }
.hs__sub { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }

/* A plain volt label with an icon, not a button. */
.hs__filter {
  display: flex; align-items: center; gap: 7px; margin: 16px 0 0;
  font: 600 13px Inter, sans-serif; color: var(--volt);
}

.hs__summary {
  display: flex; margin-top: 16px; padding: 16px 0;
  border: 1px solid rgba(215, 255, 26, 0.18);
  border-radius: var(--r-panel);
  background: rgba(215, 255, 26, 0.06);
}

.hs__summary span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hs__summary b { font: 700 20px Oswald, sans-serif; font-variant-numeric: tabular-nums; }
.hs__summary i {
  font: 600 9px Inter, sans-serif; letter-spacing: 0.10em; text-transform: uppercase;
  font-style: normal; color: var(--text-dim);
}

/* Cardio minutes and sessions, side by side, each with its own bars. */
.hs__pair { display: flex; gap: 12px; margin-top: 14px; }

.hs__mini-card {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-panel);
  background: var(--surface-card);
}

.hs__minihead { display: flex; align-items: baseline; gap: 4px; }
.hs__minihead i {
  flex: 1; font: 600 10px Inter, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; font-style: normal; color: var(--text-dim);
}
.hs__minihead b { font: 700 26px Oswald, sans-serif; font-variant-numeric: tabular-nums; }
.hs__minihead em { font: 600 9px Inter, sans-serif; font-style: normal; color: var(--text-dim); }

.hs__mini { display: block; width: 100%; height: 34px; }
.hs__minicap { font: 600 9px Inter, sans-serif; line-height: 1.35; color: var(--text-dim); }

.hs__card {
  margin-top: 14px; padding: 14px 12px 12px;
  border: 1px solid var(--border); border-radius: var(--r-panel);
  background: var(--surface-card);
}

.hs__cardtop { display: flex; align-items: baseline; gap: 8px; }
.hs__cardtitle {
  flex: 1; margin: 0; font: 700 14px Oswald, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* The latest score takes its band's colour: volt at 75 and over, lime from 55,
   amber below. This one is 83. */
.hs__latest { font: 700 20px Oswald, sans-serif; font-variant-numeric: tabular-nums; color: var(--volt); }
.hs__band {
  font: 600 9px Inter, sans-serif; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-dim);
}

.hs__chart { display: block; width: 100%; height: 78px; margin-top: 10px; }

/* Capsules, the chosen one volt with black on it. */
.hs__range { display: flex; gap: 8px; margin-top: 14px; }
.hs__range span {
  flex: 1; padding: 10px 0; border-radius: 999px; background: var(--surface-raised);
  font: 600 13px Inter, sans-serif; text-align: center; color: var(--text-dim);
}
.hs__range span.on { background: var(--volt); color: var(--black); }

.hs__section {
  margin: 18px 0 8px; font: 700 14px Oswald, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* One grouped list with hairlines between, not a stack of separate cards. */
.hs__list {
  border: 1px solid var(--border); border-radius: var(--r-group);
  background: var(--surface-card); overflow: hidden;
}

.hs__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 64px; }
.hs__divider { height: 1px; margin-left: 16px; background: var(--border); }

.hs__date { width: 48px; display: flex; flex-direction: column; align-items: center; }
.hs__date b { font: 700 22px Oswald, sans-serif; font-variant-numeric: tabular-nums; }
.hs__date i {
  font: 600 9px Inter, sans-serif; text-transform: uppercase;
  font-style: normal; color: var(--text-dim);
}

.hs__rowmain { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hs__rowmain b { font: 600 14px Inter, sans-serif; }
.hs__rowmain i { font-style: normal; font-size: 12px; color: var(--text-dim); }

.hs .tabbar { margin-top: auto; }

/* ═══════════════ Footer ═══════════════ */

.footer {
  border-top: 1px solid var(--border);
  /* Translucent, so the backdrop carries on behind the foot of the page. */
  background: rgba(8, 9, 12, 0.72);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 38px 40px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

.footer__links a {
  font: 600 11px Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer__links a:hover { color: var(--text); }

.footer__todo {
  width: 100%;
  padding: 14px 16px;
  border: 1px dashed var(--critical);
  border-radius: var(--r-card);
  font-size: 12px;
  color: var(--text-dim);
}

.footer__todo strong { color: var(--text); }

/* ═══════════════ Responsive ═══════════════ */

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  /* The links are not hidden here any more — they move into the menu panel,
     which the navigation block above sets up. Hiding them here would win on
     source order and leave a phone with no way to reach the sections. */
}

@media (max-width: 760px) {
  .nav { padding: 16px 20px; gap: 16px; }
  .hero__bg { min-height: clamp(420px, calc(100dvh - 240px), 620px); }
  .hero { padding: 56px 20px 54px; }
  .hero__sub { font-size: 17px; }
  .split { padding: 0 20px 48px; }
  .panel { padding: 28px 22px 26px; }
  .panel .btn, .hero__cta .btn { width: 100%; }
  /* Let each mock set its own height instead of padding out the shorter one. */
  .panel__stage { min-height: 0; margin: 24px 0 8px; }
  .proof { grid-template-columns: 1fr; gap: 34px; padding: 44px 20px 20px; }
  .proof__item + .proof__item { border-left: 0; border-top: 1px solid var(--border); padding-top: 34px; }
  .proof__caveat, .footer__inner { padding-left: 20px; padding-right: 20px; }
  .phone-wrap { transform: scale(0.46); margin: -236px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* Without the transition and the keyframes, show the end state outright
     rather than leaving the content invisible. */
  .js [data-reveal] { opacity: 1; transform: none; }
  /* The props keep their angles; only the arrival is dropped. */
  .js .props__laptop { opacity: 0.42; transform: translate(0, -50%) perspective(1400px) rotateY(19deg) rotateX(4deg) rotateZ(-2deg); }
  .js .props__phone { opacity: 0.55; transform: translate(0, -50%) perspective(1200px) rotateY(-16deg) rotateX(3deg) rotateZ(2deg); }
}