/* Application CSS. Shared components and design tokens are maintained in this file. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root {
    --ink: #172942;
    --muted: #64748b;
    --accent: #aa6248;
    --accent-hover: #99573f;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
    --line: #e5eaf0;
    --surface: #fff;
    --paper: #f3f5f9;
    --green: #14233b;
    --lime: var(--accent);
    --danger: #b94d42;
    --font-body: 14px;
    --font-control: 13px;
    --control-radius: 7px;
    --card-radius: 11px;
    --button-padding: 0.3rem 0.65rem;
    --control-padding: 10px 12px;
    --card-padding: 20px;
    --page-padding-top: 10px;
    --page-padding-inline: 10px;
    --table-cell-padding: 12px 16px;
    --card-padding-compact: 18px 20px;
}

/* Shared components: typography, buttons, forms, cards, tables, navigation, feedback and dialogs. */

/* Shared jQuery date picker. */
.ui-datepicker {
    display: none;
    width: 290px;
    max-width: calc(100vw - 20px);
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 8px 24px #14233b24;
    font-size: 13px;
}

.ui-datepicker-header {
    position: relative;
    padding: 4px 28px 12px;
}

.ui-datepicker-title {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.ui-datepicker-title select {
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 2px;
    padding: 2px 6px;
    font-size: 20px;
    cursor: pointer;
}

.ui-datepicker-prev { left: 0; }
.ui-datepicker-next { right: 0; }
.ui-datepicker .ui-state-disabled { opacity: .4; cursor: default; }
.ui-datepicker table { width: 100%; border-collapse: collapse; }
.ui-datepicker th { padding: 6px 2px; text-align: center; color: var(--muted); }
.ui-datepicker td { padding: 2px; border: 0; text-align: center; }
.ui-datepicker td a,
.ui-datepicker td span { display: block; padding: 6px 3px; border-radius: 4px; }
.ui-datepicker td a:hover,
.ui-datepicker td a:focus-visible { background: var(--paper); outline: 2px solid var(--accent); }
.ui-datepicker .ui-state-highlight { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.ui-datepicker .ui-state-active { background: var(--accent); color: white; }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 14px 'DM Sans','Segoe UI',sans-serif;
    font-family: 'DM Sans','Segoe UI',sans-serif;
}

button, input, select, textarea {
    font: inherit;
}

button, a, input, textarea, select {
    outline-offset: 4px;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

button {
    cursor: pointer;
}

button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

h1, h2, h3, h4, p {
    margin-top: 0;
}

h1, h2, h3, h4, .brand {
    font-family: 'DM Sans','Segoe UI',sans-serif;
}

h1 {
    font-size: 32px;
    letter-spacing: -1.2px;
    font-weight: 700;
    margin-bottom: 9px;
}

h2 {
    font-size: 18px;
    letter-spacing: -.4px;
    margin-bottom: 6px;
}

h3 {
    font-size: 15px;
    margin-bottom: 7px;
}

p {
    line-height: 1.65;
}

small, .muted {
    color: var(--muted);
}

.avatar {
    width: 33px;
    height: 33px;
    background: #e8ded0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.icon-btn {
    background: transparent;
    border: 0;
    color: #7d887e;
    padding: 5px;
    display: inline-flex;
}

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    padding: var(--button-padding);
    line-height: 1.5;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    color: var(--ink);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--font-control);
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap;
    overflow-wrap: normal;
    min-width: 0;
    height: auto;
    vertical-align: middle;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}

.btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 8px #aa624812;
}

.btn.soft {
    background: #eef2f8;
    border-color: #e5ebf4;
    color: #345176;
}

.btn.edit {
    background: #dce7f4;
    color: #254568;
    border-color: #809ab8;
    box-shadow: none;
}

.btn.edit:hover {
    background: #cbdcf0;
    border-color: #597b9f;
}

.btn.secondary {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
}

.btn.danger {
    background: #fff;
    border-color: #e7b5b1;
    color: #a43b35;
}

.btn.small {
    font-size: 12px;
    padding: 5px 10px;
}

.btn:hover {
    filter: brightness(.97);
}

.panel, .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    overflow: hidden;
    margin: 0;
    box-shadow: 0 3px 12px #14233b03;
}

.table-wrap {
    overflow: auto;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--font-control);
}

th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    background: #fafbfd;
    color: var(--muted);
    font-weight: 600;
    padding: 12px 22px;
    border-block: 1px solid var(--line);
    white-space: nowrap;
    border-color: #edf0f5;
}

td {
    padding: 19px 22px;
    border-bottom: 1px solid #eff0eb;
    vertical-align: middle;
    border-color: #edf0f5;
    padding-block: 20px;
}

td strong {
    font-size: 12px;
    font-weight: 600;
    display: block;
}

td small {
    font-size: 10px;
    display: block;
    margin-top: 5px;
}

.badge {
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 10px;
    white-space: nowrap;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    background: #f0f3f8;
    color: #7d8ba0;
    align-self: flex-start;
    line-height: 1.4;
}

.badge.amber {
    background: #fff2e8;
    color: #b87437;
}

.badge.green {
    background: #e9f5ef;
    color: #348969;
}

.badge.blue {
    background: #eaf1fc;
    color: #597daf;
}

.badge.purple {
    background: #efedfb;
    color: #8b76bc;
}

.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 0;
    margin-bottom: 23px;
    overflow: auto;
}

.tabs a {
    padding: 10px 17px;
    font-size: 11px;
    color: #8a94a5;
    white-space: nowrap;
    border-radius: 6px;
    background: transparent;
}

.tabs a.active {
    color: white;
    border-bottom: 2px solid var(--green);
    font-weight: 600;
    background: #14233b;
    border: 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    min-width: 0;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: #506078;
    line-height: 1.6;
}

.form-control {
    padding: var(--control-padding);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    font-size: var(--font-body);
    min-width: 0;
    line-height: 1.5;
}

.form-control::placeholder {
    color: var(--muted);
}

.form-control:disabled {
    background: #f6f8fb;
    color: var(--muted);
    cursor: not-allowed;
}

.form-control[type="file"]::file-selector-button {
    padding: 6px 12px;
    margin-right: 10px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.field .form-inline {
    flex-wrap: nowrap;
}

.form-filters .form-search {
    flex: 1 1 250px;
}

.form-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.form-search > i,
.form-search > svg {
    position: absolute;
    left: 12px;
    width: 16px;
    color: var(--muted);
    pointer-events: none;
}

.form-search .form-control {
    padding-left: 36px;
}

.form-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.form-filter .form-control {
    width: auto;
    max-width: 170px;
}

.form-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.form-footer > p,
.form-help {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.form-panel {
    padding: var(--card-padding);
}

/* Shared form controls. Use these classes in every module. */
.field label:not(.form-check) > span {
    color: var(--accent);
}

.form-check,
.field label.form-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: var(--accent);
}

.form-check > span {
    color: inherit;
}

.form-check strong {
    display: block;
    font-weight: 600;
}

.form-check small,
.field .form-check small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.form-check input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

textarea.form-control {
    min-height: 112px;
    resize: vertical;
    line-height: 1.7;
}

.field small {
    font-size: 10px;
    line-height: 1.5;
    color: #94a0b1;
}

.steps {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 29px;
    padding: 0 0 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #dce3ed;
    margin-bottom: 25px;
}

.step {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 10px;
    color: #a3afbd;
}

.step i {
    font-style: normal;
    border: 0;
    width: 29px;
    height: 29px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #e9edf4;
    color: #94a2b6;
}

.step.active {
    color: #314c70;
    font-weight: 600;
}

.step.active i {
    background: #14233b;
    color: white;
    border-color: var(--green);
}

.callout {
    padding: 15px 18px;
    background: #fff5ec;
    color: #b1784b;
    border: 1px solid #eee2c5;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-color: #f7e3d1;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
    border-color: #edf0f5;
}

.info-row span {
    color: var(--muted);
}

.totals {
    margin-left: auto;
    max-width: 260px;
    padding: 20px 0;
}

.totals .info-row:last-child {
    font-weight: 700;
    font-size: 17px;
    color: #14233b;
}

.timeline {
    border-left: 2px solid #e5eadc;
    padding-left: 25px;
    margin: 10px 0 10px 8px;
    border-color: #e4ebf5;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-item:before {
    content: '';
    width: 9px;
    height: 9px;
    background: #b88068;
    border: 4px solid white;
    position: absolute;
    left: -35px;
    border-radius: 50%;
}

.timeline-item p {
    font-size: 12px;
    color: var(--muted);
}

dialog {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px;
    width: 480px;
    max-width: 95vw;
    color: var(--ink);
}

dialog::backdrop {
    background: #173f354d;
    backdrop-filter: blur(3px);
}

dialog .actions {
    justify-content: flex-end;
    margin-top: 20px;
}

#toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #14233b;
    color: white;
    border-radius: 8px;
    padding: 15px 25px;
    box-shadow: 0 8px 30px #0002;
    z-index: 100;
    font-size: 12px;
    display: none;
}

.empty {
    padding: 60px;
    text-align: center;
    color: var(--muted);
}

.form-control:focus {
    outline: 2px solid #aa624845;
    border-color: #b88068;
}

.step.active:last-child i {
    background: var(--accent);
}

body[data-workspace-route=sign-in] > .v2-header, body[data-workspace-route=sign-in] > .v2-rail, body[data-workspace-route=sign-in] .footer-note {
    display: none;
}

body[data-workspace-route=sign-in] > .v2-main {
    margin: 0;
}

body[data-workspace-route=sign-in] > .v2-main > .content {
    max-width: none;
    padding: 0;
}

.btn > .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.btn > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.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;
}

.summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #7087a4;
    background: #eef2f8;
    border-radius: 9px;
}

.summary-icon .icon {
    width: 18px;
    height: 18px;
}

.btn.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.panel-body {
    padding: var(--card-padding);
}

/* Shared structure for record details, related lists and action cards. */
.details-stack {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.requests-page .panel.detail-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

.detail-card > .card-header,
.detail-card > .card-body,
.detail-card > form > .card-header,
.detail-card > form > .card-body {
    padding: var(--card-padding);
}

.detail-card > .card-header,
.detail-card > form > .card-header {
    border-bottom: 1px solid var(--line);
}

.card-header-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.detail-card .card-header h2,
.detail-card .card-header .profile-identity {
    margin: 0;
}

.detail-card .card-header .requests-panel-heading,
.detail-card .card-header .quotation-overview-heading {
    padding: 0;
    margin: 0;
    border: 0;
}

.detail-card .card-body > .profile-detail-list {
    margin: 0;
}

.detail-card .card-body .profile-detail-list > div {
    padding: 0;
    border: 0;
}

.detail-card .card-body > p:last-child {
    margin-bottom: 0;
}

.detail-card .detail-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.detail-card .detail-section > h3 {
    margin: 0 0 14px;
}

.detail-card > .card-footer,
.detail-card > form > .card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: auto;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: #f8fafc;
    color: var(--muted);
    font-size: 12px;
}

.detail-card .record-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    min-width: 0;
    margin: 0;
}

.detail-card .record-metadata > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
    padding: 0;
    border: 0;
}

.detail-card .record-metadata dt,
.detail-card .record-metadata dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.detail-card .record-metadata dt {
    color: var(--muted);
    font-weight: 400;
}

.detail-card .record-metadata dd {
    color: var(--ink);
}

.detail-card .card-footer .btn {
    width: auto;
}

th, td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.field-validation-error {
    color: #a13b32;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.field-validation-valid {
    display: none;
}

.workspace .avatar {
    background: #edf0e6;
    color: var(--green);
    border-radius: 7px;
}

.banner .btn {
    margin-left: auto;
    z-index: 1;
    background: transparent;
    border-color: #c5d0b5;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px;
    gap: 12px;
}

.panel-head p {
    font-size: 11px;
    color: #8792a1;
    margin: 6px 0 0;
}

.activity .avatar {
    width: 29px;
    height: 29px;
    font-size: 9px;
    background: #eff3f9;
    color: #7391b8;
}

.aside-info {
    padding: 24px;
    background: #edf2fa;
    border: 1px solid #e0e7d4;
    border-radius: 10px;
    height: fit-content;
    border-color: #e0e8f4;
}

.aside-info p, .aside-info li {
    font-size: 12px;
    color: #7d8fa7;
    line-height: 1.8;
}

.aside-info ul {
    padding-left: 18px;
}

.auth-form .btn {
    width: auto;
}

.grid > *, .quote-layout > *, .form-fields > * {
    min-width: 0;
}

.v2-header-right .avatar {
    width: 28px;
    height: 28px;
    background: #dce6f3;
    color: #435d7b;
}

.panel-head h2 {
    font-weight: 650;
}

.v2-greeting .actions > span {
    font-size: 11px;
    color: #7d8a9c;
    padding-right: 8px;
}

.v2-hero .btn {
    position: relative;
    z-index: 1;
    margin-top: 8px;
}

.aside-info h3 {
    color: #3f5e83;
}

.auth-form .btn.primary {
    background: var(--accent);
}

.workspace-page .table-wrap {
    position: relative;
}

.request-summary-card:nth-child(2) .summary-icon {
    background: #f9eee8;
    color: var(--accent);
}

.requests-page .badge {
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

.request-workflow-note {
    display: flex;
    gap: 12px;
    padding: 18px 20px;
    background: #eaf0f8;
    border: 1px solid #dfe7f2;
    border-radius: 9px;
    color: #5c7391;
}

.request-workflow-note > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
}

.request-workflow-note p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.request-workflow-note strong {
    font-weight: 600;
    color: #3e5877;
}

.request-detail-panel > .summary-icon {
    margin-bottom: 18px;
}

.request-validation {
    font-size: 13px;
    color: #a13b32;
    line-height: 1.7;
}

.request-validation.validation-summary-valid {
    display: none;
}

.request-success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e9f5ef;
    border: 1px solid #cbe7d9;
    padding: 14px 18px;
    border-radius: 8px;
    color: #286b51;
    font-size: 14px;
}

.customer-request-status {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #d8e3ef;
    border-left: 4px solid var(--accent);
    border-radius: var(--card-radius);
    background: #fff;
}

.customer-request-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    color: var(--accent);
    background: #f8eee9;
}

