/* Global Ubhaar-Vyapaar interface system. */
:root {
            --brand-50: #eef8f7;
            --brand-100: #d7eeeb;
            --brand-200: #addbd6;
            --brand-300: #79c2bc;
            --brand-400: #43a49c;
            --brand-500: #2b8c84;
            --brand-600: #20756f;
            --brand-700: #185f5b;
            --brand-800: #144c4a;
            --brand-900: #102f3c;

            --accent: #d5963d;
            --accent-strong: #a9651e;
            --accent-soft: #fff4e2;

            --background: #f4f7f8;
            --surface: #ffffff;
            --surface-alt: #f8fbfb;
            --surface-raised: #ffffff;

            --border: #d8e2e6;
            --border-strong: #b8c7ce;

            --text: #18212b;
            --text-muted: #647280;

            --success: #257a4f;
            --warning: #a9651e;
            --danger: #b43a32;
            --info: #2f6fa6;

            --success-bg: #eaf6ef;
            --success-text: #1f6844;
            --warning-bg: #fff4df;
            --warning-text: #814c14;
            --danger-bg: #fff0ee;
            --danger-text: #9c2c25;
            --info-bg: #eaf3fb;
            --info-text: #245d90;

            --shadow:
                0 10px 32px rgba(16, 47, 60, 0.08);
            --shadow-soft:
                0 8px 24px rgba(16, 47, 60, 0.06);
            --shadow-crisp:
                0 1px 2px rgba(16, 47, 60, 0.08),
                0 8px 20px rgba(16, 47, 60, 0.08);
            --shadow-lift:
                0 16px 44px rgba(16, 47, 60, 0.13);

            --radius: 8px;
            --radius-sm: 6px;
            --duration-fast: 160ms;
            --duration-med: 260ms;
            --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

            --navy: var(--brand-900);
            --navy-dark: #0b2530;
            --teal: var(--brand-500);
            --teal-dark: var(--brand-700);
            --teal-soft: var(--brand-50);
            --green: var(--brand-500);
            --green-dark: var(--brand-700);
            --green-soft: var(--brand-50);
            --gold: var(--accent);
            --charcoal: var(--text);
            --slate: var(--text-muted);
            --soft-slate: var(--text-muted);
            --muted: var(--text-muted);
            --line: var(--border);
            --line-strong: var(--border-strong);
            --surface-soft: var(--surface-alt);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--background);
            color: var(--text);
            font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            line-height: 1.6;
        }

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

        a:hover {
            text-decoration: underline;
        }

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

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible {
            outline: 3px solid #d18b19;
            outline-offset: 4px;
        }

        .container {
            width: min(1180px, calc(100% - 32px));
            margin-inline: auto;
        }

        .skip-link {
            position: absolute;
            top: -120px;
            left: 16px;
            z-index: 1000;

            padding: 10px 14px;

            border-radius: 8px;

            background: var(--surface);
            color: var(--navy);

            font-weight: 800;
            box-shadow: var(--shadow);
        }

        .skip-link:focus {
            top: 14px;
        }


        /* -------------------------
           TOP UTILITY BAR
        -------------------------- */

        .utility-bar {
            background: var(--navy-dark);
            color: #d7e2ec;
            font-size: 13px;
        }

        .utility-inner {
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .utility-inner p {
            margin: 0;
        }

        .utility-badge {
            color: #ffffff;
            font-weight: 700;
        }


        /* -------------------------
           MAIN HEADER
        -------------------------- */

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;

            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(10px);

            border-bottom: 1px solid var(--border);
        }

        .header-inner {
            min-height: 74px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 24px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;

            color: var(--navy);
            text-decoration: none;
        }

        .brand:hover {
            text-decoration: none;
        }

        .brand-mark {
            width: 42px;
            height: 42px;

            display: grid;
            place-items: center;

            border-radius: 12px;

            background: linear-gradient(
                135deg,
                var(--navy),
                var(--teal)
            );

            color: white;
            font-weight: 900;
            letter-spacing: 0;
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
        }

        .brand-name {
            font-weight: 850;
            font-size: 19px;
        }

        .brand-subtitle {
            margin-top: 3px;

            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
        }


        /* -------------------------
           NAVIGATION
        -------------------------- */

        .site-nav {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            flex-wrap: wrap;
            gap: 6px;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            min-height: 40px;
            padding: 8px 11px;

            border-radius: 9px;

            color: var(--text);

            font-size: 14px;
            font-weight: 650;

            text-decoration: none;
        }

        .nav-link:hover {
            background: var(--teal-soft);
            color: var(--teal-dark);
            text-decoration: none;
        }

        .notification-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-width: 21px;
            height: 21px;

            padding: 2px 6px;

            border-radius: 999px;

            background: #c9342b;
            color: white;

            font-size: 11px;
            font-weight: 800;
        }

        .account-link {
            color: var(--muted);
        }


        /* -------------------------
           BUTTONS
        -------------------------- */

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            gap: 7px;

            min-height: 42px;

            padding: 10px 17px;

            border: 0;
            border-radius: 10px;

            background: var(--navy);
            color: white;

            font-weight: 750;
            font-size: 14px;

            cursor: pointer;
            text-decoration: none;
        }

        .button:hover {
            background: var(--navy-dark);
            color: white;
            text-decoration: none;
        }

        .button-primary {
            background: var(--teal);
        }

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

        .button-secondary {
            border: 1px solid var(--border);
            background: white;
            color: var(--navy);
        }

        .button-secondary:hover {
            background: #f4f7fa;
            color: var(--navy);
        }

        .button-danger {
            background: #b42318;
        }

        .button-danger:hover {
            background: #901d14;
        }

        .button-accept {
            background: #216e39;
        }

        .button-accept:hover {
            background: #18552b;
        }

        .button-reject {
            background: #b42318;
        }

        .button-reject:hover {
            background: #8f1c13;
        }

        .logout-form {
            margin: 0;
        }


        /* -------------------------
           MAIN CONTENT
        -------------------------- */

        .page-content {
            min-height: calc(100vh - 210px);
            padding-top: 34px;
            padding-bottom: 56px;
        }

        .page-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            flex-wrap: wrap;
            gap: 20px;

            margin-bottom: 28px;
        }

        .page-heading h1 {
            margin: 0 0 5px;

            color: var(--navy);

            font-size: clamp(30px, 4vw, 42px);
            line-height: 1.12;

            letter-spacing: 0;
        }

        .page-heading p {
            max-width: 680px;

            margin: 0;

            color: var(--muted);
        }

        .eyebrow {
            margin: 0 0 8px;

            color: var(--teal);

            font-size: 12px;
            font-weight: 850;

            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 20px;
        }

        .section-heading h2 {
            margin: 0 0 4px;
            color: var(--navy);
            font-size: 24px;
            line-height: 1.2;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
        }

        .dashboard-band {
            margin-top: 34px;
        }

        .action-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .notification-actions {
            margin-bottom: 24px;
        }


        /* -------------------------
           MESSAGES
        -------------------------- */

        .messages {
            display: grid;
            gap: 10px;

            margin-bottom: 24px;
        }

        .message {
            margin: 0;

            padding: 14px 16px;

            border: 1px solid #b8ddd4;
            border-radius: 10px;

            background: var(--teal-soft);
        }

        .message.success {
            border-color: #b6d9c0;
            background: var(--success-bg);
            color: var(--success-text);
        }

        .message.error {
            border-color: #efc1bc;
            background: var(--danger-bg);
            color: var(--danger-text);
        }

        .message.warning {
            border-color: #ead69b;
            background: var(--warning-bg);
            color: var(--warning-text);
        }


        /* -------------------------
           CARDS
        -------------------------- */

        .record-grid {
            display: grid;

            grid-template-columns:
                repeat(
                    auto-fit,
                    minmax(min(100%, 320px), 1fr)
                );

            gap: 20px;
        }

        .record-card {
            padding: 24px;

            border: 1px solid var(--border);
            border-radius: var(--radius);

            background: var(--surface);

            box-shadow: var(--shadow);
        }

        .record-card h2,
        .record-card h3 {
            color: var(--navy);
        }

        .record-meta {
            color: var(--muted);
            font-size: 13px;
        }

        .record-actions {
            display: flex;
            flex-wrap: wrap;

            gap: 10px;

            margin-top: 20px;
        }

        .record-facts {
            margin: 20px 0;
        }

        .record-facts dt {
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
        }

        .record-facts dd {
            margin: 4px 0 0;
        }


        /* -------------------------
           STAT CARDS
        -------------------------- */

        .stats-grid {
            display: grid;

            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            gap: 16px;

            margin-bottom: 30px;
        }

        .stat-card {
            padding: 20px;

            border: 1px solid var(--border);
            border-radius: 14px;

            background: var(--surface);

            box-shadow:
                0 4px 18px rgba(15, 37, 59, 0.04);
        }

        .stat-card dt {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .stat-card dd {
            margin: 7px 0 0;

            color: var(--navy);

            font-size: 32px;
            font-weight: 850;
            line-height: 1.15;
        }

        .stat-card-attention {
            border-color: #ecd692;
            background: #fffaf0;
        }


        /* -------------------------
           STATUS / TRUST PILLS
        -------------------------- */

        .status-pill {
            display: inline-flex;
            align-items: center;

            padding: 5px 10px;

            border-radius: 999px;

            background: #edf2f7;
            color: #405268;

            font-size: 12px;
            font-weight: 750;
        }

        .status-pending {
            background: var(--warning-bg);
            color: var(--warning-text);
        }

        .status-accepted {
            background: var(--success-bg);
            color: var(--success-text);
        }

        .status-rejected {
            background: var(--danger-bg);
            color: var(--danger-text);
        }

        .trust-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;

            padding: 5px 9px;

            border-radius: 999px;

            background: var(--teal-soft);
            color: var(--teal-dark);

            font-size: 12px;
            font-weight: 800;
        }


        /* -------------------------
           FORMS
        -------------------------- */

        .auth-card {
            width: min(620px, 100%);

            margin: 24px auto;
            padding: 30px;

            border: 1px solid var(--border);
            border-radius: var(--radius);

            background: var(--surface);

            box-shadow: var(--shadow);
        }

        .auth-card h1 {
            margin-bottom: 10px;

            color: var(--navy);

            font-size: 32px;
            line-height: 1.2;
        }

        .auth-intro {
            margin-bottom: 24px;
            color: var(--muted);
        }

        .styled-form p {
            margin-bottom: 18px;
        }

        .styled-form label {
            display: block;

            margin-bottom: 7px;

            color: var(--text);

            font-size: 14px;
            font-weight: 750;
        }

        .styled-form input,
        .styled-form select,
        .styled-form textarea {
            width: 100%;

            padding: 12px 13px;

            border: 1px solid #bfc9d5;
            border-radius: 9px;

            background: white;
            color: var(--text);

            outline: none;
        }

        .styled-form input:focus,
        .styled-form select:focus,
        .styled-form textarea:focus {
            border-color: var(--teal);

            box-shadow:
                0 0 0 3px rgba(22, 129, 122, 0.12);
        }

        .styled-form textarea {
            min-height: 120px;
            resize: vertical;
        }

        .form-submit {
            width: 100%;
            margin-top: 6px;
        }

        .helptext {
            display: block;

            margin-top: 5px;

            color: var(--muted);
            font-size: 12px;
        }

        .errorlist {
            margin: 6px 0;
            padding-left: 20px;

            color: var(--danger-text);

            font-size: 13px;
        }

        .auth-links {
            margin-top: 22px;

            padding-top: 18px;

            border-top: 1px solid var(--border);
        }


        /* -------------------------
           EMPTY STATES
        -------------------------- */

        .empty-panel {
            grid-column: 1 / -1;

            padding: 46px 24px;

            border: 1px dashed #b9c5d1;
            border-radius: var(--radius);

            background: var(--surface);

            text-align: center;
        }

        .empty-panel h2 {
            margin-top: 0;
            color: var(--navy);
        }

        .empty-panel p {
            color: var(--muted);
        }

        .listing-image {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: contain;
            border-radius: 8px;
            margin-bottom: 18px;
            background: #f0f4f7;
        }

        .listing-image-placeholder {
            display: grid;
            place-items: center;
            width: 100%;
            aspect-ratio: 4 / 3;
            margin-bottom: 18px;
            border: 1px dashed #bac6d2;
            border-radius: 8px;
            background: #f0f4f7;
            color: var(--muted);
            font-size: 14px;
        }

        .detail-image {
            display: block;
            width: 100%;
            max-height: 480px;
            object-fit: contain;
            border-radius: 10px;
            margin-bottom: 24px;
            background: #f0f4f7;
        }

        .conversation-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
            gap: 20px;
            align-items: start;
        }

        .conversation-thread {
            display: grid;
            gap: 14px;
        }

        .conversation-message {
            width: min(680px, 100%);
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
            box-shadow: 0 4px 18px rgba(15, 37, 59, 0.04);
        }

        .conversation-message-own {
            justify-self: end;
            border-color: #b8ddd4;
            background: var(--teal-soft);
        }

        .conversation-message-header {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
            color: var(--muted);
            font-size: 13px;
        }

        .conversation-message-header strong {
            color: var(--navy);
        }

        .conversation-message p {
            margin: 0;
        }

        .conversation-form {
            padding: 20px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
            box-shadow: var(--shadow);
        }


        /* -------------------------
           FOOTER
        -------------------------- */

        .site-footer {
            border-top: 1px solid var(--border);
            background: #ffffff;
        }

        .footer-inner {
            min-height: 90px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            flex-wrap: wrap;
            gap: 14px;

            color: var(--muted);
            font-size: 13px;
        }

        .footer-inner p {
            margin: 0;
        }


        /* -------------------------
           ACCESSIBILITY
        -------------------------- */

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


        /* -------------------------
           RESPONSIVE
        -------------------------- */

        @media (max-width: 940px) {
            .header-inner {
                align-items: flex-start;
                flex-direction: column;

                padding-top: 14px;
                padding-bottom: 14px;
            }

            .site-nav {
                width: 100%;
                justify-content: flex-start;
            }

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

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

        @media (max-width: 620px) {
            .container {
                width: min(100% - 22px, 1180px);
            }

            .utility-inner {
                padding: 7px 0;
            }

            .utility-inner p:last-child {
                display: none;
            }

            .brand-subtitle {
                display: none;
            }

            .site-nav {
                gap: 3px;
            }

            .nav-link {
                min-height: 38px;
                padding: 7px 9px;
            }

            .page-content {
                padding-top: 24px;
            }

            .record-card {
                padding: 20px;
            }

            .auth-card {
                padding: 23px;
            }

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

            .footer-inner {
                padding: 20px 0;
            }
        }

        @media (max-width: 390px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }


        /* -------------------------
           PHASE 1 SHARED REFINEMENTS
        -------------------------- */

        .record-card,
        .stat-card,
        .auth-card,
        .empty-panel,
        .listing-image,
        .listing-image-placeholder,
        .detail-image,
        .message {
            border-radius: var(--radius);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            width: fit-content;
            padding: 5px 10px;
            border-radius: 999px;
            background: var(--teal-soft);
            color: var(--teal-dark);
            font-size: 12px;
            font-weight: 800;
            line-height: 1.2;
        }

        .status-declined {
            background: var(--danger-bg);
            color: var(--danger-text);
        }

        .dashboard-section-title {
            margin: 6px 0 18px;
            color: var(--navy);
            font-size: 22px;
            line-height: 1.2;
        }

        .form-grid {
            display: grid;
            gap: 18px;
        }

        .form-field {
            margin: 0;
        }

        .form-field label {
            display: block;
            margin-bottom: 7px;
            color: var(--text);
            font-size: 14px;
            font-weight: 750;
        }

        .form-field input,
        .form-field select,
        .form-field textarea,
        .search-fields input,
        .search-fields select {
            width: 100%;
            min-height: 44px;
            padding: 12px 13px;
            border: 1px solid #bfc9d5;
            border-radius: var(--radius);
            background: #ffffff;
            color: var(--text);
            outline: none;
        }

        .form-field input[type="file"] {
            padding: 10px;
        }

        .form-field input[type="checkbox"] {
            width: auto;
            min-height: 0;
            margin-right: 8px;
        }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus,
        .search-fields input:focus,
        .search-fields select:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(22, 129, 122, 0.12);
        }

        .form-field-error input,
        .form-field-error select,
        .form-field-error textarea {
            border-color: #b42318;
        }

        .form-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 4px;
        }

        .table-wrap {
            overflow-x: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 13px 14px;
            border-bottom: 1px solid var(--border);
            text-align: left;
            vertical-align: top;
        }

        .data-table th {
            background: var(--surface-soft);
            color: var(--navy);
            font-size: 13px;
            font-weight: 850;
        }

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

        .pagination,
        .profile-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px;
        }

        .pagination-summary {
            margin-top: 28px;
            color: var(--muted);
            font-size: 14px;
            text-align: center;
        }

        .back-link {
            display: inline-block;
            margin-bottom: 24px;
            font-size: 14px;
            font-weight: 750;
        }

        .hero {
            margin-bottom: 28px;
            padding: 36px;
            border: 1px solid #d8e6e2;
            border-radius: var(--radius);
            background: linear-gradient(135deg, #eaf5f2, #ffffff);
        }

        .hero h1 {
            max-width: 800px;
            margin: 0 0 16px;
            color: var(--navy);
            font-size: clamp(30px, 5vw, 48px);
            line-height: 1.12;
            letter-spacing: 0;
        }

        .hero-description {
            max-width: 720px;
            margin: 0 0 26px;
            color: var(--muted);
            font-size: 17px;
        }

        .search-form label {
            display: block;
            margin-bottom: 7px;
            color: var(--text);
            font-size: 13px;
            font-weight: 800;
        }

        .search-fields {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 12px;
            align-items: end;
        }

        .search-field {
            grid-column: span 4;
            min-width: 0;
        }

        .category-field {
            grid-column: span 2;
            min-width: 0;
        }

        .compact-field {
            grid-column: span 1;
            min-width: 0;
        }

        .search-actions {
            grid-column: span 2;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .search-actions .button {
            min-height: 44px;
        }

        .category-discovery {
            margin-bottom: 34px;
        }

        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .category-chip {
            display: inline-flex;
            align-items: center;
            min-height: 38px;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--surface);
            color: var(--navy);
            font-size: 14px;
            font-weight: 750;
            text-decoration: none;
        }

        .category-chip:hover,
        .category-chip-active {
            border-color: #9fcfc9;
            background: var(--teal-soft);
            color: var(--teal-dark);
            text-decoration: none;
        }

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

        .dashboard-focus {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 24px;
        }

        .dashboard-focus h2 {
            margin: 0 0 4px;
            color: var(--navy);
            font-size: 24px;
        }

        .dashboard-focus p:last-child {
            margin-bottom: 0;
        }

        .alert-info {
            border-color: #bdd4f5;
            background: #eaf2ff;
            color: #1d4f91;
        }

        @media (max-width: 620px) {
            .form-actions .button {
                width: 100%;
            }

            .hero {
                padding: 24px 20px;
            }

            .hero-description {
                font-size: 15px;
            }

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

            .search-field,
            .category-field,
            .compact-field,
            .search-actions {
                grid-column: 1;
            }

            .search-actions .button {
                width: 100%;
            }

            .dashboard-focus {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        .status-available {
            background: var(--success-bg);
            color: var(--success-text);
        }

        .status-limited {
            background: var(--warning-bg);
            color: var(--warning-text);
        }

        .status-paused {
            background: #edf2f7;
            color: #405268;
        }

        .status-confirmed,
        .status-in_production,
        .status-completed,
        .status-approved,
        .status-funded {
            background: var(--success-bg);
            color: var(--success-text);
        }

        .status-awaiting_funding,
        .status-milestone_pending {
            background: var(--warning-bg);
            color: var(--warning-text);
        }

        .status-ready_to_ship,
        .status-shipped {
            background: var(--info-bg);
            color: var(--info-text);
        }

        .status-cancelled,
        .status-disputed {
            background: var(--danger-bg);
            color: var(--danger-text);
        }


        /* -------------------------
           PHASE 3 MARKETPLACE REDESIGN
        -------------------------- */

        :root {
            --ink: #111827;
            --charcoal: #18212f;
            --charcoal-2: #222f3f;
            --blue: #2f5f98;
            --green: #2f7d68;
            --gold: #c28b2c;
            --red: #b42318;
            --mist: #eef3f6;
            --line: #d7e0e7;
            --shadow:
                0 18px 48px rgba(24, 33, 47, 0.11);
            --shadow-soft:
                0 8px 24px rgba(24, 33, 47, 0.07);
            --radius: 8px;
            --radius-sm: 6px;
        }

        body {
            background:
                linear-gradient(180deg, #eef3f6 0, #f8fafb 360px);
            color: var(--ink);
            font-size: 15px;
        }

        a {
            color: var(--blue);
        }

        .container {
            width: min(1240px, calc(100% - 40px));
        }

        .utility-bar {
            background: var(--charcoal);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .utility-inner {
            min-height: 38px;
            color: #d8e3eb;
        }

        .utility-badge {
            color: #ffffff;
            letter-spacing: 0.2px;
        }

        .site-header {
            background: rgba(255, 255, 255, 0.94);
            border-bottom: 1px solid rgba(24, 33, 47, 0.12);
            box-shadow: 0 8px 28px rgba(24, 33, 47, 0.06);
        }

        .header-inner {
            min-height: 84px;
            gap: 22px;
        }

        .brand-mark {
            width: 48px;
            height: 48px;
            border-radius: var(--radius);
            background: linear-gradient(135deg, var(--charcoal), var(--green));
            box-shadow: 0 12px 24px rgba(24, 33, 47, 0.18);
        }

        .brand-name {
            color: var(--charcoal);
            font-size: 20px;
        }

        .brand-subtitle {
            color: #64748b;
            font-size: 12px;
        }

        .site-nav,
        .nav-group {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .site-nav {
            flex: 1;
            justify-content: space-between;
        }

        .nav-group-primary {
            justify-content: flex-start;
        }

        .nav-group-account {
            justify-content: flex-end;
        }

        .nav-link {
            min-height: 40px;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            color: #334155;
            font-weight: 750;
            transition:
                background-color 160ms ease,
                color 160ms ease,
                box-shadow 160ms ease;
        }

        .nav-link:hover,
        .nav-link-strong {
            background: #eef6f3;
            color: #1f6c59;
        }

        .nav-link-strong {
            box-shadow: inset 0 0 0 1px #c8dfd7;
        }

        .notification-link {
            position: relative;
        }

        .account-link {
            color: #596777;
            background: #f4f7f9;
        }

        .button {
            min-height: 44px;
            padding: 11px 18px;
            border-radius: var(--radius-sm);
            background: var(--charcoal);
            box-shadow: 0 7px 16px rgba(24, 33, 47, 0.12);
            transition:
                transform 150ms ease,
                box-shadow 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease;
        }

        .button:hover {
            background: #101722;
            transform: translateY(-1px);
            box-shadow: 0 11px 22px rgba(24, 33, 47, 0.16);
        }

        .button-primary {
            background: var(--green);
        }

        .button-primary:hover {
            background: #266955;
        }

        .button-secondary {
            border: 1px solid #cbd6df;
            background: #ffffff;
            color: var(--charcoal);
            box-shadow: none;
        }

        .button-secondary:hover {
            border-color: #aebdca;
            background: #f5f8fa;
            color: var(--charcoal);
            box-shadow: none;
        }

        .button-dark-secondary {
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            box-shadow: none;
        }

        .button-dark-secondary:hover {
            background: rgba(255, 255, 255, 0.14);
        }

        .button-compact {
            min-height: 38px;
            padding: 8px 13px;
        }

        .button-disabled {
            background: #e7edf2;
            color: #64748b;
            box-shadow: none;
            cursor: not-allowed;
        }

        .button-disabled:hover {
            background: #e7edf2;
            color: #64748b;
            transform: none;
        }

        .full-width {
            width: 100%;
        }

        .page-content {
            padding-top: 42px;
            padding-bottom: 72px;
        }

        .page-heading,
        .dashboard-hero {
            margin-bottom: 32px;
            padding: 28px;
            border: 1px solid rgba(24, 33, 47, 0.1);
            border-radius: var(--radius);
            background: #ffffff;
            box-shadow: var(--shadow-soft);
        }

        .page-heading h1 {
            color: var(--charcoal);
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.05;
        }

        .page-heading p {
            color: #596777;
            font-size: 16px;
        }

        .eyebrow {
            color: var(--green);
            letter-spacing: 1.2px;
        }

        .section-heading {
            margin-bottom: 22px;
        }

        .section-heading h2 {
            color: var(--charcoal);
            font-size: clamp(24px, 3vw, 32px);
        }

        .section-heading p {
            color: #64748b;
        }

        .hero-marketplace {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
            gap: 30px;
            align-items: stretch;
            margin: 0 0 38px;
            padding: 42px;
            border: 0;
            border-radius: var(--radius);
            background:
                linear-gradient(145deg, rgba(24, 33, 47, 0.96), rgba(36, 55, 72, 0.95)),
                linear-gradient(90deg, var(--charcoal), var(--green));
            color: #ffffff;
            box-shadow: var(--shadow);
        }

        .hero-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 470px;
        }

        .hero-marketplace .eyebrow {
            color: #9fe2ce;
        }

        .hero h1 {
            max-width: 780px;
            color: #ffffff;
            font-size: clamp(42px, 7vw, 76px);
            line-height: 0.98;
        }

        .hero-description {
            max-width: 690px;
            color: #d9e4eb;
            font-size: 19px;
        }

        .hero-actions,
        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-proof {
            margin-top: 30px;
        }

        .hero-proof span {
            padding: 9px 12px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.08);
            color: #f8fafc;
            font-size: 13px;
            font-weight: 800;
        }

        .hero-search-panel {
            align-self: center;
            padding: 26px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius);
            background: #ffffff;
            color: var(--ink);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
        }

        .search-panel-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
        }

        .search-panel-heading h2 {
            margin: 0;
            color: var(--charcoal);
            font-size: 24px;
            line-height: 1.15;
        }

        .clear-link {
            color: #596777;
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .search-form label,
        .styled-form label,
        .form-field label {
            color: #344256;
            font-weight: 850;
        }

        .search-fields {
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 14px;
        }

        .search-field,
        .search-field-wide {
            grid-column: 1 / -1;
        }

        .category-field,
        .compact-field {
            grid-column: span 3;
        }

        .search-actions {
            grid-column: 1 / -1;
        }

        .search-actions .button {
            width: 100%;
        }

        .search-fields input,
        .search-fields select,
        .styled-form input,
        .styled-form select,
        .styled-form textarea,
        .form-field input,
        .form-field select,
        .form-field textarea {
            min-height: 48px;
            border: 1px solid #c7d2dc;
            border-radius: var(--radius-sm);
            background: #fbfcfd;
        }

        .search-fields input:focus,
        .search-fields select:focus,
        .styled-form input:focus,
        .styled-form select:focus,
        .styled-form textarea:focus,
        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            border-color: var(--green);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(47, 125, 104, 0.14);
        }

        .category-discovery {
            margin: 38px 0 46px;
            padding: 30px;
            border: 1px solid #d7e0e7;
            border-radius: var(--radius);
            background: #ffffff;
            box-shadow: var(--shadow-soft);
        }

        .category-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }

        .category-chip {
            min-height: 58px;
            justify-content: space-between;
            padding: 14px 16px;
            border: 1px solid #d5dee6;
            border-radius: var(--radius);
            background:
                linear-gradient(180deg, #ffffff, #f7fafb);
            color: var(--charcoal);
            box-shadow: 0 4px 14px rgba(24, 33, 47, 0.05);
        }

        .category-chip::after {
            content: ">";
            color: var(--green);
            font-weight: 900;
        }

        .category-chip:hover,
        .category-chip-active {
            border-color: #95c8ba;
            background: #eef8f4;
            color: #1f6c59;
        }

        .listings {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
            gap: 24px;
        }

        .listing-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(24, 33, 47, 0.1);
            border-radius: var(--radius);
            background: #ffffff;
            box-shadow: var(--shadow-soft);
        }

        .listing-media {
            position: relative;
            background: #e9eff3;
        }

        .listing-image,
        .listing-image-placeholder {
            height: 230px;
            margin: 0;
            border: 0;
            border-radius: 0;
            background: #edf2f6;
            object-fit: cover;
        }

        .listing-image-placeholder {
            display: grid;
            place-items: center;
            color: #64748b;
            font-weight: 800;
        }

        .listing-card-header {
            position: absolute;
            inset: 14px 14px auto 14px;
            margin: 0;
        }

        .listing-card-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 14px;
            padding: 22px;
        }

        .listing-title-row h3 {
            margin: 4px 0 0;
            color: var(--charcoal);
            font-size: 22px;
            line-height: 1.2;
        }

        .listing-title-row a {
            color: inherit;
        }

        .listing-category {
            display: inline-flex;
            width: fit-content;
            margin: 0;
            padding: 5px 9px;
            border-radius: var(--radius-sm);
            background: #eef3f6;
            color: #445569;
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .company {
            margin: 0;
            color: #596777;
        }

        .company a {
            display: block;
            color: var(--charcoal);
            font-weight: 850;
        }

        .company span {
            display: block;
        }

        .description {
            margin: 0;
            color: #596777;
        }

        .listing-meta,
        .detail-capability-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 4px 0 0;
        }

        .listing-meta div,
        .detail-capability-grid div {
            padding: 13px;
            border: 1px solid #dde5eb;
            border-radius: var(--radius-sm);
            background: #f8fafb;
        }

        .listing-meta dt,
        .detail-capability-grid dt {
            color: #64748b;
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .listing-meta dd,
        .detail-capability-grid dd {
            margin: 3px 0 0;
            color: var(--charcoal);
            font-weight: 850;
            line-height: 1.35;
        }

        .listing-price-fact {
            background: #fff8e8 !important;
            border-color: #ead6a6 !important;
        }

        .listing-price-fact dd {
            font-size: 19px;
        }

        .listing-price-fact span,
        .detail-price span {
            color: #64748b;
            font-size: 13px;
            font-weight: 650;
        }

        .listing-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: auto;
        }

        .record-grid {
            gap: 22px;
        }

        .record-card,
        .stat-card,
        .auth-card,
        .empty-panel,
        .summary-card,
        .order-timeline-panel {
            border: 1px solid rgba(24, 33, 47, 0.1);
            border-radius: var(--radius);
            background: #ffffff;
            box-shadow: var(--shadow-soft);
        }

        .record-card {
            padding: 26px;
        }

        .record-card h2,
        .record-card h3 {
            margin-top: 10px;
            color: var(--charcoal);
            line-height: 1.2;
        }

        .action-card {
            border-top: 4px solid var(--green);
        }

        .dashboard-spotlight {
            padding: 26px;
            border: 1px solid #ecd59b;
            border-radius: var(--radius);
            background: #fffaf0;
        }

        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 18px;
        }

        .stat-card {
            position: relative;
            overflow: hidden;
            padding: 22px;
        }

        .stat-card::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 5px;
            background: #b7c8d6;
        }

        .stat-card-attention::before {
            background: var(--gold);
        }

        .stat-card dt {
            color: #596777;
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        .stat-card dd {
            color: var(--charcoal);
            font-size: 38px;
        }

        .stat-card-attention {
            border-color: #ead6a6;
            background: #fff8e8;
        }

        .dashboard-focus {
            padding: 30px;
            border-top: 5px solid var(--green);
        }

        .verification-panel {
            background:
                linear-gradient(90deg, #ffffff, #f2f8f5);
        }

        .status-pill,
        .trust-badge,
        .badge {
            border: 1px solid transparent;
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: 0.1px;
        }

        .trust-badge {
            border-color: #bbdbc9;
            background: #eaf7ee;
            color: #216e39;
        }

        .status-available,
        .status-accepted,
        .status-approved,
        .status-completed,
        .status-funded,
        .status-confirmed,
        .status-in_production {
            border-color: #bbdbc9;
            background: #eaf7ee;
            color: #216e39;
        }

        .status-pending,
        .status-limited,
        .status-awaiting_funding,
        .status-milestone_pending {
            border-color: #ead6a6;
            background: #fff5dc;
            color: #855f00;
        }

        .status-rejected,
        .status-declined,
        .status-cancelled,
        .status-disputed {
            border-color: #efc1bc;
            background: #fff0ee;
            color: #a3231b;
        }

        .status-ready_to_ship,
        .status-shipped {
            border-color: #bbd3f0;
            background: #eaf2ff;
            color: #1d4f91;
        }

        .message {
            border-color: #b8d9cf;
            border-radius: var(--radius);
            background: #eef8f4;
            color: #245c4c;
        }

        .compact-message {
            margin-bottom: 14px;
            padding: 12px;
            font-size: 14px;
        }

        .empty-panel {
            padding: 50px 28px;
            border-style: dashed;
            background: #fbfcfd;
        }

        .empty-panel h2,
        .empty-state h3 {
            color: var(--charcoal);
        }

        .table-wrap {
            border-color: #d7e0e7;
            box-shadow: var(--shadow-soft);
        }

        .data-table th {
            background: #eef3f6;
            color: var(--charcoal);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .data-table tr:hover td {
            background: #fbfcfd;
        }

        .listing-detail-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
            gap: 26px;
            align-items: start;
        }

        .detail-main-panel,
        .summary-card {
            overflow: hidden;
            border: 1px solid rgba(24, 33, 47, 0.1);
            border-radius: var(--radius);
            background: #ffffff;
            box-shadow: var(--shadow-soft);
        }

        .detail-media-panel {
            background: #e9eff3;
        }

        .detail-image,
        .detail-image-placeholder {
            display: grid;
            place-items: center;
            width: 100%;
            max-height: 520px;
            min-height: 340px;
            margin: 0;
            border-radius: 0;
            object-fit: cover;
            background: #edf2f6;
            color: #64748b;
            font-weight: 800;
        }

        .detail-content-panel {
            padding: 32px;
        }

        .detail-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }

        .detail-content-panel h1 {
            margin: 0 0 12px;
            color: var(--charcoal);
            font-size: clamp(34px, 4.5vw, 58px);
            line-height: 1.02;
            letter-spacing: 0;
        }

        .detail-manufacturer-line {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 14px;
            margin: 0;
            color: #64748b;
        }

        .detail-manufacturer-line a {
            color: var(--charcoal);
            font-weight: 850;
        }

        .detail-section {
            margin-top: 30px;
            padding-top: 26px;
            border-top: 1px solid #dfe7ed;
        }

        .detail-section h2,
        .summary-card h2 {
            margin: 0 0 14px;
            color: var(--charcoal);
            font-size: 22px;
            line-height: 1.2;
        }

        .detail-section p,
        .summary-card p {
            color: #596777;
        }

        .detail-capability-grid .wide-fact {
            grid-column: 1 / -1;
        }

        .detail-sidebar {
            position: sticky;
            top: 116px;
            display: grid;
            gap: 18px;
        }

        .summary-card {
            padding: 26px;
        }

        .commercial-card {
            border-top: 5px solid var(--gold);
        }

        .manufacturer-trust-card {
            border-top: 5px solid var(--green);
        }

        .price-label {
            margin: 0;
            color: #64748b;
            font-weight: 800;
        }

        .detail-price {
            margin: 4px 0 22px;
            color: var(--charcoal);
            font-size: 42px;
            font-weight: 900;
            line-height: 1.05;
        }

        .detail-facts {
            display: grid;
            gap: 0;
            margin: 0 0 20px;
        }

        .detail-facts div {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid #dfe7ed;
        }

        .detail-facts dt {
            color: #64748b;
            font-weight: 750;
        }

        .detail-facts dd {
            margin: 0;
            color: var(--charcoal);
            font-weight: 900;
            text-align: right;
        }

        .quote-note,
        .muted {
            color: #64748b;
            font-size: 13px;
        }

        .order-timeline-panel {
            margin-bottom: 28px;
            padding: 26px;
        }

        .order-timeline {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .timeline-step {
            position: relative;
            display: grid;
            gap: 6px;
            padding: 0 18px 0 0;
            color: #64748b;
        }

        .timeline-step::before {
            content: "";
            position: absolute;
            top: 9px;
            left: 18px;
            right: 0;
            height: 2px;
            background: #d7e0e7;
        }

        .timeline-step:last-child::before {
            display: none;
        }

        .timeline-dot {
            position: relative;
            z-index: 1;
            width: 20px;
            height: 20px;
            border: 3px solid #c8d4de;
            border-radius: 999px;
            background: #ffffff;
        }

        .timeline-step strong {
            color: var(--charcoal);
            line-height: 1.2;
        }

        .timeline-step span:last-child {
            font-size: 13px;
            line-height: 1.35;
        }

        .timeline-step-complete::before {
            background: #8fc8b7;
        }

        .timeline-step-complete .timeline-dot {
            border-color: var(--green);
            background: var(--green);
        }

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

        .milestone-card {
            border-top: 4px solid #b7c8d6;
        }

        .milestone-card:has(.status-completed),
        .milestone-card:has(.status-approved) {
            border-top-color: var(--green);
        }

        .conversation-band {
            padding: 26px;
            border: 1px solid #d7e0e7;
            border-radius: var(--radius);
            background: #f8fafb;
        }

        .conversation-layout {
            grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
            gap: 24px;
        }

        .conversation-thread {
            gap: 16px;
        }

        .conversation-message {
            padding: 18px;
            border-color: #d7e0e7;
            border-radius: var(--radius);
            box-shadow: none;
        }

        .conversation-message-own {
            border-color: #bddace;
            background: #eef8f4;
        }

        .conversation-form {
            padding: 24px;
            border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
        }

        .conversation-form h3 {
            margin: 0 0 14px;
            color: var(--charcoal);
        }

        @media (max-width: 1040px) {
            .hero-marketplace,
            .listing-detail-layout,
            .conversation-layout {
                grid-template-columns: 1fr;
            }

            .hero-copy {
                min-height: auto;
            }

            .detail-sidebar {
                position: static;
            }
        }

        @media (max-width: 940px) {
            .header-inner {
                align-items: stretch;
            }

            .site-nav {
                align-items: stretch;
                flex-direction: column;
            }

            .nav-group,
            .nav-group-account,
            .nav-group-primary {
                justify-content: flex-start;
            }

            .order-timeline {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .timeline-step {
                padding-left: 34px;
            }

            .timeline-step::before {
                top: 22px;
                bottom: -22px;
                left: 9px;
                width: 2px;
                height: auto;
            }

            .timeline-dot {
                position: absolute;
                left: 0;
                top: 0;
            }

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

        @media (max-width: 720px) {
            .container {
                width: min(100% - 24px, 1240px);
            }

            .page-content {
                padding-top: 26px;
            }

            .hero-marketplace,
            .page-heading,
            .dashboard-hero,
            .category-discovery,
            .dashboard-spotlight,
            .conversation-band,
            .order-timeline-panel {
                padding: 22px;
            }

            .hero h1 {
                font-size: clamp(38px, 12vw, 54px);
            }

            .hero-description {
                font-size: 16px;
            }

            .category-field,
            .compact-field {
                grid-column: 1 / -1;
            }

            .listing-actions,
            .listing-meta,
            .detail-capability-grid {
                grid-template-columns: 1fr;
            }

            .detail-content-panel,
            .summary-card,
            .record-card {
                padding: 22px;
            }

            .detail-image,
            .detail-image-placeholder {
                min-height: 250px;
            }

            .detail-content-panel h1 {
                font-size: clamp(32px, 10vw, 46px);
            }

            .action-links,
            .record-actions {
                width: 100%;
            }

            .action-links .button,
            .record-actions .button,
            .hero-actions .button,
            .nav-cta {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }

            .nav-link,
            .logout-form,
            .logout-form .button {
                width: 100%;
            }

            .nav-link {
                justify-content: center;
            }

            .detail-facts div {
                align-items: flex-start;
                flex-direction: column;
            }

            .detail-facts dd {
                text-align: left;
            }
        }

/* -------------------------
   PHASE 8 PREMIUM SYSTEM
-------------------------- */

:root {
    --ink: #111827;
    --charcoal: #18212f;
    --slate: #475467;
    --soft-slate: #667085;
    --line: #d8e0e7;
    --line-strong: #c6d1dc;
    --paper: #ffffff;
    --paper-soft: #f8fafb;
    --canvas: #f3f6f8;
    --deep: #0b1728;
    --deep-2: #13233a;
    --green: #2f7d68;
    --green-dark: #23614f;
    --green-soft: #eaf6f1;
    --gold: #c88a19;
    --gold-dark: #9b6510;
    --gold-soft: #fff6df;
    --blue-soft: #eaf2ff;
    --shadow-soft: 0 12px 34px rgba(17, 24, 39, 0.08);
    --shadow-lift: 0 20px 55px rgba(17, 24, 39, 0.13);
    --shadow-crisp: 0 1px 2px rgba(17, 24, 39, 0.06), 0 10px 28px rgba(17, 24, 39, 0.08);
    --radius: 8px;
    --radius-sm: 6px;
    --duration-fast: 160ms;
    --duration-med: 260ms;
    --ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body {
    background:
        radial-gradient(circle at 20% -10%, rgba(47, 125, 104, 0.08), transparent 26rem),
        linear-gradient(180deg, #f7fafb 0%, var(--canvas) 42%, #f9fbfc 100%);
    color: var(--ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a,
.button,
.nav-link,
.record-card,
.listing-card,
.category-chip,
.status-pill,
.trust-badge,
input,
select,
textarea {
    transition:
        background-color var(--duration-fast) var(--ease-premium),
        border-color var(--duration-fast) var(--ease-premium),
        box-shadow var(--duration-med) var(--ease-premium),
        color var(--duration-fast) var(--ease-premium),
        opacity var(--duration-fast) var(--ease-premium),
        transform var(--duration-med) var(--ease-premium);
}

a:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.page-content {
    width: min(1240px, calc(100% - 40px));
    padding-top: 40px;
}

.page-heading,
.dashboard-hero {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(24, 33, 47, 0.09);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.96));
    box-shadow: var(--shadow-soft);
}

.page-heading h1 {
    max-width: 840px;
    color: var(--charcoal);
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 900;
}

.section-heading {
    margin-bottom: 24px;
}

.section-heading h2,
.dashboard-section-title {
    color: var(--charcoal);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: 0;
}

.section-heading p,
.page-heading p,
.auth-intro,
.description {
    color: var(--slate);
}

.eyebrow {
    color: var(--green);
    letter-spacing: 1.1px;
}

/* Header and footer */

.utility-bar {
    background: var(--deep);
}

.site-header {
    border-bottom-color: rgba(24, 33, 47, 0.09);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.brand-mark {
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, var(--deep), var(--green));
    box-shadow: 0 10px 22px rgba(15, 37, 59, 0.16);
}

.brand-name {
    color: var(--charcoal);
    font-weight: 900;
}

.nav-group,
.nav-group-account,
.nav-group-primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-link {
    border: 1px solid transparent;
    color: #293548;
}

.nav-link:hover,
.nav-link-active {
    border-color: #cfe0da;
    background: var(--green-soft);
    color: var(--green-dark);
}

.nav-link-strong {
    color: var(--charcoal);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
}

.nav-toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--charcoal);
}

.site-footer {
    border-top: 1px solid rgba(24, 33, 47, 0.1);
    background: var(--deep);
    color: #d7e0ea;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr);
    gap: 34px;
    min-height: 0;
    padding: 42px 0 28px;
}

.footer-brand p {
    max-width: 430px;
    color: #aebccc;
}

.footer-logo {
    margin-bottom: 14px;
}

.footer-logo .brand-name {
    color: #ffffff;
}

.footer-logo .brand-subtitle,
.site-footer a {
    color: #c6d3df;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 22px;
}

.footer-links h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.footer-links a {
    display: block;
    padding: 4px 0;
    font-size: 14px;
}

.footer-bottom {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #9fabb8;
}

/* Buttons and feedback */

.button {
    border-radius: var(--radius);
    box-shadow: 0 1px 1px rgba(17, 24, 39, 0.08);
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.13);
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1);
}

.button-primary,
.button {
    background: var(--green);
}

.button-primary:hover,
.button:hover {
    background: var(--green-dark);
}

.button-secondary {
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--charcoal);
}

.button-secondary:hover {
    background: #f4f8f7;
    color: var(--charcoal);
}

.button-dark-secondary {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.button-dark-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

.button-accept {
    background: #216e39;
}

.button-accept:hover {
    background: #18552b;
}

.button-danger,
.button-reject {
    background: #b42318;
}

.button-danger:hover,
.button-reject:hover {
    background: #8f1c13;
}

.button-disabled {
    background: #d7dee6;
    color: #596777;
    cursor: not-allowed;
    box-shadow: none;
}

.form-submitting .button[type="submit"] {
    position: relative;
}

.form-submitting .button[type="submit"]::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: uv-spin 700ms linear infinite;
}

@keyframes uv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Homepage */

.hero-marketplace {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.85fr);
    gap: 34px;
    overflow: hidden;
    margin-bottom: 34px;
    padding: clamp(34px, 5vw, 58px);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 78% 18%, rgba(200, 138, 25, 0.2), transparent 18rem),
        linear-gradient(135deg, #101c2f 0%, #0d1728 52%, #15263d 100%);
    color: #ffffff;
    box-shadow: var(--shadow-lift);
}

