/* Self-hosted fonts — served locally so Gym Mode works fully offline */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:
  U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
  U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
  U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:
  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
  U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
  U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:
  U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
  U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
  U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:
  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
  U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
  U+2215, U+FEFF, U+FFFD;
}

:root {
  --narrow-viewport-contract: 0;
  --hover-micro-scale: scale(1.02) translateY(-2px);
  --hover-micro-shadow:
  0 8px 16px -4px hsla(0, 0%, 0%, 0.1), 0 4px 8px -2px hsla(0, 0%, 0%, 0.06);
  --transition-fluid: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Surfaces — deeper black with cooler undertone (--bg/--bg-alt live in OLED theme block) */
  --bg-tools: #060a0f;
  --bg-buy: #150508;
  --bg-wedge: #0a0a10;
  --surface: #11131a;
  --surface-2: #171a23;
  --surface-3: #1d2030;
  --border: #1f2230;
  --border-bright: #2a2e42;

  /* Text */
  --text: #f4f5f7;
  --text-muted: #a4a8b9;
  --text-dim: #9297b0;
  --muted: var(--text-muted); /* alias: 5 legacy var(--muted) usages were undefined; map to the muted text token */

  /* Electric accent palette */
  --blue: #2563eb;
  --blue-light: #93c5fd;
  --blue-glow: #60a5fa;

  --purple: #a855f7;
  --purple-light: #d8b4fe;
  --purple-glow: #b95cff;

  --green: #22c55e;
  --green-light: #6ee7a3;
  --green-glow: #2eff7a;

  --accent-primary: #60a5fa;
  --cyan: var(--accent-primary);
  --accent-warm: #e0b271;
  --accent-glow: #9a6dff;
  --oxblood: #7f1d1d; /* P-38 D4 placeholder pending operator approval */
  
  
  

  --accent: var(--accent-primary);

  /* Layout */
  --max-w: 1200px;
  --max-w-narrow: 760px;
  --radius: 6px;
  --radius-lg: 12px;

  /* Glow shadows */
  --glow-accent:
  0 0 22px rgba(96, 165, 250, 0.45), 0 0 60px rgba(96, 165, 250, 0.18);
  --glow-blue:
  0 0 22px rgba(96, 165, 250, 0.4), 0 0 60px rgba(96, 165, 250, 0.18);
  --glow-green: 0 0 22px rgba(46, 255, 122, 0.35);

  /* Typography */
  --f-display: "Outfit", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --f-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Narrow viewport contract: explicit 1024px guard for mobile visual QA. */
@media (max-width: 1024px) {
  :root {
  --narrow-viewport-contract: 1;
  }
}

/* P-38 P1 BLOCKING visual fixes — IMPERATOR ROUTE 1 (2026-05-15, CC-5) */
/* Fix 1: version badge hidden from production HTML per P-55 1.3.1 */
/* !important required: overridden later at line ~14160 by display:inline-flex */
.home-overline-version {
  display: none !important;
}
/* Fix 2: floating "Start session" lime-pill removed per P-38 §2 A11 + P-39 §3 + P-53 §2 + CC-5 T-5 verdict */
/* !important to guard against possible JS inline-style or @media overrides */
.session-start-btn {
  display: none !important;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* iOS: kill grey tap flash on every interactive element */
* {
  -webkit-tap-highlight-color: transparent;
}
/* iOS: kill 300ms tap delay on all interactive elements */
a,
button,
[role="button"],
summary,
label,
input,
select,
textarea,
.quiz-opt,
.pager-prev,
.pager-next,
.chapter-next,
.chapter-cta,
.nav-item,
.sidebar-item,
.tile,
.choose-card,
.tool-card,
.faq-item {
  touch-action: manipulation;
}
/* Hover states only on devices that support real hover (not touch) */
@media (hover: none) {
  .choose-card:hover,
  .tool-card:hover,
  .faq-item:hover,
  .tracker-pane:hover,
  .session-pane:hover,
  .price-card:hover,
  .tile:hover,
  .pager-prev:hover,
  .pager-next:hover,
  .chapter-next:hover,
  .chapter-cta:hover,
  .sticky-mobile-cta:hover {
  transform: none;
  }
}

/* Custom text selection color — premium polish */
::selection {
  background: rgba(96, 165, 250, 0.45);
  color: var(--text);
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
::-moz-selection {
  background: rgba(96, 165, 250, 0.45);
  color: var(--text);
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-warm));
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-warm), var(--accent-primary));
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
  overscroll-behavior-y: contain; /* Slice v122 PTR */

  /* Faint dot grid covering the entire site — futuristic background texture */
  background-image: radial-gradient(
  circle at 1px 1px,
  rgba(255, 255, 255, 0.025) 1px,
  transparent 1px
  );
  background-size: 24px 24px;
}

a {
  color: var(--blue-light);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  margin: 0 0 0.5em;
}
h4 {
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h1 {
  font-size: clamp(2rem, calc(1.09rem + 4.54vw), 4.5rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.75rem, calc(1.37rem + 1.91vw), 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}
h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow {
  max-width: var(--max-w-narrow);
}

.accent-blue {
  color: var(--blue-light);
}
.accent-purple {
  color: var(--purple-light);
}
.accent-green {
  color: var(--green-light);
}
.accent-primary {
  color: var(--accent-warm);
}
.accent-secondary {
  color: var(--text-muted);
}

/* ===== HUD MARKER (// 01 — TITLE) ===== */
.hud-marker {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
  padding: 0;
  position: relative;
}
.hud-marker::before,
.hud-marker::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--border-bright);
  vertical-align: middle;
  margin: 0 12px;
}

/* ===== NAVIGATION ===== */
.topnav {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: rgba(7, 7, 10, 0.7);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  color: var(--text);
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  border-radius: 4px;
  color: white;
  box-shadow: var(--glow-accent);
}
.brand-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.brand-status {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--green-light);
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border: 1px solid rgba(46, 255, 122, 0.25);
  border-radius: 3px;
  background: rgba(46, 255, 122, 0.05);
  animation: pulse-status 2.4s ease-in-out infinite;
}
@keyframes pulse-status {
  0%,
  100% {
  opacity: 1;
  box-shadow: 0 0 0 rgba(46, 255, 122, 0);
  }
  50% {
  opacity: 0.7;
  box-shadow: 0 0 12px rgba(46, 255, 122, 0.25);
  }
}
.navlinks {
  list-style: none;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.navlinks a {
  display: inline-block;
  padding: 7px 12px;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: 4px;
  transition:
  color 0.15s,
  background 0.15s;
}
.navlinks a:hover,
.navlinks a.active {
  color: var(--text);
  background: var(--surface);
}
.navlinks a.cta {

  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;

  
  

  font-weight: 600;
  margin-left: 6px;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}
.navlinks a.cta:hover {
  box-shadow:
  0 0 0 1px rgba(96, 165, 250, 0.7),
  var(--glow-accent);
}
@media (max-width: 1024px) {
  .topnav {
  flex-direction: column;
  gap: 12px;
  }
  .navlinks {
  justify-content: center;
  }
}

/* ===== HERO-ADJACENT SHARED CONTROLS ===== */
.kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent-warm);
  margin: 0 0 28px;
  padding: 6px 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.06);
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.5);
}
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Typed kicker reveal animation — GPU-only via clip-path */
@keyframes type-reveal {
  from {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  }
  to {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  }
}
.kicker[data-typed] {
  display: inline-block;
  white-space: nowrap;
  animation: type-reveal 1.4s steps(48, end) 0.2s both;
  max-width: 100%;
  will-change: clip-path;
}
@media (prefers-reduced-motion: reduce) {
  .kicker[data-typed] {
  animation: none;
  -webkit-clip-path: none;
  clip-path: none;
  }
}

/* Ensure HTML hidden attribute always wins over author display rules */
[hidden] {
  display: none !important;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
  transform 0.1s,
  background 0.15s,
  border-color 0.15s,
  box-shadow 0.15s;
  text-align: center;
  border: 1px solid transparent;
  position: relative;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {

  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;

  
  

  box-shadow:
  0 0 0 1px rgba(96, 165, 250, 0.3),
  0 8px 28px rgba(96, 165, 250, 0.25);
}
.btn-primary:hover {
  box-shadow:
  0 0 0 1px rgba(96, 165, 250, 0.6),
  0 8px 32px rgba(96, 165, 250, 0.45),
  var(--glow-accent);
}
/* Motion-as-reward: compositor-only lift on hover, press on tap. Reduced-motion cohort opts out entirely. */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { transition: transform .13s ease, box-shadow .18s ease; }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0) scale(0.985); }
  .btn-secondary { transition: transform .13s ease, background .18s ease, border-color .18s ease; }
  .btn-secondary:active { transform: scale(0.97); }
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: var(--border-bright);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  border-color: var(--blue-glow);
  color: var(--blue-light);
  box-shadow: var(--glow-blue);
}
.btn-large {
  padding: 16px 32px;
  font-size: 1.05rem;
}

/* ===== SECTIONS ===== */
.section {
  padding: 96px 0;
  position: relative;
}
.section-alt {
  background: var(--bg-alt);
}
.section-wedge {
  background: var(--bg-wedge);
  border-bottom: 1px solid var(--border);
}
.section h2 {
  text-align: center;
}
.section .lead-text {
  text-align: center;
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 22px;
  line-height: 1.6;
}

/* ===== HOOK + WIN CALLOUTS ===== */
.hook {
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--accent-warm);
  font-weight: 500;
  font-style: italic;
  max-width: 480px;
  margin: 0 auto 22px;
  padding: 0 16px;
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.2);
}
.win-callout {
  margin: 40px auto 0;
  max-width: 1024px;
  padding: 24px 28px;
  background: linear-gradient(
  180deg,
  rgba(34, 197, 94, 0.1),
  rgba(34, 197, 94, 0.03)
  );
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-left: 3px solid var(--green-glow);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem;
  color: var(--text);
  box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.06);
}
.win-callout strong {
  color: var(--green-light);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 6px;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}
@media (max-width: 1024px) {
  .three-col {
  grid-template-columns: 1fr;
  }
}
.card {
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.04),
  rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 28px;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transition:
  border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
  transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
  box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
  background 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.4);
}
.card:hover {
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.08),
  rgba(255, 255, 255, 0.02)
  );
  border-color: rgba(96, 165, 250, 0.6);
  transform: scale(1.03) translateY(-6px);
  box-shadow: 
  0 20px 40px -10px rgba(0, 0, 0, 0.5), 
  0 0 30px rgba(96, 165, 250, 0.25),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.card h3 {
  margin-bottom: 12px;
}

/* ===== COMPARE GRID ===== */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .compare-grid {
  grid-template-columns: 1fr;
  }
}
.compare-col {
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
  transform 0.2s,
  border-color 0.2s;
}
.compare-col:hover {
  transform: translateY(-2px);
}
.compare-col h3 {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.compare-bad h3 {
  color: var(--text-muted);
}
.compare-good {
  border-color: rgba(34, 197, 94, 0.45);
  background:
  linear-gradient(180deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 40px rgba(34, 197, 94, 0.1);
}
.compare-good h3 {
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}
.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.compare-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.compare-list li:last-child {
  border-bottom: none;
}
.compare-good .compare-list li {
  color: var(--text);
}
.compare-list .metric {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.86em;
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
  letter-spacing: 0.01em;
}
.compare-good .compare-list .metric {
  color: var(--green-light);
}
.compare-bad .compare-list .metric {
  color: var(--accent-warm);
}

/* ===== STORY BLOCK ===== */
.story-block {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: relative;
}
.story-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  width: 36px;
  height: 2px;
  background: var(--accent-primary);
  box-shadow: var(--glow-accent);
}
.story-block h3.story-h {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-warm);
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
}
.story-block p {
  font-size: 1.05rem;
}
.story-block p em {
  color: var(--accent-warm);
  font-style: normal;
  font-weight: 500;
}
.story-wins {
  list-style: none;
  padding: 0;
  margin: 0;
}
.story-wins li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.story-wins li:last-child {
  border-bottom: none;
}
.story-wins strong {
  color: var(--green-light);
  font-family: var(--f-mono);
  font-size: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.story-quote {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text);
  border-left: 3px solid var(--accent-glow);
  padding-left: 22px;
  margin: 0;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}

/* ===== TABLES ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll for wide tables on iOS */
  overscroll-behavior-x: contain; /* don't chain horizontal table scroll to page nav */
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 36px auto 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
th,
td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
tr:last-child td {
  border-bottom: none;
}
tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.split-table td:first-child {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--blue-light);
  width: 110px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}
.volume-table td:first-child {
  font-weight: 600;
}
.volume-table td:nth-child(2) {
  color: var(--green-light);
  font-family: var(--f-mono);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
}
.volume-table td:nth-child(3) {
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.86em;
}

.footnote {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 26px;
}
.footnote code {
  font-family: var(--f-mono);
  background: var(--surface);
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 0.86em;
  color: var(--blue-light);
}

/* ===== DAILY PHASES ===== */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 1024px) {
  .phases {
  grid-template-columns: 1fr;
  }
}
.phase {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
  border-color 0.2s,
  transform 0.2s;
}
.phase:hover {
  transform: translateY(-2px);
}
.phase-num {
  position: absolute;
  top: -18px;
  left: 26px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: white;
}
.phase-blue {
  border-color: rgba(168, 85, 247, 0.3);
}
.phase-blue .phase-num {
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
}
.phase-blue:hover {
  border-color: rgba(168, 85, 247, 0.55);
}
.phase-blue h3 {
  color: var(--purple-light);
  text-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
}

.phase-blue-dark {
  border-color: rgba(96, 165, 250, 0.4);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 36px rgba(96, 165, 250, 0.1);
}
.phase-blue-dark .phase-num {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  box-shadow: var(--glow-blue);
}
.phase-blue-dark h3 {
  color: var(--blue-light);
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.45);
}

.phase-green {
  border-color: rgba(34, 197, 94, 0.3);
}
.phase-green .phase-num {
  background: linear-gradient(135deg, var(--green), var(--green-light));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.45);
}
.phase-green:hover {
  border-color: rgba(34, 197, 94, 0.55);
}
.phase-green h3 {
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

.phase-time {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

/* ===== DELOAD ===== */
.deload-rules {
  list-style: none;
  padding: 0;
  max-width: 480px;
  margin: 36px auto 0;
}
.deload-rules li {
  padding: 14px 18px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-left-color 0.2s;
}
.deload-rules li:hover {
  border-left-color: var(--accent-glow);
}
.deload-rules li:last-child {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.1),
  rgba(96, 165, 250, 0.03)
  );
  border-left-width: 4px;
  border-left-color: var(--accent-glow);
  font-weight: 500;
  box-shadow: inset 0 0 30px rgba(96, 165, 250, 0.05);
}
.sub {
  text-align: center;
  margin-top: 56px;
  margin-bottom: 28px;
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.wave {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1024px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .wave {
  grid-template-columns: 1fr 1fr;
  }
}
.wave-week {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wave-week h4 {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.wave-week p {
  font-size: 0.92rem;
  margin: 0;
  color: var(--text-muted);
}
.wave-push {
  border-color: rgba(96, 165, 250, 0.4);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.03)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.08);
}
.wave-push h4 {
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}
.wave-deload {
  border-color: rgba(34, 197, 94, 0.4);
  background:
  linear-gradient(180deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.03)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.08);
}
.wave-deload h4 {
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

/* ===== JOINTS ===== */
.joint-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
@media (max-width: 1024px) {
  .joint-grid {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .joint-grid {
  grid-template-columns: 1fr;
  }
}
.joint {
  padding: 22px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s;
}
.joint:hover {
  border-color: rgba(96, 165, 250, 0.35);
}
.joint h4 {
  font-family: var(--f-mono);
  color: var(--accent-warm);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.joint p {
  font-size: 0.94rem;
  margin: 0;
  color: var(--text-muted);
}
.joint-wide {
  grid-column: 1 / -1;
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 0 34px rgba(96, 165, 250, 0.06);
}
.joint-wide p {
  color: var(--text);
}

/* ===== TOOLS ===== */
.section-tools {
  background: var(--bg-tools);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.section-tools::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
  ellipse at top,
  rgba(96, 165, 250, 0.08),
  transparent 70%
  );
  pointer-events: none;
}
.section-tools .container {
  position: relative;
  z-index: 1;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .tools-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .tools-grid {
  grid-template-columns: 1fr;
  }
}
.tool-card {
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.03),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
  border-color 0.2s,
  transform 0.2s,
  box-shadow 0.2s;
}
.tool-card:hover {
  border-color: var(--blue-glow);
  transform: var(--hover-micro-scale);
  box-shadow:
  var(--hover-micro-shadow),
  0 0 36px rgba(96, 165, 250, 0.15);
}
.tool-icon {
  font-size: 2rem;
  margin-bottom: 14px;
  line-height: 1;
}
.tool-card h3 {
  margin-bottom: 12px;
  font-size: 1.1rem;
}
.tool-card p {
  color: var(--text-muted);
  font-size: 0.94rem;
  flex: 1;
  margin-bottom: 18px;
}
.tool-card .btn {
  align-self: flex-start;
}

/* ===== BUY ===== */
.section-buy {
  background:
  radial-gradient(ellipse at top, rgba(96, 165, 250, 0.1), transparent 60%),
  linear-gradient(180deg, var(--bg-alt), var(--bg-buy));
}
.buy-card {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: var(--radius-lg);
  padding: 44px 38px;
  text-align: center;
  margin-top: 36px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 60px rgba(96, 165, 250, 0.1);
}
.buy-name {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--accent-warm);
}
.buy-features {
  color: var(--text-muted);
  font-size: 0.96rem;
  max-width: 480px;
  margin: 0 auto 26px;
}
.buy-price {
  margin: 28px 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}
.price-amount {
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--accent-warm);
  letter-spacing: -0.05em;
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
}
.price-note {
  font-family: var(--f-mono);
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.buy-footnote {
  margin-top: 22px;
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* ===== ABOUT ===== */
#about p {
  font-size: 1.04rem;
  color: var(--text);
}

/* ===== CONTACT ===== */
.contact-line {
  text-align: center;
  font-size: 1.1rem;
  margin: 8px 0;
}
.contact-line:last-child {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ===== FOOTER ===== */
.footer {
  padding: 60px 0 36px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}
.footer-line {
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.footer-line strong {
  letter-spacing: 0.1em;
}
.copyright {
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin-top: 18px;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-base);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-glow), var(--accent-glow));
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
  transition: width 0.05s linear;
}

/* ===== REVEAL ON SCROLL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity 0.65s ease,
  transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
  opacity: 1;
  transform: none;
  transition: none;
  }
}

/* ===== HERO MINI-QUIZ ===== */
.section-quiz {
  background:
  radial-gradient(ellipse at top, rgba(96, 165, 250, 0.1), transparent 60%),
  var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.quiz {
  margin-top: 32px;
  padding: 36px;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.01)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(96, 165, 250, 0.1);
  position: relative;
  overflow: hidden;
}
.quiz-step {
  display: none;
  animation: fadeIn 0.35s ease;
}
.quiz-step.active {
  display: block;
}
@keyframes fadeIn {
  from {
  opacity: 0;
  transform: translateY(10px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.quiz-q {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 22px;
  text-align: center;
}
.quiz-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 480px) {
  .quiz-opts {
  grid-template-columns: 1fr;
  }
}
.quiz-opt {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.quiz-opt:hover {
  border-color: var(--blue-glow);
  background: rgba(96, 165, 250, 0.08);
  color: var(--blue-light);
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
}
.quiz-opt.selected {
  border-color: var(--accent-primary);
  background: rgba(96, 165, 250, 0.12);
  color: var(--accent-warm);
}
.quiz-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.quiz-progress-text {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.quiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-bright);
  transition:
  background 0.2s,
  box-shadow 0.2s,
  width 0.2s;
}
.quiz-dot.active {
  background: var(--accent-primary);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
  width: 24px;
  border-radius: 4px;
}
.quiz-dot.done {
  background: var(--green);
}
.quiz-result {
  display: none;
  animation: fadeIn 0.5s ease;
}
.quiz-result.active {
  display: block;
  text-align: center;
}
.quiz-result-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(46, 255, 122, 0.4);
  margin: 0 0 10px;
}
.quiz-result-title {
  font-family: var(--f-display);
  font-size: 1.8rem;
  margin-bottom: 22px;
  text-shadow: 0 0 24px rgba(96, 165, 250, 0.4);
}
.quiz-result-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 8px;
  text-align: left;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.quiz-result-list li {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-glow);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.96rem;
}
.quiz-result-list li::before {
  content: "// ";
  color: var(--text-dim);
  font-family: var(--f-mono);
  margin-right: 4px;
}
.quiz-disclaimer {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ===== COMPARE TABS ===== */
.compare-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 32px auto 28px;
  flex-wrap: wrap;
}
.compare-tab {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 11px 22px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  text-transform: uppercase;
}
.compare-tab:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.compare-tab[aria-selected="true"] {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-warm);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.2);
}
.compare-tab-good[aria-selected="true"] {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--green);
  color: var(--green-light);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
}
.compare-stage {
  position: relative;
  min-height: 360px;
}
.compare-panel {
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.4s ease;
}
.compare-panel.compare-bad {
  border-color: var(--border);
}
.compare-panel.compare-good {
  border-color: rgba(34, 197, 94, 0.4);
  background:
  linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 50px rgba(34, 197, 94, 0.1);
}
.compare-verdict {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-warm);
  text-align: center;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
}
.compare-verdict-good {
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}

/* ===== ARCHETYPE TABS (in split section) ===== */
.archetype-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 32px auto 24px;
  flex-wrap: wrap;
}
.archetype-tab {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  text-transform: uppercase;
}
.archetype-tab:hover {
  color: var(--text);
  border-color: var(--blue-glow);
}
.archetype-tab[aria-selected="true"] {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--blue-glow);
  color: var(--blue-light);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.25);
}
.archetype-stage {
  position: relative;
}
.archetype-panel {
  animation: fadeIn 0.4s ease;
}
.archetype-meta {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.meta-pill {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 3px;
  color: var(--blue-light);
}

/* ===== MARCUS CHAPTERS ===== */
.chapters {
  margin-top: 36px;
}
.chapter-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.chapter-tab {
  flex: 1;
  min-width: 200px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  text-align: left;
}
.chapter-tab:hover {
  color: var(--text);
  border-color: var(--border-bright);
  background: rgba(255, 255, 255, 0.05);
}
.chapter-tab.active {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.1),
  rgba(96, 165, 250, 0.03)
  );
  border-color: var(--accent-primary);
  color: var(--accent-warm);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.18);
}
.chapter-tab.done {
  color: var(--green-light);
  border-color: rgba(34, 197, 94, 0.3);
}
.chapter-stage {
  position: relative;
  min-height: 320px;
}
.chapter-panel {
  padding: 32px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.4s ease;
  position: relative;
}
.chapter-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  width: 36px;
  height: 2px;
  background: var(--accent-primary);
  box-shadow: var(--glow-accent);
}
.chapter-next,
.chapter-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 22px;
  font-family: var(--f-display);
  font-size: 0.96rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
  transform 0.1s,
  box-shadow 0.15s;
  text-decoration: none;
  box-shadow:
  0 0 0 1px rgba(96, 165, 250, 0.3),
  0 6px 20px rgba(96, 165, 250, 0.2);
}
.chapter-next:hover,
.chapter-cta:hover {
  transform: translateY(-1px);
  box-shadow:
  0 0 0 1px rgba(96, 165, 250, 0.6),
  0 8px 24px rgba(96, 165, 250, 0.4),
  var(--glow-accent);
}
.chapter-coda {
  margin-top: 24px;
  color: var(--text-muted);
}

/* ===== WHO THIS IS FOR ===== */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  .who-grid {
  grid-template-columns: 1fr;
  }
}
.who-col {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.who-yes {
  border-color: rgba(34, 197, 94, 0.35);
  background:
  linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.01)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
}
.who-no {
  border-color: rgba(96, 165, 250, 0.3);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.01)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
}
.who-col h3 {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.who-yes h3 {
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}
.who-no h3 {
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}
.who-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.who-col li {
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 0.96rem;
  position: relative;
}
.who-col li:last-child {
  border-bottom: none;
}
.who-col li::before {
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--f-mono);
  font-weight: 700;
}
.who-yes li::before {
  content: "+";
  color: var(--green-light);
}
.who-no li::before {
  content: "\2014";
  color: var(--accent-warm);
}

/* ===== FAQ ===== */
.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 32px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s;
}
.faq-item[open] {
  border-color: var(--border-bright);
}
.faq-item summary {
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: var(--accent-warm);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item summary:hover {
  background: rgba(255, 255, 255, 0.025);
}
/* Affordance: <summary> is the genuine click target that expands/collapses the FAQ (cursor:pointer). Background-tint on hover exists but there is no press tactility. Compositor-only press-on-tap, motion-gated, mirrors .btn-primary:active. summary is display:flex so scale() is safe. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item summary { transition: transform .13s ease, background 0.2s; }
  .faq-item summary:active { transform: scale(0.99); }
}
.faq-body {
  padding: 0 22px 20px;
  color: var(--text-muted);
  font-size: 0.96rem;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.faq-body p {
  max-width: 68ch;
  line-height: 1.65;
}
.faq-body em {
  color: var(--accent-warm);
  font-style: normal;
  font-weight: 500;
}
.faq-body strong {
  color: var(--text);
}

/* ===== GLOSSARY ===== */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  .glossary-grid {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .glossary-grid {
  grid-template-columns: 1fr;
  }
}
.glossary-item {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s;
}
.glossary-item:hover {
  border-color: var(--border-bright);
}
.glossary-item {
  display: block;
}
.glossary-term {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}
.glossary-def {
  display: block;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== SECTION MINIMAP (right-edge dots) ===== */
.minimap {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 6px;
  background: rgba(7, 7, 10, 0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.minimap-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-bright);
  transition:
  background 0.2s,
  box-shadow 0.2s,
  transform 0.2s;
  cursor: pointer;
}
.minimap-dot:hover {
  background: var(--text-muted);
  transform: scale(1.3);
}
.minimap-dot.active {
  background: var(--accent-primary);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
  transform: scale(1.4);
}
@media (max-width: 1024px) {
  .minimap {
  display: none;
  }
}

/* ===== STICKY MOBILE CTA (bottom of viewport, mobile only) ===== */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom)); /* a11y 2.5.5: sit above the fixed bottom mobile-app-nav (~72px) so the tap target isn't obscured to a 9px sliver */
  z-index: var(--z-base);
  padding: 12px 16px;
  min-height: 44px; /* a11y WCAG 2.5.5 AAA: 44px touch target */
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  border-radius: 12px;
  text-decoration: none;
  color: white;
  align-items: center;
  justify-content: space-between;
  box-shadow:
  0 10px 30px rgba(96, 165, 250, 0.4),
  0 0 0 1px rgba(96, 165, 250, 0.4);
  transition: transform 0.15s;
}
.sticky-mobile-cta:hover {
  transform: translateY(-2px);
  color: white;
}
.smc-line {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.smc-button {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.92rem;
}
@media (max-width: 1024px) {
  .sticky-mobile-cta {
  display: flex;
  }
}

/* ===== INSIDE THE MEMBERSHIP (preview tiles) ===== */
.section-inside {
  background: var(--bg-alt);
  position: relative;
}
.section-inside::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
  radial-gradient(
    ellipse at 20% 0%,
    rgba(96, 165, 250, 0.08),
    transparent 50%
  ),
  radial-gradient(
    ellipse at 80% 100%,
    rgba(34, 197, 94, 0.06),
    transparent 50%
  );
  pointer-events: none;
}
.section-inside .container {
  position: relative;
  z-index: 1;
}
.inside-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 18px;
  margin-top: 36px;
}
.tile {
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.03),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
  transform 0.25s ease,
  border-color 0.2s,
  box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tile h3 {
  font-size: 1.18rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.tile-readiness {
  grid-column: span 3;
  border-color: rgba(96, 165, 250, 0.3);
}
.tile-dashboard {
  grid-column: span 3;
  border-color: rgba(34, 197, 94, 0.3);
}
.tile-leaderboard {
  grid-column: span 2;
  border-color: rgba(96, 165, 250, 0.3);
}
.tile-streak {
  grid-column: span 2;
  border-color: rgba(168, 85, 247, 0.3);
}
.tile-pr {
  grid-column: span 2;
  border-color: rgba(96, 165, 250, 0.3);
}

@media (max-width: 1024px) {
  .inside-grid {
  grid-template-columns: repeat(2, 1fr);
  }
  .tile-readiness,
  .tile-dashboard,
  .tile-leaderboard,
  .tile-streak,
  .tile-pr {
  grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .inside-grid {
  grid-template-columns: 1fr;
  }
  .tile-readiness,
  .tile-dashboard,
  .tile-leaderboard,
  .tile-streak,
  .tile-pr {
  grid-column: span 1;
  }
}

/* Readiness tile */
.readiness-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.readiness-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  align-items: center;
  gap: 12px;
}
.readiness-name {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.readiness-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border-bright);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.readiness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
}
.readiness-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.readiness-value {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--blue-light);
  text-align: right;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
.readiness-output {
  margin-top: auto;
  padding: 16px;
  background: linear-gradient(
  180deg,
  rgba(34, 197, 94, 0.08),
  rgba(34, 197, 94, 0.02)
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius);
  text-align: center;
}
.readiness-output-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.readiness-output-pct {
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--green-light);
  letter-spacing: -0.04em;
  text-shadow: 0 0 24px rgba(34, 197, 94, 0.5);
  line-height: 1.1;
  margin: 4px 0;
  transition:
  color 0.3s,
  text-shadow 0.3s;
}
.readiness-output-pct.warn {
  color: var(--accent-warm);
  text-shadow: 0 0 24px rgba(96, 165, 250, 0.5);
}
.readiness-output-msg {
  color: var(--text);
  font-size: 0.92rem;
}

/* Dashboard tile */
.dash-bars {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.dash-bar {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
}
.dash-name {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.dash-track {
  height: 22px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.dash-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(7, 7, 10, 0.85);
  letter-spacing: 0.02em;
}
.dash-fill.lag {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
  color: rgba(255, 255, 255, 0.95);
}
.dash-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.dash-meta > div {
  text-align: center;
}
.dash-meta-num {
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green-light);
  letter-spacing: -0.02em;
}
.dash-meta-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Leaderboard tile */
.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.leaderboard-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.leaderboard-list li:last-child {
  border-bottom: none;
}
.lb-rank {
  font-family: var(--f-mono);
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.lb-name {
  color: var(--text);
}
.lb-score {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--accent-warm);
}
.lb-you {
  background: rgba(96, 165, 250, 0.06);
  margin: 4px -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 4px;
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.lb-you .lb-rank {
  color: var(--accent-warm);
}
.leaderboard-note {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
  font-style: italic;
}

/* Streak tile */
.streak-num {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--purple-light);
  letter-spacing: -0.04em;
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.5);
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.streak-unit {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-shadow: none;
  text-transform: uppercase;
}
.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}
.streak-day {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}
.streak-day.done {
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}
.streak-day.today {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  box-shadow: var(--glow-accent);
  animation: pulse-today 1.6s ease-in-out infinite;
}
@keyframes pulse-today {
  0%,
  100% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.12);
  }
}
.streak-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.streak-badge {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.streak-badge.done {
  background: linear-gradient(
  135deg,
  rgba(168, 85, 247, 0.2),
  rgba(168, 85, 247, 0.08)
  );
  border-color: rgba(168, 85, 247, 0.5);
  color: var(--purple-light);
}
.streak-badge.near {
  border-color: rgba(96, 165, 250, 0.4);
  color: var(--accent-warm);
}

/* PR card tile */
.pr-card-mock {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.02)),
  linear-gradient(135deg, rgba(168, 85, 247, 0.08), transparent),
  rgba(7, 7, 10, 0.6);
  border: 1px solid rgba(96, 165, 250, 0.5);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.15);
  position: relative;
  overflow: hidden;
}
.pr-card-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--accent-warm);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  margin-bottom: 14px;
}
.pr-card-mid {
  text-align: center;
  padding: 8px 0;
}
.pr-card-lift {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.pr-card-num {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
}
.pr-card-unit {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  text-shadow: none;
  letter-spacing: 0.04em;
}
.pr-card-delta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--green-light);
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}
.pr-card-bottom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.2);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.pr-note {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0;
}

/* ===== PRICING GRID ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 1024px) {
  .pricing-grid {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .pricing-grid {
  grid-template-columns: 1fr;
  }
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
  border-color 0.2s,
  transform 0.2s,
  box-shadow 0.2s;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-bright);
}
.price-card-pro {
  border-color: rgba(96, 165, 250, 0.4);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.01)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 36px rgba(96, 165, 250, 0.1);
}
.price-card-pro:hover {
  box-shadow: 0 0 48px rgba(96, 165, 250, 0.2);
}
.price-card-founders {
  border-color: rgba(96, 165, 250, 0.5);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(96, 165, 250, 0.02)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 50px rgba(96, 165, 250, 0.12);
  position: relative;
}
.price-card-founders:hover {
  box-shadow: 0 0 60px rgba(96, 165, 250, 0.25);
}
.price-card-founders::before {
  content: "FIRST 500 ONLY";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  border-radius: 3px;
  box-shadow: var(--glow-accent);
}
.price-tier-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.price-tier-founders {
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}
.price-amount-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.price-amount-was {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: line-through;
  opacity: 0.6;
  align-self: center;
}
.price-amount-num {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
}
.price-card-pro .price-amount-num {
  color: var(--blue-light);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.4);
}
.price-card-founders .price-amount-num {
  color: var(--accent-warm);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.5);
}
.price-amount-note {
  font-family: var(--f-mono);
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.price-tagline {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 18px;
  min-height: 2.6em;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}
.price-features li {
  padding: 7px 0;
  color: var(--text);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 18px;
}
.price-features li:last-child {
  border-bottom: none;
}
.price-features li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--green-light);
  font-family: var(--f-mono);
  font-weight: 700;
}
.price-card-pro .price-features li::before {
  color: var(--blue-light);
}
.price-card-founders .price-features li::before {
  color: var(--accent-warm);
}
.price-scarcity {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-warm);
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 3px;
  padding: 6px 10px;
  margin: 0 0 16px;
}
.btn-block {
  display: block;
  width: 100%;
}

/* ===== TOOLS — refined SVG icons + tier-badge gating ===== */
.tools-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 18px 24px;
  margin: 14px 0 28px;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.04),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: var(--radius-lg);
}
.tools-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tools-meta-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  color: var(--blue-light);
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.3);
}
.tools-meta-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tool-card {
  position: relative;
}
.tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.14),
  rgba(96, 165, 250, 0.04)
  );
  border: 1px solid rgba(96, 165, 250, 0.32);
  color: var(--blue-light);
  margin: 0;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.12);
}
.tool-icon svg {
  width: 22px;
  height: 22px;
}
.tool-tier-badge {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.tool-tier-badge.tier-demo {
  background: rgba(46, 255, 122, 0.1);
  border-color: rgba(46, 255, 122, 0.4);
  color: var(--green-light);
}
.tool-tier-badge.tier-plus {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.36);
  color: var(--accent-warm);
}
.tool-tier-badge.tier-pro {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
  color: var(--blue-light);
}
.tool-card[data-locked="true"] {
  position: relative;
}
.tool-card[data-locked="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0) 70%,
  rgba(0, 0, 0, 0.18)
  );
  pointer-events: none;
}
.tool-card.tool-demo {
  border-color: rgba(46, 255, 122, 0.32);
  box-shadow: 0 0 28px rgba(46, 255, 122, 0.08);
}
.tool-card.tool-demo .tool-icon {
  background: linear-gradient(
  135deg,
  rgba(46, 255, 122, 0.16),
  rgba(46, 255, 122, 0.04)
  );
  border-color: rgba(46, 255, 122, 0.4);
  color: var(--green-light);
  box-shadow: 0 0 18px rgba(46, 255, 122, 0.18);
}

.tools-roadmap {
  margin-top: 36px;
  padding: 24px 28px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.02),
  rgba(255, 255, 255, 0)
  );
}
.tools-roadmap-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--blue-light);
  margin: 0 0 14px;
}
.tools-roadmap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
@media (max-width: 480px) {
  .tools-roadmap-list {
  grid-template-columns: 1fr;
  }
}
.tools-roadmap-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  color: var(--text-muted);
  font-size: 0.94rem;
}
.tools-roadmap-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--blue-light);
  font-family: var(--f-mono);
  font-weight: 700;
}
.tools-roadmap-list strong {
  color: var(--text);
}

/* ===== QUIZ — multi-select state, hint, next button, locked block, summary ===== */
.quiz-hint {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: -6px 0 14px;
  text-transform: uppercase;
}
.quiz-step[data-multi] .quiz-opt.selected {
  border-color: var(--accent-primary);
  background: rgba(96, 165, 250, 0.1);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}
.quiz-step[data-multi] .quiz-opt.selected::after {
  content: "✓";
  margin-left: 8px;
  color: var(--accent-warm);
  font-weight: 700;
}
.quiz-next {
  margin-top: 18px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.3);
  transition:
  transform 0.15s,
  box-shadow 0.15s;
}
.quiz-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(96, 165, 250, 0.45);
}
.quiz-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.quiz-controls {
  margin-top: 8px;
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.quiz-prev {
  margin-top: 0;
  padding: 10px 16px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition:
  transform 0.15s,
  box-shadow 0.15s;
}
.quiz-prev:disabled,
.quiz-prev[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .quiz-step {
  animation: none !important;
  }
  .quiz-prev,
  .quiz-next {
  transition: none !important;
  }
}

.quiz-result-summary {
  color: var(--text-muted);
  font-size: 0.96rem;
  margin: 8px 0 18px;
  line-height: 1.5;
}
/* ===== BULLET-RICH lead-replacement lists ===== */
.bullet-rich {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bullet-rich li {
  position: relative;
  padding: 10px 14px 10px 32px;
  border-left: 2px solid var(--section-accent, var(--accent-primary));
  background: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.96rem;
  color: var(--text);
}
.bullet-rich li::before {
  content: "▸";
  position: absolute;
  left: 12px;
  top: 9px;
  color: var(--section-accent-light, var(--accent-warm));
  font-family: var(--f-mono);
  font-size: 0.92rem;
}
.bullet-rich li strong {
  color: var(--text);
}

/* ===== DAY 1 REVEAL — the demo hook ===== */
.day1-reveal {
  margin: 22px 0;
  padding: 18px 20px 14px;
  border: 1px solid rgba(46, 255, 122, 0.3);
  border-radius: var(--radius-lg);
  background:
  linear-gradient(180deg, rgba(46, 255, 122, 0.06), rgba(46, 255, 122, 0)),
  rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}
.day1-reveal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
  90deg,
  transparent,
  var(--green-glow),
  transparent
  );
  animation: day1Sweep 3s ease-in-out infinite;
}
@keyframes day1Sweep {
  0%,
  100% {
  transform: translateX(-100%);
  }
  50% {
  transform: translateX(100%);
  }
}
.day1-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.day1-tag {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(46, 255, 122, 0.4);
  text-transform: uppercase;
}
.day1-meta {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--text);
  font-size: 0.96rem;
}
.day1-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day1-list li {
  display: grid;
  grid-template-columns: 56px 1.6fr 0.8fr 0.7fr 0.7fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.84rem;
  animation: day1RowIn 0.45s ease-out both;
}
.day1-list li:nth-child(1) {
  animation-delay: 0.04s;
}
.day1-list li:nth-child(2) {
  animation-delay: 0.08s;
}
.day1-list li:nth-child(3) {
  animation-delay: 0.12s;
}
.day1-list li:nth-child(4) {
  animation-delay: 0.16s;
}
.day1-list li:nth-child(5) {
  animation-delay: 0.2s;
}
.day1-list li:nth-child(6) {
  animation-delay: 0.24s;
}
.day1-list li:nth-child(7) {
  animation-delay: 0.28s;
}
.day1-list li:nth-child(8) {
  animation-delay: 0.32s;
}
.day1-list li:nth-child(9) {
  animation-delay: 0.36s;
}
.day1-list li:nth-child(10) {
  animation-delay: 0.4s;
}
.day1-list li:nth-child(11) {
  animation-delay: 0.44s;
}
.day1-list li:nth-child(12) {
  animation-delay: 0.48s;
}
.day1-list li:nth-child(13) {
  animation-delay: 0.52s;
}
.day1-list li:nth-child(14) {
  animation-delay: 0.56s;
}
.day1-list li:nth-child(15) {
  animation-delay: 0.6s;
}
@keyframes day1RowIn {
  from {
  opacity: 0;
  transform: translateY(-3px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.day1-phase {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 3px;
  text-align: center;
}
.day1-phase-func {
  background: rgba(96, 165, 250, 0.18);
  color: var(--blue-light);
}
.day1-phase-lift {
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent-warm);
}
.day1-phase-rec {
  background: rgba(46, 255, 122, 0.18);
  color: var(--green-light);
}
.day1-name {
  color: var(--text);
}
.day1-sets,
.day1-load,
.day1-rpe {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: right;
}
.day1-cue {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 0 0 4px 60px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .day1-list li {
  grid-template-columns: 52px 1fr 0.7fr;
  }
  .day1-list li .day1-load,
  .day1-list li .day1-rpe {
  display: none;
  }
}
.day1-rpe-legend {
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.05);
  
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.day1-rpe-legend strong {
  
  font-weight: 600;
}
.day1-coach {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--green-light);
  background: rgba(46, 255, 122, 0.04);
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}

.quiz-locked {
  margin: 22px 0 18px;
  padding: 18px 20px;
  border: 1px dashed rgba(96, 165, 250, 0.45);
  border-radius: var(--radius);
  background: rgba(96, 165, 250, 0.04);
}
.quiz-locked-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  margin: 0 0 10px;
}
.lock-glyph {
  margin-right: 6px;
}
.quiz-locked-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.quiz-locked-list li {
  padding: 5px 0 5px 22px;
  color: var(--text-muted);
  font-size: 0.92rem;
  position: relative;
}
.quiz-locked-list li::before {
  content: "🔒";
  position: absolute;
  left: 0;
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ===== CASE FILE — tabs to switch between lifters ===== */
.case-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 18px;
}
.case-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition:
  border-color 0.18s,
  color 0.18s,
  background 0.18s;
}
.case-tab:hover {
  border-color: var(--border-bright);
  color: var(--text);
}
.case-tab.active {
  border-color: var(--accent-primary);
  color: var(--text);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.18);
}

/* ===== PRICING — Plus card highlight, student ribbon, locked feature ===== */
.price-card-plus {
  border-color: rgba(96, 165, 250, 0.38);
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.01)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  box-shadow: 0 0 32px rgba(96, 165, 250, 0.1);
  position: relative;
}
.price-card-plus:hover {
  box-shadow: 0 0 44px rgba(96, 165, 250, 0.2);
}
.price-card-plus::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  border-radius: 3px;
  box-shadow: var(--glow-accent);
}
.price-tier-plus {
  color: var(--accent-warm);
}
.price-card-plus .price-amount-num {
  color: var(--accent-warm);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.4);
}
.price-card-plus .price-features li::before {
  color: var(--accent-warm);
}

.price-student-ribbon {
  margin: 0 0 14px;
  padding: 7px 12px;
  background: linear-gradient(
  90deg,
  rgba(46, 255, 122, 0.1),
  rgba(46, 255, 122, 0)
  );
  border-left: 2px solid var(--green-light);
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.price-student-ribbon span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  background: rgba(46, 255, 122, 0.18);
  border-radius: 2px;
  font-weight: 700;
  color: var(--green-light);
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.price-feature-locked {
  color: var(--text-dim) !important;
  text-decoration: line-through;
  opacity: 0.6;
}
.price-feature-locked::before {
  content: "—" !important;
  color: var(--text-dim) !important;
}

/* ====
   PER-SECTION ACCENT THEMING
   Each section can declare data-accent="red|cyan|amber|emerald|violet|blue|dim".
   The hud-marker glow + a subtle radial wash uses that accent token.
==== */

[data-accent="red"] {
  --section-accent: var(--accent-primary);
  --section-accent-light: var(--accent-warm);
  --section-accent-glow: rgba(96, 165, 250, 0.4);
}
[data-accent="cyan"] {
  --section-accent: var(--blue-glow);
  --section-accent-light: var(--blue-light);
  --section-accent-glow: rgba(96, 165, 250, 0.35);
}
[data-accent="amber"] {
  --section-accent: #ffb547;
  --section-accent-light: #93c5fd;
  --section-accent-glow: rgba(255, 181, 71, 0.32);
}
[data-accent="emerald"] {
  --section-accent: var(--green-glow);
  --section-accent-light: var(--green-light);
  --section-accent-glow: rgba(46, 255, 122, 0.32);
}
[data-accent="violet"] {
  --section-accent: var(--purple-glow);
  --section-accent-light: var(--purple-light);
  --section-accent-glow: rgba(185, 92, 255, 0.32);
}
[data-accent="blue"] {
  --section-accent: var(--blue);
  --section-accent-light: #6aa3ff;
  --section-accent-glow: rgba(37, 99, 235, 0.32);
}
[data-accent="dim"] {
  --section-accent: var(--text-dim);
  --section-accent-light: var(--text-muted);
  --section-accent-glow: rgba(170, 170, 200, 0.1);
}

[data-accent] {
  position: relative;
}
[data-accent]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
  ellipse 80% 60% at 50% 0%,
  var(--section-accent-glow),
  transparent 70%
  );
  opacity: 0.5;
  z-index: 0;
}
[data-accent] > .container {
  position: relative;
  z-index: 1;
}
[data-accent] .hud-marker {
  color: var(--section-accent-light, var(--text-muted));
  text-shadow: 0 0 18px var(--section-accent-glow, transparent);
}
[data-accent] .hook {
  color: var(--text-muted);
}

/* Smooth section-entry pulse on the hud-marker when section enters viewport */
@keyframes hudPulse {
  0% {
  letter-spacing: 0.2em;
  opacity: 0.4;
  transform: translateY(-4px);
  }
  100% {
  letter-spacing: 0.16em;
  opacity: 1;
  transform: translateY(0);
  }
}
.reveal.visible .hud-marker {
  animation: hudPulse 0.55s ease-out 0.05s both;
}

/* ====
   DAY X / 365 TICKER (sticky-bottom HUD)
==== */
.day-ticker {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(7, 7, 10, 0.85);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  z-index: var(--z-base);
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.18);
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity 0.25s;
}
@media (max-width: 480px) {
  .day-ticker {
  font-size: 0.66rem;
  padding: 5px 10px;
  bottom: 70px;
  }
}
.day-ticker-label {
  color: var(--text-dim);
}
.day-ticker-num {
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.day-ticker-of {
  color: var(--text-dim);
}
.day-ticker-bar {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.day-ticker-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
  transition: width 0.18s ease-out;
}
.day-ticker-meta {
  color: var(--text-dim);
}

/* ====
   HERO POLISH — kicker-sub + 6-7 vibe
==== */
.kicker-sub {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 4px 0 22px;
}
.kicker-sub .kicker-glyph {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent-warm);
  animation: kickerWink 2.4s ease-in-out infinite;
}
@keyframes kickerWink {
  0%,
  100% {
  opacity: 0.4;
  transform: translateX(0);
  }
  50% {
  opacity: 1;
  transform: translateX(2px);
  }
}

/* ====
   DOCTRINE (section 04 rebuild)
==== */
.section-doctrine .doctrine-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}
@media (max-width: 1024px) {
  .section-doctrine .doctrine-list {
  grid-template-columns: 1fr;
  }
}
.doctrine-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s;
}
.doctrine-item:hover {
  border-color: var(--border-bright);
  transform: translateY(-2px);
}
.doctrine-num {
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--purple-light);
  letter-spacing: -0.02em;
  text-shadow: 0 0 14px rgba(185, 92, 255, 0.3);
}
.doctrine-h {
  margin: 0 0 6px;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
}
.doctrine-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}
.doctrine-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .doctrine-pillars {
  grid-template-columns: 1fr;
  }
}
.pillar {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.02),
  rgba(255, 255, 255, 0)
  );
}
.pillar-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pillar h4 {
  margin: 8px 0 6px;
}
.pillar p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.pillar-blue {
  border-left: 2px solid var(--blue-glow);
}
.pillar-blue h4 {
  color: var(--blue-light);
}
.pillar-purple {
  border-left: 2px solid var(--purple-glow);
}
.pillar-purple h4 {
  color: var(--purple-light);
}
.pillar-green {
  border-left: 2px solid var(--green-glow);
}
.pillar-green h4 {
  color: var(--green-light);
}

/* ====
   COMPARE — origin line under each verdict
==== */
.compare-origin {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 6px 0 14px;
  font-style: italic;
}
.compare-tabs {
  gap: 8px;
  flex-wrap: wrap;
}
.compare-moat {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border);
  margin: 12px 0 0;
  padding-top: 10px;
  letter-spacing: 0.02em;
}
.compare-secondary-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.compare-secondary-cta-sub {
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ====
   WORKOUT TRACKER (section 10)
==== */
.section-tracker {
  background:
  linear-gradient(180deg, rgba(46, 255, 122, 0.04), transparent 60%),
  var(--bg);
}
.tracker-shell {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
  gap: 22px;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  .tracker-shell {
  grid-template-columns: 1fr;
  }
}
.tracker-pane {
  padding: 24px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tracker-label,
.nutri-label,
.tracker-pane .tracker-label,
.social-pane-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--green-light);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tracker-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: end;
}
.tracker-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.tracker-row-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tracker-row label {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tracker-row select,
.tracker-row input {
  margin-top: 6px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.96rem;
  outline: none;
  transition:
  border-color 0.18s,
  background 0.18s;
}
.tracker-row select:focus,
.tracker-row input:focus {
  border-color: var(--green-light);
  background: rgba(46, 255, 122, 0.04);
  box-shadow: 0 0 0 2px rgba(46, 255, 122, 0.18);
}
.btn-ghost {
  background: transparent;
  border: 1px dashed var(--border-bright);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.9rem;
  padding: 11px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
  color 0.18s,
  border-color 0.18s;
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.tracker-status {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 14px 0 0;
}
.tracker-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tracker-stat {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(46, 255, 122, 0.04);
}
.tracker-stat-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tracker-stat-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(46, 255, 122, 0.3);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.tracker-stat-sm {
  font-size: 1.05rem;
}
.tracker-trend {
  margin-top: 16px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--green-glow);
}
.tracker-trend-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}
#trackTrendSvg {
  width: 100%;
  height: 80px;
  display: block;
}
.tracker-coach {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-left: 2px solid var(--green-light);
  padding-left: 12px;
}

.tracker-history {
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.02),
  rgba(255, 255, 255, 0)
  );
}
.tracker-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.tracker-history-meta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tracker-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.tracker-history-list li {
  display: grid;
  grid-template-columns: 90px 1.4fr 0.8fr 0.6fr 0.6fr 60px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--text);
  border-left: 2px solid var(--green-glow);
}
.tracker-history-list li.new-row {
  animation: trackerEnter 0.45s ease-out both;
}
@keyframes trackerEnter {
  from {
  opacity: 0;
  transform: translateY(-4px);
  border-left-color: var(--accent-primary);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.th-time {
  color: var(--text-dim);
  font-size: 0.78rem;
}
.th-lift {
  color: var(--text);
}
.th-w,
.th-r,
.th-rpe,
.th-e1rm {
  color: var(--green-light);
}

@media (max-width: 480px) {
  .tracker-history-list li {
  grid-template-columns: 60px 1fr 0.6fr 0.6fr;
  }
  .tracker-history-list li .th-rpe-meta,
  .tracker-history-list li .th-e1rm {
  display: none;
  }
}

/* ====
   NUTRITION + STACK (section 11)
==== */
.section-nutrition .nutri-label {
  color: var(--blue-light);
}
.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  .nutrition-grid {
  grid-template-columns: 1fr;
  }
}
.nutri-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 181, 71, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.nutri-card h3 {
  margin: 0 0 18px;
}
.nutri-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr 56px 28px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.nutri-row-buttons {
  display: block;
}
.nutri-row:last-of-type {
  border-bottom: none;
}
.nutri-name {
  font-size: 0.92rem;
  color: var(--text);
}
.nutri-meta {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.nutri-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 181, 71, 0.2);
  border-radius: 2px;
  outline: none;
}
.nutri-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--accent-warm));
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 181, 71, 0.5);
}
.nutri-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--accent-warm));
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 181, 71, 0.5);
}
.nutri-value {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nutri-unit {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}
.nutri-output {
  margin-top: 18px;
  padding: 16px;
  background: rgba(255, 181, 71, 0.06);
  border: 1px dashed rgba(255, 181, 71, 0.3);
  border-radius: var(--radius);
}
.nutri-output-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--blue-light);
  margin: 0 0 8px;
}
.nutri-stack-summary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}
.nutri-warning {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: var(--accent-warm);
  font-style: italic;
  min-height: 1.2em;
}
.nutri-phase-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.nutri-phase {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.86rem;
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
}
.nutri-phase:hover {
  color: var(--text);
  border-color: var(--border-bright);
}
.nutri-phase.active {
  background: rgba(255, 181, 71, 0.12);
  border-color: var(--accent-warm);
  color: var(--blue-light);
  box-shadow: 0 0 12px rgba(255, 181, 71, 0.2);
}

.macro-output {
  margin-top: 22px;
}
.macro-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.macro-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.86rem;
}
.macro-protein {
  background: rgba(96, 165, 250, 0.1);
  border-left: 2px solid var(--accent-warm);
}
.macro-carbs {
  background: rgba(96, 165, 250, 0.08);
  border-left: 2px solid var(--blue-light);
}
.macro-fat {
  background: rgba(255, 181, 71, 0.1);
  border-left: 2px solid var(--blue-light);
}
.macro-num {
  font-weight: 700;
  color: var(--text);
}
.macro-cal {
  color: var(--text-dim);
  font-size: 0.78rem;
}
.macro-total {
  margin-top: 14px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  font-family: var(--f-mono);
}
.macro-total-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--blue-light);
  text-shadow: 0 0 14px rgba(255, 181, 71, 0.4);
}
.macro-note {
  margin: 12px 0 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ====
   HERITAGE (section 15)
==== */
.section-heritage {
  background:
  linear-gradient(180deg, rgba(255, 181, 71, 0.03), transparent 60%),
  var(--bg);
}
.heritage-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 24px;
}
.heritage-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.92rem;
  cursor: pointer;
  transition:
  color 0.18s,
  border-color 0.18s,
  background 0.18s;
}
.heritage-tab:hover {
  color: var(--text);
  border-color: var(--border-bright);
}
.heritage-tab.active {
  background: rgba(255, 181, 71, 0.1);
  border-color: var(--accent-warm);
  color: var(--blue-light);
  box-shadow: 0 0 16px rgba(255, 181, 71, 0.2);
}
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .heritage-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .heritage-grid {
  grid-template-columns: 1fr;
  }
}
.heritage-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.2s,
  transform 0.2s,
  box-shadow 0.2s;
}
.heritage-card:hover {
  border-color: rgba(255, 181, 71, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255, 181, 71, 0.1);
}
.heritage-portrait {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background:
  linear-gradient(135deg, rgba(255, 181, 71, 0.18), rgba(96, 165, 250, 0.1)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border: 1px dashed rgba(255, 181, 71, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(255, 181, 71, 0.4);
}
.heritage-portrait::after {
  content: "PORTRAIT v2";
  position: absolute;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 70px;
  display: none;
}
.heritage-card h3 {
  margin: 0 0 4px;
  font-size: 1.06rem;
}
.heritage-meta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.heritage-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 10px;
}
.heritage-lesson {
  margin-top: 12px !important;
  padding: 10px 12px;
  border-left: 2px solid var(--blue-light);
  background: rgba(255, 181, 71, 0.05);
  border-radius: 3px;
  color: var(--text) !important;
  font-size: 0.88rem !important;
}

/* ====
   LOCAL SAMPLE ACTIVITY (section 16)
==== */
.section-social {
  background:
  linear-gradient(180deg, rgba(185, 92, 255, 0.04), transparent 60%),
  var(--bg-alt);
}
.section-social .social-pane-label {
  color: var(--purple-light);
}
.social-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 18px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .social-grid {
  grid-template-columns: 1fr;
  }
}
.social-feed-pane,
.social-handle-pane,
.social-squad-pane {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.social-feed {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  max-height: 360px;
  overflow-y: auto;
}
.feed-item {
  display: grid;
  grid-template-columns: 60px 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.feed-item:last-child {
  border-bottom: none;
}
.feed-time {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feed-glyph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.feed-pr {
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent-warm);
}
.feed-streak {
  background: rgba(46, 255, 122, 0.18);
  color: var(--green-light);
}
.feed-mile {
  background: rgba(96, 165, 250, 0.18);
  color: var(--blue-light);
}
.feed-deload {
  background: rgba(185, 92, 255, 0.18);
  color: var(--purple-light);
}
.feed-text strong {
  color: var(--text);
}
.feed-text em {
  color: var(--accent-warm);
  font-style: normal;
  font-weight: 600;
}
.social-feed-note {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin: 0;
}

.social-handle-pane h3 {
  margin: 6px 0 8px;
}
.social-handle-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.handle-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 14px;
}
.handle-input-row input {
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.96rem;
  outline: none;
}
.handle-input-row input:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(185, 92, 255, 0.18);
}
.handle-options {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.handle-options li {
  padding: 12px 14px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--purple-light);
  cursor: pointer;
  transition:
  border-color 0.18s,
  background 0.18s;
}
.handle-options li:hover {
  border-color: var(--purple-light);
  background: rgba(185, 92, 255, 0.06);
}
.handle-options .handle-empty {
  color: var(--text-dim);
  font-style: italic;
  cursor: default;
}
.handle-options .handle-empty:hover {
  background: transparent;
  border-color: var(--border-bright);
}
.social-handle-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 0;
}

.social-squad-pane h3 {
  margin: 6px 0 6px;
}
.social-squad-pane > p {
  color: var(--text-muted);
  font-size: 0.92rem;
}
.squad-mock {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.squad-mock li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 0.88rem;
}
.squad-mock li:last-child {
  border-bottom: none;
}
.squad-rank {
  color: var(--text-dim);
  font-weight: 700;
}
.squad-name {
  color: var(--text);
}
.squad-meta {
  color: var(--text-dim);
  font-size: 0.78rem;
}
.squad-you {
  background: linear-gradient(
  90deg,
  rgba(185, 92, 255, 0.1),
  rgba(185, 92, 255, 0)
  );
  border-radius: var(--radius);
  border-bottom: 1px solid var(--purple-light) !important;
}
.squad-you .squad-name {
  color: var(--purple-light);
  font-weight: 700;
}
.social-squad-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 0;
}

/* ====
   PATENT (section 20)
==== */
.section-patent {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.05), transparent 60%),
  var(--bg-alt);
}
.patent-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1024px) {
  .patent-list {
  grid-template-columns: 1fr;
  }
}
.patent-list li {
  position: relative;
  padding: 14px 16px 14px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.03),
  rgba(255, 255, 255, 0)
  );
  font-size: 0.92rem;
  color: var(--text-muted);
}
.patent-list li::before {
  content: "\00A7";
  position: absolute;
  left: 14px;
  top: 12px;
  color: var(--accent-warm);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.patent-list strong {
  color: var(--text);
}
.patent-quote {
  margin: 22px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent-primary);
  background: rgba(96, 165, 250, 0.04);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--text);
}

/* ====
   FLOOR DESK (floating gym-floor guide)
==== */
.assistant-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  cursor: pointer;
  z-index: var(--z-base);
  box-shadow:
  0 0 22px rgba(96, 165, 250, 0.5),
  0 0 60px rgba(96, 165, 250, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
  transform 0.18s,
  box-shadow 0.18s;
}
@media (max-width: 480px) {
  .assistant-toggle {
  right: 14px;
  bottom: 86px;
  width: 50px;
  height: 50px;
  }
}
.assistant-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
  0 0 28px rgba(96, 165, 250, 0.7),
  0 0 80px rgba(96, 165, 250, 0.25);
}
.assistant-toggle svg {
  width: 26px;
  height: 26px;
}
.assistant-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent-warm);
  opacity: 0;
  animation: assistantPulse 2.2s ease-out infinite;
}
@keyframes assistantPulse {
  0% {
  transform: scale(0.85);
  opacity: 0.5;
  }
  100% {
  transform: scale(1.4);
  opacity: 0;
  }
}

.assistant-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 380px;
  max-width: calc(100vw - 28px);
  max-height: 70vh;
  background: rgba(7, 7, 10, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: var(--radius-lg);
  z-index: var(--z-base);
  display: none;
  flex-direction: column;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
  0 20px 60px rgba(0, 0, 0, 0.6),
  0 0 40px rgba(96, 165, 250, 0.2);
  overflow: hidden;
}
.assistant-panel.open {
  display: flex;
  animation: assistantSlide 0.28s ease-out both;
}
@keyframes assistantSlide {
  from {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  }
  to {
  opacity: 1;
  transform: translateY(0) scale(1);
  }
}
@media (max-width: 480px) {
  .assistant-panel {
  right: 14px;
  bottom: 150px;
  width: calc(100vw - 28px);
  }
}
.assistant-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.04);
}
.assistant-id {
  display: flex;
  gap: 12px;
  align-items: center;
}
.assistant-glyph-sm {
  font-size: 1.4rem;
  color: var(--accent-warm);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}
.assistant-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.96rem;
}
.assistant-status {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.assistant-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 8px rgba(46, 255, 122, 0.7);
  margin-right: 4px;
  animation: assistantHeartbeat 1.6s ease-in-out infinite;
}
@keyframes assistantHeartbeat {
  0%,
  100% {
  opacity: 1;
  }
  50% {
  opacity: 0.45;
  }
}
.assistant-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.assistant-close:hover {
  color: var(--text);
}
.assistant-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assistant-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
  line-height: 1.45;
  animation: msgIn 0.32s ease-out both;
}
@keyframes msgIn {
  from {
  opacity: 0;
  transform: translateY(6px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.msg-coach {
  align-self: flex-start;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  color: var(--text);
}
.msg-coach-meta {
  padding: 2px 0;
  background: transparent;
  border: none;
}
.msg-user {
  align-self: flex-end;
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.2),
  rgba(96, 165, 250, 0.05)
  );
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: var(--text);
}
.assistant-msg p {
  margin: 0;
}
.assistant-msg p + p {
  margin-top: 6px;
}
.assistant-typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
  animation: typingDot 1.2s ease-in-out infinite;
}
.assistant-typing span:nth-child(2) {
  animation-delay: 0.18s;
}
.assistant-typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes typingDot {
  0%,
  80%,
  100% {
  opacity: 0.3;
  transform: translateY(0);
  }
  40% {
  opacity: 1;
  transform: translateY(-3px);
  }
}

.assistant-suggestions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
}
.assistant-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: var(--f-display);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
}
.assistant-chip:hover {
  color: var(--text);
  border-color: var(--accent-warm);
  background: rgba(96, 165, 250, 0.08);
}
.assistant-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.assistant-input input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--f-display);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease;
}
.assistant-input input:focus {
  border-color: var(--accent-warm);
}
.assistant-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.4);
}
.assistant-send svg {
  width: 18px;
  height: 18px;
}
.assistant-foot {
  margin: 0;
  padding: 8px 16px 12px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* ====
   CHALK MODE — high-contrast neon-on-black for the gym floor
   Activated by body[data-theme="chalk"]. Bigger type, larger
   tap targets, stripped grid background, all-cyan-and-yellow accents.
==== */
.theme-switch-li {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition:
  color 0.18s,
  border-color 0.18s,
  background 0.18s;
}
.theme-switch:hover {
  color: var(--text);
  border-color: var(--text);
}
.theme-switch.active {
  color: var(--rep-lime);
  border-color: var(--rep-lime);
  background: rgba(212, 255, 0, 0.1);
  box-shadow: 0 0 16px rgba(212, 255, 0, 0.25);
}
.theme-switch-glyph {
  font-size: 0.96rem;
}

body[data-theme="chalk"] {
  background: #000;
  background-image: none;
  color: var(--text);
  font-size: 18px;
}
body[data-theme="chalk"] :root,
body[data-theme="chalk"] {
  --bg: #000;
  --bg-alt: #000;
  --bg-tools: #000;
  --bg-buy: #000;
  --bg-wedge: #000;
  --surface: #0a0a0a;
  --surface-2: #111;
  --border: #2c3300;
  --border-bright: #4a5500;
  --text: #f0fff0;
  --text-muted: #a8d800;
  --text-dim: #6a8800;
  --accent: #d4ff00;
}
body[data-theme="chalk"] [data-accent]::before {
  display: none;
}
body[data-theme="chalk"] .topnav {
  border-bottom: 2px solid var(--rep-lime);
  background: rgba(0, 0, 0, 0.92);
}
body[data-theme="chalk"] .brand-name {
  color: var(--rep-lime);
  text-shadow: 0 0 14px rgba(212, 255, 0, 0.6);
  letter-spacing: 0.1em;
}
body[data-theme="chalk"] .brand-mark {
  color: var(--rep-lime);
}
body[data-theme="chalk"] .brand-status {
  color: #a8d800;
}
body[data-theme="chalk"] .navlinks a {
  color: var(--text);
}
body[data-theme="chalk"] .navlinks a.cta {
  background: var(--rep-lime);
  color: #000;
  font-weight: 700;
}
body[data-theme="chalk"] h1,
body[data-theme="chalk"] h2,
body[data-theme="chalk"] h3 {
  color: var(--text);
  text-shadow: 0 0 18px rgba(212, 255, 0, 0.4);
  font-weight: 800;
}
body[data-theme="chalk"] h1 {
  font-size: clamp(2.5rem, calc(1.45rem + 5.27vw), 5.4rem);
  letter-spacing: -0.04em;
}
body[data-theme="chalk"] h2 {
  font-size: clamp(1.8rem, calc(1.22rem + 2.9vw), 3.4rem);
}
body[data-theme="chalk"] .accent-primary,
body[data-theme="chalk"] .price-amount-num,
body[data-theme="chalk"] .quiz-result-title,
body[data-theme="chalk"] .day-ticker-num {
  color: var(--rep-lime) !important;
  text-shadow: 0 0 18px rgba(212, 255, 0, 0.6) !important;
}
body[data-theme="chalk"] .accent-blue,
body[data-theme="chalk"] .accent-purple,
body[data-theme="chalk"] .accent-green {
  color: var(--rep-lime) !important;
}
body[data-theme="chalk"] .hud-marker {
  color: var(--rep-lime) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.18em;
}
body[data-theme="chalk"] .hook {
  color: var(--text);
  font-weight: 600;
}
body[data-theme="chalk"] .lead-text {
  color: #c8e8c8;
  font-size: 1.08rem;
}
body[data-theme="chalk"] .btn,
body[data-theme="chalk"] .quiz-opt,
body[data-theme="chalk"] .quick-tap,
body[data-theme="chalk"] .nutri-phase,
body[data-theme="chalk"] .compare-tab,
body[data-theme="chalk"] .case-tab,
body[data-theme="chalk"] .heritage-tab,
body[data-theme="chalk"] .archetype-tab,
body[data-theme="chalk"] .chapter-tab {
  min-height: 56px;
  font-size: 1.02rem;
  padding: 14px 20px;
  letter-spacing: 0.04em;
}
body[data-theme="chalk"] .btn-primary,
body[data-theme="chalk"] .quiz-next {
  background: var(--rep-lime);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 26px rgba(212, 255, 0, 0.5);
  border: 2px solid var(--rep-lime);
}
body[data-theme="chalk"] .btn-secondary {
  background: transparent;
  border: 2px solid var(--rep-lime);
  color: var(--rep-lime);
}
body[data-theme="chalk"] .compare-tab.active,
body[data-theme="chalk"] .compare-tab[aria-selected="true"],
body[data-theme="chalk"] .case-tab.active,
body[data-theme="chalk"] .heritage-tab.active,
body[data-theme="chalk"] .archetype-tab[aria-selected="true"],
body[data-theme="chalk"] .nutri-phase.active {
  background: rgba(212, 255, 0, 0.12);
  border-color: var(--rep-lime);
  color: var(--rep-lime);
  box-shadow: 0 0 18px rgba(212, 255, 0, 0.3);
}
body[data-theme="chalk"] input,
body[data-theme="chalk"] select {
  background: rgba(212, 255, 0, 0.04) !important;
  border: 2px solid #4a5500 !important;
  color: var(--text) !important;
  font-size: 1.05rem !important;
  padding: 12px 16px !important;
  min-height: 50px;
}
body[data-theme="chalk"] input:focus,
body[data-theme="chalk"] select:focus {
  border-color: var(--rep-lime) !important;
  box-shadow: 0 0 0 2px rgba(212, 255, 0, 0.3) !important;
}
body[data-theme="chalk"] .day-ticker {
  border-color: var(--rep-lime);
  background: rgba(0, 0, 0, 0.94);
  box-shadow: 0 0 22px rgba(212, 255, 0, 0.3);
}
body[data-theme="chalk"] .day-ticker-bar-fill {
  background: var(--rep-lime);
  box-shadow: 0 0 12px rgba(212, 255, 0, 0.7);
}
body[data-theme="chalk"] .assistant-toggle {
  background: var(--rep-lime);
  color: #000;
  box-shadow: 0 0 26px rgba(212, 255, 0, 0.7);
}
body[data-theme="chalk"] .scroll-progress-bar {
  background: var(--rep-lime);
  box-shadow: 0 0 14px rgba(212, 255, 0, 0.7);
}
body[data-theme="chalk"] .minimap-dot {
  border-color: rgba(212, 255, 0, 0.3);
}
body[data-theme="chalk"] .minimap-dot.active {
  background: var(--rep-lime);
  box-shadow: 0 0 10px rgba(212, 255, 0, 0.7);
}

/* ====
   HERO — EKG line + live "lifters now" counter
==== */
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 12px;
  background: rgba(46, 255, 122, 0.08);
  border: 1px solid rgba(46, 255, 122, 0.3);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 10px rgba(46, 255, 122, 0.8);
  animation: liveDot 1.4s ease-in-out infinite;
}
@keyframes liveDot {
  0%,
  100% {
  transform: scale(1);
  opacity: 1;
  }
  50% {
  transform: scale(0.6);
  opacity: 0.5;
  }
}
.hero-live-num {
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--green-light);
  font-variant-numeric: tabular-nums;
}
.hero-live-divider {
  color: var(--text-dim);
  margin: 0 4px;
}
.hero-live-pulse {
  color: var(--text);
  font-weight: 500;
}
.hero-ekg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
.hero-ekg-line {
  fill: none;
  stroke: var(--accent-warm);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6));
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: ekgDraw 4s ease-in-out infinite;
}
@keyframes ekgDraw {
  0% {
  stroke-dashoffset: 2400;
  }
  60% {
  stroke-dashoffset: 0;
  }
  100% {
  stroke-dashoffset: -2400;
  }
}

/* ====
   TRACKER UPGRADES — quick-tap, streak rewards, PR celebrate, export
==== */
.tracker-quick {
  margin: 30px 0 18px;
  padding: 16px 18px;
  border: 1px dashed rgba(46, 255, 122, 0.32);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.tracker-quick-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--green-light);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.tracker-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .tracker-quick-grid {
  grid-template-columns: 1fr 1fr;
  }
}
.quick-tap {
  padding: 14px 14px;
  background: rgba(46, 255, 122, 0.06);
  border: 1px solid rgba(46, 255, 122, 0.3);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  transition:
  transform 0.15s,
  border-color 0.15s,
  background 0.15s,
  box-shadow 0.15s;
}
.quick-tap:hover {
  border-color: var(--green-light);
  transform: translateY(-2px);
}
.quick-tap:active {
  transform: scale(0.97);
  box-shadow: 0 0 18px rgba(46, 255, 122, 0.35);
}
.quick-tap.tap-flash {
  animation: tapFlash 0.42s ease-out;
}
@keyframes tapFlash {
  0% {
  background: rgba(46, 255, 122, 0.42);
  border-color: var(--green-glow);
  }
  100% {
  background: rgba(46, 255, 122, 0.06);
  border-color: rgba(46, 255, 122, 0.3);
  }
}
.qt-meta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.tracker-export {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s;
}
.tracker-export:hover {
  color: var(--green-light);
  border-color: var(--green-light);
}

.streak-rewards {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
}
.streak-rewards-label {
  color: var(--green-light) !important;
}
.streak-rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 6px 0 12px;
}
@media (max-width: 1024px) {
  .streak-rewards-grid {
  grid-template-columns: 1fr 1fr;
  }
}
.reward-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.reward-card.unlocked {
  border-color: var(--green-light);
  background: rgba(46, 255, 122, 0.06);
  box-shadow: 0 0 16px rgba(46, 255, 122, 0.18);
}
.reward-day {
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--green-light);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.reward-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.reward-meta {
  font-size: 0.84rem;
  color: var(--text-muted);
}
.reward-status {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-top: 6px;
  text-transform: uppercase;
}
.reward-card.unlocked .reward-status {
  color: var(--green-light);
}
.streak-rewards-note {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 10px 0 0;
}

.pr-celebrate {
  position: fixed;
  inset: 0;
  background: radial-gradient(
  circle at 50% 50%,
  rgba(46, 255, 122, 0.25),
  rgba(0, 0, 0, 0.9) 60%
  );
  z-index: var(--z-base);
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pr-celebrate.fire {
  display: flex;
  animation: prFade 3.6s ease-in-out forwards;
}
@keyframes prFade {
  0% {
  opacity: 0;
  }
  10% {
  opacity: 1;
  }
  85% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  }
}
.pr-celebrate-inner {
  text-align: center;
  padding: 38px 60px;
  border: 2px solid var(--green-light);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 60px rgba(46, 255, 122, 0.35);
  animation: prPulse 1.4s ease-in-out infinite;
}
@keyframes prPulse {
  0%,
  100% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.02);
  }
}
.pr-celebrate-tag {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  color: var(--green-light);
  margin: 0 0 12px;
}
.pr-celebrate-num {
  font-family: var(--f-display);
  font-size: 4rem;
  font-weight: 800;
  color: var(--green-light);
  text-shadow: 0 0 30px rgba(46, 255, 122, 0.6);
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}
.pr-celebrate-msg {
  color: var(--text);
  font-size: 1.04rem;
  margin: 0 0 18px;
}
.pr-celebrate-export {
  background: var(--green-light);
  color: #000;
  border: 0;
  padding: 11px 24px;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-weight: 700;
  cursor: pointer;
}

/* PR confetti canvas — particle burst overlay */
.pr-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.pr-celebrate-inner {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pr-confetti-canvas {
  display: none;
  }
}

/* ====
   GYM-FLOOR TOOLS (section 11)
==== */
.section-floor-tools {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.04), transparent 60%), var(--bg);
}
.floor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .floor-grid {
  grid-template-columns: 1fr;
  }
}
.floor-tile {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.04),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s,
  box-shadow 0.18s;
}
.floor-tile:hover {
  border-color: rgba(96, 165, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.12);
}
.floor-tile-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--blue-light);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.floor-tile h3 {
  margin: 0 0 6px;
}
.floor-tile-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.floor-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.floor-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.floor-row-tempo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.floor-row-buttons {
  gap: 8px;
}
.floor-row label {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  position: relative;
}
.floor-row input,
.floor-row select {
  margin-top: 6px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.96rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.floor-row input:focus,
.floor-row select:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
.floor-unit {
  position: absolute;
  right: 12px;
  bottom: 11px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.floor-output {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floor-output li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.05);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.86rem;
}
.floor-output li:first-child {
  border-left: 2px solid var(--blue-light);
}
.floor-output .fo-set {
  color: var(--text-dim);
  font-weight: 700;
}
.floor-output .fo-load {
  color: var(--text);
}
.floor-output .fo-plates {
  color: var(--blue); /* a11y 1.4.3: --blue-light #5b8def on the white card was 3.23:1 at 12.5px */
  font-size: 0.78rem;
}

.tempo-preview {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
}
.tempo-display {
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  padding: 18px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  color: var(--blue-light);
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.4);
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
}
.tempo-display.beat {
  animation: tempoFlash 0.18s ease-out;
}
@keyframes tempoFlash {
  0% {
  background: rgba(96, 165, 250, 0.3);
  }
  100% {
  background: rgba(0, 0, 0, 0.25);
  }
}

.pr-timer-display,
.hang-display {
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3.2rem;
  letter-spacing: -0.03em;
  padding: 18px;
  margin: 8px 0 12px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  font-variant-numeric: tabular-nums;
}
.pr-timer-display.urgent {
  color: var(--accent-warm);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.5);
  animation: prTimerPulse 0.9s ease-in-out infinite;
}
.pr-timer-display.imminent {
  color: var(--blue-light);
  text-shadow: 0 0 22px rgba(255, 181, 71, 0.6);
}
@keyframes prTimerPulse {
  0%,
  100% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.03);
  }
}
.pr-timer-cues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-timer-cues li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
}
.pr-timer-cues li.firing {
  background: rgba(96, 165, 250, 0.1);
  color: var(--accent-warm);
  border-left: 2px solid var(--accent-warm);
  animation: cueFire 0.7s ease-out;
}
@keyframes cueFire {
  0%,
  100% {
  transform: translateX(0);
  }
  20% {
  transform: translateX(4px);
  }
  40% {
  transform: translateX(-2px);
  }
  60% {
  transform: translateX(3px);
  }
  80% {
  transform: translateX(-1px);
  }
}
.cue-mark {
  color: var(--text-dim);
  font-weight: 700;
}
.pr-timer-cues li.firing .cue-mark {
  color: var(--accent-warm);
}

.vel-output {
  margin-top: 12px;
  padding: 14px;
  background: rgba(96, 165, 250, 0.04);
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-muted);
}
.vel-num {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--blue-light);
  font-size: 1.1rem;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}
.vel-zone {
  color: var(--text);
  font-weight: 600;
}
.vel-call {
  color: var(--green-light);
}

.hang-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.hang-stat {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.hang-stat-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hang-stat-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--blue-light);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.pre-output {
  margin-top: 12px;
  padding: 14px;
  background: rgba(255, 181, 71, 0.06);
  border: 1px dashed rgba(255, 181, 71, 0.3);
  border-radius: var(--radius);
}
.pre-window {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--blue-light);
  text-shadow: 0 0 12px rgba(255, 181, 71, 0.3);
  margin: 0 0 6px;
}
.pre-coach {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0;
}

.floor-foot {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(96, 165, 250, 0.05);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ====
   LOCAL BOARD (in Social section)
==== */
.local-board {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.local-board-label {
  color: var(--purple-light) !important;
  margin: 0 0 14px;
}
.local-board-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .local-board-controls {
  grid-template-columns: 1fr;
  }
}
.local-board-controls label {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.local-board-controls select {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.94rem;
  outline: none;
}
.local-board-controls select:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(185, 92, 255, 0.18);
}
.local-board-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 0;
}

/* ====
   ECONOMICS + MANIFESTO
==== */
.section-economics {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.05), transparent 60%),
  var(--bg-alt);
}
.econ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 28px;
}
@media (max-width: 1024px) {
  .econ-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .econ-grid {
  grid-template-columns: 1fr;
  }
}
.econ-card {
  padding: 18px 20px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(96, 165, 250, 0.04);
}
.econ-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--blue-light);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.econ-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--text);
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.3);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}
.econ-meta {
  color: var(--text-muted);
  font-size: 0.86rem;
  margin: 0;
}
.econ-h {
  margin: 24px 0 10px;
  font-size: 1.1rem;
  color: var(--text);
}
.econ-list,
.econ-refuse {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.econ-list li {
  padding: 11px 14px;
  background: rgba(96, 165, 250, 0.03);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}
.econ-list li strong {
  color: var(--text);
}
.econ-refuse li {
  padding: 11px 14px;
  background: rgba(96, 165, 250, 0.04);
  border-left: 2px solid var(--accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}
.econ-refuse li strong {
  color: var(--text);
}
.econ-note {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-dim);
  margin: 18px 0 0;
}

.section-manifesto {
  background:
  linear-gradient(180deg, rgba(185, 92, 255, 0.06), transparent 60%),
  var(--bg);
}
.manifesto-h {
  text-align: center;
  margin-top: 16px;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}
.manifesto-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 18px;
  counter-reset: m;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manifesto-list li {
  counter-increment: m;
  position: relative;
  padding: 14px 16px 14px 60px;
  border: 1px solid rgba(185, 92, 255, 0.2);
  border-radius: var(--radius);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
  font-family: var(--f-display);
  font-size: 1.04rem;
  color: var(--text);
  line-height: 1.5;
}
.manifesto-list li::before {
  content: counter(m, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 13px;
  font-family: var(--f-mono);
  font-weight: 800;
  color: var(--purple-light);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(185, 92, 255, 0.4);
}
.manifesto-sig {
  text-align: center;
  font-family: var(--f-mono);
  color: var(--purple-light);
  letter-spacing: 0.1em;
  margin: 22px 0 4px;
}
.manifesto-foot {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
}

/* ====
   SECTION SCAN-IN ANIMATION (on .reveal.visible)
==== */
.reveal {
  position: relative;
}
.reveal.visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
  90deg,
  transparent,
  var(--section-accent-light, var(--accent-warm)),
  transparent
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
  animation: sectionScan 1.4s ease-out 0.2s both;
}
@keyframes sectionScan {
  0% {
  transform: translateY(0) scaleX(0);
  opacity: 0;
  }
  20% {
  transform: translateY(0) scaleX(1);
  opacity: 0.8;
  }
  100% {
  transform: translateY(120vh) scaleX(1);
  opacity: 0;
  }
}

/* ====
   POWER-USER LAB (section 12)
==== */
.section-lab {
  background:
  linear-gradient(180deg, rgba(185, 92, 255, 0.05), transparent 60%),
  var(--bg-alt);
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 1024px) {
  .lab-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .lab-grid {
  grid-template-columns: 1fr;
  }
}
.lab-tile {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s,
  box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}
.lab-tile:hover {
  border-color: rgba(185, 92, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(185, 92, 255, 0.14);
}
.lab-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.lab-tile-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--purple-light);
  margin: 0;
  text-transform: uppercase;
}
.lab-flag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: var(--accent-warm);
}
.lab-flag-stable {
  background: rgba(46, 255, 122, 0.14);
  border-color: rgba(46, 255, 122, 0.3);
  color: var(--green-light);
}
.lab-tile h3 {
  margin: 4px 0 6px;
  font-size: 1.05rem;
}
.lab-tile-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

/* Tap pad widget */
.tap-pad {
  width: 100%;
  min-height: 140px;
  border: 2px dashed rgba(185, 92, 255, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  135deg,
  rgba(185, 92, 255, 0.06),
  rgba(0, 0, 0, 0.2)
  );
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--f-display);
  color: var(--text);
  transition:
  transform 0.08s,
  background 0.08s,
  border-color 0.18s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.tap-pad:active {
  transform: scale(0.98);
  background: rgba(185, 92, 255, 0.1);
}
.tap-pad.armed {
  border-color: var(--purple-light);
  box-shadow: 0 0 22px rgba(185, 92, 255, 0.3);
  animation: tapArm 1.4s ease-in-out infinite;
}
@keyframes tapArm {
  0%,
  100% {
  box-shadow: 0 0 22px rgba(185, 92, 255, 0.3);
  }
  50% {
  box-shadow: 0 0 36px rgba(185, 92, 255, 0.5);
  }
}
.tap-pad.firing {
  border-color: var(--green-light);
  background: rgba(46, 255, 122, 0.06);
}
.tap-pad-state {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tap-pad-count {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--purple-light);
  text-shadow: 0 0 18px rgba(185, 92, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.tap-result {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tap-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  margin: 0;
}
.tap-meta-label {
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.tap-meta-num {
  color: var(--purple-light);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tap-call {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  border-left: 2px solid var(--purple-light);
  padding-left: 10px;
  font-style: italic;
}

/* Plate visualizer */
.plate-bar-wrap {
  margin: 12px 0 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius);
}
#plateBarSvg {
  width: 100%;
  height: auto;
  display: block;
}
.plate-list {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Habit chain */
.habit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.habit-list li {
  padding: 0;
}
.habit-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  cursor: pointer;
  border-left: 2px solid var(--border-bright);
  transition:
  border-color 0.15s,
  background 0.15s;
}
.habit-list label:hover {
  background: rgba(185, 92, 255, 0.06);
}
.habit-list input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--purple-light);
  cursor: pointer;
}
.habit-list input:checked + .habit-name {
  color: var(--text-dim);
  text-decoration: line-through;
}
.habit-list label:has(input:checked) {
  border-left-color: var(--green-light);
  background: rgba(46, 255, 122, 0.04);
}
.habit-name {
  font-size: 0.94rem;
  color: var(--text);
  transition: color 0.15s;
}
.habit-progress {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--purple-light);
  letter-spacing: 0.04em;
}

/* Dropset output */
.dropset-output {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: drop;
}
.dropset-output li {
  counter-increment: drop;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(96, 165, 250, 0.06);
  border-left: 2px solid var(--accent-warm);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  animation: drop-cascade 0.5s ease-out both;
}
.dropset-output li:nth-child(1) {
  animation-delay: 0.05s;
}
.dropset-output li:nth-child(2) {
  animation-delay: 0.15s;
  opacity: 0.92;
}
.dropset-output li:nth-child(3) {
  animation-delay: 0.25s;
  opacity: 0.84;
}
.dropset-output li:nth-child(4) {
  animation-delay: 0.35s;
  opacity: 0.76;
}
.dropset-output li:nth-child(5) {
  animation-delay: 0.45s;
  opacity: 0.68;
}
@keyframes drop-cascade {
  from {
  opacity: 0;
  transform: translateX(-10px);
  }
  to {
  opacity: 1;
  transform: translateX(0);
  }
}
.dropset-output li.dropset-empty {
  background: transparent;
  border-left: none;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 14px;
}
.dropset-output .ds-step {
  color: var(--text-dim);
  font-weight: 700;
}
.dropset-output .ds-load {
  color: var(--text);
}
.dropset-output .ds-amrap {
  color: var(--accent-warm);
  font-weight: 700;
}

/* Substitution matrix */
.sub-output {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-output li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(96, 165, 250, 0.04);
  border-left: 2px solid var(--blue-light);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.86rem;
}
.sub-rank {
  color: var(--blue-light);
  font-weight: 800;
  font-size: 0.94rem;
}
.sub-name {
  color: var(--text);
}
.sub-pct {
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* JSON export */
.json-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.json-stat {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.json-stat-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.json-stat-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--purple-light);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.json-note {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}
.lab-foot {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(185, 92, 255, 0.05);
  border-left: 2px solid var(--purple-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
}
.lab-foot strong {
  color: var(--text);
}

/* ====
   OLED TRUE-BLACK THEME (3rd state of theme switch)
   Pure #000000 background. Maximum contrast.
==== */
body[data-theme="oled"] {
  background: #000 !important;
  background-image: none !important;
  color: var(--text);
}
body[data-theme="oled"] .topnav {
  background: rgba(0, 0, 0, 0.96);
  border-bottom: 1px solid #1a1a1a;
}
body[data-theme="oled"] .section {
  background: #000;
}
body[data-theme="oled"] .section-alt {
  background: #000;
}
body[data-theme="oled"] [data-accent]::before {
  display: none;
}
body[data-theme="oled"] .reveal::after {
  display: none;
}
body[data-theme="oled"] body {
  background-image: none;
}
body[data-theme="oled"] .price-card,
body[data-theme="oled"] .tile,
body[data-theme="oled"] .floor-tile,
body[data-theme="oled"] .lab-tile,
body[data-theme="oled"] .heritage-card,
body[data-theme="oled"] .tool-card,
body[data-theme="oled"] .doctrine-item,
body[data-theme="oled"] .nutri-card,
body[data-theme="oled"] .tracker-pane,
body[data-theme="oled"] .tracker-history,
body[data-theme="oled"] .compare-panel,
body[data-theme="oled"] .archetype-panel,
body[data-theme="oled"] .chapter-panel,
body[data-theme="oled"] .econ-card,
body[data-theme="oled"] .pillar,
body[data-theme="oled"] .reward-card,
body[data-theme="oled"] .social-feed-pane,
body[data-theme="oled"] .social-handle-pane,
body[data-theme="oled"] .social-squad-pane,
body[data-theme="oled"] .local-board {
  background: #050505 !important;
  border-color: #1f1f1f;
}
body[data-theme="oled"] .day-ticker {
  background: rgba(0, 0, 0, 0.96);
}
body[data-theme="oled"] body {
  background-image: none;
}
body[data-theme="oled"] .hero {
  background: #000;
}
body[data-theme="oled"] .hero::before,
body[data-theme="oled"] .hero::after {
  opacity: 0.6;
}

/* ====
   BOOT-UP SEQUENCE OVERLAY (first-load reveal)
==== */
.boot-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-base);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
}
.boot-overlay.active {
  display: flex;
  animation: bootFade 4.5s ease-out forwards;
  transform: translateZ(0);
  will-change: opacity;
}
@keyframes bootFade {
  0%,
  90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  pointer-events: none;
  }
}
.boot-frame {
  width: min(560px, 88vw);
  padding: 28px 32px;
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(7, 7, 10, 0.85);
  box-shadow: 0 0 60px rgba(96, 165, 250, 0.18);
  position: relative;
}
.boot-line {
  margin: 0 0 8px;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  animation: bootLineIn 0.4s ease-out forwards;
}
.boot-line:nth-child(1) {
  animation-delay: 0.1s;
}
.boot-line:nth-child(2) {
  animation-delay: 0.4s;
}
.boot-line:nth-child(3) {
  animation-delay: 0.75s;
}
.boot-line:nth-child(4) {
  animation-delay: 1.1s;
}
.boot-line:nth-child(5) {
  animation-delay: 1.45s;
}
.boot-line:nth-child(6) {
  animation-delay: 1.8s;
}
.boot-line:nth-child(7) {
  animation-delay: 2.2s;
}
@keyframes bootLineIn {
  from {
  opacity: 0;
  transform: translateY(4px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.boot-ok {
  color: var(--green-light);
  font-weight: 700;
  margin-left: 8px;
}
.boot-blink {
  display: inline-block;
  color: var(--accent-warm);
  animation: bootBlink 0.7s steps(2) infinite;
}
@keyframes bootBlink {
  0%,
  49% {
  opacity: 1;
  }
  50%,
  100% {
  opacity: 0;
  }
}
.boot-skip {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  cursor: pointer;
  text-transform: uppercase;
}
.boot-skip:hover {
  color: var(--text);
}

/* ====
   COMMAND PALETTE (Cmd+K / Ctrl+K)
==== */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-overlay.open {
  display: flex;
  animation: cmdkFade 0.18s ease-out;
}
@keyframes cmdkFade {
  from {
  opacity: 0;
  transform: scale(0.97);
  }
  to {
  opacity: 1;
  transform: scale(1);
  }
}
.cmdk-panel {
  width: min(640px, 92vw);
  background: rgba(7, 7, 10, 0.96);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-lg);
  box-shadow:
  0 24px 60px rgba(0, 0, 0, 0.6),
  0 0 60px rgba(96, 165, 250, 0.18);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.18);
}
.cmdk-glyph {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--blue-light);
  padding: 4px 8px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 3px;
  letter-spacing: 0.06em;
}
#cmdkInput {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1.02rem;
  outline: none;
  padding: 4px 0;
}
#cmdkInput::placeholder {
  color: var(--text-dim);
}
.cmdk-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 6px;
}
.cmdk-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.cmdk-results li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 0.96rem;
  color: var(--text);
  border-left: 2px solid transparent;
}
.cmdk-results li:hover,
.cmdk-results li.active {
  background: rgba(96, 165, 250, 0.08);
  border-left-color: var(--blue-light);
}
.cmdk-results .cmdk-icon {
  color: var(--blue-light);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.84rem;
}
.cmdk-results .cmdk-meta {
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cmdk-results .cmdk-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 24px;
  cursor: default;
}
.cmdk-results .cmdk-empty:hover {
  background: transparent;
  border-left-color: transparent;
}
.cmdk-foot {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(96, 165, 250, 0.1);
}
.cmdk-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.cmdk-foot-right {
  margin-left: auto;
  color: var(--text-muted);
  font-style: italic;
}

/* ====
   SETTINGS DRAWER
==== */
.settings-toggle {
  position: fixed;
  top: 70px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(7, 7, 10, 0.9);
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  cursor: pointer;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
  color 0.18s,
  border-color 0.18s,
  transform 0.18s;
}
.settings-toggle:hover {
  color: var(--text);
  border-color: var(--text);
  transform: rotate(45deg);
}
.settings-toggle svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  .settings-toggle {
  top: 60px;
  right: 12px;
  }
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  box-sizing: border-box;
  overflow-x: hidden;
  background: rgba(7, 7, 10, 0.97);
  border-left: 1px solid rgba(96, 165, 250, 0.3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
}

/* ====
   GLOBAL CONTRAST BASE - repeated at EOF after legacy overrides.
==== */
:root {
  --text: #101114;
  --text-muted: #344154;
  --text-dim: #52617a;
  --text-soft: #1f2938;
  --text-label: #005f84;
  --border: rgba(16, 17, 20, 0.22);
  --border-bright: rgba(16, 17, 20, 0.36);
}

html,
body {
  background: var(--text) !important;
  color: var(--text) !important;
}

/* Keep the obsolete home scroll cue out of the app-first surface. */
.home-scroll-cue {
  display: none !important;
}

.section,
.container,
.container.narrow,
.home-intro,
.home-frame,
.choose-card,
.weight-class-widget,
.cal-widget,
.repdeck-company-contract,
.repdeck-problem-card,
.context-passport,
.settings-drawer,
.tool-card,
.price-card,
.atlas-card,
.signup-card {
  color: var(--text) !important;
  text-shadow: none !important;
}

.choose-card,
.weight-class-widget,
.cal-widget,
.footer-inner,
.quiz,
.tool-card,
.price-card,
.atlas-card,
.signup-card,
.settings-drawer {
  border: 2px solid rgba(16, 17, 20, 0.2) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 6px 6px 0 rgba(16, 17, 20, 0.14) !important;
  opacity: 1 !important;
}

.choose-card,
.weight-class-widget,
.cal-widget {
  animation: none !important;
}

.home-subtitle,
.home-rotator-line,
.choose-card p,
.repdeck-company-contract em,
.repdeck-problem-card em,
.context-passport-head em,
.context-passport-card em,
.wc-input-row label,
.wc-tier-mult,
.wc-foot,
.cal-legend,
.cal-foot,
.section .lead-text,
.tool-card p,
.tool-card-tagline,
.price-tagline,
.footer-line,
.footer-nav a,
.footer-socials a,
.footer-disclaimer,
.settings-meta,
.gym-mode-context-strip p {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.choose-card p,
.wc-foot,
.cal-foot,
.footer-line {
  display: block !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 480px) {
  .choose-card p {
  margin: 2px 0 0 !important;
  font-size: 0.74rem !important;
  line-height: 1.24 !important;
  max-width: 28ch !important;
  }
}

.home-overline,
.hud-marker,
.choose-label,
.wc-label,
.wc-tier-name,
.cal-label,
.repdeck-problem-kicker,
.context-passport-head span,
.context-passport-output span,
.footer-nav a:hover {
  color: var(--text-label) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.choose-card h3,
.choose-card strong,
.wc-tier-target,
.context-passport-head strong,
.context-passport-card strong,
.repdeck-company-contract strong,
.repdeck-problem-card strong,
.footer-line strong {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.wc-input-row input {
  background: var(--text) !important;
  border: 2px solid rgba(16, 17, 20, 0.24) !important;
  color: #f8fbff !important;
}
.wc-input-row input::placeholder {
  color: rgba(248, 251, 255, 0.6) !important;
  opacity: 1 !important;
}

.wc-tier {
  background: var(--text) !important;
  border: 2px solid rgba(16, 17, 20, 0.14) !important;
  border-left: 5px solid var(--rep-cyan, var(--rep-cyan)) !important;
}

.wc-tier-bar,
.cal-cell,
.cal-grid > div > span {
  background: rgba(16, 17, 20, 0.1) !important;
  border-color: rgba(16, 17, 20, 0.16) !important;
}

.cal-grid {
  scrollbar-color: var(--surface) var(--text-muted);
}

.footer {
  background: linear-gradient(
  180deg,
  rgba(247, 249, 253, 0.98),
  var(--text)
  ) !important;
  border-top: 2px solid var(--surface) !important;
  color: var(--text) !important;
}

.footer-inner {
  width: min(100% - 28px, 980px);
  margin: 0 auto;
  padding: 28px;
  border-radius: 8px;
}

.footer-socials-placeholder a {
  opacity: 1 !important;
}

.footer-nav {
  justify-content: center;
  border-top: 1px solid rgba(16, 17, 20, 0.16) !important;
}

.footer-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 8px;
}

.footer-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(16, 17, 20, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-app-nav,
.gym-mode-shell,
.session-mode,
.boot-overlay,
.context-passport-output {
  --text: #f8fbff;
  --text-muted: #d8e3f8;
  --text-dim: #b8c7e2;
  --text-soft: #eef5ff;
  --text-label: #9eeeff;
}

.gym-mode-shell,
.session-mode,
.boot-overlay {
  color: var(--text) !important;
}

.gym-mode-shell .gym-mode-head p,
.gym-mode-shell .gym-mode-status,
.gym-mode-shell .gym-mode-cue,
.gym-mode-shell .gym-mode-feel,
.gym-mode-shell .gym-mode-readiness span,
.session-mode p,
.session-mode span,
.session-mode label,
.session-mode li,
.boot-line {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.gym-mode-shell .gym-mode-metabolic,
.gym-mode-shell .gym-mode-physics {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 6px 0;
}

.metabolic-dominance-tracker {
  width: 100%;
  height: 6px;
  background: hsla(200, 30%, 15%, 0.5);
  border-radius: 4px;
  margin: 8px 0;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.dominance-bar {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #f44336, #4caf50);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gym-mode-shell .gym-mode-metabolic,
.gym-mode-shell .gym-mode-physics {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: hsl(200, 40%, 15%);
  color: hsl(190, 90%, 75%) !important;
  border: 1px solid hsla(190, 80%, 60%, 0.3);
  transition:
  transform 0.2s cubic-bezier(0.2, 0, 0.2, 1),
  box-shadow 0.2s ease,
  background 0.2s ease;
  will-change: transform;
}

.gym-mode-shell .gym-mode-metabolic:hover,
.gym-mode-shell .gym-mode-physics:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px hsla(190, 90%, 50%, 0.2);
  background: hsl(200, 50%, 20%);
}

.gym-mode-shell .gym-mode-metabolic {
  color: hsl(340, 90%, 75%) !important;
  border-color: hsla(340, 80%, 60%, 0.3);
  background: hsl(340, 40%, 15%);
}

.gym-mode-shell .gym-mode-fatigue {
  color: #f44336;
  font-family: var(--f-mono);
  font-size: 0.8rem;
}

.gym-mode-shell .gym-mode-metabolic:hover {
  box-shadow: 0 4px 12px hsla(340, 90%, 50%, 0.2);
  background: hsl(340, 50%, 20%);
}

/* Metabolic dominance — smooth the hover swap (was a snap). Motion-gated; color is intentional intensity data-viz, untouched. */
@media (prefers-reduced-motion: no-preference) {
  .gym-mode-shell .gym-mode-metabolic { transition: box-shadow 0.18s ease, background 0.18s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .gym-mode-shell .gym-mode-metabolic,
  .gym-mode-shell .gym-mode-physics,
  .gym-mode-shell .gym-mode-metabolic:hover,
  .gym-mode-shell .gym-mode-physics:hover {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  }
}

.gym-mode-shell h3,
.gym-mode-shell strong,
.session-mode h2,
.session-mode h3,
.session-mode strong {
  color: var(--text) !important;
}

body[data-current-page="gym"] .gym-mode-shell {
  background: #101114 !important;
}

body[data-current-page="gym"] .gym-mode-head,
body[data-current-page="gym"] .gym-mode-quickstart,
body[data-current-page="gym"] .gym-mode-readiness,
body[data-current-page="gym"] .gym-mode-command-deck,
body[data-current-page="gym"] .gym-mode-plan-deck,
body[data-current-page="gym"] .gym-mode-log {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* Gym card depth — top catch-light + faint bottom inset for dimension. Gym-scoped at higher
   specificity so it wins L21021's app-wide brutalist box-shadow only on the gym floor (renders,
   unlike the earlier base-rule edit it overrode). Keeps the brutalist offset; white-channel + ink. */
body[data-current-page="gym"] .gym-mode-card {
  box-shadow: 6px 6px 0 rgba(16, 17, 20, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(16, 17, 20, 0.045) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(16, 17, 20, 0.012)) !important;
}
body[data-current-page="gym"] .gym-mode-label,
body[data-current-page="gym"] .gym-mode-kicker {
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
}
body[data-current-page="gym"] .gym-mode-shell {
  gap: 24px !important;
}

.gym-mode-day-tabs button {
  width: 46px !important;
  min-height: 46px !important;
}

.gym-mode-context-strip {
  --text: #101114;
  --text-muted: #344154;
  --text-dim: #52617a;
  --text-label: #005f84;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--text) !important;
}

.gym-mode-context-strip .gym-mode-label {
  color: var(--text-label) !important;
}

.gym-mode-context-strip strong {
  color: var(--text) !important;
}

.gym-mode-context-strip p {
  color: var(--text-muted) !important;
}

@media (max-width: 480px) {
  .footer {
  padding: 28px 0 calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .footer-inner {
  width: calc(100% - 20px);
  padding: 18px 14px;
  }

  .choose-card,
  .weight-class-widget,
  .cal-widget {
  box-shadow: 4px 4px 0 rgba(16, 17, 20, 0.14) !important;
  }
}

/* ====
   SIDEBAR CONTRAST FINAL - readable desktop rail and phone drawer.
==== */
.sidebar {
  --text: #f8fbff;
  --text-muted: #d8e3f8;
  --text-dim: #b8c7e2;
  --text-soft: #eef5ff;
  --text-label: #93c5fd;
  height: 100dvh;
  background:
  radial-gradient(
    circle at 22% 0%,
    rgba(59, 130, 246, 0.18),
    transparent 34%
  ),
  linear-gradient(180deg, rgba(6, 8, 14, 0.99), rgba(10, 14, 22, 0.99)) !important;
  border-right: 2px solid rgba(59, 130, 246, 0.42) !important;
  color: var(--text) !important;
  overflow: hidden !important;
  box-shadow: 16px 0 44px rgba(0, 0, 0, 0.34) !important;
}

.sidebar,
.sidebar * {
  text-shadow: none !important;
}

.sidebar-head,
.sidebar-mode,
.sidebar-account,
.sidebar-streak,
.sidebar-foot {
  flex-shrink: 0;
}

.sidebar-head {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(216, 227, 248, 0.16) !important;
}

.sidebar-brand-name,
.sidebar-close,
.sidebar-mode-toggle .seg-btn,
.sb-title,
.sa-line-1,
.saa-line,
.ss-num-row,
.sidebar-foot kbd {
  color: var(--text) !important;
  opacity: 1 !important;
}

.sidebar-mode-label,
.sb-glyph,
.sb-group[open] summary,
.ss-label,
.ss-grace strong,
.sa-glyph,
.saa-meta a {
  color: var(--text-label) !important;
  opacity: 1 !important;
}

.sidebar-mode-hint,
.sa-line-2,
.saa-meta,
.ss-unit,
.ss-meta,
.ss-grace,
.sidebar-foot-line {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.sidebar-mode-toggle {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(216, 227, 248, 0.18) !important;
  border-radius: 8px !important;
}

.sidebar-mode-toggle .seg-btn {
  min-height: 40px;
  border-radius: 7px !important;
}

.sidebar-mode-toggle .seg-btn:not(.active) {
  background: rgba(255, 255, 255, 0.03) !important;
}

.sidebar-mode-toggle .seg-btn.active {
  background: var(--text) !important;
  color: var(--bg-alt) !important;
  box-shadow: none !important;
}

.sidebar-account-cta {
  background: linear-gradient(
  135deg,
  rgba(59, 130, 246, 0.2),
  rgba(125, 255, 206, 0.1)
  ) !important;
  border: 1px solid rgba(96, 165, 250, 0.56) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.sidebar-account-cta:hover {
  background: linear-gradient(
  135deg,
  rgba(59, 130, 246, 0.3),
  rgba(125, 255, 206, 0.16)
  ) !important;
}

.sidebar-account-active,
.sidebar-streak {
  background: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
}

.sidebar-streak[data-streak-state="empty"] .ss-num {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.ss-dot {
  background: rgba(96, 165, 250, 0.22) !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
}

.sidebar-nav {
  min-height: 0;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--rep-cyan) rgba(255, 255, 255, 0.1);
  padding-bottom: 18px !important;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rep-cyan), var(--purple));
  border-radius: 999px;
}

.sb-group summary {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  min-height: 44px;
}

.sb-group summary::after {
  color: var(--text-label) !important;
}

.sb-group summary:hover,
.sb-group[open] summary {
  background: rgba(59, 130, 246, 0.12) !important;
}

.sb-group li a {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  min-height: 40px;
  line-height: 1.25;
}

.sb-group li a:hover,
.sb-group li a.active,
.sb-group li a[aria-current="page"] {
  color: var(--text) !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

.sb-dot {
  background: rgba(216, 227, 248, 0.62) !important;
}

.sidebar-foot {
  background: rgba(6, 8, 14, 0.96) !important;
  border-top: 1px solid rgba(216, 227, 248, 0.16) !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 480px) {
  .sidebar {
  width: min(92vw, 320px);
  }
}

/* ====
   DESKTOP OVERFLOW FINAL - keep phone-only chrome off wide screens.
==== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
  overflow-x: hidden;
  }
}

@media (min-width: 761px) {
  .mobile-app-nav {
  display: none !important;
  }
}

@media (min-width: 1280px) {
  body:not([data-current-page="home"]) .topnav {
  box-sizing: border-box;
  width: calc(100vw - 280px) !important;
  max-width: calc(100vw - 280px) !important;
  }
}

/* ====
   REPDECK THEME - kinetic gym-floor operating system.
==== */
:root {
  --rep-ink: #101114;
  --rep-ink-2: #24262d;
  --rep-paper: #f7f9fd;
  --rep-paper-2: #ffffff;
  --rep-mist: #e8eef6;
  --rep-line: #101114;
  --rep-lime: #c8ff2d;
  --rep-cyan: #3b82f6;
  --rep-coral: #ff5f3f;
  --rep-violet: #7c5cff;
  --rep-green: #0a7a61;
  --bg: var(--rep-paper);
  --panel: var(--rep-paper-2);
  --text: var(--rep-ink);
  --text-muted: #4b5260;
  --text-dim: #6a7280;
  --accent: var(--rep-cyan);
  --red: var(--rep-coral);
  --purple: var(--rep-violet);
  --green-light: var(--rep-green);
  --border: rgba(16, 17, 20, 0.18);
}

html,
body {
  background: var(--rep-paper) !important;
  color: var(--rep-ink) !important;
}

body::before {
  background:
  linear-gradient(90deg, rgba(16, 17, 20, 0.055) 1px, transparent 1px),
  linear-gradient(180deg, rgba(16, 17, 20, 0.045) 1px, transparent 1px),
  radial-gradient(
    circle at 8% 12%,
    rgba(59, 130, 246, 0.18),
    transparent 28%
  ),
  radial-gradient(
    circle at 92% 18%,
    rgba(200, 255, 45, 0.22),
    transparent 26%
  ),
  radial-gradient(circle at 80% 86%, rgba(255, 95, 63, 0.16), transparent 24%) !important;
  background-size:
  34px 34px,
  34px 34px,
  auto,
  auto,
  auto !important;
  opacity: 1 !important;
}

body::after {
  opacity: 0.06 !important;
  mix-blend-mode: multiply;
}

.topnav {
  background: rgba(247, 249, 253, 0.94) !important;
  border-bottom: 2px solid var(--rep-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.brand-name {
  color: var(--rep-ink) !important;
  text-shadow: none !important;
  letter-spacing: 0.08em;
}

.brand-mark {
  border: 2px solid var(--rep-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(
  135deg,
  var(--rep-cyan),
  var(--rep-lime)
  ) !important;
  box-shadow: 4px 4px 0 var(--rep-line) !important;
}

.navlinks a {
  border: 1.5px solid var(--rep-line) !important;
  border-radius: 8px !important;
  background: var(--rep-paper-2) !important;
  color: var(--rep-ink) !important;
  box-shadow: 3px 3px 0 var(--rep-line);
  font-weight: 800;
  text-shadow: none !important;
}

.navlinks a:hover,
.navlinks a.active,
.navlinks a.cta {
  background: #2563eb !important; /* de-neon: brand blue replaces retired lime on nav hover/active/cta */
  color: #ffffff !important; /* white on #2563eb = 5.17:1 AA (near-black --rep-ink fails on blue) */
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--rep-line);
}

.home-intro {
  background:
  linear-gradient(135deg, rgba(59, 130, 246, 0.2), transparent 34%),
  linear-gradient(225deg, rgba(200, 255, 45, 0.26), transparent 30%),
  linear-gradient(315deg, rgba(255, 95, 63, 0.18), transparent 32%),
  linear-gradient(180deg, var(--text) 0%, var(--text) 100%) !important;
  color: var(--rep-ink) !important;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 72px 16px 24px;
  border: 2px solid rgba(16, 17, 20, 0.12);
  border-radius: 8px;
  background:
  repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.035) 23px 24px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.03) 23px 24px
  );
  pointer-events: none;
}

.ambient-canvas { opacity: 0.8 !important; mix-blend-mode: screen; }

.home-frame {
  text-align: left;
}

.home-overline {
  color: var(--rep-green) !important;
  text-shadow: none !important;
  letter-spacing: 0.16em !important;
}

.home-overline-version {
  border-left-color: rgba(16, 17, 20, 0.24) !important;
  color: var(--rep-ink) !important;
}

.home-wordmark,
.hero h1,
h1 .accent-primary,
.h1-accent,
.accent-primary,
.signup-highlight {
  background-image: none !important;
  color: var(--rep-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}

.home-subtitle {
  max-width: 480px;
  color: var(--rep-ink) !important;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: none !important;
}

.home-rotator-line {
  display: inline-flex;
  max-width: 100%;
  border: 2px solid var(--rep-line) !important;
  border-radius: 999px !important;
  background: var(--rep-paper-2) !important;
  color: var(--rep-ink) !important;
  box-shadow: 6px 6px 0 var(--rep-line);
  text-shadow: none !important;
}

.home-route-strip {
  gap: 2px;
  overflow: hidden;
  border: 2px solid var(--rep-line) !important;
  border-radius: 8px !important;
  background: var(--rep-line) !important;
  box-shadow: 10px 10px 0 var(--rep-line);
}

.home-route-strip a {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--rep-ink) !important;
  background: var(--rep-paper-2) !important;
  text-shadow: none !important;
  animation-delay: calc(0.05s + (var(--ri, 0) * 0.05s));
}

.home-route-strip a:nth-child(1) {
  background: var(--rep-lime) !important;
}

.home-route-strip a:nth-child(2) {
  background: var(--rep-cyan) !important;
  color: var(--rep-ink) !important;
}

.home-route-strip a:nth-child(3) {
  background: var(--rep-ink) !important;
  color: var(--rep-paper-2) !important;
}

.home-route-strip a:nth-child(4) {
  background: var(--rep-coral) !important;
}

.home-route-strip a:hover,
.home-route-strip a:focus-visible {
  transform: translateY(-2px) !important;
  filter: saturate(1.08);
}

.home-route-strip span,
.home-route-strip strong,
.home-route-strip em {
  color: currentColor !important;
}

.home-route-strip strong {
  font-weight: 900;
}

.home-route-strip em {
  opacity: 0.82;
}

.mobile-app-nav {
  background: var(--rep-ink) !important;
  border-top: 2px solid var(--rep-ink) !important;
  box-shadow: 0 -18px 48px rgba(16, 17, 20, 0.28) !important;
}

.mobile-app-tab {
  border: 2px solid rgba(247, 249, 253, 0.2) !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  color: var(--rep-ink) !important; /* a11y WCAG 1.4.3: dark label on light tab (Lighthouse: span fg #c7d4e8 on light bg = 1.39) */
  font-weight: 900;
}
.mobile-app-nav .mobile-app-tab span {
  color: var(--rep-ink) !important; /* a11y 1.4.3: span inherits #c7d4e8 from a broader rule; force dark on the light tab (0,3,0 beats it) */
}

.mobile-app-tab.active,
.mobile-app-tab[aria-current="page"] {
  border-color: var(--rep-lime) !important;
  background: var(--rep-lime) !important;
  color: var(--rep-ink) !important;
  box-shadow: none !important;
}

.mobile-app-tab-icon {
  color: currentColor !important;
}

.section,
.section-quiz,
.section-alt,
.section-wedge,
.section-buy,
.section-tools,
.section-trust,
.section-inside,
.hero,
.signup-page {
  background: transparent !important;
  color: var(--rep-ink) !important;
}

.container,
.container.narrow,
.hero-inner,
.quiz,
.price-card,
.tool-card,
.atlas-card,
.choose-card,
.signup-card,
.settings-drawer,
.tracker-pane,
.gym-mode-card {
  border: 2px solid rgba(16, 17, 20, 0.18);
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--rep-ink) !important;
  box-shadow: 6px 6px 0 rgba(16, 17, 20, 0.13) !important;
}

.gym-mode-shell {
  border: 2px solid var(--rep-line) !important;
  border-radius: 8px !important;
  background: var(--rep-ink) !important;
  color: var(--rep-paper-2) !important;
  box-shadow: 10px 10px 0 var(--rep-lime) !important;
}

.gym-mode-shell .gym-mode-card,
.gym-mode-shell .tracker-pane {
  border-color: rgba(16, 17, 20, 0.12) !important;
  background: var(--text) !important;
  color: var(--rep-ink) !important;
}

/* Gym LOG SET — the hero tap. Compositor-only press (sink + brand-blue glow), motion-gated.
   id-scoped so it wins the base .btn-primary press without touching it. */
@media (prefers-reduced-motion: no-preference) {
  #gymModeLogSet { transition: transform 0.12s ease, box-shadow 0.12s ease; }
  #gymModeLogSet:active { transform: scale(0.97) translateY(1px); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.42); }
  #gymModeLogSet.gym-log-confirm { animation: gymLogConfirm 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes gymLogConfirm { 0% { transform: scale(1); } 32% { transform: scale(1.045); } 100% { transform: scale(1); } }

.btn,
.quiz-next,
.quiz-prev,
.seg-btn,
.cta,
button[type="submit"] {
  border-radius: 8px !important;
  border: 2px solid var(--rep-line) !important;
  background: var(--rep-ink) !important;
  color: var(--rep-paper-2) !important;
  box-shadow: 4px 4px 0 var(--rep-line);
  font-weight: 850;
}

.btn:hover,
.quiz-next:hover,
.quiz-prev:hover,
.seg-btn:hover,
.cta:hover,
button[type="submit"]:hover {
  background: #2563eb !important; /* de-neon: brand blue replaces retired lime on primary button hover */
  color: #ffffff !important; /* white on #2563eb = 5.17:1 AA */
  transform: translate(-1px, -1px);
}

.btn:disabled,
.quiz-next:disabled,
.quiz-prev:disabled,
.seg-btn:disabled,
.cta:disabled,
button[type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border: 2px solid rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px !important;
  background: var(--rep-paper-2) !important;
  color: var(--rep-ink) !important;
  box-shadow: none !important;
}

.atlas-card h3,
.tool-card h3,
.gym-mode-card h3,
.choose-card strong,
.hero h1,
.section h2,
.section h3 {
  color: var(--rep-ink) !important;
  text-shadow: none !important;
}

.kicker,
.eyebrow,
.micro,
.home-overline,
.choose-label {
  color: var(--rep-green) !important;
  text-shadow: none !important;
}

@media (max-width: 480px) {
  .topnav {
  background: rgba(247, 249, 253, 0.98) !important;
  }

  .home-intro {
  min-height: calc(100svh - 128px) !important;
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .home-intro::before {
  inset: 62px 10px 84px;
  }

  .home-frame {
  text-align: left;
  padding-top: 2px;
  }

  .home-overline {
  justify-content: flex-start;
  margin: 0 0 12px !important;
  font-size: 0.58rem !important;
  }

  .home-subtitle {
  max-width: 29ch;
  margin: 0 0 12px !important;
  font-size: clamp(1.05rem, 5.2vw, 1.26rem) !important;
  }

  .home-route-strip {
  width: 100%;
  margin: 10px 0 0 !important;
  box-shadow: 6px 6px 0 var(--rep-line);
  }

  .home-route-strip a {
  min-height: 82px !important;
  padding: 12px 10px !important;
  }

  .home-route-strip strong {
  font-size: 1.02rem !important;
  }

  .mobile-app-nav {
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-app-tab {
  min-height: 56px;
  }
}
.settings-drawer.open {
  right: 0;
  transform: translateX(0) !important;
}
.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.settings-title {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  color: var(--text);
  margin: 0;
}
.settings-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.settings-close:hover {
  color: var(--text);
}
.settings-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.settings-group {
  margin-bottom: 22px;
}
.settings-group-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.seg-row {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  min-height: 44px;
  touch-action: manipulation; /* kill 300ms tap delay + double-tap-zoom on mode toggle */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition:
  background 0.15s,
  color 0.15s;
}
.seg-btn.active {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.35);
}

.toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* a11y WCAG 2.5.5 tap floor — clickable row, not caught by global button rule */
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.94rem;
  color: var(--text);
}
.toggle-row:last-of-type {
  border-bottom: none;
}
/* Affordance: this is a genuinely-clickable row (cursor:pointer, min-height:44px, wraps a hidden checkbox it toggles) yet gives no tactile press. Compositor-only press-on-tap, motion-gated, mirrors .btn-primary:active scale. No hover added (marketing flatten owns :hover); press only. */
@media (prefers-reduced-motion: no-preference) {
  .toggle-row { transition: transform .13s ease; }
  .toggle-row:active { transform: scale(0.985); }
}
.toggle-row input[type="checkbox"] {
  display: none;
}
.toggle-slider {
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  position: relative;
  transition: background 0.18s;
}
.toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toggle-row input:checked ~ .toggle-slider {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.toggle-row input:checked ~ .toggle-slider::after {
  transform: translateX(16px);
  background: var(--text);
}

.settings-keys {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-keys li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
}
.settings-keys kbd {
  display: inline-block;
  width: 28px;
  text-align: center;
  padding: 3px 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  color: var(--accent-warm);
  font-weight: 700;
  font-size: 0.84rem;
}
.settings-test {
  width: 100%;
}
.settings-meta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 4px 0;
}
.settings-meta code {
  color: var(--accent-warm);
}

/* ====
   PERSISTENT REST TIMER (floating bottom-left)
==== */
.rest-timer {
  position: fixed;
  left: 16px;
  bottom: 60px;
  width: 220px;
  background: rgba(7, 7, 10, 0.96);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  z-index: var(--z-modal);
  box-shadow:
  0 16px 40px rgba(0, 0, 0, 0.5),
  0 0 30px rgba(96, 165, 250, 0.18);
  display: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.rest-timer.open {
  display: block;
  animation: restIn 0.25s ease-out;
}
@keyframes restIn {
  from {
  opacity: 0;
  transform: translateY(6px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .rest-timer {
  left: 12px;
  bottom: 130px;
  width: 200px;
  }
}
.rest-timer-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.rest-timer-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.3);
}
.rest-timer-num.urgent {
  color: var(--accent-warm);
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.5);
}
.rest-timer-cue {
  min-height: 2.7em;
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.rest-timer-presets {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.rest-preset {
  flex: 1;
  padding: 6px 0;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 4px;
  color: var(--blue-light);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition:
  background 0.15s,
  color 0.15s;
}
.rest-preset:hover {
  background: rgba(96, 165, 250, 0.12);
}
.rest-timer-controls {
  display: flex;
  gap: 6px;
}
.rest-ctrl {
  flex: 1;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.84rem;
  cursor: pointer;
  transition:
  background 0.15s,
  color 0.15s;
}
.rest-ctrl:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}
.rest-ctrl-close {
  color: var(--accent-warm);
}

/* ====
   NUTRITION EXTRAS — section labels, comparison, micros, meals
==== */
.nutri-card-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 14px;
  line-height: 1.5;
}
.nutri-section-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin: 14px 0 4px;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 181, 71, 0.18);
  padding-top: 12px;
}
.nutri-section-label:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.nutri-comparison {
  margin-top: 18px;
  padding: 0;
  border: 1px solid rgba(255, 181, 71, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 181, 71, 0.03);
  overflow: hidden;
}
.nutri-comparison summary {
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--blue-light);
  cursor: pointer;
  list-style: none;
  background: rgba(255, 181, 71, 0.05);
  position: relative;
  padding-right: 36px;
}
.nutri-comparison summary::-webkit-details-marker {
  display: none;
}
.nutri-comparison summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-light);
  transition: transform 0.18s;
}
.nutri-comparison[open] summary::after {
  content: "−";
}
.nutri-comparison-list {
  list-style: none;
  padding: 12px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nutri-comparison-list li {
  font-size: 0.86rem;
  color: var(--text-muted);
  padding-left: 10px;
  border-left: 2px solid rgba(255, 181, 71, 0.3);
  line-height: 1.5;
}
.nutri-comparison-list li strong {
  color: var(--text);
}
.nutri-disclaimer {
  margin: 8px 16px 12px;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.04);
  border-left: 2px solid var(--accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.nutri-activity {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.84rem;
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
}
.nutri-activity:hover {
  color: var(--text);
  border-color: var(--border-bright);
}
.nutri-activity.active {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--blue-light);
  color: var(--blue-light);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.18);
}

.micro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin: 8px 0 0;
}
@media (max-width: 480px) {
  .micro-grid {
  grid-template-columns: 1fr 1fr;
  }
}
.micro-cell {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.micro-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.micro-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.meal-timing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.meal-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 181, 71, 0.04);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.84rem;
}
.meal-when {
  font-family: var(--f-mono);
  color: var(--blue-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.meal-what {
  color: var(--text);
}

/* ====
   COMPOUND ATLAS section
==== */
.section-atlas {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.04), transparent 60%), var(--bg);
}
.atlas-receipt {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 18px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: var(--radius);
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.08),
  rgba(0, 0, 0, 0.18)
  );
}
.atlas-receipt span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) - 4px);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.atlas-receipt strong {
  display: block;
  margin-bottom: 2px;
  color: var(--blue-light);
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0;
}
.atlas-receipt em {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}
.atlas-receipt[data-state="ready"] em {
  color: rgba(245, 251, 255, 0.72);
}
.atlas-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0 12px;
}
.atlas-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.86rem;
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
}
.atlas-filter:hover {
  color: var(--text);
  border-color: var(--border-bright);
}
.atlas-filter.active {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--blue-light);
  color: var(--blue-light);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.18);
}
.atlas-search-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 24px;
}
.atlas-view-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
  min-height: 44px;
  align-items: center;
}
.atlas-view-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 14px;
  height: 38px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.atlas-view-btn:hover {
  color: var(--text);
}
.atlas-view-btn.active {
  background: rgba(96, 165, 250, 0.16);
  color: var(--blue-light);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.24);
  border-color: rgba(96, 165, 250, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .atlas-view-btn {
  transition: none;
  }
}
.atlas-search-label {
  display: block;
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.atlas-search {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.atlas-search:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}
.atlas-count {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .atlas-receipt {
  grid-template-columns: 1fr 1fr;
  }
  .atlas-search-row {
  grid-template-columns: 1fr;
  }
  .atlas-count {
  white-space: normal;
  }
}
.atlas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  perspective: 900px;
}
@media (max-width: 1024px) {
  .atlas-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .atlas-grid {
  grid-template-columns: 1fr;
  }
}
.atlas-card {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.08),
  rgba(96, 165, 250, 0.02)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition:
  border-color 0.22s ease,
  transform 0.1s linear,
  box-shadow 0.22s ease;
  min-height: 280px;
  transform-style: preserve-3d;
}
.atlas-card:hover {
  border-color: rgba(96, 165, 250, 0.6);
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.12),
  rgba(96, 165, 250, 0.05)
  );
  box-shadow:
  0 12px 40px rgba(96, 165, 250, 0.2),
  0 4px 15px rgba(0, 0, 0, 0.4),
  inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.atlas-card.hidden {
  display: none;
}
.atlas-train-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  /* AA: cyan accent text+border on near-white atlas cards = 1.53:1 (WCAG 1.4.3 + 1.4.11 fail).
   Dark pill restores 10:1 text / 15:1 boundary; :hover still inverts to accent bg + #000. */
  background: rgba(16, 17, 20, 0.92);
  cursor: pointer;
  transition:
  background 0.15s,
  color 0.15s;
}
.atlas-train-btn:hover {
  background: var(--accent);
  color: #000;
}
.atlas-icon {
  width: 100%;
  aspect-ratio: 18 / 11;
  border-radius: 10px;
  background:
  linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.02)),
  rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(96, 165, 250, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-light);
  margin-bottom: 12px;
  padding: 6px 10px;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
}
.atlas-icon svg {
  width: 100%;
  height: 100%;
  max-height: 110px;
}
.atlas-visual-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 18 / 11;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  background:
  linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(3, 255, 176, 0.08)),
  rgba(0, 0, 0, 0.36);
  box-shadow:
  inset 0 0 0 1px rgba(255, 255, 255, 0.04),
  0 0 20px rgba(96, 165, 250, 0.08);
}
.atlas-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}
.atlas-biomech-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}
.atlas-biomech-svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.biomech-angle {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.5;
  fill: none;
}
.biomech-angle-text {
  fill: rgba(255, 255, 255, 0.9);
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
}
@media (prefers-reduced-motion: no-preference) {
  .biomech-fapp path {
  animation: biomech-pulse 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  }
}
/* Eccentric tempo for visual learners: a quick bright concentric (the lift, 0-15%) then a
   slow controlled decay (the eccentric lowering, 15-100%) — Eccentryx's emphasized phase,
   shown as live motion on the applied-force vector. Motion-gated above. */
@keyframes biomech-pulse {
  0% {
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.55));
  stroke-width: 3;
  opacity: 0.6;
  }
  15% {
  filter: drop-shadow(0 0 9px rgba(96, 165, 250, 1));
  stroke-width: 4.5;
  opacity: 1;
  }
  100% {
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.55));
  stroke-width: 3;
  opacity: 0.6;
  }
}
/* a11y regression fix (Lighthouse Accessibility 92->100): a prior session set inactive
   mobile nav-tab text to a light token -> 1.39 contrast on the light --surface-2 tab.
   High-specificity dark literal wins the cascade (incl clinical-override); active tab keeps
   its lime/ink. #1a2233 on #f5f7fa ~= 13:1 (AAA). */
body nav.mobile-app-nav a.mobile-app-tab:not(.active):not([aria-current="page"]),
body nav.mobile-app-nav a.mobile-app-tab:not(.active):not([aria-current="page"]) span,
body nav.mobile-app-nav a.mobile-app-tab:not(.active):not([aria-current="page"]) .mobile-app-tab-icon {
  color: #1a2233 !important;
}
/* Visual-learner energy-system cue: the metabolic-pathway tag breathes subtly so the eye
   catches WHICH energy system a lift trains (ATP-CP / glycolytic / aerobic). Motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .metabolic-atp, .metabolic-glycolytic, .metabolic-aerobic {
    animation: metabolic-breathe 3.2s ease-in-out infinite;
  }
}
@keyframes metabolic-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: brightness(1.08); }
}
.atlas-visual-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
  linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72)),
  repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 5px
  );
}
.atlas-visual-shell figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  color: #f7fbff;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.atlas-visual-shell figcaption span:last-child {
  max-width: 48%;
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
}
.atlas-visual-shell .atlas-visual-caption-min {
  position: absolute;
  left: 10px;
  bottom: 9px;
  right: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #f7fbff;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: none;
  pointer-events: none;
}
.atlas-visual-shell[data-visual-status="ready"] .atlas-photo {
  object-fit: contain;
  background: #0a0f1d;
}
.atlas-visual-shell[data-visual-status="exercise-avatar"] {
  border-color: rgba(167, 255, 0, 0.42);
  background:
  linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(167, 255, 0, 0.08)),
  #071017;
}
.atlas-visual-shell[data-visual-status="exercise-avatar"] .atlas-photo {
  object-fit: cover;
  background: #071017;
}
.atlas-visual-shell[data-visual-status="exercise-avatar"]
  .atlas-visual-caption-min {
  border-color: rgba(167, 255, 0, 0.48);
  background: rgba(5, 10, 12, 0.84);
  color: #f7ffed;
}
.atlas-movement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 160px);
  min-height: 66px;
  max-height: 88px;
}
.atlas-movement-icon svg {
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.18));
}
.atlas-asset {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.atlas-visual-label {
  font-family: var(--f-display);
  font-size: 0.86rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.atlas-card h3 {
  margin: 0 0 4px;
  font-size: 1.04rem;
}
.atlas-meta {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.metabolic-tag {
  font-family: var(--f-display);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}
.metabolic-atp {
  background: hsla(350, 100%, 60%, 0.15);
  color: hsl(350, 100%, 70%);
  box-shadow: inset 0 0 0 1px hsla(350, 100%, 60%, 0.3);
  text-shadow: 0 0 8px hsla(350, 100%, 60%, 0.4);
}
.metabolic-glycolytic {
  background: hsla(270, 90%, 65%, 0.15);
  color: hsl(270, 90%, 75%);
  box-shadow: inset 0 0 0 1px hsla(270, 90%, 65%, 0.3);
  text-shadow: 0 0 8px hsla(270, 90%, 65%, 0.4);
}
.metabolic-aerobic {
  background: hsla(200, 100%, 60%, 0.15);
  color: hsl(200, 100%, 70%);
  box-shadow: inset 0 0 0 1px hsla(200, 100%, 60%, 0.3);
  text-shadow: 0 0 8px hsla(200, 100%, 60%, 0.4);
}
.atlas-mech {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.atlas-mech strong {
  color: var(--blue-light);
}
.atlas-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.atlas-points li {
  font-size: 0.84rem;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
}
.atlas-points li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--blue-light);
  font-weight: 700;
}
.atlas-points li strong {
  color: var(--text);
}
.atlas-foot {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(96, 165, 250, 0.05);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* ====
   WALL OF RECEIPTS section
==== */
.section-receipts {
  background:
  linear-gradient(180deg, rgba(46, 255, 122, 0.04), transparent 60%),
  var(--bg);
}
.receipts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}
@media (max-width: 1024px) {
  .receipts-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .receipts-grid {
  grid-template-columns: 1fr;
  }
}
.receipt-card {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.04),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s,
  box-shadow 0.18s;
}
.receipt-card:hover {
  border-color: rgba(46, 255, 122, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(46, 255, 122, 0.1);
}
.receipt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.receipt-handle {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--green-light);
  font-size: 0.94rem;
}
.receipt-loc {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}
.receipt-goal {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.receipt-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.receipt-metrics > div {
  padding: 10px 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
}
.receipt-metrics .r-now {
  background: rgba(46, 255, 122, 0.08);
  border: 1px solid rgba(46, 255, 122, 0.3);
}
.r-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.r-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.receipt-metrics .r-now .r-num {
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(46, 255, 122, 0.3);
}
.receipt-quote {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--green-light);
  background: rgba(46, 255, 122, 0.04);
  font-style: italic;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.receipt-foot {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.receipts-foot {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-top: 12px;
  letter-spacing: 0.02em;
  background: rgba(46, 255, 122, 0.04);
  padding: 14px 18px;
  border-left: 2px solid var(--green-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ====
   COMPOUND CARDS inventory (in social section)
==== */
.cards-inventory {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.cards-label {
  color: var(--purple-light) !important;
  margin: 0 0 8px;
}
.cards-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 18px;
}
.cards-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 4px 14px;
  scroll-snap-type: x mandatory;
}
.cards-row::-webkit-scrollbar {
  height: 6px;
}
.cards-row::-webkit-scrollbar-thumb {
  background: rgba(185, 92, 255, 0.3);
  border-radius: 3px;
}
.card-mock {
  flex: 0 0 180px;
  height: 260px;
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  cursor: pointer;
  transition:
  transform 0.22s ease,
  box-shadow 0.22s;
  font-family: var(--f-display);
  background: linear-gradient(135deg, #1a1a2a, var(--bg-wedge));
  border: 2px solid #2a2e42;
}
.card-mock:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.card-mock.card-uncommon {
  border-color: var(--green-light);
  background: linear-gradient(
  135deg,
  rgba(46, 255, 122, 0.18),
  var(--bg-wedge)
  );
  box-shadow: 0 0 18px rgba(46, 255, 122, 0.25);
}
.card-mock.card-epic {
  border-color: var(--blue-light);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), var(--bg-wedge));
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.3);
}
.card-mock.card-rare {
  border-color: var(--accent-warm);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), var(--bg-wedge));
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.35);
}
.card-glyph {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
}
.card-rarity {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.card-lift {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
}
.card-num {
  font-weight: 800;
  font-size: 2rem;
  color: white;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.card-date {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}
.card-footer {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  margin-top: 4px;
}
.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
  115deg,
  transparent 35%,
  rgba(255, 255, 255, 0.2) 48%,
  transparent 60%
  );
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 0.6s ease;
}
.card-mock:hover .card-shine {
  transform: translateX(100%);
}
.cards-note {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 6px 0 0;
  line-height: 1.5;
}
.cards-note strong {
  color: var(--purple-light);
}

/* ====
   ECCENTRYX CUSTOM LOGO sizing in nav + sidebar
==== */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.4));
}
.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.sidebar-brand-mark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.4));
}

/* ====
   FOOTER SOCIALS strip
==== */
.footer-socials {
  list-style: none;
  padding: 0;
  margin: 18px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.footer-socials li {
  margin: 0;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transition:
  color 0.18s,
  border-color 0.18s,
  background 0.18s,
  transform 0.18s;
}
.footer-socials a:hover {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
  background: rgba(96, 165, 250, 0.06);
  transform: translateY(-1px);
}
.footer-socials-placeholder a {
  cursor: default;
  opacity: 0.62;
  pointer-events: none;
}
.footer-socials-placeholder a:hover {
  color: var(--text-muted);
  border-color: var(--border-bright);
  background: rgba(255, 255, 255, 0.04);
  transform: none;
}
.footer-socials svg {
  width: 16px;
  height: 16px;
}
.footer-disclaimer {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  display: block;
  margin-top: 4px;
}

/* ====
   INTEGRATIONS section
==== */
.section-integrations {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.04), transparent 60%), var(--bg);
}
.integ-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0;
}
@media (max-width: 1024px) {
  .integ-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .integ-grid {
  grid-template-columns: 1fr;
  }
}
.integ-tile {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.04),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s,
  box-shadow 0.18s;
  position: relative;
}
.integ-tile:hover {
  border-color: rgba(96, 165, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.12);
}
.integ-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.integ-glyph {
  font-size: 1.6rem;
  color: var(--blue-light);
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.35);
}
.integ-status {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 181, 71, 0.1);
  border: 1px solid rgba(255, 181, 71, 0.3);
  color: var(--blue-light);
}
.integ-status.live {
  background: rgba(46, 255, 122, 0.1);
  border-color: rgba(46, 255, 122, 0.3);
  color: var(--green-light);
}
.integ-tile h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.integ-tile p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.integ-foot {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(96, 165, 250, 0.04);
  border-left: 2px solid var(--accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ====
   Local session board tile
==== */
.tile-arena {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.06),
  rgba(255, 255, 255, 0)
  );
  border-color: rgba(96, 165, 250, 0.2);
}
.arena-blurb {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.arena-board {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arena-board li {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.84rem;
}
.arena-board .ar-rank {
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.arena-board .ar-rank.arena-1 {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.arena-board .ar-rank.arena-2 {
  color: #c0c0c0;
}
.arena-board .ar-rank.arena-3 {
  color: #cd7f32;
}
.arena-board .ar-handle {
  color: var(--text);
}
.arena-board .ar-vol {
  color: var(--accent-warm);
  font-weight: 700;
}
.arena-board .ar-prs {
  color: var(--green-light);
  font-size: 0.78rem;
}
.arena-board li:nth-child(1) {
  background: rgba(255, 215, 0, 0.06);
  border-left-color: #ffd700;
}
.arena-board li:nth-child(2) {
  background: rgba(192, 192, 192, 0.04);
  border-left-color: #c0c0c0;
}
.arena-board li:nth-child(3) {
  background: rgba(205, 127, 50, 0.04);
  border-left-color: #cd7f32;
}
.arena-board li.arena-you {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), transparent);
  border-left-color: var(--accent-warm);
}
.arena-board li.arena-you .ar-handle {
  color: var(--accent-warm);
  font-weight: 700;
}
.arena-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.arena-join {
  flex: 1;
  min-width: 200px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
}
.arena-meta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* ====
   TODAY WIDGET (sticky banner, visible on non-home pages)
==== */
.today-widget {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.08),
  rgba(7, 7, 10, 0.92) 60%
  );
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 60px;
  z-index: var(--z-base);
  font-family: var(--f-mono);
  flex-wrap: wrap;
}
body[data-current-page]:not([data-current-page="home"]) .today-widget {
  display: flex;
}
body.tw-dismissed .today-widget {
  display: none !important;
}
.tw-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 70px;
}
.tw-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tw-value {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tw-day .tw-value,
.tw-streak .tw-value {
  color: var(--accent-warm);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.tw-phase .tw-value {
  color: var(--green-light);
}
.tw-recovery .tw-value {
  color: var(--blue-light);
}
.tw-meta {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.tw-cta {
  margin-left: auto;
  padding: 6px 12px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  color: var(--accent-warm);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.tw-cta:hover {
  background: rgba(96, 165, 250, 0.2);
}
.tw-dismiss {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.tw-dismiss:hover {
  color: var(--text);
}
@media (max-width: 480px) {
  .today-widget {
  gap: 10px;
  padding: 8px 12px;
  }
  .tw-cell {
  min-width: 60px;
  }
  .tw-value {
  font-size: 0.86rem;
  }
}

/* ====
   ONBOARDING TOUR (overlay + spotlight + card)
==== */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  pointer-events: none;
}
.onboard-overlay.active {
  display: block;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: onboardFade 0.3s ease-out;
}
@keyframes onboardFade {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}
.onboard-spotlight {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow:
  0 0 0 4px var(--accent-warm),
  0 0 0 10000px rgba(0, 0, 0, 0.78);
  pointer-events: none;
  transition: top 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.onboard-card {
  position: absolute;
  width: min(420px, calc(100vw - 32px));
  padding: 24px 26px;
  background: rgba(7, 7, 10, 0.98);
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius-lg);
  box-shadow:
  0 24px 60px rgba(0, 0, 0, 0.6),
  0 0 30px rgba(96, 165, 250, 0.3);
  transition: top 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.onboard-step {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  margin: 0 0 8px;
}
.onboard-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.onboard-body {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 16px;
  line-height: 1.55;
}
.onboard-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.onboard-skip {
  margin-right: auto;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px 4px;
  letter-spacing: 0.04em;
}
.onboard-skip:hover {
  color: var(--text);
}
.onboard-prev {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.84rem;
  cursor: pointer;
}
.onboard-prev:hover {
  color: var(--text);
  border-color: var(--text);
}
.onboard-next {
  padding: 9px 18px;
  font-size: 0.92rem;
}

/* ====
   MOVEMENT QUALITY STARS + MARGINALIA notes (tracker)
==== */
.tracker-row-quality {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: end;
}
@media (max-width: 480px) {
  .tracker-row-quality {
  grid-template-columns: 1fr;
  }
}
.tq-label {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  gap: 6px;
}
.tq-note input {
  margin-top: 6px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.94rem;
  outline: none;
  width: 100%;
}
.tq-note input:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 2px rgba(46, 255, 122, 0.18);
}
.quality-stars {
  display: inline-flex;
  gap: 4px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  align-self: start;
}
.qs-star {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition:
  color 0.12s,
  transform 0.12s;
}
.qs-star:hover {
  color: var(--blue-light);
  transform: scale(1.15);
}
.qs-star.filled {
  color: var(--blue-light);
  text-shadow: 0 0 8px rgba(255, 181, 71, 0.5);
}
.qs-star.filled::before {
  content: "\2605";
}
.qs-star:not(.filled)::before {
  content: "\2606";
}
.qs-star::before {
  display: inline-block;
}
/* Hide actual character; the ::before substitutes */
.qs-star {
  font-size: 1.5rem;
  color: transparent;
}
.qs-star.filled::before {
  color: var(--blue-light);
}
.qs-star:not(.filled)::before {
  color: var(--text-dim);
}
.qs-star:hover::before {
  color: var(--blue-light);
}

/* History row note display */
.tracker-history-list li .th-note {
  grid-column: 2 / -1;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  width: 100%;
}
.tracker-history-list li .th-stars {
  font-family: var(--f-display);
  font-size: 0.78rem;
  color: var(--blue-light);
  letter-spacing: 0.04em;
}
.tracker-history-list li.has-note {
  grid-template-columns: 90px 1.4fr 0.8fr 0.6fr 0.6fr 60px;
  grid-template-rows: auto auto;
}
@media (max-width: 480px) {
  .tracker-history-list li.has-note {
  grid-template-columns: 60px 1fr 0.6fr 0.6fr;
  }
}

/* Hidden canvas for Compound Receipt */
.receipt-canvas-hidden {
  display: none;
  position: absolute;
  left: -9999px;
}

/* ====
   COMPOUND CALENDAR — year-view heatmap on home
==== */
.cal-widget {
  margin: 30px auto 26px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  max-width: 1024px;
  text-align: left;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 2.15s forwards;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.cal-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  margin: 0;
  text-transform: uppercase;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-cell {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cal-cell-sk {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.cal-cell-c1 {
  background: rgba(46, 255, 122, 0.2);
  border-color: rgba(46, 255, 122, 0.3);
}
.cal-cell-c2 {
  background: rgba(46, 255, 122, 0.45);
  border-color: rgba(46, 255, 122, 0.5);
}
.cal-cell-c3 {
  background: rgba(255, 181, 71, 0.5);
  border-color: rgba(255, 181, 71, 0.6);
}
.cal-cell-c4 {
  background: rgba(96, 165, 250, 0.55);
  border-color: rgba(96, 165, 250, 0.65);
}
.cal-cell-pr {
  background: rgba(96, 165, 250, 0.85);
  border-color: var(--accent-warm);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(53, 1fr);
  gap: 3px;
  padding: 6px 0;
  overflow-x: auto;
  max-width: 100%;
}
.cal-grid > div {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
}
.cal-grid > div > span {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
  transform 0.12s,
  box-shadow 0.12s;
}
.cal-grid > div > span[data-l="future"] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.04);
  cursor: default;
}
.cal-grid > div > span[data-l="sk"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.cal-grid > div > span[data-l="c1"] {
  background: rgba(46, 255, 122, 0.2);
  border-color: rgba(46, 255, 122, 0.3);
}
.cal-grid > div > span[data-l="c2"] {
  background: rgba(46, 255, 122, 0.45);
  border-color: rgba(46, 255, 122, 0.5);
}
.cal-grid > div > span[data-l="c3"] {
  background: rgba(255, 181, 71, 0.5);
  border-color: rgba(255, 181, 71, 0.6);
}
.cal-grid > div > span[data-l="c4"] {
  background: rgba(96, 165, 250, 0.55);
  border-color: rgba(96, 165, 250, 0.65);
}
.cal-grid > div > span[data-l="pr"] {
  background: rgba(96, 165, 250, 0.85);
  border-color: var(--accent-warm);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}
.cal-grid > div > span:hover {
  transform: scale(1.6);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  z-index: 2;
  position: relative;
}
.cal-foot {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 10px 0 0;
}

/* ====
   QUEST LOG tile (Inside the membership)
==== */
.tile-quests {
  background: linear-gradient(
  180deg,
  rgba(255, 181, 71, 0.05),
  rgba(255, 255, 255, 0)
  );
}
.quest-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quest-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.q-name {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}
.q-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.q-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-light), var(--accent-warm));
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quest-item[data-done="true"] .q-fill {
  background: linear-gradient(90deg, var(--green-glow), var(--green-light));
}
.q-meta {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.quest-foot {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 6px 0 0;
}

/* ====
   SKIP DAY button + modal
==== */
.tracker-skip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.9rem;
  cursor: pointer;
  transition:
  color 0.18s,
  border-color 0.18s,
  background 0.18s;
}
.skip-btn:hover {
  color: var(--text);
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.skip-btn svg {
  width: 16px;
  height: 16px;
}
.skip-help {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.skip-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.skip-modal.open {
  display: flex;
  animation: cmdkFade 0.2s ease-out;
}
.skip-modal-inner {
  width: min(520px, 100%);
  padding: 26px 28px;
  background: rgba(7, 7, 10, 0.97);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.skip-modal-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.skip-modal-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 18px;
  line-height: 1.5;
}
.skip-reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .skip-reason-grid {
  grid-template-columns: 1fr;
  }
}
.skip-reason {
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition:
  background 0.15s,
  border-color 0.15s;
}
.skip-reason:hover {
  background: rgba(96, 165, 250, 0.06);
  border-color: var(--accent-warm);
}
.skip-cancel {
  display: block;
  margin: 4px auto 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.84rem;
  padding: 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.skip-cancel:hover {
  color: var(--text);
}

/* ====
   DOCTRINE CITATIONS (footnotes)
==== */
sup.cite {
  font-family: var(--f-mono);
  font-size: 0.66em;
  color: var(--purple-light);
  margin-left: 1px;
}
sup.cite a {
  color: inherit;
  text-decoration: none;
  padding: 1px 3px;
  border-radius: 2px;
  transition:
  background 0.12s,
  color 0.12s;
}
sup.cite a:hover {
  background: rgba(185, 92, 255, 0.15);
  color: var(--text);
}
.doctrine-citations {
  margin: 28px 0 22px;
  padding: 20px 24px;
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(185, 92, 255, 0.2);
  border-radius: var(--radius-lg);
}
.dc-label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--purple-light);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.dc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-list li {
  padding: 9px 12px 9px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--purple-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.dc-list li strong {
  color: var(--purple-light);
  margin-right: 6px;
  font-family: var(--f-mono);
}
.dc-list li em {
  color: var(--text);
  font-style: italic;
}
.dc-list li:target {
  background: rgba(185, 92, 255, 0.08);
  animation: citePulse 1.5s ease-out 1;
}
@keyframes citePulse {
  0% {
  background: rgba(185, 92, 255, 0.3);
  }
  100% {
  background: rgba(185, 92, 255, 0.08);
  }
}
.dc-foot {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}
.dc-foot a {
  color: var(--purple-light);
}

/* ====
   ACCESSIBILITY — focus-visible rings everywhere
==== */
:focus-visible {
  /* MED-3: use cyan accent (var(--accent-primary), ~8.5:1) not amber (--red-light, ~3.8:1) */
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.choose-card:focus-visible,
.atlas-card:focus-visible,
.heritage-card:focus-visible,
.tool-card:focus-visible,
.privacy-tile:focus-visible,
.lab-tile:focus-visible,
.floor-tile:focus-visible,
.case-tab:focus-visible,
.compare-tab:focus-visible,
.heritage-tab:focus-visible,
.archetype-tab:focus-visible,
.atlas-filter:focus-visible,
.seg-btn:focus-visible,
.quiz-opt:focus-visible,
.quick-tap:focus-visible,
.tool-preview-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}
/* Skip-to-main link for keyboard users (hidden until focused) */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  background: var(--accent-primary);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius);
  z-index: var(--z-floating);
  font-family: var(--f-display);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.18s;
}
.skip-link:focus {
  top: 16px;
}

/* ====
   MOBILE / RESPONSIVE FIXES
==== */
@media (max-width: 480px) {
  html,
  body {
  max-width: 100%;
  overflow-x: hidden;
  }

  .hero {
  padding-left: 14px;
  padding-right: 14px;
  }

  .hero-inner,
  .hero .lead-big,
  .hero-live {
  max-width: 100%;
  }

  .hero .lead-big {
  font-size: 1.08rem;
  overflow-wrap: anywhere;
  }

  .hero-live {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  }

  .sticky-mobile-cta {
  left: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100vw - 24px);
  gap: 10px;
  overflow: hidden;
  }

  .smc-line,
  .smc-button {
  min-width: 0;
  }

  .smc-button {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
}

/* Sidebar: ensure body doesn't double-pad below desktop breakpoint */
@media (max-width: 1024px) {
  body {
  padding-left: 0 !important;
  }
  .topnav {
  left: 0 !important;
  }
  .day-ticker {
  left: 50% !important;
  }
}

/* Hero wordmark scale on small screens */
@media (max-width: 480px) {
  .home-wordmark {
  font-size: clamp(2.2rem, calc(1.26rem + 4.69vw), 4.8rem);
  letter-spacing: -0.05em;
  }
  .home-overline {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  }
  .home-subtitle {
  font-size: 0.96rem;
  }
  .home-meta {
  gap: 22px;
  }
  .hm-num {
  font-size: 1.4rem;
  }
  .hm-label {
  font-size: 0.62rem;
  }
}

/* Topnav: hide most links on tablets, keep brand + CTA + theme switch */
@media (max-width: 1024px) {
  .navlinks li:not(:last-child):not(.theme-switch-li) {
  display: none;
  }
  .navlinks li:nth-last-child(2) {
  display: list-item;
  }
}
@media (max-width: 480px) {
  .topnav {
  padding: 12px 14px 12px 64px;
  } /* leave room for sidebar hamburger */
  .brand-status {
  display: none;
  }
}

/* Inside-the-membership tile grid: stack at narrower breakpoints */
@media (max-width: 1024px) {
  .inside-grid {
  grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .inside-grid {
  grid-template-columns: 1fr !important;
  }
}

/* Settings drawer narrower on small screens */
@media (max-width: 480px) {
  .settings-drawer {
  left: 12px !important;
  right: 12px !important;
  width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
  }
  .settings-drawer.open {
  transform: none !important;
  }
  .settings-toggle {
  top: 56px;
  right: 12px;
  }
}

/* Page pager stacks on mobile */
@media (max-width: 480px) {
  .page-pager {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 24px 16px 100px;
  }
  .pager-prev,
  .pager-next {
  padding: 14px 18px;
  }
}

/* Choose-grid spacing on mobile */
@media (max-width: 480px) {
  .choose-grid {
  gap: 10px;
  }
  .choose-card {
  padding: 18px 16px 22px;
  }
  .choose-card h3 {
  font-size: 1.04rem;
  }
  .choose-card p {
  font-size: 0.86rem;
  }
}

/* Compound Tools card actions stack on mobile */
@media (max-width: 480px) {
  .tool-actions {
  flex-wrap: wrap;
  }
  .tool-actions .btn,
  .tool-actions .tool-preview-btn {
  flex: 1 1 auto;
  min-width: 0;
  }
}

/* ====
   TOOL CARD interactive previews (Compound Tools section)
==== */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.tool-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}
.tool-preview-btn {
  background: transparent;
  border: 1px dashed var(--border-bright);
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.86rem;
  cursor: pointer;
  transition:
  color 0.18s,
  border-color 0.18s,
  background 0.18s;
}
.tool-preview-btn:hover {
  color: var(--blue-light);
  border-color: var(--blue-light);
  background: rgba(96, 165, 250, 0.04);
}
.tool-preview-btn[aria-expanded="true"] {
  color: var(--blue-light);
  border-color: var(--blue-light);
  background: rgba(96, 165, 250, 0.08);
}
.tool-preview {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(96, 165, 250, 0.04);
  border: 1px dashed rgba(96, 165, 250, 0.3);
  border-radius: var(--radius);
  animation: toolPreviewIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes toolPreviewIn {
  from {
  opacity: 0;
  transform: translateY(-6px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
.tool-preview-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.tool-preview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tool-preview-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.84rem;
}
.tp-rank {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.78rem;
}
.tp-name {
  color: var(--text);
}
.tp-pct {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--blue-light);
  font-weight: 700;
}
.tool-preview-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 8px 0 0;
  line-height: 1.5;
  font-style: italic;
}
.tool-preview-note a {
  color: var(--blue-light);
  text-decoration: none;
  border-bottom: 1px dashed;
  transition: color 0.18s, border-color 0.18s;
}
.tool-preview-note a:hover {
  color: var(--text);
}

.tp-diag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.tp-diag-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.82rem;
}
.tp-diag-row > span:first-child {
  color: var(--text-dim);
}
.tp-diag-val {
  color: var(--text);
  font-weight: 700;
}
.tp-diag-cause {
  background: rgba(96, 165, 250, 0.08);
  border-left: 2px solid var(--blue-light);
}
.tp-diag-fix {
  background: rgba(46, 255, 122, 0.06);
  border-left: 2px solid var(--green-light);
}
.tp-warn {
  color: var(--accent-warm) !important;
}

.tp-plate-line {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.tp-plate-line strong {
  color: var(--blue-light);
}

.tp-pr-mock {
  padding: 16px 18px;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.2),
  rgba(0, 0, 0, 0.3)
  );
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 6px;
}
.tp-pr-brand {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 0.86rem;
  color: var(--accent-warm);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.tp-pr-day {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin: 2px 0 10px;
}
.tp-pr-lift {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.04em;
}
.tp-pr-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--accent-warm);
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.5);
  margin: 4px 0;
  letter-spacing: -0.02em;
}
.tp-pr-delta {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--green-light);
}

/* ====
   TOAST NOTIFICATION SYSTEM (top-right, queued, auto-dismiss)
==== */
.toast-container {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .toast-container {
  top: 72px;
  right: 12px;
  left: 12px;
  max-width: none;
  }
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(7, 7, 10, 0.96);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--text-muted);
  box-shadow:
  0 12px 32px rgba(0, 0, 0, 0.5),
  0 0 22px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--f-display);
  font-size: 0.92rem;
  color: var(--text);
  animation: toastIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.toast.dismiss {
  animation: toastOut 0.32s ease-in forwards;
}
@keyframes toastIn {
  from {
  opacity: 0;
  transform: translateX(100%);
  }
  to {
  opacity: 1;
  transform: translateX(0);
  }
}
@keyframes toastOut {
  from {
  opacity: 1;
  transform: translateX(0);
  }
  to {
  opacity: 0;
  transform: translateX(100%);
  }
}
.toast.toast-info {
  border-left-color: var(--blue-light);
}
.toast.toast-success {
  border-left-color: var(--green-light);
}
.toast.toast-warn {
  border-left-color: var(--blue-light);
}
.toast.toast-error {
  border-left-color: var(--accent-warm);
}
.toast-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 0.78rem;
  color: white;
}
.toast-info .toast-glyph {
  background: var(--blue-light);
}
.toast-success .toast-glyph {
  background: var(--green-light);
}
.toast-warn .toast-glyph {
  background: var(--blue-light);
  color: #1a1300;
}
.toast-error .toast-glyph {
  background: var(--accent-warm);
}
.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toast-title {
  font-weight: 700;
}
.toast-msg {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
.toast-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  align-self: start;
}
.toast-close:hover {
  color: var(--text);
}
.toast-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
  transform-origin: left center;
  animation: toastBar var(--toast-dur, 4500ms) linear forwards;
}
.toast-info .toast-progress {
  color: var(--blue-light);
}
.toast-success .toast-progress {
  color: var(--green-light);
}
.toast-warn .toast-progress {
  color: var(--blue-light);
}
.toast-error .toast-progress {
  color: var(--accent-warm);
}
@keyframes toastBar {
  from {
  transform: scaleX(1);
  }
  to {
  transform: scaleX(0);
  }
}

/* ====
   WORKOUT SESSION MODE (full-screen modal over tracker)
==== */
.session-mode {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 10, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
}
.session-mode.open {
  display: flex;
  animation: sessionFade 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.session-mode [data-session-tip] {
  position: relative;
}
.session-mode [data-session-tip]::after {
  content: attr(data-session-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: var(--z-floating);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 8px;
  background:
  linear-gradient(180deg, rgba(8, 18, 28, 0.98), rgba(5, 8, 12, 0.98)),
  rgba(0, 0, 0, 0.92);
  box-shadow:
  0 14px 34px rgba(0, 0, 0, 0.45),
  0 0 18px rgba(96, 165, 250, 0.12);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 0;
  overflow-wrap: normal;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  transform: translate(-50%, 4px);
  transition:
  opacity 0.14s ease,
  transform 0.14s ease;
  white-space: normal;
}
.session-mode [data-session-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: var(--z-floating);
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(96, 165, 250, 0.34);
  border-bottom: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(5, 8, 12, 0.98);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) rotate(45deg);
  transition:
  opacity 0.14s ease,
  transform 0.14s ease;
}
.session-mode [data-session-tip]:hover::after,
.session-mode [data-session-tip]:hover::before,
.session-mode [data-session-tip]:focus-visible::after,
.session-mode [data-session-tip]:focus-visible::before,
.session-mode [data-session-tip]:focus-within::after,
.session-mode [data-session-tip]:focus-within::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.session-mode [data-session-tip]:hover::before,
.session-mode [data-session-tip]:focus-visible::before,
.session-mode [data-session-tip]:focus-within::before {
  transform: translate(-50%, 0) rotate(45deg);
}
.session-mode [data-session-tip-side="right"]::after {
  left: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  transform: translate(4px, -50%);
}
.session-mode [data-session-tip-side="right"]::before {
  left: calc(100% + 5px);
  top: 50%;
  bottom: auto;
  transform: translate(4px, -50%) rotate(135deg);
}
.session-mode [data-session-tip-side="right"]:hover::after,
.session-mode [data-session-tip-side="right"]:focus-visible::after,
.session-mode [data-session-tip-side="right"]:focus-within::after {
  transform: translate(0, -50%);
}
.session-mode [data-session-tip-side="right"]:hover::before,
.session-mode [data-session-tip-side="right"]:focus-visible::before,
.session-mode [data-session-tip-side="right"]:focus-within::before {
  transform: translate(0, -50%) rotate(135deg);
}
.session-mode [data-session-tip-side="left"]::after {
  right: calc(100% + 10px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-4px, -50%);
}
.session-mode [data-session-tip-side="left"]::before {
  right: calc(100% + 5px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-4px, -50%) rotate(-45deg);
}
.session-mode [data-session-tip-side="left"]:hover::after,
.session-mode [data-session-tip-side="left"]:focus-visible::after,
.session-mode [data-session-tip-side="left"]:focus-within::after {
  transform: translate(0, -50%);
}
.session-mode [data-session-tip-side="left"]:hover::before,
.session-mode [data-session-tip-side="left"]:focus-visible::before,
.session-mode [data-session-tip-side="left"]:focus-within::before {
  transform: translate(0, -50%) rotate(-45deg);
}
.session-mode [data-session-tip-side="top"]::after {
  bottom: calc(100% + 10px);
}
@media (max-width: 480px) {
  .session-mode [data-session-tip]::after {
  max-width: min(240px, calc(100vw - 28px));
  font-size: 0.74rem;
  }
  .session-mode [data-session-tip-side="left"]::after,
  .session-mode [data-session-tip-side="right"]::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  }
  .session-mode [data-session-tip-side="left"]:hover::after,
  .session-mode [data-session-tip-side="right"]:hover::after,
  .session-mode [data-session-tip-side="left"]:focus-visible::after,
  .session-mode [data-session-tip-side="right"]:focus-visible::after,
  .session-mode [data-session-tip-side="left"]:focus-within::after,
  .session-mode [data-session-tip-side="right"]:focus-within::after {
  transform: translate(-50%, 0);
  }
}
@keyframes sessionFade {
  from {
  opacity: 0;
  transform: scale(0.98);
  }
  to {
  opacity: 1;
  transform: scale(1);
  }
}
.fatigue-heatmap {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, hsl(0, 0%, 90%), hsl(0, 0%, 90%));
  transition: background 1s ease-in-out;
  flex-shrink: 0;
}

.fatigue-heatmap.active-fatigue {
  background: linear-gradient(90deg, hsl(359, 85%, 55%), hsl(15, 90%, 60%));
  box-shadow: 0 0 12px rgba(230, 50, 50, 0.4);
}

.metabolic-indicator {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: hsl(359, 85%, 55%);
  margin-top: 4px;
  text-align: center;
  transition: color 0.5s ease-in-out;
}

.metabolic-indicator.ampk {
  color: hsl(200, 90%, 55%);
}

.session-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.06),
  rgba(255, 255, 255, 0)
  );
}
.session-head-left,
.session-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.session-head-right {
  justify-content: flex-end;
}
.session-head-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.session-clock-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.session-clock-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--green-light);
  text-shadow: 0 0 14px rgba(46, 255, 122, 0.4);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.session-close {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.45rem;
  cursor: pointer;
  transition:
  color 0.15s,
  border-color 0.15s;
}
.session-close:hover {
  color: var(--text);
  border-color: var(--text);
}
.session-state-tag {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--green-light);
  padding: 4px 10px;
  background: rgba(46, 255, 122, 0.1);
  border: 1px solid rgba(46, 255, 122, 0.3);
  border-radius: 999px;
}
.session-state-tag.paused {
  color: var(--blue-light);
  border-color: rgba(255, 181, 71, 0.35);
  background: rgba(255, 181, 71, 0.08);
}
.session-finish {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  transition:
  transform 0.15s,
  box-shadow 0.15s;
}
.session-finish:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.35);
}
.session-body {
  flex: 1;
  display: grid;
  grid-template-columns:
  minmax(220px, 0.9fr) minmax(260px, 1.05fr) minmax(300px, 1.15fr)
  minmax(260px, 1fr);
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
}
@media (max-width: 1024px) {
  .session-body {
  grid-template-columns: 1fr;
  }
}
.session-phone-nav {
  display: none;
}
.session-phone-nav-btn {
  min-width: 0;
}
.session-pane {
  padding: 22px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.025),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.session-pane-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--green-light);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.session-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.session-stat {
  padding: 12px 14px;
  background: rgba(46, 255, 122, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ss-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.ss-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--green-light);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.session-cue {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(46, 255, 122, 0.04);
  border-left: 2px solid var(--green-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  font-style: italic;
}
.session-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.session-plan-head {
  display: grid;
  gap: 5px;
}
.session-plan-head strong {
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1rem;
}
.session-plan-head span,
.session-atlas-cue {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.session-plan-why {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  line-height: 1.45;
}
.session-plan-days {
  list-style: none;
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 1px 0 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.session-plan-day-tab {
  display: grid;
  grid-template-columns: auto;
  gap: 2px;
  min-width: 74px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.session-plan-day-tab:hover,
.session-plan-day-tab[aria-selected="true"] {
  border-color: rgba(46, 255, 122, 0.5);
  background: rgba(46, 255, 122, 0.1);
  color: var(--text);
}
.session-plan-day-tab[aria-selected="true"] {
  border-color: var(--blue-glow);
  box-shadow: inset 0 0 0 1px var(--blue-glow), 0 0 12px rgba(96, 165, 250, 0.22);
  font-weight: 700;
}
.session-plan-day-tab[aria-current="date"] {
  border-color: rgba(96, 165, 250, 0.46);
}
.session-plan-day-code {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
}
.session-plan-day-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.session-plan-phase-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.session-plan-phase-jump {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-left-width: 2px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.032);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.session-plan-phase-jump:hover,
.session-plan-phase-jump:focus-visible,
.session-plan-phase-jump[aria-pressed="true"] {
  border-color: rgba(46, 255, 122, 0.48);
  background: rgba(46, 255, 122, 0.075);
  color: var(--text);
}
.session-plan-phase-jump[aria-pressed="true"] {
  border-color: var(--blue-glow);
  box-shadow: inset 0 0 0 1px var(--blue-glow), 0 0 12px rgba(96, 165, 250, 0.2);
}
.session-plan-phase-jump:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.session-plan-phase-jump-label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.session-plan-phase-jump strong {
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.session-plan-phase-jump small {
  min-width: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-plan-phase-jump-func {
  border-left-color: rgba(96, 165, 250, 0.7);
}
.session-plan-phase-jump-func .session-plan-phase-jump-label {
  color: var(--blue-light);
}
.session-plan-phase-jump-lift {
  border-left-color: rgba(255, 203, 107, 0.72);
}
.session-plan-phase-jump-lift .session-plan-phase-jump-label {
  color: var(--amber);
}
.session-plan-phase-jump-rec {
  border-left-color: rgba(46, 255, 122, 0.72);
}
.session-plan-phase-jump-rec .session-plan-phase-jump-label {
  color: var(--green-light);
}
.session-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 48vh;
  overflow-y: auto;
}
.session-plan-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(46, 255, 122, 0.35);
  border-radius: var(--radius);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.session-plan-item:hover,
.session-plan-item[aria-pressed="true"] {
  border-color: rgba(46, 255, 122, 0.45);
  background: rgba(46, 255, 122, 0.08);
}
.session-plan-item[aria-pressed="true"] {
  border-color: var(--blue-glow);
  box-shadow: inset 0 0 0 1px var(--blue-glow);
}
.session-plan-day {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--green-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.session-plan-phase {
  justify-self: start;
  min-width: 42px;
  padding: 3px 7px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(120, 200, 255, 0.07);
}
.session-plan-phase-func {
  border-color: rgba(96, 165, 250, 0.34);
  color: var(--blue-light);
  background: rgba(96, 165, 250, 0.09);
}
.session-plan-phase-lift {
  border-color: rgba(255, 203, 107, 0.32);
  color: var(--amber);
  background: rgba(255, 203, 107, 0.08);
}
.session-plan-phase-rec {
  border-color: rgba(46, 255, 122, 0.34);
  color: var(--green-light);
  background: rgba(46, 255, 122, 0.09);
}
.session-plan-name {
  min-width: 0;
  font-family: var(--f-display);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-plan-dose {
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}
.session-plan-progress {
  min-width: 42px;
  padding: 4px 7px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  color: var(--blue-light);
  background: rgba(96, 165, 250, 0.055);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.session-plan-progress.done {
  border-color: rgba(46, 255, 122, 0.42);
  color: var(--green-light);
  background: rgba(46, 255, 122, 0.1);
}

.session-atlas-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: var(--radius);
  background:
  linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.045),
    rgba(46, 255, 122, 0.018)
  ),
  rgba(255, 255, 255, 0.018);
}
.session-atlas-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.session-atlas-card-head span {
  color: var(--blue-light);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}
.session-atlas-card-head strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.92rem;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-atlas-cue {
  margin: 0;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.04);
  border-left: 2px solid var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.session-atlas-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}
.session-atlas-details dt {
  color: var(--green-light);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.session-atlas-details dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.session-swap-rail {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(46, 255, 122, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.04),
  rgba(96, 165, 250, 0.025)
  );
}
.session-swap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  color: var(--text-dim);
}
.session-swap-head span {
  color: var(--green-light);
  text-transform: uppercase;
}
.session-swap-head strong {
  color: var(--blue-light);
  font-size: 0.64rem;
  text-align: right;
}
.session-swap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.session-swap-btn {
  min-height: 32px;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 7px;
  background: rgba(96, 165, 250, 0.055);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
  transition:
  border-color 0.15s,
  background 0.15s,
  transform 0.15s;
}
.session-swap-btn:hover,
.session-swap-btn:focus-visible {
  border-color: var(--green-light);
  background: rgba(46, 255, 122, 0.1);
  transform: translateY(-1px);
  outline: none;
}
.session-swap-empty,
.session-swap-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.35;
}
.session-swap-note {
  color: var(--text-muted);
}
.session-swap-search {
  display: grid;
  gap: 7px;
}
.session-swap-search label {
  display: grid;
  gap: 5px;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.session-swap-search input {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.26);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0;
}
.session-swap-search input:focus-visible {
  border-color: rgba(96, 165, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  outline: none;
}
.session-swap-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.session-swap-result-btn {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.session-swap-result-btn:hover,
.session-swap-result-btn:focus-visible {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(96, 165, 250, 0.08);
  outline: none;
}
.session-swap-result-btn span {
  min-width: 0;
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-swap-result-btn small {
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .session-plan-phase-strip {
  grid-template-columns: 1fr;
  }
  .session-swap-results {
  grid-template-columns: 1fr;
  }
}
.session-plan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.session-mini-btn,
.session-mini-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border-bright);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  cursor: pointer;
}
.session-mini-btn:hover,
.session-mini-link:hover {
  color: var(--text);
  border-color: var(--green-light);
  background: rgba(46, 255, 122, 0.08);
}
.session-quick-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.session-active-target {
  position: sticky;
  top: -4px;
  z-index: var(--z-base);
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(46, 255, 122, 0.28);
  border-left: 2px solid var(--green-light);
  border-radius: var(--radius);
  background:
  linear-gradient(135deg, rgba(46, 255, 122, 0.09), rgba(96, 165, 250, 0.055)),
  rgba(4, 7, 12, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.session-active-target span {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
}
.session-active-target strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.session-active-target small {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.session-form-row {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 4px;
}
.session-form-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.session-form-row input,
.session-form-row select {
  margin-top: 4px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.96rem;
  outline: none;
}
.session-form-row input:focus,
.session-form-row select:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 2px rgba(46, 255, 122, 0.25);
}
.session-actions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
/* sessRepeat spans full width as its own row so the 4-column log/rest row stays intact */
.session-repeat {
  grid-column: 1 / -1;
  font-size: 0.86rem;
}
.session-rest {
  padding: 10px 12px;
  font-size: 0.86rem;
}
.session-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.session-feed-list li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--green-glow);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-mono);
  font-size: 0.86rem;
  animation: feedRowIn 0.32s ease-out;
}
@keyframes feedRowIn {
  from {
  opacity: 0;
  transform: translateX(-6px);
  }
  to {
  opacity: 1;
  transform: translateX(0);
  }
}
.session-feed-list .sf-num {
  color: var(--text-dim);
  font-weight: 700;
  text-align: right;
}
.session-feed-list .sf-lift {
  color: var(--text);
}
.session-feed-list .sf-set {
  color: var(--green-light);
  font-weight: 700;
}

.session-start-btn {
  position: fixed;
  bottom: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--green-glow), var(--green-light));
  color: #001a08;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  box-shadow:
  0 0 22px rgba(46, 255, 122, 0.4),
  0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: var(--z-base);
  transition:
  transform 0.18s,
  box-shadow 0.18s;
}
.session-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(46, 255, 122, 0.6);
}
.session-start-btn svg {
  width: 16px;
  height: 16px;
}
/* Hide while session modal is open so it doesn't overlap with finish button */
body.session-active .session-start-btn {
  display: none;
}

.session-recap-panel {
  position: fixed;
  right: 18px;
  bottom: 88px;
  width: min(420px, calc(100vw - 32px));
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
  opacity 0.2s ease,
  transform 0.2s ease;
}

.session-recap-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.session-recap-card {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(46, 255, 174, 0.28);
  border-radius: 14px;
  background:
  linear-gradient(145deg, rgba(46, 255, 174, 0.1), rgba(96, 165, 250, 0.05)),
  rgba(5, 8, 16, 0.96);
  box-shadow:
  0 18px 50px rgba(0, 0, 0, 0.56),
  0 0 34px rgba(46, 255, 174, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.session-recap-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
}

.session-recap-close:hover {
  color: var(--text);
  border-color: rgba(46, 255, 174, 0.45);
}

.session-recap-kicker {
  margin: 0 0 7px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--green-light);
}

.session-recap-card h3 {
  margin: 0 32px 12px 0;
  font-size: 1.04rem;
}

.session-recap-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.session-recap-metric {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.session-recap-metric span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.session-recap-metric strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.session-recap-voices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}

.session-recap-voice {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.session-recap-voice.active,
.session-recap-voice:hover {
  color: #00110c;
  border-color: transparent;
  background: linear-gradient(135deg, var(--green-light), var(--blue-light));
}

.session-recap-copy {
  min-height: 64px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .session-recap-panel {
  left: 12px;
  right: 12px;
  bottom: 78px;
  width: auto;
  }
  .session-recap-metrics {
  grid-template-columns: repeat(2, 1fr);
  }
  .session-recap-voices {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .session-start-btn {
  bottom: 86px;
  left: 14px;
  }
}

/* ====
   WEIGHT-CLASS PROGRESSION widget (home page)
==== */
.weight-class-widget {
  margin: 36px auto 28px;
  padding: 22px 24px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.05),
  rgba(255, 255, 255, 0)
  );
  max-width: 480px;
  text-align: left;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 2.05s forwards;
}
.wc-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.wc-input-row {
  margin-bottom: 14px;
}
.wc-input-row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wc-input-row input {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 1.02rem;
  outline: none;
  width: 90px;
  text-align: center;
}
.wc-input-row input:focus {
  border-color: var(--blue-light);
}
.wc-unit {
  color: var(--blue-light);
  font-family: var(--f-mono);
  font-size: 0.78rem;
}
.wc-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .wc-tier-grid {
  grid-template-columns: 1fr;
  }
}
.wc-tier {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  border-left: 2px solid var(--blue-light);
}
.wc-tier-name {
  display: block;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--blue-light);
  margin-bottom: 6px;
}
.wc-tier-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.wc-tier-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  width: 0%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.wc-tier-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.wc-tier-target {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.wc-tier-mult {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.wc-foot {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 12px 0 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ====
   PAGE ROUTER — resilient visibility rules
   - Before JS routes: only home renders (failsafe)
   - After JS routes: only the active page renders
==== */
/* Failsafe: until body has been routed, hide non-home, show home */
body:not([data-current-page]) [data-page]:not([data-page="home"]) {
  display: none !important;
}
/* Routed state: hide non-active, show active */
body[data-current-page] [data-page]:not(.page-active) {
  display: none !important;
}
[data-page].page-active {
  animation: pageFadeIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes pageFadeIn {
  from {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  }
}

/* Body: lock scroll while page transition runs */
body.page-transitioning {
  overflow: hidden;
}

/* ====
   HOME INTRO — landing experience (wordmark + ambient + choose)
==== */
.home-intro {
  position: relative;
  min-height: calc(100svh - 60px);
  padding: 80px 24px 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
  radial-gradient(
    ellipse 90% 60% at 50% 30%,
    rgba(96, 165, 250, 0.2),
    transparent 70%
  ),
  radial-gradient(
    ellipse 80% 50% at 50% 100%,
    rgba(96, 165, 250, 0.1),
    transparent 60%
  ),
  var(--bg);
}
.ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}
.home-frame {
  position: relative;
  z-index: 2;
  max-width: 1024px;
  width: 100%;
  text-align: center;
}
.home-overline {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(46, 255, 122, 0.4);
  margin: 0 0 30px;
  text-transform: uppercase;
  opacity: 0;
  animation: overlineIn 0.6s ease-out forwards;
}
@keyframes overlineIn {
  from {
  opacity: 0;
  transform: translateY(-6px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

.home-wordmark {
  margin: 0 0 20px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 9.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  gap: 0.02em;
}
.wm-letter {
  display: inline-block;
  background: linear-gradient(
  135deg,
  var(--accent-primary),
  var(--accent-warm) 50%,
  var(--blue-light)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(96, 165, 250, 0.45);
  opacity: 0;
  transform: translateY(40px) scale(0.6);
  animation: wmLetterIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 0.08s + 0.3s);
}
@keyframes wmLetterIn {
  0% {
  opacity: 0;
  transform: translateY(40px) scale(0.6) rotateZ(-8deg);
  filter: blur(8px);
  }
  100% {
  opacity: 1;
  transform: translateY(0) scale(1) rotateZ(0);
  filter: blur(0);
  }
}
/* Replay trigger — when JS adds .wm-replay to the wordmark we suspend the
   animation and force a reflow; on the next frame the class is dropped and
   the wmLetterIn keyframe runs again from the top. */
.home-wordmark.wm-replay .wm-letter {
  animation: none !important;
  opacity: 0;
}
.home-subtitle {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--text);
  margin: 0 0 18px;
  font-weight: 500;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.2s forwards;
}
.home-rotator-line {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 38px;
  padding: 6px 16px;
  display: inline-block;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.06);
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.4s forwards;
}
@keyframes fadeUp {
  from {
  opacity: 0;
  transform: translateY(10px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

.choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 auto 44px;
  max-width: 1024px;
}
@media (max-width: 1024px) {
  .choose-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .choose-grid {
  grid-template-columns: 1fr;
  }
}
.choose-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 28px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: left;
  color: var(--text);
  transition:
  transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
  border-color 0.25s,
  box-shadow 0.25s,
  background 0.25s;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.6s forwards;
  animation-delay: calc(1.6s + var(--ci, 0) * 0.08s);
}
.choose-card:nth-child(1) {
  --ci: 0;
}
.choose-card:nth-child(2) {
  --ci: 1;
}
.choose-card:nth-child(3) {
  --ci: 2;
}
.choose-card:nth-child(4) {
  --ci: 3;
}
.choose-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-primary), transparent 50%);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: -1;
}
.choose-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-warm);
  box-shadow:
  0 16px 40px rgba(96, 165, 250, 0.2),
  0 0 32px rgba(96, 165, 250, 0.2);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.1),
  rgba(96, 165, 250, 0.02)
  );
}
.choose-demo:hover {
  border-color: var(--green-light);
  box-shadow: 0 16px 40px rgba(46, 255, 122, 0.2);
}
.choose-tracker:hover {
  border-color: var(--blue-light);
  box-shadow: 0 16px 40px rgba(96, 165, 250, 0.2);
}
.choose-floor:hover {
  border-color: var(--accent-warm);
  box-shadow: 0 16px 40px rgba(96, 165, 250, 0.2);
}
.choose-atlas:hover {
  border-color: var(--purple-light);
  box-shadow: 0 16px 40px rgba(185, 92, 255, 0.2);
}
.choose-glyph {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96, 165, 250, 0.12);
  color: var(--accent-warm);
  border: 1px solid rgba(96, 165, 250, 0.3);
}
.choose-demo .choose-glyph {
  background: rgba(46, 255, 122, 0.12);
  color: var(--green-light);
  border-color: rgba(46, 255, 122, 0.3);
}
.choose-tracker .choose-glyph {
  background: rgba(96, 165, 250, 0.12);
  color: var(--blue-light);
  border-color: rgba(96, 165, 250, 0.3);
}
.choose-atlas .choose-glyph {
  background: rgba(185, 92, 255, 0.12);
  color: var(--purple-light);
  border-color: rgba(185, 92, 255, 0.3);
}
.choose-glyph svg {
  width: 24px;
  height: 24px;
}
.choose-label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.choose-card h3 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}
.choose-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.4;
}
.choose-arrow {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 1.4rem;
  color: var(--accent-warm);
  transition:
  transform 0.25s,
  color 0.25s;
}
.choose-card:hover .choose-arrow {
  transform: translateX(6px);
}
.choose-demo:hover .choose-arrow {
  color: var(--green-light);
}
.choose-tracker:hover .choose-arrow {
  color: var(--blue-light);
}
.choose-atlas:hover .choose-arrow {
  color: var(--purple-light);
}

.home-meta {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 26px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 2s forwards;
}
.home-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hm-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hm-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.home-foot {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 2.1s forwards;
}
.home-foot-link {
  color: var(--accent-warm);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition:
  border-color 0.18s,
  color 0.18s;
}
.home-foot-link:hover {
  border-bottom-color: var(--accent-warm);
  color: var(--text);
}
.home-foot-divider {
  color: var(--text-dim);
}

.home-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  opacity: 0;
  animation:
  fadeUp 0.6s ease-out 2.2s forwards,
  scrollCueBob 1.6s ease-in-out 3s infinite;
}
.home-scroll-cue svg {
  width: 18px;
  height: 18px;
}
@keyframes scrollCueBob {
  0%,
  100% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(4px);
  }
}

/* ====
   BREADCRUMB / PAGE-INDICATOR (top of every non-home page)
==== */
.page-crumb {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(7, 7, 10, 0.92);
  border-bottom: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}
body[data-current-page]:not([data-current-page="home"]) .page-crumb {
  display: flex;
}
.crumb-home {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.crumb-home:hover {
  color: var(--accent-warm);
}
.crumb-home svg {
  width: 16px;
  height: 16px;
}
.crumb-divider {
  color: var(--text-dim);
}
.crumb-page {
  color: var(--accent-warm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.crumb-meta {
  color: var(--text-dim);
  font-size: 0.74rem;
  margin-left: auto;
}

/* ====
   PAGE PAGER (prev/next at bottom of every non-home page)
==== */
.page-pager {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 30px 24px 80px;
  max-width: var(--max-w);
  margin: 0 auto;
}
body[data-current-page]:not([data-current-page="home"]) .page-pager {
  display: grid;
}
.pager-prev,
.pager-next {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.03),
  rgba(255, 255, 255, 0)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition:
  transform 0.18s,
  border-color 0.18s,
  background 0.18s;
}
.pager-next {
  justify-content: flex-end;
  text-align: right;
}
.pager-prev:hover,
.pager-next:hover {
  border-color: var(--accent-warm);
  transform: translateY(-2px);
  background: rgba(96, 165, 250, 0.06);
}
.pager-prev.disabled,
.pager-next.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.pager-arrow {
  font-size: 1.6rem;
  color: var(--accent-warm);
}
.pager-text {
  display: flex;
  flex-direction: column;
}
.pager-meta {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pager-name {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin-top: 2px;
}

/* Hide the day-ticker on home page (it's a per-page metaphor) */
body[data-current-page="home"] .day-ticker {
  display: none;
}
/* Hide the sticky mobile CTA on most pages */
body[data-current-page]:not([data-current-page="home"]):not(
  [data-current-page="why"]
  ):not([data-current-page="pricing"])
  .sticky-mobile-cta {
  display: none;
}

/* ====
   SIDEBAR NAVIGATION (persistent left, collapsible groups)
==== */
.sidebar-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(7, 7, 10, 0.92);
  border: 1px solid var(--border-bright);
  color: var(--text);
  cursor: pointer;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
  border-color 0.18s,
  color 0.18s;
}
.sidebar-toggle:hover {
  border-color: var(--accent-warm);
  color: var(--accent-warm);
}
.sidebar-toggle svg {
  width: 20px;
  height: 20px;
}
@media (min-width: 1280px) {
  .sidebar-toggle {
  display: none;
  }
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-base);
  display: none;
}
.sidebar-overlay.open {
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: rgba(7, 7, 10, 0.97);
  border-right: 1px solid rgba(96, 165, 250, 0.18);
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}
.sidebar.open {
  transform: translateX(0);
}
@media (min-width: 1280px) {
  .sidebar {
  transform: translateX(0);
  }
  body {
  padding-left: 280px;
  }
  .topnav {
  left: 280px;
  }
  .day-ticker {
  left: calc(50% + 140px);
  }
  .settings-toggle {
  right: 16px;
  }
  .sidebar-close {
  display: none;
  }
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-mark {
  font-size: 1.1rem;
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
}
.sidebar-brand-name {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--text);
  font-size: 0.94rem;
}
.sidebar-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-mode {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-mode-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.sidebar-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.sidebar-mode-toggle .seg-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.sb-group {
  margin: 0;
}
.sb-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
  position: relative;
}
.sb-group summary::-webkit-details-marker {
  display: none;
}
.sb-group summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  font-size: 1.1rem;
  color: var(--text-dim);
  font-family: var(--f-display);
  transition: transform 0.18s;
}
.sb-group[open] summary::after {
  content: "−";
}
.sb-group summary:hover {
  color: var(--text);
  border-left-color: var(--accent-primary);
  background: rgba(96, 165, 250, 0.05);
}
.sb-group[open] summary {
  color: var(--accent-warm);
  border-left-color: var(--accent-warm);
}
.sb-glyph {
  font-weight: 700;
  color: var(--accent-warm);
}
.sb-title {
  font-weight: 600;
}

.sb-group ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
}
.sb-group li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 38px;
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.88rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition:
  color 0.15s,
  border-color 0.15s,
  background 0.15s;
}
.sb-group li a:hover {
  color: var(--text);
  border-left-color: var(--accent-primary);
  background: rgba(96, 165, 250, 0.04);
}
.sb-group li a.active {
  color: var(--text);
  border-left-color: var(--accent-warm);
  background: rgba(96, 165, 250, 0.08);
}
.sb-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.sb-group li a:hover .sb-dot,
.sb-group li a.active .sb-dot {
  background: var(--accent-warm);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}

.sidebar-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.sidebar-foot-line {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0;
}
.sidebar-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.74rem;
  color: var(--accent-warm);
  font-weight: 700;
}

/* Spotlight mode: hide sections that don't belong to the active group */
body[data-spotlight] section.section,
body[data-spotlight] header.hero {
  display: none;
}
body[data-spotlight="get-started"] #quiz,
body[data-spotlight="get-started"] #why-7,
body[data-spotlight="get-started"] #compare,
body[data-spotlight="get-started"] #story,
body[data-spotlight="get-started"] header.hero {
  display: block;
}
body[data-spotlight="system"] #doctrine,
body[data-spotlight="system"] #split,
body[data-spotlight="system"] #daily,
body[data-spotlight="system"] #deload,
body[data-spotlight="system"] #joints,
body[data-spotlight="system"] #volume {
  display: block;
}
body[data-spotlight="tools"] #inside,
body[data-spotlight="tools"] #tracker,
body[data-spotlight="tools"] #floor-tools,
body[data-spotlight="tools"] #lab,
body[data-spotlight="tools"] #atlas,
body[data-spotlight="tools"] #nutrition,
body[data-spotlight="tools"] #tools,
body[data-spotlight="tools"] #integrations {
  display: block;
}
body[data-spotlight="community"] #heritage,
body[data-spotlight="community"] #receipts,
body[data-spotlight="community"] #social,
body[data-spotlight="community"] #privacy {
  display: block;
}
body[data-spotlight="plan"] #pricing,
body[data-spotlight="plan"] #who,
body[data-spotlight="plan"] #faq,
body[data-spotlight="plan"] #glossary,
body[data-spotlight="plan"] #patent,
body[data-spotlight="plan"] #economics,
body[data-spotlight="plan"] #manifesto,
body[data-spotlight="plan"] #about,
body[data-spotlight="plan"] #contact {
  display: block;
}

/* ====
   HERO ROTATOR — local value-prop line
==== */
.hero-rotator {
  padding-right: 14px;
}
.hero-rotator-text {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: opacity 0.32s ease;
  min-height: 1em;
}
.hero-rotator-text.fading {
  opacity: 0;
}

/* ====
   INSIDE THE MEMBERSHIP — Activity rotator + Today tile
==== */
.tile-activity {
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.activity-rotator {
  list-style: none;
  padding: 0;
  margin: 14px 0 10px;
  position: relative;
  height: 220px;
}
.activity-rotator li {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--border-bright);
  border-radius: var(--radius);
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
  opacity 0.45s ease,
  transform 0.45s ease;
  pointer-events: none;
  height: fit-content;
}
.activity-rotator li.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ar-tag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.ar-pr {
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent-warm);
}
.ar-streak {
  background: rgba(46, 255, 122, 0.18);
  color: var(--green-light);
}
.ar-mile {
  background: rgba(96, 165, 250, 0.18);
  color: var(--blue-light);
}
.ar-deload {
  background: rgba(185, 92, 255, 0.18);
  color: var(--purple-light);
}
.ar-text strong {
  color: var(--text);
}
.ar-text em {
  color: var(--accent-warm);
  font-style: normal;
  font-weight: 600;
}
.ar-time {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.activity-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin: 0;
}

.tile-today {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.today-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0 16px;
}
.today-metric {
  text-align: center;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  border-left: 2px solid var(--accent-warm);
}
.t-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.t-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent-warm);
  margin: 2px 0;
}
.t-detail {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.today-checklist {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.today-checklist label {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text);
  transition: background 0.15s;
}
.today-checklist label:hover {
  background: rgba(96, 165, 250, 0.06);
}
.today-checklist input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-warm);
  cursor: pointer;
}
.today-checklist input:checked + span {
  color: var(--text-dim);
  text-decoration: line-through;
}

/* ====
   PRIVACY SECTION
==== */
.section-privacy {
  background:
  linear-gradient(180deg, rgba(96, 165, 250, 0.04), transparent 60%), var(--bg);
}
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 26px 0 28px;
}
@media (max-width: 1024px) {
  .privacy-grid {
  grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .privacy-grid {
  grid-template-columns: 1fr;
  }
}
.privacy-tile {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.04),
  rgba(255, 255, 255, 0)
  );
  transition:
  border-color 0.18s,
  transform 0.18s,
  box-shadow 0.18s;
}
.privacy-tile:hover {
  border-color: rgba(96, 165, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.12);
}
.privacy-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-light);
  margin-bottom: 12px;
}
.privacy-icon svg {
  width: 22px;
  height: 22px;
}
.privacy-tile h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.privacy-tile p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.55;
}
.privacy-pledge {
  margin-top: 22px;
  padding: 22px 26px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(96, 165, 250, 0.04);
}
.privacy-pledge-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--blue-light);
  margin: 0 0 10px;
}
.privacy-pledge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: p;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.privacy-pledge-list li {
  counter-increment: p;
  padding: 10px 14px 10px 42px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  position: relative;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.5;
}
.privacy-pledge-list li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 11px;
  font-family: var(--f-mono);
  font-weight: 800;
  color: var(--blue-light);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

/* ====
   LOCAL SAMPLE APP TILES — Post-PR, Partner, DM, Rooms
==== */
.social-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
@media (max-width: 1024px) {
  .social-app-grid {
  grid-template-columns: 1fr;
  }
}
.social-app-tile {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(185, 92, 255, 0.04),
  rgba(255, 255, 255, 0)
  );
}
.social-app-tile h3 {
  margin: 4px 0 10px;
  font-size: 1.04rem;
}

/* Post a PR */
.post-pr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-pr-row {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  gap: 4px;
}
.post-pr-row input,
.post-pr-row select {
  margin-top: 2px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.94rem;
  outline: none;
}
.post-pr-row input:focus,
.post-pr-row select:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(185, 92, 255, 0.18);
}
.post-pr-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .post-pr-3 {
  grid-template-columns: 1fr 1fr;
  }
}
.post-pr-vis {
  padding-top: 4px;
}
.post-pr-vis-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.post-pr-segs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.post-pr-segs .seg-btn {
  flex: 1;
  font-size: 0.78rem;
  padding: 6px 10px;
}
.post-pr-segs .seg-btn.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  color: white;
}
.post-pr-submit {
  margin-top: 4px;
}
.post-pr-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--purple-light);
  border-radius: var(--radius-lg);
  background: rgba(185, 92, 255, 0.06);
}
.post-pr-preview-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--purple-light);
  margin: 0 0 8px;
}
.post-pr-card {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius);
}
.ppc-handle {
  font-family: var(--f-mono);
  color: var(--purple-light);
  font-weight: 700;
  font-size: 0.86rem;
}
.ppc-lift {
  font-family: var(--f-mono);
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.ppc-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2rem;
  color: white;
  text-shadow: 0 0 22px rgba(185, 92, 255, 0.5);
  letter-spacing: -0.03em;
  margin: 4px 0;
}
.ppc-cap {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
}
.ppc-meta {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Sample partner preview */
.partner-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 12px;
}
.partner-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.partner-filters label {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 3px;
}
.partner-filters select {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.86rem;
  outline: none;
}
.partner-results {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.partner-results li {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 0.84rem;
}
.pr-rank {
  color: var(--text-dim);
  font-weight: 700;
}
.pr-handle {
  color: var(--purple-light);
  font-weight: 700;
}
.pr-meta {
  color: var(--text-dim);
  font-size: 0.74rem;
}
.btn-mini {
  padding: 5px 10px;
  font-size: 0.78rem;
  min-height: 0;
}
.partner-note {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* DM thread */
.dm-thread {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.dm-msg {
  max-width: 80%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.dm-msg p {
  margin: 0;
}
.dm-msg .dm-time {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.dm-them {
  background: rgba(255, 255, 255, 0.06);
  align-self: flex-start;
  color: var(--text);
}
.dm-me {
  background: linear-gradient(
  135deg,
  rgba(185, 92, 255, 0.2),
  rgba(185, 92, 255, 0.05)
  );
  align-self: flex-end;
  color: var(--text);
  border: 1px solid rgba(185, 92, 255, 0.3);
}
.dm-input {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--border-bright);
  border-radius: 999px;
  align-items: center;
}
.dm-input input {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--f-display);
  font-size: 0.88rem;
  outline: none;
}
.dm-note {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Sample training rooms */
.rooms-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 12px;
}
.rooms-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rooms-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--purple-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.room-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
}
.room-cap {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.rooms-note {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* ====
   VOICE COMMAND widget (in tracker)
==== */
.voice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(46, 255, 122, 0.04);
  border: 1px dashed rgba(46, 255, 122, 0.3);
  border-radius: var(--radius);
}
.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--green-glow), var(--green-light));
  color: #001a08;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition:
  transform 0.15s,
  box-shadow 0.15s;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.voice-btn svg {
  width: 18px;
  height: 18px;
}
.voice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(46, 255, 122, 0.45);
}
.voice-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.voice-btn.listening {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  color: white;
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%,
  100% {
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.45);
  }
  50% {
  box-shadow: 0 0 32px rgba(96, 165, 250, 0.75);
  }
}
.voice-btn.listening::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--accent-warm);
  opacity: 0;
  animation: voiceRing 1.2s ease-out infinite;
}
@keyframes voiceRing {
  0% {
  transform: scale(0.85);
  opacity: 0.7;
  }
  100% {
  transform: scale(1.18);
  opacity: 0;
  }
}
.voice-hint {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.voice-hint em {
  color: var(--green-light);
  font-style: normal;
  font-weight: 600;
}
.voice-feedback {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(46, 255, 122, 0.06);
  border: 1px solid rgba(46, 255, 122, 0.3);
  border-radius: var(--radius);
}
.voice-heard {
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-heard span {
  color: var(--text);
  font-style: italic;
  text-transform: none;
}
.voice-parsed {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-light);
  text-shadow: 0 0 12px rgba(46, 255, 122, 0.3);
}
.voice-parsed.error {
  color: var(--accent-warm);
  text-shadow: none;
  font-weight: 500;
  font-size: 0.94rem;
}
.voice-actions {
  display: flex;
  gap: 10px;
}

/* ====
   PR TREND CHART (in tracker)
==== */
.pr-trend-block {
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.03),
  rgba(255, 255, 255, 0)
  );
}
.pr-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.pr-trend-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.92rem;
  outline: none;
}
.pr-trend-select:focus {
  border-color: var(--green-light);
}
.pr-trend-svg-wrap {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
#prTrendChart {
  width: 100%;
  height: auto;
  display: block;
}
#prTrendGrid line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}
#prTrendGrid text {
  fill: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
#prTrendLines polyline {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#prTrendDots circle {
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 1;
}
#prTrendLabels text {
  fill: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}
.pr-trend-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 480px) {
  .pr-trend-meta {
  grid-template-columns: 1fr;
  }
}
.pr-trend-stat {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.pr-trend-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pr-trend-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--green-light);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ====
   RECOVERY SCORE tile
==== */
.lab-recovery {
  background: linear-gradient(
  180deg,
  rgba(46, 255, 122, 0.04),
  rgba(255, 255, 255, 0)
  );
  border-color: rgba(46, 255, 122, 0.2);
}
.lab-recovery .lab-tile-label {
  color: var(--green-light);
}
.lab-recovery h3 {
  margin-bottom: 6px;
}
.rec-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 56px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.rec-row:last-of-type {
  border-bottom: none;
}
.rec-name {
  font-size: 0.9rem;
  color: var(--text);
}
.rec-meta {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.rec-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(46, 255, 122, 0.2);
  border-radius: 2px;
  outline: none;
}
.rec-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-light), var(--green-glow));
  cursor: pointer;
  box-shadow: 0 0 12px rgba(46, 255, 122, 0.5);
}
.rec-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-light), var(--green-glow));
  cursor: pointer;
  box-shadow: 0 0 12px rgba(46, 255, 122, 0.5);
}
.rec-value {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--green-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
}
.rec-unit {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
}

.rec-output {
  margin-top: 16px;
  padding: 16px;
  background: rgba(46, 255, 122, 0.06);
  border: 1px dashed rgba(46, 255, 122, 0.3);
  border-radius: var(--radius);
  text-align: center;
}
.rec-score-big {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.rec-score-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3.4rem;
  color: var(--green-light);
  text-shadow: 0 0 22px rgba(46, 255, 122, 0.5);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transition:
  color 0.18s,
  text-shadow 0.18s;
}
.rec-score-num.warn {
  color: var(--blue-light);
  text-shadow: 0 0 22px rgba(255, 181, 71, 0.5);
}
.rec-score-num.danger {
  color: var(--accent-warm);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.5);
}
.rec-score-of {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  color: var(--text-dim);
}
.rec-score-label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--green-light);
  margin: 0 0 12px;
}
.rec-score-label.warn {
  color: var(--blue-light);
}
.rec-score-label.danger {
  color: var(--accent-warm);
}
.rec-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.rec-bar-fill {
  height: 100%;
  background: linear-gradient(
  90deg,
  var(--accent-primary),
  var(--blue-light),
  var(--green-light)
  );
  border-radius: 3px;
  width: 82%;
  transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rec-rx {
  font-family: var(--f-display);
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.5;
}
.rec-save {
  width: 100%;
  padding: 10px 16px;
  background: rgba(46, 255, 122, 0.1);
  border: 1px solid var(--green-light);
  border-radius: var(--radius);
  color: var(--green-light);
  font-family: var(--f-display);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.rec-save:hover {
  background: rgba(46, 255, 122, 0.18);
}
.rec-save.logged {
  color: var(--text);
  border-color: var(--text-dim);
  cursor: default;
}

/* ====
   PWA install button (in settings)
==== */
.settings-install {
  width: 100%;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  border: 0;
  color: white;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.3);
}
.settings-install:hover {
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.5);
}

/* ====
   PRO COMING-LATER tier polish
==== */
.pro-coming-note {
  margin: 12px 0 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ===== PRINT ===== */
@media print {
  .topnav,
  .cta-row,
  .btn,
  .section-tools .tools-grid .btn,
  .hero::before,
  .hero::after,
  .scroll-progress,
  .quiz,
  .compare-tabs,
  .archetype-tabs,
  .chapter-nav,
  .chapter-next,
  .chapter-cta,
  .case-tabs,
  .tools-meta,
  .tools-roadmap,
  .day-ticker,
  .assistant-toggle,
  .assistant-panel,
  .heritage-tabs,
  .nutri-slider,
  .tracker-pane,
  .tracker-quick,
  .floor-grid,
  .pr-celebrate,
  .hero-ekg,
  .theme-switch,
  .reveal::after,
  .streak-rewards,
  .lab-grid,
  .tap-pad,
  .boot-overlay,
  .cmdk-overlay,
  .settings-toggle,
  .settings-drawer,
  .rest-timer,
  .atlas-filters,
  .cards-row {
  display: none;
  }
  body {
  background: white;
  color: black;
  background-image: none;
  }
  .section {
  padding: 30px 0;
  page-break-inside: avoid;
  }
  .compare-good,
  .win-callout {
  background: #f0f9f0 !important;
  color: black !important;
  }
  .compare-panel,
  .archetype-panel,
  .chapter-panel {
  display: block !important;
  }
  h1,
  h2,
  h3,
  h4 {
  text-shadow: none !important;
  }
  .reveal {
  opacity: 1 !important;
  transform: none !important;
  }
}

/* ====
   Topnav scroll-shrink — denser glassmorphic bar after scrolling.
   The .scrolled class is toggled in JS based on window.scrollY.
==== */
.topnav {
  transition:
  padding 0.22s ease,
  background 0.22s ease,
  backdrop-filter 0.22s ease,
  border-color 0.22s ease,
  box-shadow 0.22s ease;
}
.topnav.scrolled {
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(96, 165, 250, 0.25);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.32);
}
.topnav.scrolled .brand-name {
  letter-spacing: 0.18em;
}
.topnav.scrolled .brand-status {
  opacity: 0.55;
}

/* ====
   Brand mark — always-on subtle ambient pulse so the logo feels
   alive (slow breathing glow). Hover intensifies.
==== */
@keyframes ecLogoBreathe {
  0%,
  100% {
  filter: drop-shadow(0 0 1px rgba(96, 165, 250, 0.15));
  }
  50% {
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.4));
  }
}
.brand-mark svg,
.sidebar-brand-mark svg {
  animation: ecLogoBreathe 4.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark svg,
  .sidebar-brand-mark svg {
  animation: none;
  }
}

/* ====
   Page entry stagger — when a route activates, every direct
   semantic child of the section staggers in from a 12px lift.
   Lightweight, uses generic CSS animation (not JS).
==== */
@keyframes c365PageStaggerIn {
  from {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  }
}
[data-page].page-active > .container > *,
[data-page].page-active > .home-frame > *,
[data-page].page-active > .hero-frame > * {
  animation: c365PageStaggerIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
[data-page].page-active > .container > *:nth-child(1),
[data-page].page-active > .home-frame > *:nth-child(1),
[data-page].page-active > .hero-frame > *:nth-child(1) {
  animation-delay: 0.04s;
}
[data-page].page-active > .container > *:nth-child(2),
[data-page].page-active > .home-frame > *:nth-child(2),
[data-page].page-active > .hero-frame > *:nth-child(2) {
  animation-delay: 0.1s;
}
[data-page].page-active > .container > *:nth-child(3),
[data-page].page-active > .home-frame > *:nth-child(3),
[data-page].page-active > .hero-frame > *:nth-child(3) {
  animation-delay: 0.16s;
}
[data-page].page-active > .container > *:nth-child(4),
[data-page].page-active > .home-frame > *:nth-child(4),
[data-page].page-active > .hero-frame > *:nth-child(4) {
  animation-delay: 0.22s;
}
[data-page].page-active > .container > *:nth-child(5),
[data-page].page-active > .home-frame > *:nth-child(5),
[data-page].page-active > .hero-frame > *:nth-child(5) {
  animation-delay: 0.28s;
}
[data-page].page-active > .container > *:nth-child(6),
[data-page].page-active > .home-frame > *:nth-child(6),
[data-page].page-active > .hero-frame > *:nth-child(6) {
  animation-delay: 0.34s;
}
[data-page].page-active > .container > *:nth-child(n + 7),
[data-page].page-active > .home-frame > *:nth-child(n + 7),
[data-page].page-active > .hero-frame > *:nth-child(n + 7) {
  animation-delay: 0.4s;
}

/* ====
   Breadcrumb — soft glow + slide on route change so the
   "you are here" indicator feels intentional, not static.
==== */
.crumb-page,
#crumbPage {
  background: linear-gradient(
  135deg,
  var(--red, var(--accent-primary)),
  var(--accent-warm),
  var(--blue-light)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(96, 165, 250, 0.3);
  transition: filter 0.35s ease;
}
@keyframes crumbFlash {
  0% {
  filter: brightness(1.6) drop-shadow(0 0 14px rgba(96, 165, 250, 0.55));
  }
  100% {
  filter: brightness(1) drop-shadow(0 0 0 rgba(96, 165, 250, 0));
  }
}
.crumb.changed #crumbPage {
  animation: crumbFlash 0.7s ease-out;
}

/* ====
   Footer brand mark — small inline hex glyph next to ECCENTRYX
==== */
.footer-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  margin-right: 8px;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.18));
}
.footer-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ====
   Back-to-top floating button — appears after the user has
   scrolled past ~600px on any page. Bottom-right, glass disc.
==== */
.back-to-top {
  position: fixed;
  right: 22px;
  /* Sits above the Floor Desk button (58px tall + 22px bottom + 12px gap) */
  bottom: 96px;
  z-index: var(--z-floating);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.4);
  background: rgba(13, 13, 18, 0.78);
  color: var(--blue-light);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.92);
  transition:
  opacity 0.22s ease,
  transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
  background 0.18s ease,
  border-color 0.18s ease,
  box-shadow 0.18s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.78);
  box-shadow: 0 6px 22px rgba(96, 165, 250, 0.32);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}

body.session-active .back-to-top {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* On mobile, the assistant-toggle drops to bottom: 86px and the
   sticky-mobile-cta sits below it — lift the back-to-top above both. */
@media (max-width: 480px) {
  .back-to-top {
  right: 14px;
  bottom: 156px;
  width: 44px;
  height: 44px;
  }
  .back-to-top svg {
  width: 18px;
  height: 18px;
  }
}

/* ====
   Global keyboard-focus polish — visible focus rings on
   interactive elements without spamming mouse users with them.
==== */
:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
  border-radius: 4px;
}
.brand:focus-visible,
.sidebar-brand:focus-visible {
  outline-offset: 4px;
}

/* ====
   Skip-to-main link (a11y) — visible only on focus
==== */
.skip-link {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: var(--z-modal);
  padding: 10px 16px;
  background: var(--accent-primary);
  color: white;
  font-family: var(--f-mono, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.45);
  transition: top 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ====
   Brand-mark hover micro-interaction — subtle pulse + barbell glow
==== */
.brand:hover .brand-mark svg,
.sidebar-brand:hover .sidebar-brand-mark svg {
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.55));
}
.brand-mark svg,
.sidebar-brand-mark svg {
  transition:
  filter 0.32s ease,
  transform 0.32s ease;
}
.brand:hover .brand-mark svg {
  transform: rotate(-4deg) scale(1.04);
}
@keyframes ecLogoBarPulse {
  0%,
  100% {
  stroke-opacity: 1;
  }
  50% {
  stroke-opacity: 0.55;
  }
}
.brand:hover .brand-mark svg line,
.sidebar-brand:hover .sidebar-brand-mark svg line {
  animation: ecLogoBarPulse 1.4s ease-in-out infinite;
}

/* ====
   Route toast — small banner shown briefly when an unknown route
   was requested and the router fell back to home.
==== */
.route-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(20, 20, 28, 0.96);
  color: var(--blue-light);
  font-family: var(--f-mono, monospace);
  font-size: 0.85rem;
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition:
  opacity 0.3s ease,
  transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: var(--z-modal);
  max-width: 86vw;
  text-align: center;
}
.route-toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ====
   Cinematic CTA hover — light sweep across primary buttons
==== */
.btn-primary,
.btn.btn-primary,
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.btn.btn-primary::after,
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
  115deg,
  transparent 30%,
  rgba(255, 255, 255, 0.22) 48%,
  rgba(255, 255, 255, 0.42) 50%,
  rgba(255, 255, 255, 0.22) 52%,
  transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::after,
.btn.btn-primary:hover::after,
.cta:hover::after {
  transform: translateX(120%);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
  0 12px 36px rgba(96, 165, 250, 0.35),
  0 0 0 1px rgba(96, 165, 250, 0.45) inset;
}

/* ====
   Card 3D tilt — JS sets --tx / --ty from cursor position;
   the card transform reads them. No tilt without JS or with
   reduced motion (see global guard).
==== */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--ty, 0deg))
  rotateY(var(--tx, 0deg)) translateZ(0);
  transition:
  transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
  box-shadow 0.18s ease;
  will-change: transform;
}
.tilt:hover {
  box-shadow:
  0 22px 48px rgba(0, 0, 0, 0.45),
  0 0 0 1px rgba(96, 165, 250, 0.25) inset;
}
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
  260px circle at var(--mx, 50%) var(--my, 50%),
  rgba(96, 165, 250, 0.18),
  transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tilt:hover::before {
  opacity: 1;
}

/* Language switcher (i18n) — adapts to nav text color via currentColor */
.lang-switch-wrap { display: inline-flex; align-items: center; }
.lang-switch-wrap select {
  min-height: 44px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.lang-switch-wrap select:hover { opacity: 1; }
.lang-switch-wrap select:focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 2px; }

/* ====
   Section divider art — gradient hairline + small hex node so
   sections feel deliberately segmented, not stacked.
==== */
.section + .section,
[data-page].page-active > .section + .section {
  position: relative;
}
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(640px, 78%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
  90deg,
  transparent,
  rgba(96, 165, 250, 0.42) 35%,
  rgba(241, 221, 182, 0.55) 50%,
  rgba(96, 165, 250, 0.42) 65%,
  transparent
  );
  pointer-events: none;
}
.section + .section::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: #07070a;
  border: 1px solid rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.35);
  pointer-events: none;
}

/* ====
   Noise grain overlay — film grain on every surface, very subtle
==== */
.fx-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ====
   Cursor-follow vignette — soft radial spotlight that tracks
   the cursor; JS sets --cx/--cy on body. Falls back to centred.
==== */
.fx-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
  background: radial-gradient(
  520px circle at var(--cx, 50vw) var(--cy, 50vh),
  rgba(96, 165, 250, 0.1),
  rgba(0, 0, 0, 0.55) 70%
  );
  opacity: 0.55;
  transition: opacity 0.4s ease;
  mix-blend-mode: soft-light;
}
body[data-current-page="home"] .fx-spotlight {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .tilt {
  transform: none !important;
  transition: none !important;
  }
  .tilt::before {
  display: none !important;
  }
  .btn-primary::after,
  .btn.btn-primary::after,
  .cta::after {
  display: none !important;
  }
  .fx-grain,
  .fx-spotlight {
  display: none !important;
  }
}

/* ====
   Global reduced-motion guard
   - Disables route fade-in, boot overlay, ambient particles, reveal-on-scroll,
   and kills smooth-scroll behaviour for users who request it.
==== */
@media (prefers-reduced-motion: reduce) {
  html {
  scroll-behavior: auto !important;
  }
  [data-page].page-active {
  animation: none !important;
  }
  .boot-overlay,
  .ambient-canvas {
  display: none !important;
  }
  .reveal {
  opacity: 1 !important;
  transform: none !important;
  }
  *,
  *::before,
  *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
  }
}

/* ====
   RENOVATION PHASE 1 — signup modal, tools hub, vertical mode,
   sidebar account, route toast, coach v2 escalation surface.
   ==== */

/* ---- SIGNUP / ACCOUNT MODAL ---- */
.signup-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.signup-modal.open {
  display: flex;
}
body.modal-open {
  overflow: hidden;
}
.signup-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
  ellipse at center,
  rgba(0, 0, 0, 0.78) 0%,
  rgba(0, 0, 0, 0.94) 70%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.signup-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #110b04 0%, var(--bg) 100%);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  box-shadow:
  0 30px 80px rgba(0, 0, 0, 0.7),
  0 0 0 1px rgba(96, 165, 250, 0.08) inset;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--blue-light);
}
.signup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.signup-close:hover {
  background: rgba(96, 165, 250, 0.12);
  color: var(--blue-light);
}
.signup-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--accent-primary);
  margin: 0 0 14px;
}
.signup-title {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 12px;
  font-weight: 700;
}
.signup-highlight {
  background: linear-gradient(90deg, var(--accent-primary), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.signup-sub {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(241, 221, 182, 0.78);
}

.signup-data-note {
  display: grid;
  gap: 4px;
  margin: -4px 0 18px;
  padding: 11px 12px;
  border: 2px solid rgba(16, 17, 20, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--surface);
  box-shadow: 4px 4px 0 rgba(16, 17, 20, 0.12);
}

.signup-data-note strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 0.9rem;
  font-weight: 900;
}

.signup-data-note span {
  color: rgba(16, 17, 20, 0.72);
  font-size: 0.78rem;
  line-height: 1.32;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signup-field-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(96, 165, 250, 0.85);
}
.signup-form input[type="email"],
.signup-form input[type="text"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: var(--blue-light);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition:
  border-color 0.15s,
  background 0.15s;
}
.signup-form input:focus {
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.07);
}
.signup-field-error {
  color: var(--rep-coral);
  font-size: 0.82rem;
  min-height: 1em;
}
.signup-vertical {
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 4px 0 6px;
}
.signup-vertical legend {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(96, 165, 250, 0.85);
  padding: 0 8px;
}
.signup-vertical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 6px;
}
.signup-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  cursor: pointer;
}
.signup-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}
.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(241, 221, 182, 0.7);
  cursor: pointer;
  padding: 4px 0;
}
.signup-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.signup-consent a {
  color: var(--accent-primary);
  text-decoration: underline;
}
.signup-privacy-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 1.22em;
  height: 1.22em;
  margin: 0 4px;
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 50%;
  color: var(--accent-primary);
  font-family: var(--f-mono);
  font-size: 0.78em;
  font-weight: 800;
  line-height: 1;
  vertical-align: text-top;
  cursor: help;
}
.signup-privacy-detail:focus-visible {
  outline: 2px solid var(--rep-lime);
  outline-offset: 3px;
}
/* WCAG 2.5.5 — 44px touch target via pseudo-element; visual circle size unchanged */
.signup-privacy-detail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}
.signup-privacy-tooltip {
  position: absolute;
  z-index: var(--z-base);
  left: 50%;
  bottom: calc(100% + 8px);
  width: min(280px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 8px;
  background: rgba(5, 8, 17, 0.98);
  box-shadow:
  0 18px 38px rgba(0, 0, 0, 0.36),
  0 0 18px rgba(96, 165, 250, 0.16);
  color: rgba(244, 249, 255, 0.92);
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition:
  opacity 0.16s ease,
  transform 0.16s ease,
  visibility 0.16s ease;
  visibility: hidden;
}
.signup-privacy-detail:hover .signup-privacy-tooltip,
.signup-privacy-detail:focus .signup-privacy-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
@media (max-width: 480px) {
  .signup-privacy-tooltip {
  bottom: 16px;
  left: 18px;
  position: fixed;
  right: 18px;
  transform: translateY(4px);
  width: auto;
  }
  .signup-privacy-detail:hover .signup-privacy-tooltip,
  .signup-privacy-detail:focus .signup-privacy-tooltip {
  transform: translateY(0);
  }
}
.signup-consent-error {
  margin-top: -8px;
}
.signup-submit {
  margin-top: 4px;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
.signup-foot {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: rgba(241, 221, 182, 0.55);
}
.signup-foot a {
  color: var(--accent-primary);
}

.signup-state-success {
  text-align: center;
  padding: 12px 0 4px;
}
.signup-success-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--accent-primary));
  color: white;
  font-size: 28px;
  margin: 0 0 16px;
}
.signup-state-success h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}
.signup-success-line {
  margin: 0 0 8px;
  font-size: 1rem;
}
.signup-success-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.7);
  margin: 0 0 16px;
}
.signup-success-meta code {
  background: rgba(96, 165, 250, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}
.signup-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 14px;
}
.signup-success-foot {
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.55);
  margin: 0;
}

/* ---- TOPNAV signup link ---- */
.navlink-signup {
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.08)
  );
  border: 1px solid rgba(96, 165, 250, 0.4);
  padding: 6px 12px !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
}
.navlink-signup:hover {
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.3),
  rgba(96, 165, 250, 0.15)
  );
  border-color: var(--accent-primary);
}
.navlink-signup-active {
  background: rgba(80, 160, 80, 0.12) !important;
  border-color: rgba(120, 200, 120, 0.4) !important;
  color: #b6f1c6 !important;
}

/* ---- SIDEBAR account block ---- */
.sidebar-account {
  margin: 12px 16px 8px;
}
.sidebar-account-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.06)
  );
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--blue-light);
  text-align: left;
  font-family: inherit;
  transition:
  background 0.15s,
  border-color 0.15s;
}
.sidebar-account-cta:hover {
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.3),
  rgba(96, 165, 250, 0.12)
  );
  border-color: var(--accent-primary);
}
.sa-glyph {
  font-size: 14px;
  color: var(--accent-primary);
}
.sa-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sa-line-1 {
  font-size: 0.86rem;
}
.sa-line-2 {
  font-size: 0.7rem;
  color: rgba(241, 221, 182, 0.65);
}

.sidebar-account-active {
  border: 1px solid rgba(120, 200, 120, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(40, 80, 40, 0.12);
}
.saa-line {
  margin: 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.saa-dot {
  width: 8px;
  height: 8px;
  background: #7fda94;
  border-radius: 50%;
  box-shadow: 0 0 6px #7fda94;
}
.saa-meta {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: rgba(241, 221, 182, 0.6);
}
.saa-meta a {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* ---- VERTICAL mode segmented control ---- */
.vertical-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sidebar-mode-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: rgba(241, 221, 182, 0.55);
  line-height: 1.4;
}

/* ---- TOOLS HUB ---- */
.section-tools {
  background: linear-gradient(180deg, var(--bg) 0%, #100b04 100%);
  padding: 80px 0;
}
.tools-vertical-tag {
  font-size: 0.65em;
  color: rgba(96, 165, 250, 0.85);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.tools-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.tools-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tools-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: rgba(241, 221, 182, 0.85);
  padding: 7px 14px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition:
  background 0.12s,
  border-color 0.12s,
  color 0.12s;
}
.tools-filter-btn:hover {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.5);
}
.tools-filter-btn.active {
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.3),
  rgba(96, 165, 250, 0.15)
  );
  border-color: var(--accent-primary);
  color: var(--blue-light);
}
.tools-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(96, 165, 250, 0.7);
  margin: 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.tool-card {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.07),
  rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tool-card-feature {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.04)
  );
  border-color: rgba(96, 165, 250, 0.55);
  grid-column: 1 / -1;
}
.tool-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tool-glyph {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent-primary));
  color: white;
  border-radius: 8px;
  flex-shrink: 0;
}
.tool-glyph svg {
  width: 20px;
  height: 20px;
}
.tool-card-head h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-card-tag {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--accent-primary), var(--blue-light));
  color: #1a0d04;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.tool-card-tagline {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(241, 221, 182, 0.78);
}
.tool-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-row {
  display: grid;
  gap: 10px;
}
.tool-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.tool-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  color: rgba(96, 165, 250, 0.85);
}
.tool-row input,
.tool-row select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: var(--blue-light);
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: "Outfit", system-ui, sans-serif;
  outline: none;
}
.tool-row input:focus,
.tool-row select:focus {
  border-color: var(--accent-primary);
}
.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-actions .btn {
  padding: 8px 14px;
  font-size: 0.88rem;
}
.tool-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tool-signal-grid span {
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.04));
  color: rgba(241, 221, 182, 0.74);
  font-size: 0.76rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.tool-signal-grid strong {
  display: block;
  margin-bottom: 2px;
  color: var(--blue-light);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-signal-grid-coach span {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.11), rgba(59, 130, 246, 0.05));
}
.tool-out {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
}
.tool-out-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tool-out-4 {
  grid-template-columns: repeat(3, 1fr);
}
.tool-out-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.too-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(96, 165, 250, 0.8);
}
.too-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-light);
}
.too-num-hi {
  color: var(--blue-light);
  background: linear-gradient(90deg, var(--accent-primary), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.too-unit {
  font-size: 0.72rem;
  color: rgba(241, 221, 182, 0.55);
}
.tool-out-cell-hi {
  background: rgba(96, 165, 250, 0.1);
  border-radius: 6px;
  padding: 4px;
}
.tool-err {
  font-size: 0.82rem;
  color: var(--rep-coral);
  margin: 0 0 8px;
  line-height: 1.4;
}
.tool-foot {
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.55);
  margin: 0;
  line-height: 1.4;
}
.tool-feature-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(241, 221, 182, 0.85);
}

/* Plate visual */
.tp-line {
  margin: 4px 0;
  font-size: 0.92rem;
}
.tp-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-top: 12px;
  min-height: 44px;
}
.tp-plate {
  display: inline-block;
  width: 6px;
  background: linear-gradient(180deg, var(--accent-primary), var(--blue));
  border-radius: 1px;
}
.tp-bar {
  display: inline-block;
  width: 56px;
  height: 4px;
  background: rgba(96, 165, 250, 0.5);
  border-radius: 2px;
}

/* Readiness tool */
.tool-readiness-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-r-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-r-row span {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(96, 165, 250, 0.85);
}
.tool-r-row output {
  color: var(--blue-light);
  font-weight: 700;
}
.tool-r-row input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(96, 165, 250, 0.18);
  border-radius: 3px;
  outline: none;
}
.tool-r-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
  border-radius: 50%;
  cursor: pointer;
}
.tool-r-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.tool-out-readiness {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px;
}
.tr-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}
.tr-score-num {
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.tr-score-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(96, 165, 250, 0.7);
}
.tr-verdict-block {
  flex: 1;
}
.tr-verdict {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.tr-v-hit {
  background: rgba(80, 180, 80, 0.15);
  color: #a3eab0;
  border: 1px solid rgba(80, 180, 80, 0.4);
}
.tr-v-light {
  background: rgba(96, 165, 250, 0.15);
  color: var(--blue-light);
  border: 1px solid rgba(96, 165, 250, 0.4);
}
.tr-v-deload {
  background: rgba(220, 60, 60, 0.15);
  color: var(--rep-coral);
  border: 1px solid rgba(220, 60, 60, 0.4);
}
.tr-rx {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(241, 221, 182, 0.88);
}

/* Round timer */
.tool-out-rounds {
  padding: 18px;
  text-align: center;
}
.trd-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.trd-state {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: rgba(96, 165, 250, 0.9);
}
.trd-state-work {
  color: #a3eab0;
}
.trd-state-rest {
  color: var(--rep-coral);
}
.trd-state-done {
  color: var(--accent-primary);
}
.trd-time {
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", monospace;
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trd-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.6);
}
.trd-progress {
  width: 100%;
  height: 4px;
  background: rgba(96, 165, 250, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.trd-progress-bar {
  height: 100%;
  background: linear-gradient(
  90deg,
  var(--blue),
  var(--accent-primary),
  var(--blue-light)
  );
  width: 0;
  transition: width 0.5s linear;
}
.trd-mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.6);
  padding: 6px 8px;
  cursor: pointer;
}

.tools-foot {
  margin: 32px 0 0;
  font-size: 0.92rem;
  color: rgba(241, 221, 182, 0.6);
  text-align: center;
}
.tools-foot a {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* Quiz share-link feedback */
.quiz-share-feedback {
  margin: 12px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: rgba(96, 165, 250, 0.85);
  text-align: center;
}

/* Coach v2 escalation form */
.assistant-escalate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.assistant-escalate input,
.assistant-escalate textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: var(--blue-light);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}
.assistant-escalate textarea {
  min-height: 60px;
  resize: vertical;
}
.assistant-escalate input:focus,
.assistant-escalate textarea:focus {
  border-color: var(--accent-primary);
}
.assistant-err {
  color: var(--rep-coral);
  font-size: 0.82rem;
  margin: 4px 0 0;
}
.assistant-ok {
  background: rgba(80, 180, 80, 0.12);
  border: 1px solid rgba(80, 180, 80, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  color: #b3e8b8;
  font-size: 0.88rem;
}

/* Route toast */
.route-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 14, 6, 0.96);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: var(--blue-light);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  z-index: var(--z-modal);
  opacity: 0;
  transition:
  opacity 0.18s,
  transform 0.18s;
  pointer-events: none;
}
.route-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .tools-grid {
  grid-template-columns: 1fr;
  }
  .tool-out-grid {
  grid-template-columns: repeat(2, 1fr);
  }
  .tool-out-4 {
  grid-template-columns: repeat(2, 1fr);
  }
  .tool-row-3 {
  grid-template-columns: 1fr;
  }
  .tool-out-readiness {
  flex-direction: column;
  gap: 14px;
  text-align: center;
  }
  .signup-card {
  padding: 28px 22px 22px;
  }
  .signup-title {
  font-size: 1.35rem;
  }
  .signup-vertical-grid {
  grid-template-columns: 1fr;
  }
}

/* OLED theme adjustments */
body[data-theme="oled"] .signup-card {
  background: #000;
  border-color: rgba(96, 165, 250, 0.35);
}
body[data-theme="oled"] .tool-card {
  background: rgba(255, 255, 255, 0.03);
}
body[data-theme="chalk"] .signup-card {
  background: linear-gradient(180deg, #f4ede0 0%, #ece2cb 100%);
  color: #2c1f0d;
  border-color: rgba(107, 58, 31, 0.4);
}
body[data-theme="chalk"] .signup-form input {
  background: rgba(0, 0, 0, 0.05);
  color: #2c1f0d;
}

/* ====
   RENOVATION PHASE 2 — streak, PR ticker, PR card, trust page,
   settings account.
   ==== */

/* ---- SIDEBAR live streak ---- */
.sidebar-streak {
  margin: 8px 16px;
  padding: 12px 14px;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.08),
  rgba(96, 165, 250, 0.02)
  );
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 10px;
}
.ss-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ss-glyph {
  font-size: 13px;
}
.ss-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(96, 165, 250, 0.85);
}
.ss-num-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.ss-num {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.sidebar-streak[data-streak-state="empty"] .ss-num {
  background: none;
  -webkit-text-fill-color: rgba(241, 221, 182, 0.4);
  color: rgba(241, 221, 182, 0.4);
}
.ss-unit {
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.55);
}
.ss-meta {
  font-size: 0.74rem;
  color: rgba(241, 221, 182, 0.7);
  margin: 0 0 8px;
  line-height: 1.35;
}
.ss-dots {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  margin: 6px 0 8px;
}
.ss-dot {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(96, 165, 250, 0.12);
  border-radius: 2px;
}
.ss-dot.hit {
  background: linear-gradient(135deg, var(--accent-primary), var(--blue-light));
}
.ss-dot.today {
  outline: 1px solid rgba(241, 221, 182, 0.5);
  outline-offset: 1px;
}
.ss-grace {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: rgba(241, 221, 182, 0.5);
  margin: 0;
}
.ss-grace strong {
  color: var(--accent-primary);
}

/* ---- HERO live PR ticker ---- */
.hero-stat-pr {
  position: relative;
}
.pr-ticker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: rgba(241, 221, 182, 0.85);
  animation: pr-ticker-slide 1.2s ease-out;
}
.pr-ticker-label {
  color: var(--accent-primary);
  letter-spacing: 0.1em;
}
.pr-ticker-text {
  color: var(--blue-light);
}
@keyframes pr-ticker-slide {
  from {
  opacity: 0;
  transform: translateY(8px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

/* ---- PR-CARD generator ---- */
.pr-card-canvas {
  width: 100%;
  height: auto;
  max-height: 320px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  background: var(--bg);
  display: block;
  margin: 4px 0 8px;
  object-fit: contain;
}
.pr-card-canvas:not(.rendered) {
  background: linear-gradient(135deg, var(--bg), #1f1206);
  min-height: 180px;
}

/* ---- TRUST page ---- */
.section-trust {
  background: linear-gradient(180deg, var(--bg) 0%, #110b04 100%);
  padding: 80px 0;
}
.trust-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.18);
}
.trust-nav a {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: rgba(96, 165, 250, 0.85);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 6px;
  transition:
  background 0.12s,
  border-color 0.12s,
  color 0.12s;
}
.trust-nav a:hover {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--blue-light);
}
.trust-block {
  margin: 0 0 36px;
  scroll-margin-top: 100px;
}
.trust-block h3 {
  font-size: 1.4rem;
  margin: 0 0 12px;
  border-left: 3px solid var(--accent-primary);
  padding-left: 12px;
}
.trust-block p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(241, 221, 182, 0.85);
}
.trust-block p strong {
  color: var(--accent-primary);
}
.trust-list {
  margin: 12px 0 0;
  padding-left: 22px;
}
.trust-list li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(241, 221, 182, 0.78);
  margin: 8px 0;
}
.trust-list li strong {
  color: var(--blue-light);
}
.trust-list a {
  color: var(--accent-primary);
}
.trust-foot {
  margin: 36px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(96, 165, 250, 0.18);
  font-size: 0.85rem;
  color: rgba(241, 221, 182, 0.5);
  text-align: center;
}
.trust-foot a {
  color: var(--accent-primary);
}

.trust-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.trust-state-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  background: rgba(3, 10, 20, 0.38);
}

.trust-state-grid h4 {
  margin: 0 0 10px;
  color: var(--blue-light);
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .trust-state-grid {
  grid-template-columns: 1fr;
  }
}

/* ---- SETTINGS → Account ---- */
.settings-account-active,
.settings-account-empty {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
}
.sa-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
  font-size: 0.85rem;
}
.sa-row-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(96, 165, 250, 0.75);
  letter-spacing: 0.06em;
}
.sa-row code {
  background: rgba(96, 165, 250, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.sa-row-tier {
  background: linear-gradient(90deg, var(--accent-primary), var(--blue-light));
  color: #1a0d04;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sa-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.settings-account-btn {
  font-size: 0.84rem;
  padding: 8px 12px;
}
.settings-account-clear {
  background: rgba(220, 60, 60, 0.08);
  border-color: rgba(220, 60, 60, 0.3);
  color: var(--rep-coral);
}
.settings-account-clear:hover {
  background: rgba(220, 60, 60, 0.15);
  border-color: rgba(220, 60, 60, 0.5);
}
.sa-foot {
  margin: 12px 0 0;
  font-size: 0.74rem;
  color: rgba(241, 221, 182, 0.55);
  line-height: 1.4;
}
.sa-empty-line {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: rgba(241, 221, 182, 0.7);
}

/* ====
   FUTURISTIC THEME OVERLAY (appended) — overrides earlier rules.
   Replaces amber/copper with electric cyan + violet on midnight.
   Adds glassmorphism, glow rings, aurora background, motion.
   Wrapped in prefers-reduced-motion guard at the bottom.
==== */
:root {
  /* Cool-deep surfaces */
  --bg: #050811;
  --bg-alt: #07091a;
  --bg-tools: #050a14;
  --bg-buy: #0a061a;
  --bg-wedge: #06091a;
  --surface: #0c0f22;
  --surface-2: #11142a;
  --surface-3: #161a35;
  --border: rgba(120, 160, 255, 0.1);
  --border-bright: rgba(120, 200, 255, 0.18);

  /* Cool text */
  --text: #f7faff;
  --text-muted: #c8d4f4;
  --text-dim: #aab8dd;

  /* Brand accent — repurpose the existing token names so all earlier rules inherit */

  --red-light: #93c5fd;
  --red-glow: #60a5fa;

  --purple: #b794ff;
  --purple-light: #d4b9ff;
  --purple-glow: #9a6dff;

  --green: #2effae;
  --green-light: #7dffce;
  --green-glow: #00ff9d;

  --blue: #5b9dff;
  --blue-light: #92c0ff;
  --blue-glow: #60a5fa;

  --accent: var(--accent-primary);

  --glow-accent: 0 0 22px rgba(96, 165, 250, 0.45), 0 0 60px rgba(96, 165, 250, 0.2);
  --glow-blue:
  0 0 22px rgba(91, 157, 255, 0.4), 0 0 60px rgba(96, 165, 250, 0.18);
  --glow-green: 0 0 22px rgba(46, 255, 174, 0.4);
  --glow-violet:
  0 0 22px rgba(183, 148, 255, 0.45), 0 0 60px rgba(154, 109, 255, 0.2);

  --radius: 12px;
  --radius-lg: 18px;
}

body {
  background: var(--bg);
  background-image: radial-gradient(
  circle at 1px 1px,
  rgba(120, 200, 255, 0.04) 1px,
  transparent 1px
  );
  background-size: 26px 26px;
}

::selection {
  background: rgba(96, 165, 250, 0.4);
  color: var(--text);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.55);
}
::-moz-selection {
  background: rgba(96, 165, 250, 0.4);
  color: var(--text);
}

::-webkit-scrollbar-track {
  background: var(--bg-alt);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-primary), var(--purple));
  border: 2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--purple), var(--accent-primary));
}

/* ====
   AURORA BACKGROUND — slow drifting gradient blobs.
==== */
body::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  pointer-events: none;
  z-index: -2;
  background:
  radial-gradient(
    circle at 20% 25%,
    rgba(96, 165, 250, 0.12),
    transparent 50%
  ),
  radial-gradient(
    circle at 80% 70%,
    rgba(183, 148, 255, 0.1),
    transparent 50%
  );
  filter: blur(80px);
  animation: aurora-drift 60s linear infinite;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes aurora-drift {
  100% {
  transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

/* Soft scan line — drifts down once every 9s */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
  180deg,
  transparent 0%,
  rgba(96, 165, 250, 0.04) 49%,
  rgba(183, 148, 255, 0.06) 50%,
  transparent 51%
  );
  background-size: 100% 200%;
  animation: scanline-drift 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes scanline-drift {
  0% {
  background-position: 0% -100%;
  }
  100% {
  background-position: 0% 200%;
  }
}

/* ====
   DE-BOX — glassmorphism + glow rings, no hard borders.
==== */
.tile,
.price-card,
.choose-card,
.compare-tab-card,
.faq-item,
.who-col,
.founder-panel,
.transformation-panel,
.ce-personal,
.ce-share,
.ce-list,
.ce-day,
.ce-volume-block,
.tracker-pane,
.session-pane,
.win-callout,
.weight-class-widget,
.cal-widget,
.signup-card,
.assistant-panel,
.rest-timer-inner,
.tool-card,
.skip-modal-inner,
.onboard-card,
.pr-celebrate-inner {
  border: 0 !important;
  background: linear-gradient(
  180deg,
  rgba(20, 28, 60, 0.45),
  rgba(8, 12, 30, 0.55)
  ) !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  box-shadow:
  inset 0 1px 0 rgba(160, 200, 255, 0.08),
  inset 0 0 0 1px rgba(120, 200, 255, 0.1),
  0 10px 50px rgba(0, 0, 0, 0.45),
  0 0 30px rgba(96, 165, 250, 0.04) !important;
  border-radius: 16px !important;
  transition:
  box-shadow 0.32s ease,
  transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.choose-card:hover,
.tool-card:hover,
.faq-item:hover,
.tracker-pane:hover,
.session-pane:hover,
.price-card:hover {
  transform: translateY(-3px);
  box-shadow:
  inset 0 1px 0 rgba(160, 200, 255, 0.16),
  inset 0 0 0 1px rgba(120, 200, 255, 0.22),
  0 18px 60px rgba(0, 0, 0, 0.55),
  0 0 50px rgba(96, 165, 250, 0.12),
  0 0 80px rgba(183, 148, 255, 0.08) !important;
}

/* Featured pricing card — subtle accent halo */
.price-card-plus {
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.1),
  rgba(183, 148, 255, 0.08) 50%,
  rgba(8, 12, 30, 0.6)
  ) !important;
  box-shadow:
  inset 0 1px 0 rgba(160, 220, 255, 0.22),
  inset 0 0 0 1px rgba(96, 165, 250, 0.32),
  0 18px 60px rgba(0, 0, 0, 0.55),
  0 0 60px rgba(96, 165, 250, 0.2) !important;
}

/* ====
   INPUTS — glass + cyan focus glow
==== */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: rgba(8, 12, 30, 0.55) !important;
  border: 1px solid rgba(120, 200, 255, 0.14) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  transition:
  border-color 0.18s,
  box-shadow 0.18s,
  background 0.18s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.55) !important;
  background: rgba(8, 16, 40, 0.7) !important;
  box-shadow:
  0 0 0 3px rgba(96, 165, 250, 0.12),
  0 0 24px rgba(96, 165, 250, 0.18) !important;
}

/* ====
   BUTTONS — animated gradient + shimmer on hover
==== */
.btn-primary,
.ce-btn.primary {
  background: linear-gradient(
  120deg,
  var(--accent-primary) 0%,
  var(--purple) 50%,
  var(--accent-primary) 100%
  ) !important;
  background-size: 240% 240% !important;
  border: 0 !important;
  color: var(--surface) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow:
  0 0 22px rgba(96, 165, 250, 0.32),
  0 8px 24px rgba(0, 0, 0, 0.35) !important;
  animation: btn-gradient-drift 9s linear infinite;
  transition:
  transform 0.18s,
  box-shadow 0.22s,
  filter 0.22s;
}
.btn-primary:hover,
.ce-btn.primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
  0 0 32px rgba(96, 165, 250, 0.55),
  0 0 64px rgba(183, 148, 255, 0.22),
  0 12px 30px rgba(0, 0, 0, 0.45) !important;
  animation-duration: 3s;
}
@keyframes btn-gradient-drift {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}

.btn-secondary,
.ce-btn:not(.primary) {
  /* AA: bg was rgba(20,28,60,0.45) (translucent) + color var(--text). In light themes
   var(--text) is near-black -> near-black text on dark navy = 1.04:1 (invisible), and the
   translucent fill turns mid-tone on light surfaces so no text color passes everywhere.
   Opaque-ish dark fill + fixed light text -> predictable >=12:1 on any surface. */
  background: rgba(20, 28, 60, 0.92) !important;
  border: 1px solid rgba(120, 200, 255, 0.2) !important;
  color: #e9eef5 !important;
  box-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.06);
  transition:
  border-color 0.18s,
  color 0.18s,
  box-shadow 0.22s,
  transform 0.18s;
}
.btn-secondary:hover,
.ce-btn:not(.primary):hover {
  border-color: rgba(96, 165, 250, 0.65) !important;
  color: var(--accent-primary) !important;
  box-shadow:
  inset 0 1px 0 rgba(160, 200, 255, 0.12),
  0 0 22px rgba(96, 165, 250, 0.18);
  transform: translateY(-1px);
}

/* ====
   ANIMATED TEXT GRADIENT — H1 + accent spans
==== */
.hero h1,
.home-wordmark,
h1 .accent-primary,
.h1-accent,
.accent-primary,
.signup-highlight {
  background-image: linear-gradient(
  120deg,
  var(--text) 0%,
  var(--accent-primary) 35%,
  var(--purple) 65%,
  var(--text) 100%
  ) !important;
  background-size: 240% 240% !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: text-gradient-drift 14s linear infinite;
  filter: drop-shadow(0 0 18px rgba(96, 165, 250, 0.2));
}
@keyframes text-gradient-drift {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}

/* HUD markers + monospace tags glow softly cyan */
.hud-marker,
.ce-personal-tag,
.ce-share-tag,
.ce-list-tag,
.tracker-label,
.tile-label {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

/* ====
   HERO ORB — breathe + recolor
==== */
.hero-orb {
  background: radial-gradient(
  circle,
  rgba(96, 165, 250, 0.3),
  rgba(183, 148, 255, 0.18) 40%,
  transparent 75%
  ) !important;
  filter: blur(48px);
  animation: orb-breath 4.2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes orb-breath {
  0%,
  100% {
  transform: scale(1) translate3d(0, 0, 0);
  opacity: 0.85;
  }
  50% {
  transform: scale(1.1) translate3d(0, -1%, 0);
  opacity: 1;
  }
}

/* ====
   START-SESSION FLOATING BUTTON — pulse glow
==== */
.session-start-btn {
  background: linear-gradient(135deg, var(--accent-primary), var(--purple)) !important;
  color: var(--surface) !important;
  box-shadow:
  0 0 28px rgba(96, 165, 250, 0.45),
  0 0 64px rgba(183, 148, 255, 0.22),
  0 8px 24px rgba(0, 0, 0, 0.45) !important;
  animation: pulse-start 3.6s ease-in-out infinite;
}
@keyframes pulse-start {
  0%,
  100% {
  box-shadow:
    0 0 28px rgba(96, 165, 250, 0.45),
    0 0 64px rgba(183, 148, 255, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translate3d(0, 0, 0);
  }
  50% {
  box-shadow:
    0 0 44px rgba(96, 165, 250, 0.7),
    0 0 100px rgba(183, 148, 255, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translate3d(0, -2px, 0);
  }
}

/* ====
   STICKY MOBILE CTA — match new accent
==== */
.sticky-mobile-cta {
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.22),
  rgba(183, 148, 255, 0.16)
  ) !important;
  border: 1px solid rgba(120, 200, 255, 0.25) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ====
   TOPNAV / SIDEBAR — softer separators
==== */
.topnav,
.sidebar {
  background: linear-gradient(
  180deg,
  rgba(8, 12, 30, 0.85),
  rgba(8, 12, 30, 0.65)
  ) !important;
  border-bottom: 1px solid rgba(120, 200, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Nav link hover */
.navlinks a:hover,
.sidebar-nav a:hover {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}

/* ====
   QUIZ OPTIONS — glow-ring chips, active state cyan
==== */
.quiz-opt {
  background: rgba(20, 28, 60, 0.35) !important;
  border: 1px solid rgba(120, 200, 255, 0.18) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  transition:
  border-color 0.18s,
  color 0.18s,
  transform 0.18s,
  box-shadow 0.18s,
  background 0.18s !important;
}
.quiz-opt:hover {
  border-color: rgba(96, 165, 250, 0.55) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.18);
  transform: translateY(-1px);
}
.quiz-opt.active {
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.18),
  rgba(183, 148, 255, 0.12)
  ) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  color: var(--text) !important;
  box-shadow:
  inset 0 0 0 1px rgba(96, 165, 250, 0.35),
  0 0 28px rgba(96, 165, 250, 0.22);
}

/* ====
   QUIZ DOTS — cyan
==== */
.quiz-dot {
  background: rgba(120, 200, 255, 0.18) !important;
  transition:
  background 0.18s,
  box-shadow 0.18s;
}
.quiz-dot.active {
  background: var(--accent-primary) !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.7);
}

/* ====
   SECTION REVEAL — gentle slide-up + opacity (the .reveal class
   is already handled in JS; this just adds a graceful default)
==== */
/* Section reveals — leave the existing ".reveal.visible" handler alone.
   We only sweeten the transition timing here. */
.reveal {
  transition:
  opacity 0.7s ease,
  transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

/* ====
   EKG PULSE LINE — cyan glow
==== */
.hero-ekg-line {
  stroke: var(--accent-primary);
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.55));
}

/* ====
   FX-SPOTLIGHT — cursor-follow vignette, recolor to cyan/violet
==== */
.fx-spotlight {
  background: radial-gradient(
  520px circle at var(--cx, 50vw) var(--cy, 50vh),
  rgba(96, 165, 250, 0.1),
  rgba(0, 0, 0, 0.55) 70%
  ) !important;
}

/* ====
   SCROLL PROGRESS BAR — cyan→violet
==== */
.scroll-progress-bar {
  background: linear-gradient(90deg, var(--accent-primary), var(--purple)) !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.45) !important;
}

/* ====
   DAY TICKER — cyan ribbon, glow on bar fill
==== */
.day-ticker {
  background: rgba(8, 12, 30, 0.72) !important;
  border: 1px solid rgba(120, 200, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.day-ticker-bar-fill {
  background: linear-gradient(90deg, var(--accent-primary), var(--purple)) !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

/* ====
   PAGE PAGER & BREADCRUMB — soft chrome
==== */
.page-pager,
.page-crumb {
  background: rgba(8, 12, 30, 0.65) !important;
  border-top: 1px solid rgba(120, 200, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ====
   TOPNAV CTA — accent matches new brand
==== */
.navlinks .cta {
  background: linear-gradient(120deg, var(--accent-primary), var(--purple)) !important;
  background-size: 220% 220% !important;
  color: var(--surface) !important;
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.32);
  animation: btn-gradient-drift 9s linear infinite;
}

/* ====
   QUICK MICRO-FX — hero stat number glow
==== */
.hero-stat-num,
.hm-num,
.t-num,
.tracker-stat-num,
.ss-num {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 14px rgba(96, 165, 250, 0.35);
}

/* ====
   SIDEBAR LINKS — active state cyan glow
==== */
.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

/* ====
   BRAND MARK / LOGO GRADIENT — recolor stops via filter
   The brand SVG uses inline gradient stops with amber colors.
   We can't recolor inline SVG via CSS reliably, so we apply a
   subtle hue-rotate filter to flip the warm tones to cool.
==== */
.brand-mark svg,
.sidebar-brand-mark svg {
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.45));
}

/* ====
   TOAST NOTIFICATIONS — match palette
==== */
.toast-container > * {
  background: rgba(8, 12, 30, 0.85) !important;
  border: 1px solid rgba(120, 200, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ====
   REDUCED-MOTION — accessibility guard
==== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  }
  body::before,
  body::after {
  animation: none !important;
  }
  .session-start-btn {
  animation: none !important;
  }
  .hero-orb {
  animation: none !important;
  }
  /* Neutralize hover transforms the duration-only guard above misses (vestibular safety, WCAG 2.3.3) */
  .settings-toggle:hover,
  .qs-star:hover,
  .cal-grid > div > span:hover {
  transform: none !important;
  }
}

/* ====
   ROUND-2 OVERRIDES — full de-box + darker bg + tighter rhythm.
==== */
:root {
  --bg: #04060e;
  --bg-alt: #04060e;
  --bg-tools: #04060e;
  --bg-buy: #04060e;
  --bg-wedge: #04060e;
  --surface: transparent;
  --surface-2: transparent;
  --surface-3: transparent;
}

body {
  background: var(--bg);
  background-image: radial-gradient(
  circle at 1px 1px,
  rgba(120, 200, 255, 0.035) 1px,
  transparent 1px
  );
  background-size: 28px 28px;
}

body::before {
  background:
  radial-gradient(
    circle at 18% 22%,
    rgba(96, 165, 250, 0.22),
    transparent 50%
  ),
  radial-gradient(
    circle at 82% 75%,
    rgba(183, 148, 255, 0.2),
    transparent 50%
  ),
  radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.08), transparent 60%);
}

.tile,
.price-card,
.choose-card,
.compare-tab-card,
.faq-item,
.who-col,
.founder-panel,
.transformation-panel,
.ce-personal,
.ce-share,
.ce-list,
.ce-day,
.ce-volume-block,
.tracker-pane,
.session-pane,
.win-callout,
.weight-class-widget,
.cal-widget,
.signup-card,
.tool-card,
.skip-modal-inner,
.onboard-card,
.pr-celebrate-inner,
.tools-grid > div,
.pricing-grid > div:not(.price-card-premium),
.choose-grid > a,
.who-grid > div,
.inside-grid > div {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 28px 0 !important;
  transition:
  opacity 0.32s ease,
  transform 0.32s ease;
}

.founder-panel[style],
.transformation-panel[style] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 28px 0 !important;
}

.choose-card:hover,
.tool-card:hover,
.faq-item:hover,
.tracker-pane:hover,
.session-pane:hover,
.price-card:hover,
.tile:hover {
  transform: none !important;
  box-shadow: none !important;
}
.choose-card:hover h3,
.tool-card:hover h3,
.faq-item:hover summary,
.price-card:hover h3 {
  color: var(--accent-primary) !important;
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.4);
}

.price-card-plus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  padding-left: 28px !important;
}
.price-card-plus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-primary), var(--purple));
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.5);
  border-radius: 2px;
}

.tools-grid > div + div::before,
.pricing-grid > div + div::before,
.inside-grid > div + div::before,
.who-grid > div + div::before,
.faq-list > details + details::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 28px;
  background: linear-gradient(
  90deg,
  transparent 0%,
  rgba(96, 165, 250, 0.18) 30%,
  rgba(183, 148, 255, 0.18) 70%,
  transparent 100%
  );
}

.tools-grid,
.pricing-grid,
.inside-grid,
.who-grid {
  display: block !important;
  max-width: 1024px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.choose-grid {
  gap: 32px !important;
  max-width: 1024px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-item summary {
  padding: 18px 0 !important;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  border: 0 !important;
  background: transparent !important;
  transition: color 0.2s;
}
.faq-item summary:hover {
  color: var(--accent-primary);
}
.faq-item[open] summary {
  color: var(--accent-primary);
}
.faq-body {
  padding: 0 0 18px !important;
}

.section,
.section-quiz,
.section-alt,
.section-wedge,
.section-buy,
.section-tools,
.section-trust,
.section-inside {
  background: transparent !important;
  background-image: none !important;
}
.container,
.container.narrow {
  padding-top: 56px;
  padding-bottom: 56px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(120, 200, 255, 0.18) !important;
  border-radius: 10px !important;
}

.btn-primary,
.btn-secondary,
.ce-btn {
  border-radius: 10px !important;
  padding: 12px 22px !important;
}

.topnav,
.sidebar {
  background: linear-gradient(
  180deg,
  rgba(4, 6, 14, 0.78),
  rgba(4, 6, 14, 0.55)
  ) !important;
  border-bottom: 1px solid rgba(120, 200, 255, 0.06) !important;
}

/* SIGNUP PAGE — dedicated route */
.signup-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 88px 24px 96px !important;
  text-align: left;
}
.signup-page-kicker {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
  margin: 0 0 14px;
}
.signup-page-title {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.signup-page-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 480px;
}

.signup-page-anchor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 28px;
}
.signup-page-anchor-tier {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  background: rgba(0, 0, 0, 0.2);
  transition:
  transform 0.2s,
  box-shadow 0.2s;
}
.signup-page-anchor-tier strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.signup-page-anchor-tier .anchor-price {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1;
}
.signup-page-anchor-tier .anchor-price span {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 400;
}
.signup-page-anchor-tier .anchor-note {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.signup-page-anchor-tier.active {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.05);
  box-shadow: 0 0 24px rgba(96, 165, 250, 0.1);
  transform: translateY(-4px);
}
.signup-page-anchor-tier.active .anchor-price {
  color: var(--text);
}

/* Signup value-card readability: active free tier sits on the light paper surface. */
[data-page="signup"] .signup-page-anchor-tier {
  border-color: rgba(16, 17, 20, 0.18) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: 0 8px 18px rgba(7, 14, 28, 0.06);
}

[data-page="signup"] .signup-page-anchor-tier strong {
  color: var(--border) !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-anchor-tier .anchor-price {
  color: var(--surface) !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-anchor-tier .anchor-note,
[data-page="signup"] .signup-page-anchor-tier .anchor-price span {
  color: var(--border-bright) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-anchor-tier.active {
  border-color: rgba(0, 123, 141, 0.58) !important;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.16),
  rgba(96, 165, 250, 0.07)
  ) !important;
  box-shadow:
  inset 0 0 0 1px rgba(0, 123, 141, 0.14),
  0 10px 22px rgba(7, 14, 28, 0.08);
  transform: translateY(-2px);
}

[data-page="signup"] .signup-page-anchor-tier.active .anchor-price {
  color: var(--blue-glow) !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-anchor-tier.active strong,
[data-page="signup"] .signup-page-anchor-tier.active .anchor-price span {
  color: var(--blue) !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-field-label,
[data-page="signup"] .signup-page-vertical legend {
  color: var(--blue) !important;
  text-shadow: none !important;
}

[data-page="signup"] .signup-page-field input[type="email"],
[data-page="signup"] .signup-page-field input[type="text"] {
  min-height: 48px;
  border: 1px solid rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: 0 8px 18px rgba(7, 14, 28, 0.06);
}

[data-page="signup"] .signup-page-field input[type="email"]::placeholder,
[data-page="signup"] .signup-page-field input[type="text"]::placeholder {
  color: var(--text-dim) !important;
  opacity: 1 !important;
}

[data-page="signup"] .signup-page-field input[type="email"]:focus,
[data-page="signup"] .signup-page-field input[type="text"]:focus {
  border-color: rgba(0, 123, 141, 0.78) !important;
  box-shadow:
  0 0 0 3px rgba(96, 165, 250, 0.16),
  0 8px 18px rgba(7, 14, 28, 0.08);
}

[data-page="signup"] .signup-page-radio {
  min-height: 48px;
  border-color: rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
}

[data-page="signup"] .signup-page-radio:hover,
[data-page="signup"] .signup-page-radio:focus-within {
  border-color: rgba(0, 123, 141, 0.58) !important;
  background: rgba(96, 165, 250, 0.08) !important;
}

[data-page="signup"] .signup-page-radio:has(input:checked) {
  border-color: rgba(0, 123, 141, 0.72) !important;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.08)
  ) !important;
  color: var(--bg-tools) !important;
}

@media (max-width: 480px) {
  .signup-page-anchor {
  grid-template-columns: 1fr;
  gap: 12px;
  }
  .signup-page-anchor-tier.active {
  transform: none;
  }
}

.signup-page-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.signup-page-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signup-page-field-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.signup-page-field input[type="email"],
.signup-page-field input[type="text"] {
  padding: 14px 16px !important;
  font-size: 1rem !important;
}
.signup-page-field-error {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: #ff6680;
  min-height: 1.2em;
}
.signup-page-vertical legend {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  margin: 0 0 10px;
}
.signup-page-vertical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.signup-page-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
  border-color 0.18s,
  background 0.18s,
  box-shadow 0.18s;
}
.signup-page-radio:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.06);
}
.signup-page-radio input[type="radio"] {
  accent-color: var(--accent-primary);
}
.signup-page-radio:has(input:checked) {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(96, 165, 250, 0.1);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.18);
}
.signup-page-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.signup-page-consent input {
  margin-top: 4px;
  accent-color: var(--accent-primary);
}
.signup-page-consent a {
  color: var(--accent-primary);
  text-decoration: underline;
}
.signup-page-consent-error {
  margin-top: -12px;
}
.signup-page-submit {
  margin-top: 8px;
  width: 100%;
  padding: 16px 22px !important;
  font-size: 1.02rem !important;
}
.signup-page-foot {
  margin: 22px 0 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  text-align: center;
}
.signup-page-success {
  text-align: center;
  padding: 56px 0 0;
}
.signup-page-success-glyph {
  font-size: 3.2rem;
  color: #2effae;
  filter: drop-shadow(0 0 24px rgba(46, 255, 174, 0.55));
  margin: 0 0 16px;
  font-weight: 200;
}
.signup-page-success-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 0 14px;
}
.signup-page-success-line {
  color: var(--text-muted);
  margin: 0 0 18px;
}
.signup-page-success-meta {
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0 0 32px;
}

/* Gym Mode — one-hand floor cockpit. */
.gym-mode-section .lead-text {
  max-width: 480px;
}

.gym-mode-shell {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.gym-mode-head,
.gym-mode-quickstart,
.gym-mode-readiness,
.gym-mode-command-deck,
.gym-mode-plan-deck,
.gym-mode-card,
.gym-mode-log,
.gym-mode-notes {
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.08);
}

.gym-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}

.gym-mode-quickstart {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  background:
  linear-gradient(135deg, rgba(255, 60, 88, 0.12), rgba(96, 165, 250, 0.08)),
  rgba(0, 0, 0, 0.3);
}

.gym-mode-quickstart strong {
  display: block;
  margin: 0 0 6px;
  font-size: 1.06rem;
}

.gym-mode-quickstart p,
.gym-mode-quickstart ol {
  margin: 0;
  color: var(--text-muted);
}

.gym-mode-quickstart ol {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.gym-mode-readiness {
  padding: 16px;
}

.gym-mode-readiness ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gym-mode-readiness li {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.gym-mode-readiness li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-dim);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}

.gym-mode-readiness li.ready-ok::before {
  background: var(--green-light);
  box-shadow: 0 0 18px rgba(46, 255, 174, 0.45);
}

.gym-mode-readiness li.ready-warn::before {
  background: var(--amber);
  box-shadow: 0 0 18px rgba(255, 203, 107, 0.42);
}

.gym-mode-readiness strong {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-base);
}
.session-progress::-webkit-progress-bar {
  background: transparent;
}
.session-progress::-webkit-progress-value {
  
  transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  
}
.session-progress::-moz-progress-bar {
  
  transition: width 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  
}

.session-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px;
}

.gym-mode-readiness span {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gym-mode-command-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-color: rgba(46, 255, 174, 0.34);
  background:
  linear-gradient(135deg, rgba(46, 255, 174, 0.1), rgba(96, 165, 250, 0.07)),
  rgba(0, 0, 0, 0.32);
  position: relative;
  overflow: hidden;
}

.biomech-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: transform;
}

.biomech-hinge-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.gym-instruction-drawer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.gym-instruction-summary {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  text-align: left;
}

.gym-instruction-summary::after {
  content: "▼";
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.gym-instruction-summary[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.gym-instruction-list {
  margin: 0;
  padding: 0 16px 16px 36px;
  list-style: disc;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.gym-instruction-drawer li {
  margin-bottom: 8px;
}

.gym-instruction-drawer li:last-child {
  margin-bottom: 0;
}

.gym-mode-command-main,
.gym-mode-command-side {
  position: relative;
  z-index: 1;
}

.gym-mode-shell.is-pain-boundary .gym-mode-command-deck {
  border-color: rgba(255, 203, 107, 0.52);
  background:
  linear-gradient(
    135deg,
    rgba(255, 203, 107, 0.12),
    rgba(255, 78, 102, 0.08)
  ),
  rgba(0, 0, 0, 0.34);
}

.gym-mode-command-main strong {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(1.18rem, 3vw, 1.55rem);
  overflow-wrap: anywhere;
}

.gym-mode-command-main p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.gym-mode-command-side {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: 180px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.gym-mode-command-link {
  min-height: 45px;
  padding: 10px 16px;
  border: 1px solid rgba(46, 255, 174, 0.36);
  border-radius: var(--radius);
  background: rgba(46, 255, 174, 0.08);
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 800;
  cursor: pointer;
}

.gym-mode-command-link:hover,
.gym-mode-command-link:focus-visible {
  border-color: var(--green-light);
  background: rgba(46, 255, 174, 0.15);
}

/* Command-link motion — reduced-motion-gated press + smooth hover (was ungated, fired for the reduce cohort). Motion Consent per thesis. */
@media (prefers-reduced-motion: no-preference) {
  .gym-mode-command-link { transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease, background 0.15s ease; }
  .gym-mode-command-link:active { transform: scale(0.97); }
}

.gym-mode-command-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gym-mode-command-session {
  display: none;
}

.gym-mode-shell.is-pain-boundary .gym-mode-command-link {
  border-color: rgba(255, 203, 107, 0.56);
  background: rgba(255, 203, 107, 0.1);
}

.gym-mode-shell.is-pain-boundary .gym-mode-command-link:hover,
.gym-mode-shell.is-pain-boundary .gym-mode-command-link:focus-visible {
  border-color: var(--amber);
  background: rgba(255, 203, 107, 0.18);
}

.gym-mode-plan-deck {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.gym-mode-plan-deck-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.gym-mode-plan-deck-head strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.gym-mode-day-tabs,
.gym-mode-plan-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gym-mode-day-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gym-mode-day-tabs button {
  width: 44px;
  min-height: 44px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text-muted);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Day-tab select motion — smooth the active swap + a tap press, motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .gym-mode-day-tabs button:active { transform: scale(0.94); }
}

.gym-mode-day-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.16);
  color: var(--text);
}

.gym-mode-day-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gym-mode-plan-checklist {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.gym-mode-plan-checklist button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px 48px minmax(0, 1fr) minmax(90px, auto) minmax(
    68px,
    auto
  );
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(120, 200, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.gym-mode-plan-checklist button:hover,
.gym-mode-plan-checklist button:focus-visible,
.gym-mode-plan-checklist button[aria-current="true"] {
  border-color: rgba(46, 255, 174, 0.52);
  background: rgba(46, 255, 174, 0.08);
}

/* Plan checklist rows — motion-as-reward + distinct brand-blue selected state (vs the green hover, which now reads as transient). */
@media (prefers-reduced-motion: no-preference) {
  .gym-mode-plan-checklist button { transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease; }
  .gym-mode-plan-checklist button:active { transform: scale(0.985); }
}
.gym-mode-plan-checklist button[aria-current="true"] {
  border-color: var(--blue-glow);
  box-shadow: inset 0 0 0 1px var(--blue-glow);
}

.gym-mode-plan-checklist strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gym-mode-plan-day,
.gym-mode-plan-phase,
.gym-mode-plan-dose,
.gym-mode-plan-progress {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.gym-mode-plan-day,
.gym-mode-plan-phase,
.gym-mode-plan-progress {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  color: var(--text-label);
}
.gym-mode-plan-phase {
  min-width: 42px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 1px solid rgba(120, 200, 255, 0.16);
  background: rgba(120, 200, 255, 0.07);
}
.gym-mode-plan-phase-func {
  color: var(--blue-light);
  background: rgba(96, 165, 250, 0.1);
}
.gym-mode-plan-phase-lift {
  color: var(--amber);
  background: rgba(255, 203, 107, 0.1);
}
.gym-mode-plan-phase-rec {
  color: var(--green-light);
  background: rgba(46, 255, 122, 0.1);
}

.gym-mode-plan-dose {
  justify-self: end;
  overflow-wrap: anywhere;
}

.gym-mode-plan-progress {
  justify-self: end;
  background: rgba(46, 255, 174, 0.1);
  color: var(--green-light);
  white-space: nowrap;
}

.gym-mode-plan-checklist li.is-done .gym-mode-plan-progress {
  background: rgba(46, 255, 174, 0.18);
}

.gym-mode-plan-checklist li.is-paused .gym-mode-plan-progress {
  background: rgba(255, 203, 107, 0.14);
  color: var(--amber);
}

.gym-mode-plan-empty {
  padding: 12px;
  border: 1px dashed rgba(120, 200, 255, 0.2);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.88rem;
}

.gym-mode-kicker,
.gym-mode-label,
.gym-mode-log span,
.gym-mode-notes span {
  display: block;
  margin: 0 0 6px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.gym-mode-head h3 {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
}

.gym-mode-head p,
.gym-mode-card p,
.gym-mode-status {
  margin: 0;
  color: var(--text-muted);
}

.gym-mode-confidence {
  margin-top: 8px !important;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--green-light) !important;
}

.gym-mode-cue {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.75;
  line-height: 1.4;
}

.gym-mode-feel {
  opacity: 0.55;
}

.gym-mode-subs {
  margin-top: 10px;
}

.gym-mode-subs-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gym-mode-subs-list {
  display: none;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.gym-mode-sub-card {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gym-mode-sub-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.gym-mode-sub-name {
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gym-mode-sub-meta,
.gym-mode-sub-reason {
  display: block;
  color: var(--text-muted);
}

.gym-mode-sub-why {
  width: fit-content;
  margin-top: 2px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gym-mode-sub-use {
  width: fit-content;
  min-height: 30px;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: var(--radius);
  background: rgba(96, 165, 250, 0.08);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.gym-mode-sub-use:hover {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.15);
}

.gym-mode-sub-exact {
  display: block;
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: rgba(96, 165, 250, 0.06);
  color: var(--text);
}

.gym-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gym-mode-card {
  padding: 18px;
}

.gym-mode-card strong {
  display: block;
  margin: 0 0 8px;
  font-size: 1.25rem;
}

#gymModeRestCue {
  min-height: 3.2em;
  font-size: 0.86rem;
  line-height: 1.45;
}

.gym-mode-primary {
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(
  135deg,
  rgba(96, 165, 250, 0.12),
  rgba(183, 148, 255, 0.08)
  );
}

.gym-mode-log {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.7fr 0.7fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 16px;
}

.gym-mode-log label,
.gym-mode-notes label {
  display: grid;
  gap: 4px;
}

.gym-mode-log input,
.gym-mode-log select,
.gym-mode-notes textarea {
  width: 100%;
}

/* Gym log deck — field focus highlight (brand-blue ring), motion-gated. The hero deck's
   fields now respond crisply to a tap. */
.gym-mode-log input:focus,
.gym-mode-log select:focus,
.gym-mode-notes textarea:focus {
  border-color: var(--blue-glow);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
@media (prefers-reduced-motion: no-preference) {
  .gym-mode-log input,
  .gym-mode-log select,
  .gym-mode-notes textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
}

.gym-mode-notes {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.gym-mode-trial-log {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 200, 255, 0.18);
}

.gym-mode-trial-head strong {
  display: block;
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: 1rem;
}

.gym-mode-trial-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.gym-mode-trial-questions,
.gym-mode-trial-controls {
  display: grid;
  gap: 10px;
  align-items: end;
}

.gym-mode-trial-questions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gym-mode-trial-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

.gym-mode-trial-questions select,
.gym-mode-trial-controls select,
.gym-mode-trial-controls textarea {
  width: 100%;
}

.gym-mode-trial-save {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: var(--radius);
  background: rgba(96, 165, 250, 0.08);
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 800;
  cursor: pointer;
}

.gym-mode-trial-save:hover,
.gym-mode-trial-save:focus-visible {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.15);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gym-mode-trial-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gym-mode-trial-list li {
  display: grid;
  gap: 3px;
  padding: 9px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gym-mode-trial-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.gym-mode-trial-meta {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gym-mode-trial-list strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gym-mode-trial-answer {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.gym-mode-status {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
}

@media (max-width: 1024px) {
  .gym-mode-head,
  .gym-mode-quickstart,
  .gym-mode-readiness ul,
  .gym-mode-command-deck,
  .gym-mode-grid,
  .gym-mode-log {
  grid-template-columns: 1fr;
  }

  .gym-mode-shell {
  gap: 10px;
  margin-top: 16px;
  }

  .gym-mode-head {
  align-items: stretch;
  flex-direction: column;
  padding: 14px;
  }

  .gym-mode-plan-link,
  .gym-mode-command-link,
  .gym-mode-log .btn,
  .gym-mode-trial-save {
  width: 100%;
  text-align: center;
  }

  .gym-mode-command-side {
  justify-items: stretch;
  min-width: 0;
  }

  .gym-mode-plan-checklist button {
  grid-template-columns: 38px 48px minmax(0, 1fr);
  }

  .gym-mode-trial-questions,
  .gym-mode-trial-controls {
  grid-template-columns: 1fr;
  }

  .gym-mode-plan-dose,
  .gym-mode-plan-progress {
  justify-self: start;
  }
}

@media (max-width: 480px) {
  body[data-current-page="gym"] .page-pager,
  body[data-current-page="gym"] .session-start-btn {
  display: none !important;
  }

  body[data-current-page="gym"] .day-ticker,
  body[data-current-page="gym"] .assistant-toggle,
  body[data-current-page="gym"] .assistant-panel {
  display: none !important;
  }

  body[data-current-page="gym"] .page-crumb {
  padding-left: 58px;
  padding-right: 12px;
  }

  body[data-current-page="gym"] .crumb-meta {
  display: none;
  }

  body[data-current-page="gym"] .gym-mode-section {
  padding-top: 0;
  }

  body[data-current-page="gym"] .gym-mode-section .container.narrow {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 72px;
  }

  body[data-current-page="gym"] .gym-mode-section h2 {
  font-size: clamp(1.75rem, calc(1.39rem + 1.82vw), 2.75rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  }

  body[data-current-page="gym"] .gym-mode-section .lead-text {
  max-width: 100%;
  font-size: 0.98rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  }

  body[data-current-page="gym"] .gym-mode-shell {
  gap: 14px;
  margin-top: 24px;
  }

  body[data-current-page="gym"] .gym-mode-head,
  body[data-current-page="gym"] .gym-mode-card,
  body[data-current-page="gym"] .gym-mode-readiness,
  body[data-current-page="gym"] .gym-mode-command-deck,
  body[data-current-page="gym"] .gym-mode-plan-deck,
  body[data-current-page="gym"] .gym-mode-log,
  body[data-current-page="gym"] .gym-mode-notes {
  padding: 16px;
  }

  body[data-current-page="gym"] .gym-mode-card strong {
  font-size: 1.12rem;
  overflow-wrap: anywhere;
  }

  body[data-current-page="gym"] .gym-mode-plan-deck-head {
  display: grid;
  align-items: start;
  justify-content: stretch;
  gap: 4px;
  }

  body[data-current-page="gym"] .gym-mode-plan-deck-head .gym-mode-label {
  margin-bottom: 0;
  }

  body[data-current-page="gym"] .gym-mode-plan-deck-head strong {
  width: 100%;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
  }

  body[data-current-page="gym"] .gym-mode-plan-checklist button {
  align-items: start;
  grid-template-columns: 38px 48px minmax(0, 1fr);
  }

  body[data-current-page="gym"] .gym-mode-plan-day {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  }

  body[data-current-page="gym"] .gym-mode-plan-phase {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  }

  body[data-current-page="gym"] .gym-mode-plan-checklist strong,
  body[data-current-page="gym"] .gym-mode-plan-dose,
  body[data-current-page="gym"] .gym-mode-plan-progress {
  grid-column: 3;
  justify-self: start;
  }

  body[data-current-page="gym"] .gym-mode-plan-checklist strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.22;
  }

  body[data-current-page="gym"] .gym-mode-plan-dose {
  line-height: 1.28;
  }

  .sticky-mobile-cta {
  justify-content: space-between;
  }

  .smc-line,
  .smc-button {
  flex: 0 0 auto;
  white-space: nowrap;
  }

  .smc-button {
  font-size: 0.84rem;
  overflow: visible;
  text-overflow: clip;
  }
}

/* Gym-phone pass: keep the home hero and sticky CTA inside narrow screens. */
@media (max-width: 1024px) {
  html,
  body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  }

  .hero {
  width: 100% !important;
  max-width: 100vw !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  }

  .hero-inner,
  .hero .lead-big,
  .hero-live {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  }

  .hero .lead-big {
  font-size: 1.04rem !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  }

  .hero-live {
  display: flex !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  }

  .sticky-mobile-cta {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
  gap: 10px !important;
  overflow: hidden !important;
  }

  .smc-line,
  .smc-button {
  min-width: 0 !important;
  }

  .smc-line {
  flex: 0 1 auto !important;
  }

  .smc-button {
  flex: 1 1 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  }
}
.signup-page-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ====
   ROUND-3 VISUAL UPGRADES — animated H2 underline, shimmer
   numbers, button ripple, glitch hover, advanced section reveal.
==== */

/* H2 with animated cyan→violet underline that draws on reveal */
.section h2,
.signup-page-title {
  position: relative;
  display: inline-block;
}
.section h2::after,
.signup-page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 2px;
  width: 0;
  background: linear-gradient(
  90deg,
  var(--accent-primary) 0%,
  var(--purple) 70%,
  transparent 100%
  );
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.55);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s;
}
.reveal.visible h2::after,
.reveal.visible .signup-page-title::after,
.page-active h2::after,
.page-active .signup-page-title::after,
.signup-page-title::after {
  width: 88px;
}

/* Shimmer on hero stat numbers + tracker stat numbers */
.hero-stat-num,
.hm-num,
.tracker-stat-num,
.too-num,
.too-num-hi,
.tr-score-num,
.t-num,
.ss-num {
  background-image: linear-gradient(
  120deg,
  var(--accent-primary) 0%,
  var(--purple) 35%,
  var(--text) 60%,
  var(--accent-primary) 100%
  );
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none !important;
  animation: stat-shimmer 8s linear infinite;
}
@keyframes stat-shimmer {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}

/* Click ripple on primary buttons */
.btn-primary,
.ce-btn.primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.ce-btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
  circle at var(--mx, 50%) var(--my, 50%),
  rgba(255, 255, 255, 0.45) 0%,
  transparent 50%
  );
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.btn-primary:active::after,
.ce-btn.primary:active::after {
  opacity: 1;
  transition: opacity 0.05s;
}

.btn-primary:active, .btn.btn-primary:active, .cta:active {
  animation: ctaPress 0.14s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ctaPress {
  0% { transform: scale(1); }
  45% { transform: scale(0.965); }
  100% { transform: scale(1); }
}
/* Subtle text glitch on hero h1 hover */
.hero h1:hover {
  filter: drop-shadow(1px 0 0 rgba(96, 165, 250, 0.55))
  drop-shadow(-1px 0 0 rgba(183, 148, 255, 0.45))
  drop-shadow(0 0 22px rgba(96, 165, 250, 0.3));
}

/* Stagger reveal for items in a list */
.reveal.visible li,
.page-active li {
  animation: list-stagger 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.reveal.visible li:nth-child(1) {
  animation-delay: 0.05s;
}
.reveal.visible li:nth-child(2) {
  animation-delay: 0.1s;
}
.reveal.visible li:nth-child(3) {
  animation-delay: 0.15s;
}
.reveal.visible li:nth-child(4) {
  animation-delay: 0.2s;
}
.reveal.visible li:nth-child(5) {
  animation-delay: 0.25s;
}
.reveal.visible li:nth-child(6) {
  animation-delay: 0.3s;
}
.reveal.visible li:nth-child(7) {
  animation-delay: 0.35s;
}
.reveal.visible li:nth-child(8) {
  animation-delay: 0.4s;
}
@keyframes list-stagger {
  from {
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
  }
  to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  }
}

/* Cyan caret glow on focused inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
  caret-color: var(--accent-primary);
}

/* Selection ring on quiz options gets subtle pulse */
.quiz-opt.active {
  animation: quiz-pulse 2.6s ease-in-out infinite;
}
@keyframes quiz-pulse {
  0%,
  100% {
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.35),
    0 0 28px rgba(96, 165, 250, 0.22);
  }
  50% {
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.55),
    0 0 44px rgba(96, 165, 250, 0.35);
  }
}

/* H1 hero — extra polish: add a faint reflective sheen on first reveal */
@keyframes hero-sheen {
  from {
  filter: drop-shadow(0 0 26px rgba(96, 165, 250, 0.1));
  }
  to {
  filter: drop-shadow(0 0 46px rgba(96, 165, 250, 0.3));
  }
}
.hero h1 {
  animation: hero-sheen 6s ease-in-out infinite alternate;
}

@media (max-width: 480px) {
  body[data-current-page="gym"] .gym-mode-section h2 {
  display: block !important;
  max-width: 100% !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  }

  body[data-current-page="gym"] .gym-mode-section h2::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
  }

  body[data-current-page="gym"] .gym-mode-section .lead-text {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  }

  .sticky-mobile-cta .smc-button {
  flex: 1 1 100% !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  }

  .sticky-mobile-cta {
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  }

  .sticky-mobile-cta .smc-line {
  display: none !important;
  }
}

@media (max-width: 480px) {
  .home-intro {
  padding-left: 18px !important;
  padding-right: 18px !important;
  }

  .home-frame,
  .home-subtitle,
  .home-rotator-line {
  max-width: 100% !important;
  min-width: 0 !important;
  }

  .home-subtitle,
  .home-rotator-line {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  }


  .sticky-mobile-cta {
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  }

  .sticky-mobile-cta .smc-line {
  display: none !important;
  }

  .sticky-mobile-cta .smc-button {
  margin: 0 auto !important;
  font-size: 0.9rem !important;
  }
}

@media (max-width: 1024px) {
  .sticky-mobile-cta {
  justify-content: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  }

  .sticky-mobile-cta .smc-line {
  display: none !important;
  }

  .sticky-mobile-cta .smc-button {
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  }
}

/* Reduced-motion guard reapplied for the new animations */
@media (prefers-reduced-motion: reduce) {
  .section h2::after,
  .signup-page-title::after {
  transition: none !important;
  width: 88px !important;
  }
  .hero-stat-num,
  .hm-num,
  .tracker-stat-num,
  .too-num,
  .too-num-hi,
  .tr-score-num,
  .t-num,
  .ss-num,
  .quiz-opt.active,
  .hero h1 {
  animation: none !important;
  }
  .reveal.visible li {
  animation: none !important;
  }
}

/* ====
   E5A FUTURE HORIZON — first-viewport progression primitive.
   Keeps the futuristic look tied to product truth: now, next set,
   full-year compounding.
==== */
.future-horizon {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto 34px;
  padding: 18px clamp(14px, 3vw, 28px) 16px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 16px;
  background:
  linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.08),
    rgba(183, 148, 255, 0.045)
  ),
  repeating-linear-gradient(
    90deg,
    rgba(120, 200, 255, 0.08) 0 1px,
    transparent 1px 54px
  );
  box-shadow:
  inset 0 1px 0 rgba(232, 237, 255, 0.08),
  inset 0 0 0 1px rgba(96, 165, 250, 0.045),
  0 0 42px rgba(96, 165, 250, 0.1);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.5s forwards;
}

.future-horizon::before,
.future-horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.future-horizon::before {
  background:
  linear-gradient(
    120deg,
    transparent 0%,
    rgba(96, 165, 250, 0.14) 42%,
    transparent 58%
  ),
  radial-gradient(
    circle at 10% 50%,
    rgba(46, 255, 174, 0.18),
    transparent 22%
  ),
  radial-gradient(
    circle at 90% 50%,
    rgba(183, 148, 255, 0.18),
    transparent 22%
  );
  transform: translateX(-65%);
  animation: future-scan 6.5s cubic-bezier(0.2, 0.7, 0.2, 1) 2s infinite;
}

.future-horizon::after {
  border-radius: inherit;
  box-shadow: inset 0 0 28px rgba(96, 165, 250, 0.08);
}

.future-horizon-rail {
  position: relative;
  z-index: 1;
  height: 38px;
  margin: 0 8px 12px;
}

.future-horizon-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
  90deg,
  rgba(46, 255, 174, 0.16),
  rgba(96, 165, 250, 0.85) 45%,
  rgba(183, 148, 255, 0.88) 72%,
  rgba(232, 237, 255, 0.18)
  );
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.42);
}

.future-node {
  position: absolute;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(232, 237, 255, 0.72);
  background: var(--bg-tools);
  box-shadow:
  0 0 0 6px rgba(96, 165, 250, 0.06),
  0 0 22px rgba(96, 165, 250, 0.48);
}

.future-node-now {
  left: 0;
  border-color: var(--green-light);
}
.future-node-next {
  left: calc(50% - 9px);
  border-color: var(--accent-warm);
  animation: future-node-pulse 2.4s ease-in-out infinite;
}
.future-node-year {
  right: 0;
  border-color: var(--purple-light);
}

.future-horizon-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-dim);
}

.future-horizon-copy strong {
  display: block;
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: 0.96rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

@keyframes future-scan {
  0%,
  18% {
  transform: translateX(-70%);
  opacity: 0;
  }
  35%,
  70% {
  opacity: 1;
  }
  100% {
  transform: translateX(70%);
  opacity: 0;
  }
}

@keyframes future-node-pulse {
  0%,
  100% {
  box-shadow:
    0 0 0 6px rgba(96, 165, 250, 0.06),
    0 0 22px rgba(96, 165, 250, 0.48);
  }
  50% {
  box-shadow:
    0 0 0 10px rgba(96, 165, 250, 0.12),
    0 0 36px rgba(96, 165, 250, 0.7);
  }
}

@media (max-width: 480px) {
  .future-horizon {
  margin-bottom: 26px;
  padding: 16px 14px 14px;
  border-radius: 12px;
  }

  .future-horizon-copy {
  gap: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  }

  .future-horizon-copy strong {
  font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .future-horizon-copy {
  grid-template-columns: 1fr;
  text-align: left;
  }

  .future-horizon-rail {
  margin-left: 0;
  margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .future-horizon,
  .future-horizon::before,
  .future-node-next {
  animation: none !important;
  opacity: 1 !important;
  }

  .future-horizon::before {
  transform: none !important;
  }
}

/* ====
   HOME ROUTE STRIP - minimal visual navigation
==== */
.home-route-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 860px);
  margin: 22px auto 26px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  animation: route-strip-in 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) 1.55s both;
}
.home-route-strip a {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 17px 18px;
  color: var(--text);
  background:
  linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018)
  ),
  rgba(6, 8, 16, 0.78);
  text-align: left;
  transform: translateY(8px);
  opacity: 0;
  animation: route-link-in 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(1.7s + (var(--ri, 0) * 0.08s));
  transition:
  background 0.18s ease,
  color 0.18s ease,
  transform 0.18s ease,
  border-color 0.18s ease;
}
.home-route-strip a:nth-child(1) {
  --ri: 0;
}
.home-route-strip a:nth-child(2) {
  --ri: 1;
}
.home-route-strip a:nth-child(3) {
  --ri: 2;
}
.home-route-strip a:nth-child(4) {
  --ri: 3;
}
.home-route-strip a:hover,
.home-route-strip a:focus-visible {
  background:
  linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.12),
    rgba(255, 255, 255, 0.025)
  ),
  rgba(8, 12, 24, 0.92);
  transform: translateY(-2px);
}
.home-route-strip span {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.home-route-strip strong {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  font-weight: 760;
  letter-spacing: 0;
}
.home-route-strip em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.25;
}
.home-subtitle {
  max-width: 480px;
}
.home-rotator-line {
  max-width: 480px;
}
.choose-card p {
  max-width: 34ch;
}
@keyframes route-strip-in {
  from {
  opacity: 0;
  transform: translateY(10px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
@keyframes route-link-in {
  from {
  opacity: 0;
  transform: translateY(8px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .home-route-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-route-strip a {
  min-height: 84px;
  padding: 14px;
  }
}
.gym-mode-card strong.target-pulse {
  display: inline-block;
  animation: gym-target-pulse 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes gym-target-pulse {
  0% {
  transform: translateY(0);
  text-shadow: none;
  }
  35% {
  transform: translateY(-2px);
  text-shadow: 0 0 24px rgba(96, 165, 250, 0.42);
  }
  100% {
  transform: translateY(0);
  text-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-route-strip,
  .home-route-strip a,
  .gym-mode-card strong.target-pulse {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  }
}
/* ====
   PLAN WHY-CHIPS — compact "because:" rationale strip
==== */
.ce-why-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 1rem;
}
.ce-why-chip {
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--accent, var(--accent-primary));
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 3px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}

/* ====
   PLAN SELECTION PROOF - visible seeded-weight rationale
==== */
.ce-selection-proof {
  margin: 1rem 0 1.2rem;
  padding: 1rem;
  border-radius: 12px;
  background:
  linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(183, 148, 255, 0.06)),
  rgba(4, 9, 22, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(180, 230, 255, 0.08);
}
.ce-selection-proof-tag {
  margin: 0 0 0.72rem;
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-label);
}
.ce-selection-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}
.ce-selection-proof-item {
  min-width: 0;
  padding: 0.72rem;
  border-radius: 12px;
  background: rgba(8, 12, 30, 0.62);
  border: 1px solid rgba(120, 200, 255, 0.12);
}
.ce-selection-proof-label,
.ce-selection-proof-text {
  display: block;
}
.ce-selection-proof-label {
  margin-bottom: 0.3rem;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent, var(--accent-primary));
}
.ce-selection-proof-text {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.42;
}
@media (max-width: 480px) {
  .ce-selection-proof {
  padding: 0.82rem;
  }
  .ce-selection-proof-grid {
  grid-template-columns: 1fr;
  }
}

/* ====
   FOOTER NAV
==== */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-nav a {
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  text-decoration: none;
  transition: color 0.18s;
}
.footer-nav a:hover {
  color: var(--accent, var(--accent-primary));
}

/* ====
   READABILITY PASS — brighter body copy for gym-floor laptop use
==== */
:root {
  --text: #f7faff;
  --text-muted: #c8d4f4;
  --text-dim: #aab8dd;
  --text-soft: #e5ecff;
  --text-label: #9eeeff;
}

body,
.section,
.tile,
.card,
.tool-card,
.price-card,
.choose-card,
.gym-mode-shell {
  color: var(--text);
}

.section .lead-text,
[data-accent] .hook,
.home-subtitle,
.home-rotator-line,
.choose-card p,
.tool-card p,
.tool-card-tagline,
.price-tagline,
.footnote,
.activity-note,
.quest-foot,
.settings-meta,
.sa-empty-line,
.gym-mode-head p,
.gym-mode-card p,
.gym-mode-status,
.gym-mode-cue,
.gym-mode-feel,
.gym-mode-readiness span,
.footer-line,
.footer-nav a,
.toast-msg {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.hud-marker,
.brand-status,
.crumb-meta,
.day-ticker-label,
.day-ticker-of,
.day-ticker-meta,
.home-route-strip span,
.gym-mode-label,
.gym-mode-kicker,
.settings-group-label,
.session-pane-label,
.tile-label,
.price-feature-locked,
.footer-small,
.dm-note,
.rooms-note {
  color: var(--text-dim) !important;
  opacity: 1 !important;
}

.home-route-strip em,
.gym-mode-readiness strong,
.gym-mode-subs-toggle,
.footer-nav a:hover,
.home-foot-link,
.sb-group[open] summary,
.sb-glyph {
  color: var(--text-label) !important;
}

.tool-foot,
.quiz-disclaimer,
.trust-foot,
.signup-page-foot,
.sa-foot {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}

.day1-cue,
.hero-footnote,
.voice-hint,
.rec-meta,
.too-unit,
.partner-note {
  opacity: 1 !important;
  color: var(--text-muted) !important;
}

/* ====
   BROADER FIRST IMPRESSION — premium, accessible landing surface
==== */
.home-intro {
  background:
  radial-gradient(
    ellipse 70% 42% at 18% 22%,
    rgba(46, 255, 174, 0.22),
    transparent 64%
  ),
  radial-gradient(
    ellipse 68% 46% at 82% 18%,
    rgba(180, 120, 255, 0.24),
    transparent 62%
  ),
  radial-gradient(
    ellipse 92% 62% at 50% 92%,
    rgba(96, 165, 250, 0.18),
    transparent 66%
  ),
  linear-gradient(180deg, #060812 0%, #08111f 46%, var(--bg-alt) 100%) !important;
}

.home-frame {
  max-width: 1024px;
}

@media (min-width: 1280px) {
  body[data-current-page="home"] {
  padding-left: 0 !important;
  }

  body[data-current-page="home"] .sidebar {
  transform: translateX(-100%) !important;
  }

  body[data-current-page="home"] .topnav {
  left: 0 !important;
  }

  body[data-current-page="home"] .day-ticker {
  left: 50% !important;
  }
}

.home-overline {
  color: var(--text-label) !important;
  text-shadow: 0 0 18px rgba(158, 238, 255, 0.42);
}

.home-wordmark {
  filter: drop-shadow(0 18px 50px rgba(96, 165, 250, 0.18));
}

.wm-letter {
  background: linear-gradient(
  135deg,
  #f7faff 0%,
  #9eeeff 30%,
  #7dffce 58%,
  #d4b9ff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.home-subtitle {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.24;
  text-wrap: balance;
}

.home-rotator-line {
  border-color: rgba(158, 238, 255, 0.4) !important;
  background: linear-gradient(
  90deg,
  rgba(96, 165, 250, 0.12),
  rgba(46, 255, 174, 0.08),
  rgba(183, 148, 255, 0.12)
  ) !important;
  box-shadow:
  0 10px 36px rgba(0, 0, 0, 0.26),
  inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-audience-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -18px auto 24px;
  max-width: 1024px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 1.55s forwards;
}

.home-audience-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(158, 238, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-soft);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-route-strip {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  border-color: rgba(158, 238, 255, 0.22) !important;
  background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.085),
  rgba(255, 255, 255, 0.025)
  ) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.home-route-strip a {
  background:
  radial-gradient(
    circle at 18% 0%,
    rgba(158, 238, 255, 0.18),
    transparent 44%
  ),
  rgba(255, 255, 255, 0.035) !important;
}

.home-route-strip a:hover,
.home-route-strip a:focus-visible {
  background:
  radial-gradient(
    circle at 18% 0%,
    rgba(125, 255, 206, 0.24),
    transparent 46%
  ),
  rgba(158, 238, 255, 0.09) !important;
}

.choose-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choose-card {
  min-height: 210px;
  background:
  radial-gradient(
    circle at 18% 0%,
    rgba(158, 238, 255, 0.13),
    transparent 40%
  ),
  linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.022)
  ) !important;
  border-color: rgba(158, 238, 255, 0.22) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.22);
}

.choose-card h3 {
  font-size: 1.26rem;
  color: var(--text);
}

.choose-card p {
  font-size: 0.95rem !important;
  line-height: 1.48 !important;
}

.choose-tools:hover {
  border-color: var(--text-label) !important;
  box-shadow: 0 16px 40px rgba(158, 238, 255, 0.18) !important;
}

.choose-tools .choose-glyph {
  background: rgba(158, 238, 255, 0.12);
  color: var(--text-label);
  border-color: rgba(158, 238, 255, 0.32);
}

.home-meta {
  padding: 16px 20px;
  border: 1px solid rgba(158, 238, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hm-num {
  color: var(--text-label);
}

.hm-label {
  color: var(--text-muted) !important;
}

@media (max-width: 1024px) {
  .choose-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .home-audience-strip {
  justify-content: flex-start;
  }

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

  .home-meta {
  border-radius: 18px;
  gap: 18px;
  }
}

/* ====
   Live Session M3 — Last-Week Comparison inline (2026-05-13)
   Shows top set of same lift from 5-9 days ago inside Atlas card.
==== */
.session-last-week {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(96, 165, 250, 0.6);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(200, 220, 235, 0.9);
}
.session-last-week[hidden] {
  display: none !important;
}
.session-last-week strong {
  color: #93c5fd;
  font-weight: 700;
  margin-right: 0.25rem;
}
.session-last-week .session-last-week-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: rgba(200, 220, 235, 0.55);
  font-style: italic;
}

.session-decision-card {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.session-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.session-decision-head strong {
  min-width: 0;
  color: var(--green-light);
  text-align: right;
  overflow-wrap: anywhere;
}
.session-pr-delta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.session-warmup-ramp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.session-warmup-ramp button {
  min-height: 44px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  background: rgba(7, 16, 24, 0.74);
  color: var(--text);
  cursor: pointer;
}
.session-warmup-ramp button:hover {
  border-color: rgba(96, 165, 250, 0.48);
  background: rgba(96, 165, 250, 0.1);
}
.session-warmup-ramp span,
.session-warmup-ramp strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
}
.session-warmup-ramp strong {
  margin-top: 3px;
  color: var(--blue-light);
}
@media (max-width: 480px) {
  .session-decision-head {
  align-items: flex-start;
  flex-direction: column;
  }
  .session-decision-head strong {
  text-align: left;
  }
  .session-warmup-ramp {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.session-active {
  overflow: hidden;
  }

  .session-mode {
  font-size: 0.92rem;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  }

  .session-mode [data-session-tip]::after,
  .session-mode [data-session-tip]::before {
  content: none;
  display: none !important;
  }

  .session-head {
  grid-template-areas:
    "left right"
    "clock clock";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: calc(4px + env(safe-area-inset-top)) 10px 4px;
  }

  .session-head-left {
  grid-area: left;
  min-width: 0;
  gap: 7px;
  }

  .session-head-clock {
  grid-area: clock;
  justify-self: center;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  }

  .session-head-right {
  grid-area: right;
  min-width: 0;
  justify-content: flex-end;
  }

  .session-close {
  width: 30px;
  height: 30px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  font-size: 1rem;
  }

  .session-state-tag {
  max-width: 480px;
  padding: 3px 7px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  .session-clock-label {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  }

  .session-clock-num {
  font-size: 1.05rem;
  line-height: 1;
  }

  .session-finish {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  }

  .session-phone-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.14);
  background: rgba(5, 8, 12, 0.96);
  }

  .session-phone-nav-btn {
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  }

  .session-phone-nav-btn.active,
  .session-phone-nav-btn[aria-pressed="true"] {
  border-color: rgba(46, 255, 122, 0.52);
  background: rgba(46, 255, 122, 0.11);
  color: var(--text);
  }

  .session-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  }

  .session-input {
  order: 1;
  }
  .session-plan {
  order: 2;
  }
  .session-stats {
  order: 3;
  }
  .session-feed {
  order: 4;
  }

  .session-pane {
  padding: 12px;
  border-radius: 10px;
  }

  .session-pane-label {
  margin-bottom: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  }

  .session-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  }

  .session-stat {
  min-width: 0;
  padding: 8px 6px;
  }

  .ss-label {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  .ss-num {
  margin-top: 2px;
  font-size: 1rem;
  }

  .session-cue {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  }

  .session-active-target {
  top: 0;
  margin-bottom: 10px;
  padding: 10px;
  }

  .session-active-target strong {
  font-size: 0.94rem;
  }

  .session-active-target small {
  font-size: 0.72rem;
  }

  .session-quick-form {
  gap: 8px;
  }

  .session-form-row {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  }

  .session-form-row label {
  min-width: 0;
  }

  .session-form-3 {
  gap: 6px;
  }

  .session-form-row input,
  .session-form-row select,
  .session-swap-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  font-size: 16px;
  }

  .session-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  }

  .session-log {
  grid-column: 1 / -1;
  min-height: 42px;
  }

  .session-repeat {
  grid-column: 1 / -1;
  }

  .session-rest,
  .session-repeat {
  min-height: 44px;
  padding: 8px 6px;
  font-size: 0.76rem;
  }

  .session-plan {
  gap: 10px;
  }

  .session-plan-head strong {
  font-size: 0.92rem;
  }

  .session-plan-head span,
  .session-plan-why,
  .session-atlas-cue {
  font-size: 0.78rem;
  line-height: 1.35;
  }

  .session-plan-days {
  gap: 6px;
  padding-bottom: 5px;
  }

  .session-plan-day-tab {
  min-width: 58px;
  min-height: 44px;
  padding: 6px 7px;
  }

  .session-plan-day-code {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  }

  .session-plan-day-meta {
  font-size: 0.62rem;
  }

  .session-plan-phase-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  }

  .session-plan-phase-jump {
  min-height: 58px;
  gap: 3px;
  padding: 7px;
  }

  .session-plan-phase-jump-label {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  }

  .session-plan-phase-jump strong {
  font-size: 0.9rem;
  }

  .session-plan-phase-jump small {
  font-size: 0.62rem;
  }

  .session-plan-list {
  max-height: min(42vh, 340px);
  gap: 6px;
  }

  .session-plan-item {
  grid-template-columns: 26px minmax(34px, auto) minmax(0, 1fr) auto;
  gap: 6px;
  padding: 8px;
  }

  .session-plan-day {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  }

  .session-plan-phase {
  min-width: 36px;
  padding: 3px 5px;
  font-size: 0.54rem;
  }

  .session-plan-name {
  font-size: 0.82rem;
  }

  .session-plan-dose {
  grid-column: 3;
  max-width: 100%;
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  }

  .session-plan-progress {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 36px;
  padding: 3px 5px;
  font-size: 0.58rem;
  }

  .session-atlas-card {
  gap: 8px;
  padding: 10px;
  }

  .session-atlas-card-head {
  align-items: center;
  }

  .session-atlas-card-head strong {
  font-size: 0.82rem;
  }

  .session-atlas-cue {
  padding: 8px 10px;
  }

  .session-atlas-details {
  gap: 5px 8px;
  }

  .session-atlas-details dt {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  }

  .session-atlas-details dd {
  font-size: 0.72rem;
  }

  .session-swap-rail {
  gap: 7px;
  padding: 9px;
  }

  .session-swap-head,
  .session-swap-head strong {
  font-size: 0.58rem;
  }

  .session-swap-btn {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 0.74rem;
  }

  .session-swap-result-btn {
  min-height: 44px;
  padding: 7px 8px;
  }

  .session-decision-head {
  gap: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  }

  .session-last-week,
  .session-pr-delta {
  font-size: 0.72rem;
  }

  .session-warmup-ramp {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  }

  .session-warmup-ramp button {
  min-height: 44px;
  }

  .session-warmup-ramp span,
  .session-warmup-ramp strong {
  font-size: 0.58rem;
  }

  .session-feed-list {
  max-height: 32vh;
  }

  .session-feed-list li {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px 9px;
  font-size: 0.74rem;
  }
}

@media (max-width: 480px) {
  .session-stat-grid,
  .session-warmup-ramp {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none), (pointer: coarse) {
  .session-mode [data-session-tip]::after,
  .session-mode [data-session-tip]::before {
  content: none;
  display: none !important;
  }
}

/* ====
   PHONE APP SHELL — narrow-screen app experience for gym use.
   Keep this at the end so it wins over earlier visual passes.
==== */
.mobile-app-nav {
  display: none;
}

@media (max-width: 480px) {
  html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  }

  body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  main,
  [data-page],
  .section,
  .home-intro,
  .container,
  .container.narrow,
  .home-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  }

  .section,
  .section-quiz,
  .section-alt,
  .section-wedge,
  .section-buy,
  .section-tools,
  .section-trust,
  .section-inside {
  padding: 48px 0 56px;
  }

  .container,
  .container.narrow {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 34px;
  padding-bottom: 34px;
  }

  .topnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px 58px !important;
  }

  .brand {
  min-width: 0;
  gap: 8px;
  }

  .brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  .navlinks {
  justify-self: end;
  }

  .navlinks li {
  display: none !important;
  }

  .navlinks li:last-child {
  display: list-item !important;
  }

  .navlinks a.cta {
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
  }

  .day-ticker,
  .session-start-btn,
  .assistant-toggle,
  .assistant-panel {
  display: none !important;
  }

  .mobile-app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(4, 6, 14, 0.96);
  border-top: 1px solid rgba(120, 200, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.42);
  }

  .mobile-app-tab {
  display: flex;
  min-width: 0;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(120, 200, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  }

  .mobile-app-tab-icon {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  }

  .mobile-app-tab.active,
  .mobile-app-tab[aria-current="page"] {
  border-color: rgba(96, 165, 250, 0.6);
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.16),
    rgba(46, 255, 174, 0.08)
  );
  color: var(--text);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.16);
  }

  .mobile-app-tab.active .mobile-app-tab-icon,
  .mobile-app-tab[aria-current="page"] .mobile-app-tab-icon {
  color: var(--green-light);
  }

  .home-intro {
  min-height: auto;
  padding: 42px 14px 54px;
  align-items: flex-start;
  }

  .home-overline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 10px;
  margin-bottom: 18px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  }

  .home-overline-version {
  margin-left: 0;
  }

  .home-wordmark {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px;
  font-size: clamp(2.35rem, 14.5vw, 3.65rem) !important;
  letter-spacing: -0.055em;
  line-height: 0.98;
  }

  .wm-letter {
  min-width: 0;
  }

  .home-subtitle {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.36;
  text-wrap: balance;
  }

  .home-rotator-line {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 9px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  }

  .home-audience-strip {
  justify-content: center;
  margin: 0 auto 18px;
  }

  .home-audience-strip span {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  }

  .home-route-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 18px auto 22px;
  }

  .home-route-strip a {
  min-width: 0;
  padding: 14px 12px;
  }

  .gym-mode-head {
  align-items: stretch;
  }

  .gym-mode-head-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  }

  .gym-mode-session-link,
  .gym-mode-plan-link {
  width: 100%;
  justify-content: center;
  }

  .home-route-strip strong,
  .home-route-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  .future-horizon {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  }

  .choose-grid {
  grid-template-columns: 1fr !important;
  width: 100%;
  max-width: 100%;
  gap: 10px;
  }

  .choose-card {
  min-height: 0 !important;
  padding: 16px 0 !important;
  }

  h1,
  h2,
  h3,
  h4,
  .section h2,
  .signup-page-title {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  }

  .section h2,
  .signup-page-title {
  display: block;
  text-align: center;
  font-size: clamp(1.72rem, 9vw, 2.45rem);
  line-height: 1.08;
  }

  .section h2::after,
  .signup-page-title::after {
  left: 50%;
  transform: translateX(-50%);
  }

  .hud-marker {
  display: block;
  max-width: 100%;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  overflow-wrap: anywhere;
  }

  .hud-marker::before,
  .hud-marker::after {
  width: 16px;
  margin: 0 7px;
  }

  .lead-text,
  .hook,
  .hero-footnote,
  .footnote,
  .price-tagline,
  .quiz-hint,
  .quiz-q,
  .quiz-disclaimer {
  max-width: 100%;
  overflow-wrap: anywhere;
  }

  .quiz,
  .price-card,
  .tool-card,
  .atlas-card,
  .tracker-pane,
  .gym-mode-shell,
  .gym-mode-card,
  .settings-drawer,
  .signup-page,
  .signup-card {
  max-width: 100%;
  min-width: 0;
  }

  .btn,
  .quiz-opt,
  .quiz-next,
  .quiz-prev,
  .seg-btn,
  input,
  select,
  textarea {
  min-height: 44px;
  font-size: 16px;
  }

  .signup-page-vertical-grid,
  .signup-vertical-grid,
  .pricing-grid,
  .tools-grid,
  .quiz-opts,
  .floor-row-3,
  .floor-row-tempo,
  .tracker-row-3,
  .post-pr-3,
  .partner-filters {
  grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .home-wordmark {
  font-size: clamp(2.1rem, 13.8vw, 3.2rem) !important;
  }

  .navlinks a.cta {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.78rem;
  }

  .mobile-app-tab {
  min-height: 50px;
  font-size: 0.66rem;
  }
}

/* ====
   SIMPLE SITE PASS — app-first IA, less marketing chrome.
==== */
.page-crumb,
.page-pager,
.day-ticker,
.hero-live,
.hero-footnote,
.home-audience-strip,
.future-horizon,
.home-meta,
.chapter-nav,
.chapter-next,
.chapter-cta {
  display: none !important;
}

.topnav {
  gap: 16px;
}

.brand-status {
  display: none;
}

.navlinks {
  gap: 8px;
  flex-wrap: nowrap;
}

.navlinks a {
  min-height: 40px;
  padding: 10px 12px;
}

.navlinks a.cta {
  min-height: 42px;
  padding: 11px 16px;
}

.home-intro {
  min-height: auto;
  padding-bottom: 42px;
}

.home-frame {
  max-width: 1024px;
}

.home-route-strip {
  max-width: 1024px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-route-strip strong {
  font-size: 1rem;
}

.home-route-strip em {
  font-size: 0.72rem;
}

.choose-grid {
  max-width: 1024px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choose-card {
  min-height: 0;
}

.hero .kicker,
.emphasis-secondary {
  display: none !important;
}

.hero-inner {
  max-width: 1024px;
}

.hero h1 {
  max-width: 1024px;
}

.lead-big {
  max-width: 480px;
}

.mobile-app-tab-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1024px) {
  .navlinks li:not(:last-child) {
  display: none !important;
  }
}

@media (max-width: 480px) {
  .topnav {
  grid-template-columns: minmax(0, 1fr) auto;
  }

  .navlinks {
  display: none !important;
  }

  .navlinks li:last-child {
  display: list-item !important;
  }

  .home-intro {
  min-height: calc(100svh - 150px) !important;
  padding: 18px 14px calc(104px + env(safe-area-inset-bottom)) !important;
  align-items: flex-start;
  }

  .home-frame {
  padding-top: 10px;
  }

  [data-page="home"].page-active > .home-frame > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  }

  .home-wordmark,
  .home-rotator-line {
  display: none !important;
  }

  .home-overline {
  margin-bottom: 14px !important;
  }

  .home-subtitle {
  max-width: 31ch;
  margin: 0 auto 14px !important;
  font-size: clamp(1rem, 5vw, 1.18rem) !important;
  line-height: 1.34 !important;
  }

  .home-route-strip,
  .choose-grid {
  grid-template-columns: 1fr 1fr;
  }

  .home-route-strip {
  gap: 8px;
  margin: 12px auto 0 !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  }

  .home-route-strip a {
  min-height: 72px !important;
  padding: 10px !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  }

  .home-route-strip span {
  font-size: 0.58rem;
  }

  .home-route-strip strong {
  font-size: 0.92rem;
  }

  .home-route-strip em {
  font-size: 0.64rem;
  }

  .choose-card {
  padding: 14px 0 !important;
  }

  .choose-card p,
  .choose-arrow {
  display: none;
  }

  .mobile-app-tab-icon {
  display: grid;
  place-items: center;
  }
}

/* ====
   REPDECK FINAL OVERRIDE - keep the new theme above legacy layers.
==== */
html,
body {
  background: var(--text) !important;
  color: var(--surface) !important;
}

.topnav {
  background: rgba(247, 249, 253, 0.96) !important;
  border-bottom: 2px solid var(--surface) !important;
  box-shadow: none !important;
}

.brand-name,
.home-subtitle,
.section,
.hero,
.container,
.container.narrow {
  color: var(--surface) !important;
  text-shadow: none !important;
}

.brand-mark {
  border: 2px solid var(--surface) !important;
  border-radius: 8px !important;
  background: linear-gradient(
  135deg,
  var(--rep-cyan),
  var(--rep-lime)
  ) !important;
  box-shadow: 4px 4px 0 var(--surface) !important;
}

.navlinks a {
  border: 1.5px solid var(--surface) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: 3px 3px 0 var(--surface) !important;
}

.navlinks a.cta,
.navlinks a:hover,
.navlinks a.active {
  background: #2563eb !important;
  color: #ffffff !important;
}

.home-intro {
  background:
  linear-gradient(135deg, rgba(59, 130, 246, 0.2), transparent 34%),
  linear-gradient(225deg, rgba(200, 255, 45, 0.26), transparent 30%),
  linear-gradient(315deg, rgba(255, 95, 63, 0.18), transparent 32%),
  linear-gradient(180deg, var(--text) 0%, var(--text) 100%) !important;
  color: var(--surface) !important;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 72px 16px 24px;
  border: 2px solid rgba(16, 17, 20, 0.12);
  border-radius: 8px;
  background:
  repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.035) 23px 24px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.03) 23px 24px
  );
  pointer-events: none;
}

.home-frame {
  text-align: left !important;
}

.home-overline {
  color: #0a7a61 !important;
  text-shadow: none !important;
  letter-spacing: 0.16em !important;
}

.home-overline-version {
  border-left-color: rgba(16, 17, 20, 0.24) !important;
  color: var(--surface) !important;
}

.home-wordmark,
.hero h1,
h1 .accent-primary,
.h1-accent,
.accent-primary,
.signup-highlight {
  background-image: none !important;
  color: var(--surface) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}

.home-subtitle {
  max-width: 480px;
  font-weight: 850;
  letter-spacing: 0;
}

.home-rotator-line {
  border: 2px solid var(--surface) !important;
  border-radius: 999px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: 6px 6px 0 var(--surface) !important;
  text-shadow: none !important;
}

.home-route-strip {
  gap: 2px !important;
  overflow: hidden;
  border: 2px solid var(--surface) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 10px 10px 0 var(--surface) !important;
}

.home-route-strip a {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--surface) !important;
  background: var(--text) !important;
  text-shadow: none !important;
}

.home-route-strip a:nth-child(1) {
  background: var(--rep-lime) !important;
}

.home-route-strip a:nth-child(2) {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.home-route-strip a:nth-child(3) {
  background: var(--rep-cyan) !important;
}

.home-route-strip a:nth-child(4) {
  background: var(--rep-coral) !important;
}

.home-route-strip span,
.home-route-strip strong,
.home-route-strip em {
  color: currentColor !important;
}

.mobile-app-nav {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--surface) !important;
  border-top: 2px solid var(--surface) !important;
  box-shadow: 0 -18px 48px rgba(16, 17, 20, 0.28) !important;
}

.mobile-app-tab {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 0 !important;
  box-sizing: border-box !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  border: 2px solid rgba(247, 249, 253, 0.2) !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}

.mobile-app-tab.active,
.mobile-app-tab[aria-current="page"] {
  border-color: var(--rep-lime) !important;
  background: var(--rep-lime) !important;
  color: var(--rep-ink) !important; /* a11y 1.4.3: --surface (white) on the lime pill was 1.52:1; icon reads currentColor */
  box-shadow: none !important;
}

.quiz,
.price-card,
.tool-card,
.atlas-card,
.choose-card,
.signup-card,
.settings-drawer,
.tracker-pane,
.gym-mode-card {
  border: 2px solid rgba(16, 17, 20, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--surface) !important;
  box-shadow: 6px 6px 0 rgba(16, 17, 20, 0.13) !important;
}

.gym-mode-shell {
  border: 2px solid var(--surface) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 10px 10px 0 var(--rep-lime) !important;
}

.gym-mode-shell .gym-mode-card,
.gym-mode-shell .tracker-pane {
  border-color: rgba(16, 17, 20, 0.12) !important;
  background: var(--text) !important;
  color: var(--surface) !important;
}

.btn,
.quiz-next,
.quiz-prev,
.seg-btn,
.cta,
button[type="submit"] {
  border-radius: 8px !important;
  border: 2px solid var(--surface) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 4px 4px 0 var(--surface) !important;
}

input,
select,
textarea {
  border: 2px solid rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: none !important;
}

@media (max-width: 480px) {
  .home-intro {
  min-height: calc(100svh - 128px) !important;
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .home-intro::before {
  inset: 62px 10px 84px;
  }

  .home-frame {
  padding-top: 2px !important;
  }

  .home-overline {
  justify-content: flex-start;
  margin: 0 0 12px !important;
  font-size: 0.58rem !important;
  }

  .home-subtitle {
  max-width: 29ch;
  margin: 0 0 12px !important;
  font-size: clamp(1.05rem, 5.2vw, 1.26rem) !important;
  }

  .home-route-strip {
  width: 100%;
  margin: 10px 0 0 !important;
  box-shadow: 6px 6px 0 var(--surface) !important;
  }

  .home-route-strip a {
  min-height: 82px !important;
  padding: 12px 10px !important;
  }
}

/* ====
   REPDECK FLOOR PASS - first-screen command layer.
==== */
.repdeck-floor-pass {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
  width: min(100%, 780px);
  margin: 18px 0 0;
}

.repdeck-floor-pass a {
  color: var(--surface);
  text-decoration: none;
}

.repdeck-floor-primary,
.repdeck-floor-stack a {
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--text);
  box-shadow: 5px 5px 0 var(--surface);
}

.repdeck-floor-primary {
  display: grid;
  min-height: 108px;
  align-content: center;
  gap: 6px;
  padding: 16px;
  background:
  linear-gradient(135deg, rgba(200, 255, 45, 0.92), rgba(59, 130, 246, 0.3)),
  var(--text);
}

.repdeck-floor-primary span,
.repdeck-floor-stack span {
  font-family: var(--f-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.repdeck-floor-primary strong {
  font-family: var(--f-display, sans-serif);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1;
}

.repdeck-floor-primary em {
  max-width: 34ch;
  color: rgba(16, 17, 20, 0.76);
  font-style: normal;
  line-height: 1.24;
}

.repdeck-floor-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.repdeck-floor-stack a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 9px 10px;
}

.repdeck-floor-stack a:nth-child(1) {
  background: var(--surface);
  color: var(--text);
}

.repdeck-floor-stack a:nth-child(2) {
  background: var(--rep-cyan);
}

.repdeck-floor-stack a:nth-child(3) {
  background: var(--rep-coral);
}

.repdeck-floor-stack strong {
  min-width: 0;
  overflow: hidden;
  font-family: var(--f-display, sans-serif);
  font-size: 0.94rem;
  font-weight: 880;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repdeck-floor-primary:hover,
.repdeck-floor-primary:focus-visible,
.repdeck-floor-stack a:hover,
.repdeck-floor-stack a:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--surface);
}

@media (max-width: 480px) {
  .repdeck-floor-pass {
  grid-template-columns: 1fr;
  gap: 6px;
  width: calc(100% - 28px);
  margin: 12px 0 0;
  }

  .repdeck-floor-primary {
  min-height: 62px;
  padding: 10px 12px;
  }

  .repdeck-floor-primary strong {
  font-size: 1rem;
  }

  .repdeck-floor-primary em {
  font-size: 0.74rem;
  }

  .repdeck-floor-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  }

  .repdeck-floor-stack a:nth-child(3) {
  grid-column: auto;
  }

  .repdeck-floor-stack a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-height: 48px;
  padding: 7px;
  box-shadow: 3px 3px 0 var(--surface);
  }

  .repdeck-floor-stack span {
  font-size: 0.55rem;
  }

  .repdeck-floor-stack strong {
  font-size: 0.68rem;
  white-space: normal;
  }
}

/* ====
   SAFWAN FOUNDER BLOCK - first-party trust signal after first action.
==== */
.strand-b-founder-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  width: min(100%, 780px);
  margin: 12px 0 0;
  padding: 12px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 5px 5px 0 rgba(16, 17, 20, 0.18);
  color: var(--surface);
}

.strand-b-how-it-works {
  width: min(100%, 780px);
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 2px dashed rgba(16, 17, 20, 0.52);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--surface);
}

.strand-b-how-it-works p {
  max-width: 70ch;
  margin: 0;
  color: rgba(16, 17, 20, 0.78);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.32;
}

.strand-b-not-list {
  width: min(100%, 780px);
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 2px solid rgba(16, 17, 20, 0.72);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.94);
  color: var(--text);
  box-shadow: 4px 4px 0 rgba(59, 130, 246, 0.22);
}

.strand-b-not-list span {
  display: block;
  margin-bottom: 7px;
  color: var(--rep-cyan);
  font-family: var(--f-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.strand-b-not-list ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strand-b-not-list li {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.3;
}

.strand-b-founder-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--rep-lime);
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1;
}

.strand-b-founder-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.strand-b-founder-kicker,
.strand-b-steps-label,
.strand-b-proof-steps b {
  font-family: var(--f-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.strand-b-steps-label {
  margin-top: 2px;
  color: rgba(16, 17, 20, 0.7);
}

.strand-b-founder-copy strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 950;
  line-height: 1.05;
}

.strand-b-founder-copy p {
  max-width: 66ch;
  margin: 0;
  color: rgba(16, 17, 20, 0.76);
  font-size: 0.84rem;
  line-height: 1.32;
}

.strand-b-proof-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.strand-b-proof-steps span {
  display: grid;
  gap: 3px;
  min-height: 42px;
  padding: 7px 8px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.08;
}

.strand-b-proof-steps span:nth-child(2) {
  background: rgba(59, 130, 246, 0.28);
}

.strand-b-proof-steps span:nth-child(3) {
  background: rgba(200, 255, 45, 0.44);
}

@media (max-width: 480px) {
  .strand-b-founder-proof {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  width: calc(100% - 20px);
  margin-top: 10px;
  padding: 10px;
  box-shadow: 3px 3px 0 rgba(16, 17, 20, 0.18);
  }

  .strand-b-how-it-works {
  width: calc(100% - 16px);
  padding: 9px 10px;
  }

  .strand-b-how-it-works p {
  font-size: 0.76rem;
  line-height: 1.28;
  }

  .strand-b-not-list {
  width: calc(100% - 28px);
  padding: 9px 10px;
  box-shadow: 3px 3px 0 rgba(59, 130, 246, 0.22);
  }

  .strand-b-not-list li {
  font-size: 0.76rem;
  line-height: 1.26;
  }

  .strand-b-founder-avatar {
  width: 44px;
  height: 44px;
  }

  .strand-b-founder-copy p {
  max-width: none;
  font-size: 0.74rem;
  line-height: 1.2;
  }

  .strand-b-steps-label {
  display: none;
  }

  .strand-b-proof-steps {
  display: none;
  }
}

/* ====
   CYCLE 4 TRUST TYPOGRAPHY - proof and comparison rhythm.
==== */
.hero-footnote-list {
  display: grid;
  gap: 6px;
  max-width: 40rem;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.hero-footnote-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.46;
}

.hero-footnote-list strong {
  min-width: 4.5rem;
  color: var(--text);
  font-weight: 800;
}

.hero-footnote-list span {
  color: var(--accent);
}

.hero-footnote-list-eccentrx {
  color: var(--text) !important;
  font-weight: 760;
}

.hero-footnote-list-eccentrx strong {
  color: var(--accent);
}

.section-overline {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-family: var(--f-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section .section-overline {
  text-align: center;
}

.hero-section-label {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* ====
   REPDECK COMPANY CONTRACT - founder-level operating rule.
==== */
.repdeck-company-contract {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 10px;
  width: min(100%, 780px);
  margin: 18px 0 0;
}

.repdeck-contract-head,
.repdeck-contract-grid article {
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 5px 5px 0 rgba(16, 17, 20, 0.18);
}

.repdeck-contract-head {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  background:
  linear-gradient(135deg, rgba(16, 17, 20, 0.95), rgba(16, 17, 20, 0.82)),
  var(--surface);
  color: var(--text);
}

.repdeck-contract-head span,
.repdeck-contract-grid span {
  font-family: var(--f-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
}

.repdeck-contract-head strong {
  font-family: var(--f-display, sans-serif);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-weight: 900;
  line-height: 1.02;
}

.repdeck-contract-head em {
  color: rgba(255, 255, 255, 0.76);
  font-style: normal;
  line-height: 1.22;
}

.repdeck-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.repdeck-contract-grid article {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 11px;
}

.repdeck-contract-grid article:nth-child(1) {
  background: var(--rep-lime);
}

.repdeck-contract-grid article:nth-child(2) {
  background: var(--text);
}

.repdeck-contract-grid article:nth-child(3) {
  background: var(--rep-cyan);
}

.repdeck-contract-grid article:nth-child(4) {
  background: var(--rep-coral);
}

.repdeck-contract-grid strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.04;
}

.repdeck-contract-grid em {
  color: rgba(16, 17, 20, 0.74);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.16;
}

@media (max-width: 480px) {
  .repdeck-company-contract {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0 0;
  }

  .repdeck-contract-head {
  padding: 12px;
  }

  .repdeck-contract-head strong {
  font-size: 1.05rem;
  }

  .repdeck-contract-head em {
  font-size: 0.78rem;
  }

  .repdeck-contract-grid {
  gap: 6px;
  }

  .repdeck-contract-grid article {
  min-height: 76px;
  padding: 9px;
  }

  .repdeck-contract-grid strong {
  font-size: 0.78rem;
  }

  .repdeck-contract-grid em {
  font-size: 0.64rem;
  }
}

/* ====
   REPDECK PROBLEM ELIMINATOR - company-grade product thesis.
==== */
.repdeck-problem-strip {
  width: min(100%, 780px);
  margin: 18px 0 0;
}

.repdeck-problem-kicker {
  margin: 0 0 8px;
  color: #0a7a61;
  font-family: var(--f-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.repdeck-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.repdeck-problem-card {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 4px 4px 0 rgba(16, 17, 20, 0.18);
}

.repdeck-problem-card:nth-child(1),
.repdeck-problem-card:nth-child(4) {
  background: rgba(200, 255, 45, 0.52);
}

.repdeck-problem-card:nth-child(2),
.repdeck-problem-card:nth-child(5) {
  background: rgba(59, 130, 246, 0.34);
}

.repdeck-problem-card:nth-child(3),
.repdeck-problem-card:nth-child(6) {
  background: rgba(255, 95, 63, 0.3);
}

.repdeck-problem-card span {
  font-family: var(--f-mono, monospace);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

.repdeck-problem-card strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.05;
}

.repdeck-problem-card em {
  color: rgba(16, 17, 20, 0.72);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.18;
}

@media (max-width: 480px) {
  .repdeck-problem-strip {
  margin: 14px 0 0;
  }

  .repdeck-problem-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  }

  .repdeck-problem-card {
  min-height: 74px;
  padding: 9px;
  }

  .repdeck-problem-card strong {
  font-size: 0.82rem;
  }

  .repdeck-problem-card em {
  font-size: 0.67rem;
  }
}

/* ====
   SESSION MODE PHONE TABS - live workout as one-hand app panels.
==== */
.session-phone-brief {
  display: none;
}

@media (max-width: 480px) {
  body.session-active .mobile-app-nav {
  display: none !important;
  }

  body.session-active .toast-container {
  top: calc(118px + env(safe-area-inset-top));
  }

  .session-mode {
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background:
    radial-gradient(
    circle at 12% 0%,
    rgba(46, 255, 122, 0.12),
    transparent 30%
    ),
    linear-gradient(180deg, rgba(4, 7, 12, 0.99), rgba(1, 2, 5, 0.99));
  }

  @supports not (height: 100dvh) {
  .session-mode {
    height: 100svh;
    height: -webkit-fill-available;
    max-height: 100svh;
    max-height: -webkit-fill-available;
  }
  }

  .session-head {
  flex: 0 0 auto;
  border-bottom-color: rgba(120, 200, 255, 0.16);
  background: rgba(3, 7, 10, 0.96);
  }

  .session-phone-nav {
  flex: 0 0 auto;
  position: relative;
  z-index: var(--z-base);
  padding: 7px 9px;
  }

  .session-phone-nav-btn {
  border-radius: 8px;
  box-shadow: none;
  }

  .session-phone-brief {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 10px 9px;
  border-bottom: 1px solid rgba(46, 255, 122, 0.18);
  background:
    linear-gradient(
    135deg,
    rgba(46, 255, 122, 0.1),
    rgba(59, 130, 246, 0.08)
    ),
    rgba(4, 8, 10, 0.96);
  }

  .session-phone-brief-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  align-items: baseline;
  min-width: 0;
  }

  .session-phone-brief-main span {
  color: var(--green-light);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  }

  .session-phone-brief-main strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--f-display);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

  .session-phone-brief-main small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.25;
  }

  .session-phone-brief p {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 95, 63, 0.28);
  border-radius: 8px;
  background: rgba(255, 95, 63, 0.08);
  color: rgba(255, 220, 214, 0.92);
  font-size: 0.68rem;
  line-height: 1.22;
  }

  .session-body[data-session-panel] {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
  overflow-y: auto;
  }

  .session-body[data-session-panel] > .session-pane {
  display: none;
  }

  .session-body[data-session-panel="sessionInputPane"] > #sessionInputPane,
  .session-body[data-session-panel="sessionPlanRail"] > #sessionPlanRail,
  .session-body[data-session-panel="sessionStatsPane"] > #sessionStatsPane,
  .session-body[data-session-panel="sessionFeedPane"] > #sessionFeedPane {
  display: block;
  min-height: 100%;
  animation: session-phone-panel-in 0.16s ease-out;
  }

  @keyframes session-phone-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
  }

  .session-body[data-session-panel] .session-active-target {
  display: none;
  }

  .session-body[data-session-panel] .session-pane {
  padding: 10px;
  border-radius: 9px;
  background:
    linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.01)
    ),
    rgba(0, 0, 0, 0.1);
  }

  .session-body[data-session-panel="sessionInputPane"] > #sessionInputPane,
  .session-body[data-session-panel] .session-quick-form {
  display: flex;
  flex-direction: column;
  }

  .session-body[data-session-panel]
  .session-quick-form
  .session-form-row:first-child {
  order: 1;
  }
  .session-body[data-session-panel] .session-last-set-hint {
  order: 2;
  }
  .session-body[data-session-panel] .session-form-3 {
  order: 3;
  }
  .session-body[data-session-panel] .session-plate-hint {
  order: 4;
  }
  .session-body[data-session-panel] .session-value-taps {
  order: 5;
  }
  .session-body[data-session-panel] .session-actions {
  order: 6;
  }
  .session-body[data-session-panel] .session-note-taps {
  order: 7;
  }
  .session-body[data-session-panel] .session-note-row {
  order: 8;
  }
  .session-body[data-session-panel] .session-advanced-details {
  order: 9;
  }
  .session-body[data-session-panel] #sessionFloorFix {
  order: 10;
  }

  .session-body[data-session-panel] .session-form-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-body[data-session-panel] .session-form-3 label:nth-child(3) {
  grid-column: 1 / -1;
  }

  .session-body[data-session-panel] .session-actions {
  position: static;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  }

  .session-body[data-session-panel] .session-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-body[data-session-panel] .session-plan-list,
  .session-body[data-session-panel] .session-feed-list {
  max-height: none;
  }

  .session-body[data-session-panel] .session-plan-phase-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .session-body[data-session-panel] .session-swap-list,
  .session-body[data-session-panel] .session-swap-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-body[data-session-panel] .session-swap-btn,
  .session-body[data-session-panel] .session-swap-result-btn {
  min-width: 0;
  overflow-wrap: anywhere;
  }

  .session-body[data-session-panel] .session-atlas-details {
  grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .session-phone-brief-main {
  grid-template-columns: 1fr;
  }

  .session-phone-brief-main strong {
  white-space: normal;
  }

  .session-body[data-session-panel] .session-plan-phase-strip,
  .session-body[data-session-panel] .session-swap-list,
  .session-body[data-session-panel] .session-swap-results {
  grid-template-columns: 1fr;
  }
}

/* ====
   CONTEXT PASSPORT - universal current-situation adaptation.
==== */
.context-passport,
.gym-mode-context-strip {
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 8px 8px 0 rgba(16, 17, 20, 0.24);
}

.context-passport {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px;
  color: var(--surface);
}

.context-passport-head {
  display: grid;
  gap: 5px;
}

.context-passport-head span,
.context-passport-output span {
  font-family: var(--f-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.context-passport-head strong {
  max-width: 19ch;
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  font-weight: 950;
  line-height: 0.98;
}

.context-passport-head em {
  max-width: 58ch;
  color: rgba(16, 17, 20, 0.7);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.32;
}

.context-passport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.context-passport-card {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 12px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  cursor: pointer;
  text-align: left;
  transition:
  transform 0.14s ease,
  box-shadow 0.14s ease,
  background 0.14s ease;
}

.context-passport-card:nth-child(2),
.context-passport-card:nth-child(5) {
  background: rgba(59, 130, 246, 0.28);
}

.context-passport-card:nth-child(3),
.context-passport-card:nth-child(6) {
  background: rgba(200, 255, 45, 0.44);
}

.context-passport-card:nth-child(4) {
  background: rgba(255, 95, 63, 0.25);
}

.context-passport-card:hover,
.context-passport-card:focus-visible,
.context-passport-card.active,
.context-passport-card[aria-pressed="true"] {
  background: var(--rep-lime, var(--rep-lime));
  box-shadow: 5px 5px 0 var(--surface);
  outline: none;
  transform: translate(-2px, -2px);
}

.context-passport-card span {
  font-family: var(--f-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.context-passport-card strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.04;
}

.context-passport-card em {
  color: rgba(16, 17, 20, 0.72);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.18;
}

.context-passport-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.context-passport-output div {
  display: grid;
  gap: 4px;
}

.context-passport-output span {
  color: var(--rep-lime, var(--rep-lime));
}

.context-passport-output strong {
  color: var(--text);
  font-family: var(--f-display, sans-serif);
  font-size: 1.15rem;
  font-weight: 900;
}

.context-passport-output p {
  margin: 0;
  color: rgba(247, 247, 242, 0.76);
  font-size: 0.82rem;
  line-height: 1.25;
}

.context-passport-start,
.gym-mode-context-reset {
  min-height: 44px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--rep-cyan, var(--rep-cyan));
  color: var(--surface);
  cursor: pointer;
  font-family: var(--f-display, sans-serif);
  font-size: 0.88rem;
  font-weight: 900;
}

.gym-mode-context-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 14px 16px;
  color: var(--surface);
}

.gym-mode-context-strip .gym-mode-label {
  grid-column: 1;
  color: var(--surface);
}

.gym-mode-context-strip strong {
  grid-column: 2;
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 1.08rem;
  font-weight: 920;
}

.gym-mode-context-strip p {
  grid-column: 1 / 3;
  margin: 0;
  color: rgba(16, 17, 20, 0.74);
  font-size: 0.86rem;
  line-height: 1.28;
}

.gym-mode-context-reset {
  grid-column: 3;
  grid-row: 1 / span 2;
  padding: 0 14px;
  background: var(--rep-lime, var(--rep-lime));
}

.gym-mode-context-strip.is-context-pain {
  background: rgba(255, 95, 63, 0.28);
}

@media (max-width: 480px) {
  .context-passport {
  margin-top: 14px;
  padding: 10px;
  box-shadow: 5px 5px 0 rgba(16, 17, 20, 0.2);
  }

  .context-passport-head strong {
  max-width: none;
  font-size: 1.42rem;
  }

  .context-passport-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  }

  .context-passport-card {
  min-height: 78px;
  padding: 9px;
  }

  .context-passport-card strong {
  font-size: 0.86rem;
  }

  .context-passport-card em {
  font-size: 0.67rem;
  }

  .context-passport-output,
  .gym-mode-context-strip {
  grid-template-columns: 1fr;
  }

  .context-passport-start,
  .gym-mode-context-reset,
  .gym-mode-context-strip .gym-mode-label,
  .gym-mode-context-strip strong,
  .gym-mode-context-strip p {
  grid-column: 1;
  grid-row: auto;
  }

  .context-passport-start,
  .gym-mode-context-reset {
  width: 100%;
  }
}

/* ====
   GLOBAL CONTRAST FINAL - readable paper theme, no pale-on-pale UI.
==== */
:root {
  --text: #101114;
  --text-muted: #344154;
  --text-dim: #52617a;
  --text-soft: #1f2938;
  --text-label: #005f84;
  --border: rgba(16, 17, 20, 0.22);
  --border-bright: rgba(16, 17, 20, 0.36);
}

html,
body {
  background: var(--text) !important;
  color: var(--text) !important;
}

/* Keep the obsolete home scroll cue out of the app-first surface. */
.home-scroll-cue {
  display: none !important;
}

.section,
.container,
.container.narrow,
.home-intro,
.home-frame,
.choose-card,
.weight-class-widget,
.cal-widget,
.repdeck-company-contract,
.repdeck-problem-card,
.context-passport,
.settings-drawer,
.tool-card,
.price-card,
.atlas-card,
.signup-card {
  color: var(--text) !important;
  text-shadow: none !important;
}

.choose-card,
.weight-class-widget,
.cal-widget,
.footer-inner,
.quiz,
.tool-card,
.price-card,
.atlas-card,
.signup-card,
.settings-drawer {
  border: 2px solid rgba(16, 17, 20, 0.2) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 6px 6px 0 rgba(16, 17, 20, 0.14) !important;
  opacity: 1 !important;
}

.choose-card,
.weight-class-widget,
.cal-widget {
  animation: none !important;
}

.home-subtitle,
.home-rotator-line,
.choose-card p,
.repdeck-company-contract em,
.repdeck-problem-card em,
.context-passport-head em,
.context-passport-card em,
.wc-input-row label,
.wc-tier-mult,
.wc-foot,
.cal-legend,
.cal-foot,
.section .lead-text,
.tool-card p,
.tool-card-tagline,
.price-tagline,
.footer-line,
.footer-nav a,
.footer-socials a,
.footer-disclaimer,
.settings-meta,
.atlas-count,
#toolsVerticalTag,
#toolsCountMeta,
#trRx,
.gym-mode-context-strip p {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.home-overline,
.hud-marker,
.choose-label,
.wc-label,
.wc-tier-name,
.cal-label,
.repdeck-problem-kicker,
.context-passport-head span,
.context-passport-output span,
.footer-nav a:hover {
  color: var(--text-label) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.choose-card h3,
.choose-card strong,
.wc-tier-target,
.context-passport-head strong,
.context-passport-card strong,
.repdeck-company-contract strong,
.repdeck-problem-card strong,
.footer-line strong {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.wc-input-row input {
  background: var(--text) !important;
  border: 2px solid rgba(16, 17, 20, 0.24) !important;
  color: #f8fbff !important;
}
.wc-input-row input::placeholder {
  color: rgba(248, 251, 255, 0.6) !important;
  opacity: 1 !important;
}

.wc-tier {
  background: var(--text) !important;
  border: 2px solid rgba(16, 17, 20, 0.14) !important;
  border-left: 5px solid var(--rep-cyan, var(--rep-cyan)) !important;
}

.wc-tier-bar,
.cal-cell,
.cal-grid > div > span {
  background: rgba(16, 17, 20, 0.1) !important;
  border-color: rgba(16, 17, 20, 0.16) !important;
}

.cal-grid {
  scrollbar-color: var(--surface) var(--text-muted);
}

.footer {
  background: linear-gradient(
  180deg,
  rgba(247, 249, 253, 0.98),
  var(--text)
  ) !important;
  border-top: 2px solid var(--surface) !important;
  color: var(--text) !important;
}

.footer-inner {
  width: min(100% - 28px, 980px);
  margin: 0 auto;
  padding: 28px;
  border-radius: 8px;
}

.footer-socials-placeholder a {
  opacity: 1 !important;
}

.footer-nav {
  justify-content: center;
  border-top: 1px solid rgba(16, 17, 20, 0.16) !important;
}

.mobile-app-nav,
.gym-mode-shell,
.session-mode,
.boot-overlay,
.context-passport-output {
  --text: #f8fbff;
  --text-muted: #d8e3f8;
  --text-dim: #b8c7e2;
  --text-soft: #eef5ff;
  --text-label: #9eeeff;
}

.gym-mode-shell,
.session-mode,
.boot-overlay {
  color: var(--text) !important;
}

.gym-mode-shell .gym-mode-head p,
.gym-mode-shell .gym-mode-status,
.gym-mode-shell .gym-mode-cue,
.gym-mode-shell .gym-mode-feel,
.gym-mode-shell .gym-mode-readiness span,
.session-mode p,
.session-mode span,
.session-mode label,
.session-mode li,
.boot-line {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.gym-mode-shell h3,
.gym-mode-shell strong,
.session-mode h2,
.session-mode h3,
.session-mode strong {
  color: var(--text) !important;
}

@media (max-width: 480px) {
  .footer {
  padding: 28px 0 calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .footer-inner {
  width: calc(100% - 20px);
  padding: 18px 14px;
  }

  .choose-card,
  .weight-class-widget,
  .cal-widget {
  box-shadow: 4px 4px 0 rgba(16, 17, 20, 0.14) !important;
  }
}

/* ====
   SIDEBAR CONTRAST TRUE FINAL - wins after every legacy layer.
==== */
.sidebar {
  --text: #f8fbff;
  --text-muted: #d8e3f8;
  --text-dim: #b8c7e2;
  --text-soft: #eef5ff;
  --text-label: #93c5fd;
  height: 100dvh;
  background:
  radial-gradient(
    circle at 22% 0%,
    rgba(59, 130, 246, 0.18),
    transparent 34%
  ),
  linear-gradient(180deg, rgba(6, 8, 14, 0.99), rgba(10, 14, 22, 0.99)) !important;
  border-right: 2px solid rgba(59, 130, 246, 0.42) !important;
  color: var(--text) !important;
  overflow: hidden !important;
  box-shadow: 16px 0 44px rgba(0, 0, 0, 0.34) !important;
}

.sidebar,
.sidebar * {
  text-shadow: none !important;
}

.sidebar-head,
.sidebar-mode,
.sidebar-account,
.sidebar-streak,
.sidebar-foot {
  flex-shrink: 0;
}

.sidebar-head {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(216, 227, 248, 0.16) !important;
}

.sidebar-brand-name,
.sidebar-close,
.sidebar-mode-toggle .seg-btn,
.sb-title,
.sa-line-1,
.saa-line,
.ss-num-row,
.sidebar-foot kbd {
  color: var(--text) !important;
  opacity: 1 !important;
}

.sidebar-mode-label,
.sb-glyph,
.sb-group[open] summary,
.ss-label,
.ss-grace strong,
.sa-glyph,
.saa-meta a {
  color: var(--text-label) !important;
  opacity: 1 !important;
}

.sidebar-mode-hint,
.sa-line-2,
.saa-meta,
.ss-unit,
.ss-meta,
.ss-grace,
.sidebar-foot-line {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.sidebar-mode-toggle {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(216, 227, 248, 0.18) !important;
  border-radius: 8px !important;
}

.sidebar-mode-toggle .seg-btn {
  min-height: 40px;
  border-radius: 7px !important;
}

.sidebar-mode-toggle .seg-btn:not(.active) {
  background: rgba(255, 255, 255, 0.03) !important;
}

.sidebar-mode-toggle .seg-btn.active {
  background: var(--text) !important;
  color: var(--bg-alt) !important;
  box-shadow: none !important;
}

.sidebar-account-cta {
  background: linear-gradient(
  135deg,
  rgba(59, 130, 246, 0.2),
  rgba(125, 255, 206, 0.1)
  ) !important;
  border: 1px solid rgba(96, 165, 250, 0.56) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.sidebar-account-active,
.sidebar-streak {
  background: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
}

.sidebar-streak[data-streak-state="empty"] .ss-num {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.ss-dot {
  background: rgba(96, 165, 250, 0.22) !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
}

.sidebar-nav {
  min-height: 0;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--rep-cyan) rgba(255, 255, 255, 0.1);
  padding-bottom: 18px !important;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rep-cyan), var(--purple));
  border-radius: 999px;
}

.sb-group summary {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  min-height: 44px;
}

.sb-group summary::after {
  color: var(--text-label) !important;
}

.sb-group summary:hover,
.sb-group[open] summary {
  background: rgba(59, 130, 246, 0.12) !important;
}

.sb-group li a {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  min-height: 40px;
  line-height: 1.25;
}

.sb-group li a:hover,
.sb-group li a.active,
.sb-group li a[aria-current="page"],
.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
  color: var(--text) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  text-shadow: none !important;
}

.sb-dot {
  background: rgba(216, 227, 248, 0.62) !important;
}

.sidebar-foot {
  background: rgba(6, 8, 14, 0.96) !important;
  border-top: 1px solid rgba(216, 227, 248, 0.16) !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

/* ====
   DESKTOP OVERFLOW TRUE FINAL - no hidden phone rail on desktop.
==== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
  overflow-x: hidden;
  }
}

@media (min-width: 761px) {
  .mobile-app-nav {
  display: none !important;
  }
}

@media (max-width: 480px) {
  .mobile-app-nav {
  display: flex !important;
  }
}

@media (min-width: 1280px) {
  body:not([data-current-page="home"]) .topnav {
  box-sizing: border-box;
  width: calc(100vw - 280px) !important;
  max-width: calc(100vw - 280px) !important;
  }
}

/* CC172 finalize: three light-on-light surfaces left after the v1.1.25 contrast pass.
   .gym-mode-card body and .atlas-filter buttons sit on opaque light backgrounds
   but still inherit the dark-theme light text token. Force REPDECK ink. */
.gym-mode-card p,
.gym-mode-card li {
  color: var(--rep-ink) !important;
}
.atlas-filter,
.atlas-filter.active {
  color: #101114 !important;
}

.session-floor-fix {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 14px;
  background:
  linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.065),
    rgba(200, 255, 45, 0.045)
  ),
  rgba(255, 255, 255, 0.018);
}

.session-floor-fix-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.session-floor-fix-head span {
  color: var(--blue-light) !important;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.session-floor-fix-head strong {
  color: var(--text) !important;
  font-size: 0.86rem;
  text-align: right;
}

.session-floor-fix-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.session-floor-fix-actions button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(216, 227, 248, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.session-floor-fix-actions button:hover,
.session-floor-fix-actions button:focus-visible {
  border-color: rgba(46, 255, 122, 0.46);
  background: rgba(46, 255, 122, 0.09);
  outline: none;
}

.session-floor-fix-actions button span {
  color: var(--text) !important;
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.08;
}

.session-floor-fix-actions button small {
  color: var(--text-dim) !important;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-floor-other {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.session-floor-other[hidden] {
  display: none !important;
}

.session-floor-other label {
  display: grid;
  gap: 5px;
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.session-floor-other input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 10px;
  background: var(--text);
  color: var(--surface);
  font: 700 0.92rem var(--f-display);
  letter-spacing: 0;
  text-transform: none;
}

.session-floor-other button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(46, 255, 122, 0.34);
  border-radius: 10px;
  background: rgba(46, 255, 122, 0.12);
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
}

.session-tap-deck {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  border-radius: 12px;
  background:
  linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.05),
    rgba(46, 255, 122, 0.035)
  ),
  rgba(255, 255, 255, 0.018);
}

.session-value-taps {
  order: 4;
}

.session-actions {
  order: 5;
}

.session-note-taps {
  order: 6;
}

.session-note-row {
  order: 7;
}

.session-advanced-details {
  order: 8;
}

.session-tap-row {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.session-tap-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.session-tap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.session-tap-head span {
  color: var(--blue-light) !important;
  font-family: var(--f-mono);
  font-size: 0.61rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.session-tap-head small {
  color: var(--text-dim) !important;
  font-size: 0.68rem;
  font-weight: 780;
}

.session-tap-actions {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.session-tap-actions button { height: 44px !important;
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 48px;
  display: grid;
  gap: 2px;
  place-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(216, 227, 248, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  outline: 2px solid transparent;
  outline-offset: 3px;
  white-space: nowrap;
}

.session-tap-actions button small {
  color: var(--text-dim) !important;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.session-tap-actions button:hover,
.session-tap-actions button:focus-visible,
.session-tap-actions button.active {
  border-color: rgba(46, 255, 122, 0.52);
  background: rgba(46, 255, 122, 0.12);
  outline-color: transparent;
}

.session-tap-actions button:focus,
.session-tap-actions button:focus-visible {
  border-color: rgba(96, 165, 250, 0.74);
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  box-shadow:
  0 0 0 5px rgba(96, 165, 250, 0.12),
  0 12px 26px rgba(96, 165, 250, 0.16);
}

/* RPE picker 2×4 grid prototype — STRUCT C3.009 Amendment C / P-55 AMBER fix
   (CC-5 iter 10; BEACON applies for P-40 Screen 3 implementation).
   Opt-in: add class .rpe-grid-8 to the .session-tap-actions container.
   Existing horizontal-scroll behavior remains the default for other tap-action
   surfaces (notes, etc) — no cascade risk to current production state. */
.session-tap-actions.rpe-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  grid-auto-rows: minmax(44px, auto);
  gap: 8px; /* WCAG 2.5.5 adjacent-cluster spacing */
  overflow-x: visible; /* override flex-scroll default */
}
.session-tap-actions.rpe-grid-8 button { min-height: 46px !important;
  min-width: 44px; /* WCAG 2.5.5 touch target */

  flex: initial; /* override flex shorthand from base rule */
  padding: 8px 10px; /* tighter than base 7/10 for grid density */
}
@media (max-width: 480px) {
  /* iPhone SE 375px viewport: lock 2×4 layout explicitly */
  .session-tap-actions.rpe-grid-8 {
  grid-template-columns: repeat(4, 1fr);
  }
}

.session-advanced-details {
  border: 1px solid rgba(216, 227, 248, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.session-advanced-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 0.86rem;
  font-weight: 850;
}

.session-advanced-details[open] {
  background: rgba(255, 255, 255, 0.04);
}

.session-advanced-grid {
  padding: 0 12px 12px;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

@media (min-width: 701px) {
  .session-floor-fix {
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
  }

  .session-floor-fix-actions {
  gap: 6px;
  }

  .session-floor-fix-actions button {
  min-height: 44px;
  padding: 7px 9px;
  }

  .session-floor-fix-actions button span {
  font-size: 0.76rem;
  }

  .session-floor-fix-actions button small {
  font-size: 0.56rem;
  }
}

@media (max-width: 480px) {
  .session-floor-fix {
  margin: 0 0 10px;
  padding: 10px;
  }

  .session-floor-fix-head {
  display: grid;
  gap: 3px;
  }

  .session-floor-fix-head strong {
  text-align: left;
  font-size: 0.78rem;
  }

  .session-floor-fix-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  }

  .session-floor-fix-actions button {
  min-height: 48px;
  padding: 8px;
  }

  .session-floor-fix-actions button span {
  font-size: 0.78rem;
  }

  .session-floor-other {
  grid-template-columns: 1fr;
  }

  .session-tap-deck {
  gap: 6px;
  padding: 8px;
  }

  .session-tap-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  }

  .session-tap-head span {
  font-size: 0.57rem;
  }

  .session-tap-head small {
  font-size: 0.61rem;
  }

  .session-tap-actions button { height: 44px !important;
  min-height: 44px;
  min-width: 50px;
  padding: 6px 8px;
  font-size: 0.76rem;
  }

  .session-tap-actions button small {
  font-size: 0.5rem;
  }

  .session-advanced-grid {
  grid-template-columns: 1fr;
  }
}

/* ====
   LIVE SESSION FINAL - gym-floor cockpit hierarchy.
   Desktop now has one primary action surface instead of four equal columns.
==== */
.session-mode {
  background:
  radial-gradient(
    circle at 18% 0%,
    rgba(59, 130, 246, 0.16),
    transparent 30%
  ),
  radial-gradient(circle at 82% 4%, rgba(200, 255, 45, 0.1), transparent 26%),
  linear-gradient(180deg, #05080d 0%, #010204 100%) !important;
}

.session-head {
  min-height: 72px;
  padding: 12px clamp(14px, 2vw, 28px) !important;
  border-bottom: 1px solid rgba(216, 227, 248, 0.12) !important;
  background:
  linear-gradient(90deg, rgba(59, 130, 246, 0.12), transparent 30%),
  rgba(3, 6, 10, 0.94) !important;
}

.session-mode.open .session-phone-brief {
  display: grid;
}

@media (min-width: 701px) {
  .session-phone-brief {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px clamp(16px, 2vw, 28px);
  border-bottom: 1px solid rgba(216, 227, 248, 0.1);
  background:
    linear-gradient(
    135deg,
    rgba(46, 255, 122, 0.11),
    rgba(59, 130, 246, 0.07)
    ),
    rgba(3, 7, 11, 0.92);
  }

  .session-phone-brief-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(46, 255, 122, 0.24);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  }

  .session-phone-brief-main span {
  color: var(--green-light) !important;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  }

  .session-phone-brief-main strong {
  min-width: 0;
  color: var(--text) !important;
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.2vw, 2.35rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
  }

  .session-phone-brief-main small {
  grid-column: 1 / -1;
  color: var(--text-muted) !important;
  font-size: 0.92rem;
  line-height: 1.35;
  }

  .session-phone-brief p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 95, 63, 0.3);
  border-radius: 14px;
  background: rgba(255, 95, 63, 0.08);
  color: #ffdcd6 !important;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.35;
  }

  .session-body {
  grid-template-columns: minmax(360px, 0.94fr) minmax(520px, 1.28fr) minmax(
    320px,
    0.84fr
    ) !important;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas:
    "plan cockpit stats"
    "plan cockpit feed";
  gap: 14px !important;
  align-items: stretch;
  padding: 14px clamp(16px, 2vw, 28px) 18px !important;
  overflow: hidden auto;
  }

  .session-plan {
  grid-area: plan;
  min-height: 0;
  }

  .session-input {
  grid-area: cockpit;
  }

  .session-stats {
  grid-area: stats;
  }

  .session-feed {
  grid-area: feed;
  min-height: 0;
  }

  .session-pane {
  min-width: 0;
  border: 1px solid rgba(216, 227, 248, 0.13) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018)
    ),
    rgba(3, 6, 10, 0.72) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
  }

  .session-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 1.7vw, 24px) !important;
  border-color: rgba(46, 255, 122, 0.32) !important;
  background:
    linear-gradient(
    135deg,
    rgba(46, 255, 122, 0.105),
    rgba(59, 130, 246, 0.06) 46%,
    rgba(255, 255, 255, 0.018)
    ),
    #05090e !important;
  }

  .session-input .session-pane-label {
  color: var(--green-light) !important;
  font-size: 0.78rem;
  }

  .session-active-target {
  position: relative !important;
  top: auto !important;
  margin: 0 0 10px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  }

  .session-active-target strong {
  font-size: clamp(1.65rem, 2.45vw, 2.55rem) !important;
  line-height: 0.98 !important;
  }

  .session-active-target small {
  font-size: 0.92rem !important;
  }

  .session-quick-form {
  gap: 10px !important;
  }

  .session-form-row {
  gap: 7px !important;
  }

  .session-form-row label {
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 100%;
  }

  .session-form-row input,
  .session-form-row select,
  .session-swap-search input {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 46px;
  border: 2px solid rgba(216, 227, 248, 0.2) !important;
  border-radius: 12px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  font-size: 1rem;
  font-weight: 720;
  }

  .session-form-row input::placeholder {
  color: rgba(16, 17, 20, 0.48);
  }

  .session-form-3 {
  gap: 12px !important;
  }

  .session-actions {
  grid-template-columns: 1.25fr repeat(3, minmax(104px, 0.82fr)) !important;
  gap: 10px !important;
  margin-top: 0 !important;
  }

  .session-log {
  height: 48px;
  min-height: 48px;
  padding: 0 12px !important;
  background: var(--rep-lime) !important;
  color: var(--rep-ink) !important;
  border-color: var(--rep-lime) !important;
  box-shadow:
    0 0 0 1px rgba(200, 255, 45, 0.18),
    0 18px 34px rgba(200, 255, 45, 0.12) !important;
  font-size: 1rem;
  }

  .session-rest,
  .session-repeat {
  height: 48px;
  min-height: 48px;
  padding: 0 10px !important;
  border-color: rgba(216, 227, 248, 0.16) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  }

  .session-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-stat {
  border-radius: 12px !important;
  background: rgba(46, 255, 122, 0.055) !important;
  }

  .session-plan-list,
  .session-feed-list {
  max-height: none !important;
  min-height: 0;
  }

  .session-plan {
  overflow: hidden;
  }

  .session-plan-list {
  flex: 1 1 auto;
  overflow-y: auto;
  }

  .session-feed {
  display: flex;
  flex-direction: column;
  }

  .session-feed-list {
  flex: 1 1 auto;
  overflow-y: auto;
  }

  .session-feed-empty {
  min-height: 180px;
  display: grid !important;
  place-items: center;
  border: 1px dashed rgba(216, 227, 248, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .session-body {
  grid-template-columns: minmax(380px, 1fr) minmax(320px, 0.8fr) !important;
  grid-template-areas:
    "cockpit stats"
    "plan feed";
  overflow-y: auto;
  }
}

/* CC178 peripheral memory: glanceable "you did X lb x Y N days ago" inside Log pane. */
.session-last-set-hint {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--rep-lime);
  border-radius: 6px;
  background: rgba(200, 255, 45, 0.1);
  color: var(--rep-ink);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.86rem;
  line-height: 1.35;
}
.session-last-set-hint[hidden] {
  display: none;
}

/* CC179 coach-share: one-tap mailto export from the session recap. */
.session-recap-coach-share {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--rep-line);
  border-radius: 8px;
  background: var(--rep-paper-2);
  color: var(--rep-ink);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--rep-line);
  transition:
  background 0.16s ease,
  transform 0.16s ease;
}
.session-recap-coach-share:hover {
  background: var(--rep-lime);
  transform: translate(-1px, -1px);
}
.session-recap-coach-share[hidden] {
  display: none;
}

/* Session Save State & Recovery styles */
.session-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(46, 255, 122, 0.34);
  border-radius: 999px;
  background: rgba(46, 255, 122, 0.1);
  color: var(--green-light) !important;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.session-save-state.unsaved,
.session-save-state.warning {
  border-color: rgba(255, 181, 71, 0.44);
  background: rgba(255, 181, 71, 0.12);
  color: #ffe1a3 !important;
}

.session-export {
  border-color: rgba(216, 227, 248, 0.2) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--text) !important;
}

.session-start-btn.has-active-session {
  background: linear-gradient(
  135deg,
  var(--rep-lime),
  var(--rep-cyan)
  ) !important;
}

/* CC183 active-workout recovery: visible local resume/export/discard guard. */
.session-recovery-panel {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.session-recovery-panel[hidden] {
  display: none !important;
}

.session-recovery-card {
  width: min(680px, 100%);
  padding: 16px;
  border: 2px solid rgba(46, 255, 122, 0.54);
  border-radius: 18px;
  background:
  linear-gradient(135deg, rgba(46, 255, 122, 0.16), rgba(59, 130, 246, 0.11)),
  rgba(3, 7, 11, 0.96);
  color: var(--text);
  box-shadow:
  0 24px 70px rgba(0, 0, 0, 0.46),
  0 0 44px rgba(46, 255, 122, 0.16);
  pointer-events: auto;
}

.session-recovery-kicker {
  margin: 0 0 6px;
  color: var(--green-light);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.session-recovery-card h3 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  line-height: 1;
}

.session-recovery-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.42;
}

.session-recovery-actions {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.session-recovery-actions button {
  min-height: 48px;
  border: 1px solid rgba(216, 227, 248, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 850;
  cursor: pointer;
}

.session-recovery-actions .session-recovery-primary {
  border-color: #1d4ed8;
  background: #2563eb; /* de-neon: brand blue replaces retired lime on the gym recovery primary action */
  color: #ffffff; /* white on #2563eb = 5.17:1 AA (near-black --rep-ink fails on blue) */
}

.session-recovery-actions .session-recovery-danger {
  border-color: rgba(255, 95, 63, 0.52);
  color: #ffd6cf;
}

.session-recovery-meta {
  margin-top: 10px !important;
  color: var(--text-dim) !important;
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

@media (max-width: 480px) {
  .session-head {
  padding: 8px 10px !important;
  min-height: 0 !important;
  }

  .session-save-state {
  order: 3;
  width: 100%;
  justify-content: center;
  min-height: 34px;
  }

  .session-head-right {
  gap: 6px;
  }

  .session-export,
  .session-finish {
  min-height: 44px;
  padding-inline: 10px !important;
  font-size: 0.82rem !important;
  }

  .session-recovery-panel {
  left: 10px;
  right: 10px;
  bottom: 10px;
  }

  .session-recovery-card {
  padding: 14px;
  }

  .session-recovery-actions {
  grid-template-columns: 1fr 1fr;
  }

  .session-recovery-actions .session-recovery-primary {
  grid-column: 1 / -1;
  }
}

/* CC180 plate calculator: per-side breakdown below the weight row. */
.session-plate-hint {
  margin: 4px 0 10px;
  padding: 7px 12px;
  border-left: 3px solid var(--rep-cyan);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--rep-ink);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.session-plate-hint[hidden] {
  display: none;
}

/* CC183 quiz Other free-text: appears when user clicks the Other option on a multi-pick step. */
.quiz-other-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 2px dashed var(--rep-line);
  border-radius: 8px;
  background: rgba(200, 255, 45, 0.08);
  color: var(--rep-ink);
}
.quiz-other-label[hidden] {
  display: none;
}
.quiz-other-label span {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--rep-ink);
  opacity: 0.85;
}
.quiz-other-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--rep-line);
  border-radius: 6px;
  background: var(--rep-paper-2);
  color: var(--rep-ink);
  font-size: 1rem;
  font-family: inherit;
}
.quiz-other-input:focus {
  outline: 2px solid var(--rep-lime);
  outline-offset: 2px;
}

/* Canonical Eccentryx mark: keeps header/sidebar/logo/manifest on one asset language. */
.brand-mark,
.sidebar-brand-mark {
  background: var(--surface) !important;
  border: 2px solid var(--surface) !important;
  border-radius: 10px !important;
  box-shadow:
  4px 4px 0 var(--surface),
  0 0 0 1px rgba(96, 165, 250, 0.36) inset !important;
  overflow: hidden;
  color: #e7faff !important;
  text-shadow: none !important;
}

.brand-mark svg,
.sidebar-brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Safwan identity pass: less generic demo glow, more owned gym-floor logbook. */
body[data-current-page="home"] .home-intro {
  background:
  radial-gradient(
    ellipse 58% 42% at 22% 12%,
    rgba(59, 130, 246, 0.28),
    transparent 64%
  ),
  radial-gradient(
    ellipse 54% 46% at 88% 18%,
    rgba(200, 255, 45, 0.32),
    transparent 66%
  ),
  linear-gradient(180deg, #f8fcff 0%, #edf6fb 52%, #f7f9ee 100%) !important;
}

body[data-current-page="home"] .home-intro::before {
  border-color: rgba(16, 17, 20, 0.18) !important;
  background:
  repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.045) 23px 24px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.04) 23px 24px
  ),
  linear-gradient(90deg, rgba(59, 130, 246, 0.06), rgba(200, 255, 45, 0.08)) !important;
}

.home-wordmark .wm-letter {
  background: linear-gradient(
  120deg,
  var(--rep-cyan) 0%,
  #93c5fd 45%,
  var(--rep-lime) 78%,
  #80a8ff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.home-subtitle,
.home-rotator-line {
  color: #1c2a35 !important;
}

.home-audience-strip span {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(16, 17, 20, 0.16) !important;
  /* a11y/realism: --surface = #ffffff under clinical-override; pin real ink. */
  color: #101114 !important;
}

.strand-b-founder-proof {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow:
  6px 6px 0 rgba(16, 17, 20, 0.22),
  inset 0 0 0 1px rgba(59, 130, 246, 0.18) !important;
}

.strand-b-founder-avatar {
  border-radius: 10px !important;
  background: var(--surface) !important;
  color: #e7faff !important;
  box-shadow:
  4px 4px 0 var(--rep-lime),
  inset 0 0 0 3px rgba(59, 130, 246, 0.7) !important;
  font-size: 0.98rem !important;
  letter-spacing: -0.04em !important;
}

.strand-b-founder-kicker {
  color: #096c5a !important;
}

.strand-b-proof-steps span:nth-child(1) {
  background: var(--text) !important;
}

.strand-b-proof-steps span:nth-child(2) {
  background: rgba(59, 130, 246, 0.24) !important;
}

.strand-b-proof-steps span:nth-child(3) {
  background: rgba(200, 255, 45, 0.48) !important;
}

.assistant-toggle {
  background: linear-gradient(
  135deg,
  var(--surface) 0%,
  #123f4b 56%,
  var(--rep-lime) 100%
  ) !important;
  border: 2px solid var(--surface) !important;
  box-shadow:
  4px 4px 0 var(--surface),
  0 0 28px rgba(59, 130, 246, 0.28) !important;
}

.assistant-panel {
  border: 2px solid var(--surface) !important;
  border-radius: 10px !important;
  box-shadow:
  6px 6px 0 rgba(16, 17, 20, 0.42),
  0 22px 54px rgba(0, 0, 0, 0.38) !important;
}

/* Safwan surface polish: fix mobile leaks, brand signal, and route-card blank states. */
.brand {
  align-items: center !important;
}

.brand-mark {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}

.brand-name {
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

body[data-current-page="home"] .home-route-strip a {
  opacity: 1 !important;
  transform: none !important;
  animation-delay: 0s !important;
}

body[data-current-page="home"] .home-frame > *,
body[data-current-page="home"] .home-audience-strip,
body[data-current-page="home"] .home-route-strip,
body[data-current-page="home"] .repdeck-floor-pass,
body[data-current-page="home"] .strand-b-founder-proof,
body[data-current-page="home"] .strand-b-how-it-works,
body[data-current-page="home"] .strand-b-not-list {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

body[data-current-page="home"] .home-intro {
  background:
  linear-gradient(135deg, rgba(59, 130, 246, 0.14), transparent 38%),
  linear-gradient(225deg, rgba(200, 255, 45, 0.16), transparent 36%),
  linear-gradient(180deg, var(--text) 0%, var(--text) 100%) !important;
}

body[data-current-page="home"] .home-intro::before {
  border-color: rgba(16, 17, 20, 0.1) !important;
  background:
  repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.026) 23px 24px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.022) 23px 24px
  ) !important;
}

@media (min-width: 701px) {
  body[data-current-page="home"] .home-intro {
  align-items: flex-start !important;
  padding-top: clamp(54px, 5.6vw, 76px) !important;
  }

  body[data-current-page="home"] .home-frame {
  max-width: min(1080px, calc(100vw - 96px)) !important;
  }

  body[data-current-page="home"] .home-wordmark {
  font-size: clamp(4.9rem, 8.4vw, 7.4rem) !important;
  margin-bottom: 16px !important;
  }

  body[data-current-page="home"] .home-overline {
  margin-bottom: 20px !important;
  }

  body[data-current-page="home"] .home-subtitle {
  margin-bottom: 16px !important;
  }

  body[data-current-page="home"] .home-rotator-line {
  margin-bottom: 20px !important;
  }

  body[data-current-page="home"] .home-audience-strip {
  margin: 0 auto 18px !important;
  }

  body[data-current-page="home"] .home-route-strip {
  width: min(100%, 920px) !important;
  margin-bottom: 20px !important;
  }

  body[data-current-page="home"] .repdeck-floor-pass,
  body[data-current-page="home"] .strand-b-founder-proof,
  body[data-current-page="home"] .strand-b-how-it-works,
  body[data-current-page="home"] .strand-b-not-list {
  width: min(100%, 900px) !important;
  }
}

@media (max-width: 480px) {
  .brand-mark {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  }

  body[data-current-page="home"] .home-wordmark {
  display: none !important;
  }

  body[data-current-page="home"] .home-subtitle {
  max-width: 28ch !important;
  width: 100% !important;
  font-size: clamp(1.02rem, 4.7vw, 1.32rem) !important;
  line-height: 1.3 !important;
  margin-top: 6px !important;
  }

  .settings-drawer:not(.open) {
  transform: translateX(calc(100% + 24px)) !important;
  }
}

/* ====
   GYM-FLOOR TITLE FINAL - serious first impression over poster chrome.
==== */

body[data-current-page="home"] .home-intro {
  background:
  linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(244, 249, 251, 0.94) 52%,
    rgba(247, 249, 238, 0.92) 100%
  ),
  linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.12) 0%,
    transparent 28%,
    transparent 72%,
    rgba(200, 255, 45, 0.14) 100%
  ),
  var(--text) !important;
  color: var(--surface) !important;
}

body[data-current-page="home"] .home-intro{background:radial-gradient(ellipse 60% 50% at 20% 0%,#3b82f614 0,transparent),radial-gradient(ellipse 60% 50% at 80% 10%,#c8ff2d14 0,transparent),var(--bg-alt)!important;color:var(--surface)!important}


body[data-current-page="home"] .home-intro::before {
  inset: 76px 18px 24px !important;
  border: 2px solid rgba(16, 17, 20, 0.13) !important;
  background:
  linear-gradient(
    90deg,
    transparent 0 10%,
    rgba(16, 17, 20, 0.045) 10% 10.3%,
    transparent 10.3% 89.7%,
    rgba(16, 17, 20, 0.045) 89.7% 90%,
    transparent 90%
  ),
  repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.028) 23px 24px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 23px,
    rgba(16, 17, 20, 0.024) 23px 24px
  ) !important;
}

body[data-current-page="home"] .home-frame {
  max-width: min(1040px, calc(100vw - 88px)) !important;
  text-align: left !important;
}

body[data-current-page="home"] .home-overline {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px 12px !important;
  margin: 0 0 14px !important;
  color: #075f52 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

body[data-current-page="home"] .home-overline-version {
  color: var(--surface) !important;
  opacity: 0.78 !important;
}

body[data-current-page="home"] .home-wordmark,
body[data-current-page="home"] .home-title-lockup {
  display: grid !important;
  gap: 10px !important;
  width: min(100%, 860px) !important;
  margin: 0 0 12px !important;
  color: var(--surface) !important;
  font-family: var(--f-display, sans-serif) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}

body[data-current-page="home"] .home-brand-stamp {
  display: inline-grid !important;
  width: max-content !important;
  max-width: 100% !important;
  place-items: center !important;
  padding: 8px 12px !important;
  border: 2px solid var(--surface) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 4px 4px 0 var(--rep-cyan) !important;
  font-family: var(--f-mono, monospace) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

body[data-current-page="home"] .home-title-main {
  display: block !important;
  max-width: 11ch !important;
  color: var(--surface) !important;
  font-size: 4.25rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 0.94 !important;
  text-wrap: balance;
  -webkit-text-fill-color: currentColor !important;
}

body[data-current-page="home"] .home-wordmark .wm-letter {
  background: none !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-current-page="home"] .home-subtitle {
  max-width: 480px !important;
  margin: 0 0 10px !important;
  color: #1f2938 !important;
  font-size: 1.42rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

body[data-current-page="home"] .home-rotator-line {
  width: min(100%, 740px) !important;
  max-width: 480px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #27313a !important;
  font-family: var(--f-body, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
}

.home-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(100%, 760px);
  margin: 0 0 16px;
}

.home-proof-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 2px solid rgba(16, 17, 20, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  /* a11y/realism: --surface resolves to #ffffff under clinical-override — a
     background token must never be a foreground; pin real ink. */
  color: #101114;
  box-shadow: 3px 3px 0 rgba(16, 17, 20, 0.18);
  font-family: var(--f-mono, monospace);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

body[data-current-page="home"] .home-route-strip {
  width: min(100%, 900px) !important;
  margin: 0 0 16px !important;
}

body[data-current-page="home"] .repdeck-floor-pass {
  width: min(100%, 900px) !important;
  margin-top: 0 !important;
}

body[data-current-page="home"] .strand-b-founder-proof {
  margin-top: 14px !important;
}

body[data-current-page="home"] .session-start-btn {
  display: none !important;
}

@media (max-width: 1024px) {
  body[data-current-page="home"] .home-title-main {
  font-size: 3.35rem !important;
  }
}

@media (max-width: 480px) {
  body[data-current-page="home"] .home-intro {
  min-height: calc(100svh - 120px) !important;
  padding: 16px 14px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body[data-current-page="home"] .home-intro::before {
  inset: 58px 10px 86px !important;
  }

  body[data-current-page="home"] .home-frame {
  max-width: 100% !important;
  padding-top: 0 !important;
  }

  body[data-current-page="home"] .home-overline {
  margin-bottom: 10px !important;
  font-size: 0.58rem !important;
  }

  body[data-current-page="home"] .home-wordmark,
  body[data-current-page="home"] .home-title-lockup {
  display: grid !important;
  gap: 8px !important;
  margin-bottom: 9px !important;
  }

  body[data-current-page="home"] .home-brand-stamp {
  padding: 7px 9px !important;
  font-size: 0.7rem !important;
  box-shadow: 3px 3px 0 var(--rep-cyan) !important;
  }

  body[data-current-page="home"] .home-title-main {
  max-width: 11ch !important;
  font-size: 2.28rem !important;
  line-height: 0.96 !important;
  }

  body[data-current-page="home"] .home-subtitle {
  width: 100% !important;
  max-width: 26ch !important;
  margin: 0 0 8px !important;
  font-size: 1.04rem !important;
  line-height: 1.18 !important;
  }

  body[data-current-page="home"] .home-rotator-line {
  max-width: 32ch !important;
  margin-bottom: 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.32 !important;
  }

  .home-proof-strip {
  gap: 6px;
  margin-bottom: 10px;
  }

  .home-proof-strip span {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 0.6rem;
  }

  body[data-current-page="home"] .home-route-strip {
  gap: 2px !important;
  margin-bottom: 10px !important;
  }

  body[data-current-page="home"] .home-route-strip a {
  min-height: 74px !important;
  padding: 10px 9px !important;
  }

  body[data-current-page="home"] .repdeck-floor-pass {
  gap: 7px !important;
  }
}

@media (max-width: 1024px) and (max-height: 640px) {
  body[data-current-page="home"] .home-intro {
  min-height: calc(100svh - 104px) !important;
  padding: 8px 14px calc(86px + env(safe-area-inset-bottom)) !important;
  }

  body[data-current-page="home"] .home-intro::before {
  inset: 54px 10px 76px !important;
  }

  body[data-current-page="home"] .home-overline {
  margin-bottom: 6px !important;
  font-size: 0.52rem !important;
  }

  body[data-current-page="home"] .home-wordmark,
  body[data-current-page="home"] .home-title-lockup {
  gap: 5px !important;
  margin-bottom: 6px !important;
  }

  body[data-current-page="home"] .home-brand-stamp {
  padding: 5px 7px !important;
  font-size: 0.62rem !important;
  box-shadow: 3px 3px 0 var(--rep-cyan) !important;
  }

  body[data-current-page="home"] .home-title-main {
  max-width: 12ch !important;
  font-size: 1.86rem !important;
  line-height: 0.94 !important;
  }

  body[data-current-page="home"] .home-subtitle {
  max-width: 25ch !important;
  margin-bottom: 5px !important;
  font-size: 0.92rem !important;
  line-height: 1.08 !important;
  }

  body[data-current-page="home"] .home-rotator-line,
  body[data-current-page="home"] .home-proof-strip {
  display: none !important;
  }

  body[data-current-page="home"] .home-route-strip {
  gap: 2px !important;
  margin-bottom: 7px !important;
  }

  body[data-current-page="home"] .home-route-strip a {
  min-height: 58px !important;
  padding: 7px 8px !important;
  box-shadow: 4px 4px 0 var(--surface) !important;
  }

  body[data-current-page="home"] .home-route-strip strong {
  font-size: 0.92rem !important;
  line-height: 1 !important;
  }

  body[data-current-page="home"] .home-route-strip em {
  font-size: 0.64rem !important;
  line-height: 1.05 !important;
  }

  body[data-current-page="home"] .repdeck-floor-pass {
  gap: 5px !important;
  }

  body[data-current-page="home"] .repdeck-floor-primary {
  min-height: 52px !important;
  padding: 8px 10px !important;
  }

  body[data-current-page="home"] .repdeck-floor-primary strong {
  font-size: 0.92rem !important;
  }

  body[data-current-page="home"] .repdeck-floor-primary em {
  font-size: 0.68rem !important;
  line-height: 1.12 !important;
  }

  body[data-current-page="home"] .repdeck-floor-stack {
  gap: 4px !important;
  }

  body[data-current-page="home"] .repdeck-floor-stack a {
  min-height: 42px !important;
  padding: 6px !important;
  }

  body[data-current-page="home"] .repdeck-floor-stack strong {
  font-size: 0.62rem !important;
  }
}

@media (max-width: 480px) {
  body[data-current-page="home"] .home-title-main {
  font-size: 2.08rem !important;
  }

  body[data-current-page="home"] .home-subtitle {
  font-size: 0.96rem !important;
  }

  body[data-current-page="home"] .home-rotator-line {
  display: none !important;
  }
}

/* ====
   RACK-SIDE RECEIPT - current-state proof without fake social proof.
==== */
.floor-receipt-board {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 900px);
  margin: 14px 0 0;
  padding: 18px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background:
  linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.12),
    transparent 34%,
    rgba(200, 255, 45, 0.16)
  ),
  var(--text);
  box-shadow: 7px 7px 0 rgba(16, 17, 20, 0.26);
  overflow: hidden;
}

.floor-receipt-board::before {
  content: "";
  position: absolute;
  inset: 12px 14px auto auto;
  width: 92px;
  height: 14px;
  border-top: 3px solid var(--surface);
  border-bottom: 3px solid var(--surface);
  opacity: 0.28;
  pointer-events: none;
}

.floor-receipt-head {
  display: grid;
  gap: 4px;
  max-width: 480px;
}

.floor-receipt-head span,
.floor-receipt-grid span,
.floor-receipt-boundary span {
  font-family: var(--f-mono, monospace);
  letter-spacing: 0;
}

.floor-receipt-head span {
  color: #075f52;
  font-size: 0.68rem;
  font-weight: 900;
}

.floor-receipt-head strong {
  color: var(--surface);
  font-family: var(--f-display, sans-serif);
  font-size: 1.42rem;
  font-weight: 950;
  line-height: 1.02;
}

.floor-receipt-head em {
  color: rgba(16, 17, 20, 0.76);
  font-style: normal;
  font-weight: 700;
  line-height: 1.34;
}

.floor-receipt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.floor-receipt-grid article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 148px;
  padding: 13px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  box-shadow: 4px 4px 0 rgba(16, 17, 20, 0.18);
}

.floor-receipt-grid article:nth-child(1) {
  background: rgba(200, 255, 45, 0.44);
}

.floor-receipt-grid article:nth-child(2) {
  background: var(--surface);
  color: var(--text);
}

.floor-receipt-grid article:nth-child(3) {
  background: rgba(59, 130, 246, 0.28);
}

.floor-receipt-grid article:nth-child(4) {
  background: rgba(255, 95, 63, 0.18);
}

.floor-receipt-grid span {
  font-size: 0.62rem;
  font-weight: 900;
}

.floor-receipt-grid strong {
  font-family: var(--f-display, sans-serif);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.02;
}

.floor-receipt-grid em {
  color: currentColor;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.32;
  opacity: 0.82;
}

.floor-receipt-boundary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.floor-receipt-boundary span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 900;
}

@media (max-width: 1024px) {
  .floor-receipt-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .floor-receipt-board {
  padding: 14px;
  box-shadow: 5px 5px 0 rgba(16, 17, 20, 0.24);
  }

  .floor-receipt-grid {
  gap: 8px;
  }

  .floor-receipt-grid article {
  min-height: 118px;
  padding: 10px;
  }

  .floor-receipt-head strong {
  font-size: 1.12rem;
  }
}

@media (max-width: 480px) {
  .floor-receipt-grid {
  grid-template-columns: 1fr;
  }

  .floor-receipt-grid article {
  min-height: auto;
  }
}

/* ====
   PHONE GYM FINAL - school-gym use path.
   The phone route leads with the command, target, and logger; instruction
   cards move lower, and tap controls wrap so they are usable one-handed.
==== */
@media (max-width: 480px) {
  body[data-current-page="gym"] .gym-mode-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  background: var(--bg-alt) !important;
  }

  body[data-current-page="gym"] .gym-mode-section .container.narrow {
  padding-top: 0;
  }

  body[data-current-page="gym"] .gym-mode-section .hud-marker,
  body[data-current-page="gym"] .gym-mode-section h2,
  body[data-current-page="gym"] .gym-mode-section .lead-text {
  display: none !important;
  }

  body[data-current-page="gym"] .gym-mode-command-deck {
  order: 1;
  }
  body[data-current-page="gym"] .gym-mode-head {
  order: 2;
  }
  body[data-current-page="gym"] .gym-mode-grid {
  order: 3;
  }
  body[data-current-page="gym"] .gym-mode-log {
  order: 4;
  }
  body[data-current-page="gym"] .gym-mode-plan-deck {
  order: 5;
  }
  body[data-current-page="gym"] .gym-mode-context-strip {
  order: 6;
  }
  body[data-current-page="gym"] .gym-mode-notes {
  order: 7;
  }
  body[data-current-page="gym"] .gym-mode-quickstart {
  order: 8;
  }
  body[data-current-page="gym"] .gym-mode-readiness {
  order: 9;
  }

  body[data-current-page="gym"] .gym-mode-command-deck,
  body[data-current-page="gym"] .gym-mode-grid,
  body[data-current-page="gym"] .gym-mode-log {
  border-color: rgba(46, 255, 122, 0.42);
  }

  body[data-current-page="gym"] .gym-mode-head,
  body[data-current-page="gym"] .gym-mode-command-deck {
  padding: 14px;
  }

  body[data-current-page="gym"] #gymModeCommandDeck .biomech-canvas {
  display: none;
  }

  body[data-current-page="gym"] .gym-mode-head .gym-mode-session-link {
  display: none !important;
  }

  body[data-current-page="gym"] .gym-mode-command-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-color: rgba(96, 165, 250, 0.52);
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.18),
    rgba(46, 255, 122, 0.1)
  );
  color: var(--text);
  }

  .session-body[data-session-panel] .session-tap-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: visible;
  scrollbar-width: none;
  }

  .session-body[data-session-panel] .session-tap-actions::-webkit-scrollbar {
  display: none;
  }

  .session-body[data-session-panel] .session-tap-actions button { height: 44px !important;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  }

  .session-body[data-session-panel] .session-note-taps .session-tap-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ====
   ATLAS VISUAL CLARITY - generated cues stay visibly non-photo,
   while card motion helps search/filter results and training taps read.
==== */
@keyframes atlas-card-reveal {
  from {
  opacity: 0;
  transform: translateY(8px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

#atlas .atlas-card {
  position: relative;
  overflow: hidden;
  contain: layout paint style;
  transition:
  border-color 0.16s ease,
  box-shadow 0.16s ease,
  transform 0.16s ease,
  background-color 0.16s ease;
}

#atlas .atlas-card:not(.hidden) {
  animation: atlas-card-reveal 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#atlas .atlas-card:hover,
#atlas .atlas-card:focus-within {
  animation: none;
  border-color: rgba(96, 165, 250, 0.46) !important;
  transform: translateY(-2px);
  box-shadow:
  6px 6px 0 rgba(16, 17, 20, 0.13),
  0 14px 32px rgba(96, 165, 250, 0.14) !important;
}

#atlas .atlas-visual-shell,
#atlas .atlas-icon {
  margin-bottom: 14px;
  isolation: isolate;
  transform: translateZ(0);
  transition:
  border-color 0.16s ease,
  box-shadow 0.16s ease,
  transform 0.16s ease,
  filter 0.16s ease;
}

#atlas .atlas-photo {
  transition:
  transform 0.22s ease,
  filter 0.22s ease;
}

#atlas .atlas-card:hover .atlas-visual-shell,
#atlas .atlas-card:focus-within .atlas-visual-shell,
#atlas .atlas-card:hover .atlas-icon,
#atlas .atlas-card:focus-within .atlas-icon {
  transform: translateY(-1px);
  box-shadow:
  inset 0 0 0 1px rgba(255, 255, 255, 0.06),
  0 0 0 2px rgba(96, 165, 250, 0.12),
  0 16px 30px rgba(0, 0, 0, 0.16);
}

#atlas .atlas-card:hover .atlas-photo,
#atlas .atlas-card:focus-within .atlas-photo {
  transform: scale(1.018);
  filter: saturate(1.14) contrast(1.08);
}

#atlas .atlas-visual-shell[data-visual-status="exercise-avatar"]::before {
  content: "target: " attr(data-primary);
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border: 1px solid rgba(167, 255, 0, 0.42);
  border-radius: 999px;
  background: rgba(5, 10, 12, 0.82);
  color: #f7ffed;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateY(0);
  transition:
  transform 0.16s ease,
  border-color 0.16s ease,
  background 0.16s ease;
}

#atlas
  .atlas-card:hover
  .atlas-visual-shell[data-visual-status="exercise-avatar"]::before,
#atlas
  .atlas-card:focus-within
  .atlas-visual-shell[data-visual-status="exercise-avatar"]::before {
  border-color: rgba(167, 255, 0, 0.72);
  background: rgba(5, 10, 12, 0.92);
  transform: translateY(-1px);
}

#atlas .atlas-train-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  transition:
  background 0.15s ease,
  border-color 0.15s ease,
  color 0.15s ease,
  transform 0.12s ease,
  box-shadow 0.15s ease;
}

#atlas .atlas-train-btn:hover,
#atlas .atlas-train-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

#atlas .atlas-train-btn:active {
  transform: translateY(1px) scale(0.99);
}

@media (max-width: 480px) {
  #atlas .atlas-card {
  padding: 16px;
  }

  #atlas .atlas-visual-shell[data-visual-status="exercise-avatar"]::before {
  font-size: 0.54rem;
  max-width: calc(100% - 18px);
  }

  #atlas .atlas-train-btn {
  width: 100%;
  min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #atlas .atlas-card,
  #atlas .atlas-card:not(.hidden),
  #atlas .atlas-visual-shell,
  #atlas .atlas-icon,
  #atlas .atlas-photo,
  #atlas .atlas-train-btn,
  #atlas .atlas-visual-shell[data-visual-status="exercise-avatar"]::before {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  }
}

/* ATLAS MOTION v3 ADDENDUM — Filter Transitions & Skeleton Shimmer loading. */
@keyframes atlas-shell-shimmer {
  0% {
  background-position: -160% 0;
  }
  100% {
  background-position: 260% 0;
  }
}

#atlas .atlas-card.hidden {
  display: revert !important;
  opacity: 0 !important;
  transform: scale(0.97) translateY(4px) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-color: transparent !important;
  pointer-events: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition:
  opacity 160ms ease,
  transform 180ms ease,
  max-height 200ms ease,
  padding 200ms ease,
  margin 200ms ease,
  border-color 160ms ease !important;
}

#atlas .atlas-visual-shell:not([data-visual-status])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
  100deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(96, 165, 250, 0.1) 45%,
  rgba(167, 255, 0, 0.1) 55%,
  rgba(255, 255, 255, 0) 100%
  );
  background-size: 220% 100%;
  animation: atlas-shell-shimmer 1600ms linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #atlas .atlas-card.hidden {
  display: none !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  }
  #atlas .atlas-visual-shell:not([data-visual-status])::before {
  animation: none !important;
  background: none !important;
  }
}

/* PAID-PREVIEW DISABLED — disabled paid-plan-preview card + inert button. 2026-05-25. */
.price-card-disabled {
  opacity: 0.85;
  border: 1px dashed rgba(255, 196, 0, 0.42);
  background: linear-gradient(
  180deg,
  rgba(255, 196, 0, 0.04),
  rgba(255, 196, 0, 0.01)
  );
  position: relative;
}
.price-card-disabled .price-tier-disabled {
  color: rgba(255, 196, 0, 0.88);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.paid-preview-disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 196, 0, 0.34);
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.paid-preview-disabled:hover,
.paid-preview-disabled:focus,
.paid-preview-disabled:focus-visible {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 196, 0, 0.34);
}

/* ATLAS WAVE 9 — anatomy diagram visual status. 2026-05-25. Matches operator's reference image style (photorealistic anatomy + red muscle highlight + leader-line labels via figcaption). */
.atlas-visual-shell[data-visual-status="anatomy"] {
  border-color: rgba(220, 64, 64, 0.42);
  background:
  linear-gradient(135deg, rgba(255, 240, 240, 0.06), rgba(220, 64, 64, 0.04)),
  #f6f4f1;
  box-shadow:
  inset 0 0 0 1px rgba(0, 0, 0, 0.04),
  0 0 18px rgba(220, 64, 64, 0.1);
}
.atlas-visual-shell[data-visual-status="anatomy"] .atlas-photo {
  object-fit: contain;
  background: var(--text);
  filter: none;
  padding: 6px;
}
.atlas-visual-shell[data-visual-status="anatomy"]::after {
  background:
  linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, rgba(255, 255, 255, 0.94)),
  repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.02) 0 1px,
    transparent 1px 5px
  );
}
.atlas-visual-shell[data-visual-status="anatomy"] figcaption {
  color: #2a1d1d;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.atlas-visual-shell[data-visual-status="anatomy"] figcaption span:last-child {
  color: rgba(60, 30, 30, 0.78);
}
.atlas-visual-shell[data-visual-status="anatomy"] .atlas-visual-caption-min {
  background: rgba(255, 250, 248, 0.94);
  border-color: rgba(180, 30, 30, 0.42);
  color: #2a1d1d;
}
#atlas .atlas-card:hover .atlas-visual-shell[data-visual-status="anatomy"],
#atlas
  .atlas-card:focus-within
  .atlas-visual-shell[data-visual-status="anatomy"] {
  border-color: rgba(220, 64, 64, 0.7);
  box-shadow:
  inset 0 0 0 1px rgba(0, 0, 0, 0.04),
  0 0 26px rgba(220, 64, 64, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .atlas-visual-shell[data-visual-status="anatomy"] {
  transition: none;
  }
}

.export-glow {
  
  color: #000 !important;
  
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.4);
  transform: scale(1.02);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.quiz-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0;
}
.quiz-reset-link {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
}
.quiz-result-note {
  font-size: 13px;
  color: var(--muted);
}

/* Demo first viewport: wrapper is layout only; the quiz remains the framed tool. */
.section-quiz > .container.narrow {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Demo quiz paper-surface choices: readable answers for the plan-builder flow. */
[data-page="demo"] .quiz-opt {
  min-height: 64px;
  border-color: rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  box-shadow: 0 8px 18px rgba(7, 14, 28, 0.06);
}

[data-page="demo"] .quiz-opt:hover,
[data-page="demo"] .quiz-opt:focus-visible {
  border-color: rgba(0, 123, 141, 0.58) !important;
  background: rgba(96, 165, 250, 0.08) !important;
  color: var(--bg-tools) !important;
}

[data-page="demo"] .quiz-opt.active,
[data-page="demo"] .quiz-opt.selected {
  border-color: rgba(0, 123, 141, 0.72) !important;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.08)
  ) !important;
  color: var(--bg-tools) !important;
  box-shadow:
  inset 0 0 0 1px rgba(0, 123, 141, 0.18),
  0 10px 22px rgba(7, 14, 28, 0.08);
  animation: none !important;
}

/* --- OMNI-EXPANSION: PROGRESS DASHBOARD & GLASSMORPHISM --- */
.glass-panel {
  background: rgba(18, 22, 25, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition:
  transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
  box-shadow 0.3s ease;
}

.glass-panel:hover {
  transform: translateY(-2px);
  box-shadow:
  0 12px 40px 0 rgba(0, 0, 0, 0.45),
  0 0 0 1px rgba(96, 165, 250, 0.2);
}

.system2-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 1.1rem;
  color: #f5fbff;
  margin-bottom: 8px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--text), var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.momentum-ticker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.1);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-primary);
  align-items: center;
  gap: 8px;
}

.ticker-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.heatmap-cell.active {
  background: var(--accent-primary);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

.glow-effect:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px var(--accent-primary);
  z-index: 2;
}

.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 12px;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: rgba(96, 165, 250, 0.15);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.volume-rows-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.volume-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center;
  gap: 16px;
}

.volume-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.volume-bar-container {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.volume-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, var(--accent-primary));
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.volume-val {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.timeline-box {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid #ffdc5e;
  opacity: 0;
  transform: translateX(-10px);
  animation: slideFadeIn 0.5s forwards ease-out;
}

.pr-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 80px;
}

.pr-desc {
  flex-grow: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.pr-desc strong {
  color: #ffdc5e;
}

.pr-trend.up {
  color: #a7ff00;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(167, 255, 0, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

@keyframes slideFadeIn {
  to {
  opacity: 1;
  transform: translateX(0);
  }
}

/* ATLAS MOTION v3 — entrance, filter fade, hover scale, reduced motion */
.atlas-grid {
  transition: opacity 0.15s ease-out;
}

@keyframes atlas-card-in {
  from {
  opacity: 0;
  transform: translateY(16px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

.atlas-card {
  animation: atlas-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.atlas-card:nth-child(1) {
  animation-delay: 0s;
}
.atlas-card:nth-child(2) {
  animation-delay: 0.04s;
}
.atlas-card:nth-child(3) {
  animation-delay: 0.08s;
}
.atlas-card:nth-child(4) {
  animation-delay: 0.12s;
}
.atlas-card:nth-child(5) {
  animation-delay: 0.16s;
}
.atlas-card:nth-child(6) {
  animation-delay: 0.2s;
}

.atlas-photo {
  transition: transform 0.3s ease;
}
.atlas-card:hover .atlas-photo,
.atlas-card:focus-within .atlas-photo {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .atlas-card {
  animation: none !important;
  }
  .atlas-photo {
  transition: none !important;
  transform: none !important;
  }
  .atlas-grid {
  transition: none !important;
  }
}

/* UI/UX Expansion: System 1 Micro-animations for .tool-card */
.tool-card {
  transition:
  transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
  box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tool-card:hover,
.tool-card:focus-within {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 12px 24px rgba(96, 165, 250, 0.15) !important;
}

/* Tools Hub visual polish: route-scoped so global route cards keep their existing rhythm. */
.section-tools .tools-toolbar {
  max-width: 1024px;
  margin: 26px auto 30px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
  background: rgba(6, 10, 15, 0.04);
}

.section-tools .tools-filter {
  gap: 8px;
}

.section-tools .tools-vertical-tag {
  color: #045f6d;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-tools .tools-filter-btn {
  color: #101114 !important;
  background: #f4f5f7 !important;
  border-color: rgba(16, 17, 20, 0.22) !important;
  border-radius: 8px;
}

.section-tools .tools-filter-btn:hover,
.section-tools .tools-filter-btn:focus-visible {
  color: #101114 !important;
  background: #e6f7ff
  linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0.08)) !important;
  border-color: rgba(0, 123, 141, 0.58) !important;
}

.section-tools .tools-filter-btn.active,
.section-tools .tools-filter-btn[aria-pressed="true"] {
  color: #101114 !important;
  background: #ccf2ff
  linear-gradient(180deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.08)) !important;
  border-color: rgba(0, 123, 141, 0.72) !important;
}

.section-tools .tools-meta {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #344154;
}

.section-tools .tools-grid {
  display: grid !important;
  grid-template-columns: repeat(
  auto-fit,
  minmax(min(100%, 420px), 1fr)
  ) !important;
  align-items: start;
  gap: 18px !important;
  max-width: 1024px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-tools .tool-card {
  min-height: 100%;
  padding: 20px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  border-radius: 8px !important;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.98),
  rgba(245, 250, 255, 0.94)
  ) !important;
  box-shadow: 0 10px 24px rgba(7, 14, 28, 0.08) !important;
}

.section-tools .tool-card-wide,
.section-tools .tool-card-feature {
  grid-column: 1 / -1;
}

.section-tools .tool-card:focus-within {
  transform: none !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  box-shadow:
  0 16px 34px rgba(7, 14, 28, 0.12),
  0 0 0 1px rgba(96, 165, 250, 0.18) !important;
}

@media (hover: hover) and (pointer: fine) {
  .section-tools .tool-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  box-shadow:
    0 16px 34px rgba(7, 14, 28, 0.12),
    0 0 0 1px rgba(96, 165, 250, 0.18) !important;
  }
}

.section-tools .tool-row input,
.section-tools .tool-row select,
.section-tools .tool-actions .btn {
  border-radius: 8px;
}

.section-tools .tool-actions .btn,
.section-buy .btn,
[data-page="signup"] .btn {
  min-height: 44px;
  min-width: 44px;
}

.section-tools .tool-row label,
.section-tools .tool-r-row span,
.section-tools .too-label,
.section-tools .nutri-label,
.section-tools .nutri-hint,
.section-tools .nutri-unit {
  color: var(--blue) !important;
}

.section-tools .tool-r-row output,
.section-tools .nutri-val,
.section-tools .nutri-value {
  color: var(--blue-glow) !important;
}

.section-tools input:not([type="range"]):not([type="checkbox"]),
.section-tools select,
.section-tools textarea {
  background: var(--text) !important;
  border: 1px solid rgba(16, 17, 20, 0.22) !important;
  color: var(--surface) !important;
}

.section-tools input::placeholder,
.section-tools textarea::placeholder {
  color: rgba(16, 17, 20, 0.58);
  opacity: 1;
}

.section-tools input:not([type="range"]):not([type="checkbox"]):focus,
.section-tools select:focus,
.section-tools textarea:focus {
  border-color: rgba(0, 123, 141, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

.section-tools input[type="range"] {
  min-height: 44px;
  padding-block: 14px;
  touch-action: pan-y;
}

.section-tools .tool-r-row input[type="range"],
.section-tools .nutri-slider {
  height: 8px;
}

.section-tools .tool-r-row input[type="range"]::-webkit-slider-thumb,
.section-tools .nutri-slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
}

.section-tools .tool-r-row input[type="range"]::-moz-range-thumb,
.section-tools .nutri-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
}

.section-tools .tool-out-readiness {
  border: 1px solid rgba(0, 123, 141, 0.22) !important;
  border-left: 5px solid rgba(0, 123, 141, 0.78) !important;
  border-radius: 8px !important;
  background: linear-gradient(
  180deg,
  rgba(247, 255, 252, 0.98),
  rgba(236, 250, 246, 0.94)
  ) !important;
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.78),
  0 10px 22px rgba(7, 14, 28, 0.08);
}

.section-tools .tr-score-num {
  background-image: linear-gradient(
  135deg,
  var(--blue-glow),
  var(--blue)
  ) !important;
}

.section-tools .tr-score-label {
  color: #4b5260 !important;
}

.section-tools .tr-verdict {
  border-radius: 6px;
  text-shadow: none;
}

.section-tools .tr-v-hit {
  color: #1b5e3d !important;
  background: rgba(27, 119, 71, 0.12) !important;
  border-color: rgba(27, 119, 71, 0.28) !important;
}

.section-tools .tr-v-light {
  color: var(--blue-glow) !important;
  background: rgba(0, 123, 141, 0.12) !important;
  border-color: rgba(0, 123, 141, 0.28) !important;
}

.section-tools .tr-v-deload {
  color: #8c1d1d !important;
  background: rgba(140, 29, 29, 0.1) !important;
  border-color: rgba(140, 29, 29, 0.26) !important;
}

.section-tools .tr-rx {
  color: #344154 !important;
  opacity: 1;
}

.section-tools .nutri-phase,
.section-tools .nutri-activity {
  min-height: 44px;
  color: var(--surface) !important;
  background: var(--text) !important;
  border-color: rgba(16, 17, 20, 0.22) !important;
}

.section-tools .nutri-phase.active,
.section-tools .nutri-phase[aria-pressed="true"],
.section-tools .nutri-activity.active {
  color: var(--bg-tools) !important;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.08)
  ) !important;
  border-color: rgba(0, 123, 141, 0.72) !important;
}

.section-tools .habit-list label {
  min-height: 44px;
}

@media (max-width: 480px) {
  .section-tools .tools-toolbar {
  padding: 10px;
  }

  .section-tools .tools-meta {
  width: 100%;
  justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-tools .tool-card,
  .section-tools .tool-card:hover,
  .section-tools .tool-card:focus-within {
  transform: none !important;
  transition: none !important;
  }
}

/* Atlas first-viewport polish: keep the 227-card proof strip readable on the light app surface. */
.section-atlas .atlas-receipt {
  max-width: 1024px;
  margin: 20px auto 18px;
  padding: 14px;
  border-color: rgba(0, 123, 141, 0.28);
  border-radius: 8px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.96),
  rgba(239, 248, 252, 0.9)
  ) !important;
  box-shadow: 0 12px 28px rgba(7, 14, 28, 0.08);
}

.section-atlas .atlas-receipt span {
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(0, 123, 141, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-muted);
}

.section-atlas .atlas-receipt strong {
  color: var(--blue-glow);
  text-shadow: none;
}

.section-atlas .atlas-receipt em,
.section-atlas .atlas-receipt[data-state="ready"] em {
  color: #45515e;
}

.section-atlas .atlas-filters,
.section-atlas .atlas-search-row,
.section-atlas .atlas-grid {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.section-atlas .atlas-filter,
.section-atlas .atlas-view-btn {
  min-height: 44px;
  border-radius: 8px;
  color: var(--rep-paper) !important;
  background: var(--text) !important;
  border-color: rgba(16, 17, 20, 0.22) !important;
}

.section-atlas .atlas-filter.active,
.section-atlas .atlas-filter[aria-pressed="true"],
.section-atlas .atlas-view-btn.active,
.section-atlas .atlas-view-btn[aria-pressed="true"] {
  color: #101114 !important;
  background: linear-gradient(
  180deg,
  rgba(96, 165, 250, 0.18),
  rgba(96, 165, 250, 0.08)
  ) !important;
  border-color: rgba(0, 123, 141, 0.72) !important;
}

/* atlas card body copy: inherited --text resolves to a sub-AA gray on the
   paper surface; pin an AA-safe ink (4.5:1+ on white). */
.section-atlas .atlas-card p {
  color: #4b5260 !important;
}

.section-atlas .atlas-view-toggle {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(16, 17, 20, 0.18);
  border-radius: 10px;
}

.section-atlas .atlas-search-label,
.section-atlas .atlas-count {
  color: #344154 !important;
}

.section-atlas .atlas-search {
  background: var(--text) !important;
  border-color: rgba(16, 17, 20, 0.22) !important;
  color: var(--surface) !important;
}

.section-atlas .atlas-search::placeholder {
  color: rgba(16, 17, 20, 0.58);
  opacity: 1;
}

.section-atlas .atlas-search:focus {
  border-color: rgba(0, 123, 141, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

.section-atlas .atlas-card {
  border-radius: 8px !important;
  border-color: rgba(0, 123, 141, 0.18) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 24px rgba(7, 14, 28, 0.08) !important;
}

.section-atlas .atlas-visual-shell[data-visual-status="anatomy"] .atlas-photo {
  mix-blend-mode: normal;
  filter: contrast(1.06) saturate(1.04);
}

.section-atlas .atlas-card:hover,
.section-atlas .atlas-card:focus-within {
  border-color: rgba(0, 123, 141, 0.38) !important;
  box-shadow:
  0 16px 34px rgba(7, 14, 28, 0.12),
  0 0 0 1px rgba(96, 165, 250, 0.14) !important;
}

@media (max-width: 480px) {
  /* Atlas phone action-first polish: search/filter before proof stats. */
  .section-atlas .container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  }

  .section-atlas .hud-marker {
  order: 1;
  }
  .section-atlas h2 {
  order: 2;
  }
  .section-atlas .hook {
  order: 3;
  }
  .section-atlas .lead-text {
  order: 4;
  }
  .section-atlas .atlas-search-row {
  order: 5;
  }
  .section-atlas .atlas-filters {
  order: 6;
  }
  .section-atlas .atlas-receipt {
  order: 7;
  }
  .section-atlas .atlas-grid {
  order: 8;
  }

  .section-atlas h2,
  .section-atlas .hook,
  .section-atlas .lead-text,
  .section-atlas .atlas-receipt,
  .section-atlas .atlas-filters,
  .section-atlas .atlas-search-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  }

  .section-atlas h2 {
  font-size: clamp(1.75rem, calc(1.49rem + 1.27vw), 2.45rem) !important;
  line-height: 1.04 !important;
  }

  .section-atlas .hook,
  .section-atlas .lead-text {
  font-size: 0.98rem !important;
  line-height: 1.34 !important;
  }

  .section-atlas .atlas-search-row {
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 18px rgba(7, 14, 28, 0.06);
  }

  .section-atlas .atlas-receipt {
  padding: 10px;
  }

  .section-atlas .atlas-receipt span {
  min-height: 62px;
  }

  .section-atlas .atlas-view-toggle,
  .section-atlas .atlas-count {
  width: 100%;
  }

  .section-atlas .atlas-view-btn {
  flex: 1;
  }
}

@media (max-width: 1024px) and (max-height: 640px) {
  .section-atlas .hook,
  .section-atlas .lead-text {
  display: none !important;
  }

  .section-atlas .container {
  gap: 10px;
  }

  .section-atlas .atlas-search-row {
  padding: 8px;
  }

  .section-atlas .atlas-filters {
  gap: 6px;
  }
}

/* Public access + trust readability polish: keep no-billing proof readable on paper. */
.section-buy .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(
  auto-fit,
  minmax(min(100%, 320px), 1fr)
  ) !important;
  gap: 18px !important;
  max-width: 1024px;
  margin: 34px auto 0;
}

.section-buy .price-card {
  position: relative;
  min-width: 0;
  padding: 22px !important;
  border: 1px solid rgba(16, 17, 20, 0.16) !important;
  border-radius: 8px !important;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.98),
  rgba(245, 250, 255, 0.94)
  ) !important;
  box-shadow: 0 10px 24px rgba(7, 14, 28, 0.08) !important;
  color: var(--surface) !important;
}

.section-buy .price-card-plus {
  padding-left: 30px !important;
  overflow: hidden;
}

.section-buy .price-card-plus::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  transform: none;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--rep-cyan), var(--rep-lime));
  box-shadow: none;
}

.section-buy .price-tier-label,
.section-buy .price-amount-note,
.section-buy .pro-coming-note {
  color: #31424c !important;
  text-shadow: none !important;
}

.section-buy .price-tier-label {
  line-height: 1.35;
  letter-spacing: 0.12em;
  overflow-wrap: normal;
}

.section-buy .price-amount-line {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 12px;
  line-height: 1;
}

.section-buy .price-amount-num {
  color: var(--blue-glow) !important;
  text-shadow: none !important;
}

.section-buy .price-amount-note {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid rgba(0, 123, 141, 0.16);
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.07);
  white-space: normal;
}

.section-buy .price-tagline,
.section-buy .price-features li,
.section-buy .footnote {
  color: var(--border) !important;
  opacity: 1 !important;
}

.section-buy .price-features li {
  border-color: rgba(16, 17, 20, 0.14) !important;
}

.section-buy .price-features li::before {
  color: var(--blue) !important;
}

.section-buy .price-card-disabled {
  border-style: dashed !important;
  border-color: rgba(120, 86, 0, 0.36) !important;
  background: linear-gradient(
  180deg,
  rgba(255, 252, 240, 0.98),
  rgba(252, 248, 232, 0.94)
  ) !important;
  opacity: 1;
}

.section-buy .price-card-disabled .price-tier-disabled {
  color: #785600 !important;
}

.section-buy .paid-preview-disabled {
  background: rgba(16, 17, 20, 0.08) !important;
  border-color: rgba(120, 86, 0, 0.34) !important;
  color: #31424c !important;
}

.section-trust .trust-nav {
  border-bottom-color: rgba(0, 123, 141, 0.18);
}

.section-trust .trust-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--bg-tools) !important;
  background: var(--text);
  border-color: rgba(16, 17, 20, 0.18);
  border-radius: 8px;
}

.section-trust .trust-nav a:hover,
.section-trust .trust-nav a:focus-visible {
  color: var(--bg-tools) !important;
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(0, 123, 141, 0.58);
}

.section-trust .trust-block h3 {
  color: var(--surface);
  border-left-color: rgba(0, 123, 141, 0.72);
}

.section-trust .trust-block p,
.section-trust .trust-list li,
.section-trust .trust-foot {
  color: var(--border) !important;
  opacity: 1 !important;
}

.section-trust .trust-block p strong,
.section-trust .trust-list li strong,
.section-trust .trust-foot a {
  color: var(--blue-glow) !important;
}

.section-trust .trust-state-grid > div {
  border-color: rgba(0, 123, 141, 0.18);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
}

.section-trust .trust-state-grid h4 {
  color: var(--blue-glow);
}

/* About proof-panel readability polish: restore proof structure after DE-BOX reset. */
#about .founder-panel[style],
#about .transformation-panel[style] {
  background: var(--text) !important;
  border: 1px solid rgba(16, 17, 20, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(7, 14, 28, 0.08) !important;
  padding: 22px !important;
}

#about .transformation-panel[style] {
  background: linear-gradient(
  180deg,
  rgba(247, 255, 252, 0.98),
  rgba(236, 250, 246, 0.94)
  ) !important;
  border-style: dashed !important;
}

@media (max-width: 480px) {
  .section-buy .price-tier-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  }

  .section-buy .price-amount-line {
  gap: 8px 10px;
  margin-bottom: 14px;
  }
}

@media (max-width: 1024px) {
  .section-buy .pricing-grid {
  grid-template-columns: 1fr !important;
  }
}

/* Velocity Tap Deck CSS */
.velocity-deck-wrap {
  margin-top: -8px;
  margin-bottom: 8px;
}
.velocity-deck-wrap summary {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.velocity-deck {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.velocity-deck .vd-group {
  display: flex;
  gap: 4px;
  align-items: center;
}
.velocity-deck .vd-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}
.velocity-deck .vd-btn {
  padding: 4px 8px;
  font-size: 0.8rem;
  height: 32px;
  min-width: 44px;
}

/* ===
   DESIGN SLICE: Focus Rings, 44px Touch Targets, AAA Contrast
   === */
button,
a,
input,
select,
textarea,
.quiz-opt,
.quick-tap,
[role="button"],
[tabindex="0"] {
  min-height: 44px;
}
:focus-visible {
  outline: 3px solid var(--accent-primary) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
.btn-primary,
.cta-primary,
.home-cta-main {
  background-color: #fafafa !important;
  color: #000 !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #000;
  text-decoration: none;
  font-size: 1.1rem;
}

/* ===
   DESIGN SLICE: Founding Member Pre-sale Section
   === */
.home-presale-section {
  background-color: var(--surface-2);
  color: var(--text);
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  border-radius: 12px;
  border: 1px solid var(--border);
  margin: 40px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.presale-badge {
  display: inline-block;
  background: var(--accent-primary);
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.presale-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.presale-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}
.presale-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-primary);
}
.presale-price-term {
  font-size: 1rem;
  color: var(--text-muted);
}
.presale-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  font-size: 1rem;
  line-height: 1.6;
}
.presale-bullets li {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.presale-bullets li::before {
  content: "✓";
  color: var(--accent-primary);
  font-weight: bold;
}
.presale-trust {
  font-size: 0.85rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border-bright);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===
   DESIGN SLICE: Reduced Motion Parity
   === */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
  }
}

/* ===
   DESIGN SLICE: Pricing & Upgrade Surfaces
   === */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 48px 0;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.pricing-card.is-premium {
  background: var(--surface-2);
  border-color: var(--accent-primary);
  box-shadow: 0 0 24px rgba(96, 165, 250, 0.1);
  position: relative;
}
.pricing-card.is-premium::before {
  content: "RECOMMENDED";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-primary);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
}
.pricing-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.pricing-cost {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.pricing-card.is-premium .pricing-cost {
  color: var(--accent-primary);
}
.pricing-desc {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  flex: 1;
}
.pricing-features li {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  color: var(--text);
}
.pricing-features li::before {
  content: "✓";
  color: var(--accent-primary);
  font-weight: bold;
}
.pricing-card .btn {
  margin-top: auto;
  width: 100%;
}

/* ===
   DESIGN SLICE: Empty States Primitive
   === */
.state-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-bright);
  border-radius: 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.95rem;
  min-height: 120px;
  gap: 12px;
  margin: 16px 0;
}
.state-empty svg {
  width: 28px;
  height: 28px;
  stroke: var(--text-dim);
  opacity: 0.5;
  margin-bottom: 8px;
}

/* ===
   DESIGN SLICE: CRAFT LAYER (Typography, Depth, Skeletons, Micro-interactions)
   === */
:root {
  /* Typographic Modular Scale (1.250 Major Third) */
  --text-xs: 0.8rem;
  --text-sm: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;

  /* Depth System */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 32px rgba(96, 165, 250, 0.12);
}

/* Base Typographic Rhythm */
body {
  line-height: 1.6;
}
p {
  max-width: 70ch;
}
.home-subtitle {
  line-height: 1.4 !important;
  max-width: 50ch !important;
}

/* Micro-interactions: Tactile Feedback */
.btn,
button,
.home-route-strip a,
.atlas-card {
  transition:
  transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
  background 0.15s ease,
  box-shadow 0.15s ease,
  opacity 0.15s ease;
}
.btn:active,
button:not(:disabled):active,
.home-route-strip a:active {
  transform: scale(0.97) !important;
}

/* Hero Impact Polish */
.home-wordmark {
  letter-spacing: -0.04em !important;
  text-shadow: var(--shadow-md) !important;
}
.home-brand-stamp {
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
.repdeck-floor-primary {
  box-shadow: var(--shadow-glow) !important;
}
.repdeck-floor-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 48px rgba(96, 165, 250, 0.2) !important;
}

/* Skeletons */
@keyframes skeleton-shimmer {
  0% {
  background-position: -200% 0;
  }
  100% {
  background-position: 200% 0;
  }
}
.skeleton {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
  90deg,
  transparent 0%,
  rgba(255, 255, 255, 0.04) 50%,
  transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
  animation: none;
  opacity: 0.5;
  }
  .btn:active,
  button:not(:disabled):active,
  .repdeck-floor-primary:hover {
  transform: none !important;
  }
}

/* ===
   DESIGN SLICE: OLED PARITY, ACCESSIBILITY, AND HIERARCHY
   === */

/* OLED Parity: Deepen backgrounds to true black to push contrast */
:root {
  --bg: #000000;
  --bg-alt: #050507;
  --bg-wedge: #020204;
  --bg-tools: #080a0f;
  --surface: #0a0c12;
}

/* Accessibility: 44px Touch Targets & Focus-Visible */
a,
button,
input,
select,
textarea,
.btn,
.navlinks a,
.mobile-app-tab,
.sidebar-toggle {
  min-height: 44px;
}

/* For icon-only buttons that use padding to define size, ensure they hit 44px */
.back-to-top,
.sidebar-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Strict Keyboard Focus */
*:focus:not(:focus-visible) {
  outline: none !important;
}
*:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 4px !important;
  border-radius: 4px;
}

/* Safe-Area Insets for iOS PWA */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.mobile-app-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* Visual Hierarchy: Kill competing emphasis */
/* Make secondary text genuinely recede */
.home-subtitle,
.tool-foot,
.sa-empty-line,
.th-empty,
.session-plan-empty {
  opacity: 0.8;
}

/* De-clutter global glow when unnecessary */
.home-rotator-line {
  box-shadow: none !important;
  border: 1px solid var(--border-bright);
}

/* ===
   DESIGN SLICE: CONVERSION POLISH (Founding Member Tier)
   === */
.price-card-premium {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--accent-primary);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: scale(1.02);
  z-index: 2;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .price-card-premium {
  transform: none;
  }
}

.price-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--accent-primary);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/* Parity: Specific control focus-visible affordance */
.theme-switch:focus-visible,
.toast-close:focus-visible,
.skip-btn:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}

/* ====
   v88 — phone-first interaction polish (additive · 2026-05-31)
   - Removes native mobile tap-flash. Property absent before this
   block, so it overrides nothing.
   - Zero-specificity :where() press feedback applies ONLY to
   tappables that define no :active transform of their own, so
   it can never clash with the tuned component rules above.
   - Motion gated behind prefers-reduced-motion: no-preference.
   ==== */
html {
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  :where(a, button, [role="button"], .btn, summary, label[for]):where(:active) {
  transform: scale(0.985);
  }
}

/* ====
   v89 — native UI dark-scheme coherence (additive · 2026-05-31)
   Every theme (default / chalk / oled) is dark. Declaring
   color-scheme lets native scrollbars, form controls, spellcheck
   and browser chrome render dark-aware (no white-control flash).
   Property absent before this block; it overrides nothing.
   ==== */
:root {
  color-scheme: dark;
}

/* ====
   v90 — accessibility + cross-engine + mobile polish pass
   (additive · 2026-05-31 · multi-agent audit verified)
   Every property below was grep-confirmed ABSENT before this block,
   so each declares a new property/media-context and overrides nothing.
   ==== */

/* cross-engine font smoothing — Gecko/macOS companion to the existing
   -webkit-font-smoothing: antialiased (overrides nothing). */


/* iOS long-press callout suppression on interactive chrome only;
   plain text/images keep native copy/save long-press. */
a,
button,
[role="button"],
summary,
label,
.btn,
.nav-item,
.sidebar-item,
.tile,
.choose-card,
.tool-card,
.faq-item {
  -webkit-touch-callout: none;
}

/* print + iOS/Safari Reader color fidelity for the dark theme. */
:root {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* narrow-width tab normalization — affects only rendered tab chars. */
:root {
  -moz-tab-size: 4;
  tab-size: 4;
}

/* WCAG 2.3.3 — hard-stop the decorative day1Sweep bar under reduced-motion
   (previously only duration-trimmed by the global wildcard). */
@media (prefers-reduced-motion: reduce) {
  .day1-reveal::before {
  animation: none !important;
  transform: translateX(-100%) !important;
  }
}

/* Windows High Contrast Mode — restore focus rings lost to outline:none. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
  outline: 2px solid Highlight;
  outline-offset: 2px;
  }
}

/* prefers-contrast: more — opt-in focus-ring boost. */
@media (prefers-contrast: more) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  }
}

/* ====
   v91 — hover-lift micro-interaction + paint containment
   (additive · 2026-05-31 · wave-2 audit verified)
   transform/contain grep-confirmed ABSENT on these targets, so
   each overrides nothing. :where() = zero specificity (any tuned
   rule always wins). Hover-lift gated to fine-pointer + no-reduced-
   motion so touch never gets a stuck lift.
   ==== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :where(.quest-item):where(:hover) {
  transform: translateY(-2px);
  }
}
.atlas-visual-shell {
  contain: layout paint;
}
.heatmap-cell {
  contain: layout paint;
}

/* ====
   v92 — typography wrap polish (additive · :where zero-spec)
   text-wrap: pretty/balance grep-confirmed absent on generic
   p / h1-h4. The 3 existing balance rules are more specific and
   win. :where() = zero specificity so any tuned rule overrides
   this. Progressive enhancement: unsupported engines ignore it.
   ==== */
:where(h1, h2, h3, h4) {
  text-wrap: balance;
}
:where(p) {
  text-wrap: pretty;
}

/* ====
   v93 — a11y deep pass (additive · 2026-05-31 · APIW wave-3)
   WCAG 2.5.5 tap-targets + WCAG 2.3.3 reduced-motion hard-stops
   for 11 decorative infinite loops the global wildcard only
   duration-trimmed. All grep-confirmed absent. :where() zero-spec
   on tap-targets (any tuned rule wins). reduced-motion block inert
   by default. Focus-ring candidates were SKIPPED — the existing
   *:focus-visible !important net already covers them (redundant).
   Overrides nothing.
   ==== */
:where(
  .assistant-close,
  .cmdk-close,
  .settings-close,
  .toast-close,
  .session-recap-close
) {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .brand-status,
  .streak-day.today,
  .kicker-sub .kicker-glyph,
  .hero-live-dot,
  .hero-ekg-line,
  .btn-primary,
  .ce-btn.primary,
  .navlinks .cta,
  .home-wordmark,
  h1 .accent-primary,
  .h1-accent,
  .accent-primary,
  .signup-highlight,
  .assistant-pulse,
  .assistant-dot,
  .assistant-typing span,
  .pr-celebrate-inner,
  .pr-timer-display.urgent,
  .tap-pad.armed,
  .voice-btn.listening,
  .voice-btn.listening::after {
  animation: none !important;
  }
}

/* ====
   v94 — progressive layout and motion enhancements (additive)
   WCAG 2.5.5 touch target size improvements for velocity deck
   adjustment buttons (.vd-btn) and sidebar mode toggles (.seg-btn)
   to meet 44px min sizing. Additive media queries to ensure 100%
   prefers-reduced-motion coverage for remaining infinite loops.
   ==== */
:where(.velocity-deck .vd-btn) {
  min-height: 44px;
}
:where(.sidebar-mode-toggle .seg-btn) {
  min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  :where(
  .velocity-deck,
  .sidebar-mode-toggle,
  .seg-btn,
  .btn,
  .onboard-skip,
  .onboard-prev,
  .onboard-next
  ) {
  transition: none !important;
  }
  :where(
  .pulse-status,
  .pulse-today,
  .day1Sweep,
  .kickerWink,
  .assistantPulse,
  .assistantHeartbeat,
  .typingDot,
  .liveDot,
  .ekgDraw,
  .prPulse,
  .prTimerPulse,
  .tapArm,
  .bootBlink,
  .restIn,
  .biomech-pulse,
  .voicePulse,
  .voiceRing,
  .ecLogoBreathe,
  .ecLogoBarPulse,
  .aurora-drift,
  .scanline-drift,
  .btn-gradient-drift,
  .text-gradient-drift,
  .orb-breath,
  .pulse-start,
  .stat-shimmer,
  .quiz-pulse,
  .hero-sheen,
  .future-scan,
  .future-node-pulse,
  .atlas-shell-shimmer,
  .skeleton-shimmer
  ) {
  animation: none !important;
  }
}

/* ====
   v95 — Bifurcated Aesthetic Engine (Phase Infinity)
   Cyber-Athletic Glassmorphism vs Zen Clinical Minimalism
   ==== */
.atlas-theme-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.atlas-theme-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: auto;
}
.atlas-theme-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-atlas-theme="cyberpunk"] .atlas-card {
  background: #020000 !important;
  border: 1px solid #ff2200 !important;
  box-shadow: 0 4px 24px rgba(255, 34, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 0px !important;
  transform: skewX(-3deg);
  background-image: linear-gradient(rgba(255, 34, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 34, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
[data-atlas-theme="cyberpunk"] .atlas-card h3 {
  color: #ff2200 !important;
  text-shadow: 0 0 12px rgba(255, 34, 0, 0.8);
  text-transform: uppercase;
  font-weight: 900;
}
[data-atlas-theme="cyberpunk"] .atlas-card .atlas-meta,
[data-atlas-theme="cyberpunk"] .atlas-card .atlas-mech {
  color: #e0e6ed !important;
}
[data-atlas-theme="cyberpunk"] .atlas-card .atlas-icon,
[data-atlas-theme="cyberpunk"] .atlas-card .atlas-tag {
  color: #ff2200 !important;
  border-color: rgba(255, 34, 0, 0.5) !important;
  border-radius: 0px !important;
}
[data-atlas-theme="cyberpunk"] .atlas-card:hover {
  transform: skewX(-3deg) scale(1.02);
  box-shadow: 0 8px 32px rgba(255, 34, 0, 0.4) !important;
  border-color: #ff2200 !important;
}

[data-atlas-theme="zen"] .atlas-card {
  background: #ffffff !important;
  border: 1px solid #e0e6ed !important;
  box-shadow: none !important;
  color: #000000 !important;
  border-radius: 4px;
  padding: 32px; /* Vast negative space */
}
[data-atlas-theme="zen"] .atlas-card h3 {
  color: #000000 !important;
  font-family: 'Times New Roman', serif; /* Academic journal typography */
  font-weight: 400;
  letter-spacing: -0.5px;
}
[data-atlas-theme="zen"] .atlas-card .atlas-meta,
[data-atlas-theme="zen"] .atlas-card .atlas-mech {
  color: #333333 !important;
  font-family: monospace;
}
[data-atlas-theme="zen"] .atlas-card .atlas-icon,
[data-atlas-theme="zen"] .atlas-card .atlas-tag {
  color: #000000 !important;
  border-color: #000000 !important;
  background: transparent !important;
  border-radius: 0;
}
[data-atlas-theme="zen"] .atlas-card .atlas-train-btn {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}
[data-atlas-theme="zen"] .atlas-card:hover {
  transform: translateY(0px); /* Brutalist, flat */
  border-color: #000000 !important;
}

/* Zen Respiration Modal */
.zen-respiration-modal {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0,0,0,0.1);
  animation: zen-bloom 4s infinite alternate ease-in-out;
  padding: 0;
  margin: auto;
  border-radius: 50%;
  width: min(400px, 90vw);
  height: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.05);
}
.zen-respiration-modal::backdrop {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.zen-resp-container {
  text-align: center;
  font-family: 'Times New Roman', serif;
}
.zen-resp-container h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 24px;
  color: #000;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.zen-resp-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid #000;
  margin: 0 auto;
  transition: transform 4s ease-in-out;
}
.zen-resp-circle.inhale {
  transform: scale(1.5);
  background: rgba(0,0,0,0.05);
}
.zen-resp-circle.hold {
  border-width: 3px;
}
.zen-resp-circle.exhale {
  transform: scale(0.8);
  background: transparent;
}
#zenRespTimer {
  font-size: 2rem;
  margin-top: 24px;
  color: #000;
}
.zen-resp-close {
  margin-top: 40px;
  background: transparent;
  border: 1px solid #000;
  padding: 8px 16px;
  cursor: pointer;
  font-family: 'Times New Roman', serif;
  transition: background 0.2s, color 0.2s;
}
.zen-resp-close:hover {
  background: #000;
  color: #fff;
}
@keyframes zen-bloom {
  0% { box-shadow: 0 0 20px rgba(0,0,0,0.02); }
  100% { box-shadow: 0 0 60px rgba(0,0,0,0.08); }
}

/* ===== SLICE v96 a11y: high-contrast + focus-visible (zero-specificity) ===== */
@media (prefers-contrast: more){:root{--border:#ffffff;--text-muted:#d6d6d6}a,button{outline:1px solid currentColor}}
:where(a,button,[role="button"],input,select,textarea,summary):focus-visible{outline:2px solid var(--accent-primary,var(--accent-primary));outline-offset:2px;border-radius:3px}

/* ===== SLICE v98 polish: text-wrap balance + themed selection/scrollbar ===== */
:where(h1,h2,h3,.headline){text-wrap:balance}
::selection{background:var(--accent-primary,var(--accent-primary));color:#000}
html{
  background: var(--bg-alt, #050508) !important;
  scrollbar-color: var(--accent-primary, #2563eb) var(--bg-alt, #050508);
}

/* ===== hierarchy_harmony_slice: stronger scan order without HTML/JS changes ===== */
body[data-current-page="home"] .home-route-strip a,
body[data-current-page="home"] .choose-grid > a,
.section-tools .tool-card,
.section-buy .pricing-grid > div,
.section-trust .trust-block,
body[data-current-page="gym"] .gym-mode-card {
  position: relative;
  isolation: isolate;
}

/* A11Y CONTRAST FIX — the trio eyebrows (LAST SET / NEXT TARGET / REST) and the
   metabolic axis labels (AMPK / mTORC1) inherit --text-dim/--text-muted (#b8c7e2),
   colors built for the DARK cockpit frame. On the LIGHT trio cards and LIGHT axis
   strip they computed at 1.2-1.71:1 — far below the WCAG 4.5:1 floor (invisible).
   Re-ink to a quiet slate-blue (#56617d, ~6:1 on the light bg): still a muted
   eyebrow, now legible. ID-scoped to #gymModeShell light surfaces only — the
   dark-frame labels (TODAY / DEVICE CHECK, already 9-12:1) are untouched. Lives in
   styles.css (not cover-parity, which is contractually background-only). Reversible. */
#gymModeShell .gym-mode-grid .gym-mode-label {
  color: #56617d !important;
}
#gymModeShell .mp-labels span {
  color: #56617d !important;
}

body[data-current-page="home"] .home-route-strip a::after,
body[data-current-page="home"] .choose-grid > a::after,
.section-tools .tool-card::after,
.section-buy .pricing-grid > div::after,
.section-trust .trust-block::after,
body[data-current-page="gym"] .gym-mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.11), transparent 44%, rgba(255, 42, 76, 0.08));
  opacity: 0;
  transition: opacity 160ms ease;
}

body[data-current-page="home"] .home-route-strip a:hover::after,
body[data-current-page="home"] .home-route-strip a:focus-visible::after,
body[data-current-page="home"] .choose-grid > a:hover::after,
body[data-current-page="home"] .choose-grid > a:focus-visible::after,
.section-tools .tool-card:hover::after,
.section-tools .tool-card:focus-within::after,
.section-buy .pricing-grid > div:hover::after,
.section-buy .pricing-grid > div:focus-within::after,
.section-trust .trust-block:focus-within::after,
body[data-current-page="gym"] .gym-mode-card:focus-within::after {
  opacity: 1;
}

body[data-current-page="home"] .choose-grid > a h3,
.section-tools .tool-card h3,
.section-buy .pricing-grid h3,
.section-trust .trust-block h3,
body[data-current-page="gym"] .gym-mode-card strong {
  letter-spacing: 0;
  line-height: 1.05;
}

body[data-current-page="home"] .choose-grid > a p,
.section-tools .tool-card p,
.section-tools .tool-card-tagline,
.section-buy .pricing-grid p,
.section-trust .trust-block p,
body[data-current-page="gym"] .gym-mode-card p {
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  body[data-current-page="home"] .home-route-strip a::after,
  body[data-current-page="home"] .choose-grid > a::after,
  .section-tools .tool-card::after,
  .section-buy .pricing-grid > div::after,
  .section-trust .trust-block::after,
  body[data-current-page="gym"] .gym-mode-card::after {
  transition: none;
  }
}

/* ===== SLICE v99 a11y+print: forced-colors + print stylesheet ===== */
@media (forced-colors: active){
  :where(button,a,input,select,summary):focus-visible{outline:2px solid CanvasText}
  :where([class*="border"]){border-color:CanvasText}
}
@media print{
  :where(nav,header,footer,video,[class*="overlay"],[class*="cmdk"]){display:none!important}
  :where(html,body){background:#fff!important;color:#000!important}
  :where(a)::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}

/* ===== SLICE v100 nav: anchor scroll-margin (sticky-header overlap) ===== */
:where(:target),:where([id]){scroll-margin-top:5rem}

/* ===== SLICE v101 a11y: reduced-transparency + reduced-data ===== */
@media (prefers-reduced-transparency: reduce){:where([class*="glass"],[class*="blur"]){backdrop-filter:none!important;background:var(--surface-2,#141922)!important}}
@media (prefers-reduced-data: reduce){:where(video[autoplay]){display:none!important}}

/* ===== SLICE v102 polish: accent-color for native form controls ===== */
:where(input[type="checkbox"],input[type="radio"],input[type="range"],progress,select){accent-color:var(--accent-primary,#60a5fa)}

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

/* ===== SLICE v104 loading: skeleton loader system ===== */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
  90deg,
  var(--surface, #11131a) 25%,
  var(--surface-2, #171a23) 37%,
  var(--surface, #11131a) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius, 6px);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton-text {
  display: block;
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.skeleton-text:last-child { width: 60%; }
.skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.skeleton-card {
  min-height: 200px;
  border-radius: var(--radius-lg, 12px);
}
.skeleton-btn {
  height: 44px;
  width: 160px;
  border-radius: var(--radius, 6px);
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-2, #171a23); }
}


/* ===== SLICE v105 typography: modular scale + spacing rhythm ===== */
:root {
  /* Modular type scale (1.200 — minor third) */
  --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.83rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.25vw, 1rem);
  --step-0:  clamp(1rem,  0.93rem + 0.33vw, 1.2rem);
  --step-1:  clamp(1.2rem,  1.11rem + 0.43vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.56vw, 1.73rem);
  --step-3:  clamp(1.73rem, 1.57rem + 0.73vw, 2.07rem);
  --step-4:  clamp(2.07rem, 1.87rem + 0.94vw, 2.49rem);
  --step-5:  clamp(2.49rem, 2.24rem + 1.18vw, 2.99rem);

}
/* Apply fluid type to body and headings */
:where(body)  { font-size: var(--step-0); }
:where(small, .text-sm, caption) { font-size: var(--step--1); }
:where(.text-xs, .hud-marker) { font-size: var(--step--2); }


/* ===== SLICE v106 micro-interactions: hover choreography ===== */
/* Entrance stagger for card grids */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal .card,
.reveal .tool-card,
.reveal .pricing-card,
.reveal .choose-card,
.reveal .faq-item {
  animation: fade-up 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.reveal .card:nth-child(1) { animation-delay: 0.05s; }
.reveal .card:nth-child(2) { animation-delay: 0.10s; }
.reveal .card:nth-child(3) { animation-delay: 0.15s; }
.reveal .card:nth-child(4) { animation-delay: 0.20s; }
.reveal .card:nth-child(5) { animation-delay: 0.25s; }
.reveal .card:nth-child(6) { animation-delay: 0.30s; }

/* Interactive press feedback */
:where(.btn, .tool-card, .choose-card, [role="button"]):active {
  transform: scale(0.97) !important;
  transition-duration: 0.06s !important;
}

/* Magnetic border glow on hover for glassmorphism cards */
.card:hover, .tool-card:hover, .choose-card:hover {
  border-image: linear-gradient(135deg, var(--accent-primary), var(--purple-glow)) 1;
}

/* Subtle icon bounce on card hover */
.card:hover .atlas-icon,
.tool-card:hover svg,
.choose-card:hover svg {
  animation: icon-bounce 0.4s ease;
}
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  40%    { transform: translateY(-3px); }
  60%    { transform: translateY(-1px); }
}

/* Link underline reveal */
:where(.section a:not(.btn)):hover {
  text-decoration-line: underline;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal .card,
  .reveal .tool-card,
  .reveal .pricing-card,
  .reveal .choose-card,
  .reveal .faq-item {
  animation: none;
  opacity: 1;
  }
  :where(.btn, .tool-card, .choose-card, [role="button"]):active {
  transform: none !important;
  }
  .card:hover .atlas-icon,
  .tool-card:hover svg,
  .choose-card:hover svg {
  animation: none;
  }
}


/* ===== SLICE v107 OLED: deep-black + color-scheme + scrollbar gutter ===== */
:root {
  color-scheme: dark;
  --bg:   #000000;
  --bg-alt: #050508;
  scrollbar-gutter: stable;
}
/* OLED energy savings — true black backgrounds */
@media (dynamic-range: high) {
  :root {
  --bg: #000000;
  --bg-alt: #020204;
  --surface: #0a0b10;
  --surface-2: #0f1016;
  }
}
/* Safe-area padding for notched devices */
@supports (padding: env(safe-area-inset-top)) {
  .topnav {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  }
  .section:last-child {
  padding-bottom: max(96px, calc(96px + env(safe-area-inset-bottom)));
  }
}


/* ===== SLICE v108 form-ux: enhanced form controls + error states ===== */
/* Custom form control styling */
:where(input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 10px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:where(input, select, textarea):hover {
  border-color: var(--border-bright);
}
:where(input, select, textarea):focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
  outline: none;
}
/* Error state */
:where(input, select, textarea).is-error,
:where(input, select, textarea):invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
/* Success state */
:where(input, select, textarea).is-valid {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
/* Disabled state */
:where(input, select, textarea):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-2);
}
/* Placeholder styling */
:where(input, textarea)::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}
/* Label styling */
:where(label) {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
/* Help text and error messages */
.form-help {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.form-error {
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 4px;
}
/* Input group (icon + input) */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  pointer-events: none;
}
.input-group input {
  padding-left: 38px;
}


/* ===== SLICE v109 motion-choreography: coordinated entrance system ===== */
/* Page-level entrance animation */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-current-page] {
  animation: page-enter 0.3s ease-out;
}

/* Smooth section reveal with intersection observer support */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Toast notification slide-in */
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);  opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0);  opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.toast {
  animation: toast-in 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.toast.is-leaving {
  animation: toast-out 0.25s ease-in forwards;
}

/* Modal backdrop + content entrance */
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-content-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
dialog::backdrop {
  animation: modal-backdrop-in 0.2s ease-out;
}
dialog[open] {
  animation: modal-content-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Progress bar fill animation */
@keyframes progress-fill {
  from { width: 0; }
}
.progress-bar {
  animation: progress-fill 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Counter number pop */
@keyframes num-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.stat-pop {
  animation: num-pop 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-current-page] { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .toast { animation: none; transform: translateX(0); opacity: 1; }
  .toast.is-leaving { animation: none; }
  dialog::backdrop { animation: none; }
  dialog[open] { animation: none; }
  .progress-bar { animation: none; }
  .stat-pop { animation: none; }
}


/* ===== SLICE v110 brand-cohesion: unified shadow system + elevation tokens ===== */
:root {
  /* Shadow elevation scale (consistent depth language) */
  --shadow-xs:  0 1px 2px   rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 3px   rgba(0, 0, 0, 0.3), 0 1px 2px  rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 6px  -1px rgba(0, 0, 0, 0.3), 0 2px 4px  -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px  -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* Glow shadow tokens */
  --shadow-glow:     0 0 20px rgba(96, 165, 250, 0.15);
  --shadow-glow-hover: 0 0 30px rgba(96, 165, 250, 0.25);
  --shadow-glow-focus: 0 0 0 3px rgba(96, 165, 250, 0.2);

  /* Transition tokens */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}


/* ===== SLICE v111 table-chart: data table legibility system ===== */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.data-table th {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border-bright);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
}
.data-table tbody tr:hover {
  background: var(--surface);
}
.data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
/* Numeric alignment */
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-family: var(--f-mono);
}
/* Positive/negative value colors */
.data-table .val-up { color: var(--green-light); }
.data-table .val-down { color: #ef4444; }
.data-table .val-neutral { color: var(--text-muted); }
/* Responsive horizontal scroll wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 3px;
}


/* ===== SLICE v112 og-share: social/OG card preview styles ===== */
.og-preview {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  max-width: 500px;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
}
.og-preview-img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3, #1d2030));
}
.og-preview-body {
  padding: 16px;
}
.og-preview-domain {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.og-preview-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}
.og-preview-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Share button styles */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms) ease,
        box-shadow var(--duration-fast, 150ms) ease;
}
.share-btn:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow, 0 0 20px rgba(96, 165, 250,0.15));
}
.share-btn svg {
  width: 16px;
  height: 16px;
}


/* ===== SLICE v113 onboarding: wizard + stepper + tooltip system ===== */
/* Step indicator / stepper */
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 24px 0;
  counter-reset: step;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: 0;
  counter-increment: step;
}
.stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 2px solid var(--border);
  transition: color var(--duration-normal, 250ms) ease, background-color var(--duration-normal, 250ms) ease, border-color var(--duration-normal, 250ms) ease, box-shadow var(--duration-normal, 250ms) ease, transform var(--duration-normal, 250ms) ease;
}
.stepper-step.is-active .stepper-circle {
  background: var(--accent-primary);
  color: #000;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow, 0 0 20px rgba(96, 165, 250,0.15));
}
.stepper-step.is-done .stepper-circle {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}
.stepper-line {
  width: 48px;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
}
.stepper-step.is-done + .stepper-step .stepper-line,
.stepper-step.is-active + .stepper-step .stepper-line {
  background: var(--accent-primary);
}
.stepper-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* Tooltip */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  padding: 6px 12px;
  background: var(--surface-3, #1d2030);
  color: var(--text);
  font-size: 0.78rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast, 150ms) ease,
        transform var(--duration-fast, 150ms) ease;
  z-index: var(--z-tooltip, 1070);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Onboarding checklist */
.onboarding-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.onboarding-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
  transition: background var(--duration-fast, 150ms) ease;
}
.onboarding-checklist li:hover {
  background: var(--surface);
}
.onboarding-checklist li.is-done {
  color: var(--text-dim);
  text-decoration: line-through;
}
.onboarding-checklist li .check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-bright);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.onboarding-checklist li.is-done .check-icon {
  background: var(--green);
  border-color: var(--green);
}


/* ===== SLICE v114 icon-consistency: icon sizing + badge system ===== */
/* Icon sizing scale */
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* Inline icon alignment */
:where(svg, img).inline-icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Badge / pill system */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  text-transform: uppercase;
}
.badge-primary {
  background: rgba(96, 165, 250, 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green-light);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.badge-warning {
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.25);
}
.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge-neutral {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Dot indicator (live/offline/busy) */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.is-live   { background: var(--green-light); box-shadow: 0 0 6px rgba(46,255,122,0.4); }
.status-dot.is-busy   { background: #fbbf24; }
.status-dot.is-offline { background: var(--text-dim); }

/* Avatar stack */
.avatar-stack {
  display: flex;
  flex-direction: row-reverse;
}
.avatar-stack > * {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -8px;
  object-fit: cover;
}
.avatar-stack > *:last-child { margin-left: 0; }


/* ===== SLICE v115 responsive-images: art direction + loading states ===== */
/* Responsive image container */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
}
/* Image with aspect ratio container */
.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
}
.img-frame::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 default */
}
.img-frame.ratio-1-1::before { padding-top: 100%; }
.img-frame.ratio-4-3::before { padding-top: 75%; }
.img-frame.ratio-3-2::before { padding-top: 66.67%; }
.img-frame.ratio-21-9::before { padding-top: 42.86%; }
.img-frame > img,
.img-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image loading fade-in */
:where(img)[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
:where(img)[loading="lazy"].is-loaded,
:where(img)[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Hero/feature image with gradient overlay */
.img-hero-overlay {
  position: relative;
}
.img-hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
  to bottom,
  transparent 40%,
  var(--bg, #000) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Responsive art direction helper */
@media (max-width: 480px) {
  .img-desktop-only { display: none; }
}
@media (min-width: 481px) {
  .img-mobile-only { display: none; }
}


/* ===== SLICE v116 cross-tab: tab visual consistency + active state system ===== */
/* Tab bar (generic) */
.tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast, 150ms) ease,
        border-color var(--duration-fast, 150ms) ease;
  min-height: 44px;
}
.tab-item:hover {
  color: var(--text);
}
.tab-item[aria-selected="true"],
.tab-item.is-active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 600;
}
.tab-item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
  border-radius: 4px 4px 0 0;
}

/* Tab panel transitions */
[role="tabpanel"] {
  animation: tab-panel-in 0.25s ease-out;
}
@keyframes tab-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [role="tabpanel"] { animation: none; }
}

/* Breadcrumb bar */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 8px 0;
}
.breadcrumb a {
  color: var(--text-muted);
  transition: color var(--duration-fast, 150ms) ease;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb-sep {
  margin: 0 8px;
  color: var(--border-bright);
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}


/* ===== SLICE v117 loading-error: error state + loading spinner + empty pattern ===== */
/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner-lg { width: 40px; height: 40px; border-width: 4px; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--accent-primary); opacity: 0.7; }
}

/* Full-area loading overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-base);
  border-radius: inherit;
}

/* Error state */
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: #f87171;
  gap: 12px;
  min-height: 120px;
}
.state-error svg {
  width: 32px;
  height: 32px;
  stroke: #f87171;
  opacity: 0.7;
}
.state-error .error-title {
  font-size: 1rem;
  font-weight: 600;
  color: #f87171;
}
.state-error .error-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  max-width: 320px;
}
.state-error .btn-retry {
  margin-top: 8px;
}

/* Inline alert / callout */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius, 6px);
  font-size: 0.92rem;
  border-left: 3px solid;
}
.alert-info {
  background: rgba(96, 165, 250, 0.06);
  border-left-color: var(--accent-primary);
  color: var(--text);
}
.alert-success {
  background: rgba(34, 197, 94, 0.06);
  border-left-color: var(--green);
  color: var(--text);
}
.alert-warning {
  background: rgba(234, 179, 8, 0.06);
  border-left-color: #fbbf24;
  color: var(--text);
}
.alert-error {
  background: rgba(239, 68, 68, 0.06);
  border-left-color: #ef4444;
  color: var(--text);
}


/* ===== SLICE v118 perf-polish: contain + will-change + content-visibility ===== */
/* Layout containment for cards — prevents reflow cascades */
:where(.card, .tool-card, .choose-card, .pricing-card, .faq-item, .atlas-card) {
  contain: layout style;
}
/* Below-fold sections: skip rendering until they scroll into view */
:where(.section:nth-child(n+3)) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
/* GPU-promote only elements that actually animate */
:where(.hero-orb, .spinner, .toast, dialog[open]) {
  will-change: transform;
}
/* Prevent layout shift from font loading */
:where(body) {
  font-synthesis: none;
  text-size-adjust: 100%;
}
/* Image decode async hint */
:where(img:not([decoding])) {
  decoding: async;
}
/* Optimize paint for fixed/sticky elements */
:where(.topnav, .sticky-mobile-cta) {
  will-change: auto; /* was transform; auto is cheaper when not animating */
  backface-visibility: hidden;
}
/* Touch scroll containment */
:where(.modal-body, .table-scroll, [class*="scroll"]) {
  overscroll-behavior: contain;
}


/* ===== SLICE v120 hyper_haptics: physical micro-vibration emulation ===== */
@keyframes haptic-bump {
  0%   { transform: scale(0.98) translateY(1px); }
  50%  { transform: scale(0.96) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
button:active, .interactive-card:active {
  animation: haptic-bump 0.15s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}


/* ===== SLICE v121 biomechanical_shading: phenotype-responsive UI lighting ===== */
:root {
  --shadow-color: 220 3% 15%;
  --shadow-elevation-low:
  0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
  0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
  1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* RR (Fast-twitch / Power) Phenotype: Harsh, direct, high-contrast lighting simulating heavy load */
body[data-phenotype="RR"] {
  --shadow-color: 0 0% 5%;
  --shadow-elevation-low:
  0.5px 1px 1px hsl(var(--shadow-color) / 0.7),
  1px 2px 2px -1px hsl(var(--shadow-color) / 0.7),
  2px 4px 4px -2px hsl(var(--shadow-color) / 0.7);
  --glass-border: rgba(255, 50, 50, 0.3);
}

/* XX (Slow-twitch / Endurance) Phenotype: Soft, diffused, aerobic lighting */
body[data-phenotype="XX"] {
  --shadow-color: 200 20% 40%;
  --shadow-elevation-low:
  0.5px 1px 2px hsl(var(--shadow-color) / 0.1),
  1px 3px 5px -1px hsl(var(--shadow-color) / 0.1),
  2px 6px 10px -2px hsl(var(--shadow-color) / 0.1);
  --glass-border: rgba(96, 165, 250, 0.3);
}

.biomechanical-card {
  box-shadow: var(--shadow-elevation-low);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


/* ===== SLICE v126 gpu_acceleration: 144hz render parity ===== */
/* Offload heavy interactive cards to the GPU */
.interactive-card, .biomechanical-card, .physics-target, .quiz-progress {
  will-change: transform, opacity, box-shadow;
  /* Force hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize scroll performance with content-visibility */
.session-history-container, .workout-log-list {
  content-visibility: auto;
  contain-intrinsic-size: 100px 500px;
}

/* Debounce paint on rapid hover states */
button, .btn {
  transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1), background-color 0.15s linear;
}
/* ===
   [SLICE_V131] NEURO-KINESIOLOGY INTERFACE & BIO-FEEDBACK HUD
   === */
:root {
  --neuro-tremor-intensity: 0px;
  --neuro-tunnel-opacity: 0;
  --neuro-breath-scale: 1;
  --neuro-atp-hue: 180deg; /* Cyan -> Red */
  --neuro-blood-flow: 0;
}

/* 1. Breathing DOM (Rest State) */
.neuro-breathing {
  transform: scale(var(--neuro-breath-scale));
  transition: transform 0.1s linear;
}

/* 2. Micro-Tremor (Fatigue State) */
@keyframes neuroTremor {
  0% { transform: translate(var(--neuro-tremor-intensity), var(--neuro-tremor-intensity)) rotate(calc(var(--neuro-tremor-intensity) * 0.5deg)); }
  25% { transform: translate(calc(var(--neuro-tremor-intensity) * -1), calc(var(--neuro-tremor-intensity) * 1)) rotate(calc(var(--neuro-tremor-intensity) * -0.5deg)); }
  50% { transform: translate(calc(var(--neuro-tremor-intensity) * -1), calc(var(--neuro-tremor-intensity) * -1)) rotate(calc(var(--neuro-tremor-intensity) * 0.5deg)); }
  75% { transform: translate(calc(var(--neuro-tremor-intensity) * 1), calc(var(--neuro-tremor-intensity) * -1)) rotate(calc(var(--neuro-tremor-intensity) * -0.5deg)); }
  100% { transform: translate(var(--neuro-tremor-intensity), var(--neuro-tremor-intensity)) rotate(calc(var(--neuro-tremor-intensity) * 0.5deg)); }
}

.neuro-tremor-active {
  animation: neuroTremor 0.1s infinite linear;
  will-change: transform;
}

/* 3. Hypoxic Tunnel Vision (Glycolytic Exhaustion) */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  box-shadow: inset 0 0 calc(var(--neuro-tunnel-opacity) * 100px) rgba(0, 0, 0, calc(var(--neuro-tunnel-opacity) * 0.8));
  transition: box-shadow 0.5s ease-out;
  z-index: var(--z-modal);
}

/* 4. ATP Hue Shift (Energy Depletion) */
.neuro-atp-indicator {
  color: hsl(var(--neuro-atp-hue), 100%, 50%);
  text-shadow: 0 0 10px hsla(var(--neuro-atp-hue), 100%, 50%, 0.5);
  transition: color 0.5s linear, text-shadow 0.5s linear;
}

/* ===== SLICE v142 nav_contrast_receipt: screenshot-observed readable nav labels ===== */
.navlinks a:not(.cta) {
  background: var(--surface) !important;
  color: #f4f5f7 !important;
}

.navlinks a:not(.cta):hover,
.navlinks a:not(.cta).active {
  background: var(--rep-lime) !important;
  color: var(--surface) !important;
}

.section-trust .trust-nav a {
  background: var(--surface) !important;
  color: #f4f5f7 !important;
}

.section-trust .trust-nav a:hover,
.section-trust .trust-nav a:focus-visible {
  background: var(--rep-cyan) !important;
  color: var(--surface) !important;
}

/* ===== SLICE v143 trust_contrast_receipt: light-card body copy must stay readable ===== */
.section-trust .trust-block p,
.section-trust .trust-list li,
.section-trust .trust-foot {
  color: #31424c !important;
}

.section-trust .trust-block p strong,
.section-trust .trust-list li strong,
.section-trust .trust-foot a {
  color: #007b8d !important;
}

/* ===== SLICE v144 zeigarnik_hud_overlap_guard: fixed HUD must not cover Trust copy ===== */
#aziap-zeigarnik-hud {
  max-width: 212px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 6px !important;
}

body[data-current-page="trust"] #aziap-zeigarnik-hud {
  top: max(96px, calc(env(safe-area-inset-top) + 84px)) !important;
  bottom: auto !important;
}

body[data-current-page="trust"] .fx-spotlight,
body[data-current-page="trust"] .fx-grain {
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 640px) {
  #aziap-zeigarnik-hud {
  left: 12px !important;
  right: 12px !important;
  max-width: none !important;
  text-align: center !important;
  }
}

/* ====
   GEMINI-PRO-DESIGN SLICE BLOCK — v122–v128
   Implements all 6 PENDING slices from eccentrx_version_ledger.md
   2026-06-04
   ==== */

/* --- SLICE v122: Pull-to-Refresh Physics --- */
.ecc-scroll-root {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
}

.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-64px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-raised, hsl(220,15%,16%));
  border: 2px solid var(--accent-primary, hsl(180,100%,50%));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
}

.ptr-indicator.ptr-pulling {
  opacity: 1;
}

.ptr-indicator.ptr-releasing {
  opacity: 1;
  transform: translateX(-50%) translateY(8px) rotate(180deg);
}

.ptr-indicator svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-primary, hsl(180,100%,50%));
  fill: none;
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  .ptr-indicator,
  .ptr-indicator.ptr-pulling,
  .ptr-indicator.ptr-releasing {
  transition: none;
  transform: translateX(-50%) translateY(-64px) !important;
  opacity: 0 !important;
  }
}

/* --- SLICE v123: Hick's Law — Full DOM Inert Filter System --- */
[inert] {
  pointer-events: none;
  user-select: none;
  opacity: 0.35;
  filter: blur(0.5px);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

[inert] * {
  pointer-events: none;
  user-select: none;
}

[role="group"] .filter-btn {
  min-height: 44px;
  min-width: 44px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

[role="group"] .filter-btn[aria-pressed="true"] {
  background: var(--accent-primary, hsl(180,100%,50%));
  color: hsl(220, 15%, 6%);
  box-shadow: 0 0 16px hsla(180, 100%, 50%, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  [inert] {
  transition: none;
  }
  [role="group"] .filter-btn {
  transition: none;
  }
}

/* --- SLICE v124: Kinesiology Vectors — Full Pass --- */
.kine-vector-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.kine-vector-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.kine-load-vector {
  stroke: hsl(0, 100%, 50%);
  stroke-width: 3;
  fill: none;
  marker-end: url(#load-arrowhead);
  filter: drop-shadow(0 0 4px hsla(0,100%,50%,0.6));
}

.kine-applied-vector {
  stroke: hsl(180, 100%, 45%);
  stroke-width: 3;
  fill: none;
  marker-end: url(#applied-arrowhead);
  filter: drop-shadow(0 0 4px hsla(180,100%,45%,0.6));
}

.kine-joint-angle-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  fill: hsl(180, 100%, 70%);
  filter: drop-shadow(0 0 3px hsla(180,100%,50%,0.8));
}

.kine-joint-arc {
  fill: none;
  stroke: hsl(180, 100%, 50%);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}

.kine-metabolic-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.kine-tag-atp-cp { background: hsla(60,100%,50%,0.15); color: hsl(60,100%,65%); border: 1px solid hsla(60,100%,50%,0.4); }
.kine-tag-glycolytic { background: hsla(30,100%,50%,0.15); color: hsl(30,100%,65%); border: 1px solid hsla(30,100%,50%,0.4); }
.kine-tag-aerobic { background: hsla(180,100%,50%,0.12); color: hsl(180,100%,60%); border: 1px solid hsla(180,100%,50%,0.35); }

/* --- SLICE v126: GPU Acceleration — Compositor-Thread Audit --- */
/* Only apply will-change where animations actively run. Avoid over-use. */
.skeleton-shimmer,
.skeleton-shimmer::after {
  will-change: transform;
}

.atlas-card {
  will-change: transform;
  transform: translateZ(0); /* force GPU layer */
}

.session-active-card {
  will-change: transform;
}

/* Aurora/glow animations — force compositor layer */
.fx-spotlight,
.aurora-layer,
.home-glow-orb,
.hero-glow {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Ensure all transitions use compositor-friendly properties only */
.atlas-card:hover {
  transform: translateY(-4px) translateZ(0) scale(1.01);
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  .atlas-card,
  .atlas-card:hover,
  .fx-spotlight,
  .aurora-layer,
  .home-glow-orb,
  .hero-glow {
  will-change: auto;
  transform: none !important;
  transition: none !important;
  }
}

/* --- SLICE v128: Biological Overlay — Bio Insight Chip --- */
.bio-insight-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-raised, hsl(220,15%,16%));
  border: 1px solid var(--accent-primary, hsl(180,100%,50%));
  border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, hsl(220,15%,92%));
  cursor: pointer;
  position: relative;
  z-index: 2;
  max-width: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bio-insight-chip:hover,
.bio-insight-chip:focus-visible {
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.45);
  border-color: var(--accent-primary);
  outline: none;
}

.bio-insight-chip:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 3px;
}

.bio-insight-chip__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-primary);
}

.bio-insight-chip__dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim, hsl(220,15%,55%));
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}

.bio-insight-chip__dismiss:hover {
  color: var(--text-primary, hsl(220,15%,92%));
  background: hsla(220,15%,50%,0.15);
}

.bio-insight-chip-wrap {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* When a chip is dismissed / inert */
.bio-insight-chip[inert] {
  opacity: 0.25;
  pointer-events: none;
  filter: blur(0.5px);
}

@media (prefers-reduced-motion: reduce) {
  .bio-insight-chip,
  .bio-insight-chip:hover,
  .bio-insight-chip:focus-visible {
  transition: none;
  box-shadow: none;
  }
}

/* Sprint 9: GPU Acceleration Audit (Slice v126) */
.atlas-card:hover, 
.skeleton-shimmer, 
.session-active-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Metabolic Pathway UI (v168) */
.metabolic-pathway-ui { background: var(--surface-2); border-radius: 8px; padding: 12px; margin-top: 16px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--border); }
.mp-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.mp-title { color: var(--text-muted); }
.mp-value { font-weight: 600; transition: color 0.3s ease; }
.mp-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.mp-fill { height: 100%; transition: width 0.3s ease, background 0.3s ease; }
.mp-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); opacity: 0.7; }


/* ====
   Metabolic Pathway UI (Slice v168)
   ==== */
.metabolic-pathway-ui {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--f-mono);
}

.mp-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mp-value {
  color: var(--text);
  font-weight: 600;
}

.mp-track {
  height: 6px;
  background: linear-gradient(90deg, hsl(210, 100%, 60%) 0%, hsl(0, 100%, 60%) 100%);
  border-radius: 3px;
  position: relative;
  margin-bottom: 0.5rem;
}

.mp-fill {
  height: 100%;
  width: 50%;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  transition: width 0.3s ease;
  will-change: width;
}

.mp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ===
   Slice v120: HYPER HAPTICS (System 1 Micro-animations)
   === */
@keyframes hyper-haptic {
  0% { transform: translate(0, 0) scale(0.98); }
  25% { transform: translate(-1px, 1px) scale(0.98); }
  50% { transform: translate(1px, -1px) scale(0.98); }
  75% { transform: translate(-1px, -1px) scale(0.98); }
  100% { transform: translate(0, 0) scale(0.98); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active, 
  .quiz-opt:active, 
  .atlas-card:active {
  animation: hyper-haptic 0.1s linear infinite;
  }
}

/* ===
   Slice v121: BIOMECHANICAL SHADING (Genomic Overlays)
   === */
.phenotype-rr-lighting {
  box-shadow: inset 0 0 40px rgba(255, 50, 50, 0.1), 0 0 20px rgba(255, 50, 50, 0.2);
  border-color: rgba(255, 50, 50, 0.4) !important;
}
.phenotype-xx-lighting {
  box-shadow: inset 0 0 40px rgba(50, 150, 255, 0.1), 0 0 20px rgba(50, 150, 255, 0.2);
  border-color: rgba(50, 150, 255, 0.4) !important;
}
.phenotype-mstn-lighting {
  box-shadow: inset 0 0 60px rgba(200, 50, 255, 0.15), 0 0 30px rgba(200, 50, 255, 0.3);
  border-color: rgba(200, 50, 255, 0.5) !important;
}

/* ===
   [SLICE_V133] BIOMECHANICAL SHADING & METABOLIC PATHWAYS
   === */

/* System 1: Fast & Intuitive Micro-animations */
.card, .btn, .interactive-element {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow;
}

.card:hover, .btn:hover, .interactive-element:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}

.card:active, .btn:active, .interactive-element:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
}

/* Metabolic Pathway Tagging */
.metabolic-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-atp-cp {
  /* Explosive/short lifts: Cyan -> Electric Blue */
  background-color: hsla(190, 100%, 15%, 0.5);
  color: hsl(190, 100%, 70%);
  border: 1px solid hsla(190, 100%, 50%, 0.3);
}

.tag-glycolytic {
  /* Moderate duration, high fatigue: Purple/Magenta */
  background-color: hsla(280, 100%, 15%, 0.5);
  color: hsl(280, 100%, 75%);
  border: 1px solid hsla(280, 100%, 60%, 0.3);
}

.tag-aerobic {
  /* Low-intensity stability/recovery: Green/Teal */
  background-color: hsla(150, 100%, 12%, 0.5);
  color: hsl(150, 80%, 65%);
  border: 1px solid hsla(150, 100%, 40%, 0.3);
}

/* ===
   [SLICE_V134] A11Y CONTRAST PERFECTION & REDUCED MOTION
   === */

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
  }
  
  .neuro-tremor-active {
  animation: none !important;
  transform: none !important;
  }
  
  .neuro-breathing {
  transform: none !important;
  transition: none !important;
  }
}

/* Ensure focus trap panels are visibly bounded and have AAA contrast rings */
:focus-visible {
  outline: 3px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
}

/* Ensure body copy AAA contrast on dark mode */
@media (prefers-color-scheme: dark) {
  body {
  color: #f1f5f9; /* Tailwind slate-100 for very high contrast */
  }
  
  .text-muted {
  color: #94a3b8; /* slate-400 */
  }
}

/* ====
   HERO QUAD-GRID — premium overhaul (appended; cascade-final)
   Fixes card-02 dark-on-dark contrast (was --text on --surface,
   ~1:1, invisible). Adds System-1 micro-animation lift, HUD mono
   numerics, subtle gradient sheen + bright hairline stroke.
   All four tiles verified >4.5:1 (name text vs tile base color).
   ==== */
.home-route-strip {
  overflow: visible !important; /* let hover lift escape the strip */
}
.home-route-strip a {
  position: relative !important;
  border-radius: 7px !important;
  isolation: isolate;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  transition:
  transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
  box-shadow 0.22s ease,
  filter 0.18s ease !important;
  will-change: transform;
}
/* Card 01 — Plan (lime) — dark ink text (16:1) */
.home-route-strip a:nth-child(1) {
  background-color: #2563eb !important; /* de-neon: Plan card -> brand blue (category palette stays distinct, neon retired) */
  color: #ffffff !important;
}
/* Card 02 — Gym (dark chip) — light text + brand-blue numeric  [CONTRAST FIX 18:1] */
.home-route-strip a:nth-child(2) {
  background-color: var(--surface) !important;
  background-image: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(8, 117, 138, 0.06)) !important; /* de-neon: brand blue/teal tint */
  color: var(--rep-paper) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3) !important;
}
.home-route-strip a:nth-child(2) span {
  color: #5b9dff !important; /* de-neon: light brand blue numeric (6.64:1 on dark) */
}
/* Card 03 — Atlas (brand teal, distinct from Plan blue) — white text (5.35:1) */
.home-route-strip a:nth-child(3) {
  background-color: #08758a !important; /* de-neon: Atlas card -> brand teal */
  color: #ffffff !important;
}
/* Card 04 — Tools (coral) — dark ink text (6.3:1) */
.home-route-strip a:nth-child(4) {
  background-color: var(--rep-coral) !important;
  color: var(--rep-ink) !important;
}
/* HUD mono numerics */
.home-route-strip span {
  font-family: var(--f-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.62rem !important;
}
.home-route-strip strong {
  color: inherit !important;
}
.home-route-strip em {
  color: inherit !important;
  opacity: 0.86 !important;
}
/* System-1 micro-animation: lift + accent glow on hover/focus */
.home-route-strip a:hover,
.home-route-strip a:focus-visible {
  transform: translateY(-2px) scale(1.02) !important;
  z-index: 2 !important;
  filter: saturate(1.06) brightness(1.02) !important;
}
.home-route-strip a:nth-child(1):hover,
.home-route-strip a:nth-child(1):focus-visible {
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; /* de-neon: brand blue glow */
}
.home-route-strip a:nth-child(2):hover,
.home-route-strip a:nth-child(2):focus-visible {
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.4), inset 0 0 0 1px rgba(37, 99, 235, 0.45) !important; /* de-neon: brand blue glow */
}
.home-route-strip a:nth-child(3):hover,
.home-route-strip a:nth-child(3):focus-visible {
  box-shadow: 0 0 22px rgba(8, 117, 138, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; /* de-neon: brand teal glow */
}
.home-route-strip a:nth-child(4):hover,
.home-route-strip a:nth-child(4):focus-visible {
  box-shadow: 0 0 22px rgba(255, 95, 63, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-route-strip a {
  transition: none !important;
  }
  .home-route-strip a:hover,
  .home-route-strip a:focus-visible {
  transform: none !important;
  }
}

/* ===== AA-CONTRAST HOTFIX (claude 2026-06-05) ==
   Dark-filled controls (quiz options, segmented toggles, settings + secondary buttons)
   inherited color:var(--text) (near-black in the light surface theme) over dark fills,
   measuring ~1.04:1 — invisible across Home/Plan/Gym/Tools/Atlas. Force readable light
   text on a predictable dark fill; active state keeps an accent edge for distinction.
   Appended at EOF so it wins the cascade and survives mid-file region rewrites. */
.quiz-opt,
.quiz-prev,
.seg-btn,
.btn-secondary,
.settings-account-btn,
.settings-test,
.settings-account-clear {
  color: #eef3f8 !important;
  background-color: rgba(14, 18, 28, 0.94) !important;
  border-color: rgba(120, 200, 255, 0.30) !important;
}
.seg-btn.active,
.quiz-opt[aria-pressed="true"],
.quiz-opt.selected,
.quiz-opt[aria-selected="true"] {
  background-color: rgba(96, 165, 250, 0.20) !important;
  border-color: rgba(96, 165, 250, 0.78) !important;
  color: #ffffff !important;
}
/* ===== END AA-CONTRAST HOTFIX ==== */

/* ===== AA-CONTRAST HOTFIX 2 (claude 2026-06-05) — quiz-opt specificity =====
   [data-page="demo"] .quiz-opt (0,2,0) set bg:var(--text)+color:var(--surface); both
   resolve near-black in this theme => invisible. Match specificity (tie -> later wins). */
[data-page="demo"] .quiz-opt,
[data-page] .quiz-opt {
  background: rgba(14, 18, 28, 0.96) !important;
  color: #eef3f8 !important;
  border-color: rgba(120, 200, 255, 0.30) !important;
}
[data-page="demo"] .quiz-opt.active,
[data-page="demo"] .quiz-opt.selected,
[data-page="demo"] .quiz-opt[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.10)) !important;
  border-color: rgba(96, 165, 250, 0.78) !important;
  color: #ffffff !important;
}
/* ===== END AA-CONTRAST HOTFIX 2 == */

/* ===== AA-CONTRAST HOTFIX 3 (claude 2026-06-05) — seg-btn active on light surfaces =
   HOTFIX 1 gave .seg-btn.active translucent-cyan bg + white text; on the LIGHT unit/theme
   selector that composited to white-on-light-cyan (1.2:1). Opaque accent fill + dark text
   is contrast-safe on ANY surface (~10:1) and reads clearly as the active pill. */
.seg-btn.active,
.seg-btn[aria-pressed="true"],
.seg-btn[aria-selected="true"] {
  background: #2563eb !important; /* de-neon: brand blue replaces retired cyan on the segmented-control active state */
  border-color: #2563eb !important;
  color: #ffffff !important; /* white on #2563eb = 5.17:1 AA (dark #042b33 would fail on the darker blue) */
}
/* ===== END AA-CONTRAST HOTFIX 3 == */


/* ===== AZIAP v12: Glycogen Depletion UI = */
.dashboard-glycogen-ui {
  margin-top: 16px;
  padding: 20px;
}
.fuel-grid {
  display: flex;
  gap: 4px;
  margin: 12px 0;
  height: 24px;
}
.fuel-cell {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.fuel-cell.active {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-warm));
  border-color: rgba(255, 59, 59, 0.5);
  box-shadow: 0 0 10px rgba(255, 59, 59, 0.3);
  transform: scaleY(1.05);
}
.fuel-cell.depleted {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  transform: scaleY(0.9);
}
.fuel-status {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: right;
  margin: 0;
}
/* ===== END AZIAP v12 ====== */
/* ===== Today brief (#tool-today) — clean daily-driver glance ===== */
#tool-today #tbHeadline{font-weight:600;font-size:1.05rem;margin:0 0 .5rem;}
#tool-today .tb-lines{list-style:none;margin:0 0 .75rem;padding:0;display:flex;flex-direction:column;gap:.35rem;}
#tool-today .tb-lines li{font-size:.95rem;line-height:1.4;padding-left:1.25rem;position:relative;}
#tool-today .tb-lines li::before{content:"";position:absolute;left:.25rem;top:.55em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;}
#tool-today .tb-actions{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;}
#tool-today .tb-actions:empty{display:none;}
#tool-today .tb-actions li{font-size:.82rem;font-weight:500;line-height:1.2;padding:.35rem .7rem;border-radius:999px;border:1px solid currentColor;opacity:.9;}
@media (prefers-reduced-motion: no-preference){
  #tool-today .tb-lines li, #tool-today .tb-actions li{transition:opacity .2s ease;}
}
#tool-today .tb-week{display:flex;gap:.4rem;margin:0 0 .75rem;}
#tool-today .tb-day{flex:1 1 0;min-width:0;text-align:center;font-size:.7rem;font-weight:600;line-height:1.6;border-radius:8px;border:1px solid currentColor;opacity:.4;}
#tool-today .tb-day-on{opacity:1;background:color-mix(in srgb, currentColor 16%, transparent);border-color:currentColor;}

/* ====
   VISUAL ASCENSION v137 — additive production polish layer
   Zero-specificity :where() hooks: every existing rule outranks
   this layer by design. Motion lives behind prefers-reduced-motion;
   syntax-modern features behind @supports. Compositor-safe
   properties only (opacity / translate / scale / filter).
==== */

/* Damped-spring easing tokens — real spring curves via CSS linear() */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
      1.017 20.8%, 1.077 25.5%, 1.093 28.3%, 1.083 32%, 1.012 42.2%,
      0.987 50.2%, 0.998 64.8%, 1.001 77.2%, 1
    );
    --ease-snap: linear(
      0, 0.329 4.5%, 0.757 9.4%, 0.937 12.1%, 1.044 15.5%, 1.083 18.9%,
      1.053 25%, 0.991 33.2%, 0.989 38.9%, 1.003 50.4%, 1
    );
  }
}

/* Honor reduced motion on page transitions (pageFadeIn predates the gate) */
@media (prefers-reduced-motion: reduce) {
  [data-page].page-active {
    animation: none;
  }
}

/* Tactile press physics — independent `scale` channel composes with any
   existing `transform`, so hover lifts keep working; compositor-only. */
@media (prefers-reduced-motion: no-preference) {
  :where(.btn, .seg-btn, .tools-filter-btn, .session-phone-nav-btn) {
    transition: scale 0.35s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  }
  :where(.btn, .seg-btn, .tools-filter-btn, .session-phone-nav-btn):active {
    scale: 0.96;
    transition-duration: 0.06s;
  }
}

/* Primary CTA luminance lift — filter only, zero layout cost */
:where(.btn-primary):hover { filter: brightness(1.07) saturate(1.06); }
:where(.btn-primary):active { filter: brightness(0.97); }
@media (prefers-reduced-motion: no-preference) {
  :where(.btn-primary) {
    transition: filter 0.2s ease, scale 0.35s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  }
}

/* Scroll-driven card reveal — cards surface as they enter the viewport.
   `translate` (not `transform`) so existing hover transforms still win.
   From-opacity 0.25, never 0: if a browser misplaces the range, content
   stays readable. Double-gated: feature support AND motion preference. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(.tool-card) {
      animation: ascCardIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes ascCardIn {
  from { opacity: 0.25; translate: 0 22px; }
  to { opacity: 1; translate: none; }
}

/* Typographic finish — balanced headings, orphan-free body text */
@supports (text-wrap: balance) {
  :where(h1, h2, h3) { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
  :where(p, li) { text-wrap: pretty; }
}

/* Data surfaces read as instrumentation — lining tabular digits */
:where(td, .fuel-status, .tb-day) {
  font-variant-numeric: tabular-nums;
}
/* ===== END VISUAL ASCENSION v137 ===== */
/* ===== Cycle 4: Premium 3D Micro-Animations ===== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tool-card:hover,
  .pricing-card:hover,
  .choose-card:hover,
  .atlas-card:hover,
  .quiz-opt:hover {
    transform: perspective(1000px) scale3d(1.03, 1.03, 1.03) translateZ(10px) !important;
    box-shadow:
      0 20px 40px -10px rgba(0, 0, 0, 0.5),
      0 0 25px -5px var(--accent-primary),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent-glow) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    z-index: 2;
  }
}

.tool-card, .pricing-card, .choose-card, .atlas-card, .quiz-opt {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;
}

/* ===== Cycle 5: Typography Matrix & Cognitive Friction ===== */
.metric, .lb-score, .mp-value, .readiness-value, .readiness-output-pct, .price-amount, .streak-num, .streak-badge, .brand-status, .ss-num {
  font-weight: var(--font-weight-heavy) !important;
}

/* ===== Cycle 6: Premium Glassmorphism ===== */
.topnav,
.topnav.scrolled,
.onboard-card,
.signup-card,
.settings-drawer,
.cmdk-panel,
.zen-respiration-modal,
.gym-instruction-drawer,
.sidebar,
.floating-overlay,
.cmdk-overlay,
.sidebar-overlay,
.onboard-overlay,
.boot-overlay,
.signup-backdrop,
.biomech-hinge-overlay,
[role="dialog"] {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.zen-respiration-modal::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.zen-resp-container h3 {
  color: #f4f5f7 !important;
}
.zen-resp-circle {
  border-color: #f4f5f7 !important;
}
.zen-resp-circle.inhale {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ===== Cycle 7: Cumulative Layout Shift (CLS) Matrix ===== */
svg {
  min-width: 1em;
  min-height: 1em;
  transform-origin: center center;
}
svg[viewBox^="0 0 24"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 32"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 128"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 100"] { aspect-ratio: 1 / 1; }

.burnout-canvas {
  aspect-ratio: 375 / 120;
  width: 100%;
}
.biomech-canvas {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.pr-card-canvas {
  aspect-ratio: 1200 / 630;
  width: 100%;
  height: auto;
}
.fatigue-heatmap {
  min-height: 80px;
}

.tool-card,
.pricing-card,
.price-card,
.choose-card,
.atlas-card,
.gym-mode-card,
.context-passport-card,
.repdeck-problem-card {
  contain: layout;
}

.atlas-visual-shell {
  contain: layout paint;
  aspect-ratio: 18 / 11;
  min-height: 160px;
}


/* Hardcoded reserved heights for metric cards to permanently mitigate CLS jitter */
.tool-card { min-height: 240px; }
.choose-card { min-height: 100px; }
.gym-mode-card { min-height: 140px; }
.context-passport-card { min-height: 80px; }
.repdeck-problem-card { min-height: 70px; }
.price-card, .pricing-card { min-height: 480px; }


/* ===== Cycle 8: Visual Decoupling ===== */
body.modal-open main#main-content,
body.session-active main#main-content,
body:has(.sidebar.open) main#main-content,
body:has(.cmdk-overlay.open) main#main-content,
body.modal-open .topnav,
body.session-active .topnav,
body:has(.sidebar.open) .topnav,
body:has(.cmdk-overlay.open) .topnav {
  filter: grayscale(100%) opacity(0.35) blur(3px) !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.modal-open #sidebar:not(.open),
body.session-active #sidebar:not(.open),
body:has(.cmdk-overlay.open) #sidebar:not(.open) {
  filter: grayscale(100%) opacity(0.35) blur(3px) !important;
  pointer-events: none !important;
}

#main-content, .topnav, #sidebar {
  transition: filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
  will-change: filter, opacity;
}


/* ===== Cycle 10: Z-Index Standardization ===== */
:root {
  --z-base: 10;
  --z-floating: 50;
  --z-modal: 100;
}

/* ===== Cycle 12: Granular Touch Target Expansion ===== */
button,
.btn,
[role="button"],
.nav-item,
.sidebar-item,
.seg-btn,
.pill-filter,
.filter-pill,
.chip,
summary,
.sidebar-toggle,
.sidebar-close {
  height: 44px !important;
  min-width: 44px !important;
}


/* ===== Cycle 13: System 1 Micro-Animations ===== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button, .btn, [role="button"], .pill-filter, .filter-pill, .card, .atlas-card, .choose-card, .tile {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s linear, border-color 0.2s linear, filter 0.2s linear;
    will-change: transform;
  }
  
  button:not(.seg-btn, .nav-item, .sidebar-item, .sidebar-toggle, .sidebar-close, .back-to-top):hover, 
  .btn:hover, 
  .pill-filter:hover,
  .filter-pill:hover {
    transform: scale(1.03) translateY(-1px);
    filter: brightness(1.15);
  }

  .card:hover, .atlas-card:hover, .choose-card:hover, .tile:hover {
    transform: scale(1.015) translateY(-2px);
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: no-preference) {
  button:not(.sidebar-toggle):active, .btn:active, [role="button"]:not(.sidebar-toggle):active, .pill-filter:active, .filter-pill:active, 
  .card:active, .atlas-card:active, .choose-card:active, .tile:active {
    transform: scale(0.97) translateY(0) !important;
    filter: brightness(0.9) !important;
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1), filter 0.1s linear !important;
  }
}

/* A11y: Prefers Reduced Motion Ultimate Override */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:hover, .btn:hover, .card:hover, .atlas-card:hover, .choose-card:hover, .tile:hover,
  button:active, .btn:active, .card:active, .atlas-card:active, .choose-card:active, .tile:active {
    transform: none !important;
  }
}



/* ====
   Biomechanical UI: Nitric Oxide Pump Cascade
   ==== */
body.pump-cascade-active {
  background: radial-gradient(circle at center, var(--surface-1, #14161c) 0%, rgba(255, 0, 128, 0.05) 100%) !important;
}

body.pump-cascade-active .card,
body.pump-cascade-active .panel {
  border-color: rgba(255, 0, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 10px rgba(255, 0, 255, 0.05);
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  animation: pulse-vascularity 2s infinite ease-in-out;
}

.boot-overlay,
.signup-backdrop,
.biomech-hinge-overlay,
[role="dialog"] {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.zen-respiration-modal::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.zen-resp-container h3 {
  color: #f4f5f7 !important;
}
.zen-resp-circle {
  border-color: #f4f5f7 !important;
}
.zen-resp-circle.inhale {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ===== Cycle 7: Cumulative Layout Shift (CLS) Matrix ===== */
svg {
  min-width: 1em;
  min-height: 1em;
  transform-origin: center center;
}
svg[viewBox^="0 0 24"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 32"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 128"] { aspect-ratio: 1 / 1; }
svg[viewBox^="0 0 100"] { aspect-ratio: 1 / 1; }

.burnout-canvas {
  aspect-ratio: 375 / 120;
  width: 100%;
}
.biomech-canvas {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.pr-card-canvas {
  aspect-ratio: 1200 / 630;
  width: 100%;
  height: auto;
}
.fatigue-heatmap {
  min-height: 80px;
}

.tool-card,
.pricing-card,
.price-card,
.choose-card,
.atlas-card,
.gym-mode-card,
.context-passport-card,
.repdeck-problem-card {
  contain: layout;
}

.atlas-visual-shell {
  contain: layout paint;
  aspect-ratio: 18 / 11;
  min-height: 160px;
}


/* Hardcoded reserved heights for metric cards to permanently mitigate CLS jitter */
.tool-card { min-height: 240px; }
.choose-card { min-height: 100px; }
.gym-mode-card { min-height: 140px; }
.context-passport-card { min-height: 80px; }
.repdeck-problem-card { min-height: 70px; }
.price-card, .pricing-card { min-height: 480px; }


/* ===== Cycle 8: Visual Decoupling ===== */
body.modal-open main#main-content,
body.session-active main#main-content,
body:has(.sidebar.open) main#main-content,
body:has(.cmdk-overlay.open) main#main-content,
body.modal-open .topnav,
body.session-active .topnav,
body:has(.sidebar.open) .topnav,
body:has(.cmdk-overlay.open) .topnav {
  filter: grayscale(100%) opacity(0.35) blur(3px) !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.modal-open #sidebar:not(.open),
body.session-active #sidebar:not(.open),
body:has(.cmdk-overlay.open) #sidebar:not(.open) {
  filter: grayscale(100%) opacity(0.35) blur(3px) !important;
  pointer-events: none !important;
}

#main-content, .topnav, #sidebar {
  transition: filter 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
  will-change: filter, opacity;
}


/* ===== Cycle 10: Z-Index Standardization ===== */
:root {
  --z-base: 10;
  --z-floating: 50;
  --z-modal: 100;
}

/* ===== Cycle 12: Granular Touch Target Expansion ===== */
button,
.btn,
[role="button"],
.nav-item,
.sidebar-item,
.seg-btn,
.pill-filter,
.filter-pill,
.chip,
summary,
.sidebar-toggle,
.sidebar-close {
  height: 44px !important;
  min-width: 44px !important;
}


/* ===== Cycle 13: System 1 Micro-Animations ===== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button, .btn, [role="button"], .pill-filter, .filter-pill, .card, .atlas-card, .choose-card, .tile {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s linear, border-color 0.2s linear, filter 0.2s linear;
    will-change: transform;
  }
  
  button:not(.seg-btn, .nav-item, .sidebar-item, .sidebar-toggle, .sidebar-close, .back-to-top):hover, 
  .btn:hover, 
  .pill-filter:hover,
  .filter-pill:hover {
    transform: scale(1.03) translateY(-1px);
    filter: brightness(1.15);
  }

  .card:hover, .atlas-card:hover, .choose-card:hover, .tile:hover {
    transform: scale(1.015) translateY(-2px);
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: no-preference) {
  button:not(.sidebar-toggle):active, .btn:active, [role="button"]:not(.sidebar-toggle):active, .pill-filter:active, .filter-pill:active, 
  .card:active, .atlas-card:active, .choose-card:active, .tile:active {
    transform: scale(0.97) translateY(0) !important;
    filter: brightness(0.9) !important;
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1), filter 0.1s linear !important;
  }
}

/* A11y: Prefers Reduced Motion Ultimate Override */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:hover, .btn:hover, .card:hover, .atlas-card:hover, .choose-card:hover, .tile:hover,
  button:active, .btn:active, .card:active, .atlas-card:active, .choose-card:active, .tile:active {
    transform: none !important;
  }
}



/* ====
   Biomechanical UI: Nitric Oxide Pump Cascade
   ==== */
body.pump-cascade-active {
  background: radial-gradient(circle at center, var(--surface-1, #14161c) 0%, rgba(255, 0, 128, 0.05) 100%) !important;
}

body.pump-cascade-active .card,
body.pump-cascade-active .panel {
  border-color: rgba(255, 0, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 10px rgba(255, 0, 255, 0.05);
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  animation: pulse-vascularity 2s infinite ease-in-out;
}

body.pump-cascade-active * {
  --text-brand: #ff00ff;
}

@keyframes pulse-vascularity {
  0% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 10px rgba(255, 0, 255, 0.05); border-color: rgba(255, 0, 255, 0.4); }
  50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.1); border-color: rgba(255, 0, 255, 0.8); }
  100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 10px rgba(255, 0, 255, 0.05); border-color: rgba(255, 0, 255, 0.4); }
}

/* ====
   Cycle 40 Directive: Glassmorphic Sidebar & Micro-Animations
==== */
.sidebar {
  background: rgba(7, 7, 10, 0.65) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-overlay {
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

.sidebar-toggle {
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-toggle:hover {
  box-shadow: 0 0 16px rgba(224, 178, 113, 0.35) !important;
  transform: scale(1.05) !important;
}

/* A11y Focus State Management */
:focus:not(:focus-visible) { outline: none !important; }

/* A11y: Vestibular Disorder Accessibility - Comprehensive Reduce Motion Override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

body[data-current-page="home"]{background:var(--bg-alt)!important;--text-soft:#eef5ff;color:#eef5ff!important}
body[data-current-page="home"] :is(.choose-card,.home-title-main,.home-subtitle,h1,h2,h3,strong,p,.wc-foot,.cal-foot,.footer-line){color:#eef5ff!important}
body[data-current-page="home"] :is(.home-route-strip,.repdeck-floor-pass){border-color:#f8fbff1a!important;background:#10111466!important}
body[data-current-page="home"] .choose-card{background:var(--bg)!important;border-color:#f8fbff14!important}


/* FORCE DARK THEME READABILITY FOR QA TESTS */
body[data-current-page="home"] :is(.home-subtitle, .home-rotator-line, .choose-card p, .wc-foot, .cal-foot, .footer-line) {
  color: #eef5ff !important;
}


/* P1 fold receipt: desktop must expose first action without scroll. */
@media (min-width: 1025px) and (min-height: 700px) {
  body[data-current-page="home"] .home-intro {
    padding-top: clamp(32px, 4vw, 46px) !important;
  }

  body[data-current-page="home"] .home-wordmark,
  body[data-current-page="home"] .home-title-lockup {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body[data-current-page="home"] .home-title-main {
    max-width: 12ch !important;
    font-size: clamp(3.2rem, 5vw, 3.72rem) !important;
    line-height: 0.9 !important;
  }

  body[data-current-page="home"] .home-subtitle {
    max-width: 780px !important;
    margin-bottom: 6px !important;
    font-size: 1.12rem !important;
    line-height: 1.12 !important;
  }

  body[data-current-page="home"] .home-rotator-line {
    display: none !important;
  }

  body[data-current-page="home"] .home-primary-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }
}


/* ============================================================
   B10 STRUCTURED PLAN GLASS — .glass-card / .hover-lift
   (blueprint_structured_plan.md, corrected to committed guards:
   explicit transition properties — `transition: all` is stylelint-
   banned; hover motion reduced-motion-gated; cyan kept to the
   Newtonian applied-force accent on the dark cockpit only.)
============================================================ */
.glass-card {
  background: rgba(20, 20, 22, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.hover-lift {
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .hover-lift:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .hover-lift:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   B10: STRUCTURED PLAN UI CARDS
   Glassmorphism, dynamic typography, and micro-animations
   ============================================================ */

.plan-day-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 12px);
  padding: 24px;
  margin-bottom: 24px;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.4);
  color: var(--text, #f4f5f7);
  will-change: transform;
}

.plan-day-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), 
              0 0 20px rgba(37, 99, 235, 0.15);
}

@media (prefers-reduced-motion: no-preference) {
  .plan-day-card:hover {
    transform: scale(1.01) translateY(-4px);
  }
}

/* Dynamic Typography */
.plan-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.plan-day-title {
  font-family: var(--f-display, "Outfit", sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff, #a4a8b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-day-note {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 0.95rem;
  color: var(--text-dim, #9297b0);
  font-style: italic;
  margin-top: 8px;
  max-width: 90%;
}

/* Exercise Grid Layout */
.plan-exercise-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.plan-ex-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.plan-ex-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Physics-based micro-animations (Aesthetic Ratchet) */
.plan-ex-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue, #2563eb);
  box-shadow: 0 0 12px var(--blue, #2563eb);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .plan-ex-card:hover::before {
    transform: scaleY(1);
  }
}

/* Typography & Structure for Exercises */
.plan-ex-name {
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-warm, #e0b271);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-ex-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  margin-bottom: 14px;
}

.plan-ex-metric {
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text-muted, #a4a8b9);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-ex-metric strong {
  color: var(--text, #f4f5f7);
  font-weight: 600;
}

/* Extended Kinesiology / Sub data */
.plan-ex-details {
  font-size: 0.9rem;
  color: var(--text-dim, #9297b0);
  line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.plan-ex-detail-row {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
}

.plan-ex-label {
  color: var(--text-muted, #a4a8b9);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 65px;
  margin-right: 8px;
  margin-top: 3px;
}

.plan-ex-value {
  flex: 1;
}
/* Phase 200: Biomechanical Vector Physics Matrix */
.biomechanical-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.vector-arrow { position: absolute; width: 2px; background: var(--ecc-force-vector-gravity, #ff0000); transform-origin: top center; transition: transform 0.2s ease-out; }
.vector-arrow.effort { background: var(--ecc-force-vector-effort, #60a5fa); }
.degree-label { position: absolute; font-family: var(--f-mono); font-size: 0.75rem; color: var(--text); background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-bright); text-shadow: 0 0 8px rgba(96,165,250,0.8); box-shadow: 0 0 12px rgba(96,165,250,0.2); }

/* Metabolic Pathway System 1 Excitatory Glows */
.pathway-atpcp:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 0 0 1px var(--ecc-accent-kinetic, rgba(37, 99, 235, 0.45)), 0 12px 30px var(--ecc-accent-kinetic-glow, rgba(37, 99, 235, 0.18)); }
.pathway-glycolytic:hover { transform: scale(1.02); box-shadow: 0 0 0 1px var(--ecc-accent-warning, rgba(245, 158, 11, 0.45)), 0 8px 24px rgba(245, 158, 11, 0.15); }

/* Progress Ticker Momentum */
.progress-ticker { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.ticker-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.ticker-fill { height: 100%; background: var(--green-glow, #10b981); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.ticker-count { font-family: var(--f-mono); font-size: 0.8rem; color: var(--green-light, #34d399); text-align: right; }

/* Hicks Law / Cognitive Friction */
.hicks-law-hidden { opacity: 0 !important; pointer-events: none !important; position: absolute !important; visibility: hidden !important; }

/* Pricing Dual-Grid Consolidation */
@media (min-width: 768px) {
  .pricing-grid[data-pricing-grid='current-access'] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
  }
}

/* ==========================================================================
   Phase 38: Dual-Process Theory 3D Transformations & Hick's Law CSS
   ========================================================================== */

/* System 1: Intuitive Premium Micro-Animations */
.exercise-card, .btn-log {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              background-color 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.exercise-card:hover, .btn-log:hover {
  transform: perspective(1000px) scale(1.02) rotateX(2deg) translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 
              0 5px 15px rgba(96, 165, 250, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.exercise-card:active, .btn-log:active {
  transform: perspective(1000px) scale(0.98) rotateX(0deg) translateY(1px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 
              0 2px 5px rgba(96, 165, 250, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .exercise-card, .btn-log {
    transition: none !important;
    transform: none !important;
  }
}

/* Cognitive Focus Trap (Hick's Law / System 1 Focus) */
body.focus-trap-active > *:not(.system2-drawer-active):not(.focus-trap-exempt) {
  filter: blur(20px) brightness(0.6);
  pointer-events: none;
  user-select: none;
  transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.focus-trap-active {
  overflow: hidden;
  background-color: #050505;
}

body > * {
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* System 2: Analytical Drawer ($500/mo Biotech Terminal) */
.system2-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid rgba(96, 165, 250, 0.3);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5), 
              inset 1px 0 0 rgba(96, 165, 250, 0.1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  color: #e2e8f0;
  font-family: var(--f-mono, "JetBrains Mono", "SF Mono", Consolas, monospace);
  transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s ease;
  overflow-y: auto;
}

.system2-drawer.active, .system2-drawer-active {
  right: 0;
  box-shadow: -30px 0 60px rgba(96, 165, 250, 0.05),
              -10px 0 20px rgba(0, 0, 0, 0.8),
              inset 1px 0 0 rgba(96, 165, 250, 0.4);
}

.system2-drawer header {
  border-bottom: 1px solid rgba(96, 165, 250, 0.15);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.system2-drawer h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}

.system2-drawer .data-stream {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #94a3b8;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.system2-drawer .data-stream-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.system2-drawer .data-stream-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: #60a5fa;
  box-shadow: 0 0 8px #60a5fa;
}


/* Phase 29: WebGPU Coach Widget */
.coach-widget-container { position:fixed; bottom:24px; right:24px; z-index:3000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.coach-widget-toggle { width:48px; height:48px; border-radius:50%; background:var(--panel); border:1px solid var(--line, #222732); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 20px rgba(0,0,0,0.5); }
.coach-node-icon { width:24px; height:24px; }
.coach-window { display:none; width:320px; flex-direction:column; background:rgba(5,10,16,0.85);  border-radius:12px; padding:16px; box-shadow:0 0 30px rgba(96,165,250,0.15); }
.coach-window.open { display:flex; animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1); }
.coach-header { font-size:0.75rem;  font-family:monospace; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid rgba(96,165,250,0.2); padding-bottom:8px; }
.coach-chat-stream { flex:1; min-height:120px; max-height:240px; overflow-y:auto; font-size:0.85rem; color:var(--text); margin-bottom:12px; font-family:monospace; }
.coach-chat-input { width:100%; background:transparent; border:1px solid var(--line, #222732); border-radius:6px; padding:8px 12px; color:var(--text); font-family:monospace; font-size:0.85rem; outline:none; }
.coach-chat-input:focus {  box-shadow:0 0 10px rgba(96,165,250,0.2); }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .minimap-dot:hover,
  .assistant-toggle:hover,
  .card-mock:hover,
  .brand:hover .brand-mark svg,
  .pathway-atpcp:hover,
  .pathway-glycolytic:hover {
    transform: none !important;
  }
}