@font-face { font-family: Inter; src: url('../fonts/Inter-Variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Kufi Arabic'; src: url('../fonts/NotoKufiArabic-Variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  --bridge-indigo: #213b7b;
  --bridge-indigo-dark: #172b5d;
  --sea-green: #4bb5a9;
  --pale-sky: #8dcaf4;
  --sky-light: #dff1fd;
  --cloud: #f4f8fc;
  --human-sand: #f3e9d8;
  --ink: #18233f;
  --slate: #566684;
  --line: #dbe4ef;
  --white: #ffffff;
  --danger: #a93643;
  --font-sans: Inter, "Noto Kufi Arabic", Arial, sans-serif;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 18px 44px rgb(24 35 63 / 12%);
  --shadow-card: 0 12px 32px rgb(33 59 123 / 8%);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body > main { flex: 1 0 auto; overflow: clip; }
body > .site-header, body > .site-footer { flex-shrink: 0; }
a { color: var(--bridge-indigo); text-decoration: none; }
a:hover { color: var(--bridge-indigo-dark); }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
p { text-wrap: pretty; }
.container { width: min(100% - 40px, 1160px); max-width: 1160px; }
::selection { color: var(--ink); background: var(--pale-sky); }
:focus-visible { outline: 3px solid var(--pale-sky); outline-offset: 3px; }

.site-header { position: relative; z-index: 20; }
.navbar { min-height: 82px; border-bottom: 1px solid rgb(33 59 123 / 10%); background: rgb(255 255 255 / 96%); backdrop-filter: blur(18px); }
.navbar-brand { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; }
.navbar-brand img { display: block; width: 173px; height: 44px; object-fit: contain; }
.navbar-toggler { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgb(141 202 244 / 35%); }
.navbar-toggler-line { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--bridge-indigo); }
.nav-link { position: relative; color: var(--slate); font-size: .91rem; font-weight: 700; padding: .7rem .85rem !important; }
.nav-link::after { content: ""; position: absolute; right: .85rem; bottom: .45rem; left: .85rem; height: 2px; border-radius: 2px; background: var(--sea-green); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.nav-link:hover { color: var(--bridge-indigo); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-cta { margin-left: .55rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-width: 1.5px; border-radius: var(--radius-sm); padding: .72rem 1.16rem; font-weight: 800; letter-spacing: -.01em; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); border-color: var(--bridge-indigo); background: var(--bridge-indigo); box-shadow: 0 8px 20px rgb(33 59 123 / 18%); }
.btn-primary:hover, .btn-primary:focus { color: var(--white); border-color: var(--bridge-indigo-dark); background: var(--bridge-indigo-dark); box-shadow: 0 10px 24px rgb(33 59 123 / 24%); }
.btn-outline-dark { color: var(--bridge-indigo); border-color: #a9b8cc; background: var(--white); }
.btn-outline-dark:hover, .btn-outline-dark:focus { color: var(--bridge-indigo); border-color: var(--pale-sky); background: var(--sky-light); }
.btn-light { color: var(--bridge-indigo); border-color: var(--white); background: var(--white); }
.btn-light:hover, .btn-light:focus { color: var(--bridge-indigo-dark); border-color: var(--human-sand); background: var(--human-sand); }

.eyebrow { display: block; margin-bottom: 16px; color: var(--bridge-indigo); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 9px; border-radius: 3px; background: var(--sea-green); vertical-align: middle; }
.eyebrow.light { color: var(--sky-light); }
.eyebrow.light::before { background: var(--pale-sky); }

.hero { position: relative; overflow: hidden; padding: 98px 0 92px; background: linear-gradient(125deg, var(--cloud) 0%, var(--white) 62%, var(--sky-light) 135%); }
.hero::after { content: ""; position: absolute; width: 540px; height: 540px; right: -350px; bottom: -370px; border: 72px solid rgb(75 181 169 / 12%); border-radius: 50%; }
.hero-ribbon { position: absolute; z-index: 0; width: 540px; height: 180px; border: 52px solid; border-bottom: 0; border-radius: 270px 270px 0 0; pointer-events: none; }
.hero-ribbon-one { top: -105px; left: 46%; border-color: rgb(141 202 244 / 18%); transform: rotate(6deg); }
.hero-ribbon-two { right: -300px; bottom: 35px; border-color: rgb(243 233 216 / 55%); transform: rotate(-72deg); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .72fr); gap: 72px; align-items: center; }
.hero-copy { max-width: 700px; }
.hero h1 { max-width: 760px; margin: 0 0 24px; font-size: clamp(2.8rem, 5.1vw, 4.65rem); }
.lead { max-width: 660px; margin: 0; color: var(--slate); font-size: 1.18rem; line-height: 1.68; }
.hero-actions, .center-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.trust-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 34px; color: var(--slate); font-size: .84rem; font-weight: 700; }
.trust-row span { display: inline-flex; gap: 7px; align-items: center; }
.trust-row b { display: grid; width: 20px; height: 20px; place-items: center; color: var(--bridge-indigo); border-radius: 50%; background: var(--sky-light); font-size: .7rem; }
.hero-card { position: relative; overflow: hidden; padding: 32px; color: var(--white); border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius-lg); background: var(--bridge-indigo); box-shadow: 0 28px 70px rgb(33 59 123 / 22%); }
.hero-card::after { content: ""; position: absolute; right: -74px; bottom: -88px; width: 220px; height: 220px; border: 34px solid rgb(141 202 244 / 10%); border-radius: 50%; }
.hero-card-head { display: flex; position: relative; z-index: 1; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.hero-card-head img, .aside-mark { box-sizing: content-box; display: block; object-fit: contain; padding: 7px 9px; border-radius: 12px; background: var(--white); }
.mini-label { display: block; color: var(--pale-sky); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.journey-step { display: flex; position: relative; z-index: 1; align-items: center; gap: 15px; }
.journey-step b { display: grid; flex: 0 0 38px; height: 38px; place-items: center; color: var(--sky-light); border: 1px solid rgb(223 241 253 / 30%); border-radius: 50%; font-size: .82rem; }
.journey-step.active b { color: var(--ink); border-color: var(--pale-sky); background: var(--pale-sky); }
.journey-step strong, .journey-step small { display: block; }
.journey-step strong { color: var(--white); font-size: .93rem; }
.journey-step small { margin-top: 2px; color: #bcc9df; font-size: .78rem; }
.journey-line { position: relative; z-index: 1; width: 1px; height: 30px; margin: 5px 0 5px 18px; background: rgb(223 241 253 / 25%); }

.section { padding-top: 88px; padding-bottom: 88px; }
.section-tint { border-top: 1px solid rgb(33 59 123 / 6%); border-bottom: 1px solid rgb(33 59 123 / 6%); background: var(--cloud); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 3.3vw, 3rem); }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading > a, .card-link { color: var(--bridge-indigo); font-weight: 800; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.category-card { display: flex; min-height: 240px; flex-direction: column; padding: 26px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 1px 0 rgb(33 59 123 / 2%); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.category-card:hover { color: var(--ink); border-color: var(--pale-sky); box-shadow: var(--shadow-card); transform: translateY(-5px); }
.category-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--bridge-indigo); border: 1px solid rgb(141 202 244 / 48%); border-radius: 14px; background: var(--sky-light); font-size: .71rem; font-weight: 800; letter-spacing: .08em; }
.category-card:nth-child(3n + 2) .category-icon { border-color: rgb(75 181 169 / 34%); background: rgb(75 181 169 / 14%); }
.category-card:nth-child(3n) .category-icon { border-color: rgb(243 233 216 / 80%); background: rgb(243 233 216 / 62%); }
.category-card h3 { margin: 27px 0 10px; font-size: 1.18rem; }
.category-card p, .supplier-card p { color: var(--slate); font-size: .9rem; }
.card-link { display: block; margin-top: auto; padding-top: 18px; font-size: .85rem; }
.supplier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.supplier-card { display: flex; min-height: 320px; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 8px 24px rgb(33 59 123 / 5%); }
.supplier-card h3 { margin: 22px 0 10px; font-size: 1.13rem; }
.supplier-card > a { margin-top: auto; color: var(--bridge-indigo); font-size: .87rem; font-weight: 800; }
.supplier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.supplier-avatar { display: grid; width: 44px; height: 44px; place-items: center; color: var(--bridge-indigo); border: 1px solid rgb(141 202 244 / 45%); border-radius: 14px; background: var(--sky-light); font-weight: 800; }
.supplier-avatar.large { flex: 0 0 58px; width: 58px; height: 58px; font-size: 1.1rem; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--bridge-indigo); border: 1px solid rgb(75 181 169 / 25%); border-radius: 20px; background: rgb(75 181 169 / 13%); padding: 4px 9px; font-size: .67rem; font-weight: 800; white-space: nowrap; }
.verified span { color: #267f76; }
.supplier-meta { display: flex; gap: 7px; flex-wrap: wrap; margin: 15px 0; }
.supplier-meta span { color: var(--slate); border: 1px solid var(--line); border-radius: 20px; background: var(--cloud); padding: 4px 9px; font-size: .7rem; }
.supplier-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--bridge-indigo); border: 1px solid var(--pale-sky); border-radius: 20px; background: var(--sky-light); padding: 4px 9px; font-size: .7rem; font-weight: 800; }
.cta { display: flex; position: relative; overflow: hidden; align-items: center; justify-content: space-between; gap: 32px; margin-top: 80px; margin-bottom: 80px; padding: 46px 50px; color: var(--white); border-radius: var(--radius-lg); background: var(--bridge-indigo); box-shadow: 0 22px 50px rgb(33 59 123 / 16%); }
.cta::after { content: ""; position: absolute; right: -80px; bottom: -125px; width: 260px; height: 260px; border: 42px solid rgb(75 181 169 / 14%); border-radius: 50%; }
.cta > * { position: relative; z-index: 1; }
.cta > img { box-sizing: content-box; width: 76px; height: 50px; flex: 0 0 auto; object-fit: contain; padding: 12px; border-radius: 16px; background: var(--white); }
.cta h2 { margin: 0 0 10px; color: var(--white); font-size: clamp(1.75rem, 3vw, 2.15rem); }
.cta p { margin: 0; color: #cbd9ec; }

.page-hero { position: relative; overflow: hidden; padding: 72px 0 62px; border-bottom: 1px solid rgb(141 202 244 / 35%); background: var(--cloud); }
.page-hero::after { content: ""; position: absolute; width: 420px; height: 160px; right: -80px; top: -98px; border: 44px solid rgb(141 202 244 / 22%); border-bottom: 0; border-radius: 210px 210px 0 0; transform: rotate(-5deg); }
.page-hero.compact { padding: 56px 0 49px; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin: 0 0 14px; font-size: clamp(2.4rem, 4vw, 3.8rem); }
.page-hero p { margin: 0; color: var(--slate); font-size: 1.08rem; }
.page-hero .eyebrow { margin-bottom: 12px; }
.filter-bar { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 14px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cloud); }
.filter-bar label, .field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .82rem; font-weight: 800; }
input, select, textarea { width: 100%; color: var(--ink); border: 1px solid #aebcd0; border-radius: var(--radius-sm); background: var(--white); padding: .76rem .84rem; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--bridge-indigo); box-shadow: 0 0 0 3px rgb(141 202 244 / 30%); }
input::placeholder, textarea::placeholder { color: #8490a7; }
.results-line { display: flex; justify-content: space-between; padding: 34px 2px 15px; color: var(--slate); font-size: .84rem; }
.results-line strong { color: var(--ink); }
.supplier-list { border-top: 1px solid var(--line); }
.supplier-row { display: flex; align-items: center; gap: 22px; padding: 28px 10px; border-bottom: 1px solid var(--line); }
.supplier-copy { flex: 1; }
.supplier-logo-frame { overflow: hidden; flex: 0 0 92px !important; width: 92px !important; padding: 7px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 5px 16px rgb(33 59 123 / 8%); }
.supplier-logo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.supplier-copy h2 { margin: 0; font-size: 1.28rem; }
.supplier-copy p { margin: 8px 0; color: var(--slate); }
.title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.directory-verified-badge { text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.directory-verified-badge i { color: #24766e; }
.directory-verified-badge:hover { color: var(--bridge-indigo); border-color: rgb(75 181 169 / 55%); background: rgb(75 181 169 / 20%); transform: translateY(-1px); }
.empty-state { padding: 80px 20px; text-align: center; }

.form-section { padding-top: 54px; padding-bottom: 92px; background: linear-gradient(180deg, var(--white), var(--cloud)); }
.rfq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; }
.form-card, .form-aside, .detail-card, .track-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); }
fieldset { margin: 0 0 32px; padding: 0 0 34px; border: 0; border-bottom: 1px solid var(--line); }
legend { margin-bottom: 24px; color: var(--ink); font-size: 1.1rem; font-weight: 800; }
legend span { display: inline-grid; width: 31px; height: 31px; margin-right: 8px; place-items: center; color: var(--white); border-radius: 50%; background: var(--bridge-indigo); font-size: .76rem; }
.field { margin-bottom: 19px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field small { color: var(--slate); }
.field > span, .field-validation-error { display: block; margin-top: 5px; color: var(--danger); font-size: .77rem; }
.validation-summary { margin-bottom: 18px; color: var(--danger); }
.validation-summary:empty { display: none; }
.check-row { display: flex; align-items: flex-start; gap: 11px; color: var(--slate); font-size: .83rem; }
.check-row input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--bridge-indigo); }
.submit-btn { width: 100%; margin-top: 22px; }
.form-aside { position: sticky; top: 24px; color: var(--white); border: 0; background: var(--bridge-indigo); box-shadow: 0 22px 50px rgb(33 59 123 / 18%); }
.aside-mark { width: 62px; height: 41px; margin-bottom: 24px; }
.form-aside h2 { color: var(--white); font-size: 1.34rem; }
.form-aside ol { padding: 0; list-style: none; counter-reset: item; }
.form-aside li { display: grid; position: relative; gap: 4px; padding: 18px 0 18px 38px; border-bottom: 1px solid rgb(223 241 253 / 17%); }
.form-aside li::before { content: counter(item); position: absolute; top: 19px; left: 0; display: grid; width: 24px; height: 24px; place-items: center; color: var(--ink); border-radius: 50%; background: var(--pale-sky); counter-increment: item; font-size: .68rem; font-weight: 800; }
.form-aside li span, .form-aside .note span { color: #c0cee0; font-size: .8rem; }
.note { display: grid; gap: 5px; margin-top: 24px; padding: 16px; border: 1px solid rgb(141 202 244 / 18%); border-radius: var(--radius-sm); background: rgb(24 35 63 / 32%); }

.confirmation { position: relative; overflow: hidden; padding: 68px 0 57px; text-align: center; background: var(--cloud); }
.confirmation::after { content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 180px; border: 42px solid rgb(75 181 169 / 13%); border-bottom: 0; border-radius: 180px 180px 0 0; }
.narrow { max-width: 800px; }
.success-mark { display: grid; width: 56px; height: 56px; margin: 0 auto 16px; place-items: center; color: var(--bridge-indigo); border: 1px solid rgb(75 181 169 / 30%); border-radius: 50%; background: rgb(75 181 169 / 15%); font-size: 1.4rem; }
.confirmation h1 { font-size: 2.6rem; }
.confirmation p { color: var(--slate); }
.reference-box { display: inline-flex; align-items: center; gap: 20px; margin-top: 20px; padding: 13px 18px; border: 1px dashed var(--pale-sky); border-radius: var(--radius-sm); background: var(--white); }
.reference-box span { color: var(--slate); font-size: .77rem; }
.reference-box strong { color: var(--bridge-indigo); letter-spacing: .1em; }
.detail-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail-head h2 { margin: 10px 0 0; }
.detail-head small { color: var(--slate); }
.status { color: var(--bridge-indigo); border: 1px solid rgb(75 181 169 / 25%); border-radius: 20px; background: rgb(75 181 169 / 13%); padding: 5px 10px; font-size: .7rem; font-weight: 800; }
.detail-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 0; }
.detail-card dl div { margin: 0; }
.detail-card dl .wide { grid-column: 1 / -1; }
.detail-card dt { color: var(--slate); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.detail-card dd { margin: 5px 0 0; }
.terms-note { display: flex; gap: 13px; margin: 0 0 20px; padding: 16px; border: 1px solid rgb(75 181 169 / 28%); border-radius: var(--radius-sm); background: rgb(75 181 169 / 9%); }
.terms-note > i { color: var(--sea-green); font-size: 1.3rem; }
.terms-note strong, .terms-note span { display: block; }
.terms-note span { margin-top: 3px; color: var(--slate); font-size: .8rem; }
.check-row a { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.quote-section { margin-top: 46px; }
.compact-heading { margin-bottom: 22px; }
.compact-heading h2 { font-size: 2rem; }
.bordered-empty { border: 1px dashed #b8c6d8; border-radius: var(--radius-md); background: var(--cloud); }
.bordered-empty > i { display: block; margin-bottom: 12px; color: var(--bridge-indigo); font-size: 1.8rem; }
.bordered-empty h3 { font-size: 1.15rem; }
.bordered-empty p { margin: 7px 0 0; color: var(--slate); }
.quote-grid { display: grid; gap: 16px; }
.quote-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); }
.quote-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.quote-card-head h3 { margin: 10px 0 2px; font-size: 1.2rem; }
.quote-card-head small { color: var(--slate); }
.quote-card-head > strong { color: var(--bridge-indigo); font-size: 1.25rem; white-space: nowrap; }
.quote-card dl { display: flex; gap: 30px; margin: 22px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-card dt { color: var(--slate); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.quote-card dd { margin: 2px 0 0; font-weight: 800; }
.quote-card > p { color: var(--slate); }
.quote-card details { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--cloud); }
.quote-card summary { color: var(--bridge-indigo); font-weight: 800; cursor: pointer; }
.quote-card details p { margin: 9px 0 0; color: var(--slate); }

.vendor-hero { background-color: var(--cloud); background-image: url("/images/brand/masamed-bridge-pattern.svg"); background-position: center; background-size: cover; }
.vendor-portal { min-height: 560px; }
.portal-intro-grid { display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 55px; padding-bottom: 38px; }
.portal-intro-grid h2 { margin: 0 0 12px; font-size: 2.25rem; }
.portal-intro-grid p { max-width: 510px; color: var(--slate); }
.vendor-search-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cloud); box-shadow: var(--shadow-card); }
.vendor-search-card label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 800; }
.vendor-search-card > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.vendor-result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.vendor-result-card { display: flex; align-items: center; gap: 17px; padding: 18px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.vendor-result-card:hover { color: var(--ink); border-color: var(--pale-sky); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.vendor-result-card > div { min-width: 0; flex: 1; }
.vendor-result-card h3 { margin: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.vendor-result-card p { margin: 4px 0 0; color: var(--slate); font-size: .77rem; }
.vendor-result-card > i { color: var(--bridge-indigo); }
.vendor-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.vendor-identity { display: flex; align-items: center; gap: 17px; }
.vendor-identity .eyebrow { margin-bottom: 4px; }
.vendor-identity h2 { margin: 0; font-size: 1.7rem; }
.vendor-identity p { margin: 4px 0 0; color: var(--slate); }
.portal-success { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 16px 18px; color: #1f6c65; border: 1px solid rgb(75 181 169 / 28%); border-radius: var(--radius-sm); background: rgb(75 181 169 / 11%); }
.portal-success > i { font-size: 1.25rem; }
.portal-success strong, .portal-success span { display: block; }
.portal-success span { margin-top: 2px; font-size: .78rem; }
.vendor-rfq-list { display: grid; gap: 14px; }
.vendor-rfq-card { display: grid; grid-template-columns: 1fr 210px; gap: 25px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 7px 22px rgb(33 59 123 / 5%); }
.vendor-rfq-main h3 { margin: 15px 0 8px; font-size: 1.25rem; }
.vendor-rfq-main > p { margin: 0; color: var(--slate); }
.rfq-reference { color: var(--slate); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.special-request { display: grid; gap: 2px; margin-top: 15px; padding: 12px 14px; border-left: 3px solid var(--sea-green); background: rgb(75 181 169 / 8%); }
.special-request strong { font-size: .75rem; }
.special-request span { color: var(--slate); font-size: .78rem; }
.vendor-rfq-action { display: flex; align-items: stretch; justify-content: center; flex-direction: column; gap: 11px; padding-left: 25px; border-left: 1px solid var(--line); }
.vendor-rfq-action > span { color: var(--slate); font-size: .74rem; text-align: center; }
.quote-aside dl { display: grid; gap: 14px; margin: 23px 0; }
.quote-aside dl div { padding-bottom: 10px; border-bottom: 1px solid rgb(223 241 253 / 16%); }
.quote-aside dt { color: var(--pale-sky); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.quote-aside dd { margin: 2px 0 0; color: var(--white); font-weight: 800; }
.quote-aside > p { color: #c0cee0; font-size: .83rem; }

.catalog-hero { padding: 72px 0; background: var(--cloud); }
.catalog-hero-grid { display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: 65px; }
.catalog-hero h1 { max-width: 760px; }
.catalog-file-card { display: flex; align-items: center; gap: 15px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-soft); }
.catalog-file-card > i { color: #24766e; font-size: 2.35rem; }
.catalog-file-card > div { min-width: 0; flex: 1; }
.catalog-file-card strong, .catalog-file-card span { display: block; }
.catalog-file-card > div span { color: var(--slate); font-size: .7rem; }
.catalog-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 65px; }
.catalog-stats > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.catalog-stats i { grid-row: 1 / 3; color: var(--bridge-indigo); font-size: 1.4rem; }
.catalog-stats strong { font-size: 1.45rem; line-height: 1; }
.catalog-stats span { color: var(--slate); font-size: .72rem; }
.catalog-table-heading { margin-bottom: 24px; }
.catalog-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 8px 25px rgb(33 59 123 / 5%); }
.catalog-table { width: 100%; border-collapse: collapse; background: var(--white); }
.catalog-table th { padding: 14px 18px; color: var(--white); background: var(--bridge-indigo); font-size: .72rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.catalog-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--slate); font-size: .78rem; vertical-align: top; }
.catalog-table tbody tr:last-child td { border-bottom: 0; }
.catalog-table tbody tr:hover { background: var(--cloud); }
.catalog-table td strong, .catalog-table td small { display: block; }
.catalog-table td strong { color: var(--ink); font-size: .84rem; }
.catalog-table td small { margin-top: 2px; color: #8490a7; }
.catalog-table td a { font-weight: 800; }
.legal-hero .legal-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.legal-meta span { padding: 5px 9px; color: var(--bridge-indigo); border: 1px solid rgb(141 202 244 / 55%); border-radius: 999px; background: var(--white); font-size: .7rem; font-weight: 800; }
.legal-hub { max-width: 1040px; }
.legal-hub-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 50px; margin-bottom: 34px; }
.legal-hub-intro h2 { max-width: 540px; margin: 0; font-size: clamp(2rem, 3.2vw, 2.8rem); }
.legal-hub-intro p { margin: 0; color: var(--slate); }
.legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.legal-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; min-height: 150px; padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.legal-card:hover { color: var(--ink); border-color: var(--pale-sky); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.legal-card-icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--bridge-indigo); border-radius: 14px; background: var(--sky-light); font-size: 1.2rem; }
.legal-card-copy strong, .legal-card-copy small { display: block; }
.legal-card-copy strong { margin-bottom: 6px; font-size: 1.05rem; }
.legal-card-copy small { color: var(--slate); font-size: .78rem; line-height: 1.55; }
.legal-card-arrow { color: var(--sea-green); }
.legal-section-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--cloud); }
.legal-section-nav a { padding: 8px 12px; color: var(--slate); border-radius: 8px; font-size: .74rem; font-weight: 800; }
.legal-section-nav a:hover, .legal-section-nav a.active { color: var(--bridge-indigo); background: var(--white); box-shadow: 0 3px 12px rgb(33 59 123 / 7%); }
.legal-content article { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); }
.legal-content h2 { margin: 34px 0 9px; font-size: 1.25rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--slate); }
.legal-content p { margin: 0; }
.legal-content ul { display: grid; gap: 8px; margin: 11px 0 0; padding-left: 20px; }
.legal-content li strong { color: var(--ink); }
.legal-content article a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.legal-inline-warning { display: flex; gap: 13px; margin: 24px 0; padding: 17px; color: #805c29; border: 1px solid rgb(243 233 216 / 100%); border-radius: var(--radius-sm); background: rgb(243 233 216 / 55%); }
.legal-inline-warning i { margin-top: 2px; }
.legal-callout { display: flex; gap: 12px; margin-top: 18px; padding: 16px 18px; color: #805c29; border: 1px solid rgb(243 233 216 / 100%); border-radius: var(--radius-sm); background: rgb(243 233 216 / 55%); }
.legal-callout p { margin: 0; }
.legal-launch-note { align-items: flex-start; }
.legal-launch-note i { margin-top: 3px; }
.cookie-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }
.cookie-table { width: 100%; min-width: 660px; border-collapse: collapse; }
.cookie-table th { padding: 12px 14px; color: var(--white); background: var(--bridge-indigo); font-size: .7rem; text-align: left; text-transform: uppercase; }
.cookie-table td { padding: 14px; border-top: 1px solid var(--line); color: var(--slate); font-size: .77rem; vertical-align: top; }
.cookie-table code { color: var(--bridge-indigo); font-weight: 800; }
.trust-hero { position: relative; overflow: hidden; padding: 82px 0; color: var(--white); background: linear-gradient(135deg, var(--bridge-indigo-dark), var(--bridge-indigo)); }
.trust-hero::after { content: ""; position: absolute; right: -180px; bottom: -265px; width: 520px; height: 520px; border: 72px solid rgb(75 181 169 / 14%); border-radius: 50%; pointer-events: none; }
.trust-hero-grid { display: grid; position: relative; z-index: 1; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .65fr); align-items: center; gap: 70px; }
.trust-hero h1 { max-width: 750px; margin: 0 0 20px; color: var(--white); font-size: clamp(2.7rem, 4.8vw, 4.5rem); }
.trust-hero > .container > div > p { max-width: 720px; margin: 0; color: #d5e2f3; font-size: 1.05rem; }
.trust-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.btn-trust-outline { color: var(--white); border-color: rgb(255 255 255 / 38%); background: transparent; }
.btn-trust-outline:hover { color: var(--ink); border-color: var(--pale-sky); background: var(--pale-sky); }
.trust-signal-card { padding: 30px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 24px; background: rgb(24 35 63 / 35%); box-shadow: 0 24px 60px rgb(8 20 48 / 25%); }
.trust-badge-large { display: grid; width: 58px; height: 58px; margin-bottom: 22px; place-items: center; color: var(--ink); border-radius: 18px; background: var(--sea-green); font-size: 1.55rem; }
.trust-signal-card .eyebrow { margin-bottom: 10px; }
.trust-signal-card h2 { margin: 0 0 12px; color: var(--white); font-size: 1.65rem; }
.trust-signal-card p { margin: 0; color: #c9d7ea; font-size: .87rem; }
.trust-section-heading { max-width: 680px; margin-bottom: 36px; }
.trust-section-heading .eyebrow { margin-bottom: 9px; }
.trust-section-heading h2 { margin: 0 0 10px; font-size: clamp(2rem, 3.4vw, 3rem); }
.trust-section-heading p { margin: 0; color: var(--slate); }
.verification-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.verification-steps li { min-height: 245px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); }
.verification-steps li > span { display: grid; width: 40px; height: 40px; margin-bottom: 34px; place-items: center; color: var(--white); border-radius: 12px; background: var(--bridge-indigo); font-size: .7rem; font-weight: 800; }
.verification-steps li:nth-child(2) > span, .verification-steps li:nth-child(4) > span { color: var(--ink); background: var(--sea-green); }
.verification-steps h3 { margin: 0 0 9px; font-size: 1.02rem; }
.verification-steps p { margin: 0; color: var(--slate); font-size: .8rem; }
.trust-scope-section { padding: 80px 0; background: var(--cloud); }
.trust-scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.scope-card { padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-card); }
.scope-icon { display: grid; width: 46px; height: 46px; margin-bottom: 20px; place-items: center; border-radius: 14px; font-size: 1.3rem; }
.scope-positive .scope-icon { color: #24766e; background: rgb(75 181 169 / 15%); }
.scope-limit .scope-icon { color: #805c29; background: var(--human-sand); }
.scope-card h2 { margin: 0 0 18px; font-size: 1.45rem; }
.scope-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scope-card li { position: relative; padding-left: 25px; color: var(--slate); font-size: .84rem; }
.scope-card li::before { content: ""; position: absolute; top: .64em; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sea-green); }
.scope-limit li::before { background: #c99b58; }
.trust-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.trust-audience-grid article { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.trust-audience-grid article > i { color: var(--sea-green); font-size: 1.65rem; }
.trust-audience-grid h3 { margin: 17px 0 9px; font-size: 1.25rem; }
.trust-audience-grid p { color: var(--slate); font-size: .84rem; }
.trust-audience-grid a { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .8rem; font-weight: 800; }
.directory-status-note, .verification-guidance { display: flex; align-items: flex-start; gap: 12px; padding: 17px 19px; border: 1px solid rgb(75 181 169 / 28%); border-radius: 13px; background: rgb(75 181 169 / 9%); }
.directory-status-note { margin-top: 22px; }
.directory-status-note i, .verification-guidance i { margin-top: 3px; color: var(--sea-green); }
.directory-status-note p { margin: 0; color: var(--slate); font-size: .8rem; }
.verification-guidance { align-items: center; margin: 22px 0; color: var(--slate); font-size: .78rem; }
.verification-guidance a { margin-left: auto; font-weight: 800; white-space: nowrap; }
.center-actions { justify-content: center; }
.track-page { display: grid; min-height: 650px; padding: 92px 20px; place-items: start center; background: radial-gradient(circle at 50% -20%, var(--sky-light), var(--cloud) 54%); }
.track-card { width: min(100%, 520px); }
.track-card::before { content: "MM"; display: grid; width: 48px; height: 48px; margin-bottom: 24px; place-items: center; color: var(--bridge-indigo); border-radius: 14px; background: var(--sky-light); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.track-card h1 { font-size: 2.5rem; }
.track-card > p { color: var(--slate); }
.track-card form { margin-top: 28px; }
.track-card button { width: 100%; }

.site-footer { padding: 32px 0 24px; color: #afbed3; background: var(--ink); }
.contact-hero p { max-width: 640px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.contact-layout h2 { margin: 0 0 16px; font-size: 1.7rem; }
.contact-details > p, .contact-form-intro, .contact-guidance p { color: var(--slate); }
.contact-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 24px; border-radius: var(--radius-sm); color: var(--bridge-indigo); background: var(--sky-light); font-size: 1.5rem; }
.contact-email { display: inline-block; padding: 8px 0; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-guidance { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-guidance h3 { font-size: 1rem; line-height: 1.5; }
.contact-guidance p { font-size: .9rem; }
.contact-guidance a, .contact-form-intro a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form-panel { min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cloud); }
.contact-form-intro { margin-bottom: 28px; font-size: .9rem; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form-panel .field input, .contact-form-panel .field textarea { min-height: 48px; background: var(--white); }
.contact-form-panel .field textarea { resize: vertical; }
.contact-form-panel .field small { display: block; color: var(--slate); font-size: .8rem; }
.contact-form-panel .field-validation-error { display: block; margin-top: 5px; color: var(--danger); font-size: .85rem; }
.contact-errors { padding: 18px; margin-bottom: 24px; border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--white); }
.contact-errors h3 { margin: 0 0 10px; color: var(--danger); font-size: 1rem; }
.contact-errors ul { margin: 0; padding-left: 20px; }
.contact-errors, .contact-errors a { color: var(--danger); font-size: .9rem; }
.contact-errors a { text-decoration: underline; }
.contact-received { max-width: 780px; }
.contact-received h1 { font-size: clamp(2rem, 4vw, 3rem); }
.contact-received p { color: var(--slate); }
.contact-received .btn { margin-top: 16px; }
@media (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-details { max-width: 680px; }
}
@media (max-width: 575px) {
  .contact-form-panel { padding: 24px 20px; }
  .contact-field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-layout { padding-top: 40px; padding-bottom: 40px; }
  .contact-form-panel .btn { width: 100%; }
}
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; padding-bottom: 20px; border-bottom: 1px solid rgb(223 241 253 / 16%); }
.footer-brand { display: grid; gap: 8px; min-width: 0; }
.footer-brand p { margin: 0; font-size: .85rem; }
.footer-logo { display: block; width: 173px; height: 44px; object-fit: contain; }
.footer-utilities { display: grid; justify-items: end; min-width: 0; }
.footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 24px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky-light); font-size: .85rem; font-weight: 700; }
.footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-contact { margin: 0; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #afbed3; font-size: .85rem; overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: start; gap: 12px 40px; padding-top: 18px; }
.footer-disclaimer { max-width: 650px; margin: 0; color: #98a9c1; font-size: .75rem; }
.footer-bottom small { flex-shrink: 0; color: #98a9c1; font-size: .75rem; }

/* Search-first homepage — Option 2 with the editorial supplier showcase. */
.home-page .container { width: min(100% - 40px, 1290px); max-width: 1290px; }
.home-search-first { background: var(--white); }
.home-search-first .search-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 58px;
  border-bottom: 1px solid rgb(33 59 123 / 8%);
  background-color: var(--cloud);
  background-image: url("/images/brand/masamed-bridge-pattern.svg");
  background-position: center;
  background-size: cover;
}
.home-search-first .search-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(244 248 252 / 78%);
  pointer-events: none;
}
.search-hero-grid {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: 62px;
}
.search-hero-copy { min-width: 0; }
.search-hero-copy h1 {
  max-width: 900px;
  margin: 0 0 20px;
  font-size: clamp(2.85rem, 3.8vw, 3.25rem);
  letter-spacing: -.055em;
}
.search-hero-copy .lead { max-width: 770px; font-size: 1.08rem; line-height: 1.65; }
.catalog-search {
  display: grid;
  grid-template-columns: 190px minmax(250px, 1fr) auto;
  width: min(100%, 820px);
  margin-top: 31px;
  overflow: hidden;
  border: 1px solid #aebdd0;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 14px 36px rgb(33 59 123 / 12%);
}
.catalog-search select,
.catalog-search input {
  height: 58px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.catalog-search select {
  padding-right: 32px;
  border-right: 1px solid var(--line);
  font-size: .87rem;
  font-weight: 800;
}
.catalog-search-input { display: flex; min-width: 0; align-items: center; }
.catalog-search-input i { margin-left: 17px; color: var(--slate); }
.catalog-search-input input { min-width: 0; padding-left: 12px; }
.catalog-search button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 23px;
  color: var(--white);
  border: 0;
  background: var(--bridge-indigo);
  font-size: .88rem;
  font-weight: 800;
}
.catalog-search button:hover { background: var(--bridge-indigo-dark); }
.popular-searches { display: flex; gap: 8px 15px; flex-wrap: wrap; margin-top: 14px; font-size: .75rem; }
.popular-searches span { color: var(--slate); font-weight: 800; }
.popular-searches a { text-decoration: underline; text-decoration-color: rgb(33 59 123 / 28%); text-underline-offset: 3px; }
.search-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.search-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; color: var(--slate); font-size: .76rem; font-weight: 700; }
.search-trust span, .search-trust a { display: inline-flex; align-items: center; gap: 7px; }
.search-trust a { color: var(--bridge-indigo); }
.search-trust i { color: var(--sea-green); font-size: .9rem; }
.hero-process {
  padding: 8px 0 8px 12px;
  color: var(--ink);
}
.hero-process .eyebrow { margin-bottom: 9px; color: var(--sea-green); }
.hero-process h2 { max-width: 300px; margin: 0; color: var(--ink); font-size: 1.75rem; }
.hero-process ol { margin: 24px 0 19px; padding: 0; list-style: none; }
.hero-process li { display: grid; grid-template-columns: 40px 1fr; gap: 13px; padding: 15px 0; border-top: 1px solid rgb(33 59 123 / 14%); }
.hero-process .process-number { display: grid; width: 29px; height: 29px; place-items: center; color: var(--white); border-radius: 50%; background: var(--bridge-indigo); font-size: .64rem; font-weight: 800; letter-spacing: .04em; }
.hero-process li:first-child .process-number { background: var(--sea-green); }
.hero-process strong, .hero-process small { display: block; }
.hero-process strong { color: var(--ink); font-size: .88rem; }
.hero-process small { margin-top: 3px; color: var(--slate); font-size: .72rem; line-height: 1.48; }


.verified-suppliers { padding: 32px 0 40px; border-top: 1px solid var(--line); background: var(--white); }
.verified-suppliers > .container { display: grid; grid-template-columns: 225px 1fr; align-items: stretch; gap: 26px; }
.verified-suppliers-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.verified-suppliers-intro .eyebrow { margin-bottom: 8px; font-size: .66rem; }
.verified-suppliers-intro h2 { margin: 0; font-size: 1.65rem; line-height: 1.16; }
.supplier-intro-links { display: grid; gap: 4px; margin-top: 15px; }
.supplier-intro-links a { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 800; }
.supplier-intro-links a:last-child { color: var(--slate); font-size: .68rem; text-decoration: underline; text-underline-offset: 3px; }
.verified-supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.verified-supplier-card {
  position: relative;
  display: flex;
  min-height: 142px;
  flex-direction: column;
  justify-content: center;
  padding: 19px 18px 18px 88px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 9px 28px rgb(33 59 123 / 6%);
}
.verified-supplier-top { position: absolute; top: 18px; bottom: 18px; left: 17px; display: flex; width: 56px; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; }
.supplier-mark { display: grid; width: 56px; height: 56px; place-items: center; color: var(--white); border-radius: 12px; background: var(--bridge-indigo); font-size: 1.22rem; }
.verified-supplier-card:nth-child(2) .supplier-mark { color: #24766e; background: rgb(75 181 169 / 15%); }
.verified-supplier-card:nth-child(3) .supplier-mark { color: var(--bridge-indigo); background: var(--sky-light); }
.verified-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; color: #24766e; border-radius: 4px; background: rgb(75 181 169 / 14%); font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.verified-supplier-card h3 { margin: 0 0 7px; font-size: .93rem; letter-spacing: -.02em; }
.verified-supplier-card > p { margin: 0; color: var(--slate); font-size: .83rem; line-height: 1.6; }
.verified-supplier-meta { display: grid; gap: 4px; margin: 0; }
.verified-supplier-meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--slate); font-size: .66rem; }
.supplier-card-link { position: absolute; inset: 0; border-radius: inherit; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding: 18px 0 6px; border-top: 1px solid var(--line); }
  .nav-cta { width: 100%; margin: 8px 0 0; }
  .hero-grid, .rfq-layout { grid-template-columns: 1fr; }
  .hero { padding-top: 72px; }
  .hero-card { max-width: 620px; }
  .category-grid, .supplier-grid { grid-template-columns: repeat(2, 1fr); }
  .form-aside { position: static; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar button { grid-column: 1 / -1; }
  .cta { align-items: flex-start; flex-wrap: wrap; }
  .cta > div { flex: 1 1 55%; }
  .search-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-process { max-width: 660px; }
  .all-categories-link { margin-left: auto; }
  .verified-suppliers > .container { grid-template-columns: 1fr; }
  .verified-suppliers-intro { flex-direction: row; align-items: end; justify-content: space-between; }
  .portal-intro-grid, .catalog-hero-grid { grid-template-columns: 1fr; }
  .vendor-search-card { max-width: 620px; }
  .catalog-file-card { max-width: 620px; }
  .catalog-stats { grid-template-columns: repeat(2, 1fr); }
  .vendor-rfq-card { grid-template-columns: 1fr; }
  .vendor-rfq-action { padding: 20px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .legal-hub-intro, .trust-hero-grid { grid-template-columns: 1fr; }
  .trust-hero-grid { gap: 38px; }
  .trust-signal-card { max-width: 620px; }
  .verification-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1160px); }
  .navbar { min-height: 72px; }
  .navbar-brand img { width: 151px; height: 39px; }
  .hero { padding: 62px 0 66px; }
  .hero h1 { font-size: 2.52rem; }
  .hero-grid { gap: 48px; }
  .hero-actions .btn { width: 100%; }
  .trust-row { display: grid; gap: 10px; }
  .hero-card { padding: 25px; border-radius: 22px; }
  .category-grid, .supplier-grid, .field-grid, .detail-card dl { grid-template-columns: 1fr; }
  .section { padding-top: 60px; padding-bottom: 60px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .supplier-row { align-items: flex-start; flex-wrap: wrap; }
  .supplier-copy { min-width: calc(100% - 82px); }
  .supplier-row > .btn { width: 100%; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-bar button { grid-column: auto; }
  .results-line { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cta { margin: 44px 14px; padding: 32px 25px; align-items: flex-start; flex-direction: column; }
  .cta > img { width: 62px; height: 41px; }
  .cta .btn { width: 100%; }
  .form-card, .form-aside, .detail-card, .track-card { padding: 23px; }
  .detail-card dl .wide { grid-column: auto; }
  .detail-head { flex-direction: column; }
  .page-hero { padding-top: 56px; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 16px; }
  .footer-utilities { justify-items: start; width: 100%; }
  .footer-links { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .footer-bottom small { flex-shrink: 1; }
  .home-search-first .search-hero { padding: 54px 0 45px; }
  .search-hero-copy h1 { font-size: 2.75rem; }
  .catalog-search { grid-template-columns: 1fr; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .catalog-search select, .catalog-search-input, .catalog-search button { min-height: 54px; border: 1px solid #aebdd0; border-radius: 10px; background: var(--white); }
  .catalog-search select { border-right: 1px solid #aebdd0; }
  .catalog-search-input { margin-top: 9px; }
  .catalog-search button { margin-top: 9px; color: var(--white); border-color: var(--bridge-indigo); background: var(--bridge-indigo); }
  .search-hero-actions .btn { width: 100%; }
  .search-trust { display: grid; gap: 9px; }
  .hero-process { padding: 25px; }
  .verified-suppliers { padding: 60px 0; }
  .verified-suppliers-intro { align-items: flex-start; flex-direction: column; }
  .verified-supplier-grid { grid-template-columns: 1fr; }
  .home-page .container { width: min(100% - 28px, 1290px); }
  .portal-intro-grid { gap: 28px; }
  .vendor-search-card > div { grid-template-columns: 1fr; }
  .vendor-result-grid, .catalog-stats { grid-template-columns: 1fr; }
  .vendor-workspace-head, .vendor-identity { align-items: flex-start; }
  .vendor-workspace-head { flex-direction: column; }
  .vendor-rfq-card { padding: 20px; }
  .quote-card-head, .quote-card dl { flex-direction: column; }
  .catalog-table-wrap { overflow-x: auto; }
  .catalog-table { min-width: 760px; }
  .legal-hub-intro, .legal-grid, .trust-scope-grid, .trust-audience-grid, .verification-steps { grid-template-columns: 1fr; }
  .legal-hub-intro { gap: 18px; }
  .legal-content article { padding: 24px; }
  .trust-hero { padding: 60px 0; }
  .trust-hero-actions .btn { width: 100%; }
  .verification-steps li { min-height: 0; }
  .verification-guidance { align-items: flex-start; flex-direction: column; }
  .verification-guidance a { margin-left: 0; white-space: normal; }
}

/* Phase 7 supplier quality and vendor onboarding */
.supplier-quality-workspace { padding-top: 32px; }
.supplier-results-toolbar > div { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.display-mode-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.display-mode-toggle a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; min-height: 44px; border-radius: 8px; color: var(--ink); font-weight: 700; }
.display-mode-toggle a[aria-current="page"] { background: var(--bridge-indigo); color: white; }
.display-mode-toggle a:focus-visible { outline: 3px solid var(--sea-green); outline-offset: 2px; }
.supplier-list.supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border: 0; }
.supplier-grid .supplier-row { min-width: 0; align-items: flex-start; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.supplier-grid .supplier-copy { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.supplier-grid .supplier-row-actions { margin-top: auto; flex-wrap: wrap; }
.supplier-grid .supplier-meta { align-items: flex-start; flex-direction: column; }
.supplier-grid .supplier-copy > p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.quality-list.quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.quality-grid .quality-card > header { grid-template-columns: auto minmax(0, 1fr); }
.quality-grid .quality-score { grid-column: 1 / -1; text-align: left; }
.quality-grid .quality-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quality-grid .quality-details dl div { padding: 0; border: 0; }
.quality-grid .quality-actions, .quality-grid .quality-review-form, .quality-grid .quality-invite-form { grid-template-columns: minmax(0, 1fr); }
.quality-grid .quality-invite-form { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.quality-grid .quality-title-line h2 { overflow-wrap: anywhere; }
.supplier-quality-workspace .quality-toolbar { flex-wrap: wrap; }
.supplier-quality-workspace .quality-filter { flex-basis: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(150px, .5fr) auto auto; }
.category-toolbar-actions, .category-request-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.category-request-filter select { max-width: 280px; }
.vendor-category-requests { display: grid; gap: 12px; margin: 24px 0; }
.vendor-category-requests h2 { font-size: 1.15rem; }
.vendor-category-requests .status-pill { margin-left: 12px; }
@media (max-width: 1050px) { .supplier-list.supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .quality-list.quality-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .supplier-list.supplier-grid { grid-template-columns: minmax(0, 1fr); }
  .supplier-quality-workspace .quality-filter { grid-template-columns: minmax(0, 1fr); }
  .supplier-results-toolbar { align-items: flex-start; gap: 16px; flex-direction: column; }
}
.category-toolbar, .category-admin-heading, .category-pagination { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.category-totals { display: grid; gap: 4px; }
.category-totals span, .category-source-note, .category-status-help { color: var(--slate); font-size: .9rem; }
.category-filter { grid-template-columns: minmax(0, 1fr) minmax(160px, .4fr) auto auto; margin-top: 24px; }
.category-admin-list { display: grid; gap: 14px; }
.category-admin-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.category-admin-label { flex: 0 0 54px; min-height: 54px; display: grid; place-items: center; background: var(--cloud); color: var(--bridge-indigo); border-radius: 12px; font-weight: 800; overflow-wrap: anywhere; }
.category-admin-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.category-admin-heading { justify-content: flex-start; gap: 12px; }
.category-admin-heading h2 { margin: 0; font-size: 1.1rem; }
.category-order-index { display: inline-flex; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--cloud); color: var(--bridge-indigo); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.category-admin-content p { margin: 8px 0; color: var(--slate); }
.category-admin-content small { color: var(--slate); }
.category-pagination { margin-top: 28px; justify-content: center; }
.logo-upload-preview { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.logo-upload-preview[hidden] { display: none; }
.logo-upload-preview img { width: 88px; height: 88px; object-fit: contain; background: white; }
.category-request-note { padding: 14px 16px; border-left: 3px solid var(--bridge-indigo); background: var(--cloud); }
@media (max-width: 700px) {
  .category-filter { grid-template-columns: minmax(0, 1fr); }
  .category-admin-card { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .category-admin-content { flex-basis: calc(100% - 80px); }
  .category-admin-card > .btn { margin-left: auto; }
}
.quality-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:22px 0; }
.quality-kpis a { display:grid; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:var(--shadow-card); }
.quality-kpis strong { color:var(--bridge-indigo); font-size:1.7rem; line-height:1; }
.quality-kpis span { margin-top:6px; color:var(--slate); font-size:.74rem; font-weight:800; }
.quality-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--cloud); }
.quality-filter { display:grid; grid-template-columns:minmax(260px,1fr) 210px auto auto; align-items:end; gap:12px; flex:1; }
.quality-list { display:grid; gap:16px; }
.quality-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--white); box-shadow:0 10px 28px rgb(33 59 123 / 6%); }
.quality-card > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:15px; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line); }
.quality-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.quality-title-line h2 { margin:0; font-size:1.18rem; }
.quality-identity p { margin:5px 0 0; color:var(--slate); font-size:.78rem; }
.quality-score { display:grid; grid-template-columns:auto auto; align-items:baseline; min-width:118px; text-align:right; }
.quality-score strong { color:var(--bridge-indigo); font-size:1.55rem; }
.quality-score > span { color:var(--slate); font-size:.7rem; }
.quality-score div { grid-column:1 / -1; overflow:hidden; height:6px; margin-top:6px; border-radius:10px; background:var(--line); }
.quality-score i { display:block; height:100%; border-radius:10px; background:var(--sea-green); }
.quality-details { padding:16px 22px; background:#fbfdff; }
.quality-details dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }
.quality-details dl div { min-width:0; padding:0 16px; border-left:1px solid var(--line); }
.quality-details dl div:first-child { padding-left:0; border-left:0; }
.quality-details dt { color:var(--slate); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.quality-details dd { overflow:hidden; margin:3px 0 0; font-size:.8rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.review-evidence { margin:13px 0 0; color:var(--slate); font-size:.75rem; }
.quality-actions { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr); gap:14px; padding:18px 22px 22px; }
.quality-review-form { display:grid; grid-template-columns:170px minmax(180px,1fr) minmax(220px,1.2fr) auto; align-items:end; gap:9px; }
.quality-invite-form { display:grid; grid-template-columns:minmax(170px,1fr) 82px auto; align-items:end; gap:9px; padding-left:14px; border-left:1px solid var(--line); }
.quality-actions .field { margin:0; }
.quality-actions .field label { font-size:.68rem; }
.active-vendor-invitation { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border:1px solid rgb(75 181 169 / 30%); border-radius:14px; background:#effaf7; }
.active-vendor-invitation > div { display:grid; }
.active-vendor-invitation strong { margin-top:6px; font-size:.8rem; }
.active-vendor-invitation small { color:var(--slate); font-size:.68rem; }
.phase7-development-link { margin-bottom:18px; }
.pagination-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; color:var(--slate); font-size:.8rem; font-weight:800; }
.vendor-invitation-page { min-height:calc(100vh - 82px); }
.vendor-invitation-card { text-align:center; }
.vendor-invitation-card .supplier-avatar { margin:0 auto 18px; }
.vendor-invitation-card > p { max-width:620px; margin-right:auto; margin-left:auto; color:var(--slate); }
.invitation-trust-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:26px 0; text-align:left; }
.invitation-trust-list span { display:grid; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--cloud); }
.invitation-trust-list i { margin-bottom:9px; color:var(--sea-green); font-size:1.2rem; }
.invitation-trust-list strong { font-size:.78rem; }
.invitation-trust-list small { margin-top:4px; color:var(--slate); font-size:.7rem; }
.invitation-actions { display:flex; justify-content:center; gap:10px; margin-top:22px; }
.invitation-safety-note { display:block; margin-top:24px; color:var(--slate); }
.invitation-safety-note i { margin-right:5px; color:var(--sea-green); }
.registration-invitation-context, .invited-account-type { display:flex; align-items:flex-start; gap:13px; margin:20px 0; padding:15px 17px; border:1px solid rgb(75 181 169 / 28%); border-radius:14px; background:#effaf7; text-align:left; }
.registration-invitation-context > i, .invited-account-type > i { color:var(--sea-green); font-size:1.25rem; }
.registration-invitation-context strong, .registration-invitation-context span, .invited-account-type strong, .invited-account-type span { display:block; }
.registration-invitation-context span, .invited-account-type span { margin-top:3px; color:var(--slate); font-size:.75rem; line-height:1.55; }
.field-help { display:block; margin-top:7px; color:var(--slate); font-size:.72rem; }
.field-help i { margin-right:4px; color:var(--sea-green); }
.email-match-section { margin-bottom:38px; padding:27px; border:1px solid rgb(75 181 169 / 32%); border-radius:var(--radius-md); background:linear-gradient(135deg,#effaf7 0%,var(--white) 72%); box-shadow:0 10px 28px rgb(8 32 56 / 6%); }
.email-match-heading { display:flex; align-items:flex-start; gap:17px; margin-bottom:20px; }
.email-match-icon { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; color:var(--white); border-radius:14px; background:var(--sea-green); box-shadow:0 8px 18px rgb(75 181 169 / 23%); }
.email-match-heading h2 { margin:3px 0 6px; font-size:1.55rem; }
.email-match-heading p { max-width:720px; margin:0; color:var(--slate); }
.email-match-grid { grid-template-columns:1fr; }
.email-matched-card { border-color:rgb(75 181 169 / 35%); }
.email-matched-card small { display:block; margin-top:7px; color:#27766d; font-size:.7rem; font-weight:800; }
.email-match-caution { display:flex; align-items:flex-start; gap:8px; margin-top:15px; color:var(--slate); font-size:.75rem; }
.email-match-caution i { color:var(--bridge-indigo); }
@media(max-width:1100px) { .quality-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .quality-actions { grid-template-columns:1fr; } .quality-invite-form { padding-top:14px; padding-left:0; border-top:1px solid var(--line); border-left:0; } }
@media(max-width:800px) { .quality-toolbar { align-items:stretch; flex-direction:column; } .quality-filter { grid-template-columns:1fr; width:100%; } .quality-card > header { grid-template-columns:auto minmax(0,1fr); } .quality-score { grid-column:1 / -1; text-align:left; } .quality-details dl { grid-template-columns:1fr 1fr; gap:14px; } .quality-details dl div, .quality-details dl div:first-child { padding:0; border:0; } .quality-review-form, .quality-invite-form { grid-template-columns:1fr; } .invitation-trust-list { grid-template-columns:1fr; } .email-matched-card { align-items:flex-start; flex-wrap:wrap; } .email-matched-card form { width:100%; } .email-matched-card .btn { width:100%; } }
@media(max-width:520px) { .quality-kpis { grid-template-columns:1fr 1fr; } .quality-details dl { grid-template-columns:1fr; } .invitation-actions { align-items:stretch; flex-direction:column; } }

/* Phase 7 controlled pilot operations */
.pilot-hero-layout { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px; }
.pilot-gate-summary { display:grid; min-width:260px; gap:7px; padding:19px 21px; border:1px solid var(--line); border-radius:16px; background:var(--white); }
.pilot-gate-summary .status-pill { justify-self:start; }
.pilot-gate-summary strong { font-size:.9rem; }
.pilot-gate-summary small { color:var(--slate); font-size:.7rem; }
.pilot-control-room { display:grid; gap:30px; }
.pilot-gates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pilot-gates > div { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; padding:18px 20px; border:1px solid var(--line); border-radius:15px; background:var(--white); box-shadow:0 6px 18px rgb(8 32 56 / 4%); }
.pilot-gates i { grid-row:1 / 3; align-self:center; color:var(--sea-green); font-size:1.35rem; }
.pilot-gates span { color:var(--slate); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.pilot-gates strong { font-size:.84rem; }
.pilot-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.pilot-section-heading h2 { margin:2px 0 0; font-size:1.65rem; }
.pilot-section-heading > small { color:var(--slate); }
.pilot-section-heading > a { font-size:.75rem; font-weight:800; }
.pilot-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; }
.pilot-metric-grid article { display:grid; gap:5px; min-height:132px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 8px 22px rgb(8 32 56 / 5%); }
.pilot-metric-grid article > span { color:var(--slate); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.pilot-metric-grid article > strong { align-self:end; color:var(--bridge-indigo); font-size:2rem; line-height:1; }
.pilot-metric-grid article > small { color:var(--slate); font-size:.68rem; line-height:1.45; }
.pilot-metric-grid .pilot-exception-metric { border-color:rgb(226 152 47 / 32%); background:#fffaf1; }
.pilot-metric-grid .pilot-exception-metric > strong { color:#9d6518; }
.pilot-exception-panel, .pilot-cohort-panel { display:grid; gap:18px; padding:24px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-card); }
.pilot-exception-list, .pilot-cohort-list { display:grid; gap:9px; }
.pilot-exception-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 15px; color:var(--ink); border:1px solid var(--line); border-radius:13px; background:var(--cloud); transition:border-color .18s ease, transform .18s ease; }
.pilot-exception-row:hover { color:var(--ink); border-color:var(--pale-sky); transform:translateY(-1px); }
.pilot-exception-icon { display:grid; width:40px; height:40px; place-items:center; border-radius:12px; }
.pilot-exception-action { color:#9d6518; background:#fff0d7; }
.pilot-exception-watch { color:var(--bridge-indigo); background:rgb(56 92 168 / 10%); }
.pilot-exception-row > div > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pilot-exception-row strong { font-size:.84rem; }
.pilot-exception-row p { margin:4px 0 0; color:var(--slate); font-size:.72rem; }
.pilot-exception-row > i { color:var(--bridge-indigo); }
.pilot-cohort-grid { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:18px; }
.pilot-cohort-row { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--cloud); }
.pilot-cohort-identity { display:grid; gap:3px; }
.pilot-cohort-identity strong { font-size:.88rem; }
.pilot-cohort-identity span, .pilot-cohort-identity small { overflow:hidden; color:var(--slate); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.pilot-cohort-form { display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:8px; }
.pilot-cohort-form select, .pilot-cohort-form input { min-height:39px; padding:8px 10px; font-size:.72rem; }
@media(max-width:1180px) { .pilot-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .pilot-cohort-grid { grid-template-columns:1fr; } }
@media(max-width:800px) { .pilot-hero-layout { grid-template-columns:1fr; } .pilot-gate-summary { min-width:0; } .pilot-gates { grid-template-columns:1fr; } .pilot-metric-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .pilot-metric-grid { grid-template-columns:1fr; } .pilot-section-heading { align-items:flex-start; flex-direction:column; } .pilot-exception-row { align-items:flex-start; } .pilot-cohort-form { grid-template-columns:1fr; } }

/* Phase 3 procurement depth */
.rfq-additional-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 26px 0 14px; padding-top: 20px; border-top: 1px dashed var(--line); }
.rfq-additional-head h3 { margin: 0 0 4px; font-size: 1rem; }
.rfq-additional-head p { margin: 0; color: var(--slate); font-size: .76rem; }
.additional-rfq-items, .quote-line-editor { display: grid; gap: 15px; }
.additional-rfq-item, .quote-line-card { padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--cloud); }
.additional-item-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; color: var(--ink); }
.remove-rfq-item { display: grid; width: 30px; height: 30px; place-items: center; color: var(--danger); border: 0; border-radius: 50%; background: #fdeaea; }
.rfq-item-summary { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.rfq-item-summary h3 { margin-bottom: 12px; font-size: 1rem; }
.rfq-item-summary article { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.rfq-item-summary article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--white); background: var(--bridge-indigo); font-size: .7rem; font-weight: 800; }
.rfq-item-summary article div { display: grid; gap: 3px; }
.rfq-item-summary small, .rfq-item-summary p { color: var(--slate); }
.rfq-item-summary p { margin: 3px 0 0; font-size: .78rem; }
.quote-line-request { display: grid; gap: 4px; margin-bottom: 17px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.quote-line-request span { color: var(--sea-green); font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.quote-line-request small { color: var(--slate); }
.quote-alternative { align-self: center; padding-top: 23px; }
.quote-total-preview { display: flex; align-items: center; justify-content: space-between; margin: 5px 0 20px; padding: 17px; border-radius: 14px; color: var(--white); background: var(--bridge-indigo); }
.quote-total-preview strong { font-size: 1.25rem; }
#quoteSubtotal { display: block; min-height: 48px; padding: .76rem .84rem; border-radius: var(--radius-sm); color: var(--ink); background: #edf3f8; font-weight: 800; }
.quote-request-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / 14%); }
.quote-request-item span { color: #c0cee0; }
.quote-line-summary { display: grid; gap: 7px; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--cloud); }
.quote-line-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
.quote-line-summary small { grid-column: 1 / -1; color: var(--sea-green); }
.quote-commercial-summary { margin-top: 12px !important; }
.comparison-page { max-width: 1500px; }
.comparison-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.quote-comparison-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.quote-comparison-table th, .quote-comparison-table td { min-width: 220px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.quote-comparison-table th:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; background: var(--cloud); }
.quote-comparison-table thead th { background: var(--cloud); }
.quote-comparison-table thead th:not(:first-child) { display: table-cell; }
.quote-comparison-table thead th > strong, .quote-comparison-table thead th > small { display: block; margin-top: 7px; }
.quote-comparison-table thead small { color: var(--slate); }
.comparison-item-row td { display: table-cell; }
.comparison-item-row td > * { display: block; margin-bottom: 5px; }
.comparison-item-row td span { color: var(--slate); font-size: .76rem; }
.comparison-item-row td em { width: max-content; padding: 4px 7px; border-radius: 999px; color: #725300; background: #fff1bb; font-size: .64rem; font-style: normal; font-weight: 800; }
.comparison-missing { color: var(--slate); font-style: italic; }
.comparison-total th, .comparison-total td { color: var(--bridge-indigo); background: #eef4ff; font-size: 1.08rem; }
.quote-comparison-table form { display: flex; flex-wrap: wrap; gap: 6px; }
.comparison-note { display: flex; gap: 9px; margin-top: 14px; color: var(--slate); font-size: .76rem; }
.supplier-product-matches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.supplier-product-matches a { display: grid; gap: 2px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: inherit; background: var(--cloud); text-decoration: none; }
.supplier-product-matches strong { font-size: .74rem; }
.supplier-product-matches span { color: var(--slate); font-size: .65rem; }
.supplier-row-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.supplier-profile-hero { padding: 60px 0; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--cloud), #eef8f5); }
.supplier-profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.supplier-profile-head > .supplier-avatar { width: 132px !important; height: 92px; flex-basis: 132px !important; }
.supplier-profile-head h1 { margin: 7px 0; }
.supplier-profile-head p { max-width: 720px; margin: 0 0 12px; color: var(--slate); }
.supplier-profile-stats { display: grid; grid-template-columns: repeat(3, 110px); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.supplier-profile-stats div { display: grid; gap: 3px; padding: 18px; border-left: 1px solid var(--line); text-align: center; }
.supplier-profile-stats div:first-child { border-left: 0; }
.supplier-profile-stats strong { color: var(--bridge-indigo); font-size: 1.4rem; }
.supplier-profile-stats span { color: var(--slate); font-size: .65rem; }
.supplier-profile-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.supplier-profile-aside { position: sticky; top: 20px; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.supplier-profile-aside h2 { font-size: 1rem; }
.category-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.category-tags a { padding: 6px 9px; border-radius: 999px; color: var(--bridge-indigo); background: var(--cloud); font-size: .68rem; text-decoration: none; }
.trust-note { display: flex; gap: 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--slate); font-size: .72rem; }
.trust-note i { color: var(--sea-green); }
.trust-note p { margin: 0; }
.trust-note a { display: block; margin-top: 5px; font-weight: 800; }
.catalog-public-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.catalog-public-head h2 { margin: 5px 0 0; }
.catalog-public-head form { display: flex; gap: 7px; }
.public-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.public-product-grid article { display: grid; gap: 13px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.product-photo, .product-photo-placeholder { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, var(--cloud), #edf6f4); }
.product-photo { object-fit: cover; }
.product-photo-placeholder { align-content: center; gap: 7px; color: var(--slate); text-align: center; }
.product-photo-placeholder i { color: var(--sea-green); font-size: 1.65rem; }
.product-photo-placeholder span { font-size: .69rem; font-weight: 800; }
.public-product-grid .product-photo, .public-product-grid .product-photo-placeholder { aspect-ratio: 16 / 10; }
.public-product-grid h3 { margin: 8px 0 2px; font-size: 1rem; }
.public-product-grid p { margin: 0; color: var(--slate); font-size: .76rem; }
.public-product-grid dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0; }
.public-product-grid dt { color: var(--slate); font-size: .62rem; text-transform: uppercase; }
.public-product-grid dd { margin: 3px 0 0; font-size: .73rem; font-weight: 800; }
.public-product-grid .btn { justify-self: start; }
.vendor-rfq-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vendor-rfq-items span { padding: 6px 9px; border-radius: 999px; color: var(--bridge-indigo); background: var(--cloud); font-size: .68rem; }

@media (max-width: 1100px) {
  .supplier-profile-head { grid-template-columns: auto 1fr; }
  .supplier-profile-stats { grid-column: 1 / -1; width: max-content; }
}
@media (max-width: 800px) {
  .supplier-profile-body { grid-template-columns: 1fr; }
  .supplier-profile-aside { position: static; }
  .public-product-grid { grid-template-columns: 1fr; }
  .supplier-row-actions, .catalog-public-head { align-items: stretch; flex-direction: column; }
}
@media (max-width: 600px) {
  .rfq-additional-head, .supplier-profile-head { align-items: flex-start; grid-template-columns: 1fr; }
  .rfq-additional-head { flex-direction: column; }
  .supplier-profile-stats { grid-template-columns: 1fr; width: 100%; }
  .supplier-profile-stats div { border-top: 1px solid var(--line); border-left: 0; }
  .supplier-profile-stats div:first-child { border-top: 0; }
  .catalog-public-head form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Vendor-owned workspace */
.vendor-shell { padding-top: 34px; padding-bottom: 84px; }
.vendor-entry-hero { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.vendor-entry-hero > div { max-width: 820px; }
.mvp-boundary { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--slate); font-size: .72rem; }
.vendor-shell-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px 18px 0 0; background: var(--white); }
.vendor-shell-head h2 { margin: 2px 0 3px; font-size: 1.15rem; }
.vendor-shell-head p { margin: 0; color: var(--slate); font-size: .78rem; }
.vendor-switch { display: inline-flex; align-items: center; gap: 7px; font-size: .77rem; font-weight: 800; }
.vendor-subnav { display: flex; overflow-x: auto; gap: 2px; padding: 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; background: var(--cloud); }
.vendor-subnav a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 11px 15px; border-radius: 10px; color: var(--slate); font-size: .78rem; font-weight: 800; }
.vendor-subnav a:hover { color: var(--bridge-indigo); background: var(--white); }
.vendor-dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 26px; padding: 34px; color: var(--white); border-radius: 22px; background: linear-gradient(135deg, var(--bridge-indigo), #162e62); box-shadow: 0 20px 42px rgb(33 59 123 / 18%); }
.vendor-dashboard-hero h1 { max-width: 670px; margin: 7px 0 9px; color: var(--white); font-size: clamp(2rem, 3.2vw, 3.1rem); }
.vendor-dashboard-hero p { max-width: 690px; margin: 0; color: #d5e2f3; }
.vendor-dashboard-hero .eyebrow { color: var(--pale-sky); }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vendor-dashboard-hero .dashboard-actions { flex: 0 0 auto; }
.vendor-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }
.vendor-kpis a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 13px; align-items: center; padding: 21px; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 10px 28px rgb(33 59 123 / 5%); }
.vendor-kpis i { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; place-items: center; color: var(--bridge-indigo); border-radius: 12px; background: var(--sky-light); font-size: 1.05rem; }
.vendor-kpis strong { font-size: 1.45rem; line-height: 1; }
.vendor-kpis span { color: var(--slate); font-size: .72rem; font-weight: 700; }
.vendor-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 20px; margin-bottom: 20px; }
.vendor-panel { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 10px 30px rgb(33 59 123 / 5%); }
.panel-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.panel-head h2 { margin: 3px 0 0; font-size: 1.25rem; }
.panel-head > a { font-size: .76rem; font-weight: 800; }
.dashboard-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; color: var(--ink); border-top: 1px solid var(--line); }
.dashboard-row > div { min-width: 0; }
.dashboard-row strong, .dashboard-row span { display: block; }
.dashboard-row > div span { overflow: hidden; margin-top: 3px; color: var(--slate); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-row > span { flex: 0 0 auto; font-size: .76rem; font-weight: 800; }
.catalog-health-card { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 18px; border-radius: 14px; background: var(--cloud); }
.catalog-health-card > i { color: var(--sea-green); font-size: 2rem; }
.catalog-health-card strong, .catalog-health-card span { display: block; }
.catalog-health-card span { margin-top: 3px; color: var(--slate); font-size: .72rem; }
.stacked-actions { display: grid; gap: 9px; }
.product-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.product-mini-grid a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 15px; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; }
.product-mini-grid strong, .product-mini-grid span { display: block; }
.product-mini-grid span { margin-top: 3px; color: var(--slate); font-size: .68rem; }
.product-icon { display: grid !important; width: 38px; height: 38px; place-items: center; color: var(--bridge-indigo) !important; border-radius: 10px; background: var(--sky-light); font-size: 1rem !important; }
.product-mini-photo { display: block; width: 48px; height: 48px; margin: 0 !important; }
.product-mini-photo .product-photo, .product-mini-photo .product-photo-placeholder { width: 48px; height: 48px; aspect-ratio: 1; border-radius: 10px; }
.product-mini-photo .product-photo-placeholder i { font-size: 1.1rem; }
.product-mini-photo .product-photo-placeholder span { display: none; }
.mini-empty { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 110px; color: var(--slate); text-align: center; font-size: .83rem; }
.mini-empty i { color: var(--sea-green); font-size: 1.4rem; }
.workspace-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 35px 0 24px; }
.workspace-title h1 { margin: 6px 0 5px; font-size: clamp(2rem, 3vw, 2.8rem); }
.workspace-title p { margin: 0; color: var(--slate); }
.workspace-count { flex: 0 0 auto; padding: 10px 14px; color: var(--bridge-indigo); border-radius: 999px; background: var(--sky-light); font-size: .78rem; }
.vendor-profile-form { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 26px; }
.vendor-profile-form .form-aside { position: sticky; top: 96px; }
.vendor-benefits { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.vendor-benefits li { display: flex; gap: 9px; color: #dce7f6; }
.vendor-benefits i { color: var(--pale-sky); }
.vendor-settings-card { max-width: 900px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.product-form-card { max-width: 980px; margin: 0 auto; }
.product-photo-editor { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 24px; margin-bottom: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--cloud); }
.product-photo-preview { width: 240px; }
.product-photo-preview .product-photo-placeholder, .product-photo-preview img { display: grid; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.product-photo-field { margin: 0; }
.field-help { display: block; margin-top: 7px; color: var(--slate); font-size: .7rem; }
.compact-check { margin-top: 13px; }
.catalog-title { align-items: center; }
.catalog-toolbar-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.catalog-filters { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(220px, 1fr) minmax(190px, 280px) auto; gap: 9px; }
.catalog-file-actions { display: flex; flex: 0 0 auto; gap: 13px; }
.catalog-file-actions a { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; }
.vendor-catalog-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.vendor-catalog-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.vendor-catalog-table th { padding: 13px 16px; color: var(--white); background: var(--bridge-indigo); font-size: .67rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.vendor-catalog-table td { padding: 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: .78rem; vertical-align: top; }
.vendor-catalog-table td strong, .vendor-catalog-table td span { display: block; }
.vendor-catalog-table td span { margin-top: 4px; color: var(--slate); font-size: .68rem; }
.catalog-product-cell { display: grid; grid-template-columns: 64px minmax(150px, 1fr); align-items: center; gap: 12px; }
.catalog-product-cell .product-photo, .catalog-product-cell .product-photo-placeholder { width: 64px; height: 52px; aspect-ratio: auto; border-radius: 9px; }
.catalog-product-cell .product-photo-placeholder i { font-size: 1rem; }
.catalog-product-cell .product-photo-placeholder span { display: none; }
.catalog-status { display: inline-flex !important; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: .65rem !important; font-weight: 800; }
.catalog-status.active { color: #176e65; background: #e1f6f3; }
.catalog-status.archived { color: #667085; background: #edf0f4; }
.row-actions { white-space: nowrap; }
.row-actions a, .row-actions button { color: var(--bridge-indigo); border: 0; background: transparent; font-size: .72rem; font-weight: 800; }
.row-actions form { display: inline; margin-left: 9px; }
.catalog-warning { display: flex; align-items: flex-start; gap: 13px; margin: 18px 0; padding: 15px 17px; color: #754d06; border: 1px solid #f1d59a; border-radius: 13px; background: #fff8e8; }
.catalog-warning strong, .catalog-warning span { display: block; }
.catalog-warning span { margin-top: 3px; font-size: .75rem; }
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 26px; }
.import-card { padding: 28px; }
.upload-zone { display: grid; min-height: 330px; place-items: center; align-content: center; padding: 35px; border: 2px dashed #aec0d4; border-radius: 17px; background: var(--cloud); text-align: center; }
.upload-zone > i { color: var(--sea-green); font-size: 3.2rem; }
.upload-zone h2 { margin: 14px 0 6px; }
.upload-zone p { margin: 0 0 24px; color: var(--slate); font-size: .8rem; }
.upload-zone input { max-width: 440px; background: var(--white); }
.import-help { padding: 28px; border-radius: 18px; color: var(--white); background: var(--bridge-indigo); }
.import-help h2 { margin: 7px 0 10px; color: var(--white); }
.import-help p { color: #d4e1f2; }
.import-help .btn { width: 100%; margin: 12px 0 20px; color: var(--white); border-color: rgb(255 255 255 / 35%); }
.import-help ol { display: grid; gap: 10px; padding-left: 20px; color: #d4e1f2; font-size: .8rem; }
.quote-history-list { display: grid; gap: 13px; }
.quote-history-list article { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.quote-history-list h3 { margin: 7px 0 3px; font-size: 1.05rem; }
.quote-history-list p { margin: 0; color: var(--slate); font-size: .74rem; }
.quote-history-list dl { display: flex; flex: 0 0 auto; gap: 28px; margin: 0; }
.quote-history-list dl div { min-width: 90px; }
.quote-history-list dt { color: var(--slate); font-size: .65rem; text-transform: uppercase; }
.quote-history-list dd { margin: 4px 0 0; color: var(--ink); font-size: .78rem; font-weight: 800; }

@media (max-width: 991.98px) {
  .vendor-entry-hero, .vendor-dashboard-hero, .workspace-title, .catalog-toolbar-card { align-items: flex-start; flex-direction: column; }
  .vendor-kpis { grid-template-columns: repeat(2, 1fr); }
  .vendor-dashboard-grid, .vendor-profile-form, .import-layout { grid-template-columns: 1fr; }
  .product-mini-grid { grid-template-columns: 1fr 1fr; }
  .vendor-profile-form .form-aside { position: static; }
  .catalog-filters { width: 100%; }
}

@media (max-width: 640px) {
  .vendor-shell-head { align-items: flex-start; flex-direction: column; }
  .vendor-subnav { margin-right: -14px; margin-left: -14px; border-right: 0; border-left: 0; border-radius: 0; }
  .vendor-dashboard-hero { padding: 25px; }
  .vendor-kpis, .product-mini-grid, .catalog-filters, .field-grid.three { grid-template-columns: 1fr; }
  .dashboard-actions, .dashboard-actions .btn, .catalog-file-actions { width: 100%; }
  .catalog-file-actions { align-items: flex-start; flex-direction: column; }
  .quote-history-list article, .quote-history-list dl { align-items: flex-start; flex-direction: column; }
  .quote-history-list dl { width: 100%; gap: 13px; }
  .product-photo-editor { grid-template-columns: 1fr; }
  .product-photo-preview { width: 100%; max-width: 320px; }
}

/* Phase 1 account, ownership, and private workspace surfaces */
.nav-button { border: 0; background: transparent; }
.auth-page { display: grid; min-height: 72vh; place-items: center; padding: 64px 20px; background: linear-gradient(145deg, #f4f8fc, #eef4fb 55%, #f7fbf9); }
.auth-card { width: min(100%, 520px); padding: 38px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 22px 55px rgb(33 59 123 / 10%); }
.auth-card-wide { width: min(100%, 760px); }
.auth-card h1 { margin: 8px 0; }
.auth-card > p, .account-type-grid small, .password-hint, .auth-options, .auth-footer { color: var(--slate); }
.auth-card form { display: grid; gap: 17px; margin-top: 24px; }
.account-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-type-grid label { cursor: pointer; }
.account-type-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-type-grid span { display: grid; min-height: 130px; align-content: center; gap: 5px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; transition: .2s ease; }
.account-type-grid i { color: var(--sea-green); font-size: 1.6rem; }
.account-type-grid input:checked + span { border-color: var(--sea-green); background: #f1faf7; box-shadow: 0 0 0 3px rgb(34 150 125 / 10%); }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .8rem; }
.auth-footer { margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: .82rem; }
.account-message { text-align: center; }
.account-message-icon { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: var(--sea-green); background: #e9f8f3; font-size: 1.7rem; }
.development-link { margin-top: 18px; padding: 15px; border-radius: 12px; background: #fff8df; font-size: .78rem; }
.demo-login-link { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 13px; background: #eef7ff; }
.demo-login-link > i { color: var(--bridge-indigo); font-size: 1.25rem; }
.demo-login-link > div { display: grid; gap: 2px; font-size: .78rem; }
.demo-accounts { display: grid; gap: 26px; }
.demo-password { display: grid; justify-items: center; gap: 5px; padding: 24px; border-radius: 18px; color: var(--white); background: var(--bridge-indigo); text-align: center; }
.demo-password strong { font-size: 1.75rem; letter-spacing: .06em; }
.demo-password small { color: #cedaf0; }
.demo-account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.demo-account-card { display: grid; align-content: start; gap: 10px; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.demo-account-card h2 { margin: 2px 0 0; font-size: 1.1rem; }
.demo-account-card code { overflow-wrap: anywhere; color: var(--bridge-indigo); }
.demo-account-card p { min-height: 58px; margin: 0; color: var(--slate); font-size: .78rem; }
.demo-account-card .btn { align-self: end; margin-top: auto; }
.demo-scenarios { display: grid; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--cloud); }
.demo-scenarios h2 { margin-bottom: 5px; }
.demo-scenarios > div { display: grid; grid-template-columns: 130px 1fr; gap: 15px; padding-top: 10px; border-top: 1px solid var(--line); }
.demo-scenarios span { color: var(--slate); }
.buyer-dashboard { padding-top: 58px; padding-bottom: 70px; }
.buyer-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.buyer-dashboard-head h1 { margin: 8px 0; }
.buyer-dashboard-head p { margin: 0; color: var(--slate); }
.buyer-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 28px; }
.buyer-kpis > div { display: grid; gap: 4px; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.buyer-kpis i { color: var(--sea-green); font-size: 1.35rem; }
.buyer-kpis strong { color: var(--ink); font-size: 1.75rem; }
.buyer-kpis span, .buyer-rfq-row small { color: var(--slate); font-size: .72rem; }
.buyer-rfq-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.buyer-rfq-panel .panel-head { padding: 25px 27px 17px; }
.buyer-rfq-panel h2 { margin: 5px 0 0; }
.buyer-rfq-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 27px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.buyer-rfq-row:hover { background: var(--cloud); }
.buyer-rfq-row > div:first-child { display: grid; gap: 5px; }
.buyer-rfq-summary { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px; color: var(--slate); }
.buyer-rfq-summary strong { color: var(--ink); }
.claimable { color: inherit; text-decoration: none; }
.claim-summary, .claim-list { display: grid; gap: 13px; margin-bottom: 34px; }
.claim-summary { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.claim-summary h2 { margin: 0 0 6px; font-size: 1.2rem; }
.claim-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.status-pill { display: inline-flex; width: max-content; padding: 5px 10px; border-radius: 999px; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.status-pending { color: #7b5900; background: #fff3c4; }
.status-approved { color: #136b57; background: #ddf6ee; }
.status-rejected { color: #9a3030; background: #fde8e8; }
.claim-card { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.claim-card h2 { margin: 9px 0 4px; font-size: 1.2rem; }
.claim-card p { margin: 4px 0; color: var(--slate); }
.claim-actions { display: flex; gap: 9px; }

@media (max-width: 767.98px) {
  .account-type-grid, .buyer-kpis { grid-template-columns: 1fr 1fr; }
  .buyer-dashboard-head, .buyer-rfq-row, .claim-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .auth-card { padding: 26px 20px; }
  .account-type-grid, .buyer-kpis { grid-template-columns: 1fr; }
}

/* Phase 2 operations */
.notification-link { font-size: 1.05rem; }
.quote-decision-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-decision-bar form { display: flex; flex-wrap: wrap; gap: 7px; }
.status-shortlisted { color: #725300; background: #fff1bb; }
.status-declined, .status-expired { color: #973232; background: #fde7e7; }
.status-accepted { color: #126a55; background: #ddf6ed; }
.notification-list, .message-list, .verification-history { display: grid; gap: 13px; }
.notification-item { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px; border: 1px solid var(--line); border-left: 4px solid var(--sea-green); border-radius: 15px; background: var(--white); }
.notification-item.read { border-left-color: var(--line); opacity: .78; }
.notification-item h2 { margin: 5px 0; font-size: 1.08rem; }
.notification-item p { margin: 0 0 5px; color: var(--slate); }
.conversation { display: grid; gap: 22px; }
.message-list { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--cloud); }
.message-bubble { max-width: 78%; padding: 16px 18px; border-radius: 16px 16px 16px 4px; background: var(--white); box-shadow: var(--shadow-card); }
.message-bubble.mine { justify-self: end; border-radius: 16px 16px 4px 16px; color: var(--white); background: var(--bridge-indigo); }
.message-bubble p { margin: 5px 0; }
.message-bubble small { opacity: .72; }
.message-compose { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.message-compose .btn { justify-self: end; }
.verification-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 24px; align-items: start; }
.verification-history { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.verification-history article { display: grid; gap: 6px; padding: 17px 0; border-top: 1px solid var(--line); }
.admin-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.admin-kpis div, .admin-kpis a.admin-card-link { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.admin-kpis a.admin-card-link { text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.admin-kpis a.admin-card-link:hover { transform: translateY(-2px); border-color: var(--bridge-indigo); box-shadow: var(--shadow-soft); }
.admin-kpis a.admin-card-link:focus-visible { outline: 2px solid var(--bridge-indigo); outline-offset: 2px; }
.admin-kpis strong { font-size: 1.65rem; color: var(--ink); }
.admin-kpis span, .compact-record span, .compact-record small { color: var(--slate); }
.admin-links { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.admin-panel { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.admin-panel h2 { margin-bottom: 18px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.admin-row > div:first-child, .compact-record { display: grid; gap: 5px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.compact-record { padding: 13px 0; border-top: 1px solid var(--line); }

@media (max-width: 991.98px) {
  .admin-kpis { grid-template-columns: repeat(3, 1fr); }
  .verification-layout, .admin-grid { grid-template-columns: 1fr; }
  .demo-account-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
  .quote-decision-bar, .notification-item, .admin-row { align-items: flex-start; flex-direction: column; }
  .message-bubble { max-width: 92%; }
  .demo-account-grid { grid-template-columns: 1fr; }
  .demo-scenarios > div { grid-template-columns: 1fr; gap: 3px; }
}
/* Phase 4: quote-to-order */
.purchase-order-banner,.order-card{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;background:linear-gradient(120deg,#edf7f5,#f7fbff);border:1px solid #b9ddd6;border-radius:18px;padding:1rem 1.2rem;margin-bottom:1.25rem}
.purchase-order-banner>i{font-size:1.6rem;color:#087d6b}.purchase-order-banner div{display:grid;flex:1}.purchase-order-banner span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#4c6d69}.purchase-order-banner strong{color:#183f3a}.purchase-order-banner b{font-size:.9rem;color:#087d6b}
.quote-version-row{display:flex;justify-content:space-between;align-items:center;margin:.65rem 0;color:#667085;font-size:.82rem}.quote-version-row a{color:#3157a4;text-decoration:none}.pending-revision,.revision-needed{display:flex;gap:.55rem;align-items:flex-start;background:#fff8e7;color:#765414;border:1px solid #f0d58e;border-radius:12px;padding:.7rem .8rem;font-size:.84rem}.pending-revision span{display:grid}.revision-needed{display:inline-flex;margin-top:.5rem}
.revision-request-form,.revision-history{border-top:1px solid #e6ebf2;margin-top:.8rem;padding-top:.75rem}.revision-request-form summary,.revision-history summary{cursor:pointer;font-weight:700;color:#3157a4}.revision-request-form form{display:grid;gap:.65rem;margin-top:.7rem}.revision-request-form textarea,.order-action-card textarea,.order-action-card input,.order-action-card select,.order-cancel textarea{width:100%;border:1px solid #d3dbea;border-radius:10px;padding:.7rem}.revision-history>div{display:grid;padding:.6rem 0;border-bottom:1px solid #edf0f5}.revision-history span{font-size:.78rem;color:#778194}.revision-history p{margin:.25rem 0 0}
.revision-request-banner{display:flex;gap:1rem;align-items:flex-start;background:#fff8e7;border:1px solid #f0d58e;border-radius:18px;padding:1rem 1.2rem;margin-bottom:1.25rem}.revision-request-banner>i{font-size:1.5rem;color:#9c711a}.revision-request-banner p{margin:.2rem 0}.revision-request-banner small{color:#806f4a}
.quote-history-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.order-list-page{min-height:50vh}.order-card-grid{display:grid;gap:.85rem}.order-card{margin:0;background:#fff;border-color:#dfe5ef;transition:.2s ease;box-shadow:0 7px 25px rgba(22,41,76,.04)}.order-card:hover{border-color:#89a7dd;transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,41,76,.09)}.order-card>div:first-child{display:grid;gap:.25rem;flex:1}.order-card .status-pill{width:max-content}.order-card small{color:#778194}.order-value{display:grid;text-align:right}.order-value span{font-size:.8rem;color:#778194}.order-card>i{color:#6d7c97}
.order-command-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.order-command-bar>div{display:flex;gap:.5rem}.order-detail-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.8fr);gap:1.25rem;align-items:start}.order-sheet{margin:0}.po-lines{margin:1.2rem 0;border:1px solid #e2e7ef;border-radius:14px;overflow:hidden}.po-line{display:grid;grid-template-columns:2fr .75fr .75fr .75fr;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid #edf0f5;align-items:center}.po-line:last-child{border:0}.po-line-head{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;background:#f5f7fa;color:#667085;font-weight:700}.po-line span{display:grid}.po-line small{color:#778194}.po-totals{margin-left:auto;width:min(100%,360px)}.po-totals>div{display:flex;justify-content:space-between;padding:.3rem 0}.po-totals .grand{font-size:1.15rem;border-top:2px solid #263f75;margin-top:.4rem;padding-top:.7rem}.order-activity{display:grid;gap:1rem}.order-activity>h2{font-size:1.25rem}.order-timeline{display:grid}.order-timeline article{display:grid;grid-template-columns:30px 1fr;gap:.6rem;position:relative;padding-bottom:1rem}.order-timeline article:before{content:"";position:absolute;left:14px;top:28px;bottom:0;width:1px;background:#d8e0ec}.order-timeline article:last-child:before{display:none}.order-timeline i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#e7f4f1;color:#087d6b}.order-timeline div{display:grid}.order-timeline p{margin:.15rem 0}.order-timeline span,.order-timeline small{font-size:.78rem;color:#778194}.order-action-card{display:grid;gap:.7rem;border:1px solid #dfe5ef;border-radius:16px;padding:1rem;background:#fff}.order-action-card h3,.order-action-card p{margin:0}.order-action-card>div{display:flex;gap:.5rem}.order-cancel{font-size:.85rem}.order-cancel form{display:grid;gap:.55rem;margin-top:.5rem}
.analytics-kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:.65rem;margin-bottom:1.25rem}.analytics-kpis>div{display:grid;gap:.25rem;padding:1rem;background:#fff;border:1px solid #dfe5ef;border-radius:15px}.analytics-kpis span{font-size:.76rem;color:#69758a;text-transform:uppercase}.analytics-kpis strong{font-size:1.25rem;color:#213b7b}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.analytics-panel{background:#fff;border:1px solid #dfe5ef;border-radius:18px;padding:1.15rem}.analytics-panel h2{font-size:1.15rem;margin-bottom:1rem}.metric-bar{display:grid;gap:.3rem;margin:.7rem 0}.metric-bar>div{display:flex;justify-content:space-between;font-size:.85rem}.metric-bar>i{display:block;height:7px;border-radius:10px;background:linear-gradient(90deg,#213b7b,#2ca58d)}.compact-order{display:flex;justify-content:space-between;gap:.7rem;padding:.75rem 0;border-bottom:1px solid #edf0f5;text-decoration:none;color:inherit}.compact-order>span{display:grid}.compact-order small{color:#778194}
@media(max-width:991px){.order-detail-grid,.analytics-grid{grid-template-columns:1fr}.analytics-kpis{grid-template-columns:repeat(3,1fr)}.vendor-subnav{overflow-x:auto;flex-wrap:nowrap}.vendor-subnav a{white-space:nowrap}}
@media(max-width:640px){.analytics-kpis{grid-template-columns:repeat(2,1fr)}.po-line{grid-template-columns:1.4fr .7fr}.po-line span:nth-child(n+3),.po-line-head span:nth-child(n+3){display:none}.order-command-bar{align-items:flex-start;gap:.7rem}.order-command-bar>div{display:grid}.purchase-order-banner b{display:none}.order-card{align-items:flex-start}.order-value{display:none}}

/* Phase 4.1: supplier directory paging */
.supplier-filter-bar { grid-template-columns: minmax(250px, 1.25fr) minmax(190px, .85fr) minmax(170px, .65fr) auto; }
.directory-pagination { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.directory-pagination > a,
.directory-pagination > .pagination-disabled,
.pagination-pages a,
.pagination-pages span { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--bridge-indigo); font-size: .76rem; font-weight: 800; text-decoration: none; }
.directory-pagination a:hover { border-color: var(--bridge-indigo); background: var(--sky-light); }
.directory-pagination > .pagination-disabled { color: var(--slate); background: var(--cloud); opacity: .55; }
.pagination-pages { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pagination-pages a,
.pagination-pages span { min-width: 40px; padding-right: 8px; padding-left: 8px; }
.pagination-pages .pagination-current { color: var(--white); border-color: var(--bridge-indigo); background: var(--bridge-indigo); }
.pagination-pages > span:not(.pagination-current) { min-width: auto; border-color: transparent; background: transparent; color: var(--slate); }
.catalog-results-line { display: flex; justify-content: space-between; gap: 16px; margin: -4px 0 16px; color: var(--slate); font-size: .76rem; }
.catalog-results-line a { color: var(--bridge-indigo); font-weight: 800; }
.catalog-pagination { margin-top: 22px; }

@media (max-width: 991.98px) {
  .supplier-filter-bar { grid-template-columns: 1fr 1fr; }
  .supplier-filter-bar button { grid-column: auto; }
}

@media (max-width: 640px) {
  .supplier-filter-bar { grid-template-columns: 1fr; }
  .directory-pagination { align-items: stretch; flex-wrap: wrap; }
  .directory-pagination > a,
  .directory-pagination > .pagination-disabled { flex: 1; }
  .pagination-pages { order: -1; width: 100%; }
  .catalog-results-line { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* Phase 4.1: incomplete supplier profile experience */
.supplier-profile-copy { min-width: 0; }
.supplier-primary-cta { width: fit-content; margin-top: 18px; }
.supplier-sourcing-empty { display: grid; grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 32px; border: 1px solid #cbd8ea; border-radius: 20px; background: linear-gradient(135deg, #f5f8fd, #f1fbf8); }
.supplier-sourcing-empty .sourcing-icon { display: grid; width: 60px; height: 60px; place-items: center; color: var(--sea-green); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-soft); font-size: 1.55rem; }
.supplier-sourcing-empty h3 { margin: 0 0 8px; font-size: 1.3rem; }
.supplier-sourcing-empty p { max-width: 720px; margin: 0; color: var(--slate); }
.supplier-sourcing-empty ul { display: grid; gap: 6px; margin: 18px 0; padding-left: 20px; color: var(--ink); font-size: .84rem; }
.sourcing-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.supplier-catalog-empty { grid-column: 1 / -1; }
.supplier-catalog-empty > i { color: var(--bridge-indigo); font-size: 1.8rem; }
.supplier-catalog-empty > div { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
@media(max-width:640px) {
  .supplier-primary-cta { width: 100%; }
  .supplier-sourcing-empty { grid-template-columns: 1fr; padding: 24px; }
  .sourcing-actions, .sourcing-actions .btn, .supplier-catalog-empty > div, .supplier-catalog-empty .btn { width: 100%; }
  .supplier-catalog-empty > div { flex-direction: column; }
}

/* Phase 5 monetization */
.rfq-credit-strip, .quote-credit-notice, .billing-current-card, .credit-disclaimer { display:flex; align-items:center; gap:1.25rem; padding:1.15rem 1.35rem; margin-bottom:1.5rem; border:1px solid rgba(49,176,173,.28); border-radius:18px; background:linear-gradient(135deg,rgba(49,176,173,.1),rgba(33,59,123,.06)); }
.rfq-credit-strip > div, .quote-credit-notice > div, .credit-balance, .admin-credit-balance { display:grid; }
.rfq-credit-strip strong, .credit-balance strong, .admin-credit-balance strong { color:var(--navy,#213b7b); font-size:2rem; line-height:1; }
.rfq-credit-strip p, .quote-credit-notice span, .credit-disclaimer p { margin:0; color:#546174; }
.rfq-credit-strip > a, .quote-credit-notice > a { margin-left:auto; font-weight:700; white-space:nowrap; }
.vendor-rfq-action small { color:#697386; }
.billing-heading { align-items:end; }
.credit-balance { min-width:180px; padding:1rem 1.25rem; border-radius:18px; background:#eef7f7; text-align:right; }
.billing-current-card { justify-content:space-between; background:#fff; border-color:#dce3ed; }
.billing-current-card h2 { margin:.25rem 0; }
.billing-current-card dl { display:flex; gap:2rem; margin:0; }
.billing-current-card dl div { display:grid; }
.billing-current-card dt { color:#6b7484; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.billing-current-card dd { margin:.25rem 0 0; font-weight:700; }
.compact-heading { margin:2rem 0 1rem; }
.plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.plan-card { display:grid; align-content:start; gap:.8rem; padding:1.4rem; border:1px solid #dce3ed; border-radius:20px; background:#fff; }
.plan-card.active { border:2px solid #31b0ad; box-shadow:0 14px 36px rgba(33,59,123,.1); }
.plan-card h3, .plan-card p { margin:0; }
.plan-price { color:#213b7b; font-size:1.35rem; font-weight:800; }
.pilot-activation { color:#2a7778; font-size:.85rem; font-weight:700; }
.billing-ledger { margin-top:2rem; }
.ledger-table td, .ledger-table th { vertical-align:middle; }
.credit-positive { color:#147a52; font-weight:800; }
.credit-negative { color:#a83b43; font-weight:800; }
.credit-disclaimer { margin-top:1.5rem; align-items:flex-start; }
.monetization-admin { display:grid; gap:1.25rem; }
.admin-search { display:flex; align-items:end; gap:1rem; }
.admin-search .field { flex:1; }
.monetization-supplier { padding:1.5rem; }
.monetization-supplier > header { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.monetization-supplier h2 { margin:.4rem 0 .15rem; }
.monetization-supplier header p { margin:0; color:#667085; }
.admin-credit-balance { text-align:right; min-width:120px; }
.monetization-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; margin:1.25rem 0; }
.monetization-stats div { display:grid; padding:.85rem; border-radius:14px; background:#f5f7fb; }
.monetization-stats span { color:#687386; font-size:.78rem; }
.recent-credit { padding:.8rem 1rem; border-radius:12px; background:#f7fafc; }
.monetization-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.admin-action-card { padding:1rem; border:1px solid #dfe5ee; border-radius:16px; }
.admin-action-card h3 { font-size:1rem; margin-bottom:.8rem; }
.quote-credit-notice { align-items:flex-start; }
.quote-credit-notice > div { flex:1; }
@media(max-width:991px) { .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .monetization-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .monetization-actions { grid-template-columns:1fr; } }
@media(max-width:640px) { .rfq-credit-strip, .quote-credit-notice, .billing-current-card, .billing-current-card dl, .credit-disclaimer { align-items:stretch; flex-direction:column; } .rfq-credit-strip > a, .quote-credit-notice > a { margin-left:0; } .billing-heading { align-items:stretch; } .credit-balance, .admin-credit-balance { text-align:left; } .plan-grid, .monetization-stats { grid-template-columns:1fr; } .monetization-supplier > header { flex-direction:column; } }

/* Supplier plan management */
.billing-workspace { padding-bottom: 80px; }
.billing-workspace .page-context-nav { margin-top: 22px; }
.billing-workspace .mini-label { color: var(--bridge-indigo); }
.billing-notice { display: flex; align-items: center; gap: 10px; margin: 18px 0; border-color: rgb(75 181 169 / 35%); border-radius: 14px; background: #eef9f7; color: var(--ink); }
.billing-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); gap: 40px; align-items: center; overflow: hidden; padding: 44px; border-radius: 28px; background: linear-gradient(128deg, var(--bridge-indigo-dark), var(--bridge-indigo) 68%, #2c518e); box-shadow: 0 22px 54px rgb(33 59 123 / 18%); }
.billing-hero::after { content: ""; position: absolute; right: -105px; bottom: -135px; width: 320px; height: 320px; border: 48px solid rgb(141 202 244 / 10%); border-radius: 50%; pointer-events: none; }
.billing-hero-copy, .billing-balance-card { position: relative; z-index: 1; }
.billing-hero .eyebrow { margin-bottom: 13px; color: var(--sky-light); }
.billing-hero h1 { margin: 0; color: var(--white); font-size: clamp(2.35rem, 4vw, 3.75rem); }
.billing-hero-copy > p { max-width: 720px; margin: 18px 0 0; color: #d9e4f6; font-size: 1.05rem; }
.billing-trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 25px; color: #d9e4f6; font-size: .8rem; font-weight: 750; }
.billing-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.billing-trust-row i { color: var(--pale-sky); font-size: 1rem; }
.billing-balance-card { display: grid; min-height: 240px; align-content: center; justify-items: start; padding: 28px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 22px; background: rgb(255 255 255 / 95%); box-shadow: 0 18px 45px rgb(14 31 68 / 24%); }
.billing-balance-card > span { color: var(--slate); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.billing-balance-card > strong { margin-top: 6px; color: var(--bridge-indigo); font-size: 4.2rem; line-height: .95; letter-spacing: -.07em; }
.billing-balance-card > p { margin: 5px 0 0; color: var(--ink); font-weight: 850; }
.billing-balance-card > small { margin: 9px 0 18px; color: var(--slate); line-height: 1.45; }
.billing-account-summary { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: 34px; align-items: center; margin-top: 20px; padding: 24px 28px; border-color: var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); }
.current-plan-identity > div { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.current-plan-identity h2 { margin: 0; font-size: 1.8rem; }
.current-plan-identity p { margin: 7px 0 0; color: var(--slate); font-size: .88rem; }
.billing-account-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.billing-account-summary dl div { min-height: 68px; align-content: center; padding: 0 22px; border-left: 1px solid var(--line); }
.billing-account-summary dd { color: var(--ink); font-size: 1rem; }
.billing-account-summary dd span { display: block; color: var(--slate); font-size: .76rem; font-weight: 650; }
.plan-request-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; padding: 20px 22px; border: 1px solid; border-radius: 18px; }
.plan-request-status.pending { border-color: #d9c98e; background: #fffaf0; }
.plan-request-status.declined { border-color: #e8c5c8; background: #fff7f7; }
.plan-request-status.approved { border-color: rgb(75 181 169 / 45%); background: #effaf7; }
.plan-request-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--white); color: var(--bridge-indigo); font-size: 1.2rem; box-shadow: 0 8px 20px rgb(24 35 63 / 8%); }
.plan-request-status h2 { margin: 3px 0 5px; font-size: 1.25rem; }
.plan-request-status p, .plan-request-status blockquote { margin: 0; color: var(--slate); font-size: .88rem; }
.plan-request-status blockquote { margin-top: 8px; font-style: italic; }
.billing-plan-section { margin-top: 42px; }
.billing-plan-section > .section-heading, .ledger-heading { align-items: end; }
.billing-plan-section > .section-heading > p, .ledger-heading > p { max-width: 525px; margin: 0; color: var(--slate); font-size: .9rem; }
.billing-plan-section .section-heading h2, .ledger-heading h2 { margin: 3px 0 0; font-size: clamp(1.65rem, 2.8vw, 2.35rem); }
.plan-choice-grid { gap: 14px; }
.plan-card { position: relative; min-height: 360px; gap: 0; padding: 22px; border-color: var(--line); border-radius: 20px; box-shadow: 0 9px 24px rgb(33 59 123 / 5%); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.plan-choice { cursor: pointer; }
.plan-choice:not(.active):hover { z-index: 1; transform: translateY(-5px); border-color: var(--pale-sky); box-shadow: 0 18px 40px rgb(33 59 123 / 12%); }
.plan-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.plan-choice:focus-within { outline: 3px solid var(--pale-sky); outline-offset: 3px; }
.plan-choice:has(input:checked) { transform: translateY(-5px); border: 2px solid var(--bridge-indigo); background: #f6f9ff; box-shadow: 0 18px 42px rgb(33 59 123 / 16%); }
.plan-card.active { border: 2px solid var(--sea-green); background: linear-gradient(155deg, #f4fcfa, var(--white) 62%); box-shadow: 0 14px 36px rgb(33 59 123 / 10%); cursor: default; }
.plan-card.requested { border: 2px solid #c8a94e; background: #fffbf0; }
.plan-choice-topline { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 17px; }
.plan-radio { width: 18px; height: 18px; border: 2px solid #a8b5c8; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--white); transition: border-color .18s ease, background-color .18s ease; }
.plan-choice:has(input:checked) .plan-radio { border-color: var(--bridge-indigo); background: var(--bridge-indigo); }
.plan-card.active .plan-radio { visibility: hidden; }
.plan-select-label { color: var(--slate); font-size: .74rem; font-weight: 800; }
.plan-name { color: var(--ink); font-size: 1.2rem; font-weight: 850; }
.plan-price { display: block; margin-top: 8px; color: var(--bridge-indigo); font-size: 1.75rem; font-weight: 850; letter-spacing: -.04em; }
.plan-price small { margin-left: 4px; color: var(--slate); font-size: .72rem; font-weight: 700; letter-spacing: 0; }
.plan-credit-count { display: block; margin-top: 18px; color: var(--ink); font-size: .82rem; font-weight: 750; }
.plan-credit-count strong { margin-right: 3px; font-size: 1.25rem; }
.plan-volume { display: block; margin-top: 2px; color: var(--slate); font-size: .74rem; }
.plan-description { display: block; min-height: 65px; margin: 17px 0 12px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--slate); font-size: .82rem; line-height: 1.5; }
.plan-feature { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #4e5f78; font-size: .75rem; font-weight: 700; }
.plan-feature i { color: #248b78; }
.plan-request-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--cloud); }
.plan-request-panel label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .84rem; font-weight: 800; }
.plan-request-panel label span { color: var(--slate); font-weight: 650; }
.plan-request-panel textarea { width: 100%; resize: vertical; border: 1px solid #c9d5e5; border-radius: 12px; padding: 11px 13px; background: var(--white); color: var(--ink); }
.plan-request-panel small { display: block; margin-top: 6px; color: var(--slate); }
.plan-request-submit { display: grid; justify-items: end; gap: 11px; min-width: 250px; }
.plan-request-submit > span { color: var(--slate); font-size: .75rem; font-weight: 700; }
.plan-request-submit > span i { margin-right: 4px; color: var(--sea-green); }
.billing-ledger { overflow: hidden; margin-top: 42px; padding: 26px; border-radius: 22px; }
.ledger-heading { display: flex; margin: 0 0 20px; }
.ledger-table { margin-bottom: 0; }
.ledger-table thead th { padding: 11px 13px; border-bottom-color: var(--line); color: var(--slate); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.ledger-table tbody td { padding: 14px 13px; border-color: #edf1f6; color: #47556d; font-size: .84rem; }
.admin-plan-request { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: 24px; margin: 18px 0; padding: 18px; border: 1px solid #d9c98e; border-radius: 17px; background: #fffaf0; }
.admin-plan-request-copy h3 { margin: 8px 0 5px; font-size: 1.15rem; }
.admin-plan-request-copy p, .admin-plan-request-copy blockquote { margin: 0; color: var(--slate); font-size: .82rem; }
.admin-plan-request-copy blockquote { margin-top: 8px; font-style: italic; }
.admin-plan-review-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 12px; }
.admin-plan-review-form { display: grid; align-content: end; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.admin-plan-review-form .field { margin: 0; }
.admin-plan-review-form .field label { font-size: .75rem; }
.admin-plan-review-form .field label span { color: var(--slate); font-weight: 600; }

@media(max-width:991px) {
  .billing-hero { grid-template-columns: 1fr; }
  .billing-balance-card { min-height: 0; }
  .billing-account-summary { grid-template-columns: 1fr; }
  .billing-account-summary dl { width: 100%; }
  .billing-account-summary dl div:first-child { border-left: 0; }
  .plan-request-panel, .admin-plan-request { grid-template-columns: 1fr; }
  .admin-plan-review-actions { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .billing-hero { gap: 28px; padding: 30px 22px; border-radius: 22px; }
  .billing-balance-card { padding: 22px; }
  .billing-balance-card > strong { font-size: 3.5rem; }
  .billing-account-summary { padding: 22px; }
  .billing-account-summary dl { grid-template-columns: 1fr; }
  .billing-account-summary dl div { padding: 13px 0; border-top: 1px solid var(--line); border-left: 0; }
  .plan-request-status { grid-template-columns: auto minmax(0, 1fr); }
  .plan-request-status form { grid-column: 1 / -1; }
  .billing-plan-section > .section-heading, .ledger-heading { align-items: flex-start; flex-direction: column; }
  .plan-card { min-height: 0; }
  .plan-description { min-height: 0; }
  .plan-request-panel { padding: 18px; }
  .plan-request-submit { justify-items: stretch; min-width: 0; }
  .plan-request-submit > span { text-align: left; }
  .admin-plan-review-actions { grid-template-columns: 1fr; }
  .billing-ledger { padding: 20px 16px; }
}

/* Quotation workspace and contextual navigation */
.page-context-nav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 24px 0 18px; color: var(--slate); font-size: .76rem; font-weight: 800; }
.page-context-nav:first-child { margin-top: 0; }
.page-context-nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--bridge-indigo); }
.page-context-nav a:hover { color: var(--bridge-indigo-dark); }
.page-context-nav > span:last-child { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
.confirmation .page-context-nav { justify-content: flex-start; margin-bottom: 28px; text-align: left; }
.quote-workspace { padding-top: 34px; padding-bottom: 88px; }
.quote-workspace .page-context-nav { margin-top: 22px; }
.quote-workspace-title { align-items: center; margin-top: 24px; }
.quote-workspace-title h1 { max-width: 780px; }
.quote-page-status { display: grid; min-width: 205px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--cloud); text-align: right; }
.quote-page-status span, .quote-page-status small { color: var(--slate); font-size: .67rem; }
.quote-page-status span { letter-spacing: .08em; text-transform: uppercase; }
.quote-page-status strong { color: var(--bridge-indigo); font-size: 1.05rem; }
.quote-form-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 24px; }
.quote-form-layout > *, .quote-form-card, .quote-form-card fieldset, .quote-line-editor, .quote-line-card { min-width: 0; }
.quote-form-card { overflow: hidden; padding: 30px; }
.quote-form-card fieldset { width: 100%; }
.quote-line-editor { clear: both; width: 100%; grid-template-columns: minmax(0, 1fr); }
.quote-line-card { width: 100%; padding: 22px; background: var(--cloud); }
.quote-line-card .field-grid { width: 100%; }
.quote-line-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 13px 15px; border: 1px solid rgb(75 181 169 / 24%); border-radius: 11px; background: var(--white); }
.quote-line-total span { color: var(--slate); font-size: .72rem; font-weight: 800; }
.quote-line-total output { color: var(--bridge-indigo); font-size: .92rem; font-weight: 800; }
.quote-commercial-fieldset { clear: both; margin: 0 0 32px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #f8fbfe; }
.quote-commercial-fieldset legend { width: auto; margin-bottom: 22px; padding-right: 12px; background: #f8fbfe; }
#quoteSubtotal { display: flex; min-height: 48px; align-items: center; }
.quote-total-preview { margin-top: 8px; padding: 19px 20px; }
.quote-total-preview > span { display: grid; gap: 2px; }
.quote-total-preview small { color: #c6d7ec; font-size: .65rem; font-weight: 600; }
.quote-total-preview strong { text-align: right; }
.quote-total-preview strong.is-negative { color: #ffd0d5; }
.quote-context-aside { top: 22px; }
.quote-submit-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quote-submit-actions .submit-btn { width: auto; margin: 0; }

@media (min-width: 992px) {
  .vendor-subnav a { gap: 6px; padding-right: 12px; padding-left: 12px; font-size: .74rem; }
}

@media (max-width: 991.98px) {
  .quote-form-layout { grid-template-columns: 1fr; }
  .quote-context-aside { position: static; }
  .quote-page-status { text-align: left; }
}

@media (max-width: 640px) {
  .quote-form-card { padding: 22px; }
  .quote-line-card, .quote-commercial-fieldset { padding: 17px; }
  .quote-submit-actions { align-items: stretch; flex-direction: column-reverse; }
  .quote-submit-actions .btn, .quote-submit-actions .submit-btn { width: 100%; }
  .quote-total-preview { align-items: flex-start; flex-direction: column; gap: 9px; }
  .quote-total-preview strong { text-align: left; }
}
