/*
 * Jim AI — public site (D-055, D-059).
 *
 * Built against the `design_handoff_jim_ai_site` bundle, which is a design
 * deliverable rather than source and is gitignored — this file, not that
 * bundle, is the repo's truth for the site's styling.
 *
 * The token block below is that bundle's `tokens/*.css` inlined rather than
 * `@import`ed, deliberately: the build copies this one file and fingerprints
 * it by content hash, so an @import would resolve to a URL that is never
 * published and every token would fall back to nothing.
 *
 * Two readers have to be served at once and they want different things:
 * someone deciding whether to sign up, and a carrier reviewer checking that
 * specific required sentences are present. The design leans marketing; the
 * legal pages stay plain and high-contrast, because a reviewer skim-reading
 * for "message and data rates may apply" should not have to fight the layout.
 *
 * Motion is opt-out. `site.js` sets `animation: jimReveal ...` on each section
 * as it scrolls in, so the keyframe lives here and every animated rule is
 * cancelled under `prefers-reduced-motion`. The script also declines to touch
 * anything when that query matches, so the two halves agree.
 */

/* ==========================================================================
   Tokens — from the design system. Do not invent values outside this block.
   ========================================================================== */

:root {
  /* Brand */
  --jim-lime: #b9ff2e;
  --jim-lime-hover: #d4ff7a;
  --jim-lime-16: rgba(185, 255, 46, 0.16);
  --jim-lime-26: rgba(185, 255, 46, 0.26);

  /* Neutrals — near-black gym palette */
  --jim-ink-900: #08090c;
  --jim-ink-850: #0a0c10;
  --jim-ink-800: #0b0d12;
  --jim-ink-750: #0d0f14;
  --jim-ink-700: #0e1015;
  --jim-ink-600: #16181d;
  --jim-ink-500: #1a1d25;
  --jim-line: #1c1f27;
  --jim-line-strong: #23262e;
  --jim-key: #3a3f47;
  --jim-key-alt: #2b3037;

  /* Text */
  --jim-text-1: #f2f3f5;
  --jim-text-2: #d3d7de;
  --jim-text-3: #9ba1ad;
  --jim-text-4: #6e7684;
  --jim-text-5: #565d6a;
  --jim-text-6: #454c58;

  /* Semantic aliases */
  --surface-page: var(--jim-ink-900);
  --surface-card: var(--jim-ink-800);
  --surface-raised: var(--jim-ink-700);
  --surface-footer: var(--jim-ink-850);
  --border-default: var(--jim-line);
  --border-strong: var(--jim-line-strong);
  --accent: var(--jim-lime);
  --accent-hover: var(--jim-lime-hover);
  --on-accent: var(--jim-ink-900);
  --text-body: var(--jim-text-3);
  --text-heading: var(--jim-text-1);
  --text-muted: var(--jim-text-4);
  --text-legal: var(--jim-text-5);

  --grad-card: linear-gradient(180deg, #0d0f14 0%, #0a0c10 100%);
  --grad-card-accent: linear-gradient(180deg, rgba(18, 22, 14, 0.86) 0%, rgba(11, 13, 18, 0.82) 70%);
  --grad-hero-scrim: linear-gradient(
    100deg,
    #08090c 0%,
    rgba(8, 9, 12, 0.93) 34%,
    rgba(8, 9, 12, 0.62) 60%,
    rgba(8, 9, 12, 0.55) 100%
  );
  --grad-page-top: radial-gradient(120% 60% at 50% -10%, #14161c 0%, #08090c 60%);

  /* Type */
  --font-sans: Archivo, Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --type-hero: 800 68px/0.98 var(--font-sans);
  --type-hero-tracking: -0.035em;
  --type-h2: 800 42px/1.05 var(--font-sans);
  --type-h2-tracking: -0.03em;
  --type-h3: 700 27px/1.2 var(--font-sans);
  --type-h4: 700 22px/1.25 var(--font-sans);
  --type-price: 800 44px/1 var(--font-sans);
  --type-lead: 400 19px/1.55 var(--font-sans);
  --type-body: 400 16px/1.6 var(--font-sans);
  --type-body-sm: 400 15px/1.6 var(--font-sans);
  --type-legal: 400 12px/1.7 var(--font-sans);
  --type-eyebrow: 500 11px/1.2 var(--font-mono);
  --type-eyebrow-tracking: 0.14em;
  --type-data: 500 13px/1.4 var(--font-mono);
  --type-stat: 800 18px/1.15 var(--font-sans);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;
  --space-18: 72px;
  --space-24: 96px;
  --space-28: 110px;
  --page-max: 1200px;
  --prose-max: 860px;
  --page-gutter: var(--space-10);
  --grid-gap: var(--space-5);
  --section-pad-y: var(--space-28);

  /* Effects */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --radius-phone: 56px;
  --border-1: 1px solid var(--border-default);
  --border-accent: 1px solid var(--accent);
  --shadow-phone: 0 60px 100px -34px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-key: 0 1px 0 rgba(0, 0, 0, 0.5);
  --blur-card: blur(8px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur-med: 300ms;
  --dur-slow: 620ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--surface-page);
  background-image: var(--grad-page-top);
  background-repeat: no-repeat;
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * The page-entry slide, on the marketing and policy wrappers rather than on
 * `body` itself.
 *
 * `jimPageIn` translates, and an element running a transform animation becomes
 * the containing block for every `position: fixed` descendant. On `body` that
 * is harmless for a marketing page with nothing fixed on it, and fatal for the
 * training app (D-068): the rest timer and the log bar stopped being pinned to
 * the viewport and started sitting two thousand pixels down the document. The
 * app has its own entry animation on `.app-page`, which only touches opacity.
 */
.page,
.page-doc {
  animation: jimPageIn 300ms var(--ease-out) both;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-heading);
}

h1 {
  font: var(--type-hero);
  letter-spacing: var(--type-hero-tracking);
}

h2 {
  font: var(--type-h2);
  letter-spacing: var(--type-h2-tracking);
}

h3 {
  font: var(--type-h3);
  letter-spacing: -0.02em;
}

h4 {
  font: var(--type-h4);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
}

img,
svg {
  max-width: 100%;
}

/* Visible only to a screen reader. Load-bearing: the comparison table's marks
   are glyphs, so the yes/no meaning exists nowhere else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.page,
.page-doc {
  overflow-x: clip;
}

/*
 * Scoped to the marketing and policy wrappers on purpose.
 *
 * This was `main > section` until the training app arrived (D-068). Those
 * screens are also sections inside a `<main>`, so the bare selector handed
 * every panel on them 110px of page-section padding — invisible wherever the
 * panel's own class happened to set its own, and a 110px hole wherever it
 * did not. A rule that reaches two products cannot be tuned for either.
 */
.page main > section,
.page-doc main > section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--section-pad-y) var(--page-gutter);
}

.section-sub {
  max-width: 62ch;
  margin: var(--space-3) 0 40px;
  font-size: 17px;
  color: var(--text-body);
}


.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

/* The header itself is the flex row — brand, nav, CTA are siblings, there is no
   inner wrapper. The padding centres the content on a full-bleed bar without
   one. Not sticky per design — it must paint above the hero backdrop. */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--page-gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text-heading);
}

.brand:hover {
  color: var(--text-heading);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.brand-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-jim {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.brand-ai {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav a {
  color: var(--text-body);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.site-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* The right-hand group: the way into the companion screens, then the call to
   action. Both survive the narrow breakpoint that hides `.site-nav`. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header-account {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.header-account:hover {
  color: var(--accent);
}

/* The legal pages' header. Same bar, but only a brand and a back link, so it
   does not stick: on a long policy page a fixed bar just eats reading height,
   and there is no in-page nav to keep reachable. */
.doc-header {
  position: static;
}

.header-back {
  margin-left: auto;
  font: var(--type-data);
  color: var(--text-muted);
}

.header-back:hover {
  color: var(--text-heading);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: var(--space-11);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary,
.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-heading);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--jim-ink-600);
  border-color: var(--jim-key);
  color: var(--text-heading);
}

.btn-sm {
  height: 34px;
  padding: 0 var(--space-4);
  font-size: 14px;
}

.btn-lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: 17px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--jim-ink-600);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-body);
}

.badge-accent {
  border-color: var(--jim-lime-26);
  background: var(--jim-lime-16);
  color: var(--accent);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: jimPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  padding: 34px 32px;
  border: var(--border-1);
  border-radius: var(--radius-card);
  background: var(--grad-card);
}

.card-plain {
  background: var(--surface-card);
}

.card-accent {
  border: 1px solid var(--accent);
  background: var(--grad-card-accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 72px var(--page-gutter) 96px;
  isolation: isolate;
}

.hero > * {
  max-width: none;
}

.hero-backdrop {
  position: absolute;
  inset: -120px -50vw -40px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(0.95) contrast(1.06) brightness(0.7);
  animation: jimPan 44s ease-in-out infinite;
  will-change: transform;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}

/* Three stacked scrims rather than one: the headline sits over the brightest
   part of the photograph, and a single gradient dark enough to carry it made
   the right-hand side flat. */
.hero-scrim-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    #08090c 0%,
    rgba(8, 9, 12, 0.93) 34%,
    rgba(8, 9, 12, 0.62) 60%,
    rgba(8, 9, 12, 0.55) 100%
  );
}

.hero-scrim-2 {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(8, 9, 12, 0) 30%,
    rgba(8, 9, 12, 0.75) 100%
  );
}

.hero-scrim-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 12, 0.9) 0%,
    rgba(8, 9, 12, 0) 22%,
    rgba(8, 9, 12, 0) 58%,
    #08090c 100%
  );
}

/* Wide enough that the <br> in the headline is the only thing that breaks it.
   Sized in px, not ch: `ch` resolves against this element's 16px body font, not
   the 68px display face the line actually has to fit. */
.hero-copy {
  max-width: 620px;
}

.hero-copy h1 {
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero-lead {
  font-size: 19px;
  line-height: 1.55;
  color: #a7aeba;
  max-width: 460px;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: var(--space-8) 0 var(--space-5);
}

.hero-cta .btn {
  padding: 16px 26px;
  font-size: 16px;
}

.hero-cta .btn-ghost {
  background: none;
  border: none;
  padding: 16px 8px;
  height: auto;
  color: #a7aeba;
  font-weight: 600;
  font-size: 15px;
}

.hero-cta .btn-ghost:hover {
  background: none;
  color: var(--text-heading);
}

.hero-fine {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 22px 0 0;
}

/* The rotating "225x5 / bench" stat. Large outlined numerals per design.
   `is-out` is set by site.js for the swap. */
.lift-log {
  position: absolute;
  left: var(--space-6);
  bottom: -28px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 22px;
  pointer-events: none;
  white-space: nowrap;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.lift-log.is-out {
  opacity: 0;
  transform: translateY(16px);
}

.lift-log-value {
  font-family: var(--font-mono);
  font-size: 128px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--jim-lime-26);
}

.lift-log-label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(155, 161, 173, 0.42);
}

/* ==========================================================================
   Phone mockup
   ========================================================================== */

.phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.phone {
  position: relative;
  width: 358px;
  padding: 10px;
  border-radius: var(--radius-phone);
  background: linear-gradient(155deg, #4a5059 0%, #191c22 26%, #0d0f14 58%, #2f343c 100%);
  box-shadow: var(--shadow-phone);
  will-change: transform;
}

.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--jim-key-alt);
}

.phone-btn-mute {
  left: -3px;
  top: 116px;
  height: 28px;
}

.phone-btn-up {
  left: -3px;
  top: 162px;
  height: 54px;
}

.phone-btn-down {
  left: -3px;
  top: 228px;
  height: 54px;
}

.phone-btn-power {
  right: -3px;
  top: 186px;
  height: 84px;
}

.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 46px;
  background: var(--jim-ink-800);
}

/* --- Status bar --- */

.status-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5) var(--space-1);
  font: var(--type-data);
  color: var(--text-heading);
}

.status-time {
  font-weight: 600;
  font-size: 14px;
}

