/* Referral Journey — section explaining how referral marketing fails
   without an evidence layer. Default styles target mobile (Figma 323:693);
   tablet/desktop scale up to match Figma 228:1572.

   Horizontal padding + max-width cap live in layout.css via the
   `.tlm-section` (root) and `.tlm-container` (__inner) classes added
   to the HTML. The `--primary-on-light` button lives in buttons.css.
   The `tlm-heading-accent` utility lives in base.css. This file owns
   only referral-journey-unique layout. */

.tlm-referral-journey {
  position: relative;
  display: block;
  /* Mobile: symmetric 40/40 via --space-section-y-mobile. Desktop overrides
     below to the asymmetric body-section rhythm 120/60. */
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-white);
  color: var(--color-text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-referral-journey__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* Mobile: tighten the intro→carousel gap to the section's bottom rhythm
   (40px) so the space above the carousel reads even with the space below.
   The desktop 72px (and 59px override at ≥1024) is too tall once stacked. */
@media (max-width: 759px) {
  .tlm-referral-journey__inner {
    gap: var(--space-section-y-mobile);
  }
}

/* ===== Intro: heading + body ===== */

.tlm-referral-journey__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tlm-referral-journey__intro-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.tlm-referral-journey__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-referral-journey__intro-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 520px;
}

/* CTA sits at the end of intro-body, after the paragraphs.
   intro-body's flex gap (--space-md, 24px) provides the inter-
   paragraph rhythm; the CTA gets an extra 8px margin-top so its
   preceding space totals 32px — matching the h2→first-p gap
   (--space-lg) so the CTA reads as a distinct element, not as
   another paragraph in the stack.

   Mobile: full-width per mobile-standards. Tablet+ reverts to
   natural width (left-anchored in the body column). */
.tlm-referral-journey__intro-body .tlm-referral-journey__cta {
  margin-top: var(--space-xs);
  align-self: stretch;
  width: 100%;
}

@media (min-width: 768px) {
  .tlm-referral-journey__intro-body .tlm-referral-journey__cta {
    align-self: flex-start;
    width: auto;
  }
}

.tlm-referral-journey__intro-body p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  /* Mobile: 1.5 per mobile-standards (matches hero pattern).
     Tablet+ bumps to --leading-relaxed (1.6). */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

/* ===== Graphic card ===== */

/* Hidden for now per Paul. Markup retained for re-enable. */
.tlm-referral-journey__graphic {
  display: none;
  position: relative;
  flex-direction: column;
  gap: var(--space-md);
}

/* ===== Tabs (mobile only — hidden at desktop) ===== */

.tlm-referral-journey__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-xs);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
}

.tlm-referral-journey__tab {
  flex: 1 1 0;
  padding: var(--space-2xs) 12px;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tlm-referral-journey__tab:hover {
  background-color: rgba(9, 22, 59, 0.04);
}

.tlm-referral-journey__tab:focus-visible {
  outline: 2px solid var(--color-text-on-light);
  outline-offset: 2px;
}

.tlm-referral-journey__tab--active {
  font-weight: var(--weight-semibold);
  background-color: var(--color-grey-100);
}

/* ===== Stages: scroll-snap carousel on mobile, grid on desktop ===== */

.tlm-referral-journey__stages {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-cream);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tlm-referral-journey__stages::-webkit-scrollbar {
  display: none;
}

.tlm-referral-journey__stage {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-snap-align: start;
  min-width: 0;
}

/* ===== Step eyebrow (8px dot + uppercase label) ===== */

.tlm-referral-journey__step {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tlm-referral-journey__step-dot {
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--color-navy);
  border-radius: 50%;
  flex-shrink: 0;
}

.tlm-referral-journey__step-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-light);
}

/* ===== Quote card (referral) ===== */

.tlm-referral-journey__quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 35px 20px;
  min-height: 347px;
  background-color: var(--color-white);
  border-radius: 13px;
  box-shadow: var(--shadow-card);
}

.tlm-referral-journey__bubble {
  position: relative;
  padding: var(--space-sm);
  background-color: var(--color-cream);
  border-radius: var(--radius-lg);
}

.tlm-referral-journey__bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 22px;
  width: 16px;
  height: 12px;
  background-color: var(--color-cream);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tlm-referral-journey__bubble p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

.tlm-referral-journey__attribution {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tlm-referral-journey__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tlm-referral-journey__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
}

.tlm-referral-journey__name--md {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  letter-spacing: -0.2px;
}

.tlm-referral-journey__role {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 8px;
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
  opacity: 0.8;
}

.tlm-referral-journey__role--xs {
  font-size: 10px;
  letter-spacing: -0.1px;
}

/* ===== Profile card (evidence) ===== */

.tlm-referral-journey__profile {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tlm-referral-journey__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  margin: 14px 14px 0;
  background-color: #F3F2EF;
  border-radius: 999px;
  color: var(--color-text-on-light);
}

.tlm-referral-journey__bar--alert {
  background-color: #FEEEED;
}

.tlm-referral-journey__bar-icon,
.tlm-referral-journey__bar-status {
  flex-shrink: 0;
}

.tlm-referral-journey__bar-url {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.09px;
  color: var(--color-text-on-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlm-referral-journey__profile-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 16px;
}

.tlm-referral-journey__profile-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.tlm-referral-journey__profile-avatar {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tlm-referral-journey__profile-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  background-color: var(--color-grey-100);
  color: var(--color-text-on-light);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
}

.tlm-referral-journey__bio {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: var(--leading-relaxed);
  letter-spacing: -0.1px;
  color: var(--color-text-on-light);
  opacity: 0.8;
}

.tlm-referral-journey__heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-text-on-light);
}

.tlm-referral-journey__skeletons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tlm-referral-journey__skeleton {
  display: block;
  height: 9px;
  background-color: #F3F2EF;
  border-radius: 20px;
}

.tlm-referral-journey__skeleton--lg { width: 100%; max-width: 203px; }
.tlm-referral-journey__skeleton--sm { width: 80px; }

.tlm-referral-journey__phone-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 3px 10px;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.09px;
  border-radius: 50px;
}

.tlm-referral-journey__flags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tlm-referral-journey__flags li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: var(--leading-relaxed);
  letter-spacing: -0.1px;
  color: var(--color-text-on-light);
  opacity: 0.8;
}

.tlm-referral-journey__flags svg {
  flex-shrink: 0;
}

/* ===== Call card (outcome — success) ===== */

.tlm-referral-journey__call,
.tlm-referral-journey__exit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 21px 22px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-card);
  border-radius: 13px;
}

.tlm-referral-journey__call-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tlm-referral-journey__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  background-color: var(--color-navy);
  border-radius: 50%;
  flex-shrink: 0;
}

.tlm-referral-journey__call-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.tlm-referral-journey__call-id .tlm-referral-journey__name--md {
  text-align: left;
}

.tlm-referral-journey__timer {
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: -0.11px;
  color: var(--color-text-on-light);
  opacity: 0.8;
  flex-shrink: 0;
}

.tlm-referral-journey__waveform {
  display: block;
  width: 100%;
  height: 30px;
  padding: 8px 16px;
  background-color: var(--color-cream);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.tlm-referral-journey__caption {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.14px;
  color: var(--color-text-on-light);
}

.tlm-referral-journey__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--color-grey-200);
  margin: 0;
}

.tlm-referral-journey__footer {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
}

/* ===== Exit card (outcome — silent exit) ===== */

.tlm-referral-journey__exit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tlm-referral-journey__exit-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-light);
}

.tlm-referral-journey__events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tlm-referral-journey__events li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background-color: var(--color-cream);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.1px;
  line-height: 1.4;
  color: var(--color-text-on-light);
}

.tlm-referral-journey__chip {
  min-width: 44px;
  padding: 1px 5px;
  background-color: var(--color-grey-100);
  border-radius: 2px;
  text-align: center;
}

/* ===== Status badge ===== */

.tlm-referral-journey__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 6px 1.5px 4.5px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  border-radius: 12px;
  align-self: flex-start;
  mix-blend-mode: multiply;
}

.tlm-referral-journey__badge--success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.tlm-referral-journey__badge--alert {
  background-color: #FEF3F2;
  color: #B42318;
}

.tlm-referral-journey__badge-dot {
  display: block;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== Snake connectors (desktop only) ===== */

.tlm-referral-journey__snake {
  display: none;
  position: absolute;
  pointer-events: none;
}

/* ===== Progress bar (mobile) ===== */

.tlm-referral-journey__progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-cream);
  border-radius: 20px;
  overflow: hidden;
}

.tlm-referral-journey__progress-fill {
  display: block;
  width: 33.333%;
  height: 100%;
  background-color: var(--color-navy);
  border-radius: 20px;
  transition: width 0.3s ease;
}

/* ============================================
 * TABLET (≥768px)
 * ============================================ */

@media (min-width: 768px) {
  .tlm-referral-journey__title {
    font-size: var(--text-h3);
  }

  .tlm-referral-journey__intro-body p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
}

/* ============================================
 * DESKTOP (≥1024px) — match Figma 228:1572
 * ============================================ */

