/* ---- Logo Carousel ---- */
.logo-carousel-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.logo-carousel-label {
  text-align: left;
  padding-left: var(--px);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.25rem;
}

.logo-track-mask {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: logoScroll 28s linear infinite;
}

.logo-track:hover { animation-play-state: paused; }

.logo-track img {
  height: 22px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

/* Per-logo size corrections for visual parity */
.logo-track img[alt="Notion"],
.logo-track img[alt="Berkeley"],
.logo-track img[alt="HP"]        { height: 34px; }

.logo-track img[alt="Zuora"],
.logo-track img[alt="Meta"],
.logo-track img[alt="Salesforce"],
.logo-track img[alt="MIT"]       { height: 46px; }

.logo-track img:hover { opacity: 0.85; }

@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ---- Tokens ---- */
:root {
  --color-bg:           #000000;
  --color-text:         #ffffff;
  --color-text-muted:   rgba(255,255,255,0.6);
  --color-accent:       #59322B;
  --color-surface:      #2a2520;
  --color-surface-alt:  rgba(255,255,255,0.08);
  --color-problem-accent: #59322B; /* ← swap this to change the bold words in the problem section */
  --color-parchment: #EDE0C8;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --px: clamp(1.5rem, 5vw, 5rem);
}

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================
   HERO
============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 6vh, 5rem) var(--px) 6rem;
  background-image: url('assets/pexels-azulandeira-14297987.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

/* eyebrow is absolute — everything else needs z-index via relative */
#hero > * { position: relative; z-index: 1; }
#hero > .hero-eyebrow        { position: absolute; z-index: 2; }
#hero > .hero-nav-right      { position: absolute; z-index: 2; }
#hero > .logo-carousel-wrap  { position: absolute; z-index: 2; }

.hero-eyebrow {
  top: clamp(2rem, 4vh, 3rem);
  left: var(--px);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) forwards 0.2s;
}

.hero-logo-mark {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
}

.hero-logo-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Top-right nav */
.hero-nav-right {
  position: absolute;
  top: clamp(2rem, 4vh, 3rem);
  right: var(--px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) forwards 0.2s;
}

/* ── Waitlist outline button ─────────────────────────────── */
.btn-waitlist {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.52rem 1.2rem;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn-waitlist:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.btn-waitlist:active { transform: translateY(0); }

/* ── Waitlist modal ─────────────────────────────────────── */
.waitlist-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 8, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.waitlist-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.waitlist-card {
  position: relative;
  background: #faf6ef;
  border-radius: 14px;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.75rem, 5vw, 3rem);
  width: 100%;
  max-width: 440px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.waitlist-overlay.open .waitlist-card {
  transform: none;
}

.waitlist-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(30, 18, 10, 0.35);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.waitlist-close:hover { color: rgba(30, 18, 10, 0.7); }

.waitlist-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #EF9A48;
  margin: 0 0 0.75rem;
}
.waitlist-heading {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 600;
  color: rgba(30, 18, 10, 0.88);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.waitlist-sub {
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  color: rgba(30, 18, 10, 0.45);
  margin: 0 0 1.75rem;
}

.waitlist-form { display: flex; flex-direction: column; gap: 0.75rem; }

.waitlist-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(30, 18, 10, 0.15);
  border-radius: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  color: rgba(30, 18, 10, 0.88);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.waitlist-field input:focus {
  border-color: #EF9A48;
}
.waitlist-field input::placeholder {
  color: rgba(30, 18, 10, 0.3);
}

.waitlist-submit {
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: rgba(30, 18, 10, 0.9);
  color: #faf6ef;
  border: none;
  border-radius: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.waitlist-submit:hover { background: rgba(30, 18, 10, 1); transform: translateY(-1px); }
.waitlist-submit:active { transform: translateY(0); }
.waitlist-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.ws-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.waitlist-success {
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  color: #2d8a4e;
  margin: 1rem 0 0;
  text-align: center;
}
.waitlist-error {
  font-family: 'Geist', sans-serif;
  font-size: 0.85rem;
  color: #c0392b;
  margin: 0.75rem 0 0;
  text-align: center;
}

.btn-demo {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #0a0a0a;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn-demo:hover {
  background: #e8e8e8;
  transform: translateY(-1px);
}

.btn-demo:active { transform: translateY(0); }

.hero-h1 { display: none; }

/* ---- neon block ---- */
.hero-neon-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.neon-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.13em;
  line-height: 1.15;
  text-transform: uppercase;
  /*
    Photorealistic neon layers:
    1. tube body: warm pinkish-red (#ff8090) — the lit glass
    2. tight highlight: near-white warm (#ffdde4) — hottest point of tube
    3. inner glow: vivid crimson-pink (#ff2244) — tight halo
    4. mid glow: site brand red (#c81f3c) — fills the bloom
    5. far bloom: deep crimson falloff, lights the wall
  */
  color: #7fdfd0;
  text-shadow:
    0 0 2px  #c8f5ee,
    0 0 5px  #c8f5ee,
    0 0 10px #22d4b8,
    0 0 20px #1ab8a0,
    0 0 40px #4DA394,
    0 0 70px #4DA394,
    0 0 110px rgba(77,163,148,0.65),
    0 0 180px rgba(60,128,120,0.35);
  opacity: 1;
  animation: neon-appear 0.9s var(--ease) forwards 0.35s, neon-flicker 6s infinite 1.3s;
}

@keyframes neon-appear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes neon-poweron {
  0%   { opacity: 0;    text-shadow: none; }
  /* first spark */
  8%   { opacity: 0.9;
         text-shadow: 0 0 2px #c8f5ee, 0 0 12px #22d4b8, 0 0 30px #4DA394; }
  /* drops out */
  12%  { opacity: 0;    text-shadow: none; }
  /* second buzz */
  18%  { opacity: 0.7;
         text-shadow: 0 0 2px #c8f5ee, 0 0 8px #22d4b8; }
  /* drops again */
  22%  { opacity: 0.1;  text-shadow: none; }
  /* stutters on */
  30%  { opacity: 0.85;
         text-shadow: 0 0 2px #c8f5ee, 0 0 10px #22d4b8, 0 0 25px #4DA394; }
  34%  { opacity: 0.4;  text-shadow: none; }
  /* settles into full glow */
  50%  { opacity: 1;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 5px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 20px #1ab8a0,
           0 0 40px #4DA394,
           0 0 70px #4DA394,
           0 0 110px rgba(77,163,148,0.65),
           0 0 180px rgba(60,128,120,0.35); }
  /* slight settle flicker */
  62%  { opacity: 0.88;
         text-shadow: 0 0 2px #c8f5ee, 0 0 8px #22d4b8, 0 0 20px #4DA394; }
  100% { opacity: 1;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 5px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 20px #1ab8a0,
           0 0 40px #4DA394,
           0 0 70px #4DA394,
           0 0 110px rgba(77,163,148,0.65),
           0 0 180px rgba(60,128,120,0.35); }
}

@keyframes neon-flicker {
  0%, 17%, 19%, 21%, 55%, 57%, 100% {
    text-shadow:
      0 0 2px  #c8f5ee,
      0 0 5px  #c8f5ee,
      0 0 10px #22d4b8,
      0 0 20px #1ab8a0,
      0 0 40px #4DA394,
      0 0 70px #4DA394,
      0 0 110px rgba(77,163,148,0.65),
      0 0 180px rgba(60,128,120,0.35);
    opacity: 1;
  }
  18%, 56% {
    text-shadow: 0 0 2px rgba(180,255,240,0.3), 0 0 8px rgba(77,163,148,0.2);
    opacity: 0.55;
  }
  20% {
    text-shadow:
      0 0 2px #c8f5ee,
      0 0 8px #22d4b8,
      0 0 25px #4DA394;
    opacity: 0.82;
  }
}


.hero-sub {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 44ch;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) forwards 0.6s;
}


/* ============================================================
   PROBLEM
============================================================ */
#problem {
  padding: 0;
  background: var(--color-parchment);
  position: relative;
}

/* Vertical progress indicator */
.problem-progress {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(1.2rem, 2.5vw, 2.5rem);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.problem-progress.visible {
  opacity: 1;
}

/* ── Odometer widget ─────────────────────────── */
.odometer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.odometer-ticks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.odometer-tick {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: rgba(210, 115, 10, 0.25);
  transition: background 0.3s ease, width 0.3s ease;
}

.odometer-tick.active {
  background: rgba(210, 110, 5, 0.9);
  width: 24px;
}

.odometer-bezel {
  width: 46px;
  height: 58px;
  background: #120d06;
  border-radius: 5px;
  border: 1.5px solid rgba(195, 100, 10, 0.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    inset 0 0 10px rgba(0,0,0,0.7),
    0 0 14px rgba(175, 85, 5, 0.15);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.odometer-split {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 140, 30, 0.15);
  pointer-events: none;
}

.odometer-num {
  font-family: 'Geist', monospace;
  font-size: 1.9rem;
  font-weight: 200;
  color: #D07010;
  text-shadow:
    0 0 6px rgba(195, 100, 5, 0.7),
    0 0 18px rgba(175, 85, 0, 0.35);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  transition: opacity 0.1s ease;
}

.odometer-num.flipping {
  animation: odo-flip 0.28s ease;
}

@keyframes odo-flip {
  0%   { opacity: 1;   transform: translateY(0)    scaleY(1);    }
  35%  { opacity: 0;   transform: translateY(-6px) scaleY(0.4);  }
  65%  { opacity: 0;   transform: translateY(6px)  scaleY(0.4);  }
  100% { opacity: 1;   transform: translateY(0)    scaleY(1);    }
}

.odometer-label {
  font-family: 'Geist', monospace;
  font-size: 0.48rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(210, 110, 5, 0.9);
}

/* Odometer on dark/coloured slides — lighten ticks and label */
.problem-progress.on-dark .odometer-tick {
  background: rgba(255, 235, 200, 0.25);
}
.problem-progress.on-dark .odometer-tick.active {
  background: rgba(255, 235, 200, 0.9);
  width: 24px;
}
.problem-progress.on-dark .odometer-label {
  color: rgba(255, 235, 200, 0.7);
}

.problem-block-slot {
  height: 200svh;
}

@media (max-width: 600px) {
  /* Move odometer to bottom-center on mobile */
  .problem-progress {
    top: auto;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .odometer {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  .odometer-ticks {
    flex-direction: row;
    gap: 5px;
  }

  .odometer-tick {
    width: 14px;
    height: 2px;
  }

  .odometer-tick.active {
    width: 20px;
  }

  .odometer-bezel {
    width: 38px;
    height: 46px;
  }

  .odometer-num {
    font-size: 1.5rem;
  }

  /* Let text breathe — all side chips hidden at this size so full width is safe */
  .problem-block {
    padding: 0 1.5rem;
  }

  .problem-block p {
    max-width: 100%;
    font-size: clamp(1.45rem, 5.5vw, 2rem);
  }

  /* ── Company chips: hide mid-height side chips that collide with
     full-width text on narrow screens. Keep only top/bottom strip. ── */
  .bf-5,  .bf-17, .bf-26, .bf-32, .bf-19,   /* mid-left edge */
  .bf-6,  .bf-18, .bf-27, .bf-33, .bf-20,   /* mid-right edge */
  .bf-22, .bf-29, .bf-14, .bf-23,            /* upper-mid inward */
  .bf-28, .bf-34,                             /* upper-mid center */
  .bf-15, .bf-30, .bf-24,                    /* lower-mid left */
  .bf-16, .bf-31, .bf-25 {                   /* lower-mid right */
    display: none;
  }

  /* iOS Safari doesn't support background-attachment:fixed —
     switch to scroll so the image actually renders */
  #hero {
    background-attachment: scroll;
  }
}

/* ── Buyer company float chips (slide 4) ────────────────────── */
/* ── Slide 1: word-specific animations ───────────────────── */

/* ── Slide 1 word animations ──────────────────────────────── */

/* "generic" — Comic Sans types in character-by-character via clip-path */
#problem-block-slide1 .accent-word:first-of-type {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
  font-size: 0.95em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.35);  /* starts dim — draws attention when it lights up */
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 0.6s steps(7, end),
    color 0.4s ease;
  transition-delay: 0ms, 0ms;
}

#problem-block-slide1.block-active .accent-word:first-of-type {
  clip-path: inset(0 0% 0 0);
  color: var(--color-problem-accent);
  transition-delay: 500ms, 1050ms; /* color fires after word finishes typing */
}

#problem-block-slide1:not(.block-active) .accent-word:first-of-type {
  clip-path: inset(0 100% 0 0);
  color: rgba(255,255,255,0.35);
  transition: clip-path 0ms, color 0ms;
}

/* "shallow" — sinks below baseline AND fades + tilts */
#problem-block-slide1 .accent-word:last-of-type {
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(0) rotate(0deg);
  opacity: 1;
  transition:
    transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   1.4s ease;
  transition-delay: 0ms, 0ms;
}

#problem-block-slide1.block-active .accent-word:last-of-type {
  transform: translateY(0.52em) rotate(1.5deg);
  opacity: 0.45;
  transition-delay: 1200ms, 1200ms;
}

