/* ============================================================
   site.css — JBC website (Phase 1)
   Imports the design system tokens. Never duplicates values.
   ============================================================ */

@import url('jeremy-bales-creative-design-system/project/colors_and_type.css');

/* ============================================================
   1. BASE
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--jb-env-0);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   2. ENVIRONMENT — persistent library photo behind everything
   library.png is static. No keyframes here. (Future addition.)
   ============================================================ */

.env-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.env-photo {
  position: absolute;
  inset: 0;
  background-image: url('jeremy-bales-creative-design-system/project/assets/environments/library.png');
  background-size: cover;
  background-position: center;
  filter: saturate(0.78) contrast(0.95) brightness(0.82);
  transition: filter 500ms ease;
}

.diagnostic-panel.is-open ~ * .env-photo,
body.panel-open .env-photo {
  filter: saturate(0.6) contrast(0.9) brightness(0.7) blur(4px);
}

.env-scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 21, 16, 0.72);
}

.env-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 240px 80px rgba(0, 0, 0, 0.7);
}

.env-grain {
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 30% 40%,
    var(--jb-env-grain) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* ============================================================
   3. NAV — fixed, transparent, sits above panel
   z-index: 50 (panel is 40, modal scrim is 100)
   ============================================================ */

.jb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-bottom-color 0.4s ease, backdrop-filter 0.4s ease;
}

.jb-header--scrolled {
  background: rgba(14, 17, 13, 0.78);
  border-bottom-color: var(--jb-rule-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.jb-logo {
  display: inline-flex;
  align-items: center;
}

.jb-logo img {
  height: 40px;
  display: block;
}

.jb-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-2);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-slow);
}

.nav-item:hover {
  color: var(--jb-green);
}

/* Hamburger — hidden on desktop, shown on mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-hamburger__line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--jb-fg-1);
  transition: transform var(--dur-base) var(--ease-slow),
              opacity var(--dur-base) var(--ease-slow);
}

/* X state when menu is open */
.jb-header.menu-open .nav-hamburger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.jb-header.menu-open .nav-hamburger__line:nth-child(2) {
  opacity: 0;
}
.jb-header.menu-open .nav-hamburger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu — full-width panel below nav */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 72px; /* clears the nav bar */
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--jb-ink);
  border-top: 1px solid var(--jb-rule-dark);
  border-bottom: 1px solid var(--jb-rule-dark);
  flex-direction: column;
  padding: 8px 0 16px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dur-base) var(--ease-slow),
    opacity var(--dur-base) var(--ease-slow);
}

.nav-mobile-menu[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile-item {
  display: block;
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-2);
  text-decoration: none;
  border-bottom: 1px solid var(--jb-rule-dark);
  transition: color var(--dur-base) var(--ease-slow);
}

.nav-mobile-item:last-child {
  border-bottom: none;
}

.nav-mobile-item:hover,
.nav-mobile-item:active {
  color: var(--jb-green);
}

.nav-mobile-item--cta {
  color: var(--jb-green);
  margin-top: 8px;
}

.nav-mobile-item--cta::after {
  content: " →";
}

/* ============================================================
   4. BUTTONS — only two flavors: ghost and solid
   ============================================================ */

.btn {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-slow);
  border-radius: var(--r-none);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--jb-green);
  color: var(--jb-green);
}

.btn--ghost:hover {
  background: var(--jb-green-soft);
}

.btn--solid {
  background: var(--jb-green);
  color: var(--jb-ink);
}

.btn--solid:hover {
  background: var(--jb-green-hover);
}

.btn--sm {
  padding: 10px 16px;
  font-size: var(--fs-micro);
  white-space: nowrap;
}

.btn .arrow,
.btn::after {
  transition: transform var(--dur-base) var(--ease-slow);
}

.btn:hover::after {
  transform: translateX(3px);
}

/* ============================================================
   5. HERO — full-viewport diagnostic entry
   Two-zone grid (42% left, 58% right empty for environment breathe)
   ============================================================ */

.jb-hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 56px;
  padding: 160px 64px 120px; /* extra bottom padding clears fixed footer */
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition:
    transform var(--dur-slow) var(--ease-slow),
    opacity var(--dur-base) var(--ease-slow);
}

.hero-content-exit {
  transform: translateY(-32px);
  opacity: 0;
  pointer-events: none;
}

.hero-reel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-reel-frame {
  position: relative;
  height: min(calc(100vh - 320px), 720px);
  aspect-ratio: 1080/1916;
  overflow: hidden;
  border: 1px solid var(--jb-rule-dark-strong);
}

.hero-reel-poster {
  position: absolute;
  inset: 0;
  background: #0e110d center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-reel-scrim {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px 24px rgba(14, 17, 13, 0.55);
  pointer-events: none;
  z-index: 1;
}

.hero-reel-play {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 17, 13, 0.6);
  border: 1px solid var(--jb-green);
  border-radius: 50%;
  color: var(--jb-fg-1);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-base), transform var(--dur-base) var(--ease-base);
}

.hero-reel-play:hover {
  background: var(--jb-green);
  transform: scale(1.08);
}

.hero-reel-play svg {
  margin-left: 3px; /* optical center for play triangle */
}

.hero-reel-video {
  position: absolute;
  inset: 0;
  display: none;
}

body.panel-open .hero-reel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-eyebrow {
  margin-bottom: 24px;
}

.hero-headline {
  font-size: clamp(28px, 3.2vw, 42px); /* setup text — subordinate to the question */
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-2); /* slightly receded — it's context, not the CTA */
  margin: 0 0 20px;
  text-wrap: balance;
}

.hero-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: var(--jb-fg-3);
  margin: 0 0 40px;
  max-width: 40ch;
}

.hero-quiz {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-quiz-label {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px); /* bigger than the headline above — this IS the action */
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  text-transform: none; /* Cormorant Garamond reads better in sentence case */
  color: var(--jb-fg-1);
  margin-bottom: 20px;
}

/* ============================================================
   6. CHOICE ROWS — shared style for homepage and panel
   .choice-btn  → homepage entry rows (data-goal)
   .dp-choice-btn → diagnostic panel rows (data-obstacle)
   Both classes mandatory because diagnostic.js queries each.
   ============================================================ */

.choice-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.choice-btn,
.dp-choice-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--jb-rule-dark);
  border-radius: var(--r-none);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.4;
  color: var(--jb-fg-1);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--dur-base) var(--ease-slow),
    padding-left var(--dur-base) var(--ease-slow);
}

