/* Auto-extracted from app/templates/transcript_public.html on 2026-05-13.
   The Jinja-rendered tail of the original <style> block — the
   {{ assets.asset_icons_css() }} macro call — stays inline in the
   template (it emits Jinja-templated CSS that can't live in a static
   file). Everything else lives here. asset_url() does mtime-based
   cache busting so edits are picked up automatically. */

    :root { color-scheme: light; }
    * { box-sizing: border-box; }
    body {
      margin: 0; padding: 0;
      /* Subtle dual-tone background so the page doesn't feel flat. */
      background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-pale-cool) 240px, var(--surface-pale-cool) 100%);
      /* Phase 15.6.3 — adopt the landing/login marketing font so the
         public transcript reads as part of the funnel. The fallback
         stack keeps SSR rendering crisp before Google Fonts arrives. */
      font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--ink-navy); line-height: 1.55;
    }
    /* Wider shell to make room for the rail. Below the rail breakpoint the
       rail collapses out and the content takes the full width. */
    .tpx-page {
      max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px;
      display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px;
      align-items: start;
    }
    .tpx-shell { min-width: 0; }
    @media (max-width: 880px) {
      .tpx-page { grid-template-columns: 1fr; gap: 0; }
      .tpx-rail { display: none; }
    }

    /* Sticky anchor rail. Mirrors the look/feel of the signed-in review page
       rail but light-weight — no JS scroll-spy, just simple in-page anchors. */
    .tpx-rail {
      position: sticky; top: 24px;
      padding: 14px 12px;
      border-radius: 12px;
      background: var(--surface-white); border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 4px 12px rgba(20, 36, 28, 0.05);
      max-height: calc(100vh - 48px); overflow-y: auto;
    }
    .tpx-rail-title {
      font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-green-muted); margin-bottom: 10px; padding-left: 6px;
    }
    .tpx-rail-nav { display: flex; flex-direction: column; gap: 1px; }
    .tpx-rail-link {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 8px;
      color: var(--ink-slate); font-size: 12.5px; font-weight: 600;
      text-decoration: none; line-height: 1.3;
      position: relative;
      transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, padding-left 0.16s ease;
    }
    .tpx-rail-link::before {
      content: ""; display: inline-block;
      width: 3px; align-self: stretch;
      background: transparent; border-radius: 2px;
      transition: background 0.16s ease;
      flex-shrink: 0;
    }
    .tpx-rail-link:hover, .tpx-rail-link:focus-visible {
      background: var(--surface-pale-cool); color: var(--brand-deep); outline: none;
    }
    /* JS scroll-spy adds .is-active to whichever rail link corresponds to
       the section currently in view. Active link uses a left accent bar
       and stronger color so the user always knows where they are. */
    .tpx-rail-link.is-active {
      background: var(--surface-mint-deep);
      color: var(--brand-deep);
      font-weight: 800;
    }
    .tpx-rail-link.is-active::before { background: var(--brand-deep); }
    .tpx-rail-link.tpx-rail-link-cta {
      margin-top: 10px;
      background: var(--brand-deep); color: var(--surface-white); font-weight: 800; font-size: 11px;
      letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
      justify-content: center;
    }
    .tpx-rail-link.tpx-rail-link-cta::before { display: none; }
    .tpx-rail-link.tpx-rail-link-cta:hover { background: var(--brand-deep); color: var(--surface-white); }
    .tpx-rail-link.tpx-rail-link-cta.is-active { background: var(--brand-deep); color: var(--surface-white); }
    /* Sparkle prefix on the conversion CTA — same ✦ glyph used by the AI
       affordances elsewhere on the page (eyebrow chip, chatbot orb). */
    .tpx-rail-link-cta-sparkle::after {
      content: "✦";
      margin-left: 6px;
      font-size: 11px;
      opacity: 0.95;
    }

    html { scroll-behavior: smooth; scroll-padding-top: 20px; }

    /* ----- header / hero ----- */
    .tpx-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--surface-white); background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-bg-bright) 100%);
      padding: 5px 12px; border-radius: 999px;
      border: 1px solid var(--brand-deep);
      box-shadow: 0 4px 12px rgba(23, 56, 45, 0.18);
    }
    .tpx-eyebrow::before {
      content: "✦"; font-size: 10px;
    }
    .tpx-title {
      margin: 14px 0 6px 0;
      font-size: 30px; font-weight: 900; line-height: 1.18; color: var(--brand-deep);
      letter-spacing: -0.01em;
    }
    .tpx-meta {
      display: flex; flex-wrap: wrap; gap: 14px;
      color: var(--ink-muted); font-size: 13px;
      margin-bottom: 18px;
    }
    .tpx-meta strong { color: var(--brand-deep); font-weight: 700; }
    .tpx-hero {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 8px 22px rgba(20, 36, 28, 0.06);
      margin-bottom: 28px;
    }
    .tpx-hero-thumb {
      width: 280px; height: 158px; aspect-ratio: 16/9;
      object-fit: cover; border-radius: 10px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool); flex-shrink: 0;
    }
    .tpx-hero-body {
      display: flex; flex-direction: column; gap: 6px; min-width: 0;
      /* User wants the hero summary paragraph fully justified. Force
         it on the container + every descendant so no later cascade
         (e.g., a future paragraph rule landing earlier in the source)
         flips it back to left. */
      text-align: justify    text-wrap: pretty;-webkit-hyphens: auto;hyphens: auto;!important;
    }
    .tpx-hero-body p,
    .tpx-hero-body * {
      text-align: justify   text-wrap: pretty;-webkit-hyphens: auto;!important;
      text-justify: inter-word;
      hyphens: auto;
    }
    .tpx-hero-channel { font-weight: 800; color: var(--brand-deep); font-size: 14px; }
    .tpx-hero-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--ink-slate); font-size: 13px; text-decoration: none;
      margin-top: 6px;
    }
    .tpx-hero-link:hover { color: var(--brand-deep); text-decoration: underline; }
    @media (max-width: 720px) {
      .tpx-hero { flex-direction: column; }
      .tpx-hero-thumb { width: 100%; height: auto; }
    }

    /* ----- section primitives ----- */
    .tpx-section { margin: 30px 0; }
    .tpx-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--brand-deep); margin: 0 0 10px 0;
      padding: 4px 10px 4px 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--surface-mint-deep) 0%, var(--surface-mint) 100%);
      border: 1px solid var(--surface-mint-deep);
    }
    .tpx-kicker::before {
      content: ""; display: inline-block;
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--brand-deep);
    }
    .tpx-card {
      padding: 18px 22px; border-radius: 12px;
      background: var(--surface-white);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 4px 14px rgba(20, 36, 28, 0.05);
    }
    .tpx-section p { margin: 0; font-size: 15px; line-height: 1.65; }
    .tpx-section ul { margin: 0; padding-left: 22px; }
    .tpx-section ul li { margin: 6px 0; font-size: 15px; line-height: 1.55; }
    /* Numbered takeaway list — visually richer than bare bullets. */
    .tpx-card ol.tpx-numbered {
      margin: 0; padding: 0; list-style: none;
      counter-reset: tpx-num;
    }
    .tpx-card ol.tpx-numbered li {
      counter-increment: tpx-num;
      position: relative; padding-left: 38px; margin: 10px 0;
      font-size: 15px; line-height: 1.55;
    }
    .tpx-card ol.tpx-numbered li::before {
      content: counter(tpx-num);
      position: absolute; left: 0; top: 1px;
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px;
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-bg-bright) 100%);
      color: var(--surface-white);
      border-radius: 999px;
      font-size: 11.5px; font-weight: 900;
      box-shadow: 0 4px 10px rgba(23, 56, 45, 0.22);
    }

    /* ----- topics + chips ----- */
    .tpx-topics { display: flex; flex-wrap: wrap; gap: 6px; }
    .tpx-topic-chip {
      display: inline-flex; align-items: center;
      padding: 4px 11px; border-radius: 999px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      color: var(--positive-text-deep); font-size: 11.5px; font-weight: 700;
    }

    /* ----- horizon (3-up) — each cell tinted differently so short/mid/long
       reads are visually distinguishable at a glance ----- */
    .tpx-horizon-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    }
    @media (max-width: 720px) { .tpx-horizon-grid { grid-template-columns: 1fr; } }
    .tpx-horizon-cell {
      padding: 14px 16px; border-radius: 12px;
      background: var(--surface-white); border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 3px 10px rgba(20, 36, 28, 0.04);
      position: relative;
      overflow: hidden;
    }
    .tpx-horizon-cell::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
    }
    .tpx-horizon-cell:nth-child(1) { background: linear-gradient(180deg, var(--surface-warm-warning) 0%, var(--surface-white) 70%); border-color: var(--warning-border-soft); }
    .tpx-horizon-cell:nth-child(1)::before { background: var(--gold-accent); }
    .tpx-horizon-cell:nth-child(2) { background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-white) 70%); border-color: var(--border-cool); }
    .tpx-horizon-cell:nth-child(2)::before { background: var(--info-steel-mid); }
    .tpx-horizon-cell:nth-child(3) { background: linear-gradient(180deg, var(--surface-mint) 0%, var(--surface-white) 70%); border-color: var(--surface-mint-deep); }
    .tpx-horizon-cell:nth-child(3)::before { background: var(--positive-border-dark); }
    .tpx-horizon-cell strong {
      display: block;
      font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--brand-deep); margin-bottom: 8px;
    }
    .tpx-horizon-cell p { font-size: 14px; line-height: 1.55; margin: 0 0 8px 0; color: var(--ink-navy); text-align: justify; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
    /* Executive read paragraph left-aligned (justify caused awkward
       inter-word spacing on short paragraphs and read worse than left). */
    #tpx-section-executive p { text-align: left; hyphens: auto; }
    /* Disagreement bullets justified for the same editorial feel. */
    #tpx-section-disagreement li { text-align: justify; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
    .tpx-horizon-cell ul { padding-left: 18px; margin: 0; }
    .tpx-horizon-cell ul li { font-size: 13.5px; line-height: 1.5; margin: 4px 0; color: var(--ink-navy); }
    /* Horizon cell "show more" — uses native <details>/<summary> so it's
       accessible and JS-free. The summary reads as a discreet inline link,
       not a button, so it stays subordinate to the actual content. */
    .tpx-horizon-more {
      margin-top: 4px;
    }
    .tpx-horizon-more > summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
      color: var(--positive-border-dark);
      padding: 2px 0;
      user-select: none;
    }
    .tpx-horizon-more > summary::-webkit-details-marker { display: none; }
    .tpx-horizon-more > summary::after {
      content: "▾";
      font-size: 10px;
      transition: transform 0.15s ease;
    }
    .tpx-horizon-more[open] > summary::after { transform: rotate(180deg); }
    .tpx-horizon-more > summary:hover { color: var(--brand-deep); }
    .tpx-horizon-more[open] > summary { margin-bottom: 4px; }
    .tpx-horizon-more ul { padding-left: 18px; margin: 0; }
    .tpx-horizon-more ul li { font-size: 13.5px; line-height: 1.5; margin: 4px 0; color: var(--ink-navy); }

    /* ----- claims — left accent bar tinted by direction (bullish green /
       bearish red / mixed amber / default blue) ----- */
    .tpx-claims { display: flex; flex-direction: column; gap: 10px; }
    .tpx-claim {
      padding: 12px 14px 12px 18px; border-radius: 10px;
      background: var(--surface-white); border: 1px solid var(--surface-mint);
      display: flex; flex-direction: column; gap: 6px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(20, 36, 28, 0.04);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .tpx-claim:hover, .tpx-claim:focus-within {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.10);
      border-color: var(--surface-mint-deep);
    }
    .tpx-claim::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
      background: var(--info-steel-mid);  /* default = info-blue */
    }
    .tpx-claim[data-direction="bullish"]::before { background: var(--positive-border-dark); }
    .tpx-claim[data-direction="bearish"]::before { background: var(--rust-bright); }
    .tpx-claim[data-direction="mixed"]::before   { background: var(--gold-accent); }
    .tpx-claim[data-direction="neutral"]::before { background: var(--ink-muted); }
    .tpx-claim-head {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
      font-size: 11px; font-weight: 700; color: var(--ink-green-muted); letter-spacing: 0.04em;
    }
    .tpx-claim-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-navy); margin: 0; }
    .tpx-claim-rationale { font-size: 13px; line-height: 1.5; color: var(--ink-slate); margin: 0; font-style: italic; }
    .tpx-meta-pill {
      display: inline-flex; align-items: center;
      padding: 1px 8px; border-radius: 999px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      color: var(--ink-slate);
      font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    }
    .tpx-meta-pill-bullish { background: var(--surface-mint); color: var(--positive-text-deep); border-color: var(--surface-mint-deep); }
    .tpx-meta-pill-bearish { background: var(--surface-warm-warning); color: var(--danger-text-deep); border-color: var(--danger-border-soft); }
    .tpx-meta-pill-mixed { background: var(--surface-warm); color: var(--brand-bronze); border-color: var(--warning-border-soft); }
    .tpx-meta-pill-info { background: var(--surface-pale-cool); color: var(--ink-navy); border-color: var(--border-cool); }
    .tpx-meta-pill-warn { background: var(--surface-warm-warning); color: var(--danger-text-deep); border-color: var(--danger-border-soft); }

    /* ----- assets ----- */
    .tpx-assets-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    }
    @media (max-width: 720px) { .tpx-assets-grid { grid-template-columns: 1fr; } }
    .tpx-asset {
      padding: 12px 14px 12px 18px; border-radius: 10px;
      background: var(--surface-white); border: 1px solid var(--surface-mint);
      display: flex; flex-direction: column; gap: 4px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(20, 36, 28, 0.04);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .tpx-asset:hover, .tpx-asset:focus-within {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.10);
      border-color: var(--surface-mint-deep);
    }
    .tpx-asset::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
      background: var(--border-mid);
    }
    .tpx-asset[data-direction="bullish"]::before { background: var(--positive-border-dark); }
    .tpx-asset[data-direction="bearish"]::before { background: var(--rust-bright); }
    .tpx-asset[data-direction="mixed"]::before   { background: var(--gold-accent); }
    .tpx-asset[data-direction="neutral"]::before { background: var(--ink-muted); }
    .tpx-asset-name { font-size: 14px; font-weight: 800; color: var(--ink-navy); }
    .tpx-asset-ticker { color: var(--ink-slate); font-weight: 600; font-size: 12.5px; }
    .tpx-asset-rationale { font-size: 13px; line-height: 1.5; color: var(--ink-slate); margin: 0; }
    /* First-asset teaser — only the rationale renders, in a slightly
       elevated card so it reads as "the value proposition" of the section. */
    .tpx-asset.tpx-asset-teaser {
      background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
      box-shadow: 0 4px 12px rgba(20, 36, 28, 0.07);
    }
    .tpx-asset-rationale-placeholder {
      color: var(--ink-muted); font-style: italic;
    }
    /* Gated asset card — content is rendered (with name/direction/rationale)
       but visually blurred. Sign-in overlay sits on top. Hover lifts. */
    .tpx-asset.tpx-asset-gated {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.16s ease, box-shadow 0.16s ease;
    }
    .tpx-asset.tpx-asset-gated:hover,
    .tpx-asset.tpx-asset-gated:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.12);
      outline: none;
    }
    .tpx-asset.tpx-asset-gated::before {
      /* The gated card keeps the left-accent bar so the visitor still sees
         the direction hint visually. The actual NAME and rationale are
         blurred behind the overlay. */
      z-index: 1;
    }
    .tpx-asset-gated-body {
      filter: blur(5px);
      -webkit-filter: blur(5px);
      pointer-events: none;
      user-select: none;
      opacity: 0.62;
    }
    .tpx-asset-gated-overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 3;
    }
    .tpx-asset-gated-icon {
      font-size: 22px;
      filter: drop-shadow(0 2px 4px rgba(23, 56, 45, 0.35));
    }
    .tpx-asset-gated-text {
      padding: 6px 14px;
      background: var(--brand-deep); color: var(--surface-white);
      border-radius: 999px;
      font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.32);
    }
    /* AI-star button anchored to the top-right corner of the asset cards.
       Inherits the base .tpx-aistar-btn 30×30 sizing — only positioning is
       different. */
    .tpx-asset { position: relative; }
    .tpx-asset-aistar {
      position: absolute; top: 10px; right: 10px;
    }
    /* When the user hovers the WHOLE asset card, the AI-star lights up to
       its active state AND starts a slow pulse — eye-catching enough to
       read as "click me" without being noisy. */
    .tpx-asset:hover .tpx-asset-aistar,
    .tpx-asset:focus-within .tpx-asset-aistar {
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
      animation: tpx-aistar-pulse 1.8s ease-in-out infinite;
    }
    /* Slow attention-getter: expanding-ring glow + tiny scale tic + a
       color cycle between the deep brand green and the lighter teal that
       sits next to it in the rest of the design system. Pulse is gentle
       (1.8s) so it doesn't distract from reading the card content. */
    @keyframes tpx-aistar-pulse {
      0%, 100% {
        transform: scale(1);
        background: var(--brand-deep);
        border-color: var(--brand-deep);
        box-shadow: 0 6px 14px rgba(23, 56, 45, 0.30), 0 0 0 0 rgba(94, 152, 175, 0.55);
      }
      50% {
        transform: scale(1.08);
        background: var(--positive-bg-bright);
        border-color: var(--positive-bg-bright);
        box-shadow: 0 8px 20px rgba(42, 143, 114, 0.45), 0 0 0 10px rgba(94, 175, 152, 0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-asset:hover .tpx-asset-aistar,
      .tpx-asset:focus-within .tpx-asset-aistar,
      .tpx-related-card:hover .tpx-related-aistar,
      .tpx-related-card:focus-within .tpx-related-aistar {
        animation: none;
      }
    }

    /* Gated claim / Q&A — same blur+overlay pattern as the gated asset
       card, but laid out around the claim's left timeline column. */
    .tpx-claim.tpx-claim-gated,
    .tpx-question.tpx-question-gated {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.16s ease, box-shadow 0.16s ease;
    }
    .tpx-claim.tpx-claim-gated:hover,
    .tpx-claim.tpx-claim-gated:focus-visible,
    .tpx-question.tpx-question-gated:hover,
    .tpx-question.tpx-question-gated:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.12);
      outline: none;
    }
    .tpx-claim-gated-body {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      filter: blur(5px);
      -webkit-filter: blur(5px);
      pointer-events: none;
      user-select: none;
      opacity: 0.62;
      width: 100%;
    }

    /* Blurred score values. The label stays sharp so visitors still know
       which metric is being scored; only the number is gated. */
    .tpx-score.tpx-score-gated {
      position: relative;
      display: block;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease;
    }
    .tpx-score.tpx-score-gated:hover,
    .tpx-score.tpx-score-gated:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.10);
      outline: none;
    }
    .tpx-score-value-gated {
      filter: blur(6px);
      -webkit-filter: blur(6px);
      pointer-events: none;
      user-select: none;
      opacity: 0.55;
    }
    .tpx-score-gated-lock {
      position: absolute; top: 10px; right: 12px;
      font-size: 14px;
      opacity: 0.7;
    }

    /* ----- speakers ----- */
    .tpx-speakers { display: flex; flex-wrap: wrap; gap: 6px; }
    .tpx-speaker-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 11px; border-radius: 999px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      color: var(--ink-navy); font-size: 12px; font-weight: 700;
    }
    .tpx-speaker-chip-role {
      font-size: 9.5px; color: var(--ink-green-muted); font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* ----- interview questions ----- */
    .tpx-questions { display: flex; flex-direction: column; gap: 10px; }
    .tpx-question {
      padding: 12px 14px; border-radius: 10px;
      background: var(--surface-white); border: 1px solid var(--surface-mint);
      display: flex; flex-direction: column; gap: 6px;
      position: relative;
      box-shadow: 0 2px 8px rgba(20, 36, 28, 0.04);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .tpx-question:hover, .tpx-question:focus-within {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.10);
      border-color: var(--surface-mint-deep);
    }
    .tpx-question-topic {
      font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--ink-green-muted);
    }
    .tpx-question-text { font-size: 14.5px; font-weight: 700; color: var(--ink-navy); margin: 0; }
    .tpx-question-answer { font-size: 13px; line-height: 1.55; color: var(--ink-slate); margin: 0; }
    .tpx-timestamp-link {
      font-size: 11px; font-weight: 700; color: var(--ink-navy); text-decoration: none;
      padding: 2px 6px; border-radius: 4px; background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
    }
    .tpx-timestamp-link:hover { background: var(--surface-mint-deep); }
    /* Left-aligned timestamp + AI-star pair on each claim / question. Same
       visual language as the signed-in review page — a prominent time pill
       and a discreet AI-star that takes anon visitors to sign-in on click. */
    .tpx-time-block {
      display: inline-flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    .tpx-time-pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 999px;
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-bg-bright) 100%);
      color: var(--surface-white);
      font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
      text-decoration: none;
      box-shadow: 0 3px 8px rgba(23, 56, 45, 0.18);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .tpx-time-pill::before {
      content: "▶"; font-size: 8px;
    }
    .tpx-time-pill:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.30);
    }
    .tpx-aistar-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px;
      border-radius: 999px;
      background: var(--surface-white); color: var(--brand-deep);
      border: 1px solid var(--surface-mint-deep);
      cursor: pointer;
      font-size: 14px; font-weight: 900;
      box-shadow: 0 2px 6px rgba(23, 56, 45, 0.10);
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .tpx-aistar-btn::before { content: "✦"; }
    .tpx-aistar-btn:hover,
    .tpx-aistar-btn:focus-visible {
      transform: translateY(-1px) scale(1.08);
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.26);
      outline: none;
    }
    /* Layout: time-block on left, content body taking remaining width. */
    .tpx-claim, .tpx-question {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
    }
    .tpx-claim-body, .tpx-question-body {
      min-width: 0;
      display: flex; flex-direction: column; gap: 6px;
    }

    /* ----- scores ----- */
    .tpx-scores-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    }
    @media (max-width: 720px) { .tpx-scores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .tpx-score {
      padding: 10px 12px; border-radius: 10px;
      background: var(--surface-white); border: 1px solid var(--surface-mint);
      text-align: center;
    }
    .tpx-score-value { font-size: 24px; font-weight: 900; color: var(--brand-deep); }
    .tpx-score-label {
      font-size: 10px; font-weight: 700; color: var(--ink-green-muted);
      letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;
    }

    /* ----- footer CTA ----- */
    .tpx-footer {
      margin: 48px 0 0 0; padding: 28px;
      border-radius: 16px;
      background: linear-gradient(180deg, var(--surface-mint) 0%, var(--border-cool) 100%);
      border: 1px solid var(--surface-mint-deep);
      text-align: center;
    }
    .tpx-footer h3 { margin: 0 0 6px 0; font-size: 19px; color: var(--brand-deep); }
    .tpx-footer p { margin: 0 0 14px 0; color: var(--positive-text-deep); font-size: 14px; }
    .tpx-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 24px; border-radius: 999px;
      background: var(--brand-deep); color: var(--surface-white);
      font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      text-decoration: none; border: none; cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .tpx-cta:hover {
      background: var(--brand-deep);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(23, 56, 45, 0.22);
    }
    /* Permanent attention-getter on every primary footer / recap CTA —
       same visual language as the AI-star pulse (slow color shimmer +
       outward glow ring) but slower and ring-only (no scale) since these
       buttons are wide and any scale would shift surrounding layout.
       Applies to BOTH the anonymous recap CTA and the signed-in footer
       CTAs (Open my saved analysis, Re-run with my agent, Generate my
       personalized analysis, Follow this channel) so every state has
       the same eye-catching primary action. */
    .tpx-unlock-recap .tpx-cta,
    .tpx-footer .tpx-cta {
      animation: tpx-final-cta-pulse 2.4s ease-in-out infinite;
    }
    .tpx-unlock-recap .tpx-cta:hover,
    .tpx-footer .tpx-cta:hover {
      /* On hover, pause the pulse so the user's :hover styling reads
         cleanly instead of fighting the keyframe values. */
      animation-play-state: paused;
    }
    @keyframes tpx-final-cta-pulse {
      0%, 100% {
        background: var(--brand-deep);
        box-shadow: 0 6px 16px rgba(23, 56, 45, 0.24), 0 0 0 0 rgba(42, 143, 114, 0.55);
      }
      50% {
        /* Cycle to the brighter teal that matches the AI-star pulse so the
           whole page shares one "energized" accent color. */
        background: var(--positive-bg-bright);
        box-shadow: 0 10px 24px rgba(42, 143, 114, 0.40), 0 0 0 14px rgba(42, 143, 114, 0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-unlock-recap .tpx-cta,
      .tpx-footer .tpx-cta { animation: none; }
    }

    /* Periodic attention pulse on the rail "Create Free Agent" CTA (both
       desktop sidebar and mobile chip strip). Most of the 10s cycle is
       idle so the rail doesn't feel jittery; a brief wiggle + flash fires
       at the end of each cycle as a "still here" reminder.
       Only added on the anonymous CTA via the .tpx-rail-cta-attn class —
       signed-in users get a calm rail. */
    .tpx-rail-cta-attn {
      animation: tpx-rail-cta-attn 10s ease-in-out infinite;
      transform-origin: center center;
    }
    @keyframes tpx-rail-cta-attn {
      /* 0–86%: hold steady — most of the cycle is idle so the rail
         doesn't feel jittery. */
      0%, 86% {
        transform: translateX(0) rotate(0deg) scale(1);
        background: var(--brand-deep);
        box-shadow: 0 0 0 0 rgba(42, 143, 114, 0);
      }
      /* Brief wiggle + outward glow ring + color flash to the brighter
         teal accent at the tail end of each 10s cycle. */
      88% { transform: translateX(-2px) rotate(-2deg) scale(1.03); background: var(--brand-deep); box-shadow: 0 0 0 0 rgba(42, 143, 114, 0.55); }
      90% { transform: translateX(2px) rotate(2deg) scale(1.04); background: var(--positive-bg-bright); box-shadow: 0 0 0 4px rgba(42, 143, 114, 0.40); }
      92% { transform: translateX(-2px) rotate(-2deg) scale(1.04); background: var(--positive-bg-bright); box-shadow: 0 0 0 8px rgba(42, 143, 114, 0.20); }
      94% { transform: translateX(2px) rotate(2deg) scale(1.03); background: var(--brand-deep); box-shadow: 0 0 0 12px rgba(42, 143, 114, 0.08); }
      96% { transform: translateX(0) rotate(0deg) scale(1.02); background: var(--brand-deep); box-shadow: 0 0 0 14px rgba(42, 143, 114, 0); }
      100% { transform: translateX(0) rotate(0deg) scale(1); background: var(--brand-deep); box-shadow: 0 0 0 0 rgba(42, 143, 114, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-rail-cta-attn { animation: none; }
    }

    /* Floating chatbot affordance — sits bottom-right above the page
       content. Hover reveals a "Ask the agent" tooltip. Click takes anon
       visitors to sign-in; the post-login redirect lands them back here. */
    .tpx-chatbot-fab {
      position: fixed; right: 22px; bottom: 22px;
      z-index: 50;
      display: inline-flex; align-items: center; gap: 0;
      padding: 0;
      border: none; cursor: pointer;
      background: transparent;
    }
    .tpx-chatbot-fab-orb {
      display: inline-flex; align-items: center; justify-content: center;
      width: 56px; height: 56px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-bg-bright) 100%);
      color: var(--surface-white);
      font-size: 22px; font-weight: 900;
      box-shadow: 0 14px 32px rgba(23, 56, 45, 0.32), 0 0 0 0 rgba(94, 152, 175, 0.5);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .tpx-chatbot-fab:hover .tpx-chatbot-fab-orb,
    .tpx-chatbot-fab:focus-visible .tpx-chatbot-fab-orb {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 18px 38px rgba(23, 56, 45, 0.42), 0 0 0 6px rgba(94, 152, 175, 0.18);
      outline: none;
    }
    .tpx-chatbot-fab-orb::before {
      content: "✦";
      font-size: 22px; line-height: 1;
    }
    .tpx-chatbot-fab-tooltip {
      position: absolute; right: calc(100% + 14px); top: 50%;
      transform: translateY(-50%);
      padding: 9px 14px;
      background: var(--brand-deep); color: var(--surface-white);
      border-radius: 10px;
      font-size: 12.5px; font-weight: 700; line-height: 1.3;
      letter-spacing: 0.01em;
      white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      box-shadow: 0 8px 18px rgba(23, 56, 45, 0.28);
    }
    .tpx-chatbot-fab-tooltip::after {
      content: "";
      position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid var(--brand-deep);
    }
    .tpx-chatbot-fab:hover .tpx-chatbot-fab-tooltip,
    .tpx-chatbot-fab:focus-visible .tpx-chatbot-fab-tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(-2px);
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-chatbot-fab-orb { transition: none; }
      .tpx-chatbot-fab-tooltip { transition: none; }
    }

    /* ----- Rolling FAB suggestion bubble -----
       Sits to the LEFT of the chatbot orb and cycles through agent-shaped
       prompts every 2 seconds with a smooth fade. Acts as a click-target
       too — clicking it opens the FAB popover and pre-fills the textarea
       with the current suggestion (minus the "Ask me " lead-in). Anonymous
       visitors only (the FAB popover only renders for them). */
    .tpx-fab-tips {
      position: fixed;
      right: 88px;
      bottom: 30px;
      z-index: 50;
      max-width: 280px;
      pointer-events: none;
    }
    .tpx-fab-tip-btn {
      display: inline-block;
      padding: 9px 14px;
      background: var(--surface-white);
      color: var(--brand-deep);
      border: 1px solid var(--surface-mint-deep);
      border-radius: 14px;
      font: inherit;
      font-size: 12.5px; font-weight: 600;
      line-height: 1.35;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.14), 0 0 0 1px rgba(23, 56, 45, 0.04);
      pointer-events: auto;
      opacity: 0;
      transform: translateY(3px) scale(0.985);
      filter: blur(0.4px);
      /* Slow ease-in-out fade so the dim out → swap → dim in feels like a
         natural breath rather than a snap. Opacity + transform + a subtle
         blur all ease together. */
      transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out, filter 0.7s ease-in-out, box-shadow 0.18s ease, background 0.18s ease;
      max-width: 100%;
      /* Avoid the text reflowing and pushing the FAB around — clamp height
         to ~3 lines and ellipsis any longer prompts. */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .tpx-fab-tip-btn.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    .tpx-fab-tip-btn:hover {
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
      box-shadow: 0 14px 28px rgba(23, 56, 45, 0.24);
    }
    /* Tail pointing toward the FAB orb. */
    .tpx-fab-tip-btn::after {
      content: "";
      position: absolute;
      right: -6px; bottom: 16px;
      width: 10px; height: 10px;
      background: inherit;
      border-right: inherit; border-bottom: inherit;
      transform: rotate(-45deg);
      transition: background 0.16s ease, border-color 0.16s ease;
    }
    /* Container needs to be a positioning context so the tail's right:-6px
       computes against the button (not the page). */
    .tpx-fab-tips { display: inline-block; }
    .tpx-fab-tip-btn { position: relative; }
    @media (max-width: 720px) {
      /* On narrow viewports the FAB stays bottom-right but the tip bubble
         would overlap the page content. Hide on phones — the FAB itself
         is enough. */
      .tpx-fab-tips { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-fab-tip-btn { transition: opacity 0.01s linear; }
    }

    /* ----- Chatbot FAB "try one question" popover -----
       For anonymous visitors the FAB now opens a small popover that asks
       for one question, then surfaces a "Sign in to send" CTA which carries
       the typed text through to /login via a `q=` query param. Captures
       intent so the visitor feels their question is preserved across the
       sign-in step. */
    .tpx-fab-popover {
      position: fixed; right: 22px; bottom: 92px;
      z-index: 51;
      width: 340px; max-width: calc(100vw - 44px);
      padding: 18px 18px 16px 18px;
      background: var(--surface-white);
      border: 1px solid var(--surface-mint-deep);
      border-radius: 14px;
      box-shadow: 0 20px 48px rgba(20, 36, 28, 0.22), 0 0 0 1px rgba(23, 56, 45, 0.05);
      display: none;
      transform-origin: bottom right;
    }
    .tpx-fab-popover.is-open {
      display: block;
      animation: tpx-fab-pop 0.18s ease-out;
    }
    @keyframes tpx-fab-pop {
      from { opacity: 0; transform: translateY(8px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .tpx-fab-popover::after {
      content: "";
      position: absolute; right: 18px; bottom: -7px;
      width: 14px; height: 14px;
      background: var(--surface-white);
      border-right: 1px solid var(--surface-mint-deep);
      border-bottom: 1px solid var(--surface-mint-deep);
      transform: rotate(45deg);
    }
    .tpx-fab-popover-head {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 8px;
    }
    .tpx-fab-popover-icon {
      width: 24px; height: 24px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-bg-bright) 100%);
      color: var(--surface-white);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px;
    }
    .tpx-fab-popover-title {
      margin: 0; font-size: 14px; font-weight: 800; color: var(--brand-deep);
    }
    .tpx-fab-popover-close {
      margin-left: auto;
      width: 24px; height: 24px;
      border: none; background: transparent;
      color: var(--ink-muted); font-size: 18px; line-height: 1;
      cursor: pointer; border-radius: 6px;
    }
    .tpx-fab-popover-close:hover { background: var(--surface-pale-cool); color: var(--brand-deep); }
    .tpx-fab-popover-sub {
      margin: 0 0 10px 0;
      font-size: 12.5px; line-height: 1.45; color: var(--ink-slate);
    }
    .tpx-fab-popover textarea {
      width: 100%;
      min-height: 64px; max-height: 140px;
      padding: 10px 12px;
      border: 1px solid var(--border-cool);
      border-radius: 10px;
      font: inherit; font-size: 13.5px; line-height: 1.45;
      color: var(--ink-navy);
      resize: vertical;
      outline: none;
      background: var(--surface-pale-cool);
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    .tpx-fab-popover textarea:focus {
      border-color: var(--positive-border-dark);
      background: var(--surface-white);
      box-shadow: 0 0 0 3px rgba(31, 107, 73, 0.12);
    }
    .tpx-fab-popover-actions {
      display: flex; align-items: center; gap: 8px;
      margin-top: 10px;
    }
    .tpx-fab-popover-submit {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 9px 14px; border-radius: 999px;
      background: var(--brand-deep); color: var(--surface-white);
      font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
      border: none; cursor: pointer; text-decoration: none;
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.22);
      transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .tpx-fab-popover-submit:hover {
      background: var(--brand-deep);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(23, 56, 45, 0.32);
    }
    .tpx-fab-popover-foot {
      margin: 8px 0 0 0;
      font-size: 11px; color: var(--ink-muted); text-align: center;
    }

    /* ----- Related transcripts (public-page teaser) -----
       Unified card layout used by THREE sections: same-channel, Supporting,
       Contrarian. Two-column grid: left = thumbnail + meta rows (channel /
       speaker / date with small icons); right = badge + title + topics row
       + "why" line. Same proportions across sections so the eye reads them
       as one consistent component. */
    .tpx-related-list {
      display: flex; flex-direction: column; gap: 10px;
    }
    .tpx-related-card {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 12px;
      padding: 12px; border-radius: 12px;
      background: var(--surface-white); border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 4px 12px rgba(20, 36, 28, 0.05);
      text-decoration: none; color: inherit;
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
      position: relative; overflow: hidden;
    }
    .tpx-related-card:hover,
    .tpx-related-card:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(20, 36, 28, 0.12);
      border-color: var(--surface-mint-deep);
      outline: none;
    }
    .tpx-related-left {
      display: flex; flex-direction: column; gap: 6px;
      min-width: 0;
    }
    .tpx-related-thumb {
      width: 120px; height: 68px;
      aspect-ratio: 16/9;
      object-fit: cover; border-radius: 8px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      flex-shrink: 0;
    }
    .tpx-related-thumb-fallback {
      display: flex; align-items: center; justify-content: center; color: var(--ink-cool-grey);
    }
    .tpx-related-thumb-fallback svg { width: 28px; height: 28px; }
    /* Meta rows: icon + truncated label. Kept very compact so each card
       stays balanced against the body column on the right. */
    .tpx-related-meta-row {
      display: flex; align-items: center; gap: 4px;
      font-size: 10px; color: var(--ink-muted);
      line-height: 1.25;
      min-width: 0;
    }
    .tpx-related-meta-row svg {
      width: 10px; height: 10px;
      flex-shrink: 0;
      opacity: 0.75;
    }
    .tpx-related-meta-text {
      min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tpx-related-body {
      display: flex; flex-direction: column; gap: 4px;
      min-width: 0; justify-content: flex-start;
      /* Reserve space at top-right for the absolute-positioned AI-star
         affordance so the title doesn't run under it (30px button +
         10px offset + a little breathing room). */
      padding-right: 44px;
    }
    /* AI-star affordance positioned at the top-right of each related card. */
    .tpx-related-aistar {
      position: absolute;
      top: 10px; right: 10px;
      z-index: 2;
    }
    /* Match the asset-card behavior: hovering anywhere on the transcript
       card lights up the AI-star and triggers the same slow pulse, so it
       reads as the card's primary action. */
    .tpx-related-card:hover .tpx-related-aistar,
    .tpx-related-card:focus-within .tpx-related-aistar {
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
      animation: tpx-aistar-pulse 1.8s ease-in-out infinite;
    }
    .tpx-related-title {
      margin: 0; font-size: 17.5px; font-weight: 800; color: var(--brand-deep);
      line-height: 1.25;
      letter-spacing: -0.005em;
      display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tpx-related-meta {
      margin: 0; font-size: 12px; color: var(--ink-muted);
    }
    /* Combined topics + assets row. Asset icons sit on the SAME line as
       the topic chips so the card stays compact. Topic chips that would
       duplicate an already-shown asset icon (e.g. "Bitcoin" when ₿ is
       already displayed) are filtered out server-side in the macro. */
    .tpx-related-tags {
      display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
      margin: 2px 0 0 0;
    }
    .tpx-related-topic-chip {
      /* inline-block (not inline-flex) so ::first-letter applies — the
         pseudo-element doesn't work on flex containers. */
      display: inline-block;
      padding: 2px 8px; border-radius: 999px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      color: var(--positive-text-deep);
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.01em;
      max-width: 160px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      vertical-align: middle;
      line-height: 1.35;
    }
    /* Capitalize the first letter of each topic chip so labels like
       "microstrategy" read as "Microstrategy". */
    .tpx-related-topic-chip::first-letter {
      text-transform: uppercase;
    }
    .tpx-related-tags .asset-icon-inline {
      width: 18px; height: 18px;
      flex-shrink: 0;
    }
    /* Wrapper holds the `title` attribute so hovering an asset icon shows
       the asset name in a native tooltip. cursor: help signals the hint
       is informational. */
    .tpx-asset-icon-wrap {
      display: inline-flex; align-items: center;
      cursor: help;
    }
    /* ----- Relationship badge + "why match" line on Supporting / Contrarian
       transcript cards. Stays subordinate to the title (smaller type, lower
       contrast) so the card still reads as "go to this transcript" first. */
    .tpx-related-badge {
      display: inline-flex; align-items: center;
      align-self: flex-start;
      padding: 2px 8px; border-radius: 999px;
      font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      background: var(--surface-pale-cool); color: var(--positive-border-dark); border: 1px solid var(--surface-mint-deep);
      margin: 0 0 2px 0;
    }
    .tpx-related-badge[data-tone="contrarian"] {
      background: var(--surface-warm-warning); color: var(--danger-text-deep); border-color: var(--danger-border-soft);
    }
    .tpx-related-badge[data-tone="related"] {
      background: var(--surface-pale-cool); color: var(--ink-navy); border-color: var(--border-cool);
    }
    .tpx-related-why {
      margin: 3px 0 0 0;
      font-size: 10.5px; line-height: 1.4; color: var(--ink-muted);
      font-style: italic;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
      white-space: normal;
      cursor: help;
      max-width: 85%;
      text-align: justify; text-wrap: pretty; -webkit-hyphens: auto;
      hyphens: auto;
    }
    /* Label uses the SAME font as the body — italic, same size — just a
       slightly bolder weight + darker color so "Why similar:" reads as a
       lead-in rather than a different visual treatment. */
    .tpx-related-why strong {
      font-style: italic;
      font-weight: 700;
      color: var(--positive-text-deep);
      font-size: inherit;
      letter-spacing: 0;
      text-transform: none;
      margin-right: 4px;
    }
    /* Section-explanation paragraph under Supporting/Contrarian kickers —
       quiet, single-line guidance. */
    .tpx-section-explain {
      margin: -2px 0 10px 0;
      font-size: 13px; line-height: 1.4; color: var(--ink-slate);
    }
    /* Gated variant — blurred + sign-in overlay. */
    .tpx-related-card-gated { cursor: pointer; }
    .tpx-related-card-gated-body {
      display: flex; gap: 12px; align-items: stretch;
      width: 100%;
      filter: blur(5px); -webkit-filter: blur(5px);
      pointer-events: none; user-select: none;
      opacity: 0.62;
    }
    .tpx-related-card-gated-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
      z-index: 3;
    }
    .tpx-related-gated-icon {
      font-size: 18px;
      filter: drop-shadow(0 2px 4px rgba(23, 56, 45, 0.35));
    }
    .tpx-related-gated-text {
      padding: 6px 14px;
      background: var(--brand-deep); color: var(--surface-white);
      border-radius: 999px;
      font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      box-shadow: 0 6px 14px rgba(23, 56, 45, 0.32);
    }
    @media (prefers-reduced-motion: reduce) {
      .tpx-related-card { transition: none; }
      .tpx-related-card:hover, .tpx-related-card:focus-visible { transform: none; }
    }

    .tpx-empty {
      padding: 22px; border-radius: 12px; background: var(--surface-white);
      border: 1px dashed var(--border-pale);
      color: var(--ink-muted); font-size: 14px;
    }

    /* ----- Value proposition sentence under hero -----
       One editorial-body line that sets expectations BEFORE the visitor
       hits any gated content. Reads as a calm description of what the page
       delivers, not a marketing tagline. */
    .tpx-valueprop {
      margin: 4px 0 26px 0;
      padding: 14px 18px;
      background: var(--surface-white);
      border-left: 3px solid var(--positive-border-dark);
      border-radius: 0 10px 10px 0;
      color: var(--positive-text-deep);
      font-size: 14.5px; line-height: 1.6;
      box-shadow: 0 2px 8px rgba(20, 36, 28, 0.04);
    }

    /* ----- Unified "unlock" teaser card -----
       Replaces the repeated blurred-card walls. ONE compact card per gated
       section: lock icon, context-specific headline, one-line subtext, and
       a primary CTA button. Used by claims, assets, Q&A, scores, related.
       Visual language matches the footer CTA: green-tinted background,
       soft border, primary-action button. Padding/typography tuned down
       so the recurring unlock cards don't overpower the analysis sections
       they're nested between. */
    .tpx-unlock {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-mint) 100%);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 3px 10px rgba(20, 36, 28, 0.05);
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: inherit;
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .tpx-unlock:hover, .tpx-unlock:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.10);
      border-color: var(--positive-border-dark);
      outline: none;
    }
    .tpx-unlock-icon {
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 999px;
      background: var(--surface-white);
      border: 1px solid var(--surface-mint-deep);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: var(--brand-deep);
      box-shadow: 0 2px 6px rgba(20, 36, 28, 0.05);
    }
    .tpx-unlock-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .tpx-unlock-title {
      margin: 0; font-size: 13.5px; font-weight: 800; color: var(--brand-deep);
      line-height: 1.3;
    }
    .tpx-unlock-sub {
      margin: 0; font-size: 12.5px; color: var(--positive-text-deep); line-height: 1.45;
    }
    .tpx-unlock-btn {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 999px;
      background: var(--brand-deep); color: var(--surface-white);
      font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(23, 56, 45, 0.18);
      transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .tpx-unlock:hover .tpx-unlock-btn {
      background: var(--brand-deep);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(23, 56, 45, 0.28);
    }
    @media (max-width: 720px) {
      .tpx-unlock { flex-direction: column; align-items: stretch; text-align: left; gap: 8px; }
      .tpx-unlock-icon { align-self: flex-start; }
      .tpx-unlock-btn { align-self: flex-start; }
    }

    /* ----- Rail lock/free markers -----
       The rail communicates which sections are free vs require signup. A
       subtle padlock glyph on the right of the link, not loud — informative
       rather than salesy. */
    .tpx-rail-link-locked::after {
      content: "🔒";
      margin-left: auto;
      font-size: 10.5px;
      opacity: 0.8;
    }

    /* ----- Mobile horizontal chip-strip rail -----
       Below the rail breakpoint the desktop sidebar collapses out. Replace
       it with a sticky horizontal chip strip directly under the hero so
       navigation + free/locked communication isn't lost on mobile. */
    .tpx-rail-mobile {
      display: none;
      margin: 4px -20px 22px -20px;
      padding: 8px 16px;
      background: var(--surface-white);
      border-top: 1px solid var(--surface-mint-deep);
      border-bottom: 1px solid var(--surface-mint-deep);
      box-shadow: 0 4px 10px rgba(20, 36, 28, 0.05);
      position: sticky; top: 0; z-index: 40;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .tpx-rail-mobile::-webkit-scrollbar { display: none; }
    .tpx-rail-mobile-track {
      display: inline-flex; gap: 6px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .tpx-rail-chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 7px 12px; border-radius: 999px;
      background: var(--surface-pale-cool); border: 1px solid var(--border-cool);
      color: var(--positive-text-deep); font-size: 12px; font-weight: 700;
      letter-spacing: 0.02em;
      text-decoration: none;
      flex-shrink: 0;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .tpx-rail-chip.is-active {
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
    }
    .tpx-rail-chip-locked::after {
      content: "🔒"; font-size: 9.5px; opacity: 0.75;
    }
    .tpx-rail-chip-cta {
      background: var(--brand-deep); color: var(--surface-white); border-color: var(--brand-deep);
      font-weight: 800;
    }
    .tpx-rail-chip-cta::after {
      content: "✦"; font-size: 10px; opacity: 0.95;
    }
    @media (max-width: 880px) {
      .tpx-rail-mobile { display: block; }
    }

    /* ----- Scores: paired teaser tile + locked-rest card ----- */
    .tpx-scores-pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 720px) {
      .tpx-scores-pair { grid-template-columns: 1fr; }
    }
    .tpx-score-teaser {
      padding: 16px 14px; border-radius: 12px;
      background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 4px 14px rgba(20, 36, 28, 0.06);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      text-align: center;
    }
    .tpx-score-teaser-band {
      font-size: 26px; font-weight: 900; color: var(--positive-border-dark);
      letter-spacing: -0.01em;
    }
    .tpx-score-teaser-band[data-band="Medium"] { color: var(--gold-accent); }
    .tpx-score-teaser-band[data-band="Low"] { color: var(--rust-bright); }
    .tpx-score-teaser-label {
      font-size: 10px; font-weight: 800; color: var(--ink-green-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .tpx-score-teaser-note {
      font-size: 11px; color: var(--ink-muted); margin-top: 4px;
    }
    .tpx-score-locked {
      /* Variant of .tpx-unlock layout tuned to sit beside the teaser tile.
         Same trimmed padding/typography as .tpx-unlock so the section doesn't
         feel heavier than the surrounding analysis. */
      margin-top: 0;
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-mint) 100%);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 3px 10px rgba(20, 36, 28, 0.05);
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: inherit;
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }
    .tpx-score-locked:hover, .tpx-score-locked:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(20, 36, 28, 0.10);
      border-color: var(--positive-border-dark);
      outline: none;
    }
    .tpx-score-locked-labels {
      display: flex; flex-wrap: wrap; gap: 5px;
      margin-top: 4px;
    }
    .tpx-score-locked-chip {
      display: inline-flex; align-items: center;
      padding: 2px 9px; border-radius: 999px;
      background: var(--surface-white); border: 1px solid var(--surface-mint-deep);
      color: var(--positive-text-deep); font-size: 10px; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* ----- "What you unlock" recap card -----
       Sits above the footer CTA for anonymous visitors. Bulleted recap of
       everything they get by signing up. Same green palette so it reads as
       part of the same conversion moment. */
    .tpx-unlock-recap {
      margin: 40px 0 0 0;
      padding: 28px 30px;
      border-radius: 16px;
      background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-mint) 100%);
      border: 1px solid var(--surface-mint-deep);
      box-shadow: 0 10px 28px rgba(20, 36, 28, 0.08);
    }
    .tpx-unlock-recap-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    }
    .tpx-unlock-recap-icon {
      width: 36px; height: 36px;
      border-radius: 999px; background: var(--brand-deep); color: var(--surface-white);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 16px;
    }
    .tpx-unlock-recap-title {
      margin: 0; font-size: 20px; font-weight: 900; color: var(--brand-deep);
      letter-spacing: -0.01em;
    }
    .tpx-unlock-recap-body {
      margin: 0 0 16px 0;
      font-size: 14.5px; line-height: 1.6;
      color: var(--positive-text-deep);
    }
    .tpx-unlock-recap ul {
      margin: 0 0 18px 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 22px;
    }
    @media (max-width: 720px) {
      .tpx-unlock-recap ul { grid-template-columns: 1fr; }
    }
    .tpx-unlock-recap li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 14px; line-height: 1.5; color: var(--positive-text-deep);
    }
    .tpx-unlock-recap li::before {
      content: "✓";
      flex-shrink: 0;
      width: 20px; height: 20px;
      border-radius: 999px;
      background: var(--positive-border-dark);
      color: var(--surface-white);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 900;
      margin-top: 1px;
    }
    .tpx-brand {
      text-align: center;
      margin-top: 22px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-muted);
    }

    /* ---- Top bar (Phase 15.6.1) ----------------------------------
       Slim landing-style nav so anonymous visitors can get to the
       marketing page (logo + "How it works") and the sign-in path.
       Matches the .login-nav language: warm cream backdrop, blurred,
       sticky at top. Brand glyph + wordmark use the marketing tokens
       (--brand-deep / --gold-bright / --brand-bronze / --font-serif)
       that landing.css declares. */
    .tpx-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 14px 40px;
      background: rgba(250, 245, 234, 0.92);
      border-bottom: 1px solid var(--border-warm);
      backdrop-filter: blur(8px);
      position: sticky;
      top: 0;
      z-index: 60;
      font-family: var(--font-ui, "Inter Tight", -apple-system, sans-serif);
    }
    .tpx-topbar-wordmark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--ink-navy);
    }
    .tpx-topbar-glyph {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: var(--brand-deep);
      color: var(--gold-bright);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif, Georgia, serif);
      font-weight: 600;
      font-size: 14px;
      font-style: italic;
      letter-spacing: -0.02em;
    }
    .tpx-topbar-name {
      font-weight: 600;
      letter-spacing: -0.005em;
      font-size: 15px;
    }
    .tpx-topbar-name em {
      font-style: normal;
      color: var(--brand-bronze);
    }
    .tpx-topbar-nav {
      display: flex;
      gap: 24px;
      font-size: 13.5px;
      color: var(--ink-slate);
    }
    .tpx-topbar-nav a {
      color: inherit;
      text-decoration: none;
      transition: color .12s;
    }
    .tpx-topbar-nav a:hover { color: var(--ink-navy); }
    .tpx-topbar-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .tpx-topbar-signin {
      color: var(--ink-slate);
      font-size: 13.5px;
      text-decoration: none;
      opacity: 0.8;
    }
    .tpx-topbar-signin:hover { opacity: 1; }
    .tpx-topbar-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--brand-deep);
      color: var(--gold-bright);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.005em;
      text-decoration: none;
      transition: background .12s;
    }
    .tpx-topbar-cta:hover {
      background: var(--brand-deep-hover, var(--brand-deep-hover));
    }
    @media (max-width: 720px) {
      .tpx-topbar { padding: 12px 16px; gap: 12px; }
      .tpx-topbar-nav { display: none; }
      .tpx-topbar-signin { display: none; }
    }