/* ================================================================
   RevPIQ (v5) - Mockup 5: The Training Ground, for both audiences
   Light theme: the page is light; the crest band and product
   screens (call, team board, progress panel) stay dark via .ui-dark.
   Idea: the crest's gold cross becomes the page's grid.
   v2 adds the example call (from Two Tracks) and the scorecard,
   score bands, team board and team tools (from The Scoreboard).
   Original note: The hero
   crest drops a gold spine into a navy, four-quarter section that
   mirrors the shield: Learn · Sell · Grow · Train.
   ================================================================ */

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 18%, var(--hero-glow), transparent 70%),
    var(--bg-page);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
}
.hero-crest {
  width: clamp(128px, 15vw, 196px);
  margin-bottom: var(--s-4);
  filter: var(--crest-shadow);
  animation: crestIn 700ms var(--ease-out) both;
}
.hero h1 {
  max-width: 15ch;
  animation: riseIn 600ms var(--ease-out) 150ms both;
}
.hero .lead {
  max-width: 58ch;
  animation: riseIn 600ms var(--ease-out) 250ms both;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.hero .hero-cta { animation: riseIn 600ms var(--ease-out) 350ms both; }

/* The gold spine: the crest's vertical bar, continued down the page */
.hero-spine {
  width: 2px;
  height: clamp(64px, 9vw, 120px);
  margin: clamp(40px, 6vw, 72px) auto 0;
  background: linear-gradient(180deg, transparent, var(--gold-crest));
  transform-origin: top;
  animation: drawDown 700ms var(--ease-out) 650ms both;
}

@keyframes crestIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes drawDown {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ---------------- The four quarters ---------------- */
.quarters {
  position: relative;
  background: var(--bg-crest);
  border-top: 2px solid var(--gold-crest);
  border-bottom: 2px solid var(--gold-crest);
}
.quarters-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wrap);
  margin-inline: auto;
}
/* the cross */
.quarters-grid::before,
.quarters-grid::after {
  content: '';
  position: absolute;
  background: var(--gold-crest);
  pointer-events: none;
}
.quarters-grid::before { left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; }
.quarters-grid::after { top: calc(50% - 1px); left: var(--gutter); right: var(--gutter); height: 2px; }