.status-notch {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: #000;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-bars,
.status-net {
  font-size: 11px;
  color: var(--text-heading);
}

/* Four <i> elements, drawn as a rising signal staircase. */
.status-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.status-bars i {
  width: 3px;
  border-radius: 1px;
  background: var(--text-heading);
}

.status-bars i:nth-child(1) {
  height: 40%;
}

.status-bars i:nth-child(2) {
  height: 60%;
}

.status-bars i:nth-child(3) {
  height: 80%;
}

.status-bars i:nth-child(4) {
  height: 100%;
}

.status-battery {
  display: flex;
  align-items: center;
  gap: 1px;
}

.status-battery-body {
  width: 22px;
  height: 11px;
  padding: 1.5px;
  border: 1px solid rgba(242, 243, 245, 0.45);
  border-radius: 3px;
}

.status-battery-fill {
  width: 72%;
  height: 100%;
  border-radius: 1px;
  background: var(--text-heading);
}

.status-battery-cap {
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: rgba(242, 243, 245, 0.45);
}

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

.convo-head {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--jim-line);
  background: rgba(22, 24, 29, 0.6);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  text-align: center;
}

/* Three tracks with equal side columns rather than space-between: the back
   chevron and the SMS label are different widths, so space-between would push
   the avatar off the row's centre line and out of line with the name below. */
.convo-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.convo-back {
  justify-self: start;
  color: var(--jim-lime);
  font-size: 20px;
  line-height: 1;
}

.convo-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.convo-sms {
  justify-self: end;
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.convo-name {
  margin-top: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, var(--jim-text-2));
}

/* --- Thread --- */

.thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: 288px;
  padding: 18px 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.thread-row {
  display: flex;
}

.thread-row.mine {
  justify-content: flex-end;
}

.thread-row.theirs {
  justify-content: flex-start;
}

.bubble-mine,
.bubble-theirs {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.4;
}

/* iMessage blue is not used anywhere: this is the brand thread, and a lime
   outgoing bubble is what the design specifies. */
.bubble-mine {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 6px;
}

.bubble-theirs {
  background: var(--jim-ink-500);
  color: var(--jim-text-2);
  border-bottom-left-radius: 6px;
}

.typing {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--jim-ink-500);
  padding: 13px 15px;
  border-radius: 18px 18px 18px 5px;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a92a0;
  animation: jimDots 1.2s infinite;
}

.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes jimDots {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

@keyframes jimIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimPageIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimPageOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes jimPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes jimTypeNum {
  0% {
    max-width: 0;
  }
  55%,
  100% {
    max-width: 96px;
  }
}

@keyframes jimCheck {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.6);
  }
  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes jimSendOut {
  0% {
    opacity: 0;
    transform: translateX(18px) scale(0.94);
  }
  18%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimSendBack {
  0%,
  38% {
    opacity: 0;
    transform: translateX(-14px) scale(0.94);
  }
  55%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* --- Composer --- */

.composer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--jim-line);
}

.composer-plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jim-ink-500);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.composer-field {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--jim-line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--jim-text-2);
}

.composer-placeholder {
  color: var(--text-muted);
}

/* The text site.js "types" into the field, character by character. */
.composer-draft {
  color: var(--text-heading);
  white-space: pre;
}

.composer-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  background: var(--accent);
  animation: jimCaret 1s steps(2, start) infinite;
}

.composer-send {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jim-ink-500);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 15px;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* site.js toggles this the moment the draft is non-empty. */
.composer-send.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Keyboard --- */

.keyboard {
  padding: var(--space-2) 5px var(--space-1);
  background: var(--jim-ink-600);
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 6px;
}

.kb-row-2 {
  padding: 0 14px;
}

.kb-row-inner {
  display: contents;
}

.key,
.key-mod {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--jim-key);
  box-shadow: var(--shadow-key);
  color: var(--text-heading);
  font-size: 15px;
  display: grid;
  place-items: center;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.key-mod {
  background: var(--jim-key-alt);
  font-size: 12px;
  color: var(--jim-text-2);
}

/* site.js flags the key it is "typing". */
.key.is-on,
.key-mod.is-on {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(1px);
}

.key-shift,
.key-back {
  flex: 0 0 40px;
}

.key-num {
  flex: 0 0 44px;
}

.key-emoji {
  flex: 0 0 34px;
}

.key-space {
  flex: 1 1 auto;
}

.key-return {
  flex: 0 0 70px;
}

.home-indicator {
  width: 132px;
  height: 5px;
  margin: var(--space-2) auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--jim-key);
}

/* ==========================================================================
   Features
   ========================================================================== */

/* The features band sits directly under the hero, so it loses the top padding
   the generic section rule would give it. */
.features {
  padding: 40px var(--page-gutter) 100px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-title {
  margin-bottom: var(--space-3);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-heading);
}

.feature-title em {
  font-style: italic;
  color: var(--accent);
}

.feature-body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  text-wrap: pretty;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how {
  position: relative;
  overflow: hidden;
  padding: 20px var(--page-gutter) 110px;
}

.how > h2 {
  position: relative;
  margin-bottom: 44px;
}

.how-ghost-list {
  position: absolute;
  right: 40px;
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 20px;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(155, 161, 173, 0.22);
  pointer-events: none;
}

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

/* Each step is a <button role="tab"> whose children are spans, so it needs a
   full control reset and its own block formatting. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px 0 0;
  border: 0;
  border-top: 2px solid var(--border-strong);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.step[aria-selected="true"] {
  border-top-color: var(--accent);
}

.step-panel,
.step-title,
.step-body,
.step-detail,
.step-index {
  display: block;
}

.step-index {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--text-muted);
}

.step[aria-selected="true"] .step-index {
  color: var(--accent);
}

.step-panel {
  height: 132px;
  width: 100%;
  border: var(--border-1);
  border-radius: 14px;
  background: var(--jim-ink-800);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-art {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0.32;
  transition: opacity 240ms ease;
}

.step[aria-selected="true"] .step-art {
  opacity: 1;
}

.step-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-heading);
}

.step-body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
}

.step-detail {
  display: none;
  margin: 0;
  font: var(--type-body-sm);
  color: var(--accent);
}

.step[aria-selected="true"] .step-detail {
  display: block;
}

/* --- Step 1: the signup form mock --- */

.mock-form {
  justify-content: center;
  gap: 9px;
  width: 148px;
  margin: 0 auto;
}

.mock-input {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #24272f;
  border-radius: 8px;
  background: #0e1015;
  gap: 1px;
}

.mock-input span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #dfe3e9;
  overflow: hidden;
  white-space: nowrap;
  animation: jimTypeNum 4s steps(14) infinite;
}

.mock-caret {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background: var(--accent);
  animation: jimCaret 1s steps(1) infinite;
}

.mock-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  animation: jimCheck 4s ease-in-out infinite;
}

/* Two <i> elements standing in for the two lines of disclosure text. */
.mock-bars {
  flex: 1;
  display: grid;
  gap: 6px;
}

.mock-bars i {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--jim-ink-500);
}

.mock-bars i:last-child {
  width: 72%;
}

/* --- Step 2: the chat mock --- */

.mock-chat {
  justify-content: center;
  gap: 8px;
  width: 168px;
  margin: 0 auto;
}

.mock-chat-out,
.mock-chat-in {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.4;
}

.mock-chat-out {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-bottom-right-radius: 3px;
  animation: jimSendOut 3.4s ease-in-out infinite;
}

.mock-chat-in {
  align-self: flex-start;
  background: var(--jim-ink-500);
  color: #e6e9ee;
  border-bottom-left-radius: 3px;
  animation: jimSendBack 3.4s ease-in-out infinite;
}

/* --- Step 3: the trend chart --- */

.mock-chart {
  position: relative;
  justify-content: flex-end;
}

.mock-chart svg {
  width: 100%;
  height: 100%;
}

.trend-area {
  opacity: 0;
  animation: jimTrendArea 5.4s ease-out infinite both;
}

.trend-line {
  stroke-dasharray: 230;
  animation: jimTrendLine 5.4s cubic-bezier(0.3, 0.7, 0.3, 1) infinite both;
}

.trend-dot {
  opacity: 0;
  animation: jimTrendDot 5.4s ease-out infinite both;
}

.trend-dot:nth-child(5) { animation-delay: 0.55s; }
.trend-dot:nth-child(6) { animation-delay: 0.77s; }
.trend-dot:nth-child(7) { animation-delay: 0.99s; }
.trend-dot:nth-child(8) { animation-delay: 1.21s; }
.trend-dot:nth-child(9) { animation-delay: 1.43s; }
.trend-dot:nth-child(10) { animation-delay: 1.65s; }
.trend-dot:nth-child(11) { animation-delay: 1.87s; }

@keyframes jimTrendLine {
  0% {
    stroke-dashoffset: 230;
  }
  34% {
    stroke-dashoffset: 0;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

/* The cards and the radar share one grid area so the radar sits *behind* the
   Pro card, which is what the markup asks for and what its translucent
   background exists to allow. Overlapping them by grid placement rather than by
   absolute offsets means the two stay registered to each other at every width,
   with no magic percentages to drift. */
.pricing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 150px;
}

.pricing > h2 {
  margin-bottom: 12px;
}

.pricing > .section-sub {
  margin-bottom: 44px;
}

.price-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  align-items: start;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.price-badge {
  position: absolute;
  top: -11px;
  left: 32px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.price-head {
  margin-bottom: var(--space-6);
}

/* All three are spans in the markup, so they need to be told to stack. */
.price-eyebrow,
.price-amount,
.price-note {
  display: block;
}

.price-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.price-eyebrow-accent {
  color: var(--accent);
}

.price-amount {
  margin: var(--space-3) 0 var(--space-2);
  font: var(--type-price);
  letter-spacing: -0.03em;
  color: var(--text-heading);
}

.price-period {
  display: inline;
  font: var(--type-body);
  color: var(--text-muted);
}

.price-note {
  margin: 0;
  font: var(--type-body-sm);
  color: var(--text-body);
}

.price-list {
  flex: 1;
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.price-list li {
  position: relative;
  padding-left: var(--space-6);
  font: var(--type-body-sm);
  color: var(--jim-text-2);
}

.price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- Radar --- */

/* Behind the Pro card, as the markup specifies. Placed in the same grid area as
   the cards and pushed onto the right-hand column, so the shape reads through
   the Pro card's translucent background and its six stat labels sit out around
   the card edges where site.js can cycle them in view.
   `aria-hidden` is already on it in the markup; `pointer-events: none` keeps it
   from swallowing clicks meant for the card sitting on top of it. */
.radar {
  position: absolute;
  z-index: 0;
  right: 4px;
  top: 70px;
  width: 420px;
  height: 400px;
  opacity: 0.78;
  pointer-events: none;
}

.radar-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 255, 46, 0.09) 0%, rgba(185, 255, 46, 0.02) 46%, rgba(8, 9, 12, 0) 70%);
  pointer-events: none;
}