.choice-btn:last-child,
.dp-choice-btn:last-child {
  border-bottom: 1px solid var(--jb-rule-dark);
}

.choice-btn span,
.dp-choice-btn span {
  flex: 1;
}

.choice-btn::after,
.dp-choice-btn::after {
  content: "→";
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--jb-green);
  margin-left: 16px;
  transition: transform var(--dur-base) var(--ease-slow);
}

.choice-btn:hover,
.dp-choice-btn:hover {
  color: var(--jb-green);
  padding-left: 4px;
}

.choice-btn:hover::after,
.dp-choice-btn:hover::after {
  transform: translateX(3px);
  color: var(--jb-green-hover);
}

/* ============================================================
   7. DIAGNOSTIC PANEL — transparent overlay, environment shows through
   Panel root is pointer-events: none so nav stays clickable.
   .dp-content is pointer-events: auto so the panel itself is interactive.
   ============================================================ */

.diagnostic-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-slow);
}

.diagnostic-panel.is-open {
  opacity: 1;
  pointer-events: auto; /* nav stays clickable at z-index 50; enables touch scroll on mobile */
}

/* Hide footer when panel is open — it bleeds through the transparent overlay */
.diagnostic-panel.is-open ~ #footer-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.dp-content {
  position: relative;
  pointer-events: auto;
  padding: 140px 64px 100px;
  max-width: 1280px;
  margin: 0 auto;
  animation: stageEnter var(--dur-slow) var(--ease-slow);
}

/* ============================================================
   8. BANNERS — preserved in JS, hidden by CSS
   Environment IS the visual context. (Future feature may re-enable.)
   ============================================================ */

.dp-banner-wrap {
  display: none;
}

/* ============================================================
   9. DIAGNOSTIC LAYOUT — two zones inside .dp-content
   Left: progress + dossier + step + headline + sub + (callout) + choices
   Right: case-study figure module on dusty paper
   ============================================================ */

.dp-layout {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 56px;
  align-items: start;
}

.dp-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(14, 21, 16, 0.45);
  padding: 32px;
}

.dp-right {
  position: relative;
  min-width: 0;
  transform: translate(8px, 4px);
  background: rgba(14, 21, 16, 0.62);
  border: 1px solid var(--jb-rule-dark);
  border-radius: var(--r-none);
  box-shadow: none;
  padding: 20px;
  color: var(--jb-fg-2);
}

/* FIG. 01 plate — rotated 90deg on outer edge of figure column */
.dp-right::after {
  content: "FIG. 01";
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--jb-fg-3);
  pointer-events: none;
}

/* Dark figure module — override all on-light text colors so they read on dark bg */
.dp-right .dp-cs-card {
  border-color: var(--jb-rule-dark);
  box-shadow: none;
  margin-bottom: 18px;
}

.dp-right .dp-cs-eyebrow-deliverables {
  color: var(--jb-fg-3);
}

.dp-right .dp-cs-title {
  color: var(--jb-fg-1);
}

.dp-right .dp-cs-story {
  color: var(--jb-fg-2);
}

.dp-right .dp-cs-client {
  color: var(--jb-fg-3);
}

.dp-right .dp-cs-playlist-btn {
  color: var(--jb-fg-3);
  border-color: var(--jb-rule-dark);
}

.dp-right .dp-cs-playlist-btn:hover {
  color: var(--jb-fg-1);
  border-color: var(--jb-rule-dark);
}

.dp-right .dp-cs-playlist-btn.is-active {
  color: var(--jb-green);
  border-color: var(--jb-green);
  background: transparent;
}

/* ============================================================
   9b. MOBILE TAB TOGGLE — "Your path" / "Case study" switcher
   Visible only on mobile (≤768px). Desktop always shows both columns.
   ============================================================ */

.dp-tabs {
  display: none; /* hidden on desktop — both columns always visible */
}

/* ============================================================
   10. PROGRESS DASHES — replaces dot pips
   Three short hairlines: pending (40% alpha), complete (full), active (green)
   ============================================================ */

.dp-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.dp-pip {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--jb-fg-4);
  opacity: 0.4;
  transition: all var(--dur-base) var(--ease-slow);
}

.dp-pip--active {
  background: var(--jb-green);
  opacity: 1;
}

.dp-pip--complete {
  background: var(--jb-fg-4);
  opacity: 1;
}

/* ============================================================
   11. DOSSIER + STEP TAG
   Dossier reads "Goal: ... · domain · obstacle" — small uppercase meta
   Step tag is uppercase green
   ============================================================ */

.dp-dossier {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  margin: 0 0 16px;
}

.dp-step-tag {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-green);
  margin: 0 0 16px;
}

/* ============================================================
   12. HEADLINE + SUB inside the panel
   ============================================================ */

.dp-headline {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-1);
  margin: 0 0 16px;
  text-wrap: balance;
}

.dp-subhead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-2);
  margin: 0 0 32px;
  max-width: 48ch;
}

/* ============================================================
   14. DIAGNOSTIC CHOICES container
   ============================================================ */

.dp-choices {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
}

/* (.dp-choice-btn rules live with .choice-btn in §6 — shared style) */

/* ============================================================
   15. CASE-STUDY FIGURE MODULE — dusty paper card on dark env
   Sharp corners, 1px hairline, subtle elevation, slight offset.
   The video iframe inside renders TRUE COLOR (modal-ish behavior).
   ============================================================ */

.dp-cs-eyebrow-client {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-green);
  margin: 0 0 8px;
}

.dp-cs-eyebrow-deliverables {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  margin: 0 0 16px;
}

.dp-cs-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--jb-env-0);
  border: 1px solid var(--jb-rule-light);
  border-radius: var(--r-none);
  overflow: hidden;
}

.dp-cs-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dp-cs-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dp-cs-play {
  width: 56px;
  height: 56px;
  opacity: 0.85;
  transition: transform var(--dur-base) var(--ease-slow), opacity var(--dur-base) var(--ease-slow);
}

.dp-cs-card:hover .dp-cs-play {
  transform: scale(1.04);
  opacity: 1;
}

/* ============================================================
   16. PLAYLIST SWITCHER — tab-style buttons in figure footer
   ============================================================ */

.dp-cs-playlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.dp-cs-playlist-btn {
  background: transparent;
  border: 1px solid var(--jb-rule-light);
  border-radius: var(--r-none);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta-tight);
  text-transform: uppercase;
  color: var(--jb-on-light-2);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-slow),
    color var(--dur-base) var(--ease-slow),
    background var(--dur-base) var(--ease-slow);
}

