/* ============================================================
       BetterBone Case Study — Tulumi Enterprise
       Editorial cream + engineering navy + orange accent
       ============================================================ */

    :root {
      /* BetterBone palette — remapped to Tulumi dark theme */
      --bb-navy:        #0A0A0B;
      --bb-navy-deep:   #070708;
      --bb-navy-soft:   #1E1E21;
      --bb-orange:      #C9A96E;
      --bb-orange-deep: #B8985D;
      --bb-cream:       #E8E8EA;
      --bb-cream-deep:  #BEBEC4;
      --bb-paper:       #111113;
      --bb-rule:        rgba(255, 255, 255, 0.06);
      --bb-rule-strong: rgba(255, 255, 255, 0.12);
      --bb-text:        #E8E8EA;
      --bb-text-soft:   #9A9AA0;
      --bb-text-muted:  #636369;

      /* Tulumi outer chrome (preserved for nav consistency) */
      --tulumi-bg:     #0A0A0B;
      --tulumi-accent: #C9A96E;
      --tulumi-text:   #E8E8EA;

      /* Type */
      --font-display: 'Playfair Display', 'Georgia', serif;
      --font-body:    'Inter', -apple-system, sans-serif;
      --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

      /* Layout */
      --max-width: 1200px;
      --side-pad:  clamp(20px, 5vw, 80px);
      --section-pad: clamp(80px, 12vh, 160px);

      /* Header stack — single source of truth, hero padding reads from here */
      --nav-h: 64px;
      --case-bar-h: 36px;
      --header-stack-h: calc(var(--nav-h) + var(--case-bar-h));

      /* Hero-only background — matches the video's gray so the seam
         between the video frame and the page disappears. Adjust ±5
         by eye against the actual video frame at runtime. */
      --hero-bg: #E8E8E6;
    }

    @media (max-width: 768px) {
      :root {
        --nav-h: 56px;
        --case-bar-h: 32px;
      }
    }

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

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 15px;
      color: var(--bb-text);
      background: var(--bb-navy);
      line-height: 1.6;
      overflow-x: hidden;
    }

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

    /* ─── TULUMI NAV (kept dark for brand consistency) ─── */
    .tulumi-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--side-pad);
      background: rgba(10, 10, 11, 0.82);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      color: var(--tulumi-text);
    }
    .tulumi-nav a { color: var(--tulumi-text); }
    .tulumi-logo {
      font-family: var(--font-body);
      font-size: 19px;
      font-weight: 300;
      letter-spacing: 0.08em;
      text-transform: lowercase;
    }
    .tulumi-logo span { color: var(--tulumi-accent); font-weight: 500; }
    .tulumi-nav-links {
      display: flex;
      gap: 36px;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.04em;
    }
    .tulumi-nav-links a { opacity: 0.78; transition: opacity .2s; }
    .tulumi-nav-links a:hover { opacity: 1; }
    .tulumi-nav-cta {
      padding: 10px 22px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 2px;
      transition: all .25s;
    }
    .tulumi-nav-cta:hover {
      background: var(--tulumi-accent);
      border-color: var(--tulumi-accent);
      color: #0A0A0B;
    }
    @media (max-width: 768px) {
      .tulumi-nav-links { display: none; }
    }

    /* ─── CASE STUDY SUB-BAR ─── */
    .case-bar {
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      z-index: 90;
      height: var(--case-bar-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--side-pad);
      background: var(--bb-paper);
      border-bottom: 1px solid var(--bb-rule);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--bb-text-soft);
      transition: transform .35s ease;
    }
    .case-bar-left, .case-bar-right {
      display: flex; align-items: center; gap: 14px;
    }
    .case-bar-back { color: var(--bb-orange); font-weight: 600; }
    .case-bar-title { color: var(--bb-cream); font-weight: 600; letter-spacing: 0.06em; }
    .case-bar-sep { width: 1px; height: 14px; background: var(--bb-rule-strong); }
    .case-bar-meta { font-size: 11px; opacity: .72; }

    /* Local language toggle — scoped to this case study only.
       Matches the homepage's nav-style EN/ES toggle visually but reads
       from a translations dict declared inside this file's <script>. */
    .lang-toggle-case {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--bb-cream);
      padding: 4px 10px;
      border: 1px solid var(--bb-rule-strong);
      border-radius: 2px;
      cursor: pointer;
      transition: all .2s ease;
      background: transparent;
    }
    .lang-toggle-case:hover {
      color: var(--bb-orange);
      border-color: var(--bb-orange);
    }

    @media (max-width: 768px) {
      .case-bar-meta { display: none; }
    }

    all absolutely
       positioned: video (full bleed, z-1), navy overlay covering
       left 40% (z-2), orange overlay covering right 60% (z-2), left label centered in the navy zone (z-3), right label
       centered in the orange zone (z-3), caption at the bottom
       (z-4). NO grid, NO flex {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--bb-navy);
    }

    /* ─── HERO INFO — case-study intro that owns the first viewport ─
       min-height: 100vh guarantees the cinema sits below the fold on
       page load, regardless of viewport height. flex-center keeps
       the content optically centered on tall monitors instead of
       leaving dead space at the bottom. The top padding clears the
       fixed nav+case-bar even when min-height squeezes on short
       viewports. */
    .hero-info {
      background: #0A0A0A;
      min-height: 100vh;
      padding: calc(var(--header-stack-h) + 40px) var(--side-pad) 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero-info-inner {
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      margin-bottom: 28px;
    }
    .hero-eyebrow::after {
      content: '';
      flex: 1;
      max-width: 80px;
      height: 1px;
      background: var(--bb-orange);
      opacity: .4;
    }

    .hero-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(34px, 3.4vw, 50px);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--bb-cream);
      margin-bottom: 28px;
    }
    .hero-title em {
      font-style: italic;
      color: var(--bb-orange);
      font-weight: 400;
    }

    /* HERO RUNNER: clean 16:9 video, no mask, no border-radius.
       The page bg matches the video gray {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }
    .section--cream { background: var(--bb-paper); }
    .section--paper { background: var(--bb-paper); }
    .section--navy {
      background: var(--bb-navy);
      color: var(--bb-cream);
    }
    .section--navy .section-eyebrow { color: var(--bb-orange); }
    .section--navy .section-title { color: var(--bb-cream); }
    .section--navy .section-dek { color: rgba(250, 246, 238, 0.72); }

    .section-inner {
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .section-eyebrow {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      margin-bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .section-eyebrow-num {
      font-size: 11px;
      opacity: .6;
    }

    .section-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(34px, 4.2vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--bb-cream);
      max-width: 18ch;
      margin-bottom: 22px;
    }
    .section-dek {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(15px, 1.2vw, 17px);
      color: var(--bb-text-soft);
      max-width: 56ch;
      margin-bottom: 64px;
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════════════════════════════
       NARRATIVE ARC v3 — 4 beats: Vision → Dashboard → Invisible → CTA
       Vanilla CSS, scoped class names, Motion One via R2 for animation.
       ═══════════════════════════════════════════════════════════════ */

    /* ───────── BEAT 1 · Vision Hero with flip-words ───────── */
    .vision-hero {
      background: var(--tulumi-bg);
      padding: 160px 32px 120px;
      position: relative;
      overflow: hidden;
    }
    .vision-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, var(--bb-rule) 1px, transparent 1px);
      background-size: 32px 32px;
      opacity: 0.4;
      z-index: 1;
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
              mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    }
    .vision-hero__inner {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 2;
    }
    .vision-hero__eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange);
      margin-bottom: 48px;
    }
    .vision-hero__title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 68px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--bb-cream);
      margin: 0 0 48px 0;
    }
    .vision-hero__title-em { display: inline; color: var(--bb-text-soft); }
    .vision-hero__title-em > span:not(:last-child)::after { content: ' '; }
    .vision-hero__title-flip-wrap { display: inline; white-space: nowrap; }
    .vision-hero__flip {
      display: inline-block;
      color: var(--bb-orange); /* fallback before letter spans render */
      font-style: italic;
      /* width set by JS at init to widest word in EN+ES so the line
         after it never reflows when the word swaps. */
      text-align: center;
      position: relative;
      transition: opacity 400ms ease, transform 400ms ease;
      vertical-align: baseline;
    }
    /* Each letter cycles through a vibrant palette, staggered by --i so
       the colors flow across the word like a wave. Used for the rotating
       hero word ("answered" / "shipped" / etc.) — the surrounding line
       stays its normal navy. */
    .vision-hero__flip-letter {
      display: inline-block;
      animation: vision-color-cycle 5s ease-in-out infinite;
      animation-delay: calc(var(--i, 0) * 0.12s);
      will-change: color;
    }
    @keyframes vision-color-cycle {
      0%, 100% { color: #C26B3C; }
      16%      { color: #F59E0B; }
      33%      { color: #EF4444; }
      50%      { color: #EC4899; }
      66%      { color: #A78BFA; }
      83%      { color: #5CB8E8; }
    }
    @media (prefers-reduced-motion: reduce) {
      .vision-hero__flip-letter { animation: none; color: var(--bb-orange); }
    }
    .vision-hero__dek {
      font-family: var(--font-body);
      font-size: 19px;
      line-height: 1.6;
      color: var(--bb-text-soft);
      max-width: 640px;
      margin: 0 auto;
    }

    /* ═════════════════════════════════════════════════════════════════
       LUCIDE ICON SYSTEM — inline SVGs that inherit currentColor.
       Used across BEAT 2 (workflow dashboard) + BEAT 3 (invisible cards)
       to replace casual emoji UI with premium stroke-based glyphs.
       ═════════════════════════════════════════════════════════════════ */
    .lucide {
      width: 20px;
      height: 20px;
      stroke-width: 1.75;
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
    }
    .lucide--sm { width: 16px; height: 16px; stroke-width: 2; }
    .lucide--lg { width: 24px; height: 24px; stroke-width: 1.5; }
    .lucide--xl { width: 32px; height: 32px; stroke-width: 1.5; }
    .lucide--accent  { color: var(--bb-orange); }
    .lucide--success { color: #4ade80; }

    /* ═════════════════════════════════════════════════════════════════
       BEAT 2 · AUTONOMOUS AI WORKFLOW BENTO
       6 tiles + sidebar nav, ripple grid bg, Mexican-PyME pain solved
       ═════════════════════════════════════════════════════════════════ */
    .workflow {
      background: var(--bb-navy);
      color: var(--bb-cream);
      padding: 140px 32px 120px;
      position: relative;
      overflow: hidden;
    }
    /* Ripple background grid (orange-tinted) */
    .workflow__ripple {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.5;
    }
    .workflow__ripple-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(194, 107, 60, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194, 107, 60, 0.08) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
              mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    }
    /* Drifting cream dots layer */
    .workflow::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(245, 241, 232, 0.08) 1px, transparent 1px);
      background-size: 28px 28px;
      z-index: 1;
      pointer-events: none;
      animation: workflow-drift 60s linear infinite;
    }
    @keyframes workflow-drift {
      to { background-position: 28px 28px; }
    }

    /* ═══════════════════════════════════════════════════════════
       Section header — Typewriter blur text animation
       ═══════════════════════════════════════════════════════════ */
    .wf-header {
      text-align: center;
      max-width: 880px;
      margin: 0 auto 48px;
      padding: 0 24px;
      position: relative;
      z-index: 2;
    }
    .wf-header__eyebrow {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange, #C26B3C);
      margin-bottom: 24px;
    }
    .wf-header__title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.15;
      font-weight: 600;
      color: var(--bb-cream);
      letter-spacing: -0.02em;
      margin: 0 0 24px;
    }
    .wf-header__static { display: inline; }
    .wf-header__dynamic {
      display: inline;
      position: relative;
    }
    .wf-header__chars { display: inline; color: var(--bb-orange); }
    .wf-header__char {
      display: inline-block;
      opacity: 0;
      filter: blur(8px);
      transform: translateY(4px);
      transition:
        opacity 120ms ease-out,
        filter 120ms ease-out,
        transform 120ms ease-out;
      will-change: opacity, filter, transform;
    }
    .wf-header__char.is-visible {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
    .wf-header__char.is-space {
      width: 0.28em;
    }
    .wf-header__char.is-leaving {
      opacity: 0;
      filter: blur(8px);
      transform: translateY(-4px);
      transition:
        opacity 100ms ease-in,
        filter 100ms ease-in,
        transform 100ms ease-in;
    }
    .wf-header__period {
      display: inline-block;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.4em;
      font-weight: 700;
      line-height: 0.6;
      vertical-align: baseline;
      color: var(--period-color, var(--bb-orange, #C26B3C));
      transition: color 400ms cubic-bezier(0.16, 1, 0.3, 1);
      margin-left: 1px;
    }
    .wf-header__sub {
      font-family: Inter, system-ui, -apple-system, sans-serif;
      font-size: 15px;
      line-height: 1.6;
      color: rgba(232, 232, 234, 0.6);
      max-width: 620px;
      margin: 0 auto;
    }
    @media (max-width: 768px) {
      .wf-header { margin-bottom: 32px; }
      .wf-header__title { font-size: clamp(26px, 7vw, 38px); }
      .wf-header__sub { font-size: 13.5px; }
      .wf-header__period { font-size: 1.3em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wf-header__char { transition: none; }
      .wf-header__char.is-leaving { transition: none; }
    }

    /* Layout — centers the dashboard frame */
    .workflow__layout {
      max-width: 1280px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Discovery nudge — sits above the dashboard {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 260px;
      margin: 0 0 14px 0;
      padding: 10px 16px;
      background: rgba(194, 107, 60, 0.12);
      border: 1px solid rgba(194, 107, 60, 0.35);
      border-radius: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      transition: opacity 360ms ease, transform 360ms ease;
      animation: workflow-nudge-bob 2.6s ease-in-out infinite;
    }
    @keyframes workflow-nudge-bob {
      0%, 100% { transform: translateX(0); }
      50%      { transform: translateX(4px); }
    }
    @keyframes workflow-nudge-arrow {
      0%, 100% { transform: translateX(0); opacity: 0.7; }
      50%      { transform: translateX(-4px); opacity: 1; }
    }
    @media (max-width: 1024px) {
      .workflow__nudge { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .workflow__nudge,
      .workflow__nudge-arrow { animation: none; }
    }

    /* Notification-badge pulses — gently draw attention to the count
       chips so users know the tabs are clickable. Two distinct rhythms
       so they don't feel synchronized. */
    .workflow__sb-badge {
      animation: workflow-badge-pulse 2.4s ease-out infinite;
      box-shadow: 0 0 0 0 rgba(245, 241, 232, 0.4);
    }
    .workflow__sb-badge--accent {
      animation: workflow-badge-pulse-accent 2s ease-out 0.6s infinite;
      box-shadow: 0 0 0 0 rgba(194, 107, 60, 0.55);
    }
    @keyframes workflow-badge-pulse {
      0%   { box-shadow: 0 0 0 0   rgba(245, 241, 232, 0.4); }
      70%  { box-shadow: 0 0 0 6px rgba(245, 241, 232, 0); }
      100% { box-shadow: 0 0 0 0   rgba(245, 241, 232, 0); }
    }
    @keyframes workflow-badge-pulse-accent {
      0%   { box-shadow: 0 0 0 0   rgba(194, 107, 60, 0.6); }
      70%  { box-shadow: 0 0 0 8px rgba(194, 107, 60, 0); }
      100% { box-shadow: 0 0 0 0   rgba(194, 107, 60, 0); }
    }
    /* Once the user has clicked any tab {
      animation: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .workflow__sb-badge,
      .workflow__sb-badge--accent { animation: none; }
    }

    /* Dashboard frame — sidebar + panel as one unit */
    .workflow__dashboard {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(194, 107, 60, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 60% at 80% 100%, rgba(201, 169, 110, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 20% 80%,  rgba(45, 212, 127, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, rgba(20, 20, 22, 1) 0%, rgba(7, 7, 8, 1) 100%);
      border: 1px solid transparent;
      background-clip: padding-box;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(194, 107, 60, 0.12),
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 40px 100px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      height: 780px;
    }

    /* Sidebar — fills its column inside the frame */
    .workflow__sidebar {
      position: static;
      background: rgba(0, 0, 0, 0.4);
      border: none;
      border-right: 1px solid rgba(245, 241, 232, 0.08);
      border-radius: 0;
      padding: 24px 16px;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .workflow__sb-header {
      padding: 0 12px 24px;
      margin-bottom: 12px;
      border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    }
    .workflow__sb-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .workflow__sb-logo-mark {
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, var(--bb-orange), #d4a857);
      border-radius: 6px;
      flex-shrink: 0;
    }
    .workflow__sb-logo-text {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--bb-cream);
      letter-spacing: 0.02em;
    }
    .workflow__sb-section-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: rgba(245, 241, 232, 0.45);
    }

    .workflow__sb-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 10px;
      color: rgba(245, 241, 232, 0.6);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
      transition: all 250ms ease;
    }
    .workflow__sb-item:hover {
      background: rgba(194, 107, 60, 0.08);
      color: var(--bb-cream);
      border-color: rgba(194, 107, 60, 0.2);
    }
    .workflow__sb-item.is-active {
      background: rgba(194, 107, 60, 0.15);
      color: var(--bb-cream);
      border-color: var(--bb-orange);
    }
    .workflow__sb-icon { font-size: 20px; flex-shrink: 0; }
    .workflow__sb-label { flex: 1; }

    .workflow__sb-badge {
      margin-left: auto;
      background: rgba(245, 241, 232, 0.1);
      color: rgba(245, 241, 232, 0.7);
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 8px;
      font-weight: 500;
    }
    .workflow__sb-badge--accent {
      background: var(--bb-orange);
      color: white;
    }

    .workflow__sb-footer {
      margin-top: auto;
      padding: 16px 12px 0;
      border-top: 1px solid rgba(245, 241, 232, 0.08);
    }
    .workflow__sb-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      color: rgba(245, 241, 232, 0.55);
    }
    .workflow__sb-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 8px #4ade80;
      animation: pulse-status 2s ease-in-out infinite;
    }
    @keyframes pulse-status {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* Panel — single content area, scenes swap inside */
    .workflow__panel {
      background: rgba(245, 241, 232, 0.02);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    .workflow__panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 32px;
      border-bottom: 1px solid rgba(245, 241, 232, 0.08);
      background: rgba(0, 0, 0, 0.15);
    }
    .workflow__panel-crumb {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .workflow__panel-crumb-1 { color: rgba(245, 241, 232, 0.4); }
    .workflow__panel-crumb-sep { color: rgba(245, 241, 232, 0.2); }
    .workflow__panel-crumb-2 {
      color: var(--bb-cream);
      font-weight: 500;
      transition: color 250ms ease;
    }
    .workflow__panel-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(245, 241, 232, 0.06);
      border: 1px solid rgba(245, 241, 232, 0.1);
      padding: 7px 14px;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      color: rgba(245, 241, 232, 0.55);
    }
    .workflow__panel-search-icon {
      width: 14px;
      height: 14px;
      color: rgba(245, 241, 232, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Stage — wraps all 6 scenes inside the fixed-height panel.
       Scenes stack as absolute layers and cross-fade. */
    .workflow__stage {
      position: relative;
      flex: 1;
      min-height: 0;
    }
    .workflow__scene {
      position: absolute;
      inset: 0;
      padding: 40px 48px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .workflow__scene.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    .workflow__scene-header {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .workflow__scene-title {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--bb-cream);
      margin: 0;
      max-width: 720px;
    }
    .workflow__scene-footer {
      display: flex;
      gap: 48px;
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid rgba(245, 241, 232, 0.08);
    }

    /* Inner-content primitives — kept from prior tile system {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--bb-orange);
      font-weight: 500;
    }

    /* Tile 4 — Dual Reels + outcome editorial. Three-column layout:
       Titan Auto reel (left) · editorial copy (middle) · real-estate reel (right).
       The Reel is the Instagram surface directly; dashboard chrome is the
       only "device" in this composition. */
    .workflow__scene--social {
      flex-direction: row;
      gap: 28px;
      align-items: stretch;
      padding: 32px 36px 24px;
    }

    /* --- iPhone 17 Pro Max bezel. Real device proportions: corner radius
       ~16% of width, dynamic island ~30% of width × ~5% of height,
       screen aspect ~9/19.5. Padding is the bezel thickness. */
    .ig-phone {
      position: relative;
      width: 260px;
      flex-shrink: 0;
      align-self: center;
      padding: 8px;
      border-radius: 44px;
      background: linear-gradient(170deg, #2c2c30 0%, #0e0e10 100%);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 3px rgba(0, 0, 0, 0.55),
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 14px 28px rgba(0, 0, 0, 0.45);
    }
    /* Dynamic Island */
    .ig-phone__notch {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 26px;
      background: #000;
      border-radius: 999px;
      z-index: 10;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    /* --- Reel = the screen inside the phone. iPhone 17 Pro Max display
       aspect is 9 / 19.5; we match it exactly so the chrome reads true. */
    .ig-reel {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 19.5;
      border-radius: 36px;
      overflow: hidden;
      isolation: isolate;
      font-family: var(--font-body);
      /* Fallback gradient — auto-shop orange/black for Titan reel by default */
      background:
        radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 40%, #c26b3c 100%);
    }
    /* Right reel: villa / sunrise / ocean fallback gradient */
    .ig-reel--villa {
      background:
        radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(160deg, #1a3a5c 0%, #4a7ba8 45%, #f4a460 100%);
    }

    .ig-reel__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    /* Top + bottom dark gradients keep chrome legible over any video */
    .ig-reel::before,
    .ig-reel::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
    }
    .ig-reel::before {
      top: 0;
      height: 28%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
    }
    .ig-reel::after {
      bottom: 0;
      height: 52%;
      background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
    }

    .ig-reel__progress {
      position: absolute;
      top: 8px;
      left: 12px;
      right: 12px;
      height: 2px;
      background: rgba(255,255,255,0.25);
      border-radius: 999px;
      z-index: 3;
      overflow: hidden;
    }
    .ig-reel__progress::after {
      content: '';
      position: absolute;
      inset: 0;
      width: 38%;
      background: rgba(255,255,255,0.95);
      border-radius: 999px;
    }

    /* Topbar sits below the dynamic island. The notch ends ~32px from
       the reel's top (14px top + 26px height in phone coords, minus 8px
       phone padding); top: 48 leaves comfortable breathing room. */
    .ig-reel__topbar {
      position: absolute;
      top: 48px;
      left: 14px;
      right: 14px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
    }
    .ig-reel__topbar-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    }
    .ig-reel__topbar-icon {
      display: inline-flex;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    }

    /* Right action rail */
    .ig-reel__rail {
      position: absolute;
      right: 8px;
      bottom: 84px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      color: #fff;
    }
    .ig-reel__action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
    }
    .ig-reel__action-icon {
      width: 22px;
      height: 22px;
    }
    .ig-reel__action-count {
      font-size: 10.5px;
      font-weight: 600;
    }
    .ig-reel__action--liked .ig-reel__action-icon {
      color: #ff3040;
    }

    /* Bottom caption block */
    .ig-reel__bottom {
      position: absolute;
      left: 12px;
      right: 44px;
      bottom: 12px;
      z-index: 3;
      color: #fff;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ig-reel__author {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .ig-reel__avatar--villa {
      background: linear-gradient(135deg, #f4a460, #dd2a7b 50%, #4a7ba8);
    }
    /* Image-backed avatar (real client logo) — drop the dark inner, just clip the image */
    .ig-reel__avatar--image { padding: 0; background: transparent; }
    .ig-reel__avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
    .ig-reel__avatar-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #1a1a1a;
      display: grid;
      place-items: center;
      color: #fff;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
    }
    .ig-reel__username {
      font-size: 12.5px;
      font-weight: 600;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    .ig-reel__follow {
      margin-left: 3px;
      font-size: 10.5px;
      font-weight: 600;
      padding: 2px 9px;
      border: 1.5px solid rgba(255,255,255,0.95);
      border-radius: 6px;
      color: #fff;
      background: transparent;
      cursor: default;
      letter-spacing: 0.01em;
    }
    /* Caption — 2-line clamp with absolute "...more" overlay (Instagram pattern) */
    .ig-reel__caption {
      position: relative;
      font-size: 11.5px;
      line-height: 1.4;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    .ig-reel__caption-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .ig-reel__caption-more {
      position: absolute;
      right: 0;
      bottom: 0;
      padding-left: 26px;
      color: rgba(255,255,255,0.85);
      font-weight: 500;
      pointer-events: none;
      background: linear-gradient(to right, transparent, rgba(0,0,0,0.65) 45%);
    }

    /* --- Editorial center column --- */
    .social-edit {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding-top: 4px;
    }
    .social-edit__eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange);
    }
    .social-edit__title {
      font-family: var(--font-display);
      font-size: 30px;
      line-height: 1.12;
      font-weight: 500;
      color: var(--bb-cream);
      letter-spacing: -0.015em;
      margin: 0;
    }
    .social-edit__title em {
      font-style: italic;
      color: var(--bb-orange);
    }
    .social-edit__rule {
      height: 1px;
      background: linear-gradient(to right,
        rgba(245, 241, 232, 0.18),
        rgba(245, 241, 232, 0.04));
      border: 0;
      margin: 4px 0;
    }
    /* Hero stat block — the money moment */
    .social-edit__hero {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .social-edit__hero-value {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 44px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.015em;
      color: var(--bb-orange);
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .social-edit__hero-unit {
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      color: rgba(245, 241, 232, 0.6);
    }
    .social-edit__hero-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.55);
    }
    /* Body paragraph — fills the middle vertical space below the hero */
    .social-edit__body {
      font-family: var(--font-body);
      font-size: 16.5px;
      line-height: 1.6;
      color: rgba(245, 241, 232, 0.82);
      margin: 0;
      letter-spacing: 0;
      max-width: 38ch;
    }
    .social-edit__body em {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: 19px;
      color: var(--bb-cream);
      letter-spacing: -0.005em;
    }

    /* Rotating business-type word — mirrors vision-hero__flip pattern.
       Bumped slightly larger than the surrounding em so the eye lands on
       it. Sizes naturally to its current text — locking width to the
       widest word left a visible whitespace gap after shorter words and
       broke the layout on mobile. white-space: nowrap keeps the word
       intact across line breaks; the surrounding line reflows by a few
       px on swap, which is invisible behind the 220ms opacity fade. */
    .social-edit__rotate {
      display: inline-block;
      position: relative;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 600;
      font-size: 22px;
      color: var(--bb-orange);
      white-space: nowrap;
      transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
                  transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .social-edit__rotate.is-flipping {
      opacity: 0;
      transform: translateY(-6px);
    }

    /* Kicker — pinned bottom by margin-top: auto */
    .social-edit__kicker {
      margin-top: auto;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 14.5px;
      line-height: 1.4;
      color: rgba(245, 241, 232, 0.55);
      letter-spacing: 0;
    }
    .social-edit__kicker em {
      color: var(--bb-orange);
      font-style: italic;
      font-weight: 500;
    }

    @media (prefers-reduced-motion: reduce) {
      .social-edit__rotate { transition: none; }
    }

    /* ============================================================
       Scene 2 — Operations · v3 pinwheel bento (offset 2x2)
       4 cells (A small, B large, C large, D small) on an 8-col track.
       Static layout — animations and per-cell content arrive later.
       ============================================================ */
    .workflow__scene--ops {
      flex-direction: column;
      gap: 18px;
      padding: 22px 28px 24px;
    }

    /* Header — eyebrow + title above the bento */
    .ops-bento-header {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(245, 241, 232, 0.07);
    }
    .ops-bento-header__eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange);
    }
    .ops-bento-header__title {
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1.1;
      font-weight: 500;
      color: var(--bb-cream);
      letter-spacing: -0.015em;
      margin: 0;
    }
    .ops-bento-header__title em {
      font-style: italic;
      color: var(--bb-orange);
    }

    /* Two-row grid — Row 1: A (small) | B (large). Row 2: C full-bleed. */
    .ops-bento {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr 1fr;
      gap: 14px;
      min-height: 0;
    }
    .ops-bento__cell[data-cell="a"] { grid-column: 1 / span 3; grid-row: 1; }
    .ops-bento__cell[data-cell="b"] { grid-column: 4 / span 5; grid-row: 1; }
    .ops-bento__cell[data-cell="c"] { grid-column: 1 / -1;     grid-row: 2; }

    /* Cell shell */
    .ops-bento__cell {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(180deg,
        rgba(245, 241, 232, 0.04) 0%,
        rgba(245, 241, 232, 0.015) 100%);
      border: 1px solid rgba(245, 241, 232, 0.07);
      overflow: hidden;
      min-height: 0;
    }

    /* Copy block (title + body) */
    .ops-bento__copy {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ops-bento__title {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 22px;
      font-weight: 500;
      color: var(--bb-cream);
      letter-spacing: -0.005em;
      margin: 0;
    }
    .ops-bento__body {
      font-family: var(--font-body);
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(245, 241, 232, 0.7);
      margin: 0;
    }

    /* Visual placeholder — fills remaining cell height */
    .ops-bento__visual {
      position: relative;
      flex: 1;
      min-height: 80px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      display: grid;
      place-items: center;
      color: rgba(245, 241, 232, 0.3);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* Mobile — stack as single column */
    @media (max-width: 1024px) {
      .workflow__scene--ops {
        padding: 18px;
        gap: 14px;
        overflow-y: auto;
      }
      .ops-bento-header__title { font-size: 20px; }
      .ops-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 14px;
      }
      .ops-bento__cell[data-cell="a"],
      .ops-bento__cell[data-cell="b"],
      .ops-bento__cell[data-cell="c"] {
        grid-column: 1;
        grid-row: auto;
        min-height: 240px;
      }
      .ops-feature-card__row { gap: 10px; }
      .ops-feature-card__chip { width: 34px; height: 34px; }
      .ops-feature-card__chip--anchor { width: 68px; height: 68px; }
      .ops-feature-card__chip--anchor img { width: 40px; height: 40px; }
      .ops-feature-card__copy .ops-bento__title { font-size: 15px; }
    }

    /* ───────── Shared cell styling ───────── */
    .ops-cell__kicker {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.4);
      margin-bottom: 4px;
    }

    /* Hero cell (B) reads as the centerpiece */
    .ops-cell-b {
      background: linear-gradient(180deg,
        rgba(194, 107, 60, 0.05) 0%,
        rgba(245, 241, 232, 0.018) 100%);
      border-color: rgba(194, 107, 60, 0.18);
    }

    /* ───────── Cell A · Feature Block Animated Card ───────── */
    .ops-feature-card {
      position: relative;
      flex: 1;
      /* Floor the visual area so the chip row stays the same size in EN and
         ES — Spanish copy below is taller (3 lines vs 2) and was eating into
         this region when min-height was 0. */
      min-height: 170px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 0 12px;
      isolation: isolate;
    }

    /* Orbit rings — fade outward, slow rotation for ambient life */
    .ops-feature-card__rings {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      animation: ops-feature-rings-spin 60s linear infinite;
      transform-origin: 50% 50%;
    }
    @keyframes ops-feature-rings-spin {
      to { transform: rotate(360deg); }
    }

    /* Vertical scan line — sweeps left↔right OVER the chips, full-height-ish */
    .ops-feature-card__scanline {
      position: absolute;
      top: 4%;
      bottom: 4%;
      left: 50%;
      width: 1.5px;
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(201, 169, 110, 0.85) 25%,
        rgba(230, 210, 170, 1) 50%,
        rgba(201, 169, 110, 0.85) 75%,
        transparent 100%);
      box-shadow:
        0 0 8px rgba(201, 169, 110, 0.7),
        0 0 16px rgba(201, 169, 110, 0.35);
      z-index: 4;
      transform: translateX(-50%);
      animation: ops-feature-scan 7s ease-in-out infinite;
      will-change: transform;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    @keyframes ops-feature-scan {
      0%   { left: 6%;  opacity: 0; }
      10%  { opacity: 1; }
      50%  { left: 94%; opacity: 1; }
      60%  { opacity: 1; }
      100% { left: 6%;  opacity: 0; }
    }

    /* Sparkle particles */
    .ops-feature-card__sparkle {
      position: absolute;
      top: var(--top);
      left: var(--left);
      width: 3px;
      height: 3px;
      background: rgba(245, 241, 232, 0.9);
      border-radius: 50%;
      z-index: 1;
      opacity: 0;
      box-shadow: 0 0 6px rgba(245, 241, 232, 0.7);
      animation: ops-feature-sparkle 3s ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes ops-feature-sparkle {
      0%, 100% { opacity: 0; transform: scale(0.5); }
      50%      { opacity: 1; transform: scale(1.2); }
    }

    /* Logo row */
    .ops-feature-card__row {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    /* Logo chip — light cream circle so colored AND monochrome logos pop on the dark card */
    .ops-feature-card__chip {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #FAF6EE 0%, #E8E1D2 100%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
      animation: ops-feature-chip-bounce 3.5s ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }
    .ops-feature-card__chip img {
      width: 18px;
      height: 18px;
      object-fit: contain;
    }

    /* Anchor chip — much bigger, dark background so the white ChatGPT mark pops.
       This is the cell's focal point: AI is what's being hired. */
    .ops-feature-card__chip--anchor {
      width: 78px;
      height: 78px;
      background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #050505 100%);
      border-color: rgba(245, 241, 232, 0.28);
      box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.6),
        0 14px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(201, 169, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .ops-feature-card__chip--anchor img {
      width: 48px;
      height: 48px;
      /* ChatGPT mark ships black — invert to white against the dark anchor */
      filter: brightness(0) invert(1);
    }

    @keyframes ops-feature-chip-bounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    /* Card copy block (title + subhead) at bottom of cell */
    .ops-feature-card__copy {
      padding: 0 18px 16px !important;
      flex-shrink: 0;
    }
    .ops-feature-card__copy .ops-bento__title {
      font-size: 16px;
      line-height: 1.3;
      font-style: normal;
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .ops-feature-card__copy .ops-bento__title em {
      font-style: italic;
      color: var(--bb-orange);
      font-family: var(--font-display);
      font-weight: 500;
    }
    .ops-feature-card__copy .ops-bento__body {
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(245, 241, 232, 0.55);
      margin-top: 4px;
    }

    /* Reduced-motion: kill the loops */
    @media (prefers-reduced-motion: reduce) {
      .ops-feature-card__rings,
      .ops-feature-card__scanline,
      .ops-feature-card__sparkle,
      .ops-feature-card__chip { animation: none; }
      .ops-feature-card__sparkle { opacity: 0.7; }
    }

    /* ═══════════════════════════════════════════════════════════
       CELL B — Animated Beam (vertical, full-cell, copy overlay top-left)
       ═══════════════════════════════════════════════════════════ */
    .ops-cell-b {
      position: relative;
      padding: 0;
      overflow: hidden;
    }

    .ops-beam {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      isolation: isolate;
      background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(194, 107, 60, 0.04) 0%, transparent 65%);
    }

    .ops-beam__svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }
    .ops-beam__svg path.beam-base {
      fill: none;
      stroke: rgba(245, 241, 232, 0.10);
      stroke-width: 1.5;
    }
    .ops-beam__svg path.beam-pulse {
      fill: none;
      stroke: url(#opsBeamGradient);
      stroke-width: 2;
      stroke-linecap: round;
      animation: ops-beam-flow var(--beam-duration, 3.5s) linear infinite;
      animation-delay: var(--beam-delay, 0s);
    }
    @keyframes ops-beam-flow {
      0%   { stroke-dashoffset: var(--beam-length, 1000); }
      100% { stroke-dashoffset: 0; }
    }

    /* Stage: vertical layout, fills the cell. Top YOU → middle CORE → bottom row of 8 outputs. */
    .ops-beam__stage {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 24px 18px 22px;
    }

    .ops-beam__col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .ops-beam__col--outputs {
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
      gap: 4px;
      align-items: center;
    }

    /* Chips */
    .ops-beam__chip {
      position: relative;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #FAF6EE 0%, #E8E1D2 100%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
      z-index: 3;
    }
    .ops-beam__chip img {
      width: 18px;
      height: 18px;
      object-fit: contain;
    }
    .ops-beam__chip--user {
      background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #161616 100%);
      border-color: rgba(245, 241, 232, 0.18);
      color: rgba(245, 241, 232, 0.75);
    }

    /* Bottom-row chips a touch smaller so 8 fit clean across the cell width */
    .ops-beam__col--outputs .ops-beam__chip {
      width: 30px;
      height: 30px;
    }
    .ops-beam__col--outputs .ops-beam__chip img {
      width: 16px;
      height: 16px;
    }

    /* Core chip — larger, dark, with Border Beam */
    .ops-beam__chip--core {
      width: 56px;
      height: 56px;
      background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #050505 100%);
      border-color: rgba(245, 241, 232, 0.28);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 32px rgba(194, 107, 60, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .ops-beam__chip--core img {
      width: 30px;
      height: 30px;
      filter: brightness(0) invert(1) opacity(0.95);
    }
    .ops-beam__chip-border {
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      padding: 2px;
      background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 70%,
        rgba(194, 107, 60, 1) 85%,
        rgba(255, 200, 150, 1) 92%,
        rgba(194, 107, 60, 1) 96%,
        transparent 100%
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: ops-beam-border-spin 4s linear infinite;
      pointer-events: none;
      z-index: 4;
    }
    @keyframes ops-beam-border-spin {
      to { transform: rotate(360deg); }
    }

    .ops-beam__label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.4);
    }
    .ops-beam__label--core {
      color: var(--bb-orange);
    }

    /* Copy overlay — top-LEFT, doesn't cover the AI core (which sits at center vertically) */
    .ops-beam__overlay {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 10;
      max-width: 220px;
      padding: 12px 14px;
      border-radius: 10px;
      background: linear-gradient(180deg,
        rgba(11, 19, 30, 0.78) 0%,
        rgba(11, 19, 30, 0.88) 100%);
      -webkit-backdrop-filter: blur(8px);
              backdrop-filter: blur(8px);
      border: 1px solid rgba(245, 241, 232, 0.06);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 32px rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ops-beam__overlay-kicker {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.4);
    }
    .ops-beam__overlay-title {
      font-family: var(--font-display);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 500;
      color: var(--bb-cream);
      letter-spacing: -0.005em;
      margin: 0;
    }
    .ops-beam__overlay-title em {
      font-style: italic;
      color: var(--bb-orange);
    }
    .ops-beam__overlay-body {
      font-family: var(--font-body);
      font-size: 11px;
      line-height: 1.45;
      color: rgba(245, 241, 232, 0.6);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 1024px) {
      .ops-beam__stage { padding: 18px 12px; }
      .ops-beam__col--outputs { gap: 2px; }
      .ops-beam__col--outputs .ops-beam__chip { width: 26px; height: 26px; }
      .ops-beam__col--outputs .ops-beam__chip img { width: 14px; height: 14px; }
      .ops-beam__chip--core { width: 48px; height: 48px; }
      .ops-beam__chip--core img { width: 26px; height: 26px; }
      .ops-beam__overlay { max-width: 180px; padding: 10px 12px; }
      .ops-beam__overlay-title { font-size: 13px; }
      .ops-beam__overlay-body { font-size: 10.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ops-beam__svg path.beam-pulse,
      .ops-beam__chip-border { animation: none; }
    }

    .hero-br { display: none; }

    /* ═══════════════════════════════════════════════════════════
       Hero parallax dashboard images
       ═══════════════════════════════════════════════════════════ */
    .hero-parallax {
      position: relative;
      /* Break out of the hero text wrapper to span the full viewport */
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      margin-top: -140px;
      padding: 0 60px;
      box-sizing: border-box;
    }
    /* Up to 1600px: full-bleed. Above 1600px: cap + center so cards
       don't get absurdly huge on ultra-wide. */
    @media (min-width: 1601px) {
      .hero-parallax {
        width: 100%;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    .hero-parallax__scene {
      position: relative;
      width: 100%;
      height: 760px;
      /* Tighter perspective = more dramatic foreshortening */
      perspective: 900px;
      perspective-origin: 50% 25%;
      cursor: default;
      overflow: visible;
    }

    .hero-parallax__layer {
      position: absolute;
      inset: 0;
      transition: transform 500ms cubic-bezier(0.03, 0.98, 0.52, 0.99);
      will-change: transform;
    }

    /* Two cards, same tilt, overlapping. Back sits left+behind, front
       sits right+forward, both lean back and angle to the side so the
       3D depth reads on a flat screen. */
    .hero-parallax__card {
      position: absolute;
      transform-style: preserve-3d;
      opacity: 0;
      filter: blur(10px);
      animation: heroParallaxCardIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .hero-parallax__card--back {
      width: 64%;
      left: 4%;
      top: 0;
      z-index: 1;
      transform: rotateX(22deg) rotateY(-14deg) rotateZ(-2deg);
      animation-delay: 0.15s;
      --final-transform: rotateX(22deg) rotateY(-14deg) rotateZ(-2deg);
    }

    .hero-parallax__card--front {
      display: block;
      width: 58%;
      right: 2%;
      top: 130px;
      z-index: 2;
      transform: rotateX(22deg) rotateY(-14deg) rotateZ(-2deg);
      animation-delay: 0.45s;
      --final-transform: rotateX(22deg) rotateY(-14deg) rotateZ(-2deg);
    }

    @keyframes heroParallaxCardIn {
      0% {
        opacity: 0;
        filter: blur(10px);
        transform: rotateX(28deg) rotateY(-18deg) rotateZ(-3deg) translateY(40px) scale(0.96);
      }
      100% {
        opacity: 1;
        filter: blur(0);
        transform: var(--final-transform);
      }
    }

    .hero-parallax__card img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
      box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 16px 40px rgba(0, 0, 0, 0.5);
      /* Edge fade — left/right + bottom dissolve into black so the
         tilted cards emerge from the dark background instead of
         showing hard rectangle edges. */
      -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(to bottom, black 0%,        black 70%, transparent 100%);
      -webkit-mask-composite: source-in;
              mask-image:
        linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(to bottom, black 0%,        black 70%, transparent 100%);
              mask-composite: intersect;
    }

    @media (max-width: 768px) {
      .hero-parallax {
        margin-top: -60px;
      }
      .hero-parallax__scene {
        height: 460px;
        perspective: 700px;
      }
      .hero-parallax__card--back {
        width: 80%;
        left: 0%;
        top: 0;
        transform: rotateX(20deg) rotateY(-12deg);
        --final-transform: rotateX(20deg) rotateY(-12deg);
      }
      .hero-parallax__card--front {
        width: 72%;
        right: 0%;
        top: 80px;
        transform: rotateX(20deg) rotateY(-12deg);
        --final-transform: rotateX(20deg) rotateY(-12deg);
      }
      @keyframes heroParallaxCardIn {
        0%   { opacity: 0; filter: blur(10px); transform: rotateX(26deg) rotateY(-16deg) translateY(30px) scale(0.96); }
        100% { opacity: 1; filter: blur(0);    transform: var(--final-transform); }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-parallax__layer { transition: none; }
      .hero-parallax__card {
        animation: none;
        opacity: 1;
        filter: blur(0);
        transform: var(--final-transform);
      }
    }

    .hero-dek {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(245, 241, 232, 0.7);
      max-width: 580px;
      margin-bottom: 16px;
    }

    .hero__proof {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(16px, 2vw, 20px);
      font-style: italic;
      font-weight: 400;
      line-height: 1.4;
      color: var(--bb-orange, #C26B3C);
      margin-top: 0;
      margin-bottom: 44px;
      max-width: 680px;
    }

    /* HERO RUNNER: clean 16:9 video, no mask, no border-radius.
       The page bg matches the video gray, so a hard rectangle
       blends naturally. A navy→cream gradient overlay sits on top
       to add the editorial mood split (struggle left → free right). */
    .hero-runner {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }
    .hero-runner__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      display: block;
    }
    .hero-runner__gradient {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(
        to right,
        rgba(20, 20, 22, 0.55) 0%,
        rgba(20, 20, 22, 0.50) 35%,
        rgba(250, 247, 242, 0.20) 50%,
        rgba(250, 247, 242, 0.45) 65%,
        rgba(250, 247, 242, 0.55) 100%
      );
    }

    /* .hero-text .hero-rule rule removed alongside .hero-rule itself. */
    /* Prior 7-stage SVG ornament + .ai-marker / .stage-* rules removed —
       hero now uses the runner video instead. */

    /* ─── SECTION SCAFFOLDING ─── */
    .section {
      padding: var(--section-pad) var(--side-pad);
      position: relative;
    }
    .section-inner--narrow { max-width: 780px; }
    .ig-reel__avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
      padding: 1.5px;
      flex-shrink: 0;
    }
    .ig-reel__avatar--villa {
      background: linear-gradient(135deg, #f4a460, #dd2a7b 50%, #4a7ba8);
    }
    /* Image-backed avatar (real client logo) — drop the dark inner, just clip the image */
    .ig-reel__avatar--image { padding: 0; background: transparent; }
    .ig-reel__avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
    .ig-reel__avatar-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #1a1a1a;
      display: grid;
      place-items: center;
      color: #fff;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
    }
    .before-inner {
      max-width: 760px;
      margin: 0 auto;
    }

    /* .pull-quote intentionally removed (Fix 8 — no italic Playfair). */

    /* ─── PIPELINE: scroll-pinned 7-stage flow ─── */
    .pipeline-wrap {
      position: relative;
      background: var(--bb-navy);
      color: var(--bb-cream);
      /* Tightened from 600vh → 400vh per Task 5 (~57vh per stage). */
      height: 400vh;
    }

    /* Stale .story-caption*, second .dash-mod hover/pulse, and
       .dashboard-progress* rules removed — those elements no longer
       exist in the DOM after the Inside-the-System rebuild. */
    .dash-panel { transition: opacity .35s ease; }

    /* Discovery nudge — sits above the dashboard, points at the sidebar.
       Fades to 0 once the user clicks any tab (.is-dismissed). Hidden on
       touch / narrow viewports since the dashboard restructures there. */
    .workflow__nudge {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 260px;
      margin: 0 0 14px 0;
      padding: 10px 16px;
      background: rgba(194, 107, 60, 0.12);
      border: 1px solid rgba(194, 107, 60, 0.35);
      border-radius: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      transition: opacity 360ms ease, transform 360ms ease;
      animation: workflow-nudge-bob 2.6s ease-in-out infinite;
    }
    .workflow__nudge.is-dismissed {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }
    /* Once the user has clicked any tab, the dashboard's switchScene()
       adds .is-dismissed to the nudge. We use that as a side-channel
       signal to also calm the badges. */
    .workflow__nudge.is-dismissed ~ .workflow__dashboard .workflow__sb-badge,
    .workflow__nudge.is-dismissed ~ .workflow__dashboard .workflow__sb-badge--accent {
      animation: none;
    }

    /* Inner-content primitives — kept from prior tile system,
       reused inside scene-header/title/footer */
    .workflow-tile__num {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--bb-orange);
      font-weight: 500;
    }
    .workflow-tile__cat {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.5);
    }
    .workflow-tile__stat { display: flex; flex-direction: column; gap: 4px; }
    .workflow-tile__stat--single { text-align: left; }
    .workflow-tile__stat-num {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 400;
      color: var(--bb-cream);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .workflow-tile__stat-num--accent { color: var(--bb-orange); }
    .workflow-tile__stat-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.5);
    }

    /* Tile 3 — Opportunities */
    .workflow-tile__opps { flex: 1; display: flex; flex-direction: column; gap: 10px; }
    .wt-opp {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(194, 107, 60, 0.08);
      border: 1px solid rgba(194, 107, 60, 0.2);
      border-radius: 10px;
    }
    .wt-opp__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: rgba(194, 107, 60, 0.12);
      border-radius: 8px;
      flex-shrink: 0;
    }
    .wt-opp__body { flex: 1; }
    .wt-opp__text {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--bb-cream);
      font-weight: 500;
      margin-bottom: 4px;
    }
    .wt-opp__action {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--bb-orange);
      letter-spacing: 0.05em;
    }

    /* Tile 5 — Schedule */
    .workflow-tile__schedule {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
    }
    .wt-sched-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .wt-sched-row--header span {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      color: rgba(245, 241, 232, 0.4);
      text-align: center;
      padding: 4px 0;
    }
    .wt-sched-cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(245, 241, 232, 0.05);
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: rgba(245, 241, 232, 0.5);
    }
    .wt-sched-cell--filled {
      background: rgba(20, 20, 22, 0.6);
      color: var(--bb-cream);
    }
    .wt-sched-note {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.05em;
      color: #4ade80;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Tile 6 — Pulse metrics */
    .workflow-tile__pulse {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .wt-pulse-cell {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 16px;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(245, 241, 232, 0.08);
      border-radius: 12px;
    }
    .wt-pulse-cell--alert {
      background: rgba(194, 107, 60, 0.08);
      border-color: rgba(194, 107, 60, 0.3);
    }
    .wt-pulse-cell__label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.5);
    }
    .wt-pulse-cell__num {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 400;
      color: var(--bb-cream);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .wt-pulse-cell__delta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: rgba(245, 241, 232, 0.5);
    }
    .wt-pulse-cell__delta--up { color: #4ade80; }
    .wt-pulse-cell__delta--alert { color: var(--bb-orange); font-weight: 500; }

    /* ─── DASH TABS (Task 6 part B) ────────────────────────
       Three operator-mode tabs replacing the old 11-mod reel.
       No scroll pin — natural document flow.
       ───────────────────────────────────────────────────── */
    .dash-tabs-section {
      background: var(--bb-paper);
      padding: var(--section-pad) var(--side-pad);
    }
    /* Stale .dashboard-sticky / .dashboard-grid-bg / .dashboard-stage /
       .dash-frame / .dash-sidebar / .dash-sidebar-logo / .dash-mod /
       .dash-mod-icon / .dash-mod-tag rules removed — those elements no
       longer exist in the DOM after the Inside-the-System rebuild. The
       3 surviving panels (inbox/review/warehouse) now live inside
       .dash-tabs-stage and use a minimal display ruleset below. */
    .dash-main {
      padding: 0;
      overflow: visible;
      position: relative;
    }

    .dash-panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .dash-panel-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--bb-cream);
    }
    .dash-panel-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
    }

    .dash-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .dash-table th {
      text-align: left;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bb-text-muted);
      font-weight: 500;
      padding: 8px 10px;
      border-bottom: 1px solid var(--bb-rule);
    }
    .dash-table td {
      padding: 10px;
      border-bottom: 1px solid var(--bb-rule);
      color: var(--bb-text);
    }
    .dash-table td.po-num { font-family: var(--font-mono); color: var(--bb-cream); font-weight: 500; }
    .dash-shield {
      display: inline-block;
      width: 10px; height: 10px;
      border-radius: 2px;
      vertical-align: middle;
      margin-right: 8px;
    }
    .dash-shield.green  { background: #6FCB97; }
    .dash-shield.yellow { background: #DAA54D; }
    .dash-shield.red    { background: #DA4D4D; }

    .dash-stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    .dash-stat {
      padding: 14px;
      background: var(--bb-paper);
      border-radius: 6px;
      border: 1px solid var(--bb-rule);
    }
    .dash-stat-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-text-muted);
      margin-bottom: 6px;
    }
    .dash-stat-value {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--bb-cream);
    }
    .dash-stat-delta {
      font-family: var(--font-mono);
      font-size: 11px;
      color: #6FCB97;
      margin-top: 4px;
    }
    /* ═══════════════════════════════════════════════════════════
       OPPORTUNITIES TAB — Expandable Cards (Aceternity port)
       ═══════════════════════════════════════════════════════════ */
    .workflow__scene--opp {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 24px 18px 18px;
      min-height: 0;
      overflow: visible;
    }
    .opp-header {
      text-align: center;
      padding: 0 24px;
      margin-bottom: 8px;
    }
    .opp-header__title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(22px, 3.5vw, 30px);
      font-weight: 600;
      color: var(--bb-cream, #FAF7F2);
      margin: 0 0 8px;
    }
    .opp-header__sub {
      font-family: Inter, system-ui, sans-serif;
      font-size: 13px;
      color: rgba(245, 241, 232, 0.45);
      margin: 0;
    }

    .opp-cards {
      display: flex;
      gap: 10px;
      padding: 0 20px;
      flex: 1;
      min-height: 0;
      position: relative;
      z-index: 2;
    }

    .opp-card {
      position: relative;
      flex: 1;
      min-width: 0;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: flex 500ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .opp-card:hover {
      flex: 1.15;
    }

    .opp-card__front {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 16px;
    }
    .opp-card__front img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .opp-card:hover .opp-card__front img {
      transform: scale(1.05);
    }

    .opp-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.1) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px 16px;
      gap: 6px;
    }

    .opp-card__cat {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 241, 232, 0.6);
    }
    .opp-card__headline {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(15px, 2vw, 19px);
      font-weight: 600;
      line-height: 1.25;
      color: #fff;
      margin: 0;
    }

    /* Detail (expanded) view */
    .opp-card__detail {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      width: 90vw;
      max-width: 580px;
      max-height: 80vh;
      overflow-y: auto;
      z-index: 100;
      border-radius: 20px;
      background: linear-gradient(180deg, #111 0%, #0A0A0A 100%);
      border: 1px solid rgba(245, 241, 232, 0.1);
      box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.7),
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      padding: 36px 32px 40px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      opacity: 0;
      pointer-events: none;
      transition:
        opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .opp-card.is-expanded .opp-card__detail,
    .opp-card__detail.is-expanded {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }

    .opp-card__close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(245, 241, 232, 0.15);
      background: rgba(245, 241, 232, 0.06);
      color: rgba(245, 241, 232, 0.7);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background 200ms ease, border-color 200ms ease;
      z-index: 5;
      padding: 0;
    }
    .opp-card__close:hover {
      background: rgba(245, 241, 232, 0.12);
      border-color: rgba(245, 241, 232, 0.3);
    }

    .opp-card__detail .opp-card__cat {
      color: var(--bb-orange, #C26B3C);
    }

    .opp-card__detail-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(22px, 4vw, 30px);
      font-weight: 600;
      line-height: 1.2;
      color: #fff;
      margin: 0;
    }

    .opp-card__detail-body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 24px;
      background: rgba(245, 241, 232, 0.04);
      border-radius: 14px;
      border: 1px solid rgba(245, 241, 232, 0.06);
    }
    .opp-card__detail-body p {
      font-family: Inter, system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.65;
      color: rgba(245, 241, 232, 0.75);
      margin: 0;
    }

    .opp-card__detail-stat {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }
    .opp-card__detail-stat span:first-child {
      font-family: Inter, system-ui, sans-serif;
      font-size: 13px;
      color: rgba(245, 241, 232, 0.5);
    }

    .opp-card__money {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      color: #2dd47f;
      letter-spacing: -0.02em;
      text-shadow: 0 0 28px rgba(45, 212, 127, 0.35);
      font-variant-numeric: tabular-nums;
    }
    .opp-card__currency {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 15px;
      font-weight: 500;
      color: rgba(45, 212, 127, 0.7);
      letter-spacing: 0.06em;
    }

    .opp-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      -webkit-backdrop-filter: blur(6px);
              backdrop-filter: blur(6px);
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 350ms ease;
    }
    .opp-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 1024px) {
      .opp-cards {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
      }
      .opp-card {
        flex: 0 0 70%;
        scroll-snap-align: center;
        min-height: 280px;
      }
      .opp-card:hover { flex: 0 0 70%; }
      .opp-card__detail {
        width: 94vw;
        max-height: 85vh;
        padding: 28px 20px 32px;
      }
      .opp-card__money { font-size: 32px; }
    }

    /* ═══════════════════════════════════════════════════════════
       CELL C — Spotlight + Animated List + Number Ticker
       ═══════════════════════════════════════════════════════════ */

    .ops-cell-c {
      position: relative;
      overflow: hidden;
      padding: 0;
    }

    .ops-spotlight {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .ops-spotlight__beam {
      position: absolute;
      width: 300px;
      height: 600px;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0;
      will-change: transform, opacity;
    }
    .ops-spotlight__beam--1 {
      top: -30%;
      left: 10%;
      background: radial-gradient(ellipse at center, rgba(194, 107, 60, 0.25) 0%, transparent 70%);
      animation: ops-spot-1 8s ease-in-out infinite;
    }
    .ops-spotlight__beam--2 {
      top: -20%;
      right: 5%;
      background: radial-gradient(ellipse at center, rgba(201, 169, 110, 0.15) 0%, transparent 70%);
      animation: ops-spot-2 10s ease-in-out infinite;
      animation-delay: 2s;
    }
    @keyframes ops-spot-1 {
      0%, 100% { opacity: 0; transform: translateY(0) rotate(-15deg); }
      50%      { opacity: 1; transform: translateY(10%) rotate(-10deg); }
    }
    @keyframes ops-spot-2 {
      0%, 100% { opacity: 0; transform: translateY(0) rotate(10deg); }
      50%      { opacity: 0.8; transform: translateY(8%) rotate(15deg); }
    }

    .ops-spotlight__grid {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 1px 1px, rgba(245, 241, 232, 0.04) 1px, transparent 0);
      background-size: 20px 20px;
      pointer-events: none;
      z-index: 0;
    }

    .ops-cell-c__content {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 20px 22px;
      align-items: start;
    }

    .ops-cell-c__left {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 2px;
    }

    .ops-ticker {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 8px;
    }
    .ops-ticker__number {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 48px;
      font-weight: 600;
      line-height: 1;
      color: var(--bb-cream, #FAF7F2);
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }
    .ops-ticker__label {
      font-family: Inter, system-ui, -apple-system, sans-serif;
      font-size: 11.5px;
      line-height: 1.4;
      color: rgba(245, 241, 232, 0.5);
      max-width: 200px;
    }

    .ops-cell-c__right {
      position: relative;
      overflow: hidden;
      height: 100%;
    }

    .ops-notif-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ops-notif {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(245, 241, 232, 0.04);
      border: 1px solid rgba(245, 241, 232, 0.07);
      backdrop-filter: blur(4px);
      opacity: calc(1 - (var(--i, 0) * 0.15));
      animation: ops-notif-arrive 500ms cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    @keyframes ops-notif-arrive {
      0%   { transform: translateY(-14px); opacity: 0; }
      100% { transform: translateY(0); }
    }

    .ops-notif__icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .ops-notif__body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .ops-notif__row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .ops-notif__name {
      font-family: Inter, system-ui, sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--bb-cream, #FAF7F2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ops-notif__time {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 232, 0.4);
      flex-shrink: 0;
    }
    .ops-notif__desc {
      font-family: Inter, system-ui, sans-serif;
      font-size: 10.5px;
      color: rgba(245, 241, 232, 0.45);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ops-notif-list__fade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, rgba(20, 20, 22, 0.95) 0%, transparent 100%);
      pointer-events: none;
      z-index: 3;
    }

    @media (max-width: 1024px) {
      .ops-cell-c__content {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
      }
      .ops-ticker__number { font-size: 36px; }
      .ops-cell-c__right { max-height: 200px; }
    }

    /* Mobile: stack vertically; editorial first, reels below */
    @media (max-width: 1024px) {
      .workflow__scene--social {
        flex-direction: column;
        align-items: center;
        padding: 24px;
        overflow-y: auto;
        gap: 20px;
      }
      .ig-phone { width: 240px; }
      .social-edit {
        width: 100%;
        order: -1;
        text-align: center;
        align-items: center;
      }
      .social-edit__title { font-size: 24px; max-width: 18ch; }
      .social-edit__hero-value { font-size: 36px; }
      .social-edit__body { max-width: none; font-size: 15.5px; }
      .social-edit__body em { font-size: 17px; }
      .social-edit__rotate { font-size: 19px; }
      .social-edit__kicker { font-size: 13.5px; }
    }
    @keyframes pulse-swap {
      0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
      50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    }

    /* Responsive — collapse sidebar to horizontal-scroll bar above panel */
    @media (max-width: 1024px) {
      /* Section padding tightens on tablet/mobile */
      .workflow {
        padding: 80px 20px 60px;
      }
      .wf-header {
        margin-bottom: 32px;
      }

      .workflow__dashboard {
        grid-template-columns: 1fr;
        height: auto;
        border-radius: 18px;
      }
      .workflow__sidebar {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-right: none;
        border-bottom: 1px solid rgba(245, 241, 232, 0.08);
        padding: 12px;
        gap: 8px;
      }
      .workflow__sb-header { display: none; }
      .workflow__sb-footer { display: none; }
      .workflow__sb-item {
        flex-shrink: 0;
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
        min-width: 88px;
      }
      .workflow__sb-label { font-size: 12px; flex: none; }
      .workflow__sb-badge { display: none; }
      .workflow__panel-header { padding: 14px 20px; }

      /* CRITICAL — on mobile the dashboard is height: auto, so the
         absolute-positioned scene pattern collapses to zero height.
         Reset scenes to static, hide inactive, show active. */
      .workflow__stage {
        position: relative;
        flex: none;
        min-height: auto;
      }
      .workflow__scene {
        position: static;
        inset: auto;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transition: none;
        padding: 24px 18px 28px;
      }
      .workflow__scene.is-active {
        display: flex;
      }
      .workflow__scene-footer { gap: 24px; flex-wrap: wrap; }

      /* WhatsApp scene specifically — let the stage size to its content
         and let the panes stack vertically. Already has its own (≤768px)
         override; this matches at the 1024px breakpoint too. */
      .workflow__scene--whatsapp .wa-stage {
        height: auto;
        min-height: 0;
      }
      .workflow__scene--whatsapp .wa-pane {
        position: relative;
        inset: auto;
      }
      .workflow__scene--whatsapp .wa-pane--without {
        clip-path: none;
        margin-bottom: 14px;
      }
      .workflow__scene--whatsapp .wa-handle,
      .workflow__scene--whatsapp .wa-hint { display: none; }
      .workflow__scene--whatsapp .wa-pane__body { padding: 12px 10px 14px; }
    }
    @media (max-width: 640px) {
      .workflow { padding: 60px 14px 50px; }
      .workflow__sb-item { min-width: 76px; padding: 8px 10px; }
      .workflow__sb-label { font-size: 11px; }
      .workflow__panel-crumb { font-size: 11px; }
      .workflow__panel-search { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .workflow::before { animation: none; }
      .wt-sched-cell--swapped { animation: none; }
    }
    .wa-title em {
      font-style: italic;
      color: var(--bb-orange, #C26B3C);
    }

    .wa-stage {
      position: relative;
      flex: 1;
      min-height: 0;
      border-radius: 16px;
      overflow: hidden;
      isolation: isolate;
      background: #0b1418;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 30px 60px rgba(0,0,0,0.4);
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
      cursor: ew-resize;
    }

    /* Panes — both layers same size, 900×634 native). Zoomed in to ~720px so the motifs read
       clearly at desktop chat sizes. Light 68% navy tint (down from 92%) —
       message bubbles have solid bg colors so wallpaper only shows in
       gutters; we want it visible there, not buried. */
    .wa-pane {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      background-color: #0b1418;
      background-image:
        linear-gradient(rgba(11,20,24,0.68), rgba(11,20,24,0.68)),
        url('https://assets.tulumi.digital/betterbone/whatsapp%20background%20text.webp');
      background-size: auto, 720px auto;
      background-repeat: repeat;
    }
    .wa-pane--with    { z-index: 1; }
    .wa-pane--without {
      z-index: 2;
      clip-path: inset(0 calc(100% - var(--wa-handle, 50%)) 0 0);
    }

    /* Pane header */
    .wa-pane__head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: #1f2c33;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      flex-shrink: 0;
    }
    .wa-pane__avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2dd47f, #1ea968);
      display: grid;
      place-items: center;
      color: #0b1418;
      flex-shrink: 0;
    }
    .wa-pane__avatar--off {
      background: linear-gradient(135deg, #5a6770, #3d4750);
      color: #1a2125;
    }
    .wa-pane__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wa-pane__name {
      font-family: Inter, system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #e9edef;
      letter-spacing: 0;
    }
    .wa-pane__status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: Inter, system-ui, sans-serif;
      font-size: 11.5px;
      color: #8696a0;
    }
    .wa-pane__dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
    .wa-pane__status--on  { color: #2dd47f; }
    .wa-pane__status--on .wa-pane__dot { box-shadow: 0 0 8px rgba(45,212,127,0.6); }
    .wa-pane__status--off { color: #8696a0; }

    /* Pane body — flex column, no scroll */
    .wa-pane__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 12px 16px;
      overflow: hidden;
      min-height: 0;
    }
    .wa-pane__date {
      align-self: center;
      font-family: Inter, system-ui, sans-serif;
      font-size: 11px;
      color: #8696a0;
      background: rgba(31,44,51,0.85);
      padding: 4px 10px;
      border-radius: 8px;
      margin: 2px 0 6px;
      letter-spacing: 0.02em;
    }

    /* Messages */
    .wa-msg { display: flex; }
    .wa-msg--in  { justify-content: flex-start; }
    .wa-msg--out { justify-content: flex-end; }
    .wa-msg__bubble {
      position: relative;
      max-width: 78%;
      padding: 7px 11px 18px 11px;
      border-radius: 8px;
      font-family: Inter, system-ui, sans-serif;
      font-size: 13.5px;
      line-height: 1.4;
      color: #e9edef;
      word-wrap: break-word;
      box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
    }
    .wa-msg--in  .wa-msg__bubble { background: #202c33; border-top-left-radius: 2px; }
    .wa-msg--out .wa-msg__bubble { background: #005c4b; border-top-right-radius: 2px; }
    .wa-msg--out-muted .wa-msg__bubble { background: #2a3942; color: #b8c1c8; }
    .wa-msg__time {
      position: absolute;
      bottom: 3px;
      right: 8px;
      font-size: 10px;
      color: rgba(233,237,239,0.55);
      white-space: nowrap;
    }
    .wa-msg__check { color: #53bdeb; margin-left: 2px; }
    .wa-msg--out-muted .wa-msg__check { color: rgba(233,237,239,0.4); }

    /* Time-gap pulse (without side only) */
    .wa-gap {
      align-self: center;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(245,107,107,0.85);
      background: rgba(245,107,107,0.08);
      border: 1px solid rgba(245,107,107,0.22);
      padding: 4px 10px;
      border-radius: 999px;
      margin: 2px 0;
    }
    .wa-gap__pulse {
      width: 6px; height: 6px; border-radius: 50%;
      background: #f56b6b;
      box-shadow: 0 0 0 0 rgba(245,107,107,0.6);
      animation: wa-gap-pulse 2s ease-out infinite;
    }
    @keyframes wa-gap-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(245,107,107,0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(245,107,107,0); }
      100% { box-shadow: 0 0 0 0 rgba(245,107,107,0); }
    }

    /* Receipts (in-thread stat finale) */
    .wa-receipt {
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      font-family: Inter, system-ui, sans-serif;
    }
    .wa-receipt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wa-receipt__title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
    .wa-receipt__meta {
      font-size: 12px;
      opacity: 0.85;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .wa-receipt__meta strong {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-weight: 600;
      font-size: clamp(28px, 3.8vw, 34px);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .wa-receipt--confirmed {
      background: linear-gradient(135deg, rgba(45,212,127,0.14), rgba(30,169,104,0.08));
      border: 1px solid rgba(45,212,127,0.3);
      color: #d1f3e2;
    }
    .wa-receipt--confirmed .wa-receipt__icon { color: #2dd47f; flex-shrink: 0; }
    .wa-receipt--confirmed strong { color: #2dd47f; }
    .wa-receipt--lost {
      background: rgba(245,107,107,0.06);
      border: 1px solid rgba(245,107,107,0.22);
      color: rgba(233,237,239,0.7);
    }
    .wa-receipt--lost strong { color: #f56b6b; }

    /* Slider handle */
    .wa-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--wa-handle, 50%);
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: none;
      border: 0;
      padding: 0;
      cursor: ew-resize;
      outline: none;
    }
    .wa-handle__line {
      flex: 1;
      width: 2px;
      background: rgba(250,247,242,0.85);
      box-shadow: 0 0 12px rgba(0,0,0,0.5);
    }
    .wa-handle__grip {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--bb-cream, #FAF7F2);
      color: var(--bb-navy, #113258);
      display: grid;
      place-items: center;
      box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
      transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
    }
    .wa-handle:hover .wa-handle__grip,
    .wa-handle:focus-visible .wa-handle__grip { transform: scale(1.08); }
    .wa-handle:focus-visible .wa-handle__grip {
      box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 3px var(--bb-orange, #C26B3C);
    }

    /* Hint */
    .wa-hint {
      margin: 0;
      text-align: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245,241,232,0.4);
    }

    /* Mobile: stack panes vertically, hide slider */
    @media (max-width: 768px) {
      .wa-pane--without { clip-path: none; position: relative; inset: auto; margin-bottom: 12px; }
      .wa-pane--with    { position: relative; inset: auto; }
      .wa-stage { display: flex; flex-direction: column; gap: 12px; height: auto; }
      .wa-handle, .wa-hint { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .wa-gap__pulse { animation: none; }
      .wa-handle__grip { transition: none; }
    }

    /* ───────── BEAT 3 · Invisible reveal cards ───────── */
    .invisible {
      background: var(--bb-paper);
      padding: 140px 32px 120px;
    }
    .invisible__intro {
      max-width: 720px;
      margin: 0 auto 80px;
      text-align: center;
    }
    .invisible__eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange);
      display: block;
      margin-bottom: 24px;
    }
    .invisible__title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 64px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--bb-cream);
      margin: 0 0 32px 0;
    }
    .invisible__title-em { color: var(--bb-orange); font-style: italic; }
    .invisible__dek {
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 1.6;
      color: var(--bb-text-soft);
      margin: 0;
    }
    .invisible__grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .reveal-card {
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 20px;
      padding: 32px;
      position: relative;
      min-height: 480px;
      overflow: hidden;
      cursor: pointer;
      transition: all 400ms ease;
    }
    .reveal-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(17,50,88,0.12);
      border-color: var(--bb-orange);
    }
    .reveal-card__before,
    .reveal-card__after {
      position: absolute;
      inset: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: opacity 500ms ease, transform 500ms ease;
    }
    .reveal-card__before { opacity: 1; }
    .reveal-card__after { opacity: 0; transform: translateY(20px); }
    .reveal-card:hover .reveal-card__before,
    .reveal-card.is-revealed .reveal-card__before { opacity: 0; transform: translateY(-20px); }
    .reveal-card:hover .reveal-card__after,
    .reveal-card.is-revealed .reveal-card__after { opacity: 1; transform: translateY(0); }

    /* Card 1 — phone msg list */
    .reveal-card__phone {
      background: linear-gradient(180deg, #f5f5f5, #ffffff);
      border-radius: 20px;
      padding: 16px;
      border: 1px solid var(--bb-rule);
      flex: 1;
    }
    .reveal-card__phone-header {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bb-text-soft);
      padding-bottom: 12px;
      border-bottom: 1px solid var(--bb-rule);
      margin-bottom: 12px;
    }
    .reveal-card__msg-list { display: flex; flex-direction: column; gap: 8px; }
    .reveal-card__msg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: var(--bb-paper);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 13px;
    }
    .reveal-card__msg b { color: var(--bb-cream); }
    .reveal-card__msg span {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--bb-text-muted);
    }
    .reveal-card__msg--more {
      text-align: center;
      font-style: italic;
      color: var(--bb-text-muted);
      background: transparent;
      font-size: 12px;
      justify-content: center;
    }
    .reveal-card__breakdown {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 8px 0;
    }
    .reveal-card__breakdown--big { gap: 24px; padding: 20px 0; }
    .reveal-card__breakdown-row {
      display: grid;
      grid-template-columns: 16px auto 1fr;
      gap: 12px;
      align-items: center;
    }
    .reveal-card__breakdown-row--big { grid-template-columns: auto 1fr; align-items: baseline; }
    .reveal-card__dot { width: 12px; height: 12px; border-radius: 50%; }
    .reveal-card__breakdown-num {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 400;
      color: var(--bb-cream);
    }
    .reveal-card__breakdown-num--big {
      font-size: 56px;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .reveal-card__breakdown-label {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--bb-text-soft);
    }
    .reveal-card__breakdown-row--alarm .reveal-card__breakdown-num { color: var(--bb-orange); }
    .reveal-card__breakdown-row--alarm .reveal-card__breakdown-label { color: var(--bb-cream); font-weight: 600; }

    /* Card 2 — map */
    .reveal-card__map {
      background: var(--bb-paper);
      border-radius: 16px;
      padding: 16px;
      border: 1px solid var(--bb-rule);
    }
    .reveal-card__map-svg { width: 100%; height: auto; border-radius: 8px; display: block; }
    .reveal-card__big-stat { text-align: center; margin: 16px 0; }
    .reveal-card__big-num {
      font-family: var(--font-display);
      font-size: 56px;
      font-weight: 400;
      color: var(--bb-cream);
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .reveal-card__big-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bb-text-soft);
      margin-top: 8px;
    }

    /* Card 3 — clock */
    .reveal-card__clock-stage {
      background: linear-gradient(180deg, #0a1628, var(--bb-navy));
      border-radius: 16px;
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }
    .reveal-card__clock { text-align: center; padding: 16px 0; }
    .reveal-card__clock-time {
      font-family: var(--font-display);
      font-size: 40px;
      color: var(--bb-cream);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .reveal-card__clock-day {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--bb-orange);
      margin-top: 8px;
    }
    .reveal-card__sleep-msg { display: flex; flex-direction: column; gap: 8px; }
    .reveal-card__msg-bubble {
      background: rgba(255,255,255,0.1);
      padding: 10px 14px;
      border-radius: 12px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--bb-cream);
      max-width: 85%;
    }
    .reveal-card__msg-bubble b { color: var(--bb-orange); margin-right: 6px; }
    .reveal-card__msg-bubble--reply { background: var(--bb-orange); margin-left: auto; }
    .reveal-card__msg-bubble--reply b { color: white; }
    .reveal-card__msg-bubble--customer { background: rgba(255,255,255,0.1); }
    .reveal-card__msg-time {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(250,247,242,0.5);
      text-align: center;
      margin-top: 8px;
    }
    .reveal-card__msg-time--after { color: #4ade80; }

    /* Card 4 — chaos */
    .reveal-card__chaos {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
    }
    .reveal-card__chaos-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .reveal-card__chaos-item {
      background: var(--bb-paper);
      padding: 10px 14px;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--bb-cream);
      border: 1px solid var(--bb-rule);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .reveal-card__chaos-item .lucide { color: var(--bb-orange); }
    .reveal-card__chaos-item--ai .lucide { color: #228B22; }
    .reveal-card__chaos-item--ai {
      background: rgba(34, 139, 34, 0.08);
      border-color: rgba(34, 139, 34, 0.3);
    }
    .reveal-card__chaos-item--ai span {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #228B22;
      margin-left: 6px;
    }
    .reveal-card__chaos-figure { text-align: center; padding: 16px 0; }
    .reveal-card__chaos-emoji {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: var(--bb-orange);
    }
    .reveal-card__chaos-figure--calm .reveal-card__chaos-emoji { color: #228B22; }
    .reveal-card__chaos-figure-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bb-orange);
    }

    /* Card captions */
    .reveal-card__caption {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 16px;
      color: var(--bb-text-soft);
      margin-top: 16px;
      line-height: 1.4;
    }
    .reveal-card__caption--after {
      color: var(--bb-cream);
      font-weight: 500;
      font-style: normal;
    }

    @media (max-width: 768px) {
      .invisible__grid { grid-template-columns: 1fr; }
      .reveal-card { min-height: 420px; }
    }

    /* ───────── BEAT 4 · Sticky FOMO banner + Final CTA ───────── */
    .fomo-banner {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(140%);
      background: var(--bb-navy);
      color: var(--bb-cream);
      padding: 18px 28px;
      border-radius: 16px;
      border: 1px solid var(--bb-orange);
      box-shadow: 0 20px 60px rgba(17,50,88,0.3);
      z-index: 1000;
      max-width: 780px;
      width: calc(100% - 48px);
      transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fomo-banner.is-visible { transform: translateX(-50%) translateY(0); }
    .fomo-banner__inner { display: flex; align-items: center; gap: 20px; }
    .fomo-banner__pulse {
      width: 10px;
      height: 10px;
      background: var(--bb-orange);
      border-radius: 50%;
      flex-shrink: 0;
      animation: fomo-pulse-orange 2s ease-in-out infinite;
    }
    @keyframes fomo-pulse-orange {
      0%, 100% { box-shadow: 0 0 0 0 rgba(194, 107, 60, 0.6); }
      50% { box-shadow: 0 0 0 8px rgba(194, 107, 60, 0); }
    }
    .fomo-banner__text {
      flex: 1;
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
    }
    .fomo-banner__cta {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bb-orange);
      white-space: nowrap;
      text-decoration: none;
      font-weight: 500;
      flex-shrink: 0;
    }
    .fomo-banner__cta:hover { color: var(--bb-cream); }
    @media (max-width: 640px) {
      .fomo-banner__inner { flex-direction: column; gap: 12px; align-items: flex-start; }
      .fomo-banner__text { font-size: 13px; }
    }

    .final-cta {
      background: var(--bb-navy);
      color: var(--bb-cream);
      padding: 160px 32px;
      text-align: center;
    }
    .final-cta__inner { max-width: 720px; margin: 0 auto; }
    .final-cta__eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-orange);
      display: block;
      margin-bottom: 24px;
    }
    .final-cta__title {
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin: 0 0 32px 0;
    }
    .final-cta__title-em { color: var(--bb-orange); font-style: italic; }
    .final-cta__dek {
      font-family: var(--font-body);
      font-size: 19px;
      line-height: 1.6;
      color: rgba(232,232,234,0.7);
      max-width: 560px;
      margin: 0 auto 48px;
    }
    .final-cta__button {
      display: inline-block;
      background: var(--bb-orange);
      color: var(--bb-cream);
      padding: 18px 36px;
      border-radius: 12px;
      text-decoration: none;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 17px;
      transition: all 300ms ease;
    }
    .final-cta__button:hover {
      background: var(--bb-paper);
      color: var(--bb-cream);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(194,107,60,0.3);
    }
    .final-cta__sub {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(250,247,242,0.4);
      margin-top: 24px;
    }

    @media (prefers-reduced-motion: reduce) {
      .vision-hero__flip { transition: none; }
      .fomo-banner__pulse { animation: none; }
    }

    /* ─── BEFORE: editorial paragraph ─── */
    .before {
      padding: 100px var(--side-pad);
      background: var(--bb-paper);
    }
    .before p {
      font-size: 19px;
      line-height: 1.75;
      color: var(--bb-text-soft);
      margin-bottom: 24px;
    }
    .before p:first-of-type::first-letter {
      font-family: var(--font-display);
      font-size: 64px;
      line-height: 1;
      float: left;
      margin: 4px 14px 0 0;
      color: var(--bb-orange);
      font-weight: 500;
    }

    /* ─── THE MOVEMENT — scroll-pinned watch-assembly section ───
       The page's one metaphor moment. Veo-rendered video plays
       full-bleed; three cards crossfade keyed to scroll progress.
       Until the R2 video URL arrives, an empty cream block holds
       the space — no cartoon fallback. ───────────────────────── */
    .movement-wrap {
      position: relative;
      background: var(--bb-paper);
      height: 320vh;
    }
    .movement-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 100px var(--side-pad) 80px;
    }
    @media (max-width: 980px) {
      .movement-wrap { height: auto; }
      .movement-sticky { position: relative; height: auto; padding: 80px var(--side-pad); }
    }
    .movement-header {
      max-width: var(--max-width);
      margin: 0 auto 40px;
      width: 100%;
    }
    .movement-stage {
      position: relative;
      max-width: var(--max-width);
      margin: 0 auto;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--bb-navy-soft);
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--bb-rule);
    }
    @media (max-width: 980px) {
      .movement-stage { aspect-ratio: 4 / 5; }
    }
    .watch-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .movement-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--bb-text-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .movement-card {
      position: absolute;
      max-width: 320px;
      padding: 22px 26px;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule-strong);
      border-radius: 4px;
      box-shadow: 0 18px 40px -10px rgba(20, 20, 22, 0.2);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--bb-cream);
      opacity: 0;
      transition: opacity 200ms ease;
      pointer-events: none;
    }
    .movement-card.is-visible { opacity: 1; }
    .movement-card-1 { top: 8%;  left: 5%;  }
    .movement-card-2 { top: 42%; left: 50%; transform: translateX(-50%); text-align: center; }
    .movement-card-3 { bottom: 8%; right: 5%; }
    @media (max-width: 720px) {
      .movement-card { position: static; max-width: 100%; margin-top: 16px; transform: none; text-align: left; }
      .movement-card-2 { transform: none; text-align: left; }
    }

    /* ─── DASHBOARD HERO — real screenshot in browser chrome ───
       Replaces the prior cartoon-PO scrub. Single high-res
       screenshot of the production dashboard (Purchase Orders
       view) with a subtle browser chrome and depth shadow. No
       scroll-pin, no scrub. Document flow is normal again.
       ───────────────────────────────────────────────────── */
    .dashboard-wrap {
      position: relative;
      background: var(--bb-paper);
      padding: var(--section-pad) var(--side-pad);
    }
    .dashboard-inner {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      position: relative;
    }
    .dashboard-header {
      text-align: left;
      margin-bottom: 56px;
      max-width: 720px;
    }
    .dashboard-shot-frame {
      position: relative;
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule-strong);
      box-shadow: 0 50px 90px -30px rgba(20, 20, 22, 0.28);
    }
    .dashboard-shot-chrome {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      background: var(--bb-navy-soft);
      border-bottom: 1px solid var(--bb-rule);
    }
    .dashboard-shot-chrome span {
      width: 9px; height: 9px; border-radius: 50%;
      background: rgba(17,50,88,0.18);
    }
    .dashboard-shot-url {
      flex: 1;
      margin-left: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--bb-text-muted);
    }
    .dashboard-shot-img {
      display: block;
      width: 100%;
      height: auto;
    }
    @media (max-width: 720px) {
      .dash-tabs-bar { flex-direction: column; }
      .dash-tab { border-bottom: 1px solid var(--bb-rule); padding: 16px 8px; }
      .dash-tab.is-active { border-bottom-width: 2px; border-bottom-color: var(--bb-orange); }
    }
    @media (max-width: 720px) {
      .dash-tabs-stage { padding: 24px 20px; }
    }

    @media (max-width: 980px) {
      .dashboard-wrap { height: auto; }
    }
    @keyframes dashFade {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── AI ENGINE: 3 columns ─── */
    .ai-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 56px;
    }
    @media (max-width: 900px) {
      .ai-grid { grid-template-columns: 1fr; }
    }
    .ai-card {
      padding: 36px 28px;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }
    .ai-card-vis {
      height: 140px;
      display: grid;
      place-items: center;
      margin-bottom: 28px;
      position: relative;
    }
    .ai-card h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 24px;
      color: var(--bb-cream);
      margin-bottom: 10px;
    }
    .ai-card p {
      color: var(--bb-text-soft);
      font-size: 15px;
      line-height: 1.6;
    }
    .ai-card-tag {
      position: absolute;
      top: 20px; right: 20px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
    }

    /* AI vis: vision scan lines */
    .ai-vis-scan {
      width: 100%; height: 100%;
      position: relative;
      background: var(--bb-paper);
      border-radius: 4px;
      overflow: hidden;
    }
    .ai-vis-scan::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        180deg,
        var(--bb-rule) 0 1px,
        transparent 1px 12px
      );
    }
    .ai-vis-scan::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--bb-orange), transparent);
      animation: scanY 2.2s ease-in-out infinite;
      box-shadow: 0 0 16px var(--bb-orange);
    }
    @keyframes scanY {
      0%   { top: 0; }
      50%  { top: calc(100% - 2px); }
      100% { top: 0; }
    }

    /* AI vis: confidence gauge */
    .ai-vis-gauge {
      width: 140px; height: 140px;
      position: relative;
    }
    .ai-vis-gauge svg { width: 100%; height: 100%; }
    .gauge-track  { fill: none; stroke: var(--bb-rule); stroke-width: 10; }
    .gauge-fill   { fill: none; stroke: var(--bb-orange); stroke-width: 10; stroke-linecap: round;
                     stroke-dasharray: 314; stroke-dashoffset: 88;
                     transition: stroke-dashoffset 1.2s ease; }
    .gauge-label {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--bb-cream);
    }

    /* AI vis: budget meter */
    .ai-vis-meter {
      width: 100%;
      max-width: 220px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .meter-row {
      display: flex; justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--bb-text-soft);
    }
    .meter-bar {
      height: 8px;
      background: var(--bb-rule);
      border-radius: 4px;
      overflow: hidden;
    }
    .meter-fill {
      height: 100%;
      background: linear-gradient(90deg, #6FCB97 0%, var(--bb-orange) 75%, #DA4D4D 100%);
      width: 62%;
      border-radius: 4px;
      transition: width 1s ease;
    }
    .meter-rule {
      position: relative;
      height: 1px;
      background: var(--bb-rule);
      margin: 6px 0;
    }
    .meter-rule::before {
      content: 'CAP';
      position: absolute;
      right: 24%; top: -16px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      color: var(--bb-text-muted);
    }
    .meter-rule::after {
      content: '';
      position: absolute;
      right: 25%; top: -4px;
      width: 1px; height: 12px;
      background: var(--bb-text-muted);
    }

    /* ─── STACK & MATH — two-column block in homepage voice ─────
       Replaces the prior exploded schematic. Left: stack bullets.
       Right: cost math in the same visual language as the
       homepage's .cost-block.
       ───────────────────────────────────────────────────── */
    .stackmath-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-top: 56px;
    }
    @media (max-width: 900px) {
      .stackmath-grid { grid-template-columns: 1fr; gap: 32px; }
    }
    .stackmath-col-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bb-text-muted);
      padding-bottom: 14px;
      margin-bottom: 18px;
      border-bottom: 1px solid var(--bb-rule);
    }
    .stackmath-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .stackmath-list li {
      padding: 14px 0 14px 22px;
      border-bottom: 1px solid var(--bb-rule);
      position: relative;
      font-size: 14px;
      line-height: 1.6;
      color: var(--bb-text-soft);
    }
    .stackmath-list li:last-child { border-bottom: none; }
    .stackmath-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 22px;
      width: 12px; height: 6px;
      border-left: 1.5px solid var(--bb-orange);
      border-bottom: 1.5px solid var(--bb-orange);
      transform: rotate(-45deg);
    }
    .stackmath-list strong {
      display: block;
      font-weight: 500;
      color: var(--bb-cream);
      margin-bottom: 4px;
      font-size: 15px;
    }
    .stackmath-block {
      padding: 32px 28px;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 4px;
    }
    .stackmath-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--bb-rule);
    }
    .stackmath-row:first-child { border-top: 1px solid var(--bb-rule); }
    .stackmath-row--total {
      border-bottom: none;
      padding-top: 22px;
      margin-top: 4px;
      border-top: 1px solid var(--bb-rule-strong);
    }
    .stackmath-row-label {
      flex: 1;
      font-size: 14px;
      color: var(--bb-text-soft);
    }
    .stackmath-row--total .stackmath-row-label {
      font-weight: 600;
      color: var(--bb-cream);
    }
    .stackmath-row-value {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      color: var(--bb-cream);
      white-space: nowrap;
    }
    .stackmath-row-value small {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      color: var(--bb-text-muted);
      margin-left: 2px;
    }
    .stackmath-row-value--good { color: #2A8A53; }
    .stackmath-row-value--accent {
      color: var(--bb-orange);
      font-size: 24px;
    }

    /* Prior .arch-* schematic CSS removed — Stack & Math block
       replaced the schematic; those rules no longer match any DOM. */
    /* ─── STACK (legacy {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--bb-rule);
      border: 1px solid var(--bb-rule);
      border-radius: 8px;
      overflow: hidden;
      margin-top: 56px;
    }

    /* ─── SAFETY: 4 pillars ─── */
    .safety-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 56px;
    }
    @media (max-width: 900px) { .safety-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .safety-grid { grid-template-columns: 1fr; } }
    .safety-card {
      padding: 28px 24px;
      background: rgba(250, 246, 238, 0.06);
      border: 1px solid rgba(250, 246, 238, 0.12);
      border-radius: 8px;
      transition: all .25s;
    }
    .safety-card:hover {
      background: rgba(250, 246, 238, 0.1);
      border-color: rgba(218, 111, 77, 0.35);
    }
    .safety-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: rgba(218, 111, 77, 0.15);
      display: grid; place-items: center;
      margin-bottom: 18px;
      color: var(--bb-orange);
    }
    .safety-icon svg { width: 18px; height: 18px; }
    .safety-card h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 19px;
      color: var(--bb-cream);
      margin-bottom: 8px;
    }
    .safety-card p {
      font-size: 13px;
      color: rgba(250, 246, 238, 0.7);
      line-height: 1.55;
    }

    /* ─── NUMBERS ─── */
    .numbers-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 56px;
    }
    @media (max-width: 900px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
    .number-card {
      padding: 36px 28px;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 8px;
      position: relative;
    }
    .number-value {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(40px, 4vw, 60px);
      line-height: 1;
      color: var(--bb-cream);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .number-value sup { font-size: 0.5em; color: var(--bb-orange); margin-left: 2px; vertical-align: super; }
    .number-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--bb-text-muted);
      margin-bottom: 10px;
    }
    .number-desc {
      font-size: 13px;
      color: var(--bb-text-soft);
      line-height: 1.55;
    }

    /* ─── DELIVERABLES ─── */
    .deliverables-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 56px;
    }
    @media (max-width: 980px) { .deliverables-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .deliverables-grid { grid-template-columns: 1fr; } }

    .deliv-card {
      padding: 24px 20px;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 8px;
      transition: all .25s;
      cursor: default;
    }
    .deliv-card:hover {
      border-color: var(--bb-orange);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(20, 20, 22, 0.08);
    }
    .deliv-thumb {
      aspect-ratio: 8.5 / 11;
      background: var(--bb-paper);
      border: 1px solid var(--bb-rule);
      border-radius: 4px;
      margin-bottom: 16px;
      padding: 18px 14px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(17,50,88,0.06);
    }
    .deliv-thumb-eyebrow {
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      font-weight: 600;
      margin-bottom: 12px;
    }
    .deliv-thumb-logo {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: var(--bb-cream);
      margin-bottom: 14px;
    }
    .deliv-thumb-logo span { color: var(--bb-orange); }
    .deliv-thumb-title {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.15;
      color: var(--bb-cream);
      margin-bottom: 12px;
    }
    .deliv-thumb-rule {
      width: 32px; height: 2px;
      background: var(--bb-orange);
      margin-bottom: 12px;
    }
    .deliv-thumb-meta {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 10px;
      color: var(--bb-text-soft);
      line-height: 1.4;
    }
    .deliv-thumb--code {
      background: var(--bb-navy);
      padding: 18px 14px;
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--bb-cream);
      line-height: 1.5;
      overflow: hidden;
    }
    .deliv-thumb--code .key { color: var(--bb-orange); }
    .deliv-thumb--code .str { color: #6FCB97; }
    .deliv-thumb--app {
      background: var(--bb-navy);
      padding: 0;
      display: flex; flex-direction: column;
    }
    .deliv-thumb--app .browser-bar {
      display: flex; align-items: center; gap: 4px;
      padding: 6px 10px; background: rgba(250,246,238,0.08); border-bottom: 1px solid rgba(250,246,238,0.1);
    }
    .deliv-thumb--app .browser-dot {
      width: 6px; height: 6px; border-radius: 50%; background: rgba(250,246,238,0.3);
    }
    .deliv-thumb--app .browser-url {
      flex: 1; margin-left: 8px;
      font-family: var(--font-mono); font-size: 8px; color: rgba(250,246,238,0.5);
    }
    .deliv-thumb--app .app-body {
      flex: 1;
      display: grid;
      grid-template-columns: 30% 1fr;
      gap: 1px;
      background: rgba(250,246,238,0.08);
    }
    .deliv-thumb--app .app-side, .deliv-thumb--app .app-main { background: var(--bb-navy); padding: 8px; }
    .deliv-thumb--app .app-side div { height: 4px; background: rgba(250,246,238,0.18); margin-bottom: 4px; border-radius: 1px; }
    .deliv-thumb--app .app-side div:nth-child(2) { background: var(--bb-orange); }
    .deliv-thumb--app .app-main div { height: 6px; background: rgba(250,246,238,0.12); margin-bottom: 4px; border-radius: 1px; }

    .deliv-name {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      color: var(--bb-cream);
      margin-bottom: 4px;
    }
    .deliv-meta {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bb-text-muted);
    }

    /* ─── CLOSING + CTA ─── */
    .closing {
      background: var(--bb-paper);
      padding: var(--section-pad) var(--side-pad);
    }
    .closing-inner {
      max-width: 740px;
      margin: 0 auto;
      text-align: center;
    }
    .closing-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.15;
      color: var(--bb-cream);
      margin-bottom: 28px;
      letter-spacing: -0.015em;
    }
    .closing-title em { color: var(--bb-orange); font-style: normal; font-weight: 500; }
    .closing-body {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: var(--bb-text-soft);
      max-width: 60ch;
      margin: 0 auto 48px;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 36px;
      background: var(--bb-navy);
      color: var(--bb-cream);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.05em;
      border-radius: 4px;
      transition: all .25s;
    }
    .cta-btn:hover {
      background: var(--bb-orange);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(218, 111, 77, 0.32);
    }
    .cta-btn-arrow {
      transition: transform .25s;
    }
    .cta-btn:hover .cta-btn-arrow { transform: translateX(4px); }

    /* ─── NEXT CASE + FOOTER ─── */
    .next-case {
      background: var(--bb-navy-deep);
      color: var(--bb-cream);
      padding: 100px var(--side-pad);
    }
    .next-case-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .next-case-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bb-orange);
      margin-bottom: 8px;
    }
    .next-case-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 500;
      color: var(--bb-cream);
    }
    .next-case-arrow {
      font-size: 32px;
      color: var(--bb-orange);
      transition: transform .25s;
    }
    .next-case:hover .next-case-arrow { transform: translateX(8px); }

    .footer {
      padding: 60px var(--side-pad) 40px;
      background: var(--tulumi-bg);
      color: var(--tulumi-text);
      text-align: center;
      font-size: 13px;
    }
    .footer a { color: var(--tulumi-accent); }
    .footer p { opacity: .65; margin-top: 8px; }

    /* Reveal helpers */
    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s ease, transform .8s ease;
    }
    [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      [data-reveal] { opacity: 1; transform: none; }
    }

    /* ═══════════════════════════════════════════════════════════════
       BB ROBO HERO — Matter-style layout
       Title left / copy right, "tulumi co" as a faded wordmark
       watermark behind a 3D robot. Replaces the dashboard parallax
       intro. Owns the first viewport.
       ═══════════════════════════════════════════════════════════════ */
    .bb-robo {
      position: relative;
      background: var(--tulumi-bg);
      color: var(--tulumi-text);
      padding: calc(var(--header-stack-h) + 24px) var(--side-pad) 28px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      isolation: isolate;
    }

    /* Gold washes — top lifts the wordmark, bottom dissolves into vision section */
    .bb-robo::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 70% at 50% 0%, rgba(201, 169, 110, 0.14) 0%, rgba(10, 10, 11, 0) 60%),
        radial-gradient(80% 40% at 50% 100%, rgba(201, 169, 110, 0.09) 0%, rgba(10, 10, 11, 0) 70%);
      z-index: 0;
      pointer-events: none;
    }
    /* Faint grid for engineering texture (matches workflow ripple language) */
    .bb-robo::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(80% 60% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(80% 60% at 50% 50%, black 30%, transparent 80%);
      z-index: 0;
      pointer-events: none;
    }

    .bb-robo__inner {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      min-height: 0;
    }

    /* Title / copy split header — Matter-style two-column */
    .bb-robo__head {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: clamp(24px, 5vw, 80px);
      align-items: start;
    }
    .bb-robo__title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(30px, 3.6vw, 56px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--bb-cream);
      margin: 0;
      max-width: 18ch;
    }
    .bb-robo__title-em {
      color: var(--tulumi-accent);
      font-style: italic;
      font-weight: 500;
    }
    .bb-robo__title-block {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bb-robo__subline {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(18px, 1.8vw, 26px);
      color: var(--tulumi-text);
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .bb-robo__subline-em {
      color: var(--tulumi-accent);
      font-style: italic;
      font-weight: 500;
    }
    .bb-robo__copy {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.65;
      color: rgba(232, 232, 234, 0.72);
      margin: 0;
      padding-top: 8px;
      max-width: 44ch;
    }
    .bb-robo__copy-em {
      text-decoration: underline;
      text-decoration-color: var(--tulumi-accent);
      text-underline-offset: 5px;
      text-decoration-thickness: 1.5px;
      color: var(--tulumi-text);
      font-weight: 400;
    }
    @media (max-width: 768px) {
      .bb-robo__head {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .bb-robo__copy { padding-top: 0; }
    }

    .bb-robo__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--tulumi-accent);
      padding: 6px 14px;
      border: 1px solid rgba(201, 169, 110, 0.35);
      border-radius: 2px;
      background: rgba(10, 10, 11, 0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .bb-robo__eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--tulumi-accent);
      box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.6);
      animation: bbRoboPulse 2.4s ease-out infinite;
    }
    @keyframes bbRoboPulse {
      0%   { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.6); }
      80%  { box-shadow: 0 0 0 10px rgba(201, 169, 110, 0); }
      100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
    }

    /* Stage: faded wordmark watermark + robot on top, centered.
       flex:1 + min-height:0 lets the stage shrink so the whole hero
       fits in 100vh without overflow. */
    .bb-robo__stage {
      position: relative;
      width: 100%;
      flex: 1 1 0;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }

    .bb-robo__wordmark {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(96px, 18vw, 280px);
      line-height: 0.9;
      letter-spacing: 0.02em;
      text-transform: lowercase;
      user-select: none;
      pointer-events: none;
      margin: 0;
      white-space: nowrap;
      z-index: 1;
    }
    /* Single centered word "tulumico" — faded watermark behind the robot */
    .bb-robo__word {
      display: inline-block;
      color: rgba(232, 232, 234, 0.10);
    }
    .bb-robo__word-co {
      color: rgba(201, 169, 110, 0.26);
      font-weight: 500;
    }

    /* Spline viewer: layered above the wordmark, occupies the middle.
       Mirrors the homepage .hero-robo exactly — the container itself is
       a constrained-width band sized via top:0/bottom:0, and the viewer
       fills it 100%. No flex layout (custom elements + height:100% +
       flex don't reliably stretch on Safari/Chrome). Centered via
       left:50% + translateX(-50%) instead of right-aligned like home. */
    .bb-robo__scene {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: auto;
      transform: scale(0.82);
      transform-origin: bottom center;
    }
    .bb-robo__scene spline-viewer {
      display: block;
      width: 100%;
      height: 100%;
      background: transparent !important;
      --spline-viewer-bg: transparent;
    }
    /* Hide the Spline watermark in Phase 1. We will swap to a self-hosted
       .splinecode in Phase 2 which removes it at the source — this is a
       visual-only shim and the watermark is still embedded in the binary
       until export. */
    .bb-robo__scene spline-viewer::part(logo),
    .bb-robo__scene #logo {
      display: none !important;
    }

    /* Bottom row — stat cards + spinning scroll stamp */
    .bb-robo__footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: clamp(24px, 4vw, 56px);
      padding-top: 0;
      flex-shrink: 0;
    }

    .bb-robo__stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 0;
      max-width: 520px;
      flex: 1;
    }
    .bb-robo__stat {
      position: relative;
      padding: 4px 28px 4px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
    }
    .bb-robo__stat + .bb-robo__stat {
      padding-left: 28px;
      border-left: 1px solid rgba(232, 232, 234, 0.10);
    }
    .bb-robo__stat-label {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.01em;
      color: var(--bb-cream);
    }
    .bb-robo__stat-sub {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(232, 232, 234, 0.58);
      margin: 0;
    }
    .bb-robo__stat-value {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--tulumi-accent);
      margin-top: auto;
      padding-top: 8px;
    }
    .bb-robo__stat-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* Spinning "Scroll down" stamp — circular text + center arrow */
    .bb-robo__scroll-stamp {
      position: relative;
      width: clamp(96px, 9vw, 128px);
      height: clamp(96px, 9vw, 128px);
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--tulumi-text);
      transition: color .25s ease;
    }
    .bb-robo__scroll-stamp::before,
    .bb-robo__scroll-stamp::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(232, 232, 234, 0.18);
      pointer-events: none;
    }
    .bb-robo__scroll-stamp::before { inset: 0; }
    .bb-robo__scroll-stamp::after { inset: 18%; }
    .bb-robo__scroll-stamp:hover {
      color: var(--tulumi-accent);
    }
    .bb-robo__scroll-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      animation: bbRoboSpin 14s linear infinite;
    }
    .bb-robo__scroll-text {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      fill: rgba(232, 232, 234, 0.78);
    }
    .bb-robo__scroll-diamond {
      fill: var(--tulumi-accent);
      font-size: 18px;
    }
    .bb-robo__scroll-stamp:hover .bb-robo__scroll-text {
      fill: var(--tulumi-accent);
    }
    .bb-robo__scroll-arrow {
      position: relative;
      z-index: 1;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .bb-robo__scroll-arrow svg {
      width: 100%;
      height: 100%;
    }
    @keyframes bbRoboSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bb-robo__scroll-ring { animation: none; }
    }

    /* No stage min-height — flex:1 fills whatever space the eyebrow
       + title row + footer leave inside the 100vh hero shell. */

    @media (max-width: 768px) {
      .bb-robo {
        padding: calc(var(--header-stack-h) + 24px) var(--side-pad) 28px;
        height: auto;
        min-height: 100vh;
      }
      .bb-robo__wordmark {
        font-size: clamp(72px, 22vw, 160px);
        letter-spacing: 0.01em;
      }
      .bb-robo__stage { min-height: clamp(240px, 60vw, 380px); }
      /* On mobile, constrain the scene to roughly the stage band so the
         robot doesn't blow out to fill 100vh. Anchored toward the
         middle of the section between the head and footer. */
      .bb-robo__scene {
        inset: auto 0 auto 0;
        top: clamp(180px, 30vh, 280px);
        height: clamp(280px, 50vh, 420px);
      }
      .bb-robo__scene spline-viewer { width: 100%; max-width: 420px; height: 100%; }
      .bb-robo__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }
      .bb-robo__stats { max-width: none; }
      .bb-robo__stat-value { margin-top: 8px; }
      .bb-robo__scroll-stamp {
        align-self: flex-end;
        width: 96px;
        height: 96px;
        margin-top: -12px;
      }
    }

