/*
 * Robotics & Automation — /robotics/ (template page-robotics)
 *
 * Extends the approved V5 portfolio layer (portfolio.css, tokens --pv-*,
 * .ax-shell/.ax-head/.ax-button/.ax-contact). No new palette: layer colours
 * keep their V5 meaning (mint = machine, sky = software/technology,
 * sand = business/supply). Coral appears only as the live result signal.
 *
 * Signature: the "typical system" band stack — the System Spine idea applied
 * to a recommendation. It is the only animated element on the route.
 */

.ax-robotics-page {
    --rb-section: clamp(3.5rem, 7vw, 6.5rem);
    --rb-radius: 6px;
    --rb-radius-lg: 10px;
}

.ax-robotics-page :where(h3, h4, h5) {
    margin: 0;
}

/* Author-level `hidden` must win over component display rules. */
.ax-robotics-page [hidden] {
    display: none !important;
}

/* ---------- Hero ----------
 * Copy stays primary; the process canvas (one real photograph, drawn
 * leaders, three callouts) is the route's single expressive element.
 */

.ax-rb-hero {
    padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

.ax-rb-hero__grid {
    align-items: center;
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem) var(--pv-col-gap);
    grid-template-columns: minmax(0, 1fr);
}

.ax-rb-hero__copy {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.ax-rb-hero__who {
    color: var(--pv-teal);
    font-size: .95rem;
    font-weight: 650;
}

.ax-rb-hero h1 {
    font-family: var(--pv-serif);
    font-size: clamp(2.25rem, 4.4vw, 3.9rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.02;
    max-width: 18ch;
    text-wrap: balance;
}

.ax-rb-hero__lede {
    font-family: var(--pv-serif);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    max-width: 38rem;
}

.ax-rb-hero__support {
    color: var(--pv-muted);
    line-height: 1.6;
    max-width: 34rem;
}

.ax-rb-hero .ax-actions {
    margin-top: .5rem;
}

/* Process canvas */

.ax-rb-canvas {
    display: grid;
    gap: .6rem;
    margin: 0;
    min-width: 0;
}

.ax-rb-canvas__frame {
    aspect-ratio: 1;
    background: var(--pv-ink);
    border: 1px solid var(--pv-rule-strong);
    overflow: hidden;
    position: relative;
}

/* Inner hairline: a viewfinder, not a decoration on the copy side. */
.ax-rb-canvas__frame::after {
    border: 1px solid rgba(251, 252, 249, .32);
    content: "";
    inset: .65rem;
    pointer-events: none;
    position: absolute;
}

.ax-rb-canvas__frame picture,
.ax-rb-canvas__frame img {
    display: block;
    height: 100%;
    width: 100%;
}

.ax-rb-canvas__frame img {
    object-fit: cover;
}

.ax-rb-canvas__lines {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.ax-rb-canvas__leader {
    stroke: var(--pv-paper);
    /* viewBox units: the frame is square wherever leaders are shown. */
    stroke-width: .25;
}

.ax-rb-canvas__point {
    border: 1.5px solid var(--pv-paper);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(23, 33, 29, .45);
    height: .7rem;
    left: var(--x);
    position: absolute;
    top: var(--y);
    transform: translate(-50%, -50%);
    width: .7rem;
}

.ax-rb-canvas__chip {
    background: rgba(251, 252, 249, .95);
    border-radius: 3px;
    color: var(--pv-ink);
    font-size: .78rem;
    font-weight: 650;
    left: var(--x);
    line-height: 1.2;
    max-width: 38%;
    padding: .3rem .55rem;
    position: absolute;
    top: var(--y);
    transform: translateY(-50%);
}

.ax-rb-canvas__caption {
    color: var(--pv-muted);
    font-size: .875rem;
    line-height: 1.5;
}

/* One sentence; only the source name is linked (an inline link in text). */
.ax-rb-canvas__caption a {
    text-decoration-color: var(--pv-rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

/* One orchestrated moment: the leaders draw once after load. */
@media (prefers-reduced-motion: no-preference) {
    .ax-rb-canvas__leader {
        animation: ax-rb-draw .7s var(--pv-ease) both;
        animation-delay: calc(.35s + var(--i, 0) * .15s);
        stroke-dasharray: 1;
    }

    .ax-rb-canvas__point,
    .ax-rb-canvas__chip {
        animation: ax-rb-fade .45s var(--pv-ease) both;
        animation-delay: calc(.6s + var(--i, 0) * .15s);
    }
}

@keyframes ax-rb-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Who you work with: a strip under the hero; a disclosure on phones. */

.ax-rb-who {
    border-top: 1px solid var(--pv-rule-strong);
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.ax-rb-who__heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--pv-sans);
    font-size: .875rem;
    font-weight: 650;
    gap: .25rem .75rem;
    letter-spacing: .01em;
    list-style: none;
    min-height: 3rem;
    padding-block: .5rem;
}

.ax-rb-who__heading::-webkit-details-marker {
    display: none;
}

.ax-rb-who__names {
    color: var(--pv-muted);
    font-weight: 500;
}

.ax-rb-who__list {
    display: grid;
    gap: 1rem var(--pv-col-gap);
    padding-bottom: .25rem;
}

.ax-rb-who__item {
    border-left: 4px solid var(--pv-l-people);
    display: grid;
    gap: .2rem;
    padding-left: .9rem;
}

.ax-rb-who__item--eurobots {
    border-left-color: var(--pv-l-physical);
}

.ax-rb-who__item--rebots {
    border-left-color: var(--pv-l-software);
}

.ax-rb-who dt {
    font-weight: 700;
}

.ax-rb-who dt a {
    display: inline-block;
    padding-block: .2rem;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

.ax-rb-who dd {
    color: var(--pv-muted);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
}

/* Scope note closing the strip: supply, evaluation, PoC and integration
   are different scopes. Inside the disclosure, so phones open it with the
   identities. */
.ax-rb-who__scope {
    color: var(--pv-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin-top: 1rem;
    max-width: 62rem;
    padding-bottom: .25rem;
}

/* Phones: the summary is the heading. Wide: the strip is always open, so
   the summary is removed (not focusable) and a real h2 takes over. */
.ax-rb-who__title {
    display: none;
    font-family: var(--pv-sans);
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: .01em;
    max-width: none;
    padding-block: .9rem .75rem;
}

@media (min-width: 48rem) {
    .ax-rb-who__heading {
        display: none;
    }

    .ax-rb-who__title {
        display: block;
    }

    .ax-rb-who__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
    .ax-rb-canvas {
        max-width: 34rem;
    }
}

@media (min-width: 64rem) {
    /* The copy column is exactly as tall as the photograph and starts at
       its top edge: the figure spans a photo row and a caption row (subgrid)
       and the copy fills the photo row. The prose stays together; the
       actions settle on the photograph's bottom edge. */
    .ax-rb-hero__grid {
        align-items: stretch;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto auto;
        row-gap: .6rem;
    }

    .ax-rb-hero__copy {
        align-content: start;
        grid-column: 1 / span 7;
        grid-row: 1;
        grid-template-rows: repeat(4, auto) 1fr;
    }

    .ax-rb-hero .ax-actions {
        align-self: end;
    }

    .ax-rb-canvas {
        grid-column: 8 / -1;
        grid-row: 1 / span 2;
        grid-template-rows: subgrid;
    }

    /* Where the copy is the taller column (around 64rem), the square photo
       keeps its crop and sits on the caption rather than leaving a gap. */
    .ax-rb-canvas__frame {
        align-self: end;
    }
}

/* Phones: centred conversion moment, a wide static crop, no callouts. */
@media (max-width: 47.99rem) {
    .ax-rb-who dd {
        font-size: 1rem;
    }

    .ax-rb-hero__copy {
        justify-items: center;
        text-align: center;
    }

    .ax-rb-hero h1,
    .ax-rb-hero__lede {
        margin-inline: auto;
    }

    /* The pair stays on one row down to 320px: two equal columns, a label
       may wrap inside its button but the buttons never stack. */
    .ax-rb-hero .ax-actions {
        align-items: stretch;
        display: grid;
        gap: .625rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 26rem;
        width: 100%;
    }

    /* Block flow so a wrapped label keeps its arrow after the last word. */
    .ax-rb-hero .ax-actions .ax-button {
        align-content: center;
        display: block;
        line-height: 1.25;
        padding: .45rem clamp(.75rem, 3.5vw, 1.3rem);
        text-align: center;
        /* Balanced lines never leave the arrow alone on the second line. */
        text-wrap: balance;
    }

    .ax-rb-hero .ax-actions .ax-button span[aria-hidden] {
        display: inline-block;
    }

    .ax-rb-hero__support {
        font-size: .95rem;
        margin-inline: auto;
    }

    .ax-rb-canvas__frame {
        aspect-ratio: 16 / 10;
    }

    .ax-rb-canvas__frame img {
        object-position: 30% 62% !important;
    }

    .ax-rb-canvas__lines,
    .ax-rb-canvas__point,
    .ax-rb-canvas__chip {
        display: none;
    }

    .ax-rb-who {
        margin-top: 1.25rem;
    }

    .ax-rb-who__heading {
        cursor: pointer;
        justify-content: space-between;
    }

    .ax-rb-who__heading::after {
        color: var(--pv-teal);
        content: "+";
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1;
        margin-left: auto;
    }

    .ax-rb-who[open] .ax-rb-who__heading::after {
        content: "\2212";
    }

    .ax-rb-who__list {
        padding-bottom: 0;
    }

    .ax-rb-who__scope {
        font-size: 1rem;
        margin-top: .9rem;
        padding-bottom: 1rem;
    }
}

/* Narrowest phones: "conversation" and its arrow share the second line. */
@media (max-width: 22.49rem) {
    .ax-rb-hero .ax-actions .ax-button {
        font-size: .875rem;
        padding-inline: .5rem;
    }
}

/* ---------- Finder ---------- */

.ax-rb-finder {
    background: var(--pv-paper);
    border-block: 1px solid var(--pv-rule);
    padding-block: clamp(2rem, 3.5vw, 3.25rem) clamp(2.5rem, 5vw, 4.5rem);
    scroll-margin-top: 5rem;
}

.ax-rb-finder__head {
    display: grid;
    gap: .75rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.ax-rb-finder__head h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    max-width: 20ch;
}

@media (min-width: 64rem) {
    .ax-rb-finder__head {
        align-items: end;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-finder__head h2 {
        grid-column: 1 / span 6;
    }

    .ax-rb-finder__intro {
        grid-column: 7 / -1;
    }
}

.ax-rb-finder__intro {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.ax-rb-finder__head .ax-rb-finder__lead {
    color: var(--pv-ink);
    font-weight: 650;
}

.ax-rb-finder__head p {
    color: var(--pv-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 40rem;
}

.ax-rb-finder__grid {
    align-items: start;
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.5rem) var(--pv-col-gap);
}

@media (min-width: 64rem) {
    .ax-rb-finder__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-finder__form {
        grid-column: 1 / span 7;
    }

    .ax-rb-result {
        grid-column: 8 / -1;
    }
}

.ax-rb-finder__form {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.ax-rb-finder__step {
    color: var(--pv-muted);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ax-rb-step {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.ax-rb-step--details {
    display: grid;
    gap: 1.25rem;
}

.ax-rb-step__legend,
.ax-rb-step__title {
    font-family: var(--pv-serif);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin-bottom: 1rem;
    padding: 0;
}

.ax-rb-step__title {
    margin-bottom: 0;
}

.ax-rb-step__hint {
    color: var(--pv-muted);
    margin-top: -.75rem;
}

.ax-rb-needs {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.ax-rb-needs + .ax-rb-needs {
    margin-top: 1.25rem;
}

.ax-rb-needs__label {
    color: var(--pv-teal);
    float: left;
    padding: 0;
    width: 100%;
    font-size: .875rem;
    font-weight: 650;
    margin-bottom: .5rem;
}

.ax-rb-needs__list {
    clear: both;
    display: grid;
    gap: .5rem;
}

@media (min-width: 40rem) {
    .ax-rb-needs__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ax-rb-need {
    align-items: start;
    background: var(--pv-white);
    border: 1px solid var(--pv-rule);
    border-radius: var(--rb-radius);
    cursor: pointer;
    display: grid;
    gap: .75rem;
    grid-template-columns: auto minmax(0, 1fr);
    height: 100%;
    min-height: 3.25rem;
    padding: .75rem .9rem;
    transition: border-color .15s var(--pv-ease), background-color .15s var(--pv-ease);
}

.ax-rb-need:hover {
    border-color: var(--pv-rule-strong);
}

.ax-rb-need__input,
.ax-rb-opt input {
    appearance: none;
    background: var(--pv-white);
    border: 2px solid var(--pv-muted);
    border-radius: 50%;
    flex: none;
    height: 1.15rem;
    margin: .15rem 0 0;
    width: 1.15rem;
}

.ax-rb-need__input:checked {
    background: var(--pv-teal);
    border-color: var(--pv-teal);
    box-shadow: inset 0 0 0 3px var(--pv-white);
}

.ax-rb-need:has(:checked) {
    background: var(--pv-mint);
    border-color: var(--pv-teal);
    box-shadow: inset 3px 0 0 var(--pv-teal);
}

.ax-rb-need:has(:focus-visible) {
    outline: 3px solid var(--pv-focus);
    outline-offset: 2px;
}

@supports selector(:has(*)) {
    .ax-rb-need__input:focus-visible {
        outline: none;
    }
}

.ax-rb-need,
.ax-rb-opt {
    font-weight: 400;
}

.ax-rb-need__text {
    display: grid;
    gap: .15rem;
}

.ax-rb-need__label {
    font-weight: 700;
    line-height: 1.3;
}

.ax-rb-need__prompt {
    color: var(--pv-muted);
    font-size: .9rem;
    line-height: 1.4;
}

.ax-rb-need:has(:checked) .ax-rb-need__prompt {
    color: var(--pv-ink);
}

.ax-rb-needs--unsure .ax-rb-needs__list {
    grid-template-columns: 1fr;
}

.ax-rb-need--unsure {
    background: transparent;
    border-style: dashed;
    border-color: var(--pv-rule-strong);
}

.ax-rb-selected {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ax-rb-selected span {
    color: var(--pv-muted);
}

/* Questions */

.ax-rb-qs {
    display: grid;
    gap: 1.25rem;
}

.ax-rb-q {
    border: 0;
    border-top: 1px solid var(--pv-rule);
    margin: 0;
    min-width: 0;
    padding: 1rem 0 0;
}

.ax-rb-q legend,
.ax-rb-q--text label {
    display: block;
    float: left;
    font-weight: 700;
    margin-bottom: .75rem;
    padding: 0;
    width: 100%;
}

.ax-rb-q__options {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ax-rb-opt {
    align-items: center;
    background: var(--pv-white);
    border: 1px solid var(--pv-rule-strong);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    gap: .5rem;
    line-height: 1.25;
    max-width: 100%;
    min-height: 2.75rem;
    padding: .45rem 1rem .45rem .7rem;
}

.ax-rb-opt input {
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.ax-rb-opt:has(:checked) {
    background: var(--pv-ink);
    border-color: var(--pv-ink);
    color: var(--pv-white);
}

.ax-rb-opt input:checked {
    background: var(--pv-coral);
    border-color: var(--pv-white);
    box-shadow: inset 0 0 0 2px var(--pv-ink);
}

.ax-rb-opt:has(:focus-visible) {
    outline: 3px solid var(--pv-focus);
    outline-offset: 2px;
}

@supports selector(:has(*)) {
    .ax-rb-opt input:focus-visible {
        outline: none;
    }
}

.ax-rb-q--text input {
    border: 1px solid var(--pv-rule-strong);
    border-radius: var(--rb-radius);
    clear: both;
    display: block;
    font: inherit;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    width: min(100%, 24rem);
}

.ax-rb-q__note {
    color: var(--pv-muted);
    font-size: .875rem;
    margin-top: .5rem;
}

.ax-rb-refine {
    border-top: 1px solid var(--pv-rule);
    padding-top: 1rem;
}

.ax-rb-refine summary {
    cursor: pointer;
    font-weight: 700;
    min-height: 2.75rem;
    padding-block: .6rem;
}

.ax-rb-refine[open] summary {
    margin-bottom: .5rem;
}

.ax-rb-refine .ax-rb-q {
    margin-top: .75rem;
}

.ax-rb-finder__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.ax-rb-finder__actions .ax-button {
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

@media (max-width: 63.99rem) {
    /* Keep focused controls clear of the sticky action bar (WCAG 2.4.11). */
    .ax-rb-need,
    .ax-rb-opt,
    .ax-rb-refine summary,
    .ax-rb-q--text input {
        scroll-margin-bottom: 5.5rem;
    }

    .ax-rb-finder__actions--sticky {
        background: var(--pv-paper);
        border-top: 1px solid var(--pv-rule);
        bottom: 0;
        margin-inline: calc(var(--pv-gutter) * -1);
        padding: .75rem var(--pv-gutter) max(.75rem, env(safe-area-inset-bottom));
        position: sticky;
        z-index: 2;
    }
}

/* Phones: one decision at a time with compact answer rows. The prompt of
   the chosen need is revealed; the empty result waits until there is one. */
@media (max-width: 47.99rem) {
    /* The step-2 Back/Show pair must remain side by side, even at 320px.
       Labels may wrap inside their own buttons, never into a second row. */
    .ax-rb-step--details .ax-rb-finder__actions {
        align-items: stretch;
        display: grid;
        gap: .625rem;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    }

    .ax-rb-step--details .ax-rb-finder__actions .ax-button {
        box-sizing: border-box;
        justify-content: center;
        line-height: 1.25;
        min-inline-size: 0;
        overflow-wrap: anywhere;
        padding-inline: .5rem;
        text-align: center;
        white-space: normal;
    }

    .ax-rb-step--details .ax-rb-finder__actions [data-ax-back] {
        gap: .35rem;
    }

    .ax-rb-need {
        align-items: center;
        min-height: 3rem;
        padding: .65rem .85rem;
    }

    .ax-rb-need__input {
        margin-top: 0;
    }

    .ax-rb-need__prompt {
        display: none;
    }

    .ax-rb-need:has(:checked) .ax-rb-need__prompt {
        display: block;
    }

    .ax-rb-needs + .ax-rb-needs {
        margin-top: 1rem;
    }

    .ax-rb-finder.is-enhanced:not(.has-result) .ax-rb-result {
        display: none;
    }
}

/* Without JavaScript only the need list and Continue are meaningful. */
.ax-rb-finder:not(.is-enhanced) .ax-rb-finder__step,
.ax-rb-finder:not(.is-enhanced) [data-ax-step="2"] {
    display: none;
}

/* ---------- Result panel ---------- */

.ax-rb-result {
    background: var(--pv-white);
    border: 1px solid var(--pv-rule);
    border-radius: var(--rb-radius-lg);
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.1rem, 2.4vw, 1.75rem);
    scroll-margin-top: 6.5rem;
}

.ax-rb-result__head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.ax-rb-result__heading {
    font-family: var(--pv-sans);
    font-size: .95rem;
    font-weight: 700;
}

.ax-rb-result__restart {
    background: none;
    border: 0;
    color: var(--pv-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}

.ax-rb-result__body {
    /* The inline project summary must share ONE result track with the
       recommendation, not create implicit columns when revealed. */
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

.ax-rb-result__body > .ax-rb-brief {
    grid-column: 1;
    margin: 0;
    min-width: 0;
}

.ax-rb-result__note {
    border-top: 1px solid var(--pv-rule);
    color: var(--pv-muted);
    font-size: .85rem;
    line-height: 1.5;
    padding-top: 1rem;
}

.ax-rb-empty {
    color: var(--pv-muted);
    display: grid;
    gap: 1.25rem;
    line-height: 1.55;
}

.ax-rb-stack--ghost .ax-rb-stack__band {
    background: transparent;
    border: 1px dashed var(--pv-rule-strong);
    color: var(--pv-muted);
    font-weight: 500;
}

/* ---------- Result card ---------- */

.ax-rb-card {
    display: grid;
    gap: .9rem;
}

.ax-rb-card__confidence {
    align-items: center;
    color: var(--pv-teal);
    display: flex;
    font-size: .875rem;
    font-weight: 650;
    gap: .55rem;
}

/* The one live signal: coral marks the current recommendation. */
.ax-rb-card--top .ax-rb-card__confidence::before {
    background: var(--pv-coral);
    border-radius: 50%;
    content: "";
    flex: none;
    height: .55rem;
    width: .55rem;
}

.ax-rb-card__title {
    font-family: var(--pv-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.ax-rb-card__summary {
    line-height: 1.55;
}

.ax-rb-card__best {
    color: var(--pv-muted);
    font-family: var(--pv-serif);
    font-style: italic;
    line-height: 1.5;
}

.ax-rb-card__detail {
    display: grid;
    gap: 1.1rem;
}

.ax-rb-card__block {
    display: grid;
    gap: .5rem;
}

.ax-rb-card h5 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.ax-rb-card__why,
.ax-rb-card__tech,
.ax-rb-card__related {
    display: grid;
    gap: .4rem;
    line-height: 1.45;
}

.ax-rb-card__why li,
.ax-rb-card__tech li {
    padding-left: 1.1rem;
    position: relative;
}

.ax-rb-card__why li::before,
.ax-rb-card__tech li::before {
    color: var(--pv-teal);
    content: "–";
    left: 0;
    position: absolute;
}

.ax-rb-card__why li.is-answer::before {
    content: "";
}

.ax-rb-card__why li.is-answer {
    padding-left: 0;
}

.ax-rb-card__from {
    background: var(--pv-mint);
    border-radius: 3px;
    color: var(--pv-teal-deep);
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    margin-right: .35rem;
    padding: .05rem .4rem;
}

.ax-rb-card__cols {
    display: grid;
    gap: 1.1rem;
}

.ax-rb-card__related a {
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.ax-rb-card__actions {
    border-top: 1px solid var(--pv-rule);
    display: grid;
    gap: .85rem;
    justify-items: start;
    padding-top: 1rem;
}

.ax-rb-card__next {
    display: grid;
    gap: .3rem;
}

.ax-rb-card__next h5 {
    color: var(--pv-ink);
    font-size: 1rem;
    font-weight: 700;
}

.ax-rb-card__next p {
    color: var(--pv-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.ax-rb-card__choices {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.ax-rb-card__choice {
    align-content: start;
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.ax-rb-card__choice .ax-button {
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.25;
    min-height: 3rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .6rem clamp(.5rem, 1.5vw, 1.1rem);
    text-align: center;
    white-space: normal;
}

.ax-rb-card__choice-note {
    color: var(--pv-muted);
    font-size: .75rem;
    line-height: 1.35;
    text-align: center;
}

.ax-rb-card__explore {
    border-top: 1px solid var(--pv-rule);
    justify-content: center;
    padding-top: .85rem;
    width: 100%;
}

.ax-rb-card--also {
    border-top: 1px dashed var(--pv-rule-strong);
    gap: .6rem;
    padding-top: 1.25rem;
}

.ax-rb-card--also .ax-rb-card__title {
    font-size: 1.35rem;
}

.ax-rb-card--also .ax-rb-card__detail,
.ax-rb-card--also .ax-rb-card__primary,
.ax-rb-card--also .ax-rb-card__book {
    display: none;
}

.ax-rb-card--also .ax-rb-card__actions {
    border-top: 0;
    padding-top: 0;
}

/* ---------- Signature: the typical-system band stack ---------- */

.ax-rb-stack {
    counter-reset: none;
    display: grid;
    gap: 3px;
}

.ax-rb-stack__band {
    background: var(--pv-l-operations);
    border-left: 3px solid rgba(23, 33, 29, .28);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    margin-left: calc(min(var(--i, 0), 5) * .45rem);
    padding: .45rem .75rem;
}

.ax-rb-stack__band--physical { background: var(--pv-l-physical); }
.ax-rb-stack__band--control { background: var(--pv-l-control); }
.ax-rb-stack__band--software { background: var(--pv-l-software); }
.ax-rb-stack__band--people { background: var(--pv-l-people); }
.ax-rb-stack__band--business { background: var(--pv-l-business); }

.ax-rb-stack__band--result {
    background: var(--pv-ink);
    border-left-color: var(--pv-coral);
    color: var(--pv-white);
}

.ax-rb-card.is-entering .ax-rb-stack__band {
    animation: ax-rb-band .42s var(--pv-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes ax-rb-band {
    from {
        opacity: 0;
        transform: translateX(-.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ax-rb-card.is-entering .ax-rb-stack__band {
        animation: none;
    }
}

/* ---------- Capability index ----------
 * A compact jump bar, not a chapter: five chapter links, with every
 * capability anchor kept one disclosure away at every width.
 */

.ax-rb-index {
    padding-block: clamp(2rem, 4vw, 3.25rem) 0;
}

.ax-rb-index__bar {
    display: grid;
    gap: .75rem;
}

.ax-rb-index .ax-rb-index__heading {
    color: var(--pv-teal);
    font-family: var(--pv-sans);
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.4;
    max-width: none;
}

.ax-rb-index__primary ul {
    border-block: 1px solid var(--pv-rule-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.25rem, 3vw, 2.5rem);
    padding-block: .35rem;
}

.ax-rb-index__primary a {
    display: inline-block;
    font-weight: 650;
    line-height: 1.35;
    padding-block: .65rem;
    text-decoration: none;
}

.ax-rb-index__primary a span {
    color: var(--pv-teal);
}

.ax-rb-index__primary a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

/* A real disclosure on wide screens too (V5 hides .ax-more summaries there). */
.ax-rb-index__all > .ax-more__summary {
    border-top: 0;
    display: inline-flex;
    font-weight: 650;
    justify-content: flex-start;
    gap: .6rem;
}

.ax-rb-index__nav {
    display: grid;
    gap: 1.5rem var(--pv-col-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    padding-bottom: .5rem;
}

.ax-rb-index__group {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
    gap: .6rem;
    padding-top: .9rem;
}

.ax-rb-index__label {
    color: var(--pv-teal);
    font-size: .875rem;
    font-weight: 650;
}

.ax-rb-index__group ul {
    display: grid;
    gap: .15rem;
}

.ax-rb-index__group a {
    display: inline-block;
    line-height: 1.35;
    padding-block: .3rem;
    text-decoration-color: var(--pv-rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

.ax-rb-index__group a:hover {
    text-decoration-color: currentColor;
}

/* ---------- Planning tools ----------
 * The homepage tool cards (engineering-tools.css) between the Finder and the
 * index, in the homepage tool palette so both routes show the same component.
 */

.ax-rb-tools {
    --ax-card: #fbfaf8;
    --ax-slate: #45545d;
    --ax-action: var(--pv-teal);
    --ax-tile-line: color-mix(in srgb, var(--ax-ink) 14%, transparent);
    --ax-tile-line-hover: color-mix(in srgb, var(--ax-ink) 55%, transparent);
    --ax-r-panel: 4px;
    --ax-r-control: 3px;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.ax-rb-tools .ax-desk__tools-note {
    color: var(--ax-slate);
    font-size: .875rem;
    line-height: 1.55;
    margin: .9rem 0 0;
    max-width: 46rem;
}

/* ---------- Chapters ---------- */

.ax-rb-chapter {
    padding-block: var(--rb-section);
    scroll-margin-top: 5rem;
}

.ax-rb-chapter--sky {
    background: color-mix(in srgb, var(--pv-sky) 55%, var(--pv-canvas));
}

.ax-rb-chapter--sand {
    background: color-mix(in srgb, var(--pv-sand) 60%, var(--pv-canvas));
}

.ax-robotics-page [id] {
    scroll-margin-top: 6.5rem;
}

@media (max-width: 47.99rem) {
    /* Clear the sticky header and the section rail. */
    .ax-robotics-page [id] {
        scroll-margin-top: calc(var(--ax-header-h, 4rem) + 3.75rem);
    }
}

.ax-robotics-page article[tabindex="-1"]:focus,
.ax-robotics-page section[tabindex="-1"]:focus {
    outline: none;
}


/* Spec-sheet rows */

.ax-rb-rows {
    border-bottom: 1px solid var(--pv-rule-strong);
}

.ax-rb-row {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
    gap: 1rem var(--pv-col-gap);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.ax-rb-row__title {
    align-items: baseline;
    display: flex;
    font-family: var(--pv-serif);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 500;
    gap: .65rem;
    letter-spacing: -.015em;
    line-height: 1.15;
}

/* Layer swatch: which part of the system this capability lives in. */
.ax-rb-row__title::before {
    background: var(--pv-l-physical);
    border: 1px solid rgba(23, 33, 29, .3);
    content: "";
    flex: none;
    height: .7rem;
    transform: translateY(-.1rem);
    width: .7rem;
}

.ax-rb-row--control .ax-rb-row__title::before { background: var(--pv-l-control); }
.ax-rb-row--business .ax-rb-row__title::before { background: var(--pv-sand); }

.ax-rb-row__problem {
    align-content: start;
    display: grid;
    gap: .75rem;
    justify-items: start;
}

.ax-rb-row__problem p {
    font-family: var(--pv-serif);
    font-size: 1.125rem;
    line-height: 1.5;
    max-width: 30rem;
}

.ax-rb-row__spec {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.ax-rb-row__spec dt {
    font-size: .8125rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.ax-rb-row__spec dd {
    color: var(--pv-muted);
    line-height: 1.5;
    margin: 0;
}

.ax-rb-row__spec dd li,
.ax-rb-row__items li {
    padding-left: 1.1rem;
    position: relative;
}

.ax-rb-row__spec dd li::before,
.ax-rb-row__items li::before {
    color: var(--pv-teal);
    content: "–";
    left: 0;
    position: absolute;
}

.ax-rb-row__evidence a {
    color: var(--pv-ink);
}

.ax-rb-row__items {
    color: var(--pv-muted);
    display: grid;
    gap: .35rem;
    line-height: 1.5;
}

.ax-rb-row__finder {
    font-size: .95rem;
}

@media (min-width: 64rem) {
    .ax-rb-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-row__title {
        grid-column: 1 / span 3;
    }

    .ax-rb-row__problem {
        grid-column: 4 / span 4;
    }

    .ax-rb-row__spec,
    .ax-rb-row__items,
    .ax-rb-row__more {
        grid-column: 8 / -1;
    }

    .ax-rb-row__spec {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ax-rb-row__spec > div:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* ---------- Applications in practice ----------
 * One authentic process photograph per application. Default (narrow
 * screens, no JS): a contained scroll-snap rail of near-full-width cards.
 * .is-tabs (64rem+, robotics-practice.js): selectors beside one large image.
 */

.ax-rb-practice {
    display: grid;
    gap: 1rem var(--pv-col-gap);
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ax-rb-practice__heading {
    color: var(--pv-teal);
    font-family: var(--pv-sans);
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: .01em;
}

.ax-rb-practice__rail {
    display: grid;
    gap: 1rem;
    grid-auto-columns: min(84vw, 26rem);
    grid-auto-flow: column;
    margin-inline: calc(var(--pv-gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: .25rem var(--pv-gutter) 1rem;
    /* Containing block for the absolutely positioned screen-reader text,
       which would otherwise escape the scroller and widen the page. */
    position: relative;
    scroll-padding-inline: var(--pv-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--pv-rule-strong) transparent;
    scrollbar-width: thin;
}

.ax-rb-practice__panel {
    min-width: 0;
    scroll-snap-align: start;
}

.ax-rb-practice__figure {
    display: grid;
    gap: .9rem;
    margin: 0;
}

.ax-rb-practice__visual {
    aspect-ratio: 3 / 2;
    background: var(--pv-paper);
    border: 1px solid var(--pv-rule);
    overflow: hidden;
}

.ax-rb-practice__visual img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ax-rb-practice__caption {
    align-content: start;
    display: grid;
    gap: .4rem;
}

.ax-rb-practice__name {
    font-family: var(--pv-serif);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.ax-rb-practice__text {
    color: var(--pv-muted);
    line-height: 1.55;
    max-width: 40rem;
}

.ax-rb-practice__links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.ax-rb-practice__source {
    align-items: center;
    color: var(--pv-muted);
    display: inline-flex;
    font-size: .875rem;
    gap: .3rem;
    min-height: 2.75rem;
    text-decoration-color: var(--pv-rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

.ax-rb-practice__source:hover {
    color: var(--pv-ink);
}

/* Tabs (desktop, enhanced) */

.ax-rb-practice__tabs {
    border-bottom: 1px solid var(--pv-rule);
    display: grid;
}

.ax-rb-practice__tab {
    background: none;
    border: 0;
    border-top: 1px solid var(--pv-rule);
    color: var(--pv-muted);
    cursor: pointer;
    font: 500 1.2rem/1.25 var(--pv-serif);
    letter-spacing: -.01em;
    min-height: 3.25rem;
    padding: .8rem .5rem .8rem 1.1rem;
    position: relative;
    text-align: left;
    transition: color .15s var(--pv-ease);
}

.ax-rb-practice__tab::before {
    background: transparent;
    bottom: .75rem;
    content: "";
    left: 0;
    position: absolute;
    top: .75rem;
    transition: background-color .15s var(--pv-ease);
    width: 3px;
}

.ax-rb-practice__tab:hover {
    color: var(--pv-ink);
}

.ax-rb-practice__tab[aria-selected="true"] {
    color: var(--pv-ink);
}

.ax-rb-practice__tab[aria-selected="true"]::before {
    background: var(--pv-teal);
}

.ax-rb-practice__tab:focus-visible {
    outline-offset: -3px;
}

.ax-rb-practice__panel:focus-visible {
    outline-offset: 4px;
}

@media (min-width: 64rem) {
    .ax-rb-practice.is-tabs {
        align-items: start;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__heading {
        grid-column: 1 / span 3;
        grid-row: 1;
        padding-bottom: .25rem;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__tabs {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__rail {
        display: block;
        grid-column: 4 / -1;
        grid-row: 1 / span 3;
        margin: 0;
        overflow: visible;
        padding: 0;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__figure {
        gap: 1.1rem;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__visual {
        aspect-ratio: 16 / 10;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__caption {
        column-gap: var(--pv-col-gap);
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__name,
    .ax-rb-practice.is-tabs .ax-rb-practice__text {
        grid-column: 1;
    }

    .ax-rb-practice.is-tabs .ax-rb-practice__links {
        align-self: end;
        flex-direction: column;
        align-items: flex-end;
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

.ax-rb-practice__panel.is-entering .ax-rb-practice__figure {
    animation: ax-rb-fade .3s var(--pv-ease) both;
}

@keyframes ax-rb-fade {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ax-rb-practice__panel.is-entering .ax-rb-practice__figure {
        animation: none;
    }
}

/* ---------- Robotic & cobot welding: the decision fork ----------
 * Start node -> three branches (industrial | evaluation | cobot) drawn with
 * 1px connectors; the shared safety line closes it. Phones: a vertical
 * spine with the branches stacked. Branch names carry the meaning.
 */

.ax-rb-fork {
    --fork-line: var(--pv-rule-strong);
    display: grid;
    gap: 0;
    margin-top: .5rem;
    min-width: 0;
}

.ax-rb-fork__start {
    background: var(--pv-paper);
    border: 1px solid var(--pv-rule-strong);
    display: grid;
    gap: .55rem;
    padding: 1rem 1.1rem;
}

.ax-rb-fork__title {
    font-family: var(--pv-serif);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.ax-rb-fork__start p {
    color: var(--pv-muted);
    line-height: 1.5;
}

.ax-rb-fork__criteria {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ax-rb-fork__criteria li {
    border: 1px solid var(--pv-rule-strong);
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.3;
    padding: .2rem .6rem;
}

.ax-rb-fork__paths {
    display: grid;
    gap: .75rem;
    padding: 1.5rem 0 0 1.25rem;
    position: relative;
}

/* Phone spine: one vertical line from the start node past every branch. */
.ax-rb-fork__paths::before {
    border-left: 1px solid var(--fork-line);
    bottom: 1.5rem;
    content: "";
    left: .35rem;
    position: absolute;
    top: 0;
}

.ax-rb-fork__path {
    background: var(--pv-white);
    border: 1px solid var(--pv-rule);
    border-top: 3px solid var(--pv-l-physical);
    display: grid;
    gap: .55rem;
    padding: .9rem 1rem 1rem;
    position: relative;
}

.ax-rb-fork__path::before {
    border-top: 1px solid var(--fork-line);
    content: "";
    left: -.9rem;
    position: absolute;
    top: 1.35rem;
    width: .9rem;
}

.ax-rb-fork__path--cobot {
    border-top-color: var(--pv-l-software);
}

.ax-rb-fork__path--unsure {
    background: transparent;
    border-style: dashed;
    border-top: 1px dashed var(--pv-rule-strong);
    order: 3;
}

.ax-rb-fork__name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.ax-rb-fork__when {
    display: grid;
    gap: .3rem;
    line-height: 1.45;
}

.ax-rb-fork__when li {
    padding-left: 1.1rem;
    position: relative;
}

.ax-rb-fork__when li::before {
    color: var(--pv-teal);
    content: "–";
    left: 0;
    position: absolute;
}

.ax-rb-fork__system {
    color: var(--pv-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.ax-rb-fork__safety {
    border-left: 3px solid var(--pv-coral-strong);
    color: var(--pv-ink);
    line-height: 1.55;
    margin-top: 1rem;
    padding: .2rem 0 .2rem .9rem;
}

/* Wide: a real fork. The bracket spans the centres of the outer branches;
   the stem continues into the middle (evaluation) branch. */
@media (min-width: 48rem) {
    .ax-rb-fork__paths {
        align-items: start;
        gap: 0 1rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
        padding: 2.75rem 0 0;
    }

    .ax-rb-fork__paths::before {
        border: 1px solid var(--fork-line);
        border-bottom: 0;
        bottom: auto;
        height: 1.4rem;
        left: calc((100% - 2rem) / 5.6);
        right: calc((100% - 2rem) / 5.6);
        top: 1.35rem;
    }

    /* Stem from the start node through the bracket. */
    .ax-rb-fork__paths::after {
        border-left: 1px solid var(--fork-line);
        content: "";
        height: 2.75rem;
        left: 50%;
        position: absolute;
        top: 0;
    }

    .ax-rb-fork__path::before {
        display: none;
    }

    .ax-rb-fork__path--unsure {
        order: 0;
    }

    .ax-rb-fork__safety {
        margin-top: 1.25rem;
    }
}

@media (min-width: 64rem) {
    .ax-rb-fork {
        grid-column: 4 / -1;
        margin-top: 1rem;
    }
}

/* Tags (capabilities, uses) */

.ax-rb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ax-rb-tags li {
    border: 1px solid var(--pv-rule-strong);
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.3;
    padding: .25rem .65rem;
}

.ax-rb-tags--large li {
    font-size: .95rem;
    padding: .4rem .85rem;
}

/* Technologies */

.ax-rb-tech {
    display: grid;
    gap: 2rem var(--pv-col-gap);
}

.ax-rb-tech__item {
    align-content: start;
    border-top: 2px solid var(--pv-ink);
    display: grid;
    gap: .9rem;
    justify-items: start;
    padding-top: 1.25rem;
}

.ax-rb-tech__item h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
}

.ax-rb-tech__item > p {
    line-height: 1.6;
}

.ax-rb-tech__brands {
    color: var(--pv-muted);
    font-size: .95rem;
}

@media (min-width: 64rem) {
    .ax-rb-tech {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Education and R&D */

.ax-rb-programmes__grid {
    display: grid;
    gap: 3rem var(--pv-col-gap);
}

.ax-rb-programme {
    align-content: start;
    display: grid;
    gap: 1.1rem;
    justify-items: start;
}

.ax-rb-programme h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.ax-rb-row__spec--stacked {
    border-top: 1px solid var(--pv-rule);
    padding-top: 1rem;
    width: 100%;
}

@media (min-width: 64rem) {
    .ax-rb-programmes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ax-rb-programme--rd {
        border-left: 1px solid var(--pv-rule-strong);
        padding-left: var(--pv-col-gap);
    }

    .ax-rb-row__spec--stacked {
        grid-template-columns: 1fr;
    }
}

/* Complete cells */

.ax-rb-cells {
    background: var(--pv-paper);
    border-block: 1px solid var(--pv-rule);
}

.ax-rb-cells__grid {
    align-items: center;
    display: grid;
    gap: 2.5rem var(--pv-col-gap);
}

.ax-rb-cells__copy {
    display: grid;
    gap: 1.1rem;
}

.ax-rb-cells__examples {
    color: var(--pv-muted);
    font-size: .95rem;
    max-width: 34rem;
}

.ax-rb-cells__figure {
    display: grid;
    gap: .9rem;
}

/* Connected cell schematic. The spine is the physical flow (vision ->
   robot and tooling -> process); control/safety and material/data hang off
   the robot on their own buses; engineering brackets the whole. Lines are
   1px connectors drawn by pseudo-elements over plain lists, so the text is
   the accessible equivalent and nothing depends on colour. */

.ax-rb-sch {
    --sch-line: var(--pv-ink);
    --sch-reach: 1.25rem;
    --sch-gap: 1.75rem;
    --sch-mobile-bus-x: 1.25rem;
    --sch-bracket-rise: .6rem;
    display: grid;
    gap: var(--sch-gap);
    grid-template-areas: "spine" "systems" "base";
}

.ax-rb-sch__systems {
    display: grid;
    gap: var(--sch-gap);
    grid-area: systems;
    grid-template-areas: "control" "flow";
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    position: relative;
}

.ax-rb-sch__spine {
    display: grid;
    gap: 1.6rem;
    grid-area: spine;
    position: relative;
}

/* The flow line runs behind the spine nodes and shows in the gaps. */
.ax-rb-sch__spine::before {
    border-left: 1px solid var(--sch-line);
    bottom: 1.5rem;
    content: "";
    left: 50%;
    position: absolute;
    top: 1.5rem;
}

.ax-rb-sch__node {
    background: var(--pv-white);
    border: 1px solid var(--pv-rule-strong);
    border-left: 3px solid var(--pv-l-physical);
    display: grid;
    gap: .15rem;
    line-height: 1.35;
    padding: .65rem .8rem;
    position: relative;
}

.ax-rb-sch__node strong {
    font-size: .95rem;
    font-weight: 700;
}

.ax-rb-sch__node span {
    color: var(--pv-muted);
    font-size: .875rem;
}

.ax-rb-sch__spine .ax-rb-sch__node {
    z-index: 1;
}

/* Arrowhead into each next step of the flow. */
.ax-rb-sch__spine .ax-rb-sch__node + .ax-rb-sch__node::before {
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    border-top: .45rem solid var(--sch-line);
    content: "";
    left: calc(50% - .32rem);
    position: absolute;
    top: -.5rem;
}

.ax-rb-sch__node--robot {
    background: var(--pv-mint);
    border-color: var(--pv-teal);
    border-left-color: var(--pv-teal);
}

.ax-rb-sch__node--vision,
.ax-rb-sch__node--controller,
.ax-rb-sch__node--plc,
.ax-rb-sch__node--safety {
    border-left-color: var(--pv-l-control);
}

.ax-rb-sch__node--software {
    border-left-color: var(--pv-l-software);
}

.ax-rb-sch__node--amr {
    border-style: dashed;
    border-left-style: solid;
}

.ax-rb-sch__side {
    display: grid;
    gap: .6rem;
    position: relative;
}

.ax-rb-sch__side--control {
    grid-area: control;
}

.ax-rb-sch__side--flow {
    grid-area: flow;
}

.ax-rb-sch__group {
    color: var(--pv-teal);
    font-size: .875rem;
    font-weight: 650;
}

.ax-rb-sch__list {
    display: grid;
    gap: .6rem;
    position: relative;
}

.ax-rb-sch__bus {
    color: var(--pv-muted);
    font-size: .85rem;
    font-style: italic;
}

.ax-rb-sch__base {
    background: var(--pv-l-people);
    border-top: 1px solid var(--sch-line);
    display: grid;
    gap: .15rem;
    grid-area: base;
    line-height: 1.4;
    padding: .8rem 1rem;
    position: relative;
}

/* Bracket ends: engineering surrounds the cell. */
.ax-rb-sch__base::before,
.ax-rb-sch__base::after {
    border-left: 1px solid var(--sch-line);
    content: "";
    height: var(--sch-bracket-rise);
    position: absolute;
    top: calc(-1 * var(--sch-bracket-rise));
}

.ax-rb-sch__base::before {
    left: 0;
}

.ax-rb-sch__base::after {
    right: 0;
}

.ax-rb-sch__base span {
    color: var(--pv-muted);
    font-size: .9rem;
}

/* Narrow screens: the directed physical flow stays Vision -> Robot ->
   Process. One continuous, arrowless rail links the two parallel subsystem
   groups back to that cell; it is NOT another process step. The rail reaches
   the engineering support bracket below, including on long translations. */
@media (max-width: 47.99rem) {
    .ax-rb-sch__systems {
        padding-left: var(--sch-mobile-bus-x);
    }

    /* Branch out of the existing process-chain graphic without an arrow:
       the side bus represents system connectivity, not material flow. */
    .ax-rb-sch__node--process::after {
        border-left: 1px solid var(--sch-line);
        content: "";
        height: calc(var(--sch-gap) / 2);
        left: 50%;
        position: absolute;
        top: 100%;
    }

    .ax-rb-sch__spine::after {
        border-top: 1px solid var(--sch-line);
        bottom: calc(var(--sch-gap) / -2);
        content: "";
        left: var(--sch-mobile-bus-x);
        position: absolute;
        right: 50%;
    }

    /* Shared bus from both subsystem groups to the engineering bracket. */
    .ax-rb-sch__systems::before {
        border-left: 1px solid var(--sch-line);
        bottom: calc(-1 * var(--sch-gap));
        content: "";
        left: var(--sch-mobile-bus-x);
        position: absolute;
        top: calc(var(--sch-gap) / -2);
    }

    .ax-rb-sch__list {
        padding-left: var(--sch-reach);
    }

    .ax-rb-sch__list .ax-rb-sch__node::before {
        border-top: 1px solid var(--sch-line);
        content: "";
        left: calc(-1 * var(--sch-reach) - 1px);
        position: absolute;
        top: 1.4rem;
        width: calc(var(--sch-reach) + 1px);
    }

    .ax-rb-sch__group,
    .ax-rb-sch__bus {
        padding-left: var(--sch-reach);
    }
}

/* Wide: control | spine | material and data, joined at the robot. */
@media (min-width: 48rem) {
    /* Flatten only the layout wrapper; the same original three-column
       structure and semantic lists remain in the document. */
    .ax-rb-sch__systems {
        display: contents;
    }

    .ax-rb-sch {
        --sch-reach: 1.25rem;
        --sch-bracket-rise: 2rem;
        align-items: center;
        column-gap: calc(var(--sch-reach) * 2);
        grid-template-areas:
            "control spine flow"
            "base base base";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
        row-gap: 2rem;
    }

    /* Each side list hangs on a bus on its inner edge... */
    .ax-rb-sch__list::after {
        bottom: 1.4rem;
        content: "";
        position: absolute;
        top: 1.4rem;
    }

    .ax-rb-sch__side--control .ax-rb-sch__list::after {
        border-right: 1px solid var(--sch-line);
        right: calc(var(--sch-reach) * -1);
    }

    .ax-rb-sch__side--flow .ax-rb-sch__list::after {
        border-left: 1px solid var(--sch-line);
        left: calc(var(--sch-reach) * -1);
    }

    .ax-rb-sch__list .ax-rb-sch__node::after {
        border-top: 1px solid var(--sch-line);
        content: "";
        position: absolute;
        top: 1.4rem;
        width: var(--sch-reach);
    }

    .ax-rb-sch__side--control .ax-rb-sch__list .ax-rb-sch__node::after {
        left: calc(100% + 1px);
    }

    .ax-rb-sch__side--flow .ax-rb-sch__list .ax-rb-sch__node::after {
        right: calc(100% + 3px);
    }

    /* Desktop: plain T-junctions meet the vertical buses without a
       separate dot/gradient layer. The absolute boxes are positioned against
       the robot node's padding box (3px left / 1px right border); these
       offsets give each line exactly the distance from robot to bus. */
    .ax-rb-sch__node--robot strong::before,
    .ax-rb-sch__node--robot strong::after {
        background: none;
        border-top: 1px solid var(--sch-line);
        content: "";
        height: 0;
        position: absolute;
        top: 50%;
        width: var(--sch-reach);
    }

    .ax-rb-sch__node--robot strong::before {
        right: calc(100% + 3px);
        width: calc(var(--sch-reach) + 1px);
    }

    .ax-rb-sch__node--robot strong::after {
        left: calc(100% + 4px);
    }

    .ax-rb-sch__side--flow .ax-rb-sch__group,
    .ax-rb-sch__side--flow .ax-rb-sch__bus {
        text-align: right;
    }
}

.ax-rb-cells__figure figcaption {
    color: var(--pv-muted);
    font-size: .875rem;
    max-width: 44rem;
}

@media (min-width: 64rem) {
    .ax-rb-cells__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-cells__copy {
        grid-column: 1 / span 7;
    }

    .ax-rb-cells__figure {
        grid-column: 1 / -1;
    }
}

/* Engineering: the second half of the cells chapter (same paper ground, no
   chapter head of its own): Alex's role beside who does what. */

.ax-rb-cells {
    border-bottom: 0;
    padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.ax-rb-engineering {
    background: var(--pv-paper);
    border-bottom: 1px solid var(--pv-rule);
    padding-top: 0;
}

/* No block gap between the two halves: one continuous paper ground. */
.ax-rb-cells + .ax-rb-engineering {
    margin-block-start: 0;
}

.ax-rb-engineering__grid {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
    gap: 2.5rem var(--pv-col-gap);
    padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ax-rb-engineering__role,
.ax-rb-engineering__scope {
    align-content: start;
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.ax-rb-engineering h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.2;
}

.ax-rb-engineering .ax-rb-tags {
    margin-top: .25rem;
}

.ax-rb-scope {
    border-bottom: 1px solid var(--pv-rule);
    display: grid;
    margin: 0;
}

.ax-rb-scope > div {
    border-top: 1px solid var(--pv-rule);
    display: grid;
    gap: .25rem;
    padding-block: .8rem;
}

.ax-rb-scope dt {
    font-weight: 700;
    line-height: 1.35;
}

.ax-rb-scope dd {
    color: var(--pv-muted);
    line-height: 1.55;
    margin: 0;
}

.ax-rb-scope__note {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.5;
}

@media (min-width: 64rem) {
    .ax-rb-engineering__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-engineering__role {
        grid-column: 1 / span 6;
    }

    .ax-rb-engineering__scope {
        grid-column: 8 / -1;
    }
}

/* ---------- Journey (a real sequence) ---------- */

.ax-rb-journey__then {
    font-weight: 650;
    margin-bottom: 1rem;
}

.ax-rb-journey__steps {
    counter-reset: rb-step;
    display: grid;
    gap: 0 var(--pv-col-gap);
}

.ax-rb-journey__steps li {
    align-content: start;
    border-top: 1px solid var(--pv-rule-strong);
    counter-increment: rb-step;
    display: grid;
    gap: .4rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding-block: 1.1rem 1.4rem;
}

.ax-rb-journey__steps li::before {
    color: var(--pv-teal);
    content: counter(rb-step, decimal-leading-zero);
    font-family: var(--pv-serif);
    font-size: 1.6rem;
    grid-row: span 2;
    line-height: 1;
}

.ax-rb-journey__steps h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.ax-rb-journey__steps p {
    color: var(--pv-muted);
    line-height: 1.5;
}

@media (min-width: 48rem) {
    .ax-rb-journey__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ax-rb-journey__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Contact ---------- */

.ax-rb-contact__grid {
    align-items: start;
    gap: 2.5rem var(--pv-col-gap);
}

.ax-rb-contact__copy {
    display: grid;
    gap: 1.5rem;
}

.ax-rb-brief {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(241, 239, 232, .35);
    border-radius: var(--rb-radius-lg);
    display: grid;
    gap: .6rem;
    padding: 1.25rem;
}

/* The single project summary now opens inline after the primary result. */
.ax-rb-result .ax-rb-brief {
    background: var(--pv-paper);
    border-color: var(--pv-rule-strong);
    color: var(--pv-ink);
}

.ax-rb-result .ax-rb-brief__hint,
.ax-rb-result .ax-rb-brief__status {
    color: var(--pv-muted);
}

.ax-rb-result .ax-rb-brief__text {
    border: 1px solid var(--pv-rule-strong);
    box-sizing: border-box;
    min-width: 0;
}

.ax-rb-brief[hidden] {
    display: none;
}

.ax-rb-brief__label {
    font-weight: 700;
}

.ax-rb-brief__hint {
    color: #d8ebe3;
    font-size: .9rem;
    line-height: 1.5;
}

.ax-rb-brief__text {
    background: var(--pv-white);
    border: 0;
    border-radius: var(--rb-radius);
    color: var(--pv-ink);
    font: .95rem/1.5 var(--pv-sans);
    min-height: 8rem;
    padding: .75rem;
    resize: vertical;
    width: 100%;
}

.ax-rb-brief__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.ax-rb-brief__actions .ax-button {
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    justify-content: center;
}

/* Ink primary on the teal card; the default teal hover would disappear. */
.ax-rb-brief__email:hover {
    background: var(--pv-ink);
    border-color: var(--pv-on-dark);
}

/* Phones: the pair shares the row; when it no longer fits, each button
   wraps onto a full row instead of two ragged widths. */
@media (max-width: 47.99rem) {
    .ax-rb-brief__actions .ax-button {
        flex: 1 1 auto;
        padding-inline: 1rem;
    }
}

.ax-rb-brief__status {
    color: #d8ebe3;
    font-size: .9rem;
}

@media (min-width: 64rem) {
    .ax-rb-contact__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-rb-contact__copy {
        grid-column: 1 / span 7;
    }

}

/* ---------- Forced colours and print ---------- */

@media (forced-colors: active) {
    .ax-rb-need__input,
    .ax-rb-opt input {
        border-color: CanvasText;
        forced-color-adjust: none;
    }

    .ax-rb-need__input:checked,
    .ax-rb-opt input:checked {
        background: radial-gradient(Highlight 45%, Canvas 50%);
        border-color: Highlight;
        box-shadow: none;
    }

    /* Checked is a thick border; focus stays the outline ring. */
    .ax-rb-need:has(:checked),
    .ax-rb-opt:has(:checked) {
        border: 3px solid Highlight;
    }

    .ax-rb-stack__band {
        border: 1px solid CanvasText;
    }
}

@media print {
    .ax-rb-finder,
    .ax-rb-hero .ax-actions {
        display: none;
    }

    .ax-rb-chapter--sky,
    .ax-rb-chapter--sand,
    .ax-rb-cells,
    .ax-rb-engineering {
        background: none;
    }
}

/* V5 places .ax-head__label on a 12-column grid; inside these single-column
   blocks every child spans the one column instead. */
.ax-rb-programme,
.ax-rb-cells__copy {
    grid-template-columns: minmax(0, 1fr);
}

.ax-rb-programme > *,
.ax-rb-cells__copy > * {
    grid-column: 1;
}

.ax-rb-programme > .ax-head__label,
.ax-rb-cells__copy > .ax-head__label {
    padding-top: 0;
}