.quarter {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4.5vw, 64px);
}
.q-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.quarter h3 {
  font-size: clamp(2rem, 1.5rem + 1.7vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.q-claim {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.quarter p:not(.q-claim) { color: #c3c7da; max-width: 46ch; }

@media (max-width: 760px) {
  .quarters-grid { grid-template-columns: minmax(0, 1fr); }
  .quarters-grid::before,
  .quarters-grid::after { display: none; }
  .quarter + .quarter { border-top: 2px solid var(--gold-crest); }
  .quarter { padding-inline: var(--gutter); }
}

/* ---------------- Session ---------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 22px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-40), var(--line) 85%);
}
.step { position: relative; display: grid; gap: var(--s-3); align-content: start; }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-2);
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: 1rem;
  font-weight: 600;
}
.step h3 { font-size: 1.5rem; }
.step p { font-size: 1rem; }

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .steps::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; background: var(--gold-40); }
  .step { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-5); }
  .step-n { grid-row: span 2; margin: 0; }
}

.grade {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 700;
}
.grade-gold { color: var(--accent-text); background: var(--gold-12); border: 1px solid var(--gold-25); }

/* ---------------- Scenarios ---------------- */
.drills { background: var(--bg-1); border-block: 1px solid var(--line-subtle); }
.drills-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.drills-head { position: sticky; top: 100px; margin-bottom: 0; }
.drill-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-2) var(--s-6);
  align-items: baseline;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.drill-list li:last-child { border-bottom: 1px solid var(--line); }
.drill-list h3 { font-size: 1.375rem; }
.drill-list p { font-size: 1rem; }

@media (max-width: 900px) {
  .drills-inner { grid-template-columns: minmax(0, 1fr); }
  .drills-head { position: static; }
}
@media (max-width: 560px) {
  .drill-list li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Progress ---------------- */
.log-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.log-copy { display: grid; gap: var(--s-5); }
.log-panel {
  display: grid;
  gap: var(--s-6);
  padding: clamp(20px, 3.5vw, 36px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
}
.log-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-1) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg-1)) 100%);
}
.log-rating-n { font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); font-weight: 600; color: var(--accent-text); line-height: 1; }
.log-rating-l { color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; }
.log-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.log-stats div { padding: var(--s-4); border: 1px solid var(--line-subtle); border-radius: var(--r-md); background: var(--bg-2); }
.log-stats dt { color: var(--ink-3); font-size: 0.8125rem; }
.log-stats dd { margin: var(--s-1) 0 0; font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.streak {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  justify-content: start;
}
.streak i {
  display: block;
  width: clamp(12px, 1.6vw, 18px);
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--bg-3);
}
.streak i[data-l='1'] { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.streak i[data-l='2'] { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.streak i[data-l='3'] { background: var(--gold); }
.log-caption { color: var(--ink-3); font-size: 0.8125rem; }

@media (max-width: 900px) {
  .log-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .log-stats { grid-template-columns: minmax(0, 1fr); }
}


/* ================================================================
   Merged from Two Tracks: the example call
   ================================================================ */
.call { background: var(--bg-1); border-block: 1px solid var(--line-subtle); }
/* ---------------- Example call ---------------- */
.demo-head { max-width: 760px; }

.sim {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.sim-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-page);
}
.sim-who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.sim-who > span:last-child { display: grid; min-width: 0; }
.sim-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--orange-12);
  color: var(--orange);
  font-weight: 700;
}
.sim-name { font-weight: 700; line-height: 1.2; }
.sim-role { color: var(--ink-3); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-timer {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
}
.sim-replay { justify-self: end; }

.sim-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  min-height: 420px;
}
.sim-chat {
  margin: 0;
  padding: var(--s-6) clamp(16px, 3vw, 32px);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.line { display: grid; gap: var(--s-1); max-width: 72ch; }
.line p { color: var(--ink); max-width: none; font-size: 1rem; }
.speaker { font-size: 0.8125rem; font-weight: 700; }
.line.buyer .speaker { color: var(--orange); }
.line.rep .speaker { color: var(--green); }
.line.rep p { color: #d7f5ea; }

.sim.is-scripted .line:not(.is-shown):not(.typing),
.sim.is-scripted .tip:not(.is-shown) { display: none; }
.line.is-shown,
.tip.is-shown { animation: lineIn var(--t-slow) var(--ease-out) both; }
@keyframes lineIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.dots { display: inline-flex; gap: 5px; padding: var(--s-2) 0; }
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.4;
  animation: dot 1.2s var(--ease) infinite;
}
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.sim-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border-left: 1px solid var(--line-subtle);
  background: var(--bg-page);
}
.rail-title { color: var(--ink-3); font-size: var(--fs-small); font-weight: 700; }
.tip {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--gold-25);
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.tip p { font-size: 0.9375rem; color: var(--ink); }
.tip p + p { margin-top: 0; }
.tip .tip-tag { color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; }
.tip-good { border-color: rgba(52, 211, 153, 0.25); }
.tip-good .tip-tag { color: var(--green); }

.sim-compose {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line-subtle);
  background: var(--bg-page);
}
.sim-mic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.sim-input {
  flex: 1;
  min-width: 0;
  padding: 10px var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--ink-3);
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sim-send {
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--gold);
  color: var(--ink-on-gold);
  font-weight: 700;
  font-size: 0.9375rem;
}
.sim-note { margin-top: var(--s-4); color: var(--ink-3); font-size: var(--fs-small); }

@media (max-width: 860px) {
  .sim-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sim-chat { min-height: 380px; }
  .sim-rail { border-left: 0; border-top: 1px solid var(--line-subtle); }
  .sim-top { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-replay { grid-column: 1 / -1; justify-self: stretch; }
}


/* ================================================================
   Merged from The Scoreboard: scorecard, bands, team board, tools
   ================================================================ */
/* ---------------- Board ---------------- */
.board {
  scroll-margin-top: 90px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line-subtle);
}
.board-title { font-size: 1.125rem; letter-spacing: -0.01em; }
.board-meta { color: var(--ink-3); font-size: var(--fs-small); }

