:root {
  --commercial-navy: #122448;
  --commercial-blue: #2b417a;
  --commercial-sky: #eaf0fb;
  --commercial-gold: #d9b65a;
  --commercial-ink: #17213b;
  --commercial-muted: #6c758a;
  --commercial-border: #e2e7f0;
}

html { scroll-behavior: smooth; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy small { margin-top: 4px; color: var(--commercial-muted); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.stage-label, .demo-chip, .policy-chip, .portal-secure { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: #eef3fc; color: var(--commercial-blue); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.stage-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d99a1f; box-shadow: 0 0 0 4px rgba(217,154,31,.12); }

/* Landing */
.commercial-landing { background: #f7f8fb; }
.commercial-topbar { position: relative; }
.commercial-hero { width: min(1280px, 92vw); margin: 0 auto; min-height: 700px; padding: 70px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr); align-items: center; gap: clamp(38px, 6vw, 86px); }
.commercial-hero-copy { padding-inline-start: 18px; }
.commercial-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--commercial-blue); font-size: .8rem; font-weight: 900; }
.commercial-kicker i { width: 28px; height: 2px; background: var(--commercial-gold); }
.commercial-hero h1 { margin: 22px 0; color: var(--commercial-navy); font-size: clamp(2.7rem, 5.6vw, 5.7rem); line-height: 1.08; letter-spacing: -.04em; }
.commercial-hero h1 em { color: var(--commercial-blue); font-style: normal; }
.commercial-hero-copy > p { max-width: 690px; margin: 0; color: var(--commercial-muted); font-size: 1.06rem; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.commercial-primary, .commercial-secondary { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 14px; font-size: .9rem; font-weight: 900; text-decoration: none; }
.commercial-primary { background: var(--commercial-navy); color: #fff; box-shadow: 0 16px 38px rgba(18,36,72,.2); }
.commercial-primary:hover { background: var(--commercial-blue); }
.commercial-secondary { background: #fff; color: var(--commercial-blue); border: 1px solid var(--commercial-border); }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; color: var(--commercial-muted); font-size: .75rem; font-weight: 750; }
.trust-row span::before { content: "✓"; margin-left: 6px; color: #08785c; font-weight: 950; }

.command-preview { position: relative; padding: 25px; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; background: rgba(255,255,255,.86); box-shadow: 0 36px 90px rgba(18,36,72,.14); backdrop-filter: blur(20px); }
.command-preview::before { content: ""; position: absolute; inset: -30px -35px auto auto; width: 170px; height: 170px; border-radius: 50%; background: #dbe5f8; filter: blur(2px); z-index: -1; }
.command-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--commercial-border); }
.command-preview-head > div { display: grid; gap: 4px; }
.command-preview-head small { color: var(--commercial-muted); font-size: .7rem; }
.command-preview-head strong { color: var(--commercial-navy); font-size: 1.1rem; }
.healthy-chip { padding: 7px 10px; border-radius: 999px; background: #e7f7f1; color: #08785c; font-size: .7rem; font-weight: 900; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.preview-metrics article { min-height: 112px; display: grid; align-content: center; gap: 4px; padding: 15px; border-radius: 16px; background: #f5f7fb; }
.preview-metrics span, .preview-metrics small { color: var(--commercial-muted); font-size: .68rem; }
.preview-metrics strong { color: var(--commercial-navy); font-size: 1.9rem; }
.preview-products { display: grid; gap: 9px; }
.preview-products article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--commercial-border); border-radius: 15px; }
.preview-products article > div { display: grid; gap: 3px; }
.preview-products small { color: var(--commercial-muted); font-size: .65rem; }
.product-avatar, .service-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-weight: 900; }
.product-avatar.navy { background: var(--commercial-navy); }
.product-avatar.blue { background: #526aa2; }
.product-avatar.sand { color: #735814; background: #f4e5b4; }

.platform-story { padding: 90px max(4vw, calc((100vw - 1240px) / 2)); background: #fff; }
.section-intro { max-width: 720px; margin-bottom: 34px; }
.section-intro h2, .readiness-strip h2 { margin: 9px 0 12px; color: var(--commercial-navy); font-size: clamp(2rem, 4vw, 3.3rem); }
.section-intro p, .readiness-strip p { color: var(--commercial-muted); line-height: 1.8; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.capability-grid article { min-height: 210px; padding: 25px; border: 1px solid var(--commercial-border); border-radius: 21px; background: linear-gradient(180deg, #fff, #fafbfe); }
.capability-grid article > span { color: var(--commercial-gold); font-size: .75rem; font-weight: 950; }
.capability-grid h3 { margin: 30px 0 10px; color: var(--commercial-navy); }
.capability-grid p { margin: 0; color: var(--commercial-muted); font-size: .83rem; line-height: 1.75; }
.readiness-strip { width: min(1240px, 92vw); margin: 70px auto; padding: 38px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 28px; border-radius: 25px; background: var(--commercial-navy); color: #fff; }
.readiness-strip h2 { color: #fff; font-size: 1.7rem; }
.readiness-strip p { margin: 0; color: #cbd6ed; font-size: .82rem; }
.readiness-strip a { padding: 13px 18px; border-radius: 12px; background: var(--commercial-gold); color: var(--commercial-navy); font-weight: 900; text-decoration: none; white-space: nowrap; }

/* Owner workspace */
.workspace-body, .account-workspace-body { background: #f5f7fb; }
.workspace-topbar { min-height: 68px; position: sticky; }
.workspace-layout { width: min(1480px, 96vw); margin: 0 auto; display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 22px; padding: 24px 0 70px; }
.workspace-sidebar, .customer-sidebar { position: sticky; top: 92px; height: fit-content; padding: 20px 14px; border: 1px solid var(--commercial-border); border-radius: 21px; background: #fff; box-shadow: 0 14px 42px rgba(18,36,72,.05); }
.sidebar-title { display: grid; gap: 4px; padding: 7px 12px 18px; border-bottom: 1px solid var(--commercial-border); }
.sidebar-title small { color: var(--commercial-muted); }
.sidebar-title strong { color: var(--commercial-navy); }
.workspace-sidebar nav { display: grid; gap: 5px; padding: 16px 0; }
.workspace-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; color: var(--commercial-muted); font-size: .8rem; font-weight: 780; text-decoration: none; }
.workspace-sidebar nav a:hover, .workspace-sidebar nav a.active { color: var(--commercial-navy); background: var(--commercial-sky); }
.workspace-sidebar nav span { width: 22px; text-align: center; color: var(--commercial-blue); font-size: 1rem; }
.sidebar-note { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff8e7; }
.sidebar-note strong { color: #745915; font-size: .75rem; }
.sidebar-note p { margin: 6px 0 0; color: #8b7440; font-size: .68rem; line-height: 1.6; }
.workspace-content { min-width: 0; }
.commercial-page-heading { margin: 7px 0 22px; }
.commercial-page-heading h1 { color: var(--commercial-navy); font-size: clamp(1.9rem, 3vw, 2.8rem); }
.control-banner { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid #d4e9df; border-radius: 16px; background: #f2fbf7; }
.control-banner > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.control-banner > div:first-child small { grid-column: 2; color: #5b806f; }
.healthy-orb { grid-row: 1 / 3; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: #0a8d68; box-shadow: 0 0 0 6px rgba(10,141,104,.12); }
.integration-state { display: flex; flex-wrap: wrap; gap: 7px; }
.integration-state span { padding: 6px 9px; border-radius: 9px; background: #fff; color: var(--commercial-muted); font-size: .67rem; }
.integration-state b { color: #a66400; }
.metrics-commercial .metric-card { border-radius: 17px; box-shadow: none; }
.metrics-commercial .metric-card strong { font-size: 2rem; }
.commercial-panel { margin-bottom: 16px; scroll-margin-top: 90px; box-shadow: 0 10px 34px rgba(18,36,72,.045); }
.commercial-rule { display: flex; gap: 16px; margin: -4px 0 18px; padding: 13px 15px; border-radius: 13px; background: #f5f7fb; }
.commercial-rule strong { color: var(--commercial-navy); white-space: nowrap; }
.commercial-rule p { margin: 0; color: var(--commercial-muted); font-size: .75rem; line-height: 1.6; }
.policy-chip { background: #edf7f3; color: #08785c; }
.demo-chip { background: #fff7df; color: #805f0e; }
.website-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.website-pipeline article { position: relative; min-height: 135px; display: grid; align-content: start; gap: 7px; padding: 16px; border: 1px solid var(--commercial-border); border-radius: 15px; background: #fafbfe; }
.website-pipeline article > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #e6eaf3; color: var(--commercial-muted); font-size: .72rem; font-weight: 900; }
.website-pipeline article.done > span { color: #fff; background: #08785c; }
.website-pipeline strong { margin-top: 5px; color: var(--commercial-navy); font-size: .8rem; }
.website-pipeline small { color: var(--commercial-muted); font-size: .67rem; line-height: 1.5; }

.compact-admin-form { margin-bottom: 22px; padding: 18px; border: 1px solid var(--commercial-border); border-radius: 16px; background: #fafbfe; }
.entitlement-checklist { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; border: 1px solid var(--commercial-border); border-radius: 13px; }
.entitlement-checklist legend { color: var(--commercial-navy); font-size: .78rem; font-weight: 850; }
.entitlement-checklist label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; }
.entitlement-checklist input { width: auto; min-height: auto; }
.admin-list, .assets-customer-list { display: grid; gap: 12px; }
.admin-record, .assets-customer-card { padding: 18px; border: 1px solid var(--commercial-border); border-radius: 17px; background: linear-gradient(180deg, #fff, #fafbfe); }
.admin-record-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; }
.admin-record-main small { grid-column: 2 / -1; color: var(--commercial-muted); }
.admin-record-main code, .detail-matrix code { overflow-wrap: anywhere; color: var(--commercial-blue); font-size: .72rem; }
.inline-details, .detail-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 15px 0; }
.inline-details div, .detail-matrix div { padding: 10px; border-radius: 11px; background: #f3f6fb; }
.inline-details dt, .detail-matrix dt { color: var(--commercial-muted); font-size: .65rem; }
.inline-details dd, .detail-matrix dd { margin: 4px 0 0; font-size: .76rem; font-weight: 850; }
.feature-pills, .record-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.feature-pills span { padding: 5px 8px; border-radius: 999px; color: var(--commercial-blue); background: var(--commercial-sky); font: 700 .65rem monospace; }
.record-actions { margin-top: 14px; }
.record-actions button, .record-actions a { min-height: 36px; padding: 7px 11px; border: 1px solid var(--commercial-border); border-radius: 9px; color: var(--commercial-blue); background: #fff; font: inherit; font-size: .7rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.record-actions button:hover, .record-actions a:hover { border-color: var(--commercial-blue); }
.assets-customer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.assets-customer-head > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 9px; }
.assets-customer-head h3 { margin: 0; color: var(--commercial-navy); }
.assets-customer-head small { grid-column: 2; color: var(--commercial-muted); }
.record-error { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #b42318; background: #fff0ee; font-size: .7rem; }
.assets-customer-card details, #assets-integration details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--commercial-border); }
.assets-customer-card summary, #assets-integration summary { color: var(--commercial-blue); font-size: .75rem; font-weight: 850; cursor: pointer; }
.audit-list { display: grid; gap: 6px; margin-top: 10px; }
.audit-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 10px; border-radius: 9px; background: #f5f7fb; color: var(--commercial-muted); font-size: .68rem; }
.audit-list strong { color: var(--commercial-navy); }
.compact-button { min-height: 38px; padding: 0 14px; }
.integration-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.integration-metrics article { display: grid; gap: 5px; padding: 15px; border-radius: 13px; background: #f3f6fb; }
.integration-metrics span { color: var(--commercial-muted); font-size: .68rem; }
.integration-metrics strong { color: var(--commercial-navy); font-size: 1.45rem; }
.portfolio-boundary { margin: -4px 0 18px; color: var(--commercial-muted); font-size: .76rem; line-height: 1.7; }
.product-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-inventory button { min-height: 154px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; align-items: center; gap: 5px 12px; padding: 18px; border: 1px solid var(--commercial-border); border-radius: 18px; color: var(--commercial-ink); background: linear-gradient(180deg, #fff, #fafbfe); text-align: right; font: inherit; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.product-inventory button:hover, .product-inventory button.selected { transform: translateY(-2px); border-color: #aebddd; box-shadow: 0 14px 30px rgba(18,36,72,.09); }
.product-inventory button > span:first-child { grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--commercial-navy); font-weight: 950; }
.product-inventory button strong { color: var(--commercial-navy); font-size: .9rem; }
.product-inventory button small { color: var(--commercial-muted); font-size: .68rem; }
.product-inventory button .product-counts { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.product-counts i, .readiness-chip { padding: 5px 8px; border-radius: 999px; color: var(--commercial-blue); background: var(--commercial-sky); font-size: .63rem; font-style: normal; font-weight: 800; }
.readiness-chip.connected { color: #08785c; background: #e7f7f1; }
.readiness-chip.preparing { color: #805f0e; background: #fff7df; }
.readiness-chip.not_connected { color: #8d4c14; background: #fff0e7; }
.product-control-view[hidden], .product-legacy-details[hidden] { display: none; }
.product-view-metrics, .connector-inventory, .ownership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.product-view-metrics article, .connector-inventory article, .ownership-grid article { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--commercial-border); border-radius: 14px; background: #fafbfe; }
.product-view-metrics span, .connector-inventory span, .ownership-grid span { color: var(--commercial-muted); font-size: .68rem; line-height: 1.5; }
.product-view-metrics strong, .connector-inventory strong, .ownership-grid strong { color: var(--commercial-navy); }
.product-control-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.product-control-columns > section { padding: 16px; border: 1px solid var(--commercial-border); border-radius: 15px; }
.product-control-columns h3 { margin: 0 0 12px; color: var(--commercial-navy); font-size: .9rem; }
.product-legacy-details { margin-bottom: 18px; border: 1px solid #cdd8eb; border-radius: 20px; background: #eef3fc; overflow: hidden; scroll-margin-top: 90px; }
.product-legacy-details > summary { display: flex; justify-content: space-between; gap: 14px; padding: 18px 21px; color: var(--commercial-navy); font-weight: 900; cursor: pointer; }
.product-legacy-details > summary small { color: var(--commercial-muted); font-weight: 650; }
.product-legacy-body { padding: 0 12px 12px; }
.product-legacy-body .commercial-panel { box-shadow: none; }
.assets-renewal-row { grid-template-columns: 46px minmax(160px, 1fr) auto 72px; }
.status-badge.scheduled { color: #7a5a00; background: #fff7df; }
.status-badge.suspended, .status-badge.canceled, .status-badge.retired { color: #b42318; background: #fff0ee; }
.status-badge.draft { color: var(--commercial-blue); background: var(--commercial-sky); }

/* Customer portal */
.customer-portal-shell { width: min(1280px, 94vw); margin: 0 auto; display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 24px; padding: 28px 0 70px; }
.customer-profile { display: flex; align-items: center; gap: 10px; padding: 8px 8px 18px; border-bottom: 1px solid var(--commercial-border); }
.customer-profile > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--commercial-navy); font-weight: 900; }
.customer-profile > div { display: grid; gap: 3px; }
.customer-profile small { color: var(--commercial-muted); font-size: .64rem; }
.customer-sidebar nav { display: grid; gap: 5px; padding: 16px 0; }
.customer-sidebar nav a, .back-to-platform { padding: 10px 12px; border-radius: 10px; color: var(--commercial-muted); font-size: .78rem; font-weight: 760; text-decoration: none; }
.customer-sidebar nav a.active { color: var(--commercial-navy); background: var(--commercial-sky); }
.back-to-platform { display: block; margin-top: 16px; border-top: 1px solid var(--commercial-border); border-radius: 0; }
.customer-portal-content { min-width: 0; }
.portal-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid #eadcad; border-radius: 14px; background: #fff9e9; }
.portal-notice strong { color: #745915; white-space: nowrap; }
.portal-notice p { margin: 0; color: #8b7440; font-size: .73rem; }
.commercial-subscription { box-shadow: 0 14px 42px rgba(18,36,72,.06); }
.portal-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 16px; }
.portal-services article { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 17px; border: 1px solid var(--commercial-border); border-radius: 17px; background: #fff; }
.portal-services article > div { display: grid; gap: 4px; }
.portal-services small { color: var(--commercial-muted); font-size: .66rem; line-height: 1.5; }
.portal-services b { grid-column: 2; color: var(--commercial-blue); font-size: .66rem; }
.service-symbol { color: var(--commercial-blue); background: var(--commercial-sky); }
.commercial-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.commercial-notice .outline-button { min-width: 150px; }

@media (max-width: 980px) {
  .commercial-hero { grid-template-columns: 1fr; min-height: auto; }
  .commercial-hero-copy { padding: 0; }
  .command-preview { width: min(680px, 100%); }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .readiness-strip { grid-template-columns: 1fr; }
  .workspace-layout, .customer-portal-shell { grid-template-columns: 1fr; }
  .workspace-sidebar, .customer-sidebar { position: relative; top: auto; }
  .workspace-sidebar nav { display: flex; overflow-x: auto; }
  .workspace-sidebar nav a { white-space: nowrap; }
  .sidebar-note, .customer-sidebar { display: none; }
  .website-pipeline, .portal-services { grid-template-columns: repeat(2, 1fr); }
  .integration-metrics { grid-template-columns: repeat(2, 1fr); }
  .product-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-control-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .brand-copy small, .commercial-topbar .stage-label, .workspace-topbar .stage-label { display: none; }
  .commercial-hero { width: min(100% - 28px, 1280px); padding: 44px 0; }
  .commercial-hero h1 { font-size: 2.55rem; }
  .commercial-hero-copy > p { font-size: .92rem; }
  .hero-actions a { width: 100%; }
  .preview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-metrics article { min-height: 94px; padding: 10px; }
  .preview-metrics strong { font-size: 1.45rem; }
  .preview-products article { grid-template-columns: auto 1fr; }
  .preview-products .status-badge { grid-column: 2; justify-self: start; }
  .platform-story { padding: 58px 18px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 170px; }
  .readiness-strip { padding: 25px; }
  .workspace-layout, .customer-portal-shell { width: min(100% - 20px, 1480px); padding-top: 18px; }
  .workspace-sidebar { padding: 8px; overflow: hidden; }
  .sidebar-title { display: none; }
  .workspace-sidebar nav { padding: 0; }
  .workspace-sidebar nav a { padding: 9px; font-size: .72rem; }
  .commercial-page-heading { align-items: stretch; }
  .control-banner { align-items: flex-start; flex-direction: column; }
  .integration-state { width: 100%; }
  .website-pipeline, .portal-services { grid-template-columns: 1fr; }
  .portal-notice, .commercial-notice { align-items: stretch; flex-direction: column; }
  .commercial-rule { flex-direction: column; }
  .admin-record-main { grid-template-columns: auto 1fr; }
  .admin-record-main code, .admin-record-main small { grid-column: 2; }
  .integration-metrics { grid-template-columns: 1fr 1fr; }
  .product-inventory { grid-template-columns: 1fr; }
  .product-legacy-details > summary { flex-direction: column; }
}