#problem-block-slide1:not(.block-active) .accent-word:last-of-type {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
  transition: transform 0ms, opacity 0ms;
}

.buyer-float-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bf {
  position: absolute;
  font-family: 'Geist', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(30, 18, 10, 0.7);
  background: rgba(255, 245, 225, 0.72);
  border: 1px solid rgba(200, 148, 60, 0.28);
  border-radius: 999px;
  padding: 0.38rem 0.95rem 0.38rem 0.78rem;
  white-space: nowrap;
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(180, 110, 10, 0.1), 0 1px 3px rgba(0,0,0,0.06);
}
.bf::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(239, 154, 72, 0.8);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

@keyframes bf-drift {
  0%   { opacity: 0;   transform: translateY(0); }
  10%  { opacity: 1; }
  75%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translateY(-22px); }
}

/* Scattered positions — avoid the centre where text lives */
/* ── Top strip (above text — any horizontal position) ── */
.bf-1  { top: 7%;   left: 8%;   }
.bf-2  { top: 12%;  left: 28%;  }
.bf-21 { top: 6%;   left: 44%;  }
.bf-3  { top: 8%;   right: 25%; }
.bf-4  { top: 11%;  right: 8%;  }
.bf-29 { top: 15%;  left: 16%;  }
.bf-22 { top: 22%;  left: 8%;   }
.bf-13 { top: 18%;  right: 9%;  }
.bf-23 { top: 24%;  right: 6%;  }
.bf-14 { top: 19%;  left: 5%;   }
.bf-28 { top: 27%;  left: 33%;  }
.bf-34 { top: 27%;  right: 32%; }

/* ── Mid-left edge (text zone — must hug edge) ── */
.bf-5  { top: 32%;  left: 2%;   }
.bf-17 { top: 41%;  left: 2%;   }
.bf-26 { top: 50%;  left: 2%;   }
.bf-32 { top: 58%;  left: 2%;   }
.bf-19 { top: 66%;  left: 2%;   }

/* ── Mid-right edge (text zone — must hug edge) ── */
.bf-6  { top: 34%;  right: 2%;  }
.bf-18 { top: 43%;  right: 2%;  }
.bf-27 { top: 52%;  right: 2%;  }
.bf-33 { top: 60%;  right: 2%;  }
.bf-20 { top: 68%;  right: 2%;  }

/* ── Bottom strip (below text — any horizontal position) ── */
.bf-15 { bottom: 25%; left: 5%;  }
.bf-30 { bottom: 20%; left: 15%; }
.bf-24 { bottom: 22%; left: 35%; }
.bf-16 { bottom: 24%; right: 5%; }
.bf-31 { bottom: 19%; right: 14%;}
.bf-25 { bottom: 21%; right: 34%;}
.bf-7  { bottom: 15%; left: 9%;  }
.bf-9  { bottom: 10%; left: 26%; }
.bf-10 { bottom: 7%;  left: 44%; }
.bf-11 { bottom: 11%; right: 24%;}
.bf-8  { bottom: 15%; right: 8%; }
.bf-12 { bottom: 7%;  right: 8%; }

/* Staggered durations & delays so they cycle independently */
#problem-block-buyers2.block-active .bf-1  { animation: bf-drift 4.0s ease-in-out 0.0s  infinite; }
#problem-block-buyers2.block-active .bf-2  { animation: bf-drift 4.5s ease-in-out 0.4s  infinite; }
#problem-block-buyers2.block-active .bf-3  { animation: bf-drift 3.8s ease-in-out 0.8s  infinite; }
#problem-block-buyers2.block-active .bf-4  { animation: bf-drift 4.2s ease-in-out 1.2s  infinite; }
#problem-block-buyers2.block-active .bf-5  { animation: bf-drift 3.6s ease-in-out 0.3s  infinite; }
#problem-block-buyers2.block-active .bf-6  { animation: bf-drift 4.4s ease-in-out 1.6s  infinite; }
#problem-block-buyers2.block-active .bf-7  { animation: bf-drift 4.1s ease-in-out 0.6s  infinite; }
#problem-block-buyers2.block-active .bf-8  { animation: bf-drift 3.9s ease-in-out 2.0s  infinite; }
#problem-block-buyers2.block-active .bf-9  { animation: bf-drift 4.3s ease-in-out 0.9s  infinite; }
#problem-block-buyers2.block-active .bf-10 { animation: bf-drift 3.7s ease-in-out 1.4s  infinite; }
#problem-block-buyers2.block-active .bf-11 { animation: bf-drift 4.6s ease-in-out 0.2s  infinite; }
#problem-block-buyers2.block-active .bf-12 { animation: bf-drift 3.5s ease-in-out 1.8s  infinite; }
#problem-block-buyers2.block-active .bf-13 { animation: bf-drift 4.0s ease-in-out 2.2s  infinite; }
#problem-block-buyers2.block-active .bf-14 { animation: bf-drift 4.2s ease-in-out 0.5s  infinite; }
#problem-block-buyers2.block-active .bf-15 { animation: bf-drift 3.8s ease-in-out 1.0s  infinite; }
#problem-block-buyers2.block-active .bf-16 { animation: bf-drift 4.4s ease-in-out 2.4s  infinite; }
#problem-block-buyers2.block-active .bf-17 { animation: bf-drift 3.6s ease-in-out 1.3s  infinite; }
#problem-block-buyers2.block-active .bf-18 { animation: bf-drift 4.1s ease-in-out 0.7s  infinite; }
#problem-block-buyers2.block-active .bf-19 { animation: bf-drift 4.5s ease-in-out 1.7s  infinite; }
#problem-block-buyers2.block-active .bf-20 { animation: bf-drift 3.9s ease-in-out 2.6s  infinite; }
#problem-block-buyers2.block-active .bf-21 { animation: bf-drift 4.3s ease-in-out 0.1s  infinite; }
#problem-block-buyers2.block-active .bf-22 { animation: bf-drift 4.0s ease-in-out 1.1s  infinite; }
#problem-block-buyers2.block-active .bf-23 { animation: bf-drift 3.7s ease-in-out 2.3s  infinite; }
#problem-block-buyers2.block-active .bf-24 { animation: bf-drift 4.4s ease-in-out 0.6s  infinite; }
#problem-block-buyers2.block-active .bf-25 { animation: bf-drift 3.9s ease-in-out 1.5s  infinite; }
#problem-block-buyers2.block-active .bf-26 { animation: bf-drift 4.2s ease-in-out 2.8s  infinite; }
#problem-block-buyers2.block-active .bf-27 { animation: bf-drift 3.6s ease-in-out 0.4s  infinite; }
#problem-block-buyers2.block-active .bf-28 { animation: bf-drift 4.5s ease-in-out 1.9s  infinite; }
#problem-block-buyers2.block-active .bf-29 { animation: bf-drift 4.1s ease-in-out 3.1s  infinite; }
#problem-block-buyers2.block-active .bf-30 { animation: bf-drift 3.8s ease-in-out 1.3s  infinite; }
#problem-block-buyers2.block-active .bf-31 { animation: bf-drift 4.3s ease-in-out 2.6s  infinite; }
#problem-block-buyers2.block-active .bf-32 { animation: bf-drift 4.0s ease-in-out 0.8s  infinite; }
#problem-block-buyers2.block-active .bf-33 { animation: bf-drift 3.7s ease-in-out 2.0s  infinite; }
#problem-block-buyers2.block-active .bf-34 { animation: bf-drift 4.5s ease-in-out 3.4s  infinite; }