.radar-stage {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-stage svg {
  width: 300px;
  height: 300px;
}

.radar-shape {
  width: 100%;
  height: 100%;
}

.radar-stat {
  position: absolute;
  display: grid;
  gap: 2px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.radar-stat-word {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.radar-stat-value {
  font: var(--type-stat);
  color: var(--text-heading);
}

/* The six hexagon vertices, as percentages of the 320x320 viewBox the SVG and
   site.js both use: centre (160,160), outer radius 140. Top vertex is
   (160,20) = 50%/6.25%; the rest follow at 60 degree steps. Each label is
   nudged a little further out than its vertex so it clears the dashed ring. */
.radar-strength {
  left: 50%;
  top: 1%;
}

.radar-volume {
  left: 91%;
  top: 26%;
}

.radar-mobility {
  left: 91%;
  top: 74%;
}

.radar-recovery {
  left: 50%;
  top: 99%;
}

.radar-endurance {
  left: 9%;
  top: 74%;
}

.radar-consistency {
  left: 9%;
  top: 26%;
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.comparison {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 110px;
}

.comparison > h2 {
  text-align: left;
  margin-bottom: 12px;
}

.comparison > .section-sub {
  text-align: left;
  margin-bottom: 40px;
}

.compare {
  overflow-x: auto;
  border: var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--jim-line);
  text-align: center;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.compare thead th.is-us {
  color: var(--accent);
}

.compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--jim-text-2);
  white-space: nowrap;
}

.mark-yes {
  color: var(--accent);
  font-size: 17px;
}

.mark-no {
  color: var(--jim-text-6);
  font-size: 17px;
}

.mark-partial {
  color: var(--text-muted);
  font-size: 17px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  max-width: var(--prose-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 110px;
}

.faq > h2 {
  margin-bottom: 40px;
}

.faq-list {
  border-top: var(--border-1);
}

.faq-item {
  border-bottom: var(--border-1);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.faq-q:hover {
  color: var(--accent);
}

.faq-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jim-ink-600);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}

.faq-a {
  padding: 0 0 var(--space-5);
  margin: 0;
  max-width: 70ch;
  font: var(--type-body-sm);
  color: var(--text-body);
  animation: jimFaqOpen var(--dur-med) var(--ease-out) both;
}

/* site.js sets this, waits 300ms, then sets `hidden` — so the two durations
   have to agree or the answer vanishes mid-animation. */
.faq-a.is-closing {
  animation: jimFaqClose var(--dur-med) var(--ease-in) both;
}

.faq-a[hidden] {
  display: none;
}

/* ==========================================================================
   Signup panel
   ========================================================================== */

#start {
  padding: 20px var(--page-gutter) 110px;
}

.start-panel {
  border: var(--border-1);
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, #12160e 0%, #0b0d12 55%);
  padding: var(--space-14) 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}

.start-panel > div:first-child {
  text-align: left;
}

.start-panel h2 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 18px;
  text-align: left;
}

.start-lead {
  font: var(--type-lead);
  color: var(--jim-text-3);
  max-width: 400px;
  margin: 0 0 30px;
}

.start-note {
  margin: var(--space-5) 0 0;
  font: var(--type-legal);
  color: var(--text-muted);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--jim-ink-850);
  border: var(--border-1);
  border-radius: 18px;
  padding: 28px;
  text-align: left;
}

.field {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input {
  width: 100%;
  height: var(--space-11);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--jim-ink-900);
  color: var(--text-heading);
  font: var(--type-body);
}

.field input::placeholder {
  color: var(--jim-text-6);
}

.field input:focus {
  border-color: var(--accent);
  outline: none;
}

/* The consent checkbox. Ships unchecked and unstyled-by-default on purpose —
   no `appearance: none` trickery that could visually imply a tick that the
   input does not actually carry (D-050, D-057). */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
}

.consent input {
  flex: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Two bare anchors with no separator in the markup, so the gap is the only
   thing keeping them from reading as one link. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  font: var(--type-legal);
  color: var(--text-legal);
}

.result {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--accent);
}

.result:empty {
  display: none;
}

.result.error {
  color: #ff6b6b;
}

.form-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--jim-text-5);
}

/*
 * The form is the second path, not the gate (D-103), and this line is what says
 * so. Sized between the field labels and `.form-note`: it has to read as an
 * introduction to the form rather than as fine print under it.
 */
.form-lead {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jim-text-4);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 56px var(--page-gutter) var(--space-10);
  border-top: var(--border-1);
  background: var(--surface-footer);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-10);
  max-width: var(--page-max);
  margin-inline: auto;
  padding-bottom: var(--space-10);
}

.footer-brand .brand {
  margin-bottom: var(--space-4);
}

.footer-tagline {
  max-width: 34ch;
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 14px;
}

.footer-col .eyebrow {
  color: var(--jim-text-5);
  margin-bottom: 0;
}

.footer-col a {
  color: var(--text-body);
}

.footer-col a:hover {
  color: var(--text-heading);
}

.footer-legal {
  border-top: var(--border-1);
  padding-top: var(--space-8);
}

.footer-legal-inner,
.footer-copy {
  max-width: var(--page-max);
  margin-inline: auto;
  font: var(--type-legal);
  color: var(--text-legal);
}

.footer-copy {
  margin-top: var(--space-4);
}

.footer-doc {
  padding: var(--space-10) var(--page-gutter);
  border-top: var(--border-1);
  background: var(--surface-footer);
}

/* ==========================================================================
   Legal documents (privacy, terms)
   ========================================================================== */

.doc {
  max-width: var(--prose-max);
  margin-inline: auto;
  padding: var(--space-18) var(--page-gutter) var(--space-24);
}

.doc-eyebrow {
  margin: 0 0 var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

/* Carries the gap between the title block and the first section — there is no
   wrapper around the header to hang it on. */
.doc-meta {
  margin: var(--space-3) 0 var(--space-10);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

/* Deliberately plainer and higher-contrast than the marketing page. A carrier
   reviewer skim-reads these for specific sentences; body copy here is
   --jim-text-2 rather than --jim-text-3 for that reason. */
.doc-sections {
  color: var(--jim-text-2);
}

.doc-sections section {
  margin-bottom: var(--space-14);
}

.doc-sections h2 {
  font: var(--type-h3);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  text-align: left;
}

.doc-sections h3 {
  font: var(--type-h4);
  margin: var(--space-8) 0 var(--space-3);
}

.doc-sections ul,
.doc-sections ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.doc-sections li {
  margin-bottom: var(--space-2);
}

.callout {
  padding: var(--space-6);
  border: 1px solid var(--jim-lime-26);
  border-radius: var(--radius-card);
  background: var(--jim-lime-16);
}

.callout h2,
.callout h3 {
  margin-top: 0;
}

.address {
  font: var(--type-body-sm);
  font-style: normal;
  color: var(--jim-text-2);
}

.arrow-list {
  list-style: none;
  padding-left: 0 !important;
}

.arrow-list li {
  position: relative;
  padding-left: var(--space-6);
}

.arrow-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.chip {
  padding: 6px var(--space-3);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--jim-ink-600);
  font: var(--type-data);
  color: var(--jim-text-2);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes jimReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimFaqOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimFaqClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes jimCaret {
  to {
    opacity: 0;
  }
}


@keyframes jimPan {
  0% {
    transform: translate3d(4%, 0, 0) scale(1.1);
  }
  50% {
    transform: translate3d(-4%, -1%, 0) scale(1.14);
  }
  100% {
    transform: translate3d(4%, 0, 0) scale(1.1);
  }
}

@keyframes jimTrendArea {
  0%,
  12% {
    opacity: 0;
  }
  40%,
  86% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

@keyframes jimTrendDot {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.4);
  }
  10%,
  84% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* site.js also bails out entirely when this matches, so nothing here is
   fighting a script that still wants to animate. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  :root {
    --type-hero: 800 54px/1 var(--font-sans);
    --type-h2: 800 34px/1.08 var(--font-sans);
    --section-pad-y: var(--space-18);
    --page-gutter: var(--space-6);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-14);
    text-align: left;
  }

  .hero-copy {
    max-width: none;
  }

  .lift-log {
    position: static;
    margin-top: var(--space-6);
  }

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

  .how-ghost-list {
    display: none;
  }

  .radar {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --type-hero: 800 40px/1.03 var(--font-sans);
    --type-h2: 800 28px/1.1 var(--font-sans);
  }

  /* The four section links go; the brand and the CTA stay, because texting
     the number is the whole call to action. */
  .site-nav {
    display: none;
  }

  /* The device narrows from 358px to 300px (0.84x), so its fixed vertical
     metrics come down by the same factor. Scaling only the width left the
     mockup at a 2.2:1 box that read as a slab rather than a phone. */
  .phone {
    width: 300px;
  }

  .phone-btn-mute {
    top: 98px;
    height: 24px;
  }

  .phone-btn-up {
    top: 136px;
    height: 45px;
  }

  .phone-btn-down {
    top: 191px;
    height: 45px;
  }

  .phone-btn-power {
    top: 156px;
    height: 70px;
  }

  .convo-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .thread {
    height: 242px;
    padding: 15px 12px;
  }

  .composer-plus,
  .composer-send {
    width: 26px;
    height: 26px;
  }

  .composer-field {
    min-height: 28px;
  }

  .kb-row {
    margin-bottom: 5px;
  }

  .key,
  .key-mod {
    height: 29px;
  }

  .home-indicator {
    margin: var(--space-1) auto var(--space-2);
  }

  .start-panel {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }

  .start-panel h2 {
    font-size: 32px;
  }

  .card,
  .step-panel {
    padding: var(--space-6);
  }

  .feature-grid,
  .price-grid {
    grid-template-columns: 1fr;
  }

  .lift-log {
    display: none;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}


/* ==========================================================================
   Training app — /home, /calendar, /program, /lift, /account (D-068)

   Everything below this line belongs to the signed-in app. The separation is
   the same one the companion screens had and it exists for the same reason:
   the marketing page and the app are two products sharing one palette, and a
   change to the hero must not be able to move a table of somebody's sets.

   Class names are prefixed by screen — `home-`, `cal-`, `prog-`, `liftpage-`,
   `acct-` — with `app-` for the chrome and controls all five share. The Lift
   screen is `liftpage-` rather than `lift-` on purpose: `.lift-log` above is
   the marketing hero's ticker, and a detail screen that inherited it would
   pick up an animation meant for a three-word marquee.

   Values are the handoff's, read off the reference markup rather than the
   screenshots. Where the handoff names a colour that the marketing tokens
   already carry under another name, the marketing token wins and is aliased
   here — two names for #b9ff2e is how they drift apart.
   ========================================================================== */

:root {
  /* Surfaces the app adds. The page black and the raised card are shared. */
  --app-bg-input: #0d1014;
  --app-bg-hover: #0e1015;
  --app-bg-rest: #0d0f14;

  /* The accent, tinted. Cards, selected states and the bands on volume bars. */
  --app-accent-dim: #3a4a1e;
  --app-accent-bg: #101508;
  --app-accent-bg-strong: #151d09;
  --app-accent-border: #2c3a16;
  --app-accent-band: #232c14;

  /* Amber is caution and flags; orange is a miss, a hard set, or over-range. */
  --app-warn: #e4c65b;
  --app-warn-bg: #14120a;
  --app-warn-border: #5c4a17;
  --app-danger: #ff8a5b;
  --app-danger-border: #4a2323;

  /*
   * Six inks, and the floor is deliberate. The handoff raised the two dimmest
   * steps because 10–12px metadata at #565d6a fails AA on the page black —
   * every number on these screens is small and mono. Nothing that renders text
   * in this section may go dimmer than `--app-ink-6`.
   */
  --app-ink-1: #f2f3f5;
  --app-ink-2: #e4e7ec;
  --app-ink-3: #c8cdd6;
  --app-ink-4: #b4bac5;
  --app-ink-5: #8b93a1;
  --app-ink-6: #7b8391;

  /* Lines. 2 is a divider, 3 defines a control, 5 is the hover on one. */
  --app-line-2: #16191f;
  --app-line-3: #2f343d;
  --app-line-4: #24272f;
  --app-line-5: #57606e;

  --app-page: 1060px;
  --app-pad-y: clamp(20px, 5vw, 30px);
  --app-pad-x: clamp(16px, 5vw, 40px);
  --app-card-pad: clamp(18px, 5vw, 26px) clamp(16px, 4.5vw, 28px);

  --app-r-pill: 999px;
  --app-r-card: 20px;
  --app-r-bar: 16px;
  --app-r-item: 14px;
  --app-r-nested: 12px;
  --app-r-input: 10px;
  --app-r-step: 9px;
  --app-r-chip: 8px;

  --app-grad-page: radial-gradient(120% 40% at 50% -10%, #14161c 0%, #08090c 55%);
  --app-grad-card: linear-gradient(160deg, #12160e 0%, #0b0d12 62%);
  --app-grad-card-session: linear-gradient(165deg, #12160e 0%, #0b0d12 60%);
  --app-shadow-bar: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Motion. Four keyframes, and every one of them is opacity or an 8–14px lift.
   `site.js` already cancels animation under `prefers-reduced-motion` for the
   marketing page; these are cancelled outright at the bottom of this section.
   -------------------------------------------------------------------------- */

@keyframes jimEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes jimExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes jimCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimToast {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.app-page {
  background: var(--app-grad-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: jimEnter 300ms var(--ease-out) both;
}

.app-page.is-leaving {
  animation: jimExit 240ms var(--ease-in) forwards;
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: clamp(14px, 4vw, 20px) var(--app-pad-x);
  max-width: var(--app-page);
  margin: 0 auto;
  width: 100%;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-ink-1);
  flex-shrink: 0;
  min-height: 44px;
}

.app-brand:hover {
  color: var(--app-ink-1);
}

.app-brand svg {
  flex-shrink: 0;
}

.app-brand-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.app-brand-jim {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-brand-ai {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 4.5vw, 26px);
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.app-nav a,
.app-nav span {
  color: var(--app-ink-5);
  position: relative;
}

/*
 * The tab labels are 11px mono and about 18px tall, which is a fine thing to
 * read and a poor thing to hit. The pseudo-element gives each one a 44px tap
 * target without changing the type, the spacing, or where the active
 * underline sits — a `min-height` would push that underline away from the
 * word it belongs to.
 */
.app-nav a::after {
  content: '';
  position: absolute;
  inset: -13px -8px;
}

.app-nav a:hover {
  color: var(--app-ink-1);
}

.app-nav [aria-current='page'] {
  color: var(--accent);
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--accent);
}

.app-main {
  flex: 1;
  max-width: var(--app-page);
  margin: 0 auto;
  padding: var(--app-pad-y) var(--app-pad-x) var(--space-10);
  width: 100%;
  animation: jimCardIn 340ms var(--ease-out) both;
}

/*
 * Home and Calendar carry the sticky stack, so their main has to end far
 * enough above the fold for the rest timer, the toast and the log bar to sit
 * on page background rather than over the last row of sets.
 */
.app-main.has-dock {
  padding-bottom: 178px;
}

.app-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-5);
  margin: 0;
}

.app-title {
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 18px;
}

/* Calendar and Lift run one step larger — they are the screens you land on. */
.app-title-lg {
  font-size: clamp(28px, 9vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.app-card {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: var(--app-card-pad);
}

.app-card-accent {
  border: 1px solid var(--accent);
  border-radius: var(--app-r-card);
  background: var(--app-grad-card);
  padding: var(--app-card-pad);
}

.app-card-warn {
  border: 1px solid var(--app-warn-border);
  border-radius: var(--app-r-card);
  background: var(--app-warn-bg);
  padding: var(--app-card-pad);
}

.app-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}

.app-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-6);
}

/* --------------------------------------------------------------------------
   Controls

   Every interactive element is at least 44px in its primary axis. This is a
   gym app used one-handed with chalk on your fingers between sets — it is a
   hard floor, not a guideline, and the steppers are 44 square.
   -------------------------------------------------------------------------- */

.app-btn,
.app-btn-ghost,
.app-btn-pill,
.app-btn-solid {
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: var(--app-r-input);
  padding: 0 16px;
  transition: var(--transition-button, none);
}

.app-btn-solid {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  border-radius: var(--app-r-pill);
  padding: 0 18px;
  white-space: nowrap;
}

.app-btn-solid:hover {
  background: var(--accent-hover);
}

.app-btn-ghost {
  background: none;
  border: 1px solid var(--app-line-3);
  color: var(--app-ink-3);
}

.app-btn-ghost:hover {
  border-color: var(--app-line-5);
  color: var(--app-ink-1);
}

.app-btn-pill {
  background: none;
  border: 1px solid var(--app-accent-dim);
  border-radius: var(--app-r-pill);
  color: var(--accent);
  padding: 0 18px;
}

.app-btn-pill:hover {
  border-color: var(--accent);
}

.app-btn-danger {
  background: none;
  border: 1px solid var(--app-danger-border);
  color: var(--app-danger);
}

.app-btn-danger:hover {
  border-color: var(--app-danger);
}

/* A row of equal-width choices: readiness, RPE, the preference pills. */
.app-choice {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--app-line-3);
  background: transparent;
  border-radius: var(--app-r-step);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
}

.app-choice:hover {
  border-color: var(--accent);
}

.app-choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--app-accent-bg-strong);
  color: var(--app-ink-1);
}