.hero-marketplace::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: translate3d(0, 0, 0);
    animation: uv-grid-drift 18s linear infinite;
}

.hero-copy {
    min-height: auto;
}

.hero h1 {
    max-width: 780px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6.2vw, 72px);
    font-weight: 950;
    line-height: 0.98;
}

.hero-description {
    max-width: 660px;
    margin: 20px 0 0;
    color: #d9e3ef;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.65;
}

.hero-actions {
    margin-top: 28px;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-capacity-snapshot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 680px;
    margin-top: 28px;
}

.hero-capacity-snapshot div {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
}

.hero-capacity-snapshot strong,
.hero-capacity-snapshot span {
    display: block;
}

.hero-capacity-snapshot strong {
    color: #ffffff;
}

.hero-capacity-snapshot span {
    margin-top: 4px;
    color: #b9c7d7;
    font-size: 13px;
}

.hero-search-panel {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}

.search-panel-heading {
    align-items: center;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 18px;
}

.active-filters span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
}

.marketplace-snapshot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 38px;
}

.snapshot-card {
    padding: 24px;
    border: 1px solid rgba(24, 33, 47, 0.1);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.snapshot-label {
    display: block;
    color: var(--soft-slate);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.snapshot-card strong {
    display: block;
    margin-top: 8px;
    color: var(--charcoal);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 950;
    line-height: 1.05;
}

.snapshot-card p {
    margin: 10px 0 0;
    color: var(--slate);
}

.process-section,
.trust-cta-section {
    margin: 44px 0;
}

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

.process-card,
.trust-cta-section {
    border: 1px solid rgba(24, 33, 47, 0.1);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.process-card {
    padding: 28px;
}

.process-card h3 {
    margin: 0 0 18px;
    color: var(--charcoal);
    font-size: 22px;
}

.step-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 46px;
    padding: 8px 12px;
    border: 1px solid #e0e7ed;
    border-radius: var(--radius-sm);
    background: #fbfcfd;
    color: var(--charcoal);
    font-weight: 800;
}

.step-list span {
    color: var(--green);
    font-size: 12px;
    font-weight: 950;
}

.trust-cta-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f6faf8 100%);
}

