/* ==========================================================================
   Machine Selector Tool — style.css
   All rules scoped to .rm-machine-selector.
   Colours: #de272b red, #6b6b6b tab-grey, #a5a5a5 box-grey, #d7d7d7 outline.
   Typography: Georama (sans), Georgia (serif body copy).
   ========================================================================== */

/* ── Custom properties ───────────────────────────────────────────────────── */

.rm-machine-selector {
    --rm-grey-unit:     #eeefef;
    --rm-red:          #de272b;
    --rm-grey-tab:     #6b6b6b;
    --rm-grey-box:     #a5a5a5;
    --rm-grey-outline: #d7d7d7;
    --rm-grey-bg:      #fafafa;
    --rm-grey-light:   #e9e9e9;
    --rm-black:        #000000;
    --rm-white:        #ffffff;
    --rm-font-sans:    'Georama', 'Verdana', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rm-font-serif:   Georgia, Times, serif;
}

/* ── Container ───────────────────────────────────────────────────────────── */

.rm-machine-selector {
    background: var(--rm-white);
    border: 1px solid var(--rm-grey-outline);
    font-family: var(--rm-font-sans);
    color: var(--rm-black);
    box-sizing: border-box;
    /* Clear the fixed site header (~127px) when scrollIntoView anchors each
       slide on step changes, so the progress bar isn't hidden behind it. */
    scroll-margin-top: 140px;
}

.rm-machine-selector *,
.rm-machine-selector *::before,
.rm-machine-selector *::after {
    box-sizing: inherit;
}

/* ── Screen-reader only ──────────────────────────────────────────────────── */

.rm-ms-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hidden inputs — radio and checkbox are visually replaced by styled labels */
.rm-ms-radio__input,
.rm-ms-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rm-ms-radio__psuedocheck {

    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--rm-red);
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

.rm-ms-progress {
    display: flex;
    align-items: stretch;
    background: var(--rm-grey-bg);
    border-bottom: 1px solid var(--rm-grey-outline);
}

/* "STEPS" heading — hidden on desktop, shown as red band on mobile */
.rm-ms-progress__heading {
    display: none;
}

/* Steps row — transparent on desktop (children participate in parent flex directly) */
.rm-ms-progress__steps {
    display: contents;
}

.rm-ms-progress__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--rm-white);
    border: 1px solid var(--rm-grey-outline);
    min-height: 90px;
    position: relative;
}

.rm-ms-progress__step + .rm-ms-progress__step {
    border-left: none;
}

/* Inner row: text left, checkmark right */
.rm-ms-progress__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 20px 0;
    flex: 1;
}

.rm-ms-progress__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* "Step X" label */
.rm-ms-progress__num {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rm-grey-tab);
    display: block;
}

.rm-ms-progress__step--active .rm-ms-progress__num {
    color: var(--rm-red);
}

.rm-ms-progress__step--complete .rm-ms-progress__num {
    color: var(--rm-grey-tab);
}

/* Stage name */
.rm-ms-progress__name {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--rm-black);
    display: block;
}

.rm-ms-progress__step--muted .rm-ms-progress__num,
.rm-ms-progress__step--muted .rm-ms-progress__name,
.rm-ms-progress__step--complete .rm-ms-progress__name {
    color: var(--rm-grey-tab); /* completed step title greyed to match designs */
}