.customer-request-status-label {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.customer-request-status h2 {
    margin: 0 0 4px;
}

.customer-request-status-description {
    margin: 0;
    color: var(--muted);
}

.activity .avatar .icon {
    width: 13px;
    height: 13px;
}

.db-search .icon-btn {
    flex: 0 0 auto;
}

.dashboard-page .v2-greeting .actions {
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-page .panel {
    margin: 0;
    overflow: hidden;
}

.dashboard-page .panel-head {
    padding: 20px 22px;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-page .panel-head h2, .dashboard-page .v2-queue-head h2 {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -.2px;
}

.dashboard-page .panel-head p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
    color: var(--muted);
}

.dashboard-page .panel-body {
    padding: 0 22px 22px;
}

.dashboard-page .db-search .icon-btn {
    width: 30px;
    height: 32px;
}

.dashboard-page .badge {
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

.quotation-status-note .btn {
    margin-top: 18px;
}

.configuration-section-title .summary-icon {
    color: var(--accent);
    background: #f8eee8;
}

.form-control[readonly] {
    background: #f6f8fb;
    color: var(--muted);
}

.configuration-errors.validation-summary-valid {
    display: none;
}

.configuration-errors.validation-summary-errors {
    padding: 16px 20px;
    border: 1px solid #eacfc6;
    border-radius: 8px;
    background: #fff8f4;
}

.configuration-table caption.sr-only {
    position: absolute;
}

.access-integration-top .summary-icon {
    background: #f8eee8;
    color: var(--accent);
}

/* Base layouts */

.shell {
    display: grid;
    grid-template-columns: 238px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 31px 20px;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 238px;
    inset: 0 auto 0 0;
    z-index: 20;
}

.brand {
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}

.brand img {
    width: 37px;
    height: 37px;
}

.workspace {
    margin: 32px 0 25px;
    border: 1px solid var(--line);
    padding: 12px 10px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.workspace b {
    font-size: 12px;
}

.workspace small {
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

.nav-caption {
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #989f98;
    margin: 8px 14px 13px;
    font-weight: 700;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 13px;
    color: #6b756e;
}

.nav a.active {
    background: #edf2e8;
    color: var(--green);
    font-weight: 700;
}

.nav a:hover {
    background: #f5f7f0;
}

.count {
    margin-left: auto;
    font-size: 10px;
    background: #e1e9d8;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 42px;
}

.help {
    margin: 20px 4px;
    padding: 16px;
    background: #f7f8f2;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.help p {
    font-size: 11px;
    color: var(--muted);
    margin: 8px 0 12px;
}

.help a {
    font-size: 11px;
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
}

.user {
    border-top: 1px solid var(--line);
    padding: 20px 4px 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.user b {
    font-size: 12px;
}

.user small {
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

.main {
    grid-column: 2;
    min-width: 0;
}

.topbar {
    height: 80px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.breadcrumb {
    font-size: 12px;
    color: #8e958f;
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb b {
    font-weight: 500;
    color: var(--ink);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.key {
    border: 1px solid var(--line);
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 9px;
}

.notification {
    position: relative;
}

.notification:after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b58a44;
    position: absolute;
    right: 8px;
    top: 4px;
}

.content {
    max-width: 1510px;
    margin: auto;
    padding: var(--page-padding-top) var(--page-padding-inline) 40px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
    gap: 24px;
    flex-wrap: wrap;
}

.page-heading-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.page-heading-identity > div {
    min-width: 0;
}

.page-heading-identity h1 {
    overflow-wrap: anywhere;
}

.page-head h1 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -.7px;
    margin: 8px 0 10px;
}

.page-head p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.page-head .eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--muted);
}

.eyebrow {
    font-size: 10px;
    font-weight: 600;
    color: #8b948b;
    letter-spacing: 1.4px;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.banner {
    background: #eaf0df;
    position: relative;
    border: 1px solid #e1e8d5;
    border-radius: 12px;
    padding: 26px 29px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    overflow: hidden;
}

.banner:after {
    content: '';
    width: 240px;
    height: 240px;
    border: 35px solid #dce6c9;
    border-radius: 50%;
    position: absolute;
    right: -100px;
    top: -150px;
    pointer-events: none;
}

.banner-symbol {
    width: 52px;
    height: 52px;
    background: #dce8c6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
}

.banner-symbol .icon {
    width: 25px;
    height: 25px;
}

.banner h2 {
    font-size: 19px;
}

.banner p {
    font-size: 12px;
    color: #73816a;
    margin: 6px 0 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 17px;
    margin: 24px 0;
}

.stat {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 21px 22px;
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #788279;
    font-size: 11px;
}

.stat-icon {
    height: 30px;
    width: 30px;
    background: #f3f5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}

.stat-value {
    font: 750 29px Manrope,'Segoe UI',sans-serif;
    letter-spacing: -1px;
    margin: 8px 0;
}

.stat-bottom {
    font-size: 10px;
    color: #8b948c;
}

.positive {
    color: #63864f;
}

.grid {
    display: grid;
    grid-template-columns: minmax(0,1.85fr) minmax(280px,1fr);
    gap: 22px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--link-color);
    font-weight: 600;
}

tr:last-child td {
    border-bottom: 0;
}

.record:hover {
    background: #fcfdf9;
}

.record {
    cursor: pointer;
}

.table-foot {
    padding: 13px 22px;
    border-top: 1px solid var(--line);
    font-size: 10px;
    color: #92998f;
    display: flex;
    justify-content: space-between;
}

.attention-item {
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
}

.attention-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.square {
    background: #faf1df;
    color: #ac873a;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.square.green {
    background: #eff3e6;
    color: #6a8750;
}

.square.blue {
    background: #edf2f6;
    color: #6d89a2;
}

.attention-item h3 {
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    margin: 0 0 6px;
}

.attention-item p {
    font-size: 10px;
    color: #92988f;
    line-height: 1.6;
    margin: 0 0 8px;
}

.attention-item a {
    font-size: 10px;
    color: #688055;
    font-weight: 600;
}

.chart {
    height: 150px;
    display: flex;
    align-items: flex-end;
    gap: 17px;
    padding: 15px 4px 22px;
    border-bottom: 1px solid var(--line);
}

.bar-group {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    position: relative;
}

.bar {
    flex: 1;
    background: #dde7cd;
    border-radius: 4px 4px 0 0;
}

.bar.dark {
    background: #43664c;
}

.bar-group span {
    position: absolute;
    bottom: -18px;
    text-align: center;
    width: 100%;
    font-size: 9px;
    color: #9ba393;
}

.legend {
    display: flex;
    gap: 17px;
    margin-top: 19px;
    font-size: 10px;
    color: #8a9388;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    margin-right: 6px;
    background: #dde7cd;
}

.dot.dark {
    background: #43664c;
}

.activity {
    display: flex;
    gap: 12px;
    margin-top: 19px;
    align-items: flex-start;
}

.activity p {
    font-size: 11px;
    margin: 0 0 5px;
}

.activity small {
    font-size: 9px;
}

.footer-note {
    font-size: 10px;
    color: #9da598;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.service-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 24px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.service-card .square {
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
}

.service-card p {
    font-size: 12px;
    color: var(--muted);
    margin: 10px 0 20px;
}

.service-card .card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    font-size: 10px;
    color: #88917f;
}

.wide {
    grid-column: 1/-1;
}

.scope-item {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 20px;
    margin-bottom: 15px;
}

.scope-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.scope-item p {
    font-size: 12px;
    color: var(--muted);
}

.scope-item ul {
    font-size: 12px;
    color: #6c7b68;
    line-height: 1.9;
    padding-left: 18px;
}

.document {
    max-width: 850px;
    margin: auto;
    background: white;
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px #253a3306;
    padding: 50px;
    border-radius: 4px;
}

.doc-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.doc-head img {
    width: 175px;
}

.doc-head h1 {
    font-size: 27px;
}

.document p,.document li {
    font-size: 11px;
    color: #657262;
    line-height: 1.8;
}

.document h2 {
    font-size: 15px;
    margin-top: 28px;
    margin-bottom: 15px;
}

.document td {
    padding: 15px 10px;
    font-size: 11px;
}

.document th {
    padding: 11px 10px;
}

.brand-board {
    background: #edf1e6;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 22px;
}

.brand-board img {
    width: 340px;
    max-width: 90%;
}

.swatches {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.swatch {
    height: 90px;
    flex: 1;
    min-width: 100px;
    border-radius: 8px;
    padding: 15px;
    font-size: 11px;
    display: flex;
    align-items: flex-end;
}

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
}

.auth-art {
    background: var(--green);
    color: white;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-art:after {
    content: '';
    position: absolute;
    border: 65px solid #426348;
    width: 450px;
    height: 450px;
    right: -250px;
    top: 180px;
    transform: rotate(-30deg);
    border-radius: 50px;
    opacity: .5;
}

.auth-art .brand {
    position: relative;
    z-index: 1;
}

.auth-art h1 {
    font-size: 47px;
    max-width: 450px;
    line-height: 1.2;
}

.auth-art p {
    color: #c1cfbd;
    max-width: 350px;
}

.auth-form {
    max-width: 430px;
    width: 100%;
    margin: auto;
    padding: 40px;
}

.auth-form h1 {
    font-size: 28px;
}

.auth-form p {
    color: var(--muted);
    font-size: 12px;
}

.mobile-toggle {
    display: none;
}

.quote-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 285px;
    gap: 22px;
}

.amount {
    width: 85px;
    border: 1px solid var(--line);
    padding: 7px;
    border-radius: 4px;
}

.summary-number {
    font-size: 36px;
    font-family: Manrope,sans-serif;
    font-weight: 700;
}

@media(min-width:1500px) {
    .content {
        padding-top: var(--page-padding-top);
    }

    .stat {
        padding: 25px;
    }

    .banner {
        padding: 32px;
    }

}

@media(max-width:1150px) {
    .shell {
        grid-template-columns: 210px 1fr;
    }

    .sidebar {
        width: 210px;
        padding: 25px 15px;
    }

    .content {
        padding: var(--page-padding-top) var(--page-padding-inline) 28px;
    }

    .topbar {
        padding: 0 24px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .stats {
        gap: 12px;
    }

    .stat {
        padding: 17px;
    }

    .cards {
        grid-template-columns: 1fr 1fr;
    }

    .quote-layout {
        grid-template-columns: 1fr;
    }

    .banner p {
        max-width: 340px;
    }

}

@media(max-width:750px) {
    .shell {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 10px 0 80px #0003;
    }

    .main {
        width: 100%;
    }

    .mobile-toggle {
        display: inline-flex;
    }

    .topbar {
        height: 66px;
        padding: 0 18px;
    }

    .content {
        padding: var(--page-padding-top) var(--page-padding-inline) 25px;
    }

    .page-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    h1 {
        font-size: 26px;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .stat-value {
        font-size: 26px;
    }

    .banner {
        padding: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .banner .btn {
        margin-left: 0;
    }

    .banner h2 {
        font-size: 17px;
    }

    .banner-symbol {
        display: none;
    }

    .cards,.form-fields,.auth {
        grid-template-columns: 1fr;
    }

    .steps {
        overflow: auto;
        justify-content: flex-start;
    }

    .step {
        white-space: nowrap;
    }

    .auth-art {
        display: none;
    }

    .document {
        padding: 25px;
    }

    .doc-head {
        gap: 20px;
        flex-wrap: wrap;
    }

    .form-fields .wide {
        grid-column: auto;
    }

    .footer-note span:last-child {
        display: none;
    }

    .top-actions {
        gap: 12px;
    }

    .quote-layout {
        display: block;
    }

    .panel-head {
        padding: 18px;
    }

    .toolbar {
        padding: 16px;
    }

    .auth-form {
        margin-top: 70px;
    }

    .brand-board {
        min-height: 180px;
    }

}

@media print {
    .sidebar,.topbar,.page-head,.footer-note,.tabs,.steps,#toast,.no-print {
        display: none!important;
    }

    .shell,.main,.content {
        display: block;
        padding: 0;
        margin: 0;
        background: white;
    }

    .document {
        border: 0;
        box-shadow: none;
        max-width: none;
        padding: 20px;
    }

    .document * {
        print-color-adjust: exact;
    }

    .panel, .card {
        break-inside: avoid;
    }

    body {
        background: white;
    }

}

/* Keep nested tables inside their scroll container on narrow screens. */

.banner>div {
    position: relative;
    z-index: 1;
}

.sidebar {
    overflow-y: auto;
}

.brand {
    white-space: nowrap;
}

@media(max-width:750px) {
    .banner:after {
        opacity: .4;
    }

    .document {
        overflow-wrap: anywhere;
    }

    .document table {
        table-layout: fixed;
    }

    .document th,.document td {
        font-size: 10px;
        padding: 10px 5px;
    }

    .document th:last-child {
        width: 26%;
    }

    .document .info-row {
        gap: 10px;
    }

}

/* Application layout */

.v2-header {
    height: 64px;
    padding: 0 16px;
    background: white;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 28px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.v2-header .brand {
    font-size: 20px;
    color: #14233b;
}

.v2-header .brand img {
    width: 30px;
    height: 30px;
}

.v2-main-nav {
    display: flex;
    height: 100%;
    gap: 32px;
    align-items: center;
}

.v2-main-nav a {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 13px;
    color: #7b8596;
    font-weight: 500;
}

.v2-main-nav a.active {
    color: #14233b;
    font-weight: 700;
}

.v2-main-nav a.active:after {
    content: '';
    height: 3px;
    background: var(--accent);
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    border-radius: 3px 3px 0 0;
}

.v2-header-right {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center;
}

.v2-divider {
    width: 1px;
    height: 22px;
    background: var(--line);
}

.v2-rail {
    position: fixed;
    left: 0;
    top: 88px;
    bottom: 0;
    width: 82px;
    background: #14233b;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 0;
}

.v2-rail a {
    color: #8e9fb6;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.v2-rail a:hover,.v2-rail a.active {
    background: #2a3952;
    color: white;
}

.v2-rail a:first-child {
    background: var(--accent);
    color: white;
}

.v2-rail .rail-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-main {
    margin-left: 82px;
    min-width: 0;
}

.v2-context {
    height: 57px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: #fafbfc;
    color: #7b8798;
    font-size: 11px;
}

.v2-context a {
    color: #53647c;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.v2-context .icon {
    height: 14px;
    width: 14px;
}

.v2-business {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
}

.v2-business .business-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.content {
    padding: var(--page-padding-top) var(--page-padding-inline) 34px;
    max-width: 1510px;
}

.eyebrow {
    color: #8b96a7;
    letter-spacing: 1.7px;
}

.record:hover {
    background: #f8faff;
}

.table-foot {
    color: #939eae;
}

.v2-greeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
}

.v2-greeting h1 {
    font-size: 31px;
    margin-bottom: 8px;
}

.v2-greeting p {
    font-size: 12px;
    color: #8390a0;
    margin: 0;
}

.v2-feature-grid {
    display: grid;
    grid-template-columns: minmax(0,1.75fr) minmax(310px,1fr);
    gap: 23px;
    margin-bottom: 24px;
}

.v2-hero {
    position: relative;
    overflow: hidden;
    background: #14233b;
    min-height: 270px;
    border-radius: 12px;
    padding: 33px 36px;
    color: white;
}

.v2-hero .eyebrow {
    color: #d3ad9b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 17px;
}

.v2-hero h2 {
    font-size: 35px;
    letter-spacing: -1.3px;
    line-height: 1.18;
    font-weight: 650;
    position: relative;
    z-index: 1;
}

.v2-hero p {
    color: #a9b6ca;
    font-size: 12px;
    max-width: 270px;
    position: relative;
    z-index: 1;
    line-height: 1.8;
}

.blueprint {
    position: absolute;
    right: -16px;
    bottom: -8px;
    width: 48%;
    height: 95%;
    opacity: .8;
}

.v2-queue {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 23px 25px;
}

.v2-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.v2-queue-head h2 {
    font-size: 16px;
}

.v2-queue .attention-item {
    padding: 15px 0;
    border-color: #edf0f5;
    align-items: center;
}

.v2-queue .attention-item h3 {
    font-size: 11px;
    margin-bottom: 5px;
}

.v2-queue .attention-item p {
    font-size: 10px;
    margin: 0;
}

.v2-queue .attention-item>a {
    margin-left: auto;
    color: #9ba7b8;
}

.square,.square.green,.square.blue {
    background: #f2f5fa;
    color: #6781a6;
    border-radius: 9px;
}

.square.orange {
    background: #fff0e8;
    color: #a86c52;
}

.square.violet {
    background: #f2edfb;
    color: #9b82bf;
}

.v2-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border: 1px solid var(--line);
    border-radius: 11px;
    background: white;
    margin-bottom: 27px;
    padding: 22px 0;
}

.v2-metric {
    padding: 0 26px;
    border-right: 1px solid var(--line);
}

.v2-metric:last-child {
    border: 0;
}

.v2-metric-label {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #8591a1;
    font-size: 11px;
    margin-bottom: 12px;
}

.v2-metric-label .icon {
    width: 16px;
    height: 16px;
    color: #9aa7ba;
}

.v2-metric-value {
    display: flex;
    gap: 12px;
    align-items: center;
}

.v2-metric-value b {
    font-size: 29px;
    letter-spacing: -1px;
    font-weight: 650;
}

.metric-change {
    font-size: 9px;
    border-radius: 4px;
    padding: 3px 6px;
    color: #34896c;
    background: #ecf6f1;
}

.v2-metric p {
    font-size: 10px;
    color: #9ba5b4;
    margin: 8px 0 0;
}

.v2-lower {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(280px,1fr);
    gap: 23px;
}

.v2-lower>* {
    min-width: 0;
}

.v2-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-bottom: 25px;
}

.v2-pipeline div {
    text-align: center;
}

.v2-pipeline b {
    display: flex;
    width: 48px;
    height: 48px;
    border: 4px solid #e7edf6;
    border-top-color: #9eb5d6;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 650;
    margin: auto auto 10px;
}

.v2-pipeline div:last-of-type b {
    border-color: #ffebe2;
    border-top-color: var(--accent);
}

.v2-pipeline span {
    font-size: 9px;
    color: #8794a7;
}

.v2-pipeline>span {
    color: #bcc5d1;
    font-size: 17px;
}

.v2-note {
    padding: 12px 14px;
    background: #f7f9fc;
    border-radius: 7px;
    color: #8c98a9;
    font-size: 10px;
    line-height: 1.7;
}

.v2-note a {
    color: #a05d44;
    font-weight: 600;
}

.activity {
    margin-top: 19px;
}

.activity p {
    color: #67768c;
    font-size: 11px;
}

.cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}

.service-card {
    border-radius: 10px;
    padding: 26px 28px;
    position: relative;
    min-width: 0;
    transition: transform .15s,box-shadow .15s;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 24px #1729420a;
}

.service-card .square {
    background: #fff0e8;
    color: #a86c52;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
}

.service-card h2 {
    font-size: 19px;
}

.service-card p {
    color: #8592a4;
    max-width: 420px;
    line-height: 1.85;
}

.service-card .card-foot {
    color: #8b98a8;
    border-color: var(--line);
}

.scope-item {
    border: 1px solid #e3e9f1;
    border-left: 3px solid #bccce1;
    border-radius: 7px;
    padding: 22px;
}

.scope-top {
    margin-bottom: 12px;
}

.scope-item p {
    color: #8390a2;
}

.document {
    box-shadow: 0 8px 30px #14233b07;
    border-top: 5px solid var(--accent);
}

.document h2 {
    color: #243e62;
}

.document p {
    color: #738197;
}

.document th {
    background: #edf2fa;
    color: #506b91;
}

.footer-note {
    color: #a0aabc;
}

.brand-board {
    background: #f0f3f9;
}

.v2-brand-hero {
    padding: 36px;
    background: #14233b;
    color: white;
    border-radius: 11px;
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 24px;
}

.v2-brand-hero img {
    width: 75px;
}

.v2-brand-hero h2 {
    font-size: 28px;
    letter-spacing: -1px;
}

.v2-brand-hero p {
    color: #a1b0c5;
    font-size: 12px;
    margin: 8px 0 0;
}

.auth-art {
    background: #14233b;
}

.auth-art:after {
    border-color: var(--accent);
    opacity: .18;
    border-radius: 0;
    transform: rotate(30deg);
}

.auth-art p {
    color: #a9b9d0;
}

.auth-art h1 {
    font-weight: 650;
    font-size: 51px;
    letter-spacing: -2px;
}

.auth-form h1 {
    font-size: 29px;
}

.swatch {
    border-radius: 6px;
}

.v2-mobile-menu {
    display: none;
}

.v2-switch {
    font-size: 10px;
    color: #a56c53;
    border: 1px solid #f8d6c7;
    border-radius: 5px;
    padding: 7px 10px;
}

.v2-subtitle {
    color: #b1bed0;
    font-size: 10px;
    letter-spacing: 2px;
}

.v2-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #77889d;
    font-size: 10px;
}

.v2-status:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #54a88d;
    border-radius: 50%;
}

@media(min-width:1600px) {
    .v2-hero {
        min-height: 300px;
        padding: 40px;
    }

    .v2-hero h2 {
        font-size: 40px;
    }

    .v2-feature-grid {
        grid-template-columns: 1.8fr 1fr;
    }

}

@media(max-width:1200px) {
    .v2-header {
        gap: 30px;
        padding-inline: 22px;
    }

    .v2-main-nav {
        gap: 20px;
    }

    .v2-header-right {
        gap: 13px;
    }

    .v2-feature-grid {
        grid-template-columns: 1.5fr 1fr;
    }

    .v2-hero {
        padding: 28px;
    }

    .v2-hero h2 {
        font-size: 30px;
    }

    .v2-hero p {
        max-width: 220px;
    }

    .v2-queue {
        padding: 21px;
    }

    .v2-header-right .v2-switch {
        display: none;
    }

    .v2-lower {
        grid-template-columns: 1fr;
    }

    .v2-lower>aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .content {
        padding-inline: var(--page-padding-inline);
    }

    .v2-context {
        padding-inline: 28px;
    }

}

@media(max-width:950px) {
    .v2-header {
        gap: 20px;
        height: 60px;
    }

    .v2-header .brand {
        font-size: 20px;
    }

    .v2-header .brand img {
        height: 28px;
        width: 28px;
    }

    .v2-main-nav {
        gap: 15px;
    }

    .v2-main-nav a {
        font-size: 11px;
    }

    .v2-header-right .v2-divider,.v2-header-right .v2-owner {
        display: none;
    }

    .v2-rail {
        top: 76px;
        width: 65px;
    }

    .v2-main {
        margin-left: 65px;
    }

    .v2-feature-grid {
        grid-template-columns: 1fr;
    }

    .v2-hero {
        min-height: 255px;
    }

    .blueprint {
        right: 12px;
        width: 42%;
    }

    .v2-queue {
        padding: 22px;
    }

    .v2-queue-items {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px;
    }

    .v2-queue .attention-item {
        border: 0;
    }

    .v2-queue .attention-item>a {
        display: none;
    }

    .v2-queue .attention-item .square {
        display: none;
    }

    .v2-metric {
        padding: 0 18px;
    }

    .v2-metric-label {
        font-size: 10px;
    }

}

@media(max-width:700px) {
    .v2-header {
        height: 56px;
        padding: 0 12px;
        gap: 12px;
        position: sticky;
    }

    .v2-header .brand {
        font-size: 20px;
    }

    .v2-header .brand img {
        width: 28px;
        height: 28px;
    }

    .v2-main-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 68px;
        height: auto;
        background: white;
        padding: 18px;
        box-shadow: 0 12px 20px #14233b13;
        gap: 0;
        border-top: 1px solid var(--line);
    }

    .v2-main-nav.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .v2-main-nav a {
        padding: 15px;
        font-size: 13px;
    }

    .v2-main-nav a.active {
        background: #f4f6fa;
        border-radius: 5px;
    }

    .v2-main-nav a.active:after {
        display: none;
    }

    .v2-mobile-menu {
        display: inline-flex;
    }

    .v2-header-right {
        gap: 14px;
    }

    .v2-header-right .notification {
        display: none;
    }

    .v2-rail {
        display: none;
    }

    .v2-main {
        margin: 0;
    }

    .v2-context {
        padding: 0 18px;
        height: 49px;
        font-size: 10px;
    }

    .v2-context .v2-status {
        display: none;
    }

    .content {
        padding: var(--page-padding-top) var(--page-padding-inline) 25px;
    }

    .v2-greeting {
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
    }

    .v2-greeting h1 {
        font-size: 27px;
    }

    .v2-greeting .actions>span {
        display: none;
    }

    .v2-hero {
        padding: 27px 24px;
        min-height: 284px;
    }

    .v2-hero h2 {
        font-size: 32px;
    }

    .v2-hero p {
        max-width: 205px;
    }

    .blueprint {
        width: 47%;
        right: -34px;
        opacity: .45;
    }

    .v2-queue-items {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .v2-queue .attention-item {
        border-bottom: 1px solid var(--line);
    }

    .v2-queue .attention-item .square {
        display: flex;
    }

    .v2-queue .attention-item>a {
        display: block;
    }

    .v2-metrics {
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

    .v2-metric {
        padding: 20px;
    }

    .v2-metric:nth-child(2) {
        border-right: 0;
    }

    .v2-metric:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .v2-lower>aside {
        display: block;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .v2-brand-hero {
        padding: 26px;
        align-items: flex-start;
        gap: 15px;
    }

    .v2-brand-hero img {
        width: 45px;
    }

    .v2-brand-hero h2 {
        font-size: 22px;
    }

    .v2-brand-hero p {
        font-size: 11px;
    }

    .page-head h1 {
        font-size: 28px;
    }

    .v2-context .v2-switch {
        font-size: 9px;
        padding: 6px 8px;
    }

    .document {
        padding: 21px;
    }

    .v2-subtitle {
        font-size: 9px;
    }

}

@media print {
    .v2-header,.v2-rail,.v2-context {
        display: none!important;
    }

    .v2-main {
        margin: 0;
    }

    .document {
        border-top: 0;
    }

    .content {
        padding: 0;
    }

}

/* Keep status chips compact in service-card flex rows. */

.v2-rail .rail-bottom a:first-child {
    background: transparent;
    color: #8e9fb6;
}

.v2-rail .rail-bottom a.active {
    background: #2a3952;
    color: white;
}

/* Navigation and workspace scrolling */

/* Shared workspace layout: labelled navigation, approved navy and muted terracotta. */

.skip-link {
    position: fixed;
    top: -60px;
    left: 18px;
    padding: 13px 20px;
    background: #14233b;
    color: white;
    border-radius: 0 0 7px 7px;
    z-index: 1000;
    font-size: 13px;
}

.skip-link:focus {
    top: 0;
}

#main-content:focus {
    outline: none;
}

.workspace-breadcrumbs {
    min-width: 0;
    margin-bottom: 10px;
}

.workspace-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #788ca7;
}

.workspace-breadcrumbs li {
    display: flex;
    align-items: center;
    min-width: 0;
}

.workspace-breadcrumbs li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: var(--ink);
}

.workspace-breadcrumbs a,
.workspace-breadcrumbs span {
    white-space: nowrap;
}

.workspace-breadcrumbs a {
    color: var(--link-color);
}

.workspace-breadcrumbs a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.workspace-breadcrumbs li+li:before {
    content: '/';
    margin-right: 10px;
    color: #adbccd;
}

.public-wrapper {
    min-height: 100vh;
}

.workspace-page>.v2-main {
    margin-left: 248px;
}

.workspace-sidebar {
    width: 248px;
    padding: 26px 17px 17px;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #45556c #14233b;
}

.workspace-sidebar a,.workspace-sidebar a:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 43px;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    color: #aebdd1;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.4;
}

.workspace-sidebar a:hover {
    background: #20314c;
    color: #f0f3f8;
}

.workspace-sidebar a.active {
    background: #2a3c56;
    color: #f4f6fa;
    box-shadow: inset 3px 0 var(--accent);
}

.workspace-sidebar a .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.workspace-sidebar a:focus-visible {
    outline: 2px solid #d5a18c;
    outline-offset: 3px;
}

.workspace-sidebar a.workspace-new-request {
    background: var(--accent);
    color: #fff;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    min-height: 0;
    padding: 6px 12px;
    margin-bottom: 29px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.workspace-sidebar .workspace-new-request:hover {
    background: #9b583f;
}

.workspace-nav-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.workspace-nav-heading {
    color: #7f93ae;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 0 14px;
    margin: 0 0 10px;
}

.workspace-configuration {
    border-top: 1px solid #2b3a50;
    padding-top: 8px;
    margin-top: 10px;
}

.workspace-nav-bottom {
    margin-top: auto;
    padding-top: 35px;
}

.workspace-nav-bottom a {
    font-size: 11px;
    color: #94a8c3;
}

.workspace-nav-backdrop {
    display: none;
}

.workspace-page .v2-mobile-menu {
    display: none;
}

@media(max-width:950px) {
    .workspace-sidebar {
        top: 76px;
    }

    .workspace-page .v2-owner {
        display: block;
    }

    .workspace-page .v2-header-right .v2-divider {
        display: block;
    }

}

@media(max-width:900px) {
    .workspace-page>.v2-main {
        margin-left: 0;
    }

    .workspace-page .v2-mobile-menu {
        display: inline-flex;
    }

    .workspace-sidebar {
        display: flex;
        width: 260px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 50;
        box-shadow: none;
    }

    .workspace-sidebar.open {
        transform: translateX(0);
        box-shadow: 14px 0 40px #101b3033;
    }

    .workspace-navigation-open {
        overflow: hidden;
    }

    .workspace-navigation-open>.workspace-nav-backdrop {
        display: block;
        position: fixed;
        inset: 76px 0 0;
        border: 0;
        background: #14233b66;
        z-index: 45;
    }

    .workspace-page .v2-header {
        z-index: 60;
    }

}

@media(max-width:700px) {
    .workspace-sidebar {
        top: 68px;
    }

    .workspace-navigation-open>.workspace-nav-backdrop {
        top: 68px;
    }

    .workspace-page .v2-owner {
        display: none;
    }

    .workspace-page .v2-header-right .v2-divider {
        display: none;
    }

}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior: auto!important;
        transition: none!important;
    }

}