.app-step {
  width: 44px;
  height: 44px;
  border-radius: var(--app-r-step);
  border: 1px solid var(--app-line-3);
  background: none;
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.app-step:hover {
  border-color: var(--accent);
}

.app-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.app-step-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-step-value {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--app-ink-1);
  min-width: 66px;
  text-align: center;
}

.app-step-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--app-ink-5);
}

/* --------------------------------------------------------------------------
   The dock — rest timer, undo toast, quick-log. Shared by Home and Calendar.
   -------------------------------------------------------------------------- */

.app-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 0 clamp(12px, 4vw, 40px) 14px;
  pointer-events: none;
}

.app-dock-inner {
  max-width: var(--app-page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  pointer-events: auto;
}

.app-rest {
  border: 1px solid var(--accent);
  border-radius: var(--app-r-bar);
  background: rgba(16, 21, 8, 0.96);
  backdrop-filter: blur(14px);
  padding: 12px 14px;
  box-shadow: var(--app-shadow-bar);
}

.app-rest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.app-rest-clock {
  font-family: var(--font-mono);
  font-size: clamp(24px, 8vw, 30px);
  color: var(--accent);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.app-rest-label {
  flex: 1 1 130px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--accent-hover);
}

.app-rest-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.app-rest .app-track {
  margin-top: 11px;
}

/*
 * One undo pattern, everywhere. Logging a set, adding a meal, removing a set,
 * acting on an insight, marking a rest day — all of them snapshot state and
 * raise this same pill. Per-feature undo affordances are how an app ends up
 * with four ways to take back four things and no way to take back the fifth.
 */
.app-toast {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--app-accent-border);
  border-radius: var(--app-r-pill);
  background: var(--app-accent-bg);
  padding: 7px 8px 7px 16px;
  animation: jimToast 200ms ease both;
}

.app-toast-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hover);
}

.app-toast-undo {
  min-height: 38px;
  background: none;
  border: 1px solid var(--app-accent-dim);
  border-radius: var(--app-r-pill);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 0 14px;
  cursor: pointer;
}

.app-toast-undo:hover {
  border-color: var(--accent);
}

.app-log {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-bar);
  background: rgba(10, 12, 16, 0.92);
  backdrop-filter: blur(14px);
  padding: 11px 12px;
  flex-wrap: wrap;
  box-shadow: var(--app-shadow-bar);
}

.app-log-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-5);
  flex-shrink: 0;
  padding-left: 4px;
}

.app-log-input {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 46px;
  background: var(--app-bg-input);
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-input);
  color: var(--app-ink-1);
  font-size: 14px;
  padding: 0 14px;
  outline: none;
}

.app-log-input:focus {
  border-color: var(--accent);
}

.app-log-go {
  min-height: 46px;
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-input);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 0 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.app-log-go:hover {
  background: var(--accent-hover);
}

/*
 * The status line wraps to its own row rather than squeezing the input. The
 * huge flex-grow and the explicit order are what force that: at 390px the
 * label, field and button already fill the row, and a fourth item on the same
 * line would take the input below a usable width mid-set.
 */
.app-log-flash {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--app-ink-6);
  flex: 1000 1 100%;
  order: 3;
  padding: 0 4px;
}

.app-log-flash.is-good {
  color: var(--accent);
}

.app-log-flash.is-warn {
  color: var(--app-danger);
}

/* --------------------------------------------------------------------------
   Bars and tracks
   -------------------------------------------------------------------------- */

.app-track {
  height: 6px;
  border-radius: 3px;
  background: var(--app-line-2);
  overflow: hidden;
  position: relative;
}

.app-track-sm {
  height: 4px;
}

.app-track-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* The evidence-based range, shaded behind the fill rather than marked on it. */
.app-track-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--app-accent-band);
}

.app-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
}

.app-progress .app-track {
  flex: 1;
  height: 5px;
  background: #1e2417;
}

.app-progress-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-4);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Home — readiness
   -------------------------------------------------------------------------- */

.home-ready {
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: var(--jim-ink-850);
  padding: 16px clamp(15px, 4.5vw, 22px) 18px;
  margin: 0 0 var(--space-4);
}

.home-ready-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-ready-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-ready-label {
  flex: 0 0 76px;
  font-size: 14px;
  color: var(--app-ink-4);
}

.home-ready-options {
  flex: 1 1 180px;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.home-ready-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  margin: 14px 0 0;
}

/* Verdict colour is set on the element; these are the three it can take. */
.is-green {
  color: var(--accent);
}

.is-amber {
  color: var(--app-warn);
}

.is-red {
  color: var(--app-danger);
}

.is-quiet {
  color: var(--app-ink-5);
}

/* --------------------------------------------------------------------------
   Home — re-entry and block review
   -------------------------------------------------------------------------- */

.home-choices {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.home-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-height: 52px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: 11px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.home-choice:hover {
  border-color: var(--accent);
}

.home-card-warn .home-choice:hover {
  border-color: var(--app-warn);
}

.home-choice[aria-pressed='true'] {
  border-color: var(--accent);
}

.home-choice-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--app-ink-3);
}

.home-choice[aria-pressed='true'] .home-choice-label {
  color: var(--app-ink-1);
}

.home-choice-why {
  font-size: 12px;
  color: var(--app-ink-5);
}

.home-gap-title {
  font-size: clamp(19px, 6vw, 23px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 10px 0 8px;
}

.home-gap-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--app-ink-4);
  margin: 0 0 18px;
}

.home-note-good {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--accent);
  margin: 14px 0 0;
}

.home-review-title {
  font-size: clamp(22px, 7vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 10px 0 6px;
}

.home-review-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-4);
  margin: 0 0 var(--space-5);
}

.home-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-review-row {
  border-top: 1px solid #1c2410;
  padding-top: 11px;
}

.home-review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 7px;
}

.home-review-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--app-ink-1);
}

.home-review-delta {
  font-family: var(--font-mono);
  font-size: 12px;
}

.home-review-read {
  font-size: 15px;
  line-height: 1.55;
  color: var(--app-ink-3);
  margin: 20px 0 16px;
}

/* --------------------------------------------------------------------------
   Home — today's session
   -------------------------------------------------------------------------- */

.home-session {
  border: 1px solid var(--accent);
  border-radius: var(--app-r-card);
  background: var(--app-grad-card);
  padding: clamp(18px, 5vw, 26px) clamp(15px, 4.5vw, 28px) clamp(18px, 4.5vw, 22px);
  margin: 0 0 var(--space-4);
}

.home-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.home-session-title {
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 9px 0 0;
}

.home-lifts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-lift {
  border: 1px solid var(--app-accent-border);
  border-radius: var(--app-r-item);
  background: var(--app-accent-bg);
  overflow: hidden;
}

.home-lift.is-open {
  border-color: var(--accent);
}

.home-lift.is-complete {
  background: var(--app-accent-bg-strong);
}

.home-lift-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 56px;
  padding: 11px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.home-lift-head:hover {
  background: rgba(185, 255, 46, 0.04);
}

.home-lift-box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid #4c5f28;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

.home-lift-box.is-partial {
  border-color: var(--accent);
}

.home-lift-box.is-complete {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.home-lift-names {
  flex: 3 1 130px;
  min-width: 0;
}

.home-lift-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--app-ink-1);
}

.home-lift-flagtext {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--app-warn);
  margin-top: 3px;
}

.home-lift-meta {
  flex: 2 1 110px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-5);
}

.home-lift-meta.is-started {
  color: var(--accent);
}

.home-lift-chevron {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
  flex-shrink: 0;
}

.home-lift-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.home-rx {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 0 0 3px;
}

/*
 * Warm-ups are dashed and dim and say so in their own header, because the one
 * thing that must never happen is a warm-up counting toward volume or moving
 * an e1RM. They carry no effort field at all.
 */
.home-warm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}

.home-warm-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--app-ink-6);
}