.dp-cs-playlist-btn:hover {
  border-color: var(--jb-rule-light-strong);
  color: var(--jb-on-light-1);
}

.dp-cs-playlist-btn.is-active {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-soft);
}

.dp-cs-client {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-on-light-3);
  margin: 0 0 4px;
}

.dp-cs-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-em);
  color: var(--jb-on-light-1);
  margin: 0 0 8px;
  line-height: 1.4;
}

.dp-cs-story {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  color: var(--jb-on-light-2);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   17. STAGE 3 TERMINAL — plan reveal, deliverables, package, email
   Single-column centered layout (~720px max width)
   ============================================================ */

.dp-terminal {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(14, 21, 16, 0.45);
}

.dp-terminal .dp-progress {
  margin-bottom: 32px;
}

.dp-plan-reveal {
  margin: 32px 0 32px;
}

.dp-plan-tag {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-green);
  margin: 0 0 12px;
}

.dp-plan-name {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-1);
  margin: 0 0 12px;
}

.dp-plan-diagnosis {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--jb-fg-2);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 56ch;
}

.dp-plan-what {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--jb-rule-dark);
  border-left: 1px solid var(--jb-green);
  background: rgba(225, 223, 217, 0.04);
}

.dp-plan-what-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  margin: 0 0 6px;
}

.dp-plan-what-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  color: var(--jb-fg-1);
  line-height: var(--lh-body);
  margin: 0;
}

.dp-plan-items {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--jb-rule-dark);
}

.dp-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--jb-fg-1);
  line-height: var(--lh-body);
}

.dp-plan-check {
  flex-shrink: 0;
  color: var(--jb-green);
  font-size: var(--fs-body-sm);
  margin-top: 1px;
}

.dp-package-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--jb-rule-dark);
  border-radius: var(--r-none);
  margin-bottom: 32px;
}

.dp-package-name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-em);
  color: var(--jb-fg-1);
  margin: 0 0 4px;
}

.dp-package-price {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  color: var(--jb-fg-3);
  margin: 0;
}

.dp-package-arrow {
  font-family: var(--font-body);
  font-size: var(--fs-display-sm);
  color: var(--jb-green);
}

/* Email gate */

.dp-email-copy {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--jb-fg-2);
  line-height: var(--lh-body);
  margin: 0 0 12px;
}

.dp-email-row {
  display: flex;
  gap: 0;
}

.dp-email-input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--jb-rule-light);
  border-right: 0;
  border-radius: var(--r-sm);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--jb-bg-light);
  color: var(--jb-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-slow);
}

.dp-email-input:focus {
  border-color: var(--jb-green);
}

.dp-email-input::placeholder {
  color: var(--jb-on-light-3);
}

.dp-email-btn {
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--jb-green);
  border-radius: var(--r-sm);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--jb-green);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-slow);
}

.dp-email-btn:hover:not(:disabled) {
  background: var(--jb-green-soft);
}

.dp-email-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.dp-email-btn::after {
  content: "→";
  margin-left: 12px;
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-slow);
}

.dp-email-btn:hover:not(:disabled)::after {
  transform: translateX(3px);
}

/* ============================================================
   18. FOOTER — fixed to viewport bottom, hairline top rule
   z-index: 25 — sits above env (0) and hero (5), below panel (40) and nav (50).
   When the diagnostic panel opens it covers the footer cleanly.
   ============================================================ */

.jb-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background: rgba(14, 17, 13, 0.96);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 64px;
  border-top: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-green);
}

.jb-footer span {
  flex: 1;
}

.jb-footer span:nth-child(2) {
  text-align: center;
}

.jb-footer span:last-child {
  text-align: right;
}

/* ============================================================
   19. STAGE TRANSITIONS — diagnostic.js applies these classes
   ============================================================ */

.dp-stage-exit {
  animation: stageExit 350ms var(--ease-slow) forwards;
}

.dp-stage-enter {
  animation: stageEnter 400ms var(--ease-slow) forwards;
}

@keyframes stageExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-32px); }
}

@keyframes stageEnter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   21. PHASE 2 ADDITIONS
   New classes for: stage question label, figure caption,
   terminal Zone A "why this matters", terminal Zone B package
   nodes + connectors, terminal Zone C CTA fork.
   All values from design tokens.
   ============================================================ */

/* --- 21.1 .dp-question — Cormorant question above choice rows --- */

.dp-question {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-display);
  line-height: var(--lh-display-loose);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-1);
  margin: 0 0 24px;
  text-transform: none;
  text-wrap: balance;
}

/* --- 21.2 .dp-figure-label — caption below the case-study figure --- */

.dp-figure-label {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-4);
  text-align: center;
}

/* --- 21.3 .dp-plan-why — Zone A "why this matters" paragraph --- */

.dp-plan-why {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-2);
  margin: 16px 0 0;
  max-width: 60ch;
}

/* --- 21.4 Zone B — package visualization (system flow) --- */

.dp-pkg-system {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 32px 0 48px;
  padding: 24px;
  border: 1px solid var(--jb-rule-dark);
  background: rgba(14, 21, 16, 0.45);
}

.dp-pkg-node {
  flex: 1 1 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 14px;
  border: 1px solid var(--jb-rule-dark);
  border-top: 2px solid var(--jb-rule-dark);
  border-radius: var(--r-none);
  background: rgba(14, 21, 16, 0.35);
  transition:
    border-color var(--dur-base) var(--ease-slow),
    background var(--dur-base) var(--ease-slow);
}

.dp-pkg-node--primary {
  border-top: 2px solid var(--jb-green);
  padding-top: 18px;
  padding-bottom: 18px;
}

.dp-pkg-node-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-1);
  line-height: 1.3;
}

.dp-pkg-node--primary .dp-pkg-node-label {
  color: var(--jb-green);
}

.dp-pkg-node-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-3);
}

.dp-pkg-connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  width: 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--jb-fg-4);
  line-height: 1;
  user-select: none;
}

/* --- 21.5 Zone C — CTA fork --- */

.dp-cta-fork {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--jb-rule-dark);
}

.dp-cta-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dp-cta-option-label {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-1);
  margin: 0 0 4px;
  text-wrap: balance;
}

.dp-cta-option-meta {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-3);
  margin: 0;
}