@media print {
    .skip-link,.workspace-sidebar,.workspace-nav-backdrop {
        display: none!important;
    }

    .workspace-page>.v2-main {
        margin-left: 0;
    }

}

/* Buttons and button-like links share a content-sized, non-shrinking box. */

.workspace-sidebar>.workspace-new-request {
    flex: 0 0 auto;
    min-height: 34px;
    gap: 7px;
}

.workspace-sidebar>.workspace-nav-group {
    flex: 0 0 auto;
}

.workspace-sidebar .workspace-new-request span {
    white-space: normal;
}

/* Each workspace pane owns its scrolling; the document and header stay still. */

.workspace-page[data-server-shell="true"] {
    --workspace-header-height: 64px;
    height: 100dvh;
    overflow: hidden;
}

.workspace-page[data-server-shell="true"]>.v2-header {
    height: var(--workspace-header-height);
}

.workspace-page[data-server-shell="true"]:not([data-workspace-route="sign-in"])>.v2-main {
    height: calc(100dvh - var(--workspace-header-height));
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.workspace-page .workspace-sidebar {
    top: var(--workspace-header-height,88px);
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.workspace-page>.v2-main::-webkit-scrollbar,.workspace-page .workspace-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.workspace-page.workspace-navigation-open>.v2-main {
    overflow-y: hidden;
}

.workspace-page[data-workspace-route="sign-in"] {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
}

@media(max-width:950px) {
    .workspace-page[data-server-shell="true"] {
        --workspace-header-height: 60px;
    }

}

@media(max-width:700px) {
    .workspace-page[data-server-shell="true"] {
        --workspace-header-height: 56px;
    }

}

@media print {
    .workspace-page[data-server-shell="true"] {
        height: auto;
        overflow: visible;
    }

    .workspace-page[data-server-shell="true"]:not([data-workspace-route="sign-in"])>.v2-main {
        height: auto;
        overflow: visible;
        margin: 0;
    }

}

/* Anchor off-screen accessibility labels to their clipped table container. */

.workspace-sidebar .workspace-nav-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 43px;
    font-size: 12px;
    line-height: 1.4;
    color: #94a6bf;
    cursor: default;
}

.workspace-nav-pending>.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Keep each Font Awesome icon aligned beside its navigation label. */

.workspace-sidebar a > .fa-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    text-align: center;
}

.workspace-config-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #c5d0df;
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    border-radius: 7px;
}

.workspace-config-dropdown > summary::-webkit-details-marker {
    display: none;
}

.workspace-config-dropdown > summary:hover {
    background: #20314c;
    color: #fff;
}

.workspace-config-dropdown > summary:focus-visible {
    outline: 2px solid #d5a18c;
    outline-offset: 2px;
}

.workspace-config-dropdown > summary > .fa-solid {
    width: 18px;
    text-align: center;
}

.workspace-config-dropdown .configuration-chevron {
    margin-left: auto;
    font-size: 10px;
}

.workspace-config-dropdown[open] .configuration-chevron {
    transform: rotate(180deg);
}

.workspace-config-items {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    padding-left: 12px;
    border-left: 1px solid #2b3a50;
}

/* Work registers and forms */

.requests-page {
    display: grid;
    gap: 24px;
    color: var(--ink);
}

.requests-page > *, .request-detail-grid > * {
    min-width: 0;
}

.request-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.request-summary-card {
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    border: 1px solid var(--line);
    background: white;
    border-radius: 10px;
    color: var(--ink);
    transition: border-color .15s;
}

.request-summary-card:hover {
    border-color: #b98c78;
}

.request-summary-card.selected {
    border-color: #c8a08e;
    box-shadow: inset 0 3px var(--accent);
}

.record-link {
    color: var(--link-color);
    font-weight: 600;
}

.record-id {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.record-link .fa-arrow-up-right-from-square {
    margin-left: 6px;
    color: inherit;
    font-size: 10px;
}

.record-link:hover {
    color: var(--link-hover-color);
}

.record-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.table-period {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0 var(--card-padding) 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.summary-label {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #5c6d83;
}

.request-summary-card strong {
    display: block;
    font-size: 30px;
    font-weight: 650;
    line-height: 1.2;
    margin-top: 9px;
}

.requests-panel {
    margin: 0;
    overflow: hidden;
}

.requests-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

.requests-page h2 {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.4;
    margin: 0 0 5px;
    letter-spacing: -.2px;
}

.requests-panel-heading p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.request-tabs {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.request-tabs::-webkit-scrollbar {
    display: none;
}

.request-tabs a {
    position: relative;
    flex: 0 0 auto;
    padding: 4px 0 16px;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.request-tabs a.active {
    color: var(--ink);
    font-weight: 600;
}

.request-tabs a.active::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--accent);
}

.request-tabs span {
    padding: 2px 5px;
    background: #f0f3f8;
    border-radius: 4px;
    font-size: 11px;
    color: var(--muted);
}

.form-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.request-clear {
    font-size: 12px;
    color: #935139;
}

.requests-table-wrap {
    overflow-x: auto;
}

.requests-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.requests-table th {
    padding: var(--table-cell-padding);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    color: #617188;
    text-align: left;
}

.requests-table td {
    padding: var(--table-cell-padding);
    font-size: 13px;
    vertical-align: middle;
}

.requests-table th:nth-child(2) {
    width: 42%;
}

.requests-table strong {
    display: block;
    font-size: 13px;
    color: #233b58;
    font-weight: 600;
    line-height: 1.5;
}

.requests-table small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
    line-height: 1.5;
}

.requests-table small span {
    color: #8290a1;
}

.request-category, .request-date {
    color: var(--muted);
    white-space: nowrap;
}

.requests-table tbody tr:hover {
    background: #f8faff;
}

.request-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    border-radius: 6px;
    color: var(--muted);
}

.request-open:hover {
    background: #edf2f8;
    color: var(--ink);
}

.request-open .icon {
    width: 16px;
    height: 16px;
}

.requests-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 24px;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.request-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
}

.request-empty {
    padding: 40px 20px;
    text-align: center;
}

.request-empty > .icon {
    width: 28px;
    height: 28px;
    color: #8c9bb0;
}

.request-empty h3 {
    font-size: 16px;
    margin: 16px 0 8px;
}

.request-empty p {
    color: var(--muted);
    margin: 0 0 18px;
    line-height: 1.6;
}

.request-back {
    color: var(--muted);
    font-size: 13px;
    justify-self: start;
}

.request-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
    gap: 24px;
    align-items: start;
}

.request-detail-panel {
    padding: var(--card-padding);
    margin: 0;
}

.request-detail-panel > p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.request-detail-panel .request-description {
    white-space: pre-wrap;
    margin: 20px 0 28px;
}

.request-detail-panel dl {
    margin: 0;
}

.request-detail-panel dl > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.request-detail-panel dt {
    color: var(--muted);
}

.request-detail-panel dd {
    margin: 0;
    text-align: right;
}

.request-detail-panel h3 {
    font-size: 14px;
}

.request-detail-panel hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0;
}

.form-panel h2 {
    margin-bottom: 22px;
}

.form-panel h2:not(:first-child) {
    margin-top: 26px;
}

.form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.form-wide {
    grid-column: 1 / -1;
}

.form-help-panel {
    align-self: start;
}

.form-help-panel h2 {
    font-size: 15px;
    color: #3e5877;
    margin-bottom: 12px;
}

.form-help-panel ul {
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.9;
    margin: 16px 0;
}

.requests-page a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 1150px) {
    .request-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

}

@media (max-width: 600px) {
    .requests-page {
        gap: 20px;
    }

    .page-head {
        gap: 18px;
    }

    .page-head h1 {
        font-size: 25px;
    }

    .request-summary {
        gap: 12px;
    }

    .request-summary-card {
        padding: 18px 14px;
        gap: 10px;
        flex-direction: column;
    }

    .summary-label {
        font-size: 12px;
    }

    .request-summary-card strong {
        font-size: 27px;
    }

    .requests-panel-heading, .form-filters, .requests-table-footer {
        padding: 18px;
    }

    .request-tabs {
        padding: 0 18px;
        gap: 20px;
    }

    .requests-table-footer {
        align-items: flex-start;
    }

    .request-pagination {
        width: 100%;
        justify-content: space-between;
    }

    .request-workflow-note {
        padding: 16px;
    }

    .request-detail-panel {
        padding: var(--card-padding);
    }

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

    .form-filter {
        flex: 1 1 130px;
        flex-wrap: wrap;
    }

    .form-filter .form-control {
        width: 100%;
        max-width: none;
    }

}

/* Dashboard layout */

.db-hero {
    min-height: 258px;
}

.db-hero h2 {
    font-size: 32px;
}

.db-hero p {
    max-width: 305px;
}

.db-hero .blueprint {
    width: 43%;
}

.dashboard-hero-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(100px, 13vw, 190px);
    color: #8da5c6;
    opacity: .18;
    pointer-events: none;
}

.db-next {
    margin-left: auto;
    color: #8394ab;
}

.v2-queue a.attention-item:hover h3 {
    color: var(--accent);
}

.db-analytics {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,1fr);
    gap: 23px;
}

.db-analytics>* {
    min-width: 0;
}

.dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.dashboard-toolbar h2 {
    margin: 0 0 3px;
    font-size: 16px;
}

.dashboard-toolbar p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-toolbar .actions {
    flex-wrap: wrap;
}

.dashboard-chart-frame {
    position: relative;
    height: 260px;
    min-width: 0;
}

.dashboard-chart-frame-doughnut {
    height: 200px;
}

.dashboard-chart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

.dashboard-chart-summary strong {
    color: var(--ink);
    font-size: 15px;
}

.dashboard-chart-legend {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dashboard-chart-legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-chart-legend strong {
    margin-left: auto;
    color: var(--ink);
}

.dashboard-legend-dot.colour-0 { background-color: #637d9d; }
.dashboard-legend-dot.colour-1 { background-color: #aa6248; }
.dashboard-legend-dot.colour-2 { background-color: #839a8e; }
.dashboard-legend-dot.colour-3 { background-color: #a394b6; }
.dashboard-legend-dot.colour-4 { background-color: #a5b6c7; }
.dashboard-legend-dot.colour-5 { background-color: #cbd5e1; }

.dashboard-legend-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.dashboard-attention .attention-item {
    align-items: center;
    gap: 12px;
    padding: 14px 0;
}

.dashboard-attention .attention-item:first-child {
    padding-top: 0;
}

.dashboard-attention .attention-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-attention .attention-item > div {
    min-width: 0;
}

.dashboard-attention h3 {
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-attention .attention-item p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.db-chart {
    height: 155px;
    display: flex;
    gap: 20px;
    align-items: stretch;
    padding: 24px 10px 0;
    margin-bottom: 12px;
}

.db-chart-day {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.db-chart-bars {
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 7px;
    border-bottom: 1px solid #e6ebf1;
}

.db-chart-bar {
    width: 25px;
    max-width: 40%;
    background: #c8d5e4;
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 2px;
}

.db-chart-bar.approved {
    background: #657f9d;
}

.db-chart-bar i {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    font-size: 10px;
    color: #73859e;
    font-style: normal;
}

.db-chart-day small {
    display: block;
    font-size: 10px;
    margin-top: 9px;
    color: #8997ab;
}

.db-chart-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 27px;
    color: #8492a7;
    font-size: 10px;
}

.db-chart-footer>span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-chart-footer i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #c8d5e4;
}

.db-chart-footer i.approved {
    background: #657f9d;
}

.db-chart-footer b {
    margin-left: auto;
    font-weight: 400;
}

.db-chart-footer strong {
    color: #3b526f;
    margin-left: 7px;
    font-size: 13px;
}

.db-category {
    margin-top: 16px;
}

.db-category:first-child {
    margin-top: 3px;
}

.db-category>div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11px;
    color: #62758f;
}

.db-category b {
    font-size: 10px;
    font-weight: 400;
    color: #94a0b0;
}

.db-progress {
    background: #f0f3f7;
    height: 5px;
    border-radius: 4px;
    overflow: hidden;
}

.db-progress span {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.db-tabs {
    display: flex;
    gap: 23px;
}

.db-tabs :is(button,a) {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 8px 0;
    color: #8a98ad;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.db-tabs :is(button,a).active {
    color: #1b304e;
    box-shadow: 0 2px 0 var(--accent);
}

.db-tabs span {
    font-weight: 400;
    font-size: 10px;
    background: #f0f3f7;
    color: #8495ab;
    padding: 3px 6px;
    border-radius: 4px;
}

.db-help-text {
    color: #7f90a6;
    font-size: 12px;
    line-height: 1.9;
}

.db-empty {
    color: #8293aa;
    font-size: 12px;
    padding: 15px 0;
}

.activity:hover b {
    color: var(--accent);
}

.db-tabs :is(button,a):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

@media(max-width:1100px) {
    .db-analytics {
        grid-template-columns: 1.4fr 1fr;
    }

    .db-chart {
        gap: 10px;
    }

    .db-tabs {
        gap: 16px;
    }

}

@media(max-width:850px) {
    .db-analytics {
        grid-template-columns: 1fr;
    }

    .db-category-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 25px;
    }

    .db-category {
        margin: 0;
    }

    .db-category:first-child {
        margin: 0;
    }

    .db-hero p {
        max-width: 290px;
    }

}

@media(max-width:550px) {
    .db-hero h2 {
        font-size: 29px;
    }

    .db-hero .blueprint {
        width: 43%;
    }

    .db-category-list {
        display: block;
    }

    .db-category {
        margin-top: 17px;
    }

    .db-chart {
        gap: 8px;
        padding-inline: 0;
    }

    .db-chart-bars {
        gap: 4px;
    }

    .db-chart-footer {
        flex-wrap: wrap;
        gap: 12px;
    }

    .db-chart-footer b {
        width: 100%;
        margin: 0;
    }

    .db-tabs {
        gap: 16px;
    }

    .db-tabs :is(button,a) {
        font-size: 12px;
    }

    .v2-lower .panel-head:has(.db-tabs) {
        flex-wrap: wrap;
        gap: 15px;
    }

    .db-hero p {
        max-width: 210px;
        font-size: 11px;
    }

}

.dashboard-accent {
    color: var(--accent);
}

.db-tabs a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #8a98ad;
}

.db-tabs a.active {
    color: #1b304e;
    box-shadow: 0 2px 0 var(--accent);
}

#dashboard-records td:nth-child(4) {
    white-space: nowrap;
}

#dashboard-records tbody tr:hover {
    background: #f8faff;
}

@media(max-width:550px) {

    .db-tabs a {
        font-size: 12px;
    }

}

/* Native overview: consistent type, clear grouping and comfortable spacing. */

.dashboard-page {
    display: grid;
    gap: 24px;
    color: var(--ink);
}

.dashboard-page > * {
    min-width: 0;
}

.dashboard-page .v2-greeting {
    margin: 0;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.dashboard-page .v2-greeting h1 {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -.7px;
    margin: 8px 0;
}

.dashboard-page .eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--muted);
}

.dashboard-page .v2-greeting p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.dashboard-page .v2-metrics {
    margin: 0;
    padding: 24px 0;
}

.dashboard-page .v2-metric {
    padding: 0 22px;
}

.dashboard-page .v2-metric-label {
    font-size: 13px;
    color: #52637a;
    margin-bottom: 14px;
}

.dashboard-page .v2-metric-value b {
    font-size: 32px;
    line-height: 1.1;
}

.dashboard-page .v2-metric p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 10px;
}

.dashboard-page .v2-lower {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.dashboard-record-column, .dashboard-page .v2-lower > aside {
    display: grid;
    gap: 24px;
}

.dashboard-page .db-tabs {
    gap: 22px;
}

.dashboard-page .db-tabs a {
    font-size: 14px;
    color: var(--muted);
    padding: 5px 0 12px;
}

.dashboard-page .db-tabs a.active {
    color: var(--ink);
}

.dashboard-page .db-tabs span {
    font-size: 11px;
    color: #52637a;
}

.dashboard-page #dashboard-records table {
    width: 100%;
    min-width: 540px;
}

.dashboard-page #dashboard-records th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #617188;
    padding: 13px 18px;
}

.dashboard-page #dashboard-records td {
    font-size: 13px;
    padding: 17px 18px;
    vertical-align: middle;
}

.dashboard-page #dashboard-records strong {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    color: #233b58;
}

.dashboard-page #dashboard-records small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 4px;
}

.dashboard-page .table-foot {
    font-size: 12px;
    padding: 16px 20px;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
}

.dashboard-page .v2-queue {
    padding: 20px 22px;
}

.dashboard-page .v2-queue-head {
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.dashboard-page .v2-queue-items {
    display: block;
}

.dashboard-page .v2-queue .attention-item {
    gap: 12px;
    padding: 17px 0;
}

.dashboard-page .v2-queue .attention-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-page .v2-queue .attention-item .square {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.dashboard-page .v2-queue .attention-item h3 {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.dashboard-page .v2-queue .attention-item p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.dashboard-page .db-next {
    display: none;
}

.dashboard-page .activity {
    margin-top: 0;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
    gap: 12px;
    align-items: flex-start;
}

.dashboard-page .activity:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-page .activity p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    color: var(--muted);
}

.dashboard-page .activity p b {
    font-size: 13px;
    font-weight: 600;
    color: #233b58;
}

.dashboard-page .activity small {
    font-size: 11px;
    color: var(--muted);
    display: block;
    margin-top: 5px;
}

.dashboard-page .db-help-text {
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 16px;
    color: var(--muted);
}

.dashboard-page .v2-pipeline {
    padding-top: 0;
    margin-bottom: 20px;
}

.dashboard-page .v2-pipeline span {
    font-size: 12px;
    color: #52637a;
}

.dashboard-page .v2-note {
    font-size: 12px;
    color: var(--muted);
    padding: 14px;
}

.dashboard-page .db-analytics {
    gap: 24px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.dashboard-page .db-category > div:first-child {
    font-size: 13px;
    color: #52637a;
}

.dashboard-page .db-category b {
    font-size: 12px;
    color: var(--muted);
}

.dashboard-page .db-category {
    margin-top: 20px;
}

.dashboard-page .db-progress {
    height: 6px;
}

.dashboard-page .db-chart-day small, .dashboard-page .db-chart-bar i, .dashboard-page .db-chart-footer {
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 1250px) {
    .dashboard-page .v2-lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-page .v2-lower > aside {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .dashboard-page .v2-lower > aside > :last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 700px) {
    .dashboard-page {
        gap: 20px;
    }

    .dashboard-page .v2-greeting h1 {
        font-size: 25px;
    }

    .dashboard-page .v2-metrics {
        padding: 0;
    }

    .dashboard-page .v2-metric {
        padding: 20px 16px;
    }

    .dashboard-page .v2-metric-label {
        font-size: 12px;
        gap: 7px;
        align-items: flex-start;
    }

    .dashboard-page .v2-metric-label .icon {
        flex-shrink: 0;
    }

    .dashboard-page .v2-metric p {
        font-size: 11px;
    }

    .dashboard-page .v2-lower > aside, .dashboard-page .db-analytics {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-page .panel-head, .dashboard-page .v2-queue {
        padding: 18px;
    }

    .dashboard-page .panel-body {
        padding: 0 18px 18px;
    }

    .dashboard-page .db-tabs {
        gap: 20px;
    }

    .dashboard-page .db-tabs a {
        font-size: 13px;
    }

    .dashboard-page .db-category-list {
        display: block;
    }

}

/* Service catalogue layout */

.catalogue-filter-panel .request-tabs {
    padding-top: 20px;
}

.catalogue-filter-panel .form-filters {
    border-bottom: 0;
}

.catalogue-results-heading, .catalogue-card-top, .catalogue-card-footer, .catalogue-section-heading, .catalogue-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.catalogue-actions, .catalogue-section-heading {
    flex-wrap: wrap;
}

.catalogue-results-heading h2 {
    margin: 0;
}

.catalogue-results-heading > span {
    font-size: 12px;
    color: var(--muted);
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.catalogue-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 24px;
}

.catalogue-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #f8eee8;
    color: var(--accent);
    border-radius: 10px;
}

.catalogue-service-icon .icon {
    width: 22px;
    height: 22px;
}

.catalogue-service-code {
    margin: 20px 0 8px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.catalogue-card h2 {
    font-size: 18px;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.catalogue-card h2 a:hover {
    color: var(--link-hover-color);
}

.catalogue-service-description {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.catalogue-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.catalogue-card-tags span {
    background: #f2f5f9;
    color: #61748f;
    font-size: 11px;
    line-height: 1.5;
    padding: 4px 8px;
    border-radius: 5px;
}

.catalogue-card-tags .catalogue-assessment-tag {
    background: #f8eee8;
    color: #985b44;
}

.catalogue-card-footer {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: auto;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.catalogue-card-footer a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #985b44;
    font-weight: 600;
}

.catalogue-card-footer .icon {
    width: 14px;
    height: 14px;
}

.catalogue-detail-grid, .catalogue-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
    align-items: start;
    gap: 24px;
}

.catalogue-editor {
    margin: 0;
}

.catalogue-column {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.catalogue-detail-grid > *, .catalogue-editor > * {
    min-width: 0;
}

.catalogue-copy {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.catalogue-muted, .catalogue-section-heading p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.catalogue-section-heading p {
    margin: 5px 0 0;
}

.catalogue-scope-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.catalogue-scope-columns > * {
    min-width: 0;
}

.catalogue-list {
    padding-left: 18px;
    margin: 16px 0 0;
    color: #52637a;
    font-size: 13px;
    line-height: 1.8;
}

.catalogue-list li {
    padding-left: 3px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.catalogue-numbered-list {
    list-style: none;
    counter-reset: catalogue-step;
    padding: 0;
    margin: 20px 0 0;
}

.catalogue-numbered-list li {
    counter-increment: catalogue-step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding: 16px 0;
    color: #52637a;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.catalogue-numbered-list li::before {
    content: counter(catalogue-step, decimal-leading-zero);
    color: #8a6a5c;
    background: #f8eee8;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    flex-shrink: 0;
}

.catalogue-numbered-list li:last-child {
    padding-bottom: 0;
}

.catalogue-dependency {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.6;
}

.catalogue-dependency strong {
    display: block;
    font-weight: 600;
}

.catalogue-dependency small {
    display: block;
    color: var(--muted);
    margin-top: 5px;
    font-size: 11px;
}

.catalogue-dependency .icon {
    margin-left: auto;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.catalogue-dependency-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.catalogue-availability-form {
    margin: 18px 0 0;
}

@media (max-width: 1150px) {
    .catalogue-detail-grid, .catalogue-editor {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 700px) {
    .catalogue-grid, .catalogue-scope-columns, .catalogue-dependency-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalogue-card {
        padding: 22px 18px;
    }

    .catalogue-actions {
        justify-content: flex-start;
    }

    .catalogue-filter-panel .request-tabs {
        padding-top: 18px;
    }

}

/* Customer layouts */

.customer-table th:nth-child(2) {
    width: 30%;
}

.customer-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #eaf0f8;
    color: #526b8b;
    font-size: 12px;
    font-weight: 600;
}

.customer-email {
    color: #526b8b;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.customer-muted {
    color: var(--muted);
    font-size: 12px;
}

.customer-profile-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.customer-profile-heading > div {
    min-width: 0;
}

.customer-profile-heading h1 {
    overflow-wrap: anywhere;
}

.customer-avatar-large {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 20px;
    border-radius: 14px;
}

.customer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-profile-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.customer-column {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.customer-contact-panel dl > div {
    display: block;
    padding: 18px 0;
}

.customer-contact-panel dl > div:first-child {
    border-top: 0;
}

.customer-contact-panel dd {
    text-align: left;
    margin-top: 8px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.customer-contact-panel a {
    color: var(--link-color);
}

.customer-work-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    padding: 24px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
}

.customer-work-summary > div {
    padding: 0 22px;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.customer-work-summary > div:last-child {
    border-right: 0;
}

.customer-work-summary span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    display: block;
}

.customer-work-summary strong {
    display: block;
    margin-top: 12px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.customer-history-table {
    min-width: 600px;
}

.customer-history-table th:nth-child(2) {
    width: 47%;
}

.customer-money {
    font-weight: 600;
    white-space: nowrap;
}

.customer-notes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
    .customer-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-profile-grid > aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {
    .customer-profile-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .customer-avatar-large {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 15px;
    }

    .customer-profile-grid > aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-work-summary {
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }

    .customer-work-summary > div {
        padding: 20px 18px;
    }

    .customer-work-summary > div:nth-child(2) {
        border-right: 0;
    }

    .customer-work-summary > div:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
    }

}

/* Quotation layouts and print output */

.quotation-value-card strong {
    font-size: 25px;
    white-space: nowrap;
}

.quotation-table {
    min-width: 860px;
}

.quotation-table th:nth-child(2) {
    width: 38%;
}

.quotation-amount {
    color: #233b58;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.quotation-actions, .quotation-overview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.quotation-detail-grid, .quotation-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

.quotation-total {
    margin: 26px 0;
    font-size: 36px;
    font-weight: 650;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.quotation-total span {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
}

.quotation-copy {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.quotation-status-note h2 {
    margin-bottom: 10px;
    color: #3e5877;
    font-size: 15px;
}

.quotation-lines-wrap {
    overflow-x: auto;
}

.quotation-lines {
    width: 100%;
    min-width: 510px;
    border-collapse: collapse;
}

.quotation-lines th {
    padding: 14px 22px;
    text-align: left;
    font-size: 11px;
    color: #617188;
}

.quotation-lines td {
    padding: 18px 22px;
    font-size: 13px;
    line-height: 1.7;
    vertical-align: top;
}

.quotation-lines th:first-child {
    width: 50%;
}

.quotation-lines :is(th, td):not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.quotation-lines td:first-child {
    overflow-wrap: anywhere;
}

.quotation-lines td:nth-child(n + 2) {
    white-space: nowrap;
}

.quotation-lines tfoot th, .quotation-lines tfoot td {
    padding-top: 18px;
    padding-bottom: 18px;
    background: #f7f9fc;
    color: #233b58;
    font-size: 14px;
    font-weight: 650;
    border-top: 1px solid #e5eaf0;
}

.quotation-editor {
    margin: 0;
}

.quotation-editor.quotation-upsert {
    grid-template-columns: minmax(0, 1fr);
}

.quotation-upsert .quotation-column {
    display: grid;
    gap: 24px;
}

.quotation-editor > * {
    min-width: 0;
}

.quotation-overview-heading p {
    color: var(--muted);
    font-size: 12px;
    margin: 5px 0 0;
}

.quotation-edit-lines {
    margin-top: 24px;
    display: grid;
    gap: 20px;
}

.quotation-edit-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, .25fr) minmax(100px, .3fr);
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5eaf0;
}

.quotation-edit-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.quotation-remove {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: #98543d;
    cursor: pointer;
    font-size: 12px;
}

.quotation-saved-total {
    margin-top: 20px !important;
}

.quotation-saved-total strong {
    display: block;
    font-size: 22px;
    color: #233b58;
    margin-top: 5px;
}

.quotation-document {
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 44px;
    border: 1px solid #e5eaf0;
    border-top: 4px solid var(--accent);
    background: white;
    box-shadow: 0 8px 30px #14233b07;
}

.quotation-document-header, .quotation-document-customer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 32px;
}

.quotation-document-header {
    padding-bottom: 28px;
    border-bottom: 1px solid #e5eaf0;
}

.quotation-document-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 25px;
}

.quotation-document-brand img {
    width: 28px;
    height: 28px;
}

.quotation-company-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.quotation-company-details {
    min-width: 0;
}

.quotation-company-details h2 {
    margin-top: 0;
}

.quotation-company-logo {
    display: block;
    width: 80px;
    max-height: 80px;
    flex-shrink: 0;
    object-fit: contain;
}

.quotation-document-reference {
    text-align: right;
}

.quotation-document :is(h2, h3) {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    margin: 10px 0 6px;
}

.quotation-document p {
    color: #52637a;
    font-size: 13px;
    line-height: 1.7;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.quotation-document .eyebrow {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1px;
}

.quotation-document .quotation-lines-wrap {
    margin: 22px 0 30px;
}

.quotation-document-terms h3 {
    margin-top: 20px;
}

.quotation-document-footer {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid #e5eaf0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1150px) {
    .quotation-detail-grid, .quotation-editor {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 650px) {
    .quotation-actions {
        justify-content: flex-start;
    }

    .quotation-value-card strong {
        font-size: 23px;
    }

    .quotation-edit-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quotation-description-field {
        grid-column: 1 / -1;
    }

    .quotation-document {
        padding: 24px 18px;
    }

    .quotation-document-header, .quotation-document-customer {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .quotation-document-reference {
        text-align: left;
    }

}

@media print {
    @page {
        size: A4;
        margin: 15mm;
    }

    body, .workspace-page[data-server-shell="true"] {
        height: auto;
        overflow: visible;
        background: white;
    }

    .v2-header, .workspace-sidebar, .workspace-nav-backdrop, .quotation-preview-toolbar, .footer-note, .skip-link, #toast {
        display: none !important;
    }

    .workspace-page > .v2-main {
        margin: 0;
        height: auto !important;
        overflow: visible !important;
    }

    .content {
        max-width: none;
        padding: 0;
    }

    .quotation-document {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .quotation-document-header, .quotation-document-customer {
        grid-template-columns: 1fr 1fr;
    }

    .quotation-document-reference {
        text-align: right;
    }

    .quotation-lines-wrap {
        overflow: visible;
    }

    .quotation-lines {
        min-width: 0;
    }

    .quotation-lines tr, .quotation-document-terms {
        break-inside: avoid;
    }

}

/* Configuration layouts */

.auth-layout {
    display: grid;
    grid-template-columns: minmax(280px, 40%) minmax(0, 1fr);
    min-height: 100dvh;
}

.auth-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(28px, 5vw, 72px);
    background: #14233b;
    color: #fff;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}

.auth-brand img {
    width: 36px;
    height: 36px;
}

.auth-brand-panel h2 {
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.25;
    color: inherit;
}

.auth-brand-panel p,
.auth-brand-panel small {
    color: #bdc9d8;
    line-height: 1.7;
}

.auth-content {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 32px 24px;
    background: var(--surface);
}

.auth-standalone {
    min-height: 100dvh;
}

.auth-card {
    width: min(100%, 420px);
}

.auth-card h1 {
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.auth-card > p {
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 28px;
}

.auth-card form {
    justify-items: start;
    gap: 16px;
}

@media (max-width: 700px) {
    .auth-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-brand-panel {
        padding: 24px;
    }

    .auth-brand-panel > div:not(.auth-brand),
    .auth-brand-panel small {
        display: none;
    }

    .auth-brand-panel .auth-brand {
        margin: 0;
    }
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin-top: 20px;
}

.permission-group {
    min-width: 0;
    margin: 0;
    padding: 12px 16px 16px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
}

.permission-group legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.configuration-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(290px, 1fr);
    align-items: start;
    gap: 24px;
}

.configuration-column {
    display: grid;
    gap: 24px;
    min-width: 0;
    margin: 0;
}

.configuration-section {
    padding: var(--card-padding);
}

.configuration-section-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
}

.configuration-section-title h2 {
    margin: 0 0 5px !important;
}

.configuration-section-title p, .configuration-muted {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
}

.configuration-logo-upload {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.configuration-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    padding: 12px;
    background: #f7f9fc;
    border: 1px dashed #cdd8e6;
    border-radius: 10px;
}

.configuration-logo-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.configuration-initials {
    color: #5c7494;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.5px;
}

.configuration-upload-controls {
    min-width: 0;
}

.configuration-preview-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.configuration-preview-heading {
    justify-content: space-between;
    margin-bottom: 10px;
}

.configuration-document-preview {
    margin-top: 22px;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 5px 18px #14233b06;
}

.configuration-preview-logo {
    width: 80px;
    height: 46px;
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.configuration-document-preview h3 {
    color: #233b58;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    margin: 0 0 12px;
}

.configuration-document-preview p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 3px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.configuration-preview-rule {
    border-top: 1px solid var(--line);
    margin: 22px 0;
}

.configuration-preview-caption {
    color: #71839b;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.configuration-preview-lines {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.configuration-preview-lines span {
    height: 5px;
    background: #eef2f7;
    border-radius: 4px;
}

.configuration-preview-lines span:nth-child(2) {
    width: 83%;
}

.configuration-preview-lines span:last-child {
    width: 62%;
}

.configuration-note-spacing {
    margin-top: 16px !important;
}

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

    .configuration-grid > aside {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

}

@media (max-width: 600px) {
    .configuration-grid > aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .configuration-section {
        padding: var(--card-padding);
    }

    .configuration-logo-upload {
        flex-direction: column;
        gap: 18px;
    }

    .configuration-section-title {
        gap: 12px;
    }

    .configuration-section-title .summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.profile-details .configuration-grid, .profile-details .configuration-column {
    gap: 16px;
}

.profile-details .configuration-section {
    padding: var(--card-padding-compact);
}

.profile-details .configuration-logo-frame {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    padding: 8px;
}

.profile-identity h2 {
    overflow-wrap: anywhere;
}

.profile-identity .fa-building {
    color: var(--muted);
    font-size: 28px;
}

.profile-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 14px 0 0;
}

.profile-detail-list > div {
    display: block;
    min-width: 0;
    padding: 10px 0 0;
}

.profile-detail-list dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.profile-detail-list dd {
    margin: 0;
    color: #233b58;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.profile-detail-wide dd {
    white-space: pre-line;
}

.profile-detail-wide {
    grid-column: 1 / -1;
}

.profile-details .profile-record-list {
    grid-template-columns: minmax(0, 1fr);
}

.profile-create-link {
    margin-top: 22px;
}

@media (max-width: 600px) {
    .profile-detail-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-identity {
        align-items: center;
        flex-direction: row;
    }

}

.configuration-register {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 16px;
}

.configuration-register .configuration-section {
    padding: 18px 20px;
}

.configuration-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.configuration-table th, .configuration-table td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.configuration-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.configuration-table tr:last-child td {
    border-bottom: 0;
}

.configuration-groups-table {
    min-width: 360px;
}

.configuration-currency-link {
    display: inline-block;
    margin-top: 8px;
    color: #8e513d;
    font-size: 12px;
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .configuration-register {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Access layouts */

.access-owner-panel, .access-owner-identity, .access-member-identity, .access-owner-stats, .access-section-heading, .access-integration-top, .access-integration-footer {
    display: flex;
    align-items: center;
    gap: 16px;
}

.access-owner-panel {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.access-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 9px;
    background: #eaf0f8;
    color: #526b8b;
    font-size: 12px;
    font-weight: 600;
}

.access-owner-avatar {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 18px;
}

.access-owner-identity .eyebrow {
    color: #71839b;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

.access-owner-identity h2 {
    margin-bottom: 5px;
}

.access-owner-identity p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.access-owner-stats {
    gap: 0;
}

.access-owner-stats > div {
    padding: 0 24px;
    border-left: 1px solid var(--line);
}

.access-owner-stats strong {
    font-size: 25px;
    line-height: 1.3;
    font-weight: 650;
    display: block;
}

.access-owner-stats span {
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin-top: 6px;
}

.access-team-table {
    min-width: 850px;
}

.access-team-table th:first-child {
    width: 34%;
}

.access-team-table th:last-child, .access-team-table td:last-child {
    padding-right: 22px;
    width: 70px;
}

.access-muted, .access-owner-label {
    color: var(--muted);
    font-size: 12px;
}

.access-permission {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7b8798;
    font-size: 12px;
    white-space: nowrap;
}

.access-permission .icon {
    width: 15px;
    height: 15px;
}

.access-permission.allowed {
    color: #398369;
}

.access-role-guide {
    border-top: 1px solid var(--line);
    padding: 17px 24px;
}

.access-role-guide summary {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: #526b8b;
    cursor: pointer;
    list-style: none;
}

.access-role-guide summary::after {
    content: '+';
    margin-left: auto;
    font-size: 18px;
}

.access-role-guide[open] summary::after {
    content: '−';
}

.access-role-guide summary .icon {
    width: 16px;
    height: 16px;
}

.access-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 22px 0 4px;
}

.access-role-grid h3 {
    color: #334b69;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
}

.access-role-grid p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}

.access-section-heading {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.access-section-heading h2 {
    margin: 0 0 6px;
}

.access-section-heading p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.access-integration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.access-integration-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    margin: 0;
}

.access-integration-top {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
}

.access-integration-card > p, .access-guidance > p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin: 8px 0 18px;
}

.access-integration-note {
    font-size: 12px;
    line-height: 1.7;
    color: #526b8b;
    padding: 12px;
    border-radius: 6px;
    background: #f4f7fb;
    margin-bottom: 22px;
}

.access-integration-footer {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid var(--line);
}

.access-integration-footer > span {
    color: var(--muted);
    font-size: 11px;
}

.access-form h2 {
    margin-top: 0 !important;
    margin-bottom: 24px;
}

.access-smtp-settings {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    margin: 22px 0;
    min-width: 0;
}

.access-smtp-settings legend {
    width: auto;
    float: none;
    color: #526b8b;
    font-size: 13px;
    padding: 0 7px;
    margin: 0;
}

.access-role-guide summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}

@media (max-width: 1250px) {
    .access-integration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {
    .access-integration-grid, .access-role-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-owner-stats {
        width: 100%;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }

    .access-owner-stats > div {
        flex: 1;
        padding: 0 14px;
    }

    .access-owner-stats > div:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .access-owner-stats span {
        line-height: 1.6;
    }

    .access-owner-identity {
        gap: 12px;
    }

    .access-owner-identity > div {
        min-width: 0;
    }

    .access-integration-card, .access-role-guide {
        padding: 20px 18px;
    }

}

/* Shared form layout */

.form-stack {
    display: grid;
    gap: 16px;
}

.user-upsert .configuration-grid {
    gap: 16px;
}

.user-upsert .configuration-section {
    padding: var(--card-padding);
}

.user-upsert .configuration-section-title {
    margin-bottom: 18px;
}

.user-upsert .configuration-muted {
    font-size: 12px;
    line-height: 1.5;
}

/* Shared account header and dialog actions. */

.workspace-account-name {
    font-size: 11px;
}

.workspace-account-role {
    display: block;
    margin-top: 4px;
    font-size: 9px;
}

.workspace-dialog-actions {
    margin-top: 22px;
}

/* Chart dimensions are data values; their presentation stays in this stylesheet. */

.db-chart-bar {
    height: var(--chart-height, 0%);
}

.db-progress span {
    width: var(--progress-width, 0%);
    background: var(--progress-colour, var(--accent));
}

/* Customer public pages: adapted from the CutWise public and account designs. */
body.bw-public {
    --public-soft: #f1e3dd;
    --section-space: 32px;
}

body.bw-public * {
    box-sizing: border-box;
}

html:has(> body.bw-public), html:has(> body.bw-customer-auth) {
    scroll-behavior: auto;
    scroll-padding-top: 80px;
}

body.bw-public {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.bw-public button, body.bw-public a {
    -webkit-tap-highlight-color: transparent;
}

body.bw-public button {
    font: inherit;
}

body.bw-public a {
    color: inherit;
    text-decoration: none;
}

body.bw-public a, body.bw-public button, body.bw-public summary {
    touch-action: manipulation;
}

body.bw-public :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 5px;
}

body.bw-public [hidden] {
    display: none !important;
}

body.bw-public .container {
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
}

body.bw-public .skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    padding: 15px;
    background: white;
}

body.bw-public .skip-link:focus {
    top: 10px;
}

body.bw-public .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #ffffff1a;
    background: rgba(20, 35, 59, .98);
    color: white;
}

body.bw-public .site-header .brand i, body.bw-public .site-header .brand > span {
    color: #e1a38a;
}

body.bw-public .site-header .site-nav > a:hover {
    color: #e1a38a;
}

body.bw-public .site-header .nav-signin {
    border-color: #65758d;
}

body.bw-public .site-header .menu-toggle {
    background: #233650;
    border-color: #65758d;
    color: white;
}

body.bw-public .site-header :focus-visible {
    outline-color: #e1a38a;
}

body.bw-public .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    gap: 24px;
}

body.bw-public .brand {
    display: inline-flex;
    align-items: center;
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -1.5px;
    white-space: nowrap;
}

body.bw-public .brand i {
    margin-right: 12px;
    color: var(--accent);
    font-size: 35px;
}

body.bw-public .brand > span {
    color: var(--accent);
}

body.bw-public .site-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 14px;
    font-weight: 600;
}

body.bw-public .site-nav > a:hover, body.bw-public .footer-links a:hover {
    color: var(--accent);
}

body.bw-public .site-nav .nav-signin {
    border: 1px solid #65758d;
    padding: 8px 14px;
    border-radius: 7px;
}

body.bw-public .nav-signin i {
    margin-left: 10px;
    font-size: 11px;
}

body.bw-public .nav-login-menu {
    position: relative;
}

body.bw-public .nav-login-menu summary {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #65758d;
    border-radius: 7px;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
}

body.bw-public .nav-login-menu summary::-webkit-details-marker {
    display: none;
}

body.bw-public .nav-login-menu summary:hover {
    color: #e1a38a;
}

body.bw-public .nav-login-menu summary i {
    font-size: 11px;
}

body.bw-public .nav-login-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid #65758d;
    border-radius: 9px;
    background: #14233b;
    box-shadow: 0 12px 28px #101c2c40;
}

body.bw-public .nav-login-options a {
    padding: 10px 12px;
    border-radius: 6px;
}

body.bw-public .nav-login-options a:hover {
    background: #233650;
    color: #e1a38a;
}

body.bw-public .menu-toggle {
    display: none;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: white;
    padding: 12px;
}

body.bw-public .hero-band {
    background: var(--paper);
    color: var(--ink);
}

body.bw-public .hero {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    align-items: start;
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 40px;
}

body.bw-public .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 2px;
    line-height: 1.7;
    text-transform: uppercase;
}

body.bw-public .status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

body.bw-public h1, body.bw-public h2, body.bw-public h3, body.bw-public p {
    margin-top: 0;
}

body.bw-public h1 {
    margin-bottom: 18px;
    font-size: clamp(48px, 4.9vw, 70px);
    line-height: 1.08;
    letter-spacing: -3.5px;
    font-weight: 650;
}

body.bw-public .hero-accent {
    color: var(--accent);
}

body.bw-public .hero-description {
    max-width: 450px;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

body.bw-public .hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.bw-public .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
}

body.bw-public .button-primary {
    background: var(--accent);
    color: white;
}

body.bw-public .button-primary:hover {
    background: var(--accent-hover);
}

body.bw-public .text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 13px;
}

body.bw-public .text-link:hover {
    color: var(--accent);
}

body.bw-public .hero-note {
    display: flex;
    gap: 9px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

body.bw-public .hero-note i {
    color: var(--accent);
    padding-top: 4px;
}

body.bw-public .hero-visual {
    position: relative;
    isolation: isolate;
    min-width: 0;
    color: var(--ink);
}

body.bw-public .plan-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    box-shadow: 0 22px 50px -30px #14233b55;
}

body.bw-public .plan-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
}

body.bw-public .tiny-label {
    color: var(--accent);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

body.bw-public .plan-heading h2 {
    margin: 6px 0 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.5px;
}

body.bw-public .example-badge {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    padding: 6px 8px;
    font-size: 9px;
    white-space: nowrap;
    color: var(--muted);
}

body.bw-public .preview-tabs {
    display: flex;
    gap: 20px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

body.bw-public .preview-tabs button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    background: white;
    cursor: pointer;
    font-size: 11px;
}

body.bw-public .preview-tabs button[aria-selected="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

body.bw-public .preview-tabs button span {
    border-radius: 4px;
    background: #e8edf4;
    padding: 2px 5px;
}

body.bw-public .preview-stage {
    padding: 16px 18px;
    background-color: var(--paper);
    background-image: radial-gradient(var(--line) .6px, transparent .6px);
    background-size: 12px 12px;
}

body.bw-public .ruler {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: var(--muted);
    font-size: 9px;
}

body.bw-public .ruler::before, body.bw-public .ruler::after {
    content: "";
    flex: 1;
    height: 6px;
    border-top: 1px solid #dbc3b6;
    border-inline: 1px solid #dbc3b6;
}

body.bw-public .fabric {
    position: relative;
    width: 100%;
    aspect-ratio: 2;
    border: 1px solid #dbc3b6;
    background: white;
    overflow: hidden;
}

body.bw-public .piece {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #14233b26;
    font-size: 10px;
}

body.bw-public .panel {
    width: 39.285714%;
    height: 64.285714%;
    top: 0;
    background: #f3e7e1;
    flex-direction: column;
    gap: 7px;
}

body.bw-public .panel-one {
    left: 0;
}

body.bw-public .panel-two {
    left: 39.285714%;
}

body.bw-public .panel strong {
    font-weight: 500;
}

body.bw-public .panel small {
    font-size: 8px;
    color: var(--accent);
}

body.bw-public .cushion {
    top: 64.285714%;
    width: 17.857143%;
    height: 35.714286%;
    background: #ecd2c3;
    color: var(--accent);
}

body.bw-public .cushion-one {
    left: 0;
}

body.bw-public .cushion-two {
    left: 17.857143%;
}

body.bw-public .cushion-three {
    left: 35.714286%;
}

body.bw-public .cushion-four {
    left: 53.571429%;
}

body.bw-public .offcut {
    position: absolute;
    left: 71.428571%;
    top: 64.285714%;
    width: 7.142857%;
    height: 35.714286%;
    background: repeating-linear-gradient(135deg, #f3e7e1 0 2px, #dbc3b6 2px 3px);
}

body.bw-public .strip {
    top: 0;
    width: 7.142857%;
    height: 100%;
    background: #d4deed;
    color: var(--accent);
}

body.bw-public .strip span {
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size: 8px;
}

body.bw-public .strip-one {
    left: 78.571429%;
}

body.bw-public .strip-two {
    left: 85.714286%;
}

body.bw-public .strip-three {
    left: 92.857143%;
}

body.bw-public .fabric-caption {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    font-size: 9px;
    color: var(--muted);
}

body.bw-public .fabric-caption i {
    margin-right: 5px;
}

body.bw-public .plan-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    font-size: 9px;
    border-top: 1px solid var(--line);
}

body.bw-public .plan-footer > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.bw-public .plan-footer > span {
    color: var(--muted);
}

body.bw-public .visual-note {
    position: absolute;
    right: -18px;
    bottom: -30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f3e7e1;
    box-shadow: 0 5px 20px #14233b0a;
    font-size: 11px;
    line-height: 1.6;
    transform: rotate(-3deg);
}

body.bw-public .visual-note i {
    color: var(--accent);
    font-size: 23px;
}

body.bw-public .example-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: left;
    background: white;
}

body.bw-public .example-table caption {
    text-align: left;
    padding-bottom: 16px;
    color: var(--muted);
}

body.bw-public .example-table th, body.bw-public .example-table td {
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
}

body.bw-public .example-table thead th {
    color: var(--muted);
    font-weight: 500;
}

body.bw-public .example-table tbody th {
    font-weight: 600;
}

body.bw-public .use-cases {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 0;
    border-block: 1px solid var(--line);
}

body.bw-public .use-cases > span {
    font-size: 9px;
    letter-spacing: 1.7px;
    color: var(--muted);
    font-weight: 600;
}

body.bw-public .use-cases > div {
    font-size: 14px;
    font-weight: 500;
}

body.bw-public .use-cases i {
    font-size: 11px;
    color: var(--accent);
    margin-right: 9px;
}

body.bw-public .section {
    padding-block: var(--section-space);
}

body.bw-public .section-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: 32px;
}

body.bw-public .section-heading > .eyebrow {
    grid-column: 1 / -1;
}

body.bw-public .section h2, body.bw-public .feature-intro h2 {
    font-size: 43px;
    line-height: 1.18;
    letter-spacing: -1.7px;
    font-weight: 600;
    margin-bottom: 14px;
}

body.bw-public .section-heading > p:last-child {
    justify-self: end;
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
}

body.bw-public .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 12px;
}

body.bw-public .step {
    position: relative;
    padding: 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
}

body.bw-public .step-number {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 11px;
    color: var(--muted);
}

body.bw-public .step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f3e7e1;
    font-size: 20px;
    color: var(--accent);
}

body.bw-public .step:nth-child(2) .step-icon {
    color: var(--accent);
    background: #f3e7e1;
    border-color: var(--line);
}

body.bw-public .step:nth-child(3) .step-icon {
    color: var(--accent);
    background: #d4deed;
    border-color: var(--line);
}

body.bw-public h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.4px;
    margin-bottom: 14px;
}

body.bw-public .step p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 14px;
}

body.bw-public .step-detail {
    display: block;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    color: var(--accent);
    font-size: 11px;
}

body.bw-public .feature-section {
    background: #e8edf4;
    border-block: 1px solid var(--line);
    padding-block: var(--section-space);
}

body.bw-public .feature-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 32px;
}