/* Checkmark circle — top right of complete steps */
.rm-ms-progress__check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: -2px;
    background-image: url('assets/rm-check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Red bar under the active step */
.rm-ms-progress__bar {
    height: 5px;
    background: transparent;
    margin-top: auto;
}

.rm-ms-progress__step--active .rm-ms-progress__bar {
    background: var(--rm-red);
}

/* Completed steps render as <button> — reset UA styling and add affordance */
.rm-ms-progress__step--clickable {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.rm-ms-progress__step--clickable:hover {
    background: var(--rm-grey-bg);
}

.rm-ms-progress__step--clickable:hover .rm-ms-progress__name,
.rm-ms-progress__step--clickable:hover .rm-ms-progress__num {
    color: var(--rm-black);
}

.rm-ms-progress__step--clickable:focus-visible {
    outline: 2px solid var(--rm-red);
    outline-offset: -3px;
}

/* ── Content area ────────────────────────────────────────────────────────── */

@keyframes rm-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rm-ms-content {
    padding: 60px;
    background: var(--rm-white);
    animation: rm-fade-in 0.2s ease-out;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

.rm-ms-section-label {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rm-red);
    margin: 0 0 15px;
    padding: 0;
}

.rm-ms-section-title {
    text-transform: none;

}

.rm-ms-question {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rm-black);
    margin: 0 0 15px;
    padding: 0;
    border: none;
    text-transform: none;
}

.rm-ms-helper-text {
    font-family: var(--rm-font-serif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--rm-black);
    margin: 0 0 50px;
    padding: 0;
}

/* ── Unit toggle ─────────────────────────────────────────────────────────── */

.rm-ms-unit-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.rm-ms-unit-toggle {
    display: inline-flex;
    border: 1px solid var(--rm-grey-box);
    overflow: hidden;
}

.rm-ms-unit-toggle__btn {
    padding: 7px 18px;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    background: var(--rm-white);
    color: var(--rm-grey-tab);
    border: none;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.rm-ms-unit-toggle__btn:hover {
    background: var(--rm-grey-bg);
}

.rm-ms-unit-toggle__btn.is-active {
    background: var(--rm-red);
    color: var(--rm-white);
}

.rm-ms-unit-toggle__btn + .rm-ms-unit-toggle__btn {
    border-left: 1px solid var(--rm-grey-box);
}

/* ── Form — fields ───────────────────────────────────────────────────────── */

.rm-ms-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 30px;
    max-width: 930px;
}

/* Production volume spans the full 2-column width */
.rm-ms-field--radio-group {
    grid-column: 1 / -1;
    margin-top: 5px;
    border: 0;
    padding: 0;
}

.rm-ms-field--radio-group .rm-ms-field__label {
    margin-bottom: 8px;
}

.rm-ms-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-ms-field__label {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rm-black);
    margin: 0;
    padding: 0;
}

.rm-ms-field__required {
    color: var(--rm-red);
}

.rm-ms-field__input-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid var(--rm-grey-box);
    background: #FFF;
}

.rm-machine-selector .rm-ms-field__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 18px 14px 18px 14px;
    margin: 0;
    font-family: var(--rm-font-sans);
    background: none;
    font-size: 14px;
    color: var(--rm-black);
    box-sizing: border-box;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.rm-ms-field__input::-webkit-outer-spin-button,
.rm-ms-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Keyboard focus: ring the whole field box so it's clearly visible when
   tabbing (the previous inset outline merged with the field border). */
.rm-machine-selector .rm-ms-field__input:focus {
    outline: none;
}

.rm-machine-selector .rm-ms-field__input-wrap:focus-within {
    outline: 2px solid var(--rm-red);
    outline-offset: 2px;
}

/* Unit label: inset inside the right edge of the input field */
.rm-machine-selector .rm-ms-field__unit {
    display: flex;
    align-items: center;
    padding: 0 6px;
    margin: 12px;
    font-family: Georgia, Serif;
    font-size: 16px;
    line-height: 180%;
    font-style: normal;
    color: var(--rm-grey-tab);
    background: var(--rm-grey-unit);
    pointer-events: none;
    white-space: nowrap;
}

/* Inline validation error */
.rm-ms-field__error {
    display: none;
    font-family: var(--rm-font-sans);
    font-size: 12px;
    color: var(--rm-red);
    margin: 0;
}

.rm-ms-field__error.is-visible {
    display: block;
}

/* Field guidance note (wraps on narrow widths, unlike a placeholder) */
.rm-ms-field__hint {
    font-family: var(--rm-font-sans);
    font-size: 13px;
    line-height: 1.4;
    color: #4a4a4a; /* darker than --rm-grey-tab for better legibility */
    margin: 6px 0 0;
}

.has-error .rm-ms-field__input-wrap {
    border-color: var(--rm-red);
    outline: 1px solid var(--rm-red);
}

.has-error .rm-ms-field__label {
    color: var(--rm-red);
}

/* ── Form diagram ────────────────────────────────────────────────────────── */

.rm-ms-form-diagram {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 40px;
}