.dp-cta-or {
  align-self: center;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  flex: 0 0 auto;
  padding: 0 4px;
}

.dp-cta-direct {
  align-items: flex-start;
}

.dp-cta-direct-btn {
  align-self: flex-start;
  text-decoration: none;
}

/* Terminal max-width expanded so Zone B nodes have room */

.dp-terminal {
  max-width: 960px;
}

.dp-terminal .dp-step-tag {
  margin-bottom: 8px;
}

/* ============================================================
   20. MOBILE — ≤768px
   - Hero collapses to single column
   - Diagnostic layout collapses to single column (figure stacks below)
   - Nav simplifies: drop Work/Approach links, keep logo + CTA
   ============================================================ */



/* ============================================================
   23. PHASE 3 — DEPLOYMENT BLOCKS
   New classes for: terminal Zone B Thesis panel, terminal Zone C
   .dp-block stack with corner marks, plate, head, two-column body,
   annotations, plus all wireframe primitives for the nine block
   types (hero, email, evaluation, retargeting, onboarding, reach,
   ads, testimonial, upgrade).
   All values from design tokens. No hardcoded hex. No gradients.
   No rounded corners on structural elements.
   ============================================================ */

/* ---- 23.1 Zone B — Thesis panel ---------------------------- */

/* §B-new — Project Scope numbered rows (replaces dp-thesis) */
.dp-scope-block {
  margin: 28px 0 0;
}

.dp-scope-block-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  display: block;
  margin: 0 0 16px;
}

.dp-scope-rows {
  display: flex;
  flex-direction: column;
}

.dp-scope-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--jb-rule-dark);
}
.dp-scope-row:first-child { border-top: 1px solid var(--jb-rule-dark); }

.dp-scope-row__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--jb-green);
  letter-spacing: 0.04em;
}

.dp-scope-row__name {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 14px);
  font-weight: 500;
  color: var(--jb-fg-1);
  line-height: 1.4;
}

.dp-scope-row__spec {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--jb-fg-3);
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

.dp-scope-unlocks {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.dp-scope-unlocks__label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jb-green);
  white-space: nowrap;
  flex-shrink: 0;
}

.dp-scope-unlocks__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 14px);
  color: var(--jb-fg-2);
  line-height: 1.5;
}

/* keep old dp-thesis rules in case referenced elsewhere */
.dp-thesis {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  margin: 32px 0 40px;
  padding: 28px 32px;
  border: 1px solid var(--jb-rule-dark);
  background: rgba(20, 24, 19, 0.62);
}

.dp-thesis .t-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  display: block;
  margin: 0 0 10px;
}

.dp-thesis-strategy .t-label { color: var(--jb-green); }
.dp-thesis-scope    .t-label { color: var(--jb-fg-3); }

.dp-thesis-strategy p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-2);
  margin: 0 0 8px;
  max-width: 60ch;
}

.dp-thesis-scope {
  border-left: 1px solid var(--jb-rule-dark);
  padding-left: 28px;
}

.dp-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-scope-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--jb-fg-1);
}

.dp-scope-item:first-child { border-top: 0; }

.dp-scope-item .k { color: var(--jb-fg-1); }
.dp-scope-item .v { color: var(--jb-fg-3); font-variant-numeric: tabular-nums; }

/* ---- 23.2 Zone C — block stack container ------------------- */

.dp-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 0 40px;
}

/* ---- 23.3 .dp-block — one deployment block ----------------- */

.dp-block {
  position: relative;
  padding: 36px 40px;
  border: 1px solid var(--jb-rule-dark-strong);
  background: rgba(20, 24, 19, 0.78);
}

.dp-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(225,223,217,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225,223,217,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.45;
}

.dp-block > * { position: relative; z-index: 1; }

/* corner marks — four per block, positioned with .tl .tr .bl .br */
.dp-bc {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--jb-fg-3);
  z-index: 2;
}
.dp-bc.tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.dp-bc.tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.dp-bc.bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.dp-bc.br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* rotated plate, top-right edge */
.dp-block-plate {
  position: absolute;
  right: -24px;
  top: 32px;
  transform: rotate(90deg);
  transform-origin: top right;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--jb-fg-3);
  white-space: nowrap;
}

/* ---- 23.4 .dp-block-head ----------------------------------- */

.dp-block-head {
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-block-label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--jb-green);
  display: block;
  margin: 0 0 10px;
}

.dp-block-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-display);
  line-height: var(--lh-display-loose);
  letter-spacing: var(--ls-display-tight);
  color: var(--jb-fg-1);
  margin: 0 0 10px;
  text-wrap: balance;
}

.dp-block-title em {
  color: var(--jb-green);
  font-style: italic;
  font-weight: 600;
}

.dp-block-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--jb-fg-2);
  margin: 0;
  max-width: 56ch;
}

/* ---- 23.5 .dp-block-body — visual + notes ------------------ */

.dp-block-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.dp-block-visual { min-width: 0; }

.dp-block-notes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- 23.6 .dp-annot ---------------------------------------- */

.dp-annot {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-annot:last-child { border-bottom: 0; padding-bottom: 0; }

.dp-annot-pill {
  width: 24px;
  height: 24px;
  border: 1px solid var(--jb-green);
  color: var(--jb-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.dp-annot-nm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--jb-fg-1);
  margin-bottom: 4px;
  line-height: var(--lh-body);
}

.dp-annot-ds {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--jb-fg-2);
  line-height: var(--lh-body);
}

/* ---- 23.7 wireframe primitives — shared -------------------- */

.dp-wf-browser {
  border: 1px solid var(--jb-rule-dark-strong);
  background: rgba(14, 17, 13, 0.85);
}

.dp-wf-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--jb-rule-dark);
  background: rgba(14, 17, 13, 0.95);
}

.dp-wf-dots { display: flex; gap: 6px; }
.dp-wf-dots span {
  width: 8px;
  height: 8px;
  background: rgba(225, 223, 217, 0.18);
}

.dp-wf-url {
  flex: 1;
  padding: 4px 10px;
  background: rgba(225, 223, 217, 0.06);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--jb-fg-3);
}

.dp-wf-page {
  padding: 16px 20px;
  background: rgba(20, 24, 19, 0.55);
}

.dp-wf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jb-rule-dark);
  margin-bottom: 18px;
}

.dp-wf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--jb-fg-1);
}

.dp-wf-logo .sq {
  width: 12px;
  height: 12px;
  background: var(--jb-fg-1);
  display: inline-block;
}