body.bw-public .feature-intro {
    position: relative;
}

body.bw-public .feature-intro > p:not(.eyebrow) {
    max-width: 325px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}

body.bw-public .feature-intro .text-link {
    margin-top: 10px;
    color: var(--accent);
}

body.bw-public .swatch-decoration {
    display: flex;
    gap: 7px;
    height: 70px;
    width: 150px;
    margin-top: 24px;
    transform: rotate(-7deg);
}

body.bw-public .swatch-decoration span {
    flex: 1;
    border: 1px solid #dbc3b6;
    background: #dbc3b6;
}

body.bw-public .swatch-decoration span:nth-child(2) {
    flex: 1.5;
    background: #ecd2c3;
    border-color: #cfb09f;
}

body.bw-public .swatch-decoration span:nth-child(3) {
    flex: .5;
    background: #d4deed;
    border-color: #a8b8d0;
}

body.bw-public .feature-list {
    display: grid;
    gap: 16px;
}

body.bw-public .feature-list article {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

body.bw-public .feature-list article:last-child {
    border: 0;
    padding-bottom: 0;
}

body.bw-public .feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--accent);
}

body.bw-public .feature-list h3 {
    margin: 1px 0 9px;
}

body.bw-public .feature-list p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted);
    margin: 0;
}