.rm-ms-select-columns {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.rm-ms-select-columns__left {
    flex: 1;
    min-width: 0;
}

.rm-ms-select-columns__right {
    flex-shrink: 0;
    width: 280px;
}

.rm-ms-supporting-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Production volume cards ─────────────────────────────────────────────── */

.rm-ms-volume-options {
    display: flex;
    gap: 10px;
}

.rm-ms-volume-option {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 17px; /* 1px extra all sides compensates for 1px→2px border on selection */
    border: 1px solid var(--rm-grey-box);
    background: var(--rm-white);
    cursor: pointer;
    text-align: left;
    column-gap: 12px;
    row-gap: 3px;
    min-height: 60px;
    transition: border-color 0.1s;
}

.rm-ms-volume-option:hover {
    border-color: var(--rm-red);
}

.rm-ms-volume-option.is-selected {
    border: 2px solid var(--rm-red);
    padding: 16px; /* drop the 1px left/right buffer — border now fills it */
}

.rm-ms-volume-option__label {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--rm-black);
    display: block;
}

.rm-ms-volume-option__desc {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--rm-font-sans);
    font-size: 13px;
    color: var(--rm-grey-tab);
    display: block;
}

.rm-ms-volume-option .rm-ms-radio__psuedocheck {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    flex-shrink: 0;
}

.rm-ms-volume-option.is-selected .rm-ms-radio__psuedocheck {
    background-image: url('assets/rm-check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
}

.rm-ms-field--radio-group.has-error .rm-ms-field__error {
    display: block;
}

/* ── Single-select option cards ──────────────────────────────────────────── */

.rm-ms-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
    padding: 0;
    margin: 0;
    max-width: 650px;
}

/* Option card: flex row, text column left, arrow indicator right.
   flex-wrap lets the (nowrap) "Additional Cost" badge drop to its own line on
   narrow widths instead of forcing the card past the block edge. */
.rm-ms-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px; /* 1px extra each side compensates for 1px→2px border on selection */
    border: 1px solid var(--rm-grey-box);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: border-color 0.1s;
    gap: 8px 12px;
}

.rm-ms-option:hover {
    border-color: var(--rm-red);
}

.rm-ms-option.is-selected {
    border: 2px solid var(--rm-red);
    background: var(--rm-white);
    padding: 12px 14px;
}

/* Text stacked in column */
/* Text + cost badge: label/desc in the left column, "Additional Cost" badge in
   a right-hand column. Collapses to a single stacked column on mobile. */
.rm-ms-option__text {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
    flex: 1;
    min-width: 0;
}

.rm-ms-option__label {
    grid-column: 1;
    grid-row: 1;
    display: block;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--rm-black);
}

.rm-ms-option__desc {
    grid-column: 1;
    grid-row: 2;
    display: none;
    font-family: var(--rm-font-sans);
    font-size: 14px;
    color: var(--rm-grey-tab);
}

/* Arrow indicator — always present, invisible when not selected (no layout shift) */
.rm-ms-option__arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.rm-ms-option.is-selected .rm-ms-option__arrow {
    background-image: url('assets/right_arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    visibility: visible;
}

/* Selection-required error */
.rm-ms-select-error {
    display: none;
    font-family: var(--rm-font-sans);
    font-size: 12px;
    color: var(--rm-red);
    margin-top: 5px;
}

.rm-ms-select-error.is-visible {
    display: block;
}

/* ── Override screen ─────────────────────────────────────────────────────── */

.rm-ms-override-banner {
    background: var(--rm-grey-bg);
    border: 1px solid var(--rm-grey-outline);
    border-left: 4px solid var(--rm-red);
    padding: 15px 20px;
    margin-bottom: 30px;
    max-width: 650px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Warning icon — black SVG circle on the right */
.rm-ms-override-banner::after {
    content: '';
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background-image: url('assets/over-ride.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
}

.rm-ms-override-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rm-ms-override-banner__label {
    display: block;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--rm-black);
    margin-bottom: 4px;
}

.rm-ms-override-banner__message {
    font-family: var(--rm-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--rm-black);
    margin: 0;
}

/* ── Component picker ────────────────────────────────────────────────────── */

.rm-ms-picker {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 930px;
}

.rm-ms-picker-row {
    border: none;
    padding: 0;
    margin: 0;
}

.rm-ms-picker-row__label {
    display: block;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rm-black);
    margin-bottom: 8px;
}

.rm-ms-picker-row__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.rm-ms-picker-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 23px 15px; /* 1px extra each side compensates for 1px→2px border on selection */
    border: 1px solid var(--rm-grey-box);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: border-color 0.1s;
}