.dp-wf-navitems {
  display: flex;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--jb-fg-3);
  letter-spacing: 0.04em;
}

.dp-wf-navcta {
  padding: 4px 10px;
  background: var(--jb-green);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* skeleton bars and text rows */
.dp-wf-bar {
  height: 8px;
  background: rgba(225, 223, 217, 0.32);
}
.dp-wf-bar.short { width: 40%; }
.dp-wf-bar.med   { width: 70%; }
.dp-wf-bar.long  { width: 100%; }

.dp-wf-line {
  height: 4px;
  background: rgba(225, 223, 217, 0.16);
  margin: 8px 0;
}
.dp-wf-line.short { width: 50%; }
.dp-wf-line.med   { width: 75%; }
.dp-wf-line.long  { width: 100%; }

.dp-wf-stack { display: flex; flex-direction: column; gap: 6px; }

/* video frame — 16:9 player with play circle, duration, recording dot */
.dp-wf-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--jb-rule-dark);
  background: repeating-linear-gradient(
    45deg,
    rgba(225, 223, 217, 0.05) 0 8px,
    transparent 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dp-wf-video.r-9-16 { aspect-ratio: 9 / 16; }
.dp-wf-video.r-1-1  { aspect-ratio: 1 / 1; }
.dp-wf-video.r-4-3  { aspect-ratio: 4 / 3; }

.dp-wf-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--jb-green);
  background: rgba(32, 157, 80, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-wf-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent var(--jb-green);
  margin-left: 3px;
}

.dp-wf-play.sm { width: 32px; height: 32px; }
.dp-wf-play.sm::after { border-width: 5px 0 5px 8px; }

.dp-wf-duration {
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--jb-fg-1);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.dp-wf-recording {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-wf-recording::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--jb-green);
}

/* CTA pair (primary + ghost) */
.dp-wf-ctas { display: flex; gap: 8px; margin-top: 10px; }
.dp-wf-cta-primary {
  padding: 8px 12px;
  background: var(--jb-green);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dp-wf-cta-ghost {
  padding: 8px 12px;
  border: 1px solid var(--jb-fg-1);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- 23.8 hero block — landing page mock ------------------- */

.dp-wf-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0 4px;
}

.dp-wf-hero-copy { display: flex; flex-direction: column; gap: 8px; }

.dp-wf-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jb-green);
}

/* ---- 23.9 evaluation block — 3-column clip grid ------------ */

.dp-wf-clipgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.dp-wf-clip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--jb-rule-dark);
  background: rgba(14, 17, 13, 0.55);
}

.dp-wf-clip.is-active {
  border-color: var(--jb-green);
  background: rgba(32, 157, 80, 0.06);
}

.dp-wf-clip-tag {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jb-fg-3);
}

.dp-wf-clip.is-active .dp-wf-clip-tag { color: var(--jb-green); }

.dp-wf-clip-len {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--jb-fg-3);
}

/* ---- 23.10 email block — client mock ----------------------- */

.dp-wf-email {
  border: 1px solid var(--jb-rule-dark-strong);
  background: rgba(14, 17, 13, 0.65);
}

.dp-wf-email-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jb-fg-3);
}

.dp-wf-email-bar .acc { color: var(--jb-green); }

.dp-wf-email-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-wf-email-from {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--jb-fg-2);
}

.dp-wf-email-from b { color: var(--jb-fg-1); font-weight: 600; }

.dp-wf-email-subj {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-display);
  line-height: 1.2;
  color: var(--jb-fg-1);
  margin: 6px 0 4px;
}

.dp-wf-email-prev {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--jb-fg-3);
}

.dp-wf-email-body {
  padding: 14px 16px 18px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
  color: var(--jb-fg-2);
}

.dp-wf-email-body p { margin: 0 0 10px; }

.dp-wf-email-clip {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 12px 0;
  border: 1px solid var(--jb-rule-dark);
  background: repeating-linear-gradient(
    45deg,
    rgba(225, 223, 217, 0.05) 0 8px,
    transparent 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-wf-email-clip .dp-wf-clip-meta {
  position: absolute;
  bottom: 6px;
  left: 10px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jb-fg-1);
}

.dp-wf-email-cta {
  display: inline-block;
  padding: 8px 12px;
  background: var(--jb-green);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- 23.11 retargeting block — three ad cards -------------- */

.dp-wf-adgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.dp-wf-ad {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-wf-ad-plate {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jb-fg-3);
}

.dp-wf-ad-plate .pf { color: var(--jb-green); }

.dp-wf-ad-frame {
  border: 1px solid var(--jb-rule-dark-strong);
  background: rgba(14, 17, 13, 0.55);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-wf-ad-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dp-wf-ad-avatar {
  width: 22px;
  height: 22px;
  background: var(--jb-fg-1);
}

.dp-wf-ad-name {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--jb-fg-1);
  line-height: 1.2;
}

.dp-wf-ad-name .sponsored {
  display: block;
  color: var(--jb-fg-3);
  font-size: 9px;
}

.dp-wf-ad-copy {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--jb-fg-2);
  line-height: 1.4;
  margin: 0;
}

.dp-wf-ad-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--jb-rule-dark);
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--jb-fg-3);
}

.dp-wf-ad-cta {
  padding: 4px 8px;
  background: rgba(225, 223, 217, 0.06);
  color: var(--jb-fg-1);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- 23.12 onboarding block — horizontal timeline ---------- */

.dp-wf-journey {
  position: relative;
  padding: 0 0 4px;
}

.dp-wf-journey-rail {
  position: absolute;
  top: 18px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--jb-rule-dark-strong);
}

.dp-wf-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}

.dp-wf-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-wf-step-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jb-green);
  font-weight: 500;
}

.dp-wf-step-day::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--jb-green);
}

.dp-wf-step-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--jb-rule-dark);
  background: repeating-linear-gradient(
    135deg,
    rgba(225, 223, 217, 0.05) 0 8px,
    transparent 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-wf-step-tag {
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jb-fg-1);
}

.dp-wf-step-len {
  position: absolute;
  bottom: 6px;
  right: 8px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--jb-fg-1);
}

.dp-wf-step-title {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  color: var(--jb-fg-1);
  margin: 4px 0 0;
}

/* ---- 23.13 reach block — 3 x 3 hook matrix ----------------- */