.home-warm-head span:first-child {
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.home-warm {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px dashed var(--border-default);
  background: transparent;
  border-radius: var(--app-r-input);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.home-warm:hover {
  border-color: var(--app-line-5);
}

.home-warm.is-done {
  border-color: var(--app-line-4);
  background: #0f1116;
}

.home-warm.is-editing {
  border-color: var(--app-line-5);
}

.home-warm-tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--app-ink-6);
}

.home-warm-result {
  flex: 1 1 80px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-6);
}

.home-warm.is-done .home-warm-result {
  color: var(--app-ink-4);
}

.home-warm-note {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--app-ink-6);
}

.home-working-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin: 6px 0 0;
}

.home-set {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--app-line-4);
  background: transparent;
  border-radius: var(--app-r-input);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.home-set:hover {
  border-color: var(--accent);
}

.home-set.is-next {
  border-color: var(--app-accent-dim);
}

.home-set.is-done {
  border-color: var(--app-accent-border);
  background: var(--app-accent-bg-strong);
}

.home-set.is-editing {
  border-color: var(--accent);
}

.home-set-tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--app-ink-6);
}

.home-set-result {
  flex: 2 1 96px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--app-ink-6);
}

.home-set.is-done .home-set-result {
  color: var(--app-ink-1);
}

.home-set-rpe {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
}

.home-set-rpe.is-logged {
  color: var(--accent);
}

/* RPE 9 and up is orange wherever it appears — it is the number that matters. */
.home-set-rpe.is-hard {
  color: var(--app-danger);
}

.home-set-note {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

.home-set.is-done .home-set-note {
  color: var(--app-ink-5);
}

.home-editor {
  border: 1px solid var(--app-accent-border);
  border-radius: var(--app-r-nested);
  background: var(--app-accent-bg);
  padding: 13px;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-editor-warm {
  border-color: var(--app-line-3);
  background: var(--app-bg-input);
  padding: 12px;
  gap: 11px;
}

.home-rpe-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 var(--space-2);
}

.home-rpe-rir {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

.home-rpe-row {
  display: flex;
  gap: 6px;
}

.home-rpe-row .app-choice {
  min-height: 44px;
  font-size: 13px;
}

.home-rpe-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 9px 0 0;
}

.home-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #1c2410;
  padding-top: 11px;
}

.home-editor-e1rm {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-4);
}

.home-editor-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.home-save {
  min-height: 44px;
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-step);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 18px;
  cursor: pointer;
}

.home-save:hover {
  background: var(--accent-hover);
}

.home-save-ghost {
  background: none;
  border: 1px solid var(--app-line-5);
  color: var(--app-ink-2);
}

.home-save-ghost:hover {
  background: none;
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.home-clear {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-danger-border);
  border-radius: var(--app-r-step);
  color: var(--app-danger);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  cursor: pointer;
}

.home-clear:hover {
  border-color: var(--app-danger);
}

.home-lift-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.home-lift-foot-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.home-addset {
  min-height: 44px;
  background: none;
  border: 1px dashed var(--app-accent-dim);
  border-radius: var(--app-r-input);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  cursor: pointer;
}

.home-addset:hover {
  border-color: var(--accent);
}

.home-flagbtn {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-input);
  color: var(--app-ink-5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  cursor: pointer;
}

.home-flagbtn:hover {
  border-color: var(--app-warn);
  color: var(--app-ink-1);
}

.home-flagbtn.is-flagged {
  border-color: var(--app-warn-border);
  color: var(--app-warn);
}

.home-lift-best {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
}

/* --------------------------------------------------------------------------
   Home — the injury flag panel
   -------------------------------------------------------------------------- */

.home-flag {
  border: 1px solid var(--app-warn-border);
  border-radius: var(--app-r-nested);
  background: var(--app-warn-bg);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-flag-q {
  font-size: 14px;
  line-height: 1.5;
  color: var(--app-ink-2);
  margin: 0;
}

.home-flag-sites {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.home-site {
  min-height: 44px;
  border: 1px solid var(--app-line-3);
  background: transparent;
  border-radius: var(--app-r-pill);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 15px;
  cursor: pointer;
}

.home-site:hover {
  border-color: var(--app-warn);
}

.home-site[aria-pressed='true'] {
  border-color: var(--app-warn);
  background: #1d1a0c;
  color: var(--app-ink-1);
}

/*
 * The three actions stay visible but dimmed until a site is picked. Hiding
 * them would make the panel look like it only asks a question; disabling them
 * silently would make the first tap feel broken.
 */
.home-flag-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0.45;
}

.home-flag-actions.is-armed {
  opacity: 1;
}

.home-flag-act {
  min-height: 46px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-input);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  cursor: pointer;
  text-align: left;
}

.home-flag-act:hover {
  border-color: var(--app-line-5);
  color: var(--app-ink-1);
}

.home-flag-act-swap {
  border-color: var(--app-warn-border);
  color: var(--app-warn);
}

.home-flag-act-swap:hover {
  border-color: var(--app-warn);
  color: var(--app-ink-1);
}

.home-flag-why {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: -2px 0 2px;
}

.home-flag-clear {
  align-self: flex-start;
  min-height: 40px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--app-ink-5);
  cursor: pointer;
}

.home-flag-clear:hover {
  color: var(--app-ink-1);
}

/* --------------------------------------------------------------------------
   Home — also today: fuel and Jim's read
   -------------------------------------------------------------------------- */

.home-also {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-also > section {
  flex: 1 1 290px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(16px, 4.5vw, 20px) clamp(15px, 4.5vw, 24px) clamp(18px, 4.5vw, 22px);
}

.home-fuel-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 var(--space-4);
}

.home-fuel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 var(--space-2);
}

.home-fuel-label {
  font-size: 14px;
  color: var(--app-ink-4);
}

.home-fuel-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--app-ink-2);
}

.home-fuel-value.is-hit {
  color: var(--accent);
}

.home-fuel-value.is-over {
  color: var(--app-warn);
}

.home-fuel-range {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-6);
  margin: 8px 0 0;
}

.home-bw-spark {
  display: block;
  margin: 10px 0 0;
}

.home-bw-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.home-bw-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--app-ink-5);
}

.home-bw-note.is-fast {
  color: var(--app-warn);
}

.home-bw-editor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 12px 0 0;
}

.home-bw-editor .app-step-value {
  min-width: 74px;
}

.home-bw-save {
  flex: 1 1 auto;
  min-height: 44px;
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-step);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  cursor: pointer;
}

.home-bw-save:hover {
  background: var(--accent-hover);
}

.home-bw-start {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  cursor: pointer;
  margin: 12px 0 0;
}

.home-bw-start:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.home-meals {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.home-meal {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 16px;
  cursor: pointer;
}

.home-meal:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.home-read {
  display: flex;
  flex-direction: column;
}

.home-read-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--app-ink-3);
  margin: 0 0 18px;
  flex: 1;
}

.home-read-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Home — the lifts table

   A six-column grid cannot survive 390px, so this is stacked flex rows with
   sort chips where the column headers would be. The chips are the sort
   control; there is no header row to click.
   -------------------------------------------------------------------------- */

.home-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 30px 0 12px;
}

.home-table {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  overflow: hidden;
}

.home-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 12px clamp(15px, 4.5vw, 26px);
  border-bottom: 1px solid var(--app-line-2);
}

.home-sort-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-6);
  flex-shrink: 0;
}

.home-chip {
  min-height: 40px;
  background: transparent;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-ink-4);
  cursor: pointer;
}

.home-chip:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.home-chip[aria-pressed='true'] {
  background: var(--app-accent-bg-strong);
  border-color: var(--accent);
  color: var(--accent);
}

.home-row {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  min-height: 62px;
  padding: 14px clamp(15px, 4.5vw, 26px);
  border-bottom: 1px solid var(--app-line-2);
  background: transparent;
  color: inherit;
}

.home-row:hover {
  background: var(--app-bg-hover);
  color: inherit;
}

/* A lift touched today tints, so the session you are in is findable at a glance. */
.home-row.is-fresh {
  background: var(--app-accent-bg);
}

.home-row-names {
  flex: 4 1 150px;
  min-width: 0;
}

.home-row-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--app-ink-1);
  margin: 0 0 3px;
}

.home-row-when {
  font-size: 12px;
  color: var(--app-ink-5);
  margin: 0;
}

.home-row.is-fresh .home-row-when {
  color: var(--accent);
}

.home-row-nums {
  flex: 3 1 130px;
  min-width: 0;
}

.home-row-e1rm {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--app-ink-2);
  margin: 0 0 3px;
}

.home-row.is-fresh .home-row-e1rm {
  color: var(--accent);
}

.home-row-e1rm span {
  font-size: 11px;
  color: var(--app-ink-6);
}

.home-row-top {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-6);
  margin: 0;
}

.home-row-trail {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.home-row-spark {
  flex-shrink: 0;
}

.home-row-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-5);
  white-space: nowrap;
}

.home-row-delta.is-up {
  color: var(--accent);
}

.home-row-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-6);
}

.home-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px clamp(15px, 4.5vw, 26px) 12px;
  flex-wrap: wrap;
}

.home-showall {
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  cursor: pointer;
}

.home-showall:hover {
  color: var(--accent-hover);
}

.home-table-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-6);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Home — the empty state
   -------------------------------------------------------------------------- */

.home-empty {
  border: 1px dashed var(--app-line-3);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: 30px 24px;
  margin: 30px 0 0;
  text-align: center;
}

.home-empty-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.home-empty-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--app-ink-4);
  margin: 0 auto 20px;
  max-width: 420px;
}

.home-starters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.home-starter {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-accent-dim);
  border-radius: var(--app-r-pill);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 0 18px;
  cursor: pointer;
}

.home-starter:hover {
  border-color: var(--accent);
}

.home-also-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-6);
  margin: 28px 0 14px;
}

/* --------------------------------------------------------------------------
   Calendar — retrospective logging
   -------------------------------------------------------------------------- */

.cal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.cal-summary {
  color: var(--accent);
  margin: 0 0 12px;
}

.cal-months {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-month-btn {
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-input);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 44px;
  padding: 9px 16px;
  cursor: pointer;
}

.cal-month-btn:hover:not(:disabled) {
  border-color: var(--app-line-5);
}

.cal-month-btn:disabled {
  border-color: var(--app-line-2);
  color: var(--jim-key);
  cursor: not-allowed;
}

.cal-month-btn.is-today {
  border-color: var(--app-accent-dim);
  color: var(--accent);
}

.cal-month-btn.is-today:hover {
  border-color: var(--accent);
}

.cal-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.cal-grid-panel {
  flex: 3 1 400px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(16px, 4.5vw, 22px) clamp(14px, 4vw, 24px) clamp(18px, 4.5vw, 24px);
}

.cal-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.cal-view-toggle {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 0 16px;
  cursor: pointer;
}

.cal-view-toggle:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.cal-daynames {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 8px);
  margin: 0 0 10px;
}

.cal-dayname {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--app-ink-6);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 8px);
}

.cal-cell {
  height: clamp(56px, 13vw, 84px);
  min-width: 0;
  overflow: hidden;
  border-radius: 11px;
  background: var(--jim-ink-800);
  border: 1px solid var(--app-line-2);
  padding: clamp(5px, 1.6vw, 8px) clamp(5px, 1.6vw, 9px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.cal-cell:hover {
  border-color: var(--app-accent-dim);
}

.cal-cell.is-pad {
  opacity: 0.35;
  cursor: default;
}

.cal-cell.is-pad:hover {
  border-color: var(--app-line-2);
}

.cal-cell.is-logged {
  background: #1b2110;
  border-color: var(--app-accent-border);
}

/* A planned day in the past with nothing on it. Dashed and orange — this is
   the state the whole screen exists to let you fill in. */
.cal-cell.is-gap {
  border: 1px dashed var(--app-danger-border);
}

.cal-cell.is-upcoming {
  border: 1px dashed var(--app-line-4);
}

.cal-cell.is-rest {
  background: var(--app-bg-rest);
}

.cal-cell.is-today {
  background: var(--jim-ink-800);
  border: 1px solid var(--accent);
}

.cal-cell.is-selected {
  border: 2px solid var(--accent);
}

.cal-cell-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
}

.cal-cell.is-logged .cal-cell-num,
.cal-cell.is-today .cal-cell-num,
.cal-cell.is-selected .cal-cell-num {
  color: var(--accent);
}

/*
 * A dot, not a label. At 390px a month cell is about 44px wide and "Lower B"
 * does not fit in it — the dot carries the state and the day panel carries the
 * name. The strip view is where the names get room.
 */
.cal-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--app-r-pill);
  background: transparent;
  border: 1.5px dashed var(--app-line-5);
}