.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Leaderboard */
.ladder { padding: var(--s-3) clamp(8px, 2vw, 16px) var(--s-5); }
.ladder-head,
.row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 72px 64px 52px 52px;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
}
.ladder-head {
  min-height: 40px;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
}
.r { text-align: right; justify-self: end; }
.ladder-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.row {
  width: 100%;
  min-height: 60px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.row:hover { background: rgba(255, 255, 255, 0.035); }
.row[aria-pressed='true'] { background: var(--bg-2); border-color: var(--gold-25); }
.row[aria-pressed='true'] .rank { color: var(--accent-text); }
.rank { color: var(--ink-3); font-size: 0.9375rem; }
.row .rep { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rep-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rating { font-size: 1rem; font-weight: 600; }
.delta { font-size: 0.875rem; }
.delta.up { color: var(--green); }
.delta.down { color: var(--ink-3); }
.last {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 560px) {
  .ladder-head,
  .row { grid-template-columns: 20px minmax(0, 1fr) 54px 44px 40px; gap: var(--s-2); padding: 0 var(--s-2); }
  .hide-s { display: none; }
  .avatar { display: none; }
  .last { width: 32px; height: 32px; }
}

/* Side: matrix + focus */
.board-side {
  display: grid;
  gap: var(--s-6);
  align-content: start;
  padding: var(--s-6) clamp(16px, 3vw, 28px) var(--s-8);
  border-left: 1px solid var(--line-subtle);
  background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 980px) {
  .board-side { border-left: 0; border-top: 1px solid var(--line-subtle); }
}

.mini-matrix { display: grid; gap: var(--s-2); }
.mm-plot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 1.6 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.mm-q {
  display: block;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
}
.mm-dot {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 12px;
  height: 12px;
  margin: 0 0 -6px -6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.18);
  transition: left 900ms var(--ease-out), bottom 900ms var(--ease-out), background var(--t-fast), transform var(--t-fast);
}
.is-placed .mm-dot { left: var(--x); bottom: var(--y); }
.mm-dot.is-active {
  z-index: 2;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-25), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: scale(1.25);
}
.mm-label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}
.mm-dot.is-active .mm-label { opacity: 1; }
.mm-axes {
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.75rem;
}
.mm-axes span:first-child::after { content: ' increases to the right'; }
.mm-axes span:last-child::after { content: ' increases upwards'; }

.focus { display: grid; gap: var(--s-4); }
.focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.focus-name { color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.focus-mode {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--blue-12);
  border: 1px solid rgba(79, 143, 247, 0.3);
  color: var(--blue-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}
.focus-advice { font-size: 0.9375rem; min-height: 4.8em; }

.hf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-2);
}
.hf li {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--ink-2);
}
.hf-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------------- Section heads ---------------- */
.split-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-4) clamp(32px, 6vw, 80px);
}
@media (max-width: 860px) {
  .split-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Scorecard ---------------- */
.scorecard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sc-item {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-8) clamp(16px, 3vw, 36px) var(--s-10);
}
.sc-item + .sc-item { border-left: 1px solid var(--line); }
.sc-item h3 { font-size: 1.375rem; }
.sc-item p { font-size: 1rem; }
.sc-figure {
  display: flex;
  align-items: center;
  height: 150px;
  margin-bottom: var(--s-3);
}
.ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--bg-3) 0);
  display: grid;
  place-items: center;
}
.ring-inner {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--bg-page);
  display: grid;
  place-items: center;
}
.ring-n { font-size: 2.75rem; font-weight: 600; color: var(--band-4); }
.sc-count .num {
  font-size: clamp(5rem, 3.6rem + 3.4vw, 7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.hf-static { grid-template-columns: repeat(4, 56px); gap: var(--s-2); }

@media (max-width: 860px) {
  .scorecard { grid-template-columns: minmax(0, 1fr); }
  .sc-item + .sc-item { border-left: 0; border-top: 1px solid var(--line); }
  .sc-item { padding-inline: 0; }
  .sc-figure { height: auto; }
}

/* Bands */
.bands { display: grid; gap: var(--s-4); margin-top: clamp(40px, 6vw, 72px); }
.bands-title { font-size: 1.375rem; }
.bands-bar { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.bands-bar li { flex: var(--w) 1 0; display: grid; gap: var(--s-2); min-width: 0; }
.bands-bar li::before { content: ''; height: 14px; border-radius: 3px; background: var(--c); }
.bands-bar .num { color: var(--ink-2); font-size: 0.8125rem; white-space: nowrap; }
.bands-note { font-size: 1rem; color: var(--ink-3); }
@media (max-width: 640px) {
  .bands-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) 3px; }
}


/* ---------------- Leaders ---------------- */
.leaders { border-top: 2px solid var(--gold-crest); }
.leaders-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-8) clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.leaders-head h2 { max-width: 16ch; }
.leaders-side { display: grid; gap: var(--s-6); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tools-block { margin-top: clamp(64px, 9vw, 112px); }
.tools-title { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.08; }
@media (max-width: 900px) {
  .leaders-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Tools ---------------- */
.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  margin: 0;
}
.tools div { padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); }
.tools dt { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--s-2); }
.tools dd { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 860px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .tools { grid-template-columns: minmax(0, 1fr); } }