.dp-wf-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.dp-wf-matrix-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-wf-matrix-head {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jb-green);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-wf-hook {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--jb-rule-dark);
  background: rgba(14, 17, 13, 0.55);
}

.dp-wf-hook-text {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  color: var(--jb-fg-1);
}

.dp-wf-hook-format {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--jb-fg-3);
}

/* ---- 23.14 ads block — three stacked ad lanes -------------- */

.dp-wf-stacks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.dp-wf-stack-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-wf-stack-head {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jb-green);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-wf-stack-frames {
  position: relative;
  aspect-ratio: 4 / 5;
}

.dp-wf-stack-frames .dp-wf-video {
  position: absolute;
  inset: 0;
  width: 88%;
}

.dp-wf-stack-frames .dp-wf-video:nth-child(1) { transform: translate(0, 0);     z-index: 3; }
.dp-wf-stack-frames .dp-wf-video:nth-child(2) { transform: translate(6%, 6%);   z-index: 2; opacity: 0.7; }
.dp-wf-stack-frames .dp-wf-video:nth-child(3) { transform: translate(12%, 12%); z-index: 1; opacity: 0.45; }

/* ---- 23.15 testimonial block — quote frame + thumbs -------- */

.dp-wf-testimonial { display: flex; flex-direction: column; gap: 12px; }

.dp-wf-testimonial-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--jb-rule-dark);
  background: repeating-linear-gradient(
    45deg,
    rgba(225, 223, 217, 0.05) 0 8px,
    transparent 8px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-wf-testimonial-quote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.65);
  border-top: 1px solid var(--jb-green);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dp-wf-testimonial-name {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--jb-fg-1);
  letter-spacing: 0.06em;
}

.dp-wf-testimonial-result {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--jb-green);
}

.dp-wf-testimonial-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---- 23.15b First Win block -------------------------------- */

.dp-wf-firstwin { display: flex; flex-direction: column; gap: 12px; }

.dp-wf-firstwin-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-wf-firstwin-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  color: var(--accent, #3ecf6a);
  border: 1px solid var(--accent, #3ecf6a);
  padding: 2px 7px;
  border-radius: 2px;
}

.dp-wf-firstwin-outcome {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  border-left: 2px solid var(--accent, #3ecf6a);
}

.dp-wf-firstwin-outcome-label {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  color: var(--accent, #3ecf6a);
  white-space: nowrap;
}

.dp-wf-firstwin-outcome-text {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono, monospace);
}

.dp-wf-firstwin-path {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-wf-firstwin-step {
  font-size: 10px;
  letter-spacing: .05em;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-mono, monospace);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
}

.dp-wf-firstwin-step.is-done { color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.2); }
.dp-wf-firstwin-step.is-active { color: var(--accent, #3ecf6a); border-color: var(--accent, #3ecf6a); }

.dp-wf-firstwin-arrow { color: rgba(255,255,255,0.2); font-size: 11px; }

/* ---- 23.16 VSL block — player + chapters + gate ------------ */

.dp-wf-vsl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dp-wf-vsl-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dp-wf-vsl-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
}

.dp-wf-vsl-progress-fill {
  width: 42%;
  height: 100%;
  background: var(--accent, #3ecf6a);
}

.dp-wf-vsl-progress-label {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono, monospace);
}

.dp-wf-vsl-chapters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-wf-vsl-chapter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono, monospace);
  letter-spacing: .04em;
}

.dp-wf-vsl-chapter.is-done { color: rgba(255,255,255,0.55); }
.dp-wf-vsl-chapter.is-active { color: var(--accent, #3ecf6a); }

.dp-wf-vsl-check { color: var(--accent, #3ecf6a); }
.dp-wf-vsl-dot { opacity: .5; }

.dp-wf-vsl-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  margin-top: 4px;
}

.dp-wf-vsl-gate-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
}

.dp-wf-vsl-gate-cta {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-mono, monospace);
  letter-spacing: .04em;
}

/* ---- 23.16 upgrade block — modal + small email ------------- */

.dp-wf-upgrade {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: start;
}

.dp-wf-modal {
  border: 1px solid var(--jb-green);
  background: rgba(20, 24, 19, 0.92);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-wf-modal-head {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jb-green);
}

.dp-wf-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  color: var(--jb-fg-1);
  margin: 0;
}

.dp-wf-modal-cta {
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--jb-green);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-wf-upgrade-email {
  border: 1px solid var(--jb-rule-dark-strong);
  background: rgba(14, 17, 13, 0.55);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-wf-upgrade-email-from {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--jb-fg-2);
}

.dp-wf-upgrade-email-subj {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  color: var(--jb-fg-1);
}

/* ---- 23.17 terminal width adjustment ----------------------- */

.dp-terminal {
  max-width: 1080px;
}

@media (max-width: 768px) {

  .jb-header {
    padding: 16px 20px;
  }

  .jb-nav {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-menu {
    display: flex;
  }

  .jb-hero {
    grid-template-columns: 1fr;
    padding: 120px 20px 60px;
    gap: 32px;
    min-height: auto;
  }

  .hero-reel {
    display: flex;
    justify-content: center;
  }

  .hero-reel-frame {
    width: 200px;
    height: 355px;
  }

  .hero-headline {
    font-size: clamp(32px, 8vw, 48px);
  }

  .hero-lede {
    font-size: var(--fs-body);
    margin-bottom: 16px;
  }

  .hero-quiz-label {
    font-size: clamp(26px, 7vw, 34px);
  }

  .choice-btn,
  .dp-choice-btn {
    font-size: var(--fs-body-sm);
    padding: 16px 0;
  }

  .dp-content {
    padding: 100px 20px 120px;
  }

  /* ---- Tab toggle ---- */
  .dp-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--jb-rule-dark);
  }

  .dp-tab {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: var(--fw-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--jb-fg-3);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-base) var(--ease-slow), color var(--dur-base) var(--ease-slow);
    margin-bottom: -1px; /* sit on top of container border */
  }

  .dp-tab.is-active {
    border-bottom-color: var(--jb-green);
    color: var(--jb-fg-1);
  }

  /* Show one column at a time */
  .dp-layout.show-left  .dp-right { display: none; }
  .dp-layout.show-right .dp-left  { display: none; }
  .dp-layout.show-right .dp-right { display: block; }

  .dp-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* On mobile columns order doesn't matter since only one shows at a time */
  .dp-left  { order: 1; padding-top: 24px; }
  .dp-right { order: 2; transform: none; padding: 24px 16px 0; }
  .dp-right::after { display: none; } /* drop FIG. 01 plate on mobile */

  .dp-headline {
    font-size: var(--fs-display-sm);
  }

  .dp-plan-name {
    font-size: var(--fs-display-sm);
  }

  .dp-terminal {
    padding: 24px 20px 40px;
  }

  .dp-package-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dp-email-row {
    flex-direction: column;
    gap: 8px;
  }

  .dp-email-input,
  .dp-email-btn {
    border-radius: var(--r-sm);
    border-right: 1px solid var(--jb-rule-light);
  }

  .dp-email-btn {
    border-color: var(--jb-green);
  }

  .jb-footer {
    flex-direction: row;
    padding: 14px 20px;
    font-size: 8px;
    letter-spacing: 0.12em;
    gap: 4px;
  }

  .jb-footer span:nth-child(2) {
    text-align: center;
  }

  .jb-footer span:last-child {
    text-align: right;
  }

  .jb-hero {
    padding-bottom: 100px; /* mobile — clears fixed footer */
  }
}