.cal-dot.is-logged {
  background: var(--accent);
  border: 1.5px solid var(--accent);
}

.cal-dot.is-gap {
  border: 1.5px dashed var(--app-danger);
}

.cal-dot.is-upcoming {
  border: 1.5px dashed #4c5460;
}

.cal-cell-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cal-strip .cal-cell {
  flex: 1 1 104px;
  height: 96px;
  border-radius: var(--app-r-nested);
  padding: 9px 10px;
  gap: 5px;
}

.cal-strip .cal-cell:hover {
  border-color: var(--accent);
}

.cal-strip-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--app-ink-6);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-cell.is-logged .cal-strip-label {
  color: var(--app-ink-4);
}

.cal-cell.is-today .cal-strip-label {
  color: var(--app-ink-2);
}

.cal-strip .cal-cell-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.cal-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--app-line-2);
  margin-top: 18px;
  padding-top: var(--space-4);
}

.cal-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--app-ink-5);
}

.cal-legend .cal-dot {
  width: 9px;
  height: 9px;
}

.cal-legend .cal-dot.is-rest {
  background: var(--app-line-2);
  border: 1.5px solid var(--app-line-2);
}

.cal-side {
  flex: 1 1 288px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cal-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(16px, 4.5vw, 20px) clamp(15px, 4.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The day panel lights up when there is something to do on the day. */
.cal-panel.is-live {
  border-color: var(--accent);
  background: var(--app-grad-card-session);
}

.cal-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-5);
}

.cal-panel.is-live .cal-panel-eyebrow {
  color: var(--accent);
}

.cal-panel-q {
  font-size: 15px;
  line-height: 1.5;
  color: var(--app-ink-2);
  margin: 0;
}

.cal-panel-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 5px;
}

.cal-panel-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
  margin: 0;
}

.cal-panel-plan {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--app-ink-4);
  margin: 0;
  /* One lift per line, from a single joined string. */
  white-space: pre-line;
}

.cal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cal-act {
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-input);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 11px 12px;
  cursor: pointer;
  text-align: center;
}

.cal-act:hover {
  border-color: var(--app-line-5);
  color: var(--app-ink-1);
}

.cal-act-primary {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
}

.cal-act-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.cal-act-accent {
  border-color: var(--app-accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-act-accent:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cal-lift {
  border-top: 1px solid var(--app-line-2);
  padding-top: 12px;
}

.cal-lift-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 9px;
}

.cal-lift-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-2);
}

.cal-lift-right {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cal-lift-summary {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--app-ink-5);
}

.cal-lift-open {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.cal-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cal-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-3);
  background: transparent;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-chip);
  min-height: 44px;
  padding: 6px 12px;
  cursor: pointer;
}

.cal-chip:hover {
  border-color: var(--accent);
}

.cal-chip.is-editing {
  border-color: var(--accent);
  background: var(--app-accent-bg-strong);
  color: var(--app-ink-1);
}

/* A PR chip is filled — it is the one set in the day worth finding at a glance. */
.cal-chip.is-pr {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.cal-chip.is-warmup {
  border: 1px dashed var(--app-line-4);
  color: var(--app-ink-6);
}

.cal-chip.is-warmup.is-editing {
  border: 1px dashed var(--app-line-5);
  background: transparent;
  color: var(--app-ink-2);
}

.cal-chip-add {
  background: none;
  border: 1px dashed var(--app-accent-dim);
  border-radius: var(--app-r-chip);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 14px;
  min-height: 44px;
  padding: 6px 15px;
  cursor: pointer;
}

.cal-chip-add:hover {
  border-color: var(--accent);
}

.cal-chip-warm {
  font-size: 11px;
  padding: 6px 13px;
  border-color: var(--app-line-3);
  color: var(--app-ink-5);
}

.cal-chip-warm:hover {
  border-color: var(--app-line-5);
  color: var(--app-ink-3);
}

.cal-editor {
  border: 1px solid var(--app-accent-border);
  border-radius: var(--app-r-nested);
  background: var(--app-accent-bg);
  padding: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-editor .app-step {
  border-radius: 7px;
  border-color: var(--app-line-4);
  font-size: 13px;
}

.cal-editor .app-step-value {
  font-size: 14px;
  min-width: 46px;
}

.cal-editor-e1rm {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

.cal-editor-actions {
  display: flex;
  gap: var(--space-2);
}

.cal-editor-done {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-chip);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 9px;
  cursor: pointer;
}

.cal-editor-done:hover {
  background: var(--accent-hover);
}

.cal-editor-remove {
  background: none;
  border: 1px solid var(--app-danger-border);
  border-radius: var(--app-r-chip);
  color: var(--app-danger);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 9px 12px;
  cursor: pointer;
}

.cal-editor-remove:hover {
  border-color: var(--app-danger);
}

.cal-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--app-line-2);
  padding-top: 12px;
}

.cal-picker-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-input);
  color: var(--app-ink-2);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  min-height: 44px;
  padding: 9px 12px;
  cursor: pointer;
}

.cal-picker-row:hover {
  border-color: var(--accent);
}

.cal-picker-cancel {
  background: none;
  border: none;
  padding: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--app-ink-5);
  cursor: pointer;
  text-align: left;
}

.cal-picker-cancel:hover {
  color: var(--app-ink-3);
}

.cal-recall {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-input);
  color: var(--app-ink-3);
  font-size: 13px;
  text-align: left;
  min-height: 44px;
  padding: 9px 12px;
  cursor: pointer;
  font-family: inherit;
}

.cal-recall:hover {
  border-color: var(--app-accent-dim);
  color: var(--app-ink-1);
}

.cal-recall-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
}

.cal-recall-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--app-ink-5);
  margin: 2px 0 0;
}

.cal-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--app-line-2);
  padding-top: 11px;
}

.cal-stat-label {
  font-size: 13px;
  color: var(--app-ink-4);
}

.cal-stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--app-ink-2);
}

.cal-stat-value.is-long {
  color: var(--app-danger);
}

.cal-stat-value.is-pr {
  color: var(--accent);
}

.cal-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--app-ink-6);
  margin: 24px 0 0;
}

/* --------------------------------------------------------------------------
   Program — the block
   -------------------------------------------------------------------------- */

.prog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.prog-blockline {
  color: var(--accent);
  margin: 0 0 10px;
}

.prog-title {
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0;
}

.prog-stats {
  display: flex;
  gap: clamp(20px, 7vw, 32px);
  flex-wrap: wrap;
}

.prog-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-5);
  margin: 0 0 7px;
}

.prog-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--app-ink-2);
  margin: 0;
}

.prog-stat-value.is-accent {
  color: var(--accent);
}

/* One banner for every block edit, with the same undo as everywhere else. */
.prog-change {
  border: 1px solid var(--accent);
  border-radius: var(--app-r-bar);
  background: var(--app-accent-bg);
  padding: 15px 20px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.prog-change p {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--accent-hover);
  margin: 0;
}

.prog-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.prog-left {
  flex: 3 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prog-right {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prog-grid-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 28px);
  margin: 0 0 20px;
}

.prog-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.prog-key {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.prog-key span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--app-ink-5);
}

.prog-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--jim-ink-800);
  border: 1px solid var(--app-line-4);
}

.prog-swatch.is-done {
  background: #1b2110;
  border-color: var(--app-accent-border);
}

.prog-swatch.is-missed {
  border: 1px dashed var(--app-danger-border);
}

.prog-swatch.is-next {
  background: var(--accent);
  border-color: var(--accent);
}

/*
 * The row label is a fixed column so every week's cells line up under the
 * session names above them. `flex: 1` on the cells does the rest — at 390px
 * four columns are about 60px each, which still clears the 44px target.
 */
.prog-cols {
  display: flex;
  gap: clamp(5px, 1.5vw, 8px);
  margin: 0 0 8px;
  padding-left: calc(clamp(34px, 10vw, 58px) + clamp(5px, 1.5vw, 8px));
}

.prog-col {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(9px, 2.3vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-ink-6);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prog-col.is-active {
  color: var(--accent);
}

.prog-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prog-row {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.5vw, 8px);
}

.prog-row-label {
  width: clamp(34px, 10vw, 58px);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--app-ink-6);
}

.prog-row-label.is-current {
  color: var(--accent);
}

.prog-row-label.is-past {
  color: var(--app-ink-5);
}

.prog-cell {
  flex: 1;
  height: 44px;
  border-radius: var(--app-r-step);
  background: var(--app-bg-rest);
  border: 1px solid var(--app-line-4);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--on-accent);
}

.prog-cell:hover {
  border-color: var(--accent);
}

.prog-cell.is-done {
  background: #1b2110;
  border-color: var(--app-accent-border);
  color: var(--accent);
}

.prog-cell.is-missed {
  background: var(--jim-ink-800);
  border: 1px dashed var(--app-danger-border);
  color: var(--app-danger);
}

.prog-cell.is-next {
  background: var(--accent);
  border-color: var(--accent);
}

.prog-cell.is-deload {
  border: 1px dashed var(--app-line-4);
}

.prog-cell.is-selected {
  border: 2px solid var(--accent);
}

.prog-grid-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--app-ink-6);
  margin: 18px 0 0;
}

.prog-session {
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: var(--app-r-card);
  background: var(--app-grad-card-session);
  padding: clamp(18px, 5vw, 26px) clamp(16px, 4.5vw, 28px);
}

.prog-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.prog-session-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 10px 0 4px;
}

.prog-session-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
  margin: 0;
}

.prog-ex-list {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}

.prog-ex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid #1c2410;
}

/* Optional accessories are dimmed, not hidden — they are still the plan. */
.prog-ex.is-optional {
  opacity: 0.55;
}

.prog-ex-main {
  flex: 1 1 240px;
  min-width: 0;
}

.prog-ex-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--app-ink-1);
  margin: 0 0 4px;
}

.prog-ex-name.is-stalled {
  color: var(--app-warn);
}

.prog-ex-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
  margin: 0;
}

.prog-ex-detail.is-stalled {
  color: var(--app-warn);
}

.prog-ex-detail.is-swapped {
  color: var(--accent);
}

.prog-ex-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--app-ink-5);
  margin: 7px 0 0;
}

.prog-ex-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.prog-ex-btn {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--app-ink-4);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 4px;
}

.prog-ex-btn:hover {
  color: var(--app-ink-3);
}

.prog-ex-btn.is-copy {
  color: var(--accent);
}

.prog-ex-btn.is-copy:hover {
  color: var(--accent-hover);
}

.prog-session-foot {
  border-top: 1px solid #1c2410;
  margin-top: 4px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.prog-sms-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--app-ink-5);
  margin: 0;
}

.prog-sms-hint span {
  color: var(--accent);
}

.prog-mark {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
}

.prog-mark:hover {
  border-color: var(--accent);
}

.prog-mark.is-done {
  border-color: var(--accent);
  color: var(--accent);
}

/* A future week cannot be marked done. The button says why rather than vanishing. */
.prog-mark.is-locked {
  border-color: var(--border-default);
  color: var(--app-line-5);
  cursor: not-allowed;
}

.prog-mark.is-locked:hover {
  border-color: var(--border-default);
}

/* The free-tier variant: the shape of the session, without the session. */
.prog-locked-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}

.prog-locked-bar {
  height: 44px;
  border-radius: var(--app-r-input);
  background: var(--app-line-2);
}

