/* ============================================================
     Pillar page — light-mode redesign (industry / capability / FAQ)
     Scoped to .pillar-page so it never leaks into shared partials.
     ============================================================ */
  .pillar-page {
    background: var(--paper);
    color: var(--ink);
  }
  .pillar-page .container { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

  /* ---- shared section heads ---- */
  .pillar-page .section-title {
    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;
  }
  .pillar-page .section-subtitle {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 16px 0 0;
  }
  .pillar-page .pillar-section-head { max-width: 680px; margin-bottom: 48px; }
  /* Left-align section heads to match the index pages. Overrides the site-wide
     centered `.section-title`/`.section-subtitle` base; scoped to the section
     head so the intentionally-centered CTA and FAQ headings are unaffected. */
  .pillar-page .pillar-section-head .section-title,
  .pillar-page .pillar-section-head .section-subtitle { text-align: left; }
  /* Customer App prototype only: let section titles run the full width across
     the band instead of balancing into a narrow, short-stacked block on the
     left. Subtitles stay at a readable measure so body copy doesn't stretch.
     Scoped by page slug so the live pillar pages are untouched. */
  body[data-page-slug="product/customer-self-service-app"] .pillar-page .pillar-section-head { max-width: 100%; }
  body[data-page-slug="product/customer-self-service-app"] .pillar-page .pillar-section-head .section-title { text-wrap: pretty; }
  body[data-page-slug="product/customer-self-service-app"] .pillar-page .pillar-section-head .section-subtitle { max-width: 680px; }

  /* ---- band variants (alternating white / rose) ---- */
  .pillar-page .band-rose {
    background: var(--paper-2);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }
  /* Shared partials (client stories, partners, insights, FAQs) folded into the
     alternating rhythm via a wrapper. Each wrapper ALWAYS carries the section
     padding and ALWAYS neutralizes its inner partial's own divider/margins —
     those exist for standalone / in-article use and would otherwise float as a
     stray rule across the page (the "loose line" between sections). The band-rose
     variant only swaps the fill; seams between a white section and its banded
     neighbors come from the rose band's own top/bottom borders. */
  .pillar-page .pillar-clients,
  .pillar-page .pillar-partners-band,
  .pillar-page .pillar-insights,
  .pillar-page .pillar-faqs-band { padding: 84px 0; }
  .pillar-page .pillar-clients .article-related,
  .pillar-page .pillar-partners-band .article-related,
  .pillar-page .pillar-insights .featured-articles {
    margin-top: 0; padding-top: 0; padding-bottom: 0; border-top: 0;
  }
  .pillar-page .pillar-faqs-band .faq-section { padding-top: 0; padding-bottom: 0; }
  /* The shared client-stories / partners heading uses .section-title, which this
     template resets to margin:0; restore the gap between the heading and grid. */
  .pillar-page .pillar-clients .article-related .section-title,
  .pillar-page .pillar-partners-band .article-related .section-title { margin-bottom: 40px; }

  /* ============ SWITCHER PILLS (industry / capability row) ============ */
  .pillar-page .pillar-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  /* In the side-by-side industry hero the switcher is a direct grid child;
     span every column so the pills stay on one row instead of wrapping. */
  .pillar-page .pillar-hero .container > .pillar-switcher { grid-column: 1 / -1; }
  .pillar-page .pillar-switcher a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--paper-line);
    background: #ffffff;
    color: var(--ink-2);
    transition: border-color .15s ease, color .15s ease;
  }
  .pillar-page .pillar-switcher a:hover {
    border-color: var(--color-cobalt-200);
    color: var(--color-cobalt-400);
  }
  .pillar-page .pillar-switcher a.active {
    background: var(--color-cobalt-400);
    color: #fff;
    border-color: var(--color-cobalt-400);
    font-weight: 600;
  }

  /* ============ HERO — industry / capability (side-by-side or text-only) ============ */
  .pillar-page .pillar-hero { padding: 48px 0 72px; }
  .pillar-page .pillar-hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
  .pillar-page .pillar-hero--text .container { display: block; max-width: 1120px; }
  /* Copy block runs the full container so the screenshot below it uses the
     real page width; the heading/subtitle keep their own readable measures
     (left-aligned, matching the /product and /industries index heroes). */
  .pillar-page .pillar-hero--text .pillar-hero-copy { max-width: 100%; }
  .pillar-page .pillar-hero--text .pillar-title { max-width: 880px; }
  /* Split text hero — copy left, side image right (hero.side_image). The copy
     column keeps the left-aligned readable measure; the image sits beside it. */
  .pillar-page .pillar-hero--split .pillar-hero-textgrid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
  }
  .pillar-page .pillar-hero--split .pillar-hero-copy .pillar-title { max-width: 100%; }
  .pillar-page .pillar-hero-side {
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .pillar-hero-side img { display: block; width: 100%; height: auto; }
  .pillar-page .pillar-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 16px;
  }
  .pillar-page .pillar-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 54px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .pillar-page .pillar-subtitle {
    max-width: 560px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.58;
    color: var(--ink-2);
  }
  .pillar-page .pillar-hero-cta { display: flex; align-items: center; gap: 13px; margin-top: 30px; flex-wrap: wrap; }
  .pillar-page .pillar-hero-cta .btn { height: 52px; padding: 0 26px; border-radius: var(--radius-md); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; box-shadow: var(--shadow-control); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
  .pillar-page .pillar-hero-cta .btn-primary { background: var(--color-cobalt-400); color: #fff; }
  .pillar-page .pillar-hero-cta .btn-primary:hover { background: var(--color-cobalt-500); }
  .pillar-page .pillar-hero-cta .btn-secondary { background: var(--paper-2); color: var(--ink); border: 1px solid var(--paper-line); }
  .pillar-page .pillar-hero-cta .btn-secondary:hover { border-color: var(--color-cobalt-200); background: var(--paper-3); }
  /* Page byline. Mirrors the article byline component (.article-meta in
     article.html): hairline rule, optional 48px circular avatar, name and role
     at 15px/600. Opt-in via `author` in the page's YAML, so every pillar page
     that carries no byline renders exactly as before. */
  .pillar-page .pillar-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--paper-line);
  }
  .pillar-page .pillar-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);
  }
  /* Matches .article-meta-text: a column stack so a date or role can sit under
     the name exactly as it does on an insights post. */
  .pillar-page .pillar-byline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .pillar-page .pillar-byline-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .pillar-page .pillar-byline-name a { color: inherit; text-decoration: none; }
  .pillar-page .pillar-byline-name a:hover { color: var(--color-cobalt-400); }
  /* Second line, styled like the date under an insights byline (.article-date):
     mono, 12px, muted, so the role reads as metadata under the name. */
  .pillar-page .pillar-byline-role {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
  }
  /* Avatars step to 40px on a phone, per DESIGN_SYSTEM.md's inline-avatar rule. */
  @media (max-width: 767px) {
    .pillar-page .pillar-byline-avatar { width: 40px; height: 40px; }
  }

  /* partner strip chip in hero */
  .pillar-page .pillar-hero-partners {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 6px 12px;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink-3);
  }

  /* hero media (right-side image) */
  .pillar-page .pillar-hero-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--paper-line);
  }
  .pillar-page .pillar-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* hero.image_caption: the store and town, as the same white pill the
     photo_band mosaic uses. */
  .pillar-page .pillar-hero-media { position: relative; }
  .pillar-page .pillar-hero-media--link { display: block; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
  .pillar-page .pillar-hero-media--link:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
  .pillar-page .pillar-hero-media--link:hover .pillar-hero-caption,
  .pillar-page .pillar-hero-media--link:focus-visible .pillar-hero-caption { color: var(--color-accent); }
  .pillar-page .pillar-hero-caption,
  .pillar-page .photo-mosaic-item figcaption {
    position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 4px 10px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4;
  }
  /* Screenshot hero: show the full capture (no crop), framed like an app window. */
  .pillar-page .pillar-hero-media--shot {
    aspect-ratio: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    background: var(--color-white);
    box-shadow: 0 24px 60px -28px rgba(22, 19, 13, 0.45);
  }
  .pillar-page .pillar-hero-media--shot img { height: auto; object-fit: contain; }

  /* ============ STAT BAR — scannable proof row under the hero ============ */
  .pillar-page .pillar-stats { padding: 8px 0 16px; }
  .pillar-page .pillar-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .pillar-stat { display: flex; flex-direction: column; gap: 5px; }
  .pillar-page .pillar-stat-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .pillar-page .pillar-stat-value--violet { color: var(--color-violet-600); }
  .pillar-page .pillar-stat-label { font-size: 14.5px; line-height: 1.4; color: var(--ink-3); }
  @media (max-width: 767px) {
    .pillar-page .pillar-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  }

  /* ============ DEMO VIDEO — centered card directly under the hero ============
     Deliberately centered rather than full-bleed, mirroring the homepage's
     .hp-demo-wrap: a demo frame is a card, not one of the page's rose/white
     bands, so it must not join the alternation (tests/e2e/test_section_bands.py
     reads any full-width child of the content root as a band).
     EXCEPTION: a multi-video demo (--band) is a real content section — a pair
     of phone-and-copy story units — so it DOES join the alternation: full-bleed,
     its own slot in the band counter, and a container inside like every other
     band. */
  .pillar-page .pillar-demo-video { max-width: 1120px; margin: 0 auto; padding: 16px 32px 24px; }

  /* Podcast CTA: a promo card that sits under the store-stories grid, inside the
     section's own .container so it lines up with the cards above it. */
  .pillar-page .pillar-podcast { margin: 0; padding: 44px 0 0; }
  .pillar-page .pillar-podcast-card {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center;
    background: var(--paper-2); border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg); padding: 28px;
  }
  .pillar-page .pillar-podcast-media {
    position: relative; display: block; border-radius: var(--radius-md); overflow: hidden;
    aspect-ratio: 16 / 9; box-shadow: var(--shadow-elevated);
  }
  .pillar-page .pillar-podcast-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
  .pillar-page .pillar-podcast-media:hover img { transform: scale(1.03); }
  .pillar-page .pillar-podcast-badge {
    position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-cobalt-400); color: #fff;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .pillar-page .pillar-podcast-badge svg { width: 13px; height: 13px; fill: currentColor; }
  .pillar-page .pillar-podcast-eyebrow {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-cobalt-500); margin: 0 0 10px;
  }
  .pillar-page .pillar-podcast-heading {
    font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.14;
    letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; text-wrap: balance;
  }
  .pillar-page .pillar-podcast-body { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
  .pillar-page .pillar-podcast-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px;
    border-radius: var(--radius-md); background: var(--color-cobalt-400); color: #fff; font-size: 16px;
    font-weight: 600; text-decoration: none; box-shadow: var(--shadow-control);
    transition: background .15s ease, transform .15s ease;
  }
  .pillar-page .pillar-podcast-btn:hover { background: var(--color-cobalt-500); transform: translateY(-1px); }
  @media (max-width: 767px) {
    .pillar-page .pillar-podcast-card { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
    .pillar-page .pillar-podcast { padding-top: 32px; }
  }

  /* Supply Stories: a row of episode tiles (used on the industries hub). */
  .pillar-page .pillar-podcast-episodes { margin-top: 48px; }
  .pillar-page .pillar-podcast-episodes-head { margin-bottom: 26px; }
  .pillar-page .pillar-podcast-episodes-head .pillar-podcast-eyebrow { margin-bottom: 8px; }
  .pillar-page .pillar-podcast-episodes-head h3 { margin: 0 0 8px; }
  .pillar-page .pillar-podcast-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .pillar-page .pillar-podcast-tile {
    display: flex; flex-direction: column; background: var(--paper-2);
    border: 1px solid var(--paper-line); border-radius: var(--radius-lg); overflow: hidden;
    text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .pillar-page .pillar-podcast-tile:hover { border-color: var(--color-cobalt-200); transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
  .pillar-page .pillar-podcast-tile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  .pillar-page .pillar-podcast-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pillar-page .pillar-podcast-tile .pillar-podcast-badge { position: absolute; left: 12px; bottom: 12px; }
  .pillar-page .pillar-podcast-tile-copy { padding: 16px 18px 18px; }
  .pillar-page .pillar-podcast-tile-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-cobalt-500); margin: 0 0 6px; }
  .pillar-page .pillar-podcast-tile-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--ink); }
  .pillar-page .pillar-podcast-tile-guest { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
  .pillar-page .pillar-podcast-episodes .pillar-podcast-btn { margin-top: 26px; }
  @media (max-width: 767px) {
    .pillar-page .pillar-podcast-tiles { grid-template-columns: 1fr; gap: 18px; }
    .pillar-page .pillar-podcast-episodes { margin-top: 36px; }
  }
  .pillar-page .pillar-demo-video--band { max-width: none; margin: 0; padding: 84px 0; }
  .pillar-page .pillar-demo-video-head { padding: 16px 0 32px; text-align: center; }
  .pillar-page .pillar-demo-video-caption {
    margin: 6px auto 0;
    text-align: center;
    font-size: 15px;
    color: var(--ink-3);
  }
  /* Click-to-play facade — the poster fills the device frame and is swapped for
     the player on click. Shared by both sources: a YouTube embed and a
     self-hosted file both render inside this positioning context, so the
     overlaid play button lands on the video itself rather than on the bezel. */
  .pillar-page .pillar-demo-embed {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-demo-surface);
  }
  /* Only the YouTube facade is clickable edge to edge. A self-hosted file keeps
     its native controls, so a click anywhere would fight the controls bar. */
  .pillar-page .pillar-demo-embed[data-youtube] { cursor: pointer; }
  .pillar-page .pillar-demo-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pillar-page .pillar-demo-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
  .pillar-page .pillar-demo-file { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* In native fullscreen a portrait video must letterbox (contain), not cover —
     otherwise object-fit: cover scales it to fill a landscape screen and the
     content zooms in wildly. This restores the sane fullscreen default. */
  .pillar-page .pillar-demo-file:fullscreen,
  .pillar-page .pillar-demo-file:-webkit-full-screen { object-fit: contain; background: #000; }
  .pillar-page .pillar-demo-file::cue { font-size: 0.82em; line-height: 1.35; color: #fff; background-color: rgba(0,0,0,0.9); }
  /* Optional light inset matte (demo_video.screen_matte): a thin white border
     framing the screen inside the dark monitor bezel, so an edge-to-edge screen
     recording is not flush against the bezel. The ring sits in the .device-frame
     padding gap; it is opt-in so other pages' demos are unaffected. */
  .pillar-page .pillar-demo-video--matte .pillar-demo-embed { box-shadow: 0 0 0 7px #ffffff; }

  /* Prominent cobalt play button overlaid on the demo poster. Scales with the
     frame so it stays a focal point on desktop without swallowing the
     screenshot on a phone, where the video is only ~317px wide. */
  .pillar-page .pillar-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);
    /* Glow tinted with the button's own cobalt (--color-cobalt-400, #0e1fc1) */
    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, box-shadow .15s ease;
  }
  .pillar-page .pillar-demo-play:hover {
    background: var(--color-cobalt-500);
    transform: translate(-50%, -50%) scale(1.06);
  }
  /* Two-tone focus ring: a dark ink ring reads against the light app
     screenshots we use as posters, and the white halo behind it keeps the ring
     visible if a future poster is dark. A single white ring disappears on
     light posters (WCAG 2.4.7). */
  .pillar-page .pillar-demo-play:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.92);
  }
  .pillar-page .pillar-demo-play svg {
    width: 43%;
    height: 43%;
    fill: #fff;
    margin-left: 5%;
  }
  .pillar-page .pillar-demo-play.is-hidden { display: none; }
  /* frame: plain -- the poster is a designed thumbnail, so it sits on the page
     as a lifted card instead of inside the monitor bezel. */
  .pillar-page .pillar-demo-plain { max-width: 1000px; margin: 0 auto; }
  .pillar-page .pillar-demo-plain .pillar-demo-embed { box-shadow: var(--shadow-elevated); }
  /* play_position: left -- the button sits on the poster's left text panel,
     under the headline, so it never covers the people in the photo. */
  .pillar-page .pillar-demo-embed--play-left .pillar-demo-play { left: 5.6%; top: auto; bottom: 12%; transform: none; }
  .pillar-page .pillar-demo-embed--play-left .pillar-demo-play:hover { transform: scale(1.05); }
  @media (max-width: 767px) {
    .pillar-page .pillar-demo-embed--play-left .pillar-demo-play { width: 40px; height: 40px; bottom: 7%; box-shadow: 0 8px 20px -6px rgba(14, 31, 193, 0.55); }
    .pillar-page .pillar-demo-embed--play-left .pillar-demo-play svg { width: 18px; height: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pillar-page .pillar-demo-play:hover { transform: translate(-50%, -50%); }
  }

  /* ---- iPhone frame (demo_video.frame == 'iphone') ---------------------------
     A modern iPhone-Pro mockup, held landscape, wrapping the 16:9 demo (native
     controls intact). Titanium body, thin uniform bezel, big continuous corner
     radius, a Dynamic Island on the left edge and side buttons on the rails. */
  .pillar-page .pillar-demo-iphone { display: flex; justify-content: center; padding: 10px 0 6px; }
  .pillar-page .pillar-demo-iphone-frame {
    position: relative;
    width: min(100%, 900px);
    padding: 13px;
    border-radius: 52px;
    background: linear-gradient(135deg, #4a4d53 0%, #1b1c20 42%, #34373d 78%, #202226 100%);
    box-shadow: 0 34px 74px -30px rgba(9,13,21,.62), inset 0 0 0 1px rgba(255,255,255,.07);
  }
  /* polished titanium rim just inside the body edge */
  .pillar-page .pillar-demo-iphone-frame::before {
    content:""; position:absolute; inset:3px; border-radius:49px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.5);
    pointer-events:none; z-index:3;
  }
  /* side buttons: action + volume on the top rail, power on the bottom rail */
  .pillar-page .pillar-demo-iphone-frame > .btn-l,
  .pillar-page .pillar-demo-iphone-frame > .btn-r {
    position:absolute; background: linear-gradient(180deg,#3a3d42,#232529); z-index:1;
  }
  .pillar-page .pillar-demo-iphone-frame > .btn-l { top:-2px; height:4px; border-radius:2px 2px 0 0; }
  .pillar-page .pillar-demo-iphone-frame > .btn-r { bottom:-2px; height:4px; border-radius:0 0 2px 2px; }
  .pillar-page .pillar-demo-iphone-frame > .b1 { left:20%; width:34px; }
  .pillar-page .pillar-demo-iphone-frame > .b2 { left:31%; width:64px; }
  .pillar-page .pillar-demo-iphone-frame > .b3 { left:26%; width:88px; }
  .pillar-page .pillar-demo-iphone-screen {
    position: relative; border-radius: 40px; overflow: hidden; background:#000;
  }
  .pillar-page .pillar-demo-iphone-screen .pillar-demo-embed { border-radius: 40px; }
  /* Dynamic Island — a black pill on the left edge, vertically centred (landscape) */
  .pillar-page .pillar-demo-iphone-screen::after {
    content:""; position:absolute; top:50%; left:9px; transform:translateY(-50%);
    width:11px; height:82px; border-radius:999px; background:#000;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05); z-index:4; pointer-events:none;
  }
  @media (max-width: 767px) {
    .pillar-page .pillar-demo-iphone-frame { padding: 8px; border-radius: 34px; }
    .pillar-page .pillar-demo-iphone-frame::before { inset:2px; border-radius:32px; }
    .pillar-page .pillar-demo-iphone-screen,
    .pillar-page .pillar-demo-iphone-screen .pillar-demo-embed { border-radius: 26px; }
    .pillar-page .pillar-demo-iphone-screen::after { height:52px; width:8px; left:6px; }
  }

  /* ---- Portrait iPhone 17 pair (demo_video.videos) ---------------------------
     Two portrait phones side by side, one full-bleed app screen each, for the
     Staff App page's "an app for you / an app for your staff" story. Same
     titanium body as the landscape frame, but the screen is held portrait: the
     Dynamic Island is a pill at the top and the side buttons run the vertical
     rails. Each phone wraps the shared click-to-play embed, so the multi-embed
     script below wires both independently. Each unit stacks a persona eyebrow
     above the phone and its title + body copy below it. */
  .pillar-page .pillar-demo-video-head p {
    margin: 10px auto 0; max-width: 56ch; color: var(--ink-3); font-size: 16px;
  }
  .pillar-page .pillar-demo-pair {
    display: grid; grid-template-columns: 1fr 1fr; align-items: start;
    gap: clamp(24px, 5vw, 72px); padding: 8px 0 4px;
  }
  .pillar-page .pillar-demo-unit {
    display: flex; flex-direction: column; align-items: flex-start;
  }
  /* the phone stays narrower than the copy under it */
  .pillar-page .pillar-demo-unit .pillar-demo-ip17 { width: 100%; max-width: 300px; }
  .pillar-page .pillar-demo-ip17 {
    position: relative; width: 100%;
    border-radius: 46px; padding: 11px;
    background: linear-gradient(135deg, #4a4d53 0%, #1b1c20 44%, #34373d 78%, #202226 100%);
    box-shadow: 0 34px 74px -30px rgba(9,13,21,.55), inset 0 0 0 1px rgba(255,255,255,.07);
  }
  .pillar-page .pillar-demo-ip17::before {
    content:""; position:absolute; inset:3px; border-radius:43px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.5);
    pointer-events:none; z-index:6;
  }
  /* side buttons on the vertical rails: action + volume on the left, power right */
  .pillar-page .pillar-demo-ip17 > .btn-l,
  .pillar-page .pillar-demo-ip17 > .btn-r {
    position:absolute; background: linear-gradient(90deg,#3a3d42,#232529); z-index:1;
  }
  .pillar-page .pillar-demo-ip17 > .btn-l { left:-2px; width:4px; border-radius:2px 0 0 2px; }
  .pillar-page .pillar-demo-ip17 > .btn-r { right:-2px; width:4px; border-radius:0 2px 2px 0; }
  .pillar-page .pillar-demo-ip17 > .b1 { top:19%; height:34px; }
  .pillar-page .pillar-demo-ip17 > .b2 { top:29%; height:64px; }
  .pillar-page .pillar-demo-ip17 > .b3 { top:24%; height:88px; }
  .pillar-page .pillar-demo-ip17-screen {
    position: relative; border-radius: 36px; overflow: hidden; background:#000;
    aspect-ratio: 9 / 19.5;
  }
  /* the embed fills the portrait screen, overriding the base 16:9 aspect */
  .pillar-page .pillar-demo-ip17-screen .pillar-demo-embed {
    aspect-ratio: auto; width: 100%; height: 100%; border-radius: 36px; background:#000;
  }
  /* Dynamic Island — a black pill centered at the top */
  .pillar-page .pillar-demo-ip17-screen::after {
    content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
    width:82px; height:11px; border-radius:999px; background:#000;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05); z-index:5; pointer-events:none;
  }
  .pillar-page .pillar-demo-unit-eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
    margin: 0 0 18px;
  }
  .pillar-page .pillar-demo-unit-title {
    font-family: var(--font-display); font-weight: 700; color: var(--color-text-bright);
    font-size: 1.35rem; line-height: 1.2; letter-spacing: -.015em;
    margin: 26px 0 10px; text-wrap: balance;
  }
  .pillar-page .pillar-demo-unit-body {
    margin: 0; color: var(--color-text-body);
    font-size: 15.5px; line-height: 1.6; max-width: 42ch;
  }
  @media (max-width: 767px) {
    .pillar-page .pillar-demo-pair { grid-template-columns: 1fr; gap: 48px; }
    .pillar-page .pillar-demo-ip17 { padding: 8px; border-radius: 36px; }
    .pillar-page .pillar-demo-ip17::before { inset:2px; border-radius:34px; }
    .pillar-page .pillar-demo-ip17-screen,
    .pillar-page .pillar-demo-ip17-screen .pillar-demo-embed { border-radius: 28px; }
    .pillar-page .pillar-demo-ip17-screen::after { width:64px; height:9px; top:8px; }
  }

  /* hero screenshot (below copy) — tablet device frame via .device-frame */
  .pillar-page .pillar-hero-screenshot {
    margin-top: 48px;
  }
  /* plain variant: a rounded light panel for hero illustrations (not app shots).
     The illustration already carries a snow/cream (#fbf5f3 = --paper-2) ground,
     so the panel blends into the band rather than boxing a dark image. */
  .pillar-page .pillar-hero-screenshot--plain {
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .pillar-hero-screenshot--plain img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* hero app showcase (transparent phone mockup, no chrome, rises from section bottom) */
  .pillar-page .pillar-hero--app { padding-bottom: 0; overflow: hidden; }
  .pillar-page .pillar-hero--app .container { align-items: end; }
  .pillar-page .pillar-hero--app .pillar-hero-copy { padding-bottom: 80px; }
  .pillar-page .pillar-hero-app { display: flex; align-items: flex-end; justify-content: center; align-self: end; }
  .pillar-page .pillar-hero-app img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 600px;
    filter: drop-shadow(0 28px 56px rgba(15, 23, 42, 0.16));
  }

  /* ============ HERO — FAQ / Common Questions (centered) ============ */
  .pillar-page .pillar-hero--faq { padding: 56px 0 40px; }
  .pillar-page .pillar-hero--faq .container {
    display: block;
    max-width: 820px;
    text-align: center;
  }
  .pillar-page .pillar-hero--faq .pillar-title {
    font-size: 48px;
  }
  .pillar-page .pillar-hero--faq .pillar-subtitle {
    max-width: 560px;
    margin: 18px auto 0;
  }
  .pillar-page .pillar-hero--faq .pillar-hero-cta {
    justify-content: center;
  }

  /* ============ MOMENTS ============ */
  .pillar-page .pillar-moments { padding: 80px 0; }
  /* Framing banner: a centered rose strip that frames the AAA ladder after the hero. */
  .pillar-page .pillar-framing { padding: 40px 0; }
  .pillar-page .pillar-framing .container { text-align: center; }
  .pillar-page .framing-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: #7c3aed;
    margin: 0 0 12px;
  }
  .pillar-page .framing-eyebrow svg { flex: none; }
  .pillar-page .framing-line {
    max-width: 780px; margin: 0 auto;
    font-family: var(--font-display); font-weight: 600;
    font-size: 22px; line-height: 1.4; letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pillar-page .framing-hl { color: var(--color-cobalt-400); }
  .pillar-page .framing-more { margin: 14px 0 0; }
  .pillar-page .framing-link {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--color-cobalt-400);
    text-decoration: none;
  }
  .pillar-page .framing-link:hover { color: var(--color-cobalt-500); text-decoration: underline; }
  .pillar-page .moments-grid {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  /* Store-team tiles embedded inside the quotes section (under the heading). */
  .pillar-page .moments-grid--embed { margin: 32px 0 40px; }
  /* Collapsed moments (moments.collapse): the .cq-collapse initializer clips the
     grid to data-rows and reveals the rest under "Show more quotes". Its hide rule
     is card-specific (.cq-card.cq-hidden), so mirror it for moment cards. */
  .pillar-page .moment-card.cq-hidden { display: none; }
  .pillar-page .moment-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .moment-photo {
    display: block;
    width: calc(100% + 56px);
    max-width: none;
    margin: -28px -28px 20px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .pillar-page .moment-who {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .pillar-page .moment-where {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 16px;
  }
  .pillar-page .moment-what { font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--ink-2); margin: 0 0 14px; }
  .pillar-page .moment-surface {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-cobalt-500);
    margin: 0;
  }
  /* Stories variant: the quote leads and carries the card; the person and
     store follow as attribution; the switch fact closes as a chip. */
  .pillar-page .moments-grid--stories .moment-card { display: flex; flex-direction: column; }
  .pillar-page .moments-grid--stories .moment-what {
    margin: 0 0 18px; font-family: var(--font-display); font-weight: 600;
    font-size: 19px; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink);
    text-wrap: pretty;
  }
  .pillar-page .moments-grid--stories .moment-who { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
  .pillar-page .moments-grid--stories .moment-where { margin: 0 0 18px; }
  .pillar-page .moments-grid--stories .moment-foot {
    margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  }
  /* surface_style: plain -- the switch fact as one plain line above the
     link instead of a mono chip, so it never wraps into a two-line pill. */
  .pillar-page .moments-grid--plain-surface .moment-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pillar-page .moments-grid--plain-surface .moment-surface {
    display: block; padding: 0; background: none; border: 0; border-radius: 0;
    font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2);
  }
  .pillar-page .moment-link { font-size: 14px; font-weight: 600; color: var(--color-cobalt-400); text-decoration: none; white-space: nowrap; }
  .pillar-page .moment-link:hover { color: var(--color-cobalt-500); }
  /* Whole-card clickable: the story link is stretched over the card, and the card
     lifts on hover. Only cards that carry a link opt in. */
  .pillar-page .moment-card--link { position: relative; transition: box-shadow .15s ease, transform .15s ease; }
  .pillar-page .moment-card--link:hover { box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
  .pillar-page .moment-card--link:focus-within { box-shadow: var(--shadow-elevated); }
  .pillar-page .moment-card--link .moment-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  /* ============ CAPABILITIES (feature rows) ============ */
  .pillar-page .pillar-capabilities { padding: 84px 0; }
  .pillar-page .capabilities-grid { display: flex; flex-direction: column; gap: 72px; margin-top: 56px; }

  /* ---- grouped feature bands (numbered clusters) ---- */
  /* Each band is a full-bleed direct child of .pillar-page that takes its own
     slot in the positional counter, so the clusters alternate rose / white in
     lockstep with the rest of the page and hand the correct color off to the
     section that follows. Rose bands paint their own fill + edges; white (--alt)
     bands borrow the seams of their banded neighbors. The first band carries the
     section heading, so it gets extra top room to breathe under the hero. */
  .pillar-page .capability-band {
    padding: 60px 0;
    background: var(--paper-2);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .capability-band--alt {
    background: var(--paper);
    border-top: 0;
    border-bottom: 0;
  }
  .pillar-page .capability-band--lead { padding-top: 72px; }
  /* The capabilities heading is the header for the whole run of numbered
     clusters, not a sibling of the first one. It sits inside the lead band, so
     without extra size and air it reads as part of cluster 01. A wider step
     over the 25px cluster labels and a gap larger than any spacing inside a
     cluster are what make it parent the block. Scoped to the lead band: the
     shared .pillar-section-head styles other sections across every pillar page. */
  .pillar-page .capability-band--lead .pillar-section-head {
    max-width: 760px;
    margin-bottom: 76px;
  }
  .pillar-page .capability-band--lead .pillar-section-head .section-title {
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  /* The scoped rule above outranks the shared responsive .section-title sizing,
     so it has to step down itself — otherwise the heading stays at 48px on a
     phone while every other section title on the page drops to 25px. */
  @media (max-width: 767px) {
    .pillar-page .capability-band--lead .pillar-section-head {
      margin-bottom: 48px;
    }
    .pillar-page .capability-band--lead .pillar-section-head .section-title {
      font-size: 31px;
    }
  }
  .pillar-page .capability-group-head {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--paper-line);
  }
  /* Sized to sit just under the cluster label rather than tucked beside it, so
     the run reads as 01 -> 04 at a glance. Mono, cobalt and a lighter weight
     keep it subordinate to the label despite the near-matching size. */
  .pillar-page .capability-group-num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-cobalt-400);
    line-height: 1;
  }
  /* Must sit after the base rule above: same specificity, so source order is
     what decides which one applies. */
  @media (max-width: 767px) {
    .pillar-page .capability-group-num { font-size: 20px; }
    .pillar-page .capability-group-head { gap: 16px; }
  }
  .pillar-page .capability-group-heading { min-width: 0; }
  .pillar-page .capability-group-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
  }
  .pillar-page .capability-group-intro {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 8px 0 0;
    max-width: 620px;
  }
  /* "On the old system" eyebrow + "Rundoo fixes it" contrast lead. Opt-in per
     group (issue/fix fields), so other pillar pages are unaffected. */
  .pillar-page .capability-group-issue {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
    margin: 0 0 10px;
  }
  .pillar-page .capability-group-fix {
    font-size: 16px; line-height: 1.58; color: var(--ink-2); margin: 14px 0 0; max-width: 620px;
  }
  .pillar-page .capability-group-fix-lead { font-weight: 700; color: var(--color-cobalt-400); }
  /* On the stable/secure/private page the "Rundoo offers" lead runs a touch larger. */
  body[data-page-slug="product/run-on-a-stable-secure-private-platform"] .pillar-page .capability-group-fix-lead {
    font-size: 18px;
  }
  /* "Learn more" link that belongs to the offer, sitting under the fix paragraph. */
  .pillar-page .capability-group-fix-link { margin: 12px 0 0; }
  /* Verbatim running-copy block for sections authored as prose (not cards). */
  .pillar-page .capability-group-body {
    margin: 14px 0 0;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-2);
  }
  .pillar-page .capability-group-body p { margin: 0 0 12px; }
  .pillar-page .capability-group-body p:last-child { margin-bottom: 0; }
  .pillar-page .capability-group-body strong { color: var(--ink); font-weight: 700; }
  /* Proof quote that rides with the group intro, always visible. */
  .pillar-page .capability-group-quote { margin: 20px 0 0; max-width: 520px; }
  /* One montage video for a whole group, propped in the monitor-on-a-stand bezel. */
  .pillar-page .capability-group-video { margin: 30px auto 0; max-width: 1040px; }
  /* the montage is authored 16:10, so hold that ratio (the base rule crops to 16:9) */
  .pillar-page .capability-group-video .device-frame > video { aspect-ratio: 16 / 10; }
  .pillar-page .capability-group-video figcaption {
    text-align: center; margin-top: 10px; color: var(--ink-3); font-size: 14.5px;
  }
  /* grids sit tight under their cluster head, not at the section's 56px gap */
  .pillar-page .capability-group .capabilities-grid { margin-top: 28px; }
  /* A cluster can carry one wide screenshot of its own, above the cards, for a
     group whose entries are all text but which still wants a visual anchor. */
  .pillar-page .capability-group-media {
    margin-top: 28px;
    background: var(--color-gray-1000);
    border: 1px solid var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: var(--shadow-demo);
  }
  .pillar-page .capability-group-media img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--color-demo-surface);
  }
  .pillar-page .capability-group-media figcaption {
    margin: 12px 4px 2px;
    font-size: 14px;
    color: var(--color-gray-400);
  }
  /* ---- Portrait phone frame (app gifs / tall captures) ----
     The portrait sibling of the landscape demo mockup: titanium body, thin
     uniform bezel, big continuous corner radius. The Dynamic Island is opt-in
     (image_island: true) because most captures carry the app's own top bar at
     the very screen edge, where a fake island would sit on the back arrow. */
  /* iPhone-17-style mockup: thin, uniform titanium rail and the deep corner
     radius of the current models. */
  .pillar-page .phone-frame {
    position: relative;
    width: 100%;
    padding: 8px;
    border-radius: 50px;
    background: linear-gradient(155deg, #6b6e74 0%, #2a2c30 30%, #141517 60%, #303338 85%, #1b1c1f 100%);
    box-shadow: 0 30px 60px -26px rgba(9,13,21,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .pillar-page .phone-frame::before {
    content:""; position:absolute; inset:2px; border-radius:48px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.16), inset 0 -1px 2px rgba(0,0,0,.5);
    pointer-events:none; z-index:3;
  }
  /* side hardware — thin titanium slivers protruding from the rails, so the
     mockup reads as a current iPhone (Action button + volume left, side right)
     rather than a generic slab. Positioned by % height so they scale with the
     frame at every breakpoint. */
  .pillar-page .phone-frame > .phone-btn {
    position: absolute; z-index: 1; width: 3px;
    background: linear-gradient(90deg, #26282c 0%, #3d4045 55%, #202226 100%);
    box-shadow: 0 1px 2px rgba(9,13,21,.35);
  }
  .pillar-page .phone-frame > .phone-btn--action { left: -2px; top: 15%;  height: 5.5%; border-radius: 2px 0 0 2px; }
  .pillar-page .phone-frame > .phone-btn--volup  { left: -2px; top: 24%;  height: 7%;   border-radius: 2px 0 0 2px; }
  .pillar-page .phone-frame > .phone-btn--voldn  { left: -2px; top: 32.5%; height: 7%;   border-radius: 2px 0 0 2px; }
  .pillar-page .phone-frame > .phone-btn--power  { right: -2px; top: 21%; height: 11%;  border-radius: 0 2px 2px 0; }
  .pillar-page .phone-frame-screen { position: relative; border-radius: 42px; overflow: hidden; background: #0b0f16; }
  .pillar-page .phone-frame-screen img,
  .pillar-page .phone-frame-screen video { display: block; width: 100%; }
  .pillar-page .phone-frame--island .phone-frame-screen::after {
    content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:76px; height:12px; border-radius:999px; background:#000;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05); z-index:4; pointer-events:none;
  }
  /* the figure that carries a phone frame + its caption below, unboxed */
  .pillar-page .capability-group-phone { margin: 28px 0 0; width: 100%; max-width: 300px; }
  .pillar-page .capability-group-phone figcaption {
    margin: 16px 4px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
  }
  /* Phone-beside-entries split: the phone anchors the left column and the
     entries stack unboxed in the column to its right. */
  .pillar-page .capability-group-split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 28px;
  }
  .pillar-page .capability-group-split .capability-group-phone { margin-top: 0; }
  .pillar-page .capability-group-split .capabilities-grid { margin-top: 0; }
  /* Photo-beside-entries split (image_frame: photo): the entries stack in the
     left column and one photo fills the column to their right, matching the
     height of the stack rather than sitting above it. Two even columns — a
     photo is not a screenshot, so it does not need the wider track. */
  .pillar-page .capability-group-split--photo {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
  }
  .pillar-page .capability-group-photo {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .pillar-page .capability-group-photo img {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-demo-surface);
  }
  .pillar-page .capability-group-photo figcaption {
    margin: 12px 4px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
  }
  /* Group image beside its text entries (layout: split). Portrait pins a narrow
     phone column; wide gives a landscape capture the larger side. */
  .pillar-page .capability-group-split--portrait { grid-template-columns: 300px 1fr; }
  .pillar-page .capability-group-split--wide {
    grid-template-columns: 1fr 1.32fr; gap: 56px; align-items: center;
  }
  .pillar-page .capability-group-split .capability-group-media { margin-top: 0; }
  /* A capture that carries its own device bezel wants no box around it, just a
     soft drop shadow that follows the phone's rounded corners. */
  .pillar-page .capability-group-media--plain {
    max-width: 300px; margin: 0 auto;
    background: transparent; border: 0; padding: 0; box-shadow: none;
  }
  .pillar-page .capability-group-media--plain img {
    border-radius: 0; background: transparent;
    filter: drop-shadow(0 26px 46px rgba(9,13,21,.30));
  }
  /* ---- Standout group proof quote (bigger, so it carries the band) ---- */
  .pillar-page .capability-group-quote {
    max-width: 580px;
    border-left-width: 4px;
    padding-left: 22px;
  }
  .pillar-page .capability-group-quote blockquote {
    font-size: 20px;
    line-height: 1.42;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 10px;
  }
  /* ---- Ask list (a scannable set of things to ask Dooey) ---- */
  .pillar-page .capability-asks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .pillar-page .capability-asks li {
    position: relative; padding-left: 30px;
    font-size: 16px; line-height: 1.4; color: var(--ink); font-weight: 500;
  }
  .pillar-page .capability-asks li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230e1fc1" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9L12 2Z"/></svg>') no-repeat center / contain;
  }
  /* ---- Horizontal tablet bezel (landscape screenshot) ---- */
  .pillar-page .capability-group-tablet { margin: 0; width: 100%; }
  .pillar-page .tablet-frame {
    position: relative; width: 100%; padding: 13px; border-radius: 26px;
    background: linear-gradient(160deg,#4a4d53 0%,#1b1c20 42%,#34373d 78%,#202226 100%);
    box-shadow: 0 34px 64px -28px rgba(9,13,21,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  }
  .pillar-page .tablet-frame::before {
    content:""; position:absolute; inset:3px; border-radius:23px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.5);
    pointer-events:none; z-index:3;
  }
  .pillar-page .tablet-frame-screen { position:relative; border-radius:15px; overflow:hidden; background:#0b0f16; }
  .pillar-page .tablet-frame-screen img { display:block; width:100%; }
  /* ---- Lifestyle photo (already shows a device): rounded panel, no dark box ---- */
  .pillar-page .capability-group-media--photo {
    background: transparent; border: 0; padding: 0; box-shadow: none; margin: 0;
  }
  .pillar-page .capability-group-media--photo img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-line);
    box-shadow: 0 22px 46px -24px rgba(9,13,21,.42);
  }
  /* ---- Frameless media (image carries its own frame/frames baked in) ---- */
  .pillar-page .capability-group-media--bare {
    background: transparent; border: 0; padding: 0; box-shadow: none; margin: 0;
  }
  .pillar-page .capability-group-media--bare img,
  .pillar-page .capability-group-media--bare video {
    display: block; width: 100%; height: auto; border-radius: 0; background: transparent; box-shadow: none;
  }
  /* ---- Phone beside the whole text block (media_beside: full) ---- */
  .pillar-page .capability-group--beside {
    display: grid;
    grid-template-columns: 1fr 372px;
    column-gap: 64px;
    align-items: start;
  }
  .pillar-page .capability-group-beside-text { min-width: 0; }
  /* Indent the entry stack so it lines up with the heading text (which the
     number column pushes right by its width + the head's 20px gap). */
  .pillar-page .capability-group-beside-text .capabilities-grid { margin-top: 24px; padding-left: 38px; }
  .pillar-page .capability-group-beside-media {
    margin: 0; max-width: 372px; width: 100%; align-self: start;
  }
  .pillar-page .capability-group-beside-media img { max-width: 100%; }
  /* Landscape media (tablet / photo) beside the text: wider column, centered. */
  .pillar-page .capability-group--beside-wide { grid-template-columns: 1fr 1.1fr; align-items: center; }
  /* Landscape/card media rides centered against the text column (the base
     media's align-self: start would otherwise pin it to the top, exposing empty
     space when the card is shorter than the copy). */
  .pillar-page .capability-group--beside-wide .capability-group-beside-media { max-width: 100%; align-self: center; }
  /* media_side: left — mirror the beside layout so the image leads on the left
     and the text block sits on the right (source order stays text-then-media). */
  .pillar-page .capability-group--beside.capability-group--beside-flip { grid-template-columns: 372px 1fr; }
  .pillar-page .capability-group--beside-wide.capability-group--beside-flip { grid-template-columns: 1.1fr 1fr; }
  /* Designed Dooey chat card (clean, readable — not a shrunk screenshot). Mirrors
     the house statement-card look: hairline rows, mono figures, cobalt accents. */
  .pillar-page .capability-group-card { margin: 0; width: 100%; }
  .pillar-page .dooey-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 46px -28px rgba(9,13,21,.30), 0 2px 6px -3px rgba(0,0,0,.06);
    padding: 22px 26px 26px;
  }
  /* App-style top bar */
  .pillar-page .dooey-card-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .dooey-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #7c3aed;
  }
  .pillar-page .dooey-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px; background: #7c3aed; flex: none;
  }
  .pillar-page .dooey-topbar-actions {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap;
  }
  /* Chat messages: avatar + speaker name + text */
  .pillar-page .dooey-msg { display: flex; gap: 12px; align-items: flex-start; }
  .pillar-page .dooey-msg + .dooey-msg { margin-top: 20px; }
  .pillar-page .dooey-avatar {
    flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  }
  .pillar-page .dooey-avatar--user { border-radius: 50%; background: #38b6e6; }
  .pillar-page .dooey-avatar--ai { border-radius: 8px; background: #7c3aed; }
  /* The real Rundoo logomark (snow) sits inside the purple Dooey squares. */
  .pillar-page .dooey-mark-img { width: 60%; height: 60%; object-fit: contain; display: block; }
  .pillar-page .dooey-msg-body { min-width: 0; flex: 1; }
  .pillar-page .dooey-msg-who {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 15px; color: var(--ink); margin-bottom: 4px;
  }
  .pillar-page .dooey-msg-text { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
  .pillar-page .dooey-msg-text strong { color: var(--ink); font-weight: 700; }
  /* Rows table inside the Dooey answer */
  .pillar-page .dooey-card-rows-label {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ink-3); margin: 16px 0 6px;
  }
  .pillar-page .dooey-card-rows {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--paper-line); border-radius: 12px; overflow: hidden;
  }
  .pillar-page .dooey-card-rows li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px;
  }
  .pillar-page .dooey-card-rows li + li { border-top: 1px solid var(--paper-line); }
  .pillar-page .dooey-card-name { font-size: 15px; font-weight: 600; color: var(--ink); }
  .pillar-page .dooey-card-amt {
    font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pillar-page .dooey-card-foot { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: 16px 0 0; }
  /* Crisp HTML render of a Min & Max suggested order (sharp instead of a shrunk screenshot) */
  .pillar-page .order-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 46px -28px rgba(9,13,21,.30), 0 2px 6px -3px rgba(0,0,0,.06);
    padding: 20px 24px 22px;
  }
  .pillar-page .order-card-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .order-card-top--media { align-items: center; }
  .pillar-page .order-card-top--media .order-card-title { flex: 1 1 auto; }
  .pillar-page .order-card-hero-thumb {
    flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: contain;
    background: #fff; border: 1px solid var(--paper-line);
  }
  .pillar-page .order-card-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
  .pillar-page .order-card-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  .pillar-page .order-card-sub { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 12px 0 2px; }
  .pillar-page .order-card-foot--solo { margin-top: 16px; }
  .pillar-page .order-card-table { width: 100%; border-collapse: collapse; }
  .pillar-page .order-card-table th {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 13px 0 9px;
    border-bottom: 1px solid var(--paper-line); white-space: nowrap;
  }
  .pillar-page .order-card-table th:first-child { text-align: left; }
  .pillar-page .order-card-table td {
    font-size: 14.5px; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--paper-line);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pillar-page .order-card-table td:first-child {
    text-align: left; font-weight: 600; padding-right: 16px; white-space: normal;
  }
  .pillar-page .order-card-prod { display: flex; align-items: center; gap: 11px; }
  .pillar-page .order-card-thumb {
    flex: none; width: 34px; height: 34px; border-radius: 7px; object-fit: contain;
    background: #fff; border: 1px solid var(--paper-line);
  }
  .pillar-page .order-card-table tbody tr:last-child td { border-bottom: 0; }
  /* Center the card against the taller text column when it sits beside it */
  .pillar-page .capability-group--beside-flip .capability-group-card { align-self: center; }
  .pillar-page .order-card-table td.order-card-qty { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent); }
  .pillar-page .order-card-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px;
  }
  .pillar-page .order-card-foot { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 0; }
  .pillar-page .order-card-btn {
    flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
    background: var(--color-accent); border-radius: 10px; padding: 11px 18px; white-space: nowrap;
  }
  .pillar-page .capability-group--beside-flip .capability-group-beside-media { order: 1; }
  .pillar-page .capability-group--beside-flip .capability-group-beside-text { order: 2; }
  /* Unboxed entry stack (beside a phone frame): plain title/body blocks
     separated by hairlines instead of white cards. */
  .pillar-page .capabilities-grid--plain { display: flex; flex-direction: column; gap: 0; }
  /* main.css paints every .capability-card as a raised box with !important;
     the plain stack is explicitly unboxed, so fight fire with fire. */
  .pillar-page .capabilities-grid--plain .capability-card {
    display: block;
    padding: 22px 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .capabilities-grid--plain .capability-card:first-child { padding-top: 0; }
  .pillar-page .capabilities-grid--plain .capability-card:last-child { border-bottom: 0; padding-bottom: 0; }
  .pillar-page .capabilities-grid--plain .capability-title { font-size: 19px; margin: 0 0 8px; }
  .pillar-page .capabilities-grid--plain .capability-body { font-size: 15px; }
  /* Phone showcase (layout: phones): each entry is a phone-framed capture
     with its title and body below it as plain text — no card, no box. */
  .pillar-page .capability-phones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 56px;
    margin-top: 36px;
  }
  .pillar-page .capability-phone { margin: 0; }
  .pillar-page .capability-phone .phone-frame { max-width: 300px; }
  .pillar-page .capability-phone figcaption { margin-top: 24px; max-width: 460px; }
  .pillar-page .capability-phone .capability-title { font-size: 21px; margin: 0 0 10px; }
  .pillar-page .capability-phone .capability-body { font-size: 15.5px; }
  /* Screenshot column is always 1.15fr and text 1fr in every row, so adjacent
     capability screenshots render at the same width. Previously odd rows put
     the image in the 1fr column, shrinking every other screenshot. */
  .pillar-page .capability-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .pillar-page .capability-card:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
  .pillar-page .capability-card:nth-child(even) .capability-text { order: 2; }
  .pillar-page .capability-card:nth-child(even) .capability-image { order: 1; }
  /* no-image capabilities collapse to a tidy 2-up text grid */
  /* Split capability rows: copy and its detail on the left, the visual on the
     right. Everything is visible, so there is no toggle, no JS and no ARIA
     contract to keep honest. Used by the farm & feed page via layout: split. */
  .pillar-page .cap-split { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 56px; }
  .pillar-page .cap-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
    background: #fff; border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg); padding: 24px;
  }
  .pillar-page .cap-row-copy { display: flex; flex-direction: column; gap: 8px; }
  .pillar-page .cap-row-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 2px; }
  .pillar-page .cap-row-num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-cobalt-400);
    line-height: 1;
  }
  .pillar-page .cap-row-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; text-wrap: balance; }
  .pillar-page .cap-row-body { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
  .pillar-page .cap-row-points { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .pillar-page .cap-row-points li { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); padding-left: 18px; position: relative; }
  .pillar-page .cap-row-points li strong { font-weight: 600; color: var(--ink); }
  .pillar-page .cap-row-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .pillar-page .cap-row-media { margin: 0; }
  .pillar-page .cap-row-media img { display: block; width: 100%; border-radius: var(--radius-md); }
  /* A phone-framed visual sits centred at handset width instead of filling the column. */
  .pillar-page .cap-row-media--phone { display: flex; justify-content: center; align-items: start; }
  .pillar-page .cap-row-media--phone .phone-frame { width: 100%; max-width: 280px; }
  .pillar-page .cap-row-media--phone .phone-frame-screen img { border-radius: 0; }
  @media (max-width: 1199px) {
    .pillar-page .cap-row { grid-template-columns: 1fr; gap: 20px; }
  }
  /* Compact list under the split rows for the value props that earn a line
     but not a screenshot. Hairline rows, title left and one line right; no
     numerals or icons, so the three featured rows above keep the emphasis. */
  .pillar-page .cap-more { margin-top: 48px; }
  .pillar-page .cap-more-heading { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; }
  .pillar-page .cap-more-list { margin: 0; border-top: 1px solid var(--paper-line); }
  .pillar-page .cap-more-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px;
    padding: 18px 0; border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .cap-more-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; }
  .pillar-page .cap-more-body { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
  .pillar-page .cap-more-link { font-weight: 600; color: var(--color-cobalt-400); text-decoration: none; white-space: nowrap; }
  .pillar-page .cap-more-link:hover { color: var(--color-cobalt-500); }
  @media (max-width: 767px) {
    .pillar-page .cap-more-row { grid-template-columns: 1fr; gap: 6px; }
  }
  .pillar-page .pillar-chapter-more .cap-more { margin-top: 0; }
  /* Iconed variant: two columns of hairline rows. In its own band the heading
     steps up to read as a section, not a caption. */
  .pillar-page .pillar-chapter-more .cap-more-heading { font-size: 28px; margin-bottom: 8px; }
  .pillar-page .cap-more-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 0;
  }
  .pillar-page .cap-more-item {
    display: flex; align-items: flex-start; gap: 16px; padding: 22px 0;
    border-top: 1px solid var(--paper-line);
  }
  .pillar-page .cap-more-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--paper-line); }
  .pillar-page .cap-more-icon {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-green-50); color: var(--color-cobalt-400);
  }
  .pillar-page .cap-more-text { min-width: 0; }
  .pillar-page .cap-more--icons .cap-more-title { font-size: 17px; line-height: 1.3; }
  .pillar-page .cap-more--icons .cap-more-body { margin-top: 4px; font-size: 15px; }
  @media (max-width: 767px) {
    .pillar-page .cap-more-grid { grid-template-columns: 1fr; }
    .pillar-page .cap-more-item:nth-last-child(-n+2) { border-bottom: 0; }
    .pillar-page .cap-more-item:last-child { border-bottom: 1px solid var(--paper-line); }
    .pillar-page .pillar-chapter-more .cap-more-heading { font-size: 24px; }
  }
  /* ---- chapters: one featured capability per band ----
     Copy takes ~40%, the visual ~60%, sides alternating. The visual sits on a
     tinted stage that inverts against its band (rose stage on white, white on
     rose) so a cropped screenshot has a ground without pretending to be a
     whole screen. The three points render as a proof strip under the pair. */
  .pillar-page .pillar-chapter .chapter {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
  }
  /* Flipped chapters put the visual first. `order` alone would drop it into
     the narrow 5fr cell, so the column widths swap with it and the visual
     keeps ~60% of the row on either side. */
  .pillar-page .pillar-chapter--flip .chapter,
  .pillar-page .pillar-chapter .chapter--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pillar-page .pillar-chapter--flip .chapter-copy,
  .pillar-page .chapter--flip .chapter-copy { order: 2; }
  .pillar-page .pillar-chapter--flip .chapter-visual,
  .pillar-page .chapter--flip .chapter-visual { order: 1; }
  /* chapters_panel: true -- every chapter shares one band; rows still
     alternate sides (.chapter--flip) and are spaced instead of banded. */
  .pillar-page .pillar-chapter-panel .chapter + .chapter,
  .pillar-page .pillar-chapter-panel .chapter-proof + .chapter { margin-top: 120px; }
  /* In the panel the text and the visual split the row evenly, so no image
     takes more than half the width (the ALLPRO workflow rows are close to
     this, at 0.9fr / 1.1fr). */
  .pillar-page .pillar-chapter-panel .chapter,
  .pillar-page .pillar-chapter-panel .chapter.chapter--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* chapter_media: wide -- give the visual more of the row (~67%) and tighten the
     gap, so cropped screenshots read larger. Opt-in per page. */
  .pillar-page .pillar-chapter--wide .chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 44px; }
  .pillar-page .pillar-chapter--wide.pillar-chapter--flip .chapter,
  .pillar-page .pillar-chapter--wide .chapter.chapter--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .pillar-page .pillar-chapter--wide .chapter-visual--phone .phone-frame { max-width: 340px; }
  .pillar-page .chapter-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .pillar-page .chapter-eyebrow { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; }
  .pillar-page .chapter-num { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
  /* marker: step -- the chapter number as a cobalt circle in place of the
     eyebrow, matching the partner-page workflow steps (.pd-flow-step). */
  .pillar-page .chapter-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;
  }
  /* An eyebrow beside the step circle, on one line. */
  .pillar-page .chapter-step-row { margin: 0; display: inline-flex; align-items: center; gap: 12px; }
  /* game_changers band */
  .pillar-page .pillar-gamechangers { background: var(--color-cobalt-50); padding: 96px 0; }
  .pillar-page .gc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pillar-page .gc-card { background: #fff; border: 1px solid var(--color-cobalt-100); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
  .pillar-page .gc-visual { margin: 0; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #f8f9fd; border-bottom: 1px solid var(--color-cobalt-100); }
  /* Flat #f8f9fd matches the ground baked into the rebuilt product images, so a
     contained image meets the tile without a seam. */
  .pillar-page .gc-visual > img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pillar-page .gc-visual--phone { align-items: flex-start; padding-top: 36px; }
  .pillar-page .gc-visual--phone .phone-frame { width: 240px; max-width: 240px; }
  .pillar-page .gc-copy { padding: 28px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .pillar-page .gc-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
  .pillar-page .gc-body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
  @media (max-width: 767px) {
    .pillar-page .pillar-gamechangers { padding: 64px 0; }
    .pillar-page .gc-grid { grid-template-columns: 1fr; gap: 16px; }
    .pillar-page .gc-visual { height: 300px; }
    .pillar-page .gc-visual--phone { padding-top: 24px; }
    .pillar-page .gc-visual--phone .phone-frame { width: 200px; }
    .pillar-page .gc-title { font-size: 22px; }
  }
  .pillar-page .chapter-step-label { margin: 0; }
  .pillar-page .chapter-dot { color: var(--ink-3, var(--ink-2)); }
  .pillar-page .chapter-title {
    margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 38px;
    line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance;
  }
  .pillar-page .chapter-body { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
  /* Per-chapter proof quote: the brand's blue-fill callout (.capability-group-quote),
     kept to the chapter copy column so it never overflows the band. */
  .pillar-page .chapter-quote { max-width: 100%; }
  .pillar-page .chapter-copy .capability-link { margin-top: 4px; }
  /* photo_band mosaic */
  .pillar-page .photo-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 320px; gap: 16px; }
  .pillar-page .photo-mosaic--rows { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 290px; }
  .pillar-page .photo-mosaic--rows .photo-mosaic-item:nth-child(4n+1),
  .pillar-page .photo-mosaic--rows .photo-mosaic-item:nth-child(4n) { grid-column: span 2; }
  /* Five photos in two rows: a wide and a narrow tile on top, three equal
     tiles below, on a six-column grid. */
  .pillar-page .photo-mosaic--five { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 290px; }
  .pillar-page .photo-mosaic--five .photo-mosaic-item { grid-column: span 2; }
  .pillar-page .photo-mosaic--five .photo-mosaic-item:first-child { grid-column: span 4; }
  .pillar-page .photo-mosaic-item { position: relative; margin: 0; min-height: 220px; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-3, #f5ece9); }
  .pillar-page .photo-mosaic-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 767px) {
    .pillar-page .photo-mosaic--rows { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: 10px; }
    .pillar-page .photo-mosaic--rows .photo-mosaic-item:nth-child(4n+1),
    .pillar-page .photo-mosaic--rows .photo-mosaic-item:nth-child(4n) { grid-column: 1 / span 2; grid-row: span 1; }
    .pillar-page .photo-mosaic { grid-auto-rows: 220px; gap: 10px; }
    .pillar-page .photo-mosaic--five { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
    .pillar-page .photo-mosaic--five .photo-mosaic-item { grid-column: span 1; }
    .pillar-page .photo-mosaic--five .photo-mosaic-item:first-child { grid-column: 1 / span 2; }
    .pillar-page .photo-mosaic-item { min-height: 0; }
    .pillar-page .photo-mosaic-item figcaption { left: 8px; bottom: 8px; right: 8px; width: fit-content; font-size: 11.5px; padding: 3px 8px; }
  }
  /* points_style: list -- the points sit under the body as short bullets
     instead of the proof strip below the pair, each marked with a cobalt
     check in a tinted circle. */
  .pillar-page .chapter-points { margin: 2px 0 0; gap: 10px; }
  .pillar-page .chapter-points li { font-size: 17px; color: var(--ink); padding-left: 30px; }
  .pillar-page .chapter-points li::before {
    top: 4px; width: 18px; height: 18px; box-sizing: border-box;
    background: var(--color-cobalt-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1fc1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border: 1px solid var(--color-cobalt-100);
  }
  .pillar-page .chapter-visual { margin: 0; min-width: 0; }
  /* The visual floats on the band: one radius, the page's elevation, no box
     and no border, so there is a single edge rather than a frame in a frame.
     The band colour is the ground; the shadow separates a white card from a
     white band. The phone frame carries its own shadow already. */
  .pillar-page .chapter-stage { display: flex; justify-content: center; align-items: center; }
  .pillar-page .chapter-stage > img {
    display: block; width: 100%; background: #fff;
    border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  }
  .pillar-page .chapter-visual--phone .phone-frame { width: 100%; max-width: 300px; }
  /* image_frame: framed -- the image carries its own tinted ground and card
     shadow (a product screen rebuilt from docs/image-sources), so the stage
     keeps the radius and drops its white fill and elevation. */
  .pillar-page .chapter-visual--framed .chapter-stage > img { background: none; box-shadow: none; }
  /* Roadmap rows: the same chapter grid, drawn as a plan. The status chip is
     the first thing read, the visual is outlined with a dashed hairline and no
     elevation, and a short note under the body says who shapes it. */
  .pillar-page .roadmap-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    border: 1.5px dashed var(--brand); color: var(--brand);
    font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  }
  .pillar-page .pillar-roadmap .chapter-stage > img {
    box-shadow: none; border: 1.5px dashed var(--paper-line); background: transparent;
  }
  .pillar-page .roadmap-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-3, var(--ink-2)); max-width: 44ch; }
  .pillar-page .chapter-proof {
    list-style: none; margin: 40px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  }
  .pillar-page .chapter-proof li {
    border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: var(--paper);
    padding: 18px 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2);
  }
  .pillar-page .pillar-chapter:not(.capability-band--alt) .chapter-proof li { background: var(--paper); }
  .pillar-page .capability-band--alt .chapter-proof li { background: var(--paper-2); }
  .pillar-page .chapter-proof li strong {
    display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px;
    letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px;
  }
  @media (max-width: 1199px) {
    .pillar-page .pillar-chapter .chapter { grid-template-columns: 1fr; gap: 28px; }
    /* --wide adds a 4-class flip rule that would otherwise outrank the stack
       above; match its specificity so wide chapters stack on mobile too. */
    .pillar-page .pillar-chapter--wide .chapter,
    .pillar-page .pillar-chapter--wide.pillar-chapter--flip .chapter,
    .pillar-page .pillar-chapter .chapter.chapter--flip,
    .pillar-page .pillar-chapter--wide .chapter.chapter--flip { grid-template-columns: 1fr; }
    .pillar-page .pillar-chapter .chapter-visual,
    .pillar-page .pillar-chapter--flip .chapter-visual,
    .pillar-page .chapter--flip .chapter-visual { order: 1; }
    .pillar-page .pillar-chapter .chapter-copy,
    .pillar-page .pillar-chapter--flip .chapter-copy,
    .pillar-page .chapter--flip .chapter-copy { order: 2; }
    /* capabilities.mobile_copy_first: true -- heading and points before the
       visual when stacked, for pages whose visuals are step cards or chat
       mocks that read as sub-steps of the chapter rather than as its hero. */
    .pillar-page .pillar-chapter.pillar-chapter--copy-first .chapter-copy { order: 1; }
    .pillar-page .pillar-chapter.pillar-chapter--copy-first .chapter-visual { order: 2; }
    .pillar-page .pillar-chapter-panel .chapter + .chapter,
    .pillar-page .pillar-chapter-panel .chapter-proof + .chapter { margin-top: 72px; }
    .pillar-page .pillar-chapter-panel .chapter,
    .pillar-page .pillar-chapter-panel .chapter.chapter--flip { grid-template-columns: 1fr; }
  }
  @media (max-width: 767px) {
    .pillar-page .chapter-title { font-size: 28px; }
    .pillar-page .chapter-visual--phone .phone-frame { max-width: 240px; }
    .pillar-page .chapter-proof { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  }
  .pillar-page .capabilities-grid--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .pillar-page .capabilities-grid--cards .capability-card {
    display: block;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
    transition: border-color .15s ease, transform .15s ease;
  }
  .pillar-page .capabilities-grid--cards .capability-card:hover {
    border-color: var(--color-cobalt-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
  /* a lone feature in its own band (e.g. a Dooey pull-out) spans full width */
  .pillar-page .capabilities-grid--single { grid-template-columns: 1fr; }
  .pillar-page .capability-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: 18px;
  }
  /* AI-tagged capability eyebrow (violet variant) */
  .pillar-page .capability-eyebrow--ai {
    background: var(--color-violet-50);
    border-color: var(--color-violet-200);
    color: var(--color-violet-700);
    gap: 7px;
  }
  .pillar-page .capability-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 27px;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ink);
  }
  .pillar-page .capabilities-grid--cards .capability-title { font-size: 20px; margin: 0 0 8px; }
  .pillar-page .capability-subtitle { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); margin: 0 0 12px; }
  .pillar-page .capability-body { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .pillar-page .capabilities-grid--cards .capability-body { font-size: 15px; }
  /* One-line italic hook (the reader's situation) sitting between title and body. */
  .pillar-page .capability-hook {
    font-size: 15px; line-height: 1.45; font-style: italic; color: var(--ink);
    opacity: 0.82; margin: 0 0 10px;
  }
  .pillar-page .capabilities-grid--cards .capability-hook { font-size: 14.5px; }
  /* Concrete Dooey prompt / result snippet: mono, warm chip, cobalt spine. Keeps
     the card scannable and honest without another paragraph of prose. */
  .pillar-page .capability-eg {
    font-family: var(--font-mono);
    font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
    background: var(--paper-2); border-left: 2px solid var(--color-cobalt-400);
    border-radius: 0 6px 6px 0; padding: 10px 13px; margin: 16px 0 0;
  }
  .pillar-page .capability-eg .capability-eg-label {
    display: block; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-cobalt-500); margin-bottom: 5px;
  }
  .pillar-page .capability-link {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-cobalt-400);
    text-decoration: none;
  }
  .pillar-page .capability-link:hover { color: var(--color-cobalt-500); }
  .pillar-page .capability-image {
    background: var(--color-gray-1000);
    border: 1px solid var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: var(--shadow-demo);
  }
  .pillar-page .capability-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-demo-surface);
  }
  /* Reserved image/gif slot: a light dashed box, not the dark screenshot frame. */
  .pillar-page .capability-image--placeholder {
    background: var(--paper-2);
    border: 1px dashed var(--paper-line);
    box-shadow: none;
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .pillar-page .capability-image-ph-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-cobalt-500);
  }
  .pillar-page .capability-image-ph-hint {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-3);
    max-width: 78%;
  }
  /* Slim phone-proportioned entry screenshot (image_size: phone): keep it long
     and narrow rather than filling the whole card column. */
  .pillar-page .capability-image--phone { max-width: 300px; }
  /* Staggered group (layout: stagger): alternate the screenshot side so cards
     read image-left / text-right, then text-left / image-right down the column.
     The slim image hugs the outer edge of its row. */
  .pillar-page .capabilities-grid--stagger .capability-card:nth-child(even) .capability-text { order: 1; }
  .pillar-page .capabilities-grid--stagger .capability-card:nth-child(even) .capability-image { order: 2; }
  .pillar-page .capabilities-grid--stagger .capability-card:nth-child(odd) .capability-image--phone { margin-right: auto; }
  .pillar-page .capabilities-grid--stagger .capability-card:nth-child(even) .capability-image--phone { margin-left: auto; }
  /* Alternating full-width screenshot rows (layout: alternating): image and text
     swap sides down the column, but unlike --stagger the image keeps the wider
     1.15fr column on BOTH sides, so every screenshot renders at the same width.
     Odd rows are image-left / text-right (the base); even rows flip both the
     column widths and the order to text-left / image-right. */
  .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
  .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) .capability-text { order: 1; }
  .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) .capability-image { order: 2; }
  /* media_side: right — flip the parity so the FIRST row leads with text and the
     image/gif sits on the right, then swaps down the column. */
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(odd) { grid-template-columns: 1fr 1.15fr; }
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(odd) .capability-text { order: 1; }
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(odd) .capability-image { order: 2; }
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(even) { grid-template-columns: 1.15fr 1fr; }
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(even) .capability-text { order: 2; }
  .pillar-page .capabilities-grid--media-right .capability-card:nth-child(even) .capability-image { order: 1; }

  /* ============ BRIEF (why we built it / why it matters) ============
     A compact two-column band that carries the launch context a seller needs
     before the feature tour: the reasoning on the left, the evidence on the
     right. Deliberately small — it sets up the page rather than competing
     with it. */
  .pillar-page .pillar-brief { padding: 72px 0; }
  .pillar-page .brief-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 44px;
    align-items: start;
  }
  .pillar-page .brief-col-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cobalt-400);
    margin: 0 0 20px;
  }
  .pillar-page .brief-list { list-style: none; margin: 0; padding: 0; counter-reset: brief-step; }
  .pillar-page .brief-list li {
    counter-increment: brief-step;
    position: relative;
    padding-left: 38px;
    margin-bottom: 20px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .pillar-page .brief-list li:last-child { margin-bottom: 0; }
  .pillar-page .brief-list li::before {
    content: counter(brief-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-cobalt-400);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 24px;
  }
  .pillar-page .brief-list strong { color: var(--ink); font-weight: 700; }
  .pillar-page .brief-quote {
    border: 1px solid var(--color-cobalt-border);
    background: var(--color-cobalt-50);
    padding: 18px 22px;
    margin: 0 0 20px;
    border-radius: var(--radius-lg);
  }
  .pillar-page .brief-quote p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
  }
  .pillar-page .brief-quote cite {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-cobalt-500);
  }
  /* Full-row pull quote (brief.quote_layout: full): the customer's own words
     get the whole row in the house pull-quote style — cobalt left border on a
     cobalt-tint fill — instead of sharing a column with the points list. */
  .pillar-page .brief-quote--full {
    margin: 40px 0 0;
    padding: 34px 40px;
    border: 0;
    border-left: 4px solid var(--color-cobalt-400);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .pillar-page .brief-quote--full p {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(21px, 2.6vw, 27px);
    line-height: 1.4;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
  }
  .pillar-page .brief-quote--full cite { font-size: 12.5px; }
  .pillar-page .brief-points { list-style: none; margin: 0; padding: 0; }
  .pillar-page .brief-points li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 13px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .pillar-page .brief-points li:last-child { margin-bottom: 0; }
  .pillar-page .brief-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-cobalt-200);
  }

  /* download strip — the PDF of this page for a rep to send or print */
  .pillar-page .pillar-capabilities--tail { padding-top: 0; }
  .pillar-page .brief-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 44px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
  }
  .pillar-page .brief-download-text { min-width: 0; }
  .pillar-page .brief-download-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .pillar-page .brief-download-meta { margin: 0; font-size: 14px; color: var(--ink-3); }
  .pillar-page .brief-download .btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--radius-md);
    background: var(--color-cobalt-400);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
  }
  .pillar-page .brief-download .btn:hover { background: var(--color-cobalt-500); }

  /* ============ QUESTIONS ("ask yourself these questions") ============
     A self-assessment checklist. Reads as prompts an owner answers about
     their own store, not as a pitch. */
  .pillar-page .pillar-questions { padding: 84px 0; }
  .pillar-page .questions-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .pillar-page .question-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .question-num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-cobalt-400);
    line-height: 1.5;
    padding-top: 1px;
  }
  .pillar-page .question-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
  }
  .pillar-page .questions-note {
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-3);
    max-width: 720px;
  }

  /* ============ COMPARISON (how Rundoo differs from a category of system) ============
     Two-up cards, each naming a category of competing system and setting what it
     runs out of road on against what Rundoo does instead. The "shortfall" list is
     deliberately ink-3 with a neutral dash, and the Rundoo list carries the cobalt
     check, so the eye reads the contrast without a second accent color entering
     the palette. */
  .pillar-page .pillar-comparison { padding: 84px 0; }
  .pillar-page .comparison-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  /* layout: versus -- one system head-to-head with Rundoo inside a SINGLE card:
     them on the left, Rundoo (cobalt) on the right, split by a divider seam with
     a "vs" medallion so the two columns read as one connected comparison. */
  .pillar-page .comparison-versus {
    margin-top: 48px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
    overflow: hidden;
  }
  .pillar-page .comparison-vs-col { display: flex; flex-direction: column; padding: 30px; }
  .pillar-page .comparison-vs-col--them { border-right: 1px solid var(--paper-line); }
  .pillar-page .comparison-vs-col--rundoo { background: var(--color-cobalt-50); }
  /* Rundoo block heads its own column here, so drop the divider and the
     push-to-bottom the stacked single-card layout uses. */
  .pillar-page .comparison-vs-col--rundoo .comparison-block--rundoo {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .pillar-page .comparison-vs-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--color-cobalt-200);
    box-shadow: var(--shadow-control); z-index: 2;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-weight: 700; font-size: 12px; letter-spacing: .08em;
    color: var(--color-cobalt-400); text-transform: uppercase;
  }
  .pillar-page .comparison-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .comparison-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--ink);
  }
  .pillar-page .comparison-systems {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    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: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-3);
    margin: 0 0 24px;
  }
  .pillar-page .comparison-block-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
  }
  .pillar-page .comparison-block--rundoo .comparison-block-label { color: var(--color-cobalt-500); }
  .pillar-page .comparison-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .pillar-page .comparison-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  /* Neutral dash for the shortfall list, cobalt check for the Rundoo list. Both
     are drawn rather than typed so no glyph leaks into a screen reader. */
  .pillar-page .comparison-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--paper-line);
  }
  .pillar-page .comparison-block--rundoo .comparison-list li::before {
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--color-cobalt-50) no-repeat center / 10px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1fc1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    box-shadow: inset 0 0 0 1px var(--color-cobalt-border);
  }
  /* The Rundoo half is pinned to the bottom of the card so the two cards' cobalt
     blocks line up even when their shortfall lists are different lengths. */
  .pillar-page .comparison-block--rundoo {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }
  .pillar-page .comparison-block--shortfall { padding-bottom: 24px; }
  .pillar-page .comparison-block--strength { padding-bottom: 24px; }
  .pillar-page .comparison-strength {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-2);
  }

  /* Links out to each competitor's own e-commerce marketing, so a reader can
     check our characterization against what they actually claim. */
  .pillar-page .comparison-sources {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--paper-line);
  }
  .pillar-page .comparison-sources-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
  }
  .pillar-page .comparison-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .pillar-page .comparison-sources a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 8px 11px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
  }
  .pillar-page .comparison-sources a:hover { border-color: var(--color-cobalt-200); color: var(--color-cobalt-400); }
  /* Coming soon chip beside a feature title (Also built in). */
  .pillar-page .soon-chip {
    display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    border: 1.5px dashed var(--color-accent); color: var(--color-accent); white-space: nowrap;
    font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase;
  }
  .pillar-page .cmp-matrix-sources { border-top: 0; margin-top: 18px; padding-top: 0; }
  .pillar-page .cmp-guide-link { display: inline-block; margin-top: 18px; }
  .pillar-page .comparison-sources a svg { flex: none; opacity: .55; }
  /* href-less source: the same chip, minus the link affordances */
  .pillar-page .comparison-source-plain {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 8px 11px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
  }

  /* ---- Task comparison (comparison.layout == 'tasks') ----
     The same job, two ways. Old-way column stays neutral and step-heavy; the
     Dooey column gets a light cobalt wash and stays deliberately short, so the
     whitespace itself reads as the payoff. Cobalt is the only accent. */
  /* ---- Time-saved chart (comparison.chart) --------------------------------
     One shared minutes axis, warm-grey (other systems) vs cobalt (Rundoo +
     Dooey). The cobalt fill is honestly a sliver; the empty track is the point.
     Every bar carries its own mono time badge, so it is read from the badge and
     legend, never from length or color alone. */
  .pillar-page .timesaved-chart {
    margin: 48px 0 4px;
    padding: 30px 32px 24px;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-control);
  }
  .pillar-page .timesaved-stat {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--ink-2);
  }
  .pillar-page .timesaved-stat-before { color: var(--ink); font-weight: 700; }
  .pillar-page .timesaved-stat-lead { font-weight: 500; }
  .pillar-page .timesaved-stat-after { color: var(--color-cobalt-400); font-weight: 700; }
  .pillar-page .timesaved-legend {
    display: flex; flex-wrap: wrap; gap: 20px;
    margin-bottom: 22px;
  }
  .pillar-page .timesaved-legend-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .pillar-page .timesaved-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
  .pillar-page .timesaved-swatch--old { background: #8f827b; }
  .pillar-page .timesaved-swatch--ai { background: var(--color-cobalt-400); }
  .pillar-page .timesaved-rows { display: flex; flex-direction: column; gap: 22px; }
  .pillar-page .timesaved-row-label {
    margin: 0 0 10px;
    font-size: 14px; font-weight: 600; color: var(--ink);
  }
  .pillar-page .timesaved-bars { display: flex; flex-direction: column; gap: 8px; }
  .pillar-page .timesaved-bar { display: flex; align-items: center; gap: 10px; min-height: 22px; }
  .pillar-page .timesaved-fill {
    height: 22px; border-radius: 5px; flex: none; min-width: 6px;
    transition: filter .15s ease;
  }
  .pillar-page .timesaved-fill--old { background: #8f827b; }
  .pillar-page .timesaved-fill--ai { background: var(--color-cobalt-400); }
  .pillar-page .timesaved-bar:hover .timesaved-fill { filter: brightness(0.94); }
  .pillar-page .timesaved-time {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--ink-3); white-space: nowrap;
  }
  .pillar-page .timesaved-time--ai { color: var(--color-cobalt-400); }
  .pillar-page .timesaved-week {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }
  .pillar-page .timesaved-week-head {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pillar-page .timesaved-rows--wk { gap: 8px; }
  .pillar-page .timesaved-week-note {
    margin: 16px 0 0;
    font-size: 14px; line-height: 1.55; color: var(--ink-2);
  }
  .pillar-page .timesaved-week-note a {
    color: var(--color-cobalt-400);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--color-cobalt-200);
  }
  .pillar-page .timesaved-week-note a:hover { border-bottom-color: var(--color-cobalt-400); }
  .pillar-page .timesaved-caption {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--paper-line);
    font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  }
  .pillar-page .task-compare-grid {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pillar-page .task-compare {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .task-compare-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
    color: var(--ink);
  }
  .pillar-page .task-compare-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .pillar-page .task-col { padding: 22px 24px; }
  .pillar-page .task-col--old { background: #fff; border-right: 1px solid var(--paper-line); }
  .pillar-page .task-col--ai { background: var(--color-cobalt-50); }
  .pillar-page .task-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  .pillar-page .task-col-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .pillar-page .task-col--ai .task-col-label { color: var(--color-cobalt-500); }
  .pillar-page .task-col--ai .task-col-label svg { flex: none; }
  .pillar-page .task-time {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .pillar-page .task-col--ai .task-time {
    background: var(--color-cobalt-500);
    color: #fff;
  }
  .pillar-page .task-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .pillar-page .task-steps li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
  }
  .pillar-page .task-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--paper-line);
  }
  .pillar-page .task-prompt {
    position: relative;
    margin: 0 0 14px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--color-cobalt-border);
    border-radius: 14px 14px 14px 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
  }
  .pillar-page .task-prompt-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-cobalt-400);
    margin-bottom: 6px;
  }
  .pillar-page .task-answer {
    position: relative;
    margin: 0;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
  }
  .pillar-page .task-answer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--color-cobalt-500) no-repeat center / 10px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
  .pillar-page .task-compare-quote {
    margin: 22px 0 0;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--color-cobalt-500);
  }
  .pillar-page .task-compare-quote blockquote {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
  }
  .pillar-page .task-compare-quote figcaption {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-3);
  }
  .pillar-page .task-quote-where { color: var(--ink-3); font-weight: 500; }
  .pillar-page .task-quote-where::before { content: " · "; }

  /* Proof attached to a capability card: a cobalt-left-border pull-quote so the
     evidence sits next to the claim it backs. */
  .pillar-page .capability-quote {
    margin: 20px 0 0;
    padding: 2px 0 2px 18px;
    border-left: 3px solid var(--color-cobalt-500);
  }
  .pillar-page .capability-quote blockquote {
    margin: 0 0 7px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink);
  }
  .pillar-page .capability-quote figcaption {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-3);
  }
  .pillar-page .capability-quote-where { color: var(--ink-3); font-weight: 500; }
  .pillar-page .capability-quote-where::before { content: " · "; }
  /* Per-band proof quote as a highlighted callout: cobalt-tint fill behind the
     cobalt left border (the brand's house pattern for client quotes), bigger type. */
  .pillar-page .capability-group-quote {
    background: var(--color-cobalt-50);
    border-left: 4px solid var(--color-cobalt-400);
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    max-width: 620px;
  }
  .pillar-page .capability-group-quote blockquote {
    font-size: 20px;
    line-height: 1.45;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .pillar-page .capability-group-quote figcaption { color: var(--ink-3); }
  /* Section head with a boxed customer quote to the right of the copy. */
  .pillar-page .pillar-section-head--split {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 44px;
    align-items: end;
  }
  .pillar-page .pillar-section-head--split .pillar-section-head-copy { max-width: 680px; }
  /* Boxed variant of the quote: a card, not the plain left-rule pull-quote. */
  .pillar-page .pillar-section-head-quote {
    margin: 0;
    padding: 22px 24px;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--color-cobalt-500);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-control);
  }
  .pillar-page .pillar-section-head-quote blockquote { font-size: 16.5px; font-style: italic; }
  /* Full-width variant: heading + subheading run the whole content column, and the
     cobalt quote box sits below them, spanning the full width. */
  .pillar-page .pillar-section-head--full-quote { max-width: 100%; }
  .pillar-page .pillar-section-head--full-quote .pillar-section-head-copy { max-width: 100%; }
  .pillar-page .pillar-section-head-quote--full { margin-top: 32px; }
  .pillar-page .pillar-section-head-quote--full blockquote { font-size: 20px; line-height: 1.5; }
  /* product/manage-pricing-purchasing: let the lead capabilities head run the
     full band width. The scoped .capability-band--lead cap (760px) otherwise
     outranks the shared --full-quote max-width, so the heading, subheading, and
     the customer quote all spread the width of the page rather than crowding a
     narrow left column. The pull-quote also grows into a real focal point. */
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .capability-band--lead .pillar-section-head--full-quote,
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head--full-quote .pillar-section-head-copy,
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head--full-quote .section-subtitle { max-width: 100%; }
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head-quote--full {
    margin-top: 40px;
    padding: 34px 40px;
    border-left-width: 5px;
  }
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head-quote--full blockquote {
    font-size: 27px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head-quote--full figcaption {
    font-size: 12.5px;
  }
  @media (max-width: 767px) {
    body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head-quote--full {
      padding: 24px 22px;
    }
    body[data-page-slug="product/manage-pricing-purchasing"] .pillar-page .pillar-section-head-quote--full blockquote {
      font-size: 20px;
    }
  }
  @media (max-width: 899px) {
    .pillar-page .pillar-section-head--split { display: block; }
    .pillar-page .pillar-section-head--split .pillar-section-head-copy { max-width: 100%; }
    .pillar-page .pillar-section-head--split .pillar-section-head-quote { margin-top: 28px; }
  }

  @media (max-width: 767px) {
    .pillar-page .task-compare-cols { grid-template-columns: 1fr; }
    .pillar-page .task-col--old { border-right: 0; border-bottom: 1px solid var(--paper-line); }
    /* Let a wide bar's time badge drop below the fill instead of clipping off
       the right edge on narrow screens. */
    .pillar-page .timesaved-chart { padding: 26px 22px 22px; }
    .pillar-page .timesaved-bar { flex-wrap: wrap; }
    .pillar-page .timesaved-fill { max-width: 100%; }
  }

  /* ============ APPS ============ */
  .pillar-page .pillar-apps { padding: 80px 0; }
  .pillar-page .apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 48px; }
  .pillar-page .app-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .app-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--ink); }
  .pillar-page .app-tagline { font-size: 15px; color: var(--ink-3); margin: 0 0 20px; }
  .pillar-page .app-features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .pillar-page .app-features li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
  .pillar-page .app-features li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 16px; height: 16px;
    background: var(--color-cobalt-50);
    border: 1px solid var(--color-cobalt-border);
    border-radius: var(--radius-pill);
  }
  .pillar-page .app-badges { display: flex; flex-wrap: wrap; gap: 12px; }
  .pillar-page .app-badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    background: var(--color-cobalt-400);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
  }
  .pillar-page .app-badge:hover { background: var(--color-cobalt-500); }

  /* ============ SCREENSHOTS ============ */
  .pillar-page .pillar-screenshots { padding: 84px 0; }
  .pillar-page .screenshots-grid { margin-top: 48px; display: grid; gap: 24px; }
  .pillar-page .screenshots-grid--wide { grid-template-columns: 1fr; }
  .pillar-page .screenshots-grid--two { grid-template-columns: 1fr 1fr; }
  .pillar-page .screenshots-grid--three { grid-template-columns: repeat(3, 1fr); }
  .pillar-page .screenshot { margin: 0; }
  .pillar-page .screenshot-frame {
    background: var(--color-gray-1000);
    border: 1px solid var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-demo);
  }
  .pillar-page .screenshot-frame img { display: block; width: 100%; border-radius: var(--radius-md); background: var(--color-demo-surface); }
  .pillar-page .screenshot-caption { margin: 16px 4px 0; font-size: 14.5px; color: var(--ink-3); }

  /* ============ AI TOOLS (violet AI surface) ============ */
  .pillar-page .ai-tools { padding: 84px 0; }
  .pillar-page .ai-tools .card-grid { margin-top: 48px; display: grid; gap: 18px; }
  .pillar-page .ai-tools .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pillar-page .ai-tools .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* AI capability cards: white surface (violet reserved as a small accent
     on the eyebrow/icon, not a card fill — violet surfaces live on /dooey). */
  .pillar-page .ai-tools .feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .ai-tools .feature-image {
    margin: -28px -28px 20px;
    background: var(--color-gray-1000);
    border-bottom: 1px solid var(--paper-line);
  }
  /* the card supplies its own 28px padding; cancel the shared
     .feature-card-text padding so text is not double-inset (and stays
     flush with the full-bleed image above it) */
  .pillar-page .ai-tools .feature-card-text { padding: 0; }
  .pillar-page .ai-tools .feature-image img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
  .pillar-page .ai-tools .feature-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--ink); }
  .pillar-page .ai-tools .feature-desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .pillar-page .ai-tools .link-arrow {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-violet-700);
    text-decoration: none;
  }
  .pillar-page .ai-tools .link-arrow:hover { color: var(--color-violet-600); }
  /* numbered-list variant of the tools section (layout: numbered) */
  .pillar-page .ai-tools .tools-numbered {
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    max-width: 760px;
  }
  .pillar-page .ai-tools .tools-numbered-item {
    display: flex;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .ai-tools .tools-numbered-item:first-child { padding-top: 0; }
  .pillar-page .ai-tools .tools-numbered-item:last-child { border-bottom: none; padding-bottom: 0; }
  .pillar-page .ai-tools .tools-numbered-num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-cobalt-400);
    line-height: 1.5;
    padding-top: 2px;
  }
  .pillar-page .ai-tools .tools-numbered-text { min-width: 0; }
  @media (max-width: 767px) {
    .pillar-page .ai-tools .tools-numbered-item { gap: 16px; }
  }

  /* ============ INDUSTRIES (pillar cards) ============ */
  .pillar-page .home-pillars { padding: 84px 0; }
  /* Fixed 3-up grid so every card is the same width and the row stays aligned
     (auto-fit let a lone trailing card stretch full-width). align-items: stretch
     keeps cards in a row the same height regardless of body length. */
  .pillar-page .pillars-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  /* main.css makes a lone trailing odd card span full width (a 2-col convention).
     In this 3-col grid that stretched the 5th card, so keep it in its own cell. */
  .pillar-page .pillars-grid > .pillar-card:last-child:nth-child(odd) { grid-column: auto; }
  @media (max-width: 1199px) { .pillar-page .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 767px) { .pillar-page .pillars-grid { grid-template-columns: 1fr; } }
  /* The industries grid above is fixed at three columns because it always
     carries five or six cards. A switch-guide row carries however many systems
     that industry actually arrives from, so it sizes to its contents instead:
     auto-fit collapses the empty tracks, leaving two cards at half width each
     and three at a third, with no empty column either way. */
  .pillar-page .pillars-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .pillar-page .pillar-card {
    display: block;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-control);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
  }
  .pillar-page .pillar-card:hover { border-color: var(--color-cobalt-200); transform: translateY(-2px); }
  /* Media variant: a photo caps the card, copy sits below. */
  .pillar-page .pillar-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .pillar-page .pillar-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
  .pillar-page .pillar-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
  .pillar-page .pillar-card--media:hover .pillar-card-media img { transform: scale(1.03); }
  .pillar-page .pillar-card-copy { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
  .pillar-page .pillar-card--media .pillar-card-link { margin-top: auto; padding-top: 14px; }
  .pillar-page .pillar-card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--ink); }
  .pillar-page .pillar-card-body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .pillar-page .pillar-card-link { display: inline-flex; align-items: center; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--color-cobalt-400); }

  /* ============ PRIMER ============ */
  .pillar-page .pillar-primer { padding: 84px 0; }
  .pillar-page .primer-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
  .pillar-page .primer-card {
    display: block;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-control);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
  }
  .pillar-page .primer-card:hover { border-color: var(--color-cobalt-200); transform: translateY(-2px); }
  .pillar-page .primer-card-image { aspect-ratio: 16/9; overflow: hidden; background: var(--color-gray-1000); }
  .pillar-page .primer-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pillar-page .primer-card-body { padding: 24px; }
  .pillar-page .primer-card-date { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
  .pillar-page .primer-card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--ink); }
  .pillar-page .primer-card-summary { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }

  /* ============ WALKTHROUGH BAR (subtle download strip under the demo video) ============ */
  .pillar-page .pillar-walkthrough { max-width: 1120px; margin: 0 auto; padding: 8px 32px 40px; }
  .pillar-page .walkthrough-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .walkthrough-bar-text { min-width: 0; }
  .pillar-page .walkthrough-bar-title { font-weight: 700; margin: 0 0 3px; letter-spacing: -0.01em; }
  .pillar-page .walkthrough-bar-sub { color: var(--ink-2, #4b443f); font-size: 15px; margin: 0; }
  .pillar-page .walkthrough-bar-actions { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
  .pillar-page .walkthrough-bar-btn { height: 44px; padding: 0 20px; border-radius: var(--radius-md); font-weight: 600; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
  /* App-store links: quiet outline buttons that blend into the card rather than
     competing with the cobalt PDF download. */
  .pillar-page .walkthrough-app {
    height: 44px; padding: 0 18px; border-radius: var(--radius-md);
    font-weight: 600; font-size: 15px; display: inline-flex; align-items: center;
    text-decoration: none; background: transparent; color: var(--ink-2, #4b443f);
    border: 1px solid var(--paper-line); transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .pillar-page .walkthrough-app:hover { background: var(--paper-2); color: var(--ink); border-color: var(--color-cobalt-200); }
  @media (max-width: 700px) {
    .pillar-page .walkthrough-bar { flex-direction: column; align-items: stretch; }
    .pillar-page .walkthrough-bar-actions { width: 100%; }
    .pillar-page .walkthrough-bar-actions .btn,
    .pillar-page .walkthrough-bar-actions .walkthrough-app { flex: 1; justify-content: center; }
  }

  /* ============ FAQ (Common Questions accordion) ============ */
  /* Styles the markup emitted by the shared _faqs.html partial,
     scoped to .pillar-page so the partial itself is untouched. */
  .pillar-page .faq-section { padding: 8px 0 72px; }
  .pillar-page .faq-section .container--narrow,
  .pillar-page .faq-section .container { max-width: 860px; }
  .pillar-page .faq-section .section-title { text-align: center; margin-bottom: 32px; }
  .pillar-page .faq-list {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 8px 28px;
    box-shadow: var(--shadow-control);
  }
  .pillar-page .faq-item { border-bottom: 1px solid var(--paper-line); }
  .pillar-page .faq-item:last-child { border-bottom: 0; }
  .pillar-page .faq-q {
    list-style: none;
    cursor: pointer;
    padding: 24px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pillar-page .faq-q::-webkit-details-marker { display: none; }
  .pillar-page .faq-q::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230e1fc1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    transition: transform .2s ease;
    color: var(--color-cobalt-400);
  }
  .pillar-page .faq-item[open] .faq-q::after { transform: rotate(45deg); }
  .pillar-page .faq-q:hover { color: var(--color-cobalt-400); }
  .pillar-page .faq-a { padding: 0 8px 24px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 760px; }
  .pillar-page .faq-a a { color: var(--color-cobalt-400); }
  /* Grouped variant (faqs_grouped): a cobalt label over each card. */
  .pillar-page .faq-group + .faq-group { margin-top: 48px; }
  .pillar-page .faq-group-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-cobalt-400);
    margin: 0 0 14px 4px;
  }

  /* ============ FINAL CTA — cobalt band (industry / capability) ============ */
  .pillar-page .pillar-cta { padding: 84px 0; }
  .pillar-page .pillar-cta .container {
    background: var(--color-cobalt-400);
    border-radius: var(--radius-lg);
    padding: 64px 56px;
    text-align: center;
  }
  .pillar-page .pillar-cta .section-title { color: #fff; margin: 0 auto 16px; }
  .pillar-page .pillar-cta .section-subtitle { color: var(--color-cobalt-100); max-width: 520px; margin: 0 auto 32px; font-size: 17.5px; }
  .pillar-page .pillar-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
  .pillar-page .pillar-cta-buttons .btn { height: 52px; padding: 0 28px; border-radius: var(--radius-md); font-size: 16.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; transition: transform .15s ease, background .15s ease; }
  .pillar-page .pillar-cta-buttons .btn-primary { background: #fff; color: var(--color-cobalt-500); }
  .pillar-page .pillar-cta-buttons .btn-primary:hover { transform: translateY(-2px); }
  .pillar-page .pillar-cta-buttons .btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
  .pillar-page .pillar-cta-buttons .btn-secondary:hover { background: rgba(255,255,255,0.1); }

  /* ============ CAPABILITY LABELS, CHAPTER EXTRAS, SUPPLIERS, ROADMAP CARDS ============ */
  /* stats_style: labels -- the stat row carries short capability phrases
     (e.g. "Large quotes" over "Item Sets · staged fulfillment") instead of
     numbers, so the value steps down from display-size digits to a label. */
  .pillar-page .pillar-stats--labels .pillar-stat-value { font-size: 19px; letter-spacing: -0.01em; }
  .pillar-page .pillar-stats--labels .pillar-stat-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; }
  .pillar-page .pillar-stats-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  /* Six stats read as two balanced rows of three rather than four and two. */
  .pillar-page .pillar-stats-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
  /* stat as in-page navigation: same look, subtle hover and a visible focus ring. */
  .pillar-page a.pillar-stat--link { text-decoration: none; color: inherit; border-radius: var(--radius-md); padding: 6px 8px; margin: -6px -8px; transition: background .15s ease; }
  .pillar-page a.pillar-stat--link:hover { background: var(--paper-2); }
  .pillar-page a.pillar-stat--link:hover .pillar-stat-value { color: var(--color-accent); }
  .pillar-page a.pillar-stat--link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .pillar-page .pillar-chapter[id],
  .pillar-page .capability-band[id] { scroll-margin-top: 88px; }
  /* one width for every chapter visual, so the right column keeps a rhythm. */
  .pillar-page .chapter-stage--card .wfv { max-width: 680px; margin: 0 auto; }
  /* hero.fpo: dashed frame around the stand-in photo; the mark itself is shared. */
  .pillar-page .pillar-hero-media--fpo::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border: 2px dashed rgba(192, 57, 43, .6); border-radius: var(--radius-lg);
  }
  /* demo_video.fpo: dashed frame on the embed; the badge itself is shared. */
  .pillar-page .pillar-demo-video--fpo .pillar-demo-embed { position: relative; }
  .pillar-page .pillar-demo-video--fpo .pillar-demo-embed::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border: 3px dashed rgba(192, 57, 43, .75);
  }
  .pillar-page .pillar-demo-video--fpo .fpo-mark { z-index: 4; }
  /* chapter callout: one emphasised block in the copy column, cobalt spine. */
  .pillar-page .chapter-callout {
    margin: 0; padding: 12px 16px; max-width: 48ch;
    border-left: 3px solid var(--color-cobalt-400); background: var(--color-cobalt-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 15.5px; line-height: 1.5; color: var(--ink-2);
  }
  .pillar-page .chapter-callout strong { display: block; color: var(--ink); font-weight: 700; }
  /* HTML-drawn chapter visual: no image box, the card draws its own frame. */
  .pillar-page .chapter-stage--card { display: block; width: 100%; }
  .pillar-page .chapter-visual--card .wfv--flow { padding: 6px 0; }
  /* chapter--solo: no media column; the copy runs wider. Matches the wide and
     flipped grid selectors' specificity so it wins on every chapter. */
  .pillar-page .pillar-chapter .chapter.chapter--solo,
  .pillar-page .pillar-chapter--wide .chapter.chapter--solo,
  .pillar-page .pillar-chapter--wide.pillar-chapter--flip .chapter.chapter--solo { grid-template-columns: minmax(0, 1fr); }
  .pillar-page .chapter--solo .chapter-body { max-width: 64ch; font-size: 18px; }
  /* chapter subs: hairline-separated nested rows and cards inside the chapter band. */
  .pillar-page .chapter-subs {
    margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--paper-line);
    display: flex; flex-direction: column; gap: 40px;
  }
  .pillar-page .chapter-sub { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
  .pillar-page .chapter-sub-copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .pillar-page .chapter-sub-visual { margin: 0; min-width: 0; }
  .pillar-page .chapter-subs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pillar-page .chapter-subs-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pillar-page .chapter-sub-card {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    padding: 22px 24px; box-shadow: var(--shadow-control);
    display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  }
  .pillar-page .capability-band--alt .chapter-sub-card { background: var(--paper-2); box-shadow: none; }
  .pillar-page .chapter-sub-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
  .pillar-page .chapter-sub-eyebrow--ai { color: var(--color-violet-600); }
  .pillar-page .chapter-sub-title {
    margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px;
    letter-spacing: -0.015em; line-height: 1.2; color: var(--ink);
  }
  .pillar-page .chapter-sub .chapter-sub-title { font-size: 24px; }
  .pillar-page .chapter-sub-body { font-size: 16px; max-width: 52ch; }
  .pillar-page .chapter-sub-points { margin: 0; }
  .pillar-page .chapter-sub-points li { font-size: 15.5px; }
  /* Dooey prompts: the violet accent is reserved for Dooey, so a prompt card
     reads as a Dooey moment at a glance. */
  .pillar-page .chapter-sub-prompts { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .pillar-page .chapter-sub-prompt {
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
    background: var(--color-violet-50); border-left: 2px solid var(--color-violet-600);
    border-radius: 0 6px 6px 0; padding: 9px 12px;
  }
  .pillar-page .chapter-sub-prompt-label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-violet-600); margin-bottom: 3px; }
  .pillar-page .chapter-sub-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .pillar-page .chapter-sub-chips li {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-cobalt-500); background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-100);
    border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  }
  /* five proof tiles: the whole commercial workflow in one row. */
  .pillar-page .chapter-proof--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .pillar-page .chapter-proof--five li { padding: 18px 18px; font-size: 14.5px; }
  .pillar-page .chapter-proof--five li strong { font-size: 16px; }
  /* sub cards: short concept blocks under a sub heading. */
  .pillar-page .chapter-sub-cards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; }
  .pillar-page .chapter-sub-cards li {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 14px 16px;
    font-size: 15px; line-height: 1.55; color: var(--ink-2);
  }
  .pillar-page .capability-band--alt .chapter-sub-cards li { background: var(--paper-2); }
  .pillar-page .chapter-sub-cards li strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; }
  /* workflow comparison: three text columns, Rundoo tinted like the matrix. */
  .pillar-page .cmp-workflow { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg); overflow: hidden; font-size: 15px; line-height: 1.5; }
  .pillar-page .cmp-workflow th, .pillar-page .cmp-workflow td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-line); }
  .pillar-page .cmp-workflow thead th { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); background: #fff; }
  .pillar-page .cmp-workflow thead th:first-child { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .pillar-page .cmp-workflow tbody th { font-weight: 700; color: var(--ink); width: 22%; }
  .pillar-page .cmp-workflow td { color: var(--ink-2); width: 39%; }
  .pillar-page .cmp-workflow .cmp-us { background: var(--color-cobalt-50); color: var(--ink); }
  .pillar-page .cmp-workflow tbody tr:last-child th, .pillar-page .cmp-workflow tbody tr:last-child td { border-bottom: 0; }
  .pillar-page .cmp-workflow .cmp-col-logo { height: 20px; width: auto; display: block; }
  /* suppliers + buying groups: three compact cards in their own band. */
  .pillar-page .pillar-suppliers { padding: 84px 0; }
  .pillar-page .pillar-subpage { padding: 84px 0; }
  .pillar-page .pillar-subpage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .pillar-page .pillar-subpage-copy .section-title { margin-bottom: 12px; }
  .pillar-page .pillar-subpage-copy .section-subtitle { margin-bottom: 18px; }
  .pillar-page .pillar-subpage-more { margin: 22px 0 0; }
  .pillar-page .pillar-subpage-stage .wfv { max-width: 720px; }
  .pillar-page .pillar-subpage--compact { padding: 44px 0; }
  .pillar-page .pillar-subpage-strip { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .pillar-page .pillar-subpage-strip .eyebrow { margin-bottom: 6px; }
  .pillar-page .pillar-subpage-strip-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: var(--ink); }
  .pillar-page .pillar-subpage-strip-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 640px; }
  .pillar-page .pillar-subpage-strip-link { flex: none; white-space: nowrap; }
  @media (max-width: 900px) { .pillar-page .pillar-subpage--compact { padding: 36px 0; } .pillar-page .pillar-subpage-strip { flex-direction: column; align-items: flex-start; gap: 18px; } }
  @media (max-width: 900px) { .pillar-page .pillar-subpage { padding: 56px 0; } .pillar-page .pillar-subpage-grid { grid-template-columns: 1fr; gap: 28px; } }
  .pillar-page .suppliers-stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pillar-page .supplier-card {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    padding: 22px; box-shadow: var(--shadow-control); display: flex; flex-direction: column; gap: 12px;
  }
  .pillar-page .supplier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 40px; }
  .pillar-page .supplier-logo { max-height: 36px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
  .pillar-page .supplier-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
  .pillar-page .supplier-status {
    flex: none; white-space: nowrap; padding: 3px 9px; border-radius: 999px;
    border: 1.5px solid var(--paper-line); color: var(--ink-3);
    font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  }
  .pillar-page .supplier-status--live { color: var(--color-cobalt-500); background: var(--color-cobalt-50); border-color: var(--color-cobalt-100); }
  .pillar-page .supplier-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); flex: 1 1 auto; }
  /* roadmap note: one labeled line at the foot of the page. */
  .pillar-page .pillar-roadmap-note { padding: 36px 0 48px; }
  .pillar-page .roadmap-note-line {
    margin: 0 auto; max-width: 760px; text-align: center;
    font-size: 14.5px; line-height: 1.6; color: var(--ink-3);
  }
  .pillar-page .roadmap-note-line .rmc-chip { margin-right: 10px; vertical-align: 1px; }
  .pillar-page .rmc-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    border: 1.5px dashed var(--color-accent); color: var(--color-accent);
    font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  }
  @media (max-width: 960px) {
    .pillar-page .suppliers-stack { grid-template-columns: 1fr; }
  }
  @media (max-width: 960px) {
    .pillar-page .chapter-proof--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pillar-page .chapter-proof--five li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .pillar-page .chapter-sub { grid-template-columns: 1fr; gap: 24px; }
    .pillar-page .chapter-subs-grid { grid-template-columns: 1fr; }
    .pillar-page .pillar-stats--labels .pillar-stats-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .pillar-page .chapter-proof--five { grid-template-columns: 1fr; }
    .pillar-page .chapter-proof--five li:last-child:nth-child(odd) { grid-column: auto; }
    .pillar-page .cmp-workflow { font-size: 13.5px; }
    .pillar-page .cmp-workflow thead { display: none; }
    .pillar-page .cmp-workflow tr { display: block; border-bottom: 1px solid var(--paper-line); }
    .pillar-page .cmp-workflow tbody tr:last-child { border-bottom: 0; }
    .pillar-page .cmp-workflow th, .pillar-page .cmp-workflow td { display: block; width: auto; border-bottom: 0; padding: 12px 16px; }
    .pillar-page .cmp-workflow tbody th { padding-bottom: 4px; }
    .pillar-page .cmp-workflow td::before { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
    .pillar-page .cmp-workflow td:not(.cmp-us)::before { content: attr(data-label); }
    .pillar-page .cmp-workflow td.cmp-us::before { content: "Rundoo"; color: var(--color-cobalt-500); }
    .pillar-page .pillar-suppliers { padding: 56px 0; }
    .pillar-page .chapter-subs { margin-top: 36px; padding-top: 28px; gap: 28px; }
    .pillar-page .chapter-sub-title, .pillar-page .chapter-sub .chapter-sub-title { font-size: 21px; }
    .pillar-page .chapter--solo .chapter-body { font-size: 17px; }
    .pillar-page .pillar-stats--labels .pillar-stats-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 960px) {
    .pillar-page .pillar-hero .container,
    .pillar-page .pillar-hero--split .pillar-hero-textgrid,
    .pillar-page .capability-card,
    .pillar-page .capability-card:nth-child(even) { grid-template-columns: 1fr; }
    .pillar-page .pillar-hero--split .pillar-hero-textgrid { gap: 32px; }
    .pillar-page .capability-card:nth-child(even) .capability-text,
    .pillar-page .capability-card:nth-child(even) .capability-image { order: 0; }
    .pillar-page .capabilities-grid--stagger .capability-card:nth-child(even) .capability-text,
    .pillar-page .capabilities-grid--stagger .capability-card:nth-child(even) .capability-image { order: 0; }
    .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) { grid-template-columns: 1fr; }
    .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) .capability-text,
    .pillar-page .capabilities-grid--alternating .capability-card:nth-child(even) .capability-image { order: 0; }
    .pillar-page .capabilities-grid--media-right .capability-card { grid-template-columns: 1fr; }
    .pillar-page .capabilities-grid--media-right .capability-card .capability-text,
    .pillar-page .capabilities-grid--media-right .capability-card .capability-image { order: 0; }
    .pillar-page .capability-group-split { grid-template-columns: 1fr; }
    .pillar-page .capability-group-photo img { flex: none; aspect-ratio: 3 / 2; }
    /* minmax(0, 1fr) (not bare 1fr) so a wide grid item -- e.g. the 6-column
       inventory_card table, min-content ~372px -- cannot stretch the single
       stacked column past the viewport (was a 17px overflow at 375px). */
    .pillar-page .capability-group--beside { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .pillar-page .capability-group--beside.capability-group--beside-flip,
    .pillar-page .capability-group--beside-wide.capability-group--beside-flip { grid-template-columns: minmax(0, 1fr); }
    /* Drop the desktop entry-stack indent on mobile: with the beside layout
       stacked to one column there is no heading to line up under, and the 38px
       left padding pushed the grid past the viewport. */
    .pillar-page .capability-group-beside-text .capabilities-grid { padding-left: 0; }
    /* A data-table card (order_card / inventory_card) wider than the phone
       viewport scrolls inside its own box rather than pushing the page. */
    .pillar-page .capability-group-beside-media { max-width: 320px; margin: 0 auto; order: -1; overflow-x: auto; }
    .pillar-page .capability-phones { grid-template-columns: 1fr; gap: 48px; }
    .pillar-page .capability-image--phone { max-width: 320px; }
    .pillar-page .capabilities-grid--cards,
    .pillar-page .comparison-grid,
    .pillar-page .comparison-versus,
    .pillar-page .brief-grid,
    .pillar-page .questions-grid,
    .pillar-page .moments-grid,
    .pillar-page .screenshots-grid--two,
    .pillar-page .screenshots-grid--three,
    .pillar-page .ai-tools .card-grid--2,
    .pillar-page .ai-tools .card-grid--3 { grid-template-columns: 1fr; }
    /* Versus stacks vertically: the seam becomes horizontal and the medallion,
       pinned to the vertical seam, would float mid-card, so hide it. */
    .pillar-page .comparison-vs-col--them { border-right: none; border-bottom: 1px solid var(--paper-line); }
    .pillar-page .comparison-vs-badge { display: none; }
    /* App hero stacks: copy on top, phone mockup centered below */
    .pillar-page .pillar-hero--app { padding-bottom: 0; }
    .pillar-page .pillar-hero--app .pillar-hero-copy { padding-bottom: 8px; }
    .pillar-page .pillar-hero-app img { max-height: 520px; }
  }
  @media (max-width: 820px) {
    .pillar-page .pillar-title { font-size: clamp(30px, 7.2vw, 44px); }
    .pillar-page .pillar-hero--faq .pillar-title { font-size: clamp(28px, 6.5vw, 40px); }
    .pillar-page .section-title { font-size: clamp(25px, 5.4vw, 34px); }
  }
  @media (max-width: 640px) {
    .pillar-page .container { padding-left: 20px; padding-right: 20px; }
    .pillar-page .pillar-demo-video { padding-left: 20px; padding-right: 20px; }
    /* the banded rows variant is full-bleed; its container carries the gutters */
    .pillar-page .pillar-demo-video--band { padding: 56px 0; }
    .pillar-page .pillar-cta .container { padding: 44px 28px; }
    .pillar-page .pillar-switcher { gap: 6px; }
    .pillar-page .pillar-switcher a { font-size: 13px; height: 32px; padding: 0 12px; }
  }