/* Projects listing (projects.html) and detail pages (projects/*.html).
   Page-specific (pj- prefix), loaded after style.css; reuses its tokens. */

/* Clears the fixed navbar (about 91px tall on desktop) with roughly 50px of
   room above the page content. */
.pj-page {
    padding-top: 144px;
    /* The footer already has a 96px top margin; the shared .section bottom
       padding would double that gap at the end of the page. */
    padding-bottom: 0;
}

/* ---------- Shared: intro, labels, status ---------- */

/* Listing hero: heading, description and status note, centred in the same
   1080px container as the project rows. */
.pj-intro {
    max-width: 1080px;
    margin: 0 auto 56px;
    text-align: center;
}

/* Oracle wordmark inside the heading, in place of the word "Oracle". Sized
   from the heading's font (0.72em tall, Inter's cap height, so it never
   outweighs the heading text; capped at 36px) and nudged so its bottom sits on
   the text baseline. The logo and "ERP" never wrap apart. */
.pj-title-brand {
    white-space: nowrap;
}

.pj-title-logo {
    display: inline-block;
    width: auto;
    height: 0.72em;
    max-height: 36px;
    object-fit: contain;
    margin: 0 0.08em 0 0.04em;
    vertical-align: -0.06em;
}

.pj-label {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pj-title {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.pj-lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Status: a small pill on the detail pages ("Reference build in progress"). */
.pj-status {
    display: inline-block;
    margin: var(--spacing-sm) 0 0;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* On the listing the status is a two-line note, so it is plain muted text
   under the description rather than a box. */
.pj-intro .pj-status {
    display: block;
    max-width: 620px;
    margin: 16px auto 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Listing: alternating project rows ----------
   One project per full-width row: image and text side by side in two equal
   columns, image on the left in odd rows and on the right in even rows
   (CSS order only, so the reading order is the same in every row). Rows are
   separated by thin rules. Stacked, image first, below 900px. */

.pj-rows {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-color);
}

.pj-rows > li {
    border-bottom: 1px solid var(--border-color);
}

.pj-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 56px;
    padding: 48px 0;
}

.pj-rows > li:nth-child(even) .pj-row-media {
    order: 2;
}

/* Fixed 16:10 image area. The image is positioned inside it, so a tall source
   photo (the AP image is portrait) cannot stretch the box. */
.pj-row-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.pj-row-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pj-row-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Listing row order: title, category subheading, stack logos, description,
   button. */
.pj-row-area {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pj-row-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.pj-row-text {
    max-width: 52ch;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Small black button, matching the nav's Get Started style. */
.pj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    background: #1D1E1F;
    color: #F9F8F6;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.pj-btn:hover {
    background: #000000;
    color: #FFFFFF;
}

.pj-btn:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}

/* ---------- Listing: shared platform ---------- */

/* Grows with its content (no fixed height). Bottom padding 28px: with the last
   line's own leading that leaves about 33px under the final section. */
.pj-platform {
    max-width: 1080px;
    margin: var(--spacing-2xl) auto 0;
    padding: 32px 32px 28px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pj-platform h2,
.pj-section h2 {
    margin: 0 0 16px;
    font-size: 24px;
    line-height: 1.3;
    color: var(--text-primary);
}

/* Platform card: heading and intro sentence centred across the whole card
   (the intro also gets auto side margins, set after the body-text rule below). */
.pj-platform > h2,
.pj-platform > p {
    text-align: center;
}

/* Platform card: heading, one-line intro, the 8-stage diagram, then the five
   technical sections below a thin rule as a bulleted list, one item under
   another (label on its own line, then its text). Bullets sit outside the
   text, so wrapped lines stay aligned. The diagram's own rules are under
   "Workflow diagram" below. */
.pj-platform .pj-list {
    margin: 0;
    padding: 32px 0 0 22px;
    border-top: 1px solid var(--border-color);
    list-style: disc outside;
}

/* Sections separated by whitespace only (no divider lines); bullets in the
   stage-number blue-grey. Text uses the full card width (no line-length cap),
   so the list spans the same width as the centred heading and diagram. */
.pj-platform .pj-list li {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.7;
}

.pj-platform .pj-list li:last-child {
    margin-bottom: 0;
}

.pj-platform .pj-list li::marker {
    color: #6B7A8F;
}

.pj-platform .pj-list strong {
    display: block;
    margin-bottom: 4px;
}

/* Portfolio coverage: a card matching the platform card above it (same width,
   border, radius and padding), 24px below it: heading, one area per line, then
   the closing sentence. 32px bottom margin + the .pj-cta 32px top padding leaves
   64px above the closing card, as on the detail pages. */
.pj-coverage {
    max-width: 1080px;
    margin: 24px auto 32px;
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pj-coverage h2 {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-primary);
}

.pj-coverage-list {
    margin: 0 0 14px;
    padding-left: 20px;
}

.pj-coverage-list li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pj-coverage p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Workflow diagrams (ordered steps) ----------
   One set of rules for the shared platform diagram (projects.html) and the
   project workflows (projects/*.html). Numbered tiles (01, 02, ... from a CSS
   counter, in document order) in a 4-column grid (2 at <=900px, 1 at <=480px);
   every tile in a row has the same height. */

.pj-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 16px 32px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: pj-step;
}

.pj-platform .pj-flow {
    margin: 24px 0 32px;
}

.pj-flow li {
    position: relative;
    display: flex;
    counter-increment: pj-step;
}

/* Tile: light grey with a 3px medium-grey line inside the top edge (inset
   shadow, so the tile size does not change). A wrapping row: icon and number on
   the first line (8px apart, centred on each other); an empty full-width
   ::after forces the label onto the next line (4px row gap each side = 8px);
   align-content keeps the lines at the top of stretched tiles. break-word: words
   only break when a single word cannot fit on a line, never mid-word. */
.pj-flow li > span {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 4px 8px;
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 3px 0 #9299A3;
    background: #F1F0EE;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.pj-flow li > span::before {
    content: counter(pj-step, decimal-leading-zero);
    order: -2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6B7A8F;
}

.pj-flow li > span::after {
    content: "";
    order: -1;
    flex-basis: 100%;
    height: 0;
}

/* Stage icons: Lucide outline icons (lucide-static 0.460.0, ISC licence),
   stored unmodified in images/icons/. They draw in currentColor, which an <img>
   cannot recolour, so each is used as a CSS mask over a muted-navy fill. First
   on the icon/number row (order: -3). */
.pj-stage-icon {
    display: block;
    flex: none;
    order: -3;
    width: 20px;
    height: 20px;
    background-color: #475569;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

/* One class per icon file (paths relative to this stylesheet). */
.pj-icon-activity { -webkit-mask-image: url("../images/icons/activity.svg"); mask-image: url("../images/icons/activity.svg"); }
.pj-icon-bot { -webkit-mask-image: url("../images/icons/bot.svg"); mask-image: url("../images/icons/bot.svg"); }
.pj-icon-building-2 { -webkit-mask-image: url("../images/icons/building-2.svg"); mask-image: url("../images/icons/building-2.svg"); }
.pj-icon-calendar-check { -webkit-mask-image: url("../images/icons/calendar-check.svg"); mask-image: url("../images/icons/calendar-check.svg"); }
.pj-icon-calendar-range { -webkit-mask-image: url("../images/icons/calendar-range.svg"); mask-image: url("../images/icons/calendar-range.svg"); }
.pj-icon-check-check { -webkit-mask-image: url("../images/icons/check-check.svg"); mask-image: url("../images/icons/check-check.svg"); }
.pj-icon-circle-help { -webkit-mask-image: url("../images/icons/circle-help.svg"); mask-image: url("../images/icons/circle-help.svg"); }
.pj-icon-clipboard-check { -webkit-mask-image: url("../images/icons/clipboard-check.svg"); mask-image: url("../images/icons/clipboard-check.svg"); }
.pj-icon-clipboard-list { -webkit-mask-image: url("../images/icons/clipboard-list.svg"); mask-image: url("../images/icons/clipboard-list.svg"); }
.pj-icon-clock { -webkit-mask-image: url("../images/icons/clock.svg"); mask-image: url("../images/icons/clock.svg"); }
.pj-icon-database { -webkit-mask-image: url("../images/icons/database.svg"); mask-image: url("../images/icons/database.svg"); }
.pj-icon-file-pen-line { -webkit-mask-image: url("../images/icons/file-pen-line.svg"); mask-image: url("../images/icons/file-pen-line.svg"); }
.pj-icon-file-text { -webkit-mask-image: url("../images/icons/file-text.svg"); mask-image: url("../images/icons/file-text.svg"); }
.pj-icon-filter { -webkit-mask-image: url("../images/icons/filter.svg"); mask-image: url("../images/icons/filter.svg"); }
.pj-icon-git-compare { -webkit-mask-image: url("../images/icons/git-compare.svg"); mask-image: url("../images/icons/git-compare.svg"); }
.pj-icon-inbox { -webkit-mask-image: url("../images/icons/inbox.svg"); mask-image: url("../images/icons/inbox.svg"); }
.pj-icon-key-round { -webkit-mask-image: url("../images/icons/key-round.svg"); mask-image: url("../images/icons/key-round.svg"); }
.pj-icon-landmark { -webkit-mask-image: url("../images/icons/landmark.svg"); mask-image: url("../images/icons/landmark.svg"); }
.pj-icon-layers { -webkit-mask-image: url("../images/icons/layers.svg"); mask-image: url("../images/icons/layers.svg"); }
.pj-icon-lightbulb { -webkit-mask-image: url("../images/icons/lightbulb.svg"); mask-image: url("../images/icons/lightbulb.svg"); }
.pj-icon-list-checks { -webkit-mask-image: url("../images/icons/list-checks.svg"); mask-image: url("../images/icons/list-checks.svg"); }
.pj-icon-list-ordered { -webkit-mask-image: url("../images/icons/list-ordered.svg"); mask-image: url("../images/icons/list-ordered.svg"); }
.pj-icon-mail { -webkit-mask-image: url("../images/icons/mail.svg"); mask-image: url("../images/icons/mail.svg"); }
.pj-icon-plug { -webkit-mask-image: url("../images/icons/plug.svg"); mask-image: url("../images/icons/plug.svg"); }
.pj-icon-scan-search { -webkit-mask-image: url("../images/icons/scan-search.svg"); mask-image: url("../images/icons/scan-search.svg"); }
.pj-icon-scan-text { -webkit-mask-image: url("../images/icons/scan-text.svg"); mask-image: url("../images/icons/scan-text.svg"); }
.pj-icon-search { -webkit-mask-image: url("../images/icons/search.svg"); mask-image: url("../images/icons/search.svg"); }
.pj-icon-shield-check { -webkit-mask-image: url("../images/icons/shield-check.svg"); mask-image: url("../images/icons/shield-check.svg"); }
.pj-icon-shopping-cart { -webkit-mask-image: url("../images/icons/shopping-cart.svg"); mask-image: url("../images/icons/shopping-cart.svg"); }
.pj-icon-triangle-alert { -webkit-mask-image: url("../images/icons/triangle-alert.svg"); mask-image: url("../images/icons/triangle-alert.svg"); }
.pj-icon-truck { -webkit-mask-image: url("../images/icons/truck.svg"); mask-image: url("../images/icons/truck.svg"); }
.pj-icon-user-check { -webkit-mask-image: url("../images/icons/user-check.svg"); mask-image: url("../images/icons/user-check.svg"); }
.pj-icon-user-search { -webkit-mask-image: url("../images/icons/user-search.svg"); mask-image: url("../images/icons/user-search.svg"); }
.pj-icon-users { -webkit-mask-image: url("../images/icons/users.svg"); mask-image: url("../images/icons/users.svg"); }
.pj-icon-workflow { -webkit-mask-image: url("../images/icons/workflow.svg"); mask-image: url("../images/icons/workflow.svg"); }

/* Step-to-step arrows, drawn in the grid gaps. Each layout has its own range so
   no rule overrides another: rows of 4 (desktop), rows of 2 (tablet), one
   column with downward arrows (phones). No arrow after the last tile in a row
   or after the final step; the numbering carries the flow to the next row.
   Each arrow's box is exactly the size of its gap (32px wide between columns,
   28px tall between rows on phones) with the glyph centred, so it stays clear
   of both tiles. */
.pj-flow li::after {
    position: absolute;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #64748B;
    pointer-events: none;
}

@media (min-width: 901px) {
    .pj-flow li:not(:nth-child(4n)):not(:last-child)::after {
        content: "\2192";
        top: 50%;
        right: -32px;
        width: 32px;
        transform: translateY(-50%);
    }
}

@media (min-width: 481px) and (max-width: 900px) {
    .pj-flow li:nth-child(odd):not(:last-child)::after {
        content: "\2192";
        top: 50%;
        right: -32px;
        width: 32px;
        transform: translateY(-50%);
    }
}

@media (max-width: 480px) {
    .pj-flow li:not(:last-child)::after {
        content: "\2193";
        left: 0;
        right: 0;
        bottom: -28px;
        line-height: 28px;
    }
}

.pj-flow-caption {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---------- Detail pages ---------- */

.pj-detail {
    max-width: 960px;
    margin: 0 auto;
}

/* Detail hero, left-aligned: heading, then the category subheading, then the
   project's stack logos, then the project photo. */
.pj-detail-head {
    margin-bottom: 28px;
}

.pj-detail-head .pj-title {
    margin-bottom: 10px;
    font-size: 34px;
}

.pj-detail-head .pj-label {
    margin: 0;
}

.pj-detail-head .pj-logo-row {
    margin: 16px 0 0;
}

/* Row of genuine product logos (stack logos under a project's subheading on
   the listing and detail heroes, Oracle on the integration section, stack on
   the technology section). Logos keep their own colours and proportions at one
   height and wrap on narrow screens. */
.pj-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.pj-logo-row img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 120px;
    height: 28px;
    object-fit: contain;
}

/* Oracle wordmark leads each project's row. Its letters fill the whole box, so
   16px (14px on phones) keeps it below the cap height of the headings above. */
.pj-logo-row .pj-logo-wordmark {
    max-width: 120px;
    height: 16px;
}

/* Per-logo display heights so wide wordmarks and square marks look optically
   equal (same values as the credentials page, kumars_experience/js/
   certifications.js, which also records each file's official source). */
.pj-logo-row img[src$="mcp.svg"] {
    height: 14px;
}

.pj-logo-row img[src$="openai.svg"] {
    height: 16px;
}

.pj-logo-row img[src$="claude.svg"] {
    height: 18px;
}

.pj-logo-row img[src$="google-g.png"] {
    height: 20px;
}

.pj-logo-row img[src$="adk.png"],
.pj-logo-row img[src$="crewai.svg"] {
    height: 22px;
}

/* Listing rows: tighter spacing and slightly smaller logos (same proportions
   as above) so Oracle plus five stack logos fit one line of the text column. */
.pj-row-body .pj-logo-row {
    gap: 10px 14px;
    margin: 0 0 18px;
}

.pj-row-body .pj-logo-row .pj-logo-wordmark {
    height: 14px;
}

.pj-row-body .pj-logo-row img[src$="mcp.svg"] {
    height: 12px;
}

.pj-row-body .pj-logo-row img[src$="openai.svg"] {
    height: 14px;
}

.pj-row-body .pj-logo-row img[src$="claude.svg"] {
    height: 16px;
}

.pj-row-body .pj-logo-row img[src$="adk.png"],
.pj-row-body .pj-logo-row img[src$="crewai.svg"] {
    height: 20px;
}

.pj-hero {
    position: relative;
    margin: 0 0 var(--spacing-xl);
    aspect-ratio: 21 / 9;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-light);
}

.pj-hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pj-section {
    margin-bottom: var(--spacing-lg);
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Oracle ERP integration panel: heading left, Oracle wordmark far right on the
   same row. The heading takes the remaining width and wraps its own text, so the
   logo never overlaps it. 18px tall (14px on phones) stays below the heading's
   cap height; width follows the SVG's own 114:17 ratio. */
.pj-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 16px;
}

.pj-section .pj-section-head h2 {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    overflow-wrap: break-word;
}

.pj-section-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 18px;
    object-fit: contain;
}

.pj-section h3 {
    margin: 20px 0 10px;
    font-size: 17px;
    color: var(--text-primary);
}

/* Body text in the detail panels and the platform card. Detail panels use their
   full width; the platform intro is a short centred line (75ch cap). */
.pj-section p,
.pj-platform > p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.pj-section p:last-child {
    margin-bottom: 0;
}

/* Centres the platform intro sentence (after the margin shorthand above). */
.pj-platform > p {
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

.pj-list {
    margin: 0;
    padding-left: 20px;
}

.pj-list li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.pj-list li:last-child {
    margin-bottom: 0;
}

.pj-list strong {
    color: var(--text-primary);
}

/* Agents panel split into Part A / Part B subheadings (AP page). More room
   under the panel heading, airier multi-line part headings, wider list
   rhythm, and a hairline rule above Part B to separate the two parts. */
.pj-agents-parts h2 {
    margin-bottom: 24px;
}

.pj-agents-parts h3 {
    margin: 0 0 14px;
    line-height: 1.45;
}

.pj-agents-parts .pj-list + h3 {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.pj-agents-parts .pj-list li {
    margin-bottom: 14px;
    line-height: 1.75;
}

.pj-agents-parts .pj-list li:last-child {
    margin-bottom: 0;
}

/* Validation plan: the "targets, not measured results" statement as a small
   muted line directly above the figures. */
.pj-section .pj-note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Validation targets as separate KPI blocks: large black figure, muted label
   below. One row of equal columns on desktop (however many targets the project
   has), 2 columns at <=900px, 1 at <=360px. Blocks grow with their label. */
.pj-kpis {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pj-kpi {
    padding: 24px 20px;
    border-radius: var(--radius-sm);
    background: #F7F6F4;
}

.pj-kpi-value {
    display: block;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.pj-kpi-label {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

/* Closing project-discussion card on the detail pages: centred heading and the
   shared dark .btn-primary, on a light neutral panel with a hairline border, as
   wide as the project content. Top padding replaces the shared .section 96px:
   with the last panel's 32px bottom margin it leaves 64px above the card. */
.pj-cta {
    padding: 32px 0 0;
}

.pj-discuss {
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 32px;
    text-align: center;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pj-discuss-title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

/* Optional supporting line (listing page): pulled up to sit 12px under the
   heading, keeping the heading's 24px gap above the button. */
.pj-discuss-text {
    margin: -12px auto 24px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pj-discuss .btn {
    display: inline-block;
    font-weight: 700;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(29, 30, 31, 0.18);
}

/* ---------- Responsive ---------- */

/* Tablets: rows stack (image above text, same order in every row); workflow
   diagrams drop to 2 columns. */
@media (max-width: 900px) {
    .pj-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 36px 0;
    }

    .pj-rows > li:nth-child(even) .pj-row-media {
        order: 0;
    }

    .pj-row-title {
        font-size: 22px;
    }

    .pj-row-text {
        max-width: none;
    }

    .pj-intro .pj-title {
        font-size: 40px;
    }

    .pj-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pj-kpis {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The shared navbar switches to its compact mobile bar (about 57px) at 768px. */
@media (max-width: 768px) {
    .pj-page {
        padding-top: 112px;
    }
}

@media (max-width: 640px) {
    .pj-intro {
        margin-bottom: 40px;
    }

    .pj-label {
        margin-bottom: 12px;
    }

    .pj-intro .pj-title {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .pj-detail-head .pj-title {
        font-size: 28px;
    }

    .pj-section-head {
        gap: 16px;
    }

    .pj-section-logo {
        height: 14px;
    }

    .pj-lead {
        font-size: 16px;
    }

    .pj-intro .pj-status {
        margin-top: 14px;
    }

    .pj-row {
        gap: 18px;
        padding: 28px 0;
    }

    .pj-row-title {
        font-size: 20px;
    }

    .pj-logo-row {
        gap: 12px 20px;
    }

    .pj-logo-row .pj-logo-wordmark {
        height: 14px;
    }

    .pj-row-text {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .pj-platform,
    .pj-section {
        padding: 20px;
    }

    .pj-section.pj-agents-parts {
        padding: 24px;
    }

    .pj-platform {
        padding-bottom: 24px;
    }

    .pj-hero {
        aspect-ratio: 16 / 10;
    }

    .pj-coverage {
        padding: 20px;
    }

    .pj-kpis {
        gap: 12px;
    }

    .pj-kpi {
        padding: 18px 16px;
    }

    .pj-kpi-value {
        font-size: 34px;
    }

    .pj-discuss {
        padding: 40px 20px;
    }

    .pj-discuss-title {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .pj-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The shared stylesheet drops .container to 8px side padding here; keep
       the 16px gutter of wider phones on the projects pages (nav, content and
       footer together, so they stay aligned). */
    .container {
        padding: 0 var(--spacing-sm);
    }

    .pj-section.pj-agents-parts {
        padding: 22px 20px;
    }
}

/* Hyphenated compounds (Procure-to-Pay, high-risk, ...) in page copy are
   wrapped in this span so a line never ends on a hyphen. */
.pj-nowrap {
    white-space: nowrap;
}

/* Phones: one step per row in every workflow diagram. */
@media (max-width: 480px) {
    .pj-flow {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 28px 0;
    }
}

/* Projects pages only: the site-wide sticky "Ready to automate?" bar (fixed to
   the bottom of the window, about 76px tall; about 110px when it stacks at
   600px and below) would cover the footer's last line at the end of the page.
   Extra footer padding keeps that line clear; the bar then covers only dark
   footer space. It does not change the bar overlaying content mid-scroll. */
.footer {
    padding-bottom: calc(var(--spacing-md) + 80px);
}

@media (max-width: 600px) {
    .footer {
        padding-bottom: calc(var(--spacing-md) + 112px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pj-btn {
        transition: none;
    }
}