/* ── Page shell ── */
  .pidx-wrap { background: var(--paper); color: var(--ink); overflow-x: clip; }
  .pidx-inner { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

  /* ── Hero ── */
  .pidx-hero { padding: 56px 0 40px; }
  /* Bleed hero: image runs flush into the next section band (product page) */
  .pidx-hero--bleed { padding-bottom: 0; }
  .pidx-eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-cobalt-400); margin: 0 0 14px;
  }
  .pidx-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; max-width: 780px;
  }
  .pidx-subtitle {
    max-width: 780px; margin: 18px 0 0; font-size: 18px; line-height: 1.55;
    color: var(--ink-2);
  }
  .pidx-hero-cta { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
  /* Framed product/diagram shot (default, e.g. the industries hub hero) */
  .pidx-hero-media {
    margin: 40px 0 0;
    position: relative;
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-control);
  }
  .pidx-hero-media img { display: block; width: 100%; height: auto; }

  /* Bleed variant: transparent cutout floating flush into the next section line */
  .pidx-hero-media--bleed {
    border: 0; border-radius: 0; overflow: visible; box-shadow: none; background: none;
  }
  .pidx-hero-media--bleed img {
    max-width: 1040px; margin: 0 auto;
    filter: drop-shadow(0 18px 30px rgba(22, 19, 13, 0.16));
  }

  /* ── Section scaffolding ── */
  .pidx-section { padding: 72px 0; }
  .pidx-section--band { background: var(--paper-2); padding: 72px 0; }
  /* Client-stories section reuses the shared .article-related block. Drop its
     standalone top border / margin so it reads as a full section band and
     aligns to the 1120px pidx grid rather than the wider site container. */
  .pidx-clients .article-related { margin-top: 0; padding-top: 0; border-top: 0; }
  .pidx-clients .container { max-width: none; padding-left: 0; padding-right: 0; }
  /* Same treatment for the insights carousel band: drop the macro's own padding
     and divider so it sits inside the pidx section band and grid cleanly. */
  .pidx-insights .featured-articles { padding: 0; border-top: 0; }
  .pidx-insights .container { max-width: none; padding-left: 0; padding-right: 0; }
  .pidx-section-head { max-width: 720px; margin: 0 0 32px; }
  .pidx-section-title {
    font-family: var(--font-display); font-weight: 800; font-size: 32px;
    line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--ink);
    text-wrap: balance;
  }
  .pidx-section-sub {
    margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2);
  }
  /* Header band that introduces the pillar run. Its color is positional like
     every other section's, so it sits rose under the white hero. */
  .pidx-pillars-head { padding: 72px 0; }
  /* Community collage directly under the pillars heading: the stores Rundoo
     helps, holding their signed go-live shirts. Framed like the other media. */
  .pidx-pillars-media {
    max-width: 680px; margin: 28px auto 0;
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-control);
  }
  .pidx-pillars-media img { display: block; width: 100%; height: auto; }
  .pidx-pillars-media a { display: block; }
  .pidx-pillars-media a img { transition: transform .25s ease; }
  .pidx-pillars-media a:hover img { transform: scale(1.015); }
  .pidx-pillars-media a:focus-visible { outline: 2px solid var(--color-cobalt-400); outline-offset: 3px; }

  /* ── Rolling photo montage (replaces the static collage) ── two rows of square
     client tiles scrolling in opposite directions, faded at both edges. The whole
     band links to /clients/; tiles are decorative (the reduced-motion fallback
     collage below carries the description). */
  .pidx-montage {
    display: block; position: relative; margin: 28px 0 0; text-decoration: none;
    color: inherit; cursor: pointer;
  }
  .pidx-montage-rows {
    display: flex; flex-direction: column; gap: 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .pidx-marquee { display: flex; width: max-content; gap: 14px; will-change: transform; }
  .pidx-marquee--ltr { animation: pidx-scroll-l 120s linear infinite; }
  .pidx-marquee--rtl { animation: pidx-scroll-r 110s linear infinite; }
  .pidx-marquee img {
    flex: none; display: block; width: 158px; height: 158px; object-fit: cover;
    border-radius: 14px; box-shadow: var(--shadow-control); background: var(--paper-2);
  }
  .pidx-montage:hover .pidx-marquee,
  .pidx-montage:focus-visible .pidx-marquee { animation-play-state: paused; }
  .pidx-montage:focus-visible { outline: 2px solid var(--color-cobalt-400); outline-offset: 4px; border-radius: 14px; }
  @keyframes pidx-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes pidx-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  /* Interaction cue under the montage. */
  .pidx-montage-cue {
    display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 0;
    font-size: 14.5px; font-weight: 600; color: var(--color-cobalt-400);
  }
  .pidx-montage:hover .pidx-montage-cue { color: var(--ink); }
  .pidx-montage-cue svg { stroke: currentColor; }
  /* Static collage fallback, shown only when motion is reduced. */
  .pidx-montage-fallback {
    display: none; width: 100%; max-width: 680px; height: auto; margin: 0 auto;
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
  }
  @media (prefers-reduced-motion: reduce) {
    .pidx-marquee { animation: none; }
    .pidx-montage-rows { display: none; }
    .pidx-montage-fallback { display: block; }
  }
  @media (max-width: 767px) {
    .pidx-marquee img { width: 118px; height: 118px; border-radius: 12px; }
    .pidx-marquee--ltr { animation-duration: 82s; }
    .pidx-marquee--rtl { animation-duration: 76s; }
  }

  /* ── Hero byline ── mirrors the pillar-page byline (hairline rule, 48px
     avatar, bold name, mono role). Opt-in via `author` in the page YAML. */
  .pidx-byline {
    display: flex; align-items: center; gap: 14px;
    max-width: 780px; margin: 30px 0 0; padding-top: 26px;
    border-top: 1px solid var(--paper-line);
  }
  .pidx-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);
  }
  .pidx-byline-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pidx-byline-name { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
  .pidx-byline-role {
    display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  }
  @media (max-width: 767px) {
    .pidx-byline-avatar { width: 40px; height: 40px; }
  }

  /* ── Card grid (6-col base) ── */
  .pidx-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }

  /* Large card: span 3 of 6 */
  .pidx-card {
    grid-column: span 3;
    display: block;
    background: var(--color-white);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-2xl);
    padding: 30px;
    box-shadow: var(--shadow-control);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    color: inherit;
  }
  .pidx-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-light);
  }

  /* Small card: span 2 of 6 */
  .pidx-card--sm {
    grid-column: span 2;
    padding: 26px;
  }

  /* Card anatomy */
  .pidx-card-head {
    display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
  }
  .pidx-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-border);
    display: flex; align-items: center; justify-content: center;
    flex: none;
  }
  .pidx-icon svg { display: block; }
  .pidx-icon--num {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; line-height: 1;
    letter-spacing: -0.01em; color: var(--color-cobalt-400);
  }

  /* Small card: icon above title, not inline */
  .pidx-card--sm .pidx-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0;
  }
  .pidx-card--sm .pidx-icon {
    width: 42px; height: 42px; margin-bottom: 16px;
  }
  .pidx-card--sm .pidx-card-title { margin: 0 0 8px; }

  .pidx-card-title {
    font-family: var(--font-display); font-size: 21px; font-weight: 700;
    letter-spacing: -0.015em; margin: 0; color: var(--ink);
    line-height: 1.15;
  }
  .pidx-card--sm .pidx-card-title { font-size: 19px; }

  .pidx-card-body {
    font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px;
  }
  .pidx-card--sm .pidx-card-body { font-size: 14.5px; line-height: 1.58; margin: 0 0 14px; }

  .pidx-card-tag {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
    color: var(--ink-3); margin: 0 0 14px;
  }
  .pidx-learn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14.5px; font-weight: 600; color: var(--color-cobalt-400);
  }
  .pidx-card--sm .pidx-learn { font-size: 14px; }
  .pidx-learn svg { stroke: currentColor; }

  /* ── Surfaces / moments grid ── */
  .pidx-moments {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    list-style: none; margin: 0; padding: 0;
  }
  .pidx-moment {
    background: var(--color-white); border: 1px solid var(--paper-line);
    border-radius: var(--radius-2xl); padding: 24px; box-shadow: var(--shadow-control);
  }
  .pidx-moment-who {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em; margin: 0 0 4px; color: var(--ink);
  }
  .pidx-moment-where { font-size: 13.5px; color: var(--ink-3); margin: 0 0 12px; }
  .pidx-moment-what { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
  .pidx-moment-surface {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
    color: var(--color-cobalt-400); margin: 0;
  }

  /* ── CTA banner (full-width or inside-grid) ── */
  .pidx-cta-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--color-cobalt-400); border-radius: var(--radius-2xl);
    padding: 36px 40px;
  }
  /* Inside the grid the CTA spans 6 cols */
  .pidx-grid .pidx-cta-banner { grid-column: span 6; margin: 0; }
  /* Standalone CTA in its own section */
  .pidx-cta-standalone { margin-top: 0; }

  .pidx-cta-banner-title {
    font-family: var(--font-display); font-size: 24px; font-weight: 700;
    letter-spacing: -0.015em; margin: 0 0 6px; color: #fff;
  }
  .pidx-cta-banner-body {
    font-size: 15px; line-height: 1.5; color: var(--color-cobalt-100); margin: 0;
  }
  .pidx-cta-btn {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px;
    padding: 0 22px; background: #fff; color: var(--color-cobalt-500);
    border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease;
  }
  .pidx-cta-btn:hover { transform: translateY(-2px); }

  /* ── Regions split (text + country list + photo) ── */
  .pidx-split {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
    align-items: center;
  }
  .pidx-split .pidx-section-head { margin-bottom: 20px; }
  .pidx-regions { list-style: none; margin: 0; padding: 0; }
  .pidx-region { padding: 20px 0 22px; border-top: 1px solid var(--border-light); }
  .pidx-region:last-child { padding-bottom: 0; }
  .pidx-region-name {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 6px; color: var(--ink);
  }
  .pidx-region-flag {
    flex: none; display: inline-flex; border-radius: var(--radius-sm); overflow: hidden;
    box-shadow: 0 0 0 1px var(--border-light);
  }
  .pidx-region-flag svg { display: block; }
  .pidx-region-note { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .pidx-region .pidx-learn { margin-top: 12px; font-size: 14px; }
  .pidx-split-media { margin: 0; }
  .pidx-split-media img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
  }
  .pidx-split-media figcaption { margin: 10px 2px 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
  .pidx-split-media figcaption a {
    color: var(--color-cobalt-400); font-weight: 600; text-decoration: none;
    white-space: nowrap; transition: color .15s ease;
  }
  .pidx-split-media figcaption a:hover { color: var(--ink); }

  /* ── Four-ways: stacked alternating feature rows (text + image) ── */
  .pidx-features { display: flex; flex-direction: column; gap: 64px; }
  .pidx-feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  /* Reversed rows put the image on the left, text on the right. */
  .pidx-feature--rev .pidx-feature-text { order: 2; }
  .pidx-feature--rev .pidx-feature-media { order: 1; }
  .pidx-feature-num {
    width: 36px; height: 36px; border-radius: 999px; background: var(--color-cobalt-400);
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
  }
  .pidx-feature-title {
    font-family: var(--font-display); font-size: 27px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 12px; color: var(--ink);
    text-wrap: balance;
  }
  .pidx-feature-body {
    font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; max-width: 46ch;
  }
  .pidx-feature .pidx-card-tag { margin: 0 0 16px; }
  .pidx-feature-media {
    display: block; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-control); background: var(--color-white);
  }
  .pidx-feature-media img,
  .pidx-feature-media video { display: block; width: 100%; height: auto; }
  @media (max-width: 820px) {
    .pidx-feature { grid-template-columns: 1fr; gap: 24px; }
    .pidx-feature--rev .pidx-feature-text,
    .pidx-feature--rev .pidx-feature-media { order: initial; }
  }

  /* ── Quote + client-photo carousel ── */
  .pidx-carousel { position: relative; }
  .pidx-carousel-track {
    display: flex; list-style: none; margin: 0; padding: 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pidx-carousel-track::-webkit-scrollbar { display: none; }
  .pidx-quote { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; box-sizing: border-box; }
  .pidx-quote-fig {
    margin: 0; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px; align-items: center;
    background: var(--color-white); border: 1px solid var(--paper-line);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-control);
    padding: 28px;
  }
  .pidx-quote-photo {
    aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2);
  }
  .pidx-quote-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pidx-quote-text { margin: 0; }
  .pidx-quote-text p {
    font-family: var(--font-display); font-size: 22px; line-height: 1.42;
    letter-spacing: -0.015em; color: var(--ink); margin: 0 0 20px; text-wrap: pretty;
    border-left: 3px solid var(--color-cobalt-400); padding-left: 20px;
  }
  .pidx-quote-cite { display: flex; flex-direction: column; gap: 2px; padding-left: 23px; }
  .pidx-quote-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
  .pidx-quote-meta { font-size: 14px; color: var(--ink-2); }
  .pidx-quote-badge {
    align-self: flex-start; margin-top: 10px; font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-cobalt-400); background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-border); border-radius: 999px; padding: 3px 10px;
  }
  .pidx-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
  .pidx-carousel-btn {
    flex: none; width: 44px; height: 44px; border-radius: 999px;
    background: var(--color-white); border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-control); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .pidx-carousel-btn:hover { transform: translateY(-2px); border-color: var(--border-light); color: var(--color-cobalt-400); }
  .pidx-carousel-btn:focus-visible { outline: 2px solid var(--color-cobalt-400); outline-offset: 2px; }
  .pidx-carousel-dots { display: flex; align-items: center; gap: 8px; }
  .pidx-carousel-dot {
    width: 8px; height: 8px; padding: 0; border-radius: 999px; cursor: pointer;
    border: 0; background: rgba(23, 20, 18, 0.2); transition: background .15s ease, transform .15s ease;
  }
  .pidx-carousel-dot[aria-current="true"] { background: var(--color-cobalt-400); transform: scale(1.25); }

  /* ── FAQ band (wraps the shared _faqs.html partial) ── */
  .pidx-faqs--band { background: var(--paper-2); }

  @media (prefers-reduced-motion: reduce) { .pidx-carousel-track { scroll-behavior: auto; } }

  /* ── Responsive ── */
  @media (max-width: 960px) {
    .pidx-split { grid-template-columns: 1fr; gap: 36px; }
    .pidx-inner { padding-left: 20px; padding-right: 20px; }
    .pidx-grid { grid-template-columns: 1fr 1fr; }
    .pidx-card,
    .pidx-card--sm { grid-column: span 1; }
    .pidx-grid .pidx-cta-banner { grid-column: span 2; }
    .pidx-moments { grid-template-columns: 1fr 1fr; }
    .pidx-cta-banner { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 820px) {
    .pidx-title { font-size: clamp(30px, 7.2vw, 44px); line-height: 1.08; }
    .pidx-section-title { font-size: clamp(25px, 5.4vw, 32px); }
  }
  @media (max-width: 600px) {
    .pidx-grid { grid-template-columns: 1fr; }
    .pidx-card,
    .pidx-card--sm { grid-column: span 1; }
    .pidx-grid .pidx-cta-banner { grid-column: span 1; }
    .pidx-moments { grid-template-columns: 1fr; }
    .pidx-title { font-size: 30px; }
    .pidx-card--sm .pidx-card-head { flex-direction: column; }
  }
  @media (max-width: 720px) {
    .pidx-quote-fig { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .pidx-quote-photo { aspect-ratio: 16 / 9; }
    .pidx-quote-text p { font-size: 19px; }
  }