.trust-cta-section h2 {
    margin: 0 0 10px;
    color: var(--charcoal);
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.1;
}

.trust-cta-section p {
    max-width: 720px;
    margin: 0;
    color: var(--slate);
}

.trust-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@keyframes uv-grid-drift {
    to {
        background-position: 48px 48px;
    }
}

/* Marketplace cards and filters */

.category-discovery {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.category-chip {
    text-decoration: none;
}

.category-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-crisp);
    text-decoration: none;
}

.listing-card {
    min-height: 100%;
    border-color: rgba(24, 33, 47, 0.11);
}

.listing-card:hover {
    transform: translateY(-3px);
    border-color: #bed5cd;
    box-shadow: var(--shadow-lift);
}

.listing-card:hover .listing-image {
    transform: scale(1.035);
}

.listing-media {
    overflow: hidden;
}

.listing-image {
    transition: transform 420ms var(--ease-premium);
}

.listing-card-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.listing-title-row h3 {
    font-size: 21px;
}

.listing-title-row h3 a:hover,
.company a:hover {
    color: var(--green-dark);
}

.listing-meta {
    margin-top: auto;
}

.listing-meta div {
    min-height: 76px;
}

.listing-actions .button {
    min-width: 0;
    padding-inline: 12px;
}

.pagination,
.pagination-summary {
    margin-top: 24px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-summary {
    color: var(--slate);
    text-align: center;
}

/* Cards, dashboards, details */

.record-card,
.stat-card,
.summary-card,
.order-timeline-panel,
.conversation-message,
.conversation-form {
    box-shadow: var(--shadow-soft);
}

.record-card:hover,
.stat-card:hover,
.summary-card:hover {
    border-color: #cfdbe4;
}

.record-card h2,
.record-card h3 {
    font-weight: 900;
}

.record-meta {
    color: var(--soft-slate);
}

.record-facts dt,
.detail-facts dt {
    color: var(--soft-slate);
}

.record-facts dd,
.detail-facts dd {
    overflow-wrap: anywhere;
}

.stat-card dd {
    letter-spacing: 0;
}

.status-pill,
.trust-badge {
    min-height: 28px;
    align-items: center;
}

.status-paused,
.status-inactive {
    border-color: #cbd5df;
    background: #eef2f6;
    color: #475467;
}

.status-not_funded {
    border-color: #ead6a6;
    background: #fff5dc;
    color: #855f00;
}

.status-funded {
    border-color: #bbd3f0;
    background: #eaf2ff;
    color: #1d4f91;
}

.status-in_progress {
    border-color: #bbd3f0;
    background: #eaf2ff;
    color: #1d4f91;
}

.status-released {
    border-color: #bbdbc9;
    background: #eaf7ee;
    color: #216e39;
}

.detail-content-panel h1 {
    font-size: clamp(34px, 4.5vw, 52px);
}

.timeline-step {
    transition: transform var(--duration-med) var(--ease-premium);
}

.timeline-step.is-visible {
    transform: none;
}

/* Auth and forms */

.auth-card {
    position: relative;
    overflow: hidden;
    width: min(680px, 100%);
    padding: clamp(28px, 4vw, 42px);
    border-color: rgba(24, 33, 47, 0.11);
    box-shadow: var(--shadow-lift);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--green), var(--gold));
}

.auth-card h1 {
    color: var(--charcoal);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 950;
    line-height: 1.05;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--slate);
    font-weight: 800;
}

.back-link:hover {
    color: var(--green-dark);
}

.styled-form p,
.form-field {
    margin-bottom: 18px;
}

.styled-form input,
.styled-form select,
.styled-form textarea,
.form-field input,
.form-field select,
.form-field textarea,
.search-fields input,
.search-fields select {
    color: var(--charcoal);
}

.styled-form input:hover,
.styled-form select:hover,
.styled-form textarea:hover,
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.search-fields input:hover,
.search-fields select:hover {
    border-color: var(--line-strong);
    background: #ffffff;
}

.form-field-error input,
.form-field-error select,
.form-field-error textarea {
    border-color: #d95b52;
}

.errorlist {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-text);
    list-style-position: inside;
}

.auth-links {
    color: var(--slate);
}

/* Empty states and notifications */

.empty-panel,
.empty-state {
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    padding: 50px 28px;
    border: 1px dashed #b9c7d4;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.empty-panel::before,
.empty-state::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: var(--green);
}

.empty-panel h2,
.empty-state h3 {
    margin-top: 0;
    color: var(--charcoal);
    font-weight: 900;
}

.notification-link {
    position: relative;
}

.notification-count {
    box-shadow: 0 0 0 3px #ffffff;
}

/* Motion utilities */

.motion-ready [data-reveal],
.motion-ready .reveal-up,
.motion-ready .reveal-left,
.motion-ready .reveal-right,
.motion-ready .fade-in,
.motion-ready .scale-in {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 520ms var(--ease-premium),
        transform 520ms var(--ease-premium);
}

.motion-ready .reveal-up,
.motion-ready [data-reveal] {
    transform: translateY(18px);
}

.motion-ready .reveal-left {
    transform: translateX(-18px);
}

.motion-ready .reveal-right {
    transform: translateX(18px);
}

.motion-ready .scale-in {
    transform: scale(0.975);
}

.motion-ready .fade-in {
    transform: none;
}

.motion-ready .is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.stagger-children > * {
    transition-delay: calc(var(--stagger-index, 0) * 55ms);
}

.stagger-children > *:nth-child(1) { --stagger-index: 0; }
.stagger-children > *:nth-child(2) { --stagger-index: 1; }
.stagger-children > *:nth-child(3) { --stagger-index: 2; }
.stagger-children > *:nth-child(4) { --stagger-index: 3; }
.stagger-children > *:nth-child(5) { --stagger-index: 4; }
.stagger-children > *:nth-child(6) { --stagger-index: 5; }
.stagger-children > *:nth-child(7) { --stagger-index: 6; }
.stagger-children > *:nth-child(8) { --stagger-index: 7; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .motion-ready [data-reveal],
    .motion-ready .reveal-up,
    .motion-ready .reveal-left,
    .motion-ready .reveal-right,
    .motion-ready .fade-in,
    .motion-ready .scale-in {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------
   EDITORIAL MARKETPLACE REDESIGN
-------------------------- */

:root {
    --ink: #16241f;
    --ink-2: #23332e;
    --paper: #f5ebdd;
    --paper-2: #fbf6ed;
    --clay: #b96a35;
    --moss: #596f53;
    --steel: #d8ddd8;
    --ui-serif: Georgia, "Times New Roman", serif;
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 36px;
    --space-6: 56px;
    --space-7: 84px;
}

body {
    background: var(--paper-2);
    color: var(--ink);
}

.container {
    width: min(1240px, calc(100% - 36px));
}

.page-content {
    padding-top: var(--space-5);
    padding-bottom: var(--space-7);
}

.site-header {
    background: rgba(251, 246, 237, 0.88);
    border-bottom: 1px solid rgba(22, 36, 31, 0.12);
    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 82px;
}

.brand-logo-full {
    width: 244px;
    height: auto;
}

.brand-logo-compact {
    border-radius: 10px;
}

.site-nav,
.nav-group,
.nav-group-primary,
.nav-group-account {
    gap: 14px;
    border: 0;
    background: transparent;
}

.nav-link {
    min-height: 36px;
    padding: 4px 0;
    border-radius: 0;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 650;
    transition: color 180ms ease, transform 180ms ease;
}

.nav-link:hover,
.nav-link-active {
    background: transparent;
    color: var(--clay);
    text-decoration: none;
    transform: translateY(-1px);
}

.site-nav .nav-link-active {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.nav-cta {
    min-height: 40px;
}

.button {
    border-radius: 6px;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--ink);
}

.button-primary:hover {
    background: #0d1714;
}

.button-secondary {
    border-color: rgba(22, 36, 31, 0.22);
    background: transparent;
    color: var(--ink);
}

.button-secondary:hover {
    border-color: var(--ink);
    background: rgba(22, 36, 31, 0.05);
}

.text-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 760;
}

.text-action span {
    transition: transform 180ms ease;
}

.text-action:hover {
    color: var(--clay);
    text-decoration: none;
}

.text-action:hover span {
    transform: translateX(4px);
}

.eyebrow {
    color: var(--moss);
    letter-spacing: 0.08em;
}

.editorial-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5) 0 var(--space-4);
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
}

.editorial-hero.hero-marketplace {
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.editorial-hero.hero-marketplace::before,
.editorial-hero.hero-marketplace::after {
    content: none;
}

.hero-kicker {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    color: #5f6b64;
}

.hero-statement h1 {
    max-width: 980px;
    margin: 0;
    color: var(--ink);
    font-family: var(--ui-serif);
    font-size: clamp(50px, 6.3vw, 84px);
    font-weight: 560;
    line-height: 0.94;
}

.hero-market-strip {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) 0 0 var(--space-4);
    border-left: 1px solid rgba(22, 36, 31, 0.2);
}

.hero-market-strip p {
    margin: 0;
    color: #47544d;
    font-size: 17px;
}

.capacity-search {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(22, 36, 31, 0.16);
    background:
        linear-gradient(90deg, rgba(22, 36, 31, 0.055) 1px, transparent 1px),
        linear-gradient(var(--paper), var(--paper));
    background-size: 38px 38px, auto;
    box-shadow: 0 18px 42px rgba(22, 36, 31, 0.08);
}

.search-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.search-fields input,
.search-fields select,
.capacity-search input,
.capacity-search select,
.styled-form input,
.styled-form select,
.styled-form textarea,
.form-field input,
.form-field select,
.form-field textarea {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.38);
    background: rgba(255, 255, 255, 0.46);
}

.capacity-search label,
.styled-form label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 780;
}

.advanced-search {
    overflow: clip;
}

.advanced-search summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: var(--ink);
    font-weight: 800;
}

.advanced-search summary span:last-child {
    transition: transform 180ms ease;
}

.advanced-search[open] summary span:last-child {
    transform: rotate(45deg);
}

.advanced-search-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.hero-proof-line {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.hero-proof-line span {
    padding: var(--space-3);
    border-right: 1px solid rgba(22, 36, 31, 0.16);
    color: var(--ink);
    font-weight: 760;
}

.category-discovery,
.marketplace-results,
.trust-section {
    margin-top: var(--space-7);
}

.section-heading-editorial {
    display: grid;
    grid-template-columns: 0.36fr 0.64fr;
    align-items: end;
    margin-bottom: var(--space-5);
}

.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2 {
    margin: 0;
    font-family: var(--ui-serif);
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 560;
    line-height: 0.98;
}

.category-rows {
    border-top: 1px solid rgba(22, 36, 31, 0.16);
}

.category-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto 42px;
    gap: var(--space-4);
    align-items: center;
    min-height: 92px;
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 180ms ease, transform 180ms ease;
}

.category-row:hover {
    background: rgba(185, 106, 53, 0.07);
    text-decoration: none;
    transform: translateX(6px);
}

.category-index,
.category-count {
    color: #69736d;
    font-size: 13px;
    font-weight: 760;
}

.category-name {
    font-family: var(--ui-serif);
    font-size: clamp(28px, 4vw, 54px);
    line-height: 1;
}

.category-arrow {
    color: var(--clay);
    font-size: 24px;
}

.sourcing-story {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
    gap: var(--space-6);
    margin-top: var(--space-7);
    padding: var(--space-6) 0;
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.story-sticky {
    position: sticky;
    top: 118px;
    align-self: start;
}

.story-sticky p:not(.eyebrow) {
    color: #56615b;
    font-size: 17px;
}

.story-steps {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-steps li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    opacity: 0.58;
    transform: translateX(0);
    transition: opacity 220ms ease, transform 220ms ease;
}

.story-steps li.is-emphasized {
    opacity: 1;
    transform: translateX(-8px);
}

.story-steps span {
    grid-row: span 2;
    color: var(--clay);
    font-family: var(--ui-serif);
    font-size: 42px;
}

.story-steps strong {
    font-family: var(--ui-serif);
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
}

.story-steps p {
    margin: 0;
    color: #56615b;
}

.results-heading {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.listings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.listing-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(22, 36, 31, 0.16);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.listing-card:hover {
    border-color: rgba(185, 106, 53, 0.55);
    background: #fffaf2;
    transform: translateY(-2px);
}

.listing-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    gap: var(--space-5);
    padding: var(--space-4);
}

.listing-media-frame {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 248px;
    overflow: hidden;
    background: #23332e;
}

.listing-image,
.listing-image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    min-height: 248px;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

.listing-media-frame .listing-image-placeholder,
.listing-media-frame .detail-image-placeholder {
    display: none;
}

.listing-media-frame.media-no-image .listing-image-placeholder,
.listing-media-frame.media-no-image .detail-image-placeholder,
.listing-media-frame.media-failed .listing-image-placeholder,
.listing-media-frame.media-failed .detail-image-placeholder {
    display: grid;
}

.listing-media-frame.media-failed .listing-image {
    display: none;
}

.listing-image-placeholder,
.detail-image-placeholder {
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--space-2);
    overflow: hidden;
    padding: var(--space-4);
    background:
        linear-gradient(135deg, rgba(22, 36, 31, 0.18) 0 1px, transparent 1px 18px),
        radial-gradient(circle at 22% 18%, rgba(185, 106, 53, 0.34), transparent 24%),
        linear-gradient(135deg, #23332e, #596f53);
    color: var(--paper);
    text-align: left;
}

.listing-image-placeholder::before,
.detail-image-placeholder::before {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(245, 235, 221, 0.28);
    transform: rotate(18deg);
}

.listing-image-placeholder::after,
.detail-image-placeholder::after {
    content: "";
    position: absolute;
    inset: auto 10% 12% 10%;
    height: 18%;
    border-top: 1px solid rgba(245, 235, 221, 0.22);
    border-bottom: 1px solid rgba(245, 235, 221, 0.12);
}

.fallback-brand-mark {
    position: absolute;
    z-index: 1;
    top: var(--space-4);
    left: var(--space-4);
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(245, 235, 221, 0.5);
    background: rgba(22, 36, 31, 0.34);
    color: var(--paper);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
}

.fallback-geometry {
    position: absolute;
    z-index: 0;
    top: 18%;
    right: 10%;
    width: min(46%, 190px);
    color: rgba(245, 235, 221, 0.34);
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
}

.fallback-geometry rect,
.fallback-geometry circle {
    fill: rgba(245, 235, 221, 0.16);
}

.listing-category-metal .listing-image-placeholder,
.listing-category-metal .detail-image-placeholder {
    background:
        repeating-linear-gradient(45deg, rgba(245, 235, 221, 0.12) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, #232928, #6d716a);
}

.listing-category-textiles .listing-image-placeholder,
.listing-category-textiles .detail-image-placeholder {
    background:
        repeating-linear-gradient(90deg, rgba(245, 235, 221, 0.14) 0 2px, transparent 2px 16px),
        repeating-linear-gradient(0deg, rgba(245, 235, 221, 0.1) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, #596f53, #26372f);
}

.listing-category-packaging .listing-image-placeholder,
.listing-category-packaging .detail-image-placeholder {
    background:
        linear-gradient(30deg, transparent 40%, rgba(245, 235, 221, 0.16) 40% 42%, transparent 42%),
        linear-gradient(135deg, #824d2f, #b96a35);
}

.listing-category-electronics .listing-image-placeholder,
.listing-category-electronics .detail-image-placeholder {
    background:
        repeating-linear-gradient(0deg, rgba(245, 235, 221, 0.12) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(245, 235, 221, 0.1) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, #174b40, #2b6058);
}

.listing-category-plastics .listing-image-placeholder,
.listing-category-plastics .detail-image-placeholder {
    background:
        radial-gradient(circle at 72% 28%, rgba(245, 235, 221, 0.22), transparent 22%),
        linear-gradient(135deg, #214b5d, #517581);
}

.placeholder-category {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.listing-image-placeholder strong,
.detail-image-placeholder strong {
    position: relative;
    z-index: 1;
    font-family: var(--ui-serif);
    font-size: 28px;
    line-height: 1;
}

.placeholder-capability {
    position: relative;
    z-index: 1;
    font-size: 13px;
}

.listing-badges,
.detail-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.listing-card h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--ui-serif);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
}

.listing-card h3 a {
    color: var(--ink);
}

.company {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.listing-meta,
.detail-facts {
    display: grid;
    gap: var(--space-3);
}

.listing-meta div,
.detail-facts div,
.detail-capability-grid div {
    padding: 0 0 var(--space-3);
    border: 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
    background: transparent;
}

.listing-meta dt,
.detail-facts dt,
.detail-capability-grid dt {
    color: #66716a;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.listing-meta dd,
.detail-facts dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-weight: 780;
}

.listing-actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.trust-section {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--ink);
    color: var(--paper);
}

.trust-title h2,
.trust-section .eyebrow {
    color: var(--paper);
}

.trust-rhythm {
    display: grid;
    gap: var(--space-4);
}

.trust-rhythm div {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(245, 235, 221, 0.2);
}

.trust-rhythm span {
    color: #d89b68;
    font-family: var(--ui-serif);
    font-size: 30px;
}

.trust-rhythm strong {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--ui-serif);
    font-size: 30px;
}

.listing-detail-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--space-5);
    align-items: end;
    margin-top: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.detail-image {
    width: 100%;
    min-height: 390px;
    max-height: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.detail-title-panel h1 {
    margin: var(--space-3) 0;
    font-family: var(--ui-serif);
    font-size: clamp(48px, 6vw, 86px);
    font-weight: 560;
    line-height: 0.96;
}

.detail-commercial-panel {
    position: sticky;
    top: 118px;
    align-self: start;
    padding: var(--space-4);
    border: 1px solid rgba(22, 36, 31, 0.18);
    background: var(--paper);
}

.detail-price {
    color: var(--clay);
    font-family: var(--ui-serif);
    font-size: 42px;
}

.listing-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.detail-section,
.manufacturer-trust-panel {
    padding: var(--space-5) 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.detail-section h2,
.manufacturer-trust-panel h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--ui-serif);
    font-size: clamp(32px, 4vw, 54px);
}

.detail-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

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

.auth-card,
.auth-split {
    width: min(1100px, 100%);
    margin: var(--space-4) auto;
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(320px, 0.52fr);
    min-height: 640px;
    border: 1px solid rgba(22, 36, 31, 0.16);
    background: var(--paper);
}

.auth-story-panel,
.auth-form-panel {
    padding: var(--space-6);
}

.auth-story-panel {
    display: grid;
    align-content: space-between;
    background: var(--ink);
    color: var(--paper);
}

.auth-story-panel h1 {
    font-family: var(--ui-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 560;
    line-height: 0.98;
}

.auth-industrial-visual {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.2fr;
    gap: var(--space-2);
    min-height: 120px;
    align-items: end;
}

.auth-industrial-visual span {
    display: block;
    background: rgba(245, 235, 221, 0.18);
}

.auth-industrial-visual span:nth-child(1) { height: 70px; }
.auth-industrial-visual span:nth-child(2) { height: 118px; background: var(--clay); }
.auth-industrial-visual span:nth-child(3) { height: 92px; }

.auth-form-panel h2 {
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--ui-serif);
    font-size: 42px;
}

.site-footer {
    background: var(--ink);
}

.footer-inner {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-7) 0 var(--space-5);
}

.footer-brand p {
    max-width: 680px;
    color: #d8cdbc;
    font-family: var(--ui-serif);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.04;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid rgba(245, 235, 221, 0.18);
    padding-top: var(--space-4);
}

.footer-bottom p {
    margin: 0;
}

.cookie-consent-panel {
    width: min(460px, calc(100vw - 32px));
    margin: 0;
    padding: var(--space-3);
    border-radius: 0;
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(22, 36, 31, 0.18);
}

.cookie-consent-panel h2 {
    font-size: 19px;
}

.cookie-consent-panel p {
    font-size: 14px;
}

.cookie-consent-actions {
    gap: 8px;
    margin-top: 12px;
}

.cookie-consent-actions .button,
.footer-cookie-button {
    cursor: pointer;
}

.motion-ready [data-reveal] {
    opacity: 1;
    transform: translateY(18px);
    transition: opacity 420ms ease, transform 420ms ease;
}

.motion-ready [data-reveal="left"] {
    transform: translateX(-22px);
}

.motion-ready [data-reveal="right"] {
    transform: translateX(22px);
}

.motion-ready [data-reveal="scale"] {
    transform: translateY(18px) scale(0.985);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1040px) {
    .editorial-hero,
    .sourcing-story,
    .trust-section,
    .listing-detail-hero,
    .listing-detail-content,
    .auth-split {
        grid-template-columns: 1fr;
    }

    .story-sticky,
    .detail-commercial-panel {
        position: static;
    }

    .search-primary-grid,
    .advanced-search-grid,
    .hero-proof-line,
    .capacity-module {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .container {
        width: min(100% - 24px, 1240px);
    }

    .page-content {
        padding-top: var(--space-4);
    }

    .brand-logo-full {
        width: 206px;
    }

    .editorial-hero {
        gap: var(--space-4);
        padding-top: var(--space-4);
    }

    .hero-kicker,
    .search-primary-grid,
    .advanced-search-grid,
    .hero-proof-line,
    .capacity-module,
    .section-heading-editorial,
    .listing-card,
    .listing-card-body,
    .detail-capability-grid {
        grid-template-columns: 1fr;
    }

    .hero-statement h1 {
        overflow-wrap: normal;
        word-break: normal;
        font-size: clamp(34px, 9.8vw, 38px);
    }

    .hero-kicker {
        display: grid;
        gap: var(--space-3);
    }

    .editorial-hero {
        overflow: hidden;
    }

    .hero-kicker span,
    .hero-market-strip p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .hero-actions,
    .hero-actions .button {
        width: 100%;
    }

    .hero-market-strip {
        padding-left: 0;
        border-left: 0;
    }

    .capacity-search,
    .trust-section,
    .auth-story-panel,
    .auth-form-panel {
        padding: var(--space-4);
    }

    .category-row {
        grid-template-columns: 48px minmax(0, 1fr) 28px;
        gap: var(--space-3);
    }

    .category-count {
        grid-column: 2;
    }

    .story-steps li {
        grid-template-columns: 1fr;
        transform: none;
    }

    .story-steps li.is-emphasized {
        transform: none;
    }

    .footer-bottom {
        display: grid;
    }
}

/* -------------------------
   PHASE 17 UX SIMPLIFICATION
-------------------------- */

:root {
    --paper: #f5ebdd;
    --paper-2: #fbf6ed;
    --ink: #16241f;
    --clay: #b96a35;
    --moss: #596f53;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 36px;
    --space-6: 56px;
}

body {
    background: var(--paper-2);
    color: var(--ink);
}

.site-header {
    background: rgba(251, 246, 237, 0.92);
    border-bottom-color: rgba(22, 36, 31, 0.12);
    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 66px;
    gap: 18px;
}

.brand-logo-full {
    width: 218px;
}

.site-nav,
.nav-group,
.nav-group-primary,
.nav-group-account {
    gap: 12px;
}

.site-nav .nav-link {
    min-height: 38px;
    padding: 6px 2px;
    border-radius: 0;
    color: var(--ink);
    font-weight: 600;
}

.site-nav .nav-link:hover,
.site-nav .nav-link-active {
    background: transparent;
    color: var(--clay);
    text-decoration: none;
}

.nav-group-account {
    gap: 14px;
}

.nav-cta,
.button {
    border-radius: 7px;
    font-weight: 650;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--ink);
}

.button-primary:hover {
    background: #0d1c18;
}

.button-secondary {
    border-color: rgba(22, 36, 31, 0.2);
    background: rgba(255, 255, 255, 0.48);
    color: var(--ink);
}

.button-secondary:hover {
    background: var(--paper);
    color: var(--ink);
}

.page-content {
    padding-top: 26px;
}

.page-content > .back-link:not(.phase17-back-link):has(+ .phase17-back-link) {
    display: none;
}

.eyebrow {
    color: var(--clay);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.section-heading {
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.section-heading h2,
.page-heading h1,
.dashboard-section-title {
    color: var(--ink);
    font-weight: 650;
    line-height: 1.12;
}

.section-heading p,
.page-heading p,
.record-meta {
    color: #53625a;
}

.phase17-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    gap: var(--space-4);
    align-items: stretch;
    padding: 28px 0 var(--space-4);
    border-bottom: 1px solid rgba(22, 36, 31, 0.12);
}

.phase17-hero .hero-statement {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 310px;
}

.hero-market-strip,
.hero-proof-line,
.capacity-module {
    display: none;
}

.hero-statement h1 {
    max-width: 680px;
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 620;
    line-height: 1.02;
}

.hero-intro {
    max-width: 520px;
    margin: 0;
    color: #4f5b55;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.capacity-search {
    grid-column: auto;
    gap: var(--space-3);
    margin-top: 0;
    padding: var(--space-4);
    border: 1px solid rgba(22, 36, 31, 0.14);
    border-radius: 14px;
    background: rgba(245, 235, 221, 0.78);
    box-shadow: 0 18px 46px rgba(22, 36, 31, 0.08);
}

.capacity-discovery-module .search-panel-heading h2 {
    color: var(--ink);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 650;
}

.capacity-discovery-module .search-field-wide label {
    margin-bottom: 9px;
    color: #405048;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.search-query-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.capacity-discovery-module .search-field-wide input {
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid rgba(22, 36, 31, 0.22);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.74);
    font-size: 17px;
}

.search-query-row .button {
    min-height: 54px;
    padding-inline: 20px;
}

.advanced-search {
    border-top: 1px solid rgba(22, 36, 31, 0.12);
    padding-top: 12px;
}

.advanced-search summary {
    align-items: center;
    min-height: 34px;
    color: var(--ink);
    font-weight: 650;
}

.advanced-search-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.capacity-search input,
.capacity-search select,
.styled-form input,
.styled-form select,
.styled-form textarea {
    border: 1px solid rgba(22, 36, 31, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.phase17-section,
.category-discovery,
.marketplace-results,
.trust-section,
.sourcing-story,
.manufacturer-cta {
    margin-top: var(--space-6);
}

.section-heading-editorial {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2,
.manufacturer-cta h2 {
    font-family: inherit;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 620;
    line-height: 1.08;
}

.category-rows {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
}

.category-row {
    grid-template-columns: 1fr auto;
    min-height: 118px;
    padding: 16px;
    border: 1px solid rgba(22, 36, 31, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
}

.category-row:hover {
    background: var(--paper);
    transform: translateY(-2px);
}

.category-index {
    color: var(--clay);
    font-size: 12px;
    font-weight: 650;
}

.category-name {
    grid-column: 1 / -1;
    font-family: inherit;
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 650;
}

.category-count {
    grid-column: 1;
    color: #59665f;
    font-size: 13px;
}

.category-arrow {
    grid-row: 1;
    grid-column: 2;
    font-size: 0;
}

.category-arrow::before {
    content: "\2192";
    font-size: 16px;
}

.listings {
    gap: 16px;
}

.listing-card {
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.listing-card:hover {
    background: #fffaf2;
    box-shadow: 0 18px 42px rgba(22, 36, 31, 0.1);
}

.listing-media {
    display: block;
    overflow: hidden;
    min-height: 100%;
}

.listing-image,
.listing-image-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 238px;
    object-fit: cover;
    transition: transform 220ms ease;
}

.listing-card:hover .listing-image,
.listing-card:hover .listing-image-placeholder {
    transform: scale(1.025);
}

.listing-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: var(--space-4);
    padding: 22px;
}

.listing-card h3 {
    margin: 12px 0 8px;
    font-family: inherit;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 650;
    line-height: 1.08;
}

.listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company {
    display: grid;
    gap: 3px;
    margin: 0;
}

.company a {
    color: var(--ink);
    font-weight: 650;
}

.company span,
.record-meta {
    font-size: 13px;
}

.listing-meta {
    display: grid;
    gap: 10px;
}

.listing-meta div {
    padding-bottom: 10px;
}

.listing-meta dt {
    color: #607067;
    font-size: 12px;
    font-weight: 650;
}

.listing-meta dd {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
}

.listing-price-fact dd {
    color: var(--clay);
}

.listing-actions {
    gap: 8px;
}

.sourcing-story {
    grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.66fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
}

.story-steps {
    gap: 0;
}

.story-steps li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 18px;
    padding: 20px 0;
    opacity: 0.72;
}

.story-steps span,
.story-steps strong {
    font-family: inherit;
}

.story-steps span {
    color: var(--clay);
    font-size: 22px;
    font-weight: 650;
}

.story-steps strong {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 620;
}

.story-steps p {
    margin: 0;
    color: #59665f;
}

.trust-section {
    grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.66fr);
    padding: var(--space-5);
    border-radius: 16px;
}

.trust-rhythm {
    display: grid;
    gap: 14px;
}

.trust-rhythm div {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(245, 235, 221, 0.18);
}

.trust-rhythm strong {
    display: block;
    font-size: 18px;
    font-weight: 650;
}

.trust-rhythm p {
    margin: 5px 0 0;
    color: #d8cdbc;
}

.manufacturer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid rgba(22, 36, 31, 0.14);
    border-radius: 16px;
    background: var(--paper);
}

.manufacturer-cta h2 {
    max-width: 680px;
    margin: 0;
}

.listing-detail-hero {
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) minmax(270px, 320px);
    align-items: start;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.detail-image {
    min-height: 320px;
    border-radius: 14px;
}

.detail-title-panel h1 {
    font-family: inherit;
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 620;
    line-height: 1.05;
}

.detail-commercial-panel {
    top: 92px;
    border-radius: 14px;
}

.detail-section h2,
.manufacturer-trust-panel h2,
.auth-form-panel h2 {
    font-weight: 650;
}

.description-disclosure {
    border: 1px solid rgba(22, 36, 31, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.52);
}

.description-disclosure summary {
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 650;
}

.description-content {
    padding: 0 16px 16px;
}

.auth-split {
    grid-template-columns: minmax(240px, 0.36fr) minmax(360px, 0.64fr);
    min-height: auto;
    border-radius: 16px;
    overflow: hidden;
}

.auth-story-panel,
.auth-form-panel {
    padding: var(--space-5);
}

.auth-story-panel {
    gap: var(--space-4);
    align-content: start;
}

.auth-story-panel h1 {
    font-family: inherit;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 620;
    line-height: 1.08;
}

.auth-industrial-visual {
    min-height: 84px;
}

.auth-industrial-visual span {
    height: 48px;
}

.auth-industrial-visual span:nth-child(2) {
    height: 84px;
}

.auth-industrial-visual span:nth-child(3) {
    height: 64px;
}

.auth-intro,
.helptext {
    color: #59665f;
}

.page-heading.dashboard-hero {
    align-items: center;
    padding: 20px 0 8px;
}

.page-heading.dashboard-hero h1 {
    font-size: clamp(32px, 4vw, 46px);
}

.stats-grid {
    gap: 12px;
}

.stat-card {
    padding: 16px;
    border-radius: 12px;
}

.stat-card dt {
    font-weight: 650;
}

.stat-card dd {
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
}

.site-footer {
    background: var(--ink);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
}

.footer-brand p {
    max-width: 360px;
    color: #d8cdbc;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.footer-links h2 {
    font-size: 13px;
    font-weight: 650;
}

.footer-links a,
.footer-cookie-button,
.footer-bottom {
    color: #d8cdbc;
}

.footer-bottom {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
}

.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 480ms ease,
        transform 480ms ease;
}

.motion-ready [data-reveal="left"],
.motion-ready [data-reveal="right"] {
    transform: translateY(18px);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1080px) {
    .phase17-hero,
    .listing-detail-hero,
    .listing-detail-content,
    .sourcing-story,
    .trust-section,
    .auth-split,
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .advanced-search-grid,
    .category-rows,
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-commercial-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .header-inner {
        min-height: 62px;
    }

    .site-nav.site-nav-open {
        gap: 10px;
        padding: 14px 0 4px;
    }

    .nav-group,
    .nav-group-account {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .phase17-hero {
        gap: var(--space-3);
        padding-top: 18px;
    }

    .phase17-hero .hero-statement {
        min-height: 0;
    }

    .hero-statement h1 {
        font-size: clamp(34px, 10vw, 44px);
    }

    .hero-intro {
        font-size: 15px;
    }

    .capacity-search {
        padding: 16px;
    }

    .search-query-row,
    .advanced-search-grid,
    .category-rows,
    .listing-card,
    .listing-card-body,
    .manufacturer-cta,
    .footer-links {
        grid-template-columns: 1fr;
    }

    .search-query-row .button,
    .manufacturer-cta .button {
        width: 100%;
    }

    .listing-image,
    .listing-image-placeholder {
        min-height: 210px;
    }

    .sourcing-story,
    .trust-section,
    .manufacturer-cta,
    .auth-story-panel,
    .auth-form-panel {
        padding: var(--space-4);
    }

    .story-steps li {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .footer-inner {
        gap: var(--space-4);
    }
}

/* -------------------------
   PHASE 16 PREMIUM PRODUCT SYSTEM
-------------------------- */

:root {
    --ink: #0d2632;
    --ink-2: #123644;
    --teal-vivid: #2db5a7;
    --teal-deep: #0f766e;
    --warm: #d99b45;
    --warm-soft: #fff4df;
    --paper: #fbfdfc;
    --mist: #eef6f5;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-solid: #ffffff;
    --panel-muted: #f4f8f7;
    --stroke: rgba(13, 38, 50, 0.12);
    --stroke-strong: rgba(13, 38, 50, 0.2);
    --copy: #152832;
    --copy-muted: #61717a;
    --shadow-premium: 0 18px 50px rgba(13, 38, 50, 0.12);
    --shadow-float: 0 28px 80px rgba(13, 38, 50, 0.18);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-padding-top: 104px;
}

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(45, 181, 167, 0.11), transparent 24rem),
        linear-gradient(180deg, #f7fbfa 0%, #edf5f4 45%, #f9fbfa 100%);
    color: var(--copy);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    letter-spacing: 0;
}

a {
    color: var(--teal-deep);
}

.page-content {
    padding-top: 30px;
}

.site-header {
    top: 0;
    border-bottom: 1px solid rgba(13, 38, 50, 0.1);
    background: rgba(251, 253, 252, 0.78);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.header-inner {
    min-height: 82px;
    gap: 22px;
}

.brand-logo-full {
    width: 246px;
    height: auto;
}

.brand-logo-compact {
    width: 46px;
    height: auto;
}

.nav-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-group-primary {
    padding: 5px;
    border: 1px solid rgba(13, 38, 50, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
}

.nav-link {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #243842;
    font-size: 14px;
    font-weight: 620;
    transition:
        background var(--duration-fast) var(--ease-premium),
        color var(--duration-fast) var(--ease-premium),
        transform var(--duration-fast) var(--ease-premium);
}

.nav-link:hover {
    background: rgba(45, 181, 167, 0.12);
    color: var(--ink);
    transform: translateY(-1px);
    text-decoration: none;
}

.nav-link-active {
    background: var(--ink);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(13, 38, 50, 0.16);
}

.nav-link-active:hover {
    background: var(--ink-2);
    color: #ffffff;
}

.notification-count {
    background: var(--warm);
    color: var(--ink);
}

.button {
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset;
    font-size: 14px;
    font-weight: 690;
    transition:
        transform 180ms var(--ease-premium),
        box-shadow 180ms var(--ease-premium),
        background 180ms var(--ease-premium),
        border-color 180ms var(--ease-premium);
}

.button:hover {
    transform: translateY(-2px);
    background: #071d27;
    box-shadow: 0 14px 30px rgba(13, 38, 50, 0.18);
}

.button-primary {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal-vivid));
    color: #ffffff;
}

.button-primary:hover {
    background: linear-gradient(135deg, #0b635d, #259f94);
}

.button-secondary,
.button-outline {
    border-color: var(--stroke);
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    box-shadow: none;
}

.button-secondary:hover,
.button-outline:hover {
    border-color: rgba(45, 181, 167, 0.34);
    background: #eef9f7;
    color: var(--ink);
}

.button-ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}

.button-danger,
.button-reject {
    background: #b43a32;
}

.button-accept {
    background: #237a55;
}

.button-compact {
    min-height: 36px;
    padding: 8px 12px;
}

.eyebrow {
    margin-bottom: 10px;
    color: var(--teal-deep);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0.08em;
}

.page-heading h1,
.hero h1,
.section-heading h2,
.record-card h2,
.record-card h3,
.auth-card h1,
.detail-content-panel h1 {
    color: var(--ink);
    font-weight: 680;
    letter-spacing: 0;
}

.page-heading h1 {
    font-size: clamp(38px, 5vw, 48px);
}

.section-heading h2 {
    font-size: clamp(30px, 4vw, 36px);
    line-height: 1.1;
}

.hero-marketplace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 32px;
    padding: clamp(30px, 5vw, 64px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 80% 16%, rgba(45, 181, 167, 0.42), transparent 24rem),
        radial-gradient(circle at 14% 90%, rgba(217, 155, 69, 0.2), transparent 18rem),
        linear-gradient(135deg, #071e29 0%, #0d2632 48%, #123f45 100%);
    background-size: 44px 44px, 44px 44px, auto, auto, auto;
    box-shadow: var(--shadow-float);
}

.hero-marketplace::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    pointer-events: none;
}

.hero h1 {
    max-width: 780px;
    margin-bottom: 18px;
    color: #ffffff;
    font-size: clamp(44px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 620;
}

.hero-description {
    max-width: 620px;
    color: #c8d8dd;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.68;
}

.hero-actions,
.hero-proof,
.trust-cta-actions,
.action-links,
.record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button-dark-secondary {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.hero-proof span {
    display: inline-flex;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #e7f1f2;
    font-size: 13px;
    font-weight: 640;
}

.hero-experience {
    position: relative;
    display: grid;
    gap: 16px;
}

.capacity-visual {
    min-height: 224px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at center, rgba(45, 181, 167, 0.24), transparent 12rem),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        rgba(255, 255, 255, 0.07);
    background-size: auto, 28px 28px, 28px 28px, auto;
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.18) inset;
}

.capacity-node,
.visual-metric {
    position: absolute;
    display: grid;
    gap: 2px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    backdrop-filter: blur(14px);
}

.capacity-node span,
.visual-metric span,
.visual-metric small {
    color: #c7d9dd;
    font-size: 12px;
}

.capacity-node strong {
    font-size: 14px;
}

.capacity-node-primary {
    top: 22px;
    left: 22px;
}

.capacity-node-secondary {
    right: 24px;
    top: 76px;
}

.capacity-node-tertiary {
    left: 72px;
    bottom: 24px;
}

.visual-metric {
    right: 42px;
    bottom: 24px;
}

.visual-metric strong {
    color: var(--warm);
    font-size: 38px;
    line-height: 1;
}

.hero-search-panel,
.search-form {
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.hero-search-panel {
    padding: clamp(18px, 3vw, 26px);
}

.search-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}

.search-panel-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.15;
    font-weight: 680;
}