/* ============================================================
   V4 SEO/GEO sections — Pricing, FAQ, About Nick, Hero H2
   Added 2026-05-04 alongside the URL migration to
   /services/fractional-ai-cto/ and the Spanish twin.
   ============================================================ */

/* ── Hero H2 (keyword tagline below the H1 hook) ───────────── */
.bb-robo__h2-keyword {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(232, 232, 232, 0.55);
  max-width: 620px;
  line-height: 1.55;
  margin: -4px 0 18px;
  opacity: 0;
  transform: translateY(16px);
  animation: bbRoboFadeUp 0.6s ease 0.45s forwards;
}
@keyframes bbRoboFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Common section chrome ─────────────────────────────────── */
.seo-section-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.85);
  margin-bottom: 16px;
}
.seo-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  color: #f4f4f5;
  max-width: 32ch;
  margin: 0 0 36px;
}

/* ── Pricing block ─────────────────────────────────────────── */
.seo-pricing {
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 64px);
  background: linear-gradient(180deg, #08080a 0%, #0d0d10 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.08);
}
.seo-pricing__inner {
  max-width: 880px;
  margin: 0 auto;
}
.seo-pricing__list {
  margin: 0;
  display: grid;
  gap: 8px;
}
.seo-pricing__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.seo-pricing__row:last-child { border-bottom: 0; }
.seo-pricing__row dt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.95);
  margin: 0;
}
.seo-pricing__row dd {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: #e8e8ea;
  margin: 0;
}
@media (min-width: 720px) {
  .seo-pricing__row {
    grid-template-columns: 280px 1fr;
    align-items: baseline;
    gap: 32px;
  }
}

