/* ===== Switch Detail — light-mode design system ===== */

  .sd-page { background: var(--paper); color: var(--ink); }

  /* ---------- HERO ---------- */
  .sd-hero {
    padding: 72px 32px 64px;
    border-bottom: 1px solid var(--paper-line);
  }
  .sd-hero-inner { max-width: 800px; margin: 0 auto; }

  .sd-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-cobalt-400, #0e1fc1);
    margin-bottom: 18px;
  }

  .sd-title {
    font-family: var(--font-display); font-weight: 800; font-size: 52px;
    line-height: 1.05; letter-spacing: -0.03em; color: var(--ink);
    margin: 0 0 16px; text-wrap: balance;
  }

  .sd-subtitle {
    font-size: 18px; line-height: 1.6; color: var(--ink-2);
    margin: 0; max-width: 680px;
  }

  /* Hero actions. Mirrors the pillar/home hero pattern: primary "Book a demo"
     plus a phone secondary, using the global .btn classes from main.css. */
  .sd-hero-cta {
    display: flex; align-items: center; gap: 13px;
    margin-top: 30px; flex-wrap: wrap;
  }

  /* Hero pointer to the "X alternatives" insight. Not `.sd-compare`: that name
     already belongs to the feature comparison table, and sharing it capped
     the table at this paragraph's 680px measure. */
  .sd-alt-guide {
    margin: 18px 0 0; max-width: 760px;
    font-size: 15px; line-height: 1.55; color: var(--ink-2);
  }

  /* Page byline. Opt-in via `author` in the page's front matter; pages without
     it render exactly as before. Since 2026-10-30 it sits on the CTA row, one
     line with a 32px photo, instead of its own ruled block under the hero. Why,
     per Alan: the old block took about 105px of vertical space, and the visual
     below the hero is what carries the weight of convincing the reader, so the
     reader should reach it as fast as possible. Do not move the byline back
     into its own block. On a phone it drops under the buttons as one line. */
  .sd-byline {
    display: flex; align-items: center; gap: 10px;
    margin-left: 8px; padding-left: 20px;
    border-left: 1px solid var(--paper-line);
  }
  .sd-byline-avatar {
    display: block; width: 32px; height: 32px;
    border-radius: var(--radius-pill); object-fit: cover;
  }
  .sd-byline-text { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .sd-byline-role::before { content: "\00B7"; margin-right: 6px; color: var(--ink-3, var(--ink-2)); }
  .sd-byline-name {
    font-size: 15px; font-weight: 600; color: var(--ink);
  }
  .sd-byline-name a { color: inherit; text-decoration: none; }
  .sd-byline-name a:hover { text-decoration: underline; }
  .sd-byline-role { font-size: 14px; color: var(--ink-3, var(--ink-2)); }

  /* ---------- SECTIONS ---------- */
  .sd-section {
    padding: 64px 32px;
    border-bottom: 1px solid var(--paper-line);
  }
  .sd-section:last-child { border-bottom: none; }

  .sd-section-inner { max-width: 800px; margin: 0 auto; }

  /* Alternating rose band */
  .sd-section--rose { background: var(--paper-2); }

  .sd-section-eyebrow {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-cobalt-400, #0e1fc1);
    margin: 0 0 10px;
  }

  .sd-section-title {
    font-family: var(--font-display); font-weight: 700; font-size: 32px;
    letter-spacing: -0.022em; color: var(--ink);
    margin: 0 0 20px; text-wrap: balance;
  }

  .sd-section-intro {
    font-size: 16px; color: var(--ink-2); line-height: 1.65;
    margin: 0 0 28px;
  }

  /* Prose inside sections */
  .sd-prose { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
  .sd-prose p { margin: 0 0 18px; }
  .sd-prose ul, .sd-prose ol { margin: 0 0 18px; padding-left: 22px; }
  .sd-prose li { margin: 0 0 8px; }
  .sd-prose h2 {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    letter-spacing: -0.015em; color: var(--ink); margin: 32px 0 12px;
  }
  .sd-prose h2:first-child { margin-top: 0; }
  .sd-prose a { color: var(--color-cobalt-400); text-decoration: none; border-bottom: 1px solid var(--color-cobalt-200, #d2d7f0); }
  .sd-prose a:hover { border-bottom-color: var(--color-cobalt-400); }
  /* Reason-card bodies sit outside .sd-prose; give their inline links the same treatment. */
  .sd-card p a { color: var(--color-cobalt-400); text-decoration: none; border-bottom: 1px solid var(--color-cobalt-200, #d2d7f0); }
  .sd-card p a:hover { border-bottom-color: var(--color-cobalt-400); }
  .sd-prose blockquote {
    margin: 24px 0; padding: 20px 24px;
    background: var(--paper-2); border: 1px solid var(--paper-line);
    border-radius: var(--radius-md); font-style: italic;
    font-size: 16px; color: var(--ink); line-height: 1.55;
  }
  .sd-prose blockquote p { margin: 0; }

  /* Comparison table (Lightspeed vs Rundoo). Scroll-safe: the wrapper scrolls
     on narrow screens so the table never overflows the page. Header styling
     keys off <th> so it holds regardless of how the row markup is authored. */
  .sd-table-wrap { overflow-x: auto; margin: 0 0 24px; }
  .sd-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
  .sd-prose thead th {
    background: var(--paper-2); color: var(--ink); font-weight: 700; text-align: left;
    padding: 12px 16px; border-bottom: 2px solid var(--paper-line);
  }
  .sd-prose tbody td {
    padding: 12px 16px; border-bottom: 1px solid var(--paper-line);
    vertical-align: top; color: var(--ink-2); min-width: 240px;
  }
  .sd-prose tbody tr:last-child td { border-bottom: 0; }

  /* Comparison table with a mark in front of every cell: the house check on the
     Rundoo side, a muted cross on the other. Both are drawn via background SVG
     on an empty ::before, so no glyph reaches a screen reader -- the column
     header already says which side is which. Colour follows the design system:
     light mode has no green, cobalt is the only accent (see main.css). */
  .sd-prose .sd-compare td { padding-left: 46px; position: relative; }
  .sd-prose .sd-compare td strong { color: var(--ink); font-weight: 650; }
  .sd-prose .sd-compare td::before {
    content: ""; position: absolute; left: 16px; top: 14px;
    width: 18px; height: 18px; border-radius: var(--radius-pill);
    background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
  }
  .sd-prose .sd-compare .sd-compare-yes::before {
    background-color: var(--color-cobalt-50, #f3f4fc);
    box-shadow: inset 0 0 0 1px var(--color-cobalt-border, #d2d7f0);
    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");
  }
  /* The cross runs smaller and quieter than the check, and nudges right to stay
     centred in the same gutter. The Rundoo column is the one being argued for,
     so its mark should carry more weight than the one merely noting a contrast. */
  .sd-prose .sd-compare .sd-compare-no::before {
    left: 17px; top: 15px; width: 15px; height: 15px; background-size: 8px 8px;
    background-color: var(--paper-2);
    box-shadow: inset 0 0 0 1px var(--paper-line);
    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='%239a9aa5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  }

  /* ---------- BODY MODULES ----------
     Used from a page's `body_html`. Kept here rather than in main.css because
     they only ever appear inside a switch page's free-form section. */

  /* Side-by-side "old system vs Rundoo" visual. */
  .sd-vs { margin: 0 0 30px; }
  .sd-vs-shortline {
    font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 22px;
  }
  .sd-vs-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  }
  /* Opt-in wide layout (frontmatter `wide: true`). A page carrying screenshots
     needs more room than the 800px reading column, and widening the column
     itself -- rather than breaking single blocks out of it -- keeps every
     section on one pair of edges. Text-only switch pages stay at 800px, where
     a 1180px line length would hurt them. The FAQ keeps its own shared
     container, so its answers stay at a readable measure either way. */
  .sd-page--wide .sd-hero-inner,
  .sd-page--wide .sd-section-inner { max-width: 1180px; }
  /* No rule under the hero: a full-bleed line under the CTA row read as a
     divider through the page.
     The first section's own padding carries the separation instead. */
  .sd-page--wide .sd-hero { border-bottom: none; }
  /* The migration rows are short labels, so at the page's full width most of
     each row is empty. The whole section is held to the box's width instead of
     just the box, so the eyebrow, heading and intro share its edges and the
     group reads as centred -- the way this section sits on every other switch
     page, where the 800px column is itself centred and the table fills it. */
  .sd-page--wide #data-migration .sd-section-inner { max-width: 640px; }
  .sd-page--wide .sd-migration-table { max-width: 640px; margin-left: auto; margin-right: auto; }
  /* Intros and standalone paragraphs still read as prose, so they keep a
     comfortable measure instead of running the full width. */
  .sd-page--wide .sd-section-intro,
  .sd-page--wide .sd-subtitle,
  .sd-page--wide .sd-prose > p { max-width: 760px; }
  /* The FAQ ships with its own shared narrow container, which would leave it
     visibly inset from every other section here. Match it to the page, but hold
     the answer copy to a readable measure inside the wider row. The full-bleed
     CTA band below is left alone -- it spans the viewport by design. */
  .sd-page--wide .faq-section .container--narrow { max-width: 1180px; }
  .sd-page--wide .faq-section .faq-a { max-width: 860px; }
  .sd-vs-panel {
    border: 1px solid var(--paper-line); border-radius: var(--radius-md);
    background: var(--paper); overflow: hidden;
    /* Column so each panel's quote block fills the leftover height and both
       panels stay level even though the two quotes differ in length. */
    display: flex; flex-direction: column; margin: 0;
  }
  .sd-vs-panel-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
    padding: 12px 16px; border-bottom: 1px solid var(--paper-line);
    background: var(--paper-2);
  }
  .sd-vs-panel--rundoo .sd-vs-panel-label {
    color: var(--color-cobalt-400, #0e1fc1);
  }
  /* The two panels hold screenshots of very different native sizes, so each
     shot fills a fixed 16/10 box from the top. Cropping the bottom of a long
     grid is fine; both shots read from their header rows down. flex-none keeps
     the column layout from stretching the image past that ratio. */
  .sd-vs-shot {
    display: block; width: 100%; height: auto; flex: none;
    aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
  }

  /* A looping product clip in place of a screenshot. Same 16/10 box as the
     stills; the clip is rendered at 16/10 so nothing is cropped. */
  .sd-vs-video { background: var(--paper-2); }

  /* One quote under each screenshot: the dealer's words under the old system, a
     paint client's under Rundoo. flex:1 so both blocks reach the same floor. */
  .sd-vs-quote {
    flex: 1; margin: 0; padding: 16px 18px;
    border-top: 1px solid var(--paper-line); background: var(--paper-2);
  }
  .sd-vs-quote strong {
    display: block; font-size: 15px; line-height: 1.45;
    color: var(--ink); margin: 0 0 6px; text-wrap: pretty;
  }
  .sd-vs-quote span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
  .sd-vs-quote a { color: var(--color-cobalt-400, #0e1fc1); text-decoration: none; font-weight: 600; }
  .sd-vs-quote a:hover { text-decoration: underline; }
  .sd-vs-panel--rundoo .sd-vs-quote {
    background: var(--color-cobalt-50, #f3f4fc);
    border-top-color: var(--color-cobalt-200, #d2d7f0);
  }
  /* Three-up card rows: "reasons to switch" and the migration steps. */
  .sd-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin: 0 0 8px;
  }
  .sd-card {
    padding: 22px; border: 1px solid var(--paper-line);
    border-radius: var(--radius-md); background: var(--paper);
  }
  /* Card screenshots sit above the text in a fixed-height band so a three-up
     row shares one baseline. The shots are already composed with their own
     whitespace, so they're contained rather than cropped, and the band height
     is explicit -- aspect-ratio on the image is unreliable here. */
  .sd-card--shot { padding: 0; overflow: hidden; }
  .sd-card-shot {
    display: block; width: 100%; height: 260px;
    object-fit: contain; object-position: center;
    border-bottom: 1px solid var(--paper-line); background: var(--paper-2);
  }
  .sd-card--shot .sd-card-body { padding: 22px; }
  .sd-card h3 {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px;
  }
  .sd-card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  /* Two-up variant for a pair of headline features. The wider cards get a
     taller band so a phone capture and a desktop capture both read. */
  .sd-cards--two { grid-template-columns: repeat(2, 1fr); }
  .sd-cards--two .sd-card-shot { height: 340px; }

  @media (max-width: 720px) {
    .sd-vs-grid, .sd-cards { grid-template-columns: 1fr; }
  }

  /* ---------- MIGRATION TABLE ---------- */
  .sd-migration-table {
    display: flex; flex-direction: column; gap: 2px;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--paper-line);
  }

  .sd-migration-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    background: #fff;
  }
  .sd-migration-row:nth-child(even) { background: var(--paper-2); }

  .sd-migration-icon {
    flex-shrink: 0; width: 22px; text-align: center; font-size: 15px;
  }
  .sd-migration-row--no .sd-migration-icon { color: var(--ink-3); }

  .sd-migration-label {
    font-size: 15px; font-weight: 500; color: var(--ink); flex: 1;
  }
  .sd-migration-note {
    font-size: 13px; color: var(--ink-3); font-style: italic;
  }

  /* ---------- SPOTLIGHT CARDS ---------- */
  .sd-spotlight-card {
    display: flex; flex-direction: row;
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-control);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sd-spotlight-card + .sd-spotlight-card { margin-top: 16px; }
  /* Opt-in row layout (frontmatter `client_spotlight_row`). The default stacks
     wide cards down the page; a page carrying other three-up rows reads better
     with the stories in a row too, which means each card turns image-over-text.
     The band also goes white here: the default rose would otherwise sit
     directly against the rose data-migration section above it. */
  .sd-section--stories-row { background: var(--paper); }
  /* The footnote below sits tight under a stacked list, but against a row of
     cards it needs the same breathing room the card grids elsewhere get. */
  .sd-stories-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
  .sd-stories-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  /* A quote card's logo sits on a mat rather than being cropped like a photo. */
  .sd-stories-row .sd-spotlight-card--quote .sd-spotlight-image { height: 150px; }
  .sd-stories-row .sd-spotlight-card { flex-direction: column; margin-top: 0; }
  .sd-stories-row .sd-spotlight-image { width: 100%; height: 180px; }
  .sd-stories-row .sd-spotlight-content { padding: 22px; }
  @media (max-width: 900px) { .sd-stories-row, .sd-stories-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }
  .sd-spotlight-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
  .sd-spotlight-card:active { transform: translateY(0); }
  /* Quote cards have nowhere to go, so they don't lift on hover. */
  .sd-spotlight-card--quote:hover, .sd-spotlight-card--quote:active { transform: none; box-shadow: var(--shadow-control); }
  .sd-spotlight-card--quote .sd-spotlight-quote { margin-bottom: 0; }

  /* Time-boxed hero notice (frontmatter `notice`). Ported from switch_v2 so a
     page can carry a dated claim -- an upgrade deadline, an end-of-support date
     -- without someone having to remember to delete it. The element ships
     `hidden` with empty text and the script below fills it in, so it FAILS
     CLOSED: if the JS does not run, the reader sees nothing rather than a
     stale-dated promise. */
  .sd-notice {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 22px 0 0;
  }
  .sd-notice-dot {
    flex-shrink: 0; width: 7px; height: 7px; margin-top: 7px;
    border-radius: 50%; background: var(--color-cobalt-400, #0e1fc1);
  }
  .sd-notice-text {
    margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  }

  .sd-spotlight-image {
    width: 280px; flex-shrink: 0; overflow: hidden;
    background: var(--paper-2);
  }
  .sd-spotlight-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* A logo standing in for a missing store photo. `cover` would crop a wordmark
     in half at 280px, so contain it on the mat this box already has, and let
     multiply drop the white background out of logos that ship with one. */
  .sd-spotlight-image--logo img {
    object-fit: contain; padding: 22px; mix-blend-mode: multiply;
  }

  /* Storyless live clients (frontmatter `also_switched`) render as a compact
     second tier rather than as more full cards: the full card promises a story
     to read, and these stores have none. Keeps them as proof without letting
     seven logo boxes outweigh the one store a reader can actually be sent to. */
  .sd-also {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; margin-top: 18px;
  }
  /* The industries line under the logo cards needs air of its own. */
  .sd-also + .sd-steps-footnote { margin-top: 28px; }
  .sd-also-card {
    background: #fff; border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg); padding: 18px 20px;
  }
  .sd-also-logo { display: flex; align-items: center; min-height: 42px; margin-bottom: 14px; }
  .sd-also-logo img {
    max-height: 42px; max-width: min(100%, 150px); width: auto;
    object-fit: contain; object-position: left center;
    mix-blend-mode: multiply;
  }
  .sd-also-name {
    margin: 0; font-weight: 700; font-size: 14.5px;
    line-height: 1.3; color: var(--ink);
  }
  .sd-also-place { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }

  .sd-spotlight-content {
    padding: 28px 32px; flex: 1;
    display: flex; flex-direction: column; justify-content: center;
  }

  .sd-spotlight-name {
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
    letter-spacing: -0.015em; color: var(--ink); margin: 0 0 4px;
  }

  .sd-spotlight-location {
    font-size: 13px; color: var(--ink-3);
    font-family: var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase;
    margin: 0 0 16px;
  }

  .sd-spotlight-quote {
    font-size: 16px; color: var(--ink); font-style: italic; font-weight: 500;
    line-height: 1.55; margin: 0 0 16px;
    padding-left: 0;
  }

  .sd-spotlight-readmore {
    font-size: 14px; font-weight: 600; color: var(--color-cobalt-400);
    display: inline-flex; align-items: center; gap: 4px;
    transition: gap 0.15s ease;
  }
  .sd-spotlight-card:hover .sd-spotlight-readmore { gap: 8px; }

  /* ---------- HOW IT WORKS STEPS ---------- */
  .sd-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin-bottom: 28px;
  }

  .sd-step {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-control);
  }

  .sd-step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-pill);
    background: var(--color-cobalt-50, #f3f4fc); color: var(--color-cobalt-400, #0e1fc1);
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    margin-bottom: 16px;
  }

  .sd-step-title {
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px;
  }

  .sd-step-desc {
    font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0;
  }

  .sd-steps-footnote {
    font-size: 15px; color: var(--ink-3); margin: 0;
  }
  /* With no logo row between them, the footnote sat flush against the last
     story card. */
  .sd-spotlight-card + .sd-steps-footnote { margin-top: 20px; }
  .sd-steps-footnote a {
    color: var(--color-cobalt-400); font-weight: 600;
    text-decoration: none; border-bottom: 1px solid var(--color-cobalt-200, #d2d7f0);
    transition: border-color 0.15s ease;
  }
  .sd-steps-footnote a:hover { border-bottom-color: var(--color-cobalt-400); }

  /* ---------- WORKFLOWS (frontmatter `workflows`) ----------
     One band per everyday job, copy beside an HTML-drawn product card from
     _workflow_visuals.html. The card styles are scoped to .pillar-page, so the
     visual sits in a .pillar-page wrapper that holds no <section> (main.css
     only styles `.pillar-page section`). Used by the pages whose argument is
     "the same job, shown", rather than a feature gap: J3 and Spruce. */
  .sd-wf-lead { max-width: 760px; }
  .sd-wf {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px 56px; align-items: center;
  }
  .sd-wf-copy .sd-section-title { font-size: 28px; }
  .sd-wf-body { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }
  /* "The job is not ... / The employee thinks ..." The first line is the
     software's name for the task, muted; the second is what someone at the
     counter actually says, and it carries the weight. */
  .sd-wf-frame {
    margin: 0 0 20px; padding: 16px 18px;
    border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: var(--paper);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: baseline;
  }
  .sd-wf-frame dt {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
  }
  .sd-wf-frame dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
  .sd-wf-frame dd.sd-wf-frame-says { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
  /* The recurring pair: what the incumbent has, what the same job feels like
     here. One line each, the Rundoo side in cobalt. */
  .sd-wf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
  .sd-wf-pair-cell {
    padding: 12px 14px; border-radius: var(--radius-md);
    border: 1px solid var(--paper-line); background: var(--paper);
  }
  .sd-wf-pair-cell--rundoo { background: var(--color-cobalt-50, #f3f4fc); border-color: var(--color-cobalt-200, #d2d7f0); }
  .sd-wf-pair-label {
    display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
  }
  .sd-wf-pair-cell--rundoo .sd-wf-pair-label { color: var(--color-cobalt-400, #0e1fc1); }
  .sd-wf-pair-text { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
  .sd-wf-pair-cell--rundoo .sd-wf-pair-text { color: var(--ink); }
  .sd-wf-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .sd-wf-points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  .sd-wf-points li::before {
    content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
    border-radius: 2px; background: var(--color-cobalt-400, #0e1fc1);
  }
  .sd-wf-points strong { color: var(--ink); font-weight: 650; }
  .sd-wf-visual { margin: 0; }
  .sd-wf-visual .wfv { position: relative; }
  /* `layout: stack` puts the visual under the copy at full width. For the
     five-step delivery flow, which is a row of cards, half a column is too
     narrow to read. */
  .sd-wf--stack { grid-template-columns: 1fr; gap: 28px; }
  .sd-wf--stack .sd-wf-copy { max-width: 760px; }
  /* A one-line credit strip under a story's card (frontmatter `credit` on the
     workflow): the contractor's account context riding with the sale, rather
     than a second card that would read as a separate accounting screen. */
  .sd-wf-credit {
    max-width: 680px; margin: 12px auto 0; padding: 12px 16px;
    border: 1px solid var(--color-cobalt-200, #d2d7f0); border-radius: var(--radius-md);
    background: var(--color-cobalt-50, #f3f4fc);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  }
  .sd-wf-credit-who { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
  .sd-wf-credit-item { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
  .sd-wf-credit-item b { color: var(--ink); font-weight: 650; }
  .sd-wf-credit-status {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-cobalt-400, #0e1fc1);
  }

  /* ---------- HERO VISUAL (frontmatter `hero_visual`) ----------
     One product screenshot under the hero copy, on the device stand the design
     system uses for real app UI (DESIGN_SYSTEM § 9). Stacked, not split: this
     template has no split hero and is not gaining one. */
  .sd-hero-visual { max-width: 1040px; margin: 44px auto 0; }
  .sd-hero-visual .device { margin: 0 auto; }
  /* `hero_layout: split`: copy and byline on the left, the device on the
     right, the way the industry pillars open. Only on the wide template. */
  .sd-hero--split .sd-hero-inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 32px 48px; align-items: center; }
  .sd-hero--split .sd-hero-copy { min-width: 0; }
  .sd-hero--split .sd-hero-visual { margin: 0; max-width: none; }
  /* The split hero's copy column is too narrow for buttons and byline on one
     row, so the byline always takes its own line there, without the divider. */
  .sd-hero--split .sd-byline { flex-basis: 100%; margin: 4px 0 0; padding-left: 0; border-left: none; }
  .sd-hero--split .sd-title { font-size: 46px; }
  @media (max-width: 1199px) {
    .sd-hero--split .sd-hero-inner { grid-template-columns: 1fr; }
    .sd-hero--split .sd-title { font-size: 40px; }
    .sd-hero--split .sd-hero-visual { max-width: 760px; margin: 8px auto 0; }
  }
  @media (max-width: 767px) { .sd-hero--split .sd-title { font-size: 32px; } }

  /* ---------- CUSTOMER TRUTH (frontmatter `truth`) ----------
     One large quote and a line of context, with whitespace doing the work.
     No cards, no columns. */
  .sd-truth { padding: 72px 32px; }
  .sd-truth-inner { max-width: 820px; margin: 0 auto; text-align: center; }
  .sd-truth-quote {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
  }
  .sd-truth-context { margin: 22px auto 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
  .sd-truth-takeaway {
    margin: 26px 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-cobalt-400, #0e1fc1);
  }
  @media (max-width: 767px) {
    .sd-truth { padding: 48px 20px; }
    .sd-truth-quote { font-size: 26px; }
    .sd-hero-visual { margin-top: 28px; }
  }
  @media (max-width: 1199px) {
    .sd-wf { grid-template-columns: 1fr; gap: 28px; }
    .sd-wf-copy .sd-section-title { font-size: 24px; }
  }
  @media (max-width: 767px) {
    .sd-wf-frame { grid-template-columns: 1fr; gap: 2px 0; }
    .sd-wf-frame dt { margin-top: 8px; }
    .sd-wf-frame dt:first-child { margin-top: 0; }
    .sd-wf-pair { grid-template-columns: 1fr; }
  }

  /* ---------- FPO BADGE for body-authored drawn visuals ----------
     Same red badge the lumber-preview cards carry, without the .pillar-page
     scope, so a hand-drawn block inside a switch body can wear it. Editorial
     only: aria-hidden, never alt text. */
  .sd-fpo { position: relative; }
  .sd-fpo-mark {
    position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(192, 57, 43, .92); color: #fff; border-radius: 6px; padding: 4px 8px;
    font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; line-height: 1;
  }
  .sd-fpo-mark small {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
    color: rgba(255, 255, 255, .85); border-left: 1px solid rgba(255, 255, 255, .4); padding-left: 7px;
  }
  /* A side-by-side panel with no approved screenshot yet: a labelled blank at
     the same 16/10 the real shot will fill, so the pair keeps its shape. */
  .sd-vs-placeholder {
    aspect-ratio: 16 / 10; flex: none; display: flex; align-items: center; justify-content: center;
    background: var(--paper-2); color: var(--ink-3); font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .04em; text-align: center; padding: 24px;
  }


  /* ---------- MATRIX: one incumbent column, three Rundoo interfaces under
     one grouped header. Plain cells, no marks: the argument is "dedicated
     capability, modern interaction", not "has / has not". ---------- */
  .sd-prose .sd-matrix th, .sd-prose .sd-matrix td { font-size: 14px; min-width: 0; padding: 11px 12px; }
  .sd-prose .sd-matrix thead th { text-align: left; vertical-align: bottom; }
  .sd-prose .sd-matrix th.sd-matrix-group { text-align: center; border-bottom: 1px solid var(--color-cobalt-200, #d2d7f0); color: var(--color-cobalt-400, #0e1fc1); background: var(--color-cobalt-50, #f3f4fc); }
  .sd-prose .sd-matrix th.sd-matrix-sub { background: var(--color-cobalt-50, #f3f4fc); font-weight: 600; font-size: 13px; }
  .sd-prose .sd-matrix td.sd-matrix-rundoo { background: rgba(243, 244, 252, .55); }
  .sd-prose .sd-matrix td.sd-matrix-job { font-weight: 650; color: var(--ink); }
  .sd-prose .sd-matrix td.sd-matrix-none { color: var(--ink-3); text-align: center; }
  .sd-prose .sd-matrix .sd-matrix-flag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); display: block; margin-top: 2px; }
  .sd-prose .sd-matrix-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }
  @media (max-width: 767px) { .sd-prose .sd-matrix th, .sd-prose .sd-matrix td { min-width: 130px; } }

  /* ---------- COMPARISON TABLE ON A PHONE ----------
     Two 240px columns do not fit a phone, and as a sideways-scrolling table
     the competitor column read as cut off, with nothing to say it scrolled.
     Below 767px each row stacks instead: the Rundoo cell, then the competitor
     cell, each under a small label taken from its column header. The script
     at the bottom of this template copies every <th> into its cells'
     data-label and adds .sd-compare--stack, so the stacked layout only
     applies once the labels exist; without JS the table scrolls as before.
     The labels are silent to screen readers (the `/ ""` alt text), because
     the script also gives the stacked table explicit ARIA table roles and the
     visually hidden header row still names each column. */
  @media (max-width: 767px) {
    .sd-prose .sd-compare--stack,
    .sd-prose .sd-compare--stack tbody,
    .sd-prose .sd-compare--stack tr,
    .sd-prose .sd-compare--stack td { display: block; width: 100%; }
    .sd-prose .sd-compare--stack thead {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    .sd-prose .sd-compare--stack tbody tr { border-bottom: 1px solid var(--paper-line); padding: 6px 0; }
    .sd-prose .sd-compare--stack tbody tr:last-child { border-bottom: 0; }
    .sd-prose .sd-compare--stack tbody td {
      min-width: 0; border-bottom: 0; padding: 32px 16px 8px 46px;
    }
    .sd-prose .sd-compare--stack td::after {
      content: attr(data-label);
      content: attr(data-label) / "";
      position: absolute; top: 12px; left: 16px;
      font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
      letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
    }
    .sd-prose .sd-compare--stack td:first-child::after { color: var(--color-cobalt-400); }
    .sd-prose .sd-compare--stack .sd-compare-yes::before { top: 34px; }
    .sd-prose .sd-compare--stack .sd-compare-no::before { top: 35px; }
  }

  /* ---------- MIGRATION NOTE (frontmatter `migration_note`) ----------
     Two lines under the checklist for what the data team reviews before
     go-live, plus an optional short review list. */
  .sd-migration-after { max-width: 640px; margin: 22px auto 0; }
  .sd-migration-after h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px; }
  .sd-migration-after p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  .sd-migration-review { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .sd-migration-review-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
  .sd-migration-review span:not(.sd-migration-review-label) { font-size: 13px; color: var(--ink-2); background: #fff; border: 1px solid var(--paper-line); border-radius: 999px; padding: 3px 10px; }

  /* Final CTA: shared .cta component (templates/_cta.html) */

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1199px) {
    .sd-title { font-size: 42px; }
    .sd-section-title { font-size: 26px; }
    .sd-steps { grid-template-columns: 1fr; gap: 12px; }
  }
  @media (max-width: 767px) {
    .sd-hero { padding: 48px 20px 48px; }
    .sd-byline { flex-basis: 100%; margin: 4px 0 0; padding-left: 0; border-left: none; }
    .sd-title { font-size: 32px; }
    .sd-subtitle { font-size: 16px; }
    .sd-section { padding: 48px 20px; }
    .sd-section-title { font-size: 22px; }
    .sd-spotlight-card { flex-direction: column; }
    .sd-spotlight-image { width: 100%; height: 180px; }
    .sd-spotlight-content { padding: 20px; }
    .sd-migration-row { flex-wrap: wrap; }
    .sd-migration-note { flex-basis: 100%; padding-left: calc(22px + 16px); font-size: 12px; }
    .sd-steps { grid-template-columns: 1fr; }
    /* Two up rather than one: each card is a logo and two short lines, so a
       single column would run this tier on for several screens. */
    .sd-also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }