:root {
  --ink: #1d1d1f;
  --ink-2: #080808;
  --cream: #f5f5f7;
  --paper: #ffffff;
  --cobalt: #1d1d1f;
  --blue-dark: #080808;
  --coral: #9fbfd3;
  --lime: #d8d8d6;
  --sand: #e7e7e2;
  --line: rgba(10, 10, 10, .16);
  --muted: #55565b;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Afacad", system-ui, sans-serif;
  --radius: 28px;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { font-size:106.25%; scroll-behavior:smooth; }
html[data-font-scale="compact"] { font-size:100%; }
html[data-font-scale="default"] { font-size:106.25%; }
html[data-font-scale="large"] { font-size:118.75%; }
html[data-font-scale="extra-large"] { font-size:131.25%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 15px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.prototype-ribbon { position: fixed; z-index: 120; top: 14px; right: 18px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(11,11,12,.78); color: white; backdrop-filter: blur(16px); font-size: 0.625rem; font-weight:500; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,52,.12); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); }

.sidebar { position: sticky; z-index: 90; top: 0; height: 100vh; padding: 31px 22px 22px; display: flex; flex-direction: column; overflow-y:auto; scrollbar-width:thin; color: white; background: var(--ink); border-right: 1px solid rgba(255,255,255,.09); }
.brand-block { display: grid; gap: 5px; padding: 0 9px 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wordmark { width: fit-content; display: inline-flex; align-items: center; color: #fff; font-size: 1.5625rem; font-weight:500; letter-spacing: -.06em; white-space: nowrap; }
.wordmark img { width: 128px; height: 31px; display: block; filter: brightness(0) invert(1); }
.brand-block > span { color: rgba(255,255,255,.7); font-size: 0.625rem; letter-spacing: .13em; text-transform: uppercase; }
.main-nav { padding-top: 23px; display: grid; gap: 4px; }
.main-nav p { margin: 0 0 8px 10px; color: rgba(255,255,255,.72); font-size: 0.6875rem; font-weight:500; letter-spacing: .12em; text-transform: uppercase; }
.main-nav .nav-spacer { margin-top: 20px; }
.nav-item { width: 100%; min-height: 48px; padding: 0 11px; display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.86); text-align: left; font-size: 0.875rem; transition: .2s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: var(--ink); background: var(--lime); font-weight:500; }
.nav-icon { font-size: 0.5625rem; font-weight:500; letter-spacing: .08em; }
.nav-item b { padding: 3px 6px; border-radius: 999px; background: var(--coral); color: white; font-size: 0.5rem; letter-spacing: .05em; text-transform: uppercase; }
.sidebar-footer { margin-top: auto; display: grid; gap: 15px; }
.font-scale-control { padding:11px 12px; display:grid; grid-template-columns:1fr auto; gap:8px 10px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; }
.font-scale-control > span { color:rgba(255,255,255,.8); font-size:0.5625rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.font-scale-control > small { color:rgba(255,255,255,.74); font-size:0.5625rem; }
.font-scale-options { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.font-scale-options button { min-width:0; min-height:32px; padding:0 4px; border:1px solid rgba(255,255,255,.26); border-radius:8px; background:rgba(255,255,255,.06); color:#fff; font-size:0.6875rem; font-weight:500; }
.font-scale-options button:hover { background:rgba(255,255,255,.15); }
.font-scale-options button[aria-pressed="true"] { border-color:#fff; background:rgba(255,255,255,.24); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }
.font-scale-options button:focus-visible { outline:2px solid #d7f451; outline-offset:2px; }
.health-mini { width:100%; padding:14px; display:grid; gap:7px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:transparent; color:white; text-align:left; font:inherit; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.health-mini:hover { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.1); transform:translateY(-1px); }
.health-mini:focus-visible { outline:2px solid var(--portal-accent,#b8d7ec); outline-offset:3px; }
.health-mini span { color: rgba(255,255,255,.7); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: .1em; }
.health-mini strong { font-size: 0.6875rem; font-weight: 500; }
.health-mini small { color:rgba(255,255,255,.66); font-size:0.5625rem; }
.health-mini i { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--lime); }
.health-mini.attention i { background:#ffb36c; box-shadow:0 0 0 4px rgba(255,179,108,.14); }
.user-chip { width: 100%; padding: 10px 8px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border: 0; background: transparent; color: white; text-align: left; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--cobalt); font-size: 0.625rem; font-weight:500; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 0.6875rem; }
.user-chip small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 0.5625rem; }

.page-shell { min-width: 0; }
.topbar { position: sticky; z-index: 75; top: 0; min-height: 76px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(243,241,233,.88); backdrop-filter: blur(20px); }
.workspace-picker { display: flex; align-items: center; gap: 10px; }
.workspace-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-family: var(--serif); font-size: 0.75rem; }
.workspace-picker small, .workspace-picker strong { display: block; }
.workspace-picker small { color: var(--muted); font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; }
.workspace-picker strong { margin-top: 2px; font-size: 0.75rem; }
.workspace-picker > button { border: 0; background: transparent; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.search-button { width: 220px; height: 38px; padding: 0 10px 0 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.56); color: var(--muted); font-size: 0.6875rem; text-align: left; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-family: var(--sans); font-size: 0.5rem; }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.56); }
.icon-button i { position: absolute; top: -2px; right: -1px; width: 15px; height: 15px; display: grid; place-items: center; border: 2px solid var(--cream); border-radius: 50%; background: var(--coral); color: white; font-size: 0.4375rem; font-style: normal; }
.bell { width:20px; height:20px; display:grid; place-items:center; }
.bell svg { display:block; }
.mobile-menu { display: none; }

main { min-height: calc(100vh - 76px); }
.data-source-status { margin:24px clamp(24px,4vw,68px) 0; padding:16px 20px; display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap; border:1px solid #d8d8d8; border-radius:14px; background:#f4f4f4; color:#444; }
.data-source-status[hidden] { display:none; }
.data-source-status strong { font-size:0.8125rem; }
.data-source-status span { font-size:0.75rem; opacity:.8; }
.data-source-status.verified { color:#145c3b; border-color:#a9d7c0; background:#eaf8f0; }
.data-source-status.blocked { color:#7d351f; border-color:#e2b6a8; background:#fff0eb; }
.connected-pending .page-view,.connected-error .page-view,.connected-live .page-view { display:none !important; }
.connected-overview { padding:clamp(32px,4vw,52px) clamp(24px,4vw,68px) 96px; }
.connected-overview-head { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:36px; align-items:end; }
.connected-overview-head h1 { max-width:900px; margin:0 0 16px; overflow-wrap:anywhere; font-family:var(--sans); font-size:clamp(2.25rem,3.6vw,3.25rem); font-weight:500; line-height:.98; letter-spacing:-.042em; }
.connected-overview-head h1 em { font-family:var(--serif); font-weight:400; font-style:normal; }
.connected-overview-head > div > p:last-child { max-width:680px; color:var(--muted); font-size:1.0625rem; line-height:1.5; }
.connected-asof { padding:22px; display:grid; gap:7px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.connected-period { width:min(240px,100%); margin-top:22px; display:grid; gap:7px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.connected-period select { min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; font:500 0.75rem var(--sans); }
.connected-asof span { color:var(--muted); font-size:0.5625rem; font-weight:500; letter-spacing:.13em; }
.connected-asof strong { font-size:1.125rem; }
.connected-asof small { color:var(--muted); }
.live-metric-grid { margin-top:55px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.live-metric { min-width:0; min-height:190px; padding:26px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; }
.live-metric span { color:var(--muted); font-size:0.75rem; }
.live-metric strong { max-width:100%; margin:auto 0 12px; font-size:clamp(1.75rem,3.2vw,3.25rem); line-height:.98; letter-spacing:-.045em; overflow-wrap:anywhere; word-break:break-word; }
.live-metric small { color:var(--muted); font-size:0.6875rem; }
.stage-sample-callout { margin-top:34px; padding:24px 26px; display:flex; align-items:center; justify-content:space-between; gap:26px; border:1px solid #b8d7ec; border-radius:22px; background:#eff7fc; }
.stage-sample-callout > div { max-width:820px; }
.stage-sample-callout h2 { margin:8px 0; font-size:clamp(1.625rem,3vw,2.5rem); letter-spacing:-.045em; }
.stage-sample-callout p { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.5; }
.stage-sample-callout .connected-action { flex:0 0 auto; }
.connected-overview-metrics { margin-top:55px; }
.connected-overview-metrics .live-metric-grid { margin-top:18px; }
.connected-contract-note { margin:18px 0 0; color:var(--muted); font-size:0.75rem; }
.connected-source-grid { margin-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.connected-attention { margin-top:28px; padding:24px; border:1px solid #e2b6a8; border-radius:22px; background:#fff0eb; }
.connected-attention > div:first-child { max-width:760px; }
.connected-attention > div:first-child h2 { margin:8px 0 8px; font-size:clamp(1.75rem,3vw,2.625rem); line-height:1; letter-spacing:-.045em; }
.connected-attention > div:first-child p:last-child { margin:0; color:#7d351f; line-height:1.5; }
.connected-attention .connected-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.connected-source-card { min-height:220px; padding:28px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:22px; background:#fff; }
.connected-source-card > span,.connected-payment > span,.connected-profile > div > span { color:var(--muted); font-size:0.5625rem; font-weight:500; letter-spacing:.13em; }
.connected-source-card h2 { margin:28px 0 10px; font-family:var(--serif); font-size:2rem; font-weight:400; letter-spacing:-.035em; }
.connected-source-card p { margin:0 0 24px; color:var(--muted); font-size:0.8125rem; line-height:1.55; }
.connected-source-card .connected-action { margin-top:auto; }
.source-warning { border-color:#e2b6a8; background:#fff0eb; }
.connected-action { min-height:42px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:22px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; font:500 0.6875rem var(--sans); text-decoration:none; cursor:pointer; }
.connected-action.secondary { border-color:var(--line); background:transparent; color:var(--ink); }
.connected-action:hover { transform:translateY(-1px); }
.connected-module-actions { margin:24px 0; display:flex; gap:10px; flex-wrap:wrap; }
.connected-source-card .connected-module-actions { margin-top:auto; margin-bottom:0; }
.connected-table { max-width:100%; margin-top:24px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-gutter:stable; border:1px solid var(--line); border-radius:20px; background:#fff; }
.connected-table-head,.connected-table-row { min-height:66px; padding:14px 20px; display:grid; grid-template-columns:minmax(230px,2fr) repeat(4,minmax(95px,1fr)); gap:16px; align-items:center; border-bottom:1px solid var(--line); font-size:0.875rem; }
.connected-table-head { min-height:42px; color:var(--muted); background:#f5f3ec; font-size:0.5625rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.connected-table-row:last-child { border-bottom:0; }
.connected-table-row strong { display:grid; gap:4px; }
.connected-table-row small { color:var(--muted); font-size:0.75rem; font-weight:500; }
.connected-table-row a { color:var(--cobalt); font-weight:500; text-decoration:none; }
.connected-commerce-live { margin-top:30px; }
.connected-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; }
.connected-section-head h2 { margin:8px 0; font:400 clamp(1.875rem,4vw,3rem)/.98 var(--serif); letter-spacing:-.04em; }
.connected-section-head p { max-width:720px; margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.5; }
.commerce-products-table { overflow-x:auto; }
.commerce-live-row { min-width:1120px; grid-template-columns:minmax(240px,2fr) repeat(7,minmax(82px,1fr)); }
.connected-status { width:max-content; padding:6px 9px; border-radius:999px; background:#fff0eb; color:#7d351f; font-size:0.5625rem; }
.connected-status.is-live { background:#eaf8f0; color:#145c3b; }
.connected-status.is-configured { background:#edf5fb; color:#315a72; }
.connected-status.is-restricted { background:#efefec; color:#666; }
.connected-status.is-pending { background:#fff5dc; color:#725516; }
.connected-empty { margin:0; padding:28px; color:var(--muted); }
.connected-payment,.connected-profile { margin-top:24px; padding:26px; display:flex; gap:22px; align-items:center; border:1px solid var(--line); border-radius:20px; background:#fff; }
.connected-payment { max-width:520px; display:grid; gap:7px; }
.connected-payment strong { font-size:1.375rem; }
.connected-payment small { color:var(--muted); }
.connected-profile-mark { width:58px; height:58px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--ink); color:#fff; font-weight:500; }
.connected-profile h2 { margin:5px 0; font-size:1.625rem; }
.connected-profile p { margin:0; color:var(--muted); }
.connected-profile .connected-action { margin-left:auto; }
.connected-action:disabled,.connected-status:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.connected-toolbar,.connected-inline-form,.connected-support-form { margin-top:18px; padding:18px; display:flex; gap:12px; align-items:end; flex-wrap:wrap; border:1px solid var(--line); border-radius:18px; background:#fff; }
.connected-toolbar input,.connected-toolbar select,.connected-inline-form input,.connected-inline-form select,.connected-support-form input,.connected-support-form textarea { min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:500 0.75rem var(--sans); }
.connected-toolbar > input { min-width:240px; flex:1; }
.connected-toolbar label,.connected-inline-form label,.connected-support-form label { display:grid; gap:7px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.06em; }
.connected-inline-form label:has(input[type="checkbox"]) { min-height:42px; display:flex; flex-direction:row; align-items:center; letter-spacing:0; }
.connected-inline-form input[type="checkbox"] { min-height:auto; }
.connected-file input { max-width:360px; }
.connected-pagination { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.connected-pagination span { color:var(--muted); font-size:0.6875rem; }
button.connected-status { border:0; font:500 0.5625rem var(--sans); cursor:pointer; }
.garment-portal-head { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:50px; align-items:end; }
.garment-portal-head h1 { margin:4px 0 0; font-size:clamp(2.625rem,5vw,4.5rem); font-weight:560; letter-spacing:-.055em; }
.garment-tabs { margin-top:34px; display:flex; gap:26px; border-bottom:1px solid var(--line); }
.garment-tabs button { min-height:52px; padding:0; display:flex; align-items:center; gap:9px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font:500 0.875rem var(--sans); cursor:pointer; }
.garment-tabs button.active { border-color:#1b2742; color:var(--ink); }
.garment-tabs button span { padding:5px 9px; border-radius:999px; background:#efefef; color:#7b7b7b; font-size:0.625rem; }
.garment-assets-toolbar { margin-top:30px; display:grid; grid-template-columns:minmax(260px,1fr) 54px auto; gap:14px; align-items:center; }
.garment-search { height:54px; padding:0 16px; display:flex; align-items:center; gap:12px; border:1px solid #cfd0ce; border-radius:4px; background:#fff; }
.garment-search > span { font-size:1.8125rem; line-height:1; transform:rotate(-20deg); }
.garment-search input { width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--ink); font:500 0.9375rem var(--sans); }
.garment-filter-menu { position:relative; }
.garment-filter-menu summary { width:54px; height:54px; padding:15px; display:grid; place-content:center; gap:4px; list-style:none; cursor:pointer; }
.garment-filter-menu summary::-webkit-details-marker { display:none; }
.garment-filter-menu summary span { height:2px; display:block; background:var(--ink); }
.garment-filter-menu summary span:nth-child(1) { width:22px; }.garment-filter-menu summary span:nth-child(2) { width:14px; margin:auto; }.garment-filter-menu summary span:nth-child(3) { width:7px; margin:auto; }
.garment-filter-menu > div { width:260px; padding:16px; position:absolute; z-index:20; top:58px; right:0; display:grid; gap:14px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12); }
.garment-filter-menu label { display:grid; gap:6px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.garment-filter-menu select { min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.garment-upload-open { min-width:156px; min-height:54px; border-radius:4px; font-size:0.8125rem; }
.garment-assets-table { border:0; border-radius:0; }
.garment-assets-head,.garment-assets-row { min-width:1050px; padding:16px 10px; display:grid; grid-template-columns:34px 76px minmax(280px,2.5fr) minmax(110px,.9fr) minmax(105px,.9fr) minmax(90px,.8fr) minmax(130px,1fr) 78px; gap:14px; align-items:center; border-bottom:1px solid var(--line); }
.garment-assets-head { min-height:58px; color:#555; font-size:0.6875rem; font-weight:500; }
.garment-assets-row { min-height:118px; color:#222; font-size:0.8125rem; }
.garment-check { width:18px; height:18px; display:grid; place-items:center; }
.garment-check input { width:18px; height:18px; margin:0; accent-color:#1b2742; }
.garment-preview { width:54px; height:72px; display:block; overflow:hidden; border-radius:5px; background:#f0f0f0; }
.garment-preview img { width:100%; height:100%; object-fit:cover; }
.garment-name { display:grid; gap:7px; font-size:0.875rem; font-weight:560; line-height:1.35; text-transform:none; }
.garment-name small { color:var(--muted); font-size:0.6875rem; font-weight:500; }
.garment-variant { display:flex; align-items:center; gap:8px; }
.garment-variant i { width:11px; height:11px; display:block; flex:0 0 auto; border:1px solid rgba(0,0,0,.08); border-radius:50%; background:var(--variant-color); }
.garment-processing { width:max-content; padding:7px 10px; display:inline-flex; border-radius:5px; background:#efefef; color:#696969; font-size:0.6875rem; font-weight:560; }
.garment-processing.is-ready { background:#eaf8f0; color:#145c3b; }.garment-processing.is-attention { background:#fff0eb; color:#7d351f; }
.garment-updated { white-space:nowrap; }
.garment-enabled { width:32px; height:32px; padding:0; display:grid; place-items:center; border:1px solid #c9c9c9; border-radius:50%; background:#fff; color:#777; cursor:pointer; }
.garment-enabled.is-enabled { border-color:#145c3b; background:#eaf8f0; color:#145c3b; }.garment-enabled:disabled { opacity:.55; cursor:not-allowed; }
.outfit-delete { width:28px; height:28px; padding:0; display:grid; place-items:center; border:1px solid #d9b5aa; border-radius:50%; background:#fff7f4; color:#8d3d29; font:500 1.125rem var(--sans); cursor:pointer; }
.outfit-delete:disabled { opacity:.55; cursor:not-allowed; }
.garment-upload-dialog { width:min(900px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; border:0; border-radius:20px; color:var(--ink); background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.28); }
.garment-upload-dialog::backdrop { background:rgba(13,20,18,.62); backdrop-filter:blur(3px); }
.garment-upload-close { height:0; position:relative; z-index:2; }
.garment-upload-close button { width:38px; height:38px; position:absolute; top:18px; right:18px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:1.5rem; cursor:pointer; }
.garment-upload-header { padding:38px 38px 24px; border-bottom:1px solid var(--line); }
.garment-upload-header h2 { margin:6px 0 10px; font-size:2.125rem; letter-spacing:-.035em; }.garment-upload-header p { margin:0 0 10px; color:var(--muted); }.garment-upload-header small { color:var(--muted); }
.garment-upload-resources { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.garment-upload-resource { min-height:66px; padding:12px 16px; display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:12px; background:#f8f8f6; color:var(--ink); text-decoration:none; }
.garment-upload-resource:hover { border-color:#aeb1ab; transform:translateY(-1px); }.garment-upload-resource > span { display:grid; gap:4px; }.garment-upload-resource strong { font-size:.75rem; }.garment-upload-resource small { font-size:.6875rem; }.garment-upload-resource b { margin-left:auto; font-size:1rem; }
.garment-upload-dialog > form:not(.garment-upload-close) { padding:30px 38px 38px; display:grid; gap:20px; }
.garment-dropzone { min-height:170px; padding:24px; display:grid; place-items:center; gap:14px; border:1px dashed #aaa; border-radius:14px; background:#f8f8f6; color:var(--muted); font-weight:500; cursor:pointer; }
.garment-dropzone strong { color:var(--ink); font-size:.875rem; }.garment-dropzone span { font-size:.75rem; font-weight:500; }
.garment-dropzone input { max-width:100%; }
.garment-upload-list { display:grid; border-top:1px solid var(--line); }
.garment-upload-list > p { margin:0; padding:20px 0; color:var(--muted); }
.garment-upload-list article { min-height:58px; display:flex; align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.garment-upload-list article > span { display:grid; gap:4px; }.garment-upload-list article small { color:var(--muted); }.garment-upload-list article > b { margin-left:auto; font-size:0.6875rem; }.garment-upload-list .uploading,.garment-upload-list .pending { color:#696969; }.garment-upload-list .success { color:#145c3b; }.garment-upload-list .failed { color:#a13c23; }
.garment-upload-actions { min-height:46px; display:flex; align-items:center; gap:20px; }.garment-upload-actions > span { margin-right:auto; color:var(--muted); font-size:0.75rem; }
.outfit-name-field { display:grid; gap:8px; color:var(--muted); font-size:0.6875rem; font-weight:500; }
.outfit-name-field input { min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font:500 0.8125rem var(--sans); }
.outfit-selection-toggle { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.75rem; }
.outfit-variant-list { max-height:320px; margin:0; padding:10px 0 0; overflow:auto; display:grid; border:0; border-top:1px solid var(--line); }
.outfit-variant-list legend { padding:0 0 10px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.outfit-variant-choice { min-height:62px; padding:10px 4px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); cursor:pointer; }
.outfit-variant-choice input { width:18px; height:18px; accent-color:#1b2742; }
.outfit-variant-choice span { display:grid; gap:4px; }.outfit-variant-choice small { color:var(--muted); }
.connected-management { margin-top:24px; padding:26px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.connected-management > h2 { margin:8px 0 20px; font-family:var(--serif); font-size:2.125rem; font-weight:400; }
.connected-list { display:grid; }
.connected-list-row { min-height:62px; padding:12px 0; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); }
.connected-list-row:last-child { border-bottom:0; }
.connected-list-row > span:first-child { min-width:220px; margin-right:auto; display:grid; gap:4px; }
.connected-list-row small { color:var(--muted); }
.connected-list-row select { min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:10px; }
.connected-support-form { align-items:stretch; flex-direction:column; }
.connected-support-form input,.connected-support-form textarea { width:100%; }
.connected-support-form .connected-action { width:max-content; }
.connected-goals { margin-top:28px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.connected-goal { padding:28px; display:grid; gap:14px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.connected-goal:is(button) { width:100%; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.connected-goal:is(button).active { border-color:#6e9468; box-shadow:0 0 0 3px rgba(110,148,104,.13); }
.connected-goal:is(button):disabled { cursor:default; opacity:1; }
.connected-goal > span { color:var(--muted); font-size:0.5625rem; font-weight:500; letter-spacing:.12em; }
.connected-goal > strong { font-size:1.75rem; }
.connected-goal > div { height:10px; overflow:hidden; border-radius:999px; background:#e7e4da; }
.connected-goal > div i { height:100%; display:block; background:var(--lime); }
.connected-goal small { color:var(--muted); }
.connected-status-panel { margin-bottom:24px; }
.connected-status-panel,#notification-preferences { scroll-margin-top:104px; outline:none; }
.connected-status-panel > .connected-attention { margin:20px 0; }
.portal-focus-pulse { animation:portal-focus-pulse 1.8s ease-out; }
@keyframes portal-focus-pulse { 0% { box-shadow:0 0 0 0 rgba(142,179,203,.65); } 55% { box-shadow:0 0 0 9px rgba(142,179,203,.16); } 100% { box-shadow:0 0 0 0 rgba(142,179,203,0); } }
.connected-status-list { display:grid; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.connected-status-row { min-height:74px; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:#fafaf8; }
.connected-status-row:last-child { border-bottom:0; }
.connected-status-row > span { min-width:0; display:grid; gap:4px; }
.connected-status-row strong { font-size:0.8125rem; }
.connected-status-row small { color:var(--muted); font-size:0.6875rem; line-height:1.4; }
.source-restricted { background:#f1f1ee; }
.connected-level { margin:26px 0; padding:32px; color:#fff; border-radius:22px; background:linear-gradient(135deg,#102f27,#183e46 62%,#24375c); }
.connected-level > span { color:#d7f451; font-size:0.625rem; font-weight:500; letter-spacing:.12em; }
.connected-level h2 { margin:8px 0 18px; font-size:clamp(2rem,5vw,3.625rem); letter-spacing:-.05em; }
.connected-level > div,.connected-reward > div { height:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.15); }
.connected-level > div i,.connected-reward > div i { height:100%; display:block; border-radius:inherit; background:#d7f451; }
.connected-level small { margin-top:11px; display:block; color:rgba(255,255,255,.68); }
.connected-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.connected-reward { min-height:280px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:#f6f6f3; }
.connected-reward.is-unlocked { color:#fff; border-color:transparent; background:linear-gradient(145deg,#173b34,#244e63); }
.connected-reward.is-claimed { color:#102f27; border-color:#9bb69a; background:#edf6eb; }
.connected-reward > span { font-size:0.5625rem; font-weight:500; letter-spacing:.11em; opacity:.68; }
.connected-reward h2 { margin:18px 0 8px; font-family:var(--serif); font-size:1.9375rem; font-weight:400; }
.connected-reward p { margin:0 0 22px; color:inherit; opacity:.7; font-size:0.8125rem; line-height:1.45; }
.connected-reward > div { margin-top:auto; background:rgba(29,29,31,.12); }
.connected-reward > small { margin:9px 0 18px; opacity:.68; }
.connected-reward .connected-action { align-self:flex-start; }
.garment-bulk-actions > span { margin-right:auto; color:var(--muted); font-size:0.75rem; font-weight:500; }
.status-dot.warning { background:#e18451; box-shadow:0 0 0 4px rgba(225,132,81,.15); }
.page-view { display: none; padding: clamp(44px,6vw,82px) clamp(24px,4vw,68px) 110px; }
.page-view.active { display: block; animation: reveal .45s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-intro { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; }
.eyebrow, .section-label { margin: 0 0 18px; display: block; color: var(--muted); font-size: 0.5625rem; font-weight:500; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.page-intro h1, .subpage-intro h1 { max-width: 900px; margin-bottom: 20px; font-family: var(--serif); font-size: clamp(2.25rem,4vw,3.5rem); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
h1 em, h2 em { color: var(--cobalt); font-weight: 400; }
.lede { max-width: 650px; margin: 0; color: #3f3f3c; font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.5; }
.intro-actions, .page-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pill-button { min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 1px solid transparent; border-radius: 999px; background: white; font-size: 0.6875rem; font-weight:500; transition: .2s ease; }
.pill-button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0,0,0,.1); }
.pill-button.dark { background: var(--ink); color: white; }
.pill-button.light { background: white; color: var(--ink); }
.pill-button.outline, .pill-button.subtle { border-color: var(--line); background: transparent; }
.pill-button.subtle { min-height: 38px; gap: 8px; background: rgba(255,255,255,.56); }
.full-width { width: 100%; }

.filter-bar { margin: 55px 0 14px; padding: 13px 14px 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.48); }
.filter-copy span, .filter-copy strong { display: block; }
.filter-copy span { color: var(--muted); font-size: 0.5rem; letter-spacing: .12em; }
.filter-copy strong { margin-top: 4px; font-size: 0.6875rem; }
.filters { display: flex; gap: 6px; }
.filters label { position: relative; min-width: 125px; height: 42px; padding: 7px 10px; display: grid; border: 1px solid var(--line); border-radius: 7px; background: white; }
.filters label > span { color: var(--muted); font-size: 0.4375rem; letter-spacing: .08em; text-transform: uppercase; }
.filters select { width: 100%; border: 0; outline: 0; background: transparent; font-size: 0.625rem; font-weight:500; }

.metric-grid { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: 8px; }
.metric-card { position: relative; min-height: 205px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.63); }
.metric-feature { background: var(--cobalt); color: white; border-color: var(--cobalt); }
.metric-card > div:first-child { display: flex; justify-content: space-between; }
.metric-label { color: var(--muted); font-size: 0.5625rem; font-weight:500; letter-spacing: .08em; text-transform: uppercase; }
.metric-feature .metric-label { color: rgba(255,255,255,.82); }
.hint { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 0.5rem; }
.metric-card > strong { margin-top: 32px; display: block; font-family: var(--serif); font-size: clamp(2.625rem,4vw,4.125rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.metric-card > strong small { margin-left: 3px; font-family: var(--sans); font-size: 0.9375rem; }
.metric-card p { margin: 10px 0 0; color: var(--muted); font-size: 0.625rem; }
.metric-feature p { color: rgba(255,255,255,.82); }
.positive { color: #17854a; }
.metric-feature .positive { color: var(--lime); }
.spark-bars { position: absolute; right: 0; bottom: 0; left: 0; height: 47px; display: flex; gap: 3px; align-items: end; opacity: .5; }
.spark-bars i { flex: 1; height: var(--h); background: var(--lime); }
.meter { position: absolute; right: 22px; bottom: 22px; left: 22px; height: 4px; overflow: hidden; background: #dfdfda; }
.meter i { display: block; height: 100%; background: var(--cobalt); }
.micro-line { position: absolute; right: 22px; bottom: 18px; left: 22px; height: 35px; display: flex; align-items: end; gap: 4px; }
.micro-line i { flex: 1; height: 30%; border-top: 2px solid var(--coral); transform: rotate(-4deg); }
.micro-line i:nth-child(2){height:55%}.micro-line i:nth-child(3){height:42%}.micro-line i:nth-child(4){height:74%}.micro-line i:nth-child(5){height:88%}
.return-dots { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; gap: 5px; }
.return-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); opacity: .18; }
.return-dots i:nth-child(-n+3) { opacity: 1; }

.insight-alert { margin: 8px 0; padding: 23px 25px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 20px; background: var(--lime); border-radius: 10px; }
.alert-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--serif); font-size: 1.5rem; }
.insight-alert span { font-size: 0.5rem; font-weight:500; letter-spacing: .13em; }
.insight-alert strong { margin: 4px 0 5px; display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.insight-alert p { max-width: 790px; margin: 0; color: rgba(0,0,0,.66); font-size: 0.6875rem; line-height: 1.45; }
.text-button, .mini-button { border: 0; background: transparent; font-size: 0.625rem; font-weight:500; white-space: nowrap; }
.text-button { padding: 8px 0; border-bottom: 1px solid currentColor; }
.text-button span { margin-left: 25px; }
.mini-button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.panel { padding: clamp(22px,3vw,38px); border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.64); }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.panel-header h2, .readiness-copy h2, .milestones h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem,3.3vw,3.25rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; }
.panel-header.compact h2 { font-size: clamp(1.6875rem,2.5vw,2.4375rem); }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 0.5rem; }
.legend i { width: 8px; height: 8px; margin-right: 5px; display: inline-block; border-radius: 50%; }
.lime { background: var(--lime); }.blue { background: var(--cobalt); }.cobalt{background:var(--cobalt)}.coral{background:var(--coral)}
.adoption-panel { position: relative; min-height: 420px; overflow: hidden; background: var(--ink); color: white; }
.adoption-panel .section-label, .adoption-panel .legend { color: rgba(255,255,255,.76); }
.chart-scale { position: absolute; top: 130px; bottom: 94px; left: 25px; display: flex; flex-direction: column; justify-content: space-between; color: rgba(255,255,255,.68); font-size: 0.5rem; }
.bar-chart { position: absolute; right: 30px; bottom: 72px; left: 65px; height: 230px; display: flex; gap: clamp(10px,2vw,30px); align-items: end; border-bottom: 1px solid rgba(255,255,255,.16); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33% - 1px), rgba(255,255,255,.08) 33%); }
.bar-chart > div { position: relative; flex: 1; height: 100%; display: flex; gap: 3px; align-items: end; }
.bar-chart i, .bar-chart b { width: 50%; height: var(--v); display: block; background: var(--lime); }
.bar-chart b { background: var(--cobalt); }
.bar-chart span { position: absolute; bottom: -24px; left: 50%; color: rgba(255,255,255,.72); font-size: 0.5rem; transform: translateX(-50%); white-space: nowrap; }
.chart-note { position: absolute; bottom: 15px; left: 35px; margin: 0; color: rgba(255,255,255,.72); font-size: 0.5625rem; }
.chart-note b { color: var(--lime); }
.funnel-panel { min-height: 420px; }
.funnel { margin-top: 26px; display: grid; gap: 11px; }
.funnel > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.funnel span, .funnel strong, .funnel small, .funnel b { font-size: 0.5625rem; }
.funnel strong { font-weight:500; }
.funnel i { grid-column: 1 / -1; width: var(--w); height: 12px; display: block; background: var(--cobalt); }
.funnel small { color: var(--muted); }
.funnel b { justify-self: end; margin-top: -15px; color: var(--coral); }
.mix-panel, .garments-panel { min-height: 380px; }
.donut-wrap { margin: 33px 0 24px; display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.donut { width: 145px; aspect-ratio: 1; padding: 21px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--cobalt) 0 62%,var(--coral) 62% 100%); }
.donut::before { content:""; grid-area: 1/1; width:100%; height:100%; border-radius:50%; background:var(--paper); }
.donut span { z-index: 1; grid-area: 1 / 1; text-align: center; color: var(--muted); font-size: 0.5rem; }
.donut strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 1.75rem; font-weight: 400; }
.donut-key { display: grid; gap: 16px; }
.donut-key > div { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; }
.donut-key i { width: 8px; height: 8px; border-radius: 50%; }
.donut-key span, .donut-key small { display: block; font-size: 0.625rem; }
.donut-key small { margin-top: 3px; color: var(--muted); font-size: 0.5rem; }
.panel-insight { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.625rem; line-height: 1.5; }
.panel-insight b { color: var(--ink); }
.rank-list { margin-top: 35px; display: grid; }
.rank-list > div { min-height: 45px; display: grid; grid-template-columns: 24px 120px 1fr 50px; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.rank-list span { color: var(--muted); font-size: 0.5rem; }
.rank-list strong { font-family: var(--serif); font-size: 0.9375rem; font-weight: 400; }
.rank-list i { height: 5px; background: #dfdfda; }
.rank-list i b { display: block; height:100%; background: var(--coral); }
.rank-list em { font-size: 0.5625rem; font-style: normal; text-align: right; }
.small-stat-row { display: flex; gap: 30px; padding-top: 16px; color: var(--muted); font-size: 0.5625rem; }
.small-stat-row b { margin-right: 4px; color: var(--ink); font-family: var(--serif); font-size: 1.1875rem; font-weight: 400; }
.retention-panel { grid-column: 1 / -1; }
.cohort { margin-top: 34px; display: grid; gap: 5px; }
.cohort > div { display: grid; grid-template-columns: 120px repeat(4,1fr); gap: 5px; align-items: center; }
.cohort span { font-size: 0.5625rem; }
.cohort i { min-height: 42px; display: grid; place-items: center; background: color-mix(in srgb,var(--cobalt) var(--v),#edf0ef); color: white; font-size: 0.5rem; font-style: normal; }
.cohort i.empty { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.cohort-labels { display: grid; grid-template-columns: 120px repeat(4,1fr); gap: 5px; margin-top: 7px; color: var(--muted); font-size: 0.4375rem; text-align: center; }

.readiness-section { margin-top: 8px; min-height: 530px; display: grid; grid-template-columns: .9fr 1.1fr; background: var(--cobalt); color: white; }
.readiness-copy { padding: clamp(40px,6vw,80px); display: flex; flex-direction: column; justify-content: center; }
.readiness-copy .eyebrow { color: rgba(255,255,255,.78); }
.readiness-copy h2 { font-size: clamp(2.875rem,5.2vw,4.75rem); }
.readiness-copy h2 em { color: var(--lime); }
.readiness-copy p:not(.eyebrow) { max-width: 540px; margin: 28px 0 4px; color: rgba(255,255,255,.82); font-size: 0.8125rem; line-height: 1.6; }
.readiness-copy .pill-button { margin-top: 28px; align-self: flex-start; }
.connection-list { padding: 42px; display: grid; align-content: center; background: var(--blue-dark); }
.connection-list > div { min-height: 76px; display: grid; grid-template-columns: 13px 1fr auto; gap: 15px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); }
.connection-status { width: 9px; height: 9px; border-radius: 50%; }
.connection-status.live { background: var(--lime); }
.connection-status.pending { border: 1px solid var(--coral); }
.connection-status.optional { border: 1px solid rgba(255,255,255,.3); }
.connection-list strong, .connection-list small { display: block; }
.connection-list strong { font-family: var(--serif); font-size: 1.0625rem; font-weight: 400; }
.connection-list small { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 0.5rem; }
.connection-list b { color: var(--lime); font-size: 0.5rem; text-transform: uppercase; }
.connection-list button { padding: 6px 0; border: 0; border-bottom: 1px solid white; background: transparent; color: white; font-size: 0.5625rem; }

.milestones { padding: 90px 0 20px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.milestone-track { display: grid; grid-template-columns: repeat(4,1fr); }
.milestone-track article { min-height: 230px; padding: 22px; display: flex; flex-direction: column; border-top: 1px solid var(--ink); border-right: 1px solid var(--line); }
.milestone-track article:last-child { border-right: 0; }
.milestone-track span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 0.5625rem; }
.milestone-track small { margin-top: 38px; color: var(--muted); font-size: 0.5rem; text-transform: uppercase; }
.milestone-track strong { margin-top: 10px; font-family: var(--serif); font-size: 1.4375rem; font-weight: 400; }
.milestone-track p { margin: auto 0 0; color: var(--muted); font-size: 0.5625rem; }
.milestone-track .current { background: var(--lime); }
.milestone-track .complete span { background: var(--ink); color: white; }

.subpage-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; padding-bottom: 60px; border-bottom: 1px solid var(--ink); }
.subpage-intro h1 { margin-bottom: 0; }
.subpage-intro > p { max-width: 520px; margin: 0 0 8px; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.analytics-tabs { position: sticky; z-index: 50; top: 76px; margin: 0 0 8px; display: flex; overflow-x: auto; background: var(--cream); border-bottom: 1px solid var(--line); }
.analytics-tabs button { min-height: 60px; padding: 0 22px; flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 0.625rem; }
.analytics-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--cobalt); font-weight:500; }
.analytics-content { display: none; }
.analytics-content.active { display: block; animation: reveal .35s ease both; }
.analysis-hero { min-height: 530px; display: grid; grid-template-columns: .6fr 1.4fr; gap: 60px; align-items: center; background: var(--ink); color: white; }
.analysis-copy > strong { display: block; font-family: var(--serif); font-size: clamp(4.75rem,8vw,7.5rem); font-weight: 400; }
.analysis-copy p { max-width: 280px; color: rgba(255,255,255,.62); font-size: 0.8125rem; line-height: 1.5; }
.analysis-hero .section-label { color: rgba(255,255,255,.45); }
.analysis-hero .funnel i { background: var(--lime); }
.analysis-hero .funnel small { color: rgba(255,255,255,.45); }
.analysis-hero .funnel b { color: var(--coral); }
.funnel.detailed { margin: 0; }
.funnel.detailed > div { gap: 5px 14px; }
.funnel.detailed i { height: 20px; }
.two-up, .three-up { margin-top: 8px; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.three-up { grid-template-columns: repeat(3,1fr); }
.two-up .panel { min-height: 330px; }
.abandon-list { margin-top: 38px; }
.abandon-list > div { padding: 20px 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; border-top: 1px solid var(--line); }
.abandon-list > div > b { font-size: 0.5625rem; }
.abandon-list strong, .abandon-list small { display:block; }
.abandon-list strong { font-family: var(--serif); font-size: 1.25rem; font-weight:400; }
.abandon-list small { margin-top:4px; color:var(--muted); font-size:0.5rem; }
.abandon-list em { font-size:0.625rem; font-style:normal; }
.recommendation { background: var(--lime); }
.recommendation h2 { margin: 45px 0 16px; font-family: var(--serif); font-size: 2.6875rem; font-weight:400; }
.recommendation p { max-width: 560px; color: rgba(0,0,0,.65); font-size:0.75rem; line-height:1.6; }
.comparison-table { margin-top:8px; }
.table-row { min-height: 66px; display:grid; grid-template-columns:1.4fr repeat(4,1fr); align-items:center; gap:12px; border-top:1px solid var(--line); font-size:0.8125rem; }
.table-row.head { margin-top:30px; color:var(--muted); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.07em; }
.category-feature { min-height:520px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:var(--coral); color:white; }
.category-feature h2 { margin:20px 0; font-family:var(--serif); font-size:clamp(3rem,5vw,4.625rem); font-weight:400; line-height:.9; }
.category-feature p { max-width:520px; color:rgba(255,255,255,.7); line-height:1.6; }
.category-feature .section-label { color:rgba(255,255,255,.6); }
.category-orbits { position:relative; min-height:360px; }
.category-orbits span { position:absolute; display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; font-family:var(--serif); font-size:2.5rem; }
.orbit-one { width:260px; height:260px; top:20px; left:10%; background:var(--cobalt); }
.orbit-two { width:190px; height:190px; right:4%; bottom:10px; background:var(--ink); }
.orbit-three { width:120px; height:120px; left:2%; bottom:0; background:var(--sand); color:var(--ink); }
.retention-deep { min-height:500px; display:grid; grid-template-columns:.65fr 1.35fr; gap:60px; align-items:center; background:var(--blue-dark); color:white; }
.retention-deep > div:first-child > strong { font-family:var(--serif); font-size:5.625rem; font-weight:400; }
.retention-deep .section-label, .retention-deep p { color:rgba(255,255,255,.55); }
.retention-curve { display:grid; gap:17px; }
.retention-curve > div { display:grid; grid-template-columns:45px 1fr 80px; align-items:center; gap:12px; }
.retention-curve span,.retention-curve small { font-size:0.5625rem; }
.retention-curve i { width:var(--w); height:18px; display:block; background:var(--lime); }

.page-actions { margin:25px 0; justify-content:flex-end; }
.garment-summary { margin-bottom:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.garment-summary article { padding:24px; border:1px solid var(--line); background:rgba(255,255,255,.6); border-radius:10px; }
.garment-summary span,.garment-summary small { display:block; color:var(--muted); font-size:0.5625rem; }
.garment-summary strong { margin:22px 0 6px; display:block; font-family:var(--serif); font-size:2.625rem; font-weight:400; }
.table-tools { display:flex; gap:7px; }
.table-tools input { min-width:230px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:white; font-size:0.625rem; }
.garment-row { min-height:78px; display:grid; grid-template-columns:1.8fr 1fr repeat(4,.7fr); gap:12px; align-items:center; border-top:1px solid var(--line); font-size:0.8125rem; }
.garment-row.head { margin-top:30px; min-height:48px; color:var(--muted); font-size:0.6875rem; text-transform:uppercase; }
.garment-row > span:first-child { display:flex; align-items:center; gap:12px; }
.garment-row strong,.garment-row small { display:block; }
.garment-row small { margin-top:3px; color:var(--muted); font-size:0.6875rem; }
.swatch { width:38px; height:46px; border-radius:4px; }
.coral-swatch{background:var(--coral)}.blue-swatch{background:var(--cobalt)}.sand-swatch{background:var(--sand)}.ink-swatch{background:var(--ink)}
.tag { width:fit-content; padding:5px 8px; border-radius:999px; font-size:0.5rem; }
.live-tag { background:rgba(60,170,100,.12); color:#13783f; }
.warning-tag { background:rgba(255,104,71,.13); color:#b83d20; }

.integration-hero { display:grid; grid-template-columns:.8fr 1.2fr; min-height:460px; background:var(--cobalt); color:white; }
.integration-hero > div:first-child { padding:60px; display:flex; flex-wrap:wrap; align-content:center; }
.integration-hero > div:first-child strong { font-family:var(--serif); font-size:7.5rem; font-weight:400; }
.integration-hero > div:first-child small { align-self:center; color:rgba(255,255,255,.5); font-size:1.25rem; }
.integration-hero > div:first-child p { width:100%; color:rgba(255,255,255,.65); line-height:1.5; }
.integration-hero .section-label { width:100%; color:rgba(255,255,255,.55); }
.launch-checklist { padding:40px; display:grid; align-content:center; background:var(--blue-dark); }
.launch-checklist > div { min-height:78px; display:grid; grid-template-columns:30px 1fr auto; gap:15px; align-items:center; border-bottom:1px solid rgba(255,255,255,.15); }
.launch-checklist > div > span { width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-size:0.625rem; }
.launch-checklist .done > span { background:var(--lime); border-color:var(--lime); color:var(--ink); }
.launch-checklist strong,.launch-checklist small { display:block; }
.launch-checklist strong { font-family:var(--serif); font-size:1.125rem; font-weight:400; }
.launch-checklist small { margin-top:4px; color:rgba(255,255,255,.45); font-size:0.5rem; }
.launch-checklist b { color:var(--lime); font-size:0.5rem; text-transform:uppercase; }
.launch-checklist button { border:0; border-bottom:1px solid white; background:none; color:white; font-size:0.5625rem; }
.integration-cards .panel,.support-cards .panel { min-height:290px; display:flex; flex-direction:column; }
.integration-cards h2,.support-cards h2 { margin:35px 0 14px; font-family:var(--serif); font-size:2.125rem; font-weight:400; }
.integration-cards p,.support-cards p { color:var(--muted); font-size:0.6875rem; line-height:1.5; }
.integration-cards .text-button,.support-cards .text-button { margin-top:auto; align-self:flex-start; }
.billing-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:8px; }
.billing-grid .panel { min-height:330px; }
.billing-main > strong,.invoice-card > strong { margin-top:45px; display:block; font-family:var(--serif); font-size:4.375rem; font-weight:400; }
.billing-main p,.invoice-card p { color:var(--muted); }
.billing-meter { height:10px; margin-top:45px; background:#dddcd6; }
.billing-meter i { height:100%; display:block; background:var(--cobalt); }
.billing-main > div:last-child { margin-top:9px; display:flex; justify-content:space-between; color:var(--muted); font-size:0.5625rem; }
.invoice-card { background:var(--lime); }
.invoice-card .pill-button { margin-top:32px; }
.team-table .table-row { grid-template-columns:1.5fr 1fr 1fr .7fr .5fr; }
.team-table .table-row strong small { display:block; margin-top:4px; color:var(--muted); font-size:0.5rem; font-weight:400; }
.row-action { width:fit-content; padding:5px 0; border:0; border-bottom:1px solid currentColor; background:transparent; font-size:0.5625rem; }
.garment-row button.tag { border:0; text-align:left; }
.preview-activity,.state-panel { margin-top:8px; }
.preview-activity .panel-header,.state-panel { align-items:flex-start; }
.preview-activity .panel-header p { max-width:650px; }
.activity-list,.state-list { margin-top:24px; border-top:1px solid var(--line); }
.activity-list > div,.state-list > div { min-height:62px; padding:13px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.activity-list strong,.activity-list small,.state-list strong,.state-list small { display:block; }
.activity-list strong,.state-list strong { font-size:0.8125rem; }
.activity-list small,.state-list small { margin-top:4px; color:var(--muted); font-size:0.5625rem; }
.activity-list time,.state-list b { color:var(--muted); font-size:0.5rem; font-weight:500; white-space:nowrap; }
.empty-state { margin:18px 0 0; color:var(--muted); font-size:0.625rem; }
.support-hero { padding:30px 0 90px; text-align:center; }
.support-hero h1 { max-width:900px; margin:0 auto 32px; font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.5rem); font-weight:400; line-height:.96; letter-spacing:-.042em; }
.support-search { max-width:720px; margin:auto; display:flex; border-bottom:1px solid var(--ink); }
.support-search input { flex:1; padding:17px 0; border:0; outline:0; background:transparent; font-size:0.9375rem; }
.support-search button { border:0; background:none; font-weight:500; }
.support-cards > article:nth-child(2) { background:var(--cobalt); color:white; }
.support-cards > article:nth-child(2) p { color:rgba(255,255,255,.6); }

.drawer-overlay { position:fixed; z-index:149; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.25s ease; }
.drawer-overlay.open { opacity:1; visibility:visible; }
.notification-drawer { position:fixed; z-index:150; top:0; right:0; width:min(420px,100%); height:100vh; padding:30px; display:flex; flex-direction:column; background:var(--paper); transform:translateX(105%); transition:.35s cubic-bezier(.2,.8,.2,1); box-shadow:-30px 0 80px rgba(0,0,0,.18); }
.notification-drawer.open { transform:none; }
.drawer-header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:25px; border-bottom:1px solid var(--line); }
.drawer-header h2 { margin:0; font-family:var(--serif); font-size:2.625rem; font-weight:400; }
.notification-list { flex:1; overflow:auto; }
.notification-list article { padding:23px 0; display:grid; grid-template-columns:38px 1fr; gap:14px; border-bottom:1px solid var(--line); }
.notification-list article.unread { position:relative; }
.notification-list article.unread::after { content:""; position:absolute; right:0; top:27px; width:6px; height:6px; border-radius:50%; background:var(--coral); }
.notification-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; }
.lime-bg{background:var(--lime)}.coral-bg{background:var(--coral);color:white}.blue-bg{background:var(--cobalt);color:white}
.notification-list strong { font-family:var(--serif); font-size:1rem; font-weight:400; }
.notification-list p { margin:6px 0; color:var(--muted); font-size:0.625rem; }
.notification-list small { color:var(--muted); font-size:0.5rem; }
.notification-list button { padding:0; border:0; background:transparent; color:var(--ink); font:500 0.625rem var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.notification-list button:disabled { color:var(--muted); cursor:default; text-decoration:none; }
.attention-bg { color:#7d351f; background:#ffd9cc; }
.notification-empty { min-height:280px; padding:52px 20px; display:grid; place-items:center; align-content:center; gap:9px; text-align:center; }
.notification-empty > span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#145c3b; background:#eaf8f0; font-weight:500; }
.notification-empty strong { font:500 1.25rem var(--sans); }
.notification-empty p { max-width:260px; margin:0; font-size:0.6875rem; line-height:1.5; }
.notification-actions { display:grid; gap:9px; padding-top:16px; border-top:1px solid var(--line); }

.command-palette { position:fixed; z-index:200; inset:0; padding:12vh 20px 20px; display:flex; justify-content:center; background:rgba(0,0,0,.62); opacity:0; visibility:hidden; backdrop-filter:blur(8px); transition:.2s ease; }
.command-palette.open { opacity:1; visibility:visible; }
.command-box { width:min(650px,100%); height:fit-content; padding:10px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:var(--ink-2); color:white; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.command-input { height:58px; padding:0 10px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; border-bottom:1px solid rgba(255,255,255,.12); }
.command-input input { border:0; outline:0; background:transparent; color:white; font-size:0.9375rem; }
.command-close { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(255,255,255,.08); color:white; font:400 1.5rem/1 var(--sans); cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.command-close:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.16); transform:scale(1.04); }
.command-close:focus-visible { outline:2px solid white; outline-offset:3px; }
.command-box > p { margin:15px 11px 8px; color:rgba(255,255,255,.35); font-size:0.5rem; letter-spacing:.12em; }
.command-box > button { width:100%; padding:13px; display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:center; border:0; border-radius:7px; background:transparent; color:white; text-align:left; }
.command-box > button:hover { background:rgba(255,255,255,.08); }
.command-box > button span { font-family:var(--serif); font-size:1.0625rem; }
.command-box > button small { color:rgba(255,255,255,.45); }

.portal-modal { width:min(540px,calc(100% - 28px)); padding:0; border:0; border-radius:18px; background:var(--paper); box-shadow:0 40px 100px rgba(0,0,0,.35); }
.portal-modal::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(6px); }
.portal-modal form { position:relative; padding:38px; }
.modal-close { position:absolute; top:18px; right:18px; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:1.25rem; }
.portal-modal h2 { margin:12px 0; font-family:var(--serif); font-size:2.8125rem; font-weight:400; line-height:.92; }
.portal-modal form > p:not(.eyebrow) { color:var(--muted); font-size:0.75rem; line-height:1.55; }
.modal-options { margin:25px 0; display:grid; }
.modal-options button { min-height:68px; padding:10px 5px; display:grid; grid-template-columns:1fr 1.4fr auto; gap:10px; align-items:center; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; }
.modal-options button span { font-family:var(--serif); font-size:1rem; }
.modal-options button small { color:var(--muted); font-size:0.5625rem; }
.modal-options button[aria-pressed="true"] { background:rgba(184,215,236,.22); }
.modal-fields { margin:0 0 22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.modal-fields:empty { display:none; }
.modal-fields label { display:grid; gap:6px; color:var(--muted); font-size:0.5rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.modal-fields label:has(textarea),.modal-fields label:has(input[type="file"]) { grid-column:1 / -1; }
.modal-fields input,.modal-fields select,.modal-fields textarea { width:100%; min-height:45px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font-size:0.6875rem; text-transform:none; letter-spacing:0; }
.modal-fields textarea { min-height:92px; resize:vertical; }
.modal-result { min-height:0; margin:-8px 0 14px; color:#a33c28; font-size:0.625rem; }
.modal-result:empty { display:none; }

.toast { position:fixed; z-index:250; right:20px; bottom:20px; width:min(330px,calc(100% - 40px)); padding:14px; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; border-radius:10px; background:var(--ink); color:white; transform:translateY(140%); opacity:0; transition:.3s ease; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.toast.show { transform:none; opacity:1; }
.toast > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:var(--ink); }
.toast strong,.toast small { display:block; }
.toast strong { font-family:var(--serif); font-size:1.0625rem; line-height:1.2; letter-spacing:0; font-weight:400; }
.toast small { margin-top:4px; color:rgba(255,255,255,.48); font-size:0.75rem; line-height:1.2; }
.toast p { margin:0; }

.login-screen { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; background:var(--ink); color:white; }
.login-art { position:relative; padding:45px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:radial-gradient(circle at 18% 80%,rgba(255,104,71,.85) 0 12%,transparent 13%),radial-gradient(circle at 72% 16%,rgba(22,70,229,.9) 0 20%,transparent 21%),linear-gradient(125deg,#0b0b0c,#071a44 55%,#2c190e); }
.login-art::before { content:""; position:absolute; width:58vw; aspect-ratio:1; left:-16vw; bottom:-36vw; border:1px solid rgba(200,255,52,.5); border-radius:50%; box-shadow:0 0 0 80px rgba(200,255,52,.04),0 0 0 160px rgba(200,255,52,.025); }
.login-art .wordmark { z-index:1; }
.login-statement { position:relative; z-index:1; max-width:720px; }
.login-statement span { color:var(--lime); font-size:0.5625rem; letter-spacing:.15em; }
.login-statement h1 { margin:18px 0; font-family:var(--serif); font-size:clamp(4rem,8vw,7.75rem); font-weight:400; line-height:.76; letter-spacing:-.06em; }
.login-statement p { max-width:480px; color:rgba(255,255,255,.6); line-height:1.5; }
.login-panel { margin:12px; padding:clamp(35px,6vw,80px); display:flex; flex-direction:column; justify-content:center; border-radius:30px; background:var(--paper); color:var(--ink); }
.login-panel .back-site { position:absolute; top:35px; border:0; background:transparent; font-size:0.625rem; }
.login-panel h2 { margin:18px 0 12px; font-family:var(--serif); font-size:3.625rem; font-weight:400; letter-spacing:-.04em; }
.login-panel > p { color:var(--muted); line-height:1.5; }
.login-form { margin-top:30px; display:grid; gap:18px; }
.login-form label { display:grid; gap:7px; font-size:0.5625rem; font-weight:500; text-transform:uppercase; letter-spacing:.09em; }
.login-form input { min-height:52px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:white; }
.login-form .pill-button { min-height:54px; }
.login-error { margin:0; padding:10px 12px; border:1px solid #e2b6a8; border-radius:8px; background:#fff0eb; color:#8a321d; font-size:0.6875rem; text-transform:none; letter-spacing:0; }
.login-recovery-row { margin-top:-8px; display:flex; justify-content:flex-end; }
.forgot-password-button,.password-reset-back { padding:4px 0; border:0; background:transparent; color:var(--ink); font-size:0.6875rem; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.password-reset-panel[hidden],#sign-in-panel[hidden],.password-reset-success[hidden],.password-reset-panel .login-form[hidden] { display:none; }
.password-reset-panel > p:not(.eyebrow) { color:var(--muted); line-height:1.5; }
.password-reset-back { margin-bottom:24px; }
.password-reset-success { margin-top:30px; padding:24px; display:grid; gap:12px; border:1px solid var(--line); background:#fff; }
.password-reset-success > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#b8d7ec; font-weight:500; }
.password-reset-success strong { font-size:1.125rem; }
.password-reset-success p { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.password-reset-success .text-button { justify-self:start; padding:0; color:var(--ink); font-size:0.6875rem; font-weight:500; text-decoration:underline; }
.login-provider-note { margin:14px 0 0; color:var(--muted); font-size:0.625rem; line-height:1.45; text-align:center; }
.login-socials { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.login-socials button { min-height:48px; border:1px solid var(--line); border-radius:999px; background:transparent; font-size:0.625rem; }
.login-provider-section { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.provider-profile { margin-bottom:14px; border:1px solid var(--line); background:rgba(255,255,255,.42); }
.provider-profile summary { padding:13px 14px; cursor:pointer; color:var(--ink); font-size:0.625rem; font-weight:500; letter-spacing:.04em; }
.provider-profile-form { grid-template-columns:1fr 1fr; margin:0; padding:0 14px 14px; gap:12px; }
.provider-profile-form label span { color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; }
.provider-profile-form input { min-height:44px; }
.provider-profile-form > p { grid-column:1 / -1; margin:0; color:var(--muted); font-size:0.625rem; line-height:1.5; }
.connected-socials { grid-template-columns:1fr; margin-top:0; }
.provider-slot { min-height:44px; display:grid; place-items:center; color:var(--muted); font-size:0.625rem; }
.provider-slot > div,.provider-slot iframe { max-width:100%; }
.google-provider iframe { width:300px; height:44px; border:0; display:block; background:transparent; }
.provider-button { width:100%; min-height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:0.625rem; font-weight:500; }
.provider-button:disabled { cursor:wait; opacity:.55; }
.login-socials .apple-provider { color:white; border-color:#111; background:#111; }
.provider-icon { display:block; flex:0 0 auto; object-fit:contain; }
.provider-icon-apple,.provider-icon-shopify { width:24px; height:24px; }
.shopify-login-form { margin-top:10px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.shopify-login-form label { display:grid; gap:7px; color:var(--muted); font-size:0.5rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.shopify-login-form input { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:0.6875rem; text-transform:none; }
.shopify-login-form .provider-button { width:auto; white-space:nowrap; }
.provider-status { min-height:16px; margin:9px 0 0; color:var(--muted); font-size:0.5625rem; text-align:center; }
.login-note { margin-top:24px; font-size:0.5625rem; text-align:center; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 230px minmax(0,1fr); }
  .sidebar { padding:30px 16px 18px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .metric-card { min-height:190px; }
  .filter-bar { align-items:flex-start; flex-direction:column; }
  .filters { width:100%; display:grid; grid-template-columns:repeat(4,1fr); }
  .analysis-hero { grid-template-columns:1fr; }
  .milestones { grid-template-columns:1fr; }
}

@media (max-width: 1300px) {
  .prototype-ribbon { top:auto; right:12px; bottom:12px; }
}

@media (max-width: 880px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; z-index:151; left:0; width:min(300px,85vw); height:100dvh; padding:28px 22px 22px; transform:translateX(-105%); transition:.3s ease; }
  /* Shadow only while open: closed, the sidebar sits just off-screen and a
     30px/80px shadow would bleed a gray fade along the left edge. */
  .sidebar.open { transform:none; box-shadow:30px 0 80px rgba(0,0,0,.35); }
  .brand-block { justify-items:start; padding:0 9px 28px; }
  .brand-block .wordmark { font-size:1.5625rem; }
  .brand-block > span,.nav-item > span:nth-child(2),.nav-item b,.main-nav p,.health-mini,.user-chip > span:nth-child(2),.user-chip > span:last-child { display:initial; }
  .main-nav { display:grid; }
  .nav-item { grid-template-columns:27px 1fr auto; justify-items:start; padding:0 11px; }
  .user-chip { grid-template-columns:34px 1fr auto; justify-items:stretch; }
  .mobile-menu { display:grid; gap:3px; }
  .mobile-menu span { width:15px; height:1px; display:block; background:var(--ink); }
  .topbar { padding:0 18px; }
  .workspace-picker { margin-right:auto; margin-left:12px; }
  .search-button,.pill-button.subtle { display:none; }
  .page-intro,.subpage-intro { grid-template-columns:1fr; gap:25px; }
  .page-intro h1,.subpage-intro h1 { font-size:clamp(2.25rem,8vw,3.25rem); }
  .intro-actions { justify-content:flex-start; }
  .dashboard-grid { grid-template-columns:1fr; }
  .retention-panel { grid-column:auto; }
  .readiness-section { grid-template-columns:1fr; }
  .milestone-track { grid-template-columns:repeat(2,1fr); }
  .milestone-track article:nth-child(2) { border-right:0; }
  .three-up { grid-template-columns:1fr; }
  .category-feature,.retention-deep,.integration-hero { grid-template-columns:1fr; }
  .billing-grid { grid-template-columns:1fr; }
  .garment-row { grid-template-columns:1.6fr 1fr repeat(2,.7fr); }
  .garment-row > *:nth-child(5),.garment-row > *:nth-child(6) { display:none; }
  .login-screen { grid-template-columns:1fr; }
  .connected-overview-head { grid-template-columns:1fr; gap:24px; }
  .garment-portal-head { grid-template-columns:1fr; gap:24px; }
  .live-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .connected-table { overflow-x:auto; }
  .connected-table-head,.connected-table-row { min-width:760px; }
  .login-art { min-height:52vh; }.login-panel { min-height:55vh; margin:-30px 0 0; border-radius:30px 30px 0 0; z-index:2; }
}

@media (max-width: 620px) {
  .prototype-ribbon { display:none; }
  .topbar { min-height:66px; }.workspace-mark { width:30px;height:30px; }.workspace-picker strong { font-size:0.625rem; }
  .page-view { padding:35px 14px 90px; }
  .data-source-status { margin:14px; }
  .connected-overview { padding:35px 14px 90px; }
  .connected-overview-head h1 { font-size:clamp(2.25rem,9vw,3rem); line-height:.98; letter-spacing:-.04em; }
  .stage-sample-callout { padding:18px; align-items:flex-start; flex-direction:column; }
  .live-metric-grid { grid-template-columns:1fr; }
  .connected-section-head { align-items:flex-start; flex-direction:column; }
  .connected-source-grid { grid-template-columns:1fr; }
  .connected-attention { padding:16px; }
  .connected-attention .connected-source-grid { grid-template-columns:1fr; }
  .connected-goals { grid-template-columns:1fr; }
  .connected-rewards { grid-template-columns:1fr; }
  .connected-status-row { align-items:flex-start; flex-direction:column; gap:10px; }
  .connected-list-row { align-items:flex-start; flex-direction:column; }
  .connected-list-row > span:first-child { min-width:0; margin-right:0; }
  .connected-toolbar,.connected-inline-form { align-items:stretch; flex-direction:column; }
  .garment-assets-toolbar { grid-template-columns:minmax(0,1fr) 54px; }.garment-upload-open { grid-column:1/-1; }
  .garment-upload-header,.garment-upload-dialog > form:not(.garment-upload-close) { padding-right:22px; padding-left:22px; }
  .garment-upload-resources { grid-template-columns:1fr; }
  .connected-profile { align-items:flex-start; flex-wrap:wrap; }
  .connected-profile .connected-action { width:100%; margin-left:0; }
  .page-intro h1,.subpage-intro h1 { font-size:2.625rem; line-height:.94; }
  .lede,.subpage-intro > p { font-size:0.875rem; }
  .filter-bar { margin-top:38px; padding:12px; }
  .filters { grid-template-columns:1fr 1fr; }
  .filters label { min-width:0; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-card { min-height:165px; padding:17px; }
  .metric-card > strong { margin-top:24px; font-size:2.375rem; }
  .metric-card p { font-size:0.5rem; }
  .insight-alert { grid-template-columns:34px 1fr; padding:18px; }
  .alert-mark { width:34px;height:34px; }
  .insight-alert strong { font-size:1.1875rem; }
  .insight-alert .text-button { grid-column:1/-1; justify-self:start; }
  .panel { padding:22px 18px; }
  .panel-header { flex-direction:column; }
  .adoption-panel,.funnel-panel { min-height:420px; }
  .bar-chart { right:18px;left:45px;gap:8px; }
  .chart-scale { left:14px; }
  .donut-wrap { grid-template-columns:110px 1fr; gap:16px; }
  .donut { width:110px; }
  .rank-list > div { grid-template-columns:20px 100px 1fr; }
  .rank-list em { display:none; }
  .cohort > div,.cohort-labels { grid-template-columns:75px repeat(4,1fr); }
  .cohort i { min-height:34px; font-size:0.4375rem; }
  .readiness-copy,.connection-list { padding:34px 22px; }
  .connection-list > div { grid-template-columns:11px 1fr auto; }
  .milestones { gap:35px; padding-top:65px; }
  .milestone-track { grid-template-columns:1fr; }
  .milestone-track article { min-height:190px; border-right:0; }
  .analysis-hero { gap:35px; }
  .two-up { grid-template-columns:1fr; }
  .analysis-copy > strong { font-size:4.6875rem; }
  .table-row { grid-template-columns:1.4fr 1fr 1fr; }
  .comparison-table .table-row > *:nth-child(4),.comparison-table .table-row > *:nth-child(5) { display:none; }
  .category-orbits { min-height:300px; }
  .orbit-one { width:210px;height:210px; }.orbit-two{width:150px;height:150px}.orbit-three{width:90px;height:90px}
  .retention-curve > div { grid-template-columns:38px 1fr 58px; }
  .garment-summary { grid-template-columns:1fr; }
  .table-tools { width:100%; }.table-tools input { min-width:0; width:100%; }
  .garment-row { grid-template-columns:1.7fr 1fr .7fr; }
  .garment-row > *:nth-child(4),.garment-row > *:nth-child(5),.garment-row > *:nth-child(6) { display:none; }
  .integration-hero > div:first-child,.launch-checklist { padding:32px 22px; }
  .integration-hero > div:first-child strong { font-size:5.625rem; }
  .team-table .table-row { grid-template-columns:1.4fr 1fr .7fr .45fr; }
  .team-table .table-row > *:nth-child(3) { display:none; }
  .portal-modal form { padding:32px 22px; }
  .modal-options button { grid-template-columns:1fr auto; }
  .modal-options button small { display:none; }
  .modal-fields { grid-template-columns:1fr; }
  .modal-fields label { grid-column:1; }
  .activity-list > div,.state-list > div { align-items:flex-start; flex-direction:column; gap:7px; }
  .login-art { padding:28px 20px;min-height:44vh; }.login-statement h1{font-size:3.625rem}.login-statement p{font-size:0.75rem}.login-panel{padding:65px 22px 30px}.login-panel h2{font-size:2.875rem}.login-socials{grid-template-columns:1fr}
  .provider-profile-form { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .portal-focus-pulse { animation:none; box-shadow:0 0 0 3px rgba(142,179,203,.35); }
}

/* Website 3.0 parity layer — sourced from the reviewed public-website release. */
body { background:#f5f5f7; letter-spacing:-.012em; }
:focus-visible { outline-color:#8eb3cb; }
.prototype-ribbon { border-color:rgba(255,255,255,.15); background:rgba(5,5,5,.86); font-weight:500; backdrop-filter:blur(18px) saturate(130%); }
.status-dot { background:#b8d7ec; box-shadow:0 0 0 4px rgba(184,215,236,.14); }

.app-shell { grid-template-columns:260px minmax(0,1fr); }
.sidebar { padding:30px 22px 22px; background:#050505; border-color:rgba(255,255,255,.14); }
.brand-block { gap:4px; padding-bottom:27px; }
.wordmark { font-size:1.5rem; font-weight:500; letter-spacing:-.055em; }
.brand-block > span,.main-nav p { color:rgba(255,255,255,.7); font-weight:500; }
.nav-item { min-height:48px; border-radius:999px; color:rgba(255,255,255,.82); font-size:0.875rem; }
.nav-item:hover { background:rgba(255,255,255,.08); }
.nav-item.active { color:#1d1d1f; background:#fff; font-weight:500; }
.nav-item b { color:#1d1d1f; background:#b8d7ec; }
.health-mini { border-radius:18px; }
.health-mini i { background:#b8d7ec; }
.avatar { color:#1d1d1f; background:#b8d7ec; }

.topbar { min-height:78px; background:rgba(245,245,247,.88); backdrop-filter:blur(18px) saturate(135%); }
.workspace-mark { color:#1d1d1f; background:#d8d8d6; font-family:var(--sans); font-weight:500; }
.search-button,.icon-button,.pill-button.subtle { background:rgba(255,255,255,.74); }
.icon-button i { color:#1d1d1f; background:#b8d7ec; }
.page-view { padding-top:clamp(62px,7vw,104px); }
.page-intro { align-items:end; }
.page-intro h1,.subpage-intro h1,.support-hero h1 { font-family:var(--sans); font-weight:500; line-height:.86; letter-spacing:-.067em; }
h1 em,h2 em { color:inherit; font-family:var(--serif); font-style:normal; font-weight:400; letter-spacing:-.055em; }
.lede,.subpage-intro > p { color:#6e6e73; }
.pill-button { min-height:48px; padding:0 22px; gap:18px; font-size:0.75rem; font-weight:500; }
.pill-button.dark { background:#1d1d1f; }
.pill-button.outline { background:rgba(255,255,255,.52); }
.filter-bar { margin-top:64px; padding:16px 16px 16px 20px; border-radius:22px; background:rgba(255,255,255,.65); }
.filters label { border-radius:14px; }

.metric-grid,.dashboard-grid { gap:12px; }
.metric-card,.panel { border-radius:22px; background:#fff; }
.metric-card { min-height:220px; padding:26px; }
.metric-feature { color:#fff; background:#1d1d1f; border-color:#1d1d1f; }
.metric-card > strong,.donut strong,.small-stat-row b,.analysis-copy > strong,.retention-deep > div:first-child > strong,.garment-summary strong,.integration-hero > div:first-child strong,.billing-main > strong,.invoice-card > strong { font-family:var(--sans); font-weight:550; letter-spacing:-.055em; }
.metric-feature .positive,.chart-note b,.connection-list b { color:#b8d7ec; }
.spark-bars i { background:#d8d8d6; }
.meter i,.return-dots i,.funnel i { background:#1d1d1f; }
.micro-line i { border-color:#9fbfd3; }
.insight-alert { margin:12px 0; border:1px solid var(--line); border-radius:22px; background:#d8d8d6; }
.alert-mark { font-family:var(--sans); }
.insight-alert strong { font-family:var(--sans); font-weight:500; letter-spacing:-.035em; }
.panel-header h2,.readiness-copy h2,.milestones h2,.recommendation h2,.category-feature h2,.integration-cards h2,.support-cards h2,.drawer-header h2,.portal-modal h2 { font-family:var(--sans); font-weight:500; letter-spacing:-.052em; }
.adoption-panel { background:#080808; }
.bar-chart i { background:#d8d8d6; }
.bar-chart b { background:#8fb5cc; }
.donut { background:conic-gradient(#1d1d1f 0 62%,#b8d7ec 62% 100%); }
.rank-list strong,.connection-list strong,.milestone-track strong,.abandon-list strong,.launch-checklist strong,.notification-list strong,.command-box > button span,.modal-options button span,.toast strong { font-family:var(--sans); font-weight:500; }
.rank-list i b { background:#8fb5cc; }
.readiness-section { margin-top:12px; overflow:hidden; border-radius:28px; background:#111; }
.readiness-copy h2 em { color:#fff; }
.connection-list { background:#080808; }
.connection-status.live { background:#b8d7ec; }
.connection-status.pending { border-color:#b8d7ec; }
.milestone-track .current { background:#d8d8d6; }
.analytics-tabs button[aria-selected="true"] { box-shadow:inset 0 -3px #1d1d1f; }
.recommendation { background:#d8d8d6; }
.category-feature { color:#1d1d1f; background:#b8d7ec; }
.orbit-one { color:#fff; background:#1d1d1f; }
.retention-curve i { background:#b8d7ec; }
.integration-hero { background:#111; }
.launch-checklist .done > span { color:#1d1d1f; border-color:#b8d7ec; background:#b8d7ec; }
.invoice-card { background:#d8d8d6; }
.support-cards > article:nth-child(2) { background:#111; }
.lime-bg { background:#d8d8d6; }
.coral-bg { color:#1d1d1f; background:#b8d7ec; }
.blue-bg { color:#fff; background:#1d1d1f; }
.notification-list article.unread::after { background:#8fb5cc; }
.toast { border-radius:18px; background:#111; }
.toast > span { background:#b8d7ec; }

.login-screen { grid-template-columns:1.1fr .9fr; background:#111; }
.login-art { min-height:100svh; padding:40px; background:#111 url("/assets/danel-ai-twin-freja-login-v2.png?v=20260821-danel-login") center 36% / cover no-repeat; }
.login-art::before { content:""; position:absolute; inset:0; width:auto; aspect-ratio:auto; left:0; bottom:0; border:0; border-radius:0; background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 37%,rgba(0,0,0,.12) 72%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 62%); box-shadow:none; }
.login-art .wordmark { position:relative; }
.login-statement { max-width:760px; }
.login-statement > span { color:rgba(255,255,255,.72); font-size:0.6875rem; font-weight:500; letter-spacing:.14em; }
.login-statement h1 { margin:20px 0 24px; font-family:var(--sans); font-size:clamp(3.75rem,7.1vw,7rem); font-weight:500; line-height:.83; letter-spacing:-.067em; }
.login-statement h1 em { font-family:var(--serif); font-style:normal; font-weight:400; }
.login-statement p { max-width:520px; color:rgba(255,255,255,.72); font-size:1.0625rem; }
.login-benefits { width:min(760px,100%); margin-top:34px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.3); }
.login-benefits article { min-height:100px; padding:16px 18px 0 0; border-right:1px solid rgba(255,255,255,.2); }
.login-benefits article + article { padding-left:18px; }
.login-benefits article:last-child { border-right:0; }
.login-benefits b { display:block; margin-bottom:28px; color:rgba(255,255,255,.5); font-size:0.625rem; font-weight:500; }
.login-benefits strong { font-size:0.875rem; font-weight:500; overflow-wrap:anywhere; }
.login-panel { position:relative; margin:0; padding:clamp(55px,8vw,120px); border-radius:0; background:var(--cream); }
.login-panel .back-site { position:absolute; top:32px; left:clamp(55px,8vw,120px); min-height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.72); font-size:0.875rem; font-weight:500; letter-spacing:0; }
.login-panel .back-site:hover { background:#fff; }
.login-panel .back-site:focus-visible { outline-color:#8eb3cb; }
.login-panel h2 { margin:18px 0; font-family:var(--sans); font-size:clamp(3.25rem,6vw,5.5rem); font-weight:500; line-height:.9; letter-spacing:-.065em; }
.login-panel h2 em { font-family:var(--serif); font-style:normal; font-weight:400; }
.login-statement h1 { font-weight:500; }
.login-form label { font-size:0.6875rem; }
.login-form input { border-radius:14px; background:#fff; font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; }
.login-panel .pill-button,.login-panel .provider-button { font-size:0.9375rem; font-weight:500; }
.login-panel .forgot-password-button,.login-panel .password-reset-back { font-size:0.875rem; font-weight:500; }
.provider-profile { overflow:hidden; border-radius:18px; background:#fff; }
.provider-profile summary { font-size:0.875rem; }
.shopify-login-form label { font-size:0.6875rem; }
.shopify-login-form input { border-radius:14px; background:#fff; font-size:0.9375rem; font-weight:400; letter-spacing:0; text-transform:none; }
.provider-slot { min-height:48px; }
.provider-status { font-size:0.75rem; }
.login-note { font-size:0.6875rem; }
.login-socials button { border-radius:999px; }

@media (max-width:1180px) and (min-width:881px) {
  .app-shell { grid-template-columns:230px minmax(0,1fr); }
}
@media (max-width:880px) {
  .login-screen { width:100%; min-width:0; grid-template-columns:minmax(0,1fr); overflow:hidden; }
  .login-art,.login-panel { width:100%; min-width:0; }
  .login-art { min-height:58vh; background-position:62% center; }
  .login-panel { margin:-24px 0 0; border-radius:28px 28px 0 0; }
}
@media (max-width:620px) {
  .metric-card,.panel,.insight-alert { border-radius:18px; }
  .readiness-section { border-radius:22px; }
  .login-art { min-height:max(520px,56vh); padding:28px 20px; background-position:58% center; }
  .login-panel { padding:64px 22px 40px; }
  .login-panel .back-site { top:18px; left:22px; max-width:calc(100% - 44px); min-height:36px; font-size:0.75rem; }
  .login-statement h1 { font-size:3.4375rem; }
  .shopify-login-form { grid-template-columns:1fr; }
  .shopify-login-form .provider-button { width:100%; }
  .login-statement p { max-width:340px; font-size:1rem; }
  .login-benefits { margin-top:24px; }
  .login-benefits article { min-height:78px; padding-top:12px; }
  .login-benefits b { margin-bottom:16px; }
  .login-benefits strong { font-size:0.75rem; }
}

/* Chelsea review — daily commerce coach and action-first analytics */
:root {
  --coach-green:#198754;
  --coach-green-soft:#e8f7ef;
  --coach-coral:#ef6f5b;
  --coach-coral-soft:#fff0ec;
  --coach-blue:#4f8fc7;
  --coach-blue-soft:#eaf3fb;
  --coach-violet:#7967c8;
  --coach-violet-soft:#f0edff;
  --coach-yellow:#f4ce55;
}

.search-button { min-width:230px; color:#173b34; background:#edf6f2; border-color:#c8ded6; }
.search-button span::before { content:"✦ "; color:var(--coach-green); }
.page-intro { margin-bottom:30px; }
.page-intro .lede { max-width:720px; font-size:1rem; line-height:1.55; }
.filter-copy span { font-size:0.75rem; }
.filter-copy strong { font-size:1rem; }
.filters label > span { font-size:0.6875rem; }
.filters select { font-size:0.875rem; }

.daily-brief { margin-bottom:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.brief-card { min-height:250px; padding:28px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:24px; }
.brief-card > span { font-size:0.6875rem; font-weight:500; letter-spacing:.09em; }
.brief-card > strong { margin:28px 0 12px; font-size:clamp(1.5625rem,2.1vw,2.25rem); line-height:1.02; letter-spacing:-.045em; }
.brief-card p { margin:0; font-size:0.875rem; line-height:1.48; }
.brief-card button { width:max-content; margin-top:auto; padding:12px 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font-size:0.8125rem; font-weight:500; }
.brief-card.win { color:#175f3e; background:var(--coach-green-soft); border-color:#bae0ca; }
.brief-card.watch { color:#8d362a; background:var(--coach-coral-soft); border-color:#f4c2b9; }
.brief-card.opportunity { color:#285d85; background:var(--coach-blue-soft); border-color:#c1daec; }

.metric-grid.commerce-first { grid-template-columns:1.2fr repeat(3,1fr); }
.metric-grid.commerce-first .metric-card { min-height:250px; }
.metric-grid.commerce-first .metric-card > strong { font-size:clamp(3rem,5vw,4.75rem); }
.metric-grid.commerce-first .metric-feature { background:linear-gradient(145deg,#133f36,#173e4f); }
.outcome-card { background:#fff; }
.outcome-card .positive { color:var(--coach-green); }
.benchmark-note { margin-top:auto; display:block; color:var(--muted); font-size:0.75rem; line-height:1.35; }
.metric-feature .benchmark-note { color:rgba(255,255,255,.72); }

.secondary-metrics { margin-bottom:14px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; }
.secondary-metrics article { min-height:126px; padding:22px; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.secondary-metrics article:last-child { border-right:0; }
.secondary-metrics span { color:var(--muted); font-size:0.75rem; }
.secondary-metrics strong { margin:12px 0 8px; font-size:1.8125rem; letter-spacing:-.045em; }
.secondary-metrics b { margin-top:auto; color:var(--coach-green); font-size:0.6875rem; }

.insight-alert { align-items:flex-start; background:#fff8dd; border-color:#ead186; }
.insight-alert .alert-mark { color:#6d5509; background:var(--coach-yellow); }
.insight-alert strong { font-size:1.375rem; }
.insight-alert p { max-width:900px; font-size:0.875rem; line-height:1.52; }

.adoption-panel { background:linear-gradient(145deg,#0f2d28 0%,#16374b 100%); }
.adoption-panel .panel-header h2 { font-size:clamp(2.5rem,5vw,4.75rem); }
.adoption-panel .panel-header h2 b { color:#d7f451; }
.adoption-panel .panel-header p { margin:12px 0 0; color:rgba(255,255,255,.7); font-size:0.875rem; }
.adoption-panel .bar-chart div i { background:linear-gradient(180deg,#d7f451,#73c56b); }
.adoption-panel .bar-chart div b { background:linear-gradient(180deg,#8ac4e4,#4f8fc7); }
.chart-action { margin-top:24px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.74); font-size:0.8125rem; }
.chart-action b { color:#fff; }
.chart-action button { flex:0 0 auto; padding:10px 14px; border:1px solid rgba(255,255,255,.36); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font-weight:500; }
.funnel-panel .funnel > div:nth-child(4) i,.funnel-panel .funnel > div:nth-child(5) i,.funnel-panel .funnel > div:nth-child(6) i { background:linear-gradient(90deg,#4f8fc7,#7dbade); }
.funnel span,.funnel strong,.funnel small,.funnel b { font-size:0.75rem; }
.garments-panel .rank-list i b { background:linear-gradient(90deg,#4f8fc7,#6dc38a); }
.inline-action { margin-top:20px; padding:0 0 4px; border:0; border-bottom:1px solid currentColor; background:transparent; color:#1d1d1f; font-size:0.75rem; font-weight:500; }
.retention-panel { background:linear-gradient(145deg,#f0edff,#e9f3fb); }
.retention-panel .cohort i { color:#173b34; background:color-mix(in srgb,var(--coach-green) var(--v),#e7ebe9); }

.subpage-intro > p { font-size:1rem; line-height:1.55; }
.analytics-tabs button { min-height:48px; font-size:0.8125rem; }
.commerce-kpi p,.commerce-header p,.attribution-note,.return-reason-list span,.return-reason-list b,.product-attribution-panel > p { font-size:0.875rem; }
.commerce-funnel-head { font-size:0.75rem; }
.commerce-funnel-row > strong { font-size:0.9375rem; }
.commerce-funnel-row > span b,.commerce-funnel-row em { font-size:0.8125rem; }
.commerce-funnel-row > span i { height:16px; }

.data-unlock { margin-top:12px; padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:36px; color:#fff; background:linear-gradient(130deg,#173b34,#244e63); border-radius:24px; }
.data-unlock h2 { max-width:820px; margin:8px 0 14px; font-size:clamp(2rem,4vw,3.625rem); line-height:.96; letter-spacing:-.05em; }
.data-unlock p { max-width:850px; margin:0; color:rgba(255,255,255,.72); font-size:0.875rem; line-height:1.55; }
.data-unlock .section-label { color:rgba(255,255,255,.68); }
.pulse-action { color:#102f27; background:#d7f451; border-color:#d7f451; box-shadow:0 0 0 0 rgba(215,244,81,.5); animation:coachPulse 2.4s infinite; }
@keyframes coachPulse { 60% { box-shadow:0 0 0 16px rgba(215,244,81,0); } 100% { box-shadow:0 0 0 0 rgba(215,244,81,0); } }

.feature-performance-panel .panel-header p { max-width:700px; margin:12px 0 0; color:var(--muted); font-size:0.875rem; }
.feature-paths { margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.feature-path { min-height:180px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:20px; background:#f6f6f3; color:var(--ink); text-align:left; }
.feature-path.active { color:#fff; background:linear-gradient(145deg,#173b34,#244e63); border-color:transparent; }
.feature-path span { font-size:0.8125rem; font-weight:500; }
.feature-path strong { margin:auto 0 7px; font-size:2.625rem; letter-spacing:-.055em; }
.feature-path small { color:var(--muted); font-size:0.75rem; }
.feature-path.active small { color:rgba(255,255,255,.7); }
.feature-detail { margin-top:12px; padding:26px; border-radius:20px; background:var(--coach-green-soft); border:1px solid #bae0ca; }
.feature-detail span { color:#4e7f65; font-size:0.625rem; font-weight:500; letter-spacing:.08em; }
.feature-detail strong { margin:9px 0 7px; display:block; color:#155d3c; font-size:1.5rem; }
.feature-detail p { margin:0; color:#356d53; font-size:0.875rem; line-height:1.5; }
.category-donut { width:300px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#4f8fc7 0 38%,#6dc38a 38% 69%,#ef8b72 69% 89%,#f0ce69 89%); }
.category-donut::after { width:62%; aspect-ratio:1; grid-area:1/1; content:""; border-radius:50%; background:#fff; }
.category-donut span { z-index:1; grid-area:1/1; display:grid; place-items:center; color:var(--muted); font-size:0.75rem; }
.category-donut strong { display:block; color:var(--ink); font-size:3.125rem; }

.category-switcher { margin:8px 0 14px; display:flex; flex-wrap:wrap; gap:8px; }
.category-switcher button { min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:0.8125rem; font-weight:500; }
.category-switcher button.active { color:#fff; background:#1d1d1f; }
.garment-table-panel .panel-header p { max-width:680px; margin:10px 0 0; color:var(--muted); font-size:0.8125rem; }
.garment-row { grid-template-columns:1.5fr .65fr .55fr .65fr .6fr .8fr; }
.garment-row .negative { color:#b24838; font-weight:500; }
.garment-row .positive { color:var(--coach-green); font-weight:500; }

.notification-drawer { width:min(510px,100%); }
.notification-list article { align-items:flex-start; }
.notification-list article p { font-size:0.8125rem; line-height:1.45; }
.notification-list article button { margin:9px 0 7px; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:#315a72; font-size:0.75rem; font-weight:500; }
.notification-list .achievement { background:var(--coach-green-soft); }
.violet-bg { color:#fff; background:var(--coach-violet); font-size:0.625rem; }

.command-box { width:min(790px,calc(100% - 32px)); max-height:88vh; overflow:auto; }
.command-input input { font-size:1.0625rem; }
.command-box > button { min-height:70px; }
.assistant-answer { margin:12px 0 4px; padding:25px; display:none; border-radius:18px; color:#fff; background:linear-gradient(145deg,#173b34,#244e63); }
.assistant-answer.visible { display:block; }
.assistant-answer span { color:rgba(255,255,255,.62); font-size:0.625rem; font-weight:500; letter-spacing:.09em; }
.assistant-answer strong { margin:10px 0 7px; display:block; font-size:1.5rem; line-height:1.12; }
.assistant-answer p { margin:0 0 17px; color:rgba(255,255,255,.75); font-size:0.875rem; line-height:1.48; }
.assistant-answer button { padding:0 0 4px; border:0; border-bottom:1px solid rgba(255,255,255,.7); background:transparent; color:#fff; font-weight:500; }

@media (max-width:1280px) {
  .metric-grid.commerce-first { grid-template-columns:1fr 1fr; }
  .secondary-metrics { grid-template-columns:repeat(3,1fr); }
  .secondary-metrics article:nth-child(3) { border-right:0; }
  .secondary-metrics article:nth-child(n+4) { border-top:1px solid var(--line); }
  .feature-paths { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
  .daily-brief { grid-template-columns:1fr; }
  .brief-card { min-height:210px; }
  .data-unlock { grid-template-columns:1fr; }
  .data-unlock button { width:max-content; }
  .category-feature { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .search-button { min-width:44px; }
  .search-button span { font-size:0; }
  .search-button span::before { font-size:1rem; }
  .page-intro .lede,.subpage-intro > p { font-size:0.9375rem; }
  .metric-grid.commerce-first,.secondary-metrics,.feature-paths { grid-template-columns:1fr; }
  .secondary-metrics article { border-right:0; border-top:1px solid var(--line); }
  .secondary-metrics article:first-child { border-top:0; }
  .chart-action { align-items:flex-start; flex-direction:column; }
  .feature-path { min-height:150px; }
  .category-donut { width:min(100%,280px); }
  .garment-row { grid-template-columns:1fr 1fr; }
  .garment-row > span:first-child { grid-column:1/-1; }
  .garment-row.head { display:none; }
}

@media (prefers-reduced-motion:reduce) { .pulse-action { animation:none; } }

/* Partner commerce impact — Banu and Chelsea feedback */
:root { --success:#137a4b; --success-soft:#e5f7ed; --success-line:#b5dfc6; --signal:#e8f2fa; --signal-ink:#315a72; }
.sidebar { background:linear-gradient(165deg,#1d4c40 0%,#26565c 55%,#2c526c 100%); border-color:rgba(255,255,255,.22); }
.brand-block { border-color:rgba(255,255,255,.2); }
.brand-block > span,.main-nav p,.health-mini span,.user-chip small { color:rgba(255,255,255,.8); }
.nav-item { color:rgba(255,255,255,.9); }
.nav-item:hover { background:rgba(255,255,255,.13); }
.nav-item.active { color:#0c2a21; background:#d7f451; box-shadow:0 8px 24px rgba(8,25,20,.18); }
.health-mini { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.health-mini i { background:#81e6b5; box-shadow:0 0 0 4px rgba(129,230,181,.12); }

.filter-copy span { font-size:0.625rem; font-weight:500; }
.filter-copy strong { font-size:0.8125rem; }
.filters { gap:9px; }
.filters label { min-width:145px; min-height:50px; padding:8px 12px; }
.filters label > span { font-size:0.5625rem; font-weight:500; }
.filters select { font-size:0.75rem; }

.metric-card.health-card { background:var(--success-soft); border-color:var(--success-line); }
.metric-card.health-card .metric-label,.metric-card.health-card p { color:#356d53; }
.metric-card.health-card > strong,.metric-card.health-card .positive { color:var(--success); }
.metric-card.health-card .meter { background:rgba(19,122,75,.14); }
.metric-card.health-card .meter i,.metric-card.health-card .return-dots i { background:var(--success); }
.metric-card.health-card .micro-line i { border-color:var(--success); }

.commerce-kpi-grid { margin-bottom:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.commerce-kpi { min-height:190px; padding:27px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; background:#fff; }
.commerce-kpi > span { color:var(--muted); font-size:0.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.commerce-kpi strong { margin:28px 0 8px; display:block; font-size:clamp(2.625rem,4vw,3.875rem); font-weight:550; line-height:.9; letter-spacing:-.06em; }
.commerce-kpi p { margin:auto 0 0; color:var(--muted); font-size:0.75rem; line-height:1.35; }
.commerce-kpi.success-state { color:var(--success); background:var(--success-soft); border-color:var(--success-line); }
.commerce-kpi.success-state > span,.commerce-kpi.success-state p { color:#356d53; }
.commerce-kpi.signal-state { color:var(--signal-ink); background:var(--signal); border-color:#c4dce9; }
.commerce-kpi.signal-state > span,.commerce-kpi.signal-state p { color:#527386; }

.commerce-funnel-panel { margin-bottom:12px; }
.commerce-header { align-items:end; }
.commerce-header > div:first-child { max-width:700px; }
.commerce-header p { max-width:650px; margin:14px 0 0; color:var(--muted); font-size:0.8125rem; line-height:1.5; }
.commerce-legend { display:flex; gap:18px; padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:#f7f7f5; color:var(--muted); font-size:0.6875rem; white-space:nowrap; }
.commerce-legend span { display:flex; align-items:center; gap:7px; }
.commerce-legend i { width:9px; height:9px; display:block; border-radius:50%; }
.used-vto { background:#2f7ddd; }.no-vto { background:#adb0ae; }
.commerce-funnel { margin-top:30px; display:grid; border-top:1px solid var(--line); }
.commerce-funnel-head,.commerce-funnel-row { min-height:70px; display:grid; grid-template-columns:1fr 1.35fr 1.35fr .7fr; gap:18px; align-items:center; border-bottom:1px solid var(--line); }
.commerce-funnel-head { min-height:40px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.commerce-funnel-row > strong { font-size:0.875rem; }
.commerce-funnel-row > span { display:grid; grid-template-columns:minmax(60px,1fr) auto; gap:10px; align-items:center; }
.commerce-funnel-row > span i { width:var(--w); min-width:8px; height:12px; display:block; border-radius:999px; }
.commerce-funnel-row > span b { font-size:0.75rem; }
.commerce-funnel-row > strong small { display:block; margin-top:3px; color:var(--muted); font-size:0.625rem; font-weight:500; }
.commerce-funnel-row > span b small { color:var(--muted); font-size:0.625rem; font-weight:500; white-space:nowrap; }
.commerce-funnel-row em { justify-self:start; color:var(--muted); font-size:0.6875rem; font-style:normal; font-weight:500; }
.commerce-funnel-row .empty-bar { min-width:0; }
.commerce-funnel-row .return { background:#b46b43; }
.commerce-funnel-row.baseline-row { background:linear-gradient(90deg,rgba(79,143,199,.06),rgba(181,184,182,.08)); }
.positive-chip { padding:6px 9px; color:var(--success) !important; background:var(--success-soft); border-radius:999px; }

.commerce-detail-grid { margin-bottom:12px; display:grid; grid-template-columns:1.35fr .65fr; gap:12px; }
.return-heading { align-items:flex-start; }
.return-window { display:flex; gap:4px; padding:4px; border-radius:999px; background:#f0f0ed; }
.return-window button { min-width:46px; min-height:34px; padding:0 9px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:0.6875rem; font-weight:500; }
.return-window button.active { color:#fff; background:#1d1d1f; }
.attribution-note { margin:18px 0 28px; color:var(--muted); font-size:0.75rem; }
.return-reason-list { display:grid; gap:19px; }
.return-reason-list > div { display:grid; grid-template-columns:1fr auto; gap:7px 12px; }
.return-reason-list span,.return-reason-list b { font-size:0.8125rem; }
.return-reason-list i { height:8px; grid-column:1/-1; overflow:hidden; display:block; border-radius:999px; background:#ececea; }
.return-reason-list i em { width:var(--w); height:100%; display:block; border-radius:inherit; background:#7fa8bd; }
.return-reason-list small { grid-column:1/-1; color:var(--muted); font-size:0.625rem; }
.return-reason-list small.attributable { color:var(--success); font-weight:500; }
.return-reason-list > div:first-child i em { background:var(--success); }

.product-attribution-panel { display:flex; flex-direction:column; }
.product-attribution-panel > h2 { margin:0; font-size:2.1875rem; letter-spacing:-.045em; }
.product-attribution-panel > p { margin:13px 0 20px; color:var(--muted); font-size:0.75rem; line-height:1.45; }
.product-outcome { padding:21px; color:var(--success); background:var(--success-soft); border-radius:18px; }
.product-outcome span,.product-outcome small { display:block; color:#356d53; font-size:0.625rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.product-outcome strong { margin:7px 0 4px; display:block; font-size:2.5rem; letter-spacing:-.055em; }
.product-attribution-panel dl { margin:20px 0; border-top:1px solid var(--line); }
.product-attribution-panel dl div { min-height:42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.product-attribution-panel dt { color:var(--muted); font-size:0.6875rem; }
.product-attribution-panel dd { margin:0; font-size:0.75rem; font-weight:500; }
.product-attribution-panel .mini-button { margin-top:auto; align-self:flex-start; }

.industry-benchmark-panel { padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:.75fr 1.25fr; gap:44px; color:#fff; background:linear-gradient(125deg,#14352a,#163943 58%,#18304a); border-radius:22px; }
.industry-benchmark-panel .section-label { color:rgba(255,255,255,.65); }
.industry-benchmark-panel h2 { margin:0 0 14px; font-size:clamp(2.125rem,3.6vw,3.5rem); line-height:.92; letter-spacing:-.05em; }
.industry-benchmark-panel > div:first-child p { max-width:480px; margin:0; color:rgba(255,255,255,.68); font-size:0.75rem; line-height:1.5; }
.benchmark-grid { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid rgba(255,255,255,.18); }
.benchmark-grid article { padding:12px 20px; border-right:1px solid rgba(255,255,255,.18); }
.benchmark-grid strong { display:block; margin-bottom:13px; color:#d7f451; font-size:clamp(2.125rem,3.5vw,3.25rem); letter-spacing:-.06em; }
.benchmark-grid span,.benchmark-grid small { display:block; color:rgba(255,255,255,.78); font-size:0.6875rem; line-height:1.35; }
.benchmark-grid small { margin-top:4px; color:rgba(255,255,255,.48); }
.benchmark-grid a { color:rgba(255,255,255,.72); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }

.market-model { margin-top:12px; padding:clamp(28px,4vw,52px); border-radius:22px; }
.market-model-head { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.market-model-head > div { max-width:820px; }
.market-model-head h2 { margin:8px 0 12px; font-size:clamp(2.125rem,4vw,3.5rem); line-height:.94; letter-spacing:-.055em; }
.market-model-head p { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
.model-badge { flex:0 0 auto; padding:9px 12px; border:1px solid #b9dfca; border-radius:999px; color:#356d53; background:var(--success-soft); font-size:0.625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.market-model-body { margin-top:32px; display:grid; grid-template-columns:300px 1fr; gap:20px; }
.audience-presets { display:grid; align-content:start; gap:8px; }
.audience-presets button,.audience-presets label { min-height:104px; padding:17px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:16px; background:#f6f6f3; color:var(--ink); text-align:left; }
.audience-presets button { cursor:pointer; }
.audience-presets button.active { color:#fff; background:#2d6f5e; border-color:#2d6f5e; box-shadow:0 8px 28px rgba(29,76,64,.16); }
.audience-presets span { color:inherit; opacity:.68; font-size:0.625rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
.audience-presets strong { margin:9px 0 4px; font-size:1.75rem; letter-spacing:-.04em; }
.audience-presets small { color:inherit; opacity:.68; font-size:0.6875rem; }
.audience-presets label input { width:100%; margin:9px 0 5px; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:1.75rem; font-weight:500; letter-spacing:-.04em; }
.model-results { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.model-results article { min-height:160px; padding:22px; display:flex; flex-direction:column; border:1px solid #c8ddeb; border-radius:18px; color:#315a72; background:#eef5fb; }
.model-results article:nth-child(3) { color:#fff; background:linear-gradient(145deg,#2d6f5e,#355f7a); border-color:transparent; }
.model-results article.engagement-index { color:#6a4d25; background:#fff3e8; border-color:#ead2bc; }
.model-results span { font-size:0.625rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
.model-results strong { margin:auto 0 7px; font-size:clamp(2.25rem,4vw,3.5rem); letter-spacing:-.06em; }
.model-results small { color:inherit; opacity:.7; font-size:0.75rem; }
.market-model-foot { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.market-model-foot > p { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.market-model-foot > p:first-child { margin-bottom:6px; color:var(--ink); font-weight:500; }
.market-model-foot > div { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.market-model-foot a { color:#315a72; font-size:0.6875rem; font-weight:500; text-decoration:none; border-bottom:1px solid #a9c7d8; }

@media (max-width:1180px) {
  .commerce-kpi-grid { grid-template-columns:1fr 1fr; }
  .commerce-detail-grid,.industry-benchmark-panel { grid-template-columns:1fr; }
  .benchmark-grid { border-top:1px solid rgba(255,255,255,.18); border-left:0; }
  .market-model-body { grid-template-columns:1fr; }
  .audience-presets { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:880px) {
  .commerce-funnel-head { display:none; }
  .commerce-funnel-row { grid-template-columns:1fr 1fr; padding:18px 0; }
  .commerce-funnel-row > strong,.commerce-funnel-row > em { grid-column:1/-1; }
  .commerce-header,.return-heading { align-items:flex-start; flex-direction:column; }
  .market-model-head { flex-direction:column; }
}
@media (max-width:620px) {
  .filters label > span { font-size:0.5625rem; }
  .filters select { font-size:0.75rem; }
  .commerce-kpi-grid { grid-template-columns:1fr; }
  .commerce-kpi { min-height:160px; }
  .commerce-funnel-row { grid-template-columns:1fr; }
  .commerce-funnel-row > strong,.commerce-funnel-row > em { grid-column:auto; }
  .commerce-legend { width:100%; justify-content:space-between; }
  .return-window { width:100%; }
  .return-window button { flex:1; }
  .benchmark-grid { grid-template-columns:1fr 1fr; }
  .benchmark-grid article { border-bottom:1px solid rgba(255,255,255,.18); }
  .audience-presets,.model-results { grid-template-columns:1fr; }
  .market-model-foot > div { align-items:flex-start; flex-direction:column; }
}

/* Final legibility overrides for the Chelsea review */
.filter-copy span { font-size:0.75rem; }
.filter-copy strong { font-size:1rem; }
.filters label > span { font-size:0.6875rem; }
.filters select { font-size:0.875rem; }
.commerce-kpi p,.commerce-header p,.attribution-note,.return-reason-list span,.return-reason-list b,.product-attribution-panel > p { font-size:0.875rem; }
.commerce-funnel-head { font-size:0.75rem; }
.commerce-funnel-row > strong { font-size:0.9375rem; }
.commerce-funnel-row > span b,.commerce-funnel-row em { font-size:0.8125rem; }
.commerce-funnel-row > span i { height:16px; }
.benchmark-grid span,.benchmark-grid small { font-size:0.8125rem; }
.product-attribution-panel dt { font-size:0.8125rem; }
.product-attribution-panel dd { font-size:0.875rem; }
.return-reason-list small { font-size:0.75rem; }
.used-vto { background:#4f8fc7; }
.no-vto { background:#b5b8b6; }

@media (max-width:620px) {
  .filters label > span { font-size:0.625rem; }
  .filters select { font-size:0.8125rem; }
}

/* Full-platform intelligence and Xbox-style partner progression */
.solution-pulse { margin-bottom:14px; padding:clamp(26px,3.2vw,42px); border:1px solid var(--line); border-radius:24px; background:#fff; }
.solution-pulse-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.solution-pulse-head h2 { margin:7px 0 8px; font-size:clamp(1.875rem,3.4vw,3rem); line-height:.96; letter-spacing:-.05em; }
.solution-pulse-head p { max-width:680px; margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
.solution-pulse-grid { margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.solution-pulse-grid > button { min-height:230px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:20px; background:#f6f6f3; color:var(--ink); text-align:left; transition:transform .2s ease,box-shadow .2s ease; }
.solution-pulse-grid > button:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(22,45,39,.1); }
.solution-pulse-grid > button:nth-child(1) { background:#eef5fb; border-color:#c8ddeb; }
.solution-pulse-grid > button:nth-child(2) { background:#e9f7ef; border-color:#b9dfca; }
.solution-pulse-grid > button:nth-child(3) { background:#fff3e8; border-color:#ead2bc; }
.solution-pulse-grid > button:nth-child(4) { color:#fff; background:linear-gradient(145deg,#173b34,#244e63); border-color:transparent; }
.solution-number { color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.1em; }
.solution-pulse-grid > button:nth-child(4) .solution-number { color:rgba(255,255,255,.58); }
.solution-pulse-grid strong { margin:17px 0 auto; font-size:1.1875rem; }
.solution-pulse-grid b { margin:24px 0 7px; font-size:2.375rem; letter-spacing:-.055em; }
.solution-pulse-grid small { min-height:38px; color:var(--muted); font-size:0.75rem; line-height:1.35; }
.solution-pulse-grid > button:nth-child(4) small { color:rgba(255,255,255,.7); }
.solution-pulse-grid i { width:100%; height:7px; margin:18px 0; overflow:hidden; display:block; border-radius:999px; background:rgba(29,29,31,.1); }
.solution-pulse-grid i em { width:var(--w); height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#4f8fc7,#35a66f); }
.solution-pulse-grid > button:nth-child(4) i { background:rgba(255,255,255,.14); }
.solution-pulse-grid > button:nth-child(4) i em { background:#d7f451; }
.solution-pulse-grid u { margin-top:auto; text-decoration:none; border-bottom:1px solid currentColor; font-size:0.6875rem; font-weight:500; }

.milestone-intro { max-width:720px; margin:10px 0 0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
.milestone-track .current button { margin-top:14px; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font-weight:500; }
.feature-paths { grid-template-columns:repeat(3,1fr); }
.table-row.feature-head,.table-row.feature-row { grid-template-columns:1.05fr .75fr .75fr 1.2fr .55fr; }
.table-row.feature-row button { justify-self:start; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:#315a72; font-weight:500; }
.feature-branches { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.feature-branches button { min-height:118px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#f6f6f3; text-align:left; }
.feature-branches span { color:var(--muted); font-size:0.6875rem; font-weight:500; }
.feature-branches strong { margin:auto 0 5px; font-size:1.6875rem; letter-spacing:-.05em; }
.feature-branches small { color:var(--muted); font-size:0.6875rem; }

.owned-data-intro,.marketing-intro { margin-bottom:12px; padding:clamp(28px,4vw,50px); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#173b34,#244e63); }
.owned-data-intro .section-label,.marketing-intro .section-label { color:rgba(255,255,255,.64); }
.owned-data-intro h2,.marketing-intro h2 { max-width:850px; margin:8px 0 12px; font-size:clamp(2rem,4vw,3.5rem); line-height:.94; letter-spacing:-.05em; }
.owned-data-intro p,.marketing-intro p { max-width:800px; margin:0; color:rgba(255,255,255,.72); font-size:0.875rem; line-height:1.5; }
.owned-data-intro > strong { flex:0 0 auto; color:#d7f451; font-size:clamp(3.125rem,6vw,5rem); line-height:.82; letter-spacing:-.06em; }
.owned-data-intro > strong small { margin-top:12px; display:block; color:rgba(255,255,255,.65); font-size:0.75rem; letter-spacing:0; text-align:right; }
.marketing-intro { align-items:center; background:linear-gradient(135deg,#273c5c,#51376a); }
.marketing-intro .mini-button { color:#fff; border-color:rgba(255,255,255,.45); white-space:nowrap; }
.platform-health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.health-stat { min-height:210px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; background:#fff; }
.health-stat.healthy { color:var(--success); background:var(--success-soft); border-color:var(--success-line); }
.health-stat.watch { color:#8a4b20; background:#fff2e6; border-color:#ecc8a7; }
.health-stat > span { color:currentColor; font-size:0.75rem; font-weight:500; }
.health-stat strong { margin:30px 0 7px; font-size:clamp(2.625rem,4vw,3.75rem); letter-spacing:-.055em; }
.health-stat small { color:currentColor; opacity:.72; font-size:0.75rem; }
.health-stat button { margin-top:auto; align-self:flex-start; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font-weight:500; }
.marketing-path { margin-top:12px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:42px; }
.marketing-path h2 { margin:7px 0 12px; font-size:clamp(1.875rem,3.4vw,2.875rem); line-height:.97; letter-spacing:-.05em; }
.marketing-path p { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
.marketing-steps { display:flex; align-items:center; gap:10px; }
.marketing-steps span { min-height:115px; flex:1; padding:18px; display:flex; flex-direction:column; justify-content:space-between; border-radius:18px; background:#f1eff7; color:#57466e; font-size:0.6875rem; font-weight:500; }
.marketing-steps span b { font-size:1.5rem; letter-spacing:-.04em; }
.marketing-steps > i { color:#8f84a1; font-style:normal; }

.usage-breakdown { margin:26px 0 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.usage-breakdown div { padding:18px 10px 0 0; }
.usage-breakdown dt { color:var(--muted); font-size:0.6875rem; }
.usage-breakdown dd { margin:6px 0 0; font-size:1.0625rem; font-weight:500; }

.achievements-intro { align-items:end; }
.level-card { margin-bottom:14px; padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; color:#fff; border-radius:26px; background:radial-gradient(circle at 15% 20%,rgba(215,244,81,.18),transparent 26%),linear-gradient(135deg,#102f27,#183e46 62%,#24375c); }
.level-badge { width:112px; aspect-ratio:1; display:grid; place-items:center; align-content:center; border:1px solid rgba(215,244,81,.45); border-radius:50%; color:#d7f451; box-shadow:0 0 0 10px rgba(215,244,81,.06); }
.level-badge span { font-size:0.5625rem; font-weight:500; letter-spacing:.14em; }
.level-badge strong { font-size:3.25rem; line-height:.9; letter-spacing:-.06em; }
.level-progress > span { color:rgba(255,255,255,.62); font-size:0.625rem; font-weight:500; letter-spacing:.1em; }
.level-progress h2 { margin:8px 0 14px; font-size:clamp(1.875rem,3.8vw,3.25rem); letter-spacing:-.05em; }
.level-progress > i,.goal-rail > i,.achievement-card.locked > i { height:9px; overflow:hidden; display:block; border-radius:999px; background:rgba(255,255,255,.14); }
.level-progress > i em,.goal-rail > i em,.achievement-card.locked > i em { height:100%; display:block; border-radius:inherit; background:#d7f451; transition:width .35s ease; }
.level-progress p { margin:12px 0 0; color:rgba(255,255,255,.7); font-size:0.8125rem; }
.achievement-layout { display:grid; grid-template-columns:1fr 340px; gap:14px; }
.achievement-library,.goal-rail { padding:clamp(24px,3vw,38px); border:1px solid var(--line); border-radius:24px; background:#fff; }
.achievement-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.achievement-section-head h2 { margin:7px 0 0; font-size:2.25rem; letter-spacing:-.05em; }
.achievement-grid { margin-top:26px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.achievement-card { min-height:260px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:#f6f6f3; }
.achievement-card.unlocked { color:#fff; background:linear-gradient(145deg,#173b34,#244e63); border-color:transparent; }
.achievement-card.new-achievement { background:linear-gradient(145deg,#3f2e67,#244e63); box-shadow:0 0 0 3px rgba(215,244,81,.35); }
.achievement-glyph { width:52px; height:52px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:1.5rem; }
.achievement-card small { margin:22px 0 8px; color:inherit; opacity:.65; font-size:0.5625rem; font-weight:500; letter-spacing:.1em; }
.achievement-card strong { font-size:1.5rem; letter-spacing:-.035em; }
.achievement-card p { margin:8px 0 18px; color:inherit; opacity:.72; font-size:0.8125rem; line-height:1.45; }
.achievement-card button { margin-top:auto; align-self:flex-start; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font-weight:500; }
.achievement-card.locked > i { margin-top:auto; background:#dddeda; }
.achievement-card.locked > i em { background:#4f8fc7; }
.achievement-card.locked > span:last-child { margin-top:8px; color:var(--muted); font-size:0.6875rem; }
.goal-rail { align-self:start; position:sticky; top:86px; color:#fff; background:#1d1d1f; border-color:#1d1d1f; }
.goal-rail .section-label { color:rgba(255,255,255,.56); }
.goal-rail h2 { margin:9px 0 13px; font-size:2.125rem; letter-spacing:-.05em; }
.goal-rail > p { color:rgba(255,255,255,.7); font-size:0.875rem; line-height:1.5; }
.goal-rail > strong { margin:28px 0 10px; display:block; color:#d7f451; font-size:3.25rem; letter-spacing:-.06em; }
.goal-choices { margin:28px 0 18px; display:grid; gap:7px; }
.goal-choices button { min-height:46px; padding:0 14px; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:transparent; color:rgba(255,255,255,.7); text-align:left; }
.goal-choices button.active { color:#102f27; background:#d7f451; border-color:#d7f451; font-weight:500; }
.goal-rail .pill-button { background:#fff; }
.goal-rail > small { margin-top:14px; display:block; color:rgba(255,255,255,.48); font-size:0.625rem; text-align:center; }

@media (max-width:1280px) {
  .solution-pulse-grid { grid-template-columns:1fr 1fr; }
  .platform-health-grid { grid-template-columns:1fr 1fr; }
  .achievement-layout { grid-template-columns:1fr; }
  .goal-rail { position:static; }
}
@media (max-width:980px) {
  .solution-pulse-head,.owned-data-intro,.marketing-intro { align-items:flex-start; flex-direction:column; }
  .marketing-path { grid-template-columns:1fr; }
  .level-card { grid-template-columns:auto 1fr; }
  .level-card > button { grid-column:1/-1; width:max-content; }
}
@media (max-width:620px) {
  .solution-pulse-grid,.platform-health-grid,.achievement-grid { grid-template-columns:1fr; }
  .feature-branches { grid-template-columns:1fr; }
  .table-row.feature-head { display:none; }
  .table-row.feature-row { grid-template-columns:1fr 1fr; }
  .table-row.feature-row > strong { grid-column:1/-1; }
  .marketing-steps { align-items:stretch; flex-direction:column; }
  .marketing-steps > i { transform:rotate(90deg); align-self:center; }
  .level-card { grid-template-columns:1fr; }
  .level-badge { width:92px; }
  .level-card > button { grid-column:auto; width:100%; }
  .achievement-section-head { align-items:flex-start; flex-direction:column; }
  .usage-breakdown { grid-template-columns:1fr; }
}

/* Resumable Freja portal guide */
.twin-launcher { min-height:48px; padding:5px 12px 5px 5px; display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(29,29,31,.12); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.88); box-shadow:0 5px 18px rgba(22,45,39,.08); }
.twin-launcher img { width:36px; height:36px; object-fit:cover; object-position:center 18%; border-radius:50%; background:#deded9; }
.twin-launcher span,.twin-launcher small,.twin-launcher strong { display:block; text-align:left; }
.twin-launcher small { color:#527386; font-size:0.4375rem; font-weight:500; letter-spacing:.13em; }
.twin-launcher strong { margin-top:1px; font-size:0.6875rem; }
.twin-launcher:hover { border-color:#8db9a0; transform:translateY(-1px); }
.twin-replay { margin-top:20px; color:#fff; background:#1d4c40; }
.twin-tour-active { overscroll-behavior:none; }
.twin-tour-layer { position:fixed; inset:0; z-index:1200; pointer-events:none; }
.twin-tour-highlight { position:fixed; z-index:1201; border:2px solid #d7f451; border-radius:16px; box-shadow:0 0 0 9999px rgba(11,22,19,.72),0 0 0 6px rgba(215,244,81,.2); transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease; pointer-events:none; }
.twin-tour-highlight[hidden] { display:none; }
.twin-tour-card { position:fixed; z-index:1202; width:min(430px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:25px; overflow:auto; border:1px solid rgba(255,255,255,.24); border-radius:24px; color:#fff; background:linear-gradient(145deg,#102f27,#183e46 62%,#24375c); box-shadow:0 28px 80px rgba(0,0,0,.38); pointer-events:auto; }
.twin-tour-card.centered { top:50%; left:50%; transform:translate(-50%,-50%); }
.twin-tour-close { position:absolute; top:16px; right:16px; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(255,255,255,.08); font-size:1.25rem; line-height:1; }
.twin-tour-close:hover { background:rgba(255,255,255,.18); }
.twin-tour-persona { display:flex; align-items:center; gap:13px; }
.twin-tour-persona img { width:64px; height:64px; object-fit:cover; object-position:center 18%; border:2px solid rgba(215,244,81,.7); border-radius:50%; background:#d7d7d2; }
.twin-tour-persona small,.twin-tour-persona strong { display:block; }
.twin-tour-persona small { color:#d7f451; font-size:0.5rem; font-weight:500; letter-spacing:.14em; }
.twin-tour-persona strong { margin-top:3px; font-size:1.0625rem; }
.twin-tour-progress { height:5px; margin:20px 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
.twin-tour-progress i { width:0; height:100%; display:block; border-radius:inherit; background:#d7f451; transition:width .25s ease; }
.twin-tour-label { margin:0 0 8px; color:#d7f451 !important; font-size:0.5625rem !important; font-weight:500; letter-spacing:.14em; }
.twin-tour-card h2 { margin:0; font-size:clamp(1.8125rem,3vw,2.4375rem); line-height:.97; letter-spacing:-.045em; }
.twin-tour-card > p:not(.twin-tour-label):not(.twin-tour-error) { margin:14px 0 0; color:rgba(255,255,255,.76); font-size:0.875rem; line-height:1.55; }
.twin-tour-error { margin:14px 0 0; padding:10px 12px; border:1px solid rgba(255,193,170,.35); border-radius:10px; color:#ffd1bf; background:rgba(125,53,31,.25); font-size:0.75rem; line-height:1.4; }
.twin-tour-error[hidden] { display:none; }
.twin-tour-actions { margin-top:24px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.twin-tour-actions span { color:rgba(255,255,255,.58); font-size:0.625rem; text-align:center; }
.twin-tour-actions button { min-height:42px; padding:0 15px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:transparent; font-size:0.6875rem; font-weight:500; }
.twin-tour-actions button:last-child { color:#102f27; border-color:#d7f451; background:#d7f451; }
.twin-tour-actions button:disabled { cursor:not-allowed; opacity:.42; }
.twin-tour-exit { width:100%; margin-top:12px; padding:8px; border:0; color:rgba(255,255,255,.72); background:transparent; font-size:.6875rem; text-decoration:underline; text-underline-offset:3px; }
.twin-tour-exit:hover { color:#fff; }
@media (max-width:1180px) {
  .twin-launcher span { display:none; }
  .twin-launcher { padding:5px; }
}
@media (max-width:700px) {
  .twin-tour-card,.twin-tour-card.centered { right:10px; bottom:10px; left:10px !important; top:auto !important; width:auto; max-height:min(68vh,570px); transform:none; border-radius:22px; }
  .twin-tour-highlight { border-radius:12px; }
  .twin-tour-persona img { width:54px; height:54px; }
  .twin-tour-actions { grid-template-columns:auto 1fr auto; }
}
@media (max-width:520px) {
  .twin-launcher { display:inline-flex; }
  .twin-tour-card { padding:20px; }
  .twin-tour-card h2 { font-size:1.8125rem; }
  .twin-tour-actions button { min-height:40px; padding:0 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .twin-tour-highlight,.twin-tour-progress i,.twin-launcher { transition:none; }
}

/* Public-website palette with optional tenant-scoped partner colors */
:root {
  --portal-primary:#1d1d1f;
  --portal-primary-ink:#fff;
  --portal-accent:#d8d8d6;
  --portal-accent-ink:#1d1d1f;
  --portal-signal:#b8d7ec;
  --ink:#1d1d1f;
  --ink-2:#080808;
  --cream:#f5f5f7;
  --paper:#fff;
  --cobalt:var(--portal-primary);
  --blue-dark:#080808;
  --coral:#b8d7ec;
  --lime:var(--portal-accent);
  --sand:#e7e7e2;
  --line:rgba(10,10,10,.16);
  --muted:#6e6e73;
}
body { background:#f5f5f7; color:var(--ink); }
.sidebar { background:var(--portal-primary); border-color:rgba(255,255,255,.14); }
.nav-item.active { color:var(--portal-accent-ink); background:var(--portal-accent); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.nav-item b,.avatar,.icon-button i,.health-mini i,.status-dot:not(.warning) { color:var(--portal-accent-ink); background:var(--portal-accent); }
.workspace-mark { color:#1d1d1f; background:#d8d8d6; }
.pill-button.dark,.connected-action { color:var(--portal-primary-ink); background:var(--portal-primary); border-color:var(--portal-primary); }
.connected-action.secondary { color:var(--ink); background:#fff; border-color:var(--line); }
.metric-feature,.adoption-panel,.integration-hero,.connected-level,.connected-reward.is-unlocked,.goal-rail,.owned-data-intro,.data-unlock { color:var(--portal-primary-ink); background:var(--portal-primary); border-color:var(--portal-primary); }
.metric-grid.commerce-first .metric-feature,.feature-path.active,.assistant-answer,.industry-benchmark-panel,.solution-pulse-grid > button:nth-child(4),.marketing-intro,.level-card,.achievement-card.unlocked { color:var(--portal-primary-ink); background:var(--portal-primary); border-color:var(--portal-primary); }
.connected-level > span,.connected-level > h2,.connected-reward.is-unlocked > span,.goal-rail > strong { color:var(--portal-accent); }
.adoption-panel .panel-header h2 b,.benchmark-grid strong,.owned-data-intro > strong,.level-badge,.goal-rail > strong { color:var(--portal-accent); }
.connected-level > div i,.connected-reward > div i,.goal-choices button.active,.level-progress > i em,.goal-rail > i em { color:var(--portal-accent-ink); background:var(--portal-accent); border-color:var(--portal-accent); }
.connected-goal:is(button).active,.audience-presets button.active { color:var(--portal-primary-ink); border-color:var(--portal-primary); background:var(--portal-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--portal-primary) 13%,transparent); }
.adoption-panel .bar-chart div i,.solution-pulse-grid > button:nth-child(4) i em,.achievement-card.locked > i em { background:var(--portal-signal); }
.level-badge { border-color:color-mix(in srgb,var(--portal-accent) 48%,transparent); box-shadow:0 0 0 10px color-mix(in srgb,var(--portal-accent) 8%,transparent); }
.search-button { color:var(--ink); background:color-mix(in srgb,var(--portal-signal) 34%,#fff); border-color:color-mix(in srgb,var(--portal-signal) 64%,#fff); }
.model-results article:nth-child(3) { color:var(--portal-primary-ink); background:var(--portal-primary); border-color:var(--portal-primary); }
.metric-feature .positive,.chart-note b,.connection-list b { color:#b8d7ec; }
.twin-replay { color:var(--portal-primary-ink); background:var(--portal-primary); }
.twin-tour-card { color:var(--portal-primary-ink); background:var(--portal-primary); }
.twin-tour-highlight { border-color:var(--portal-accent); box-shadow:0 0 0 9999px rgba(5,5,5,.72),0 0 0 6px color-mix(in srgb,var(--portal-accent) 22%,transparent); }
.twin-tour-persona img { border-color:var(--portal-accent); }
.twin-tour-persona small,.twin-tour-label { color:var(--portal-accent) !important; }
.twin-tour-progress i,.twin-tour-actions button:last-child { color:var(--portal-accent-ink); background:var(--portal-accent); border-color:var(--portal-accent); }

/* Brand-system billing lifecycle review */
.billing-review-banner { margin-top:36px; padding:30px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; border-radius:28px; color:#fff; background:#1d1d1f; }
.billing-review-banner div { display:grid; gap:8px; }
.billing-review-banner span,.billing-section-head span,.billing-summary-card > span,.billing-plan-card > div > span,.billing-usage-grid article > span,.billing-email-preview > span { color:#8f9096; font-size:0.625rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.billing-review-banner strong { font-size:clamp(1.4375rem,3vw,2.25rem); letter-spacing:-.035em; }
.billing-review-banner p { max-width:760px; margin:0; color:rgba(255,255,255,.68); font-size:0.8125rem; line-height:1.55; }
.billing-review-banner > b { padding:10px 14px; border-radius:999px; color:#1d1d1f; background:#b8d7ec; font-size:0.625rem; letter-spacing:.1em; }
.billing-safeguards { margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.billing-safeguards span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; font-size:0.5625rem; font-weight:500; letter-spacing:.09em; }
.billing-summary-grid { margin-top:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.billing-summary-card { min-height:240px; padding:26px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:28px; background:#fff; }
.billing-summary-card > strong { margin:34px 0 8px; font-size:clamp(1.5625rem,3vw,2.25rem); letter-spacing:-.04em; }
.billing-summary-card > p { margin:0 0 24px; color:var(--muted); font-size:0.75rem; line-height:1.55; }
.billing-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.billing-review-section,.billing-connected-records { margin-top:24px; padding:clamp(24px,3vw,36px); border:1px solid var(--line); border-radius:28px; background:#fff; }
.billing-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.billing-section-head > div { max-width:780px; }
.billing-section-head h2 { margin:8px 0 0; font:500 clamp(1.875rem,4vw,3.25rem)/.98 var(--sans); letter-spacing:-.05em; }
.billing-section-head h2 em { font:400 1em/.98 var(--serif); }
.billing-section-head > p { max-width:420px; margin:0; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.billing-plan-grid { margin-top:28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.billing-plan-card { min-height:390px; padding:22px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:24px; background:#f5f5f7; }
.billing-plan-card.is-current { color:#fff; border-color:#1d1d1f; background:#1d1d1f; }
.billing-plan-card > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.billing-plan-card > div b { padding:5px 8px; border-radius:999px; color:#1d1d1f; background:#b8d7ec; font-size:0.5rem; letter-spacing:.08em; }
.billing-plan-card > strong { margin:38px 0 22px; font-size:clamp(2rem,3.4vw,3rem); letter-spacing:-.055em; }
.billing-plan-card > strong small { margin-left:5px; color:inherit; opacity:.62; font-size:0.75rem; font-weight:500; letter-spacing:0; }
.billing-plan-card ul { margin:0 0 28px; padding:0; display:grid; gap:9px; list-style:none; color:inherit; opacity:.78; font-size:0.6875rem; }
.billing-plan-card li::before { content:"✓"; margin-right:8px; color:#198754; font-weight:500; }
.billing-plan-card.is-current li::before { color:#b8d7ec; }
.billing-plan-card .connected-action { margin-top:auto; }
.billing-plan-card.is-current .connected-action.secondary { color:#fff; border-color:rgba(255,255,255,.24); background:transparent; }
.billing-usage-grid { margin-top:28px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.billing-usage-grid article { min-height:175px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; background:#f5f5f7; }
.billing-usage-grid article > strong { margin:auto 0 18px; font-size:clamp(1.9375rem,3.5vw,3.125rem); letter-spacing:-.05em; }
.billing-usage-grid article > strong small { color:var(--muted); font-size:0.875rem; }
.billing-usage-grid article > i { height:8px; overflow:hidden; border-radius:999px; background:#d8d8d6; }
.billing-usage-grid article > i em { height:100%; display:block; border-radius:inherit; background:#4f8fc7; transition:width .6s ease; }
.billing-usage-grid article > small { color:var(--muted); }
.billing-overage-total { color:#fff; border-color:#1d1d1f !important; background:#1d1d1f !important; }
.billing-warning-grid { margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.billing-warning { min-height:100px; padding:18px; display:grid; gap:9px; border:1px solid var(--line); border-radius:18px; background:#eef7f2; }
.billing-warning span { color:#198754; font-size:0.5625rem; font-weight:500; letter-spacing:.1em; }
.billing-warning strong { font-size:0.8125rem; line-height:1.35; }
.billing-warning.is-watch { background:#edf5fb; }
.billing-warning.is-watch span { color:#4f8fc7; }
.billing-warning.is-attention,.billing-warning.is-limit { background:#fff0eb; }
.billing-warning.is-attention span,.billing-warning.is-limit span { color:#b84c3c; }
.billing-control-form,.billing-plan-form { margin-top:16px; padding:18px; display:flex; align-items:end; flex-wrap:wrap; gap:12px; border:1px solid var(--line); border-radius:20px; background:#f5f5f7; }
.billing-plan-form { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); }
.billing-control-form label,.billing-plan-form label,.billing-migration-card label { display:grid; gap:7px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.06em; }
.billing-control-form input,.billing-plan-form input,.billing-migration-card select { width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; font:500 0.75rem var(--sans); }
.billing-control-form > small { margin:0 0 12px; color:var(--muted); font-size:0.625rem; }
.billing-version-list { margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:18px; }
.billing-version-row { min-height:72px; padding:14px 17px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px; border-bottom:1px solid var(--line); background:#fff; }
.billing-version-row:last-child { border-bottom:0; }
.billing-version-row > span { display:grid; gap:4px; }
.billing-version-row small { color:var(--muted); font-size:0.625rem; }
.billing-migration-grid,.billing-audit-grid { margin-top:26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.billing-migration-card,.billing-email-preview,.billing-audit-grid > div { min-height:310px; padding:24px; border:1px solid var(--line); border-radius:22px; background:#f5f5f7; }
.billing-migration-card { display:grid; align-content:start; gap:14px; }
.billing-email-preview { display:flex; flex-direction:column; align-items:flex-start; }
.billing-email-preview > strong { margin:34px 0 12px; font-size:1.5625rem; letter-spacing:-.035em; }
.billing-email-preview > p { margin:0 0 22px; color:var(--muted); font-size:0.8125rem; line-height:1.55; }
.billing-email-preview > small,.billing-migration-card > small { margin-top:12px; color:var(--muted); font-size:0.625rem; line-height:1.45; }
.billing-email-preview .connected-action { margin-top:auto; }
.billing-audit-grid h3 { margin:0 0 16px; font-size:1.125rem; }
.billing-ledger-list { display:grid; gap:8px; }
.billing-ledger-row { padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.billing-ledger-row > span { display:grid; gap:3px; }
.billing-ledger-row small,.billing-event-list small { color:var(--muted); font-size:0.5625rem; }
.billing-ledger-row code,.billing-event-list code { overflow:hidden; color:var(--muted); font:500 0.5625rem var(--sans); text-overflow:ellipsis; }
.billing-event-list { margin:0; padding:0; display:grid; list-style:none; }
.billing-event-list li { min-height:55px; padding:11px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border-bottom:1px solid var(--line); }
.billing-event-list li:last-child { border-bottom:0; }
.billing-event-list li > span { display:grid; gap:4px; text-transform:capitalize; }
.billing-connected-records { margin-top:24px; }
@media (max-width:1180px) {
  .billing-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .billing-summary-grid { grid-template-columns:1fr; }
  .billing-summary-card { min-height:210px; }
  .billing-plan-form { grid-template-columns:repeat(3,minmax(120px,1fr)); }
}
@media (max-width:760px) {
  .billing-review-banner,.billing-section-head { align-items:flex-start; grid-template-columns:1fr; flex-direction:column; }
  .billing-review-banner > b { width:max-content; }
  .billing-plan-grid,.billing-usage-grid,.billing-warning-grid,.billing-migration-grid,.billing-audit-grid,.billing-plan-form { grid-template-columns:1fr; }
  .billing-version-row,.billing-ledger-row { grid-template-columns:1fr; align-items:flex-start; }
  .billing-version-row .connected-status { width:max-content; }
  .connected-table-head.billing-row { display:none; }
  .connected-table-row.billing-row { min-width:0; grid-template-columns:1fr 1fr; gap:12px; }
  .connected-table-row.billing-row > strong { grid-column:1/-1; }
}

.portal-theme-panel form { margin-top:24px; display:grid; gap:20px; }
.portal-theme-modes { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border:0; }
.portal-theme-modes legend { margin-bottom:10px; color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.portal-theme-modes label { min-height:88px; padding:16px; display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:16px; background:#f6f6f3; cursor:pointer; }
.portal-theme-modes label:has(input:checked) { border-color:var(--portal-primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--portal-primary) 14%,transparent); }
.portal-theme-modes input { margin-top:3px; accent-color:var(--portal-primary); }
.portal-theme-modes strong,.portal-theme-modes small { display:block; }
.portal-theme-modes small { margin-top:5px; color:var(--muted); font-size:0.6875rem; }
.portal-theme-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.portal-theme-colors[hidden] { display:none; }
.portal-theme-colors label { min-height:64px; padding:12px 14px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--muted); font-size:0.6875rem; font-weight:500; }
.portal-theme-colors input { width:42px; height:42px; grid-row:1/3; padding:2px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.portal-theme-colors code { color:var(--ink); font:500 0.75rem var(--sans); text-transform:uppercase; }
.portal-theme-preview { min-height:210px; overflow:hidden; display:grid; grid-template-columns:150px 1fr; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:20px; background:#f5f5f7; }
.portal-theme-preview > div { grid-row:1/3; padding:22px; color:var(--preview-primary-ink); background:var(--preview-primary); }
.portal-theme-preview > div span { display:block; font-family:var(--serif); font-size:1.625rem; }
.portal-theme-preview > div b { display:block; margin-top:5px; font-size:0.5rem; letter-spacing:.16em; }
.portal-theme-preview nav { padding:20px 22px 8px; display:flex; gap:7px; }
.portal-theme-preview nav i { width:45px; height:8px; border-radius:999px; background:#d8d8d6; }
.portal-theme-preview nav i.active { background:var(--preview-accent); }
.portal-theme-preview article { margin:8px 22px 22px; padding:24px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:16px; background:#fff; }
.portal-theme-preview article small { color:var(--muted); font-size:0.5rem; letter-spacing:.1em; }
.portal-theme-preview article strong { margin:12px 0 auto; font-size:1.5625rem; }
.portal-theme-preview article button { min-height:36px; margin-top:20px; padding:0 14px; color:var(--preview-primary-ink); border:0; border-radius:999px; background:var(--preview-primary); pointer-events:none; }
.portal-theme-status { color:var(--muted); font-size:0.75rem; }
@media (max-width:700px) {
  .portal-theme-modes,.portal-theme-colors { grid-template-columns:1fr; }
  .portal-theme-preview { grid-template-columns:105px 1fr; }
  .portal-theme-preview > div { padding:16px; }
  .portal-theme-preview > div span { font-size:1.25rem; }
  .portal-theme-preview article { margin:6px 12px 14px; padding:18px; }
}
@media (max-height:820px) and (min-width:881px) {
  .sidebar { padding:18px 16px 14px; }
  .brand-block { padding:0 9px 15px; }
  .brand-block .wordmark img { width:112px; height:auto; }
  .main-nav { padding-top:10px; gap:1px; }
  .main-nav p { margin-bottom:4px; }
  .main-nav .nav-spacer { margin-top:7px; }
  .nav-item { min-height:38px; }
  .sidebar-footer { gap:7px; }
  .font-scale-control { padding:8px 10px; gap:5px 8px; }
  .font-scale-options button { min-height:28px; }
  .health-mini { padding:10px 12px; gap:4px; }
  .user-chip { padding:6px 8px; }
}

/* Server-authorized SPREEAI staff operations mode */
.mode-switch { padding:3px; display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.mode-switch button { min-height:34px; padding:0 13px; border:0; border-radius:999px; color:var(--muted); background:transparent; font:500 0.625rem var(--sans); cursor:pointer; }
.mode-switch button[aria-pressed="true"] { color:#fff; background:#1d1d1f; }
.ops-mode .workspace-picker,.ops-mode .twin-launcher,.ops-mode .search-button,.ops-mode #notifications-button,.ops-mode .health-mini { display:none !important; }
.ops-mode .main-nav > :not([data-ops-navigation]):not(p) { display:none; }
.ops-mode .main-nav > p { display:none; }
.ops-navigation { border:1px solid rgba(184,215,236,.32); }
.ops-kpi-grid { margin-top:34px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ops-kpi { min-height:180px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:28px; background:#fff; }
.ops-kpi span { color:var(--muted); font-size:0.625rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.ops-kpi strong { margin:auto 0 10px; font-size:clamp(2.5rem,4vw,3.875rem); letter-spacing:-.06em; }
.ops-kpi small { color:var(--muted); font-size:0.6875rem; line-height:1.4; }
.ops-kpi.is-attention { background:#fff0eb; }
.ops-kpi.is-attention strong { color:#b84c3c; }
.ops-panel { margin-top:24px; padding:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:28px; background:#fff; }
.ops-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.ops-panel-head h2 { margin:7px 0 0; font-size:clamp(1.6875rem,3vw,2.625rem); letter-spacing:-.045em; }
.ops-panel-head p { max-width:620px; margin:7px 0 0; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.ops-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ops-funnel { margin-top:24px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ops-funnel article { min-height:108px; padding:17px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; background:#f5f5f7; }
.ops-funnel span { color:var(--muted); font-size:0.5625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.ops-funnel strong { margin:auto 0 0; font-size:1.75rem; }
.ops-growth { height:210px; margin-top:24px; padding:16px 8px 0; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid var(--line); }
.ops-growth article { min-width:0; height:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; }
.ops-growth i { width:min(30px,70%); min-height:3px; border-radius:8px 8px 0 0; background:#4f8fc7; }
.ops-growth strong { font-size:0.6875rem; }
.ops-growth span { color:var(--muted); font-size:0.5rem; }
.ops-toolbar { margin-top:22px; display:flex; align-items:center; gap:10px; }
.ops-toolbar input { min-height:44px; padding:0 14px; flex:1; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:#fff; font:500 0.75rem var(--sans); }
.ops-table { margin-top:14px; overflow:auto; border:1px solid var(--line); border-radius:20px; }
.ops-row { min-width:1110px; min-height:68px; padding:13px 18px; display:grid; grid-template-columns:minmax(210px,1.7fr) minmax(205px,1.5fr) 130px 120px 110px 118px; gap:16px; align-items:center; border-bottom:1px solid var(--line); font-size:0.75rem; }
.ops-row:last-child { border-bottom:0; }
.ops-row.is-head { min-height:44px; color:var(--muted); background:#f5f5f7; font-size:0.5625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.ops-row > span { min-width:0; display:grid; gap:4px; }
.ops-row small { overflow:hidden; color:var(--muted); font-size:0.625rem; text-overflow:ellipsis; white-space:nowrap; }
.ops-status { width:max-content; padding:7px 10px; border-radius:999px; color:#315a72; background:#edf5fb; font-size:0.5625rem; font-weight:500; text-transform:capitalize; }
.ops-status.awaiting_approval,.ops-status.awaiting_confirmation { color:#8d3d29; background:#fff0eb; }
.ops-row-action { display:flex; justify-content:flex-start; }
.ops-approve-action { min-width:94px; min-height:38px; padding:0 14px; }
.ops-approve-action:disabled { cursor:wait; opacity:.62; }
.ops-action-none { color:var(--muted); }
.ops-approval-state { margin-top:20px; padding:15px 17px; display:grid; gap:4px; border:1px solid #cbdde9; border-radius:16px; color:#315a72; background:#edf5fb; font-size:0.6875rem; line-height:1.45; }
.ops-approval-state strong { font-size:0.75rem; }
.ops-approval-state.is-success { border-color:#cce4d7; color:#145c3b; background:#eef7f2; }
.ops-approval-state.is-error { border-color:#ef6f5b; color:#8d3d29; background:#fff0eb; }
.ops-approval-state.is-warning { border-color:#e7cf92; color:#765814; background:#fff8e5; }
.login-account-link { margin:16px 0 0; color:var(--muted); font-size:0.875rem; text-align:center; }
.login-account-link a,.lifecycle-card a { color:var(--ink); font-weight:500; }
.lifecycle-screen { min-height:100vh; }
.lifecycle-panel { justify-content:flex-start; overflow-y:auto; }
.lifecycle-card { width:min(100%,720px); margin:auto 0; padding:76px 0 40px; }
.lifecycle-card > h2 { margin-bottom:18px; }
.lifecycle-copy { max-width:620px; color:var(--muted); font-size:1rem; line-height:1.6; }
.lifecycle-success { margin-top:30px; padding:28px; border:1px solid #cce4d7; border-radius:28px; background:#eef7f2; color:#145c3b; }
.lifecycle-success[hidden] { display:none; }
.lifecycle-success.is-visible { display:block; }
.lifecycle-success > span { width:42px; height:42px; display:grid; place-items:center; border-radius:999px; background:#198754; color:white; font-size:1.25rem; }
.lifecycle-success h3 { margin:18px 0 8px; font-family:Georgia,serif; font-size:1.875rem; font-weight:400; }
.signup-progress { max-width:680px; margin:28px 0 32px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; list-style:none; }
.signup-progress li { min-width:0; position:relative; display:grid; justify-items:center; gap:8px; color:var(--muted); font-size:0.5625rem; letter-spacing:.03em; line-height:1.2; text-align:center; text-transform:uppercase; }
.signup-progress li:not(:last-child)::after { content:""; width:calc(100% - 18px); height:1px; position:absolute; top:16px; left:calc(50% + 18px); background:var(--line); }
.signup-progress li span { width:32px; height:32px; position:relative; z-index:1; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; font-size:0.6875rem; font-weight:500; }
.signup-progress li.is-current,.signup-progress li.is-complete { color:var(--ink); }
.signup-progress li.is-current span { border-color:var(--ink); color:#fff; background:var(--ink); }
.signup-progress li.is-complete span { border-color:#198754; color:#fff; background:#198754; }
.signup-review-note { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.5; text-align:center; }
.approval-status-card > span { background:var(--ink); }

/* Post-approval onboarding review build */
.approved-onboarding-preview { min-height:100vh; color:#1d1d1f; background:#f4f4f1; }
.approved-onboarding-shell { min-height:100vh; display:grid; grid-template-columns:310px minmax(0,1fr); }
.approved-onboarding-aside { min-height:100vh; padding:38px 30px; position:sticky; top:0; display:flex; flex-direction:column; align-self:start; color:#fff; background:#1d1d1f; }
.approved-onboarding-aside .wordmark { width:max-content; }
.approved-onboarding-aside .wordmark img { width:136px; height:auto; filter:brightness(0) invert(1); }
.approved-onboarding-aside > div { margin:64px 0 42px; }
.approved-onboarding-aside > div p { margin:0 0 12px; color:rgba(255,255,255,.55); font-size:0.625rem; font-weight:500; letter-spacing:.14em; }
.approved-onboarding-aside > div h2 { margin:0 0 14px; font-size:2rem; font-weight:560; letter-spacing:-.04em; line-height:1.05; }
.approved-onboarding-aside > div > span { color:rgba(255,255,255,.66); font-size:0.6875rem; }
.approved-timeline { margin:0; padding:0; display:grid; gap:2px; list-style:none; }
.approved-timeline li { position:relative; }
.approved-timeline li:not(:last-child)::after { content:""; width:1px; height:24px; position:absolute; top:42px; left:16px; background:rgba(255,255,255,.16); }
.approved-timeline button { width:100%; min-height:48px; padding:0; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; border:0; color:rgba(255,255,255,.45); background:transparent; text-align:left; font:inherit; }
.approved-timeline button:not(:disabled) { cursor:pointer; }
.approved-timeline button:disabled { cursor:default; }
.approved-timeline button span { width:34px; height:34px; position:relative; z-index:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:#1d1d1f; font-size:0.6875rem; font-weight:500; }
.approved-timeline button strong { font-size:0.75rem; }
.approved-timeline .is-current button { color:#fff; }
.approved-timeline .is-current button span { border-color:#d7f451; color:#1d1d1f; background:#d7f451; }
.approved-timeline .is-complete button { color:rgba(255,255,255,.8); }
.approved-timeline .is-complete button span { border-color:#a9dfbd; color:#133c23; background:#a9dfbd; }
.approved-reset { margin-top:auto; padding:12px 0; border:0; color:rgba(255,255,255,.6); background:transparent; font:500 0.6875rem var(--sans); text-align:left; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.approved-onboarding-main { min-width:0; min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.approved-onboarding-main > header { min-height:76px; padding:0 clamp(28px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #d9d9d5; background:rgba(244,244,241,.96); }
.approved-onboarding-main > header span { color:#696967; font-size:0.625rem; font-weight:500; letter-spacing:.12em; }
.approved-onboarding-main > header strong { font-size:0.75rem; }
.approved-onboarding-content { width:min(980px,100%); margin:auto; padding:clamp(40px,7vw,88px) clamp(28px,6vw,82px); }
.approved-welcome { max-width:880px; }
.approved-success-mark { width:52px; height:52px; margin-bottom:28px; display:grid; place-items:center; border-radius:50%; color:#133c23; background:#a9dfbd; font-size:1.375rem; font-weight:500; }
.approved-welcome h1,.approved-step-copy h1 { margin:8px 0 20px; font-size:clamp(3rem,6.5vw,6rem); font-weight:560; letter-spacing:-.065em; line-height:.9; }
.approved-welcome h1 em,.approved-step-copy h1 em { font-family:Georgia,serif; font-weight:400; }
.approved-welcome > p:not(.eyebrow),.approved-step-copy > p:not(.eyebrow) { max-width:650px; margin:0; color:#666663; font-size:1rem; line-height:1.6; }
.approved-handoff { margin:44px 0 34px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #d9d9d5; border-radius:20px; overflow:hidden; background:#fff; }
.approved-handoff article { min-height:126px; padding:20px; display:flex; flex-direction:column; gap:5px; border-right:1px solid #e4e4e0; }
.approved-handoff article:last-child { border-right:0; }
.approved-handoff article > span { width:28px; height:28px; margin-bottom:auto; display:grid; place-items:center; border-radius:50%; color:#133c23; background:#a9dfbd; font-size:0.6875rem; font-weight:500; }
.approved-handoff article.is-current { color:#fff; background:#1d1d1f; }
.approved-handoff article.is-current > span { color:#1d1d1f; background:#d7f451; }
.approved-handoff strong { font-size:0.8125rem; }
.approved-handoff small { color:#747472; font-size:0.6875rem; }
.approved-handoff article.is-current small { color:rgba(255,255,255,.66); }
.approved-welcome > .pill-button { width:max-content; display:inline-flex; }
.approved-time-note { margin:14px 0 0; display:block; color:#747472; font-size:0.6875rem; }
.approved-step-copy { margin-bottom:42px; }
.approved-step-copy h1 { font-size:clamp(2.75rem,5.4vw,5.125rem); }
.approved-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.approved-choice { min-height:210px; padding:24px; position:relative; display:flex; flex-direction:column; align-items:flex-start; border:1px solid #d7d7d3; border-radius:20px; color:#1d1d1f; background:#fff; text-align:left; cursor:pointer; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.approved-choice:hover { transform:translateY(-2px); border-color:#8d8d89; box-shadow:0 14px 30px rgba(0,0,0,.06); }
.approved-choice:focus-visible { outline:3px solid #4f8fc7; outline-offset:3px; }
.approved-choice.is-selected { border-color:#1d1d1f; box-shadow:inset 0 0 0 2px #1d1d1f; }
.approved-choice-check { width:32px; height:32px; margin-bottom:auto; display:grid; place-items:center; border:1px solid #c9c9c5; border-radius:50%; background:#f4f4f1; font-size:0.75rem; font-weight:500; }
.approved-choice.is-selected .approved-choice-check { border-color:#1d1d1f; color:#fff; background:#1d1d1f; }
.approved-choice strong { margin:28px 0 8px; font-size:1.125rem; }
.approved-choice small { color:#6f6f6c; font-size:0.75rem; line-height:1.5; }
.approved-details { max-width:720px; display:grid; gap:18px; }
.approved-details label { padding:20px; display:grid; grid-template-columns:1fr auto; gap:10px; border:1px solid #d7d7d3; border-radius:18px; color:#1d1d1f; background:#fff; font-size:0.75rem; font-weight:500; }
.approved-details label span { color:#777774; font-size:0.625rem; font-weight:500; text-transform:uppercase; }
.approved-details input { min-height:48px; padding:0 14px; grid-column:1/-1; border:1px solid #c9c9c5; border-radius:10px; color:#1d1d1f; background:#fff; font:500 0.875rem var(--sans); }
.approved-details input:focus { outline:3px solid rgba(79,143,199,.24); border-color:#4f8fc7; }
.approved-details [role="alert"] { margin:0; color:#8d3d29; font-size:0.75rem; }
.approved-ready-copy { margin-bottom:32px; }
.approved-ready-copy .approved-success-mark { margin-bottom:22px; }
.approved-plan { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.approved-plan article { min-height:110px; padding:20px; display:flex; flex-direction:column; gap:12px; border:1px solid #d7d7d3; border-radius:18px; background:#fff; }
.approved-plan article span { color:#747472; font-size:0.625rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.approved-plan article strong { font-size:1rem; line-height:1.4; }
.approved-final-actions { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.approved-final-actions .pill-button { width:auto; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.approved-action-status { min-height:22px; color:#145c3b; font-size:0.75rem; }
.approved-navigation { min-height:90px; padding:16px clamp(28px,5vw,76px); display:flex; align-items:center; justify-content:flex-end; gap:18px; border-top:1px solid #d9d9d5; background:#fff; }
.approved-navigation > button:not(.pill-button) { border:0; color:#525250; background:transparent; font:500 0.75rem var(--sans); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.approved-navigation > span { margin-right:auto; color:#8d3d29; font-size:0.6875rem; }
.approved-navigation .pill-button:disabled { opacity:.38; cursor:not-allowed; }
.approved-navigation-finished { justify-content:space-between; }
@media (max-width:900px) {
  .approved-onboarding-shell { grid-template-columns:1fr; }
  .approved-onboarding-aside { min-height:auto; padding:22px 24px; position:static; }
  .approved-onboarding-aside > div { margin:28px 0 22px; }
  .approved-onboarding-aside > div h2 { font-size:1.5rem; }
  .approved-timeline { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  .approved-timeline li:not(:last-child)::after { width:calc(100% - 24px); height:1px; top:14px; left:27px; }
  .approved-timeline button { min-height:42px; grid-template-columns:1fr; gap:6px; justify-items:start; }
  .approved-timeline button span { width:28px; height:28px; }
  .approved-timeline button strong { font-size:0.5625rem; }
  .approved-reset { margin-top:16px; }
  .approved-onboarding-main > header { min-height:62px; }
}
@media (max-width:680px) {
  .signup-progress li strong { font-size:0.5rem; }
  .approved-timeline button strong { display:none; }
  .approved-onboarding-main > header { padding:0 20px; }
  .approved-onboarding-main > header span { display:none; }
  .approved-onboarding-content { padding:44px 20px; }
  .approved-welcome h1,.approved-step-copy h1 { font-size:3.25rem; }
  .approved-handoff { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approved-handoff article:nth-child(2) { border-right:0; }
  .approved-handoff article:nth-child(-n+2) { border-bottom:1px solid #e4e4e0; }
  .approved-choice-grid,.approved-plan { grid-template-columns:1fr; }
  .approved-choice { min-height:170px; }
  .approved-navigation { min-height:82px; padding:14px 20px; }
  .approved-navigation .pill-button { min-width:132px; }
  .approved-final-actions { display:grid; }
  .approved-final-actions .pill-button { width:100%; }
}
.lifecycle-success p { margin:0 0 22px; line-height:1.6; }
.lifecycle-success .pill-button { width:max-content; color:white; text-decoration:none; }
@media(max-width:720px){.lifecycle-card{padding-top:58px}.lifecycle-card > h2{font-size:3rem}}
.ops-status.verified { color:#145c3b; background:#eaf8f0; }
.ops-status.disabled { color:#666; background:#efefec; }
.ops-empty { margin:0; padding:28px; color:var(--muted); text-align:center; }
.ops-source-note { margin:16px 0 0; color:var(--muted); font-size:0.625rem; }
@media (max-width:1180px) {
  .ops-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-funnel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mode-switch button { padding:0 9px; }
}
@media (max-width:760px) {
  .top-actions .mode-switch { order:-1; }
  .mode-switch button { font-size:0.5625rem; }
  .ops-kpi-grid,.ops-funnel { grid-template-columns:1fr 1fr; }
  .ops-panel-head { align-items:flex-start; flex-direction:column; }
  .ops-growth { gap:3px; }
  .ops-growth span { font-size:0.4375rem; transform:rotate(-45deg); transform-origin:center; }
}

.connected-analytics-tabs { margin:18px 0 22px; display:inline-flex; gap:4px; padding:4px; border:1px solid #d9d9d5; border-radius:999px; background:#f5f5f2; }
.connected-analytics-tabs button { min-height:40px; padding:0 18px; border:0; border-radius:999px; color:#686866; background:transparent; font:500 0.75rem var(--sans); cursor:pointer; }
.connected-analytics-tabs button[aria-selected="true"] { color:#fff; background:#1d1d1f; }
.connected-analytics-tabs button:focus-visible { outline:3px solid rgba(79,143,199,.35); outline-offset:2px; }
.connected-metric-definitions { margin:0 0 24px; padding-bottom:2px; border:1px solid #d9d9d5; border-radius:18px; background:#fff; overflow:hidden; }
.connected-metric-definitions > h2 { margin:20px 18px 0; font-size:1.5rem; }
.connected-metric-definitions h3 { margin:22px 18px 9px; font-size:1rem; }
.connected-formula-intro { margin:18px; padding:14px 16px; border-radius:14px; background:#f5f5f2; }
.connected-formula-intro p { margin:5px 0 0; color:#646461; line-height:1.5; }
.connected-formula-table { margin:0 18px; border:1px solid #ecece8; border-radius:14px; overflow:hidden; }
.connected-formula-row { display:grid; grid-template-columns:1.05fr 1.6fr 1fr 1.6fr; gap:12px; align-items:start; padding:12px 14px; border-top:1px solid #ecece8; }
.connected-formula-row:first-child { border-top:0; }
.connected-formula-row code { white-space:normal; overflow-wrap:anywhere; color:#242422; font-size:0.75rem; line-height:1.45; }
.connected-formula-row span,.connected-formula-row small { color:#6b6b68; line-height:1.45; }
.connected-metric-definitions > .connected-contract-note { display:block; margin:18px; }
@media (max-width:820px) { .connected-formula-row { grid-template-columns:1fr; gap:4px; } }


/* ===== 2026-09-11 QA action summary (Danel) - authentication layout and control states ===== */
@media (min-width: 881px) {
  .login-screen { height: 100vh; height: 100dvh; overflow: hidden; }
  .login-art { overflow: hidden; }
  .login-panel { overflow-y: auto; justify-content: flex-start; padding-top: 96px; }
}
.login-panel { position: relative; }
.dashboard-access-link[hidden] { display: none; }
.password-reset-back { display: inline-block; margin-bottom: 16px; }
.login-form input[aria-invalid="true"] { border-color: #b3261e; background: #fff6f4; box-shadow: 0 0 0 1px #b3261e inset; }
.login-error { border-color: #b3261e; }
.pill-button:disabled { opacity: .55; cursor: not-allowed; }
.pill-button:disabled:hover { transform: none; box-shadow: none; }
.provider-button:disabled:hover { transform: none; box-shadow: none; }
a.pill-button:hover, a.pill-button:focus, .forgot-password-button:hover { text-decoration-thickness: 1px; }
a.connected-action:hover, a.connected-action:focus { text-decoration: none; }
.provider-button { min-height: 52px; border-radius: 8px; }
.provider-slot { min-height: 52px; }