.search-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

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

.advanced-search {
    grid-column: 1 / -1;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: #f7fbfa;
}

.advanced-search summary {
    cursor: pointer;
    padding: 12px 14px;
    color: var(--ink);
    font-weight: 700;
}

.advanced-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 14px;
}

.search-form label,
.styled-form label,
.form-field label {
    display: block;
    margin-bottom: 7px;
    color: #33444d;
    font-size: 13px;
    font-weight: 690;
}

.search-fields input,
.search-fields select,
.styled-form input,
.styled-form select,
.styled-form textarea,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(13, 38, 50, 0.16);
    border-radius: 12px;
    background: #ffffff;
    color: var(--copy);
    box-shadow: 0 1px 0 rgba(13, 38, 50, 0.03);
}

.search-fields input:focus,
.search-fields select:focus,
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--teal-vivid);
    box-shadow: 0 0 0 4px rgba(45, 181, 167, 0.16);
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.active-filters span,
.category-chip,
.status-pill,
.trust-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 760;
}

.active-filters span {
    padding: 6px 9px;
    border: 1px solid rgba(45, 181, 167, 0.24);
    background: #effaf8;
    color: var(--teal-deep);
}

.marketplace-snapshot,
.stats-grid,
.finance-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 38px;
}

.snapshot-card,
.stat-card,
.finance-summary-card,
.record-card,
.summary-card,
.process-card,
.dashboard-spotlight,
.next-action-panel,
.order-timeline-panel,
.category-discovery,
.process-section,
.trust-cta-section,
.auth-card,
.legal-section,
.conversation-form,
.conversation-message {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-premium);
}

.snapshot-card,
.stat-card,
.finance-summary-card {
    padding: 22px;
}

.snapshot-card strong,
.stat-card dd,
.finance-summary-card strong {
    color: var(--ink);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 680;
    line-height: 1;
}

.snapshot-label,
.stat-card dt,
.finance-summary-card span {
    color: var(--copy-muted);
    font-size: 13px;
    font-weight: 700;
}

.category-discovery,
.process-section,
.trust-cta-section {
    padding: clamp(22px, 4vw, 34px);
    margin: 30px 0;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-chip {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--stroke);
    background: #ffffff;
    color: var(--ink);
    transition: transform 180ms var(--ease-premium), background 180ms var(--ease-premium), border-color 180ms var(--ease-premium);
}

.category-chip:hover,
.category-chip-active {
    border-color: rgba(45, 181, 167, 0.35);
    background: #eaf9f7;
    transform: translateY(-1px);
    text-decoration: none;
}

.workflow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 26px 0;
    padding: 0;
    list-style: none;
}

.workflow-steps li {
    position: relative;
    min-height: 172px;
    padding: 18px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff, #f5faf9);
}

.workflow-steps span {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--warm);
    font-size: 13px;
    font-weight: 800;
}

.workflow-steps strong {
    display: block;
    color: var(--ink);
    font-size: 18px;
}

.workflow-steps p,
.role-lanes p,
.snapshot-card p,
.section-heading p {
    color: var(--copy-muted);
}

.role-lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.role-lanes article {
    padding: 20px;
    border: 1px solid rgba(45, 181, 167, 0.18);
    border-radius: var(--radius);
    background: #f4fbf9;
}

.results-heading {
    align-items: end;
}

.results-tools {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--copy-muted);
    font-size: 14px;
    font-weight: 700;
}

.listings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.listing-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-premium);
    transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium), border-color 200ms var(--ease-premium);
}

.listing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 181, 167, 0.32);
    box-shadow: var(--shadow-float);
}

.listing-media {
    position: relative;
    min-height: 100%;
    background:
        linear-gradient(rgba(13, 38, 50, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 38, 50, 0.04) 1px, transparent 1px),
        #eef6f5;
    background-size: 26px 26px;
}

.listing-image,
.detail-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}

.listing-image-placeholder,
.detail-image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 230px;
    background:
        radial-gradient(circle at 70% 20%, rgba(45, 181, 167, 0.2), transparent 9rem),
        linear-gradient(rgba(13, 38, 50, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 38, 50, 0.05) 1px, transparent 1px),
        #edf6f5;
    background-size: auto, 24px 24px, 24px 24px, auto;
    color: var(--ink);
    font-weight: 760;
}

.listing-card-header {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.listing-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    gap: 22px;
    padding: 24px;
}

.listing-title-row h3 {
    margin: 0 0 8px;
    font-size: clamp(22px, 3vw, 26px);
    line-height: 1.15;
}

.listing-title-row h3 a {
    color: var(--ink);
}

.listing-category {
    margin: 0 0 7px;
    color: var(--teal-deep);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.company {
    display: grid;
    gap: 2px;
    margin: 0 0 12px;
}

.company a {
    color: var(--copy);
    font-weight: 740;
}

.company span,
.record-meta,
.description {
    color: var(--copy-muted);
}

.listing-meta {
    display: grid;
    gap: 9px;
    margin: 0;
}

.listing-meta div,
.detail-capability-grid div,
.detail-facts div {
    padding: 11px 12px;
    border: 1px solid rgba(13, 38, 50, 0.09);
    border-radius: 12px;
    background: #f7fbfa;
}

.listing-meta dt,
.detail-facts dt,
.record-facts dt {
    color: var(--copy-muted);
    font-size: 12px;
    font-weight: 760;
}

.listing-meta dd,
.detail-facts dd,
.record-facts dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-weight: 690;
}

.listing-price-fact {
    border-color: rgba(217, 155, 69, 0.32) !important;
    background: var(--warm-soft) !important;
}

.listing-actions {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.status-pill {
    padding: 5px 9px;
    border: 1px solid rgba(13, 38, 50, 0.08);
    background: #edf4f3;
    color: #465760;
}

.trust-badge {
    padding: 5px 9px;
    border: 1px solid rgba(45, 181, 167, 0.25);
    background: #e8f8f5;
    color: var(--teal-deep);
}

.status-pending,
.status-not_funded,
.stat-card-attention {
    border-color: rgba(217, 155, 69, 0.34);
    background: var(--warm-soft);
    color: #7a4d18;
}

.status-accepted,
.status-approved,
.status-completed,
.status-released {
    border-color: rgba(35, 122, 85, 0.25);
    background: #e9f7ef;
    color: #1f6848;
}

.status-rejected,
.status-declined,
.status-cancelled,
.status-canceled {
    border-color: rgba(180, 58, 50, 0.28);
    background: #fff0ee;
    color: #9c2c25;
}

.status-funded,
.status-in_progress,
.status-processing,
.status-open {
    border-color: rgba(47, 111, 166, 0.22);
    background: #eaf3fb;
    color: #245d90;
}

.dashboard-hero,
.workflow-hero,
.legal-heading {
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(rgba(13, 38, 50, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 38, 50, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff, #eff8f7);
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow: var(--shadow-premium);
}

.stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
    gap: 18px;
}

.record-card,
.summary-card {
    padding: 22px;
}

.next-action-panel,
.order-timeline-panel {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 24px;
    margin: 20px 0;
}

.order-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
}

.timeline-step {
    padding: 16px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: #f7fbfa;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--stroke-strong);
}

.timeline-step-complete .timeline-dot {
    background: var(--teal-vivid);
}

.finance-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-disclaimer,
.milestone-hint,
.auth-consent-note {
    padding: 12px 14px;
    border-left: 4px solid var(--warm);
    border-radius: 10px;
    background: var(--warm-soft);
    color: #654112;
}

.conversation-layout,
.listing-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 22px;
    align-items: start;
}