/* ── Generic outbound ghost cards ───────────────────────────── */
.goc-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.goc {
  position: absolute;
  background: rgba(255, 252, 245, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(30, 18, 10, 0.08);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  max-width: 270px;
  box-shadow: 0 4px 20px rgba(30,18,10,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  opacity: 0;
}

.goc-from {
  font-family: 'Geist', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(30, 18, 10, 0.5);
  letter-spacing: 0.02em;
}

.goc-text {
  font-family: 'Geist', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(30, 18, 10, 0.38);
  line-height: 1.5;
}

/* Positions */
.goc-1 { top: 12%;  left:  4%; transform: rotate(-2deg); }
.goc-2 { top:  8%;  right: 5%; transform: rotate( 1.5deg); }
.goc-3 { bottom: 18%; left: 3%; transform: rotate( 1deg); }
.goc-4 { bottom: 14%; right: 4%; transform: rotate(-1.5deg); }

/* Float-up-and-fade loop — each card on its own delay */
@keyframes goc-drift {
  0%   { opacity: 0;    transform: translateY(0)    rotate(var(--r, 0deg)); }
  8%   { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateY(-28px) rotate(var(--r, 0deg)); }
}

#problem-block-buyers.block-active .goc-1 {
  --r: -2deg;
  animation: goc-drift 3.8s ease-in-out 0s infinite;
}
#problem-block-buyers.block-active .goc-2 {
  --r: 1.5deg;
  animation: goc-drift 4.2s ease-in-out 0.5s infinite;
}
#problem-block-buyers.block-active .goc-3 {
  --r: 1deg;
  animation: goc-drift 3.6s ease-in-out 0.2s infinite;
}
#problem-block-buyers.block-active .goc-4 {
  --r: -1.5deg;
  animation: goc-drift 4.0s ease-in-out 0.9s infinite;
}


.problem-block {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--px);
  width: 100%;
  position: sticky;
  top: 0;
  background: var(--color-parchment);
}

.problem-block p {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: min(780px, 72vw);
  text-align: center;
  color: rgba(30, 18, 10, 0.4);
}

.accent-word {
  color: var(--color-problem-accent);
}

/* ── Amber "earn their attention" block ─────────────────── */
.problem-block--amber {
  background: #C8591A;
}

.problem-block--amber p {
  color: rgba(255, 238, 210, 0.55);
}

.problem-block--amber .accent-word {
  color: #ffffff;
  font-weight: 400;
}

/* Radial glow that blooms behind the text */
.attention-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(ellipse at center,
    rgba(255, 200, 100, 0.28) 0%,
    rgba(255, 140, 40, 0.12) 45%,
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#problem-block-attention.block-active .attention-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Final block — black bg, inverted fill colors */
.problem-block--final {
  background: var(--color-bg);
}

.problem-block--final p {
  color: rgba(237, 224, 200, 0.45);
}

/* override default problem-block p sizing for final reveal layout */
.problem-block--final .final-pre,
.problem-block--final .final-post {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 36ch;
}



/* Accent words on black — amber */
.problem-block--final .accent-word {
  color: #7fdfd0;
}

/* ── Final slide cinematic reveal ───────────────────────── */
.final-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
  position: relative;
}