.rm-ms-picker-option:hover {
    border-color: var(--rm-red);
}

.rm-ms-picker-option.is-selected {
    border: 2px solid var(--rm-red);
    background: var(--rm-white);
    padding: 22px 14px;
}

.rm-ms-picker-option__text {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
}

.rm-ms-picker-option__label {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--rm-black);
}

.rm-ms-picker-option__desc {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--rm-font-sans);
    font-size: 14px;
    color: var(--rm-grey-tab);
}

.rm-ms-picker-option__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.rm-ms-picker-option__arrow {
    width: 20px;
    height: 20px;
    background-image: url('assets/right_arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.rm-ms-cost-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: #D1EAF4;
    font-family: var(--rm-font-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rm-black);
    white-space: nowrap;
}

/* Badge sits to the right of the label/description on desktop. */
.rm-ms-option__text .rm-ms-cost-badge,
.rm-ms-picker-option__text .rm-ms-cost-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

/* ── Multi-select (add-ons) ──────────────────────────────────────────────── */

.rm-ms-options--multi {
    max-width: 550px;
}

/* Checkbox-style: same layout as single-select with a circle indicator */
.rm-ms-option--checkbox {
    gap: 12px;
}

.rm-ms-option__indicator {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 2px solid var(--rm-grey-box);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, border-color 0.1s;
}

.rm-ms-option--checkbox.is-selected .rm-ms-option__indicator {
    background: var(--rm-red);
    border-color: var(--rm-red);
}

.rm-ms-option--checkbox.is-selected .rm-ms-option__indicator::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--rm-white);
    border-bottom: 2px solid var(--rm-white);
    transform: rotate(45deg) translateY(-1px);
}

/* ── Result screen ───────────────────────────────────────────────────────── */

.rm-ms-result__body {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 60px;
    margin-bottom: 40px;
}

.rm-ms-result__name {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: var(--rm-black);
    margin: 0 0 20px;
}

.rm-ms-result__image {
    border: 1px solid var(--rm-grey-outline);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.rm-ms-result__img {
    max-width: 100%;
    height: auto;
    display: block;
}

.rm-ms-result__img-placeholder {
    font-family: var(--rm-font-sans);
    font-size: 13px;
    color: var(--rm-grey-box);
    text-align: center;
    padding: 40px 0;
    width: 100%;
}

.rm-ms-result__note {
    font-family: var(--rm-font-sans);
    font-size: 13px;
    color: var(--rm-grey-tab);
    margin: -15px 0 20px;
    font-style: italic;
}

.rm-ms-result__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rm-ms-result__link {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--rm-red);
    text-decoration: underline;
}

.rm-ms-result__link:hover {
    text-decoration: underline;
}

/* Section headings in result right column */
.rm-ms-result__section-heading {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 17px;
    color: var(--rm-black);
    margin: 0 0 5px;
    padding: 0;
    border: none;
}

.rm-ms-result__section-note {
    font-family: var(--rm-font-serif);
    font-size: 13px;
    color: var(--rm-grey-tab);
    margin: 0 0 15px;
    line-height: 1.5;
}

/* Roll Specifications section in result left column */
.rm-ms-result__roll-specs {
    margin-bottom: 30px;
}

/* Component list: label left, value right-aligned */
.rm-ms-result__components {
    margin-bottom: 30px;
}

.rm-ms-component-list {
    margin: 0;
    padding: 0;
}

.rm-ms-component-list__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rm-grey-outline);
}

.rm-ms-component-list__row:first-child {
    border-top: 1px solid var(--rm-grey-outline);
}

.rm-ms-component-list__label {
    font-family: var(--rm-font-sans);
    font-size: 14px;
    font-weight: 700;
    color: #333333; /* darker than --rm-grey-tab for stronger result-row labels */
}

.rm-ms-component-list__value {
    font-family: var(--rm-font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--rm-black);
    text-align: right;
    margin: 0;
}