@media (min-width: 1024px) {

  /* Desktop: symmetric body-section rhythm — 120/120
     (mobile is symmetric 60/60). */
  .tlm-referral-journey {
    padding-block: var(--space-5xl);
  }

  .tlm-referral-journey__inner {
    gap: 59px;
  }

  /* Intro becomes a 2-column grid */
  .tlm-referral-journey__intro {
    flex-direction: row;
    gap: var(--space-3xl);
    align-items: stretch;
  }

  .tlm-referral-journey__intro-lead {
    flex: 0 0 auto;
    width: 689px;
  }

  .tlm-referral-journey__intro-body {
    flex: 1 1 auto;
    /* Override the mobile max-width so the right body column fills
       remaining flex space at desktop; its right edge then sits at
       the inner right edge, aligned with the hero support block
       and navbar "Contact us" above. */
    max-width: none;
  }

  .tlm-referral-journey__intro-body p {
    font-size: var(--text-lg);
  }

  .tlm-referral-journey__title {
    font-size: var(--text-h2);
  }

  /* Hide tabs + progress, show 3-column grid */
  .tlm-referral-journey__tabs,
  .tlm-referral-journey__progress {
    display: none;
  }

  .tlm-referral-journey__stages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--space-md);
    align-items: center;
    height: 679px;
    padding: var(--space-md) 56px;
    overflow: visible;
  }

  .tlm-referral-journey__stage {
    flex: initial;
    width: 100%;
    max-width: 285px;
    margin-inline: auto;
  }

  .tlm-referral-journey__stage--evidence,
  .tlm-referral-journey__stage--outcome {
    gap: 18px;
  }

  /* Snakes */
  .tlm-referral-journey__snake {
    display: block;
  }

  .tlm-referral-journey__snake--curve {
    left: calc(33.333% - 30px);
    top: 50%;
    width: 144px;
    height: 280px;
    transform: translateY(-50%);
    z-index: 1;
  }

  .tlm-referral-journey__snake--arrow-top {
    left: calc(66.666% - 80px);
    top: 32%;
    width: 149px;
    height: 17px;
  }

  .tlm-referral-journey__snake--arrow-bottom {
    left: calc(66.666% - 80px);
    top: 73%;
    width: 149px;
    height: 17px;
  }
}

/* ===== Referral-flow diagram (HTML reproduction of Figma 1280×602) =====
   A 3-stage horizontal flow on a cream rounded surface: Ask → Look → Contact.
   Desktop renders all three columns + connectors; below 1024px the stages
   stack vertically and the finest browser chrome is dropped for legibility.

   Internal one-off pixel values (browser chrome, tiny mock webpage type)
   are intentional literals — they're component-internal and have no token. */

.tlm-referral-journey__diagram {
  margin: 0;
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-cream);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  color: var(--color-navy);
}

/* Mobile-first: vertical stack. */
.tlm-referral-journey__diagram-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-referral-journey__diagram-stage + .tlm-referral-journey__diagram-connector {
  margin-block: var(--space-sm);
}

/* ----- Eyebrow label ----- */
.tlm-referral-journey__diagram-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-navy);
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-eyebrow-accent {
  color: var(--color-pink-stop);
}

/* ----- Shared card ----- */
.tlm-referral-journey__diagram-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* =========================================================
 * STAGE 1 — Referral quote
 * ========================================================= */
.tlm-referral-journey__diagram-quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 35px;
  border-radius: 13px;
}

.tlm-referral-journey__diagram-bubble {
  position: relative;
  padding: var(--space-sm);
  background-color: var(--color-cream);
  border-radius: var(--radius-lg);
}

/* Down-left speech tail. */
.tlm-referral-journey__diagram-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 22px;
  width: 16px;
  height: 12px;
  background-color: var(--color-cream);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tlm-referral-journey__diagram-bubble p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  letter-spacing: -0.18px;
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tlm-referral-journey__diagram-avatar {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-attribution-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-attribution-role {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #0b1d35;
}

/* =========================================================
 * STAGE 2 — Evidence (mock browser + overlapping case study)
 * ========================================================= */
.tlm-referral-journey__diagram-evidence {
  position: relative;
}

.tlm-referral-journey__diagram-browser {
  border-radius: 12px;
  overflow: hidden;
}

/* Address-bar chrome. */
.tlm-referral-journey__diagram-browser-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: #f3f2ef;
}

