:root {
    --of-paper: #f2f5f3;
    --of-sheet: #ffffff;
    --of-ink: #17211d;
    --of-steel: #52635c;
    --of-line: #cfd8d3;
    --of-line-strong: #96a59e;
    --of-blue: #1f5e78;
    --of-blue-dark: #17485c;
    --of-green: #146b55;
    --of-green-soft: #e7f2ed;
    --of-warning: #9a5a00;
    --of-warning-soft: #fff4dd;
    --of-danger: #a63b32;
    --of-danger-soft: #fff0ee;
    --of-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Document intake keeps the visual language of a technical case file: the
   requirement ledger stays distinct from the upload tray and scan queue. */
.of-documents-layout {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.8fr);
    gap: 1rem;
    align-items: start;
}

.of-document-checklist {
    padding: 1rem;
    border: 1px solid var(--of-line-strong);
    border-top: 4px solid var(--of-blue);
    background: var(--of-sheet);
}

.of-document-checklist ul {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.of-document-checklist li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: .4rem;
    color: var(--of-steel);
    font-size: .88rem;
    line-height: 1.35;
}

.of-document-checklist li[data-complete="true"] {
    color: var(--of-green);
    font-weight: 700;
}

.of-document-checklist > p:last-child {
    margin: 1rem 0 0;
    color: var(--of-steel);
    font-size: .76rem;
    line-height: 1.45;
}

.of-document-uploader {
    margin: 0;
}

.of-document-subjects {
    margin: 1rem 0;
    padding: 0;
    border: 0;
}

.of-document-subjects > legend {
    margin-bottom: .5rem;
    color: var(--of-steel);
    font-size: .82rem;
    font-weight: 700;
}

.of-document-subjects > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    max-height: 12rem;
    overflow: auto;
    padding: .65rem;
    border: 1px solid var(--of-line);
    background: var(--of-paper);
}

.of-document-subject {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .45rem;
    align-items: center;
    min-width: 0;
    padding: .35rem;
}

.of-document-subject small {
    grid-column: 2;
    overflow: hidden;
    color: var(--of-steel);
    font: .65rem/1.3 var(--of-mono);
    text-overflow: ellipsis;
}

.of-document-dropzone {
    display: grid;
    gap: .45rem;
    padding: 1.15rem;
    border: 1px dashed var(--of-line-strong);
    background: linear-gradient(135deg, var(--of-sheet), var(--of-green-soft));
    cursor: pointer;
}

.of-document-dropzone[data-dragging="true"],
.of-document-dropzone:focus-within {
    border-color: var(--of-blue);
    box-shadow: inset 4px 0 0 var(--of-blue);
}

.of-document-dropzone span {
    color: var(--of-steel);
    font-size: .8rem;
    line-height: 1.45;
}

.of-document-dropzone input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: .4rem;
}

.of-document-live {
    min-height: 1.4rem;
    margin: .9rem 0 .35rem;
    color: var(--of-steel);
    font-size: .82rem;
}

.of-document-file-list {
    display: grid;
    gap: .5rem;
}

.of-document-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem .85rem;
    border: 1px solid var(--of-line);
    border-left: 4px solid var(--of-warning);
    background: var(--of-sheet);
}

.of-document-file[data-document-file="ready"] {
    border-left-color: var(--of-green);
}

.of-document-file[data-document-file="rejected"] {
    border-left-color: var(--of-danger);
    background: var(--of-danger-soft);
}

.of-document-file > div {
    display: grid;
    min-width: 0;
}

.of-document-file strong,
.of-document-file small {
    overflow-wrap: anywhere;
}

.of-document-file small {
    color: var(--of-steel);
}

.of-document-file [data-document-status] {
    color: var(--of-steel);
    font: 700 .72rem/1.2 var(--of-mono);
    max-width: 24rem;
    white-space: normal;
}

@media (max-width: 720px) {
    .of-documents-layout {
        grid-template-columns: 1fr;
    }

    .of-document-subjects > div {
        grid-template-columns: 1fr;
    }

    .of-document-file {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .of-document-file [data-hide-document] {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

[hidden] {
    display: none !important;
}

.of-page {
    min-height: 100vh;
    padding: 3.5rem clamp(1rem, 3vw, 3rem) 5rem;
    background: var(--of-paper);
    color: var(--of-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.of-page *,
.of-page *::before,
.of-page *::after {
    box-sizing: border-box;
}

.of-masthead,
.of-progress,
.of-layout,
.of-payment {
    width: min(100%, 1260px);
    margin-inline: auto;
}

.of-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 0 1.75rem;
    border-top: 3px solid var(--of-ink);
    border-bottom: 1px solid var(--of-line-strong);
}

.of-kicker,
.of-section-heading > span,
.of-quote header span,
.of-completeness > span {
    margin: 0 0 .65rem;
    color: var(--of-blue);
    font: 700 .72rem/1.25 var(--of-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.of-masthead h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 680;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.of-lead {
    max-width: 760px;
    margin: 1rem 0 0;
    color: var(--of-steel);
    font-size: 1rem;
    line-height: 1.65;
}

.of-document-mark {
    flex: 0 0 220px;
    padding: 1rem;
    border: 1px solid var(--of-line-strong);
    border-left: 4px solid var(--of-green);
    background: var(--of-sheet);
}

.of-document-mark span,
.of-document-mark small {
    display: block;
    color: var(--of-steel);
    font: .68rem/1.4 var(--of-mono);
    letter-spacing: .08em;
}

.of-document-mark strong {
    display: block;
    margin: .3rem 0;
    color: var(--of-green);
    font: 700 .9rem/1.3 var(--of-mono);
}

.of-progress {
    padding: 1.25rem 0;
}

.of-progress ol {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--of-line);
    background: var(--of-sheet);
}

.of-progress li + li {
    border-left: 1px solid var(--of-line);
}

.of-progress button {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 48px;
    padding: .6rem .85rem;
    border: 0;
    background: transparent;
    color: var(--of-steel);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 650;
    text-align: left;
}

.of-progress button span {
    color: var(--of-line-strong);
    font: 700 .72rem/1 var(--of-mono);
}

.of-progress button[aria-current="step"] {
    background: var(--of-blue);
    color: #fff;
}

.of-progress button[aria-current="step"] span {
    color: #d9edf5;
}

.of-progress button[data-complete="true"] {
    color: var(--of-green);
}

.of-progress button:disabled {
    cursor: default;
    opacity: .58;
}

.of-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
    align-items: start;
    gap: 1.5rem;
}

.of-sheet,
.of-quote,
.of-completeness,
.of-payment {
    border: 1px solid var(--of-line);
    background: var(--of-sheet);
    box-shadow: 0 12px 32px rgba(23, 33, 29, .055);
}

.of-sheet {
    min-width: 0;
}

.of-alert {
    margin: 1.25rem 1.5rem 0;
    padding: .85rem 1rem;
    border-left: 4px solid var(--of-danger);
    background: var(--of-danger-soft);
    color: var(--of-danger);
    font-size: .88rem;
    line-height: 1.5;
}

.of-step {
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.of-section-heading {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--of-line);
}

.of-section-heading h2,
.of-quote h2,
.of-completeness h2,
.of-payment h1,
.of-payment h2 {
    margin: 0;
    color: var(--of-ink);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 680;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.of-section-heading p {
    margin: .55rem 0 0;
    color: var(--of-steel);
    font-size: .9rem;
    line-height: 1.55;
}

.of-fieldset {
    min-width: 0;
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.of-fieldset > legend {
    width: 100%;
    margin-bottom: .8rem;
    padding: 0 0 .55rem;
    border-bottom: 1px solid var(--of-line);
    color: var(--of-steel);
    font: 700 .72rem/1.3 var(--of-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.of-fieldset-note {
    margin: 0 0 1rem;
    color: var(--of-steel);
    font-size: .8rem;
    line-height: 1.5;
}

.of-opening-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    margin-bottom: 1rem;
}

.of-envelope-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.of-envelope-list {
    display: grid;
    gap: .8rem;
}

.of-system-list {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
}

.of-system-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: .75rem;
}

.of-system-toolbar--modernization {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.of-system-expert {
    margin-top: 1rem;
    border-top: 1px solid var(--of-line);
}

.of-system-expert > summary {
    padding: .8rem 0;
    color: var(--of-blue-dark);
    cursor: pointer;
    font-weight: 700;
}

.of-system-efficiency {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .65rem 0;
}

.of-system-coverage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.of-system-coverage {
    padding: .75rem;
    border: 1px solid var(--of-line);
    background: var(--of-sheet);
}

.of-envelope-card,
.of-expert-group {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--of-line);
    background: #fbfcfb;
}

.of-envelope-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--of-line);
}

.of-envelope-card__header h3,
.of-expert-group h3 {
    margin: 0;
    font-size: .95rem;
}

.of-envelope-ref {
    margin-left: auto;
    color: var(--of-steel);
    font: .66rem/1.3 var(--of-mono);
}

.of-envelope-segmented {
    margin-top: 1rem;
}

.of-expert-disclosure {
    margin-bottom: 1.75rem;
    border: 1px solid var(--of-line-strong);
    background: #f8faf9;
}

.of-expert-disclosure > summary {
    padding: .9rem 1rem;
    color: var(--of-blue-dark);
    cursor: pointer;
    font-weight: 700;
}

.of-expert-disclosure > p,
.of-expert-disclosure > .of-envelope-list {
    margin-right: 1rem;
    margin-left: 1rem;
}

.of-expert-disclosure > .of-envelope-list {
    margin-bottom: 1rem;
}

.of-expert-group {
    background: var(--of-sheet);
}

.of-expert-group h3 {
    margin-bottom: .8rem;
}

.of-envelope-card :disabled,
.of-expert-group :disabled {
    opacity: .58;
    cursor: not-allowed;
}

.of-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.of-choice {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid var(--of-line);
    background: #fbfcfb;
    cursor: pointer;
}

.of-choice:hover {
    border-color: var(--of-blue);
}

.of-choice:has(input:checked) {
    border-color: var(--of-blue);
    box-shadow: inset 4px 0 0 var(--of-blue);
    background: #f1f7f9;
}

.of-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.of-choice:focus-within {
    outline: 3px solid rgba(31, 94, 120, .24);
    outline-offset: 2px;
}

.of-choice-index {
    color: var(--of-steel);
    font: 700 .78rem/1 var(--of-mono);
}

.of-choice strong,
.of-choice small {
    display: block;
}

.of-choice strong {
    font-size: .9rem;
}

.of-choice small {
    margin-top: .25rem;
    color: var(--of-steel);
    font: .66rem/1.2 var(--of-mono);
}

.of-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.of-control-grid--address {
    grid-template-columns: minmax(140px, .55fr) minmax(0, 1fr);
}

.of-control,
.of-control > span:first-child {
    display: block;
}

.of-control > span:first-child {
    margin-bottom: .42rem;
    color: var(--of-steel);
    font-size: .78rem;
    font-weight: 650;
}

.of-control small {
    font-weight: 450;
}

.of-control-hint {
    display: block;
    margin-top: .35rem;
    color: var(--of-steel);
    font-size: .72rem;
    line-height: 1.35;
}

.of-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.of-segmented label {
    position: relative;
    cursor: pointer;
}

.of-segmented input {
    position: absolute;
    opacity: 0;
}

.of-segmented span {
    display: block;
    min-height: 44px;
    padding: .65rem .85rem;
    border: 1px solid var(--of-line-strong);
    background: #fbfcfb;
    color: var(--of-steel);
    font-size: .8rem;
    font-weight: 650;
}

.of-segmented input:checked + span {
    border-color: var(--of-blue);
    background: #edf5f8;
    color: var(--of-blue-dark);
    box-shadow: inset 3px 0 0 var(--of-blue);
}

.of-segmented input:focus-visible + span {
    outline: 3px solid rgba(31, 94, 120, .24);
    outline-offset: 2px;
}

.of-control--compact {
    max-width: 220px;
}

.of-readonly-value {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: .65rem .75rem;
    border-left: 3px solid var(--of-green);
    background: var(--of-green-soft);
    color: var(--of-green);
    font-size: .85rem;
}

.of-calculation {
    display: block;
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-left: 4px solid var(--of-blue);
    background: #edf5f8;
    color: var(--of-blue-dark);
    font-size: .82rem;
}

.of-applicability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 0 0 1.75rem;
}

.of-applicability-grid section,
.of-applicability-grid > p {
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--of-line);
    background: #f8faf9;
    color: var(--of-steel);
    font-size: .8rem;
    line-height: 1.5;
}

.of-applicability-grid section strong {
    color: var(--of-ink);
}

.of-applicability-grid section p {
    margin: .35rem 0 0;
}

.of-applicability-grid > p {
    grid-column: 1 / -1;
    border-left: 4px solid var(--of-green);
    background: var(--of-green-soft);
}

.of-topology [role="list"] {
    display: grid;
    gap: .55rem;
    margin: 1rem 0;
}

.of-topology article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid var(--of-line);
    background: #fbfcfb;
}

.of-topology article span {
    color: var(--of-steel);
    font: .68rem/1.3 var(--of-mono);
}

.of-repeater-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.of-repeater-remove {
    border: 0;
    background: transparent;
    color: var(--of-danger);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
}

.of-readiness-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1.75rem;
}

.of-readiness-pair p {
    margin: 0;
    padding: .9rem;
    border-left: 4px solid var(--of-green);
    background: var(--of-green-soft);
    color: var(--of-steel);
    font-size: .8rem;
    line-height: 1.5;
}

.of-readiness-pair [data-model-readiness] {
    border-left-color: var(--of-warning);
    background: var(--of-warning-soft);
}

.of-readiness-pair [data-order-readiness][data-status="ready"],
.of-readiness-pair [data-model-readiness][data-status="ready"] {
    border-left-color: var(--of-green);
    background: var(--of-green-soft);
}

.of-control--wide,
.of-control--full {
    grid-column: auto;
}

.of-control--full {
    grid-column: 1 / -1;
}

.of-control input,
.of-control select,
.of-inline-control input {
    width: 100%;
    min-height: 46px;
    padding: .65rem .75rem;
    border: 1px solid var(--of-line-strong);
    border-radius: 2px;
    background: var(--of-sheet);
    color: var(--of-ink);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
}

.of-control input:hover,
.of-control select:hover,
.of-inline-control input:hover {
    border-color: var(--of-steel);
}

.of-control input:focus,
.of-control select:focus,
.of-inline-control input:focus {
    border-color: var(--of-blue);
    outline: 3px solid rgba(31, 94, 120, .18);
    outline-offset: 1px;
}

.of-control [aria-invalid="true"] {
    border-color: var(--of-danger);
    background: var(--of-danger-soft);
}

.of-field-error {
    margin: .38rem 0 0;
    color: var(--of-danger);
    font-size: .75rem;
}

.of-configuration-note,
.of-assumption-note {
    padding: 1rem;
    border-left: 4px solid var(--of-warning);
    background: var(--of-warning-soft);
    color: #634216;
    font-size: .86rem;
    line-height: 1.55;
}

.of-assumption-note {
    margin-top: 1.5rem;
    border-color: var(--of-blue);
    background: #edf5f8;
    color: var(--of-blue-dark);
}

.of-assumption-note p {
    margin: .35rem 0 0;
}

.of-option-list {
    display: grid;
    gap: .55rem;
}

.of-scope-context {
    margin-top: 1rem;
}

.of-option,
.of-switch,
.of-consents label {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 44px;
    padding: .7rem .8rem;
    border: 1px solid var(--of-line);
    background: #fbfcfb;
    color: var(--of-ink);
    cursor: pointer;
    font-size: .84rem;
    line-height: 1.45;
}

.of-option input,
.of-switch input,
.of-consents input {
    width: 18px;
    height: 18px;
    margin: .05rem 0 0;
    accent-color: var(--of-blue);
}

.of-option > span,
.of-option strong,
.of-option small {
    display: block;
}

.of-option > span {
    min-width: 0;
}

.of-option strong {
    margin-bottom: .2rem;
    font-size: .9rem;
}

.of-option small {
    color: var(--of-steel);
    font-size: .75rem;
}

.of-option .of-option-meta {
    margin-top: .45rem;
    color: var(--of-blue);
    font: 700 .68rem/1.35 var(--of-mono);
    text-transform: uppercase;
}

.of-option .of-option-sla {
    margin-top: .35rem;
    color: var(--of-green);
    line-height: 1.45;
}

.of-option:has(input:checked) {
    border-color: var(--of-blue);
    background: #f1f7f9;
    box-shadow: inset 4px 0 0 var(--of-blue);
}

.of-option:focus-within {
    outline: 3px solid rgba(31, 94, 120, .24);
    outline-offset: 2px;
}

.of-switch {
    margin: 1.5rem 0;
}

.of-invoice {
    padding: 1rem;
    border: 1px solid var(--of-line);
}

.of-delivery {
    margin-bottom: 1.5rem;
}

.of-inline-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
}

.of-control--promo {
    max-width: 620px;
    margin-bottom: 1.5rem;
}

.of-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--of-line);
    background: var(--of-line);
}

.of-review-row {
    min-height: 74px;
    padding: .8rem;
    background: var(--of-sheet);
}

.of-review-row span,
.of-review-row strong {
    display: block;
}

.of-review-row span {
    margin-bottom: .35rem;
    color: var(--of-steel);
    font: .67rem/1.2 var(--of-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.of-review-row strong {
    font-size: .86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.of-consents {
    display: grid;
    gap: .55rem;
}

.of-consents a {
    color: var(--of-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.of-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--of-line);
    background: #f8faf9;
}

.of-button {
    min-height: 46px;
    padding: .68rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
}

.of-button--primary {
    border-color: var(--of-blue);
    background: var(--of-blue);
    color: #fff;
}

.of-button--primary:hover {
    background: var(--of-blue-dark);
}

.of-button--secondary {
    border-color: var(--of-line-strong);
    background: var(--of-sheet);
    color: var(--of-ink);
}

.of-button--secondary:hover {
    border-color: var(--of-blue);
    color: var(--of-blue);
}

.of-button:focus-visible,
.of-progress button:focus-visible {
    outline: 3px solid rgba(31, 94, 120, .28);
    outline-offset: 2px;
}

.of-button:disabled {
    cursor: wait;
    opacity: .55;
}

.of-save-state {
    color: var(--of-steel);
    font: .7rem/1.3 var(--of-mono);
    text-align: center;
}

.of-rail {
    position: sticky;
    top: 1.25rem;
    display: grid;
    gap: 1rem;
}

.of-quote,
.of-completeness {
    padding: 1.25rem;
}

.of-quote header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--of-line);
}

.of-quote h2,
.of-completeness h2 {
    font-size: 1.2rem;
}

.of-verified-badge {
    padding: .35rem .45rem;
    border: 1px solid #9fc7b8;
    background: var(--of-green-soft);
    color: var(--of-green) !important;
    font-size: .58rem !important;
    white-space: nowrap;
}

.of-quote-state {
    padding: 1rem 0;
    color: var(--of-steel);
    font-size: .82rem;
    line-height: 1.45;
}

.of-quote-state[data-state="loading"] {
    color: var(--of-blue);
}

.of-quote-state[data-state="error"] {
    color: var(--of-danger);
}

.of-quote-items,
.of-totals {
    margin: 0;
}

.of-quote-items > div,
.of-totals > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .7rem 0;
    border-top: 1px solid var(--of-line);
}

