/* HubDB use-case pages — from design prototype */
:root {
    --primary:   #0E6EA6;
    --primary-dk:#0B5483;
    --secondary: #4FB6EC;
    --green:     #25D366;
    --green-dk:  #128C7E;
    --hubspot:   #FF7A59;

    /* glyph palette pulled from playbook legend */
    --node-trigger:  #7C5CFF;
    --node-trigger-tint: #EFEAFF;
    --node-wa:       #25D366;
    --node-wa-tint:  #E7F8EC;
    --node-email:    #FF6F61;
    --node-email-tint:#FFEEEC;
    --node-delay:    #64748B;
    --node-delay-tint:#EEF2F7;
    --node-branch:   #F2C94C;
    --node-branch-tint:#FFF6D9;
    --node-goal:     #0F172A;
    --node-goal-tint:#E2E8F0;

    --ink-900: #0F172A;
    --ink-800: #1F2937;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748B;
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;
    --ink-200: #E2E8F0;
    --ink-100: #F1F5F9;
    --ink-050: #F8FAFC;

    --sky-tint:  #F1F9FD;
    --mint-tint: #EEFBF3;
    --paper:     #FFFFFF;

    --display:  "Poppins", system-ui, sans-serif;
    --serif:    "Fraunces", "Times New Roman", Georgia, serif;
    --body:     "Inter", system-ui, sans-serif;
    --mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }

  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
  .wrap-narrow { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

  /* ───── NAV (matches Home + Comparison) ───── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ink-200);
  }
  .nav-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
  .nav-logo { display: flex; align-items: center; gap: 10px; }
  .nav-logo svg { height: 28px; width: auto; }
  .nav-logo b { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.025em; color: var(--ink-900); }
  .nav-links { display: flex; gap: 4px; margin-left: 36px; }
  .nav-links a { font-size: 14.5px; color: var(--ink-700); padding: 8px 14px; border-radius: 8px; font-weight: 500; }
  .nav-links a:hover { background: var(--ink-100); color: var(--ink-900); }
  .nav-links a.is-current { color: var(--primary); }
  .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .nav-lang { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-500); padding: 6px 10px; border: 1px solid var(--ink-200); border-radius: 99px; }
  .nav-login { font-size: 14.5px; color: var(--ink-700); font-weight: 500; padding: 8px 14px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--body); font-weight: 600; font-size: 14.5px;
    padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
    letter-spacing: -.005em; cursor: pointer;
    transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
    line-height: 1; white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(14,110,166,.5); }
  .btn-primary:hover { background: var(--primary-dk); }
  .btn-secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
  .btn-secondary:hover { background: var(--sky-tint); }
  .btn-wa { background: var(--green); color: #fff; }
  .btn-wa:hover { background: var(--green-dk); }
  .btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-300); }
  .btn-ghost:hover { background: var(--ink-100); }
  .btn-lg { padding: 16px 28px; font-size: 15.5px; border-radius: 14px; }

  /* "Build it in Flowella now" — magic CTA */
  .btn-build {
    background: linear-gradient(135deg, #0E6EA6 0%, #4FB6EC 60%, #25D366 130%);
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(14,110,166,.55), inset 0 1px 0 rgba(255,255,255,.18);
    border: 0;
    position: relative;
    overflow: hidden;
  }
  .btn-build::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s;
  }
  .btn-build:hover::after { transform: translateX(100%); }
  .btn-build .spark {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ───── HEADER STRIP ───── */
  .det-head {
    position: relative;
    background:
      radial-gradient(900px 460px at 88% 12%, rgba(79,182,236,.22), transparent 70%),
      radial-gradient(700px 540px at 8% 95%, rgba(37,211,102,.14), transparent 70%),
      linear-gradient(160deg, #0A1024 0%, #0E2A4A 50%, #0E6EA6 100%);
    color: #fff;
    overflow: hidden;
    padding: 36px 0 60px;
  }
  .det-head::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
  }
  .det-head-bg-word {
    position: absolute;
    bottom: -60px; right: -10px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 320px;
    line-height: .8;
    letter-spacing: -.06em;
    color: rgba(255,255,255,.045);
    pointer-events: none;
    user-select: none;
  }
  .det-head-inner { position: relative; z-index: 1; }

  .crumbs {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    margin-bottom: 28px;
  }
  .crumbs a { color: rgba(255,255,255,.85); }
  .crumbs a:hover { color: var(--secondary); }
  .crumbs span.div { opacity: .35; }
  .crumbs span.cur { color: rgba(255,255,255,.95); }

  .det-head-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: end;
  }
  .det-head h1 {
    font-family: var(--display);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0 0 18px;
    max-width: 18ch;
    color: #fff;
  }
  .det-head h1 i,
  .det-head h1 em.it {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--secondary);
    letter-spacing: -.025em;
  }
  .det-head .lede {
    font-size: 18px; line-height: 1.55;
    color: rgba(255,255,255,.78);
    margin: 0 0 28px;
    max-width: 56ch;
  }
  .det-head .lede b { color: #fff; font-weight: 600; }
  .det-head .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  /* taxonomy chips row */
  .tax-row {
    display: flex; flex-wrap: wrap; gap: 18px 32px;
    margin-top: 48px;
    margin-bottom: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .tax-group {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .tax-group-label {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
  }
  .tax-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 12.5px;
    color: #fff;
    font-weight: 500;
    transition: background .15s, border-color .15s;
  }
  .tax-chip:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
  .tax-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
  .tax-chip .ic {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
  }
  .tax-chip .ic svg { width: 100%; height: 100%; display: block; }
  .tax-chip .plat-mark {
    width: 18px; height: 18px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    flex: 0 0 18px;
    font-family: var(--display); font-weight: 700; font-size: 10px;
    letter-spacing: -.02em;
  }
  /* Brand logo image inside a chip — small white-bg chip so dark and
     transparent logos read against the navy hero AND the white listing card. */
  .tax-chip-logo {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
    display: block;
  }
  .tax-chip.has-logo { padding-left: 6px; }
  /* On the listing page chips sit inside a white card, so swap to ink
     foreground / subtle border to stay readable. */
  .uc-filter .tax-chip {
    background: var(--ink-100);
    border-color: var(--ink-200);
    color: var(--ink-700);
  }
  .uc-filter .tax-chip:hover {
    background: var(--ink-200);
    border-color: var(--ink-300);
    color: var(--ink-900);
  }
  .uc-filter .tax-chip-logo { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); }

  /* Case study card: when there's no logo column, collapse the
     2-column grid so the quote spans the full width instead of
     sitting in the right-hand 1.6fr cell with an empty 1fr gap. */
  .cs-card.cs-card--no-logo .cs-card-grid { grid-template-columns: 1fr; }

  /* meta card on the right of header */
  .det-meta-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 22px 24px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .det-meta-card h4 {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    margin: 0;
  }
  .det-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .det-meta-row .cell {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .det-meta-row .cell span {
    display: block;
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
    margin-bottom: 6px;
  }
  .det-meta-row .cell b {
    font-family: var(--display); font-weight: 600;
    font-size: 14px; color: #fff;
    letter-spacing: -.005em;
  }
  .det-meta-flowella {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(79,182,236,.18), rgba(37,211,102,.16));
    border: 1px solid rgba(79,182,236,.32);
    border-radius: 12px;
    font-size: 13px; color: #fff;
    font-weight: 500;
  }
  .det-meta-flowella svg { flex: 0 0 22px; }

  /* stats strip below hero */
  .det-stats {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 20px 24px;
  }
  .det-stat b {
    display: block;
    font-family: var(--display);
    font-weight: 700; font-size: 36px; line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 6px;
  }
  .det-stat:nth-child(1) b { color: var(--secondary); }
  .det-stat:nth-child(2) b { color: var(--green); }
  .det-stat:nth-child(3) b { color: #FFD66E; }
  .det-stat span {
    font-size: 12.5px; color: rgba(255,255,255,.7);
    line-height: 1.4;
    display: block;
  }

  /* ───── SECTION SCAFFOLD ───── */
  section.s { padding: 100px 0; position: relative; }
  section.s.tight { padding: 64px 0; }
  section.s.tint { background: var(--ink-050); }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 18px;
  }
  .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--primary); }
  .h-display {
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.0;
    letter-spacing: -.025em;
    color: var(--primary);
    margin: 0 0 20px;
    max-width: 24ch;
  }
  .h-display i {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    color: var(--primary-dk); letter-spacing: -.025em;
  }
  .lede {
    font-size: 17px; line-height: 1.6;
    color: var(--ink-700); max-width: 64ch; margin: 0;
  }
  .lede b { color: var(--ink-900); font-weight: 600; }

  .blueprint-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 48px; flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .blueprint-head-text { flex: 1 1 480px; min-width: 0; }
  .blueprint-head-text h2 { margin-bottom: 16px; }
  .blueprint-head-text .lede { margin-bottom: 0; }
  .blueprint-head-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    flex: 0 0 auto;
    padding-bottom: 6px;
  }
  @media (max-width: 880px) {
    .blueprint-head { gap: 24px; }
    .blueprint-head-ctas { padding-bottom: 0; }
  }

  /* ───── DEEP DIVE / SEO COPY ───── */
  .deep-dive { padding: 110px 0; }
  .deep-head { max-width: 78ch; margin-bottom: 56px; }
  .deep-head .h-display { margin-bottom: 22px; }
  .deep-head .lede { font-size: 18px; max-width: 68ch; }

  .deep-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    align-items: start;
  }
  .deep-col {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 32px 30px 30px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .deep-h3 {
    display: flex; align-items: baseline; gap: 14px;
    font-family: var(--display); font-weight: 700;
    font-size: 22px; line-height: 1.2; letter-spacing: -.015em;
    color: var(--ink-900);
    margin: 0 0 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ink-100);
  }
  .deep-num {
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    color: var(--primary); font-weight: 600;
    flex: 0 0 auto;
  }
  .deep-col p {
    margin: 0;
    color: var(--ink-700);
    font-size: 14.5px; line-height: 1.65;
  }
  .deep-col p b { color: var(--ink-900); font-weight: 600; }
  .deep-col p code,
  .deep-list code {
    font-family: var(--mono); font-size: 12px;
    background: var(--ink-100); color: var(--ink-800);
    padding: 1px 6px; border-radius: 4px;
  }
  .deep-list {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-direction: column; gap: 11px;
  }
  .deep-list li {
    position: relative; padding-left: 22px;
    font-size: 14px; line-height: 1.55;
    color: var(--ink-700);
  }
  .deep-list li::before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 10px; height: 1px;
    background: var(--primary);
  }
  .deep-list li b { color: var(--ink-900); font-weight: 600; }

  .deep-footnote {
    margin-top: 44px;
    padding: 26px 32px;
    border-left: 3px solid var(--primary);
    background: #fff;
    border-radius: 0 14px 14px 0;
    max-width: 92ch;
  }
  .deep-footnote p {
    margin: 0;
    font-size: 15.5px; line-height: 1.65;
    color: var(--ink-700);
  }
  .deep-footnote p b { color: var(--ink-900); font-weight: 600; }

  @media (max-width: 1080px) {
    .deep-grid { grid-template-columns: 1fr; gap: 22px; }
  }

  /* ───── DIAGRAM SECTION ───── */
  .diagram-shell {
    margin-top: 42px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 26px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(15,23,42,.18);
  }
  .diagram-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ink-200);
    background: var(--ink-050);
    flex-wrap: wrap;
  }
  .diagram-bar .dots { display: flex; gap: 6px; }
  .diagram-bar .dots span { width: 10px; height: 10px; border-radius: 50%; }
  .diagram-bar .dots span:nth-child(1){background:#FF6058}
  .diagram-bar .dots span:nth-child(2){background:#FFC130}
  .diagram-bar .dots span:nth-child(3){background:#28C941}
  .diagram-bar .name {
    font-family: var(--mono); font-size: 12px; color: var(--ink-700);
    background: #fff; border: 1px solid var(--ink-200);
    padding: 6px 12px; border-radius: 6px;
  }
  .diagram-bar .name b { color: var(--ink-900); }
  .diagram-bar .legend {
    margin-left: auto;
    display: flex; gap: 12px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--ink-600);
  }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); letter-spacing: .04em; }
  .legend-dot { width: 10px; height: 10px; border-radius: 3px; }

  .rf-wrap { width: 100%; height: 880px; position: relative; background:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
    background-color: #FBFCFE;
  }
  .rf-wrap::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
  }

  /* react flow custom nodes */
  .rf-node {
    width: 248px;
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: 14px;
    padding: 14px 16px 14px;
    box-shadow: 0 6px 14px -8px rgba(15,23,42,.18);
    font-family: var(--body);
    cursor: default;
    transition: box-shadow .15s, transform .15s, border-color .15s;
  }
  .rf-node-plats {
    display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap;
  }
  .rf-node-plat {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
    font-weight: 600;
  }
  .rf-node-plat svg { width: 10px; height: 10px; flex: 0 0 10px; }
  .rf-node:hover { box-shadow: 0 14px 30px -10px rgba(15,23,42,.22); transform: translateY(-1px); }
  .rf-node-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase;
    padding: 4px 8px; border-radius: 99px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .rf-node-title {
    font-family: var(--display); font-weight: 600; font-size: 14.5px;
    line-height: 1.25; letter-spacing: -.01em;
    color: var(--ink-900);
    margin-bottom: 4px;
  }
  .rf-node-sub {
    font-size: 12px; color: var(--ink-500); line-height: 1.4;
    font-family: var(--mono);
  }

  .rf-node.trigger { border-color: var(--node-trigger); border-top-width: 3px; }
  .rf-node.trigger .rf-node-tag { background: var(--node-trigger-tint); color: var(--node-trigger); }
  .rf-node.wa { border-color: var(--node-wa); border-top-width: 3px; }
  .rf-node.wa .rf-node-tag { background: var(--node-wa-tint); color: var(--green-dk); }
  .rf-node.email { border-color: var(--node-email); border-top-width: 3px; }
  .rf-node.email .rf-node-tag { background: var(--node-email-tint); color: var(--node-email); }
  .rf-node.delay { border-color: var(--node-delay); border-top-width: 3px; border-style: dashed; }
  .rf-node.delay .rf-node-tag { background: var(--node-delay-tint); color: var(--node-delay); }
  .rf-node.branch { border-color: var(--node-branch); border-top-width: 3px; }
  .rf-node.branch .rf-node-tag { background: var(--node-branch-tint); color: #92660B; }
  .rf-node.goal { border-color: var(--node-goal); border-top-width: 3px; background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%); }
  .rf-node.goal .rf-node-tag { background: var(--node-goal-tint); color: var(--node-goal); }

  .rf-node-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: currentColor;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 700;
    margin-right: 6px;
  }

  /* react-flow handle visual tweaks */
  .react-flow__handle {
    width: 8px; height: 8px;
    background: #fff;
    border: 1.5px solid var(--ink-300);
  }
  .react-flow__edge-path {
    stroke-width: 2;
  }
  .react-flow__edge.animated .react-flow__edge-path {
    stroke-dasharray: 6 4;
    animation: rf-flow 1.4s linear infinite;
  }
  @keyframes rf-flow {
    from { stroke-dashoffset: 20; }
    to   { stroke-dashoffset: 0; }
  }
  .react-flow__edge-text {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .react-flow__edge-textbg {
    fill: #fff;
    stroke: var(--ink-200);
    stroke-width: 1;
  }
  .react-flow__attribution { display: none; }
  .react-flow__background { color: rgba(15,23,42,.05); }

  /* notes column */
  .diagram-notes {
    background: var(--ink-050);
    border-top: 1px solid var(--ink-200);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 36px;
  }
  .note {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
  }
  .note .num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 12px;
  }
  .note h5 {
    margin: 0 0 4px;
    font-family: var(--display); font-weight: 600; font-size: 14.5px;
    color: var(--ink-900);
  }
  .note p {
    margin: 0; font-size: 13.5px; color: var(--ink-700); line-height: 1.5;
  }
  .note p code {
    font-family: var(--mono); font-size: 12px;
    background: #fff; border: 1px solid var(--ink-200);
    padding: 1px 6px; border-radius: 4px;
  }

  /* ───── WHATSAPP TEMPLATES ───── */
  .tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
  }
  .tpl-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .tpl-card-head {
    display: flex; flex-direction: column; gap: 4px;
  }
  .tpl-card-head .id {
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    color: var(--ink-500);
    text-transform: uppercase;
  }
  .tpl-card-head .name {
    font-family: var(--display); font-weight: 600; font-size: 17px;
    letter-spacing: -.01em; color: var(--ink-900);
  }
  .tpl-card-step {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase;
    align-self: flex-start;
    padding: 4px 10px; border-radius: 99px;
    background: var(--sky-tint); color: var(--primary);
  }

  /* WhatsApp phone preview */
  .wa-phone {
    background: #E4DDD4;
    border-radius: 18px;
    padding: 14px 12px;
    background-image:
      radial-gradient(rgba(255,255,255,.5) 1.5px, transparent 1.5px),
      radial-gradient(rgba(0,0,0,.04) 1.5px, transparent 1.5px);
    background-size: 18px 18px, 22px 22px;
    background-position: 0 0, 9px 9px;
    border: 1px solid rgba(0,0,0,.04);
  }
  .wa-msg {
    background: #fff;
    border-radius: 10px 10px 10px 2px;
    padding: 10px 12px 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    max-width: 88%;
    position: relative;
    margin-left: 2px;
  }
  .wa-msg .sender {
    font-size: 11.5px;
    font-weight: 600;
    color: #1F8AC7;
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .wa-msg p {
    margin: 0;
    font-size: 13px;
    color: #111B21;
    line-height: 1.4;
  }
  .wa-msg p + p { margin-top: 6px; }
  .wa-msg .meta {
    display: flex; justify-content: flex-end; gap: 4px;
    margin-top: 4px;
    font-size: 10.5px; color: #667781;
    align-items: center;
  }
  .wa-msg .meta .ticks { color: #53BDEB; font-size: 12px; line-height: 1; }
  .wa-msg .reply-buttons,
  .wa-msg .url-buttons {
    margin-top: 6px;
    border-top: 1px solid #E9EDEF;
    padding-top: 4px;
  }
  .wa-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    padding: 8px 10px;
    color: #00A5F4;
    font-size: 13.5px;
    font-weight: 500;
    border-top: 1px solid #E9EDEF;
  }
  .wa-btn:first-child { border-top: 0; }
  .wa-btn .arrow {
    font-size: 11px;
  }
  .wa-status {
    margin-top: 8px;
    text-align: center;
    font-size: 10.5px;
    color: #667781;
    background: rgba(255,255,255,.55);
    border-radius: 99px;
    padding: 4px 10px;
    display: inline-flex;
    align-self: center;
    margin: 8px auto 0;
  }
  .wa-presence {
    text-align: center;
    margin-top: 6px;
    font-size: 10.5px; color: #667781;
  }
  .tpl-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-600);
    border-top: 1px solid var(--ink-100);
    padding-top: 14px;
  }
  .tpl-meta span { display: block; color: var(--ink-400); margin-bottom: 2px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
  .tpl-meta b { color: var(--ink-900); font-weight: 500; font-size: 12px; }

  /* ───── BULLETS LIST ───── */
  .bullets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 28px;
    margin-top: 32px;
  }
  .bullet {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 14px;
  }
  .bullet .ix {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--mint-tint);
    color: var(--green-dk);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 12px;
  }
  .bullet p { margin: 0; font-size: 14px; color: var(--ink-700); line-height: 1.5; }
  .bullet p b { color: var(--ink-900); font-weight: 600; }

  /* ───── CASE STUDY ───── */
  /* ───── CASE STUDY (dark card carousel) ───── */
  .case-shell {
    margin-top: 56px;
    position: relative;
    padding: 0 56px;
  }
  .case-card {
    background: var(--ink-900);
    border-radius: 28px;
    padding: 56px 64px 52px;
    position: relative;
    box-shadow: 0 30px 60px -30px rgba(11,18,32,.45);
    overflow: hidden;
  }
  .case-card::before {
    /* subtle radial highlight */
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 70% at 0% 0%, rgba(79,182,236,.08) 0%, transparent 55%);
    pointer-events: none;
  }
  .case-card-grid {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: center;
  }
  .case-card-logo {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
  }
  .case-card-logo .case-logo-mark {
    width: 148px; height: 148px;
    border-radius: 50%;
    border: 4px solid var(--green);
    background:
      repeating-linear-gradient(45deg, rgba(37,211,102,.08) 0 8px, transparent 8px 16px),
      rgba(37,211,102,.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    line-height: 1.4;
  }
  .case-card-logo .case-logo-name {
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: rgba(255,255,255,.92);
    letter-spacing: -.015em;
  }
  .case-card-logo .case-logo-loc {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
  }

  .case-card-body { display: flex; flex-direction: column; gap: 22px; }
  .case-quote-mark {
    font-family: var(--serif); font-style: italic;
    font-size: 72px; line-height: .35; color: var(--primary);
    margin-bottom: 4px;
  }
  .case-quote-text {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(22px, 2vw, 30px); line-height: 1.32;
    color: #fff;
    margin: 0;
    letter-spacing: -.005em;
    max-width: 38ch;
  }
  .case-card-author {
    display: flex; align-items: center; gap: 14px;
    margin-top: 12px;
  }
  .case-card-author .case-author-photo {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
      rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
    flex: 0 0 44px;
  }
  .case-card-author .who {
    font-family: var(--display); font-weight: 700; font-size: 15px;
    color: #fff;
    letter-spacing: -.005em;
  }
  .case-card-author .role {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
    margin-top: 2px;
  }
  .case-cta {
    font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--secondary);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
    align-self: flex-start;
  }
  .case-cta span {
    font-family: var(--display); font-size: 16px; letter-spacing: 0;
    transition: transform .15s;
  }
  .case-cta:hover { color: #fff; }
  .case-cta:hover span { transform: translateX(3px); }

  .case-metrics {
    display: flex; gap: 36px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .case-metrics > div { display: flex; flex-direction: column; gap: 4px; }
  .case-metrics b {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    color: var(--secondary);
    letter-spacing: -.02em;
    line-height: 1;
  }
  .case-metrics span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
  }

  .case-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: color .15s, transform .15s;
    padding: 0;
  }
  .case-nav:hover { color: var(--primary-dk); }
  .case-nav-prev { left: 0; }
  .case-nav-next { right: 0; }
  .case-nav-prev:hover { transform: translateY(-50%) translateX(-3px); }
  .case-nav-next:hover { transform: translateY(-50%) translateX(3px); }

  .case-pager {
    display: flex; gap: 8px; justify-content: center;
    margin-top: 28px;
  }
  .case-pager-dot {
    width: 32px; height: 4px; border-radius: 2px;
    background: var(--ink-200);
    transition: background .15s;
  }
  .case-pager-dot.is-active { background: var(--primary); }

  /* ───── RELATED USE CASES + FILTER ───── */
  .uc-filter-wrap {
    display: flex; flex-direction: column; gap: 28px;
  }
  .uc-filter {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 18px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 24px;
    align-items: center;
  }
  .uc-filter-label {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-500);
  }
  .uc-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--ink-200);
    background: #fff;
    font-size: 12.5px;
    color: var(--ink-700);
    cursor: pointer;
    transition: all .15s;
    font-weight: 500;
  }
  .filter-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
  .filter-chip.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
  .filter-chip .ct { font-family: var(--mono); font-size: 10px; opacity: .55; }
  .filter-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
  .filter-chip .ic {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 14px;
  }
  .filter-chip .ic svg { width: 100%; height: 100%; display: block; }
  .filter-chip .fav {
    width: 16px; height: 16px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    flex: 0 0 16px;
  }
  .filter-chip .fav svg { width: 11px; height: 11px; display: block; }
  .filter-chip .fav b {
    font-family: var(--display); font-weight: 800; font-size: 10px;
    line-height: 1; letter-spacing: -.02em;
  }

  /* React Flow Controls polish */
  .react-flow__controls {
    box-shadow: 0 6px 20px -10px rgba(15,23,42,.25) !important;
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid var(--ink-200) !important;
    margin: 0 18px 18px 0 !important;
  }
  .react-flow__controls-button {
    background: #fff !important;
    border-bottom: 1px solid var(--ink-200) !important;
    width: 32px !important; height: 32px !important;
    color: var(--ink-700);
  }
  .react-flow__controls-button:hover {
    background: var(--sky-tint) !important;
    color: var(--primary);
  }
  .react-flow__controls-button svg { fill: currentColor; }

  .uc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .uc-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 18px;
    padding: 22px 22px 20px;
    display: flex; flex-direction: column;
    gap: 10px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: pointer;
  }
  .uc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15,23,42,.18);
    border-color: var(--ink-300);
  }
  .uc-card-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .uc-card-tags span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 7px; border-radius: 99px;
    background: var(--ink-100); color: var(--ink-600);
  }
  .uc-card h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 18px; line-height: 1.2; letter-spacing: -.015em;
    margin: 4px 0 0;
  }
  .uc-card p {
    font-size: 13.5px; line-height: 1.5; color: var(--ink-600); margin: 0;
  }
  .uc-card .more {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--display); font-weight: 600; font-size: 12px;
    color: var(--primary);
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* ───── CTA STRIP ───── */
  .cta-strip {
    background:
      radial-gradient(900px 500px at 100% 0%, rgba(79,182,236,.25), transparent 60%),
      radial-gradient(700px 400px at 0% 100%, rgba(37,211,102,.18), transparent 60%),
      linear-gradient(135deg, #0A1024 0%, #0E2A4A 50%, #0E6EA6 100%);
    color: #fff;
    border-radius: 28px;
    padding: 64px 72px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .cta-strip::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
  }
  .cta-strip h2 {
    position: relative;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.1; letter-spacing: -.03em;
    margin: 0 0 14px; max-width: 22ch;
  }
  .cta-strip h2 i { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--secondary); }
  .cta-strip p {
    position: relative;
    font-size: 16px; line-height: 1.55;
    color: rgba(255,255,255,.75);
    margin: 0 0 22px; max-width: 52ch;
  }
  .cta-strip .ctas { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
  .cta-strip-illus {
    position: relative;
    display: flex; align-items: center; justify-content: center;
  }

  /* ───── FOOTER ───── */
  footer.foot {
    background: var(--ink-900);
    color: rgba(255,255,255,.72);
    padding: 64px 0 32px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  .foot-brand .lockup {
    display: flex; align-items: center; gap: 10px;
    color: #fff;
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: -.025em;
    margin-bottom: 12px;
  }
  .foot-brand .lockup svg { height: 28px; }
  .foot-brand p {
    font-size: 14px; line-height: 1.6; margin: 0;
    max-width: 38ch;
  }
  .foot-col h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    margin: 0 0 14px;
  }
  .foot-col a {
    display: block;
    font-size: 14px; padding: 4px 0;
    color: rgba(255,255,255,.78);
  }
  .foot-col a:hover { color: var(--secondary); }
  .foot-bar {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 18px;
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    color: rgba(255,255,255,.5);
  }

  /* ───── responsive ───── */
  @media (max-width: 1180px) {
    .det-head-grid { grid-template-columns: 1fr; }
    .tpl-grid { grid-template-columns: repeat(2, 1fr); }
    .uc-grid { grid-template-columns: repeat(2, 1fr); }
    .case-grid { grid-template-columns: 1fr; }
    .case-quote { border-right: 0; border-bottom: 1px solid var(--ink-200); padding: 32px; }
    .case-stats { padding: 32px; }
    .cta-strip { grid-template-columns: 1fr; padding: 44px; }
    .cta-strip-illus { display: none; }
    .nav-links { display: none; }
    .diagram-notes { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .wrap, .wrap-narrow { padding: 0 22px; }
    section.s { padding: 64px 0; }
    .tpl-grid { grid-template-columns: 1fr; }
    .uc-grid { grid-template-columns: 1fr; }
    .bullets { grid-template-columns: 1fr; }
    .det-stats { grid-template-columns: 1fr; }
    .uc-filter { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .nav-actions .nav-lang, .nav-login { display: none; }
  }

/* ─────────────────────────────────────────────────────────────────────
 * v2 design additions — blueprint header CTAs, deep-dive header,
 * left-bordered footnote callout, and the dark navy `case-card` shell
 * (circular client-logo mark, READ CASE STUDY link, inline metrics).
 * Mirrors `tmp/design-v2/Use Case - Meeting Booking Workflow.html` so
 * the same markup renders identically against the live theme.
 * ───────────────────────────────────────────────────────────────────── */

  /* CTA buttons used next to the diagram heading — gradient "build" CTA
     and a neutral ghost CTA. `.btn-lg` bumps the standard `.btn` to the
     marketing-page hero size (16/28 padding, 14px radius). */
  .btn-lg { padding: 16px 28px; font-size: 15.5px; border-radius: 14px; }
  .btn-ghost {
    background: transparent;
    color: var(--ink-800);
    border: 1px solid var(--ink-300);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .btn-ghost:hover { background: var(--ink-100); }
  .btn-build {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #0E6EA6 0%, #4FB6EC 60%, #25D366 130%);
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(14,110,166,.55), inset 0 1px 0 rgba(255,255,255,.18);
    border: 0;
    position: relative;
    overflow: hidden;
  }
  .btn-build::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s;
  }
  .btn-build:hover::after { transform: translateX(100%); }
  .btn-build .spark {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Diagram heading row — text on the left, CTAs on the right. Wraps on
     small viewports so the buttons drop below the heading instead of
     overflowing. */
  .blueprint-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin: 8px 0 24px;
  }
  .blueprint-head-text { flex: 1 1 480px; min-width: 0; }
  .blueprint-head-text .diagram-heading h2 { margin-bottom: 16px; }
  .blueprint-head-text .lede { margin-bottom: 0; max-width: 56ch; }
  .blueprint-head-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    flex: 0 0 auto;
    padding-bottom: 6px;
  }
  @media (max-width: 880px) {
    .blueprint-head { gap: 24px; }
    .blueprint-head-ctas { padding-bottom: 0; }
  }

  /* Deep-dive header (above the 3-up grid) — eyebrow + display heading +
     supporting lede. Sits left-aligned with a comfortable measure for the
     italic Fraunces title. */
  .deep-head {
    max-width: 78ch;
    margin: 0 0 56px;
  }
  .deep-head .eyebrow { margin-bottom: 14px; }
  .deep-head .h-display { margin: 0 0 22px; }
  .deep-head p { font-size: 18px; max-width: 68ch; color: var(--ink-700); }
  .deep-head p:last-child { margin-bottom: 0; }

  /* "The meta-point" callout — left-bordered white block that closes out
     the deep dive. Replaces the previous lede-paragraph treatment. */
  .deep-footnote {
    margin-top: 44px;
    padding: 26px 32px;
    border-left: 3px solid var(--primary);
    background: #fff;
    border-radius: 0 14px 14px 0;
    max-width: 92ch;
  }
  .deep-footnote p {
    margin: 0;
    font-size: 15.5px; line-height: 1.65;
    color: var(--ink-700);
  }
  .deep-footnote p + p { margin-top: 12px; }
  .deep-footnote p b { color: var(--ink-900); font-weight: 600; }

  /* ───── Case study (v2 dark navy `case-card`) ───── */
  .case-section .eyebrow { margin-bottom: 14px; }
  .case-section .h-display { margin: 0 0 56px; }

  .case-shell {
    margin-top: 24px;
    position: relative;
    max-width: 1100px;
  }
  .case-card {
    background: var(--ink-900);
    border-radius: 28px;
    padding: 56px 64px 52px;
    position: relative;
    box-shadow: 0 30px 60px -30px rgba(11,18,32,.45);
    overflow: hidden;
  }
  .case-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 70% at 0% 0%, rgba(79,182,236,.08) 0%, transparent 55%);
    pointer-events: none;
  }
  .case-card-grid {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: center;
  }

  .case-card-logo {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
  }
  /* Diagonal-stripe placeholder mark used when no logo URL is supplied —
     this is the "drop client logo here" affordance from the design. */
  .case-card-logo .case-logo-mark {
    width: 148px; height: 148px;
    border-radius: 50%;
    border: 4px solid var(--green);
    background:
      repeating-linear-gradient(45deg, rgba(37,211,102,.08) 0 8px, transparent 8px 16px),
      rgba(37,211,102,.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    line-height: 1.4;
  }
  /* Real client logo — same circular footprint, white plate so coloured
     marks don't fight the navy card. */
  .case-card-logo .case-logo-img {
    width: 148px; height: 148px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
  .case-card-logo .case-logo-name {
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: rgba(255,255,255,.92);
    letter-spacing: -.015em;
  }
  .case-card-logo .case-logo-loc {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
  }

  .case-card-body { display: flex; flex-direction: column; gap: 22px; }
  .case-quote-mark {
    font-family: var(--serif); font-style: italic;
    font-size: 72px; line-height: .35; color: var(--primary);
    margin-bottom: 4px;
  }
  .case-quote-text {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(22px, 2vw, 30px); line-height: 1.32;
    color: #fff;
    margin: 0;
    letter-spacing: -.005em;
    max-width: 38ch;
  }
  .case-quote-text p { margin: 0 0 14px; }
  .case-quote-text p:last-child { margin-bottom: 0; }

  .case-card-author {
    display: flex; align-items: center; gap: 14px;
    margin-top: 12px;
  }
  .case-card-author .case-author-photo {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
      rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
    flex: 0 0 44px;
    object-fit: cover;
  }
  .case-card-author .who {
    font-family: var(--display); font-weight: 700; font-size: 15px;
    color: #fff;
    letter-spacing: -.005em;
  }
  .case-card-author .role {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
    margin-top: 2px;
  }
  .case-cta {
    font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--secondary);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
    align-self: flex-start;
  }
  .case-cta span {
    font-family: var(--display); font-size: 16px; letter-spacing: 0;
    transition: transform .15s;
  }
  .case-cta:hover { color: #fff; }
  .case-cta:hover span { transform: translateX(3px); }

  .case-metrics {
    display: flex; gap: 36px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap;
  }
  .case-metrics > div { display: flex; flex-direction: column; gap: 4px; }
  .case-metrics b {
    font-family: var(--display); font-weight: 700; font-size: 22px;
    color: var(--secondary);
    letter-spacing: -.02em;
    line-height: 1;
  }
  .case-metrics span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
  }

  /* The v2 design's `.uc-filter-wrap` / `.uc-filter` / `.filter-chip`
     selectors already live above (lines ~977-1029), pulled in 1:1 from
     the design HTML. The detail page and the listing both consume them
     directly — no per-page overrides needed here. The only addition is
     the `<img>` inside `.fav` (we render real brand SVGs instead of the
     hardcoded glyph fonts the design used) so the image fills the tile
     cleanly. */
  .filter-chip .fav { overflow: hidden; }
  .filter-chip .fav img { display: block; }

  @media (max-width: 880px) {
    .case-card { padding: 40px 32px; }
    .case-card-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .case-card-logo { flex-direction: row; gap: 16px; text-align: left; }
    .case-card-logo .case-logo-mark,
    .case-card-logo .case-logo-img { width: 96px; height: 96px; }
    .case-quote-text { font-size: 22px; }
    .case-metrics { gap: 24px; }
  }

  /* Related-card chip strip — small monospace pills at the top of every
     card on the "Keep exploring" grid (e.g. "HUBSPOT · SALES · B2B SAAS").
     Plain visual treatment; clicks fall through to the card link. */
  .uc-card-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 6px;
  }
  .uc-card-tags span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 7px; border-radius: 99px;
    background: var(--ink-100); color: var(--ink-600);
  }

  /* Bottom CTA strip — dark navy gradient block with a soft dot pattern
     overlay. Headline + body on the left, CTA buttons below. The right
     column is reserved for an optional illustration; on this template
     we keep it text-only and the grid collapses to single column when
     no illustration is present. */
  .cta-strip {
    background:
      radial-gradient(900px 500px at 100% 0%, rgba(79,182,236,.25), transparent 60%),
      radial-gradient(700px 400px at 0% 100%, rgba(37,211,102,.18), transparent 60%),
      linear-gradient(135deg, #0A1024 0%, #0E2A4A 50%, #0E6EA6 100%);
    color: #fff;
    border-radius: 28px;
    padding: 64px 72px;
    position: relative;
    overflow: hidden;
  }
  .cta-strip::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
  }
  .cta-strip > div { position: relative; }
  .cta-strip .eyebrow { margin-bottom: 14px; }
  .cta-strip h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.1; letter-spacing: -.03em;
    margin: 0 0 14px; max-width: 22ch;
    color: #fff;
  }
  .cta-strip h2 i { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--secondary); }
  .cta-strip p {
    font-size: 16px; line-height: 1.55;
    color: rgba(255,255,255,.75);
    margin: 0 0 22px; max-width: 52ch;
  }
  .cta-strip .ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
  }

  @media (max-width: 720px) {
    .cta-strip { padding: 44px 28px; border-radius: 22px; }
  }