/* ===== Partner detail (light mode) ===== */
  .pd-page {
    background: var(--paper);
    color: var(--ink);
  }
  .pd-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* ---- Hero ---- */
  .pd-hero { padding: 40px 0 24px; }
  /* The old 64px + 84px stack left the overview stranded far down the page. */
  .pd-hero + .pd-section { padding-top: 32px; }
  .pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 32px;
  }
  .pd-breadcrumb a { color: inherit; text-decoration: none; }
  .pd-breadcrumb a:hover { color: var(--color-cobalt-400); }
  .pd-breadcrumb .pd-crumb-current { color: var(--ink-2); }

  .pd-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .pd-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
  }
  .pd-chip:hover { border-color: var(--color-cobalt-200); color: var(--color-cobalt-400); }
  .pd-chip--all {
    color: var(--color-cobalt-400);
    font-weight: 600;
  }

  .pd-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
  .pd-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-cobalt-500);
    margin-bottom: 20px;
  }
  .pd-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 50px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .pd-subtitle {
    max-width: 520px;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.58;
    color: var(--ink-2);
  }
  .pd-hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .pd-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 26px;
    border-radius: var(--radius-md);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: var(--shadow-control);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .pd-btn--primary {
    background: var(--color-cobalt-400);
    color: #fff;
  }
  .pd-btn--primary:hover { background: var(--color-cobalt-500); }
  .pd-btn--secondary {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--paper-line);
    padding: 0 22px;
  }
  .pd-btn--secondary:hover { border-color: var(--color-cobalt-200); background: var(--paper-3); }

  /* partner logo card — partner only, centered with equal padding all sides */
  .pd-lockup {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
  }
  .pd-lockup-logo {
    max-height: 120px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }
  .pd-lockup-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
  }

  /* ---- Bands ---- */
  .pd-band {
    background: var(--paper-2);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
    padding: 80px 0;
  }
  .pd-section { padding: 84px 0; }
  /* Two white sections in a row have no band colour between them, so their
     paddings would stack into ~190px of blank space. The one above already
     supplies the gap. Outranks the 640px rule below, so it holds on phones. */
  .pd-section + .pd-section { padding-top: 0; }

  .pd-section-head { max-width: 680px; margin-bottom: 48px; }
  /* The 48px suits a card grid. A heading with plain paragraphs under it and
     no intro line sits as close as an intro would, so it reads as one block. */
  .pd-section-head:has(+ .pd-prose) { margin-bottom: 16px; }
  .pd-h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .pd-section-intro {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 16px 0 0;
  }
  .pd-subhead {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 18px;
  }
  .pd-subhead--done { color: var(--color-cobalt-500); }
  .pd-subhead--progress { color: var(--ink-3); }

  /* integration cards */
  .pd-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .pd-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .pd-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  .pd-card:hover {
    box-shadow: var(--shadow-input);
    border-color: var(--color-cobalt-100);
  }
  .pd-card--progress { background: var(--paper); }
  .pd-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
  }
  .pd-card-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .pd-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
  }
  .pd-group + .pd-group { margin-top: 40px; }

  /* Discount cards reuse the standard .pd-card pattern. A single offer spans the
     full row so it doesn't sit lonely in a half-width cell; the CTA link sits at
     the foot of the card. */
  .pd-cards--1 { grid-template-columns: 1fr; }
  .pd-card-cta { margin-top: 18px; }

  /* prose / overview */
  .pd-prose {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.68;
    color: var(--ink-2);
  }
  .pd-prose > :first-child { margin-top: 0; }
  .pd-prose h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 44px 0 16px;
  }
  .pd-prose h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 36px 0 12px;
  }
  .pd-prose p { margin: 0 0 18px; }
  .pd-prose a { color: var(--color-cobalt-400); }
  .pd-prose ul, .pd-prose ol { margin: 0 0 18px; padding-left: 24px; }
  .pd-prose ul { list-style: disc; }
  .pd-prose ol { list-style: decimal; }
  .pd-prose li { margin: 0 0 10px; padding-left: 4px; }
  .pd-prose li::marker { color: var(--ink-3); }
  .pd-prose blockquote {
    margin: 32px 0;
    padding: 20px 24px;
    border: 1px solid var(--paper-line);
    background: var(--paper-2);
    border-radius: var(--radius-md);
  }
  .pd-prose blockquote p { margin: 0; font-style: italic; color: var(--ink); }
  .pd-prose blockquote footer {
    margin-top: 12px;
    font-style: normal;
    font-size: 14px;
    color: var(--ink-3);
  }

  /* video */
  .pd-video { margin: 0 0 40px; }
  .pd-video video {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-surface);
    display: block;
  }
  .pd-video-caption {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-3);
    margin: 12px 0 0;
  }

  /* demo_video: the same click-to-play YouTube facade as pillar.html
     (docs/DESIGN_SYSTEM.md § 10). The poster ships from our own assets and the
     player is only built on click, so Google is not contacted on page load. */
  .pd-demo { margin: 0 0 48px; }
  .pd-demo-title { margin: 0 0 20px; }
  .pd-demo-embed {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-demo-surface);
  }
  .pd-demo-embed[data-youtube] { cursor: pointer; }
  .pd-demo-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-demo-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
  /* Self-hosted (R2) demo video: same framed 16:9 surface as the facade. */
  .pd-demo-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-demo-surface);
  }
  .pd-demo-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(56px, 7.5vw, 92px);
    height: clamp(56px, 7.5vw, 92px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-cobalt-400);
    box-shadow: 0 14px 36px -8px rgba(14, 31, 193, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background .15s ease, transform .15s ease;
  }
  .pd-demo-play:hover { background: var(--color-cobalt-500); transform: translate(-50%, -50%) scale(1.06); }
  .pd-demo-play:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.92);
  }
  .pd-demo-play svg { width: 43%; height: 43%; fill: #fff; margin-left: 5%; }
  @media (prefers-reduced-motion: reduce) {
    .pd-demo-play:hover { transform: translate(-50%, -50%); }
  }

  /* gallery. auto-fit, not auto-fill, so two photos split the row instead of
     sitting in the left half next to empty tracks. */
  .pd-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 40px;
  }
  .pd-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-control);
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
  }
  .pd-gallery-fig { margin: 0; }
  .pd-gallery-fig .pd-gallery-img { height: auto; display: block; }
  .pd-gallery-cap {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
  }

  /* proof quote */
  .pd-quote-wrap { max-width: 900px; margin: 0 auto; text-align: center; }
  .pd-quote {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: pretty;
  }
  .pd-quote-attr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
  }
  .pd-quote-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex: none;
  }
  .pd-quote-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-quote-meta { text-align: left; }
  .pd-quote-name { font-size: 15.5px; font-weight: 600; color: var(--ink); }
  .pd-quote-sub { font-size: 14px; color: var(--ink-3); }

  /* spotlight client card */
  .pd-spotlight {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .pd-spotlight:hover { border-color: var(--color-cobalt-200); box-shadow: var(--shadow-input); }
  .pd-spotlight-img { background: var(--paper-2); }
  .pd-spotlight-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; }
  .pd-spotlight-body { padding: 36px; }
  .pd-spotlight-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pd-spotlight-loc { font-size: 15px; color: var(--ink-3); margin: 0 0 16px; }
  .pd-spotlight-readmore { font-size: 15.5px; font-weight: 600; color: var(--color-cobalt-400); }

  /* referral CTA inline */
  .pd-inline-cta { margin: 24px 0 0; }

  /* final CTA */
  .pd-final {
    background: var(--color-cobalt-400);
    border-radius: var(--radius-lg);
    padding: 64px 56px;
    text-align: center;
  }
  .pd-final h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
  }
  .pd-final p {
    max-width: 520px;
    margin: 0 auto 32px;
    font-size: 17.5px;
    line-height: 1.58;
    color: var(--color-cobalt-100);
    /* Even lines, never a single word stranded on the last one. */
    text-wrap: balance;
  }
  .pd-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .pd-final-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 28px;
    background: #fff;
    color: var(--color-cobalt-500);
    border-radius: var(--radius-md);
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease;
  }
  .pd-final-primary:hover { transform: translateY(-2px); }
  .pd-final-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color .15s ease;
  }
  .pd-final-phone:hover { color: var(--color-cobalt-100); }

  /* ---- Optional sections (opt-in per page via frontmatter) ----
     hero_image / author byline / benefits / workflows / member_quotes /
     conferences_image. Pages that don't set these render exactly as before. */

  /* Hero image in place of the logo lockup: the image carries its own framing,
     so drop the lockup's padding and let it fill the card. */
  .pd-lockup--image { padding: 0; overflow: hidden; min-height: 0; }
  .pd-lockup--image .pd-lockup-img { width: 100%; height: auto; display: block; }

  /* Store photos after the body copy, before Integrations (opt-in via store_photos). */
  .pd-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  .pd-store { margin: 0; }
  .pd-store-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
  }
  .pd-store-cap { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
  @media (max-width: 767px) {
    .pd-stores { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  }

  /* Industry back link between the hero CTAs and the byline. Opt-in via
     `industry_label` + `industry_link`, or an `industries` list of
     {label, link} for a partner that spans several verticals, so other
     partner pages are unchanged. */
  .pd-industry { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
  .pd-industry a { color: var(--color-cobalt-400); font-weight: 600; text-decoration: none; }
  .pd-industry a:hover { color: var(--color-cobalt-500); }

  /* Author byline. Mirrors .pillar-byline in pillar.html so a partner page
     carries the same authorship treatment as the industry pages: hairline rule,
     48px circular avatar, name at 15px/600, role in 12px mono underneath. */
  .pd-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--paper-line);
  }
  .pd-byline-avatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    object-fit: cover;
    flex: none;
    border: 1.5px solid var(--paper-line);
  }
  .pd-byline-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pd-byline-name { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
  .pd-byline-name a { color: inherit; text-decoration: none; }
  .pd-byline-name a:hover { color: var(--color-cobalt-400); }
  .pd-byline-role {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
  }
  @media (max-width: 767px) {
    .pd-byline-avatar { width: 40px; height: 40px; }
  }

  /* Workflow rows: copy beside a product image, alternating sides. */
  .pd-flows { display: flex; flex-direction: column; gap: 64px; }
  .pd-flow {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
  }
  .pd-flow:nth-child(even) .pd-flow-copy { order: 2; }
  /* The lead feature gives its heading more room and the image less. */
  .pd-flow--lead { grid-template-columns: 1.1fr 0.9fr; }
  .pd-flow-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-100);
    color: var(--color-cobalt-500);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .pd-flow-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .pd-flow-desc { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .pd-flow-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-surface);
  }
  /* Workflows with no screenshots sit as a two-up card grid, so each row
     doesn't leave an empty image column beside the copy. */
  .pd-flows--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .pd-flows--cards .pd-flow {
    display: block;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
  }
  .pd-flows--cards .pd-flow-name { font-size: 21px; margin-bottom: 8px; }
  .pd-flows--cards .pd-flow-desc { font-size: 15.5px; }

  /* Member quote cards */
  .pd-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .pd-mq {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
    overflow: hidden;
  }
  .pd-mq-media {
    height: 168px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pd-mq-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-mq-media--photo { height: 220px; }
  .pd-mq-media--logo { background: #fff; padding: 28px; }
  .pd-mq-media--logo img { object-fit: contain; }
  .pd-mq-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
  .pd-mq-quote {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: pretty;
  }
  .pd-mq-meta { margin-top: auto; }
  .pd-mq-name { font-size: 15px; font-weight: 600; color: var(--ink); }
  .pd-mq-store { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
  /* Single member quote: photo beside the quote across the row, larger type. */
  .pd-quotes--pair { grid-template-columns: repeat(2, 1fr); }
  .pd-quotes--pair .pd-mq-media--photo { height: 280px; }
  .pd-quotes--single { grid-template-columns: 1fr; max-width: 960px; }
  .pd-quotes--single .pd-mq { flex-direction: row; }
  .pd-quotes--single .pd-mq-media--photo {
    flex: 0 0 46%;
    height: auto;
    min-height: 340px;
    border-bottom: none;
    border-right: 1px solid var(--paper-line);
  }
  .pd-quotes--single .pd-mq-body { justify-content: center; padding: 40px 44px; }
  .pd-quotes--single .pd-mq-quote { font-size: 26px; line-height: 1.32; margin-bottom: 28px; }
  .pd-quotes--single .pd-mq-meta { margin-top: 0; }

  .pd-mq-link {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-cobalt-600);
    text-decoration: none;
  }
  .pd-mq-link::after { content: ""; position: absolute; inset: 0; }
  .pd-mq--linked { position: relative; transition: box-shadow .15s ease, transform .15s ease; }
  .pd-mq--linked:hover { box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.08)); transform: translateY(-2px); }
  .pd-mq--linked:hover .pd-mq-link { text-decoration: underline; }
  .pd-mq-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 4px 10px;
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-100);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-cobalt-500);
  }

  /* Partner clients grid: store photo over name + location, linked to the
     client story. Mirrors the member-quote card minus the quote. */
  .pd-clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pd-client {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .pd-client:hover { border-color: var(--color-cobalt-200); box-shadow: var(--shadow-input); transform: translateY(-2px); }
  .pd-client-media {
    height: 184px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pd-client-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-client-media--logo { background: #fff; padding: 28px; }
  .pd-client-media--logo img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
  .pd-client-body { display: flex; flex-direction: column; gap: 3px; padding: 20px 22px 22px; }
  .pd-client-name { font-size: 16px; font-weight: 600; color: var(--ink); }
  .pd-client-loc { font-size: 14px; color: var(--ink-3); }
  .pd-client-link { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--color-cobalt-400); }

  /* Featured trade shows: centered heading, copy and photo on a band. */
  .pd-conf--featured { text-align: center; }
  .pd-conf--featured .pd-section-head { margin-left: auto; margin-right: auto; margin-bottom: 20px; }
  .pd-conf--featured .pd-prose { margin-left: auto; margin-right: auto; }
  .pd-conf--featured .pd-conf-img { margin-left: auto; margin-right: auto; }

  .pd-feature-link { margin: 22px 0 0; font-size: 16px; }

  /* Closing strip under the benefit cards. */
  .pd-benefits-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    padding: 26px 30px;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
  }
  .pd-benefits-more-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .pd-benefits-more-body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 640px; }
  .pd-benefits-more .cta-link { flex: none; white-space: nowrap; }
  .pd-benefits-more-links { display: flex; flex-direction: column; gap: 8px; flex: none; }
  @media (max-width: 767px) {
    .pd-benefits-more { flex-direction: column; align-items: flex-start; }
  }
  /* Side-by-side trade show row: heading and text left, photo right,
     centred vertically because the text is usually shorter than the photo. */
  .pd-conf-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .pd-conf-copy .pd-prose > :last-child { margin-bottom: 0; }
  .pd-conf-row .pd-conf-img { width: 100%; margin-top: 0; }

  /* Trade show photo: half the content width, full width on phones. */
  .pd-conf-img {
    width: 50%;
    height: auto;
    display: block;
    margin-top: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-surface);
  }

  /* Several captioned trade show photos, cropped to the same size. */
  .pd-conf-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 36px 0 0;
  }
  .pd-conf-gallery figure { margin: 0; }
  .pd-conf-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-surface);
  }
  .pd-conf-gallery figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

  /* Intro: a text card and a stat card stacked beside a video. */
  .pd-intro-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 24px;
    align-items: stretch;
  }
  .pd-intro-cards { display: flex; flex-direction: column; gap: 18px; }
  .pd-intro-cards .pd-card { flex: 1; }
  .pd-stat {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-cobalt-400);
    margin: 0 0 10px;
  }
  .pd-intro-video { margin: 0; }
  .pd-intro-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-surface);
  }

  /* Workflow cards that carry a screenshot put it above the copy, in a
     same-size frame so the copy lines up across a row whatever the
     screenshot's shape. */
  .pd-flows--cards .pd-flow { display: flex; flex-direction: column; gap: 0; }
  .pd-flows--cards .pd-flow-img {
    order: -1;
    margin-bottom: 22px;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: #fff;
    box-shadow: none;
  }

  /* Numbered steps inside a feature section. */
  .pd-steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  .pd-step { display: flex; gap: 16px; align-items: flex-start; }
  .pd-step .pd-flow-step { flex: none; margin: 0; }
  .pd-step-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 3px 0 4px;
    color: var(--ink);
  }
  .pd-step-body { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

  @media (max-width: 960px) {
    .pd-intro-grid { grid-template-columns: 1fr; }
    .pd-conf-gallery { grid-template-columns: 1fr; }
    .pd-flow { grid-template-columns: 1fr; gap: 28px; }
    .pd-flow:nth-child(even) .pd-flow-copy { order: 0; }
    .pd-flows--cards { grid-template-columns: 1fr; }
    .pd-quotes { grid-template-columns: 1fr; }
    .pd-clients { grid-template-columns: 1fr; }
    .pd-quotes--single .pd-mq { flex-direction: column; }
    .pd-quotes--single .pd-mq-media--photo { flex: none; height: 240px; min-height: 0; border-right: none; border-bottom: 1px solid var(--paper-line); }
    .pd-quotes--single .pd-mq-body { padding: 26px 26px 28px; }
    .pd-quotes--single .pd-mq-quote { font-size: 21px; }
    .pd-conf-img { width: 100%; }
    .pd-conf-row { grid-template-columns: 1fr; gap: 36px; }
  }

  @media (max-width: 960px) {
    .pd-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .pd-cards { grid-template-columns: 1fr; }
    .pd-spotlight { grid-template-columns: 1fr; }
    .pd-title { font-size: 38px; }
    .pd-h2, .pd-final h2 { font-size: 32px; }
  }
  @media (max-width: 640px) {
    .pd-wrap { padding-left: 20px; padding-right: 20px; }
    .pd-band, .pd-section { padding: 56px 0; }
    .pd-final { padding: 44px 28px; }
    .pd-lockup { padding: 32px; min-height: 180px; gap: 20px; }
    .pd-quote { font-size: 23px; }
  }