body.bw-public .faq-section {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 32px;
}

body.bw-public .faq-section > div > p:last-child {
    color: var(--muted);
    line-height: 1.8;
    font-size: 14px;
}

body.bw-public .faq-list details {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

body.bw-public .faq-list details:first-child {
    border-top: 1px solid var(--line);
}

body.bw-public .faq-list summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
}

body.bw-public .faq-list summary::-webkit-details-marker {
    display: none;
}

body.bw-public .faq-list summary::after {
    content: "+";
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
}

body.bw-public .faq-list details[open] summary::after {
    content: "−";
}

body.bw-public .faq-list details p {
    margin: 14px 28px 0 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted);
}

body.bw-public .closing-section {
    padding-bottom: 28px;
}

body.bw-public .closing-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    gap: 24px;
    padding: 24px 28px;
    background: var(--green);
    color: white;
    border-radius: 12px;
}

body.bw-public .closing-card > div, body.bw-public .closing-card > a {
    z-index: 1;
}

body.bw-public .closing-card .eyebrow {
    color: #e1a38a;
}

body.bw-public .closing-card h2 {
    font-size: 39px;
    letter-spacing: -1.5px;
    font-weight: 550;
    line-height: 1.2;
    margin-bottom: 18px;
}

body.bw-public .closing-card p:last-child {
    margin-bottom: 0;
    color: #c7d2e2;
    font-size: 14px;
    line-height: 1.8;
}

body.bw-public .button-light {
    background: #f3e7e1;
    color: var(--ink);
    flex-shrink: 0;
}

body.bw-public .button-light:hover {
    background: #dbc3b6;
}

body.bw-public .closing-star {
    position: absolute;
    right: 30px;
    bottom: -60px;
    font-size: 280px;
    color: #233650;
    transform: rotate(15deg);
}

body.bw-public .site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-bottom: 18px;
}

body.bw-public .site-footer .brand {
    font-size: 26px;
}

body.bw-public .site-footer .brand i {
    font-size: 28px;
}

body.bw-public .site-footer p {
    color: var(--muted);
    font-size: 11px;
    margin: 13px 0 0;
}

body.bw-public .footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    font-size: 12px;
}

body.bw-public .site-footer .copyright {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 10px;
}

@media (max-width: 1100px) {
body.bw-public .container {
        width: calc(100% - 64px);
    }

body.bw-public .hero {
        gap: 24px;
    }

body.bw-public h1 {
        font-size: 54px;
    }

body.bw-public .hero-description {
        font-size: 16px;
    }

body.bw-public .plan-heading h2 {
        font-size: 17px;
    }

body.bw-public .example-badge {
        font-size: 8px;
    }

body.bw-public .feature-grid, body.bw-public .faq-section {
        gap: 28px;
    }
}

@media (max-width: 800px) {
body.bw-public {
        --section-space: 28px;
    }

body.bw-public .nav-row {
        min-height: 68px;
    }

body.bw-public .site-nav {
        gap: 20px;
        font-size: 12px;
    }

body.bw-public .hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 24px;
        padding-bottom: 40px;
    }

body.bw-public .hero-copy {
        max-width: 570px;
    }

body.bw-public h1 {
        font-size: 66px;
    }

body.bw-public .hero-description {
        max-width: 470px;
    }

body.bw-public .hero-visual {
        width: min(580px, calc(100% - 20px));
        margin-inline: auto;
    }

body.bw-public .use-cases {
        justify-content: flex-start;
        gap: 14px 24px;
    }

body.bw-public .use-cases > span {
        width: 100%;
    }

body.bw-public .section h2, body.bw-public .feature-intro h2 {
        font-size: 36px;
    }

body.bw-public .steps {
        gap: 15px;
    }

body.bw-public .step {
        padding: 18px 16px;
    }

body.bw-public .step h3 {
        font-size: 17px;
    }

body.bw-public .step p {
        font-size: 13px;
    }

body.bw-public .feature-grid, body.bw-public .faq-section {
        gap: 24px;
        grid-template-columns: 1fr 1.2fr;
    }

body.bw-public .feature-list article {
        gap: 14px;
    }

body.bw-public .closing-card {
        padding: 24px;
    }

body.bw-public .closing-card h2 {
        font-size: 33px;
    }
}

@media (max-width: 600px) {
body.bw-public {
        --section-space: 24px;
    }

body.bw-public .container {
        width: calc(100% - 40px);
    }

body.bw-public .brand {
        font-size: 28px;
    }

body.bw-public .brand i {
        font-size: 30px;
    }

body.bw-public .menu-toggle {
        display: block;
        cursor: pointer;
    }

body.bw-public .nav-row {
        flex-wrap: wrap;
        gap: 0;
        min-height: 64px;
        padding-block: 8px;
    }

body.bw-public .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 10px;
    }

body.bw-public .site-nav.is-open {
        display: flex;
    }

body.bw-public .site-nav > a {
        padding: 14px 8px;
        font-size: 14px;
    }

body.bw-public .nav-login-menu {
        width: 100%;
        margin-top: 8px;
    }

body.bw-public .nav-login-menu summary {
        justify-content: space-between;
        padding: 14px 8px;
        border: 0;
        border-radius: 0;
    }

body.bw-public .nav-login-options {
        position: static;
        min-width: 0;
        margin: 0 0 8px 8px;
        border: 0;
        border-left: 1px solid #65758d;
        border-radius: 0;
        box-shadow: none;
    }

body.bw-public .site-nav .nav-signin {
        margin-top: 8px;
    }

body.bw-public .hero {
        padding-top: 20px;
        padding-bottom: 36px;
        gap: 24px;
    }

body.bw-public .eyebrow {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

body.bw-public h1 {
        font-size: clamp(43px, 12vw, 66px);
        letter-spacing: -2.5px;
        margin-bottom: 16px;
    }

body.bw-public .hero-description {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

body.bw-public .hero-actions {
        gap: 16px;
    }

body.bw-public .hero-note {
        font-size: 10px;
    }

body.bw-public .hero-visual {
        width: calc(100% - 12px);
    }

body.bw-public .plan-heading {
        padding: 12px 14px;
        gap: 8px;
    }

body.bw-public .tiny-label {
        font-size: 6px;
        letter-spacing: 1px;
    }

body.bw-public .plan-heading h2 {
        font-size: 15px;
    }

body.bw-public .example-badge {
        font-size: 7px;
        padding: 5px;
    }

body.bw-public .preview-tabs {
        padding-inline: 14px;
    }

body.bw-public .preview-stage {
        padding: 14px;
    }

body.bw-public .fabric-caption {
        font-size: 7px;
    }

body.bw-public .piece {
        font-size: 8px;
    }

body.bw-public .panel small {
        font-size: 6px;
    }

body.bw-public .strip span {
        font-size: 6px;
    }

body.bw-public .plan-footer {
        padding: 10px 12px;
        font-size: 7px;
    }

body.bw-public .visual-note {
        padding: 10px 14px;
        font-size: 9px;
        right: -6px;
        bottom: -25px;
    }

body.bw-public .visual-note i {
        font-size: 18px;
    }

body.bw-public .example-table {
        font-size: 9px;
    }

body.bw-public .example-table th, body.bw-public .example-table td {
        padding: 14px 5px;
    }

body.bw-public .use-cases {
        gap: 16px;
        padding-block: 14px;
    }

body.bw-public .use-cases > div {
        font-size: 11px;
    }

body.bw-public .use-cases i {
        margin-right: 5px;
    }

body.bw-public .section-heading, body.bw-public .steps, body.bw-public .feature-grid, body.bw-public .faq-section {
        grid-template-columns: 1fr;
    }

body.bw-public .section-heading {
        gap: 0;
    }

body.bw-public .section-heading > p:last-child {
        justify-self: start;
    }

body.bw-public .section h2, body.bw-public .feature-intro h2 {
        font-size: 36px;
    }

body.bw-public .steps {
        margin-top: 10px;
        gap: 16px;
    }

body.bw-public .step {
        padding: 18px;
    }

body.bw-public .step-icon {
        margin-bottom: 16px;
    }

body.bw-public .step h3 {
        font-size: 20px;
    }

body.bw-public .step p {
        font-size: 14px;
    }

body.bw-public .feature-grid {
        gap: 20px;
    }

body.bw-public .feature-intro h2 br:nth-of-type(2) {
        display: none;
    }

body.bw-public .swatch-decoration {
        display: none;
    }

body.bw-public .feature-list h3 {
        font-size: 18px;
    }

body.bw-public .feature-list p {
        font-size: 13px;
    }

body.bw-public .faq-section {
        gap: 18px;
    }

body.bw-public .faq-list summary {
        font-size: 14px;
    }

body.bw-public .closing-section {
        padding-bottom: 24px;
    }

body.bw-public .closing-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 20px;
        gap: 18px;
    }

body.bw-public .closing-card h2 {
        font-size: 31px;
    }

body.bw-public .closing-card p:last-child {
        font-size: 13px;
    }

body.bw-public .closing-star {
        right: -70px;
    }

body.bw-public .site-footer {
        grid-template-columns: 1fr;
        gap: 16px;
    }

body.bw-public .footer-links {
        justify-content: flex-start;
        gap: 25px;
    }

body.bw-public .site-footer .copyright {
        margin-top: 0;
    }
}

body.bw-customer-auth * {
    box-sizing: border-box;
}

body.bw-customer-auth {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.bw-customer-auth a {
    color: inherit;
    text-decoration: none;
}

body.bw-customer-auth a, body.bw-customer-auth button {
    touch-action: manipulation;
}

body.bw-customer-auth :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 5px;
}

body.bw-customer-auth .skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 10;
    background: white;
    padding: 16px;
}

body.bw-customer-auth .skip-link:focus {
    top: 10px;
}

body.bw-customer-auth .auth-shell {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 100vh;
    min-height: 100svh;
}

body.bw-customer-auth .auth-story {
    display: flex;
    flex-direction: column;
    padding: 24px clamp(28px, 4vw, 56px) 20px;
    background: var(--green);
    color: white;
}

body.bw-customer-auth .auth-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -1.5px;
}

body.bw-customer-auth .auth-brand i {
    color: #e1a38a;
    font-size: 32px;
    margin-right: 12px;
}

body.bw-customer-auth .auth-brand > span {
    color: #e1a38a;
}

body.bw-customer-auth .story-content {
    width: 100%;
    max-width: 430px;
    margin-block: auto;
    padding-block: 24px;
}

body.bw-customer-auth .eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.8;
}

body.bw-customer-auth .auth-story .eyebrow {
    color: #e1a38a;
    font-size: 9px;
    letter-spacing: 1.5px;
}

body.bw-customer-auth .auth-story h1 {
    margin: 0 0 16px;
    font-size: clamp(42px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -3px;
    font-weight: 550;
}

body.bw-customer-auth .auth-story h1 span {
    color: #e1a38a;
}

body.bw-customer-auth .story-description {
    max-width: 310px;
    margin: 0;
    color: #c7d2e2;
    font-size: 15px;
    line-height: 1.7;
}

body.bw-customer-auth .fabric-art {
    max-width: 325px;
    margin-top: 24px;
    transform: rotate(-4deg);
}

body.bw-customer-auth .art-ruler {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: #c7d2e2;
    margin-bottom: 12px;
}

body.bw-customer-auth .art-ruler::before, body.bw-customer-auth .art-ruler::after {
    content: "";
    flex: 1;
    height: 5px;
    border-top: 1px solid #65758d;
    border-inline: 1px solid #65758d;
}

body.bw-customer-auth .art-roll {
    display: grid;
    grid-template-columns: 1fr 1fr .55fr;
    grid-template-rows: 60px 60px 18px;
    gap: 5px;
    padding: 6px;
    background: #233650;
    border: 1px solid #65758d;
    border-radius: 3px;
}

body.bw-customer-auth .art-panel {
    background: #f3e7e1;
    border: 1px solid #dbc3b6;
}

body.bw-customer-auth .art-panel.first {
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
}

body.bw-customer-auth .art-panel i {
    color: var(--accent);
    font-size: 25px;
    transform: rotate(4deg);
}

body.bw-customer-auth .art-panel.second {
    grid-column: 2;
    grid-row: 1 / 3;
}

body.bw-customer-auth .art-cushion {
    grid-column: 3;
    background: #ecd2c3;
    border: 1px solid #cfb09f;
}

body.bw-customer-auth .art-cushion.first {
    grid-row: 1;
}

body.bw-customer-auth .art-cushion.second {
    grid-row: 2;
}

body.bw-customer-auth .art-strip {
    grid-row: 3;
    background: #d4deed;
    border: 1px solid #a8b8d0;
}

body.bw-customer-auth .art-offcut {
    background: repeating-linear-gradient(135deg, #233650 0 3px, #65758d 3px 4px);
}

body.bw-customer-auth .fabric-art p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 13px 0 0;
    font-size: 9px;
    color: #c7d2e2;
}

body.bw-customer-auth .fabric-art p span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e1a38a;
}

body.bw-customer-auth .story-footer {
    color: #c7d2e2;
    font-size: 10px;
    letter-spacing: .3px;
    margin: 0;
}

body.bw-customer-auth .auth-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px clamp(24px, 4vw, 56px) 20px;
}

body.bw-customer-auth .auth-topbar, body.bw-customer-auth .auth-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

body.bw-customer-auth .back-home {
    font-size: 12px;
    color: var(--muted);
}

body.bw-customer-auth .back-home i {
    margin-right: 8px;
}