/* ---------------- Close ---------------- */
.close {
  padding-block: clamp(60px, 8vw, 116px);
  border-top: 2px solid var(--gold-crest);
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg-page);
}
.close-inner { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
.close-inner img { width: 56px; }

/* v4: the crest band is brand indigo in both themes, with yellow. */
.quarters { background: var(--indigo); }

/* ---------------- Streamed AI text (v4) ----------------
   Buyer replies and Jim's tips type out word by word, with a cursor
   while they stream, as in the real simulation. */
.stream { white-space: pre-wrap; }
.is-streaming .stream::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  border-radius: 2px;
  background: var(--accent);
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ================================================================
   Option 5: The Training Ground, for both audiences
   Salespeople and sales leaders get equal weight everywhere: the
   same card in the hero, the same section pattern, the same gold CTA.
   Each audience has its own colour from the app: green for
   salespeople (the rep's voice), blue for leaders (information).
   ================================================================ */
.aud,
.tag-sell,
.close-door.aud-sell { --aud: var(--green); --aud-12: var(--green-12); }
.aud-lead,
.tag-lead,
.close-door.aud-lead { --aud: var(--blue); --aud-12: var(--blue-12); }

.aud-tag {
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--aud-12);
  color: var(--aud);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Hero: two equal audience cards under one headline */
.audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: clamp(32px, 5vw, 56px);
}
.aud {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--aud);
  border-radius: var(--r-lg);
  text-align: left;
}
.aud h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); max-width: 18ch; }
.aud > p { font-size: 1rem; }
.aud-points { display: grid; gap: var(--s-2); }
.aud-points li { position: relative; padding-left: var(--s-6); color: var(--ink-2); font-size: 0.9375rem; }
.aud-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--aud);
}
.aud-cta {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}
.aud-more {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.aud-more:hover { color: var(--ink); text-decoration-color: currentColor; }

@media (max-width: 820px) {
  .audiences { grid-template-columns: minmax(0, 1fr); }
}

/* Audience sections: the same header pattern for both */
.audience { border-top: 2px solid var(--accent); }
.aud-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-8) clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.aud-head-main { display: grid; gap: var(--s-4); }
.aud-head-main h2 { max-width: 16ch; }
.aud-head-side { display: grid; gap: var(--s-6); }
@media (max-width: 900px) {
  .aud-head { grid-template-columns: minmax(0, 1fr); }
}

.aud-list { margin: 0; display: grid; }
.aud-list div { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.aud-list div:last-child { border-bottom: 1px solid var(--line); }
.aud-list dt {
  margin-bottom: var(--s-1);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.aud-list dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

.sub-block { margin-top: clamp(56px, 8vw, 96px); }
.sub-title {
  font-size: var(--fs-h2);
  font-weight: 750;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

/* Close: two equal doors */
.close-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  width: 100%;
  max-width: 900px;
  margin-top: var(--s-2);
}
.close-door {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--aud);
  border-radius: var(--r-lg);
}
.close-door h3 { font-size: 1.4rem; }
.close-door p { font-size: 0.9375rem; }
.close-door .btn { margin-top: var(--s-2); }
@media (max-width: 720px) {
  .close-dual { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   v6: stakeholder copy (14 Oct draft)
   ================================================================ */

/* Hero headline is now the brand line, which runs longer */
.hero h1 { max-width: 20ch; }

/* Quarters: settings list and closing line */
.quarter p + p { margin-top: 0; }
.q-specs { display: grid; gap: var(--s-1); margin: 0; }
.q-specs div { display: flex; gap: var(--s-3); align-items: baseline; }
.q-specs dt { min-width: 6.5em; color: var(--accent); font-weight: 700; font-size: 0.9375rem; }
.q-specs dd { margin: 0; color: #c3c7da; font-size: 0.9375rem; }
.q-kicker {
  color: var(--accent) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}

/* Competency Framework card: an abstract breakdown, not real data */
.fw-bars { display: grid; gap: 9px; width: min(100%, 220px); }
.fw-bars li {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c) calc(var(--v) * 1%), var(--bg-3) 0);
}

/* Full sales cycle: the stages in order */
.stage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.stage-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stage-list .num { color: var(--ink-3); font-size: 0.875rem; font-weight: 500; }
@media (max-width: 560px) {
  .stage-list { grid-template-columns: minmax(0, 1fr); }
}

/* Leaders: "Select your Coach. Create your Coach." */
.coach-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8) clamp(32px, 6vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 80px);
}
.coach-copy { display: grid; gap: var(--s-4); }
@media (max-width: 900px) {
  .coach-block { grid-template-columns: minmax(0, 1fr); }
}