/* Additional cost items */
.rm-ms-result__cost-items {
    margin-bottom: 30px;
}

.rm-ms-cost-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-ms-cost-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rm-grey-outline);
    font-family: var(--rm-font-sans);
    font-size: 14px;
    color: var(--rm-black);
}

.rm-ms-cost-list__item:first-child {
    border-top: 1px solid var(--rm-grey-outline);
}

.rm-ms-cost-list__label {
    flex: 1;
}

.rm-ms-cost-badge--dollar {
    background: var(--rm-grey-tab);
    color: var(--rm-white);
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    letter-spacing: 0;
}

/* Start Over link */
.rm-ms-reset.rm-ms-result__restart {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--rm-red);
    text-decoration: underline;
}

.rm-ms-result__restart:hover {
    text-decoration: underline;
}

/* CTA strip */
.rm-ms-result__ctas {
    border-top: 1px solid var(--rm-grey-outline);
    padding-top: 40px;
}

.rm-ms-result__ctas-heading {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 22px;
    color: var(--rm-black);
    margin: 0 0 10px;
    padding: 0;
    border: none;
}

.rm-ms-result__ctas-subtext {
    font-family: var(--rm-font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--rm-black);
    margin: 0 0 25px;
    max-width: 620px;
}

/* Results CTA row: Back beside Request Pricing */
.rm-ms-result__cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.rm-ms-result__cta-row .rm-ms-cta {
    margin: 0;
}

.rm-ms-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 28px;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none; /* CTA anchors (e.g. confirmation "View Product Page") must not inherit the theme underline */
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    margin-right: 15px;
    margin-bottom: 10px;
}

.rm-ms-cta--primary {
    background: var(--rm-red);
    border: 2px solid var(--rm-red);
    color: var(--rm-white);
    position: relative;
    transform: translateZ(0);
    transition: color 0.2s ease-in;
}

.rm-ms-cta--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--rm-white);
    transition: width 0.2s ease-in-out;
    z-index: -1;
}

.rm-ms-cta--primary:hover {
    color: var(--rm-red);
}

.rm-ms-cta--primary:hover::before {
    width: 100%;
}

.rm-ms-cta--primary:focus {
    outline: 2px solid var(--rm-red);
    outline-offset: 3px;
    color: white;
}

.rm-ms-cta--primary:focus:hover {
    color: var(--rm-red);
}

.rm-ms-cta--secondary {
    background: var(--rm-white);
    border: 2px solid var(--rm-red);
    color: var(--rm-red);
    text-decoration: none;
}

.rm-machine-selector .rm-ms-cta--secondary:hover {
    background: #fff5f5;
    text-decoration: underline;
}

/* ── Stub / pass-through screens ─────────────────────────────────────────── */

.rm-ms-stub-inner {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.rm-ms-stub__left {
    flex: 1;
    min-width: 0;
}

.rm-ms-stub__heading {
    text-transform:none;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rm-black);
    margin: 0 0 20px;
    padding: 0;
}

.rm-ms-stub__body {
    font-family: var(--rm-font-serif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--rm-black);
    margin: 0 0 30px;
    padding: 0;
}

.rm-ms-stub__right {
    flex-shrink: 0;
}

.rm-ms-engineer-photo-wrap {
    border: 1px solid var(--rm-grey-outline);
    overflow: hidden;
    width: 240px;
}

.rm-ms-engineer-photo {
    display: block;
    width: 100%;
    height: auto;
}

.rm-ms-stub-message {
    font-family: var(--rm-font-serif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--rm-black);
    max-width: 600px;
    margin: 0;
}

/* ── Navigation bar ──────────────────────────────────────────────────────── */

.rm-ms-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 60px;
    border-top: 1px solid var(--rm-grey-outline);
    background: var(--rm-white);
    min-height: 100px;
}

.rm-ms-nav--hidden {
    display: none;
}

.rm-ms-nav__back,
.rm-ms-nav__next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 25px;
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.1s;
}

.rm-ms-nav__back {
    background: var(--rm-white);
    border: 1px solid var(--rm-grey-tab);
    color: var(--rm-grey-tab);
}

.rm-ms-nav__back:hover {
    background: var(--rm-grey-bg);
}