/* ============================================================
   22. PHASE 2 MOBILE OVERRIDES — ≤768px
   Stack Zone B nodes vertically, stack Zone C CTA fork.
   ============================================================ */

@media (max-width: 768px) {

  .dp-question {
    font-size: var(--fs-display-sm);
    margin: 0 0 20px;
  }

  .dp-figure-label {
    margin-top: 12px;
    padding-top: 10px;
  }

  .dp-plan-why {
    font-size: var(--fs-body-sm);
    margin-top: 12px;
  }

  .dp-pkg-system {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    margin: 24px 0 32px;
  }

  .dp-pkg-node {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .dp-pkg-connector {
    width: 100%;
    height: 16px;
    padding: 4px 0;
    transform: rotate(90deg);
  }

  .dp-cta-fork {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
  }

  .dp-cta-option {
    width: 100%;
  }

  .dp-cta-or {
    align-self: center;
    padding: 4px 0;
  }

  .dp-cta-option-label {
    font-size: var(--fs-display-sm);
  }
}

/* ============================================================
   24. PHASE 3 MOBILE OVERRIDES — ≤768px
   Stack thesis vertically. Stack block body vertically.
   Collapse multi-column wireframes to single column or two-up.
   Reposition rotated plate inside the block.
   ============================================================ */

@media (max-width: 768px) {

  .dp-thesis {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 18px;
  }

  .dp-thesis-scope {
    border-left: 0;
    border-top: 1px solid var(--jb-rule-dark);
    padding-left: 0;
    padding-top: 18px;
  }

  .dp-block {
    padding: 24px 20px;
  }

  .dp-block-plate {
    position: static;
    transform: none;
    display: block;
    margin: 0 0 12px;
    color: var(--jb-fg-3);
  }

  .dp-block-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dp-wf-hero {
    grid-template-columns: 1fr;
  }

  .dp-wf-clipgrid,
  .dp-wf-adgrid,
  .dp-wf-matrix,
  .dp-wf-stacks {
    grid-template-columns: 1fr 1fr;
  }

  .dp-wf-journey-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .dp-wf-journey-rail { display: none; }

  .dp-wf-upgrade { grid-template-columns: 1fr; }

  .dp-wf-testimonial-thumbs { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   23. BACK BUTTON — .dp-back
   ============================================================ */

.dp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--jb-fg-3);
  cursor: pointer;
  transition: color 0.15s ease;
  line-height: 1;
}

.dp-back:hover {
  color: var(--jb-green);
}

.dp-terminal .dp-back {
  margin-bottom: 24px;
}

/* ---- Single-CTA mode (Stage 2 forward button) ---- */

.dp-choices--single {
  margin-top: 28px;
}

/* The single CTA button overrides the list-item look */
.dp-choice-cta {
  padding-top: 24px;
  padding-bottom: 24px;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display-tight);
  line-height: 1.15;
  border-top: 1px solid var(--jb-rule-dark);
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-choice-cta span {
  flex: 1;
}

.dp-choice-cta::after {
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* ============================================================
   §25  STAGE 4 — LEAD MAGNET FORM
   ============================================================ */

.dp-get-plan {
  margin-top: 56px;
}

.dp-lm-head {
  margin-bottom: 48px;
}

.dp-lm-head .dp-plan-tag {
  /* inherits existing dp-plan-tag styles — plan name as eyebrow */
}

.dp-lm-sub {
  margin-top: 12px;
  font-size: var(--fs-body);
  color: var(--jb-fg-2);
  line-height: 1.55;
  max-width: 520px;
}

/* Form */
.dp-lm-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

.dp-lm-field {
  padding: 0 0 16px;
}

.dp-lm-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--jb-fg-3);
  margin-bottom: 10px;
}

.dp-lm-input {
  display: block;
  width: 100%;
  background: rgba(225, 223, 217, 0.08);
  border: 1px solid rgba(225, 223, 217, 0.18);
  color: var(--jb-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  padding: 10px 14px;
  outline: none;
  caret-color: var(--jb-green);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dp-lm-input::placeholder {
  color: var(--jb-fg-3);
  opacity: 0.5;
}

.dp-lm-input:focus {
  background: rgba(225, 223, 217, 0.12);
  border-color: rgba(225, 223, 217, 0.4);
  color: var(--jb-fg-1);
}

.dp-lm-input--error {
  border-color: rgba(255, 80, 60, 0.6);
}

/* Submit button */
.dp-lm-submit {
  margin-top: 32px;
  width: 100%;
}

.dp-lm-meta {
  margin-top: 14px;
  font-size: var(--fs-meta);
  color: var(--jb-fg-3);
  line-height: 1.5;
}

/* Custom plan upsell divider */
.dp-lm-divider {
  margin: 32px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dp-lm-divider::before,
.dp-lm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jb-rule-dark);
}
.dp-lm-divider-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--jb-fg-3);
  white-space: nowrap;
}

/* Custom plan pitch text */
.dp-lm-upsell-pitch {
  font-size: var(--fs-body);
  color: var(--jb-fg-2);
  margin: 0 0 24px;
  line-height: 1.6;
}