.of-quote-items dt,
.of-totals dt {
    color: var(--of-steel);
    font-size: .78rem;
    line-height: 1.35;
}

.of-quote-items dd,
.of-totals dd {
    margin: 0;
    font: 700 .76rem/1.35 var(--of-mono);
    text-align: right;
}

.of-totals .of-total {
    margin-top: .35rem;
    padding-top: 1rem;
    border-top: 2px solid var(--of-ink);
}

.of-totals .of-total dt,
.of-totals .of-total dd {
    color: var(--of-ink);
    font-size: 1rem;
    font-weight: 750;
}

.of-completeness ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.of-completeness li {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .65rem 0;
    border-top: 1px solid var(--of-line);
    font-size: .78rem;
}

.of-completeness li strong {
    color: var(--of-warning);
    font: 700 .66rem/1.4 var(--of-mono);
    text-transform: uppercase;
}

.of-completeness li[data-complete="true"] strong {
    color: var(--of-green);
}

.of-payment {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
    gap: 2rem;
    margin-top: 1.25rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.of-payment-summary > p:not(.of-kicker) {
    margin: .65rem 0 0;
    color: var(--of-steel);
}

.of-payment-summary strong {
    color: var(--of-ink);
    font-family: var(--of-mono);
}

.of-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.25rem;
}

.of-payment-methods span {
    padding: .4rem .55rem;
    border: 1px solid var(--of-line);
    background: #f8faf9;
    color: var(--of-steel);
    font: 700 .66rem/1.2 var(--of-mono);
    text-transform: uppercase;
}

.of-payment-form {
    min-width: 0;
}

.of-payment-form .of-button {
    width: 100%;
    margin-top: 1rem;
}

.of-payment-form .of-alert {
    margin: 1rem 0 0;
}

.of-payment-pending {
    padding: 1rem;
    border-left: 4px solid var(--of-warning);
    background: var(--of-warning-soft);
    color: #634216;
    line-height: 1.55;
}

.of-payment-pending--failed {
    border-left-color: var(--of-danger);
    background: var(--of-danger-soft);
    color: #762c26;
}

@media (max-width: 960px) {
    .of-masthead {
        align-items: flex-start;
    }

    .of-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .of-rail {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .of-page {
        padding: 2rem .75rem 3rem;
    }

    .of-masthead {
        display: block;
    }

    .of-document-mark {
        width: 100%;
        margin-top: 1.25rem;
    }

    .of-progress {
        overflow-x: auto;
    }

    .of-progress ol {
        min-width: 900px;
    }

    .of-section-heading {
        grid-template-columns: 1fr;
    }

    .of-choice-grid,
    .of-control-grid,
    .of-control-grid--address,
    .of-opening-toolbar,
    .of-system-toolbar,
    .of-system-toolbar--modernization,
    .of-system-efficiency,
    .of-system-coverage-list,
    .of-review,
    .of-rail,
    .of-payment,
    .of-applicability-grid,
    .of-readiness-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .of-control--wide,
    .of-control--full {
        grid-column: auto;
    }

    .of-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .of-save-state {
        grid-column: auto;
        grid-row: 1;
    }

    .of-button {
        width: 100%;
        min-height: 48px;
    }

    .of-page input:not([type="checkbox"]):not([type="radio"]),
    .of-page select,
    .of-page textarea {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .of-page *,
    .of-page *::before,
    .of-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}