.final-pre,
.final-post {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  color: rgba(237, 224, 200, 0.45);
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.problem-block--final.block-active .final-pre {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

.problem-block--final.block-active .final-post {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

/* Word-by-word stagger */
.final-post .fp-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition-delay: 0ms;
}

.problem-block--final.block-active .final-post .fp-word {
  opacity: 1;
  transform: none;
  transition-delay: calc(400ms + var(--wi) * 35ms);
}

#problem-block-final:not(.block-active) .final-post .fp-word {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: 0ms;
}

.final-brandword {
  position: relative;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7fdfd0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.final-glow {
  position: absolute;
  width: 130%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(34, 212, 184, 0.15) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.problem-block--final.block-active .final-glow {
  opacity: 1;
}

/* Letters sit invisible until block is active — no drop, just off */
.final-brandword span {
  display: inline-block;
  opacity: 0;
  color: inherit;
  transition: none;
}

/* All letters snap in at once (dim, no glow) then power-on fires */
.problem-block--final.block-active .final-brandword span {
  opacity: 1;
  transition: opacity 0.08s ease;
  transition-delay: 0ms;
}

/* Power-on runs once, then idle flicker loops */
.problem-block--final.block-active .final-brandword {
  animation:
    neon-poweron-orange 2.2s ease forwards 0.15s,
    neon-flicker-orange 8s infinite 2.5s;
}

@keyframes neon-poweron-orange {
  0%   { opacity: 0.15; text-shadow: none; }

  /* first spark */
  8%   { opacity: 1;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 28px #1ab8a0; }
  /* drops out */
  13%  { opacity: 0;    text-shadow: none; }

  /* second buzz */
  20%  { opacity: 0.75;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 8px  #22d4b8; }
  24%  { opacity: 0.05; text-shadow: none; }

  /* stutters on */
  32%  { opacity: 0.9;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 24px #1ab8a0; }
  36%  { opacity: 0.3;  text-shadow: none; }

  /* settles — full teal neon glow */
  52%  { opacity: 1;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 5px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 20px #1ab8a0,
           0 0 40px #4DA394,
           0 0 70px #4DA394,
           0 0 110px rgba(77, 163, 148, 0.65),
           0 0 180px rgba(60, 128, 120, 0.35); }

  /* slight settle flicker */
  64%  { opacity: 0.88;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 6px  #22d4b8,
           0 0 18px #4DA394; }
  100% { opacity: 1;
         text-shadow:
           0 0 2px  #c8f5ee,
           0 0 5px  #c8f5ee,
           0 0 10px #22d4b8,
           0 0 20px #1ab8a0,
           0 0 40px #4DA394,
           0 0 70px #4DA394,
           0 0 110px rgba(77, 163, 148, 0.65),
           0 0 180px rgba(60, 128, 120, 0.35); }
}

@keyframes neon-flicker-orange {
  0%, 18%, 20%, 56%, 58%, 100% {
    text-shadow:
      0 0 2px  #c8f5ee,
      0 0 5px  #c8f5ee,
      0 0 10px #22d4b8,
      0 0 20px #1ab8a0,
      0 0 40px #4DA394,
      0 0 70px #4DA394,
      0 0 110px rgba(77, 163, 148, 0.65),
      0 0 180px rgba(60, 128, 120, 0.35);
    opacity: 1;
  }
  19%, 57% {
    text-shadow:
      0 0 2px  #c8f5ee,
      0 0 5px  #c8f5ee,
      0 0 10px #22d4b8;
    opacity: 0.82;
  }
}


.comparison-neon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.comparison-neon {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
  color: #ff6eb4;
  text-shadow:
    0 0 2px  #ffd6ee,
    0 0 5px  #ffd6ee,
    0 0 10px #ff2d8a,
    0 0 20px #e0107a,
    0 0 40px #c00868,
    0 0 70px #c00868,
    0 0 110px rgba(200, 10, 100, 0.65);
}

.comparison-neon-arrow {
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: #ff6eb4;
  text-shadow:
    0 0 2px  #ffd6ee,
    0 0 8px  #ff2d8a,
    0 0 20px #e0107a,
    0 0 50px #c00868;
  animation: neon-arrow-pulse 2.4s ease-in-out infinite;
  display: block;
  line-height: 1;
}

@keyframes neon-arrow-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 2px #ffd6ee, 0 0 8px #ff2d8a, 0 0 20px #e0107a, 0 0 50px #c00868; }
  50%       { opacity: 0.4; text-shadow: 0 0 2px #ffd6ee, 0 0 4px #ff2d8a; }
}


/* ============================================================
   COMPARISON
============================================================ */
#comparison {
  position: relative;
  padding: clamp(4rem, 10vh, 8rem) var(--px);
  background-image: url('assets/vertical-california.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#comparison::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(59, 32, 22, 0.72);
  z-index: 0;
}

#comparison > * {
  position: relative;
  z-index: 1;
}

/* ── Section title above cards ─────────────────────────── */
.cards-section-title {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cards-section-h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.13em;
  line-height: 1.18;
  text-transform: uppercase;
  color: #EDE0C8;
}

.cards-section-h2 span {
  text-shadow:
    0 0 2px  rgba(237,224,200,0.9),
    0 0 8px  rgba(237,224,200,0.45),
    0 0 18px rgba(237,224,200,0.2),
    0 0 40px rgba(220,195,140,0.15),
    0 0 80px rgba(200,170,110,0.08);
}

/* ── Single column of equal-gap cards ── */
.cards-strip {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── SEE THE DIFFERENCE — full beige card with overarching header ── */
.inset-card-comparison {
  background: rgb(220,247,244);  /* light teal tint */
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vh, 3rem);
}

/* Header — eyebrow + serif title, matches inset-card text style */
.diff-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diff-eyebrow {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(30,20,10,0.35);
}

.diff-h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1a100a;
}

.diff-h2 em {
  font-style: italic;
  color: #7fdfd0;
}

/* Two-column email grid */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.diff-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.diff-col .mock-card {
  flex: 1;
}

.diff-col-label {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30,20,10,0.35);
}

.diff-col--after .diff-col-label {
  color: #7fdfd0;
}

@media (max-width: 768px) {
  .diff-grid { grid-template-columns: 1fr; }
  .cards-strip { gap: 1rem; }
}

.mock-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(38,31,26,0.18);
}

.card-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* ---- Before card ---- */
.card-before { background: #ffffff; }
.card-before .card-label { color: #aaa; background: #f3f3f3; }

.before-layout {
  display: flex;
  height: 380px;
}

.before-sidebar {
  width: 118px;
  min-width: 118px;
  background: #d5cdc6;
  padding: 0.9rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-right: 1px solid #c8c0b8;
}

.before-sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #777;
  padding: 0.28rem 0.45rem;
  border-radius: 4px;
}

.before-sidebar-item.active {
  background: #c0b8b0;
  color: #444;
  font-weight: 500;
}

.badge-count {
  background: #aaa;
  color: #fff;
  font-size: 0.58rem;
  padding: 0.08rem 0.3rem;
  border-radius: 999px;
}

.before-inbox {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #e8e0d8;
}

.before-toolbar {
  padding: 0.55rem 0.75rem;
  background: #ddd5cc;
  border-bottom: 1px solid #c8c0b8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.tb-btn {
  width: 24px;
  height: 18px;
  background: #c8c0b8;
  border-radius: 3px;
  flex-shrink: 0;
}

.tb-search {
  flex: 1;
  height: 20px;
  background: #ccc4bc;
  border-radius: 999px;
}

.email-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #d8d0c8;
  flex-shrink: 0;
}

.email-row.unread { background: #ede5dc; }

.e-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.e-meta { flex: 1; min-width: 0; }

.e-sender {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-row.unread .e-sender { color: #222; }

.e-subject {
  font-size: 0.65rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-row.unread .e-subject { color: #666; }

.e-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}

.e-date { font-size: 0.6rem; color: #bbb; }
.email-row.unread .e-date { color: #888; }

.unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
}

/* ---- After card ---- */
.card-after { background: #7fdfd0; }
.card-after .card-label { color: rgba(0,0,0,0.45); background: rgba(0,0,0,0.08); }

.after-layout {
  display: flex;
  height: 380px;
}

.after-sidebar {
  width: 118px;
  min-width: 118px;
  background: var(--color-bg);
  padding: 0.9rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid rgba(80,65,55,0.15);
}

.nav-item {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-item.active {
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 500;
}

.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.after-inbox {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.after-toolbar {
  padding: 0.55rem 0.75rem;
  background: #f0e090;
  border-bottom: 1px solid rgba(89,50,43,0.12);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.at-search {
  flex: 1;
  height: 20px;
  background: #e0d080;
  border-radius: 999px;
}

.at-pill {
  height: 20px;
  padding: 0 0.55rem;
  background: var(--color-accent);
  border-radius: 999px;
  font-size: 0.6rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.thread-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(80,65,55,0.1);
  flex-shrink: 0;
}

.thread-row.active { background: var(--color-accent); }

.av-cluster {
  display: flex;
  flex-shrink: 0;
}

.av-cluster .av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-right: -5px;
}

.thread-row.active .av-cluster .av { border-color: var(--color-accent); }

.t-meta { flex: 1; min-width: 0; }

.t-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-row.active .t-name { color: #ffffff; }

.t-preview {
  font-size: 0.63rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-row.active .t-preview { color: rgba(250,202,170,0.65); }

.t-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  flex-shrink: 0;
}

.t-date { font-size: 0.6rem; color: var(--color-text-muted); }
.thread-row.active .t-date { color: rgba(250,202,170,0.65); }

.tag-pill {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: #261f1a;
  white-space: nowrap;
}

.status-pill {
  font-size: 0.56rem;
  font-weight: 600;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill.done    { background: #c8dfc0; color: #1b4d2a; }
.status-pill.waiting { background: #f0d8a8; color: #5a3e00; }

/* ---- Email view (comparison cards) ---- */
.email-view {
  padding: 1.25rem 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.email-meta {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.email-view-after .email-meta {
  border-bottom-color: rgba(0,0,0,0.1);
}

.email-field {
  font-size: 0.68rem;
  color: #999;
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
}

.email-view-after .email-field { color: rgba(0,0,0,0.5); }

.ef-label {
  font-weight: 600;
  min-width: 48px;
  color: #bbb;
  flex-shrink: 0;
}

.email-view-after .ef-label { color: rgba(0,0,0,0.35); }

.email-subject-row {
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  margin-top: 0.1rem;
}

.email-view-after .email-subject-row { color: rgba(0,0,0,0.82); }

.email-body-text {
  font-size: 0.77rem;
  line-height: 1.7;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.email-view-after .email-body-text { color: rgba(0,0,0,0.65); }

.diff-email-attach {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 5px;
  padding: 0.28rem 0.5rem;
  width: fit-content;
}
.diff-email-attach-icon { font-size: 0.6rem; line-height: 1; }
.diff-email-attach-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.57rem;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.01em;
}

/* ============================================================
   FEATURES
============================================================ */
#features {
  padding: 0 var(--px);
  display: flex;
  flex-direction: column;
}

.feature-block {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 520px;
}

.feature-block:nth-child(even) {
  align-self: flex-end;
  text-align: right;
}

.feat-eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.feat-h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 0.9rem;
}

.feat-body {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ── Sequence inset card ─────────────────────────────────── */
.inset-panel--yellow { background: rgb(243, 207, 122); }
.inset-card--seq .inset-em { color: rgb(160, 110, 10); }

/* Vignette — mini sequence card on yellow bg */
.seq-vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem 1.5rem;
}

.seq-mini-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.1rem 0.75rem;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}

.seq-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.seq-mini-acct {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #111;
}

.seq-mini-meta {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.6rem;
  color: #aaa;
  margin-top: 0.1rem;
}

.seq-mini-badge {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(140,95,10);
  background: rgba(236,196,68,0.25);
  border: 1px solid rgba(200,155,20,0.3);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.seq-mini-steps {
  display: flex;
  flex-direction: column;
}

.seq-mini-step {
  display: grid;
  grid-template-columns: 0.9rem 1fr auto;
  gap: 0 0.65rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.seq-mini-step:last-child { border-bottom: none; }

.seq-ms-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.seq-ms-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.seq-ms-who {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seq-ms-subj {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seq-ms-stat {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  flex-shrink: 0;
  padding-left: 0.4rem;
}

/* Per-state */
.seq-ms--sent .seq-ms-dot  { background: rgba(0,0,0,0.15); }
.seq-ms--sent .seq-ms-subj { color: #bbb; }
.seq-ms--sent .seq-ms-stat { color: #bbb; }

.seq-ms--active .seq-ms-dot  { background: rgb(200,145,20); box-shadow: 0 0 6px rgba(200,145,20,0.5); }
.seq-ms--active .seq-ms-subj { color: #111; font-weight: 500; }
.seq-ms--active .seq-ms-stat { color: rgb(180,120,10); }

.seq-ms--upcoming .seq-ms-dot  { background: transparent; border: 1px solid rgba(0,0,0,0.15); }
.seq-ms--upcoming .seq-ms-subj { color: #ccc; }
.seq-ms--upcoming .seq-ms-stat { color: transparent; }

/* ============================================================
   QUALITY OVER QUANTITY
============================================================ */
/* ============================================================
   QUALITY OVER QUANTITY
============================================================ */
/* ── Quality banner — inside #comparison cards-strip ── */
.quality-banner {
  text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 6vw, 5rem);
  background: rgba(40, 18, 10, 0.55);
  border: 1px solid rgba(237,224,200,0.08);
  border-radius: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 4px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(237,224,200,0.06);
}

.qb-eyebrow {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237,224,200,0.4);
  margin-bottom: 1.25rem;
}

.qb-headline {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: #EDE0C8;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 2px  rgba(237,224,200,0.8),
    0 0 12px rgba(237,224,200,0.3),
    0 0 30px rgba(220,195,140,0.15);
}

.qb-sub {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(237,224,200,0.5);
  max-width: 38ch;
  line-height: 1.9;
  margin: 0 auto;
}

/* ============================================================
   CTA
============================================================ */
/* ── Book a call section ── */
#book-call {
  position: relative;
  min-height: 85svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vh, 9rem) var(--px);
  background-image: url('assets/cali-coast.jpg');
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Multi-stop overlay: light at top (photo shows), dense at bottom (bleeds to black footer) */
.bc-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 28, 40, 0.35)  0%,
      rgba(10, 28, 40, 0.55)  40%,
      rgba(5,  15, 20, 0.78)  75%,
      rgba(0,   0,  0, 1.00) 100%
    );
  z-index: 0;
}

.bc-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
}

.bc-eyebrow {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(190, 230, 240, 0.5);
  margin-bottom: 1.25rem;
}

.bc-h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #e8f4f8;
  margin-bottom: 1.1rem;
  text-shadow:
    0 0 2px  rgba(190,230,245,0.9),
    0 0 14px rgba(140,200,230,0.35),
    0 0 35px rgba(100,170,210,0.18);
}

.bc-sub {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  color: rgba(200,230,240,0.55);
  max-width: 38ch;
  line-height: 1.75;
  margin-bottom: 2.75rem;
}

.bc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.bc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e8f4f8;
  color: #0a1c28;
  font-family: 'Geist', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 0 0 0 rgba(190,230,245,0);
}

.bc-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(140,200,230,0.3);
}
.bc-btn-primary:active { transform: translateY(0); opacity: 1; }

.bc-btn-secondary {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.75rem;
  color: rgba(190,230,240,0.38);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.bc-btn-secondary:hover { color: rgba(190,230,240,0.65); }

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: var(--color-bg);
  padding: 1.75rem var(--px);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}

.footer-brand {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}

.footer-copy {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
}

.footer-link {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   REVEAL (Intersection Observer)
============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0ms);
}

[data-reveal].visible { opacity: 1; transform: none; }

.card-before[data-reveal] { transform: translateY(52px) translateX(-20px); }
.card-after[data-reveal]  { transform: translateY(52px) translateX(20px); }

.card-before[data-reveal].visible,
.card-after[data-reveal].visible { transform: none; }

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ============================================================
   INSET FEATURE CARDS (inside #comparison)
============================================================ */
/* inside .cards-strip — no extra margin/max-width needed */
.inset-cards-wrap {
  display: contents; /* lets children participate directly in cards-strip gap */
}

.inset-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 0;
  overflow: hidden;
  background: #fbf2e0;
  box-shadow: 0 4px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06);
}

/* flipped card: put the panel on the left visually */
.inset-card--flip .inset-panel { order: -1; }

/* ── Text side ── */
.inset-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}

.inset-eyebrow {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(30,20,10,0.35);
  margin-bottom: 1rem;
}

.inset-h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1a100a;
  margin-bottom: 1.5rem;
}

.inset-em {
  font-style: italic;
  color: #1a100a;
}

.inset-card:first-child .inset-em { color: rgb(215,112,58); }   /* bright terracotta */
.inset-card:last-child  .inset-em { color: rgb(75,130,185); }   /* medium blue */

.inset-body {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  font-weight: 400;
  color: rgba(30,20,10,0.55);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 38ch;
}

/* ── Panel (coloured image side) ── */
.inset-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  min-height: 420px;
}

.inset-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,235,180,0.3) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.inset-panel--orange { background: rgb(215, 112, 58); }  /* bright terracotta */
.inset-panel--green  { background: rgb(115, 162, 208); } /* bright slate blue */
.inset-panel--red    { background: rgb(115, 162, 208); padding-left: 1.4rem; padding-right: 1.4rem; } /* bright slate blue (alias) */

.inset-panel--red::before,
.inset-panel--green::before {
  background: radial-gradient(ellipse at 50% 42%, rgba(200,230,255,0.3) 0%, transparent 60%);
}

/* keep vignettes above the pseudo-element glow */
.pioneer-vignette,
.scale-vignette { position: relative; z-index: 1; }

/* ── Pioneer vignette — Thinkwell Account Brief ─────────── */
.pioneer-vignette,
.scale-vignette {
  width: 100%;
  max-width: 370px;
}

.pioneer-vignette {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 370px;
  padding-bottom: 5.5rem; /* room for the floating artifact */
}

.pv-card {
  background: #0a0806;
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  width: 100%;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.6),
    0 8px 28px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* header row */
.pv-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.pv-tw-mark {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pv-tw-gem { color: rgb(243,207,122); font-size: 0.5rem; }

.pv-doc-date {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.22);
}

/* account name row */
.pv-account-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.pv-account-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.pv-account-badge {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

/* shared section label */
.pv-sec-label {
  display: block;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 0.45rem;
}

.pv-sec-label--angle { color: rgba(127,223,208,0.6); }

/* thesis */
.pv-thesis {
  margin-bottom: 0.9rem;
}

.pv-thesis-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
}

/* window chip */
.pv-window-chip {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgb(243,207,122);
  background: rgba(243,207,122,0.1);
  border: 1px solid rgba(243,207,122,0.2);
  border-radius: 100px;
  padding: 0.18rem 0.5rem;
  white-space: nowrap;
}

/* ── Signal trail ── */
.pv-trail-section {
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pv-trail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.pv-trail-count {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.04em;
}

.pv-trail {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pv-trail-item {
  display: grid;
  grid-template-columns: 2.8rem 1px 8px 1fr;
  align-items: center;
  gap: 0 0.55rem;
  min-height: 1.8rem;
}

.pv-trail-date {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.02em;
  text-align: right;
}

.pv-trail-line {
  width: 1px;
  height: 100%;
  min-height: 1.8rem;
  background: rgba(255,255,255,0.1);
  justify-self: center;
}

.pv-trail-line--hot { background: rgba(215,112,58,0.5); }

.pv-trail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  justify-self: center;
  flex-shrink: 0;
}

.pv-trail-dot--warn {
  background: rgba(243,207,122,0.4);
  border-color: rgb(243,207,122);
}

.pv-trail-dot--hot {
  background: rgb(215,112,58);
  border-color: rgb(215,112,58);
  box-shadow: 0 0 6px rgba(215,112,58,0.6);
}

.pv-trail-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.pv-trail-item--hot .pv-trail-text {
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}

/* ── Divider ────────────────────────────────────────────── */
.pv-card-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0.9rem 0;
}

/* ── Email draft section ────────────────────────────────── */
.pv-email-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pv-email-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pv-em-to {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.01em;
}

.pv-em-subj {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.pv-em-body {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.62rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.42);
  margin: 0 0 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-em-attach {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(127,223,208,0.08);
  border: 1px solid rgba(127,223,208,0.15);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
}

.pv-em-clip {
  font-size: 0.6rem;
  color: rgba(127,223,208,0.6);
}

.pv-em-attach-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.58rem;
  color: rgba(127,223,208,0.7);
  letter-spacing: 0.01em;
}

/* ── Floating artifact — analysis document ──────────────── */
.pv-artifact {
  position: absolute;
  bottom: 0.4rem;
  right: -0.5rem;
  width: 216px;
  max-height: 340px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.3),
    0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;
  z-index: 10;
  transform: rotate(1.8deg);
  font-family: 'Geist', -apple-system, sans-serif;
}

/* Fade out at the bottom to look naturally clipped */
.pv-artifact::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.92));
  pointer-events: none;
  z-index: 2;
}

/* ── Artifact: Document (pvd-*) ─────────────────────────── */

/* Letterhead header */
.pvd-header {
  background: #111827;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pvd-brand {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.pvd-conf {
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 0.08rem 0.28rem;
}

/* Title block */
.pvd-title-block {
  padding: 0.6rem 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.pvd-client {
  font-size: 1.08rem;
  font-weight: 700;
  color: #0b0b12;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.pvd-doc-name {
  font-size: 0.56rem;
  font-weight: 500;
  color: rgba(0,0,0,0.42);
  margin-top: 0.1rem;
  letter-spacing: 0.01em;
}
.pvd-meta {
  font-size: 0.42rem;
  color: rgba(0,0,0,0.22);
  margin-top: 0.22rem;
}

/* Key finding callout */
.pvd-finding {
  margin: 0.55rem 0.75rem;
  background: #fdf5ea;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid #d97035;
}
.pvd-finding-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0b0b12;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pvd-finding-desc {
  font-size: 0.49rem;
  color: rgba(0,0,0,0.48);
  margin-top: 0.18rem;
  line-height: 1.45;
}
.pvd-finding-src {
  font-size: 0.39rem;
  color: rgba(0,0,0,0.26);
  margin-top: 0.18rem;
  font-style: italic;
}

/* Bar chart section */
.pvd-section {
  padding: 0 0.75rem 0.55rem;
}
.pvd-sect-label {
  font-size: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.25);
  margin-bottom: 0.38rem;
}
.pvd-bars {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pvd-bar-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}
.pvd-bar-row--dim {
  opacity: 0.45;
}
.pvd-bar-name {
  font-size: 0.47rem;
  color: rgba(0,0,0,0.58);
  width: 52px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvd-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 100px;
  overflow: hidden;
}
.pvd-bar-fill {
  height: 100%;
  background: #374151;
  border-radius: 100px;
}
.pvd-bar-row--hi .pvd-bar-fill { background: #d97035; }
.pvd-bar-fill--dim { background: rgba(0,0,0,0.18); }
.pvd-bar-val {
  font-size: 0.44rem;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}
.pvd-val-dim { color: rgba(0,0,0,0.28); }

/* Context metrics strip */
.pvd-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.32rem 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.41rem;
  color: rgba(0,0,0,0.28);
}
.pvd-met-dot { color: rgba(0,0,0,0.14); }

/* Methodology note */
.pvd-method {
  padding: 0.38rem 0.75rem;
  font-size: 0.4rem;
  color: rgba(0,0,0,0.24);
  line-height: 1.55;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-style: italic;
}

/* Sources */
.pvd-sources {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pvd-src-label {
  font-size: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.25);
  margin-bottom: 0.22rem;
}
.pvd-src-list {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  font-size: 0.43rem;
  color: rgba(0,0,0,0.32);
  line-height: 1.4;
}
.pvd-src-list div::before {
  content: '· ';
  color: rgba(0,0,0,0.18);
}

/* Document footer */
.pvd-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  background: rgba(0,0,0,0.02);
  font-size: 0.38rem;
  color: rgba(0,0,0,0.2);
}
.pvd-footer-brand {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
}

/* ── Scale vignette — Bloomberg Pipeline Terminal ───────── */

/* Keep .sv-card alias for responsive rule */
.sv-card, .blt-card {
  width: 100%;
}

.blt-card {
  background: #060608;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.6),
    0 8px 28px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: 'Geist', -apple-system, sans-serif;
}

/* ── Bloomberg Terminal styles (blt-*) ──────────────────── */

/* Header */
.blt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}
.blt-head-left {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  flex-shrink: 1;
}
.blt-title {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.blt-subtitle {
  font-size: 0.43rem;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blt-head-right {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
}
.blt-stat-chip {
  font-size: 0.45rem;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
}
.blt-stat-num {
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.blt-stat-num.blt-green {
  color: rgb(133,193,153);
}
.blt-stat-sep {
  font-size: 0.45rem;
  color: rgba(255,255,255,0.14);
}

/* Treemap wrapper */
.blt-map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Rows — dramatically different heights (Bloomberg-style) */
.blt-row-1 {
  display: flex;
  gap: 3px;
  height: 74px;   /* big ACV = big tile */
}
.blt-row-2 {
  display: flex;
  gap: 3px;
  height: 54px;   /* prime targets */
}
.blt-row-3 {
  display: flex;
  gap: 3px;
  height: 24px;   /* small accounts — compact strip */
}

/* Row 1: large tiles — prominent name + ACV */
.blt-row-1 .blt-tile-name { font-size: 0.65rem; font-weight: 700; }
.blt-row-1 .blt-tile-acv  { font-size: 0.82rem; font-weight: 800; letter-spacing: -0.025em; }
.blt-row-1 .blt-tile-tag  { font-size: 0.4rem; }

/* Row 2: medium tiles */
.blt-row-2 .blt-tile-name { font-size: 0.56rem; }
.blt-row-2 .blt-tile-acv  { font-size: 0.66rem; font-weight: 700; }

/* Row 3: small tiles — just name + value, no tag */
.blt-row-3 .blt-tile      { padding: 0.16rem 0.22rem; justify-content: center; gap: 0.1rem; flex-direction: row; align-items: center; }
.blt-row-3 .blt-tile-name { font-size: 0.41rem; }
.blt-row-3 .blt-tile-acv  { font-size: 0.41rem; font-weight: 600; }
.blt-row-3 .blt-tile-tag  { display: none; }

/* Tiles */
.blt-tile {
  border-radius: 4px;
  padding: 0.28rem 0.32rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}
.blt-cold        { background: rgba(255,255,255,0.045); }
.blt-green-tile  { background: rgba(56,161,105,0.28); }
.blt-warm-tile   { background: rgba(215,112,58,0.16); }

/* Selected tile — glowing ring */
.blt-tile--selected {
  box-shadow:
    inset 0 0 0 1.5px rgb(133,193,153),
    0 0 12px rgba(133,193,153,0.28);
}

.blt-tile-name {
  font-size: 0.52rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.blt-cold .blt-tile-name       { color: rgba(255,255,255,0.3); }
.blt-green-tile .blt-tile-name { color: rgba(255,255,255,0.88); }
.blt-warm-tile  .blt-tile-name { color: rgba(255,255,255,0.7); }

.blt-tile-acv {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.blt-cold .blt-tile-acv       { color: rgba(255,255,255,0.18); }
.blt-green-tile .blt-tile-acv { color: rgb(133,193,153); }
.blt-warm-tile  .blt-tile-acv { color: rgb(215,112,58); }

.blt-tile-tag {
  font-size: 0.37rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.blt-tag-prime { color: rgb(133,193,153); }
.blt-tag-warm  { color: rgb(215,112,58); }
.blt-tag-cold  { color: rgba(255,255,255,0.18); }

/* Popup (Bloomberg-style detail card) */
.blt-popup {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 152px;
  background: rgba(12,12,18,0.97);
  border: 1px solid rgba(133,193,153,0.32);
  border-radius: 8px;
  padding: 0.5rem 0.58rem;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.6),
    0 1px 5px rgba(0,0,0,0.35);
  z-index: 5;
}
.blt-pop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.22rem;
  margin-bottom: 0.2rem;
}
.blt-pop-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}
.blt-pop-badge {
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(133,193,153);
  background: rgba(133,193,153,0.14);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  white-space: nowrap;
}
.blt-pop-meta {
  font-size: 0.46rem;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.32rem;
}
.blt-pop-sigs {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  margin-bottom: 0.36rem;
}
.blt-pop-sig {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.51rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.42;
}
.blt-pop-sig strong {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
}
.blt-pop-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
  margin-top: 0.22rem;
}
.blt-dot-hot {
  background: rgb(215,112,58);
  box-shadow: 0 0 5px rgba(215,112,58,0.55);
}
.blt-pop-rule {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-bottom: 0.3rem;
}
.blt-pop-angle-lbl {
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(133,193,153,0.58);
  margin-bottom: 0.1rem;
}
.blt-pop-angle-txt {
  font-size: 0.51rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.42;
  font-style: italic;
}

/* ── Detail strip ────────────────────────────────────────── */
.blt-detail {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.48rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.blt-detail-head {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}
.blt-detail-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.blt-detail-badge {
  font-size: 0.36rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(133,193,153);
  background: rgba(133,193,153,0.14);
  border-radius: 4px;
  padding: 0.09rem 0.26rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.blt-detail-meta {
  font-size: 0.44rem;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blt-detail-sigs {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}
.blt-detail-sig {
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
  font-size: 0.49rem;
  color: rgba(255,255,255,0.44);
  min-width: 0;
  padding-top: 0.05rem;
}
.blt-detail-sig span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.blt-detail-sig strong {
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}
.blt-dsig-hot {
  font-size: 0.4rem;
  color: rgb(215,112,58);
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(215,112,58,0.55));
  line-height: 1;
}
.blt-dsig-dim {
  font-size: 0.4rem;
  color: rgba(255,255,255,0.16);
  flex-shrink: 0;
  line-height: 1;
}
.blt-detail-angle {
  font-size: 0.46rem;
  color: rgba(133,193,153,0.65);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 0.18rem;
  margin-top: 0.04rem;
}

/* Score chip next to badge */
.blt-detail-score {
  font-size: 0.52rem;
  font-weight: 800;
  color: rgb(133,193,153);
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.blt-detail-score::after {
  content: '';
  display: inline-block;
  font-size: 0.36rem;
  font-weight: 400;
  color: rgba(255,255,255,0.22);
  margin-left: 0.08rem;
}

/* Two-line signal layout */
.blt-sig-body {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
  flex: 1;
}
.blt-sig-label {
  font-size: 0.48rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.blt-sig-label strong {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}
.blt-sig-sub {
  font-size: 0.4rem;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Warm signal dot (orange) */
.blt-dsig-warm {
  font-size: 0.4rem;
  color: rgb(215,112,58);
  flex-shrink: 0;
  opacity: 0.65;
  line-height: 1;
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .inset-card,
  .inset-card--flip {
    grid-template-columns: 1fr;
  }
  /* on mobile always show text first, panel second */
  .inset-card--flip .inset-panel { order: 1; }
  .inset-panel { min-height: 48svh; }
  .pv-card, .sv-card, .blt-card { max-width: 90vw; }
}

/* ============================================================
   DEPTH SCROLL SECTION
============================================================ */
#depth-scroll-wrapper {
  height: 380svh;
  position: relative;
  background: #FFFCC7;
}

#depth-scroll {
  position: sticky;
  top: 0;
  height: 100svh;
  background: #060606;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vh, 2.5rem) clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 5vh, 3.5rem);
}

.ds-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  margin-bottom: 0.75rem;
}

.ds-eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 0.75rem;
}

.ds-headline {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.02em;
}

.ds-pills-container {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 clamp(0.5rem, 1vw, 1rem);
  min-height: 0;
  z-index: 5;
  pointer-events: none;
}

/* S1 pills are direct children — keep them absolutely positioned */
.ds-pills-container > .ds-pill {
  position: absolute;
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
  font-family: 'Geist', -apple-system, sans-serif;
  white-space: nowrap;
  will-change: transform, opacity;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.ds-pill.ds-pill-hi {
  background: rgba(239, 154, 72, 0.15);
  color: rgba(255,255,255,0.85);
  border-color: rgba(239, 154, 72, 0.38);
}

/* Reasoning chain overlay */
.ds-chain {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  padding: 2rem clamp(1rem, 5vw, 5rem);
}

.ds-chain.ds-chain-visible {
  opacity: 1;
  pointer-events: auto;
}

.ds-chain-inner {
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ds-node {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ds-node.ds-node-visible {
  opacity: 1;
  transform: none;
}

.ds-node.ds-node-insight {
  border-color: rgba(239, 154, 72, 0.45);
  background: rgba(239, 154, 72, 0.08);
}

.ds-node.ds-node-output {
  background: rgba(239, 154, 72, 0.12);
  border-color: rgba(239, 154, 72, 0.55);
}

.ds-node-cat {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.4rem;
  font-family: 'Geist', -apple-system, sans-serif;
}

.ds-node-cat.ds-cat-insight {
  background: rgba(239, 154, 72, 0.22);
  color: rgba(255,255,255,0.7);
  border-color: transparent;
}

.ds-node-cat.ds-cat-output {
  background: rgba(239, 154, 72, 0.28);
  color: rgba(255,255,255,0.8);
  border-color: transparent;
}

.ds-node-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}

.ds-node.ds-node-insight .ds-node-text { color: rgba(255,255,255,0.95); }
.ds-node.ds-node-output  .ds-node-text { color: rgba(255,255,255,0.9); }

.ds-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.1rem 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ds-connector.ds-conn-visible { opacity: 1; }

.ds-connector-line {
  width: 1px;
  height: 1rem;
  background: rgba(255,255,255,0.12);
}

.ds-connector-label {
  font-size: 0.65rem;
  font-family: 'Geist', -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  padding: 0.1rem 0;
}

.ds-closing {
  margin-top: 2.5rem;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ds-closing.ds-closing-visible { opacity: 1; }

.ds-chain-label {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(239,154,72,0.65);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ds-chain-subtitle {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .ds-chain { padding: 1.5rem 1rem; justify-content: flex-start; padding-top: 2rem; }
  .ds-node  { padding: 0.9rem 1rem; }

  /* Single-column pill layout on mobile */
  .ds-pills-container {
    grid-template-columns: 1fr;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow all pills to wrap text */
  .ds-pill {
    white-space: normal;
    word-break: break-word;
  }

  /* Zone pills fill full column width, left-aligned */
  .ds-zone-cont .ds-pill {
    width: 100%;
    justify-content: flex-start;
  }

  /* Don't clip zone content that wraps tall */
  .ds-zone-cont {
    overflow: visible;
  }
}

@media (max-width: 600px) {
  #depth-scroll {
    padding: 1.25rem 0.75rem 0.75rem;
  }
  .ds-zone-cont .ds-pill {
    font-size: 0.6rem;
    padding: 0.28rem 0.5rem;
  }
}

/* ============================================================
   DATA ADVANTAGE — ZONE LABELS + ZONE CONTAINERS
============================================================ */
.ds-scale-note {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 0.8rem);
  color: rgba(255,255,255,0.38);
  text-align: center;
  max-width: 52ch;
  margin: 0.35rem auto 0;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}

.ds-zone-label {
  display: block;
  font-size: 0.57rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.6rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
  flex-shrink: 0;
}

.ds-zone-label.visible { opacity: 1; }

.dszl-product  { color: rgba(255,238,140,0.55); }
.dszl-industry { color: rgba(235,85,95,0.6); }
.dszl-buyers   { color: rgba(72,185,162,0.6); }

/* Zone sub-containers */
.ds-zone-cont {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  padding: 0.15rem 0.5rem 0.5rem;
}

.ds-zone-cont .ds-pill {
  justify-content: center;
  font-size: 0.65rem;
  padding: 0.3rem 0.85rem;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

/* Per-category base pill styles */
.ds-pill.ds-pill-product {
  background: rgba(255,238,140,0.05);
  color: rgba(255,242,160,0.68);
  border-color: rgba(255,238,140,0.13);
}
.ds-pill.ds-pill-product.ds-pill-hi {
  background: rgba(255,238,140,0.1);
  color: rgba(255,248,185,0.97);
  border-color: rgba(255,238,140,0.3);
  box-shadow: 0 0 16px rgba(255,230,100,0.1), 0 1px 3px rgba(0,0,0,0.4);
  font-weight: 500;
}

.ds-pill.ds-pill-industry {
  background: rgba(235,85,95,0.06);
  color: rgba(245,115,125,0.7);
  border-color: rgba(235,85,95,0.14);
}
.ds-pill.ds-pill-industry.ds-pill-hi {
  background: rgba(235,85,95,0.12);
  color: rgba(255,155,163,0.97);
  border-color: rgba(235,85,95,0.32);
  box-shadow: 0 0 16px rgba(235,85,95,0.1), 0 1px 3px rgba(0,0,0,0.4);
  font-weight: 500;
}

.ds-pill.ds-pill-buyers {
  background: rgba(72,185,162,0.06);
  color: rgba(95,195,172,0.7);
  border-color: rgba(72,185,162,0.14);
}
.ds-pill.ds-pill-buyers.ds-pill-hi {
  background: rgba(72,185,162,0.12);
  color: rgba(140,220,205,0.97);
  border-color: rgba(72,185,162,0.32);
  box-shadow: 0 0 16px rgba(72,185,162,0.1), 0 1px 3px rgba(0,0,0,0.4);
  font-weight: 500;
}

/* ── DS scan animations ─────────────────────────────────── */
@keyframes ds-scan-product {
  0%   { background: rgba(255,238,140,0.22); color: rgba(255,252,200,1); border-color: rgba(255,238,140,0.55); box-shadow: 0 0 22px rgba(255,230,100,0.22), 0 1px 3px rgba(0,0,0,0.4); font-weight: 500; }
  40%  { background: rgba(255,238,140,0.05); color: rgba(255,242,160,0.68); border-color: rgba(255,238,140,0.13); box-shadow: none; font-weight: 400; }
  100% { background: rgba(255,238,140,0.05); color: rgba(255,242,160,0.68); border-color: rgba(255,238,140,0.13); box-shadow: none; font-weight: 400; }
}

@keyframes ds-scan-industry {
  0%   { background: rgba(235,85,95,0.2); color: rgba(255,165,172,1); border-color: rgba(235,85,95,0.5); box-shadow: 0 0 22px rgba(235,85,95,0.18), 0 1px 3px rgba(0,0,0,0.4); font-weight: 500; }
  40%  { background: rgba(235,85,95,0.06); color: rgba(245,115,125,0.7); border-color: rgba(235,85,95,0.14); box-shadow: none; font-weight: 400; }
  100% { background: rgba(235,85,95,0.06); color: rgba(245,115,125,0.7); border-color: rgba(235,85,95,0.14); box-shadow: none; font-weight: 400; }
}

@keyframes ds-scan-buyers {
  0%   { background: rgba(72,185,162,0.2); color: rgba(155,230,215,1); border-color: rgba(72,185,162,0.5); box-shadow: 0 0 22px rgba(72,185,162,0.18), 0 1px 3px rgba(0,0,0,0.4); font-weight: 500; }
  40%  { background: rgba(72,185,162,0.06); color: rgba(95,195,172,0.7); border-color: rgba(72,185,162,0.14); box-shadow: none; font-weight: 400; }
  100% { background: rgba(72,185,162,0.06); color: rgba(95,195,172,0.7); border-color: rgba(72,185,162,0.14); box-shadow: none; font-weight: 400; }
}

/* ============================================================
   HOW IT WORKS
============================================================ */
#how-it-works {
  background: #fbf2e0;
  padding: clamp(5rem, 12vh, 9rem) var(--px);
}

.hiw-intro {
  text-align: center;
  margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
}

.hiw-eyebrow {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(89,50,43,0.4);
  margin-bottom: 1.25rem;
}

.hiw-h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #1a0e0a;
  line-height: 1.15;
}

/* ── Tab container ───────────────────────────────────────── */
.hiw-tabs {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Tab nav ─────────────────────────────────────────────── */
.hiw-tab-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid rgba(89,50,43,0.14);
  margin-bottom: 2.5rem;
}

.hiw-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 3.25rem 1.1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  text-align: left;
  outline: none;
}

.hiw-tab-btn:last-child { padding-right: 0; }

/* progress bar */
.hiw-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  width: 0;
  background: #59322B;
}

.hiw-tab-btn.active::after {
  animation: hiw-prog 4.5s linear forwards;
}

.hiw-tabs.hiw-paused .hiw-tab-btn.active::after {
  animation-play-state: paused;
}

@keyframes hiw-prog {
  from { width: 0; }
  to   { width: 100%; }
}

.hiw-tab-num {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(89,50,43,0.28);
  transition: color 0.25s;
}

.hiw-tab-btn.active .hiw-tab-num { color: rgba(89,50,43,0.6); }

.hiw-tab-label {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  color: rgba(89,50,43,0.32);
  transition: color 0.25s;
}

.hiw-tab-btn.active .hiw-tab-label { color: #1a0e0a; }
.hiw-tab-btn:hover  .hiw-tab-label { color: rgba(89,50,43,0.7); }

/* ── Panels ──────────────────────────────────────────────── */
/* ── No bg — panels sit directly on section bg ── */
.hiw-panels-bg {
  /* intentionally empty — keeping wrapper for potential future use */
}

/* ── Static height grid stacking — all panels same cell, no reflow ── */
.hiw-panels {
  display: grid;
}

.hiw-panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  /* prevent collapsed panels from contributing to min-content height */
  visibility: hidden;
}

.hiw-panel.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

.hiw-panel-desc {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.88rem, 1.25vw, 0.97rem);
  color: #1a0e0a;
  line-height: 1.85;
  margin-bottom: 2rem;
  max-width: 56ch;
}

.hiw-panel-desc--dark {
  color: #1a0e0a;
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  font-weight: 400;
  max-width: 64ch;
}

/* ---- Find: heatmap layout ---- */
.hiw-find-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 680px) {
  .hiw-find-layout { grid-template-columns: 1fr; }
}

/* Heatmap treemap */
.hiw-heatmap {
  background: #fff;
  border: 1px solid rgba(89,50,43,0.1);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.hiw-hm-label {
  font-size: 0.58rem;
  font-family: 'Geist', -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(89,50,43,0.35);
  margin-bottom: 0.75rem;
}

/* Treemap grid — 10 equal columns, 5 fixed-height rows */
.hiw-treemap {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 120px 90px 68px 52px 40px;
  gap: 3px;
}

.hiw-tm-tile {
  grid-column: span var(--span, 2);
  border-radius: 5px;
  padding: 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  transition: filter 0.2s;
}

.hiw-tm-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-tm-deal {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

/* Cold tiles */
.hiw-tm-tile.cold {
  background: #f4f3f1;
}
.hiw-tm-tile.cold .hiw-tm-name { color: #a8a09a; }
.hiw-tm-tile.cold .hiw-tm-deal { color: #b0a89f; }

/* Warm tiles */
.hiw-tm-tile.warm {
  background: #fff8ed;
}
.hiw-tm-tile.warm .hiw-tm-name { color: #92400e; }
.hiw-tm-tile.warm .hiw-tm-deal { color: #b45309; }

/* Hot / selected tile */
.hiw-tm-tile.hot {
  background: rgba(34,212,184,0.1);
  outline: 1px solid rgba(34,212,184,0.45);
  position: relative;
}
.hiw-tm-tile.hot .hiw-tm-name { color: #0d6e63; }
.hiw-tm-tile.hot .hiw-tm-deal { color: #1ab8a0; }

/* Animated teal glow on hot tile */
.hiw-tm-tile.hot.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(34,212,184,0.4);
  animation: tm-pulse 2s ease-in-out infinite;
}

@keyframes tm-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,212,184,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(34,212,184,0.12); }
}

/* Surfaced account card */
.hiw-surfaced {
  background: #fff;
  border: 2px solid rgba(34,212,184,0.4);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 0 0 4px rgba(34,212,184,0.06);
}

.hiw-surfaced-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.58rem;
  font-family: 'Geist', -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1ab8a0;
  margin-bottom: 0.75rem;
}

.hiw-surfaced-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d4b8;
  animation: hm-pulse 1.8s ease-in-out infinite;
}

.hiw-surfaced-name {
  font-size: 1.05rem;
  font-weight: 400;
  color: #111;
  margin-bottom: 0.2rem;
  font-family: 'Geist', -apple-system, sans-serif;
}

.hiw-surfaced-meta {
  font-size: 0.7rem;
  color: #999;
  font-family: 'Geist', -apple-system, sans-serif;
  margin-bottom: 1rem;
}

.hiw-surfaced-signals {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.hiw-sig {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #333;
  line-height: 1.45;
}

.hiw-sig-icon {
  color: #22d4b8;
  font-weight: 400;
  font-size: 0.7rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.hiw-surfaced-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(34,212,184,0.15);
}

.hiw-score-label {
  font-size: 0.6rem;
  font-family: 'Geist', -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9ca3af;
}

.hiw-score-val {
  font-size: 0.82rem;
  font-weight: 400;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #1ab8a0;
}

/* ---- Reasoning chain (Step 2) ---- */
.hiw-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

.hiw-chain > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hiw-chain.hiw-chain-in > * { opacity: 1; transform: none; }
.hiw-chain.hiw-chain-in > *:nth-child(1)  { transition-delay: 0ms; }
.hiw-chain.hiw-chain-in > *:nth-child(2)  { transition-delay: 70ms; }
.hiw-chain.hiw-chain-in > *:nth-child(3)  { transition-delay: 140ms; }
.hiw-chain.hiw-chain-in > *:nth-child(4)  { transition-delay: 210ms; }
.hiw-chain.hiw-chain-in > *:nth-child(5)  { transition-delay: 280ms; }
.hiw-chain.hiw-chain-in > *:nth-child(6)  { transition-delay: 350ms; }
.hiw-chain.hiw-chain-in > *:nth-child(7)  { transition-delay: 420ms; }

.hiw-node {
  background: #fff;
  border: 1px solid rgba(89,50,43,0.13);
  border-radius: 10px;
  padding: 0.85rem 1.2rem;
}

.hiw-node-insight {
  border-color: rgba(34,212,184,0.5);
  background: rgba(34,212,184,0.06);
}

.hiw-node-output {
  background: #1a0e0a;
  border-color: #1a0e0a;
}

.hiw-node-cat {
  display: inline-block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #59322B;
  border: 1px solid rgba(89,50,43,0.25);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  margin-bottom: 0.35rem;
  font-family: 'Geist', -apple-system, sans-serif;
}

.hiw-cat-insight {
  color: #1ab8a0;
  border-color: rgba(34,212,184,0.4);
  background: rgba(34,212,184,0.08);
}

.hiw-cat-output {
  color: rgba(237,224,200,0.7);
  border-color: rgba(237,224,200,0.2);
}

.hiw-node-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.79rem;
  color: #333;
  line-height: 1.6;
}

.hiw-node-insight .hiw-node-text { color: #0d7a6e; }
.hiw-node-output  .hiw-node-text { color: rgba(237,224,200,0.88); }

.hiw-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.hiw-conn-line {
  width: 1px;
  height: 0.7rem;
  background: rgba(89,50,43,0.18);
}

.hiw-conn-label {
  font-size: 0.55rem;
  font-family: 'Geist', -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(89,50,43,0.3);
  padding: 0.04rem 0;
}

.hiw-chain-footnote {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.8rem;
  color: rgba(89,50,43,0.4);
  text-align: center;
  font-style: italic;
  margin-top: 1rem;
}

/* ---- Compare emails (Step 3) ---- */
.hiw-compare {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 768px) {
  .hiw-compare { grid-template-columns: 1fr; }
}

.hiw-compare-label {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-family: 'Geist', -apple-system, sans-serif;
}

.hiw-compare-before .hiw-compare-label { color: rgba(89,50,43,0.3); }
.hiw-compare-after  .hiw-compare-label { color: rgba(89,50,43,0.65); }

.hiw-compare-after {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hiw-email-card {
  border-radius: 10px;
  overflow: hidden;
}

.hiw-email-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.45rem 0.85rem;
  background: rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.hiw-email-generic .hiw-email-chrome { background: #f5f5f5; border-bottom-color: rgba(0,0,0,0.07); }
.hiw-email-tw      .hiw-email-chrome { background: rgba(255,255,255,0.07); border-bottom-color: rgba(255,255,255,0.06); }

.hiw-email-chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hiw-email-body-wrap {
  padding: 0.8rem 1rem;
}

.hiw-email-generic {
  background: #fff;
  border: 1px solid rgba(89,50,43,0.1);
}

.hiw-email-tw {
  background: #1a0e0a;
  border: 1px solid rgba(237,224,200,0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hiw-panel.active .hiw-email-tw { opacity: 1; transform: none; }
.hiw-panel.active .hiw-compare-after .hiw-email-tw:nth-child(1) { transition-delay: 150ms; }
.hiw-panel.active .hiw-compare-after .hiw-email-tw:nth-child(2) { transition-delay: 280ms; }
.hiw-panel.active .hiw-compare-after .hiw-email-tw:nth-child(3) { transition-delay: 410ms; }

.hiw-email-to {
  font-size: 0.6rem;
  color: #aaa;
  margin-bottom: 0.25rem;
  font-family: 'Geist', -apple-system, sans-serif;
  padding: 0.8rem 1rem 0;
}

.hiw-email-tw .hiw-email-to { color: rgba(237,224,200,0.4); padding: 0.8rem 1rem 0; }

.hiw-email-subject {
  font-size: 0.77rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  font-family: 'Geist', -apple-system, sans-serif;
  padding: 0 1rem;
}

.hiw-email-generic .hiw-email-subject { color: #111; }
.hiw-email-tw      .hiw-email-subject { color: rgba(237,224,200,0.95); }

.hiw-email-body {
  font-size: 0.72rem;
  line-height: 1.6;
  font-family: 'Geist', -apple-system, sans-serif;
  padding: 0 1rem 1rem;
}

.hiw-email-generic .hiw-email-body { color: #666; }
.hiw-email-tw      .hiw-email-body { color: rgba(237,224,200,0.6); }

.hiw-email-attach {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 1rem 0.9rem;
  background: rgba(237,224,200,0.06);
  border: 1px solid rgba(237,224,200,0.12);
  border-radius: 5px;
  padding: 0.28rem 0.5rem;
  width: fit-content;
}

.hiw-email-attach-icon {
  font-size: 0.6rem;
  line-height: 1;
}

.hiw-email-attach-name {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.57rem;
  color: rgba(237,224,200,0.5);
  letter-spacing: 0.01em;
}

/* ---- Close panel (Step 4) — deal brief + AI roleplay ---- */
.hiw-close-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 768px) {
  .hiw-close-layout { grid-template-columns: 1fr; }
}

.hiw-close-brief,
.hiw-close-practice {
  background: #fff;
  border: 1px solid rgba(89,50,43,0.13);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
}

.hiw-close-practice {
  background: #1a0e0a;
  border-color: #1a0e0a;
}

.hiw-close-brief-head,
.hiw-close-practice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(89,50,43,0.1);
}

.hiw-close-practice-head {
  border-bottom-color: rgba(237,224,200,0.1);
}

.hiw-close-brief-eyebrow,
.hiw-close-practice-eyebrow {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(89,50,43,0.55);
}

.hiw-close-practice-eyebrow {
  color: rgba(237,224,200,0.55);
}

.hiw-close-brief-account {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.65rem;
  color: rgba(89,50,43,0.5);
}

.hiw-close-practice-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.6rem;
  color: rgba(237,224,200,0.45);
}

.hiw-close-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d4b8;
  box-shadow: 0 0 8px rgba(34,212,184,0.7);
}

.hiw-close-section {
  margin-bottom: 0.85rem;
}
.hiw-close-section:last-child { margin-bottom: 0; }

.hiw-close-label {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(89,50,43,0.45);
  margin-bottom: 0.3rem;
}

.hiw-close-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #1a0e0a;
}

.hiw-close-msg {
  margin-bottom: 0.75rem;
}

.hiw-close-msg-who {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237,224,200,0.45);
  margin-bottom: 0.3rem;
}

.hiw-close-msg-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.76rem;
  line-height: 1.55;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
}

.hiw-close-msg-buyer .hiw-close-msg-text {
  background: rgba(237,224,200,0.06);
  color: rgba(237,224,200,0.85);
  border: 1px solid rgba(237,224,200,0.08);
}

.hiw-close-msg-rep .hiw-close-msg-text {
  background: rgba(34,212,184,0.1);
  color: rgba(220,250,240,0.95);
  border: 1px solid rgba(34,212,184,0.25);
}

.hiw-close-feedback {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(237,224,200,0.1);
}

.hiw-close-feedback-head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.hiw-close-feedback-score {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #22d4b8;
  line-height: 1;
}

.hiw-close-feedback-label {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237,224,200,0.45);
}

.hiw-close-feedback-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(237,224,200,0.65);
}

/* Fade-in animation for Close cards when panel becomes active */
.hiw-close-brief,
.hiw-close-practice {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hiw-panel.active .hiw-close-brief    { opacity: 1; transform: none; transition-delay: 100ms; }
.hiw-panel.active .hiw-close-practice { opacity: 1; transform: none; transition-delay: 220ms; }

/* ---- Craft panel (Step 3) — sendable PVD-style document ---- */
.hiw-artifact {
  background: #fff;
  border: 1px solid rgba(89,50,43,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.hiw-artifact-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.45rem 0.9rem;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.hiw-artifact-chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hiw-artifact-chrome-title {
  font-size: 0.6rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #aaa;
  margin-left: 0.4rem;
}

.hiw-artifact-header {
  padding: 1.1rem 1.4rem 1rem;
  border-bottom: 1px solid rgba(89,50,43,0.08);
  background: #faf7f2;
}

.hiw-artifact-eyebrow {
  font-size: 0.58rem;
  font-family: 'Geist', -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(89,50,43,0.4);
  margin-bottom: 0.4rem;
}

.hiw-artifact-title {
  font-size: 0.88rem;
  font-weight: 500;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #111;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.hiw-artifact-subtitle {
  font-size: 0.62rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #bbb;
}

.hiw-artifact-body {
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Key finding callout — mirrors PVD finding block */
.hiw-artifact-finding {
  background: rgba(89,50,43,0.04);
  border-left: 3px solid #59322B;
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
}

.hiw-artifact-finding-val {
  font-size: 1.5rem;
  font-weight: 300;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #1a0e0a;
  line-height: 1;
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
}

.hiw-artifact-finding-desc {
  font-size: 0.72rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #444;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.hiw-artifact-finding-src {
  font-size: 0.58rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #bbb;
}

/* Bar chart section */
.hiw-artifact-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hiw-artifact-section-label {
  font-size: 0.58rem;
  font-family: 'Geist', -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(89,50,43,0.35);
}

.hiw-artifact-bars {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hiw-artifact-bar-row {
  display: grid;
  grid-template-columns: 10rem 1fr 3.5rem;
  align-items: center;
  gap: 0.6rem;
}

.hiw-artifact-bar-name {
  font-size: 0.68rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-artifact-bar-row--hi .hiw-artifact-bar-name { color: #1a0e0a; }

.hiw-artifact-bar-track {
  height: 5px;
  background: #f0ece6;
  border-radius: 999px;
  overflow: hidden;
}

.hiw-artifact-bar-fill {
  height: 100%;
  background: rgba(89,50,43,0.3);
  border-radius: 999px;
}

.hiw-artifact-bar-row--hi .hiw-artifact-bar-fill { background: #59322B; }

.hiw-artifact-bar-val {
  font-size: 0.6rem;
  font-family: 'Geist', -apple-system, sans-serif;
  color: #aaa;
  text-align: right;
}

.hiw-artifact-bar-row--hi .hiw-artifact-bar-val { color: #59322B; }

/* ── Cookie consent bar ───────────────────────────────────────── */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(20, 9, 4, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(237,224,200,0.1);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.cookie-bar.visible {
  transform: translateY(0);
}

.cookie-text {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.875rem;
  color: rgba(237,224,200,0.7);
  margin: 0;
  line-height: 1.5;
}

.cookie-actions {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.cookie-btn:hover { opacity: 0.8; }

.cookie-btn--accept {
  background: #22d4b8;
  color: #0a1c18;
}

.cookie-btn--decline {
  background: transparent;
  color: rgba(237,224,200,0.55);
  border: 1px solid rgba(237,224,200,0.18);
}