.detail-main-panel,
.detail-sidebar {
    display: grid;
    gap: 18px;
}

.detail-main-panel {
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-premium);
}

.detail-content-panel {
    padding: 26px;
}

.detail-badge-row,
.milestone-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.auth-card {
    width: min(980px, 100%);
    margin: 20px auto 46px;
    padding: clamp(24px, 4vw, 38px);
    overflow: hidden;
}

.auth-card::before {
    content: "";
    display: block;
    height: 5px;
    margin: -38px -38px 26px;
    background: linear-gradient(90deg, var(--teal-deep), var(--warm));
}

.auth-brand-lockup {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--stroke);
}

.auth-brand-lockup img {
    width: min(250px, 100%);
    height: auto;
}

.legal-page {
    max-width: 900px;
    margin-inline: auto;
}

.legal-section {
    padding: 26px;
    line-height: 1.75;
}

.cookie-consent {
    position: fixed;
    inset: auto 18px 18px;
    z-index: 1000;
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent-panel {
    width: min(760px, 100%);
    margin-inline: auto;
    padding: 22px;
    border: 1px solid rgba(13, 38, 50, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.site-footer {
    border-top: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #071e29, var(--ink));
    background-size: 42px 42px, 42px 42px, auto;
    color: #c3d5da;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) 2fr;
    gap: 28px;
    padding: 34px 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.footer-links a,
.footer-cookie-button {
    display: block;
    margin-top: 8px;
    color: #dce9ec;
}

.footer-bottom {
    grid-column: 1 / -1;
    color: #9fb5bd;
}

.empty-state,
.empty-panel {
    grid-column: 1 / -1;
    padding: 42px 24px;
    border: 1px dashed rgba(13, 38, 50, 0.2);
    border-radius: var(--radius);
    background: #ffffff;
    text-align: center;
}

.empty-illustration {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(13, 38, 50, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 38, 50, 0.08) 1px, transparent 1px),
        #eaf8f6;
    background-size: 14px 14px;
}

.button-favorite .favorite-icon,
.favorite-icon {
    width: 15px;
    height: 19px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 4px 4px 1px 1px;
    transition: transform 160ms var(--ease-premium);
}

.button-favorite:hover .favorite-icon {
    transform: translateY(-1px) scale(1.05);
}

.button-favorite-saved {
    border-color: rgba(217, 155, 69, 0.4);
    background: var(--warm-soft);
    color: #8a581a;
}

.motion-ready .reveal-up,
.motion-ready .reveal-left,
.motion-ready .reveal-right,
.motion-ready .fade-in,
.motion-ready .scale-in,
.motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition:
        opacity 560ms var(--ease-premium),
        transform 560ms var(--ease-premium);
}

.motion-ready .reveal-left {
    transform: none;
}

.motion-ready .reveal-right {
    transform: none;
}

.motion-ready .scale-in {
    transform: none;
}

.motion-ready .is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    .hero-marketplace {
        grid-template-columns: 1fr;
    }

    .listing-card,
    .listing-card-body {
        grid-template-columns: 1fr;
    }

    .listing-media {
        min-height: 260px;
    }

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

@media (max-width: 940px) {
    .header-inner {
        position: relative;
        min-height: 76px;
        flex-direction: row;
        align-items: center;
    }

    .nav-toggle {
        margin-left: auto;
        border: 1px solid var(--stroke);
        border-radius: 12px;
        background: #ffffff;
    }

    .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 10px);
        display: none;
        padding: 14px;
        border: 1px solid var(--stroke);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-float);
    }

    .site-nav.site-nav-open {
        display: grid;
    }

    .nav-group,
    .nav-group-primary,
    .nav-group-account {
        display: grid;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .nav-link,
    .nav-cta,
    .logout-form .button {
        width: 100%;
        justify-content: flex-start;
        border-radius: 12px;
    }

    .advanced-search-grid,
    .marketplace-snapshot,
    .finance-summary-grid,
    .stats-grid,
    .footer-inner,
    .footer-links,
    .conversation-layout,
    .listing-detail-layout {
        grid-template-columns: 1fr 1fr;
    }

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

    .workflow-steps li {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(100% - 24px, 1180px);
    }

    .brand-logo-full {
        width: 205px;
    }

    .hero-marketplace {
        padding: 24px;
        border-radius: 22px;
    }

    .hero h1 {
        font-size: clamp(40px, 12vw, 50px);
    }

    .capacity-visual {
        min-height: 270px;
    }

    .capacity-node-secondary,
    .visual-metric {
        right: 14px;
    }

    .capacity-node-tertiary {
        left: 16px;
    }

    .search-fields,
    .advanced-search-grid,
    .marketplace-snapshot,
    .finance-summary-grid,
    .stats-grid,
    .footer-inner,
    .footer-links,
    .conversation-layout,
    .listing-detail-layout,
    .role-lanes,
    .next-action-panel,
    .order-timeline-panel {
        display: grid;
        grid-template-columns: 1fr;
    }

    .listing-card-body,
    .record-card,
    .auth-card,
    .category-discovery,
    .process-section,
    .trust-cta-section {
        padding: 18px;
    }

    .next-action-panel,
    .order-timeline-panel {
        align-items: stretch;
    }

    .cookie-consent {
        inset: auto 10px 10px;
    }
}

/* Responsive polish */

@media (max-width: 1080px) {
    .hero-marketplace,
    .listing-detail-layout,
    .conversation-layout {
        grid-template-columns: 1fr;
    }

    .hero-search-panel {
        align-self: stretch;
    }

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

@media (max-width: 940px) {
    .header-inner {
        position: relative;
        min-height: 68px;
        align-items: center;
    }

    .nav-toggle {
        display: grid;
        margin-left: auto;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #ffffff;
        box-shadow: var(--shadow-lift);
    }

    .site-nav.site-nav-open {
        display: grid;
    }

    .nav-group,
    .nav-group-account,
    .nav-group-primary {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .nav-link,
    .logout-form,
    .logout-form .button,
    .nav-cta {
        width: 100%;
        justify-content: center;
    }

    .marketplace-snapshot,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .trust-cta-section {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .container,
    .page-content {
        width: min(100% - 24px, 1240px);
    }

    .utility-inner {
        justify-content: center;
        text-align: center;
    }

    .utility-inner p:last-child {
        display: none;
    }

    .page-heading,
    .dashboard-hero,
    .hero-marketplace,
    .category-discovery,
    .process-card,
    .trust-cta-section {
        padding: 22px;
    }

    .hero h1 {
        font-size: clamp(38px, 12vw, 54px);
    }

    .hero-capacity-snapshot,
    .footer-links {
        grid-template-columns: 1fr;
    }

    .search-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .listing-actions,
    .trust-cta-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .trust-cta-actions .button,
    .listing-actions .button {
        width: 100%;
    }

    .listing-card-body {
        padding: 18px;
    }

    .order-timeline-panel {
        overflow-x: hidden;
    }
}

@media (max-width: 430px) {
    .brand-subtitle {
        display: none;
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }

    .hero-marketplace {
        margin-inline: -4px;
    }

    .stat-card dd,
    .detail-price {
        font-size: 32px;
    }

    .button {
        min-height: 44px;
        padding-inline: 14px;
    }
}

/* -------------------------
   PHASE 9 WORKFLOW UX
-------------------------- */

.workflow-hero {
    border-top: 5px solid var(--green);
}

.next-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 28px;
    padding: 26px;
    border: 1px solid #d7e7df;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, #ffffff 0%, #f2f8f5 100%);
    box-shadow: var(--shadow-soft);
}

.next-action-panel h2 {
    margin: 0 0 8px;
    color: var(--charcoal);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
}

.next-action-panel p {
    margin: 0;
    color: var(--slate);
}

.workflow-timeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

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

.finance-summary-card {
    padding: 22px;
    border: 1px solid rgba(24, 33, 47, 0.1);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.finance-summary-card span {
    display: block;
    color: var(--soft-slate);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.finance-summary-card strong {
    display: block;
    margin-top: 8px;
    color: var(--charcoal);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.05;
}

.demo-disclaimer {
    margin: 16px 0 0;
    color: var(--slate);
    font-size: 14px;
}

.milestone-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.milestone-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.milestone-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.milestone-card h3,
.activity-card h3 {
    margin: 0;
    color: var(--charcoal);
    font-size: 22px;
}

.milestone-hint {
    margin: 0;
    padding: 12px;
    border-left: 4px solid var(--green);
    border-radius: var(--radius-sm);
    background: #f4faf7;
    color: var(--slate);
    font-size: 14px;
}

.milestone-review-form {
    margin-top: auto;
}

.funding-confirmation .record-facts {
    margin-bottom: 20px;
}

.order-side-rail {
    display: grid;
    gap: 18px;
}

.order-conversation-thread {
    max-height: 680px;
    overflow: auto;
    padding-right: 4px;
}

.conversation-message {
    scroll-margin-top: 120px;
}

.activity-card {
    padding: 24px;
}

.activity-list {
    display: grid;
    gap: 12px;
}

.activity-list article {
    padding-bottom: 12px;
    border-bottom: 1px solid #dfe7ed;
}

.activity-list article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.activity-list p {
    margin: 0;
    color: var(--charcoal);
    font-weight: 700;
}

.activity-list span {
    display: block;
    margin-top: 4px;
    color: var(--soft-slate);
    font-size: 13px;
}

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

@media (max-width: 720px) {
    .next-action-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .next-action-panel .button {
        width: 100%;
    }

    .workflow-timeline,
    .finance-summary-grid {
        grid-template-columns: 1fr;
    }

    .order-conversation-thread {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

/* -------------------------
   PHASE 10 FINAL QA POLISH
-------------------------- */

.business-profile {
    margin: 24px 0 32px;
}

.business-profile h1 {
    margin: 16px 0 8px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
}

.business-description {
    max-width: 760px;
    margin-top: 24px;
}

.profile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.record-card,
.summary-card,
.stat-card,
.listing-card,
.notification-card,
.finance-summary-card,
.milestone-card,
.conversation-message,
.message,
.empty-panel,
.detail-content-panel,
.detail-sidebar,
.order-side-rail {
    min-width: 0;
}

.page-heading h1,
.page-heading h2,
.record-card h2,
.record-card h3,
.listing-title-row h3,
.business-profile h1,
.brand-name,
.detail-manufacturer-line,
.record-meta,
.record-facts dd,
.detail-facts dd,
.activity-list p,
.conversation-message p,
.message,
.notification-card p,
.status-pill,
.trust-badge,
.button {
    overflow-wrap: anywhere;
}

.button,
.status-pill,
.trust-badge {
    white-space: normal;
    text-align: center;
}

.record-actions {
    align-items: center;
}

.notification-card .record-actions {
    margin-top: auto;
}

.workflow-timeline {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

@media (hover: none) {
    .button:hover,
    .listing-card:hover,
    .record-card:hover {
        transform: none;
    }

    .listing-card:hover .listing-image {
        transform: none;
    }
}

@media (max-width: 720px) {
    .motion-ready .stats-grid > .stat-card,
    .motion-ready .record-grid > .record-card,
    .motion-ready .record-grid > .empty-panel {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .record-actions,
    .action-links {
        width: 100%;
    }

    .record-actions .button,
    .action-links .button,
    .profile-pagination .button {
        width: 100%;
    }

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

@media (max-width: 390px) {
    .container,
    .page-content {
        width: min(100% - 18px, 1240px);
    }

    .page-heading,
    .dashboard-hero,
    .hero-marketplace,
    .category-discovery,
    .process-card,
    .trust-cta-section,
    .next-action-panel,
    .finance-summary-card,
    .record-card,
    .summary-card,
    .auth-card {
        padding: 18px;
    }

    .hero h1 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .finance-summary-card strong,
    .stat-card dd,
    .detail-price {
        font-size: 28px;
    }
}

/* -------------------------
   PHASE 11 BRAND IDENTITY
-------------------------- */

body {
    background:
        radial-gradient(circle at top left, rgba(43, 140, 132, 0.08), transparent 30rem),
        linear-gradient(180deg, #f7fafb 0%, var(--background) 46rem);
}

a {
    color: var(--brand-700);
}

a:hover {
    color: var(--brand-800);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline-color: var(--accent);
}

.utility-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(90deg, #0b2530 0%, var(--brand-900) 58%, #173e49 100%);
    color: #c7d6dc;
}

.utility-badge {
    color: #ffffff;
}

.site-header {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(16, 47, 60, 0.04);
}

.header-inner {
    min-height: 78px;
}

.brand {
    flex: 0 0 auto;
    transition: transform var(--duration-fast) var(--ease-premium);
}

.brand:hover {
    transform: translateY(-1px);
}

.brand-logo-lockup,
.brand-logo-image,
.footer-logo-image {
    display: block;
}

.brand-logo-image {
    height: auto;
}

.brand-logo-full {
    width: clamp(196px, 21vw, 252px);
}

.brand-logo-compact {
    display: none;
    width: 42px;
}

.footer-logo-image {
    width: min(236px, 100%);
    height: auto;
}

.brand-mark {
    border-radius: 14px;
    background: var(--brand-900);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.site-nav {
    align-items: center;
    gap: 8px;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-group-primary {
    padding: 4px;
    border: 1px solid rgba(16, 47, 60, 0.08);
    border-radius: 999px;
    background: rgba(244, 247, 248, 0.84);
}

.nav-group-account {
    margin-left: 8px;
}

.nav-link {
    border-radius: 999px;
    color: var(--text);
    transition:
        background var(--duration-fast) var(--ease-premium),
        color var(--duration-fast) var(--ease-premium),
        box-shadow var(--duration-fast) var(--ease-premium);
}

.nav-link:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

.nav-link-active {
    background: #ffffff;
    color: var(--brand-900);
    box-shadow: 0 1px 6px rgba(16, 47, 60, 0.08);
}

.nav-link-strong {
    color: var(--brand-800);
}

.account-link {
    color: var(--text-muted);
}

.notification-link {
    gap: 8px;
}

.notification-count {
    min-width: 22px;
    height: 22px;
    background: var(--danger);
    box-shadow: 0 0 0 3px #ffffff;
}

.nav-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--brand-900);
    box-shadow: var(--shadow-soft);
}

.nav-toggle-line {
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--brand-900);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transition:
        transform var(--duration-fast) var(--ease-premium),
        box-shadow var(--duration-fast) var(--ease-premium),
        background var(--duration-fast) var(--ease-premium),
        border-color var(--duration-fast) var(--ease-premium);
}

.button:hover {
    transform: translateY(-1px);
    background: #0b2530;
    box-shadow: var(--shadow-crisp);
}

.button-primary {
    background: var(--brand-700);
}

.button-primary:hover {
    background: var(--brand-800);
}

.button-secondary,
.button-outline {
    border-color: var(--border);
    background: #ffffff;
    color: var(--brand-900);
    box-shadow: none;
}

.button-secondary:hover,
.button-outline:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    color: var(--brand-900);
}

.button-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--brand-800);
    box-shadow: none;
}

.button-ghost:hover {
    background: var(--brand-50);
    box-shadow: none;
}

.button-dark-secondary {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.button-dark-secondary:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.button-accept {
    background: var(--success);
}

.button-accept:hover {
    background: #1d6140;
}

.button-danger,
.button-reject {
    background: var(--danger);
}

.button-danger:hover,
.button-reject:hover {
    background: #8f2b25;
}

.button-disabled,
.button[aria-disabled="true"] {
    border-color: var(--border);
    background: #edf2f4;
    color: #687782;
    cursor: not-allowed;
    box-shadow: none;
}

.button-disabled:hover,
.button[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: none;
}

.eyebrow {
    color: var(--brand-600);
    letter-spacing: 1.1px;
}

.page-heading h1,
.section-heading h2,
.record-card h2,
.record-card h3,
.auth-card h1 {
    color: var(--brand-900);
}

.page-heading p,
.section-heading p,
.record-meta,
.auth-intro,
.helptext {
    color: var(--text-muted);
}

.hero-marketplace {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 20% 20%, rgba(43, 140, 132, 0.35), transparent 22rem),
        linear-gradient(135deg, #0b2530 0%, var(--brand-900) 54%, #174d55 100%);
    background-size: 44px 44px, 44px 44px, auto, auto;
    box-shadow: var(--shadow-lift);
}

.hero-marketplace::before,
.hero-marketplace::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-marketplace::before {
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: calc(var(--radius) + 6px);
}

.hero-marketplace::after {
    right: -80px;
    bottom: -90px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(213, 150, 61, 0.22);
    transform: rotate(35deg);
}

.hero-copy,
.hero-search-panel {
    position: relative;
    z-index: 1;
}

.hero h1 {
    max-width: 820px;
    font-weight: 950;
}

.hero-description {
    color: #d8e6eb;
}

.hero-proof span {
    border: 1px solid rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.08);
    color: #edf6f7;
}

.hero-capacity-snapshot div {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(10px);
}

.hero-search-panel {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 72px rgba(4, 21, 28, 0.32);
}

.search-panel-heading h2 {
    color: var(--brand-900);
}

.search-fields input,
.search-fields select,
.styled-form input,
.styled-form select,
.styled-form textarea,
.form-field input,
.form-field select,
.form-field textarea {
    border-color: var(--border-strong);
    background: #ffffff;
}

.search-fields input:focus,
.search-fields select:focus,
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(43, 140, 132, 0.14);
}

.active-filters span,
.category-chip-active {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-800);
}

.record-card,
.summary-card,
.stat-card,
.listing-card,
.notification-card,
.finance-summary-card,
.milestone-card,
.process-card,
.trust-cta-section,
.category-discovery,
.order-timeline-panel,
.conversation-form,
.conversation-message {
    border: 1px solid rgba(16, 47, 60, 0.11);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.record-card:hover,
.stat-card:hover,
.summary-card:hover,
.listing-card:hover,
.finance-summary-card:hover {
    border-color: rgba(43, 140, 132, 0.28);
}

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand-500);
}

.stat-card-attention {
    border-color: rgba(213, 150, 61, 0.38);
    background: linear-gradient(180deg, #ffffff 0%, #fff9ee 100%);
}

.stat-card-attention::before {
    background: var(--accent);
}

.stat-card dd,
.finance-summary-card strong,
.detail-price {
    color: var(--brand-900);
}

.listing-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.listing-media {
    background:
        linear-gradient(135deg, #f5f8f9 0%, #edf4f5 100%);
}

.listing-image,
.listing-image-placeholder,
.detail-image {
    background:
        linear-gradient(rgba(16, 47, 60, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 47, 60, 0.04) 1px, transparent 1px),
        #f3f7f8;
    background-size: 24px 24px;
}

.listing-category {
    color: var(--brand-700);
}

.listing-title-row h3 {
    margin-bottom: 6px;
    color: var(--brand-900);
}

.company a {
    color: var(--text);
    font-weight: 850;
}

.company span {
    color: var(--text-muted);
}

.listing-meta div,
.detail-capability-grid div {
    border-color: rgba(16, 47, 60, 0.1);
    background: var(--surface-alt);
}

.listing-price-fact {
    border-color: rgba(213, 150, 61, 0.34) !important;
    background: #fff9ee !important;
}

.listing-price-fact dd,
.detail-price {
    color: var(--accent-strong);
}

.status-pill,
.trust-badge {
    border: 1px solid transparent;
    font-weight: 850;
}

.status-pill {
    background: #edf3f5;
    color: #465863;
}

.trust-badge {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-800);
}

.status-pending,
.status-not_funded {
    border-color: #efd49e;
    background: var(--warning-bg);
    color: var(--warning-text);
}

.status-accepted,
.status-approved,
.status-completed,
.status-released {
    border-color: #b9dbc9;
    background: var(--success-bg);
    color: var(--success-text);
}

.status-rejected,
.status-declined,
.status-cancelled,
.status-canceled {
    border-color: #efc3bf;
    background: var(--danger-bg);
    color: var(--danger-text);
}

.status-funded,
.status-in_progress,
.status-processing,
.status-open {
    border-color: #b8d2e9;
    background: var(--info-bg);
    color: var(--info-text);
}

.status-paused,
.status-inactive {
    border-color: var(--border-strong);
    background: #edf2f4;
    color: #52636e;
}

.message {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-900);
}

.dashboard-hero,
.workflow-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(16, 47, 60, 0.1);
    border-radius: var(--radius);
    background:
        linear-gradient(rgba(16, 47, 60, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 47, 60, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff 0%, #f2f8f8 100%);
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow: var(--shadow-soft);
}

.workflow-hero {
    border-top: 5px solid var(--brand-600);
}

.dashboard-spotlight,
.next-action-panel {
    border-color: rgba(43, 140, 132, 0.2);
}

.next-action-panel {
    background:
        linear-gradient(135deg, #ffffff 0%, var(--brand-50) 100%);
}

.order-timeline {
    gap: 12px;
}

.timeline-step {
    border-color: rgba(16, 47, 60, 0.1);
    background: var(--surface-alt);
}

.timeline-step-complete .timeline-dot {
    background: var(--success);
}

.finance-summary-card {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
}

.milestone-hint {
    border-left-color: var(--brand-500);
    background: var(--brand-50);
}

.conversation-message-own {
    border-color: var(--brand-200);
    background: var(--brand-50);
}

.auth-card {
    border-color: rgba(16, 47, 60, 0.12);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--brand-200), rgba(213, 150, 61, 0.38)) border-box;
}

.auth-card::before {
    background: linear-gradient(90deg, var(--brand-700), var(--accent));
}

.auth-brand-lockup {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.auth-brand-lockup img {
    display: block;
    width: min(235px, 100%);
    height: auto;
}

.auth-brand-lockup p {
    max-width: 520px;
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-consent-note {
    margin-top: -6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13px;
}

.legal-page {
    max-width: 920px;
    margin-inline: auto;
}

.legal-heading {
    align-items: flex-start;
    padding: 28px;
    border: 1px solid rgba(16, 47, 60, 0.1);
    border-radius: var(--radius);
    background:
        linear-gradient(rgba(16, 47, 60, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 47, 60, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff 0%, #f2f8f8 100%);
    background-size: 34px 34px, 34px 34px, auto;
    box-shadow: var(--shadow-soft);
}

.legal-section {
    margin: 18px 0;
    padding: 24px;
    border: 1px solid rgba(16, 47, 60, 0.11);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.legal-section h2 {
    margin-top: 0;
    color: var(--brand-900);
    font-size: 24px;
}

.legal-section p,
.legal-section li {
    color: var(--text-muted);
}

.legal-section code {
    color: var(--brand-900);
    font-weight: 800;
}

.legal-warning {
    border-color: rgba(213, 150, 61, 0.4);
    background: #fff9ee;
}

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

.legal-table {
    width: 100%;
    border-collapse: collapse;
}

.legal-table th,
.legal-table td {
    padding: 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--brand-50);
    color: var(--brand-900);
}

.back-link {
    color: var(--text-muted);
}

.back-link:hover {
    color: var(--brand-800);
}

.button-favorite {
    gap: 9px;
}

.favorite-icon {
    position: relative;
    width: 14px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 1px 1px;
}

.favorite-icon::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -5px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    background: inherit;
}

.button-favorite-saved {
    border-color: rgba(213, 150, 61, 0.45);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.site-footer {
    border-top: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #0b2530 0%, var(--brand-900) 100%);
    background-size: 42px 42px, 42px 42px, auto;
    color: #c7d6dc;
}

.footer-inner {
    color: #c7d6dc;
}

.footer-brand p,
.footer-bottom {
    color: #aec0cb;
}

.footer-links h2 {
    color: #ffffff;
}

.footer-links a {
    color: #dbe8ec;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-cookie-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #dbe8ec;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.footer-cookie-button:hover {
    color: #ffffff;
    text-decoration: underline;
}

.cookie-consent {
    position: fixed;
    inset: auto 16px 16px;
    z-index: 1000;
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent-panel {
    width: min(720px, 100%);
    margin-inline: auto;
    padding: 20px;
    border: 1px solid rgba(16, 47, 60, 0.16);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-lift);
}

.cookie-consent-panel h2 {
    margin: 0 0 8px;
    color: var(--brand-900);
    font-size: 22px;
}

.cookie-consent-panel p {
    margin: 0;
    color: var(--text-muted);
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cookie-preferences {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.cookie-preferences fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.cookie-preferences legend {
    margin-bottom: 12px;
    color: var(--brand-900);
    font-weight: 850;
}

.cookie-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 12px;
}

.cookie-option input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25rem;
}

.cookie-option strong {
    display: block;
    color: var(--text);
}

@media (max-width: 1080px) {
    .site-nav {
        gap: 8px;
    }

    .nav-group-primary {
        border-radius: var(--radius);
    }
}

@media (max-width: 940px) {
    .brand-logo-full {
        width: 206px;
    }

    .site-nav {
        border-color: rgba(16, 47, 60, 0.12);
        background: rgba(255, 255, 255, 0.98);
    }

    .nav-group,
    .nav-group-primary,
    .nav-group-account {
        margin-left: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        gap: 8px;
    }

    .nav-link-active {
        background: var(--brand-50);
        box-shadow: none;
    }
}

@media (max-width: 430px) {
    .header-inner {
        min-height: 68px;
        gap: 12px;
    }

    .site-header .brand,
    .site-header .brand:hover {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        margin-left: 0;
        transform: translateY(-50%);
    }

    .brand-logo-full {
        display: none;
    }

    .brand-logo-compact {
        display: block;
        width: 42px;
    }
}

/* -------------------------
   PHASE 13 ACCESSIBILITY
-------------------------- */

:root {
    --focus-ring: #8a560f;
    --focus-ring-offset: #ffffff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow:
        0 0 0 6px var(--focus-ring-offset),
        0 0 0 9px rgba(138, 86, 15, 0.28);
}

.button:focus-visible,
.nav-link:focus-visible,
.category-chip:focus-visible {
    text-decoration: none;
}

.skip-link:focus-visible {
    top: 14px;
}

::placeholder {
    color: #6b7785;
    opacity: 1;
}

.styled-form input[aria-invalid="true"],
.styled-form select[aria-invalid="true"],
.styled-form textarea[aria-invalid="true"],
.form-field-error input,
.form-field-error select,
.form-field-error textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(180, 58, 50, 0.12);
}

.form-field-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.styled-form .form-field-checkbox input[type="checkbox"],
.form-field-checkbox input[type="checkbox"] {
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.22rem;
}

.form-error-summary,
.field-errors {
    color: var(--danger-text);
}

.form-error-summary {
    padding: 12px 14px;
    border: 1px solid #efc3bf;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
}

.form-error-summary p {
    margin: 0 0 6px;
    font-weight: 800;
}

.field-errors .errorlist,
.form-error-summary .errorlist {
    margin: 6px 0 0;
}

.helptext {
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.55;
}

.button-processing,
.button-processing:hover {
    transform: none;
    cursor: progress;
}

.button:disabled,
.button[disabled] {
    border-color: var(--border);
    background: #edf2f4;
    color: #52636e;
    cursor: not-allowed;
    box-shadow: none;
}

.timeline-step {
    position: relative;
}

.timeline-state {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: #52636e;
    font-size: 12px;
    font-weight: 850;
}

.timeline-step-complete .timeline-state {
    border-color: #b9dbc9;
    background: var(--success-bg);
    color: var(--success-text);
}

.timeline-dot {
    flex: 0 0 auto;
}

@media (min-width: 941px) {
    .nav-toggle {
        display: none;
    }
}

@media (max-width: 940px) {
    .nav-toggle {
        display: inline-grid;
        place-items: center;
    }

    .site-nav {
        display: none;
    }

    .site-nav.site-nav-open {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .reveal-up,
    .reveal-left,
    .reveal-right,
    .fade-in,
    .scale-in,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* -------------------------
   PHASE 16 FINAL CASCADE FIXES
-------------------------- */

.hero-marketplace {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    border-radius: 28px;
}

.hero h1 {
    font-size: clamp(44px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 620;
}

.motion-ready .reveal-up,
.motion-ready .reveal-left,
.motion-ready .reveal-right,
.motion-ready .fade-in,
.motion-ready .scale-in,
.motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
}

.listings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.listing-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 20px;
}

.listing-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    gap: 22px;
    padding: 24px;
}

.listing-media {
    min-height: 100%;
}

.listing-image,
.listing-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 230px;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

.listing-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 14px;
}

@media (max-width: 1180px) {
    .hero-marketplace,
    .listing-card,
    .listing-card-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .hero h1 {
        font-size: clamp(38px, 12vw, 50px);
    }
}

/* -------------------------
   EDITORIAL MARKETPLACE CLEANUP
-------------------------- */

:root {
    --ink: #16241f;
    --paper: #f5ebdd;
    --paper-2: #fbf6ed;
    --clay: #b96a35;
    --moss: #596f53;
    --ui-serif: Georgia, "Times New Roman", serif;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 36px;
    --space-6: 56px;
    --space-7: 84px;
}

body {
    background: var(--paper-2);
    color: var(--ink);
}

.site-header {
    background: rgba(251, 246, 237, 0.9);
    border-bottom: 1px solid rgba(22, 36, 31, 0.12);
    backdrop-filter: blur(18px);
}

.brand-logo-full {
    width: 244px;
    height: auto;
}

.site-nav .nav-link,
.site-nav .nav-link-active,
.site-nav .nav-link:hover {
    min-height: 36px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
}

.site-nav .nav-group,
.site-nav .nav-group-primary,
.site-nav .nav-group-account {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-nav .nav-link-active,
.site-nav .nav-link:hover {
    color: var(--clay);
    transform: translateY(-1px);
}

.button {
    border-radius: 6px;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--ink);
}

.button-secondary {
    border-color: rgba(22, 36, 31, 0.22);
    background: transparent;
    color: var(--ink);
}

.text-action {
    display: inline-flex;
    gap: 8px;
    color: var(--ink);
    font-weight: 800;
}

.editorial-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5) 0 var(--space-4);
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
}

.hero-kicker {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.hero-statement h1 {
    max-width: 980px;
    margin: 0;
    color: var(--ink);
    font-family: var(--ui-serif);
    font-size: clamp(50px, 6.4vw, 86px);
    font-weight: 560;
    line-height: 0.94;
}

.hero-market-strip {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) 0 0 var(--space-4);
    border-left: 1px solid rgba(22, 36, 31, 0.2);
}

.capacity-search {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-3);
    margin-top: calc(var(--space-3) * -1);
    padding: var(--space-4);
    border: 1px solid rgba(22, 36, 31, 0.16);
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(22, 36, 31, 0.055) 1px, transparent 1px),
        linear-gradient(var(--paper), var(--paper));
    background-size: 38px 38px, auto;
    box-shadow: 0 18px 42px rgba(22, 36, 31, 0.08);
}

.search-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: end;
}