.rm-ms-nav__next {
    background: var(--rm-red);
    border: none;
    color: var(--rm-white);
    border: 2px solid var(--rm-red);
    margin-left: auto;
    position: relative;
    transition: color 0.2s ease-in;
}

.rm-ms-nav__next::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--rm-white);
    transition: width 0.2s ease-in-out;
    z-index: 0;
}

.rm-ms-nav__next:hover {
    color: var(--rm-red);
}

.rm-ms-nav__next:hover::before {
    width: 100%;
}

.rm-ms-nav__next .rm-ms-nav__text,
.rm-ms-nav__next .rm-ms-nav__icon {
    position: relative;
    z-index: 1;
}

.rm-ms-nav__icon {
    font-size: 11px;
}

/* "Start Over" on stub dead-ends */
.rm-ms-reset {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--rm-red);
    text-decoration: none;
    margin: auto;
}

.rm-ms-reset:hover {
    text-decoration: underline;
}

/* Load error fallback */
.rm-ms-load-error {
    padding: 40px 60px;
    font-family: var(--rm-font-sans);
    font-size: 15px;
    color: var(--rm-grey-tab);
    margin: 0;
}

/* ── Tablet (≤ 960px) ───────────────────────────────────────────────────── */

@media (max-width: 960px) {

    /* Progress bar: STEPS header on top, number-only boxes below */
    .rm-ms-progress {
        flex-direction: column;
    }

    .rm-ms-progress__heading {
        display: block;
        background: var(--rm-red);
        color: var(--rm-white);
        font-family: var(--rm-font-sans);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        padding: 8px 0;
        margin: 0;
        flex-shrink: 0;
        max-width:none;
    }

    .rm-ms-progress__steps {
        display: flex;
        align-items: stretch;
    }

    .rm-ms-progress__step {
        min-height: 50px;
    }

    .rm-ms-progress__inner {
        padding: 8px 0;
        justify-content: center;
        align-items: center;
    }

    .rm-ms-progress__num--word {
        display: none;
    }

    .rm-ms-progress__name {
        display: none;
    }

    .rm-ms-progress__num--digit {
        font-size: 16px;
    }

    .rm-ms-progress__check {
        width: 22px;
        height: 22px;
    }

    .rm-ms-content {
        padding: 40px 30px;
    }

    /* Single column so long labels never wrap in a tight 2-col grid */
    .rm-ms-form {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 20px;
    }

    .rm-ms-field--radio-group {
        grid-column: 1;
        margin-top: 0;
    }

    .rm-ms-nav {
        padding: 26px 30px;
    }

}