/* Work email error hint */
.dp-lm-hint {
  font-size: var(--fs-label);
  color: var(--jb-accent, #e05a3a);
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}

/* Playbook alt */
.dp-lm-alt {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--jb-rule-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.dp-lm-or {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--jb-fg-3);
}

.dp-lm-playbook {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--jb-fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0;
  text-align: left;
  transition: color 0.15s ease;
}

.dp-lm-playbook:hover {
  color: var(--jb-fg-1);
}

/* ============================================================
   §26  STAGE 5 — CONFIRMATION / DRAFTING
   ============================================================ */

/* Brief block (on-brand — uses existing dp-block chrome) */
.dp-brief-block {
  margin-top: 40px;
  padding: 20px 24px 8px;
}

.dp-brief-rows {
  margin-top: 16px;
}

.dp-brief-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--jb-rule-dark);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.dp-brief-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.dp-brief-k {
  font-family: var(--font-body);
  color: var(--jb-fg-3);
  min-width: 64px;
  flex-shrink: 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
}

.dp-brief-v {
  color: var(--jb-fg-1);
  word-break: break-all;
}

/* Status console */
.dp-status-console {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding: 16px 0;
  border-top: 1px solid var(--jb-rule-dark);
  border-bottom: 1px solid var(--jb-rule-dark);
}

.dp-status-pulse {
  width: 6px;
  height: 6px;
  background: var(--jb-green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: dp-status-blink 1.4s ease-in-out infinite;
}

@keyframes dp-status-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.dp-status-msg {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--jb-fg-2);
  transition: opacity 0.2s ease;
}

/* ============================================================
   §27  STAGE 3 — PLAN REVEAL SPLIT + INLINE EMAIL CAPTURE
   ============================================================ */

.dp-plan-reveal {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 36px;
}

.dp-plan-reveal-left {
  flex: 1 1 0;
  min-width: 0;
}

.dp-plan-reveal-right {
  flex: 0 0 300px;
  width: 300px;
  padding: 0 0 0 32px;
  border-left: 1px solid var(--jb-rule-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  margin-top: 6px;
}

.dp-inline-email-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--jb-fg-1);
  line-height: 1.2;
  margin-bottom: 8px;
}

.dp-inline-email-label em {
  font-style: italic;
}

/* Email row inside right column: stack vertically */
.dp-plan-reveal-right .dp-email-row {
  flex-direction: column;
  gap: 6px;
}

.dp-plan-reveal-right .dp-email-input {
  width: 100%;
}

.dp-plan-reveal-right .dp-email-btn {
  width: 100%;
  justify-content: center;
}

.dp-email-btn--arrow {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 0;
  padding: 0;
  justify-content: center;
  font-size: 1.1rem;
}

.dp-email-btn--arrow::after {
  display: none;
}

.dp-plan-reveal-right .dp-email-row {
  flex-direction: row !important;
  gap: 0 !important;
}

.dp-plan-reveal-right .dp-email-input {
  flex: 1 !important;
  width: auto !important;
}

.dp-inline-email-meta {
  font-size: var(--fs-meta);
  color: var(--jb-fg-3);
  line-height: 1.4;
  margin: 0;
}

/* "or" divider between email + start project */
.dp-reveal-right-or {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: var(--jb-fg-3);
  font-size: var(--fs-meta);
}

.dp-reveal-right-or::before,
.dp-reveal-right-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jb-rule-dark);
}

/* Start this project button — ghost text style */
.dp-reveal-start-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--jb-fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  padding: 0;
  text-align: left;
  transition: color 0.15s ease;
}

.dp-reveal-start-btn:hover {
  color: var(--jb-fg-1);
}

/* Mobile: stack plan reveal vertically */
@media (max-width: 768px) {
  .dp-plan-reveal {
    flex-direction: column;
    gap: 28px;
  }
  .dp-plan-reveal-right {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--jb-rule-dark);
    padding: 24px 0 0;
    margin-top: 0;
  }
}

/* ============================================================
   §28  BOOKING STAGE — PLAN SUMMARY + CALENDAR
   ============================================================ */

.dp-terminal--booking {
  /* same terminal base */
}

.dp-booking-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 16px;
}

.dp-booking-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dp-scope-list--booking {
  margin-top: 28px;
}

.dp-booking-price {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--jb-fg-3);
  letter-spacing: 0.03em;
}

.dp-booking-cal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}

.dp-booking-iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  overflow: hidden;
}

/* Mobile */
@media (max-width: 720px) {
  .dp-booking-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dp-booking-cal {
    position: static;
  }
}

/* ============================================================
   §29  ZONE D — PRIMARY/SECONDARY CTA LAYOUT
   ============================================================ */

/* Flipped fork: start-project primary, email secondary */
.dp-cta-fork--flipped {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dp-cta-primary-block {
  padding: 40px 0 32px;
  border-top: 1px solid var(--jb-rule-dark);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.dp-cta-heading {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display-tight);
  line-height: 1.1;
  color: var(--jb-fg-1);
  margin: 0;
}

.dp-cta-start-full {
  /* inherits btn--solid; no extra needed */
}

.dp-cta-email-block {
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-lm-optional {
  font-size: var(--fs-meta);
  color: var(--jb-fg-3);
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
  margin-left: 4px;
}

/* ============================================================
   §30  TOP-RIGHT START BUTTON (plan reveal right column)
   ============================================================ */

.dp-reveal-start-full {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 14px 16px;
}

.dp-plan-reveal-right .dp-cta-heading {
  font-size: var(--fs-display-sm);
  margin-bottom: 8px;
}

/* Email row in right col: side-by-side like Zone D */
.dp-plan-reveal-right .dp-email-row {
  flex-direction: row;
  gap: 0;
}

/* ============================================================
   §31  MOBILE FIXES — diagnostic plan view
   ============================================================ */

@media (max-width: 600px) {

  /* Scope rows: spec drops below name instead of floating right */
  .dp-scope-row {
    grid-template-columns: 24px 1fr;
    gap: 4px 10px;
  }
  .dp-scope-row__spec {
    grid-column: 2;
    text-align: left;
    white-space: normal;
    font-size: 11px;
  }

  /* Wireframe mock: scale down so it stays inside its container */
  .dp-wf-browser {
    font-size: 9px;
    overflow: hidden;
  }
  .dp-wf-page {
    padding: 10px 12px;
  }
  .dp-wf-nav {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .dp-wf-navitems {
    display: none;
  }
  .dp-wf-hero {
    gap: 8px;
  }
  .dp-wf-video {
    margin-top: 10px;
  }

  /* FIG / plate label: hide on mobile to avoid overflow */
  .dp-block-plate,
  .dp-wf-ad-plate {
    display: none;
  }
}