/* Team board: recommendation under the read of the rep */
.focus-advice { min-height: 0; }
.focus-rec { font-size: 0.9375rem; color: var(--ink); }
.focus-rec strong { color: var(--accent); }

/* ================================================================
   v7: real app screenshots (19 Oct)
   ================================================================ */

/* ---------- Screenshot frame: the app as it really looks ---------- */
.screen-fig { margin: 0; display: grid; gap: var(--s-4); }
.screen-fig figcaption { color: var(--ink-3); font-size: var(--fs-small); max-width: 64ch; }
.screen-stack { position: relative; }
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #13151f;
  box-shadow: var(--shadow-panel);
  cursor: zoom-in;
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { transform: translateY(-2px); }
.shot:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.shot-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(19, 21, 31, 0.82);
  color: #f0f0f3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.shot:hover .shot-zoom,
.shot:focus-visible .shot-zoom { opacity: 1; }
@media (hover: none) { .shot-zoom { opacity: 1; } }

/* Inset close-ups that overlap the main screen (desktop) */
.shot-inset {
  position: absolute;
  z-index: 2;
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(10, 12, 20, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.inset-tall   { width: 21%; right: -2%; bottom: -10%; }
.inset-square { width: 25%; right: -2%; bottom: -8%; }
.inset-wide   { width: 42%; right: -2%; bottom: -10%; }
.inset-strip  { width: 58%; left: 4%; bottom: -24px; border-radius: var(--r-pill); }
.screen-sim, .screen-prep, .screen-review { padding-bottom: clamp(24px, 6vw, 72px); }
.screen-progress { padding-bottom: 0; }
.screen-progress figcaption { margin-top: 28px; }

/* Tall panels show their top part; the full screen opens on click */
.screen-review .shot:not(.shot-inset) img,
.screen-progress .shot:not(.shot-inset) img { max-height: 640px; object-fit: cover; object-position: top; }

@media (max-width: 700px) {
  .screen-progress figcaption { margin-top: 0; }
  /* Insets stop overlapping and sit under the main screen */
  .shot-inset { position: relative; inset: auto; width: 100%; margin-top: var(--s-4); }
  .inset-tall { width: 62%; margin-inline: auto; }
  .inset-square { width: 72%; margin-inline: auto; }
  .inset-strip { width: 100%; border-radius: var(--r-md); }
  .screen-sim, .screen-prep, .screen-review, .screen-progress { padding-bottom: 0; }
  .screen-review .shot:not(.shot-inset) img,
  .screen-progress .shot:not(.shot-inset) img { max-height: 420px; }
}

/* ---------- Session tour: steps on the left drive the screen on the right ---------- */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.tour .steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
}
.tour .steps::before { display: none; }
.tour .step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  align-items: center;
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tour .step:hover { background: var(--hover); }
.tour .step[aria-selected='true'] { background: var(--bg-1); border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(20, 18, 46, 0.06); }
.tour .step .step-n {
  grid-row: 1;
  margin: 0;
  background: var(--bg-2);
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tour .step[aria-selected='true'] .step-n { background: var(--accent); color: var(--ink-on-accent); }
.step-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.step-text { grid-column: 2; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
/* Only the selected step shows its full description on wide screens */
@media (min-width: 901px) {
  .tour .step[aria-selected='false'] .step-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink-3);
  }
  .stage { position: sticky; top: 92px; }
}
@media (max-width: 900px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
  .tour .step { padding: var(--s-3); }
}

/* ---------- Dashboard screen in the professionals section ---------- */
.screen-dashboard { align-self: center; }

/* ---------- Leaders: segmented tabs over the real screens ---------- */
.lead-screens { display: grid; gap: var(--s-5); }
.segs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-1);
}
.seg {
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.seg:hover { color: var(--ink); }
.seg[aria-selected='true'] { background: var(--blue-12); color: var(--blue-ink); box-shadow: inset 0 0 0 1px var(--blue); }
.screen-profile { justify-items: center; text-align: center; }
.screen-profile .shot { max-width: 880px; }
.screen-profile .shot img { max-height: 720px; object-fit: cover; object-position: top; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: min(1400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  background: #13151f;
  overflow: auto;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(8, 9, 14, 0.82); }
.lightbox-img { display: block; width: 100%; height: auto; }
.lightbox-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 12px 12px -56px 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(19, 21, 31, 0.9);
  color: #f0f0f3;
  cursor: pointer;
}
.lightbox-close:hover { background: #282b40; }