.capacity-search input,
.capacity-search select,
.styled-form input,
.styled-form select,
.styled-form textarea {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.38);
    background: rgba(255, 255, 255, 0.48);
}

.capacity-discovery-module .search-field-wide label {
    display: block;
    font-family: var(--ui-serif);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 560;
    line-height: 1;
    text-transform: none;
}

.search-query-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.capacity-discovery-module .search-panel-heading h2 {
    margin: 0;
    font-family: inherit;
    font-size: 22px;
    font-weight: 780;
    line-height: 1.15;
}

.capacity-discovery-module .search-field-wide input {
    min-height: 64px;
    padding: 14px 0;
    font-size: clamp(19px, 2vw, 26px);
}

.search-query-row .button {
    min-height: 58px;
    padding-inline: var(--space-4);
}

.capacity-module {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(22, 36, 31, 0.14);
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
}

.capacity-module span {
    padding: 12px 16px;
    border-right: 1px solid rgba(22, 36, 31, 0.14);
    color: #4f5b55;
    font-size: 13px;
    font-weight: 820;
    letter-spacing: 0.04em;
}

.advanced-search summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 800;
}

.advanced-search[open] summary span:last-child {
    transform: rotate(45deg);
}

.advanced-search-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.hero-proof-line {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.hero-proof-line span {
    padding: var(--space-3);
    border-right: 1px solid rgba(22, 36, 31, 0.16);
    font-weight: 760;
}

.category-discovery,
.marketplace-results,
.trust-section {
    margin-top: var(--space-7);
}

.section-heading-editorial {
    display: grid;
    grid-template-columns: 0.36fr 0.64fr;
    align-items: end;
    margin-bottom: var(--space-5);
}

.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2,
.detail-title-panel h1 {
    font-family: var(--ui-serif);
    font-weight: 560;
}

.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2 {
    font-size: clamp(38px, 5vw, 72px);
    line-height: 0.98;
}

.category-rows {
    border-top: 1px solid rgba(22, 36, 31, 0.16);
}

.category-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto 42px;
    gap: var(--space-4);
    align-items: center;
    min-height: 92px;
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
    color: var(--ink);
    text-decoration: none;
}

.category-row:hover {
    background: rgba(185, 106, 53, 0.07);
    text-decoration: none;
    transform: translateX(6px);
}

.category-name {
    font-family: var(--ui-serif);
    font-size: clamp(28px, 4vw, 54px);
}

.sourcing-story {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
    gap: var(--space-6);
    margin-top: var(--space-7);
    padding: var(--space-6) 0;
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.story-sticky {
    position: sticky;
    top: 118px;
    align-self: start;
}

.story-steps {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-steps li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid rgba(22, 36, 31, 0.16);
    opacity: 0.58;
    transition: opacity 220ms ease, transform 220ms ease;
}

.story-steps li.is-emphasized {
    opacity: 1;
    transform: translateX(-8px);
}

.story-steps span,
.story-steps strong {
    font-family: var(--ui-serif);
}

.story-steps span {
    grid-row: span 2;
    color: var(--clay);
    font-size: 42px;
}

.story-steps strong {
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
}

.listings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.listing-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(22, 36, 31, 0.16);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
}

.listing-card:hover {
    border-color: rgba(185, 106, 53, 0.55);
    background: #fffaf2;
    transform: translateY(-2px);
}

.listing-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    gap: var(--space-5);
    padding: var(--space-4);
}

.listing-image,
.listing-image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    min-height: 248px;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

.listing-image-placeholder,
.detail-image-placeholder {
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--space-2);
    overflow: hidden;
    padding: var(--space-4);
    background:
        linear-gradient(135deg, rgba(22, 36, 31, 0.18) 0 1px, transparent 1px 18px),
        radial-gradient(circle at 22% 18%, rgba(185, 106, 53, 0.34), transparent 24%),
        linear-gradient(135deg, #23332e, #596f53);
    color: var(--paper);
    text-align: left;
}

.listing-image-placeholder strong,
.detail-image-placeholder strong {
    position: relative;
    z-index: 1;
    font-family: var(--ui-serif);
    font-size: 28px;
    line-height: 1;
}

.listing-category-metal .listing-image-placeholder,
.listing-category-metal .detail-image-placeholder {
    background: repeating-linear-gradient(45deg, rgba(245, 235, 221, 0.12) 0 1px, transparent 1px 14px), linear-gradient(135deg, #232928, #6d716a);
}

.listing-category-textiles .listing-image-placeholder,
.listing-category-textiles .detail-image-placeholder {
    background: repeating-linear-gradient(90deg, rgba(245, 235, 221, 0.14) 0 2px, transparent 2px 16px), repeating-linear-gradient(0deg, rgba(245, 235, 221, 0.1) 0 2px, transparent 2px 18px), linear-gradient(135deg, #596f53, #26372f);
}

.listing-category-packaging .listing-image-placeholder,
.listing-category-packaging .detail-image-placeholder {
    background: linear-gradient(30deg, transparent 40%, rgba(245, 235, 221, 0.16) 40% 42%, transparent 42%), linear-gradient(135deg, #824d2f, #b96a35);
}

.listing-card h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--ui-serif);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
}

.listing-meta div,
.detail-facts div,
.detail-capability-grid div {
    padding: 0 0 var(--space-3);
    border: 0;
    border-bottom: 1px solid rgba(22, 36, 31, 0.14);
    background: transparent;
}

.trust-section {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--ink);
    color: var(--paper);
}

.trust-title h2,
.trust-section .eyebrow {
    color: var(--paper);
}

.listing-detail-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--space-5);
    align-items: end;
    margin-top: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(22, 36, 31, 0.16);
}

.detail-image {
    min-height: 390px;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.detail-title-panel h1 {
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.96;
    color: var(--ink);
}

.listing-detail-hero,
.listing-detail-content,
.detail-section,
.manufacturer-trust-panel {
    color: var(--ink);
}

.detail-manufacturer-line,
.detail-manufacturer-line span,
.manufacturer-trust-panel p,
.detail-section p,
.record-meta {
    color: #4f5b55;
}

.detail-commercial-panel .button-primary,
.detail-commercial-panel .button-primary:hover {
    background: var(--ink);
    color: var(--paper);
}

.detail-commercial-panel .quote-note,
.detail-commercial-panel .price-label,
.detail-facts dt {
    color: #5f6a64;
}

.detail-price {
    color: var(--clay);
}

.detail-section h2,
.manufacturer-trust-panel h2,
.manufacturer-trust-panel h2 a {
    color: var(--ink);
}

.trust-badge {
    border-color: rgba(89, 111, 83, 0.34);
    background: rgba(89, 111, 83, 0.08);
    color: #40543c;
}

.status-pill {
    color: #44504a;
}

.detail-commercial-panel {
    position: sticky;
    top: 118px;
    align-self: start;
    padding: var(--space-4);
    border: 1px solid rgba(22, 36, 31, 0.18);
    background: var(--paper);
}

.listing-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(320px, 0.52fr);
    min-height: 640px;
    border: 1px solid rgba(22, 36, 31, 0.16);
    background: var(--paper);
}