.prog-upsell {
  border-top: 1px solid #1c2410;
  margin-top: 22px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.prog-upsell p {
  font-size: 15px;
  line-height: 1.55;
  color: #a7aeba;
  margin: 0;
  max-width: 340px;
}

.prog-upsell a {
  flex-shrink: 0;
  background: var(--accent);
  border-radius: var(--app-r-pill);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  white-space: nowrap;
}

.prog-upsell a:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.prog-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 26px);
}

/* The card turns amber when the three signals agree. */
.prog-panel.is-warn {
  border-color: var(--app-warn-border);
  background: var(--app-warn-bg);
}

.prog-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.prog-panel.is-warn .app-eyebrow,
.prog-panel.is-warn .prog-verdict {
  color: var(--app-warn);
}

.prog-verdict {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-5);
}

.prog-signals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
}

.prog-signal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.prog-signal-label {
  font-size: 13px;
  color: var(--app-ink-4);
}

.prog-signal-value {
  font-family: var(--font-mono);
  font-size: 12px;
}

.prog-signal-note {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--app-ink-6);
  margin: 6px 0 0;
}

.prog-read {
  font-size: 14px;
  line-height: 1.55;
  color: var(--app-ink-3);
  margin: 16px 0 0;
}

.prog-policy {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 12px 0 0;
}

.prog-deload-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 14px;
}

.prog-deload-go {
  min-height: 44px;
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-pill);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  cursor: pointer;
}

.prog-deload-go:hover {
  background: var(--accent-hover);
}

.prog-vol-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-6);
  margin: 10px 0 16px;
}

.prog-muscles {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.prog-muscle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.prog-muscle-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--app-line-2);
  overflow: hidden;
}

.prog-muscle-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}

.prog-vol-read {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--app-ink-5);
  margin: 16px 0 0;
}

.prog-vol-read.is-under {
  color: var(--app-warn);
}

.prog-vol-read.is-over {
  color: var(--app-danger);
}

.prog-flag {
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.prog-flag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.prog-flag-site {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-1);
}

.prog-flag-rule {
  font-size: 13px;
  line-height: 1.55;
  color: var(--app-ink-4);
  margin: 7px 0 10px;
}

.prog-flag-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.prog-flag-btn {
  min-height: 42px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  cursor: pointer;
}

.prog-flag-btn:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.prog-flag-btn.is-worse {
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

.prog-flag-btn.is-worse:hover {
  border-color: var(--app-danger);
  color: var(--app-danger);
}

.prog-fix-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--app-ink-3);
  margin: 14px 0 16px;
}

.prog-fixes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prog-fix {
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-input);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  min-height: 44px;
  padding: 11px 13px;
  cursor: pointer;
}

.prog-fix:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

.prog-fix.is-on {
  border-color: var(--app-accent-dim);
  color: var(--app-ink-1);
}

.prog-block {
  border-top: 1px solid var(--app-line-2);
  padding-top: 13px;
  margin-top: 13px;
}

.prog-block-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: none;
  border: none;
  padding: 8px 0;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
}

.prog-block-btn:hover {
  opacity: 0.8;
}

.prog-block-name {
  font-size: 14px;
  color: var(--app-ink-3);
}

.prog-block-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--app-ink-4);
  margin: 11px 0 0;
}

.prog-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--app-ink-6);
  margin: 26px 0 0;
}

/* --------------------------------------------------------------------------
   Lift — one lift's history

   Prefixed `liftpage-` rather than `lift-`: `.lift-log` above belongs to the
   marketing hero's ticker and carries an animation meant for a marquee.
   -------------------------------------------------------------------------- */

.liftpage-back {
  display: inline-block;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-4);
  margin: 0 0 var(--space-4);
}

.liftpage-back:hover {
  color: var(--app-ink-1);
}

.liftpage-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.liftpage-tab {
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--app-ink-4);
  background: transparent;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  padding: 0 16px;
  cursor: pointer;
}

.liftpage-tab:hover {
  border-color: var(--accent);
}

.liftpage-tab[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.liftpage-count {
  color: var(--accent);
  margin: 0 0 10px;
}

.liftpage-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 20px;
}

.liftpage-chart-card {
  flex: 2 1 420px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 26px);
}

.liftpage-effort-card {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 26px);
}

.liftpage-hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}

.liftpage-hero-value {
  font-family: var(--font-mono);
  font-size: clamp(28px, 9vw, 38px);
  color: var(--app-ink-1);
  letter-spacing: -0.02em;
}

.liftpage-hero-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-5);
}

.liftpage-hero-delta.is-up {
  color: var(--accent);
}

.liftpage-hero-delta.is-down {
  color: var(--app-danger);
}

.liftpage-chart {
  display: block;
}

.liftpage-axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.liftpage-axis span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--app-ink-6);
}

.liftpage-axis span.is-now {
  color: var(--accent);
}

.liftpage-axis span.is-planned {
  color: var(--app-accent-dim);
}

.liftpage-chart-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-6);
  margin: 12px 0 0;
}

.liftpage-effort-read {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-6);
  margin: 10px 0 16px;
}

.liftpage-effort-read.is-stalled {
  color: var(--app-warn);
}

.liftpage-effort-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.liftpage-effort-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 5px;
}

.liftpage-effort-load {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-4);
}

.liftpage-effort-value {
  font-family: var(--font-mono);
  font-size: 12px;
}

.liftpage-pr-card {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 26px);
}

.liftpage-prs {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.liftpage-pr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--app-line-2);
}

.liftpage-pr-label {
  font-size: 13px;
  color: var(--app-ink-4);
}

.liftpage-pr-right {
  text-align: right;
}

.liftpage-pr-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--app-ink-2);
}

.liftpage-pr-value.is-best {
  color: var(--accent);
}

.liftpage-pr-value.is-base {
  color: var(--app-ink-5);
}

.liftpage-pr-when {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--app-ink-6);
  margin-top: 2px;
}

.liftpage-next {
  flex: 2 1 380px;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: var(--app-r-card);
  background: var(--app-grad-card);
  padding: clamp(18px, 5vw, 24px) clamp(16px, 4.5vw, 26px);
}

.liftpage-rx {
  font-family: var(--font-mono);
  font-size: clamp(17px, 5.5vw, 22px);
  color: var(--app-ink-1);
  margin: 12px 0 0;
}

.liftpage-rx-projection {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin: 8px 0 0;
}

.liftpage-rx-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--app-ink-4);
  margin: 14px 0 18px;
}

.liftpage-rx-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.liftpage-rx-actions a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--app-accent-dim);
  border-radius: var(--app-r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 0 18px;
}

.liftpage-rx-actions a:hover {
  border-color: var(--accent);
}

.liftpage-history-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 14px;
  flex-wrap: wrap;
}

.liftpage-rule {
  flex: 1;
  min-width: 30px;
  height: 1px;
  background: var(--app-line-2);
}

.liftpage-sessions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.liftpage-session {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-bar);
  background: var(--jim-ink-850);
  padding: 16px clamp(15px, 4.5vw, 20px);
}

/* A session still being logged on Home. */
.liftpage-session.is-current {
  border-color: var(--accent);
  background: var(--app-accent-bg);
}

/*
 * A session with a message but no sets — the athlete said why they skipped it.
 * It stays in the list at reduced opacity rather than being dropped, because
 * "shoulder was cranky, did db press instead" is the record of a decision.
 */
.liftpage-session.is-faded {
  opacity: 0.62;
}

.liftpage-session-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.liftpage-session-when {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.liftpage-session-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-4);
}

.liftpage-session.is-current .liftpage-session-date {
  color: var(--accent);
}

.liftpage-session-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--app-ink-6);
}

.liftpage-session-e1rm {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-5);
}

.liftpage-session.is-current .liftpage-session-e1rm {
  color: var(--accent);
}

/* The athlete's own words, verbatim — lowercase, shorthand and all. */
.liftpage-message {
  font-size: 15px;
  line-height: 1.45;
  color: var(--app-ink-3);
  margin: 0 0 12px;
}

.liftpage-session.is-current .liftpage-message {
  color: #e9f5d6;
}

.liftpage-warmups {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.liftpage-warm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--app-ink-6);
  align-self: center;
}

.liftpage-warm {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
  border: 1px dashed var(--app-line-4);
  border-radius: var(--app-r-chip);
  padding: 5px 9px;
}

.liftpage-sets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.liftpage-set {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-3);
  background: transparent;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-step);
  padding: 7px 11px;
}

/* The session's best set by e1RM, filled. */
.liftpage-set.is-best {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.liftpage-set-effort {
  font-size: 11px;
  color: var(--app-ink-6);
}

.liftpage-set.is-best .liftpage-set-effort {
  color: var(--on-accent);
}

.liftpage-set-effort.is-hard {
  color: var(--app-danger);
}

.liftpage-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
}

.liftpage-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--app-ink-6);
  margin: 22px 0 0;
}

/* --------------------------------------------------------------------------
   Account — settings

   Narrower than the other four: 860px, because this is a document you read a
   row at a time rather than a dashboard you scan.

   Note the inks. The Account reference still used `#6e7684` and `#565d6a` on
   13px and smaller, which is the pair the handoff's contrast rule names as a
   fix already made — "do not reintroduce them on text". Every one of them is
   `--app-ink-6` (#7b8391) or lighter here.
   -------------------------------------------------------------------------- */

.acct-main {
  max-width: var(--prose-max);
  padding: 40px var(--app-pad-x) 110px;
}

.acct-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.acct-title {
  font-size: clamp(32px, 9vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}

.acct-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-6);
  margin: 0 0 40px;
}

.acct-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acct-card {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: var(--jim-ink-850);
  padding: 30px clamp(20px, 5vw, 32px);
}

.acct-card-plan {
  border-color: var(--accent);
  background: linear-gradient(160deg, #12160e 0%, #0b0d12 58%);
}

.acct-h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.acct-lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 0 0 24px;
}

.acct-plan-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.acct-plan-name {
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 12px 0 8px;
}

.acct-plan-body {
  font-size: 15px;
  line-height: 1.6;
  color: #a7aeba;
  margin: 0;
  max-width: 430px;
}

.acct-plan-right {
  text-align: right;
}

.acct-price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 10px 0 4px;
}

.acct-price-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--app-ink-6);
  margin: 0;
}

.acct-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.acct-btn {
  background: none;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-5);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  cursor: pointer;
  min-height: 44px;
}

.acct-btn:hover {
  border-color: var(--jim-key);
  color: var(--app-ink-1);
}

.acct-btn-accent {
  border-color: var(--app-accent-dim);
  color: var(--accent);
}

.acct-btn-accent:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.acct-btn-solid {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  font-weight: 700;
}

.acct-btn-solid:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.acct-btn-danger {
  border-color: var(--app-danger-border);
  color: #ff8b7d;
}

.acct-btn-danger:hover {
  border-color: #ff8b7d;
  color: #ff8b7d;
}

.acct-btn-sm {
  font-size: 13px;
  padding: 9px 18px;
  min-height: 40px;
  white-space: nowrap;
}

.acct-free-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--app-ink-6);
  margin: 22px 0 0;
  border-top: 1px solid #1c2410;
  padding-top: 18px;
}

/* --------------------------------------------------------------------------
   How you train — the seven preferences

   Every one of these writes straight through the store, so the other four
   screens change under you while this page is still open. That is the point:
   switching to kilos here and finding pounds on Home is the class of bug the
   single store exists to prevent.
   -------------------------------------------------------------------------- */

.acct-prefs {
  display: flex;
  flex-direction: column;
}

.acct-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--app-line-2);
}

.acct-pref-main {
  flex: 1 1 220px;
  min-width: 0;
}

.acct-pref-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--app-ink-2);
  margin: 0 0 3px;
}

.acct-pref-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--app-ink-5);
  margin: 0;
}

.acct-pref-options {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.acct-opt {
  min-height: 44px;
  border: 1px solid var(--app-line-3);
  background: transparent;
  border-radius: var(--app-r-pill);
  color: var(--app-ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 0 15px;
  cursor: pointer;
}

.acct-opt:hover {
  border-color: var(--accent);
}

.acct-opt[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--app-accent-bg-strong);
  color: var(--app-ink-1);
}

.acct-pref-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--app-line-2);
  margin-top: 4px;
  padding-top: 18px;
}

