@import url("matossites-brand.css");

:root {
  /* Compatibility aliases now point directly to the audited website token set. */
  --mss-bg: var(--ink);
  --mss-surface: var(--ink-2);
  --mss-surface-raised: var(--panel);
  --mss-line: var(--line);
  --mss-blue: var(--cobalt);
  --mss-cyan: var(--cobalt-light);
  --mss-violet: var(--cobalt); /* legacy alias; website brand has no violet token */
  --mss-text: var(--text);
  --mss-muted: var(--muted);
  --mss-success: var(--success);
  --mss-warning: var(--warning);
  --mss-sidebar-width: 292px;
  --mss-shell-gap: 16px;
  --mss-control-clearance: 12px;
  --mss-content-gap: 20px;
  --mss-card-padding: 20px;
  --mss-ease: 180ms cubic-bezier(.2,.8,.2,1);
  --mss-glow-rest: var(--backglow-blue-rest);
  --mss-glow-hover: var(--backglow-blue-hover);
}
body.mss-nav-collapsed { --mss-sidebar-width: 72px; }
* { box-sizing: border-box; }
html { min-width: 0; background: var(--mss-bg); }
body[data-deluxe-shell] { min-width: 0; min-height: 100vh; margin: 0; overflow-x: hidden; overflow-y: auto; background: var(--mss-bg); color: var(--mss-text); font: 15px/1.45 var(--sans); }
.mss-main h1,.mss-main h2,.mss-main h3,.shell h1,.shell h2,.shell h3 { font-family: var(--display); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.mss-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; gap: 2px; width: var(--mss-sidebar-width); height: 100dvh; overflow: hidden; padding: 8px 10px; background: #070b16f5; border-right: 1px solid var(--mss-line); box-shadow: 12px 0 34px #0004; }
.mss-sidebar a { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 38px; padding: 7px 12px; overflow: hidden; color: #c6d0df; border: 1px solid transparent; border-radius: 12px; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background var(--mss-ease), border-color var(--mss-ease), color var(--mss-ease), box-shadow var(--mss-ease); }
.mss-sidebar-disabled { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 34px; width: 100%; padding: 6px 10px; overflow: hidden; color: #5e6979 !important; background: transparent !important; border: 1px solid transparent; border-radius: var(--radius); box-shadow: none !important; cursor: not-allowed; font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; }
.mss-sidebar-disabled .mss-nav-icon { color: #5e6979; }
.mss-sidebar-disabled .mss-feature-state { margin-left: auto; color: #5e6979; font-size: .58rem; font-weight: 700; letter-spacing: .01em; }
.mss-sidebar a[data-nav-section-start="true"] { margin-top: 7px; border-top-color: #223654; }
.mss-sidebar a:hover,.mss-sidebar a:focus-visible { color: #fff; background: #10213a; border-color: var(--cobalt-light); box-shadow: var(--backglow-blue-rest); outline: none; }
.mss-sidebar a.active { color: #fff; background: linear-gradient(90deg,#123c78,#10213a); border-color: var(--cobalt-light); box-shadow: inset 3px 0 0 var(--orange), var(--backglow-blue-rest); outline: none; }
.mss-sidebar .navmark { justify-content: center; min-height: 58px; margin-bottom: 5px; color: #fff; background: var(--cobalt); border-color: var(--cobalt-light); font-size: 25px; }
.mss-sidebar .navmark.navmark--logo { min-height:112px; padding:2px; background:transparent; border-color:transparent; box-shadow:none; }
.mss-sidebar-toggle { display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; margin:0 0 8px; padding:8px 10px; color:#c6d0df; background:#0b1527; border:1px solid #334e70; border-radius:var(--radius); font:800 13px var(--sans); cursor:pointer; }
.mss-sidebar-toggle:hover,.mss-sidebar-toggle:focus-visible { color:#fff; border-color:var(--mss-cyan); background:#10213a; }
.mss-sidebar-toggle-icon { font-size:20px; line-height:1; }
.mss-sidebar-toggle-label { margin-left:8px; white-space:nowrap; }
body.mss-nav-collapsed .mss-sidebar .mss-nav-label, body.mss-nav-collapsed .mss-sidebar .mss-feature-state, body.mss-nav-collapsed .mss-sidebar .mss-sidebar-toggle-label { display:none; }
body.mss-nav-collapsed .mss-sidebar a, body.mss-nav-collapsed .mss-sidebar .mss-sidebar-disabled { justify-content:center; }
body.mss-nav-collapsed .mss-sidebar .mss-nav-icon { margin:0; }
body.mss-nav-collapsed .mss-sidebar .navmark.navmark--logo { min-height:58px; }
body.mss-nav-collapsed .mss-sidebar .mss-navmark-logo { width:52px; height:52px; border-radius:12px; }
.mss-sidebar-logout { position:relative; z-index:2; flex:0 0 auto; width:100%; min-height:42px; margin: auto 0 0; background:#8f1730; box-shadow:0 -8px 16px #070b16f5,0 0 16px rgba(198,40,61,.24); }
body.mss-nav-collapsed .mss-sidebar .mss-sidebar-logout { font-size:0; }
body.mss-nav-collapsed .mss-sidebar .mss-sidebar-logout::before { content:'↪'; font-size:20px; }
.mss-navmark-logo { display:block; width:108px; height:108px; object-fit:contain; border-radius:20px; }
.mss-portal-brand-slot { display:flex; align-items:center; justify-content:center; width:100%; min-height:158px; margin:0 auto 20px; }
.mss-portal-brand-logo { display:block; width:150px; height:150px; object-fit:contain; border-radius:24px; }
.mss-portal-brand-slot[hidden] { display:none; }
.mss-pending-trigger { position:fixed; right:20px; bottom:20px; z-index:90; display:flex; align-items:center; justify-content:center; gap:6px; min-width:52px; min-height:52px; border:1px solid var(--mss-blue-light,#6ea8ff); border-radius:50%; color:#fff; background:#111a2c; box-shadow:0 10px 28px #0009; cursor:pointer; }
.mss-pending-trigger strong { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#1768e5; font-size:11px; }
.mss-pending-trigger.has-urgent strong { background:#c6283d; }
.mss-pending-center { position:fixed; z-index:100; top:16px; right:16px; bottom:16px; width:min(440px,calc(100vw - 32px)); overflow:auto; padding:20px; border:1px solid #2d3a52; border-radius:16px; color:#f4f1e9; background:#0d1424; box-shadow:0 24px 70px #000c; }
.mss-pending-center[hidden] { display:none; }
.mss-pending-head,.mss-pending-item,.mss-pending-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mss-pending-head h2 { margin:4px 0; }
.mss-pending-close { border:0; color:#fff; background:transparent; font-size:32px; cursor:pointer; }
.mss-pending-list { display:grid; gap:10px; margin:16px 0; }
.mss-pending-item { align-items:flex-start; padding:12px; border:1px solid #2d3a52; border-left:4px solid #6ea8ff; border-radius:10px; background:#111a2c; }
.mss-pending-item.priority-high,.mss-pending-item.priority-urgent { border-left-color:#e43b52; }
.mss-pending-item small { display:block; margin-top:5px; color:#b3bfd1; text-transform:capitalize; }
.mss-pending-item>div:last-child { display:flex; flex-direction:column; gap:6px; }
.mss-pending-item button { padding:7px 9px; border:1px solid #2d3a52; border-radius:7px; color:#fff; background:#172238; cursor:pointer; }
@media(max-width:640px){.mss-pending-trigger{right:12px;bottom:12px}.mss-pending-center{top:8px;right:8px;bottom:8px;width:calc(100vw - 16px)}}
.logo-editor>summary { cursor:pointer; margin:16px 0; padding:14px 16px; border:1px solid #2d3a52; border-radius:10px; color:#f4f1e9; background:#111a2c; font-weight:800; }
.logo-editor[open]>summary { border-color:#6ea8ff; box-shadow:var(--mss-glow-rest); }
.mss-workspace-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.mss-workspace-tabs button { min-height:44px; padding:10px 15px; border:1px solid #2d3a52; border-radius:8px; color:#b3bfd1; background:#111a2c; font:800 14px var(--sans); cursor:pointer; }
.mss-workspace-tabs button[aria-selected="true"] { color:#fff; border-color:#6ea8ff; background:#1768e5; box-shadow:var(--mss-glow-rest); }
.mss-nav-icon { flex: 0 0 24px; color: var(--mss-cyan); font-size: 21px; line-height: 1; text-align: center; }
.mss-nav-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.mss-feature-state { flex: 0 0 auto; color: var(--mss-cyan); font-size: .58rem; font-weight: 700; letter-spacing: .01em; }
.mss-menu-toggle { display: none; position: fixed; z-index: 30; top: 12px; left: 12px; min-height: 44px; padding: 0 12px; color: #fff; background: var(--cobalt); border: 1px solid var(--cobalt-light); border-radius: var(--radius); font: inherit; }
.mss-main,.shell { min-width: 0; margin-left: calc(var(--mss-sidebar-width) + var(--mss-shell-gap)); padding: 30px clamp(20px, 3vw, 46px) 42px 0; }
.mss-main > *,.shell > *,.mss-grid > * { min-width: 0; }
.mss-page-title { display: block; margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--mss-line); }
.mss-page-eyebrow { position: relative; top: 0; display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .55rem; color: var(--cobalt-light); font-family: var(--sans); font-size: .86rem; font-weight: 900; letter-spacing: .2em; line-height: 1.2; text-transform: uppercase; }
.mss-main > .mss-eyebrow,
.mss-main > header > .mss-eyebrow,
.mss-main > .mss-page-title > .mss-eyebrow { display: none; }
.mss-page-eyebrow ~ .mss-page-eyebrow,
.mss-page-title > h1.mss-page-title > .mss-page-eyebrow,
h1.mss-page-title > .mss-page-eyebrow { display: none; }
#app > header.mss-page-title > .mss-page-eyebrow { top: -44px; }
#app > header.mss-page-title > .mss-page-heading { margin-top: -36px; }
.services-page > .mss-main > header.mss-page-title { width: 100%; box-sizing: border-box; }
.services-page > .mss-main.services-workspace { width: auto !important; max-width: none !important; box-sizing: border-box; overflow-x: hidden; }
.services-page .services-grid { width: 100%; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); box-sizing: border-box; }
.services-page .service-card { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.services-page > .mss-main > header.mss-page-title > .mss-page-eyebrow { top: 13px; }
.services-page > .mss-main > header.mss-page-title > .mss-page-heading { margin-top: -36px; }
.services-page > .mss-main > header.mss-page-title > .mss-locale-toggle { position: relative; top: 0; }
.customers-page .mss-main > header.mss-page-title { width: 100%; box-sizing: border-box; }
.customers-page .mss-main > header.mss-page-title { margin-top: -36px; }
.customers-page .mss-main > header.mss-page-title > .mss-page-eyebrow { top: 13px; }
.customers-page .mss-main > header.mss-page-title > .mss-page-heading { margin-top: -36px; }
.customers-page .mss-main > header.mss-page-title > .mss-locale-toggle { position: relative; top: 68px; }
.mss-page-heading > .mss-page-eyebrow { display: none; }
.mss-page-eyebrow::before { content: ""; width: .85rem; height: 2px; background: var(--orange); }
.mss-page-heading { max-width: none; margin: 0 0 1.1rem; color: var(--text); font-family: var(--display); font-size: clamp(2.5rem,5.6vw,4.2rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; white-space: nowrap; }
.mss-dashboard-heading { font-size: clamp(1.1rem, 4.2vw, 4rem); }
.dashboard-section { margin-top: 24px; }
.dashboard-content { display: block; min-width: 0; }
.dashboard-section-label { margin: 0 0 16px; color: var(--mss-cyan); font-size: .9rem; font-weight: 700; text-transform: uppercase; }
.dashboard-service-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 154px), 1fr)); gap: 16px; }
.dashboard-summary-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.dashboard-content .dashboard-service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-content .dashboard-service-grid > * { grid-column: span 2; }
.dashboard-content .dashboard-service-grid > :nth-child(4) { grid-column: 2 / span 2; }
.dashboard-content .dashboard-service-grid > :nth-child(5) { grid-column: 4 / span 2; }
.dashboard-content .dashboard-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-content .dashboard-service-card { min-height: 154px; }
.dashboard-content .dashboard-summary-grid .mss-card { min-height: 190px; }
.dashboard-service-card { min-height: 148px; }
.dashboard-service-card h2 { margin: 0 0 12px; font-size: 1.25rem; }.dashboard-service-card p { margin: 0 0 10px; }
.mss-page-description { max-width: none; margin: 0; color: var(--muted)!important; font-family: var(--sans); font-size: clamp(1.02rem,1.6vw,1.23rem); font-weight: 400; line-height: 1.5; }
.mss-page-context { margin: .35rem 0 0; color: var(--cobalt-light); font-size: .92rem; letter-spacing: .02em; }
.mss-page-status { display: inline-flex; flex-wrap: wrap; gap: 1rem; margin: .35rem 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.mss-page-status span { display: inline-flex; align-items: center; gap: .35rem; }
.dashboard-runtime-status { display: inline-block; margin: .35rem 1rem 0 0; font-size: .78rem; line-height: 1.25; }
.mss-page-title .mss-green { display: inline-block; margin: .75rem 0; }
.mss-top,.top { border-bottom: 1px solid var(--mss-line); padding-bottom: 16px; }
.mss-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mss-content-gap); align-items: stretch; grid-auto-rows: 1fr; }
/* Global balanced-card rule: 1 card = 1 column, 2 cards = 2 columns, 3/5 cards = 3 columns, 4 cards = 2×2. */
.mss-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); }
.mss-grid:has(> :nth-child(2):last-child), .mss-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mss-grid > *, .mss-feature-map-grid > * { min-height: 100%; }
.integration-grid, .settings-grid { align-items: stretch; grid-auto-rows: 1fr; }
.integration-grid:has(> :nth-child(1):last-child), .settings-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); }
.integration-grid:has(> :nth-child(2):last-child), .settings-grid:has(> :nth-child(2):last-child), .integration-grid:has(> :nth-child(4):last-child), .settings-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mss-feature-map { grid-column: 1 / -1; }
.mss-feature-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-top: 14px; }
.mss-feature-map-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; color: #7b8798 !important; background: #0b1322 !important; border: 1px solid #26364f; border-radius: var(--radius); box-shadow: none !important; cursor: not-allowed; font-size: .9rem; font-weight: 600; text-align: left; }
.mss-feature-map-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-feature-map-item .mss-nav-icon { color: #66758a; margin-right: 7px; }
.mss-feature-map-item .mss-feature-state { color: #7f8da1; font-size: .7rem; white-space: nowrap; }
.mss-service-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.mss-card,.card,.notice { min-width: 0; background: var(--mss-surface); border: 1px solid var(--mss-line); border-radius: var(--radius); box-shadow: var(--mss-glow-rest); transition: background var(--mss-ease),border-color var(--mss-ease),box-shadow var(--mss-ease); }
.mss-card,.card { padding: var(--mss-card-padding); }
.mss-card:hover,.card:hover { transform:none; border-color: var(--mss-cyan); background: var(--mss-surface-raised); box-shadow: 0 0 0 1px var(--mss-blue),var(--mss-glow-hover); }
.mss-card:focus-within,.card:focus-within { border-color: var(--mss-cyan); box-shadow: 0 0 0 3px #1768e555,var(--mss-glow-rest); }
.mss-service-grid .mss-card:last-child button { background: var(--cta-red); border-color: #ff5a6f; box-shadow: var(--backglow-red-rest); }
.mss-service-grid .mss-card:last-child button:hover,.mss-service-grid .mss-card:last-child button:focus-visible { background: var(--cta-red-hover); border-color: #ff5a6f; box-shadow: var(--backglow-red-hover); }
.shell .notice { border-left: 4px solid var(--orange); border-color: var(--warning); background: #30220b; color: #ffe4b2; box-shadow: var(--backglow-orange-rest); }
.mss-green,.green,.ok { text-shadow: 0 0 14px #52d6a045; }
.mss-row,.row { display: flex; justify-content: space-between; gap: var(--mss-control-clearance); border-top: 1px solid var(--mss-line); padding: 12px 0; }
.mss-row > :first-child,.row > :first-child { min-width: 0; }
.mss-button,button { color: #fff; background: var(--cobalt); border: 1px solid var(--cobalt); border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; box-shadow:var(--backglow-blue-rest); transition:background var(--mss-ease),border-color var(--mss-ease),box-shadow var(--mss-ease); }
[role="tab"],.it-group-tab { border-radius:10px; min-height:48px; padding:12px 22px; }
.it-group-tab { border-radius:14px !important; }
[role="tablist"] { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
[role="tablist"] > [role="tab"] { flex:0 0 auto; }
.it-provider { border-radius:999px; }
nav[aria-label$="options"] { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; border-bottom:1px solid #1f3658; padding:16px 0 18px; }
nav[aria-label$="options"] .mss-button { border-radius:14px; min-height:48px; padding:12px 18px; }
.mss-submenu-title { width:100%; margin:18px 0 10px; color:#fff; font:800 15px/1.3 var(--sans); letter-spacing:.04em; text-align:center; text-transform:none; }
.mss-locale-toggle { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:4px 0 4px auto; width:max-content; color:#8fa7c8; font:800 .8rem/1 var(--sans); letter-spacing:.04em; }
.mss-locale-toggle button { box-sizing:border-box; min-width:52px; min-height:45px; border:1px solid transparent; background:transparent; color:#aab7c9; padding:8px 10px; border-radius:4px; font:800 .8rem/1 inherit; letter-spacing:.04em; cursor:pointer; }
.mss-locale-toggle button.active { color:#fff; background:#1768e5; border-color:#1768e5; box-shadow:0 0 14px rgba(23,104,229,.35); }
.mss-locale-toggle button:focus-visible { outline:2px solid #6ea8ff; outline-offset:2px; }
.mss-submenu-options { display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:10px !important; width:100%; margin:0 0 20px; padding:0 0 18px; border-bottom:1px solid #1f3658; overflow:visible !important; }
.mss-settings-primary { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin:22px 0 0; padding:0 0 16px; border-bottom:1px solid #30496b; }
.mss-settings-primary .mss-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:10px; text-decoration:none; }
.mss-settings-primary .mss-settings-master { background:#c6283d; border-color:#ff6b7c; color:#fff; box-shadow:0 0 22px #ff405f88; }
.business-subtabs::before { content:none !important; display:none !important; }
.settings-tabs > a.mss-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.master-subtabs { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; width:100%; }
.master-subtabs .mss-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:14px; text-decoration:none; }
.it-group-cards { align-items:stretch; grid-auto-rows:auto; }
.it-group-card { border-radius:10px; min-height:0; }
button:hover,button:focus-visible,.mss-button:hover,.mss-button:focus-visible { transform:none; border-color:var(--mss-cyan); background:#0d55c4; box-shadow:var(--backglow-blue-hover); }
button:disabled,.mss-button:disabled { cursor:not-allowed; opacity:.58; filter:saturate(.65); box-shadow:none; }
button:disabled:hover,button:disabled:focus-visible,.mss-button:disabled:hover,.mss-button:disabled:focus-visible { border-color:var(--cobalt); background:var(--cobalt); box-shadow:none; }
button:focus-visible,a:focus-visible,select:focus-visible,.mss-menu-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type="search"]:focus, input[type="search"]:focus-visible, [data-team-search]:focus, [data-team-search]:focus-visible { outline: 3px solid #f47a16aa; outline-offset: 1px; border-color: #f47a16 !important; box-shadow: 0 0 0 3px #f47a1640, 0 0 22px #f47a1680 !important; }
.mss-blue,.blue { color: var(--mss-cyan); }.mss-green,.green,.ok { color: var(--mss-success); }.mss-orange,.orange { color: var(--orange); }
@media (max-width: 760px) { :root { --mss-sidebar-width: min(280px, calc(100vw - 48px)); }.mss-menu-toggle { display: block; }.mss-sidebar { transform: translateX(-105%); transition: transform var(--mss-ease); overflow: hidden; }.mss-nav-open .mss-sidebar { transform: translateX(0); }.mss-main,.shell { margin-left: 0; padding: 74px 14px 28px; }.mss-top,.top { flex-direction: column; }.mss-page-heading { font-size: clamp(1.35rem, 8vw, 2.5rem); letter-spacing: -.035em; }.mss-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { body.mss-nav-collapsed { --mss-sidebar-width: min(280px, calc(100vw - 48px)); } body.mss-nav-collapsed .mss-sidebar .mss-nav-label, body.mss-nav-collapsed .mss-sidebar .mss-feature-state { display:block; } body.mss-nav-collapsed .mss-sidebar a, body.mss-nav-collapsed .mss-sidebar .mss-sidebar-disabled { justify-content:flex-start; } .mss-sidebar-toggle { display:none; } }
@media (max-width: 1100px) and (min-width: 761px) { .dashboard-content .dashboard-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-content .dashboard-service-grid > * { grid-column: auto; } .dashboard-content .dashboard-service-grid > :last-child { grid-column: 1 / -1; } .dashboard-content .dashboard-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1400px) and (min-width: 1101px) { .dashboard-content .dashboard-summary-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (max-width: 760px) { .dashboard-content .dashboard-service-grid, .dashboard-content .dashboard-summary-grid { grid-template-columns: minmax(0, 1fr); } .dashboard-content .dashboard-service-grid > *,.dashboard-content .dashboard-service-grid > :nth-child(4),.dashboard-content .dashboard-service-grid > :nth-child(5) { grid-column: auto; } }
@media (max-width: 760px) { .mss-grid, .integration-grid, .settings-grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 760px) { .mss-locale-toggle { margin-right:0; gap:8px; } .mss-locale-toggle button { min-width:48px; min-height:42px; padding:7px 9px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* Global title rhythm: keep the eyebrow/title near the top while reserving menu-toggle space on mobile. */
.mss-main,.shell { padding-top:8px; }
.mss-page-title { margin-top:0; }
.mss-locale-toggle { transform:translateY(4px); }
header.mss-page-title > .mss-locale-toggle { position: relative; top: 0; }
#app > header.mss-page-title > .mss-locale-toggle { top: 32px; }
h1.mss-page-title { display:block; padding:0; border:0; margin:10px 0 1.1rem; color:var(--text); font-family:var(--display); font-size:clamp(2.5rem,5.6vw,4.2rem); font-weight:400; line-height:.98; letter-spacing:-.045em; }
.mss-main > header:not(.mss-page-title) > h1.mss-page-title { margin-top:0; }
.mss-main>header:not(.mss-page-title) { margin-top:0; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--mss-line); }
.mss-main>header:not(.mss-page-title) .mss-eyebrow { margin-bottom:1.3rem; }
@media (max-width:760px) { .mss-main,.shell { padding-top:48px; } .mss-page-title { margin-top:0; } .mss-locale-toggle { transform:translateY(3px); } }
.mss-page-title > .mss-page-heading,.mss-page-title > h1.mss-page-title { margin-top:0; }
.dashboard-content,.dashboard-service-grid,.dashboard-summary-grid { width:100%; max-width:100%; box-sizing:border-box; }
.dashboard-content .mss-card { min-width:0; overflow-wrap:anywhere; }

/* Shared Dashboard reference geometry for every normalized screen. */
header.mss-page-title { margin-top: 0; }
header.mss-page-title > .mss-page-eyebrow { top: -44px; }
header.mss-page-title > .mss-page-heading { margin-top: -36px; }
header.mss-page-title > .mss-locale-toggle { position: relative; top: 32px; }
.services-page .mss-main > header.mss-page-title { margin-top: 0; }
.services-page .mss-main > header.mss-page-title > .mss-page-eyebrow { top: -44px; }
.services-page .mss-main > header.mss-page-title > .mss-page-heading { margin-top: -36px; }
.services-page .mss-main > header.mss-page-title > .mss-locale-toggle { top: 0; }
.customers-page .mss-main > header.mss-page-title { margin-top: 0; }
.customers-page .mss-main > header.mss-page-title > .mss-page-eyebrow { top: -44px; }
.customers-page .mss-main > header.mss-page-title > .mss-page-heading { margin-top: -36px; }
.customers-page .mss-main > header.mss-page-title > .mss-locale-toggle { top: 63px; }
.mss-sidebar .mss-sidebar-logout { width:100%; min-height:42px; margin:auto 0 0; padding:9px 14px; color:#fff; background:#8f1730; border:1px solid #ff6d87; border-radius:9px; box-shadow:0 0 16px rgba(198,40,61,.24); font:inherit; font-weight:800; cursor:pointer; }

/* Mobile headers must fit beside the menu toggle; title controls stay in flow. */
@media (max-width:760px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .mss-main,.shell { width:100%; max-width:100vw; box-sizing:border-box; }
  header.mss-page-title,
  .services-page .mss-main > header.mss-page-title,
  .customers-page .mss-main > header.mss-page-title { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
  header.mss-page-title > .mss-page-eyebrow,
  header.mss-page-title > .mss-page-heading,
  header.mss-page-title > .mss-locale-toggle,
  .services-page .mss-main > header.mss-page-title > .mss-page-eyebrow,
  .services-page .mss-main > header.mss-page-title > .mss-page-heading,
  .services-page .mss-main > header.mss-page-title > .mss-locale-toggle,
  .customers-page .mss-main > header.mss-page-title > .mss-page-eyebrow,
  .customers-page .mss-main > header.mss-page-title > .mss-page-heading,
  .customers-page .mss-main > header.mss-page-title > .mss-locale-toggle { position:static!important; top:auto!important; margin:0!important; transform:none!important; }
  header.mss-page-title > .mss-locale-toggle { justify-self:start; }
}

@media(max-width:760px){header.mss-page-title{padding-top:24px}}

/* Phase 1 viewport fit: cards size to their content; Stream owns the scrolling feed. */
.mss-grid { grid-auto-rows: auto; }
.mss-grid > * { min-height: 0; }
.dashboard-content .dashboard-service-card { min-height: 0; padding: 14px; }
.dashboard-content .dashboard-summary-grid .mss-card { min-height: 0; padding: 14px; }
.rev-tabs { overflow: visible; flex-wrap: wrap; }
@media (max-width: 700px) { .rev-tabs { overflow: visible; flex-wrap: wrap; } }
body.stream-page { overflow-y: auto; }
@media(min-width:1200px){
  .mss-main .dashboard-service-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mss-main .dashboard-service-grid>*{grid-column:auto!important}
  .mss-main .dashboard-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mss-main .dashboard-service-card{min-height:0;padding:12px}
  .mss-main .dashboard-summary-grid>.mss-card{min-height:0;padding:12px}
  .mss-main .dashboard-summary-grid>.mss-card .mss-row{padding:8px 0}
}
@media(min-width:1200px){
  .mss-main .dashboard-section{margin-top:16px}
  .mss-main .dashboard-service-grid,.mss-main .dashboard-summary-grid{gap:10px}
  .mss-main .dashboard-section-label{margin-bottom:10px}
  .mss-main .dashboard-summary-grid>.mss-card .mss-row{padding:5px 0}
}
@media(min-width:1200px){
  .mss-main .dashboard-service-card{padding:9px}
  .mss-main .dashboard-service-card h2{font-size:.98rem;margin-bottom:5px}
  .mss-main .dashboard-service-card p{font-size:.8rem;margin-bottom:4px}
  .mss-main .dashboard-service-card .mss-button{min-height:30px;padding:5px 9px;font-size:.76rem}
  .mss-main .dashboard-summary-grid>.mss-card{padding:9px}
  .mss-main .dashboard-summary-grid>.mss-card .mss-row{padding:3px 0}
  .mss-main .dashboard-summary-grid>.mss-card h2{font-size:1.12rem;margin-bottom:5px}
}

/* Desktop acceptance fit: dashboard and services must remain single-screen. */
@media(min-width:1200px){
  body.dashboard-page,body.services-page{overflow:hidden}
  body.dashboard-page .mss-main,body.services-page .mss-main{height:100dvh;overflow:hidden;zoom:.88}
}
@media(min-width:1200px){
  body.dashboard-page .mss-main,body.services-page .mss-main{margin-left:calc((var(--mss-sidebar-width) + var(--mss-shell-gap)) / .88)}
}
@media(min-width:1200px){
  body.services-page .mss-main{zoom:.80;margin-left:calc((var(--mss-sidebar-width) + var(--mss-shell-gap)) / .80)}
  body.dashboard-page .mss-main{zoom:.82;margin-left:calc((var(--mss-sidebar-width) + var(--mss-shell-gap)) / .82)}
}

/* Preserve every feature: allow fallback scrolling when a viewport cannot contain all content. */
@media(min-width:1200px){
  body.dashboard-page,body.services-page{overflow-y:auto}
  body.dashboard-page .mss-main,body.services-page .mss-main{height:auto;min-height:100dvh;overflow:visible}
}
@media(min-width:1200px){
  body.dashboard-page .mss-main{zoom:1;margin-left:calc(var(--mss-sidebar-width) + var(--mss-shell-gap));}
}
@media(min-width:1200px){
  body.services-page:has(#website-design-workspace:not([hidden])) .mss-main{zoom:1;margin-left:calc(var(--mss-sidebar-width) + var(--mss-shell-gap));overflow:visible;height:auto}
  body.services-page:has(#website-design-workspace:not([hidden])) .website-detail-panel,
  body.services-page:has(#website-design-workspace:not([hidden])) .mss-card{font-size:1rem}
}

/* Shared submenu treatment: compact rectangular controls with one clear active state. */
:is(.mss-workspace-tabs,.master-subtabs,.mss-submenu-options,.team-tabs,.website-tabs,.rev-tabs,nav[aria-label$=options]) :is(button,a,.mss-button,.website-tab){display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid #438ef5;border-radius:10px;background:#0d1b30;color:#cfe2ff;box-shadow:none;text-decoration:none;font-weight:800;}
:is(.mss-workspace-tabs,.master-subtabs,.mss-submenu-options,.team-tabs,.website-tabs,.rev-tabs,nav[aria-label$=options]) :is([aria-selected=true],.active){color:#fff;background:#1768e5;border-color:#6ea8ff;box-shadow:0 0 18px #1768e577;}
:is(.mss-workspace-tabs,.master-subtabs,.mss-submenu-options,.team-tabs,.website-tabs,.rev-tabs,nav[aria-label$=options]) :is(button,a,.mss-button,.website-tab):hover{color:#fff;background:#123c78;border-color:#6ea8ff;}

/* Shared submenu heading typography. */
.mss-submenu-title{font-family:var(--display)!important;font-size:1.35rem!important;font-weight:400!important;line-height:1.1;letter-spacing:-.03em!important;text-transform:none!important;color:var(--text)!important;margin:14px 0 10px!important;text-align:center}

/* Bright blue backlight treatment for shared controls and cards. */
.mss-card,.card,.notice{box-shadow:0 0 8px rgba(74,153,255,.72),0 0 24px rgba(23,104,229,.58),0 0 48px rgba(23,104,229,.28)!important}
.mss-button,button{box-shadow:0 0 7px rgba(110,168,255,.85),0 0 18px rgba(23,104,229,.72),0 0 32px rgba(23,104,229,.38)!important}
.mss-button:hover,.mss-button:focus-visible,button:hover,button:focus-visible{box-shadow:0 0 10px rgba(151,202,255,.98),0 0 24px rgba(23,104,229,.9),0 0 44px rgba(23,104,229,.52)!important}


/* Extend the same submenu style to every tablist-driven workspace menu. */
.mss-main [role=tablist] > :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid #438ef5;border-radius:10px;background:#0d1b30;color:#cfe2ff;box-shadow:none;text-decoration:none;font-weight:800}
.mss-main [role=tablist] > :is([aria-selected=true],.active){color:#fff;background:#1768e5;border-color:#6ea8ff;box-shadow:0 0 18px #1768e577}

/* Settings destination submenu matches the shared workspace treatment. */
section[data-settings-view] > h2{margin:14px 0 10px!important;color:var(--text)!important;font:400 1.35rem/1.1 var(--display)!important;letter-spacing:-.03em;text-align:center}
section[data-settings-view] > nav.website-actions{justify-content:center;gap:10px;margin:0;padding:0 0 4px}
section[data-settings-view] > nav.website-actions .mss-button{min-height:46px;padding:10px 16px;border:1px solid #438ef5;border-radius:10px;background:#0d1b30;color:#cfe2ff;box-shadow:0 0 7px rgba(110,168,255,.7),0 0 18px rgba(23,104,229,.55)}
section[data-settings-view] > nav.website-actions .mss-button:first-child{color:#fff;background:#1768e5;border-color:#6ea8ff}

.settings-primary-menu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:14px 0 18px;padding:0 0 16px;border-bottom:1px solid #30496b}.settings-primary-menu button{min-height:46px;padding:10px 16px;border:1px solid #438ef5;border-radius:10px;background:#1768e5;color:#fff;font:800 14px var(--sans);box-shadow:0 0 8px rgba(110,168,255,.8),0 0 20px rgba(23,104,229,.6)}.settings-primary-menu button:not([aria-selected=true]){background:#0d1b30;color:#cfe2ff;box-shadow:0 0 7px rgba(110,168,255,.65),0 0 16px rgba(23,104,229,.45)}

.settings-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.settings-overview .mss-card{min-height:220px;padding:22px;display:flex;flex-direction:column;align-items:flex-start}.settings-overview h2{margin:0 0 12px;font:400 1.55rem/1.1 var(--display)}.settings-overview p{margin:0 0 20px;color:var(--mss-text);line-height:1.5}.settings-overview .mss-button{margin-top:auto;border-radius:10px}.settings-overview .danger{background:#c6283d!important;border-color:#ff6b7c!important}@media(max-width:900px){.settings-overview{grid-template-columns:1fr}}

.settings-primary-menu [data-settings-nav=master]{background:#c6283d!important;border-color:#ff6b7c!important;color:#fff!important;box-shadow:0 0 16px rgba(255,80,100,.75),0 0 30px rgba(255,50,80,.45)!important}.settings-primary-menu [data-settings-nav=master]:hover,.settings-primary-menu [data-settings-nav=master]:focus-visible{background:#e33b52!important;box-shadow:0 0 20px rgba(255,100,120,.9),0 0 40px rgba(255,50,80,.6)!important}