body.bw-customer-auth .back-home:hover, body.bw-customer-auth .auth-footer a:hover {
    color: var(--accent);
}

body.bw-customer-auth .account-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--muted);
}

body.bw-customer-auth .auth-content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-block: 16px;
}

body.bw-customer-auth .auth-card {
    width: 100%;
    max-width: 430px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: 0 15px 50px -35px #14233b44;
}

body.bw-customer-auth .auth-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    background: #f3e7e1;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--accent);
    font-size: 16px;
}

body.bw-customer-auth .auth-card .eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

body.bw-customer-auth .auth-card h2 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.4px;
}

body.bw-customer-auth .auth-description {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
}

body.bw-customer-auth .auth-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    font: 600 13px "DM Sans", "Segoe UI", sans-serif;
    color: white;
    background: var(--accent);
    cursor: pointer;
    line-height: 1.5;
}

body.bw-customer-auth .auth-form,
body.bw-customer-auth .registration-form {
    display: grid;
    gap: 12px;
}

body.bw-customer-auth .auth-field {
    display: grid;
    gap: 5px;
}

body.bw-customer-auth .auth-passwords {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.bw-customer-auth .auth-password-hint {
    margin-top: -6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

body.bw-customer-auth .auth-field label {
    font-size: 12px;
    font-weight: 600;
}

body.bw-customer-auth .auth-field input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: white;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

body.bw-customer-auth .auth-field input::placeholder {
    color: var(--muted);
}

body.bw-customer-auth .auth-field small {
    font-size: 10px;
    line-height: 1.6;
    color: var(--muted);
}

body.bw-customer-auth .auth-field .input-validation-error {
    border-color: var(--danger);
}

body.bw-customer-auth .field-error {
    color: var(--danger);
    font-size: 11px;
    line-height: 1.6;
}

body.bw-customer-auth .field-validation-valid, body.bw-customer-auth .validation-summary-valid {
    display: none;
}

body.bw-customer-auth .auth-alert ul {
    margin: 0;
    padding-left: 17px;
}

body.bw-customer-auth .resend-form {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
}

body.bw-customer-auth .auth-inline-button {
    border: 0;
    padding: 6px 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

body.bw-customer-auth .verification-link {
    margin: 12px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.7;
    color: var(--accent);
}

body.bw-customer-auth .verification-link a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.bw-customer-auth .auth-button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

body.bw-customer-auth .auth-button-secondary {
    color: var(--ink);
    background: white;
    border-color: var(--line);
}

body.bw-customer-auth .auth-button-secondary:hover {
    background: var(--paper);
    border-color: #dbc3b6;
}

body.bw-customer-auth .secure-note {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 7px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
    line-height: 1.8;
}

body.bw-customer-auth .secure-note i {
    font-size: 9px;
}

body.bw-customer-auth .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: 1.3px;
}

body.bw-customer-auth .auth-divider::before, body.bw-customer-auth .auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

body.bw-customer-auth .auth-footnote {
    margin: 12px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

body.bw-customer-auth .auth-alert {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #dec2b5;
    background: #fbf1ec;
    color: #804b37;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

body.bw-customer-auth .auth-alert p {
    margin: 0;
}

body.bw-customer-auth .auth-alert small {
    display: block;
    margin-top: 8px;
    font-size: 10px;
}

body.bw-customer-auth .auth-alert-info {
    background: #e8edf4;
    border-color: var(--line);
    color: var(--accent);
}

body.bw-customer-auth .auth-alert-success {
    background: #e9f5ef;
    border-color: #cbe7d9;
    color: #286b51;
}

body.bw-customer-auth .account-benefits {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
    color: var(--accent);
    font-size: 12px;
    line-height: 1.6;
}

body.bw-customer-auth .account-benefits li {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

body.bw-customer-auth .account-benefits i {
    color: var(--accent);
    font-size: 10px;
}

body.bw-customer-auth .auth-switch {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

body.bw-customer-auth .auth-switch a {
    color: var(--accent);
    font-weight: 650;
    margin-left: 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.bw-customer-auth .auth-footer {
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 1050px) {
body.bw-customer-auth .auth-shell {
        grid-template-columns: .85fr 1.15fr;
    }

body.bw-customer-auth .auth-story {
        padding-inline: 28px;
    }

body.bw-customer-auth .auth-main {
        padding-inline: 24px;
    }

body.bw-customer-auth .account-label {
        display: none;
    }

body.bw-customer-auth .auth-card {
        padding: 24px;
    }
}

@media (max-width: 700px) {
body.bw-customer-auth .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

body.bw-customer-auth .auth-story {
        padding: 16px 20px;
    }

body.bw-customer-auth .auth-brand {
        font-size: 28px;
    }

body.bw-customer-auth .auth-brand i {
        font-size: 30px;
    }

body.bw-customer-auth .story-content, body.bw-customer-auth .story-footer {
        display: none;
    }

body.bw-customer-auth .auth-main {
        padding: 16px 20px;
    }

body.bw-customer-auth .auth-content {
        padding-block: 16px;
    }

body.bw-customer-auth .auth-card {
        max-width: 450px;
        padding: 22px;
    }

body.bw-customer-auth .auth-card h2 {
        font-size: 28px;
    }

body.bw-customer-auth .auth-footer {
        flex-wrap: wrap;
    }

body.bw-customer-auth .auth-field input {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
body.bw-customer-auth .auth-main {
        padding-inline: 16px;
    }

body.bw-customer-auth .auth-card {
        padding: 20px;
    }

body.bw-customer-auth .auth-card h2 {
        font-size: 26px;
    }
}

@media (min-width: 701px) and (max-height: 740px) {
body.bw-customer-auth .auth-story, body.bw-customer-auth .auth-main {
        padding-top: 18px;
        padding-bottom: 16px;
    }

body.bw-customer-auth .story-content, body.bw-customer-auth .auth-content {
        padding-block: 12px;
    }

body.bw-customer-auth .auth-card {
        padding: 20px;
    }

body.bw-customer-auth .auth-icon {
        display: none;
    }

body.bw-customer-auth .auth-story h1 {
        font-size: 44px;
    }

body.bw-customer-auth .fabric-art {
        max-width: 270px;
        margin-top: 18px;
    }

body.bw-customer-auth .art-roll {
        grid-template-rows: 48px 48px 16px;
    }
}

@media (pointer: coarse) {
body.bw-customer-auth .auth-button, body.bw-customer-auth .auth-field input {
        min-height: 44px;
    }
}

/* BuildWise content within the reused CutWise public/account components. */
body.bw-public h1, body.bw-public h2, body.bw-public h3,
body.bw-customer-auth h1, body.bw-customer-auth h2, body.bw-customer-auth h3 { font-family: "Manrope", "DM Sans", sans-serif; }
body.bw-public .brand img { width: 34px; height: 34px; margin-right: 10px; }
body.bw-public .project-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 1px solid var(--line); padding: 8px; background: #e8edf4; border-radius: 4px; min-height: 235px; }
body.bw-public .project-plan-main { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; padding: 20px 12px; background: #f3e7e1; border: 1px solid #dbc3b6; }
body.bw-public .project-plan-main > i { font-size: 33px; color: var(--accent); }
body.bw-public .project-plan-main strong { font-size: 15px; font-weight: 600; }
body.bw-public .project-plan-main small { font-size: 10px; color: var(--accent); }
body.bw-public .project-plan-task { display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #f3e7e1; border: 1px solid #cfb09f; padding: 14px; }
body.bw-public .project-plan-task > span, body.bw-public .project-plan-finish > span { font-size: 9px; opacity: .65; }
body.bw-public .project-plan-task strong { font-size: 13px; font-weight: 600; }
body.bw-public .project-plan-task small { font-size: 9px; line-height: 1.6; color: var(--accent); }
body.bw-public .project-plan-finish { grid-column: 1 / -1; background: #d4deed; border: 1px solid #a8b8d0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
body.bw-public .project-plan-finish strong { font-size: 12px; font-weight: 600; }
body.bw-public .project-plan-finish > i { margin-left: auto; color: var(--accent); }
body.bw-public .example-table tfoot { font-weight: 700; background: #f3e7e1; }
body.bw-public .example-disclaimer { font-size: 10px; color: var(--muted); line-height: 1.7; margin: 15px 0 0; }
body.bw-public .site-header .button-primary { background: var(--accent); color: #fff; }
body.bw-public .site-header .button-primary:hover { color: #fff; background: var(--accent-hover); }
body.bw-customer-auth .auth-brand { margin: 0; gap: 0; }
body.bw-customer-auth .auth-brand img { width: 33px; height: 33px; margin-right: 10px; }
body.bw-customer-auth .auth-brand > span { margin: 0; }
body.bw-customer-auth .auth-content { background: transparent; padding-inline: 0; }
body.bw-customer-auth .auth-shell-register .auth-content {
    align-items: flex-start;
    padding-top: 0;
}
body.bw-customer-auth .auth-form { max-width: none; width: 100%; margin: 0; padding: 0; justify-items: stretch; }
body.bw-customer-auth .auth-passwords { align-items: start; }
body.bw-customer-auth .auth-field { width: 100%; }
body.bw-customer-auth .auth-field select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--control-radius); background: white; color: var(--ink); font: inherit; font-size: 14px; }
body.bw-customer-auth .auth-top-link { font-size: 11px; color: var(--accent); display: inline-flex; gap: 8px; align-items: center; }
body.bw-customer-auth .auth-button:disabled { opacity: .55; cursor: not-allowed; }
body.bw-customer-auth .project-art { max-width: 325px; margin-top: 24px; transform: rotate(-4deg); }
body.bw-customer-auth .project-art-sheet { padding: 18px; background: #e8edf4; border: 1px solid #dbc3b6; border-radius: 4px; color: var(--accent); }
body.bw-customer-auth .project-art-title { display: flex; align-items: center; gap: 9px; font-size: 8px; letter-spacing: 1px; }
body.bw-customer-auth .project-art-title i { font-size: 18px; }
body.bw-customer-auth .project-art-plan { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 70px 32px; gap: 5px; margin: 16px 0; }
body.bw-customer-auth .project-art-plan span { display: grid; place-items: center; border: 1px solid #dbc3b6; background: #f3e7e1; color: var(--accent); font-size: 9px; }
body.bw-customer-auth .project-art-plan span:first-child { grid-row: span 2; }
body.bw-customer-auth .project-art-plan span:nth-child(2) { background: #ecd2c3; border-color: #cfb09f; }
body.bw-customer-auth .project-art-plan span:nth-child(3) { background: #d4deed; border-color: #a8b8d0; }
body.bw-customer-auth .project-art-caption { display: flex; justify-content: space-between; font-size: 6px; letter-spacing: 1px; }
body.bw-customer-auth .project-art > p { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; color: #c7d2e2; font-size: 9px; }
body.bw-customer-auth .project-art > p > span { width: 5px; height: 5px; border-radius: 50%; background: #e1a38a; }
@media (max-width: 700px) {
    body.bw-customer-auth .auth-field select { min-height: 44px; font-size: 16px; }
    body.bw-customer-auth .auth-topbar { justify-content: flex-end; }
    body.bw-public .site-nav .button-primary { margin-top: 8px; }
}
@media (max-width: 380px) {
    body.bw-customer-auth .auth-passwords { grid-template-columns: 1fr; }
    body.bw-public .project-plan-task { padding: 10px; }
    body.bw-public .project-plan-main strong { font-size: 13px; }
}

/* Customer page motion keeps the existing BuildWise theme. */
@keyframes buildwise-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    html:has(> body.bw-public), html:has(> body.bw-customer-auth) {
        scroll-behavior: smooth;
    }

    body.bw-public .hero-copy,
    body.bw-customer-auth .story-content {
        animation: buildwise-enter 650ms ease-out both;
    }

    body.bw-public .hero-visual,
    body.bw-customer-auth .auth-card {
        animation: buildwise-enter 700ms 120ms ease-out both;
    }

    body.bw-public [role="tabpanel"]:not([hidden]) {
        animation: buildwise-enter 300ms ease-out;
    }

    body.bw-public .button,
    body.bw-customer-auth .auth-button {
        transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    }

    body.bw-public .step,
    body.bw-public .feature-list article {
        transition: transform 200ms ease, box-shadow 200ms ease;
    }

    body.bw-customer-auth .auth-field input,
    body.bw-customer-auth .auth-field select {
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    body.bw-public .public-reveal-pending {
        opacity: 0;
        transform: translateY(22px);
    }

    body.bw-public .public-reveal-visible {
        animation: buildwise-enter 600ms ease-out both;
    }

    body.bw-public .step.public-reveal-visible:nth-child(2) { animation-delay: 80ms; }
    body.bw-public .step.public-reveal-visible:nth-child(3) { animation-delay: 160ms; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.bw-public .button:hover,
    body.bw-customer-auth .auth-button:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 14px #14233b18;
    }

    body.bw-public .step:hover,
    body.bw-public .feature-list article:hover {
        transform: translateY(-3px);
    }
}

/* Gemini scope suggestions use the shared BuildWise form language. */
.inline-action-form { display: inline-flex; margin: 0; }
.quotation-wording-tools { display: grid; justify-items: start; gap: 4px; margin: 14px 0 20px; }
.quotation-wording-tools .ai-disclosure, .quotation-wording-tools .ai-setup-note { margin: 4px 0; }
.quotation-review-panel .card-body { display: grid; gap: 10px; }
.quotation-review-panel .card-body > p { margin: 0; }
.quotation-review-panel .ai-disclosure, .quotation-review-panel .ai-setup-note { margin: 0; }
.quotation-review-findings { display: grid; gap: 10px; margin-top: 4px; }
.quotation-review-findings h3 { margin: 0; font-size: 15px; }
.quotation-review-finding { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--control-radius); background: #fff; }
.quotation-review-finding p { margin: 0; }
.quotation-review-finding-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quotation-review-clear { margin-top: 4px !important; }
.ai-scope-panel { padding: 22px; }
.ai-scope-panel .configuration-preview-heading { align-items: flex-start; gap: 16px; }
.ai-scope-panel .configuration-preview-heading p { color: var(--muted); margin: 6px 0 0; max-width: 760px; }
.ai-disclosure, .ai-setup-note, .ai-review-instruction { border-radius: var(--control-radius); padding: 12px 14px; margin: 14px 0; font-size: 13px; line-height: 1.55; }
.ai-disclosure { color: var(--ink); background: #f3f6fa; border: 1px solid var(--line); }
.ai-setup-note { color: #6c4d1e; background: #fff8e9; border: 1px solid #edd9ad; }
.ai-review-instruction { color: var(--muted); background: transparent; padding-inline: 0; }
.ai-draft-card { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--card-radius); background: #fff; }
.request-validation-summary:empty { display: none; }

/* Form actions stay attached to their card, matching the detail-card footer pattern. */
.form-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 24px;
    margin: 20px calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
    padding: 12px var(--card-padding);
    border-top: 1px solid var(--line);
    background: #f8fafc;
}

.form-card-footer .form-actions,
.form-card-footer form {
    margin: 0;
}

.detail-card > .form-card-footer {
    justify-content: space-between;
    margin: auto 0 0;
}

.detail-card > .form-card-footer .record-metadata {
    margin-right: auto;
}

.detail-card > .form-card-footer .form-actions {
    flex: 1 1 auto;
}

@media (max-width: 700px) {
    .ai-scope-panel .configuration-preview-heading { flex-direction: column; }
}

@media (max-width: 600px) {
    .form-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .form-card-footer .form-actions {
        justify-content: flex-start;
    }
}