.acct-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 0;
}

.acct-reset {
  min-height: 44px;
  background: none;
  border: 1px solid var(--app-line-3);
  border-radius: var(--app-r-pill);
  color: var(--app-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  cursor: pointer;
}

.acct-reset:hover {
  border-color: var(--accent);
  color: var(--app-ink-1);
}

/* --------------------------------------------------------------------------
   What Jim texts you
   -------------------------------------------------------------------------- */

.acct-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--app-line-2);
}

.acct-switch {
  border: none;
  padding: 0;
  cursor: pointer;
  width: 50px;
  height: 28px;
  border-radius: var(--app-r-pill);
  background: var(--app-line-4);
  position: relative;
  flex-shrink: 0;
}

.acct-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--app-r-pill);
  background: var(--app-ink-6);
  transition: left var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.acct-switch[aria-checked='true'] {
  background: var(--accent);
}

.acct-switch[aria-checked='true']::after {
  left: 25px;
  background: var(--on-accent);
}

.acct-pro-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--app-ink-6);
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-pill);
  padding: 6px 12px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Your number, your log, stopping the messages
   -------------------------------------------------------------------------- */

.acct-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.acct-number {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.acct-number-value {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--app-ink-2);
}

.acct-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.acct-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-6);
  margin: 0 0 10px;
}

.acct-stat-value {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}

.acct-stat-value.is-accent {
  color: var(--accent);
}

.acct-caption {
  font-size: 13px;
  line-height: 1.65;
  color: var(--app-ink-6);
  margin: 20px 0 0;
  border-top: 1px solid var(--app-line-2);
  padding-top: 18px;
}

.acct-stop-lede {
  font-size: 14px;
  line-height: 1.65;
  color: var(--app-ink-5);
  margin: 0 0 22px;
  max-width: 560px;
}

.acct-stop-lede strong {
  color: var(--app-ink-1);
  font-weight: 600;
}

.acct-notice {
  font-size: 14px;
  line-height: 1.6;
  color: var(--accent);
  margin: 22px 0 0;
}

.acct-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--app-ink-6);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Billing
   -------------------------------------------------------------------------- */

.acct-back {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-5);
  cursor: pointer;
  margin: 0 0 26px;
  min-height: 44px;
}

.acct-back:hover {
  color: var(--app-ink-1);
}

.acct-lede-lg {
  font-size: 16px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 0 0 40px;
  max-width: 520px;
}

.acct-pay-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 760px) {
  .acct-pay-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.acct-pay-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.acct-card-sm {
  padding: 26px 28px;
}

.acct-oncard {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.acct-brand {
  width: 46px;
  height: 32px;
  border-radius: 6px;
  background: var(--app-line-2);
  border: 1px solid var(--app-line-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--app-ink-5);
  flex-shrink: 0;
}

.acct-card-num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--app-ink-2);
  margin: 0 0 3px;
}

.acct-card-exp {
  font-size: 13px;
  color: var(--app-ink-6);
  margin: 0;
}

.acct-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.acct-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.acct-field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-6);
}

.acct-input {
  background: var(--jim-ink-800);
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-nested);
  color: var(--app-ink-1);
  font-family: var(--font-mono);
  font-size: 17px;
  padding: 15px 16px;
  outline: none;
  width: 100%;
}

.acct-input:focus {
  border-color: var(--accent);
}

.acct-input-text {
  font-family: var(--font-sans);
  font-size: 16px;
}

.acct-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.acct-submit {
  background: var(--accent);
  border: none;
  border-radius: var(--app-r-pill);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  cursor: pointer;
  min-height: 44px;
}

.acct-submit:hover {
  background: var(--accent-hover);
}

.acct-submit:disabled {
  background: var(--app-line-2);
  color: var(--app-ink-6);
  cursor: not-allowed;
}

.acct-bill-row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.9fr 0.8fr 0.7fr;
  gap: var(--space-4);
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--app-line-2);
}

/* Five columns do not survive a phone. Below the breakpoint each charge
   becomes a stacked block with its amount on the right of the first line. */
@media (max-width: 680px) {
  .acct-bill-row,
  .acct-bill-head {
    grid-template-columns: 1fr auto;
    gap: 6px var(--space-4);
  }

  .acct-bill-head {
    display: none;
  }
}

.acct-bill-head {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.9fr 0.8fr 0.7fr;
  gap: var(--space-4);
  padding: 18px 0 14px;
}

.acct-bill-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--app-ink-6);
}

.acct-bill-date {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--app-ink-2);
}

.acct-bill-desc {
  font-size: 14px;
  color: var(--app-ink-3);
  margin: 0 0 2px;
}

.acct-bill-period {
  font-size: 12px;
  color: var(--app-ink-6);
  margin: 0;
}

.acct-bill-card {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-5);
}

.acct-bill-amount {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--app-ink-1);
  text-align: right;
}

.acct-bill-pdf {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-align: right;
  min-height: 44px;
}

.acct-bill-pdf:hover {
  color: var(--accent-hover);
}

.acct-recent-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--app-line-2);
}

/* --------------------------------------------------------------------------
   Cancel dialog
   -------------------------------------------------------------------------- */

@keyframes jimFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes jimModalIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.acct-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 5, 7, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 24px 40px;
  overflow-y: auto;
  animation: jimFade 180ms ease both;
}

.acct-modal {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-card);
  background: var(--app-bg-rest);
  padding: 34px clamp(22px, 6vw, 34px) 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: jimModalIn 220ms var(--ease-out) both;
}

.acct-modal-title {
  font-size: clamp(23px, 6vw, 27px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.acct-modal-body {
  font-size: 15px;
  line-height: 1.65;
  color: #a7aeba;
  margin: 0 0 22px;
}

.acct-modal-body strong {
  color: var(--app-ink-1);
  font-weight: 600;
}

.acct-loses {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 18px 0;
  margin: 0 0 24px;
}

.acct-lose {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.acct-lose-dash {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--app-ink-6);
  flex-shrink: 0;
}

.acct-lose-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--app-ink-3);
}

.acct-modal-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--app-ink-6);
  margin: 0 0 24px;
}

.acct-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.acct-modal-actions button {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   The sign-in gate

   Rendered only as a preview state (`?step=phone`). It is a drawing of the
   authentication these screens do not have yet — see D-068 — and the banner
   above it says so, because a login that lets anybody through is worse than
   no login at all if a reader believes it.
   -------------------------------------------------------------------------- */

.acct-gate-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--app-pad-x) 120px;
}

.acct-gate-wrap {
  width: 100%;
  max-width: 460px;
}

.acct-gate {
  border: 1px solid var(--border-default);
  border-radius: var(--app-r-card);
  background: linear-gradient(165deg, #0e1015 0%, #0a0c10 60%);
  padding: 40px clamp(22px, 7vw, 36px);
  animation: jimCardIn 340ms var(--ease-out) both;
}

.acct-gate-banner {
  border: 1px solid var(--app-warn-border);
  border-left: 3px solid var(--app-warn);
  border-radius: var(--app-r-md, 7px);
  background: var(--app-warn-bg);
  color: var(--app-warn);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 12px 14px;
  margin: 0 0 22px;
}

.acct-gate-title {
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 10px;
}

.acct-gate-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--app-ink-5);
  margin: 0 0 28px;
}

.acct-gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.acct-gate-input {
  background: var(--jim-ink-800);
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-nested);
  color: var(--app-ink-1);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 16px 18px;
  outline: none;
  width: 100%;
}

.acct-gate-input:focus {
  border-color: var(--accent);
}

.acct-gate-go {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-size: 16px;
  font-weight: 700;
  padding: 16px;
  border-radius: var(--app-r-pill);
  cursor: pointer;
  min-height: 44px;
}

.acct-gate-go:hover {
  background: var(--accent-hover);
}

.acct-gate-go:disabled {
  background: var(--app-line-2);
  color: var(--app-ink-6);
  cursor: not-allowed;
}

.acct-gate-fine {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--app-ink-6);
  margin: 22px 0 0;
}

/* The six-digit code. One real input, transparent, over six drawn cells —
   which is what lets iOS autofill a code straight from the message. */
.acct-otp {
  position: relative;
}

/*
 * Hidden until `signin.js` turns them on. Without it the six cells would sit
 * above a visible input showing nothing, which is worse than no cells at all.
 */
.acct-otp-cells {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.acct-otp-cells.is-on {
  display: grid;
}

.acct-otp-cell {
  height: 62px;
  border-radius: var(--app-r-nested);
  background: var(--jim-ink-800);
  border: 1.5px solid var(--app-line-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(19px, 6vw, 26px);
  color: var(--app-ink-1);
}

.acct-otp-cell.is-filled {
  border-color: var(--accent);
}

.acct-otp-cell.is-error {
  border-color: var(--app-danger-border);
  color: #ff8b7d;
}

.acct-otp-cell.is-next {
  background: var(--app-accent-bg);
  border-color: var(--accent);
}

@keyframes jimCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.acct-caret {
  width: 2px;
  height: 26px;
  background: var(--accent);
  animation: jimCaret 1s steps(1) infinite;
}

/*
 * The real field, transparent, lying over the drawn cells.
 *
 * One input rather than six: six fights every password manager, breaks
 * `autocomplete="one-time-code"`, and reads to a screen reader as six
 * unlabelled boxes instead of one labelled code.
 */
.acct-otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: none;
  color: transparent;
  font-size: 26px;
  letter-spacing: 3em;
  padding: 0;
  outline: none;
  cursor: text;
}

/* The no-JavaScript state: an ordinary, visible six-digit field. */
.acct-otp-input.acct-otp-bare {
  position: static;
  inset: auto;
  height: auto;
  opacity: 1;
  background: var(--jim-ink-800);
  border: 1px solid var(--app-line-4);
  border-radius: var(--app-r-nested);
  color: var(--app-ink-1);
  font-family: var(--font-mono);
  font-size: clamp(22px, 7vw, 28px);
  letter-spacing: 0.42em;
  text-align: center;
  padding: 16px 18px;
  cursor: text;
}

.acct-otp-input.acct-otp-bare:focus {
  border-color: var(--accent);
}

/*
 * The screen could not load the athlete's log.
 *
 * Shown instead of the screen, never beside it: the fallback would otherwise
 * be the built-in seed, which is a different athlete's training (D-070).
 */
.app-boot-error {
  font-size: 16px;
  line-height: 1.6;
  color: var(--app-ink-4);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Sign-in page chrome (D-069)
   -------------------------------------------------------------------------- */

.acct-gate-back {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-5);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.acct-gate-back:hover {
  color: var(--app-ink-1);
}

.acct-gate-masked {
  color: var(--app-ink-1);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 15px;
  white-space: nowrap;
}

/* The resend is its own POST, so it is its own form sitting inline. */
.acct-gate-resend {
  display: inline;
}

/*
 * Errors on this page are deliberately vague about *which* part was wrong —
 * see `AuthService`. What they must never be is invisible: `role="alert"` so a
 * screen reader announces it on arrival, and amber rather than the accent so
 * it does not read as a success.
 */
.acct-gate-error {
  border: 1px solid var(--app-warn-border);
  border-left: 3px solid var(--app-warn);
  border-radius: 7px;
  background: var(--app-warn-bg);
  color: var(--app-warn);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  margin: 0 0 22px;
}

.acct-otp-error {
  font-size: 13px;
  color: #ff8b7d;
  margin: 2px 0 0;
}

.acct-gate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.acct-gate-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-6);
  cursor: pointer;
  min-height: 44px;
}

.acct-gate-link:hover {
  color: var(--app-ink-5);
}

.acct-gate-link.is-accent {
  color: var(--accent);
}

.acct-gate-link.is-accent:hover {
  color: var(--accent-hover);
}

.acct-gate-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--app-ink-6);
  margin: 22px 4px 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .app-page,
  .app-main,
  .acct-gate,
  .acct-scrim,
  .acct-modal,
  .app-toast,
  .acct-caret {
    animation: none !important;
  }

  .app-page.is-leaving {
    animation: none !important;
    opacity: 1;
  }
}