.auth-story-panel,
.auth-form-panel {
    padding: var(--space-6);
}

.auth-story-panel {
    display: grid;
    align-content: space-between;
    background: var(--ink);
    color: var(--paper);
}

.auth-story-panel h1 {
    font-family: var(--ui-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 560;
    line-height: 0.98;
}

.auth-industrial-visual {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.2fr;
    gap: var(--space-2);
    min-height: 120px;
    align-items: end;
}

.auth-industrial-visual span {
    display: block;
    height: 70px;
    background: rgba(245, 235, 221, 0.18);
}

.auth-industrial-visual span:nth-child(2) {
    height: 118px;
    background: var(--clay);
}

.auth-industrial-visual span:nth-child(3) {
    height: 92px;
}

.site-footer {
    background: var(--ink);
}

.footer-brand p {
    max-width: 680px;
    color: #d8cdbc;
    font-family: var(--ui-serif);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.04;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid rgba(245, 235, 221, 0.18);
    padding-top: var(--space-4);
}

.cookie-consent-panel {
    width: min(460px, calc(100vw - 32px));
    margin: 0;
    padding: var(--space-3);
    border-radius: 0;
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(22, 36, 31, 0.18);
}

.cookie-consent {
    right: 16px;
    left: auto;
    bottom: 16px;
}

.cookie-consent-panel h2 {
    font-size: 19px;
}

.cookie-consent-panel p {
    font-size: 14px;
}

.motion-ready [data-reveal] {
    opacity: 1;
    transform: translateY(18px);
    transition: opacity 420ms ease, transform 420ms ease;
}

.motion-ready [data-reveal="left"] {
    transform: translateX(-22px);
}

.motion-ready [data-reveal="right"] {
    transform: translateX(22px);
}

.motion-ready [data-reveal="scale"] {
    transform: translateY(18px) scale(0.985);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1040px) {
    .editorial-hero,
    .sourcing-story,
    .trust-section,
    .listing-detail-hero,
    .listing-detail-content,
    .auth-split {
        grid-template-columns: 1fr;
    }

    .story-sticky,
    .detail-commercial-panel {
        position: static;
    }

    .advanced-search-grid,
    .hero-proof-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-query-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    html,
    body {
        overflow-x: hidden;
    }

    .brand-logo-full {
        width: 206px;
    }

    .editorial-hero {
        overflow: hidden;
    }

    .editorial-hero [data-reveal] {
        transform: none;
    }

    .hero-kicker,
    .advanced-search-grid,
    .hero-proof-line,
    .section-heading-editorial,
    .listing-card,
    .listing-card-body,
    .detail-capability-grid {
        grid-template-columns: 1fr;
    }

    .hero-kicker {
        display: grid;
        gap: var(--space-2);
    }

    .hero-statement h1 {
        font-size: clamp(38px, 11vw, 44px);
        overflow-wrap: anywhere;
    }

    .hero-market-strip {
        padding-left: 0;
        border-left: 0;
    }

    .capacity-discovery-module .search-field-wide label {
        font-size: clamp(27px, 8.5vw, 34px);
    }

    .capacity-discovery-module .search-field-wide input {
        min-height: 56px;
        font-size: 18px;
    }

    .search-query-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search-query-row .button {
        width: auto;
        padding-inline: 12px;
        font-size: 13px;
    }

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

    .capacity-search,
    .trust-section,
    .auth-story-panel,
    .auth-form-panel {
        padding: var(--space-4);
    }

    .category-row {
        grid-template-columns: 48px minmax(0, 1fr) 28px;
    }

    .category-count {
        grid-column: 2;
    }

    .story-steps li {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        display: grid;
    }

    .cookie-consent {
        right: 8px;
        bottom: 8px;
        left: 8px;
    }

    .cookie-consent-panel {
        width: 100%;
        padding: 10px 14px;
    }

    .cookie-consent-panel h2 {
        margin-bottom: 4px;
        font-size: 17px;
    }

    .cookie-consent-panel p {
        display: none;
        font-size: 12.5px;
        line-height: 1.35;
    }

    .cookie-consent-actions {
        gap: 8px;
        margin-top: 8px;
    }

    .cookie-consent-actions .button {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* -------------------------
   PHASE 17 FINAL CASCADE
-------------------------- */

.site-header {
    background: rgba(251, 246, 237, 0.94);
    border-bottom-color: rgba(22, 36, 31, 0.12);
}

.header-inner {
    min-height: 66px;
}

.brand-logo-full {
    width: 218px;
}

.site-nav,
.nav-group,
.nav-group-primary,
.nav-group-account {
    gap: 12px;
}

.site-nav .nav-link {
    min-height: 38px;
    padding: 6px 2px;
    color: var(--ink);
    font-weight: 600;
}

.site-nav .nav-link:hover,
.site-nav .nav-link-active {
    color: var(--clay);
}

.phase17-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    gap: var(--space-4);
    align-items: stretch;
    padding: 28px 0 var(--space-4);
}

.phase17-hero .hero-statement {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 310px;
}

.hero-market-strip,
.hero-proof-line,
.capacity-module {
    display: none !important;
}

.hero-statement h1,
.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2,
.manufacturer-cta h2,
.listing-card h3,
.detail-title-panel h1,
.auth-story-panel h1,
.footer-brand p {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero-statement h1 {
    max-width: 680px;
    color: var(--ink);
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 620;
    line-height: 1.02;
}

.hero-intro {
    max-width: 520px;
    margin: 0;
    color: #4f5b55;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.5;
}

.capacity-search {
    grid-column: auto;
    margin-top: 0;
    border-radius: 14px;
    background: rgba(245, 235, 221, 0.78);
    background-size: auto;
}

.capacity-discovery-module .search-field-wide label {
    color: #405048;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.capacity-discovery-module .search-field-wide input {
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid rgba(22, 36, 31, 0.22);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.74);
    font-size: 17px;
}

.capacity-discovery-module .search-panel-heading h2 {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 650;
}

.section-heading-editorial h2,
.sourcing-story h2,
.trust-title h2,
.manufacturer-cta h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 620;
    line-height: 1.08;
}

.category-rows {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
}

.category-row {
    grid-template-columns: 1fr auto;
    min-height: 118px;
    padding: 16px;
    border-radius: 12px;
}

.category-name {
    font-family: inherit;
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 650;
}

.category-arrow {
    font-size: 0;
}

.category-arrow::before {
    content: "\2192";
    font-size: 16px;
}

.listing-card {
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    border-radius: 14px;
}

.listing-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: var(--space-4);
    padding: 22px;
}

.listing-card h3 {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 650;
    line-height: 1.08;
}

.listing-image,
.listing-image-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 238px;
}

.listing-detail-hero {
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) minmax(270px, 320px);
    align-items: start;
    gap: var(--space-4);
    padding-bottom: 32px;
}

.listing-detail-content {
    gap: var(--space-5);
    margin-top: 28px;
}

.detail-title-panel h1 {
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 620;
    line-height: 1.05;
}

.detail-section h2,
.manufacturer-trust-panel h2,
.manufacturer-trust-panel h2 a {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 620;
    line-height: 1.1;
}

.story-steps span,
.story-steps strong {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.story-steps strong {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 620;
}

.detail-image {
    min-height: 320px;
    border-radius: 14px;
}

.auth-split {
    grid-template-columns: minmax(240px, 0.36fr) minmax(360px, 0.64fr);
}

.auth-story-panel h1 {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 620;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
}

.footer-brand p {
    max-width: 360px;
    font-size: 15px;
    line-height: 1.5;
}

.footer-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
    .phase17-hero,
    .listing-detail-hero,
    .listing-detail-content,
    .sourcing-story,
    .trust-section,
    .auth-split,
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .category-rows,
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .phase17-hero {
        gap: var(--space-3);
        padding-top: 18px;
    }

    .phase17-hero .hero-statement {
        min-height: 0;
    }

    .hero-statement h1 {
        font-size: clamp(34px, 10vw, 44px);
    }

    .search-query-row,
    .advanced-search-grid,
    .category-rows,
    .listing-card,
    .listing-card-body,
    .manufacturer-cta,
    .footer-links {
        grid-template-columns: 1fr;
    }

    .listing-image,
    .listing-image-placeholder {
        min-height: 210px;
    }
}

/* Final launch layout tightening: marketplace, detail, manufacturer, footer flow. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.page-content {
    flex: 1 0 auto;
}

.site-footer {
    position: relative;
    clear: both;
    flex-shrink: 0;
}

.footer-inner {
    padding: 28px 0 22px;
}

.footer-links a,
.footer-cookie-button {
    margin-top: 6px;
}

.nav-group-account {
    gap: 16px;
}

.site-nav .nav-group-account .nav-link {
    padding-inline: 8px;
}

.listing-card {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
}

.listing-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(164px, 190px);
    gap: 16px;
    padding: 16px;
}

.listing-card h3 {
    margin: 8px 0 6px;
    font-size: clamp(20px, 2vw, 25px);
}

.listing-badges {
    gap: 6px;
}

.company {
    margin-bottom: 0;
}

.listing-media,
.listing-media-frame {
    min-height: 0;
}

.listing-image,
.listing-image-placeholder {
    min-height: 165px;
}

.listing-image-placeholder {
    padding: 14px;
}

.listing-image-placeholder strong {
    font-size: 20px;
}

.listing-meta {
    gap: 8px;
}

.listing-meta div {
    padding-bottom: 8px;
}

.listing-actions {
    gap: 8px;
}

.listing-actions .button {
    min-height: 36px;
}

.listing-detail-hero {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(240px, 300px);
    align-items: start;
}

.detail-media-panel {
    width: min(100%, 420px);
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
    align-self: start;
}

.detail-image,
.detail-image-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: 320px;
}

.detail-media-panel .detail-image,
.detail-media-panel .detail-image-placeholder {
    height: 100%;
    max-height: none;
}

.detail-title-panel h1 {
    font-size: clamp(32px, 4vw, 52px);
}

.detail-commercial-panel {
    position: static;
    top: auto;
}

.listing-detail-content {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.manufacturer-profile-header {
    display: grid;
    gap: 10px;
    margin: 16px 0 24px;
    padding: 22px;
}

.manufacturer-profile-header h1,
.manufacturer-profile-header .record-meta,
.manufacturer-profile-header .business-description {
    margin: 0;
}

.manufacturer-profile-header .business-description {
    max-width: 760px;
}

.manufacturer-profile-header .business-description h2 {
    margin-bottom: 8px;
    font-size: 18px;
}

.manufacturer-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
    align-items: start;
    justify-content: start;
}

.manufacturer-service-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.manufacturer-service-card .listing-media-frame,
.manufacturer-service-card .listing-image,
.manufacturer-service-card .listing-image-placeholder {
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.manufacturer-service-card .listing-media-frame {
    height: auto;
    overflow: hidden;
}

.manufacturer-service-card .listing-image,
.manufacturer-service-card .listing-image-placeholder {
    height: auto;
    align-self: start;
}

.manufacturer-service-card h2 {
    margin: 0;
    font-size: 21px;
}

.manufacturer-service-card .record-facts {
    margin: 0;
}

.business-reviews {
    margin-top: 28px;
}

.business-review-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.business-review-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.business-review-card .record-facts {
    margin: 0;
}

.manufacturer-services-heading {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1080px) {
    .listing-detail-hero,
    .listing-detail-content {
        grid-template-columns: 1fr;
    }

    .phase17-section,
    .detail-commercial-panel,
    .manufacturer-trust-panel {
        width: 100%;
        max-width: 100%;
    }

    .sourcing-story [data-reveal],
    .listing-detail-content [data-reveal],
    .story-steps li.is-emphasized {
        transform: none;
    }

    .detail-image,
    .detail-image-placeholder {
        max-height: 320px;
    }
}

@media (max-width: 720px) {
    .listing-card,
    .listing-card-body {
        grid-template-columns: 1fr;
    }

    .listing-image,
    .listing-image-placeholder,
    .manufacturer-service-card .listing-image,
    .manufacturer-service-card .listing-image-placeholder {
        min-height: 170px;
    }

    .listing-card-body,
    .manufacturer-profile-header,
    .manufacturer-service-card {
        padding: 14px;
    }

    .nav-group-account {
        gap: 8px;
    }
}

/* Final typography refinement: compact, premium, system-font only. */
:root {
    --font-ui: ui-sans-serif, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-editorial: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --type-ink: #1d2b26;
    --type-copy: #33423d;
    --type-muted: #64726c;
    --type-soft: #7a857f;
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

body {
    color: var(--type-copy);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.58;
}

p,
li,
dd,
.description,
.auth-intro,
.helptext,
.message,
.empty-state p,
.empty-panel p,
.legal-section,
.business-description,
.manufacturer-trust-panel p {
    color: var(--type-copy);
    font-weight: 400;
    line-height: 1.58;
}

.record-meta,
.section-heading p,
.page-heading p,
.company span,
.quote-note,
.pagination-summary,
.footer-brand p,
.footer-bottom,
.footer-links a,
.footer-cookie-button {
    color: var(--type-muted);
    font-weight: 400;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
.page-heading h1,
.page-heading h2,
.section-heading h2,
.dashboard-section-title,
.record-card h2,
.record-card h3,
.auth-card h1,
.auth-form-panel h2,
.business-profile h1,
.manufacturer-profile-header h1,
.manufacturer-service-card h2,
.detail-title-panel h1,
.detail-section h2,
.manufacturer-trust-panel h2,
.manufacturer-trust-panel h2 a,
.listing-card h3,
.category-name,
.manufacturer-cta h2,
.story-steps strong,
.trust-rhythm strong {
    color: var(--type-ink);
    font-family: var(--font-ui);
    font-weight: 640;
    letter-spacing: 0;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.hero-statement h1 {
    max-width: 640px;
    font-family: var(--font-ui);
    font-size: clamp(38px, 4.4vw, 58px);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.04;
}

.hero-intro,
.hero-description {
    max-width: 560px;
    color: var(--type-copy);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.58;
}

.section-heading h2,
.manufacturer-cta h2 {
    max-width: 760px;
    font-size: clamp(26px, 3vw, 38px);
}

.page-heading h1,
.dashboard-hero h1,
.business-profile h1,
.manufacturer-profile-header h1 {
    max-width: 820px;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 660;
    line-height: 1.08;
}

.dashboard-section-title,
.record-card h2,
.record-card h3,
.auth-card h1,
.auth-form-panel h2,
.auth-story-panel h1,
.empty-panel h2,
.empty-state h3 {
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 640;
    line-height: 1.14;
}

.auth-story-panel h1 {
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.08;
}

.listing-card h3,
.manufacturer-service-card h2 {
    font-size: clamp(19px, 1.85vw, 24px);
    font-weight: 650;
    line-height: 1.18;
}

.detail-title-panel h1 {
    max-width: 760px;
    font-size: clamp(32px, 3.7vw, 50px);
    font-weight: 650;
    line-height: 1.06;
}

.detail-section h2,
.manufacturer-trust-panel h2,
.manufacturer-trust-panel h2 a {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 640;
    line-height: 1.12;
}

.eyebrow,
.listing-category,
.placeholder-category,
.snapshot-label,
.stat-card dt,
.record-facts dt,
.listing-meta dt,
.detail-facts dt,
.detail-capability-grid dt,
.footer-links h2,
.capacity-search label,
.styled-form label,
.form-field label,
.capacity-discovery-module .search-field-wide label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 680;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-transform: uppercase;
}

.capacity-discovery-module .search-field-wide label,
.styled-form label,
.form-field label {
    color: var(--type-copy);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.nav-link,
.logout-form .button,
.button,
.footer-cookie-button {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.2;
}

.button {
    text-align: center;
}

.button-compact,
.listing-actions .button,
.pagination .button {
    font-size: 13px;
    font-weight: 620;
}

.styled-form input,
.styled-form select,
.styled-form textarea,
.form-field input,
.form-field select,
.form-field textarea,
.capacity-search input,
.capacity-search select {
    color: var(--type-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

.styled-form input::placeholder,
.styled-form textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder,
.capacity-search input::placeholder {
    color: var(--type-soft);
    opacity: 1;
}

.company a,
.detail-manufacturer-line a,
.manufacturer-trust-panel h2 a {
    color: var(--type-ink);
    font-weight: 660;
    overflow-wrap: anywhere;
}

.listing-meta dd,
.detail-facts dd,
.record-facts dd {
    color: var(--type-ink);
    font-size: 14px;
    font-weight: 620;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.listing-price-fact dd,
.detail-price,
.stat-card dd,
.finance-summary-card strong {
    font-family: var(--font-ui);
    font-weight: 680;
    letter-spacing: 0;
    line-height: 1.05;
}

.detail-price {
    font-size: clamp(34px, 3.6vw, 44px);
}

.stat-card dd {
    font-size: clamp(24px, 2.7vw, 32px);
}

.listing-card .description {
    max-width: 66ch;
    color: var(--type-muted);
    font-size: 14px;
    line-height: 1.5;
}

.legal-page {
    color: var(--type-copy);
    font-size: 16px;
    line-height: 1.68;
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    max-width: 760px;
    color: var(--type-ink);
    font-weight: 640;
    line-height: 1.14;
}

.legal-page p,
.legal-page li {
    max-width: 78ch;
}

.footer-brand p {
    max-width: 390px;
    font-size: 14px;
}

.footer-links h2 {
    margin-bottom: 8px;
    font-size: 12px;
}

.footer-links a,
.footer-cookie-button,
.footer-bottom {
    font-size: 13px;
}

.listing-card,
.record-card,
.stat-card,
.auth-card,
.summary-card,
.detail-commercial-panel,
.manufacturer-trust-panel {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    body {
        font-size: 15px;
        line-height: 1.56;
    }

    .hero-statement h1 {
        font-size: clamp(32px, 9.2vw, 40px);
        line-height: 1.06;
    }

    .page-heading h1,
    .dashboard-hero h1,
    .business-profile h1,
    .manufacturer-profile-header h1 {
        font-size: clamp(28px, 8vw, 36px);
    }

    .section-heading h2,
    .manufacturer-cta h2 {
        font-size: clamp(24px, 7vw, 32px);
    }

    .detail-title-panel h1 {
        font-size: clamp(30px, 8.5vw, 40px);
    }

    .listing-card h3,
    .manufacturer-service-card h2 {
        font-size: 20px;
    }

    .detail-price {
        font-size: 34px;
    }

    .nav-link,
    .button,
    .logout-form .button {
        font-size: 13px;
    }
}