:root {
  --sr-ink: #15191E;
  --sr-muted: #5B6470;
  --sr-line: #D7DEE7;
  --sr-bg: #ffffff;
  --sr-soft: #F8FAFC;
  --sr-panel: #ffffff;
  --sr-red: #E53935;
  --sr-red-dark: #C62828;
  --sr-red-soft: #FFF5F5;
  --sr-red-hover: #FFF1F1;
  --sr-table-head: #F8FAFC;
  --sr-shadow: 0 14px 36px rgba(31, 31, 31, 0.08);
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; background: var(--sr-soft) !important; color: var(--sr-ink) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; }
a { color: var(--sr-red-dark); text-decoration: none; }

/* Global app color tokens. These catch login/register before dashboard-only selectors apply. */
.text-gradient {
  background-image: linear-gradient(90deg, var(--sr-red-dark), var(--sr-red)) !important;
}
.btn-primary,
button.btn-primary {
  background: var(--sr-red) !important;
  background-image: none !important;
  border-color: var(--sr-red) !important;
  color: #fff !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--sr-red-dark) !important;
  border-color: var(--sr-red-dark) !important;
}
.text-primary-300,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-primary-800,
.text-primary-900 {
  color: var(--sr-red-dark) !important;
}
.bg-primary-50,
.bg-primary-100 {
  background-color: var(--sr-red-soft) !important;
}
.bg-primary-200,
.bg-primary-300 {
  background-color: #ffe1e3 !important;
}
.bg-primary-400,
.bg-primary-500,
.bg-primary-600,
.bg-primary-700 {
  background-color: var(--sr-red) !important;
}
.border-primary-300,
.border-primary-400,
.border-primary-500,
.border-primary-600,
.border-primary-700 {
  border-color: var(--sr-red) !important;
}
.from-primary-50,
.from-primary-100,
.via-primary-50,
.via-primary-100,
.to-primary-50,
.to-primary-100 {
  --tw-gradient-from: var(--sr-red-soft) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255,244,245,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-primary-400,
.from-primary-500,
.from-primary-600 {
  --tw-gradient-from: var(--sr-red) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(223,31,45,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-primary-300,
.via-primary-400,
.via-primary-500,
.via-primary-600 {
  --tw-gradient-to: rgba(223,31,45,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--sr-red) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.via-primary-50\/30 {
  --tw-gradient-to: rgba(255,244,245,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), rgba(255,244,245,.52) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.bg-gradient-to-br.from-gray-50.via-primary-50\/30.to-gray-100 {
  background-image: linear-gradient(to bottom right, #f9fafb, rgba(255,244,245,.52), #f3f4f6) !important;
}
.to-primary-400,
.to-primary-500,
.to-primary-600,
.to-primary-700 {
  --tw-gradient-to: var(--sr-red-dark) var(--tw-gradient-to-position) !important;
}
.bg-primary-300\/10 { background-color: rgba(223,31,45,.08) !important; }
.bg-primary-400\/20 { background-color: rgba(223,31,45,.14) !important; }
.bg-primary-500\/15 { background-color: rgba(223,31,45,.10) !important; }
.bg-\[linear-gradient\(rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\] {
  background-image: linear-gradient(rgba(223,31,45,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(223,31,45,.025) 1px, transparent 1px) !important;
}

/* Public red/white RedFlow pages */
body.sr-public { background: #fff !important; }
.sr-header { position: sticky; top: 0; z-index: 30; height: 66px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--sr-line); backdrop-filter: saturate(160%) blur(10px); }
.sr-nav { max-width: 1180px; height: 66px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.sr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sr-ink); font-size: 18px; font-weight: 800; white-space: nowrap; }
.sr-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block; }
.sr-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--sr-red); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.sr-nav-links { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.nav-link { color: #4b5563; font-size: 14px; font-weight: 650; padding: 8px 12px; border-radius: 6px; }
.nav-link:hover, .nav-link.active { color: var(--sr-red-dark); background: var(--sr-red-soft); }
.sr-actions, .hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--sr-line); border-radius: 6px; background: #fff; color: var(--sr-ink); font-size: 14px; font-weight: 720; white-space: nowrap; }
.sr-btn:hover { border-color: #f4b4b8; color: var(--sr-red-dark); }
.sr-btn.sr-primary { background: var(--sr-red); border-color: var(--sr-red); color: #fff; }
.sr-btn.sr-primary:hover { background: var(--sr-red-dark); border-color: var(--sr-red-dark); color: #fff; }
.eyebrow { color: var(--sr-red); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: 0; }
.home-hero { max-width: 1180px; margin: 0 auto; padding: 78px 24px 56px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 56px; align-items: center; }
.home-copy h1, .doc-hero h1 { margin: 10px 0 0; color: var(--sr-ink); font-size: 46px; line-height: 1.1; font-weight: 860; letter-spacing: 0; }
.home-copy p, .doc-hero p { margin: 20px 0 0; color: #4b5563; font-size: 17px; line-height: 1.85; max-width: 720px; }
.home-copy .hero-actions { margin-top: 30px; }
.status-panel { border: 1px solid var(--sr-line); border-top: 4px solid var(--sr-red); border-radius: 8px; background: #fff; box-shadow: var(--sr-shadow); padding: 22px; }
.panel-title { color: var(--sr-ink); font-size: 15px; font-weight: 830; margin-bottom: 14px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid #f0f2f5; }
.status-row span { color: var(--sr-muted); font-size: 14px; }
.status-row strong { color: var(--sr-red-dark); font-size: 14px; }
.status-panel code { display: block; margin-top: 18px; padding: 14px; border-radius: 6px; background: #2b2b2b; color: #fff; font-size: 12px; overflow: auto; }
.home-band { border-top: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); background: #F8FAFC; }
.home-grid { max-width: 1180px; margin: 0 auto; padding: 42px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-grid article, .doc-card, .doc-section { background: #fff; border: 1px solid var(--sr-line); border-radius: 8px; padding: 22px; }
.home-grid h2, .legal-strip h2, .doc-section h2 { margin: 0; color: var(--sr-ink); font-size: 18px; font-weight: 820; }
.home-grid p, .legal-strip p, .doc-section p, .doc-card p { margin: 10px 0 0; color: var(--sr-muted); font-size: 14px; line-height: 1.75; }
.legal-strip { max-width: 1180px; margin: 0 auto; padding: 34px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.doc-main { max-width: 980px; margin: 0 auto; padding: 58px 24px 54px; }
.doc-hero { padding: 0 0 30px; border-bottom: 1px solid var(--sr-line); }
.doc-meta { margin-top: 18px; color: var(--sr-muted); font-size: 13px; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.doc-card { display: block; transition: border-color .15s ease, transform .15s ease; }
.doc-card:hover { border-color: #f1a2a8; transform: translateY(-1px); }
.doc-card span { color: var(--sr-red-dark); font-weight: 820; }
.doc-content { display: grid; gap: 16px; margin-top: 24px; }
.sr-footer { border-top: 1px solid var(--sr-line); background: #fff; min-height: 58px; padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; color: var(--sr-muted); font-size: 13px; }
.sr-footer a { color: #4b5563; font-weight: 650; }
.sr-footer a:hover { color: var(--sr-red-dark); }

/* Injected dashboard theme */
.n-layout, .n-layout-scroll-container, .n-layout-content, .n-layout-header { background: var(--sr-soft) !important; }
.n-layout-header { min-height: 56px !important; padding: 0 22px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--sr-line) !important; box-shadow: 0 1px 0 rgba(31,31,31,.04) !important; backdrop-filter: saturate(150%) blur(10px); }
.n-layout-sider { background: #fff !important; border-right: 1px solid var(--sr-line) !important; box-shadow: 8px 0 24px rgba(31,31,31,.05) !important; }
.n-layout-sider::before { content: "RedFlow API"; height: 58px; display: flex; align-items: center; padding: 0 22px 0 66px; color: var(--sr-ink); font-size: 18px; font-weight: 860; border-bottom: 1px solid var(--sr-line); background-color: #fff; background-image: url("/redflow-logo.png"); background-repeat: no-repeat; background-position: 22px center; background-size: 34px 34px; position: relative; }
.n-layout-sider::after { content: "api.redflowtech.com"; display: block; margin: 12px 16px 16px; padding: 10px 12px; border: 1px solid #ffe1e3; border-radius: 8px; color: var(--sr-red-dark); background: var(--sr-red-soft); font-size: 12px; font-weight: 750; }
.n-layout-sider .n-menu, .n-layout-sider .n-menu-item, .n-layout-sider .n-menu-item-content, .n-layout-sider .n-menu-item-content-header, .n-layout-sider .n-menu-item-content__icon, .n-layout-sider .n-menu-item-content__arrow { background: transparent !important; color: #374151 !important; }
.n-menu-item-content { min-height: 38px !important; margin: 3px 10px !important; border-radius: 7px !important; font-weight: 600 !important; }
.n-menu-item-content:hover { background: var(--sr-red-hover) !important; color: var(--sr-red-dark) !important; }
.n-menu-item-content--selected { background: var(--sr-red-soft) !important; color: var(--sr-red-dark) !important; box-shadow: inset 3px 0 0 var(--sr-red) !important; }
.n-layout-sider .n-menu-item-content:hover .n-menu-item-content-header, .n-layout-sider .n-menu-item-content:hover .n-menu-item-content__icon, .n-layout-sider .n-menu-item-content:hover .n-menu-item-content__arrow, .n-layout-sider .n-menu-item-content--selected .n-menu-item-content-header, .n-layout-sider .n-menu-item-content--selected .n-menu-item-content__icon, .n-layout-sider .n-menu-item-content--selected .n-menu-item-content__arrow { color: var(--sr-red-dark) !important; }
.n-card, .n-modal, .n-drawer, .n-popover, .n-dropdown-menu { border: 1px solid var(--sr-line) !important; border-radius: 8px !important; box-shadow: 0 12px 28px rgba(31,31,31,.06) !important; }
.n-card { background: var(--sr-panel) !important; }
.n-card-header, .n-card__header, .n-modal-header, .n-drawer-header { color: var(--sr-ink) !important; font-weight: 760 !important; border-bottom: 1px solid rgba(236,239,243,.9); }
.n-button { border-radius: 6px !important; font-weight: 700 !important; letter-spacing: 0 !important; box-shadow: none !important; }
.n-button--primary-type, .n-button--info-type, .n-button--success-type { --n-color: var(--sr-red) !important; --n-color-hover: var(--sr-red-dark) !important; --n-color-pressed: #8f0f17 !important; --n-color-focus: var(--sr-red-dark) !important; --n-border: 1px solid var(--sr-red) !important; --n-border-hover: 1px solid var(--sr-red-dark) !important; --n-border-pressed: 1px solid #8f0f17 !important; --n-border-focus: 1px solid var(--sr-red-dark) !important; }
.n-input, .n-input-wrapper, .n-base-selection, .n-date-picker, .n-input-number { border-radius: 6px !important; }
.n-input, .n-base-selection { --n-border: 1px solid var(--sr-line) !important; --n-border-hover: 1px solid #f1a2a8 !important; --n-border-focus: 1px solid var(--sr-red) !important; --n-box-shadow-focus: 0 0 0 2px rgba(215,25,32,.10) !important; }
.n-tabs-tab--active, .n-tabs-tab:hover { color: var(--sr-red-dark) !important; }
.n-tabs-bar { background: var(--sr-red) !important; }
.n-data-table, .n-data-table-table, .n-data-table-th, .n-data-table-td { background: var(--sr-panel) !important; }
.n-data-table-th { background: var(--sr-table-head) !important; color: var(--sr-muted) !important; font-weight: 760 !important; border-bottom: 1px solid var(--sr-line) !important; }
.n-data-table-td { border-bottom: 1px solid #f1f3f6 !important; }
.n-data-table-tr:hover .n-data-table-td { background: var(--sr-red-hover) !important; }
.n-pagination { padding-top: 12px !important; }
.n-breadcrumb, .n-page-header, .n-page-header__title { color: var(--sr-ink) !important; }
.n-page-header__title { font-weight: 820 !important; }
.n-tag { border-radius: 999px !important; font-weight: 700 !important; border-width: 1px !important; }
.n-alert, .n-message, .n-notification, .n-dialog { border-radius: 8px !important; }
.n-switch { --n-rail-color-active: var(--sr-red) !important; }
.n-progress-graph-line-fill, .n-progress-graph-circle-fill { stroke: var(--sr-red) !important; }

/* Tailwind/dashboard fallback selectors */
body:has(a[href="/dashboard"]), body:has(a[href="/admin/dashboard"]) { background: var(--sr-soft) !important; }
body:has(a[href="/dashboard"]) aside, body:has(a[href="/admin/dashboard"]) aside { background: #fff !important; border-right: 1px solid var(--sr-line) !important; }
body:has(a[href="/dashboard"]) aside a, body:has(a[href="/admin/dashboard"]) aside a { color: #374151 !important; border-radius: 7px !important; }
body:has(a[href="/dashboard"]) aside a:hover, body:has(a[href="/admin/dashboard"]) aside a:hover { background: var(--sr-red-hover) !important; color: var(--sr-red-dark) !important; }
body:has(a[href="/dashboard"]) aside a[aria-current="page"], body:has(a[href="/admin/dashboard"]) aside a[aria-current="page"], body:has(a[href="/dashboard"]) aside a.router-link-active, body:has(a[href="/admin/dashboard"]) aside a.router-link-active { background: var(--sr-red-soft) !important; color: var(--sr-red-dark) !important; box-shadow: inset 3px 0 0 var(--sr-red) !important; }
body:has(a[href="/dashboard"]) button, body:has(a[href="/admin/dashboard"]) button { border-radius: 6px !important; }
body:has(a[href="/dashboard"]) .bg-green-500, body:has(a[href="/dashboard"]) .bg-emerald-500, body:has(a[href="/admin/dashboard"]) .bg-green-500, body:has(a[href="/admin/dashboard"]) .bg-emerald-500 { background-color: var(--sr-red) !important; }
body:has(a[href="/dashboard"]) .text-green-600, body:has(a[href="/dashboard"]) .text-emerald-600, body:has(a[href="/admin/dashboard"]) .text-green-600, body:has(a[href="/admin/dashboard"]) .text-emerald-600 { color: var(--sr-red-dark) !important; }
body:has(a[href="/dashboard"]) .border-green-500, body:has(a[href="/dashboard"]) .border-emerald-500, body:has(a[href="/admin/dashboard"]) .border-green-500, body:has(a[href="/admin/dashboard"]) .border-emerald-500 { border-color: var(--sr-red) !important; }
body:has(a[href="/dashboard"]) .bg-teal-50, body:has(a[href="/dashboard"]) .bg-cyan-50, body:has(a[href="/dashboard"]) .bg-emerald-50, body:has(a[href="/admin/dashboard"]) .bg-teal-50, body:has(a[href="/admin/dashboard"]) .bg-cyan-50, body:has(a[href="/admin/dashboard"]) .bg-emerald-50 { background-color: var(--sr-red-soft) !important; }
body:has(a[href="/dashboard"]) .bg-teal-500, body:has(a[href="/dashboard"]) .bg-cyan-500, body:has(a[href="/dashboard"]) .bg-emerald-500, body:has(a[href="/admin/dashboard"]) .bg-teal-500, body:has(a[href="/admin/dashboard"]) .bg-cyan-500, body:has(a[href="/admin/dashboard"]) .bg-emerald-500 { background-color: var(--sr-red) !important; }
body:has(a[href="/dashboard"]) .text-teal-600, body:has(a[href="/dashboard"]) .text-cyan-600, body:has(a[href="/dashboard"]) .text-emerald-600, body:has(a[href="/admin/dashboard"]) .text-teal-600, body:has(a[href="/admin/dashboard"]) .text-cyan-600, body:has(a[href="/admin/dashboard"]) .text-emerald-600 { color: var(--sr-red-dark) !important; }
body:has(a[href="/dashboard"]) .hover\:bg-red-50:hover, body:has(a[href="/admin/dashboard"]) .hover\:bg-red-50:hover { background-color: var(--sr-red-hover) !important; }
body:has(a[href="/dashboard"]) .hover\:text-red-600:hover, body:has(a[href="/admin/dashboard"]) .hover\:text-red-600:hover { color: var(--sr-red-dark) !important; }

/* Current Tailwind dashboard implementation */
body:has(a[href="/dashboard"]) .btn-primary,
body:has(a[href="/admin/dashboard"]) .btn-primary,
body:has(a[href="/dashboard"]) .bg-primary-500,
body:has(a[href="/dashboard"]) .bg-primary-600,
body:has(a[href="/admin/dashboard"]) .bg-primary-500,
body:has(a[href="/admin/dashboard"]) .bg-primary-600 {
  background-color: var(--sr-red) !important;
  border-color: var(--sr-red) !important;
  color: #fff !important;
}
body:has(a[href="/dashboard"]) .btn-primary:hover,
body:has(a[href="/admin/dashboard"]) .btn-primary:hover,
body:has(a[href="/dashboard"]) .hover\:bg-primary-600:hover,
body:has(a[href="/admin/dashboard"]) .hover\:bg-primary-600:hover {
  background-color: var(--sr-red-dark) !important;
  border-color: var(--sr-red-dark) !important;
}
body:has(a[href="/dashboard"]) .bg-primary-50,
body:has(a[href="/admin/dashboard"]) .bg-primary-50,
body:has(a[href="/dashboard"]) .bg-primary-100,
body:has(a[href="/admin/dashboard"]) .bg-primary-100 {
  background-color: var(--sr-red-soft) !important;
}
body:has(a[href="/dashboard"]) .text-primary-400,
body:has(a[href="/dashboard"]) .text-primary-500,
body:has(a[href="/dashboard"]) .text-primary-600,
body:has(a[href="/dashboard"]) .text-primary-700,
body:has(a[href="/dashboard"]) .text-primary-800,
body:has(a[href="/dashboard"]) .text-primary-900,
body:has(a[href="/admin/dashboard"]) .text-primary-400,
body:has(a[href="/admin/dashboard"]) .text-primary-500,
body:has(a[href="/admin/dashboard"]) .text-primary-600,
body:has(a[href="/admin/dashboard"]) .text-primary-700,
body:has(a[href="/admin/dashboard"]) .text-primary-800,
body:has(a[href="/admin/dashboard"]) .text-primary-900 {
  color: var(--sr-red-dark) !important;
}
body:has(a[href="/dashboard"]) .border-primary-500,
body:has(a[href="/dashboard"]) .border-primary-600,
body:has(a[href="/dashboard"]) .border-primary-700,
body:has(a[href="/admin/dashboard"]) .border-primary-500,
body:has(a[href="/admin/dashboard"]) .border-primary-600,
body:has(a[href="/admin/dashboard"]) .border-primary-700 {
  border-color: var(--sr-red) !important;
}
body:has(a[href="/dashboard"]) .bg-primary-200,
body:has(a[href="/dashboard"]) .bg-primary-300,
body:has(a[href="/admin/dashboard"]) .bg-primary-200,
body:has(a[href="/admin/dashboard"]) .bg-primary-300 {
  background-color: #ffe1e3 !important;
}
body:has(a[href="/dashboard"]),
body:has(a[href="/admin/dashboard"]) {
  --color-primary-50: 255 244 245 !important;
  --color-primary-100: 255 225 227 !important;
  --color-primary-200: 255 199 203 !important;
  --color-primary-300: 252 151 159 !important;
  --color-primary-400: 244 89 101 !important;
  --color-primary-500: 223 31 45 !important;
  --color-primary-600: 185 21 33 !important;
  --color-primary-700: 145 18 29 !important;
  --color-primary-800: 116 21 29 !important;
  --color-primary-900: 96 20 27 !important;
}
body:has(a[href="/dashboard"]) .ring-primary-500,
body:has(a[href="/admin/dashboard"]) .ring-primary-500 {
  --tw-ring-color: rgba(223,31,45,.28) !important;
}
body:has(a[href="/dashboard"]) .sidebar-link:hover,
body:has(a[href="/admin/dashboard"]) .sidebar-link:hover {
  background-color: var(--sr-red-hover) !important;
  color: var(--sr-red-dark) !important;
}
body:has(a[href="/dashboard"]) .sidebar-link.active,
body:has(a[href="/admin/dashboard"]) .sidebar-link.active,
body:has(a[href="/dashboard"]) .sidebar-link.router-link-active,
body:has(a[href="/admin/dashboard"]) .sidebar-link.router-link-active {
  background-color: var(--sr-red-soft) !important;
  color: var(--sr-red-dark) !important;
  box-shadow: inset 3px 0 0 var(--sr-red) !important;
}

/* RedFlow first-run tour styling */
.driver-popover.theme-tour-popover,
.driver-popover {
  border: 1px solid #ffe1e3 !important;
  border-top: 4px solid var(--sr-red) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(31, 31, 31, .16) !important;
  color: var(--sr-ink) !important;
}
.driver-popover-title {
  color: var(--sr-ink) !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
}
.driver-popover-description {
  color: #4b5563 !important;
  line-height: 1.75 !important;
}
.driver-popover-progress-text {
  color: var(--sr-muted) !important;
}
.driver-popover-prev-btn,
.driver-popover-close-btn {
  border-color: var(--sr-line) !important;
  color: #4b5563 !important;
  background: #fff !important;
}
.driver-popover-next-btn {
  border-color: var(--sr-red) !important;
  background: var(--sr-red) !important;
  color: #fff !important;
}
.driver-popover-next-btn:hover {
  border-color: var(--sr-red-dark) !important;
  background: var(--sr-red-dark) !important;
}
.driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-color: #fff !important;
}

/* Broad dashboard theme guard: neutralize upstream teal/green utility classes. */
body:has(a[href="/dashboard"]) [class*="text-teal-"],
body:has(a[href="/dashboard"]) [class*="text-cyan-"],
body:has(a[href="/dashboard"]) [class*="text-emerald-"],
body:has(a[href="/dashboard"]) [class*="text-green-"],
body:has(a[href="/dashboard"]) [class*="text-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="text-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="text-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="text-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="text-green-"],
body:has(a[href="/admin/dashboard"]) [class*="text-primary-"] {
  color: var(--sr-red-dark) !important;
}

body:has(a[href="/dashboard"]) [class*="bg-teal-"],
body:has(a[href="/dashboard"]) [class*="bg-cyan-"],
body:has(a[href="/dashboard"]) [class*="bg-emerald-"],
body:has(a[href="/dashboard"]) [class*="bg-green-"],
body:has(a[href="/dashboard"]) [class*="bg-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="bg-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="bg-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="bg-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="bg-green-"],
body:has(a[href="/admin/dashboard"]) [class*="bg-primary-"] {
  background-color: var(--sr-red-soft) !important;
}

body:has(a[href="/dashboard"]) .btn-primary,
body:has(a[href="/dashboard"]) button[class*="bg-teal-"],
body:has(a[href="/dashboard"]) button[class*="bg-cyan-"],
body:has(a[href="/dashboard"]) button[class*="bg-emerald-"],
body:has(a[href="/dashboard"]) button[class*="bg-green-"],
body:has(a[href="/dashboard"]) button[class*="bg-primary-"],
body:has(a[href="/admin/dashboard"]) .btn-primary,
body:has(a[href="/admin/dashboard"]) button[class*="bg-teal-"],
body:has(a[href="/admin/dashboard"]) button[class*="bg-cyan-"],
body:has(a[href="/admin/dashboard"]) button[class*="bg-emerald-"],
body:has(a[href="/admin/dashboard"]) button[class*="bg-green-"],
body:has(a[href="/admin/dashboard"]) button[class*="bg-primary-"] {
  background-color: var(--sr-red) !important;
  background-image: none !important;
  border-color: var(--sr-red) !important;
  color: #fff !important;
}

body:has(a[href="/dashboard"]) [class*="border-teal-"],
body:has(a[href="/dashboard"]) [class*="border-cyan-"],
body:has(a[href="/dashboard"]) [class*="border-emerald-"],
body:has(a[href="/dashboard"]) [class*="border-green-"],
body:has(a[href="/dashboard"]) [class*="border-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="border-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="border-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="border-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="border-green-"],
body:has(a[href="/admin/dashboard"]) [class*="border-primary-"] {
  border-color: var(--sr-red) !important;
}

body:has(a[href="/dashboard"]) [class*="ring-teal-"],
body:has(a[href="/dashboard"]) [class*="ring-cyan-"],
body:has(a[href="/dashboard"]) [class*="ring-emerald-"],
body:has(a[href="/dashboard"]) [class*="ring-green-"],
body:has(a[href="/dashboard"]) [class*="ring-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="ring-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="ring-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="ring-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="ring-green-"],
body:has(a[href="/admin/dashboard"]) [class*="ring-primary-"] {
  --tw-ring-color: rgba(223,31,45,.28) !important;
}

body:has(a[href="/dashboard"]) [class*="from-teal-"],
body:has(a[href="/dashboard"]) [class*="from-cyan-"],
body:has(a[href="/dashboard"]) [class*="from-emerald-"],
body:has(a[href="/dashboard"]) [class*="from-green-"],
body:has(a[href="/dashboard"]) [class*="from-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="from-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="from-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="from-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="from-green-"],
body:has(a[href="/admin/dashboard"]) [class*="from-primary-"] {
  --tw-gradient-from: var(--sr-red) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(223,31,45,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body:has(a[href="/dashboard"]) [class*="via-teal-"],
body:has(a[href="/dashboard"]) [class*="via-cyan-"],
body:has(a[href="/dashboard"]) [class*="via-emerald-"],
body:has(a[href="/dashboard"]) [class*="via-green-"],
body:has(a[href="/dashboard"]) [class*="via-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="via-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="via-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="via-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="via-green-"],
body:has(a[href="/admin/dashboard"]) [class*="via-primary-"] {
  --tw-gradient-stops: var(--tw-gradient-from), var(--sr-red) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body:has(a[href="/dashboard"]) [class*="to-teal-"],
body:has(a[href="/dashboard"]) [class*="to-cyan-"],
body:has(a[href="/dashboard"]) [class*="to-emerald-"],
body:has(a[href="/dashboard"]) [class*="to-green-"],
body:has(a[href="/dashboard"]) [class*="to-primary-"],
body:has(a[href="/admin/dashboard"]) [class*="to-teal-"],
body:has(a[href="/admin/dashboard"]) [class*="to-cyan-"],
body:has(a[href="/admin/dashboard"]) [class*="to-emerald-"],
body:has(a[href="/admin/dashboard"]) [class*="to-green-"],
body:has(a[href="/admin/dashboard"]) [class*="to-primary-"] {
  --tw-gradient-to: var(--sr-red-dark) var(--tw-gradient-to-position) !important;
}

/* Global upstream theme override. Sub2API uses teal/green primary utilities across pages, modals, tabs and hover states. */
[class*="text-teal-"],
[class*="text-cyan-"],
[class*="text-emerald-"],
[class*="text-green-"],
[class*="text-primary-"] {
  color: var(--sr-red-dark) !important;
}

[class*="bg-teal-"],
[class*="bg-cyan-"],
[class*="bg-emerald-"],
[class*="bg-green-"],
[class*="bg-primary-"] {
  background-color: var(--sr-red-soft) !important;
}

button[class*="bg-teal-"],
button[class*="bg-cyan-"],
button[class*="bg-emerald-"],
button[class*="bg-green-"],
button[class*="bg-primary-"],
a[class*="bg-teal-"],
a[class*="bg-cyan-"],
a[class*="bg-emerald-"],
a[class*="bg-green-"],
a[class*="bg-primary-"],
.btn-primary {
  background-color: var(--sr-red) !important;
  background-image: none !important;
  border-color: var(--sr-red) !important;
  color: #fff !important;
}

button[class*="bg-teal-"]:hover,
button[class*="bg-cyan-"]:hover,
button[class*="bg-emerald-"]:hover,
button[class*="bg-green-"]:hover,
button[class*="bg-primary-"]:hover,
a[class*="bg-teal-"]:hover,
a[class*="bg-cyan-"]:hover,
a[class*="bg-emerald-"]:hover,
a[class*="bg-green-"]:hover,
a[class*="bg-primary-"]:hover,
.btn-primary:hover {
  background-color: var(--sr-red-dark) !important;
  border-color: var(--sr-red-dark) !important;
  color: #fff !important;
}

[class*="border-teal-"],
[class*="border-cyan-"],
[class*="border-emerald-"],
[class*="border-green-"],
[class*="border-primary-"] {
  border-color: var(--sr-red) !important;
}

[class*="ring-teal-"],
[class*="ring-cyan-"],
[class*="ring-emerald-"],
[class*="ring-green-"],
[class*="ring-primary-"] {
  --tw-ring-color: rgba(223,31,45,.28) !important;
}

[class*="from-teal-"],
[class*="from-cyan-"],
[class*="from-emerald-"],
[class*="from-green-"],
[class*="from-primary-"] {
  --tw-gradient-from: var(--sr-red) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(223,31,45,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[class*="via-teal-"],
[class*="via-cyan-"],
[class*="via-emerald-"],
[class*="via-green-"],
[class*="via-primary-"] {
  --tw-gradient-stops: var(--tw-gradient-from), var(--sr-red) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

[class*="to-teal-"],
[class*="to-cyan-"],
[class*="to-emerald-"],
[class*="to-green-"],
[class*="to-primary-"] {
  --tw-gradient-to: var(--sr-red-dark) var(--tw-gradient-to-position) !important;
}

[class*="hover:bg-teal-"]:hover,
[class*="hover:bg-cyan-"]:hover,
[class*="hover:bg-emerald-"]:hover,
[class*="hover:bg-green-"]:hover,
[class*="hover:bg-primary-"]:hover {
  background-color: var(--sr-red-hover) !important;
}

[class*="hover:text-teal-"]:hover,
[class*="hover:text-cyan-"]:hover,
[class*="hover:text-emerald-"]:hover,
[class*="hover:text-green-"]:hover,
[class*="hover:text-primary-"]:hover {
  color: var(--sr-red-dark) !important;
}

/* Upstream decorative layers still carry the old teal brand color through background-image. */
.navigation-progress-bar {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(244, 89, 101, .68) 20%,
    var(--sr-red) 50%,
    rgba(244, 89, 101, .68) 80%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

.bg-mesh-gradient,
[class*="bg-mesh-gradient"] {
  background-image:
    radial-gradient(at 40% 20%, rgba(223, 31, 45, .055) 0, rgba(255, 255, 255, 0) 48%),
    radial-gradient(at 80% 0%, rgba(31, 31, 31, .035) 0, rgba(255, 255, 255, 0) 46%),
    radial-gradient(at 0% 50%, rgba(223, 31, 45, .035) 0, rgba(255, 255, 255, 0) 46%) !important;
}

code,
.code,
td code,
[class*="code"] {
  color: #374151 !important;
}

.status-panel code {
  color: #fff !important;
}

/* Enterprise product pages */
.sr-public {
  background: var(--sr-soft) !important;
}

.sr-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sr-red);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.hero-enterprise {
  min-height: calc(100vh - 66px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 24px 46px;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
  gap: 46px;
  align-items: center;
}

.hero-enterprise h1 {
  margin: 14px 0 0;
  color: var(--sr-ink);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  font-weight: 820;
}

.hero-enterprise p {
  margin: 22px 0 0;
  max-width: 680px;
  color: var(--sr-muted);
  font-size: 17px;
  line-height: 1.75;
}

.trust-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--sr-line);
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.status-pill::before,
.trust-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sr-red);
}

.status-pill.healthy::before { background: #168A55; }
.status-pill.info::before { background: #0F9FB3; }
.status-pill.warn::before { background: #B7791F; }
.status-pill.failed::before { background: var(--sr-red-dark); }

.routing-matrix {
  position: relative;
  min-height: 540px;
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(21,25,30,.04) 1px, transparent 1px),
    linear-gradient(rgba(21,25,30,.04) 1px, transparent 1px),
    #fff;
  background-size: 38px 38px;
  box-shadow: var(--sr-shadow);
  overflow: hidden;
}

.matrix-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sr-line);
  background: rgba(255,255,255,.92);
}

.matrix-title {
  color: var(--sr-ink);
  font-size: 14px;
  font-weight: 850;
}

.matrix-live {
  color: #168A55;
  font-size: 12px;
  font-weight: 800;
}

.matrix-stage {
  position: absolute;
  inset: 54px 0 0;
}

.matrix-node {
  position: absolute;
  width: 148px;
  min-height: 62px;
  padding: 12px;
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(21,25,30,.06);
}

.matrix-node strong {
  display: block;
  color: var(--sr-ink);
  font-size: 13px;
  font-weight: 840;
}

.matrix-node span {
  display: block;
  margin-top: 5px;
  color: var(--sr-muted);
  font-size: 11px;
}

.matrix-node.app { left: 28px; top: 42px; }
.matrix-node.gateway { left: calc(50% - 74px); top: 132px; border-top: 3px solid var(--sr-red); }
.matrix-node.route { right: 34px; top: 42px; }
.matrix-node.usage { right: 40px; bottom: 122px; }
.matrix-node.audit { left: 44px; bottom: 122px; }
.matrix-node.fallback { left: calc(50% - 74px); bottom: 92px; }

.matrix-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--sr-red), transparent);
  opacity: .88;
}

.matrix-line.l1 { left: 176px; top: 112px; width: 180px; transform: rotate(25deg); }
.matrix-line.l2 { right: 174px; top: 113px; width: 170px; transform: rotate(-25deg); }
.matrix-line.l3 { left: 272px; bottom: 150px; width: 170px; transform: rotate(-24deg); }
.matrix-line.l4 { right: 176px; bottom: 148px; width: 170px; transform: rotate(24deg); }

.matrix-metrics {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.metric-tile {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: rgba(248,250,252,.92);
  padding: 10px;
}

.metric-tile span {
  color: var(--sr-muted);
  font-size: 11px;
  font-weight: 760;
}

.metric-tile strong {
  display: block;
  margin-top: 4px;
  color: var(--sr-ink);
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 16px;
}

.product-section {
  border-top: 1px solid var(--sr-line);
  background: #fff;
}

.product-section.alt {
  background: var(--sr-soft);
}

.section-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px;
}

.section-head {
  max-width: 760px;
  margin-bottom: 26px;
}

.section-head h2 {
  margin: 10px 0 0;
  color: var(--sr-ink);
  font-size: 38px;
  line-height: 1.15;
}

.section-head p {
  margin: 14px 0 0;
  color: var(--sr-muted);
  font-size: 16px;
  line-height: 1.7;
}

.capability-grid,
.scenario-grid,
.pricing-grid,
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card,
.scenario-card,
.pricing-card,
.status-card {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: #fff;
  padding: 20px;
}

.feature-card h3,
.scenario-card h3,
.pricing-card h3,
.status-card h3 {
  margin: 0;
  color: var(--sr-ink);
  font-size: 17px;
}

.feature-card p,
.scenario-card p,
.pricing-card p,
.status-card p {
  margin: 10px 0 0;
  color: var(--sr-muted);
  font-size: 14px;
  line-height: 1.68;
}

.console-preview {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sr-shadow);
}

.console-toolbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--sr-line);
}

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

.console-log {
  margin: 0 16px 16px;
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  overflow: hidden;
}

.log-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr .9fr .8fr .8fr;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid #EEF2F7;
  color: #374151;
  font-size: 13px;
}

.log-row:first-child {
  border-top: 0;
  background: #F8FAFC;
  color: var(--sr-muted);
  font-weight: 800;
}

.mono {
  font-family: "JetBrains Mono", "SF Mono", monospace;
}

.doc-code {
  margin-top: 18px;
  border-radius: 8px;
  background: #101316;
  color: #DDE3EA !important;
  padding: 18px;
  overflow: auto;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 13px;
  line-height: 1.7;
}

.doc-code code {
  color: #DDE3EA !important;
}

.contact-copy-card {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid #F0CDD0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fff7f7);
  box-shadow: 0 10px 24px rgba(21, 25, 30, .04);
}

.contact-copy-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.contact-copy-label {
  color: #6B7280;
  font-size: 12px;
  font-weight: 760;
}

.contact-copy-value {
  color: var(--sr-ink);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 820;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.contact-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 3px;
  padding: 2px 3px 2px 8px;
  border: 1px solid #E4E9F0;
  border-radius: 999px;
  background: #fff;
  color: var(--sr-ink);
  font-size: .94em;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 4px 12px rgba(21, 25, 30, .04);
}

.contact-copy-chip .contact-copy-label {
  color: #6B7280;
  font-size: inherit;
  font-weight: 760;
}

.contact-copy-chip .contact-copy-value {
  color: var(--sr-ink);
  font-size: inherit;
}

.contact-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 78px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #F0B4B9;
  border-radius: 7px;
  background: #fff;
  color: var(--sr-red-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.contact-copy-btn:hover {
  border-color: var(--sr-red);
  background: var(--sr-red-hover);
  color: #B71C1C;
  transform: translateY(-1px);
}

.contact-copy-btn:focus-visible {
  outline: 3px solid rgba(229, 57, 53, .18);
  outline-offset: 2px;
}

.contact-copy-btn.is-copied {
  border-color: #A7D7BD;
  background: #F0FFF6;
  color: #168A55;
}

.contact-copy-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.contact-copy-icon::before,
.contact-copy-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

.contact-copy-icon::before {
  left: 1px;
  top: 4px;
  opacity: .55;
}

.contact-copy-icon::after {
  left: 4px;
  top: 1px;
  background: currentColor;
  box-shadow: inset 0 0 0 999px #fff;
}

.contact-copy-chip .contact-copy-btn {
  min-width: auto;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
}

.contact-copy-chip .contact-copy-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  gap: 18px;
}

.contact-box {
  border: 1px solid var(--sr-line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 860px) {
  .sr-nav { padding: 0 16px; gap: 12px; }
  .sr-nav-links { display: none; }
  .home-hero { grid-template-columns: 1fr; padding: 46px 18px 34px; gap: 28px; }
  .hero-enterprise { grid-template-columns: 1fr; min-height: auto; padding: 42px 18px 34px; }
  .routing-matrix { min-height: 580px; }
  .matrix-node { width: 132px; }
  .matrix-node.app { left: 18px; top: 30px; }
  .matrix-node.route { right: 18px; top: 30px; }
  .matrix-node.gateway { top: 145px; }
  .matrix-node.audit { left: 18px; bottom: 168px; }
  .matrix-node.usage { right: 18px; bottom: 168px; }
  .matrix-node.fallback { bottom: 104px; }
  .matrix-line { display: none; }
  .matrix-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .capability-grid, .scenario-grid, .pricing-grid, .status-grid, .console-grid, .contact-panel { grid-template-columns: 1fr; }
  .section-inner { padding: 42px 18px; }
  .section-head h2 { font-size: 30px; }
  .log-row { grid-template-columns: 1fr; gap: 4px; }
  .home-copy h1, .doc-hero h1 { font-size: 34px; }
  .home-grid, .doc-grid { grid-template-columns: 1fr; }
  .legal-strip { flex-direction: column; align-items: flex-start; padding: 30px 18px; }
  .doc-main { padding: 42px 18px; }
  .contact-copy-card { align-items: stretch; flex-direction: column; }
  .contact-copy-card .contact-copy-btn { width: 100%; }
  .contact-copy-chip { white-space: normal; line-height: 1.4; }
}