/* Extracted from temp_V21.vanilla.runway.html on 2026-05-11 */
    /* =====================================================================
       BASE / RESET
       ===================================================================== */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    img { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

    body {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #555555;
      background: #f8fafc; /* slate-50 — matches home body bg exactly (tokens.css --bg-base, index.html:38). Seamless home → case-study transition; same surface the home card sits on. Liraz 2026-05-12: "כל קוביה מדף הבית זה עולם" */
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* Runway selection: flat black */
    body::selection, *::selection { background: #000000; color: #ffffff; }

    /* Stripe-style numerals (preserved from source — used inside phone mockups) */
    .stripe-text {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-feature-settings: "ss01" on;
    }
    .stripe-tnum {
      font-feature-settings: "ss01" on, "tnum" on;
    }

    :root {
      --c-purple: #533afd;
      --c-purple-light: #b9b9f9;
      --c-amber: #fbbf24;
      --c-bg: #020617;
      --c-bg-2: #0f172a;
      --c-bg-3: #1e293b;
      --c-line: #334155;
      /* Runway portfolio-frame tokens */
      --rw-ink: #000000;
      --rw-body: #555555;
      --rw-muted: #A0A0A0;
      --rw-hair: #E5E5E5;
    }

    /* =====================================================================
       RUNWAY TYPOGRAPHY SYSTEM (portfolio frame only — NOT inner mockups)
       ===================================================================== */
    .text-display {
      font-size: 40px;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.04em;
    }
    @media (min-width: 768px) {
      .text-display {
        font-size: 56px;
      }
    }
    .text-heading-lg {
      font-size: 32px;
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }
    @media (min-width: 768px) {
      .text-heading-lg {
        font-size: 40px;
      }
    }
    .text-heading-md {
      font-size: 28px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    @media (min-width: 768px) {
      .text-heading-md {
        font-size: 32px;
      }
    }
    .text-heading-sm {
      font-size: 22px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    @media (min-width: 768px) {
      .text-heading-sm {
        font-size: 24px;
      }
    }
    .text-subtitle {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
    }
    .text-body {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
    }
    .text-eyebrow {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.43;
      letter-spacing: 0.35px;
      text-transform: uppercase;
    }

    /* =====================================================================
       LUCIDE ICON SIZING
       ===================================================================== */
    [data-lucide], svg[data-lucide] { display: inline-block; vertical-align: middle; flex-shrink: 0; }
    .ic-2-5 { width: 10px; height: 10px; }
    .ic-3 { width: 12px; height: 12px; }
    .ic-3-5 { width: 14px; height: 14px; }
    .ic-4 { width: 16px; height: 16px; }
    .ic-5 { width: 20px; height: 20px; }
    .ic-6 { width: 24px; height: 24px; }
    .ic-fill { fill: currentColor; }
    .stroke-3 { stroke-width: 3; }

    /* =====================================================================
       PHONE MOCKUP
       ===================================================================== */
    .phone {
      position: relative;
      flex-shrink: 0;
    }
    .phone-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 850px;
      border: 12px solid #0f172a;
      background: #020617;
      border-radius: 3.5rem;
      overflow: hidden;
      transform-origin: top left;
      box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
    }
    .phone-screen {
      position: relative;
      width: 100%;
      height: 100%;
    }
    /* §4 + §10 phone slots use a Gemini JPG embed instead of a vanilla mount.
       JPG fills the screen viewport, anchored to top so the header band stays visible
       even when the source asset is taller than 16:9.5 phone proportions. */
    .wb-screen-jpg { overflow: hidden; }
    .wb-screen-jpg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    .phone-notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 28px;
      width: 33.3333%;
      background: #0f172a;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      z-index: 100;
    }

    /* =====================================================================
       MACBOOK MOCKUP — desktop 1440×900, scaled per data-mac-size in JS.
       Used by safe.html slots. Mirrors .phone / .phone-frame / .phone-screen
       structure so applyMacScales() and mountSafeIframe() can run in parallel.
       ===================================================================== */
    .mac {
      position: relative;
      flex-shrink: 0;
    }
    .mac[data-mac-size="sm"] { width: 316.8px; height: 198px; }
    .mac[data-mac-size="md"] { width: 604.8px; height: 378px; }
    .mac[data-mac-size="lg"] { width: 720px; height: 450px; }
    .mac:not([data-mac-size]) { width: 604.8px; height: 378px; }
    .mac[data-mac-size="sm"] .macbook-frame { transform: scale(0.22); }
    .mac[data-mac-size="md"] .macbook-frame { transform: scale(0.42); }
    .mac[data-mac-size="lg"] .macbook-frame { transform: scale(0.50); }
    .mac:not([data-mac-size]) .macbook-frame { transform: scale(0.42); }

    @media (max-width: 767px) {
      .mac[data-mac-size="sm"],
      .mac[data-mac-size="md"],
      .mac[data-mac-size="lg"],
      .mac:not([data-mac-size]) { width: 316.8px; height: 198px; }
      .mac[data-mac-size="sm"] .macbook-frame,
      .mac[data-mac-size="md"] .macbook-frame,
      .mac[data-mac-size="lg"] .macbook-frame,
      .mac:not([data-mac-size]) .macbook-frame { transform: scale(0.22); }
    }
    .macbook-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 900px;
      background: #F4F4F5;
      border: 1px solid #E2E8F0;
      border-radius: 14px;
      overflow: hidden;
      transform-origin: top left;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 30px 80px -32px rgba(15, 23, 42, 0.22);
    }
    .macbook-bar {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 32px;
      background: #F4F4F5;
      border-bottom: 1px solid #E2E8F0;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      z-index: 100;
    }
    .macbook-bar i {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #d1d5db;
      display: inline-block;
    }
    .macbook-bar i:nth-child(1) { background: #ff5f57; }
    .macbook-bar i:nth-child(2) { background: #ffbd2e; }
    .macbook-bar i:nth-child(3) { background: #28c840; }
    .macbook-screen {
      position: absolute;
      top: 32px; /* below the title bar */
      left: 0;
      width: 100%;
      height: calc(100% - 32px);
      background: #FFFFFF;
    }

    /* Hero macs — three MacBooks stacked at the same position, auto-cycling
       ask -> check -> report via opacity cross-fade. All layers pre-mounted
       so no blank frame appears between states. Cycle controller lives in
       safe.js (DWELL_MS + FADE_MS); CSS only owns the transition + states. */
    .hero-macs {
      position: relative;
      height: 450px;            /* matches actual hero-mac rendered height — was 540px (90px of dead air around the mac) */
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0;
      perspective: 2400px;
    }
    .hero-mac {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: none;
    }
    .hero-mac.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-mac { transition: none; }
    }
    @media (max-width: 767px) {
      .hero-macs { height: 280px; perspective: 1600px; }
    }

    /* =====================================================================
       LIST MOCKUP — shared between FunctionalListMockup + MockListStatic
       (interior typography untouched — Synergym dark)
       ===================================================================== */
    .list-mockup {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      color: #ffffff;
      background: #020617;
      overflow: hidden;
      user-select: none;
    }
    .list-header {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 50;
      background: #020617;
      border-bottom: 1px solid #1e293b;
      box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
      pointer-events: none;
      transform: translateY(0);
      transition: transform 500ms ease-in-out;
    }
    .list-header.is-hidden { transform: translateY(-100%); }
    .list-header-inner {
      padding: 48px 20px 8px 20px;
      background: #020617;
      pointer-events: auto;
    }
    .list-header-bars {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
    }
    .list-header-bar {
      height: 4px;
      flex: 1 1 0;
      border-radius: 9999px;
      background: #1e293b;
    }
    .list-header-bar.is-on { background: #533afd; }
    .list-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .list-header-stats {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.1;
      letter-spacing: 0.025em;
    }
    .list-header-time {
      margin-top: 4px;
      color: #cbd5e1;
    }
    .list-header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .list-header-streak {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #fbbf24;
      border-radius: 9999px;
      padding: 4px 12px;
      background: #0f172a;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    }
    .list-header-streak-dot {
      width: 16px;
      height: 16px;
      background: #fbbf24;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #020617;
    }
    .list-header-streak-num {
      color: #ffffff;
      font-size: 13px;
      font-weight: 500;
    }
    .list-header-more-wrap { position: relative; }
    .list-header-more {
      color: #ffffff;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 150ms;
      border-radius: 9999px;
      position: relative;
      z-index: 50;
    }
    .list-header-more:hover { color: #533afd; }
    /* Source line 159: `animate-in fade-in slide-in-from-top-2` — fade + drop from -8px */
    .list-header-menu {
      position: absolute;
      right: 0;
      top: 100%;
      margin-top: 8px;
      width: 160px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      box-shadow: 0 15px 30px rgba(0,0,0,0.4);
      padding: 4px 0;
      z-index: 50;
      overflow: hidden;
      animation: ai-fade-slide-top-2 150ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .list-header-menu-item {
      padding: 12px 16px;
      font-size: 14px;
      color: #cbd5e1;
    }
    .list-header-menu-item.is-active {
      color: #ffffff;
      background: #334155;
    }
    .list-header-quit {
      border: 1px solid #334155;
      color: #cbd5e1;
      border-radius: 9999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      background: #0f172a;
    }
    .list-header-expand {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      overflow: hidden;
      transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out, margin-top 500ms ease-in-out;
    }
    .list-header.is-expanded .list-header-expand {
      max-height: 120px;
      opacity: 1;
      margin-top: 20px;
    }
    .list-header-expand-row {
      padding: 20px 4px 8px 4px;
      border-top: 1px solid #1e293b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
    }
    .list-header-expand-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      width: 25%;
    }
    .list-header-expand-cell-num {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
    }
    .list-header-expand-cell-num.is-purple { color: #818cf8; }
    .list-header-expand-cell-label {
      color: #64748b;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .list-header-expand-divider {
      width: 1px;
      height: 24px;
      background: #1e293b;
    }
    .list-header-handle-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 12px;
      padding: 4px 0;
    }
    .list-header-handle {
      width: 40px;
      height: 6px;
      border-radius: 9999px;
      background: #334155;
      transition: background 300ms;
    }
    .list-header.is-expanded .list-header-handle { background: #475569; }

    .list-body {
      flex: 1 1 0;
      overflow-y: auto;
      padding: 150px 20px 32px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 10;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .list-body::-webkit-scrollbar { display: none; }

    /* MockListStatic body — non-scrolling, used inside transitioning mockups */
    .list-body-static {
      flex: 1 1 0;
      padding: 0 20px 0 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .list-card {
      display: flex;
      flex-direction: column;
      background: #0f172a;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #1e293b;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      width: 100%;
      text-align: left;
      color: inherit;
      flex-shrink: 0;
    }
    .list-card-head {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #0f172a;
      transition: background 150ms;
      cursor: pointer;
    }
    .list-card-head:hover { background: rgba(30, 41, 59, 0.5); }
    .list-card-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .list-card-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .list-card-status-btn {
      color: #475569;
      transition: color 150ms;
      display: inline-flex;
    }
    .list-card-status-btn:hover { color: #533afd; }
    .list-card-status-btn.is-done { color: #533afd; }
    .list-card-pill {
      border: 1px solid rgba(83, 58, 253, 0.5);
      border-radius: 9999px;
      padding: 4px 12px;
      background: rgba(83, 58, 253, 0.1);
    }
    .list-card-pill-text {
      color: #b9b9f9;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.025em;
    }
    .list-card-chev-btn {
      color: #64748b;
      padding: 4px;
      display: inline-flex;
      transition: color 150ms;
    }
    .list-card-chev-btn:hover { color: #cbd5e1; }
    .list-card-meta {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .list-card-thumbs {
      position: relative;
      width: 48px;
      height: 44px;
      flex-shrink: 0;
    }
    .list-card-thumb {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid #533afd;
      object-fit: cover;
    }
    .list-card-thumb.thumb-a { left: 0; top: 0; opacity: 0.7; }
    .list-card-thumb.thumb-b { left: 12px; top: 6px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); z-index: 10; }
    .list-card-thumb.thumb-solo {
      width: 44px;
      height: 44px;
      border-color: rgba(83, 58, 253, 0.5);
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    }
    .list-card-titles {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .list-card-title {
      color: #ffffff;
      font-weight: 600;
      font-size: 16px;
      line-height: 1.25;
      margin: 0;
    }
    .list-card-title-up { text-transform: uppercase; }
    .list-card-title-soft { opacity: 0.9; font-size: 14px; font-weight: 500; }
    .list-card-sub {
      color: #94a3b8;
      font-size: 12px;
      font-weight: 400;
      margin: 2px 0 0 0;
    }
    .list-card-side-icons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      margin-right: 4px;
      color: #64748b;
    }

    .list-card-sets {
      display: none;
      flex-direction: column;
      padding: 8px;
      background: #020617;
      border-top: 1px solid #1e293b;
    }
    .list-card.is-expanded .list-card-sets { display: flex; }

    /* =====================================================================
       SET ROW (V14: swipeable + status-driven)
       ===================================================================== */
    .set {
      position: relative;
      overflow: hidden;
      margin-bottom: 8px;
      border-radius: 12px;
    }
    .set:last-child { margin-bottom: 0; }

    .set-actions {
      position: absolute;
      top: 0; bottom: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 4px 4px;
      gap: 8px;
      width: 100%;
      pointer-events: none;
    }
    .set-action-partial {
      pointer-events: auto;
      height: calc(100% - 8px);
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid #334155;
      color: #cbd5e1;
      border-radius: 8px;
      transition: background 150ms;
    }
    .set-action-partial:hover { background: #1e293b; }
    .set-action-partial-text {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .set-action-full {
      pointer-events: auto;
      height: calc(100% - 8px);
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #533afd;
      color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      transition: background 150ms;
    }
    .set-action-full:hover { background: #4434d4; }

    .set-row {
      position: relative;
      z-index: 10;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #0f172a;
      border: 1px solid #1e293b;
      border-radius: 12px;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      transition: transform 300ms ease-out, border-color 150ms;
      min-height: 64px;
      transform: translateX(0);
      touch-action: pan-y;
    }
    .set.is-swiped .set-row { transform: translateX(-150px); }
    .set-row:hover { border-color: #334155; }

    .set-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
    }
    .set-icon-btn {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      border: 1px solid #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #475569;
      background: transparent;
      transition: background 150ms, color 150ms, border-color 150ms;
    }
    .set-icon-btn:hover { background: #1e293b; }
    .set-icon-btn.is-full {
      border-color: #533afd;
      background: #533afd;
      color: #ffffff;
    }
    .set-icon-btn.is-partial {
      border-color: #334155;
      background: #1e293b;
      color: #94a3b8;
    }
    .set-icon-btn.is-active {
      border-color: #533afd;
      background: rgba(83, 58, 253, 0.2);
      color: #533afd;
    }
    .set-label {
      color: #ffffff;
      font-weight: 500;
      font-size: 15px;
      min-width: 45px;
      max-width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .set-stats {
      display: flex;
      gap: 16px;
      margin-left: auto;
      align-items: center;
    }
    .set-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .set-stat-label {
      color: #64748b;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .set-stat-value {
      color: #e2e8f0;
      font-weight: 500;
      font-size: 14px;
    }
    .set-more-btn {
      padding: 4px;
      color: #64748b;
      margin-left: 4px;
      transition: color 150ms;
    }
    .set-more-btn:hover { color: #cbd5e1; }

    .list-finish-wrap { padding: 8px 0 24px 0; }
    .list-finish {
      width: 100%;
      background: #1e293b;
      color: #cbd5e1;
      font-weight: 500;
      font-size: 16px;
      padding: 16px 0;
      border-radius: 12px;
      border: 1px solid #334155;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      transition: background 150ms;
    }
    .list-finish:hover { background: #334155; }

    /* =====================================================================
       ACTIVE TIMER OVERLAY (V14: appears when a set is activated)
       ===================================================================== */
    /* Source line 583: backdrop = `animate-in fade-in duration-300` */
    .timer-backdrop {
      position: absolute;
      inset: 0;
      z-index: 40;
      background: rgba(0,0,0,0.2);
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
      animation: ai-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* Source line 584: bar = `animate-in slide-in-from-bottom duration-300` (no fade) */
    .timer-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #1c1e54;
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      box-shadow: 0 -15px 40px rgba(0,0,0,0.6);
      border-top: 1px solid #2e2b8c;
      padding: 24px 24px 48px 24px;
      z-index: 50;
      animation: ai-slide-bottom 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .timer-stack {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .timer-row-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .timer-eyebrow {
      color: #b9b9f9;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .timer-progress-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .timer-progress-track {
      width: 64px;
      height: 6px;
      background: #0d132b;
      border-radius: 9999px;
      overflow: hidden;
      display: flex;
      box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
    }
    .timer-progress-fill {
      width: 40%;
      background: #f96bee;
      height: 100%;
      animation: timer-pulse 1.5s ease-in-out infinite;
    }
    @keyframes timer-pulse {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 1; }
    }
    .timer-time {
      color: #ffffff;
      font-size: 13px;
      font-weight: 500;
    }
    .timer-row-2 {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .timer-icon-box {
      width: 56px;
      height: 56px;
      background: #2a2b66;
      border-radius: 10px;
      flex-shrink: 0;
      border: 1px solid #3e3f88;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
      color: #533afd;
    }
    .timer-titles {
      display: flex;
      flex-direction: column;
    }
    .timer-title {
      color: #ffffff;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.25;
      margin-bottom: 6px;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .timer-stats {
      color: #d6d9fc;
      font-size: 12px;
      line-height: 1.25;
      margin-bottom: 6px;
      display: flex;
      gap: 12px;
    }
    .timer-active-label {
      color: #8b8db8;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .timer-row-3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
    }
    .timer-row-3-left {
      display: flex;
      gap: 12px;
    }
    .timer-icon-circle {
      width: 44px;
      height: 44px;
      background: #0d132b;
      border: 1px solid #2e2b8c;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #d6d9fc;
      transition: background 150ms, color 150ms;
    }
    .timer-icon-circle:hover {
      background: #061b31;
      color: #ffffff;
    }
    .timer-row-3-right {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .timer-incomplete {
      padding: 10px 24px;
      background: transparent;
      border: 1px solid #b9b9f9;
      color: #b9b9f9;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 500;
      transition: background 150ms;
    }
    .timer-incomplete:hover { background: rgba(255,255,255,0.1); }
    .timer-confirm {
      width: 48px;
      height: 48px;
      background: #4ade80;
      color: #ffffff;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 150ms;
    }
    .timer-confirm:hover { background: #22c55e; }

    /* =====================================================================
       IMMERSIVE MOCKUP (kept identical to V14.vanilla)
       ===================================================================== */
    .immersive {
      width: 100%;
      height: 100%;
      position: relative;
      color: #ffffff;
      background: #020617;
      overflow: hidden;
      user-select: none;
    }
    .immersive-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
      transition: transform 700ms ease-out;
    }
    .immersive-bg.is-zoomed { transform: scale(1.05); }
    .immersive-overlay-1 {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: rgba(2, 6, 23, 0.5);
      mix-blend-mode: multiply;
    }
    .immersive-overlay-2 {
      position: absolute;
      inset: 0;
      z-index: 0;
      height: 75%;
      margin-top: auto;
      bottom: 0;
      background: linear-gradient(to top, #020617 0%, rgba(2, 6, 23, 0.9) 50%, transparent 100%);
    }
    .immersive-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 50;
    }
    .immersive-top-inner {
      padding: 48px 24px 8px 24px;
    }
    .immersive-progress-bars {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
    }
    .immersive-progress-bar {
      height: 6px;
      flex: 1 1 0;
      border-radius: 9999px;
      background: rgba(255,255,255,0.2);
      transition: background-color 500ms, box-shadow 500ms;
    }
    .immersive-progress-bar.is-done { background: #533afd; }
    .immersive-progress-bar.is-active {
      background: #b9b9f9;
      box-shadow: 0 0 8px rgba(185,185,249,0.8);
    }
    .immersive-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
    }
    .immersive-top-left {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .immersive-back {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.2);
      border-radius: 6px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
      transition: background 200ms, border-color 200ms;
    }
    .immersive-back.is-active {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.5);
    }
    .immersive-type {
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.025em;
      color: #cbd5e1;
      text-transform: uppercase;
    }
    .immersive-timer {
      background: rgba(0,0,0,0.2);
      padding: 6px 12px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .immersive-timer-icon { color: #533afd; }
    .immersive-timer-text {
      font-weight: 500;
      font-size: 13px;
      color: #ffffff;
    }
    .immersive-content {
      position: relative;
      z-index: 10;
      flex: 1 1 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 140px 24px 40px 24px;
    }
    .immersive-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 32px;
    }
    .immersive-titles { display: flex; flex-direction: column; }
    .immersive-eyebrow {
      color: #533afd;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .immersive-h1 {
      color: #ffffff;
      font-size: 44px;
      font-weight: 500;
      letter-spacing: -0.96px;
      line-height: 1.1;
      margin: 0 0 24px 0;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
      white-space: pre-wrap;
    }
    .immersive-stats {
      display: flex;
      align-items: center;
      gap: 16px;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .immersive-stat {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .immersive-stat-label {
      color: #94a3b8;
      font-size: 13px;
      font-weight: 500;
    }
    .immersive-stat-label-lead {
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .immersive-stat-value {
      font-size: 26px;
      font-weight: 500;
    }
    .immersive-stat-divider {
      width: 1px;
      height: 20px;
      background: #334155;
    }
    .immersive-progress-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
    }
    .immersive-progress-track {
      width: 10px;
      height: 110px;
      background: #1e293b;
      border-radius: 9999px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
    }
    .immersive-progress-fill {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #533afd;
      border-radius: 9999px;
      /* Default: ChallengeImmersive (source line 719, duration-500 ease-out) */
      transition: height 500ms ease-out;
    }
    /* AutoImmersive frame uses duration-1000 ease-out (source line 939) */
    .immersive-progress-fill.is-auto {
      transition: height 1000ms ease-out;
    }
    .immersive-progress-text {
      color: #ffffff;
      font-weight: 500;
      font-size: 11px;
      text-shadow: 0 1px 1px rgba(0,0,0,0.05);
      transition: opacity 300ms;
    }
    .immersive-cta-row {
      display: flex;
      gap: 16px;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 20;
    }
    .immersive-cta-primary {
      flex: 1 1 0;
      height: 56px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #533afd;
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      transition: background 300ms, border-color 300ms;
    }
    .immersive-cta-primary.is-completed {
      background: #4434d4;
      border: 1px solid #533afd;
    }
    .immersive-cta-secondary {
      width: 56px;
      height: 56px;
      background: #0f172a;
      border: 1px solid #1e293b;
      color: #94a3b8;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 14px;
    }

    /* =====================================================================
       TAILWIND-ANIMATE COMPOSITIONS (parity with @tailwindcss/animate)
       Source compositions:
         animate-in fade-in slide-in-from-bottom-16 duration-500
         animate-in fade-in slide-in-from-right-16  duration-500
         animate-in fade-in slide-in-from-bottom-full duration-500
         animate-in fade-in duration-300
         animate-in slide-in-from-bottom duration-300
         animate-in fade-in slide-in-from-top-2
       Easing matches Tailwind animate's default `ease-out` curve
       (cubic-bezier(0.16, 1, 0.3, 1) — quartic ease-out).
       ===================================================================== */
    @keyframes ai-fade-slide-bottom-16 {
      from { opacity: 0; transform: translate3d(0, 64px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    @keyframes ai-fade-slide-right-16 {
      from { opacity: 0; transform: translate3d(64px, 0, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    @keyframes ai-fade-slide-bottom-full {
      from { opacity: 0; transform: translate3d(0, 100%, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    @keyframes ai-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes ai-slide-bottom {
      from { transform: translate3d(0, 100%, 0); }
      to   { transform: translate3d(0, 0, 0); }
    }
    @keyframes ai-fade-slide-top-2 {
      from { opacity: 0; transform: translate3d(0, -8px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .ai-fade-slide-bottom-16  { animation: ai-fade-slide-bottom-16  500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .ai-fade-slide-right-16   { animation: ai-fade-slide-right-16   500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .ai-fade-slide-bottom-full{ animation: ai-fade-slide-bottom-full 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .ai-fade-in               { animation: ai-fade-in               300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .ai-slide-bottom          { animation: ai-slide-bottom          300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .ai-fade-slide-top-2      { animation: ai-fade-slide-top-2      150ms cubic-bezier(0.16, 1, 0.3, 1) both; }

    /* Cursor (pointer) animations — V14 */
    @keyframes cursor-swipe-left {
      0% { transform: translate(50px, 0); opacity: 0; }
      20% { transform: translate(50px, 0); opacity: 1; }
      70% { transform: translate(-30px, 0); opacity: 1; }
      100% { transform: translate(-30px, 0); opacity: 0; }
    }
    @keyframes cursor-swipe-up {
      0% { transform: translate(0, 50px); opacity: 0; }
      20% { transform: translate(0, 50px); opacity: 1; }
      70% { transform: translate(0, -30px); opacity: 1; }
      100% { transform: translate(0, -30px); opacity: 0; }
    }
    @keyframes cursor-click {
      0% { transform: scale(1.2); opacity: 0; }
      30% { transform: scale(1); opacity: 1; }
      50% { transform: scale(0.85); opacity: 1; }
      70% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.2); opacity: 0; }
    }
    @keyframes cursor-drag-down {
      0% { transform: translate(-50%, -30px); opacity: 0; }
      20% { transform: translate(-50%, -30px); opacity: 1; }
      70% { transform: translate(-50%, 80px); opacity: 1; }
      100% { transform: translate(-50%, 80px); opacity: 0; }
    }
    .cursor-swipe-left { animation: cursor-swipe-left 1.5s ease-in-out forwards; }
    .cursor-swipe-up { animation: cursor-swipe-up 1.5s ease-in-out forwards; }
    .cursor-click { animation: cursor-click 1s ease-in-out forwards; }
    .cursor-drag-down { animation: cursor-drag-down 1.5s ease-in-out forwards; }

    /* Source-style aliases (matches `animate-cursor-*` from temp_V14_runway) */
    .animate-cursor-swipe-left { animation: cursor-swipe-left 1.5s ease-in-out forwards; }
    .animate-cursor-swipe-up { animation: cursor-swipe-up 1.5s ease-in-out forwards; }
    .animate-cursor-click { animation: cursor-click 1s ease-in-out forwards; }
    .animate-cursor-drag-down { animation: cursor-drag-down 1.5s ease-in-out forwards; }

    .cursor-pin {
      position: absolute;
      z-index: 100;
      color: rgba(255,255,255,0.9);
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
      pointer-events: none;
    }
    .cursor-pin-inner {
      width: 48px;
      height: 48px;
      background: rgba(255,255,255,0.2);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.4);
    }
    .cursor-pin-inner svg { transform: rotate(-45deg); }
    .cursor-pin.on-light .cursor-pin-inner {
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .cursor-pin.on-light .cursor-pin-inner i {
      color: rgba(255, 255, 255, 0.95);
    }
    /* Source: Tailwind's default `animate-pulse` — opacity 1 ↔ 0.5, 2s, cubic-bezier(0.4,0,0.6,1), infinite */
    .cursor-pin-inner.is-pulse { animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    @keyframes tw-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }
    .cursor-pin-sm .cursor-pin-inner {
      width: 40px;
      height: 40px;
    }
    .cursor-pin-sm .cursor-pin-inner svg { width: 20px; height: 20px; }

    /* =====================================================================
       APPROACH-TRANSITION CROSSFADE (List <-> Immersive)
       ===================================================================== */
    .xfade-layer {
      position: absolute;
      inset: 0;
      transition: opacity 500ms ease-in-out;
    }
    .xfade-layer.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
    .xfade-layer.is-shown {
      opacity: 1;
      pointer-events: auto;
    }

    /* Static-list translate wrapper (for TimerPersistentBar + SessionOverview) */
    .static-list-translate {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding-top: 0;
      transition: transform 1000ms ease-in-out;
    }

    /* Session-overview overlay top-shift */
    .session-shade {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
      pointer-events: none;
      transition: opacity 500ms, top 500ms;
      opacity: 0;
      top: 0;
    }
    .session-shade.is-visible {
      opacity: 1;
      top: 220px;
    }

    /* =====================================================================
       PAGE FRAME — Runway header + footer (case-study chrome)
       ===================================================================== */
    .rw-footer {
      border-top: 1px solid var(--rw-hair);
      padding: 32px 0;
      background: #ffffff;
    }
    .rw-footer-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      font-size: 14px;
      color: var(--rw-muted);
    }
    .rw-footer-links {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .rw-footer-links a {
      color: var(--rw-muted);
      text-decoration: none;
      transition: color 200ms;
    }
    .rw-footer-links a:hover { color: #7c3aed; }
    .rw-footer-attribution {
      display: flex;
      gap: var(--space-4);
      flex-wrap: wrap;
      align-items: center;
    }

    /* =====================================================================
       PAGE SECTIONS — Runway portfolio frame (flat white + hairlines)
       ===================================================================== */

    /* Hero */
    .hero {
      padding: 96px 16px 24px 16px;     /* 2026-05-18: bottom 96→24px so hero→HD-SPINE total = 24+24 = 48px (rhythm unification, Liraz "אנחנו עובדים לפי גריד לא?") */
      max-width: 72rem;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
    }
    .hero-eyebrow {
      color: var(--rw-muted);
      margin: 0 0 24px 0;
    }
    .project-tag {
      display: inline-block;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--rw-muted);
      letter-spacing: 0;
      line-height: 1.4;
    }
    .hero-h1 {
      color: var(--rw-ink);
      margin: 0 0 32px 0;
    }
    .hero-lede {
      color: var(--rw-body);
      max-width: 42rem;
      margin: 0 auto 48px auto;     /* Liraz 2026-05-18: tightened from 96px → 64px → 48px */
    }
    .hero-phones {
      position: relative;
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0;
      perspective: 2000px;
      cursor: pointer;
    }
    .hero-phone {
      position: absolute;
      transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .hero-phone.is-left {
      transform: translateX(-48px) rotate(-6deg);
      z-index: 20;
    }
    .hero-phone.is-right {
      transform: translateX(48px) rotate(6deg);
      z-index: 10;
    }

    /* §4 Solution v20 CSS retired 2026-05-14 — section removed in commit 9087d37, all .solution-v20-* rules deleted as orphans. */

    /* ====================================================================
       Section: §5 My Design Process — Round 4d V4_similar port
       Markup + class structure from sketches/case-study/trainee/_archive/liraz_v4_similar.html
       lines 640-727 (CSS) + 1238-1281 (HTML). Layered with the Round 4b
       branch-expand additions below (.stepper-v20-branch chain rebound to
       .mind-node hosts).
       Citations:
         DESIGN-nike.md §typography → mn-label 13/600/0.01em (lines 702-708)
         DESIGN-shopify.md §buttons → mn-icon 64×64 white + 2px line border
         DESIGN-shopify.md §color   → purple-only via --brand-solid `#7c3aed`
         DESIGN-shopify.md §spacing → 8px grid (gap-12, padding 5/8/9/10/12)
    ==================================================================== */

    /* Section frame — keeps the existing background + padding from rounds 1-3
       so the surrounding rhythm doesn't shift. `.process` is the V4_similar
       namespace; we keep `.stepper-v20-section` on the same element so the
       reduced-motion JS class hook (`.no-reveal-anim`) and other inherited
       rules continue to apply. */
    .stepper-v20-section.process {
      /* 2026-05-18: top 96→48px (rhythm unification). Bottom kept at 96px. Was: padding: 96px 16px (2026-05-14 std). */
      padding: 48px 16px 96px;
      background: #f8fafc; /* match body — unified slate-50 surface */
      overflow: hidden;
      position: relative;
    }

    /* Process head — eyebrow above the row, V4_similar's `.mono-label` style.
       The eyebrow uses BOTH `.mono-label` (V4 verbatim) and `.text-eyebrow`
       (V21 global) so we inherit V21's mono font + tracking automatically. */
    .stepper-v20-section .process-head {
      max-width: 72rem;
      margin: 0 auto;
      text-align: center;
      margin-bottom: 56px;        /* V4_similar uses --space-9 ≈ 64px; 56px keeps eyebrow tight to row */
    }
    /* P0-4: unified eyebrow color → var(--text-muted). */
    .stepper-v20-section .process-head .mono-label {
      display: block;
      color: var(--text-muted);
      margin-bottom: var(--space-4);
    }
    /* New hint line — 2026-05-26 affordance addition. Sits under the eyebrow,
       quiet Inter caption (NOT mono) signaling steps are clickable. */
    .stepper-v20-section .process-head .stepper-v20-hint {
      display: block;
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0;
      color: #A0A0A0;
      opacity: 0.55;
      margin-top: 4px;
      margin-bottom: 32px;
    }
    /* Process head H2 — V4_similar verbatim (lines 649-655). Bold sans, tight
       tracking, fluid scale. Acts as a tagline summary; not redundant with the
       full mn-labels below because labels are now multi-word ("Map Edge Cases"). */
    .stepper-v20-section .process-head h2 {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 700;
      font-size: clamp(28px, 4vw, 40px);  /* V21 equivalent of V4's --text-2xl-fluid */
      letter-spacing: -0.02em;
      color: #0f172a;
      margin: 0;
    }

    /* Process strip — horizontal row of 5 mind-nodes, equal flex.
       8% inset background dashed line replaces the round-3 animated SVG —
       same visual purpose, simpler implementation. */
    .stepper-v20-section .process-strip {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 72rem;           /* 1152px — matches V21 page-grid */
      margin: 0 auto;
      padding: 0 16px;
    }
    .stepper-v20-section .process-strip::before {
      content: '';
      position: absolute;
      top: 40px;                  /* aligns to mn-icon vertical center (80/2) */
      left: 8%;
      right: 8%;
      height: 1px;
      background: repeating-linear-gradient(to right,
        #cbd5e1 0, #cbd5e1 6px,
        transparent 6px, transparent 12px);
      z-index: 0;
      display: none;
    }
    @media (min-width: 768px) {
      .stepper-v20-section .process-strip::before { display: block; }
    }

    /* Mobile: allow horizontal scroll, hide scrollbar, generous gap between cards */
    @media (max-width: 767px) {
      .stepper-v20-section .process-strip {
        overflow-x: auto;
        gap: 32px;
        padding-bottom: 32px;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .stepper-v20-section .process-strip::-webkit-scrollbar { display: none; }
    }

    /* === Pulse ring keyframe — V4_similar verbatim (lines 697-701) === */
    @keyframes pulse-ring-purple {
      0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35); }
      70%  { box-shadow: 0 0 0 15px rgba(124, 58, 237, 0); }
      100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
    }

    /* Mind-node — column flex column with circle + num + label.
       Acts as the clickable surface (role="button" tabindex="0"). */
    .mind-node {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
      z-index: 1;
      min-width: 100px;
      background: transparent;
      cursor: pointer;
      transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mind-node:focus-visible {
      outline: 2px solid #7c3aed;
      outline-offset: 8px;
      border-radius: 8px;
    }

    /* Mn-icon — 64×64 white circle with 2px slate border, hand-rolled SVG inside.
       V4_similar verbatim (lines 686-695). Pulse ring fires on .has-children. */
    .mn-icon {
      position: relative;
      z-index: 1;
      width: 80px;
      height: 80px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mind-node.has-children .mn-icon {
      animation: pulse-ring-purple 3.4s infinite;
    }

    /* Mn-icon SVG — V4_similar's stroke-1.8 hand-rolled (lines 725-726) */
    .mn-icon svg {
      width: 32px;
      height: 32px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Mn-num — JetBrains Mono 10px, slate, V4_similar verbatim (lines 709-715) */
    .mn-num {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      color: #94a3b8;
      letter-spacing: 0.1em;
      margin-top: -4px;
      font-variant-numeric: tabular-nums;
      transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Mn-label — Inter 13/600/0.01em — V4_similar verbatim (lines 702-708) */
    .mn-label {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      letter-spacing: 0.01em;
      text-align: center;
      max-width: 120px;
      transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Hover — V4_similar lift + invert (lines 716-723) */
    .mind-node:hover .mn-icon {
      border-color: #7c3aed;
      color: #7c3aed;
      transform: scale(1.08);
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(124, 58, 237, 0.14);
    }
    .mind-node:hover .mn-label,
    .mind-node:hover .mn-num {
      color: #7c3aed;
    }

    /* Round 4f burst — one-shot dramatic burst when parent becomes active.
       Scale 1.0 → 1.10 (sharp 30% peak) → 1.0 over 600ms with overshoot
       easing for a physical "pop" feel. Box-shadow ring expands outward
       from 0 to 32px in parallel. `forwards` holds the dual-layer glow at end. */
    /* Subtle one-shot burst — soft scale 1.06 + glow ring expand. 500ms ease-out.
       Forwards holds the dual-layer glow at end. */
    @keyframes mn-icon-burst {
      0%   { transform: scale(1);
             box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4),
                         0 0 25px rgba(124, 58, 237, 0.25),
                         inset 0 0 10px rgba(124, 58, 237, 0.06); }
      40%  { transform: scale(1.06);
             box-shadow: 0 0 0 24px rgba(124, 58, 237, 0),
                         0 0 25px rgba(124, 58, 237, 0.25),
                         inset 0 0 10px rgba(124, 58, 237, 0.06); }
      100% { transform: scale(1);
             box-shadow: 0 0 0 0 rgba(124, 58, 237, 0),
                         0 0 25px rgba(124, 58, 237, 0.25),
                         inset 0 0 10px rgba(124, 58, 237, 0.06); }
    }

    /* Active (aria-expanded="true") — subtle burst + dual-layer glow held. */
    .mind-node[aria-expanded="true"] .mn-icon {
      animation: mn-icon-burst 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 1 forwards;
      background: #ffffff;
      border-color: #7c3aed;
      color: #7c3aed;
      box-shadow: 0 0 25px rgba(124, 58, 237, 0.25),
                  inset 0 0 10px rgba(124, 58, 237, 0.06);
    }
    .mind-node[aria-expanded="true"] .mn-label,
    .mind-node[aria-expanded="true"] .mn-num {
      color: #7c3aed;
    }

    /* New per-node chevron — 2026-05-26 affordance addition. Sits in column
       flow under .mn-label, attached to the visible icon+num+label cluster.
       Hooks into the existing aria-expanded toggle for the rotation. */
    .mind-node .mn-chevron {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      margin-top: 2px;
      color: #A0A0A0;
      opacity: 0.5;
      transition: transform 220ms ease, color 220ms ease, opacity 220ms ease;
      pointer-events: none;
    }
    .mind-node .mn-chevron svg { width: 14px; height: 14px; }

    .mind-node:hover .mn-chevron {
      opacity: 1;
      color: #7c3aed;
    }

    .mind-node[aria-expanded="true"] .mn-chevron {
      transform: rotate(90deg);
      color: #7c3aed;
      opacity: 1;
    }

    /* === Cursor-follow teardrop tooltip — single fixed element, JS-driven === */
    .stepper-v20-tip {
      position: fixed;
      pointer-events: none;
      background: #7c3aed;
      color: #ffffff;
      padding: 6px 14px;
      border-radius: 4px 16px 16px 16px;     /* teardrop */
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2px;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(4px) scale(0.96);
      transform-origin: top left;
      box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
      transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 10000;
    }
    .stepper-v20-tip.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* === Detail panel === */
    .stepper-v20-detail-wrap {
      max-width: 64rem;
      margin: 64px auto 0;
      position: relative;
    }
    .stepper-v20-detail {
      text-align: left;
      max-width: 48rem;
      margin: 0 auto;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .stepper-v20-detail[hidden] {
      display: none;
    }
    .stepper-v20-detail.is-open {
      opacity: 1;
      transform: translateY(0);
    }
    /* P0-4: unified eyebrow color (step number) — 8px margin kept (compact sub-context). */
    .stepper-v20-detail-step {
      color: var(--text-muted);
      display: block;
      margin: 0 0 var(--space-2) 0;
    }
    .stepper-v20-detail-h3 {
      color: #000000;
      margin: 0 0 16px 0;
    }
    .stepper-v20-detail-body {
      color: #555555;
      margin: 0;
    }

    /* ====================================================================
       Section: §5 Stepper — Round 4 BRANCH-EXPAND
       Sub-nodes fan around a clicked step, connected by dotted SVG curves.
       DNA from home page wheel (.mind-node.has-children + .map-link), adapted
       to the horizontal stepper's row layout. ALL purple `#7c3aed`, 8px grid,
       layered on top of rounds 1-3 (no existing rules altered).
       Citations:
         DESIGN-nike.md §typography → label rhythm (Inter 13/500 leaf, 11/500 mobile)
         DESIGN-shopify.md §buttons  → sub-circle 1.5px stroke, soft purple fill
         DESIGN-shopify.md §color    → purple-only, no accent variants
         DESIGN-shopify.md §spacing  → 8px grid offsets, 16/24/32 rhythm
    ==================================================================== */

    /* Mind-node needs overflow:visible to host the absolute branch overlay */
    .mind-node.has-children { overflow: visible; }

    /* Branch wrapper — absolutely positioned, centered on the parent mn-icon.
       Anchored relative to `.mind-node` (which is position:relative). The wrapper
       is 240×240; we offset it upward so its center sits on the mn-icon center
       (mn-icon is 64×64 at the TOP of .mind-node before the gap-12+mn-num+mn-label).
       Vertical position math: mn-icon center = 32px from .mind-node top
       (32 = mn-icon height/2). Wrapper top center = 32px from .mind-node top,
       i.e. top: 32px with translate(-50%, -50%). */
    .stepper-v20-branch {
      position: absolute;
      top: 40px;
      left: 50%;
      width: 240px;
      height: 240px;
      transform: translate(-50%, -50%);
      pointer-events: none;     /* let sub-nodes opt back in */
      opacity: 0;
      visibility: hidden;
      transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  visibility 0s linear 240ms;
      z-index: 3;               /* above strip ::before (z:0) + mn-icon (z:1) */
      display: none;            /* mobile fallback uses detail panel */
    }
    @media (min-width: 768px) {
      .stepper-v20-branch { display: block; }
    }
    .mind-node.is-branch-open .stepper-v20-branch {
      opacity: 1;
      visibility: visible;
      transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  visibility 0s linear 0s;
    }

    /* SVG layer for dotted curves — sits BEHIND the parent circle so the
       circle's white fill clips the inner path-start visually. Sub-nodes
       float above the SVG via z-index. */
    .stepper-v20-branch-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
    }
    .stepper-v20-subnode { z-index: 2; }

    /* Curve = dashed slate path — mirrors home page wheel `.map-link` verbatim
       (index.html:1012-1026). Slate stroke (not purple), 6 6 dasharray, always
       running continuous flow loop. No one-shot reveal — curves fade in via
       opacity only when branch opens; the flow keeps running in background. */
    .stepper-v20-curve {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 1.25;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      opacity: 0;
      animation: stepper-curve-flow 4s linear infinite;
      transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mind-node.is-branch-open .stepper-v20-curve {
      opacity: 1;
    }
    @keyframes stepper-curve-flow {
      from { stroke-dashoffset: 0; }
      to   { stroke-dashoffset: -24; }  /* 2 dashes × (6+6) = 24 — one full tile, matches home page link-flow */
    }
    /* Per-curve stagger — opacity fade-in only (flow loop always runs) */
    .mind-node.is-branch-open .stepper-v20-curve:nth-of-type(1) { transition-delay: 80ms; }
    .mind-node.is-branch-open .stepper-v20-curve:nth-of-type(2) { transition-delay: 180ms; }
    .mind-node.is-branch-open .stepper-v20-curve:nth-of-type(3) { transition-delay: 280ms; }

    /* Sub-node — circle + label group, absolutely placed in the 200×200 space.
       Gap bumped 8→10 for label breathing room. */
    .stepper-v20-subnode {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transform: translate(-50%, -50%) translateY(6px);
      opacity: 0;
      transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: auto;
    }
    /* Round 4f collision fix — for sub-nodes ABOVE the parent, label sits ABOVE
       the dot (column-reverse). Prevents collision between sub-label and the
       parent's own mn-label sitting just below the parent circle. */
    .stepper-v20-subnode.is-above {
      flex-direction: column-reverse;
    }
    .mind-node.is-branch-open .stepper-v20-subnode {
      opacity: 1;
      transform: translate(-50%, -50%) translateY(0);
    }
    .mind-node.is-branch-open .stepper-v20-subnode:nth-child(1) { transition-delay: 120ms, 120ms; }
    .mind-node.is-branch-open .stepper-v20-subnode:nth-child(2) { transition-delay: 220ms, 220ms; }
    .mind-node.is-branch-open .stepper-v20-subnode:nth-child(3) { transition-delay: 320ms, 320ms; }

    /* Sub-circle — leaf-node verbatim port from home page methodology section.
       44×44 hollow circle with 1.5px purple stroke, no fill, no inner dot.
       Matches `index.html:1188-1194` `.mind-node.leaf-node .mn-icon` rule.
       Round-4e: Liraz wanted home page leaf treatment verbatim. */
    .stepper-v20-subnode-dot {
      width: 44px;
      height: 44px;
      border-radius: 9999px;
      border: 1.5px solid rgba(124, 58, 237, 0.5);
      background: #ffffff;
      color: #7c3aed;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
                  box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    /* Icon inside sub-circle — muted slate to match home page leaves' grayed treatment.
       Round-4f: lucide icons (18px, 1.5 stroke) inside the 44×44 hollow circles. */
    .stepper-v20-subnode-dot svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.5;
      color: #94a3b8;
      transition: color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-dot {
      transform: scale(1.1);
      border-color: #7c3aed;
      box-shadow: 0 10px 20px rgba(124, 58, 237, 0.1);
    }
    .mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-dot svg {
      color: #7c3aed;
    }

    /* Sub-label — Inter 13px muted slate (verbatim from home page leaf-node:
       `index.html:1194` `.mind-node.leaf-node .mn-label { font-size: 13px;
       color: var(--text-muted) }`). Round-4e: color shifted from slate-900
       to slate-500 to match home page muted hierarchy. */
    .stepper-v20-subnode-label {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: 0;
      color: #64748b;
      text-align: center;
      text-transform: none;
      white-space: normal;
      max-width: 140px;
      transition: color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mind-node:hover .stepper-v20-subnode:hover .stepper-v20-subnode-label {
      color: #7c3aed;
    }

    /* === Per-step sub-node placement (200×200 local viewBox space) ===
       Parent circle sits at (100, 100). Sub-nodes positioned with CSS
       top/left in percentages so they scale with the viewBox.
       Vertical fan: one above the parent, one or two below. */

    /* Default (middle steps 02, 03, 04) — 3-child layouts fan above + below */
    .mind-node .stepper-v20-subnode.is-above   { top: 6%;  left: 50%; }
    .mind-node .stepper-v20-subnode.is-below-l { top: 90%; left: 22%; }
    .mind-node .stepper-v20-subnode.is-below-r { top: 90%; left: 78%; }

    /* Step 01 — 2-child, edge-aware (lean RIGHT to avoid left edge clipping) */
    .mind-node[data-step="01"] .stepper-v20-subnode.is-above   { top: 8%;  left: 70%; }
    .mind-node[data-step="01"] .stepper-v20-subnode.is-below-r { top: 90%; left: 70%; }

    /* Step 05 — 2-child, edge-aware (lean LEFT to avoid right edge clipping) */
    .mind-node[data-step="05"] .stepper-v20-subnode.is-above   { top: 8%;  left: 30%; }
    .mind-node[data-step="05"] .stepper-v20-subnode.is-below-l { top: 90%; left: 30%; }

    /* === Parent mn-icon visual cue when branch is open ===
       Match the V4_similar aria-expanded glow + halt pulse — PLUS add a 6px
       outer ring (rgba 0.08) to differentiate "branch open" from a plain
       detail-panel open state. Mind-node's `[aria-expanded="true"]` rule
       above owns the base 2-layer glow; this rule adds depth. */
    .mind-node.is-branch-open .mn-icon {
      background: #ffffff;
      border-color: #7c3aed;
      color: #7c3aed;
      box-shadow: 0 0 25px rgba(124, 58, 237, 0.25),
                  inset 0 0 10px rgba(124, 58, 237, 0.06),
                  0 0 0 6px rgba(124, 58, 237, 0.08);
    }
    .mind-node.is-branch-open .mn-num,
    .mind-node.is-branch-open .mn-label {
      color: #7c3aed;
    }

    /* Reduced motion — kill all animations, keep static states.
       Two entry points fire the same selectors:
         1. `@media (prefers-reduced-motion: reduce)` — OS-level user preference (spec-standard).
         2. `.stepper-v20-section.no-reveal-anim` — JS-toggled class set by `initStepperReducedMotionAndEsc()` at boot. Same effect, addressable for testing or future per-section overrides.
       Both paths apply the same rule set below. */
    @media (prefers-reduced-motion: reduce) {
      .mn-icon { animation: none; }
      .mind-node,
      .mn-icon,
      .mn-num,
      .mn-label,
      .stepper-v20-detail,
      .stepper-v20-tip {
        transition: none;
      }
      /* Branch reveal — instant, no stroke-dashoffset draw + kill continuous flow */
      .stepper-v20-branch,
      .stepper-v20-subnode,
      .stepper-v20-curve,
      .stepper-v20-subnode-dot {
        transition: none;
      }
      .stepper-v20-curve {
        stroke-dashoffset: 0;
        opacity: 0.7;
        animation: none;
      }
      .mind-node.is-branch-open .stepper-v20-curve {
        transition-delay: 0s;
        animation: none;
      }
      .mind-node.is-branch-open .stepper-v20-subnode {
        transition-delay: 0s;
        transform: translate(-50%, -50%);
      }
    }
    /* Class-toggled mirror (JS path) — applies via `.stepper-v20-section.no-reveal-anim`
       since the section keeps the dual class (`.stepper-v20-section .process`). */
    .stepper-v20-section.no-reveal-anim .mn-icon { animation: none; }
    .stepper-v20-section.no-reveal-anim .mind-node,
    .stepper-v20-section.no-reveal-anim .mn-icon,
    .stepper-v20-section.no-reveal-anim .mn-num,
    .stepper-v20-section.no-reveal-anim .mn-label,
    .stepper-v20-section.no-reveal-anim .stepper-v20-detail,
    .stepper-v20-section.no-reveal-anim .stepper-v20-tip,
    .stepper-v20-section.no-reveal-anim .stepper-v20-branch,
    .stepper-v20-section.no-reveal-anim .stepper-v20-subnode,
    .stepper-v20-section.no-reveal-anim .stepper-v20-curve,
    .stepper-v20-section.no-reveal-anim .stepper-v20-subnode-dot {
      transition: none;
    }
    .stepper-v20-section.no-reveal-anim .stepper-v20-curve {
      stroke-dashoffset: 0;
      opacity: 0.7;
      animation: none;
    }
    .stepper-v20-section.no-reveal-anim .mind-node.is-branch-open .stepper-v20-curve {
      transition-delay: 0s;
      animation: none;
    }
    .stepper-v20-section.no-reveal-anim .mind-node.is-branch-open .stepper-v20-subnode {
      transition-delay: 0s;
      transform: translate(-50%, -50%);
    }

    /* === Mobile (<768px) fallback ===
       Branch is hidden; rounds 1-3 detail panel remains the disclosure surface.
       Already declared above via `display: none` default + md+ override. */

    /* §7 Pilot Findings v20 CSS retired 2026-05-14 — section removed in commit 9087d37, all .pilot-v20-* rules deleted as orphans. */

    /* === Design Process: mobile responsive (375px scroll-snap) === */
    .process-swipe-hint { display: none; }

    @media (max-width: 480px) {
      /* Tighter section rhythm — 128px is desktop-scale, too generous at 375 */
      .stepper-v20-section.process {
        padding: 72px 16px;
      }
      .stepper-v20-section .process-head {
        margin: 0 0 32px 0;
      }

      /* Strip — scroll container, anchor for ::before */
      .stepper-v20-section .process-strip {
        position: relative;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        padding: 20px 16px;                /* 20px vertical = headroom for pulse-ring shadow (15px) */
        gap: 16px;
        -webkit-overflow-scrolling: touch;
      }

      /* Disable strip-level connector at mobile — using per-card connectors instead
         (strip's overflow:auto traps absolute children in scroll-space, not viewport) */
      .stepper-v20-section .process-strip::before {
        display: none;
      }

      /* Cards — fixed width, consistent height so labels of different line counts
         don't make adjacent cards visually unbalanced */
      .mind-node {
        position: relative;
        flex: 0 0 42%;
        min-width: 0;
        min-height: 124px;
        scroll-snap-align: start;
      }

      /* Per-card connector — each card draws a segment from its icon center to the
         NEXT card's icon center. Self-correcting at any card width / scroll position.
         White icon fill of next card naturally masks the line end. */
      .mind-node::after {
        content: '';
        position: absolute;
        top: 28px;
        left: 50%;
        width: calc(100% + 16px);
        height: 1px;
        background: repeating-linear-gradient(to right,
          #cbd5e1 0, #cbd5e1 6px,
          transparent 6px, transparent 12px);
        z-index: 0;
        pointer-events: none;
      }
      .mind-node:last-child::after {
        display: none;
      }

      /* Icon — same white fill / border as desktop, just smaller */
      .mn-icon { width: 56px; height: 56px; }

      /* Label — let it flow naturally. Wrapping allowed for long labels.
         No min-height — that's what caused v1's "empty bottom" on 1-word labels */
      .mn-label {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.3;
      }

      /* Swipe hint — present + readable, but tighter spacing than v1 */
      .process-swipe-hint {
        display: block;
        text-align: center;
        margin-top: 24px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        text-transform: uppercase;
      }
    }

    /* Section: Challenge & Approach + Decisions (scroll-spy) — flat white (no hairline in v2) */
    .ss-section {
      background: #f8fafc; /* match body — unified slate-50 surface */
      /* 2026-05-18: padding-top 96→48px (rhythm unification — Liraz wants 48px section-break rhythm).
         padding-bottom stays 96px so the next section's 48px top adds up to a comfortable break.
         Was: padding: 96px 16px (2026-05-14 gutter move). */
      padding-block: 48px 96px;
      padding-inline: 16px;
    }
    /* .ss-inner retired 2026-05-14 — replaced by .cs-wrap. */
    /* Intro pattern — trainee §3 verbatim: sticky-center text on left, 3 stacked
       scroll-spy-sections on right (each 140vh, each with its own macbook + iframe).
       Activation handled by IntersectionObserver on the right-column sections via
       rootMargin -50%/-49% (viewport mid-band). §10 Decisions keeps its variant
       via .scroll-spy-left.is-decisions below. */
    .ss-grid {
      display: none;
      align-items: flex-start;
      gap: 80px;
      position: relative;
    }
    .scroll-spy-left {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      padding-right: 40px;
      flex: 1 1 0;
    }
    .scroll-spy-left.is-decisions {
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
    }
    .fade-stack {
      display: grid;
      width: 100%;
    }
    .fade-stack > [data-fade-item] {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transition: opacity 700ms ease-in-out;
    }
    .fade-stack > [data-fade-item].active {
      opacity: 1;
      pointer-events: auto;
      z-index: 10;
    }
    .scroll-spy-right {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      padding-top: 40px;
    }
    .scroll-spy-section {
      min-height: 140vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    /* Intro + Decision: 100vh slot. Mac centered at viewport y=50% at section
       entry — aligned with sticky-centered text on left. Mac then scrolls
       naturally (trainee-pattern). Slot reduced from 140vh→100vh because
       macbooks are shorter than trainee phones, so the offset at section
       entry felt more pronounced.
       Both intro + decision get the same sticky treatment in safe because all
       macs are short (~40vh) vs trainee's phones (~80vh). For future case
       studies using macs, copy this pattern. */
    .scroll-spy-section[data-type="intro"],
    .scroll-spy-section[data-type="decision"] {
      align-items: center;
      min-height: 100vh;
    }
    /* Align mac top edge with the h2 ("Overview") top edge so the mockup
       feels anchored to the heading. Measured at 1440x900: h2 top = 247px,
       centered mac top = 261px → -14px (~-1.5vh) lands mac top at h2 top.
       §10 Decisions uses h3 — translateY value kept identical here; tune in
       a follow-up if h3 alignment needs a different offset. */
    .scroll-spy-section[data-type="intro"] > .mac,
    .scroll-spy-section[data-type="decision"] > .mac {
      transform: translateY(-1.5vh);
    }
    /* Iframe fills its macbook screen slot.
       Direct-child selector to avoid catching nested iframes (e.g. cursor-pin
       siblings or future child wrappers). Comma-extended to cover:
         · [data-type="intro"]    — §3 hero macs
         · [data-type="decision"] — §4 decision macs (e.g. decision-color-check)
         · .ds-mobile-flow        — mobile §4 cursor-flow macs
       Sidebar variant (.ds-mode-frame) is positioned absolutely via its own
       rule and is unaffected. */
    .scroll-spy-section[data-type="intro"]    .macbook-screen > iframe,
    .scroll-spy-section[data-type="decision"] .macbook-screen > iframe,
    .ds-mobile-flow .macbook-screen > iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #fff;
    }
    .ss-mobile {
      display: block;
    }
    .ss-mobile-stack {
      display: flex;
      flex-direction: column;
      gap: 128px;
    }
    .ss-mobile-item {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .ss-mobile-item-phone {
      display: flex;
      justify-content: center;
    }
    .ss-mobile-decisions-h2 {
      margin: 0 0 40px 0;
    }

    /* Runway-frame heading colors */
    .ss-h2 { color: var(--rw-ink); margin: 0 0 24px 0; }
    .ss-h3 { color: var(--rw-ink); margin: 0 0 20px 0; }
    .ss-h2-decisions { color: var(--rw-ink); margin: 0 0 40px 0; }
    .ss-body { color: var(--rw-body); }
    .ss-body p { margin: 0 0 16px 0; }
    .ss-body p:last-child { margin-bottom: 0; }
    .ss-body ul {
      list-style: disc;
      list-style-position: inside;
      margin: 0;
      padding: 0 0 0 8px;
    }
    .ss-body ul li { margin-bottom: 8px; }
    .ss-body ul li:last-child { margin-bottom: 0; }
    .ss-body-decisions p { margin: 0 0 16px 0; }
    .ss-body-decisions p:last-child { margin-bottom: 0; }

    /* Solution */
    .solution-section {
      padding: 96px 16px;
      background: #ffffff;
      overflow: hidden;
    }
    .solution-head {
      max-width: 72rem;
      margin: 0 auto 96px auto;
      text-align: center;
    }
    .solution-eyebrow {
      color: var(--rw-muted);
      margin: 0 0 16px 0;
    }
    .solution-h2 {
      color: var(--rw-ink);
      margin: 0 0 24px 0;
    }
    .solution-lede {
      color: var(--rw-body);
      max-width: 48rem;
      margin: 0 auto;
    }
    .solution-lede p { margin: 0 0 8px 0; }
    .solution-lede p:last-child { margin-bottom: 0; }
    .solution-row {
      max-width: 64rem;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
    }
    .solution-label {
      display: none;
      flex-direction: column;
      gap: 16px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 30;
      max-width: 200px;
    }
    .solution-label.is-left { left: 0; text-align: right; }
    .solution-label.is-right { right: 0; text-align: left; }
    .solution-label h4 {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
      color: var(--rw-ink);
      margin: 0 0 8px 0;
    }
    .solution-label p {
      color: var(--rw-body);
      margin: 0;
    }
    .solution-label .dash {
      position: absolute;
      top: 24px;
      border-top: 1px solid var(--rw-hair);
      width: 48px;
    }
    .solution-label.is-left .dash { left: 100%; margin-left: 16px; }
    .solution-label.is-right .dash { right: 100%; margin-right: 16px; }

    /* Impact */
    .impact-section {
      padding: 96px 16px;
      background: #ffffff;
    }
    .impact-wrap {
      max-width: 56rem;
      margin: 0 auto;
    }
    .impact-h2 {
      color: var(--rw-ink);
      margin: 0 0 32px 0;
    }
    .impact-body { color: var(--rw-body); }
    .impact-body p { margin: 0 0 16px 0; }
    .impact-body p:last-child { margin-bottom: 0; }

    /* Project Details */
    .details-section {
      padding: 96px 16px;
      background: #ffffff;
    }
    .details-wrap {
      max-width: 56rem;
      margin: 0 auto;
    }
    .details-h3 {
      color: var(--rw-ink);
      margin: 0 0 32px 0;
    }
    .details-body { color: var(--rw-body); }
    .details-body p { margin: 0 0 12px 0; }
    .details-body p:last-child { margin-bottom: 0; }
    /* Section: §8 Impact & Outcomes (v20 — bullets + border-top + conclusion) */
    .impact-v20-section {
      /* 2026-05-18: top 96→48px (rhythm unification). Bottom kept at 96px. */
      padding: 48px 16px 96px;
      background: #f8fafc; /* match body — unified slate-50 surface */
    }
    /* .impact-v20-wrap retired 2026-05-14 — replaced by .cs-wrap. Width canonical in /tokens.css. */
    .impact-v20-h2 {
      color: #000000;
      margin: 0 0 32px 0;     /* mb-8 */
      max-width: 44rem;       /* reading measure within 72rem wrap, hugs left edge */
      width: 100%;
    }
    .impact-v20-body {
      color: #555555;
      max-width: 44rem;       /* reading measure */
      width: 100%;
    }
    .impact-v20-list {
      list-style: disc;
      list-style-position: outside;
      margin: 0 0 48px 20px;  /* ml-5 + mb-12 */
      padding: 0;
      max-width: 44rem;       /* bullets stay within reading measure */
    }
    .impact-v20-list li {
      margin: 0;
      padding-left: 4px;
    }
    .impact-v20-list li + li {
      margin-top: 16px;       /* space-y-4 */
    }
    .impact-v20-conclusion {
      padding-top: 32px;      /* pt-8 */
      border-top: 1px solid #E5E5E5;
    }
    .impact-v20-conclusion p {
      color: #000000;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.6;       /* leading-relaxed */
      margin: 0;
    }

    /* P1-5 §11 Impact eyebrow — match other top-level section eyebrows. */
    .impact-v20-eyebrow {
      display: block;
      color: var(--text-muted);
      margin: 0 0 var(--space-4) 0;
      max-width: 44rem;       /* hug left edge of 72rem wrap — grid align with §5/§6 */
      width: 100%;
    }

    /* P0-1 §12 Project Details — missing CSS added.
       Mirrors `.next-case-section` shape so eyebrows align horizontally. */
    .project-details-section {
      padding: var(--space-12) var(--space-4);
      background: var(--bg-base);
    }
    /* .project-details-wrap retired 2026-05-14 — replaced by .cs-wrap. */
    .project-details-eyebrow {
      display: block;
      color: var(--text-muted);
      margin: 0 0 var(--space-4) 0;
      max-width: 44rem;       /* hug left edge of 72rem wrap */
      width: 100%;
    }
    .project-details-h2 {
      color: var(--text-main);
      margin: 0 0 var(--space-5) 0;
      max-width: 44rem;
      width: 100%;
    }
    .project-details-body {
      color: var(--text-muted);
      max-width: 44rem;       /* reading measure for narrative paragraphs */
      width: 100%;
    }

    .details-body strong {
      font-weight: 600;
      color: var(--rw-ink);
    }

    /* ===== EDITORIAL SECTIONS (§5 structures-and-combinations, §6 wizard-to-inline).
       Gemini reference layout. Locked 2026-05-13.
       Section backgrounds killed; both sections sit on the page's default slate-50 surface.
       Rhythm comes from air (padding-block: 96→160px), not surface chrome.
       §5 = 2-col side-by-side (text left, diagram right) — `.editorial-section` default.
       §6 = stacked single column (text on top, diagram full-width below) — `.editorial-section--alt` modifier.
       Diagram is the visual hero — its own lavender bg breathes edge-to-edge (no frame). */
    .editorial-section {
      padding: 96px 16px;     /* was clamp(96px, 14vw, 160px) — clamped to 160 at 1280, too large. Standardized 2026-05-14. */
      background: transparent;
    }
    /* §5 wrap layout: .cs-wrap.cs-flow on mobile (stacked flex). Desktop overrides to 2-col grid.
       .editorial-wrap base rule retired 2026-05-14 — replaced by .cs-wrap + .cs-flow in /tokens.css.
       §6 also retired its alt-wrap gap overrides — §6 uses .cs-wrap (no .cs-flow), rhythm via margins. */
    @media (min-width: 768px) {
      .editorial-section:not(.editorial-section--alt) .cs-wrap {
        display: grid;
        grid-template-columns: minmax(0, 440px) minmax(0, 520px);
        gap: clamp(48px, 6vw, 96px);     /* min gap — space-between will grow it when wrap has extra width */
        justify-content: space-between;  /* §5 text at wrap-left, figure at wrap-right, gap absorbs extra space. 2026-05-14. */
        align-items: center;
      }
    }
    .editorial-text {
      display: flex;
      flex-direction: column;
    }
    .editorial-eyebrow {
      display: block;
      color: var(--text-muted);
      margin: 0 0 16px 0;
    }
    .editorial-h2 {
      color: #000000;
      margin: 0 0 24px 0;
      letter-spacing: -0.02em;
      line-height: 1.18;
    }
    .editorial-figure {
      width: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
    }
    /* No frame around the diagram. Let the lavender bg of the image itself breathe edge-to-edge. */
    .editorial-figure img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .editorial-body {
      color: var(--text-muted);
      text-align: left;
    }
    .editorial-body p {
      margin: 0 0 16px 0;
      line-height: 1.7;
    }
    .editorial-body p:last-child {
      margin-bottom: 0;
    }
    .editorial-body strong {
      color: var(--text-main);     /* Slate 900 — Before/After labels gain emphasis without color */
      font-weight: 600;
      letter-spacing: -0.005em;
    }

    @media (min-width: 768px) {
      .editorial-h2 {
        /* font-size override removed 2026-05-13 — inherit from text-heading-md to match Approach/Challenge size */
        margin-bottom: 24px;            /* was 28 — off 8-grid. Liraz 2026-05-13. */
      }
      /* §6 stacked: text block stays flush-left within wrap, capped width for readable line-length. */
      .editorial-section--alt .editorial-text {
        max-width: 64rem;
      }
      /* §6 stacked figure: full-width within 72rem wrap, centered. */
      .editorial-section--alt .editorial-figure img {
        width: 100%;
      }
    }

    /* §6 Shape Up editorial pattern — rhythm polish 2026-05-14 (ui-expert).
       §6 uses .cs-wrap WITHOUT .cs-flow — no parent flex/gap to neutralize.
       Rhythm owned by per-element margins, producing descending cadence:
       12 → 24 → 48 → 32 → 16. One strong break at lede→figure (evidence enters). */
    .editorial-section--alt .editorial-eyebrow,
    .editorial-section--alt .editorial-h2,
    .editorial-section--alt .editorial-lede,
    .editorial-section--alt .editorial-beats {
      max-width: 44rem;
      width: 100%;
    }
    .editorial-section--alt .editorial-eyebrow {
      margin: 0 0 var(--space-3) 0;                    /* 12 — label belongs TO the h2, tight */
    }
    .editorial-section--alt .editorial-h2 {
      margin: 0 0 var(--space-5) 0;                    /* 24 — semantic break to lede */
      text-wrap: balance;                              /* prevent widow on "Combinations: …" */
    }
    .editorial-lede {
      font-size: 17px;
      line-height: 1.6;
      color: var(--text-muted);
      margin: 0 0 var(--space-8) 0;                    /* 48 — the ONE strong break: evidence enters */
    }
    .editorial-figure--framed {
      display: block;                                  /* override .editorial-figure flex */
      width: 100%;
      margin: 0 0 var(--space-6) 0;                    /* 32 — figure → beats */
      padding: var(--space-3) 0;                       /* 12 vertical breathing inside the rules */
      background: transparent;                        /* the strip is cited evidence, not a card */
      border: 0;
      border-top: 1px solid var(--line-color);
      border-bottom: 1px solid var(--line-color);
      border-radius: 0;
      box-sizing: border-box;
    }
    .editorial-figure--framed img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    .editorial-beats {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);                             /* 32 between Before↔After — paired, not separate */
      margin: 0;                                       /* gap to figure owned by figure margin-bottom */
    }
    .editorial-beat {
      margin: 0;
    }
    .editorial-beat-label {
      display: block;
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 0 0 var(--space-2) 0;                    /* 8 — label tight to body */
    }
    .editorial-beat-body {
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-main);                         /* body promoted to ink — labels carry the muted role */
      margin: 0;
    }

    /* Visibility helpers */
    .hide-mobile { display: none; }
    .show-mobile-only { display: block; }

    /* Responsive */
    @media (min-width: 768px) {
      .hero-phones { height: 600px; }
      .hero-phone.is-left {
        transform: translateX(-240px) rotate(-6deg);
      }
      .hero-phone.is-right {
        transform: translateX(240px) rotate(6deg);
      }
      .hero-phones:hover .hero-phone.is-left {
        transform: translateX(-160px) rotate(-3deg) scale(1.05);
      }
      .hero-phones:hover .hero-phone.is-right {
        transform: translateX(160px) rotate(3deg) scale(1.05);
      }

      .hide-mobile { display: flex; }
      .show-mobile-only { display: none; }

      .ss-grid { display: flex; }
      .ss-mobile { display: none; }

      .solution-row {
        flex-direction: row;
        gap: 96px;
      }
      .solution-label { display: flex; }
    }

/* ===== METADATA — ported verbatim from trainee_v26 (Liraz: "המטה דאטה ... אני רוצה שיחזור") ===== */

/* Shared mono label utility — single source of truth for mono caps eyebrows.
   Ported because .metadata + .cs-num-header rely on it and v21.css did not define one. */
.label-mono{
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    font-weight:500;
    text-transform:uppercase;
    /* Home parity: 0.14em (matches index.html eyebrow tracking) */
    letter-spacing:0.14em;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
}
.label-mono--brand{color:var(--brand-solid);}
.label-mono--block{display:block;}

/* §2 METADATA — 4 columns, centered on page-grid (72rem max-width matches other sections) */
.metadata{
    max-width:72rem;  /* matches .ss-inner / hero / process-strip — Liraz 2026-05-12: "המטה דאטה לא ממורכז!!!!" */
    margin:var(--space-8) auto 0;   /* 2026-05-18: space-7 (40px) → space-8 (48px) so HD-SPINE→META gap = 48px (rhythm unification) */
    padding:var(--space-7) clamp(16px, 5vw, 24px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-6);
    border-top:1px solid var(--line-color);
    border-bottom:1px solid var(--line-color);
}
.meta-cell{text-align:center;}
.meta-cell .label-mono{display:block;margin-bottom:var(--space-2);}
.meta-cell p{
    margin:0;
    font-size:var(--text-base);
    color:var(--text-main);
    line-height:1.5;
}

/* §X NUMBERED SECTION HEADERS — "01 / METADATA · Project facts"
   Visual eyebrow above each top-level section. aria-hidden so
   the existing h2 inside each section keeps semantic role. */
.cs-num-header{
    display:flex;
    align-items:baseline;
    gap:var(--space-4);
    margin-bottom:var(--space-7);
    padding-top:var(--space-9);
}
.cs-num-header .cs-num{
    font-family:var(--font-mono);
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--brand-solid);
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-variant-numeric:tabular-nums;
    flex-shrink:0;
    /* optical: mono uppercase needs slight nudge so the divider lands on baseline */
    line-height:1;
}
.cs-num-header .cs-title-eyebrow{
    font-family:var(--font-mono);
    font-size:var(--text-sm);
    font-weight:500;
    /* sit between brand-solid and text-muted — eye anchors on the number first */
    color:#475569; /* slate-600 — half-step between text-muted (#64748b) and text-main (#0f172a) */
    letter-spacing:0.16em;
    text-transform:uppercase;
    line-height:1;
}
.cs-num-header::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line-color);
    /* align hairline to text baseline (text sits on baseline, descenders below) */
    transform:translateY(-0.32em);
}

/* Responsive — match trainee_v26 / home_v12 breakpoints */
@media (max-width:1023px){
    .metadata{grid-template-columns:repeat(2,1fr);gap:var(--space-6);}
}
@media (max-width:767px){
    .metadata{
        grid-template-columns:1fr;
        padding:var(--space-5) 0;
    }
}
@media (max-width:480px){
    /* Numbered section header — wrap eyebrow under the number on the
       smallest phones so the mono caps don't crowd the hairline divider. */
    .cs-num-header{
        flex-wrap:wrap;
        gap:var(--space-2) var(--space-3);
        padding-top:var(--space-7);
        margin-bottom:var(--space-5);
    }
    .cs-num-header::after{flex-basis:100%;order:99;transform:none;}
}

/* ===== HD-SPINE — home-DNA seed (V21).
   One-of-a-kind signature; appears only between hero-phones and metadata.
   Visual lineage:
     · index.html:579-582 → scroll-bridge dashed line + flowing dots
     · index.html:1066-1101 → pulse-ring-purple keyframe (dual-layer glow)
   Design-MD-Library:
     · DESIGN-nike.md §"Signature Components" (line 489) — earns weight by appearing once
     · DESIGN-nike.md §"Decorative Depth" (line 377) — disc is semantic waypoint, not ornament
     · DESIGN-nike.md §"Whitespace Philosophy" (line 364) — min 64-80px breathing room
     · DESIGN-shopify.md §"Surface & Background" (line 33) — lavender behind, cards stay white
   Liraz: "קטע קטן של הדיסק עם הקווים כאילו הוא רץ עליהם מהטלפון"
   ===== */
.hd-spine{
    position:relative;
    width:2px;
    height:clamp(220px, 7vw, 300px);
    margin:24px auto 0;  /* tight bottom — disc lands just above metadata's hairline */
    pointer-events:none;
}
.hd-spine-anchor{
    position:absolute;
    top:-10px; left:50%;
    width:8px; height:8px;  /* inverse-of-disc: smaller + hollow. Liraz: "קטן יותר ומעין ההיפוך שלו" */
    background:#ffffff;
    border:1.5px solid #7c3aed;
    border-radius:50%;
    transform:translateX(-50%);
    /* no glow — solid filled disc is the "active" one; anchor is the empty starting point */
}
.hd-spine-line{
    position:absolute;
    top:0; left:50%;
    width:1.5px;
    height:100%;
    transform:translateX(-50%);
    background:repeating-linear-gradient(
        to bottom,
        #94a3b8 0, #94a3b8 6px,    /* slate-400 — visible against the #f8fafc bg (was #cbd5e1 too faint) */
        transparent 6px, transparent 12px
    );
}
/* No flowing dots — Liraz 2026-05-12: "מנקודה אחת לשנייה" (anchor → disc, static). */
/* Disc — LOOK lifted from trainee_v22_editorial.html .case-spine .spine-dot (lines 281-296):
   10px, brand-solid fill, dual-layer box-shadow (soft ring + outer glow).
   BEHAVIOR: hidden on page load; travels top → bottom ONCE on first scroll, lands at bottom + stays.
   Liraz 2026-05-12: "אני רוצה שזה יתנגן פעם אחת שהמתחלים לגולל" */
.hd-spine-disc{
    position:absolute;
    top:0; left:50%;
    width:12px; height:12px;  /* match anchor — Liraz: "העיצוב של הקטנה יותר נכון, צריך להחליף ביניהם" */
    margin-left:-6px;
    background:#7c3aed;
    border-radius:50%;
    /* same dual-layer glow as .hd-spine-anchor — they look identical, one static + one travels */
    box-shadow:0 0 0 4px rgba(124, 58, 237, 0.12),
               0 0 16px rgba(124, 58, 237, 0.4);
    opacity:0;  /* JS controls opacity based on scroll position */
    will-change:transform, opacity;
}
/* Disc travel is driven by JS scroll listener (sets transform + opacity inline).
   No CSS animation needed; @keyframes hd-spine-travel below kept as reference / fallback. */
@keyframes hd-spine-travel{
    0%   { transform:translateY(0);
           opacity:0;
           box-shadow:0 0 0 4px rgba(124, 58, 237, 0),
                      0 0 0    rgba(124, 58, 237, 0); }
    12%  { transform:translateY(10px);
           opacity:1;
           box-shadow:0 0 0 6px rgba(124, 58, 237, 0.12),
                      0 0 22px rgba(124, 58, 237, 0.5); }
    50%  { transform:translateY(calc((clamp(220px, 7vw, 300px) - 18px) * 0.5));
           opacity:1;
           box-shadow:0 0 0 10px rgba(124, 58, 237, 0.08),
                      0 0 28px rgba(124, 58, 237, 0.6); }
    100% { transform:translateY(calc(clamp(220px, 7vw, 300px) - 18px));
           opacity:1;
           box-shadow:0 0 0 6px rgba(124, 58, 237, 0.12),
                      0 0 22px rgba(124, 58, 237, 0.5); }
}
@media (prefers-reduced-motion: reduce){
    .hd-spine.is-traveling .hd-spine-disc{ animation:none; }
    .hd-spine-disc{
        top:auto; bottom:0;
        opacity:1;  /* no animation — show disc at destination immediately */
        box-shadow:0 0 0 4px rgba(124, 58, 237, 0.12),
                   0 0 18px rgba(124, 58, 237, 0.5);
    }
}

/* =====================================================================
   §13 NEXT-CASE NAV — cross-link block.
   2 cards, 50/50 split on desktop, stacked on mobile.
   One active link to the next case-study + one disabled "Coming soon" card.
   Reused on trainee.html (task #16) — same component, swapped contents.
   Design DNA: hairline borders, purple `#7c3aed` accent on hover, no soft chrome.
   ===================================================================== */
.next-case-section {
    /* 2026-05-18: top 96→48px (rhythm unification — 48px section-break rhythm). Bottom kept 96px. Was: 96 16 96 (2026-05-14 cap). */
    padding: 48px 16px 96px;
    background: #ffffff;
    border-top: 1px solid var(--line-color);
}
/* Shrink pass 3: wrap narrowed 56rem → 48rem so each card is ~360px wide
   on the 2-col layout, matching editorial body widths and reducing the section's
/* Auto-fit redesign (Task #20, Liraz 2026-05-13: "זה לא בשורה אחת"):
   wrap widened to 80rem so 5 cards land in ONE row at 1280+ viewport
   (~232px each with 16px gaps). Drops to 4 cols at ~1100px, 3 at ~830px, 2 at ~580px, 1 at <440px. */
/* .next-case-wrap retired 2026-05-14 — replaced by .cs-wrap.cs-wrap--grid. */
/* P0-4: unified eyebrow — bottom margin bumped 12 → 16 (var(--space-4)). */
.next-case-eyebrow {
    display: block;
    color: var(--text-muted);
    margin: 0 0 var(--space-4) 0;
}
.next-case-h2 {
    color: #0f172a;
    margin: 0 0 48px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    font-size: 22px;            /* 2026-05-14: shrunk from inherited text-heading-md (32px) — Liraz directive. */
    font-weight: 500;
}
@media (min-width: 768px) {
    .next-case-h2 { font-size: 24px; }
}
/* =====================================================================
   §13 — CASE STUDIES ROW
   Horizontal row of 3 home-style project-cards.
   Source: index.html `.project-card` / `.bloom-card` / `.pj-scene` system,
   ported here so case-study pages can show the same component without
   linking the home stylesheet. Per-card hover (3D scene explode) preserved.
   ===================================================================== */

/* Vars not in /tokens.css — ported from index.html `:root` */
:root {
    --visual-h: 320px;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Row container — 3 equal cols desktop, 1 col below 1024 (skip 2-col).
   3 cards leave an orphan in 2-col, so collapse straight to single column. */
.case-studies-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}
@media (max-width: 1023px) {
    .case-studies-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* === PROJECT CARD — shell (info+visual stacked vertically inside each col) === */
.case-studies-row .project-card {
    background: var(--surface);
    border: 1px solid var(--line-brand-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    /* Override home's side-by-side flex — each col is ~360px wide so stack
       info-above-visual inside every card. */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.case-studies-row .project-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--line-brand-hover);
    transform: translateY(-3px);
}

/* Per-card identity — border tint */
.case-studies-row .project-card.card-blue {
    border-color: var(--line-blue-soft);
}
.case-studies-row .project-card.card-blue:hover {
    border-color: var(--line-blue-hover);
}
.case-studies-row .project-card.card-peach {
    border-color: var(--line-peach-soft);
}
.case-studies-row .project-card.card-peach:hover {
    border-color: var(--line-peach-hover);
}

/* Per-card tints — drives the .project-visual::before radial backdrop */
.case-studies-row .bloom-card              { --card-tint: rgba(124, 58, 237, 0.12); }
.case-studies-row .project-card.card-blue  { --card-tint: rgba(59, 130, 246, 0.12); }
.case-studies-row .project-card.card-peach { --card-tint: rgba(249, 115, 22, 0.12); }

/* Info column (text side) */
.case-studies-row .project-info {
    z-index: 10;
    padding-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.case-studies-row .project-info,
.case-studies-row .bloom-info-col {
    flex: 1;
}
.case-studies-row .card-cta,
.case-studies-row .currently-viewing-pill {
    margin-top: auto;
}
.case-studies-row .card-meta {
    margin-top: auto;
    margin-bottom: var(--space-4);
}
.case-studies-row .project-info h3 {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-main);
}
.case-studies-row .project-info p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Bloom card internals — neutralize home's flex 2-col internal layout */
.case-studies-row .bloom-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
}
.case-studies-row .bloom-info-col,
.case-studies-row .bloom-visual-col {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.case-studies-row .bloom-visual-col {
    flex: none;
}

/* Visual container — height bumped from 140/180 → 180/220 so wireframe
   primitives (wf-header-bar 8px, wf-row 28px, wf-tile, wf-bubble) have
   breathing room and don't get flex-squeezed to 0 height. */
.case-studies-row .project-visual {
    flex: none;
    width: 100%;
    height: clamp(180px, 17vw, 220px);
    background: var(--bg-base);
    border-radius: var(--radius-md);
    border: 1px solid var(--line-color);
    position: relative;
    perspective: 1800px;
    direction: ltr;
    overflow: hidden;
}
.case-studies-row .project-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        var(--card-tint, rgba(124, 58, 237, 0.12)) 0%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* === 3D SCENE === */
.case-studies-row .pj-scene {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.case-studies-row .project-card:hover .pj-scene {
    transform: rotateX(58deg) rotateZ(-35deg) scale(0.9);
}

.case-studies-row .pj-layer {
    position: absolute; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .pj-layer.data {
    opacity: 0;
    transform: translateZ(-40px);
    filter: blur(0.5px);
}
.case-studies-row .project-card:hover .pj-layer.data {
    opacity: 1;
    transform: translateZ(-60px);
    filter: blur(0);
}
.case-studies-row .pj-layer.blueprint {
    opacity: 0.55;
    transform: translateZ(-10px);
}
.case-studies-row .project-card:hover .pj-layer.blueprint {
    opacity: 1;
    transform: translateZ(0px);
}
.case-studies-row .pj-layer.ui {
    transform: translateZ(35px);
    box-shadow: var(--shadow-card), 0 24px 60px -20px rgba(15, 23, 42, 0.22);
}
.case-studies-row .project-card:hover .pj-layer.ui {
    transform: translateZ(60px);
}

/* ================================================================
   FOOTER SYNERGYM CARD — real-screen cascade ported from home
   #bloom-card-d (index.html ~L1679-1800). Every selector re-scoped
   to .case-studies-row .synergym-card so NOTHING bleeds to the
   sibling Leader (.card-blue) / SAFE (.card-peach) wf-* mini-cards
   sharing this .case-studies-row / .pj-scene.

   Internal composition (surface %, device sizes, overlap) copied
   VERBATIM from home — the .cascade-stage uses home's intrinsic
   513×352 box and is uniformly scaled 0.8 → 0.544, absolutely
   centered, to fit the ~350×218 footer visual with air on all
   sides, at rest AND through the .pj-scene Z-tilt swing.

   Refs: DESIGN-RULES.md §Motion + §Cross-project consistency;
   design-md-library/DESIGN-nike.md §Elevation & Depth;
   DESIGN-shopify.md §Depth & Elevation. Product brand #5D5FEF
   (NOT portfolio #7c3aed) per project_mockup-uses-product-brand. */

/* --- cascade stage + 3 overlapping surfaces (scale RE-TUNED for footer) --- */
.case-studies-row .synergym-card .cascade-stage {
    /* MATCH home's intrinsic box exactly (513x352). The surface offsets
       left:24% / right:0 are percentages of stage WIDTH while device sizes
       are fixed px — so the stage width MUST equal home's 513px for the 3
       devices to space identically. A 100% (~350px) footer stage spaced
       them differently; pinning 513px makes the composition pixel-faithful
       to home, then a single uniform scale shrinks the whole trio to fit. */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 513px;
    height: 352px;
    isolation: isolate;
    --cascade-top: 10.23%;
    /* Center via absolute + translate(-50%,-50%) instead of flex: the 513px
       stage overflows the ~350px footer .pj-layer, and flex justify-content
       doesn't cleanly center a heavily-overflowing item (it sat 32px right).
       Absolute centering is dead-center at ANY viewport (responsive footer),
       and a fixed px translate would only be correct at one width. Then a
       single uniform scale shrinks the whole trio (0.544 vs home's 0.8) to
       fit with home-like margins — at rest AND through the .pj-scene Z-tilt.
       Applies to the shared selector so .ui screens + .data sheets stay
       aligned. */
    transform: translate(-50%, -50%) scale(0.544);
    transform-origin: center;
}
.case-studies-row .synergym-card .surface {
    position: absolute;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .synergym-card .surface--trainee { top: var(--cascade-top); left: 0;   z-index: 2; }
.case-studies-row .synergym-card .surface--tasks   { top: var(--cascade-top); left: 24%; z-index: 1; }
.case-studies-row .synergym-card .surface--workout { top: 22.16%;             right: 0;  z-index: 3; }

/* ===== DEVICE: PHONE — "trainee" size 112x238 (inner 400x850) ===== */
.case-studies-row .synergym-card .phone { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .phone[data-phone-size="trainee"] { width: 112px; height: 238px; }
.case-studies-row .synergym-card .phone[data-phone-size="trainee"] .phone-frame {
    transform: scale(calc(238 / 850));
    transform-origin: top left;
    width: 400px; height: 850px;
}
.case-studies-row .synergym-card .phone-frame {
    position: absolute; top: 0; left: 0;
    width: 400px; height: 850px;
    border: 12px solid #0f172a;
    background: #020617;
    border-radius: 3.5rem;
    overflow: hidden;
    transform-origin: top left;
    box-shadow:
        0 0 0 4px rgba(255,255,255,0.10),
        0 8px 16px -4px rgba(15,23,42,0.22),
        0 64px 110px -36px rgba(15,23,42,0.34),
        0 150px 210px -90px rgba(30,27,90,0.34);
}
.case-studies-row .synergym-card .phone-screen { position: relative; width: 100%; height: 100%; background: #020617; }
.case-studies-row .synergym-card .phone-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    height: 28px; width: 33.3333%;
    background: #0f172a;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
    z-index: 100;
}
.case-studies-row .synergym-card .phone-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }

/* ===== DEVICE: MACBOOK — "sm" size 380x238 (inner 1440x900) ===== */
.case-studies-row .synergym-card .mac { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .mac[data-mac-size="sm"] { width: 380px; height: 238px; }
.case-studies-row .synergym-card .mac[data-mac-size="sm"] .macbook-frame {
    transform: scale(calc(380 / 1440));
    transform-origin: top left;
    width: 1440px; height: 900px;
}
.case-studies-row .synergym-card .macbook-frame {
    position: absolute; top: 0; left: 0;
    width: 1440px; height: 900px;
    background: #1e293b;
    border: 1px solid #0f172a;
    border-radius: 30px;
    overflow: hidden;
    transform-origin: top left;
    box-shadow:
        0 8px 20px -4px rgba(15,23,42,0.20),
        0 90px 150px -50px rgba(15,23,42,0.38),
        0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .synergym-card .macbook-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 52px;
    background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .synergym-card .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .synergym-card .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .synergym-card .macbook-screen {
    position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
    width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .synergym-card .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }

/* --- DATA layer: clean process motif (white sheets + dots + wires) --- */
.case-studies-row .synergym-card .dat-slot { position: relative; flex-shrink: 0; }
.case-studies-row .synergym-card .dat-slot.phone-slot { width: 112px; height: 238px; }
.case-studies-row .synergym-card .dat-slot.mac-slot   { width: 380px; height: 238px; }
/* white surface sheet — the real screen floats above it on the tilt */
.case-studies-row .synergym-card .dat-foot {
    position: absolute; inset: 0;
    background: #fbfbff;
    border: 1px dashed rgba(93,95,239,0.55);
    border-radius: 18px;
    box-shadow: 0 10px 24px -16px rgba(30,27,90,0.30);
}
.case-studies-row .synergym-card .mac-slot .dat-foot { border-radius: 10px; }
/* small #5D5FEF accent dot, gentle tight halo */
.case-studies-row .synergym-card .dat-node {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: linear-gradient(135deg,#5D5FEF 0%,#4338ca 100%);
    box-shadow:
        0 0 0 3px rgba(93,95,239,0.12),
        0 0 7px 1px rgba(93,95,239,0.40);
}
/* dashed connector wires linking the 3 dots */
.case-studies-row .synergym-card .pj-layer.data .cascade-stage > svg.dat-wires {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
    .case-studies-row .synergym-card .surface { transition: none; }
}

/* bp-label — code-tag */
.case-studies-row .bp-label {
    position: absolute;
    top: -12px; right: 12px;
    background: #0f172a;
    color: #a78bfa;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', monospace;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateY(10px);
    z-index: 20;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* === BLOOM (Synergym) internals ===
   Phone + dashboard chrome treatments scoped under .case-studies-row so the
   home-page bloom card (index.html) is untouched. Goal: phones read as REAL
   PHONES (narrow aspect, rounded corners, top notch), dashboard reads as a
   REAL WINDOW (traffic-light title bar). */
.case-studies-row .bloom-container {
    width: 88%; height: 78%;
    position: relative;
    display: flex; gap: var(--space-2);
    align-items: center; justify-content: center;
}
/* Phone shape — narrower aspect (~1:1.85) so it reads as a phone, not a card.
   Bumped border-radius for unmistakable phone silhouette. */
.case-studies-row .bloom-mobile {
    width: 24%; height: 96%;
    border-radius: 14px;
    position: relative;
    z-index: 3;
}
/* Dashboard — wider, shorter, smaller radius (window, not phone). */
.case-studies-row .bloom-dash {
    width: 48%; height: 84%;
    border-radius: 8px;
    position: relative;
    z-index: 2;
}
.case-studies-row .ui .bloom-mobile,
.case-studies-row .ui .bloom-dash {
    background: white;
    border: 1px solid var(--line-color);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
/* Phone interior — leave room for notch at top (notch lives in ::before). */
.case-studies-row .ui .bloom-mobile {
    padding: 12px 7px 7px;
    gap: 5px;
}
.case-studies-row .ui .bloom-dash   { padding: var(--space-2); gap: var(--space-2); flex-direction: row; }
.case-studies-row .blueprint .bloom-mobile,
.case-studies-row .blueprint .bloom-dash {
    background: rgba(255,255,255,0.5);
    border: 1px dashed var(--line-color);
    backdrop-filter: blur(4px);
}

/* Phone notch — small pill at the top center of every UI-layer phone.
   Scoped tight to .case-studies-row + .ui so the home-page bloom card and
   any other bloom-mobile elsewhere stay untouched. */
.case-studies-row .ui .bloom-mobile::before {
    content: "";
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 26%; height: 4px;
    background: #0f172a;
    border-radius: 999px;
    opacity: 0.85;
    z-index: 4;
}

/* Dashboard window chrome — traffic-light title bar pinned to the top edge.
   Mirrors the safe-layout ::before treatment so the whole umbrella reads as
   "two phones + one dashboard window" at a glance. */
.case-studies-row .ui .bloom-dash {
    position: relative;
    padding-top: calc(var(--space-2) + 14px);
    overflow: hidden;
}
.case-studies-row .ui .bloom-dash::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 16px;
    border-bottom: 1px solid var(--line-color);
    background-image:
        radial-gradient(circle 2px at 8px 8px, #fbbf24 0 100%, transparent 0),
        radial-gradient(circle 2px at 16px 8px, #34d399 0 100%, transparent 0),
        radial-gradient(circle 2px at 0px 8px, #f87171 0 100%, transparent 0),
        linear-gradient(to bottom, #fbfcfd 0%, #f5f7fa 100%);
    background-position: 0 0, 0 0, 8px 0, 0 0;
    background-repeat: no-repeat;
}

/* Per-surface accent tints for the Synergym umbrella card — ALL surfaces
   share Synergym indigo (#5D5FEF). Synergym is one product; the three
   surfaces (Trainee · Workout · Tasks) use a single brand color. Peach is
   reserved for the safe card and never appears inside the umbrella. */
.case-studies-row .synergym-card .bloom-mobile[data-surface="workout"] .wf-row.is-active {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.16) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
    border-color: rgba(93, 95, 239, 0.26);
}
.case-studies-row .synergym-card .bloom-mobile[data-surface="workout"] .wf-row.is-active .wf-line {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.45) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .synergym-card .bloom-dash[data-surface="tasks"] .wf-tile.is-active {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.16) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
    border-color: rgba(93, 95, 239, 0.26);
}
.case-studies-row .synergym-card .bloom-dash[data-surface="tasks"] .wf-tile.is-active .wf-line {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.45) 0%, rgba(15, 23, 42, 0.22) 62%);
}

.case-studies-row .data .data-grid-box {
    width: 100%; height: 100%;
    position: relative;
    display: flex; gap: var(--space-3);
    align-items: center; justify-content: center;
}
.case-studies-row .data .d-node {
    width: 10px; height: 10px;
    background: var(--gradient-brand);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--brand-solid);
    position: absolute;
}

/* === LEADER (blue) layout === */
.case-studies-row .leader-layout {
    width: 95%; height: 85%;
    position: relative;
    display: flex;
    border-radius: var(--radius-sm);
}
.case-studies-row .l-sidebar {
    width: 10%;
    background: #f8fafc;
    border-right: 1px solid var(--line-color);
    display: flex; flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 6px;
    align-items: center;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.case-studies-row .l-list {
    width: 30%;
    background: white;
    border-right: 1px solid var(--line-color);
    display: flex; flex-direction: column;
    padding: var(--space-2);
    gap: var(--space-1);
}
.case-studies-row .l-main {
    flex: 1;
    background: white;
    display: flex; flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-3);
}
.case-studies-row .l-right {
    width: 22%;
    background: #f8fafc;
    border-left: 1px solid var(--line-color);
    padding: var(--space-3);
    display: flex; flex-direction: column;
    gap: var(--space-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.case-studies-row .ui .leader-layout {
    background: white;
    border: 1px solid var(--line-color);
    box-shadow: var(--shadow-card);
}
.case-studies-row .blueprint .leader-layout {
    background: rgba(255,255,255,0.5);
    border: 1px dashed var(--line-color);
    backdrop-filter: blur(4px);
}
.case-studies-row .blueprint .l-sidebar,
.case-studies-row .blueprint .l-list,
.case-studies-row .blueprint .l-main,
.case-studies-row .blueprint .l-right {
    background: transparent;
    border-color: var(--line-color);
    border-style: dashed;
}
.case-studies-row .l-icon {
    width: 16px; height: 16px;
    background: var(--slate-soft);
    border-radius: 4px;
}
.case-studies-row .l-icon.active { background: var(--text-main); }

/* === SAFE (peach) layout === */
.case-studies-row .safe-layout {
    width: 90%; height: 80%;
    display: flex;
    padding: var(--space-4);
    gap: var(--space-5);
    border-radius: var(--radius-md);
}
.case-studies-row .s-upload {
    flex: 1;
    border-radius: var(--radius-sm);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-3);
}
.case-studies-row .s-chat {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
}
.case-studies-row .s-purple-box {
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.case-studies-row .s-input {
    height: 32px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center;
    padding: 0 var(--space-3);
}
.case-studies-row .ui .safe-layout {
    background: white;
    border: 1px solid var(--line-color);
    box-shadow: var(--shadow-card);
}
.case-studies-row .ui .s-upload {
    border: 1px dashed var(--slate-soft);
    background: #f8fafc;
}
.case-studies-row .ui .s-purple-box {
    background: var(--accent-gray);
    border: 1px solid var(--line-color);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06);
}
.case-studies-row .ui .s-input {
    border: 1px solid var(--line-color);
    background: white;
}
.case-studies-row .blueprint .safe-layout {
    background: rgba(255,255,255,0.5);
    border: 1px dashed var(--line-color);
    backdrop-filter: blur(4px);
}
.case-studies-row .blueprint .s-upload,
.case-studies-row .blueprint .s-purple-box,
.case-studies-row .blueprint .s-input {
    background: transparent;
    border: 1px dashed var(--line-color);
}

/* === SAFE polish v2 — product-UI miniature (chrome + drop zone + chat affordances)
       Mirrors the same block in /index.html so home + footer stay in lockstep.
       All decorations are CSS-only ::before/::after so markup stays verbatim. === */
.case-studies-row .ui .safe-layout {
    position: relative;
    padding-top: calc(var(--space-4) + 16px);
    overflow: hidden;
}
.case-studies-row .ui .safe-layout::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    border-bottom: 1px solid var(--line-color);
    background-image:
        radial-gradient(circle 2.5px at 10px 10px, #fbbf24 0 100%, transparent 0),
        radial-gradient(circle 2.5px at 20px 10px, #34d399 0 100%, transparent 0),
        radial-gradient(circle 2.5px at  0px 10px, #f87171 0 100%, transparent 0),
        linear-gradient(to bottom, #fbfcfd 0%, #f5f7fa 100%);
    background-position: 0 0, 0 0, 10px 0, 0 0;
    background-repeat: no-repeat;
}
.case-studies-row .ui .safe-layout::after {
    content: "ASK";
    position: absolute;
    top: 4px; right: 8px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #c2410c;
    background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(249,115,22,0.06));
    border: 1px solid rgba(249,115,22,0.22);
    padding: 1px 5px;
    border-radius: 999px;
    line-height: 1;
}
/* Compress padding/gap to fit footer scale (s-layout ~313×172) */
.case-studies-row .ui .safe-layout {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: var(--space-3);
    gap: var(--space-3);
}
.case-studies-row .ui .s-upload {
    flex: 0 0 38%;
    position: relative;
    background: repeating-linear-gradient(45deg, #fafbfc 0 5px, #f4f6f9 5px 10px);
    border-radius: 8px;
    gap: 6px;
}
.case-studies-row .ui .s-upload .wf-sq {
    width: 26px; height: 30px;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
.case-studies-row .ui .s-upload .wf-sq::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 8px; height: 8px;
    background: linear-gradient(225deg, var(--line-color) 50%, transparent 50%);
    border-bottom-left-radius: 2px;
}
.case-studies-row .ui .s-upload .wf-sq::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: 5px;
    height: 8px;
    background:
        linear-gradient(to bottom, #e2e8f0 0 2px, transparent 2px 4px, #e2e8f0 4px 6px, transparent 6px 8px);
    border-radius: 1px;
}
.case-studies-row .ui .s-chat {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 5px;
    padding-top: 1px;
}
.case-studies-row .ui .s-chat .wf-bubble { padding: 5px 7px; min-width: 50%; }
.case-studies-row .ui .s-chat .wf-bubble--right { min-width: 55%; }
.case-studies-row .ui .s-chat .wf-bubble--left  { min-width: 65%; }
.case-studies-row .ui .s-chat .wf-input {
    position: relative;
    height: 20px;
    margin-top: auto;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(15,23,42,0.02);
}
.case-studies-row .ui .s-chat .wf-input::before {
    content: "";
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    width: 38%; height: 3px;
    background: var(--accent-gray);
    border-radius: 2px;
}
.case-studies-row .ui .s-chat .wf-input::after {
    content: "";
    position: absolute;
    right: 3px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(249,115,22,1) 0%, rgba(234,88,12,1) 100%);
    box-shadow: 0 1px 3px rgba(234,88,12,0.4);
}

/* === WIREFRAME PRIMITIVES (wf-*) ===
   `flex-shrink: 0` on every fixed-height primitive — otherwise inside the
   compressed footer mobiles (~110px tall after padding) the wf-header-bar
   / wf-row / wf-chip collapse to 0 height and the mocks read as empty
   outlined rectangles. */
.case-studies-row .wf-sq         { width: 14px; height: 14px; background: var(--accent-gray); border-radius: 3px; flex-shrink: 0; }
.case-studies-row .wf-line       { height: 4px; background: var(--accent-gray); border-radius: 2px; flex: 1; min-width: 0; }
.case-studies-row .wf-header-bar { height: 8px; background: var(--text-main); border-radius: 3px; width: 55%; margin-bottom: 4px; flex-shrink: 0; }
.case-studies-row .wf-row        { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: white; border: 1px solid var(--line-color); border-radius: 6px; flex-shrink: 0; min-height: 18px; }
.case-studies-row .wf-grid       { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding-left: 6px; min-height: 0; }
.case-studies-row .wf-tile       { background: white; border: 1px solid var(--line-color); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 0; }
.case-studies-row .wf-side       { width: 22%; border-right: 1px dashed var(--line-color); flex-shrink: 0; }
.case-studies-row .wf-chip       { height: 8px; background: var(--accent-gray); border-radius: 3px; margin-bottom: 4px; flex-shrink: 0; }
.case-studies-row .wf-bubble     { background: white; border: 1px solid var(--line-color); border-radius: 6px; padding: 5px 8px; display: flex; flex-direction: column; gap: 3px; max-width: 75%; flex-shrink: 0; }
.case-studies-row .wf-bubble--right { align-self: flex-end; background: var(--accent-gray); }
.case-studies-row .wf-bubble--right .wf-line { background: rgba(255,255,255,0.6); }
.case-studies-row .wf-bubble--left  { align-self: flex-start; }
.case-studies-row .wf-input      { height: 12px; background: white; border: 1px solid var(--line-color); border-radius: 6px; margin-top: auto; flex-shrink: 0; }

/* Active tints (135deg gradient — purple / blue / peach) */
.case-studies-row .wf-row.is-active,
.case-studies-row .wf-tile.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
    border-color: rgba(124, 58, 237, 0.22);
}
.case-studies-row .wf-row.is-active .wf-line,
.case-studies-row .wf-tile.is-active .wf-line {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .wf-row.is-active-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
    border-color: rgba(59, 130, 246, 0.22);
}
.case-studies-row .wf-row.is-active-blue .wf-line {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}
.case-studies-row .wf-bubble.is-active-peach {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(15, 23, 42, 0.06) 62%), #ffffff;
    border-color: rgba(249, 115, 22, 0.22);
    max-width: 80%;
}
.case-studies-row .wf-bubble.is-active-peach .wf-line {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.4) 0%, rgba(15, 23, 42, 0.22) 62%);
}

/* === CTA links (Leader + safe cards) === */
.case-studies-row .card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-solid);
    text-decoration: none;
    align-self: flex-start;
    transition: gap 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-studies-row .card-cta:hover { gap: var(--space-3); color: var(--text-main); }
.case-studies-row .card-cta .arrow { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.case-studies-row .card-cta:hover .arrow { transform: translateX(2px); }
.case-studies-row .card-cta--blue  { color: var(--blue-solid); }
.case-studies-row .card-cta--blue:hover  { color: var(--text-main); }
.case-studies-row .card-cta--peach { color: var(--peach-solid); }
.case-studies-row .card-cta--peach:hover { color: var(--text-main); }
/* Indigo CTA — Synergym umbrella card on safe.html (View case study →). */
.case-studies-row .card-cta--indigo { color: #5D5FEF; }
.case-studies-row .card-cta--indigo:hover { color: #4338ca; }
.case-studies-row .card-cta--indigo .arrow { color: inherit; }

/* Meta caption above CTA — Synergym card on non-current pages. JetBrains Mono,
   uppercased eyebrow treatment so it reads as metadata, not body copy. */
.case-studies-row .card-meta {
    display: block;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-default);
    margin-top: auto;
    margin-bottom: 0;
    line-height: 1.5;
}

.case-studies-row .card-meta-link {
    color: #5D5FEF;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.case-studies-row .card-meta-link:hover,
.case-studies-row .card-meta-link:focus-visible {
    color: #4338ca;
    border-bottom-color: currentColor;
}
.case-studies-row .card-meta-link:focus-visible {
    outline: none;
}
.case-studies-row .card-meta-arrow {
    color: #5D5FEF;
    margin-left: var(--space-2);
    font-weight: 600;
}

.case-studies-row .currently-viewing-pill {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-3);
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(249, 115, 22, 0.06));
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.26);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    align-self: flex-start;
    line-height: 1.2;
}

/* safe card on safe.html — current-page hairline (peach) */
.case-studies-row .card-peach.is-current,
.case-studies-row .card-peach.is-current:hover {
    border-color: var(--line-peach-hover);
    transform: none;
}

/* =====================================================================
   §13 — SYNERGYM UMBRELLA CARD (3-card row refactor, 2026-05-17)
   Slot 1 is the umbrella card that surfaces 3 sub-pills
   (Trainee · Workout Builder · Task Management). Slot 2/3 are
   Leader.Codes / safe. Grid lives in the base `.case-studies-row` rule
   above (`repeat(3, 1fr)` desktop → 1col below 1024).
   ===================================================================== */

/* Umbrella card — slightly more presence + indigo accent. */
.case-studies-row .synergym-card {
    --card-tint: rgba(93, 95, 239, 0.10); /* Synergym indigo wash */
    border-color: rgba(93, 95, 239, 0.22);
}
.case-studies-row .synergym-card:hover {
    border-color: rgba(93, 95, 239, 0.42);
}
.case-studies-row .synergym-card.is-current,
.case-studies-row .synergym-card.is-current:hover {
    border-color: #A5B4FC;
}

/* Override existing .data .d-node hue for the umbrella to indigo. */
.case-studies-row .synergym-card .data .d-node {
    background: linear-gradient(135deg, #5D5FEF 0%, #0f172a 62%);
    box-shadow: 0 0 10px rgba(93, 95, 239, 0.55);
}

/* Indigo currently-viewing pill — Synergym umbrella card on trainee.html /
   workout.html. Mirrors the peach pill structure (line height, padding,
   border radius from `.currently-viewing-pill`) and only overrides the
   color hue. No leading dot — per Liraz's locked spec (2026-05-17). */
.case-studies-row .currently-viewing-pill--indigo {
    background: linear-gradient(135deg, rgba(93, 95, 239, 0.14), rgba(93, 95, 239, 0.06));
    color: #4338ca;
    border-color: rgba(93, 95, 239, 0.28);
}
.case-studies-row .currently-viewing-pill--blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06));
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.28);
}

/* === Reduced-motion / hover-none neutralization === */
@media (hover: none) {
    .case-studies-row .project-card:hover {
        transform: none;
        box-shadow: var(--shadow-card);
    }
    .case-studies-row .project-card:hover .pj-scene { transform: none; }
    .case-studies-row .project-card:hover .pj-layer.data {
        opacity: 0;
        transform: translateZ(-40px);
        filter: blur(0.5px);
    }
    .case-studies-row .project-card:hover .pj-layer.blueprint {
        opacity: 0.55;
        transform: translateZ(-10px);
    }
    .case-studies-row .project-card:hover .pj-layer.ui {
        transform: translateZ(35px);
    }
    .case-studies-row .project-card.card-blue:hover  { border-color: var(--line-blue-soft); }
    .case-studies-row .project-card.card-peach:hover { border-color: var(--line-peach-soft); }
    .case-studies-row .card-cta:hover {
        gap: var(--space-2);
        color: var(--brand-solid);
    }
    .case-studies-row .card-cta:hover .arrow { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .case-studies-row .project-card,
    .case-studies-row .pj-scene,
    .case-studies-row .pj-layer {
        transition: none;
    }
    .case-studies-row .project-card:hover { transform: none; }
    .case-studies-row .project-card:hover .pj-scene { transform: none; }
}

/* =====================================================================
   WORKOUT BUILDER PHONE INTERNALS — vanilla port of wb_v20_final
   (sketches/case-study/workout-builder/wb_v20_final, React+Tailwind).
   Per `feedback_template-fidelity-combine-not-redesign.md`: every
   `#5D5FEF`, dimension, transition preserved verbatim.

   Scoped under `.wb-*` so it never affects portfolio frame / trainee
   internals. Renders inside a 400×850 phone-screen viewport.
   ===================================================================== */

/* Shared root surface inside phone-screen */
.wb-app {
    position:absolute;
    inset:0;
    background:#F4F6F9;
    color:#1C1C1E;
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    /* Inside dark phone-frame; the screen itself is light */
    border-radius:inherit;
}
.wb-scroll {
    flex:1;
    overflow-y:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
    padding-bottom:88px; /* room for floating CTA */
    position:relative;
}
.wb-scroll::-webkit-scrollbar { display:none; }

/* ===== SESSION EDITOR (wb_v20_final renderSessionScreen, lines 423-568) ===== */

.wb-session__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:42px 16px 10px;       /* matches pt-12/pb-3/px-5 */
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(244,246,249,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.wb-session__header-left {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.wb-icon-btn {
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9999px;
    border:0;
    background:transparent;
    color:#1C1C1E;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
}
.wb-icon-btn svg { width:20px; height:20px; stroke-width:2.5; }
.wb-avatar {
    width:36px;
    height:36px;
    border-radius:9999px;
    object-fit:cover;
    border:1px solid #E5E5EA;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    flex-shrink:0;
}
.wb-session__title {
    display:flex;
    flex-direction:column;
    min-width:0;
}
.wb-session__title-h1 {
    font-size:15px;
    font-weight:700;
    color:#1C1C1E;
    letter-spacing:-0.01em;
    line-height:1.15;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.wb-session__title-sub {
    font-size:12px;
    font-weight:500;
    color:#8E8E93;
    line-height:1.15;
    margin-top:2px;
}
.wb-session__header-right {
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.wb-round-btn {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9999px;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    color:#1C1C1E;
    cursor:pointer;
    padding:0;
}
.wb-round-btn svg { width:14px; height:14px; }
.wb-save-btn {
    background:#5D5FEF;
    color:#FFFFFF;
    padding:8px 16px;
    border-radius:9999px;
    border:0;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(93,95,239,0.3);
    transition:background-color 200ms ease;
}
.wb-save-btn:hover { background:#4a4cbf; }

/* Workout cover banner */
.wb-cover {
    margin:10px 16px 0;
    height:84px;
    border-radius:16px;
    position:relative;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    border:1px solid #E5E5EA;
    /* Cover image: gym/workout silhouette via gradient + radial highlight (no remote img to keep it self-contained) */
    background:
        radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,0.16), transparent 55%),
        linear-gradient(135deg, #1f2937 0%, #0f172a 60%, #111827 100%);
}
.wb-cover::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.30);
}
.wb-cover__row {
    position:absolute;
    inset:0;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:1;
}
.wb-cover__left {
    display:flex;
    align-items:center;
    gap:6px;
}
.wb-cover__title {
    color:#FFFFFF;
    font-size:15px;
    font-weight:600;
    letter-spacing:0.02em;
    margin:0;
}
.wb-cover svg { width:18px; height:18px; color:#FFFFFF; stroke-width:2.5; }

/* Stats bar */
.wb-stats {
    margin:18px 22px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.wb-stats__text {
    font-size:12px;
    color:#8E8E93;
    font-weight:500;
    letter-spacing:-0.01em;
}
.wb-stats__text strong {
    color:#1C1C1E;
    font-weight:700;
    margin-right:10px;
}
.wb-stats__text strong:last-of-type { margin-right:0; }
.wb-stats__sort {
    width:28px;
    height:28px;
    border-radius:9999px;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    cursor:pointer;
}
.wb-stats__sort svg { width:10px; height:10px; color:#1C1C1E; stroke-width:3; }

/* Section list */
.wb-sections {
    padding:0 16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.wb-section-card {
    background:#FAFAFA;
    border-radius:24px;
    box-shadow:0 4px 16px rgba(0,0,0,0.03);
    border:1px solid #E5E5EA;
    overflow:hidden;
}
.wb-section-card__head {
    width:100%;
    padding:14px 18px;
    background:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    cursor:pointer;
    font-family:inherit;
}
.wb-section-card[data-open="true"] .wb-section-card__head {
    border-bottom:1px solid #E5E5EA;
}
.wb-section-card__head-left {
    display:flex;
    align-items:center;
    gap:10px;
}
.wb-section-card__head svg { width:18px; height:18px; color:#1C1C1E; stroke-width:2.5; }
.wb-section-card__title {
    font-size:15px;
    font-weight:600;
    color:#1C1C1E;
    letter-spacing:-0.01em;
}
.wb-section-card__body {
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.wb-section-card[data-open="false"] .wb-section-card__body { display:none; }

/* Exercise block (single + flow/superset) */
.wb-block {
    background:#FFFFFF;
    border-radius:18px;
    border:1px solid #E5E5EA;
    box-shadow:0 2px 8px rgba(0,0,0,0.02);
    padding:12px;
    position:relative;
}
.wb-block--flow {
    /* The vertical purple connector that ties exercises into a superset */
    border:1px solid #C7C8F9;
    background:linear-gradient(180deg, #FFFFFF 0%, #F8F9FE 100%);
}
.wb-block__exercises {
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
}
/* The flow connector — vertical purple line between exercises */
.wb-block--flow .wb-block__exercises::before {
    content:"";
    position:absolute;
    left:22px;
    top:32px;
    bottom:32px;
    width:2px;
    background:linear-gradient(180deg, #5D5FEF 0%, #A5B4FC 100%);
    border-radius:1px;
    z-index:0;
}
.wb-exercise {
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    z-index:1;
}
.wb-exercise__thumb {
    width:44px;
    height:44px;
    border-radius:12px;
    background:#F4F6F9;
    border:1px solid #E5E5EA;
    flex-shrink:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.wb-exercise__meta {
    flex:1;
    min-width:0;
}
.wb-exercise__name {
    font-size:13px;
    font-weight:600;
    color:#1C1C1E;
    letter-spacing:-0.01em;
    line-height:1.2;
    margin:0 0 2px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.wb-exercise__tags {
    font-size:10px;
    color:#8E8E93;
    font-weight:500;
    letter-spacing:-0.01em;
}
.wb-exercise__star {
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#D1D1D6;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
}
.wb-exercise__star.is-starred { color:#5D5FEF; }
.wb-exercise__star.is-starred svg { fill:#5D5FEF; }
.wb-exercise__star svg { width:18px; height:18px; }

/* Set table */
.wb-set-table {
    margin-top:10px;
    border-top:1px solid #F0F0F0;
    padding-top:10px;
}
.wb-set-row {
    display:grid;
    grid-template-columns:32px 1fr 1fr 1fr;
    gap:6px;
    align-items:center;
    padding:4px 0;
}
.wb-set-row--head {
    font-size:9px;
    font-weight:600;
    color:#8E8E93;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding-bottom:4px;
    border-bottom:1px solid #F0F0F0;
}
.wb-set-row--head + .wb-set-row { padding-top:6px; }
.wb-set-row__cell {
    font-size:12px;
    font-weight:600;
    color:#1C1C1E;
    text-align:center;
    letter-spacing:-0.01em;
}
.wb-set-row__cell--num {
    width:24px;
    height:24px;
    border-radius:8px;
    background:#F0F1FF;
    color:#5D5FEF;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
}
.wb-add-set {
    margin-top:8px;
    width:100%;
    padding:8px;
    border-radius:10px;
    background:#F0F1FF;
    color:#5D5FEF;
    border:0;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:background-color 200ms ease;
    font-family:inherit;
}
.wb-add-set:hover { background:#E0E2FF; }

/* Floating new-workout CTA */
.wb-fab-wrap {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:16px;
    z-index:40;
    pointer-events:none;
    background:linear-gradient(0deg, #F4F6F9 0%, rgba(244,246,249,0.8) 60%, transparent 100%);
    display:flex;
    justify-content:flex-start;
}
.wb-fab {
    pointer-events:auto;
    padding:11px 18px;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    color:#1C1C1E;
    border-radius:9999px;
    font-weight:700;
    font-size:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-family:inherit;
}

/* ===== SELECT EXERCISES (wb_v20_final renderSelectScreen, lines 571-665) ===== */

.wb-select__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:36px 20px 14px;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid rgba(229,229,234,0.5);
    box-shadow:0 1px 3px rgba(0,0,0,0.02);
}
.wb-select__back {
    color:#8E8E93;
    background:transparent;
    border:0;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    padding:0;
    font-family:inherit;
}
.wb-select__back:hover { color:#1C1C1E; }
.wb-select__title {
    font-size:15px;
    font-weight:600;
    color:#1C1C1E;
    letter-spacing:-0.01em;
    margin:0;
}
.wb-select__filter {
    width:36px;
    height:36px;
    border-radius:9999px;
    background:#F4F6F9;
    border:1px solid #E5E5EA;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#1C1C1E;
}
.wb-select__filter svg { width:16px; height:16px; }

.wb-select__body {
    padding:0 16px;
    margin-top:18px;
}

/* Search bar */
.wb-search {
    position:relative;
    margin-bottom:18px;
}
.wb-search__icon {
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    color:#8E8E93;
    pointer-events:none;
}
.wb-search__input {
    width:100%;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    box-shadow:0 4px 16px rgba(0,0,0,0.03);
    border-radius:18px;
    padding:13px 14px 13px 40px;
    color:#1C1C1E;
    font-size:13px;
    font-weight:500;
    box-sizing:border-box;
    font-family:inherit;
    outline:none;
    transition:box-shadow 200ms ease;
}
.wb-search__input::placeholder { color:#8E8E93; }
.wb-search__input:focus {
    box-shadow:0 0 0 3px rgba(93,95,239,0.18), 0 4px 16px rgba(0,0,0,0.03);
}

/* Segmented control */
.wb-segmented {
    display:flex;
    background:rgba(229,229,234,0.5);
    padding:5px;
    border-radius:14px;
    margin-bottom:18px;
    gap:0;
}
.wb-segmented__btn {
    flex:1;
    padding:7px 0;
    border:0;
    background:transparent;
    color:#8E8E93;
    font-size:11px;
    font-weight:500;
    border-radius:10px;
    letter-spacing:-0.01em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-family:inherit;
    transition:background-color 200ms ease;
}
.wb-segmented__btn svg { width:12px; height:12px; }
.wb-segmented__btn.is-active {
    background:#FFFFFF;
    color:#1C1C1E;
    font-weight:600;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.wb-section-label {
    font-size:10px;
    font-weight:600;
    color:#8E8E93;
    text-transform:uppercase;
    letter-spacing:0.12em;
    margin:0 0 12px 4px;
}

/* Exercise list */
.wb-list {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:8px;
}
.wb-list-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    border-radius:22px;
    box-shadow:0 8px 24px rgba(0,0,0,0.03);
    cursor:pointer;
    transition:box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.wb-list-item:hover {
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.wb-list-item.is-selected {
    border:2px solid #5D5FEF;
    padding:11px;       /* compensate the extra 1px border */
    box-shadow:0 8px 24px rgba(93,95,239,0.12);
}
.wb-list-item__left {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}
.wb-list-item__thumb {
    width:44px;
    height:44px;
    border-radius:14px;
    background:#F4F6F9;
    border:1px solid #E5E5EA;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    overflow:hidden;
}
.wb-list-item__name {
    font-size:13px;
    font-weight:600;
    color:#1C1C1E;
    letter-spacing:-0.01em;
    line-height:1.25;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.wb-list-item__tags {
    font-size:11px;
    color:#8E8E93;
    font-weight:500;
    letter-spacing:-0.01em;
    margin-top:2px;
    text-transform:capitalize;
}
.wb-list-item__tags-sep {
    margin:0 6px;
}
.wb-list-item__star {
    width:24px;
    height:24px;
    color:#D1D1D6;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wb-list-item__star.is-on { color:#5D5FEF; }
.wb-list-item__star.is-on svg { fill:#5D5FEF; }
.wb-list-item__star svg { width:18px; height:18px; }

/* Floating action bar */
.wb-action-bar {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px 18px 24px;
    z-index:20;
    background:linear-gradient(0deg, #F4F6F9 0%, #F4F6F9 60%, transparent 100%);
    display:flex;
    gap:10px;
}
.wb-action-bar__btn {
    flex:1;
    padding:13px 0;
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    border-radius:16px;
    font-weight:600;
    font-size:12px;
    color:#8E8E93;
    box-shadow:0 4px 16px rgba(0,0,0,0.04);
    cursor:not-allowed;
    opacity:0.55;
    font-family:inherit;
    transition:opacity 200ms ease, background-color 200ms ease;
}
.wb-action-bar__btn.is-enabled {
    color:#1C1C1E;
    opacity:1;
    cursor:pointer;
}
.wb-action-bar__btn.is-enabled:hover { background:#F8F9FE; }
.wb-action-bar__btn--primary {
    background:#5D5FEF;
    color:#FFFFFF;
    border-color:#5D5FEF;
    box-shadow:0 8px 24px rgba(93,95,239,0.32);
    opacity:1;
    cursor:pointer;
}
.wb-action-bar__btn--primary:hover { background:#4a4cbf; }

/* ============================================================
   SECTION PADDING — responsive standardization (2026-05-14, Liraz "comfortable" pick)
   Base (mobile <768): 64px each side → 128px between sections
   Tablet (768-1023):  80px each side → 160px between sections
   Desktop (≥1024):    96px each side → 192px between sections (base rule values already set above)
   ============================================================ */
@media (max-width: 767px) {
  .hero,
  .editorial-section,
  .stepper-v20-section.process,
  .impact-v20-section,
  .project-details-section,
  .next-case-section {
    padding-block: 64px;
  }
  /* 2026-05-18: .ss-section split out — top→48px (rhythm unification, matches desktop). Bottom kept 64px for mobile comfort. */
  .ss-section { padding-block: 48px 64px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero,
  .editorial-section,
  .stepper-v20-section.process,
  .impact-v20-section,
  .project-details-section,
  .ss-section,
  .next-case-section {
    padding-block: 80px;
  }
}

/* §3 macs: hide title bar + extend screen so iframe = 1440×900 = design aspect.
   Eliminates the 32px aspect mismatch that left whitespace on right/bottom.
   §4 decision macs share the same treatment for visual consistency. */
.scroll-spy-section[data-type="intro"] .macbook-bar,
.scroll-spy-section[data-type="decision"] .macbook-bar { display: none; }
.scroll-spy-section[data-type="intro"] .macbook-screen,
.scroll-spy-section[data-type="decision"] .macbook-screen { top: 0; height: 100%; }

/* §3 + §4 cursor-flow demo — dark fill for white iframe background.
   Scoped to .scroll-spy-section[data-type="intro|decision"] so it does NOT
   affect trainee/workout cursor-pins on dark surfaces (shared
   frosted-glass treatment at lines 1291–1321 stays intact). */
.scroll-spy-section[data-type="intro"] .cursor-pin,
.scroll-spy-section[data-type="decision"] .cursor-pin,
.ds-mobile-flow .cursor-pin {
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.35));
}
.scroll-spy-section[data-type="intro"] .cursor-pin .cursor-pin-inner,
.scroll-spy-section[data-type="decision"] .cursor-pin .cursor-pin-inner,
.ds-mobile-flow .cursor-pin .cursor-pin-inner {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* §4 decision-sidebar mac: 3-iframe cross-fade stack.
   Three iframes pre-mounted (ask/check/report), absolute-positioned, opacity-stacked.
   initDecisionSidebarCycle() in safe.js toggles .is-active every 2700ms
   (DWELL 2400ms + FADE 300ms). Mirrors the hero-mac cross-fade contract. */
/* .ds-mode-stack inherits .macbook-screen's position:absolute (higher specificity),
   so an explicit position rule here is redundant. The stacking context is
   established by the absolute positioning + z-index on .ds-mode-frame. */
.ds-mode-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  background: #FFFFFF;
}
.ds-mode-frame.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ds-mode-frame { transition: none; }
}

/* Mobile decision-color-check wrapper: gives the cursor-flow engine a
   .scroll-spy-section ancestor without participating in the desktop
   fade-stack (no data-index, no data-type). Keeps mac layout intact. */
.ds-mobile-flow {
  display: flex;
  justify-content: center;
  width: 100%;
  /* Reset min-height inherited from .scroll-spy-section (140vh) — mobile
     mac should flow inline with the .ss-mobile-item-phone container, not
     reserve a viewport-tall slot. */
  min-height: 0;
}



/* ============================================================
   Mac 3 — approach morph (slot → value → card chrome)
   ============================================================
   §3 Mac 3 (desktop) + §3 Approach mac (mobile) host this inline
   in-code animation that replaces the prior Report iframe + cursor
   flow. The morph shows a Conversational-template card filling in
   six bracketed slots, then assembling the Quick Scan card chrome
   (SAFE sparkle + badge + progress + actions). Controller lives in
   safe.js → initSafeApproachMorph().

   Discipline: every selector in this block is scoped under
   `.safe-approach-morph`. No global rules. Inner classes use the
   `sam-` prefix to avoid colliding with global `.card`, `.slot`,
   `.chrome`, `.btn`, `.actions` used elsewhere in this stylesheet.
   ============================================================ */

.safe-approach-morph {
  /* Scoped tokens — Synergym product brand (NOT portfolio purple).
     Synergym indigo lives at #5D5FEF and is reserved for in-product
     mockups per project_mockup-uses-product-brand-not-portfolio. */
  --sam-synergym: #5D5FEF;
  --sam-synergym-soft: #EEEEFB;
  --sam-synergym-soft-2: #F5F5FE;
  --sam-synergym-pulse-bg: #E0E1FB;
  --sam-synergym-pulse-ring: rgba(93, 95, 239, 0.10);

  --sam-canvas: #F8F9FB;
  --sam-surface: #FFFFFF;
  --sam-ink: #0F172A;
  --sam-ink-soft: #1E293B;
  --sam-muted: #64748B;
  --sam-muted-2: #94A3B8;
  --sam-line: #E5E7EB;
  --sam-line-2: #EDEFF3;

  --sam-elev:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -12px rgba(15, 23, 42, 0.06);

  --sam-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Host fills the .macbook-screen entirely and centers the card. The
     macbook-screen is 1440×868 in source; transform: scale() on the
     parent .macbook-frame handles the final on-screen size. */
  position: absolute;
  inset: 0;
  background: var(--sam-canvas);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--sam-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The morph card sizing is calibrated for the v4 sandbox (520px @ 1x).
     Inside the 1440×868 macbook-screen source frame, scale the entire
     morph up so the card reads at editorial size after the macbook-frame
     scale-down. 2.4x source × md-scale ≈ portfolio editorial size. */
  font-size: 1rem;
}

.safe-approach-morph .sam-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
}

.safe-approach-morph * ,
.safe-approach-morph *::before,
.safe-approach-morph *::after {
  box-sizing: border-box;
}

/* ---------- Card wrap (loop restart fade) ---------- */
.safe-approach-morph .sam-card-wrap {
  width: 100%;
  max-width: 1040px; /* 2x the v4 sandbox 520px — calibrated for 1440-source */
  transition: opacity 500ms var(--sam-ease);
}
.safe-approach-morph .sam-card-wrap[data-state="restart"] { opacity: 0; }

/* ---------- Card ---------- */
.safe-approach-morph .sam-card {
  width: 100%;
  background: var(--sam-surface);
  border: 1px solid var(--sam-line);
  border-radius: 24px;
  box-shadow: var(--sam-elev);
  padding: 40px 44px;
  position: relative;
  /* Height is monotonically ratcheted via JS — never decreases within
     a cycle. Snaps to 0 between cycles while card is faded out. */
  min-height: 0;
  transition: padding 400ms var(--sam-ease), min-height 360ms var(--sam-ease);
}
.safe-approach-morph .sam-card[data-phase="reset"] {
  min-height: 0 !important;
  transition: none;
}

/* ---------- Template title row ---------- */
.safe-approach-morph .sam-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sam-muted-2);
  margin-bottom: 24px;
  opacity: 1;
  transition:
    opacity 500ms var(--sam-ease),
    margin 500ms var(--sam-ease),
    height 500ms var(--sam-ease);
}
.safe-approach-morph .sam-title-row[data-hidden="true"] {
  opacity: 0;
  margin-bottom: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.safe-approach-morph .sam-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sam-muted-2);
}

/* ---------- Body ---------- */
.safe-approach-morph .sam-body {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  font-size: 24px;
  line-height: 1.7;
  color: var(--sam-muted);
  transition: padding 400ms var(--sam-ease), color 600ms var(--sam-ease);
}
.safe-approach-morph .sam-body p {
  margin: 0 0 20px 0;
}
.safe-approach-morph .sam-body p:last-of-type { margin-bottom: 0; }
.safe-approach-morph .sam-body[data-prose="true"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 23px;
  color: var(--sam-ink-soft);
  line-height: 1.65;
}
.safe-approach-morph .sam-card[data-chrome="true"] .sam-body {
  padding-left: 52px;
}

/* ---------- Slot pills ---------- */
.safe-approach-morph .sam-slot {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  font-size: 20px;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--sam-synergym-soft);
  color: var(--sam-synergym);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translateZ(0);
  transition:
    background 500ms var(--sam-ease),
    color 500ms var(--sam-ease),
    padding 500ms var(--sam-ease),
    margin 500ms var(--sam-ease),
    font-size 500ms var(--sam-ease),
    transform 350ms var(--sam-ease),
    box-shadow 350ms var(--sam-ease);
}
.safe-approach-morph .sam-slot--tight { margin-right: -5px; }
.safe-approach-morph .sam-slot--tight[data-state="resolved"] { margin-right: 0; }

.safe-approach-morph .sam-slot[data-state="pulse"] {
  transform: scale(1.06);
  background: var(--sam-synergym-pulse-bg);
  box-shadow: 0 0 0 6px var(--sam-synergym-pulse-ring);
}
.safe-approach-morph .sam-slot[data-state="filled"] {
  background: var(--sam-synergym-soft);
  color: var(--sam-synergym);
}
.safe-approach-morph .sam-slot[data-state="resolved"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 23px;
  padding: 0;
  background: transparent;
  color: var(--sam-ink);
  font-weight: 500;
  box-shadow: none;
}

/* ---------- Chrome ---------- */
.safe-approach-morph .sam-chrome {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity 280ms var(--sam-ease) 40ms,
    margin-top 320ms var(--sam-ease);
}
.safe-approach-morph .sam-chrome[data-on="true"] {
  margin-top: 28px;
  max-height: 600px;
  opacity: 1;
}

.safe-approach-morph .sam-chrome-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 280ms var(--sam-ease),
    transform 280ms var(--sam-ease),
    max-height 320ms var(--sam-ease),
    margin-bottom 320ms var(--sam-ease);
}
.safe-approach-morph .sam-chrome-row[data-on="true"] {
  max-height: 64px;
  margin-bottom: 24px;
  opacity: 1;
  transform: translateY(0);
}

.safe-approach-morph .sam-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sam-synergym-soft);
  color: var(--sam-synergym);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 999px;
}
.safe-approach-morph .sam-badge svg { width: 18px; height: 18px; }

.safe-approach-morph .sam-status {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  color: var(--sam-muted);
}

.safe-approach-morph .sam-progress-track {
  width: 100%;
  max-height: 0;
  height: 7px;
  background: var(--sam-line-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--sam-ease),
    transform 300ms var(--sam-ease),
    max-height 320ms var(--sam-ease),
    margin-bottom 320ms var(--sam-ease);
}
.safe-approach-morph .sam-progress-track[data-on="true"] {
  max-height: 7px;
  margin-bottom: 16px;
  opacity: 1;
  transform: translateY(0);
}
.safe-approach-morph .sam-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--sam-synergym);
  border-radius: 999px;
  transition: width 2500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.safe-approach-morph .sam-progress-fill[data-fill="full"] { width: 100%; }

.safe-approach-morph .sam-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px;
  color: var(--sam-muted);
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--sam-ease),
    transform 300ms var(--sam-ease),
    max-height 320ms var(--sam-ease),
    margin-bottom 320ms var(--sam-ease);
}
.safe-approach-morph .sam-progress-meta[data-on="true"] {
  max-height: 40px;
  margin-bottom: 24px;
  opacity: 1;
  transform: translateY(0);
}

.safe-approach-morph .sam-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--sam-ease),
    transform 300ms var(--sam-ease),
    max-height 360ms var(--sam-ease);
}
.safe-approach-morph .sam-actions[data-on="true"] {
  max-height: 96px;
  opacity: 1;
  transform: translateY(0);
}

.safe-approach-morph .sam-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 16px 24px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  cursor: default;
  border: 1px solid var(--sam-line);
  background: var(--sam-surface);
  color: var(--sam-ink-soft);
  line-height: 1;
  transition: background 200ms var(--sam-ease), border-color 200ms var(--sam-ease);
}
.safe-approach-morph .sam-btn:hover { background: #FAFBFC; }
.safe-approach-morph .sam-btn--danger {
  border-color: #FBD7D7;
  color: #B91C1C;
}
.safe-approach-morph .sam-btn--danger:hover {
  background: #FFF5F5;
  border-color: #F4B4B4;
}
.safe-approach-morph .sam-btn svg { width: 19px; height: 19px; }

/* ---------- SAFE sparkle ---------- */
.safe-approach-morph .sam-mark {
  position: absolute;
  top: 40px;
  left: 44px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sam-synergym);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 400ms var(--sam-ease),
    transform 400ms var(--sam-ease);
  pointer-events: none;
}
.safe-approach-morph .sam-mark[data-on="true"] {
  opacity: 1;
  transform: scale(1);
}
.safe-approach-morph .sam-mark svg { width: 21px; height: 21px; }

/* ---------- Reduced motion fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  .safe-approach-morph .sam-card,
  .safe-approach-morph .sam-slot,
  .safe-approach-morph .sam-chrome,
  .safe-approach-morph .sam-chrome-row,
  .safe-approach-morph .sam-progress-track,
  .safe-approach-morph .sam-progress-meta,
  .safe-approach-morph .sam-actions,
  .safe-approach-morph .sam-mark,
  .safe-approach-morph .sam-body {
    transition: none !important;
  }
  .safe-approach-morph .sam-chrome,
  .safe-approach-morph .sam-chrome-row,
  .safe-approach-morph .sam-progress-track,
  .safe-approach-morph .sam-progress-meta,
  .safe-approach-morph .sam-actions,
  .safe-approach-morph .sam-mark {
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
  }
  .safe-approach-morph .sam-chrome        { margin-top: 28px !important; }
  .safe-approach-morph .sam-chrome-row    { margin-bottom: 24px !important; }
  .safe-approach-morph .sam-progress-track { margin-bottom: 16px !important; }
  .safe-approach-morph .sam-progress-meta  { margin-bottom: 24px !important; }
  .safe-approach-morph .sam-title-row {
    opacity: 0;
    height: 0;
    margin-bottom: 0;
  }
  .safe-approach-morph .sam-progress-fill {
    width: 100% !important;
    transition: none;
  }
  .safe-approach-morph .sam-body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--sam-ink-soft);
  }
}

/* ---------- Mobile responsive (≤767px) ----------
   The macbook-frame on mobile is scaled smaller (md → effectively sm).
   The morph proportions stay good because everything is laid out in
   px inside a 1440-source canvas that's then transform: scale()'d. We
   only need to tone down padding so the card breathes inside the
   smaller macbook-screen canvas. */
@media (max-width: 767px) {
  .safe-approach-morph .sam-stage {
    padding: 40px 32px;
  }
  .safe-approach-morph .sam-card {
    padding: 36px 36px;
    border-radius: 20px;
  }
  .safe-approach-morph .sam-mark {
    top: 36px;
    left: 36px;
  }
}

/* ================================================================
   FOOTER LEADER.CODES MINI-CARD — real macbook + white-sheet data
   layer. Mirrors the locked Leader HOME recipe
   (sketches/home/wireframe-to-real/leader-real.html): one real
   macbook screen at rest; a white sheet + 3 blue dots + dashed
   wires reveal BENEATH on the .pj-scene Z-tilt hover. NO blueprint /
   wireframe layers, NO cursor-pin (footer is static).

   On leader.html the Leader card carries .is-current (current page),
   so the .pj-scene swaps to this real screen while the outer
   currently-viewing chrome is preserved.

   Reuses the existing .mac / .macbook-* / .dat-foot / .d-node base
   sizing — only ADDS .card-blue-scoped centering + a uniform 0.62
   scale (Synergym precedent) so the 380×238 native macbook fits the
   ~350×200 footer .project-visual with air on all sides, at rest AND
   through the tilt. Brand = blue #3b82f6 / var(--gradient-blue) /
   var(--blue-solid). */

/* Flex-center the scene + both layers (no .cascade-stage wrapper here,
   so we center the .mac / .dat-slot directly inside their .pj-layer). */
.case-studies-row .card-blue .pj-scene { display: flex; align-items: center; justify-content: center; }
.case-studies-row .card-blue .pj-layer { display: flex; align-items: center; justify-content: center; }

/* Real macbook — 380×238 native (inner 1440×900), uniformly scaled
   to fit the small footer card. */
.case-studies-row .card-blue .mac { position: relative; flex-shrink: 0; }
.case-studies-row .card-blue .mac[data-mac-size="sm"] { width: 380px; height: 238px; transform: scale(0.62); transform-origin: center center; }
.case-studies-row .card-blue .mac[data-mac-size="sm"] .macbook-frame {
    transform: scale(calc(380 / 1440));
    transform-origin: top left;
    width: 1440px; height: 900px;
}
.case-studies-row .card-blue .macbook-frame {
    position: absolute; top: 0; left: 0;
    width: 1440px; height: 900px;
    background: #1e293b;
    border: 1px solid #0f172a;
    border-radius: 30px;
    overflow: hidden;
    transform-origin: top left;
    box-shadow:
        0 8px 20px -4px rgba(15,23,42,0.20),
        0 90px 150px -50px rgba(15,23,42,0.38),
        0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .card-blue .macbook-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 52px;
    background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .card-blue .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .card-blue .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .card-blue .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .card-blue .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .card-blue .macbook-screen {
    position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
    width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .card-blue .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }

/* DATA layer (revealed beneath on tilt): white sheet + dashed wires +
   3 blue dots — same footprint as the macbook, scaled to match. */
.case-studies-row .card-blue .dat-slot.leader-foot-slot {
    position: relative; flex-shrink: 0;
    width: 380px; height: 238px;
    transform: scale(0.62); transform-origin: center center;
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .dat-foot {
    position: absolute; inset: 0;
    background: #fbfdff;
    border: 1px dashed rgba(59,130,246,0.55);
    border-radius: 10px;
    box-shadow: 0 10px 24px -16px rgba(15,23,42,0.30);
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .dat-wires {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
.case-studies-row .card-blue .dat-slot.leader-foot-slot .d-node {
    position: absolute;
    width: 9px; height: 9px; border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ================================================================
   FOOTER SAFE MINI-CARD — real macbook + white-sheet data layer.
   Mirrors the Leader (.card-blue) footer recipe exactly: one real
   macbook screen at rest; a white sheet + 3 peach dots + dashed wires
   reveal BENEATH on the .pj-scene Z-tilt hover. NO blueprint /
   wireframe layers, NO cursor-pin (footer is static).

   Space-gray frame values stay IDENTICAL to Leader's (SAFE's frame
   matches Leader's). Brand = peach #f97316 / var(--gradient-peach) /
   var(--peach-solid) — only the data-layer accents differ. */

/* Flex-center the scene + both layers (no .cascade-stage wrapper here,
   so we center the .mac / .dat-slot directly inside their .pj-layer). */
.case-studies-row .card-peach .pj-scene { display: flex; align-items: center; justify-content: center; }
.case-studies-row .card-peach .pj-layer { display: flex; align-items: center; justify-content: center; }

/* Real macbook — 380×238 native (inner 1440×900), uniformly scaled
   to fit the small footer card. */
.case-studies-row .card-peach .mac { position: relative; flex-shrink: 0; }
.case-studies-row .card-peach .mac[data-mac-size="sm"] { width: 380px; height: 238px; transform: scale(0.62); transform-origin: center center; }
.case-studies-row .card-peach .mac[data-mac-size="sm"] .macbook-frame {
    transform: scale(calc(380 / 1440));
    transform-origin: top left;
    width: 1440px; height: 900px;
}
.case-studies-row .card-peach .macbook-frame {
    position: absolute; top: 0; left: 0;
    width: 1440px; height: 900px;
    background: #1e293b;
    border: 1px solid #0f172a;
    border-radius: 30px;
    overflow: hidden;
    transform-origin: top left;
    box-shadow:
        0 8px 20px -4px rgba(15,23,42,0.20),
        0 90px 150px -50px rgba(15,23,42,0.38),
        0 200px 280px -120px rgba(30,27,90,0.40);
}
.case-studies-row .card-peach .macbook-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 52px;
    background: #27344a; border-bottom: 1px solid #0f172a; display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 100;
}
.case-studies-row .card-peach .macbook-bar i { width: 18px; height: 18px; border-radius: 50%; background: #374151; display: inline-block; }
.case-studies-row .card-peach .macbook-bar i:nth-child(1) { background: #ff5f57; }
.case-studies-row .card-peach .macbook-bar i:nth-child(2) { background: #ffbd2e; }
.case-studies-row .card-peach .macbook-bar i:nth-child(3) { background: #28c840; }
.case-studies-row .card-peach .macbook-screen {
    position: absolute; top: 52px; left: 16px; right: 16px; bottom: 16px;
    width: auto; height: auto; background: #FFFFFF; border-radius: 4px; overflow: hidden;
}
.case-studies-row .card-peach .macbook-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F6F9; }

/* DATA layer (revealed beneath on tilt): white sheet + dashed wires +
   3 peach dots — same footprint as the macbook, scaled to match. */
.case-studies-row .card-peach .dat-slot.safe-foot-slot {
    position: relative; flex-shrink: 0;
    width: 380px; height: 238px;
    transform: scale(0.62); transform-origin: center center;
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .dat-foot {
    position: absolute; inset: 0;
    background: #fbfdff;
    border: 1px dashed rgba(249,115,22,0.30);
    border-radius: 10px;
    box-shadow: 0 10px 24px -16px rgba(15,23,42,0.30);
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .dat-wires {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
.case-studies-row .card-peach .dat-slot.safe-foot-slot .d-node {
    position: absolute;
    width: 9px; height: 9px; border-radius: 50%;
    transform: translate(-50%, -50%);
}