.tlm-referral-journey__diagram-browser-dots {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-browser-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tlm-referral-journey__diagram-browser-dots i:nth-child(1) { background-color: #ff3b30; }
.tlm-referral-journey__diagram-browser-dots i:nth-child(2) { background-color: #ffbd2e; }
.tlm-referral-journey__diagram-browser-dots i:nth-child(3) { background-color: #12b76a; }

.tlm-referral-journey__diagram-browser-url {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 9px;
  background-color: #F0F3F4;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.09px;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlm-referral-journey__diagram-lock {
  flex-shrink: 0;
  color: var(--color-navy-subtle);
}

/* Mock webpage body (intentionally zoomed-out tiny type). */
.tlm-referral-journey__diagram-site {
  padding: 10px;
  background-color: var(--color-white);
}

.tlm-referral-journey__diagram-site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.tlm-referral-journey__diagram-site-brand {
  font-size: 6px;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-site-menu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 3.6px;
  color: var(--color-navy-subtle);
}

.tlm-referral-journey__diagram-site-cta {
  padding: 2px 5px;
  background-color: #141414;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
}

.tlm-referral-journey__diagram-profile {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: #f6f6f1;
  border-radius: var(--radius-sm);
}

.tlm-referral-journey__diagram-profile-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tlm-referral-journey__diagram-profile-eyebrow {
  margin: 0 0 3px;
  font-size: 4px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #FF2A00;
}

.tlm-referral-journey__diagram-profile-name {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  color: #192b37;
}

.tlm-referral-journey__diagram-profile-bio {
  margin: 0 0 8px;
  font-size: 5px;
  line-height: 1.5;
  color: var(--color-navy-subtle);
}

.tlm-referral-journey__diagram-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tlm-referral-journey__diagram-contacts li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 4.5px;
  line-height: 1.2;
  color: var(--color-navy-muted);
  border-top: 1px solid var(--color-navy-divider);
}

.tlm-referral-journey__diagram-contacts li:first-child {
  border-top: 0;
  padding-top: 0;
}

.tlm-referral-journey__diagram-contacts li b {
  font-weight: var(--weight-bold);
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-contacts svg {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  color: var(--color-navy-subtle);
}

.tlm-referral-journey__diagram-profile-photo {
  width: 109px;
  height: 114px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* Overlapping case-study card. */
.tlm-referral-journey__diagram-casestudy {
  position: relative;
  z-index: 2;
  margin: -28px 16px 0;
  padding: 12px;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}

.tlm-referral-journey__diagram-casestudy-title {
  margin: 0 0 5px;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-casestudy-body {
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
  color: var(--color-navy-subtle);
}

/* =========================================================
 * STAGE 3 — Outcome (call in progress + abandoned tab)
 * ========================================================= */
.tlm-referral-journey__diagram-call,
.tlm-referral-journey__diagram-closed {
  width: 100%;
}

.tlm-referral-journey__diagram-call {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.tlm-referral-journey__diagram-call-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tlm-referral-journey__diagram-call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background-color: var(--color-navy);
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-call-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.tlm-referral-journey__diagram-call-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--color-navy);
}

.tlm-referral-journey__diagram-call-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 1.5px 6px;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  border-radius: var(--radius-pill);
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.tlm-referral-journey__diagram-call-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-call-timer {
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: -0.11px;
  color: var(--color-navy);
  opacity: 0.8;
  flex-shrink: 0;
}

/* Audio waveform — flex row of bars; heights set inline per bar. */
.tlm-referral-journey__diagram-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 8px 16px;
  background-color: var(--color-cream);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tlm-referral-journey__diagram-waveform span {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 2px;
  border-radius: var(--radius-pill);
  background-color: #9b9b98;
}

/* ----- Abandoned tab (closed browser) ----- */
.tlm-referral-journey__diagram-closed {
  overflow: hidden;
}

.tlm-referral-journey__diagram-closed-tabbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: #E9EBEF;
}

.tlm-referral-journey__diagram-closed-dots {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-closed-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(60, 64, 67, 0.25);
}

.tlm-referral-journey__diagram-closed-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: var(--color-white);
  border-radius: 6px 6px 0 0;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: #3C4043;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tlm-referral-journey__diagram-closed-x {
  font-size: 12px;
  line-height: 1;
  color: var(--color-navy-subtle);
}

.tlm-referral-journey__diagram-closed-newtab {
  font-size: 12px;
  line-height: 1;
  color: #3C4043;
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-closed-addressbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background-color: #F0F3F4;
}

.tlm-referral-journey__diagram-closed-nav {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-navy-subtle);
  flex-shrink: 0;
}

.tlm-referral-journey__diagram-closed-url {
  font-size: 9px;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty white body — the page was closed. */
.tlm-referral-journey__diagram-closed-body {
  height: 96px;
  background-color: var(--color-white);
}

/* =========================================================
 * CONNECTORS
 * ========================================================= */
.tlm-referral-journey__diagram-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.tlm-referral-journey__diagram-marker svg {
  width: 100%;
  height: 100%;
}

.tlm-referral-journey__diagram-marker--ok { background-color: var(--color-success-500); }
.tlm-referral-journey__diagram-marker--no { background-color: #FF3B30; }

/* Mobile (stacked): the SVG wire is desktop-only. Connectors collapse to
   a short centred vertical run; the ok/no markers sit on it as a pair. */
.tlm-referral-journey__diagram-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 28px;
}

.tlm-referral-journey__diagram-wire,
.tlm-referral-journey__diagram-arrow { display: none; }

.tlm-referral-journey__diagram-connector--straight::before {
  content: '';
  width: 2px;
  height: 28px;
  background-color: var(--color-navy-divider);
}

/* =========================================================
 * DESKTOP (≥1200px) — horizontal 3-column flow.
 * Below this the columns get too cramped for the dense cards,
 * so the stages stack vertically instead.
 * ========================================================= */
@media (min-width: 1200px) {
  /* Fixed-height row keeps the diagram at its Figma proportion (~2.13:1)
     instead of collapsing to its tightest content height. The eyebrows
     pin to the top via padding-top on each stage; the cards centre in
     the remaining space so the connectors meet their mid-lines. */
  .tlm-referral-journey__diagram {
    --diagram-row: 520px;       /* row height; cards centre within it */
    --eyebrow-band: 56px;       /* top space reserved for the eyebrow row */
    /* Cap + centre so the card columns never grow past the Figma width.
       Fixed connector columns can then always span the gap between cards
       (this is what broke at wide viewports — the 1fr columns ran away). */
    max-width: 1240px;
    margin: var(--space-xl) auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.05fr) 96px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 48px 56px;
  }

  .tlm-referral-journey__diagram-stage {
    position: relative;
    min-height: var(--diagram-row);
    padding-top: var(--eyebrow-band);
    gap: 0;
    justify-content: flex-start;   /* cards top-align under the pinned eyebrow */
  }

  /* Eyebrow pinned to the top band so all three sit on one line. */
  .tlm-referral-journey__diagram-eyebrow {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
  }

  .tlm-referral-journey__diagram-stage--ask     { grid-column: 1; }
  .tlm-referral-journey__diagram-stage--evidence { grid-column: 3; }
  .tlm-referral-journey__diagram-stage--contact  { grid-column: 5; }

  /* Connectors are inline SVG wires drawn against a 0 0 100 520 viewBox
     that maps to the fixed row: card mid-lines sit at Y=164 (browser),
     Y=117 (call card) and Y=441 (closed-tab card). preserveAspectRatio
     "none" stretches the viewBox to the cell, so the wires track the
     cards at any width — no per-width pixel tuning. The tick/cross
     circles stay as HTML markers, pinned to the same fractional Ys. */
  .tlm-referral-journey__diagram-connector {
    grid-row: 1;
    align-self: stretch;
    position: relative;
  }

  .tlm-referral-journey__diagram-connector--straight { grid-column: 2; }
  .tlm-referral-journey__diagram-connector--split    { grid-column: 4; }

  .tlm-referral-journey__diagram-wire {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .tlm-referral-journey__diagram-arrow { display: block; }

  /* The straight cell only carries the SVG at desktop, no mobile stub. */
  .tlm-referral-journey__diagram-connector--straight::before {
    content: none;
  }

  /* Arrowhead at the end of the straight wire (kept as an HTML chevron so
     it stays square under the SVG's non-uniform scaling). y = 161/520. */
  .tlm-referral-journey__diagram-arrow {
    position: absolute;
    top: calc(161 / 520 * 100%);
    right: 2px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 1.5px solid var(--color-navy-divider);
    border-right: 1.5px solid var(--color-navy-divider);
    transform: rotate(45deg);
  }

  /* Markers sit at the branch endpoints: 117/520 and 441/520 of the row. */
  .tlm-referral-journey__diagram-marker {
    position: absolute;
    right: -11px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }

  .tlm-referral-journey__diagram-marker--ok { top: calc(107 / 520 * 100%); }
  .tlm-referral-journey__diagram-marker--no { top: calc(453 / 520 * 100%); }

  /* Stage 3's two cards sit at the top and bottom of the row so the
     branches reach their centres. */
  .tlm-referral-journey__diagram-stage--contact {
    justify-content: space-between;
    gap: var(--space-md);
  }
}