/* ── FAQ block ─────────────────────────────────────────────── */
.seo-faq {
  padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 64px);
  background: #08080a;
}
.seo-faq__inner {
  max-width: 880px;
  margin: 0 auto;
}
.seo-faq__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.seo-faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 22px 0 22px;
}
.seo-faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.seo-faq__item summary {
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  color: #f4f4f5;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-right: 36px;
  position: relative;
  line-height: 1.45;
}
.seo-faq__item summary::-webkit-details-marker { display: none; }
.seo-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  color: rgba(212, 175, 55, 0.7);
  transition: transform 0.3s ease;
}
.seo-faq__item[open] summary::after {
  content: '−';
  transform: rotate(0deg);
}
.seo-faq__a {
  margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232, 232, 234, 0.78);
  max-width: 70ch;
}

/* ── About Nick (expert-bio) ───────────────────────────────── */
.expert-bio {
  padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 64px);
  background: linear-gradient(180deg, #0d0d10 0%, #08080a 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.08);
}
.expert-bio__inner {
  max-width: 880px;
  margin: 0 auto;
}
.expert-bio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 720px) {
  .expert-bio__grid {
    grid-template-columns: 200px 1fr;
    gap: 44px;
  }
}
.expert-bio__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: block;
}
@media (min-width: 720px) {
  .expert-bio__photo { width: 200px; height: 200px; }
}
.expert-bio__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  color: #f4f4f5;
  margin: 0 0 14px;
}
.expert-bio__body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(232, 232, 234, 0.82);
  margin: 0 0 22px;
  max-width: 64ch;
}
.expert-bio__body strong {
  color: #f4f4f5;
  font-weight: 500;
}
.expert-bio__linkedin {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(212, 175, 55, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.expert-bio__linkedin:hover {
  color: #f0d27a;
  border-color: rgba(240, 210, 122, 0.9);
}