/* ── Mobile (≤ 767px) ────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* Content */
    .rm-ms-content {
        padding: 30px 20px;
    }

    .rm-ms-helper-text {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .rm-ms-question {
        font-size: 22px;
    }

    /* Form: single column */
    .rm-ms-form {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 20px;
    }

    .rm-ms-field--radio-group {
        grid-column: 1;
        margin-top: 0;
    }

    /* Production volume: 2-column grid */
    .rm-ms-volume-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Options: full width */
    .rm-ms-options {
        max-width: 100%;
    }

    /* Component picker: stack options */
    .rm-ms-picker {
        max-width: 100%;
    }

    .rm-ms-picker-row__options {
        grid-template-columns: 1fr 1fr;
    }

    /* Steps with a supporting image (e.g. Your Goal): stack so the image sits
       below the options instead of overlapping them. */
    .rm-ms-select-columns {
        flex-direction: column;
        gap: 30px;
    }

    .rm-ms-select-columns__right {
        width: 100%;
        max-width: 360px;
    }

    /* Cost badge drops beneath the option text on mobile (there's no longer
       room to sit beside it). */
    .rm-ms-option__text,
    .rm-ms-picker-option__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .rm-ms-option__text .rm-ms-cost-badge,
    .rm-ms-picker-option__text .rm-ms-cost-badge {
        align-self: flex-start;
        margin-top: 4px;
    }

    /* Goal "Something else" stub: stack so the engineer photo sits below the
       copy instead of crowding / overlapping the left content. */
    .rm-ms-stub-inner {
        flex-direction: column;
        gap: 30px;
    }

    .rm-ms-engineer-photo-wrap {
        width: 100%;
        max-width: 320px;
    }

    /* Result: single column */
    .rm-ms-result__body {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rm-ms-result__name {
        font-size: 24px;
    }

    .rm-ms-cta {
        display: flex;
        width: 100%;
        margin-right: 0;
        justify-content: space-between;
    }

    /* Results CTA row: stack full-width with Request Pricing on top, Back below.
       Keep the Back button full-width with its label (not the icon-only square
       used in the step footer nav). */
    .rm-ms-result__cta-row {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .rm-ms-result__cta-row .rm-ms-result__back {
        width: 100%;
        height: 50px;
        padding: 0 25px;
        justify-content: center;
    }

    .rm-ms-result__cta-row .rm-ms-result__back .rm-ms-nav__text {
        display: inline;
    }

    .rm-ms-result__ctas-heading {
        font-size: 18px;
    }

    /* Nav: icon-only square buttons, centred */
    .rm-ms-nav {
        padding: 20px;
        justify-content: center;
        gap: 20px;
        min-height: 80px;
    }

    .rm-ms-nav__back,
    .rm-ms-nav__next {
        width: 50px;
        height: 50px;
        padding: 0;
        justify-content: center;
        margin-left: 0;
    }

    .rm-ms-nav__text {
        display: none;
    }

    .rm-ms-nav__icon {
        font-size: 18px;
    }

    /* Step 1: single Continue button is full-width with text */
    .rm-ms-nav:has(.rm-ms-nav__next):not(:has(.rm-ms-nav__back)) .rm-ms-nav__next {
        width: 100%;
        padding: 0 20px;
        justify-content: space-between;
    }

    .rm-ms-nav:has(.rm-ms-nav__next):not(:has(.rm-ms-nav__back)) .rm-ms-nav__text {
        display: inline;
    }

    .rm-ms-nav:has(.rm-ms-nav__next):not(:has(.rm-ms-nav__back)) .rm-ms-nav__icon {
        font-size: 12px;
    }

}

/* ── Small tablet / large phone (≤ 575px) ───────────────────────────────────
   Break the paired component-picker options into individual rows before they
   get too tight and bleed out of the block (reported at 491–550px). */

@media (max-width: 575px) {

    .rm-ms-picker-row__options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

}

/* ── Narrow mobile (≤ 480px) ────────────────────────────────────────────── */

@media (max-width: 480px) {

    .rm-ms-field__label {
        font-size: 14px;
    }

    /* Stack production volume cards to single column at very narrow widths */
    .rm-ms-volume-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rm-ms-content {
        padding: 24px 16px;
    }

    .rm-ms-nav {
        padding: 16px;
    }

}

/* ─── Confirmation screen ──────────────────────────────────────────────── */

.rm-ms-content--confirmation {
    display:        flex;
    flex-direction: column;
    gap:            25px;
}

.rm-ms-confirmation__icon {
    width:  30px;
    height: 30px;
    display: block;
}

.rm-ms-confirmation__heading {
    font-family: 'Georama', sans-serif;
    font-weight: 700;
    font-size:   28px;
    line-height: 1.2;
    color:       #000;
    margin:      0;
}

.rm-ms-confirmation__body {
    font-family:  Georgia, serif;
    font-size:    16px;
    line-height:  1.8;
    color:        #000;
    margin:       0;
}

.rm-ms-confirmation__ctas {
    display:   flex;
    gap:       30px;
    flex-wrap: wrap;
    margin-top: 0;
}

/* ── Request Pricing form ──────────────────────────────────────────────────── */

.rm-ms-rp {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.rm-ms-content--rp {
    display:        flex;
    flex-direction: column;
    gap:            30px;
}

.rm-ms-rp__heading {
    font-family: 'Georama', sans-serif;
    font-weight: 700;
    font-size:   32px;
    line-height: 1.2;
    color:       #000;
    margin:      0;
}

.rm-ms-rp__subtext {
    font-family: Georgia, serif;
    font-size:   16px;
    line-height: 1.7;
    color:       #000;
    margin:      0;
}

/* ── Configuration summary panel ────────────────────────────────────────────── */

.rm-ms-config-summary {
    border:        1px solid var(--rm-grey-outline);
    border-left:   3px solid var(--rm-red);
    background:    #f9f9f9;
    padding:       16px 14px 20px 20px;
}

.rm-ms-config-summary__heading {
    font-family:   var(--rm-font-sans);
    font-weight:   700;
    font-size:     22px;
    color:         var(--rm-black);
    margin:        0 0 15px;
}

.rm-ms-config-summary__table {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rm-ms-config-summary__row {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             20px;
    padding:         8px 0;
    border-bottom:   1px solid var(--rm-grey-outline);
}

.rm-ms-config-summary__row:first-child {
    border-top: 1px solid var(--rm-grey-outline);
}

.rm-ms-config-summary__label {
    font-family: var(--rm-font-sans);
    font-weight: 400;
    font-size:   14px;
    color:       var(--rm-black);
}

.rm-ms-config-summary__value {
    font-family: var(--rm-font-sans);
    font-weight: 700;
    font-size:   14px;
    color:       var(--rm-black);
    text-align:  right;
    margin:      0;
}

/* ── Contact form ────────────────────────────────────────────────────────────── */

.rm-ms-contact-form {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.rm-ms-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.rm-ms-contact-form__row--half {
    grid-template-columns: 1fr;
    max-width: calc(50% - 10px);
}

.rm-ms-contact-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.rm-ms-contact-field--full {
    grid-column: 1 / -1;
}

.rm-ms-contact-field__label {
    font-family:    'Georama', sans-serif;
    font-weight:    600;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #000;
}

.rm-ms-contact-field__optional {
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          #777;
    font-size:      11px;
}

.rm-ms-contact-field__input,
.rm-ms-contact-field__textarea {
    width:         100%;
    border:        1px solid #ccc;
    padding:       10px 12px;
    font-family:   Georgia, serif;
    font-size:     15px;
    color:         #000;
    background:    #fff;
    outline:       none;
    box-sizing:    border-box;
    border-radius: 0;
    appearance:    none;
    -webkit-appearance: none;
    transition:    border-color 0.15s;
}

.rm-ms-contact-field__input:focus,
.rm-ms-contact-field__textarea:focus {
    border-color: #c8102e;
}

.rm-ms-contact-field__input--select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right:       32px;
    cursor:              pointer;
}

.rm-ms-contact-field__textarea {
    resize:     vertical;
    min-height: 120px;
}

.rm-ms-contact-field__error {
    font-family: 'Georama', sans-serif;
    font-size:   12px;
    color:       #c8102e;
    display:     none;
}

.rm-ms-contact-field.has-error .rm-ms-contact-field__input,
.rm-ms-contact-field.has-error .rm-ms-contact-field__textarea {
    border-color: #c8102e;
}

.rm-ms-contact-field__error.is-visible {
    display: block;
}

/* ── Request Pricing nav footer ──────────────────────────────────────────────── */

.rm-ms-rp__nav {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          26px 60px;
    background:       #fff;
    border:           1px solid #e0e0e0;
    border-top:       none;
}

.rm-ms-rp__back {
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-family:     'Georama', sans-serif;
    font-weight:     700;
    font-size:       13px;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           #555;
    background:      transparent;
    border:          1px solid #ccc;
    padding:         10px 20px;
    cursor:          pointer;
    transition:      border-color 0.15s, color 0.15s;
}

.rm-ms-rp__back:hover {
    border-color: #999;
    color:        #000;
}

.rm-ms-rp__submit {
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-family:     'Georama', sans-serif;
    font-weight:     700;
    font-size:       13px;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           #fff;
    background:      #c8102e;
    border:          2px solid #c8102e;
    padding:         10px 28px;
    cursor:          pointer;
    transition:      background 0.15s;
}

.rm-ms-rp__submit:hover:not(:disabled) {
    background: #a00d25;
    border-color: #a00d25;
}

.rm-ms-rp__submit:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

@media (max-width: 700px) {
    .rm-ms-contact-form__row {
        grid-template-columns: 1fr;
    }
    .rm-ms-contact-form__row--half {
        max-width: 100%;
    }
    .rm-ms-config-summary__value {
        text-align: right;
    }
    .rm-ms-rp__nav {
        padding: 20px 24px;
    }
}